body {font-family: "DM Sans", sans-serif; color:#4B4B4B}
body a{color:#2C60EA; text-decoration:none}
.layout-content-navbar .layout-navbar { position: fixed; padding-left: 285px; right: 0; top: 0; }

.btn-search { position: absolute; top: 0; bottom: 0; border: none; background: transparent; padding: 0; left: 15px; color: #959595; }
.search-box { max-width: 350px; width: 100%; display:none}
.layout-content-navbar .search-box { display:block}
.search-box-input{position:relative}
.search-box-input input.form-control {padding: 10px; border: #E4E4E4 1px solid; border-radius: 4px; height: 48px; padding-left:45px; transform:inherit; box-shadow:inherit }
.menu .app-brand.demo{height:80px}
.menu .app-brand, .layout-navbar  { border-bottom: 1px solid #E7E7E7;     height: 80px; }

.menu-vertical .menu-inner li.menu-item a.menu-link { border-radius: 4px; color: #4B4B4B; font-weight: 600; font-size: 16px; }
.menu-vertical .menu-inner li.active a.menu-link {     background: #EEF2FB; color:#2C60EA }
.username-toggle { color: #010A15; font-weight: 600; font-size: 16px; }

.navbar-action-right li.nav-item:before { content: ""; height: 30px; width: 1px; background: #E4E4E4; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; }
.navbar-action-right li.nav-item { padding: 0 15px 0; position: relative; }
.navbar-action-right li.nav-item:before { content: ""; height: 30px; width: 1px; background: #E4E4E4; position: absolute; left: 8px; top: -3px; }
.navbar-action-right li.nav-item:first-child:before { display:none }
span.username-alpha { display: inline-flex; width: 40px; height: 40px; background:#2C60EA; align-items: center; justify-content: center; margin: 0 0 0 15px; border-radius: 50px; color: #fff; }

.br-4{border-radius:4px;}
.br-5{border-radius:5px;}
.br-10{border-radius:10px;}

.fs-20{font-size:20px}
.fs-28{font-size:28px}

.text-010A15 {color:#010A15}
.bg-EFF2F4 {background:#EFF2F4}
.bg-EBEDFF {background:#EBEDFF}
.bg-FFEEE2 {background:#FFEEE2}
.green-409261{background:#409261;}
.bg-E6F1EA { background: #E6F1EA; }
.bg-f2f2f2{background:#F2F2F2;}
.bg-a5a5a5{background:#a5a5a5;}
.bg-888888{background:#888888;}
.bg-D71E2A{background:#D71E2A;}

.layout-content-navbar .content-wrapper { padding-top: 80px; background: #EFF2F4; }
.dash-top-icon span { border-radius: 5.5px; height: 60px; width: 60px; display: flex; align-items: center; justify-content: center; padding: 5px; }

.action-badge li { position: relative; padding-left: 20px; }
.action-badge li span { display: flex; align-items: center; width: 14px; height: 14px; border-radius: 15px; position: absolute; left: 0; margin: auto; bottom: 0; top: 0; border:2px solid transparent }
.action-badge li span.green-badge { background: #409261; border-color:#D8FFE8  }
.action-badge li span.blue-badge { background: #2C60EA; border-color:#EEF2FB  }
.action-badge li span.orange-badge { background:#EA7B2C; border-color:#FFEEE2  }
.action-badge li span.grey-badge { background:#888888; border-color: #dfdfdf;  }
.action-badge li span.red-badge { background:#D71E2A; border-color:#ffe6ea;  }

.btn-primary-blue { background: #2C60EA; color: #fff; border:none; border-radius: 5px; padding: 10px 15px 10px; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary-blue:hover { color: #fff; background: #1649d1; }
.appointment-timeline-row { height: 350px; position: relative; overflow: auto; display: flex; padding: 0 0 10px; white-space: nowrap; }

.time-schedule-box p { font-size: 13px; font-weight: 500; }
.time-user p { font-size: 12px; font-weight: 500; }
.alpha-name-circle { height: 22px; width: 22px; border-radius: 100px; font-size: 8px; display: flex; align-items: center; justify-content: center; font-weight: 600; }

.time-schedule { width: 175px; position:relative; margin:0 0 10px }
.divide-line-box { padding-left: 40px; top: 0; bottom: 0; margin-bottom: 10px; position: relative; width: 200px; margin-left: 30px; }
.divide-line-box:first-child { margin-left: 10px; }
.vh-line {  width: 2px; position: absolute; top:20px; bottom: 0; left:15px; }
.vh-line span { display: flex; width: 14px; height: 14px; background: transparent; border-radius: 100px; border: 2px solid transparent; position: absolute; top: -6px; left: -6px; }
.time-schedule:before { content: ""; position: absolute; border-top: 7px solid transparent; border-right: 7px solid #e6f1ea; border-bottom: 7px solid transparent; left: -7px; }

.green-box .time-schedule { background: #E6F1EA; }
.green-box .vh-line, .green-box .alpha-name-circle, .green-box .vh-line span { background:#409261; }
.green-box .time-schedule:before{border-right-color:#E6F1EA; }
.green-box .vh-line span { border-color: #D8FFE8; }

.blue-box .time-schedule { background:#EBEDFF; }
.blue-box .vh-line, .blue-box .alpha-name-circle, .blue-box .vh-line span { background:#2C60EA; }
.blue-box .time-schedule:before{border-right-color:#EBEDFF; }
.blue-box .vh-line span { border-color:#EEF2FB;}

.orange-box .time-schedule { background:#FFEEE2; }
.orange-box .vh-line, .orange-box .alpha-name-circle, .orange-box .vh-line span { background:#EA7B2C; }
.orange-box .time-schedule:before{border-right-color:#FFEEE2; }
.orange-box .vh-line span { border-color:#EEF2FB;}

.empty-box .time-schedule { background:#dfdfdf; }
.empty-box .vh-line, .empty-box .alpha-name-circle, .empty-box .vh-line span { background:#888888; }
.empty-box .time-schedule:before{border-right-color:#dfdfdf; }
.empty-box .vh-line span { border-color: #D8FFE8; }

.cancel-box .time-schedule { background:#ffe6ea; }
.cancel-box .vh-line, .cancel-box .alpha-name-circle, .cancel-box .vh-line span { background:#D71E2A; }
.cancel-box .time-schedule:before{border-right-color:#ffe6ea; }
.cancel-box .vh-line span { border-color: #D8FFE8; }

.time-schedule.canceled-box { background: #ffe6ea; }
.time-schedule.canceled-box span.alpha-name-circle { background: #D71E2A; }

.all-select-group label { color: #484848; font-weight: 600; font-size: 15px; margin: 0 5px 0 0; }
.all-select-group select { width: 132px; height: 37px; border: 1px solid rgba(75, 75, 75, 0.5); border-radius: 4px; font-weight: 600; font-size: 15px; padding: 0 5px; color: #232323; outline: inherit; }

.dash-table-grid { border-radius: 10px;   border: 1px solid #E6E6E6; }
.dash-table-grid table { width: 100%;}
.dash-table-grid table thead tr th { padding: 15px; font-weight: 500; color: #010A15; white-space: nowrap; }
.dash-table-grid table tbody tr td { padding: 15px; font-weight: 500; color: #4B4B4B; white-space: normal; }
.dash-table-grid table tbody tr:nth-child(2n) td { background: rgba(245, 245, 245, 0.8); }

.completed-span, .upcoming-span, .canceled-span { padding: 7px 15px; display: inline-block; border-radius: 100px; padding-left: 25px; position: relative; font-size: 14px; width: 115px; text-align: center; line-height: normal; }
.completed-span:before, .upcoming-span:before, .canceled-span:before { content: ""; position: absolute; width: 6px; height: 6px; left: 13px; top: 0; border-radius: 10px; bottom: 0; margin: auto; }

.completed-span{background: #E9FFEF; color: #409261;}
.completed-span:before { background: #409261; }
.upcoming-span {background:#FFF2DD; color: #D98634; }
.upcoming-span:before { background: #D98634; }
.canceled-span{background:#ffe6ea; color: #D71E2A;}
.canceled-span:before { background: #D71E2A; }
.missed-span {
  background: #FFF2DD;
  color: #D98634;
}
  .missed-span::before {
    background: #D98634;
  }
.view-btn {
  background: #EEF2FB;
  border: 1px solid #2C60EA;
  padding: 6px 15px 6px;
  color: #2C60EA;
  border-radius: 4px;
  font-weight: 600;
  display: inline-block;
}
.view-btn:hover { background: #2C60EA; color:#fff }

.nav-tabs-link button { width: 100%; background: transparent; border: none; text-align: left; border: 1px solid transparent;margin-bottom:10px}
/*.nav-tabs-link button:nth-child(2n) .alpha-user-circle{background:#EAA64D}
.nav-tabs-link button:nth-child(3n) .alpha-user-circle{background:#FF6F3C}
.nav-tabs-link button:nth-child(4n) .alpha-user-circle{background:#708A58}
.nav-tabs-link button:nth-child(5n) .alpha-user-circle{background:#725CAD}
.nav-tabs-link button:nth-child(6n) .alpha-user-circle{background:#4DA8DA}
.nav-tabs-link button:nth-child(7n) .alpha-user-circle{background:#DA6C6C}
.nav-tabs-link button:nth-child(8n) .alpha-user-circle{background:#B17F59}
.nav-tabs-link button:nth-child(9n) .alpha-user-circle{background:#409261}
.nav-tabs-link button:nth-child(10n) .alpha-user-circle{background:#D98634}*/
.nav-tabs-link button.active{border-color:#2C60EA; background:#EEF2FB}
.user-app h5 { font-size: 15px; font-weight: 500; color: #010A15; line-height: normal; margin:0 }
.user-app p { color: #4B4B4B; font-size: 13px; }
.alpha-user-circle { display: flex; align-items: center; justify-content: center; width: 41px; height: 41px; background: #2C60EA; border-radius: 100px; color: #fff; font-size: 16px; font-weight: 600; flex: 0 0 41px; }
.w-h-68{height:68px; width:68px; flex:0 0 68px;}
.tab-heading .user-app h5 { font-size: 20px; }
.tab-heading .user-app p { font-size:16px; }
.tab-heading .alpha-user-circle{font-size:20px}
.edit-details a { background: #EEF2FB; border:1px solid #EEF2FB; color: #2C60EA; padding: 8px 15px; display: inline-flex; gap: 7px; align-items: center; border-radius: 3px; font-size: 15px; font-weight: 600; }
.edit-details a:hover {background: #2C60EA; color:#fff; border-color:#2C60EA}
.delete-button a { color: #ff3e1d; padding: 8px 15px; display: inline-flex; gap: 7px; align-items: center; border-radius: 3px; font-size: 15px; font-weight: 600; border: #ff3e1d 1px solid; }
.delete-button a:hover { color: #FFFFFF; background:#ff3e1d }
.tab-heading { border-bottom: rgba(44, 96, 234, 0.18) 2px solid; padding: 0 0 20px; margin-bottom: 20px; }
.text-409261{color:#409261}
.text-D71E2A { color: #D71E2A; }
.label-title label { display: flex; align-items: center; gap:5px; color: #4B4B4B; font-size:15px; font-weight:500}
.bg-EEF2FB{background:#EEF2FB}
.availability-schedule h4 { font-size: 16px; font-weight: 600; margin: 0 0 5px; line-height: normal; }
.availability-schedule p { font-size: 13px;  margin: 0 0 5px; line-height: normal; color:#4B4B4B }
.availability-container{padding:50px 15px; display:flex}
.custom-vh-100 { height: calc(100vh - 180px); }
.mw-500{max-width:500px}
.fs-24{font-size:24px}
.add-user-icon { display: flex; height: 97px; width: 97px; border-radius: 100px; background: rgba(44, 96, 234, 0.1); align-items: center; justify-content: center; color: #fff; margin:0 auto 30px }
.add-user-icon i{font-size:55px; color:#2C60EA}
.appointment-list-block { border-top: rgba(44, 96, 234, 0.18) 2px solid; padding-top: 40px; margin-top:40px; }

.offcanvas.offcanvas-container { max-width: 730px; width: 100%; z-index:1090}
.modal {z-index:1091}
.bg-305274{background:#305274}

.available-day { font-size: 18px; font-weight: 600; color: #010A15; }
.available-form-group label { font-size: 14px; font-weight: 500; color: #353434; display: inline-block; width: 100%; margin: 0 0 5px; }
.available-form-group input { background: #fff; border: none; height: 38px; border-radius: 6px; padding: 0 10px; width:100%; outline:inherit   }
.available-form-group input[disabled] { background: #e5e5e5; }

.available-schedule{margin-bottom:40px}
.unavailable-box label{font-weight:normal; color:#353434; font-size:14px; display:flex; align-items:center; gap:5px }
.unavailable-box label input { width: 15px; height: 15px; border-radius: 2px; border:1px solid #717171 }

.availability-time ul li { font-size: 15px; margin:0 0 7px 0; font-weight: 500; }
.availability-time ul li span{ display:inline-block; width:50px }
.availability-time ul li.not-available strong{ color: #D71E2A; font-weight:500 }

.action-button button { border: none; background: #fff; outline: inherit; padding: 0; }
.action-button button .bx { font-size: 27px; }

.bg-blue-10 { background: rgb(44 96 234 / 10%); }
.bg-blue-20 { background: rgb(44 96 234 / 20%); }
.bg-blue-30 { background: rgb(44 96 234 / 30%); }
.bg-blue-40 { background: rgb(44 96 234 / 40%); }
.bg-blue-50 { background: rgb(44 96 234 / 50%); }
.bg-blue-60 { background: rgb(44 96 234 / 60%); }
.bg-blue-70 { background: rgb(44 96 234 / 70%); }
.bg-blue-80 { background: rgb(44 96 234 / 80%); }
.bg-blue-90 { background: rgb(44 96 234 / 90%); }
.dash-heading h1 { font-weight: 600; line-height: 24px; color: #010A15; margin:0 }

.create-form-container{padding:40px}
.form-group-input label { display: inline-block; width: 100%; font-size: 15px; font-weight: 400; color: #353434; margin: 0 0 7px; font-family: 'DM Sans'; }
.form-group-input input.form-control, .form-group-input select.form-control { background: #EFF2F4; border-radius: 7px; height: 45px; outline: inherit; width: 100%; padding: 5px 10px; border: 1px solid #EFF2F4; box-shadow:inherit; transform:inherit; font-weight:400; font-family: 'DM Sans'; font-size:15px }

.form-group-input { margin: 0 0 15px; }

.form-group-input input.form-control::placeholder {  color: #353434;  opacity: 0.5; /* Firefox */  }
.form-group-input input.form-control::-ms-input-placeholder { /* Edge 12 -18 */ color: #353434;  opacity: 0.5; }
.outline-btn { background: #FFFFFF; color: #2C60EA; border: 1px solid #2C60EA; border-radius: 5px; padding: 10px 20px 10px; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.outline-btn:hover { color: #FFFFFF; background: #2C60EA; }

.px-40 { padding-left: 40px; padding-right: 40px; }

.case-type label { font-size: 12px; font-weight: 500; color: #4B4B4B; display: inline-block; margin: 0 0 6px; }
.case-type p { font-size: 15px; color: #010A15; font-weight: 500; }
.custom-bb-2px { border-bottom: 2px solid rgba(44, 96, 234, 0.2); }
.action-btn { padding: 4px 5px; border-radius: 2px; border:1px solid }
.edit-btn { border-color: rgb(44 96 234 ); color: #2c60ea; }
.edit-btn:hover { background: rgb(44 96 234 / 100%); color: #FFFFFF; }
.trash-btn { border-color: rgb(255 62 29); color: rgb(255, 62, 29); }
.trash-btn:hover { background: rgb(255 62 29 / 100%); color: #FFFFFF; }

.form-group-input .form-multi-select .form-multi-select-input-group { height: 45px; border: none; border-radius: 7px; background: #EFF2F4; }
.form-group-input .form-multi-select .form-multi-select-input-group .form-multi-select-selection { padding: 0 12px; height:45px; }
.form-group-input .form-multi-select .form-multi-select-input-group .form-multi-select-selection input { font-size: 16px; padding: 0; font-family: 'DM Sans'; }
.form-group-input .form-multi-select .form-multi-select-input-group .form-multi-select-buttons { min-height: 31px; }
.form-group-input .form-multi-select .form-multi-select-dropdown { background: #FFFFFF; box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1); border: none; font-family: 'DM Sans'; }
.form-group-input .form-multi-select .form-multi-select-dropdown .form-multi-select-options .form-multi-select-option { font-size: 14px; padding: 5px 0 5px 30px; }
.form-group-input .form-multi-select .form-multi-select-dropdown .form-multi-select-options .form-multi-select-option:before { position: absolute; left: 7px; top: 8px; }
.form-group-input .form-multi-select .form-multi-select-dropdown button.form-multi-select-all { font-size: 15px; padding: 9px 20px; }
.time-slot { position: absolute; bottom: -15px; left: 0; font-size: 10px; font-weight: 700; }
.time-schedule-container { height: 300px; overflow-x: hidden; overflow-y: auto; width: 193px; padding-left: 7px; }
.time-schedule:before {display:none}
.time-schedule:first-child:before {display:block}
.create-form-container .form-group-input .form-multi-select-dropdown {
  height: 200px;
  overflow: auto;
}
.dash-table-grid table.dataTable tbody tr td {
  background: #fff;
  box-shadow: inherit !important;
}
.dataTables_wrapper .dataTables_length {
   margin-left: 0px !important; 
  margin-top: 8px;
  padding: 4px 8px;
}
.dataTables_wrapper .dataTables_info {
  clear: both;
  float: left;
  padding-top: .755em;
  padding-left: 15px;
}