body{font-family: 'Roboto', sans-serif; background: url(../img/bg-pat.jpg); font-size: 15px;}

/* *{ transition: all ease-in .15s;} */
i{transition: all ease-in .02s;}

html, body{ height: 100%; color: #171717;}

h1{ font-size: 48px; line-height: normal; font-weight: 500;}
h2{font-size: 34px; line-height: normal; font-weight: 500;}
h3{font-size: 28px; line-height: normal; font-weight: 600;}
h4{font-size: 20px; line-height: normal; font-weight: 500;}
h5{font-size: 18px; line-height: normal; font-weight: 500;}
p{ line-height: 24px;}
table{color:#232323 !important;}
.font-24{ font-size: 24px; font-weight: 500;}
.font-20{ font-size: 20px;}

:root {
   --white: #fff;
   --d-grey: #666666;
   --blue: #0747A6;
   --l-grey: #D0D0D0;
   --black: #282828;
   --bright-gray: #323A45;
   --font-12: 12px;
   --font-13: 13px;
   --font-14: 14px;
   --mine-shaft: #232323;
   --sky-blue: #EBF5FF;
   --fiord: #475467;
}

.auth-outr{ display: flex; align-items: stretch; height: 100%;}
.auth-1{ display: flex; justify-content: center; align-items: center; background: #fff ;}
.auth-outr h3{ color: var(--blue); margin-bottom: 25px;}

.w-lg-500px {width: 500px;}
.w-lg-600px {width: 600px;}
.w-lg-750px {width: 750px;}

.p-10 { padding:0 2.5rem;}

.auth-logo{ margin-bottom: 50px; display: block;}
.auth-logo img{max-width: 190px;}

.w-10{ width: 10%;}
.w-20{ width: 20%;}
.w-30{ width: 30%;}
.w-40{ width: 40%;}
.w-45{ width: 45%;}
.w-50{ width: 50%;}
.w-55{ width: 55%;}
.w-60{ width: 60%;}

img{ max-width: 100%;}

.small-title{ color: #323A45;}
.small-title small{ color: #666;}
.d-grey{ color: var(--d-grey);}
.blue{ color: var(--blue);}
.bright-gray{ color: var(--bright-gray);}
.mine-shaft{ color: var(--mine-shaft);}
.river-bed{ color: #464E5F;}
.fiord{ color: var(--fiord);}
.black{ color: var(--black);}

.font-12{ font-size: var(--font-12);}
.font-13{ font-size: var(--font-13);}
.font-14{ font-size: var(--font-14);}

.mt-30{ margin-top: 30px;}

.round-6{ border-radius: 6px;}

.mw-750{ max-width: 750px;}
.fw-500{ font-weight: 500;}

/*  Authentication */

.form-group{ margin-bottom: 25px; position: relative;}

.form-group.icon .form-control{padding-right: 2.2rem;}
.form-group.icon i{ position: absolute; right: 12px; top: 12px; color: #888C9F; font-size: 20px; }

.auth-outr .form-group label {color: #181C32; font-size: 14px; margin-bottom:5px;}
.auth-outr .form-control{border-radius: 12px; background: #EEF1F5; border-color: #EEF1F5; display: block;  padding: 0.775rem 1rem; font-size: 14px; color: #8B8B8B; box-shadow: none; height: 62px;}

.btn{ text-align: center; vertical-align: middle; cursor: pointer; user-select: none; border-radius: 5px; box-shadow: none; padding: 12px 40px; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; font-weight: 500;}
.btn.btn-md{padding: 9px 20px; }
.btn.btn-sm{padding: 0.25rem 0.4rem; line-height: normal; }
.btn.btn-sm i{font-size: 23px; }
.black-btn{ background-color: #232323; color: #fff; border-color: #232323;}
.black-btn:hover{background: #0747A6; border-color: #0747A6; color: #fff;}

.btn-cross{ padding: .25em; height: 28px; width: 28px;}
.cross-red{ background: #FF4858; color: #fff; border-color:#FF4858 ;}
.cross-red:hover{ background: transparent; color: #FF4858;}

.form-group label, .form-label{ color: #232323; font-weight: 500;}

.form-group .form-control{border-radius: 5px; border: 1px solid #D1D1D1; color:#666; font-size: 15px; min-height: 45px; padding: .5rem 1.2rem; }
.form-group .form-control[readonly]{ background-color: #e9ecef;}

.closed-stip{padding-right: 40px; position: relative;}
.closed-stip .cross{position: absolute; right: 0; bottom: 36px; width: auto;}

.btn-primary{background: #0747A6; border-color:#0747A6;}
.btn-primary:hover{background: #232323; border-color:#232323;}
.btn[disabled]{background:#D0D0D0; border-color:#D0D0D0;}

.btn-skyblue{background: #3699FF; border-color:#3699FF; color: #fff;}
.btn-skyblue:hover{background: #0747A6; border-color:#0747A6; color: #fff;}

.btn-primary.alter{border: 1px solid #D0D0D0; background: #FFF; color: #282828;}
.btn-primary.alter:hover{border: 1px solid #282828; background: #FFF;}

.btn-primary.blue-alter{border: 1px solid var(--blue); background: #FFF; color: var(--blue);}
.btn-primary.blue-alter:hover{border: 1px solid #282828; color: #282828; } 

/* .btn[disabled]{border: 1px solid #D0D0D0; background: #FFF;} */

.btn-light{color: var(--l-grey);}
.btn-light:hover{}

.btn:disabled, .btn-light-grey{ border: 1px solid #E6E9EB; background: #F1F5F7; color: #888C9F;}
.btn-light-grey:hover, .btn-light-grey:focus, .btn-light-grey:active{border-color: #E6E9EB}

.btn-light-grey50{ border: 1px solid #EEE; background: rgba(238, 238, 238, 0.93); color: #A6A6A6;}
.btn-light-grey50:hover, .btn-light-grey50:focus, .btn-light-grey50:active{border-color: #EEE;}

.btn-secondary{ background-color: var(--d-grey); border-color: var(--d-grey);}
.btn-secondary:hover{background: #232323; border-color:#232323;}

.btn-light-outline-red{ border: 1px solid #FF6666;  color: #FF6666; background: transparent;}
.btn-light-outline-red:hover, .btn-light-outline-red:focus, .btn-light-outline-red:active{border-color: #FF6666; color: #FF6666;}

.btn-light-outline-grey{ border: 1px solid #666;  color: #666; background: transparent;}
.btn-light-outline-grey:hover, .btn-light-outline-grey:focus, .btn-light-outline-grey:active{border-color: #666; color: #666;}

.btn-orange{background: #F88A2C; border-color:#F88A2C; color: #fff;}
.btn-orange:hover{background: #232323; border-color:#232323; color: #fff;}

.btn-sea-green{background: #38C7C6; border-color:#38C7C6; color: #fff;}
.btn-sea-green:hover{background: #232323; border-color:#232323; color: #fff;}


.forgot-link{color: #666; font-size: 14px; font-style: normal; font-weight: 500; text-decoration: none; position: absolute; top: 2px; right: 0;}

.separator.separator-content::after,
.separator.separator-content::before { content: " "; width: 50%; border-bottom: 1px solid #EBF5FF;}

.separator.separator-content { display: flex; align-items: center; border-bottom: 0; text-align: center; margin: 20px 0; color:#666; font-size: 14px; font-weight: 500;}
.separator.separator-content span{ background:#F4F4F4; width: 36px; height: 36px; border-radius: 50px; padding: 8px;}


.bg1{background: url(../img/bg1.jpg);}
.bg2{background: url(../img/bg2.jpg);}

.auth-bg1{ background-size: cover; color: #fff; text-align: center; }
.auth-bg1 h2{ font-size: 36px; margin-bottom: 25px;}
.auth-bg1 p{ font-size: 18px;}

.auth-info{ display: flex; justify-content: center; align-items: center;}

.q-log {display: grid; gap: 20px; max-width: 245px; margin: auto;}
.q-log a{ border-radius: 8px; background: #E1F0FF; padding: 13px 18px; color: #3699FF;}
.q-log a img { vertical-align: middle; margin-right: 10px;}
.q-log a:hover{ background: #E1F0FF;}

/* settings */

.logo-part{max-width: 110px;}

#sidebar-wrapper .list-group{padding-top: 22px;}
.list-group ul{ list-style: none; margin: 0; padding: 0;}
.list-group ul li{ padding: .1rem .55rem;}
.list-group ul li.dropdown:after {content: "\e91b"; font-family: 'ico'; position: absolute; right: 0; color: #494B69; font-size: 25px; top: 0; line-height: normal; padding: 10px 15px; transform: rotate(0deg);}
.list-group ul li a{ position: relative; text-decoration: none; background-color: transparent; padding: .6rem 1rem; border-radius: 50px; color: #232323; font-weight: 500; line-height: normal; display: flex; align-items: center; cursor: pointer;}
.list-group ul li a i{ font-size: 23px; margin-right: 12px; }
.list-group ul li:hover>a,
.list-group ul li a:hover,
.list-group ul li.active>a{ background: var(--blue); color: var(--white);}

.list-group ul li:hover:after,
.list-group ul li.active:after{color: var(--white);}

.list-group ul ul{ padding-left: 25px; display: none;}
.list-group ul li li a{ color: var(--d-grey); font-size: 14px;}

.list-group ul li.show ul {display: block;}
.list-group ul li.show.dropdown:after{transform: rotate(180deg);}

.list-group ul li li:hover a,
.list-group ul li li a:hover,
.list-group ul li li.active a{ color: var(--blue); background: transparent !important;}

.sidetoggle{ border: none; background: transparent; padding: .55rem; position: absolute; transform: translate(-70px, 0px); z-index: 11;}
.sidetoggle *{transition: .35s;}
.sb-sidenav-toggled .navbar-expand-lg .container-fluid{    padding-left: 90px;}
.sb-sidenav-toggled .sidetoggle img{transform: rotate(180deg);}

main{box-shadow: inset 0 0.46875rem 2.1875rem rgba(4,9,20,0.05), inset 0 0.9375rem 1.40625rem rgba(4,9,20,0.03), inset 0 0.25rem 0.53125rem rgba(4,9,20,0.05), inset 0 0.125rem 0.1875rem rgba(4,9,20,0.03); padding: 25px; min-height: calc(100vh - 72px);}

.navbar-expand-lg .container-fluid{ position: relative;}

.app-nav,
#sidebar-wrapper .sidebar-heading{ padding-top: 0.875rem; padding-bottom: 0.875rem;}
.app-nav { min-height: 71px;}

#sidebar-wrapper{ position: fixed; z-index: 10; top: 0; bottom: 0; left: 0; width: 16rem; height: 100%; overflow-y: scroll; display: flex; flex-direction: column;}

#sidebar-wrapper:hover::-webkit-scrollbar-thumb {background:rgba(51, 50, 50, 0.219);}
#sidebar-wrapper::-webkit-scrollbar { width:3px; }
#sidebar-wrapper::-webkit-scrollbar-track { background:transparent; border-radius:0px; }
#sidebar-wrapper::-webkit-scrollbar-thumb { background:rgba(0, 0, 0, 0); border-radius:0px; }


.navbar-inner{ display: flex; justify-content: space-between; flex: auto; flex-wrap: wrap; align-items: center;}
.app-nav-left{ display: flex; gap: 20px; flex: 0 0 30%;}

.app-navbar ul.items{ display: flex; margin: 0; padding: 0; list-style: none; align-items: center; gap: 15px;}
.app-navbar ul.items li{ position: relative;}
.app-navbar ul.items li a.tap{ color: #232323; text-decoration: none; font-size: 23px; width: 24px; height: auto; line-height: normal; display: block; position: relative;}
.app-navbar ul.items li .profile{ color: #959CB6; font-weight: 500; cursor: pointer; text-decoration: none; display: flex; align-items: center; flex-wrap: wrap;}
.app-navbar ul.items li .profile span{ color: #6C7293;}
.app-navbar ul.items li .profile img{ width: 100%; height: 100%; object-fit: cover;}
.app-navbar ul.items li .profile figure{ width: 36px; height: 36px; border-radius: 4px; overflow: hidden; margin:0 0 0 16px; display: inline-block; vertical-align: middle;}

.app-navbar ul.items li .dropdown-menu{ left: auto; right: 0; background: #FFF; box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.15); min-width: 200px; margin-top: 18px; border-radius: 0; padding: 0;}
.app-navbar ul.items li .dropdown-menu ul{ list-style-type: none; margin: 0; padding: 5px 0;}
.app-navbar ul.items li .dropdown-menu a{display: block; padding: 6px 15px; clear: both; line-height: 1.42857143; color: #292D32; white-space: nowrap; text-decoration: none;}
.app-navbar ul.items li .dropdown-menu a:hover{ font-weight: 500;}

.app-navbar ul.items li a .notification{ position: absolute; border-radius: 50px; width: 1.2rem; height: 1.2rem; padding: 0.3rem 0.1rem; font-size: 9px; font-weight: 500; transform: translate(-11px, -7px);}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #262626; text-decoration: none;background-color: #f5f5f5;}

.app-navbar .client-name{ gap: unset; padding: 15px; border-bottom: 1px solid rgba(209, 209, 209, 0.20);}
.app-navbar .client-name .drop-cap { flex: 0 0 35px; height: 35px; font-size: 13px; margin-right: 12px;}
.app-navbar .client-name .client-info h6{ color: #000; font-size: 14px;}
.app-navbar .client-name .client-info h6 small{ display: block; margin-top: 5px; color: #6D6D6D; font-weight: normal;}

.card{border-radius: 12px; background: #FFF; box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.15); border: none;}
.card .card-head,
.card .card-body{ padding: 1.5rem;}

.card .card-head{border-bottom: 1px solid #EEE;}
.card .card-head .toolbar{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;}

.grey-card{border-radius: 5px; background: #F3F3F3; }

.brand-tabs{ padding: 0 1.85rem; border-bottom: 1px solid #EEE; gap: 45px; display: flex;}
.brand-tabs li a{color: var(--black); font-weight: 500; line-height: normal; display: block; padding: 25px 0; position: relative; display: flex; align-items: center;}
.brand-tabs li i{ font-size: 25px; margin-right: 10px;}
.brand-tabs li a::after{ content: ''; position: absolute; border-bottom: 4px solid transparent; left: 0; bottom: -1px; right: 0;}
.brand-tabs .nav-link.active::after{ border-color: var(--blue);}
.brand-tabs .nav-link.active, .brand-tabs .nav-item.show .nav-link{ color: var(--blue);}

.brand-tabs li .badge.badge-circle{ padding: .45rem .2rem; min-width: 1.75em; height: 1.5rem; background: #D9D9D9;}
.brand-tabs li .active .badge.badge-circle{ background: var(--blue);}


.nav-pills.h-tab li{ margin-bottom: 15px;}
.nav-pills.h-tab:last-child{ margin-bottom: 0;}
.nav-pills.h-tab a{padding: 1.35em 1em; border-radius: 8px;  display: flex; align-items: center; background: #EEF1F5 !important; color: #888C9F; font-weight: 500;}
.nav-pills.h-tab a i{ font-size: 20px; margin-right: 8px;}
.nav-pills.h-tab .nav-link.active, .nav-pills.h-tab .show > .nav-link{ background-color: #0747A6 !important;}

.simple-link{color: #3699FF; font-weight: 500; line-height: normal; text-decoration-line: underline;}

.table.table-relax > :not(caption) > * > *{ padding: 1rem .5rem;}
.table.table-relax tr td:first-child{ width: 35px;}
.table.table-relax tr td{border-bottom-color: #D1D1D1;}
.table-relax.table-hover > tbody > tr:hover > *{ --bs-table-hover-bg: rgb(213 213 213 / 8%) !important}

.table .show-inner{display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.table .show-inner .datble-drop{ flex: 1;}
.table .show-inner .min-max{ flex: .5;}


/* Inbox Module  */

#inbox_loading_spinner { text-align: center; padding: 20px; margin-left: 38%; position: absolute; margin-top: 20%; font-size: 18px; }
#inbox_loading_spinner::after { content: ''; display: block; width: 40px; height: 40px; border: 4px solid rgba(0, 0, 0, 0.1); border-left-color: #000; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.unread-row { font-weight: bold;}


/* next appointment */

.next-appointment{ padding: 1.5rem 1rem; border-top: 1px solid #EEF1F5;  }
.apnt-box{border-radius: 5px; border: 1px solid #EEF1F5; background: #fff; box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.08); padding:  1rem; display: block; text-decoration: none; margin-bottom: 15px;}
.apnt-box:last-child{ margin-bottom: 0;}
.apnt-box time{ color: #888C9F; font-size: 14px; line-height: normal; display: flex; align-items: center; line-height: 1.5;}
.apnt-box time i{ font-size: 20px; color: #000; }

/* Toggle */

.toggle { box-sizing: border-box; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch;}
.toggle input { display: none; }
.toggle input + label:first-of-type { border-radius: 5px 0 0 5px; border-right: none; }
.toggle input + label:last-of-type { border-radius: 0 5px 5px 0; border-left: none;  }
.toggle input + label {margin: 0; padding: 0.6rem .5rem; box-sizing: border-box; position: relative; display: inline-block; border: solid 1px #D1D1D1; background-color: #fff; text-align: center; flex: 0 0 50%; display: flex; justify-content: center; align-items: center; min-height: 45px;
  /* transition: border-color 0.15s ease-out, color 0.25s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out; */
}
.toggle input + label i{ font-size: 23px; margin-left: 5px; display: none;}
.toggle input:checked + label i{ display: block;}
.toggle input:checked + label { background-color: var(--blue); color: #fff; border-color: var(--blue); z-index: 1;}


/* Modal */

.modal-content{ border-radius: 10px; border: none;}
.modal-header .btn-close{background-color: #D0D0D0; border-radius: 6px; background-size: 14px;}
.modal-header, .modal-footer{border-color: #D1D1D1 }
.modal-header, .modal-body, .modal-footer{ padding: 20px 25px;}
.modal-footer > *{ margin: 0;}
.modal-footer{ display: flex; gap: 15px;}

.modal-xxl { max-width: 1440px; }


/* custom check box */

.cst-check input{ display: none;}
.cst-check span{height: 24px; width: 24px; display: inline-block; position: relative; background: #EEF1F5; border-radius: 5px; vertical-align: middle;}
.cst-check span:before{content: "\e91a"; position: absolute; line-height: normal; left: 3px; top: 3px; opacity: 0; color: #fff; font-family: 'ico'; font-size: 18px;}
.cst-check input:checked + span{ background: #232323;}
.cst-check input:checked + span:before{ opacity: 1;}

.cst-check input:disabled + span{ opacity: .55;}


/* custom radio button */

.cst-radio{ vertical-align: middle;}
.cst-radio input{ display: none;}
.cst-radio span{height: 18px; width: 18px; display: inline-block; position: relative; border-radius: 50px; border: 1px solid #D1D1D1; position: relative; vertical-align: middle;}
.cst-radio span:before{ background: var(--blue); width: 8px; height: 8px; border-radius: 50px; content: ''; position: absolute; opacity: 0; margin: calc(50% - 4px); left: 0;}
.cst-radio input:checked + span{ border-color: var(--blue) ;}
.cst-radio input:checked + span:before{ opacity: 1;}

.cst-radio input:disabled + span{ opacity: .55;}

.cst-radio span.radio-lg { width: 24px; height: 24px;}
.cst-radio span.radio-lg:before{ width: 12px; height: 12px; margin: calc(50% - 6px);}
.cst-radio span.dark{ border-color: #232323;}

/* custom form switch */

.form-switch .form-check-input{ width: 50px; height: 20px;}
.form-switch .form-check-input:focus{background-blend-mode: luminosity;}

.green .form-check-input:checked{background-color: #84C529; border-color: rgb(132, 197, 41);}
.green .form-check-input:focus{border-color: #84C529; box-shadow: 0 0 0 0.25rem rgb(132 197 41 / 25%);}


/* Data table */

.all-db-table thead th {background-color: #F6F8FA; color: var(--blue); font-weight: 500; border-top:1px solid #EBF5FF; border-bottom:1px solid #EBF5FF;}
.all-db-table thead th[aria-sort="ascending"]{ background-color: #EBF5FF;}
.all-db-table.table > :not(caption) > * > *{ padding-top: 0.9rem; padding-bottom: 0.9rem;}
.all-db-table tbody tr:hover { background-color: #0747a608;}
.all-db-table tbody tr td{border-color:#EBF5FF;}
.blue-bold{ font-weight: 500; color: var(--blue); text-decoration: none;}
.action-box{ display: flex; gap: 8px;}

.all-db-table thead th.mine-shaft{ color: var(--mine-shaft);}

.all-db-table figure.photo{ margin: 0; width: 45px; height: 45px; border-radius: 50px; overflow: hidden;}
.all-db-table figure.photo img{ width: 100%; height: 100%; object-fit: cover; object-position: center;}

.cst-check.blue span{height: 17px; width: 17px; display: inline-block; position: relative;  border-radius: 3px; border: 1px solid #BFCBD9; background: #FFF;}
.cst-check.blue input:checked + span { background: #0747A6; border-color: #0747A6;}
.cst-check.blue span:before{ font-size: 13px; left: 1px; top: 1px;}

.all-db-table .tbl-title td,
.all-db-table .tbl-title th{ background-color: #EBF5FF;}


div.dataTables_wrapper div.dataTables_length select { width: auto; color: #4e75ad; display: inline-block;}
.form-inline .form-control { display: inline-block; width: auto; vertical-align: middle;}
.dataTables_length select { padding-top: 5px; height: inherit;}

.dataTables_length select{ border: 1px solid #bfcbd9;  color: #4E75AD; font-size: 14px; line-height: 1; height: 32px; border-radius: 3px;}
.dataTables_length { float: left; margin-right: 15px;}
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0; border-bottom-right-radius: 0;}
.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0;}
.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0;}
.dt-buttons.btn-group .btn { color: #4e75ad; border-radius: 4px; font-size: 11.5px; padding-bottom: 6px; padding-top: 7px; text-transform: uppercase; padding-left: 20px; padding-right: 20px; background-color: #fff; border: 1px solid #bfcbd9;}
.dt-buttons.btn-group .btn.btn-default-dt-options{ padding: 0;}
.dt-buttons.btn-group .btn.btn-default-delete{ padding: 0 8px;}


.btn-group-vertical>.btn, .btn-group>.btn { position: relative; float: left; }

.dt-buttons .dt-button-down-arrow{ display: none;}

.dt-buttons{ position: relative;}
.dt-button-collection {position: absolute; left: 0; top: 100% !important; margin: 0; margin-top: 5px; padding: 0; border-radius: 6px; z-index: 9000; min-width: 180px; font-size: 14px; text-align: left; list-style: none; background-color: #fff;  border: 1px solid #bfcbd9;}
.dt-button-collection button{ border: none; color: #4e75ad; padding: 8px 16px; word-wrap: break-word; white-space: normal; font-weight: 400; line-height: 1.42857143; background: transparent; display: block; width: 100%; text-align: left;}

div.dataTables_filter { text-align: right; float: right;}

.form-inline .input-group .form-control, .form-inline .input-group .input-group-addon, .form-inline .input-group .input-group-btn { width: auto;}
.input-group-addon {border: 1px solid #bfcbd9; background-color: #fbfdff; color: #A1B4CC; padding: 3px 8px; font-size: 21px; line-height: 1; text-align: center;  border-radius: 4px; }
.search.input-group .form-control { position: relative; z-index: 2; float: left; margin-bottom: 0; -webkit-transition: width .3s ease; transition: width .3s ease; height: 31px; font-size: 14px;  border: 1px solid #bfcbd9; color: #A1B4CC; width: 140px;}

.h-44 .input-group-addon{padding-top: 9px; padding-bottom: 9px;}
.h-44.search.input-group .form-control{ height: 44px;}

.dataTables_filter input:focus { width: 160px; }

.dt-buttons, .dataTables_length, .dataTables_filter{ margin-bottom: 20px;}

.dataTables_info,
.dataTables_paginate{ margin-top: 1em;}
.dataTables_info{ float: left;}
.dataTables_paginate{ float: right;}

.dataTables_paginate a{ height: 2.1rem; min-width: 2.2rem; color: #337AB7; background-color: transparent; border: 1px solid #DDD; padding: 0.5em 0.75rem; text-decoration: none; display: inline-block; margin-left: -1px; cursor: pointer; font-size: 13px; text-align: center;}
.dataTables_paginate a.current{border-color:#282828; background:#282828; color: #fff;}

.dataTables_paginate a.previous{border-radius: 4px 0px 0px 4px;}
.dataTables_paginate a.disabled{ color: #777777; cursor: default;}
.dataTables_paginate a.next{border-radius: 0px 4px 4px 0px;}

.dt-page-jump{ float: right; margin-top:1em; margin-left: 15px;}
.dt-page-jump select{ border: 1px solid #ddd; border-radius: 4px;  width: 70px; padding: 0.45em; height: 2.1rem; font-size: 13px; }

/* custom upload */

.gl-upload{border-radius: 10px; border: 1px solid #EFEFEF; background: #F9FAFC; display: flex; text-align: center; height: 150px; align-items: center; justify-content: center; position: relative;}
.gl-upload [type=file]{ opacity: 0; position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
.gl-upload .up-icon{ opacity: .3; margin-bottom: 15px;}
.gl-upload .txt-up{ display: block; color: #B4B4B4; font-weight: 500;}

.form-group label.error{ color: #dc3545; margin-top: 5px; display: block;}

.profile-img{ margin: 0 auto 10px auto; overflow: hidden; border-radius: 50%; width: 110px; height: 110px;}
.profile-img img{ width: 100%; height: 100%; object-fit: cover;}

/*  custom  drop select */
.cst-drop-select .dropdown-toggle::after{content: "\e91b"; font-family: 'ico'; border: none; font-size: 30px; position: absolute; top: 0; right: 0;}
.cst-drop-select .btn-group > .btn:active{ border-color: #EEF1F5;}
.cst-drop-select .btn-group{border-radius: 0.375rem; background: #EEF1F5;}
.cst-drop-select .btn{color: #888C9F; padding-left: 20px; padding-right: 50px;}
.cst-drop-select .dropdown-menu{border-radius: 8px; border: 1px solid #D1D1D1; background: #FFF; box-shadow: 0px 6px 3px 0px rgba(0, 0, 0, 0.16); margin: 0; }

.cst-drop-select .dropdown-menu:hover::-webkit-scrollbar-thumb {background:rgb(0, 0, 0);}
.cst-drop-select .dropdown-menu::-webkit-scrollbar { width:5px; }
.cst-drop-select .dropdown-menu::-webkit-scrollbar-track { background:transparent; border-radius:0px; }
.cst-drop-select .dropdown-menu::-webkit-scrollbar-thumb { background:rgba(0, 0, 0, 0); border-radius:0px; }

.cst-drop-select .dropdown-menu li{ border-bottom:1px solid #F1F1F1;}
.cst-drop-select .dropdown-menu li:last-child{border: 0;}
.cst-drop-select .dropdown-menu a{padding: 12px 15px; display: block; text-decoration: none;}
.cst-drop-select .dropdown-menu a:hover{ background: transparent;}
.cst-drop-select .dropdown-menu label{ color: var(--d-grey); position: relative; padding-left: 30px; display: block;}
.cst-drop-select .dropdown-menu label input[type="checkbox"]{ position: absolute; opacity: 0;}

.cst-drop-select .dropdown-menu label:before,
.cst-drop-select .dropdown-menu .multiselect-item label:before{height: 20px; width: 20px ; display: inline-block; position: absolute; background: #EEF1F5; border-radius: 5px; vertical-align: middle; content:''; left: 0;}
.cst-drop-select .dropdown-menu label:after{content: "\e91a"; position: absolute; line-height: normal; left: 1px; top: 1px; opacity: 0; color: #fff; font-family: 'ico';
  font-size: 18px; }

.cst-drop-select .dropdown-menu .active label{ color: var(--mine-shaft); font-weight: 500;}
.cst-drop-select .dropdown-menu .active label:before,
.cst-drop-select .dropdown-menu .multiselect-item.active label:before{background: #232323;}

.cst-drop-select .dropdown-menu .active label:after,
.cst-drop-select .dropdown-menu .multiselect-item.active label:after{ opacity: 1;}

.open>.dropdown-menu { display: block; }

.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; /*float: left;*/ min-width: 260px; list-style: none; font-size: 15px;}

.drop-right .dropdown-menu{ left: auto; right: 0;}
/* .dropdown-menu { min-width: unset; border-radius: 8px; border: 1px solid #D1D1D1; background: #FFF; box-shadow: 0px 6px 3px 0px rgba(0, 0, 0, 0.16); left: auto;} */

/* access level */

.tooltip-inner{ max-width: 300px; background-color: #fff; color: #000; border: 1px solid #aaa;}
.input-group-text{background: #EEF1F5; border-color: #D1D1D1; color: #666;}


/* Add Services */

.bor-box{border-radius: 8px; border: 1px solid #D1D1D1; background: #FFF;}
.pd-20{ padding: 20px;}
.btn-link{ color: #232323;}
.list-group-item{ border-color: rgba(209, 209, 209, 0.20);}
.ad-flus .list-group-item{ padding-left: 0; padding-right: 0;}

.spl-info{ position: relative;}
.spl-info  .pos-absolute{ position: absolute; top: 60%; text-align: center; width: 100%;}
.spl-info  .pos-absolute.top-80{ top: 80%;}


/* invoice popup  */

.invo-notice{border-radius: 8px; background: rgba(14, 165, 233, 0.05); padding: 15px; display: flex; justify-content: space-between; align-items: center;}
.inv-left{ color: var(--black);}
/* .inv-number{font-size: 18px; } */
.inv-number span{font-weight: 600;}

.inv-number.go{ display: flex; justify-content: space-between; align-items: center;}

.invo-notice.closed{ padding-left: 3.2rem; position: relative;}
.invo-notice.closed .btn.cross{ padding: 1rem; position: absolute; left: 0; color: #282828;}

.success-pop{border-radius: 8px; background: rgba(14, 165, 233, 0.05); padding: 15px; text-align: center;}
.success-pop img{max-width: 12%; margin-bottom: 1rem;}

/* working hour popup */

.nav-group{border:1px solid #D1D1D1; border-radius: 6px; overflow: hidden; justify-content: end;}
.nav-pills.nav-group li{border-right: 1px solid #D1D1D1;}
.nav-pills.nav-group li:last-child{ border-right: 0;}
.nav-pills.nav-group .nav-link{ border-radius: 0; padding: 0.75rem 2rem; color: var(--d-grey); display: flex; align-items: center; justify-content: center;}
.nav-pills.nav-group .nav-link i{ font-size: 23px; display: none; }
.nav-pills.nav-group li:first-child .nav-link{ border-radius: 6px 0 0 6px;}
.nav-pills.nav-group li:last-child .nav-link{ border-radius: 0 6px 6px 0;}

.nav-pills.nav-group .nav-link.active, .nav-pills.nav-group .show > .nav-link{ background: var(--blue); color: var(--white);font-weight: 500;}
.nav-pills.nav-group .nav-link.active i { display: block;}

.cst-toggle .accordion-button{border-radius: 8px !important; background: rgba(218, 218, 218, 0.25); padding: 0.55rem 1rem; color: var(--black); font-weight: 500; position: relative;
  display: flex; align-items: center; }
.cst-toggle .accordion-button::after{content: "\e945"; font-family: 'ico'; font-size: 24px; color: var(--d-grey); transform: rotate(90deg); transition: all ease-in-out .15s;}
.cst-toggle .accordion-button:not(.collapsed)::after{transform: rotate(270deg);}

.cst-toggle .accordion-body{ padding: 1rem 0;}

.cst-toggle .accordion-item{ margin-bottom: 15px;}
.cst-toggle .accordion-item:last-child{ margin-bottom: 0;}

.btn-dashed{ border:  1px dashed ;}
.btn-red, .btn-red:hover{ border-color:#F00; color: #F00;}
.btn-blue, .btn-blue:hover{ border-color: var(--blue); color: var(--blue);}


[class*=icon-btn-]{ display: flex; align-items: center; }
.icon-btn-center{justify-content: center;}
.icon-btn-left{justify-content: flex-start;}
.icon-btn-right{justify-content: flex-end;}

[class*=check-gap]{ display: flex; flex-wrap: wrap;}
.check-gap30{ gap: 30px;}

/* Add Clients  */

.client-phbox{ display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end;}
.client-phbox figure{ margin: 0; height: 82px; position: relative; width: 16.3%; flex: 0 0 auto;}
.client-phbox figure img{ object-fit: cover; width: 100%; height: 100%;}
.client-phbox figure .dt-delete{ position: absolute; top: 3px; right: 3px; padding: 0.1rem 0.25rem; height: 24px; width: 24px;}

.skyblue{ background-color: var(--sky-blue); color: var(--blue); border-color: var(--sky-blue);}
.skyblue:hover{ color: var(--blue); border-color: var(--blue); background: transparent;}

.file-hoder{ display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end;}
.tag.btn{ padding: 12px 60px 12px 15px ; position: relative;}
.tag.btn .del{background-color: #232323; color: #fff; border-color: #232323; border-radius: 6px; padding: 0.2rem; line-height: normal; position: absolute; left: auto; right: 15px; font-size: 20px;}
.tag.btn .file-date{ color:  #232323; font-weight: 400; margin-left: auto;}


/* All forms */

.taskinfo-row{ padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap;}
.taskinfo-row li{border-right: 1px solid #EEE; flex: auto; padding: 15px 25px;}
.taskinfo-row li:first-child{ padding-left: 0;}
.taskinfo-row li:last-child{ padding-right: 0; border: 0;}

.text-succes-light{color:#84C529;}

.new-enquiry-bg{ background: #d66ad7;}
.text-new-enquiry{ color: #d66ad7;}

.text-bg-green{ background: #5CB85C;}
.text-succes{ color: #5CB85C;}

.text-bg-yellow{ background: #F2C12E;}
.text-yellow{ color: #F2C12E;}

.text-bg-orange{ background: #FF7600;}
.text-orange{ color: #FF7600;}

.text-bg-light-red{ background: #FC6A76;}
.text-light-red{ color: #FC6A76;}

.text-bg-red{ background: #FF0000;}
.text-red{ color: #FF0000;}

.text-bg-cyan{ background: #0EA5E9;}
.text-cyan{ color: #0EA5E9;}

.text-bg-seagreen{ background: #1BC5BD;}
.text-seagreen{ color: #1BC5BD;}

.text-bg-purple{ background: #bc7eee;}
.text-purple{ color: #bc7eee;}

.text-bg-red-purple{ background: #ec5cdc;}
.text-red-purple{ color: #ec5cdc;}


.text-bg-black{ background: #000;}

.text-bg-blue{ background: #0747a6;}

.text-bg-grey{ background: #666;}

.badge{ border-radius: 4px; font-weight: normal; vertical-align: middle; position: relative;}
.badge.badge-circle{ border-radius: 50px; width: 2rem; height: 2rem; padding: .65rem .2rem;}

.badge-md{padding: 0.45rem 0.7rem ; font-size: 13px;}

.badge-rounded{ border-radius: 50px;}

.booked{background: #C9F7F5; color: #1BC5BD; font-weight: 500;}
.completed{background: #E0EDFF; color: #0747A6; font-weight: 500;}
.turned-up{background: #FCEDC1; color: #F2C12E; font-weight: 500;}
.customisable{background: #F1FAFF; color: #00A3FF; font-weight: 500;}

.info-light{background: #CFEDFB;}

.alert-xs{ padding: .5rem 1rem ;}
.alert-green{ border: 1px solid #BADBCC; background: #D1E7DD; color: #0F5132;}
.alert-green .alert-close{ color: #0F5132;}
.alert-close{ position: absolute; right: 1rem; text-decoration: none;}

/* All services */

.no-pd{ padding: 0 !important;}
.ctg-greybox-list-box{display: flex; flex: 0 0 33.33333333%; flex-direction: column;}
.ctg-greybox-details-box{flex: auto; overflow-y: auto; overflow-x: hidden;}
.ctg-greybox{ background: #F9F9F9;}

.ctg-tree:hover::-webkit-scrollbar-thumb {background:rgb(0, 0, 0);}
.ctg-tree::-webkit-scrollbar { width:4px;  }
.ctg-tree::-webkit-scrollbar-track { background:#EDEDED; border-radius:0px; }
.ctg-tree::-webkit-scrollbar-thumb { background:rgba(0, 0, 0, 0); border-radius:20px; }

.ctg-greybox-details-box:hover::-webkit-scrollbar-thumb {background:rgba(0, 0, 0, 0.025);}
.ctg-greybox-details-box::-webkit-scrollbar { width:5px; }
.ctg-greybox-details-box::-webkit-scrollbar-track { background:transparent; border-radius:0px; }
.ctg-greybox-details-box::-webkit-scrollbar-thumb { background:rgba(0, 0, 0, 0); border-radius:0px; }

.modal .ctg-tree{height: calc(100vh - 425px);}
.ctg-tree{ list-style: none; padding: 0 1.5rem; margin: 0;  overflow-y: scroll; height: calc(100vh - 134px);}
.ctg-tree li{ margin-bottom: 5px; position: relative;}

.ctg-tree li.parent_category ul{ border-left: 2px solid #0747A6;}
.ctg-tree li a{ color: #000; font-weight: 500; line-height: normal; text-decoration: none;}
.ctg-tree li .count{ color: #3699FF; font-weight: 500;}

.ctg-tree li .disflex{display: flex; position: relative; justify-content: space-between; align-items: center; border-radius: 5px; padding: .45em .75em;}
.ctg-tree li.white-active .disflex{ background-color: #fff;}
.ctg-tree li.blue-active ul{ background: rgba(54, 153, 255, 0.10);}
.ctg-tree li.blue-active .disflex{ background-color: #0747A6;}
.ctg-tree li.blue-active a,
.ctg-tree li.blue-active .count{ color: #fff;}
.ctg-tree li.blue-active a{ margin-left: 32px;}

.ctg-tree li.blue-active .disflex:before{ height: 24px; width: 24px; display: inline-block; background: #EEF1F5; border-radius: 5px; vertical-align: middle; content: ''; position: absolute;}
.ctg-tree li.blue-active .disflex:after { content: "\e91a"; position: absolute; line-height: normal; left: 14px; top: auto; color: #0747A6; font-family: 'ico'; font-size: 18px;}

.ctg-tree li ul{ list-style: none; padding: 0; margin: 0 0 0 15px;}
.ctg-tree li li {display: flex; position: relative; justify-content: space-between; align-items: center; border-radius: 5px; padding: .45em .75em; margin-bottom: 2px;}
.ctg-tree li li:hover, .ctg-tree li li.active{ background: rgba(54, 153, 255, 0.10);}
.ctg-tree li li a{ color: var(--d-grey) !important;  line-height: 1.5em; margin: 0 ; font-weight: normal;}
.ctg-tree li.blue-active li a{ margin-left: 0;}
.ctg-tree li li .count{ color: #3699FF !important;}

.table-striped > tbody > tr:nth-of-type(odd) > *{ --bs-table-accent-bg: rgba(252, 252, 252, 1);}

/* Client card  */

.client-invo-notice{background: #EEF1F5; border-radius: 12px; padding: 1.85rem 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;}
.client-name{ display: flex; align-items: center; gap: 25px;}
.client-name .drop-cap{ display: flex; width: 60px; height: 60px; border-radius: 50px; font-size: 24px; font-weight: 500; justify-content: center; align-items: center;}
.client-name .client-info a{ text-decoration: none;}

.scaffold-layout-outr{ position: relative; height: 100vh;}
.scaffold-layout-list-details{ display: flex; gap: 30px; height: 100%; overflow: hidden; position: static; width: 100%;}
.scaffold-layout-list{ display: flex; flex: 3; flex-direction: column; }
.scaffold-layout-detail{flex: 3; overflow-y: auto; overflow-x: hidden; }

.scaffold-layout-list-container{ list-style: none; padding: 0; margin: 0; overflow-y: auto; overflow-x: hidden; position: relative;}
.scaffold-layout-list-container:hover::-webkit-scrollbar-thumb {background:rgba(0, 0, 0, 0.025);}
.scaffold-layout-list-container::-webkit-scrollbar { width:5px; }
.scaffold-layout-list-container::-webkit-scrollbar-track { background:transparent; border-radius:0px; }
.scaffold-layout-list-container::-webkit-scrollbar-thumb { background:rgba(0, 0, 0, 0); border-radius:0px; }

.scaffold-layout-detail:hover::-webkit-scrollbar-thumb {background:rgba(0, 0, 0, 0.025);}
.scaffold-layout-detail::-webkit-scrollbar { width:5px; }
.scaffold-layout-detail::-webkit-scrollbar-track { background:transparent; border-radius:0px; }
.scaffold-layout-detail::-webkit-scrollbar-thumb { background:rgba(0, 0, 0, 0); border-radius:0px; }

.scaffold-layout-list-item{ display: flex;}
.scaffold-layout-list-item .appt-timeplace{ color: #282828; font-weight: 500; line-height: 20px; width: 200px; padding-right: 2rem; padding-left: 0.5em;}
.scaffold-layout-list-item .appt-details{ flex: auto; border-left: 2px solid #E4E7EC; padding-left: 2rem; color: #667085; font-weight: 500; position: relative;}
.scaffold-layout-list-item .appt-details:before{ content: ''; position: absolute; border-left:1px solid transparent; left: 0; top: 0; bottom: 0;}
.scaffold-layout-list-item .appt-details .his-detaiils{ margin-bottom: 22px;}
.scaffold-layout-list-item .appt-details .his-detaiils:last-child{ margin-bottom: 0;}
.scaffold-layout-list-item .appt-details .his-detaiils .badge{padding: .65rem; font-size: 15px; font-weight: 500; border-radius: 8px;}
.scaffold-layout-list-item .appt-details .his-detaiils .badge.badge-icon{padding-left: 2.5em;}

.badge-alter{ background: transparent; border: 1px solid;}
.badge-icon{padding-left: 2.5em;}
.badge-icon i{ position: absolute; transform: translate(calc(50% - 7px), calc(50% - 16px)); left: 0;}
.badge-note{ border: 2px solid #D0D5DD; color: #0747A6; text-decoration: none;}
.badge-black{ border: 2px solid #282828; color: #fff; background-color: #282828;}

.scaffold-layout-list-item .appt-timeplace, .scaffold-layout-list-item .appt-details{ padding-top: 1em; padding-bottom: 1em;}

.scaffold-layout-list-item.active{background-color: #F7FCFE;}
.scaffold-layout-list-item.active .appt-details{ border-color: #0747A6;}
.scaffold-layout-list-item.active .appt-details:before{ border-color: var(--blue);}
.scaffold-layout-list-item.active .appt-details .pointer{ border-radius: 0; position: absolute; right: 0; left: auto; top: 50%; transform: translate(0, calc(50% - 3em));}

.add-note-btn-box .btn{padding: 0.5em 1.2em; border-radius: 6px;}
.add-note-btn-box .btn-primary.alter{ border-color: #666; background: transparent;}

.yellow-note-box{border-radius: 12px; border-left: 3px solid rgba(242, 193, 46, 0.30); background: #FCF8E3; padding: .75em; color: #232323; font-size: 14px; line-height: 1.5em; margin-bottom: 10px;}

.gallery.client-phbox{justify-content: flex-start; gap: 10px;}
.client-phbox.grid-4 figure{width: calc(20% + 1.45em); height: 120px;}

.gap-2{gap: 2px;}

.gallery.client-phbox.gap-2{gap: 2px !important;}
.gallery.client-phbox.gap-2.grid-6 figure{width: 16.5%;}
.gallery.client-phbox.gap-2.grid-6.h-188 figure{ height: 188px;}


/* increase number product  */

.number-input input[type="number"] {-webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield;}
.number-input input[type=number]::-webkit-inner-spin-button, .number-input input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none;}
.number-input { display: flex; justify-content: space-around; align-items: center; }
.number-input button { -webkit-appearance: none; background-color: transparent; border: none; cursor: pointer;}
.number-input button:before, .number-input button:after { display: inline-block; position: absolute; content: ''; height: 2px; transform: translate(-50%, -50%);}  
.number-input button.plus:after { transform: translate(-50%, -50%) rotate(90deg); }
.number-input input[type=number] { text-align: center; }
.number-input.number-input button {width: 45px; border: 1px solid #D1D1D1; min-height: 45px; border-radius: 5px; background: #fff;}
.number-input.number-input button:before, .number-input.number-input button:after { width: .9rem; background-color: #495057; }
.number-input.number-input input[type=number] { max-width: 4.5rem; padding: .5rem; margin: 0 6px;}

@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance: none) and (stroke-color:transparent) {
    .number-input.safari_only button:before, .number-input.safari_only button:after { margin-top: -.2rem; }
  }
}

.accordion-table .pnl-head.toggled>td{ border: 0;}
.accordion-table .panel-content-wrapper { display: none; background: #F9F9F9; border-radius: 10px;}
.accordion-table .accordion-panel-content>td{ padding: 0; border: 0;}

.table-card-header, .table-card-body, .table-card-footer{padding: 15px;}
.table-card-header{ position: relative; border-bottom: 1px solid #D1D1D1; }
.table-card-header .btn-close{background-color: #D0D0D0; border-radius: 6px; background-size: 14px; padding: .5em; position: absolute; right: 15px; top: 15px;}

.table-card-footer{ border-top: 1px solid #D1D1D1; display: flex; flex-wrap: wrap; justify-content: space-between; }

.white-layer{border-radius: 5px; background: #FFF; padding: 1rem; margin-bottom: 10px;}


/* timeline */

.time-line--outr{border-radius: 5px; border: 4px solid #F3F6F9;}
.time-line-item{ display: flex; justify-content: space-between; align-items: flex-start; position: relative;}

.time-line-icon {display: flex;  justify-content: center; align-items: center; margin-right: 1.2rem;}
.time-line-icon:after{ position: absolute; content: ''; border-left: 3px solid #EBEDF3; height: 100%; top: 0; z-index: 0;}

.time-line-icon .avatar{ width: 40px; height: 40px; border-radius: 50px; font-size: 17px; font-weight: 500; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
.time-line-content{ flex: auto; background: #F3F6F9; border-radius: 12px; padding: 1.2rem 10rem 1.2rem 1.2rem; position: relative; margin-bottom: 25px;}

.dot-box{ position: absolute; right: calc(0% + 1rem); display: flex; align-items: center;}
.dot-nav{ text-decoration: none; color: #888C9F; font-size: 20px; padding: 0 .25rem; width: 28px; height: 28px; border: none; text-align: center;}

.dot-nav + .dropdown-menu{ min-width: unset; border-radius: 8px; border: 1px solid #D1D1D1; background: #FFF; box-shadow: 0px 6px 3px 0px rgba(0, 0, 0, 0.16); right: 0 !important; left: auto !important;}

.shaded-dropdown{border-radius: 8px; border: 1px solid #D1D1D1; background: #FFF; box-shadow: 0px 4px 2px 0px rgba(0, 0, 0, 0.06); margin: 0; }

.table.no-border-table td, .table.no-border-table th{ border: none;}

.poly{display: flex; position: relative; padding-left: 20px;}
.poly .square{width: 50px; height: 50px; clip-path: polygon(0 0, 0 26%, 29% 0); position: absolute; top: 0; left: 0;}
.poly span{font-weight: 500;}

.normalWorking { color: #0076bc;}
.normalWorking .square{ background: #0076bc;;}

.editedWorking { color: #e46c8a; }
.editedWorking .square{ background: #e46c8a;}

.squareIcon { color: #d0d0d0;}
.squareIcon .square{ background: #d0d0d0;}

.onLeave { color: #fdc02f;}
.onLeave .square{ background: #fdc02f;}

/* report */

.one-inline { display: flex; flex-wrap: wrap;}
.one-inline .form-group { display: flex; align-items: center; flex-wrap: wrap;}
.w-170{ width: 170px !important;}
.w-185{ width: 185px !important;}
.w-200{ width: 200px !important;}
.one-inline .form-group .toggle input + label{flex: auto; padding-left: 1rem; padding-right: 1rem;}
.one-inline .form-group .form-control{ width: auto;}
.right-part-calendar{ display: flex; justify-content: flex-end; align-items: center; }
.print-date { font-weight: 500; color: #000;}
.right-part-calendar .btn-group .btn{ background: #D0D0D0; color: #000; padding: 0.6em; min-height: 45px;}
.right-part-calendar .btn-group .btn:nth-child(2){ margin: 0 1px !important;}
.right-part-calendar .btn-group > :not(.btn-check:first-child) + .btn{ margin-left: 0;}

.dy-menu{ list-style: none; margin: 0; padding: 0; display: table; width: 100%;}
.dy-menu li{ display: table-cell;}
.dy-menu li a{ display: block; padding: .4rem .65rem; color: #71717A; text-decoration: none; border-radius: 5px; text-align: center;}
.dy-menu li.active a{ background: var(--blue); color: #fff;}

.shade-card{border-radius: 15px; background: #FFF; box-shadow: 4px 0px 20px 0px rgba(0, 0, 0, 0.06); text-decoration: none;}

.report-sum{ position: relative; padding: 0 150px 0 70px; color: var(--d-grey);}
.report-sum .title{ color: #181C32; margin-bottom: 12px;}
.report-sum .icon-box{ border-radius: 6px; background: #F5F8FA; color: #888C9F; font-size: 23px; position: absolute; padding: 0.5rem 0.85rem; left: 0;}
.update-on {border-radius: 6px; border: 1px dashed #E4E6EF; background: #FFF; font-weight: 500; color: #B5B5C3; display: inline-block; padding: .5em .85em;}
.update-on .date-time{color: #5E6278; margin-left: 50px;}

.report-sum .badge{position: absolute; right: 0;}

/* sliding menu */

.menu-wrapper { position: relative; overflow: hidden; }
.menu-wrapper .menu-item { overflow: auto; white-space: nowrap; padding: 0 18px;}
.menu-wrapper .menu-item::-webkit-scrollbar { display: none; }
.menu-wrapper .pointer {height: 100%; width: 30px; line-height: normal; text-align: center; position: absolute; top: 0; background: #F3F3F3; padding: 23px 0;}
.menu-wrapper .pointer i { color: #333; cursor: pointer;}
.menu-wrapper .left-pointer { left: 0;}
.menu-wrapper .right-pointer {right: 0;}
.menu-wrapper .dis i {color: #ccc;}

/* new appointment */

.service-list-box{border-radius: 10px; border: 1px solid #D1D1D1; background: #F9F9F9; }
.service-list-box .ctg-tree li ul{ margin: 0;}
.service-list-box .ctg-tree li .disflex a{ color: var(--d-grey); flex: 100%;}
.service-list-box .pt-title .disflex{/*padding-left:1.4em;*/ background-color: #fff; color: #000; border-radius: 5px; font-weight: 500; margin-bottom: 10px;}
.service-list-box .ctg-tree li li { margin-bottom: 5px;}
.service-list-box .ctg-tree li li a{ flex: auto;}
.service-list-box .ctg-tree li.selected{  background-color: #fff; }
.service-list-box .ctg-tree li.selected a{ color: #3699FF !important;}
.service-list-box .ctg-tree li.selected:before,
.service-list-box .ctg-tree li.selected .disflex:before{ height: 24px; width: 24px; display: inline-block; background: #232323; border-radius: 5px; vertical-align: middle; content: ''; position: absolute; right: .75em; top: .4em;}
.service-list-box .ctg-tree li.selected:after,
.service-list-box .ctg-tree li.selected .disflex:after { content: "\e91a"; position: absolute; line-height: normal; right: 14px; top: 9px; color: #fff; font-family: 'ico'; font-size: 18px;}

.service-list-box .ctg-tree li.selected.remove:before,
.service-list-box .ctg-tree li.selected.remove:after{ display: none;}
.service-list-box .ctg-tree li.selected.remove .cross-red{ color: #fff !important; position: absolute; right: .75em; top: .4em;}
.service-list-box .ctg-tree li.selected.remove .cross-red:hover{ background: #FF4858; color: #fff !important;}

.custname{color: #A1A1AA;}
.custname i{ color: #000;}

/* Notification  */

.notification-wrapper ul{list-style: none; margin: 0; padding: 0;}
.notification-wrapper li{ display: flex; align-items: center; border-bottom: 1px solid #F1F4F9; padding-bottom: 20px; margin-bottom: 20px; color: #787774;}

.notification-wrapper li:last-child{ border: 0; padding-bottom: 0; margin-bottom: 0;}
.notification-wrapper li figure{ width: 48px; height: 48px; margin: 0; border-radius: 50px; overflow: hidden; margin-right: 12px;}
.notification-wrapper li figure img{ object-fit: cover; height: 100%; width: 100%;}
.notification-wrapper li small{color:#CBCACA;}

.notification-header{ padding: 15px; border-bottom: 1px solid #D1D1D1; display: flex; justify-content: space-between; align-items: center;}

.notification-wrapper .btn-close {background-color: #D0D0D0; border-radius: 6px; background-size: 14px; padding: .45em;}
.notification-wrapper .btn{ border: 1px solid #DEDEDD;}
.notification-wrapper li:hover{color:#302F2A;}

.app-navbar ul.items li .dropdown-menu.notification-wrapper{  width: 500px; min-width: auto; margin-top: 22px;}
.app-navbar .notification-wrapper li{  padding: 15px; margin: 0;}

.app-navbar .notification-wrapper li:first-child{ margin-bottom: 0; border: 0;}
.app-navbar .notification-wrapper li figure{width: auto; height: auto; flex: 0 0 40px;}

/* calendar */

.btn-wait-list{ border-color:#EEF1F5; background: #EEF1F5; padding: 0.3em 0.6em 0 0.6em; font-size: 20px;}
.btn-wait-list:hover{ background: #232323; border-color: #232323; color: #fff;}


.hasDatepicker .ui-widget{font-family: 'Roboto', sans-serif; font-size: inherit; }
.hasDatepicker .ui-datepicker{ width: auto; padding: 0;}
.hasDatepicker .ui-widget-header{ border: 0; background:transparent; color: inherit; font-weight: normal;}
.hasDatepicker .ui-widget-header .ui-icon{background-image: url(../img/calender-ui-icon.png) !important;}
.hasDatepicker .ui-widget-header .ui-icon.ui-icon-circle-triangle-w{ background-position: 0 0;}
.hasDatepicker .ui-widget-header .ui-icon.ui-icon-circle-triangle-e{ background-position: right 0;}
.ui-icon-circle-triangle-e {background-position: -33px -1px;}
.ui-icon-circle-triangle-w {background-position: -97px -1px;}
.hasDatepicker .ui-widget.ui-widget-content{border: none;}
.hasDatepicker .ui-widget-content{background:transparent;}
.hasDatepicker .ui-datepicker .ui-datepicker-title{ text-align: left;}
.hasDatepicker .ui-datepicker th{font-weight: normal; color: #4B4F52; font-weight: 500;}

.hasDatepicker .ui-state-default,
.hasDatepicker .ui-widget-content .ui-state-default,
.hasDatepicker .ui-widget-header .ui-state-default,
.hasDatepicker .ui-button, html .hasDatepicker .ui-button.ui-state-disabled:hover,
html .hasDatepicker .ui-button.ui-state-disabled:active{ border: 0; background: transparent; font-weight: normal; color: #4B4F52; border-radius: 50px; line-height: 35px; height: 40px;}

.hasDatepicker .ui-datepicker td span, .hasDatepicker .ui-datepicker td a{ text-align: center;}

.hasDatepicker .ui-state-highlight, .hasDatepicker .ui-widget-content .ui-state-highlight, .hasDatepicker .ui-widget-header .ui-state-highlight {/*color: #fff; */}

.hasDatepicker .ui-datepicker-today{}
.ui-datepicker td .ui-state-default{ display: inline-block; width: 40px; height: 40px;}

#mycalendar.hasDatepicker .ui-datepicker-current-day .ui-state-active,
#mycalendar.hasDatepicker .ui-datepicker-today .ui-state-active{ background-color: #1E76E8; color: #fff !important; border-radius: 50%;}

.hasDatepicker .ui-datepicker .ui-datepicker-prev { right: 20px; left: auto; }
.hasDatepicker .ui-datepicker .ui-datepicker-title{ margin-left: 12px; font-weight: 500;}

.hasDatepicker .ui-datepicker-selected {background-color: #1E76E8; color: #fff; border-radius: 50%;}

.hasDatepicker .ui-state-hover,
.hasDatepicker .ui-widget-content .ui-state-hover,
.hasDatepicker .ui-widget-header .ui-state-hover,
.hasDatepicker .ui-state-focus,
.hasDatepicker .ui-widget-content .ui-state-focus,
.hasDatepicker .ui-widget-header .ui-state-focus,
.hasDatepicker .ui-button:hover,
.hasDatepicker .ui-button:focus{ border: transparent; background: transparent; /*color: #fff;*/}

.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover{ top: auto !important;}

#calendar.fc .fc-timegrid-slot{height: 3em; background: #fff;}
#calendar.fc .fc-daygrid-day.fc-day-today{ background: transparent;}

.fc-direction-ltr .fc-button-group > .fc-button {height: 40px;}
.fc-direction-ltr .fc-button-group > .fc-prev-button {border-right: 2px solid #F3F3F3;}
.fc-direction-ltr .fc-button-group > .fc-next-button {border-left: 1px solid #F3F3F3;}

/* #calendar .fc-v-event .fc-event-main{ color: #282828;} */

.drop-list:hover::-webkit-scrollbar-thumb {background:rgb(0, 0, 0);}
.drop-list::-webkit-scrollbar { width:4px;  }
.drop-list::-webkit-scrollbar-track { background:#EDEDED; border-radius:0px; }
.drop-list::-webkit-scrollbar-thumb { background:rgba(0, 0, 0, 0); border-radius:20px; }

.modal .client_list_box{max-width: 500px; padding: 15px; border-radius: 8px; border: 1px solid #D1D1D1; background: #FFF; }
.client_list_box{}

.modal .drop-list{margin: 0;}

.drop-list{ list-style: none; padding: 0; margin: 0 0 25px 0; max-height: 400px; overflow-y: scroll; overflow-x: hidden; height: calc(34vh - 0em);}
.drop-list li{ border-radius: 12px; background: #EEF1F5; padding: 15px; margin-bottom: 10px; cursor: pointer;}
.drop-list li:last-child{ margin-bottom: 0;}

.drop-list li p{color: #282828; font-size: 13px; margin: 0 0 2px 0;}
.drop-list li p:last-child{ margin-bottom: 0;}

.drop-list .client-name .drop-cap,
.detaild-theos .client-name .drop-cap{width: 34px; height: 34px; font-size: 14px; font-weight: 500;}

.drop-list .client-name,
.detaild-theos .client-name{gap: 18px; margin-bottom: 10px;}

.drop-list .client-info h4,
.detaild-theos .client-info h4{ margin: 0; font-size: 15px; }

.drop-list .river-bed,
.detaild-theos .river-bed{ text-decoration: none; }

.detaild-theos hr{border-color:#D1D1D1;}

.detaild-theos .btns{ display: flex; gap: 5px; flex-wrap: wrap;}
.detaild-theos .btns .btn { width: calc(33.33334% - 5px); font-size: 13px; padding: 0.55rem 0.4rem;}

.fc .fc-toolbar.fc-header-toolbar{border-radius: 5px; background: #F3F3F3; padding: 12px;}
.fc .fc-button-primary{background: #D0D0D0; color: #000; border: 0; border-radius: 6px;}
.fc .fc-button-primary:disabled{background: var(--blue); color: #fff;}
.fc .fc-button:disabled { opacity: 1; }

.fc .fc-button .fc-icon { font-size: 1.1em;}
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active{background: var(--blue); color: #fff;}

.fc .fc-toolbar-title { font-size: 16px;}
.fc .fc-button-primary:hover{background: var(--blue); color: #fff;}

.fc th a{ color: var(--black); text-decoration: none; }
.fc th {font-weight: 500;}

.fc-col-header { width: 100% !important;}

.fc-timegrid-event{ border-radius: 5px;}

.fc .fc-scroller-liquid-absolute:hover::-webkit-scrollbar-thumb {background:rgb(0, 0, 0);}
.fc .fc-scroller-liquid-absolute::-webkit-scrollbar { width:5px; }
.fc .fc-scroller-liquid-absolute::-webkit-scrollbar-track { background:transparent; border-radius:0px; }
.fc .fc-scroller-liquid-absolute::-webkit-scrollbar-thumb { background:rgba(0, 0, 0, 0); border-radius:0px; }

.fc-daygrid-dot-event:hover{ background: #333;}

.fc-theme-standard .fc-popover{background: #FFF; box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.15);  border-radius: 0; padding: 0;}

.fc-popover-body .fc-daygrid-event-harness{padding-bottom: 5px; /*margin-bottom: 5px; border-bottom: 1px solid rgba(209, 209, 209, 0.20);*/}
.fc-popover-body .fc-daygrid-dot-event{/*color: #4B4F52;*/}

.fc .fc-popover-header{ background: #232323; padding: 10px; border-bottom: 1px solid rgba(209, 209, 209, 0.20); color: #fff;}

.summry-header{border-radius: 5px; background: #EBF5FF; color: var(--mine-shaft); padding: 9px 20px; display: flex; align-items: center; font-weight: 500; margin-bottom: 17px;}

.orange-box{border-radius: 5px; background: rgba(255, 118, 0, 0.20); color: #282828; padding: 12px;}
.orange-box p{ color: #666; margin: 15px 0 0 0;}
.orange-box b{ color: #282828; display: block;}

.orange-box p:first-child{ margin: 0;}

.note-box{border-radius: 5px; border: 1px solid #D1D1D1; color: #666; font-size: 15px; padding: 1.2rem;}

.recent-slot{border-radius: 5px; background: #F9F9F9; color: #666;  padding: 12px; margin-bottom: 15px;}
.recent-slot .status-check{ border-radius: 3px; background: #FFF; padding: 5px 30px 5px 5px; position: relative; margin-bottom: 5px;}
.recent-slot .status-check span{ position: absolute; right: 6px; top: 5px;}
.recent-slot p b{ color: #282828; display: block;}
.slot-btn.btn{color:#666666; padding: 0.45rem 1rem;}


.drag-box{border-radius: 5px; border: 2px dashed #F2C12E; background: rgba(242, 193, 46, 0.30); padding: 10px;}
.drag-box .head{position: relative; padding-right: 53px;}
.drag-box .head i{ position: absolute; right: 0; top: 0; font-size: 60px;}

.drag-box .treatment{border-radius: 3px; background: #FFF; position: relative; padding: 5px 25px 5px 5px; color: #666;}
.drag-box .treatment i{ position: absolute; right: 5px; top: 9px; cursor: pointer;}

.drag-box.blue{ border: 2px solid #0EA5E9; background: rgba(14, 165, 233, 0.20); color: #282828;}

.drop-list.light-green li{background: rgba(15, 194, 192, 0.10);}

.ui-datepicker-multi .fc-event{ border: 1px solid #1E76E8 !important; background-color: #1E76E8 !important;}
.fc-event:hover{ color: #fff !important;}
#external-events .fc-event:hover{ color: #666 !important;}
.fc-daygrid-dot-event .fc-event-title{font-weight: 500 !important;}
.fc-daygrid-dot-event{padding: 5px !important;}

.hist-strip{ background: #fff; border-radius: 3px; padding: 3px 10px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: #666;}
.hist-strip span{ display: flex; align-items: center;}

.fc .fc-daygrid-day-number{padding: 10px; font-weight: 500; text-decoration: none; color: #0747A6;}
.fc-direction-ltr .fc-daygrid-more-link { border: 2px solid #1E76E8; text-decoration: none; padding: 5px; border-radius: 50px; line-height: normal;}
.fc .fc-daygrid-more-link:hover{ background: #1E76E8; color: #fff;}

.fc-day-other  .fc-daygrid-more-link{ opacity: .3;}

.ui-widget{ font-family: 'Roboto', sans-serif !important;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{ font-weight: 500 !important;}
.ui-widget.ui-widget-content{width: auto !important;}
#mycalendar .ui-state-default, #mycalendar .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{ color: #333 !important; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus{}
.ui-datepicker-multi .ui-state-hover, .ui-datepicker-multi .ui-widget-content .ui-state-hover, .ui-datepicker-multi .ui-state-highlight, .ui-datepicker-multi .ui-widget-content .ui-state-highlight{border: 1px solid #1E76E8 !important; background: #1E76E8 !important; color: #ffffff !important;}
.ui-datepicker-multi .ui-widget-header { border: 1px solid #7fb6ff !important; background: #1e76e8 !important; color: #ffffff !important; font-weight: 500 !important;}

#ui-datepicker-div .ui-state-hover .ui-icon, #ui-datepicker-div .ui-state-focus .ui-icon, #ui-datepicker-div .ui-button:hover .ui-icon, #ui-datepicker-div .ui-button:focus .ui-icon { background-image: url(https://code.jquery.com/ui/1.12.1/themes/ui-lightness/images/ui-icons_ffffff_256x240.png) !important; }

.ui-widget-header .ui-icon{background-image: url(https://code.jquery.com/ui/1.12.1/themes/ui-lightness/images/ui-icons_ffffff_256x240.png) !important;
}

/* .ui-widget-header{ border-color: #1E76E8 !important; background-color: #1e76e8 !important;} */

.user-appnt{ margin-top: 15px;}
.user-appnt:first-child{ margin-top: 0;}
.user-appnt em{color:#9d9797;}

.clinet-lists{list-style: none; margin: 0; padding: 0; background: #EEF1F5;}
.clinet-lists li{ padding: 10px 20px; font-weight: 500; color: #464E5F; border-bottom: 1px solid #00000012; cursor: pointer; display: flex; justify-content: space-between;}
.clinet-lists li:hover{ background: #ffffff85;}

.waitlist{ height: inherit;}
.detaild-theos-scroll {overflow-y: scroll; overflow-x: auto; height: calc(100vh - 134px); /*height: 100%;*/}
.detaild-theos-scroll:hover::-webkit-scrollbar-thumb {background:rgba(51, 50, 50, 0.219);}
.detaild-theos-scroll::-webkit-scrollbar { width:3px; height:3px; }
.detaild-theos-scroll::-webkit-scrollbar-track { background:transparent; border-radius:0px; }
.detaild-theos-scroll::-webkit-scrollbar-thumb { background:rgba(0, 0, 0, 0); border-radius:0px; }

.scroll-y{ overflow-y: scroll; max-height: 240px;}
.scroll-y:hover::-webkit-scrollbar-thumb {background:rgba(51, 50, 50, 0.219);}
.scroll-y::-webkit-scrollbar { width:3px; }
.scroll-y::-webkit-scrollbar-track { background:transparent; border-radius:0px; }
.scroll-y::-webkit-scrollbar-thumb { background:rgba(0, 0, 0, 0); border-radius:0px; }

.simple-link[aria-expanded]{ text-decoration: none; display: block; position: relative;}
.simple-link[aria-expanded]:after{content: "\e945";  font-family: 'ico'; color: var(--black); position: absolute; right: 0; font-size: 22px; transition: .25s; transform: rotate(90deg);}
.simple-link[aria-expanded="true"]:after{transform: rotate(-90deg);}

.app-header{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;}
.feed-item{ display: flex;}
.feed-item .text{position: relative; padding-bottom: 10px; padding-left: 20px; border-left: 3px solid #E5EAEE; color: #282828;}
.feed-item .time{color: #464E5F;font-size: 14px; font-weight: 700; line-height: normal; padding-right: 10px; flex: 0 0 15%;}

.feed-item .text:after{ content: ""; display: block; position: absolute; top: 0; left: -8px; width: 14px; height: 14px; border-radius: 50px; background: #fff; border: 3px solid #3699FF;}

.tot-sales .fonts{color: #666; font-size: 14px;}
.tot-sales .fonts + .fonts{ text-align: right;}
.tot-sales h3{color: #6C1884; margin: 0;}
.tot-clients h3{color: #EF8D09; margin: 0;}
.tot-enquiry h3{color: #5DB033; margin: 0;}


progress{ width: 100%;}
progress.pink-progress{accent-color: #D04ED6;}

#reportrange{ white-space: nowrap;}

.tooltip{ position:relative;float:right; font-family: 'Roboto', sans-serif;}
.tooltip > .tooltip-inner {background-color: #000; padding:5px; font-weight:500; font-size:11px; color: #fff; border: 0; border-radius: 50px; min-width: 26px; line-height: normal;}
.popOver + .tooltip > .tooltip-arrow {	border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #eebf3f;}
.tooltip.fade:not(.show) { opacity: 1;}
.tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-width: 6px 6px 0; border-top-color: #000; display: none;}
.tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent;border-style: solid;}

.progressText{color: #282828; font-size: 12px; font-style: normal; font-weight: 500; display: flex; align-items: center; gap: 10px; margin-bottom: 5px; justify-content: space-between;}
.progress{border-radius:0;overflow:visible;}

.progressText .counter{background-color: #000; padding:4px; font-weight:500; font-size:11px; color: #fff; border: 0; border-radius: 50px; min-width: 26px; line-height: normal; text-align: center;}

/* #mycalendar .ui-datepicker table{ width: 90%;} */

@-webkit-keyframes progress-bar-stripes {
  from {
      background-position: 40px 0;
  }
  to {
      background-position: 0 0;
  }
}
@-o-keyframes progress-bar-stripes {
  from {
      background-position: 40px 0;
  }
  to {
      background-position: 0 0;
  }
}
@keyframes progress-bar-stripes {
  from {
      background-position: 40px 0;
  }
  to {
      background-position: 0 0;
  }
}
.progress { height: 8px; margin-bottom: 10px;background-color: #E9ECEF; border-radius: 10px; /* overflow: hidden; */ /*-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);*/}

.progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: center; background-color: #337ab7; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; border-radius: 10px;}

.progress-bar.scheduled{background: linear-gradient(316deg, #FC5286 0%, #FBAAA2 100%);}
.progress-bar.completed{background: linear-gradient(316deg, #1BC5BD 0%, #07B0A8 100%);}
.progress-bar.cancelled{background: linear-gradient(316deg, #F64E60 0%, #CE080D 100%);}
.progress-bar.pink{background: linear-gradient(90deg, #834D9B 0%, #D04ED6 100%);}

.progress-bar-striped,
.progress-striped .progress-bar {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
}
.progress-bar.active,
.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  -o-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar-success {
  background-color: #5cb85c;
}
.progress-striped .progress-bar-success {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-info {
  background-color: #5bc0de;
}
.progress-striped .progress-bar-info {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-warning {
  background-color: #f0ad4e;
}
.progress-striped .progress-bar-warning {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-danger {
  background-color: #d9534f;
}
.progress-striped .progress-bar-danger {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

/* form-builder */
.formbuilder .accordion-item { margin-bottom: 10px;}
.formbuilder .card{ background: transparent; border: 0; box-shadow: none;}
.formbuilder .card-header{ border: none;}
.client-preview-banner{background: rgba(14, 165, 233, 0.05);}

.ms-choice{height: 45px !important; line-height: 45px !important; border-color: #D1D1D1 !important;}
.ms-choice .placeholder{ background: transparent !important;}
.ms-parent.multiple-select{ width: 100% !important;}
.ms-choice>span{padding-left:1.2rem;}

/* search */
.overlay { height: 100%; width: 100%; display: none; position: fixed; z-index: 15; top: 0; left: 0; background-color: #000000bd;}

.overlay-content { margin: auto; height: 100%; display: flex; justify-content: center; align-items: center;}

.overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; cursor: pointer; color: white; }

.overlay .closebtn:hover { color: #ccc;}

.popup-search-outer{ width: 30%;}
.popup-search-outer .drop-list{ margin-bottom: 0; max-height: 44vh; padding: 15px; background: #fff;}



/* prtk */
.hasDatepicker .ui-state-default, .hasDatepicker .ui-widget-content .ui-state-default, .hasDatepicker .ui-widget-header .ui-state-default, .hasDatepicker .ui-button, html .hasDatepicker .ui-button.ui-state-disabled:hover, html .hasDatepicker .ui-button.ui-state-disabled:active {
  border: 0;
  background: transparent;
  font-weight: normal;
  color: #4B4F52;
  border-radius: 50px;
  line-height: 2;
  height: 2.4em;
}

.ui-datepicker td .ui-state-default {
  display: inline-block;
  width: 2.4em;
  height: 2.4em;
}

#mycalendar .ui-datepicker table {
  width: 100%;
}
/* prtk */

/* black calendar */
.black-card{border-radius: 12px; background: #242424; box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.15); color: #fff;}
.black-card *{ color: #fff;}
.black-card .hasDatepicker .ui-datepicker .ui-datepicker-title{ margin-left: 0;}
.black-card .ui-state-default, .black-card .ui-widget-content .ui-state-default, .black-card .ui-widget-header .ui-state-default, .black-card .ui-button, html .black-card .ui-button.ui-state-disabled:hover, html .black-card .ui-button.ui-state-disabled:active{ color: #fff !important;}

.black_calendar_appointment{ list-style: none; padding: 0; margin: 0;} 
.black_calendar_appointment li{ border-left:8px solid #0747A6; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.10); margin-bottom: 10px; cursor: pointer;}
.black_calendar_appointment li:last-child{ margin-bottom: 0;}
.black_calendar_appointment li .app_time{ color: #93939A; font-size: 12px;}
.black_calendar_appointment li .service_name{color: #93939A; font-size: 12px;}
.black_calendar_appointment li .notes{ border-radius: 5px; border-left: 3px solid rgba(242, 193, 46, 0.30); background: #FCF8E3; padding: .65em; color: #242424; font-size:  12px; margin-top: 10px;}

/*.toggle { box-sizing: border-box; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; border-radius: 4px;
  background: #FFF; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16) inset; padding: 6px;}
.toggle input { display: none; }
.toggle input + label {margin: 0; padding: 0.8rem 2rem; box-sizing: border-box; position: relative; display: inline-block; text-align: center; flex: 0 0 50%; display: flex; justify-content: center; align-items: center; min-height: 45px; font-size: 16px; font-weight: 400; border-radius: 5px; transition: border-color 0.15s ease-out, color 0.25s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;  cursor: pointer;
}
.toggle input + label i{ margin-right: 10px;}
.toggle input:checked + label { background-color: var(--black); color: #fff; border-color: var(--black); z-index: 1; font-weight: 600;}*/

.days-tab{ box-shadow: none; padding: 0; }
.days-tab.toggle input + label{ min-height:1px; flex: 0 0 33.33%; white-space: nowrap; padding: 10px; border: 0; cursor: pointer;}

.days-tab.toggle input + label:first-of-type,
.days-tab.toggle input + label:last-of-type,
.days-tab.toggle input + label{ border-radius: 6px;}

.days-tab.toggle input:checked + label{ background: #000; color: #B5B5C3;}

.accordion-button{ font-weight: 500;}
p.all_services:last-child{ margin-bottom: 0;}

.timeslots .slotsWrap input { visibility: hidden; position: absolute; z-index: -1; width: 0; height: 0;}

.timeslots .slotsWrap label { width: 25%; float: left; font-size: 15px; margin: -1px -1px 0 0; font-weight: normal; border: 1px solid #ccc; padding: 7px 0; background-color: #000; background-color: #EEF1F5; text-align: center; cursor: pointer; position: relative;}

.timeslots .slotsWrap label.selected { border-color: #1E76E8; font-weight: bold; text-shadow: none; cursor: default; color: #fff; background: #1E76E8 !important; /*box-shadow: inset 0 0 15px 0px #d7e4f7;*/ z-index: 4;}

.timeslots .slotsWrap label.disabled { text-decoration: line-through; color: #aaaaaa; cursor: not-allowed; text-shadow: none; border-color: transparent; opacity: 0.5; background: transparent;}
.timeslots .slotsWrap label.disabled.selected{ background: transparent !important; border-color: transparent ; font-weight: normal;}
.clearer {clear: both;}

.servwhorow{ margin-bottom: 5px; border-radius: 6px; position: relative; background: #F5F8FA; overflow: hidden; display: flex; align-items: center;}
.servrowhandle { background: #0747A6; margin-right: 8px; color: #fff; width: 60px; padding: 10px; white-space: nowrap; cursor: hand; text-align: center; }
.summaryservname{}

.login_tab .card{ width: 55%; margin: auto;}
.login_tab .bg-black-strip{ display: none;}
.login_tab .w-50.m-auto{ height: 100%; display: flex; align-items: center; }

.booking-page .dropdown-menu{ left: auto !important; right: 0; min-width: 1px;}

.add-links .badge{ cursor: pointer;}

.message.sent, 
.message.received{ display: flex;}

.message.sent .message-content,
.message.received .message-content{ padding: 15px; border-radius: 12px; max-width: 65%;}


.message.sent .message-content { background-color: #F3F6F9; margin-left: auto;}
.message.received .message-content { background: #CFEDFB;}

.chat .modal-header{ position: relative;} 
.chat .modal-header:after { position: absolute; content: ''; background: #ffffff; width: calc(100% - 20px); height: 20px; left: 0; bottom: 0; margin-bottom: -21px; z-index: 2;}

.show-more.simple-link[aria-expanded]:after{ right: auto;}

.text-sepr{ display: flex; align-items: center; font-weight: 500; }
.text-sepr::before, .text-sepr::after { flex: 1; content: ''; padding: .05em; background-color: #EEE; margin: 5px;}

.choices__list--multiple .choices__item{background-color: var(--blue) !important; border: 1px solid var(--blue) !important;}

#wrapper.page-error{ height: inherit;}
.page-error #page-content-wrapper{ margin: 0; height: inherit; box-sizing: border-box;}
.page-error #page-content-wrapper main{ height: inherit; display: flex; align-items: center; justify-content: center;}
.page-error .logo-part { max-width: 140px; margin: 0 auto 30px auto;}
.page-error .container{max-width: 1000px;}

/*  Responsive  */

@media (min-width: 768px) {
    #page-content-wrapper{margin-left: 16rem; transition: margin 0.25s ease-out;}
    body.sb-sidenav-toggled #wrapper #page-content-wrapper { margin-left: 0rem; }
}
@media (max-width: 1400px) {
  .brand-tabs{ gap: 10px;}
  
  .add-note-btn-box{ display: flex; flex-wrap: wrap; gap: 10px;}
  .client-phbox.grid-4 figure { width: calc(25% + 1.45em);}
}
@media (max-width: 1024px) {
    .w-40, .w-60{ width: 50%; }
    .w-lg-750px, .w-lg-500px{ width: 100%;}
    .auth-outr .form-control{ height: 50px;}
    .auth-logo{margin-bottom: 30px;}
    .form-group{ margin-bottom: 15px;}
    .client-phbox figure{width: auto;}
    .app-nav-left{ flex-wrap: wrap;}
    .card-dropdown{ gap: 20px;}
}
@media (max-width: 991px) {
    .forgot-link{ position: static; margin-top: 6px; display: inline-block;}
    .auth-bg1 h2{font-size: 25px;}
    h3{ font-size: 24px;}
    .auth-logo img { max-width: 120px; }
    .card .card-head .toolbar .tool-left a { margin-bottom: 10px;}
    .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch;}
    #main_row.row .col{ flex: 100%; margin-bottom: 20px; }
    .drag-box .head i{font-size: 2em;}
    .detaild-theos-scroll{ height: auto;} 
}
@media (max-width: 767px) {
    .auth-outr{ flex-wrap: wrap;}
    .w-40, .w-60 { width: 100%;}
    .auth-bg1{ order: 1;}
    .auth-1{ order: 2;}
    .p-10 { padding: 1rem;}
    .modal-dialog{max-width: 100%;}
    .sidetoggle{transform: translate(0px, 0px);}
    .sb-sidenav-toggled .sidetoggle{transform: translate(100px, 0px);}
    #sidebar-wrapper{    box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.15);}
    .card .card-head .toolbar .tool-left { flex-wrap: wrap;}
    .app-navbar ul.items li .profile aside{ display: none;}
    .detaild-theos-scroll{ height: auto;}
    .ctg-greybox-list-box{ flex: auto;}
    .card .card-head .toolbar .tool-left .small-title,
    .card .card-head .toolbar .tool-left .input-group.search { width: 100%; margin: 0 0 20px 0 !important;}
    .card .card-head .toolbar .tool-left #import_service{ flex-wrap: wrap;}
    .card .card-head .toolbar .tool-left #import_service .btn{ margin-bottom: 20px;}
    .ctg-greybox-details-box .mb-4.d-flex{ flex-wrap: wrap;}
    .scaffold-layout-outr{ height: auto;}
    .ctg-tree{ height: auto;}
    .scaffold-layout-list-details{flex-wrap: wrap; gap: 0;}
    .ctg-greybox-details-box .pe-4.py-4{ padding: 20px !important;}
    .ctg-greybox-details-box .mb-4.d-flex{ gap: 20px;}
    #create_service .bor-box.pd-20{ margin-bottom: 20px;}
    .card .card-head .toolbar .tool-right{    gap: 10px; display: flex; flex-wrap: wrap; }
    .fc .fc-toolbar.fc-header-toolbar{ flex-wrap: wrap; gap: 10px;}
    .brand-tabs{ gap: 0px;}
    .brand-tabs li{ flex: 100%;}
    .popup-search-outer { width: 90%;  }
}

@media (max-width: 500px) {
  main{ padding: 15px;}
}

@media (max-width: 324px) {
  .navbar-inner{justify-content: flex-end;}
}