@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
*{
    font-family: 'Roboto', sans-serif;
}
:root {
    --main-hover : #0b578b;
    --main-ts : .3s ease;
    --main-color : #1471B0;
    --border-radius: 15px;
}
.login-container{
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
}

.login-formside{
    width: 480px;
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    padding-top: 111px;
}

.login-formside h2{
    color: #1471B0;
    text-align: center;
    font-size: 72px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 152px;
}
.login-banner{
    display: flex;
    width: calc(100% - 480px);
    height: 100%;
    background-color: #1471B0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-banner h2{
    color: #FFF;
    text-align: center;
    margin-top: 73px;
    font-size: 72px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.login-image{
    max-width: 100%;
    width: 624px;
    max-height: 60%;
}

.login-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login-form form{
    display: flex;
    flex-direction: column;
}

.login-form-group{
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}

.login-form-group label{
    color: rgba(1, 65, 108, 0.50);
    text-align: left;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 8px;
}

.login-form{
    width: 100%;
}

.login-form-group input{
    width: 100%;
    padding: 16px 0;
    color: #0C4F7C;
    border-bottom: 2px solid #0C4F7C;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

button{
    cursor: pointer;
    transition: var(--main-ts);
}

.login-submit{
    border-radius: 15px;
    background: #1471B0;
    padding: 10px;
    color: #FFF;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.login-submit:hover{
    background-color: var(--main-hover);
}

.error-notify{
    color: #FF0202;
    text-align: center;
    font-size: 15px;
    font-style: normal;
    max-width: 363px;
    font-weight: 700;
    line-height: normal;
    margin-top: 16px;
}

.forgot-password{
    display: flex;
    justify-content: flex-end;
    margin-top: 38px;
}

.forgot-password a{
    color: #1471B0;
    text-align: right;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    transition: var(--main-ts);
}
.forgot-password a:hover{
    color: var(--main-hover);
}


.dashboard-container{
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
}

.dashboard-sidebar{
    width: 100px;
    background-color: var(--main-color);
    height: 100%;
    border-radius: 0 0 60px 0;
    position: relative;
    display: flex;
    align-items: center;
}



.dashboard-contentbar{
    display: flex;
    flex-direction: column;
    width: calc(100% - 100px);
}

.contentside-header{
    width: 100%;
    background-color: var(--main-color);
    height: 60px;
    border-radius: 0 60px 60px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ch-left{
    display: flex;
    align-items: center;
}

.ch-left .header-title{
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-right: 36px;
}

#currentDate{
    color: #000;
    text-align: center;
    border-radius: var(--border-radius);
    padding: 10px 14px;
    background-color: #fff;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    width: 200px;
    height: 40px;
}
.edit-doctor-appointment-container{
  max-width: 1200px;
}

.ch-right{
    display: flex;
    align-items: center;
    padding-right: 100px;
}

.ch-right p{
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-left: 36px;
    
}

.show-notifications{
    width: 30px;
    height: 36px;
    background-position: center;
    background-color: transparent;
    background-repeat: no-repeat;
    position: relative;
    background-image: url(images/notify.svg);
    background-size: contain;
    transition: var(--main-ts);
}

.notification-count{
    color: #FFF;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -5px;
    right: -4px;
    width: 16px;
    height: 16px;
    background-color: #DE0000;
    border-radius: 100%;
}

.show-notifications:hover{
    transform: scale(1.06);
}
.dashboard-navbar{
    width: 100%;
    padding-left: 10px;
}

.dashboard-navbar ul{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.dashboard-navbar ul li a{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.dashboard-navbar ul li a {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-right: 8px;
    border-radius: 30px 0 0 30px;
}

.dashboard-navbar ul li a .link-hover-image{
    display: none;
}
.dashboard-navbar ul li a.active .link-hover-image{
    display: block;
}
.dashboard-navbar ul li a.active .link-main-image{
    display: none;
}

.dashboard-navbar ul li a p{
    margin-top: 12px;
}

.dashboard-navbar ul li a.active{
    background-color: #fff;
    color: var(--main-color);
}

.dashboard-navbar ul li a.active svg path{
    stroke: var(--main-color) !important;
}

.notification-list{
    display: flex;
    flex-direction: column;
}

.notification-list li{
    border-bottom:1px solid rgba(0, 0, 0, 0.10); 
    padding: 16px 0;
}

.notification-list li:last-child{
    border-bottom: 0;
}

.notification-item{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.notification_title{
    color: rgba(0, 0, 0, 0.75);
    margin-bottom: 8px;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.notification-body{
    color: rgba(0, 0, 0, 0.75);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 8px;
}

.notification-date{
    display: flex;
    width: 100%;
    justify-content: flex-end;
    color: rgba(0, 0, 0, 0.75);
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}
.modal-content .close{
    position: absolute;
    background-color: rgba(20, 113, 175, 0.50);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    top: 12px;
    z-index: 1;
    right: 14px;
}

.simplebar-scrollbar:before{
    background: #1471B0;
    opacity: .7 !important;
    left: 0;
    right: 0;
}
.simplebar-track.simplebar-vertical{
    width: 3px;
    background: rgba(0, 0, 0, 0.10);
}

.simplebar-content-wrapper{
    padding-right: 10px;
}

.modal-content{
    border-radius: 15px;
}

#notify-scroll{
    height: 400px;
}

.modal-body{
    padding-top: 55px;
}

.contentside-body{
    position: relative;
    width: 100%;
    height: calc(100vh - 100px);
    padding-bottom: 20px;
}

.content-side-body-inner{
    height: 100%;
}

.content-side-body-inner .simplebar-track.simplebar-vertical{
    width: 6px;right: 10px;
}

.content-side-body-inner .simplebar-content-wrapper{
    padding-right: 20px;
}

.contentside-body-content{
    width: 100%;
    padding: 50px 60px
}

.add_btn_cont {
    display: flex;
    width: 100%;
    margin-bottom: 24px;
}

.btn-at-left{
    justify-content: flex-start;
}

.btn-at-right{
    justify-content: flex-end;
}

.blue_btn{
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-radius: var(--border-radius);
    background-color: var(--main-color);
    transition: var(--main-ts);
    padding: 10px 24px;
}

.blue_btn:hover{
    background-color: var(--main-hover);
}

.table-filter-form-elements{
    display: flex;
    column-gap: 16px;
}

.table-filter-form-elements .c-form-group{
    width: 100%;
}

.c-form-group,
.popup_form_group{
    display: flex;
    flex-direction: column;
}

.popup_form_group{
    margin-bottom: 24px;
}

.c-form-group label{
    color: #000;
    text-align: left;
    margin-bottom: 8px;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.popup_form_group span{
    color: var(--main-color);
    text-align: left;
    margin-bottom: 8px;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.c-form-group input,
.popup_form_group input,
.custom_dropdown_open,
.c-form-group textarea,
.popup_form_group textarea,
.c-form-group select,
.popup_form_group select{
    color: #000;
    text-align: left;
    border-radius: var(--border-radius);
    padding: 0 16px;
    height: 48px;
    border: 1px solid rgba(0, 0, 0, 0.30);
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.custom_dropdown_open span{
    margin-bottom: 0;
}

.custom_dropdown_open span{
    color: #000;
}

.c-form-group textarea{
    height: 200px;
    resize: none;
}
.c-form-group select,
.popup_form_group  select{
    background-position: center right 16px;
    background-repeat: no-repeat;
    background-image: url(images/down.svg);
}

.table-bordered{
    border: 0;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
}

.table-striped tbody tr:nth-of-type(odd){
    background-color: #F9FAFF;
}

.table-bordered th, .table-bordered td{
    border: 0;;
}

.card{
    box-shadow: none;
}

table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td{
    text-align: center;
}

table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:before, table.dataTable thead .sorting_desc_disabled:after{
    bottom: 28px;
}

.table-bordered{
    overflow: hidden;
}

table.table-bordered.dataTable tbody td{
    position: relative;
}

table.table-bordered.dataTable tbody td:after{
    height: 24px;
    position: absolute;
    right: .0;
    top: 12px;
    background-color:#e8e8e8;
    content: '';
    width: 1px;
}


table.table-bordered.dataTable tbody td:last-child:after{
    content: none;
}

.table-striped thead {
    background-color: #1471B0;
}

.table_no{
    width: 60px !important;
}

#example1 tr th:first-child{
    width: 60px;
}

.table-striped thead{
    background-color: #1471B0;
}

.table-striped thead th{
    color: #fff;
}

.table-striped thead th,
.table-striped td{
    text-align: center;
}

.table-bordered{
    border-collapse: collapse;
}

.users_table_container{
    margin-top: 50px;
}

.table tr td:last-child:after{
    content: none;
}

.table th, .table td{
    position: relative;
}

.table tr td:after{
    position: absolute;
    right: 0;
    width: 1px;
    height: 24px;
    content: '';
    background-color: rgba(0, 0, 0, 0.1);
    top: 50%;
   
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transform: translateY(-50%);
}

.table tr td:last-child:after{
    content: none;
}

.table th, .table td{
    position: relative;
}

.table tr th:after{
   position: absolute;
   right: 0;
   width: 1px;
   height: 24px;
   content: '';
   background-color: #fff;
   top: 50%;
  
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.table tr th:last-child:after{
    content: none;
}


.table-filter-form-elements .blue_btn{
    margin-top: 30px;
}

.table-action-buttons{
    display: flex;
    justify-content: center;
    column-gap: 20px;
}

.table-action-buttons a,
.table-action-buttons button{
    background-position: center;
    background-repeat: no-repeat;
    transition: var(--main-ts);
    background: transparent;
}

.table-action-buttons button:hover{
    transform: scale(1.06);
}

.table-action-buttons a:hover{
    transform: scale(1.06);
}

.table-action-buttons .view-btn{
    width: 21.516px;
    height: 24px;
    background-image: url(images/view.svg);
}

.table-action-buttons .redcard-btn-off{
  width: 24px;
  height: 24px;
  background-image: url(images/exclamation-off.png);
}

.table-action-buttons .redcard-btn-on{
  width: 24px;
  height: 24px;
  background-image: url(images/exclamation-on.png);
}

.table-action-buttons .edit-btn{
    width: 24px;
    height: 24px;
    background-image: url(images/edit.svg);
}

.table-action-buttons .delete-button{
    width: 24px;
    height: 24px;
    background-image: url(images/delete.svg);
}

.confrim-modal-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 24px;
}
.confrim-buttons{
    display: flex;
    column-gap: 16px;
}
.confrim-modal-content button{
    min-width: 120px;
}
.confrim-modal-content h2{
    margin-bottom: 24px;
}

.page_title{
    margin-bottom: 36px;
}

.page_title h1{
    font-size: 30px;
}

.form-has-space .c-form-group{
    margin-bottom: 24px;
}

.small-button{
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
}
.c-form-group input[type="color"]{
    padding: 7px;
}

.add_patient_form_elements{
    max-width: 1000px;
}

.patient-details-container{
    display: flex;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: #FFF;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.10);
}

.patient-details-name-block{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px;
    text-align: center;
    color: #FFF;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    min-height: 200px;
    height: auto;
    background-color: var(--main-color);
    width: 305px;
}

.patient-details-details-block{
    width: calc(100% - 305px);
    padding: 40px;
}
.pd-info{
    display: flex;
    text-align: left;
    flex-direction: column;
    margin-bottom: 16px;
}

.pd-info-label{
    color: #07304B;
    text-align: left;
    margin-bottom: 5px;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.pd-info-body{
    color: #35576D;
    text-align: left;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    word-break: break-all;
}

.user-color{
    width: 52px;
    height: 18px;
}

.tab-container{
    display: flex;
    flex-direction: column;
}

.tab-links{
    display: flex;
    justify-content: center;
}

.tab-links ul{
    display: flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: var(--border-radius);
    background: #F9FAFF;
    column-gap: 4px;
}

.tab-links ul li a{
    color: #8BCBEF;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 7px 24px;
    border-radius: var(--border-radius);
    transition: var(--main-ts);
}

.tab-links ul li a:hover{
    color: var(--main-color);
}

.tab-links ul li.active a{
    background: #FFF;
    box-shadow: 0px 0px 15px 0px rgba(0, 23, 53, 0.10);
    color: var(--main-color);
}


.tab-box{
    display: none;
}

.tab-box.active{
    display: block;
}

.calendar_icon{
    background-position: center right 16px;
    background-repeat: no-repeat;
    background-image: url(images/big-calendar.svg);
    background-size: 20px;
}

.button-group label{
    opacity: 0;
    pointer-events: none;
}


#doctorAppointment .modal-dialog,
#patientArchive .modal-dialog{
    max-width: 1100px;
}

.custom_dropdown{
    display: flex;
    flex-direction: column;
    width: 100%;
    z-index: 2;
  }
  
  .custom_dropdown_open{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .custom_dropdown input[type='radio'] {
    -webkit-appearance:none;
  }
  .custom_dropdown{
    position: relative;
  }
  .custom_dropdown_drop{
    position: absolute;
    width: 100%;
    left: 0;
    border: 1px solid #172E2A;
    background-color: #fffffc;
    z-index: 1;
    top: 100%;
    display: none;
  }
  .custom_dropdown_drop.active{
    display: block;
  }
  
  .custom_dropdown_open svg{
    transition: .3s ease;
  }
  
  .custom_dropdown_open.active svg{
    transform: rotate(180deg);
  }
  
  .custom_dropdown[data-selected="true"] .custom_dropdown_open{
    color: #172E2A;
  }
  
  .custom_dropdown_drop ul{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px 0;
  }
  
  .custom_dropdown_drop ul li{
    width: 100%;
    list-style-type: none;
    height: 42px;
    position: relative;
    padding-left: 0;
  }
  
  .custom_dropdown_drop ul li p{
    padding: 0 16px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    color: #172E2A;
    transition: .2s ease;
    font-size: 16px;
    line-height: 22.4px;
    padding-right: 24px;
    position: relative;
  }

  .custom_dropdown_drop ul li p span{
    width: 10px;
    height: 10px;
    border-radius: 100%;
    position: absolute;
    margin-bottom: 0;
    right: 16px;
  }
  
  .custom_dropdown_drop ul li input{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
  }
  
  .custom_dropdown_drop ul li:hover p{
    background-color: rgba(20, 113, 176,.3);
    color: #fff;
  }
  
  .custom_dropdown_drop ul li input:checked + p{
    background-color: rgba(20, 113, 176,.3);
    color: #fff;
  }
  
  .inline-calendar-row{
    padding: 32px;
    padding-top: 0;
  }
  

  .popup_inline_calendar_box{
    width: 355px;
  }

  .popup_form_box{
    width: calc(100% - 355px);
  }

  .popup_form_container{
    padding: 0 24px;
  }

  .inline-calendar-row input{
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--main-color);
  }

  .file_upload_input{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    padding: 0 16px;
    height: 48px;
    border: 1px solid rgba(0, 0, 0, 0.30);
  }

  .file_up{
    width: 100%;
    height: 100%;
    opacity: 0;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 5;
    cursor: pointer;
  }

  .file_upload_input .upload_inp_containerr{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .file_upload_input .upload_inp_containerr span{
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
    padding: 16px;
    display: flex;
    align-items: center;
    height: 36px;
    border-radius: 16px;
    background: #1471B0;
    flex: none;
    margin-right: 16px;
  }

  .file_upload_input .upload_inp_containerr p{
    color: #1471B0;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    max-width: 55%;
    word-break: break-all;
    overflow: hidden;
  }

  .settings-list{
    width: 1000px;
  }

  .settings-item{
    width: 100%;
    margin-bottom:24px;
    transition: var(--main-ts);
    border-radius: var(--border-radius);
  }

  .settings-item:hover{
    transform: translateY(-3px);
    -webkit-box-shadow: 0px 3px 11px -1px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 3px 11px -1px rgba(0,0,0,0.4);
box-shadow: 0px 3px 11px -1px rgba(0,0,0,0.4);
  }

  .settings-item a{
    display: flex;
    background-color: var(--main-color);
    font-size: 20px;
    justify-content: center;
    align-items: center;
    color: #fff;
    min-height: 200px;
    border-radius: var(--border-radius);
  }

  .service_color{
    width: 16px;
    height: 16px;
    border-radius: 100%;
  }

  .service_color_cont{
    display: flex;
    justify-content: center;
  }

  .small-table{
    width: 800px;
  }
  .settings-add-form{
    display: flex;
    align-items: center;
    column-gap: 16px;
  }

  .unvisible_label{
    pointer-events: none;
    opacity: 0;
  }

  .settings_addd_submit{
    min-width: 200px;
  }

  .wrapper{
    width: 90%;
    background: #f6f6f6;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
  }
  .wrapper header.calendar-header{
    display: flex;
    align-items: center;
    padding: 25px 30px 10px;
    justify-content: space-between;
  }
  header.calendar-header .icons{
    display: flex;
  }
  header.calendar-header .icons span{
    height: 38px;
    width: 38px;
    margin: 0 1px;
    cursor: pointer;
    color: #878787;
    text-align: center;
    line-height: 38px;
    font-size: 1.9rem;
    user-select: none;
    border-radius: 50%;
  }
  .icons span:last-child{
    margin-right: -10px;
  }
  header.calendar-header .icons span:hover{
    background: #f2f2f2;
  }
  header.calendar-header .current-date{
    font-size: 1.45rem;
    font-weight: 500;
  }
  .calendar{
    padding: 20px;
  }
  .calendar ul{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    text-align: center;
  }
  .calendar .days{
    margin-bottom: 0;
  }
  .calendar li{
    color: #333;
    width: calc((100% / 7) - 4px);
    font-size: 1.07rem;
    aspect-ratio: 2/1;
    background-color: #f6f6f6;
  }
  .calendar .weeks li{
    font-weight: 500;
    cursor: default;
    height: 30px;
    width: calc(100% / 7);
  }
  .calendar .days{
    gap: 4px;
  }
  .calendar .days li{
    z-index: 1;
    cursor: pointer;
    font-weight: 500;
    position: relative;
    border: 2px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 15px;
    transition: var(--main-ts);
  }
  .calendar .days li:hover{
    border: 2px solid #dddddd;
  }
  .randevue-count{
   margin-top: 16px;
  }
  .days li.inactive{
    color: #aaa;
  }
  .days li.active{
    border-bottom: 3px solid var(--main-color);
  }
  .days li::before{
    position: absolute;
    content: none;
    left: 50%;
    top: 50%;
    height: 40px;
    width: 40px;
    z-index: -1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .days li.active::before{
    background: #9B59B6;
  }
  .days li:not(.active):hover::before{
    background: #f2f2f2;
  }

  .randevue-container{
    display: none;
  }
  .randevue{
    display: flex;
    align-items: center;
  }

  .randevue span{
    margin-left: 24px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    margin-bottom: 0;
  }

  .randevue-modal-content{
    display: flex;
    flex-direction: column;
    max-height: 400px;
    overflow-y: auto;
  }

  .randevue-modal-content .randevue{
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);;
  }

  .randevue-modal-content .randevue:last-child{
    border-bottom: 0;
  }



  .calendar .days li[data-active="true"]{
    background-color: rgba(125, 56, 101,.5);
  }

  
 

  .calendar .days li[data-patient="1"]{
    background-color: rgba(254, 196, 210,.5);
  }

  .calendar .days li[data-patient="2"]{
    background-color: rgba(215, 116, 59,.5);
  }
  .calendar .days li[data-patient="4"]{
    background-color: rgba(85, 57, 115,.5);
  }

  .calendar .days li[data-patient="5"]{
    background-color: rgba(170, 98, 136,.5);
  }

  .calendar .days li[data-patient="6"]{
    background-color: rgba(212, 159, 153,.5);
  }

  .calendar .days li[data-patient="7"]{
    background-color: rgba(255, 249, 227,.5);
  }

  .calendar .days li[data-patient="8"]{
    background-color: rgba(194, 222, 220,.5);
  }

  .calendar .days li[data-patient="9"]{
    background-color: rgba(170, 251, 220, 0.5);
  }

  .calendar .days li[data-patient="10"]{
    background-color: rgba(84, 91, 119,.5);
  }

  .calendar .days li[data-patient="11"]{
    background-color: rgba(191, 204, 181,.5);
  }


  .calendar .days li[data-patient="3"]{
    background-color: rgba(148, 146, 23,.5);
  }

  .calendar .days li[data-patient="12"]{
    background-color: rgba(248, 183, 3,.5);
  }
  header.calendar-header .icons svg{
    width: 20px;
    height: 20px;
  }
  .days li.inactive .randevue-count{
    display: none;
  }

  .randevue_modal_title{
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 16px;
  }
  .hamburger_menu_open{
    width: 30px;
    height: 30px;
    background-color: transparent;
    display: none;
  }

  .hamburger_menu_open svg{
    width: 100%;
    height: 100%;
  }

  .mobile_menu_close{
    position: absolute;
    right: 10px;
    top: 19px;
    background-color: transparent;
  }

  .mobile_menu_close svg{
    width: 24px;
    height: 24px;
  }
.layer{
  position: fixed;
  width: 100%;
  height: 100vh;
  opacity: .3;
  background-color: #000;
  left: 0;
  top: 0;
  z-index: 8;
  display: none;
}
  .mobile_menu{
    width: 280px;
    left: 0;
    top: 0;
    height: 100vh;
    position: fixed;
    z-index: 9;
    transition: .5s ease;
    opacity: 0;
    background-color: var(--main-color);
    transform: translateX(-100%);
  }

  .mobile_menu.active{
    opacity: 1;
    transform: translateX(0);
  }

  .mobile_menu_inner{
    width: 100%;
    height: 100vh;
    padding: 60px 0;
  }

  .mobile_menu_inner ul{
    display: flex;
    flex-direction: column;
  }

  .mobile_menu_inner ul li{
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #fff;
    
  }

  .mobile_menu_inner ul li a{
    font-size: 16px;
    color: #fff;
    padding: 10px 20px;
    width: 100%;
  }
  

  .mobile_menu_inner ul li.active a{
    color: var(--main-color);
    background-color: #fff;
  }

  @media(max-width:1440px){
    .wrapper{
        width: 100%;
    }


    .calendar li{
        aspect-ratio: 2/1.5;
    }
  }

  @media(max-width:1200px){
    .wrapper{
        width: 100%;
    }

    .randevue-count{
      margin-top: 10px;
    }
  }

  @media(max-width:1000px){
    .wrapper{
      width: 100%;
    }
    .settings-list{
      width: 100%;
    }
    .calendar li{
      height: 52px;
      border-radius: 5px !important;
    }
    .calendar .days li .randevue-count{
      width: 6px;
      height: 6px;
      margin-top: 3px;
      background-color: black;
      overflow: hidden;
      color: transparent;
      border-radius: 100%;
    }
  }

  @media(max-width:768px){
    .ch-left .header-title{
        display: none;
    }

    .hamburger_menu_open{
      display: block;
    }

    .dashboard-sidebar{
        display: none;
    }

    .show-notifications{
      width: 22px;
    }

    .dashboard-contentbar{
        width: 100%;
    }
    .contentside-body-content{
        padding: 50px 20px;
    }
    #currentDate{
        display: none;
    }

    .wrapper{
      width: 100%;
    }

    .content-side-body-inner .simplebar-content-wrapper{
        padding-right: 0;
    }

    .contentside-header{
        height: 60px;
        padding: 0 20px;
        border-radius: 0;
    }

    .ch-right {
        padding-right: 0;
    }
  }

  ::-webkit-scrollbar {
    width:3px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }

  .export_btn{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    column-gap: 8px;
    color: #1471B0;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-right: 17px;
    border-radius: 15px;
    background: #FFF;
    box-shadow: 0px 0px 5px 0px rgba(9, 61, 96, 0.25);
    margin-top: 28px;
  }
  .report-filter-form{
    display: flex;
    align-items: center;
  }

  .report-filter-form select{
    min-width: 215px;
  }

  .report-info-block{
    display: flex;
    flex-direction: column;
    border-radius: 15px ;
    overflow: hidden;
    background: #FFF;
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.10);
  }

  .report-info-title{
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.084px;
    padding: 18px 10px;
    background-color: #1471B0;
  }

  .report-page-container{
    max-width: 955px;
    margin-top: 24px;
  }

  .chart-block{
    margin-top: 33px;
  }
  .report_count{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 50px 20px;
  }

  .report_count p{
    color: #073D62;
    text-align: center;
    font-size: 72px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .report_count span{
    color: #073D62;
    font-size: 52px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  

  .developed_by{
    font-weight: 500;
    font-size: 14px;
    color: #000;
    padding-left: 60px;
    transform: translateY(5px);
  }
  .developed_by span{
    color: #8f4ec7;
  }
  

  .notification-count.hide{
    display: none;
  }

  .log_out_link{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
    transform: translateY(1px);
  }

  .has_zero{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .make_zero{
    cursor: pointer;
    color: #0C4F7C;
    font-size: 12px;
    text-decoration: underline;
  }