html { position: relative; min-height: 100%; font-size: 18px; }
body { font-family: 'IBM Plex Sans', sans-serif; overflow-x: hidden; color: #3C454B }
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    /* Set the fixed height of the footer here */
    height: 60px;
    line-height: 60px; /* Vertically center the text there */
}
a:link,a:visited,a:active { color: #3C454B }
a:hover { color: #3C454B }
::placeholder { color: #c0c1c1 !important }
.fa.fa-search { font-size: 0; width: 20px; height: 20px; position: relative; vertical-align: middle; margin-right: 8px }
.fa.fa-search:before { border: 2px solid #3C454B; width: 16px; height: 16px; position: absolute; border-radius: 16px }
.fa.fa-search:after { content: ""; background: #3C454B; width: 2px; height: 9px; position: absolute; border-radius: 8px; left: 12px; top: 12px; transform-origin: 50% 0%; transform: translateX(-50%) rotate(-45deg) }

h1 { font-size: 70px; font-weight: 300 }
h2 { font-size: 48px; font-weight: 300; margin-top: 7rem; margin-bottom: 3.5rem }
h3 { font-size: 32px; font-weight: 600 }
h4 { font-size: 32px; font-weight: normal; margin: 0 0 2.25rem }
h5 { font-size: 22px; font-weight: normal; margin: 0 0 1.5rem }
h6 { font-size: 22px; font-weight: bold; margin: 0 0 1.75rem }
h6.font-weight-semi-bold { margin: 0 0 2.75rem }

.font-weight-semi-bold { font-weight: 600 }
.modal-footer .btn,
section .btn { width: 370px; max-width: 370px; height: 55px; border-radius: 0; font-size: 0.88889rem; font-weight: 500; box-shadow: 6px 8px 20px rgba(37,42,46,0.3); padding: 0; line-height: 55px; display: inline-block; margin-bottom: 0 }
.btn.btn-primary { background-color: #525E66; color: #fff; }
.btn.btn-primary:hover { background-color: #3f484e; color: #fff }
.btn.btn-secondary { background-color: #A6B0B6; color: #fff; }
.btn.btn-success,
.btn.btn-default { background-color: #fff; color: #3C454B; }
.btn.plain-text { height: auto; padding: 0; box-shadow: none; line-height: 26px; font-weight: 600; color: #3C454B; width: auto; display: inline-block; font-size: 18px; margin: 0 }

.btn.plain-text > i { font-size: 0px; height: 42px; width: 27px; background: url(/images/input-icons.png) no-repeat right top -42px; vertical-align: middle; margin-right: 6px }
.btn.plain-text > i.fa-refresh { background-position: right top -42px; }
.btn.plain-text > i.fa-download { background-position: right top -84px; }

td .btn { width: auto; padding: 0.4rem 0.8rem; height: auto; line-height: initial; box-shadow: none }

.form-col.text-right > .plain-text+.plain-text { margin-left: 60px }

input[type=checkbox] { box-sizing: border-box; padding: 0; }
input {
    font-size: 1rem;
    line-height: 1.5;
    padding: 11px 23px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0;
    outline: 0;
    background-color: transparent;
}


.checkbox-button { cursor: pointer; margin-bottom: 20px; display: flex; align-items: center }
.checkbox-button__label:not(.font-italic) { font-weight: bold }
input[type="checkbox"], input[type="radio"]  { position: absolute; opacity: 0; left: 0; top: 0 }
input[type="checkbox"]+span, input[type="radio"]+span { width: 30px; height: 30px; border: 0; background-color: #E6EBED; margin-right: 15px; position: relative;display: inline-block; vertical-align: middle }
input[type="checkbox"]:checked + span:after, input[type="radio"]:checked + span:after { content: ""; position: absolute; width: 14px; height: 14px; left: 8px; top: 8px; background-color: #525E66 }

.bg-light input[type="checkbox"]+span { background-color: #fff }


/* rectangular checkboxes end */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Sticky footer styles
-------------------------------------------------- */
.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

button.accept-policy { font-size: 1rem; line-height: inherit; }

a.text-light { color: #A6B0B6 !important }
a.text-light:hover { color: #A6B0B6 !important }

.container { max-width: 1170px; position: relative;  }
.container-w-970 { flex: 0 0 970px; max-width: 970px; padding: 0; }
.container-w-630 { flex: 0 0 630px; max-width: 630px; padding: 20px 0 80px; }
.container-w-1070 { flex: 0 0 1070px; max-width: 1070px; }
.container-w-1270 { flex: 0 0 1270px; max-width: 1270px; }
p { font-size: 1rem }
small.small { font-size: 43.75%; text-transform: uppercase }
main section { position: relative; padding: 20px 0 calc(9.375% + 30px) }
main section:before { position: absolute; content: ""; width: 100%; height: calc(100%); bottom: 0px;  transform: skewY(-6.375deg); transform-origin: 0% 100% }
main section > * { position: relative }
/*main > section:first-child:after { z-index: -2; position: absolute; content: ""; width: 100%; padding-top: 9.5%; background-color: #f00; bottom: 0 }*/

.bg-white, .bg-white:before { background-color: #fff !important }
.bg-dark, .bg-dark:before { background-color: #A6B0B6 !important; color: #fff }
.bg-light, .bg-light:before { background-color: #E6EBED !important }
.bg-secondary { background-color: #525E66 !important }

.logo { width: 100px; height: 107px; margin-bottom: 20px }
.logo+h1 { margin-bottom: 2.75rem }
.bg-light .logo { background: url(/images/logo.png) bottom left no-repeat; }
.bg-dark .logo { background: url(/images/logo.png) bottom left -200px no-repeat; }


form { margin: 0 }
.form-group { display: flex; margin-bottom: 1.5rem }
.form-group label { white-space: nowrap; line-height: 42px; border-bottom: 1px solid #525E66; margin: 0; padding-right: 20px }
.form-group label.checkbox-button { border: 0 }
.checkbox label { border: 0; color: inherit; line-height: 30px; padding: 0 }
.checkbox label:hover { color: inherit }
.form-group .form-control { line-height: 42px;  border-bottom: 1px solid #525E66; background: none; padding: 0; font-weight: bold; height: 43px !important }
.form-group textarea.form-control { height: 150px !important; border: 1px solid #525E66; line-height: normal; padding: 15px }
.form-group .form-col-label { flex: 0 0 235px; max-width: 235px; border: 0; font-size: 22px; font-weight: bold }
.form-group .form-col-select { flex: 0 0 200px; max-width: 200px }
.form-group .form-col-input { flex: 0 0 435px; max-width: 435px; margin-left: 100px; }
.form-group .form-col-select .form-control,
.form-group .form-col-input  .form-control { font-weight: normal }
.form-group .form-control.datepicker { background: url(/images/input-icons.png) no-repeat right top }

.form-group .custom-radio { padding-left: 30px; width: 30px; height: 30px; margin-right: 15px; margin-top: 5px }
.form-group .custom-radio .custom-control-label { padding-right: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0 }
.form-group .custom-radio .custom-control-label:before { border-radius: 0; width: 30px; height: 30px; box-shadow: unset; background-color: #E6EBED; top: 0 }
.form-group .custom-radio .custom-control-input:checked~.custom-control-label:after { content: ""; position: absolute; width: 14px; height: 14px; left: 8px; top: 8px; background: #525E66 }
.bg-light .form-group .custom-radio .custom-control-label:before { background-color: #fff }
.form-group .custom-radio+.form-col-label { flex: 0 0 190px; max-width: 190px; }
.form-group .custom-radio+.form-col-label.long { flex: 0 0 390px; max-width: 390px; white-space: initial; }

.validation-summary-valid ul { margin: 0 }
.validation-summary-errors { background-color: #F49A9A; color: #fff !important; font-weight: 600; line-height: 50px }
.validation-summary-errors ul { padding: 0; list-style: none }

.daterangepicker { margin-top: 0; border-radius: 0; border: 0; padding: 60px 70px; background-color: #A6B0B6; width: 714px; color: #fff }
.daterangepicker:before,.daterangepicker:after { display: none; }

.daterangepicker .drp-calendar.left { margin-right: 30px !important } 

.daterangepicker .drp-calendar:nth-of-type(n) { padding: 0; max-width: 272px; width: 100% }
.daterangepicker.show-calendar .drp-buttons {border: 0;display: flex;flex-direction: row-reverse;justify-content: flex-end; align-items: center; text-align: left; padding: 30px 0 0}
.daterangepicker.show-calendar .drp-buttons .btn { width: 134px; margin: 0; height: 38px; padding: 0; box-shadow: 6px 8px 20px rgba(37,42,46,0.3); }
.daterangepicker.show-calendar .drp-buttons .btn+.btn { margin-right: 4px }
.daterangepicker.show-calendar .drp-buttons .drp-selected { margin-left: 30px; font-size: 24px }


.daterangepicker .calendar-table { border-radius: 0; border: 0; background-color: transparent; padding: 0 !important; }
.daterangepicker thead tr th { font-weight: 600; border-radius: 0 !important }
.daterangepicker thead tr:first-child th { font-size: 18px;  }
.daterangepicker .calendar-table thead tr:first-child th span { border-color: #fff; margin-bottom: 2px }
.daterangepicker .calendar-table thead tr th.available:hover { background-color: rgba(0,0,0,0.1) !important }
.daterangepicker thead tr:last-child th { font-size: 13px; }
.daterangepicker tbody { color: #3C454B }
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td { width: 39px; height: 39px; font-size: 16px; font-family: 'IBM Plex Sans', sans-serif; border-right: 1px solid #A6B0B6; border-bottom: 1px solid #A6B0B6  }
.daterangepicker .calendar-table td.off { opacity: 0 }
.daterangepicker .calendar-table td { background-color: #fff; border-radius: 0 }
.daterangepicker .calendar-table td:first-child { width: 38px }
.daterangepicker .calendar-table td.weekend { background-color: #E6EBED; }
.daterangepicker .calendar-table td.start-date,
.daterangepicker .calendar-table td.end-date { background-color: #8BC883; color: #3C454B }
.daterangepicker .calendar-table .in-range.weekend,
.daterangepicker .calendar-table .in-range { background-color: #CCF9C6; }


.bg-dark .form-group label { border-color: #fff }
.bg-dark .form-group .form-control { border-color: #fff; color: #fff }


.form-col { flex: 0 0 465px; max-width: 465px; padding-left: 15px; padding-right: 15px; margin: 2rem 0 0 }
.form-col.w-100 { flex: 0 0 100%; max-width: 100%; }

.select2-container .select2-selection { border: 0; border-radius: 0; border-bottom: 1px solid #525E66; }
.select2-container .select2-selection > .select2-selection__rendered { padding-left: 0; font-weight: 600 }
.select2-container .select2-selection > .select2-selection__rendered .select2-selection__placeholder { font-weight: normal }



.sidebar { background-color: #525E66; max-width: 100px; color: #fff; padding: 0; transition: all 0.2s }
.sidebar .logo { background: url(/images/logo.png) bottom -14px left -300px no-repeat; width: 65px; margin-left: 18px; padding-left: 65px }

.sidebar a { font-size: 0; display: block; height: 31px; min-width: 30px; background: url(/images/menu-icons.png) no-repeat left top; padding: 0 0 0 30px; color: #fff }
.sidebar a[href="/Clinics"] { background-position: left top -62px }
.sidebar a[href="/Tasks"] { background-position: left top -31px }
.sidebar a[href="/Requests"] { background-position: left top -93px }
.sidebar a[href="/Logs"] { background-position: left top -124px }
.sidebar a[href="/Prefs"] { background-position: left top -248px; margin-top: 0px }
.sidebar .nav-item { max-width: 100%; padding: 0 35px }
.sidebar .nav-item+.nav-item { margin-top: 40px }
.sidebar .nav-item:nth-last-of-type(2) { margin-top: 110px }


.sidebar .sidebar-toggle-panel { margin: 40px 0 120px; margin-left: 35px; margin-right: 35px; display: flex; cursor: pointer }
.sidebar .sidebar-toggle-panel span { display: inline-block; padding-left: 30px; line-height: 30px; width: 0; overflow: hidden; white-space: nowrap }
.sidebar .sidebar-toggle-panel i { width: 30px; height: 30px; padding: 9px; display: inline-block; vertical-align: top }
.sidebar .sidebar-toggle-panel i:before { content: ""; width: 12px; height: 12px; border-left: 2px solid #fff; border-top: 2px solid #fff; display: block; margin: auto;
transform: translateX(-2px) rotate(135deg); transition: all 0.2s  }
.sidebar .nav-item button { box-shadow: none; padding: 0px; color: #fff; height: auto; line-height: normal }
.sidebar .nav-item button i { display: inline-block; width: 30px; height: 30px; font-size: 24px; text-align: center; line-height: 30px; }
.sidebar .nav-item button text { display: none }


body.side-active .sidebar { max-width: 300px }
body.side-active .sidebar a { font-size: 1rem; font-weight: 600; padding-left: 60px }
body.side-active .sidebar .logo { background-position: bottom -14px left -365px; width: 244px }
body.side-active .sidebar .sidebar-toggle-panel i:before { transform: translateX(2px) rotate(-45deg)  }
body.side-active .sidebar .sidebar-toggle-panel span { width: 100%; font-weight: 600 }

section table { line-height: 50px;  }
section table thead { background-color: #A6B0B6; }
section table thead tr > * { background-color: transparent !important }
section table thead tr > * { color: #fff !important; }
section table tr > * { padding: 0 16px !important; font-size: 1rem !important; border: 0 !important }
section table tbody tr:nth-of-type(2n+1) { background-color:#E6EBED !important }

.container-w-1270 th,
.container-w-1270 td { font-size: 14px !important; height: 50px;  padding: 0 10px !important; line-height: normal; vertical-align: middle; font-weight: 600 }

.container-w-1270 tfoot tr > * { border-bottom: 1px solid #fff !important }
.container-w-1270 tfoot tr > *+*,
.container-w-1270 thead tr > *+* { border-left: 1px solid #fff !important }
.container-w-1270 tbody tr > *+* { border-left: 1px solid #a6B0B6 !important }

.dropdown > button.dropdown-toggle { height: auto; padding: 0; box-shadow: none; line-height: 26px; font-weight: 600; color: #3C454B; width: auto; display: inline-block; position: relative }
.dropdown > button.dropdown-toggle:hover { background-color: transparent }
.dropdown > button.dropdown-toggle:before { content: "" !important; position: absolute !important; left: -5px; top: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transition: all 0.2s; border-radius: 2px }
.dropdown > button.dropdown-toggle:hover:before { background-color: rgba(0,0,0,0.05) }
.dropdown > button i { border: 2px solid #3C454B; width: 26px; height: 26px; border-radius: 26px; vertical-align: top; position: relative }
.dropdown > button i:before,
.dropdown > button i:after { content: ""; width: 14px; height: 2px; background-color: #3C454B; display: block; position: absolute; 
left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 2px }
.dropdown > button i:after { transform: rotate(90deg) }
.dropdown-toggle:after { display: none }
.dropdown > button.dropdown-toggle[aria-expanded="true"] { color: #3C454B; text-decoration: underline }
.dropdown > button.dropdown-toggle[aria-expanded="true"] i { background-color: #3C454B }
.dropdown > button.dropdown-toggle[aria-expanded="true"] i:before,
.dropdown > button.dropdown-toggle[aria-expanded="true"] i:after { background-color: #fff }
.dropdown > .dropdown-menu {
    background-color: #525E66;
    box-shadow: -6px 8px 20px 5px rgba(37,42,46,0.3);
    padding: 24px 0;
    min-width: 0;
    margin-top: 10px;    
    border-radius: 0
}
.dropdown > .dropdown-menu a { padding: 0px 20px 0 38px; margin: 0; white-space: nowrap }

.modal-backdrop { background-color: #313a40; opacity: 0.95 !important; left: 100px; transition: all 0.2s }
.modal { left: 100px; transition: all 0.2s }
.modal-dialog { max-width: 970px; margin-top: 10rem; }
.modal-header { display: none }
.modal-content { background-color: transparent; box-shadow: none; color: #fff; text-align: center }
.modal-content .modal-body { padding: 0 }
.modal-content .modal-footer { max-width: 840px; padding: 0; margin: 4rem auto }
.modal-content .modal-footer .btn+.btn:last-child { margin-left: 100px }
body.side-active .modal-backdrop,
body.side-active .modal {left: 300px}


.table .dt-checkboxes-cell { position: relative; vertical-align: middle; padding: 0px 0 0px 10px !important; width: 40px !important; max-width: 40px !important }
.table .dt-checkboxes-cell+* { padding-left: 0!important }
.table .dt-checkboxes-cell input+span { border: 1px solid #525E66; background-color: transparent }
.table th.dt-checkboxes-cell input+span { border: 1px solid #fff; }
.table .dt-checkboxes-cell input+span:after { left: 7px; top: 7px }

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
    cursor: pointer;
    *cursor: hand:;
    background-repeat: no-repeat;
    background-position: center left 2px;
}