html{
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif !important;
}

body{
   background-color: #1e1f21 !important;
}
   .email-wrapper .mail-list-container {
       /*height: 100%;*/
       overflow: auto;
       padding-left: 0;
       padding-right: 0;
       overflow-x: hidden;
       width: 100%;
   }
  
   
   .search_ .mail_search {
       display: block;
       width: 50%;
       padding: .375rem .75rem;
       font-size: 1rem;
       font-weight: 400;
       line-height: 1.5;
       color: #495057;
       background-color: #fff;
       background-clip: padding-box;
       border: 1px solid #ced4da;
       border-radius: 25px;
       padding-left: 20px;
       transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
   }

   .search_ .mail_search:focus {
       color: #495057; 
       border-color: #80bdff;
       outline: 0;
       box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
   }
      /* switch */
      .switch {
       position: relative;
       display: inline-block;
       width: 60px;
       height: 34px;
   }

   .switch input {
       display: none;
   }

   .switch label {
       height: 2.1rem;
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: #ccc;
       border-radius: 34px;
       cursor: pointer;
       transition: background-color 0.3s;
   }

   .switch input:checked+label {
       background-color: #2196F3;
   }

   .switch label:before {
       position: absolute;
       content: "";
       height: 26px;
       width: 26px;
       left: 4px;
       bottom: 4px;
       background-color: white;
       border-radius: 50%;
       transition: transform 0.3s;
   }

   .switch input:checked+label:before {
       transform: translateX(26px);
   }

 .mail-view { 
   overflow: auto; 
   opacity: 1; 
   color: #454547 !important;
   background-color:  #fff !important;
   transition: transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; 
   border-radius: 10px;
   border: 1px solid; 
 }

.mail-view-original { 
   overflow: auto; 
   opacity: 1;  
   position: relative;
   top: 0;
   float: right; 
}


.flex3 {
      flex: auto !important;
   position: absolute !important;
   top: 0;
   width: 99.8%;
   transition: left 3s ease;
   left: 0;
   float: right !important;
   height: 99%;
   z-index: 10;
   } 

.cc{
   position: absolute;
   padding-top: 0 !important;
   background-color: #fff;
   padding: 10px;
   z-index: 1;
    width: -webkit-fill-available;
   width: -moz-available; 
}
.search_{
       position: relative;
   justify-content: center;
   display: flex;
}
.mail_search{

}



   .checkbox-wrapper-25 input[type="checkbox"] {
       background-image: -webkit-linear-gradient(hsla(0, 0%, 0%, .1), hsla(0, 0%, 100%, .1)), 
           -webkit-linear-gradient(left, #484646 50%, #0069D9 50%);
       background-size: 100% 100%, 200% 100%;
       background-position: 0 0, 15px 0;
       border-radius: 25px; 
       cursor: pointer;
       height: 20px;
       padding-right: 25px;
       width: 40px;
       -webkit-appearance: none;
       -webkit-transition: .25s;
   }

   .checkbox-wrapper-25 input[type="checkbox"]:after {
       background-color: #eee;
       background-image: -webkit-linear-gradient(hsla(0, 0%, 100%, .1), hsla(0, 0%, 0%, .1));
       border-radius: 25px; 
       content: '';
       display: block;
       height: 20px;
       width: 28px;
   }

   .checkbox-wrapper-25 input[type="checkbox"]:checked {
       background-position: 0 0, 35px 0;
       padding-left: 13px;
       padding-right: 0;
   }

   #compose_div {
     height: 83%;
     width: 50%;
     overflow: hidden;
     left: 49.8%;
     top: 500%;
     position: absolute;
     transition:  top 1s ease;
     padding: 12px;
     background-color: #fff;
     z-index: 10;
     color: #454547;
     border: 1px solid;
}

#compose_div.open { 
 left: 49.8%; 
 top: 16%;
 border-radius: 8px;
 position: absolute;
 transition:  top 1s ease;
 border: 1px solid; 
}

.close {
   position: absolute;
   top: 10px;
   right: 10px;
   cursor: pointer;
   color: #454547 !important;
}

.compose_btn{
   border-radius: 25px !important; 
   font-size: 14px !important;
   margin-top: 18px;
   height: 35px;
   width: 90%;
   background-color: #4573d2;
   color: #fff;
   border: 2px solid #4573d2;
   font-weight: bold;
}
.compose_btn:hover{ 
   background-color: #fff;
   color: #4573d2;
}
.compose_btn:focus {
 outline: none; 
 border: 2px solid #4573d2; 
}

.mail_name{
   width: 15% !important; 
}
.mail_sub{
   width: 40%; 
}
.mail_pin{
   width: 5%; 
}
.mail_time{
   width: 15%; 
}
.mail_sub, .mail_pin, .mail_name, .mail_time{
   padding: 6px 10px 0px 10px;
   margin-bottom: 0!important;
   border-right: 0.2px solid #7c7c7c8c;
  

}
.msg-subject{
   margin-bottom: 0 !important;
}
.arr_right{
   display: none;
}
.mail-list-container .mail-list:hover .arr_right{
   display: block;
}


   .popup_bg {
       display: none;
     
   }
   .mail-list{
       height: 35px !important;
       font-size: 14px !important;
        border-top: 0.2px solid #7c7c7c8c; 
        
   }
   .mails .mail-list:last-child { 
         border-bottom: 0px solid #7c7c7c8c;
   }

   <!-- POP UP Secdule-->

   .ui-widget-header{
       background: blue !important;
   }

   .ui-dialog{
       padding: 0 !important;
   }