.flex {display:flex}
.align-center {align-items:center}
.align-top {align-items:flex-start}
.align-bottom {align-items:flex-end}
.justifyCenter {justify-content: center}
.flex1 {flex:1}
.flex0 {flex:none}
.table-sm-height th,
.table-sm-height td {padding: .5rem .5rem}
.table-th-right th {text-align: right}
.table-th-left th {text-align: left!important;}
.table-td-left td {text-align: left}
.table-td-right td {text-align:right}
.table-td-none-border td,
.table-td-none-border th{border-bottom: 0}
.text-right {text-align: right!important;}
.line-bottom {border-bottom: 1px solid #eef2f7 }
.table-pointer td {cursor:pointer}
.nav.nav-style-none {border-bottom:0;display:flex;align-items:center;justify-content:flex-end}
.nav.nav-style-none .nav-link {display:flex;align-items:center;justify-content:center;flex:none;border:0;padding:0;}
.nav.carBtn .nav-link {font-size:12px;margin:0 0 0 5px;font-weight:400;border-radius:50%;width:40px;height:40px;background:#9a9a9a;color:#fff;transition:all .2s}
.nav.carBtn img {height:30px;}
.nav.carBtn .nav-link:hover {background: #838383}
.nav.carBtn .nav-link.active {background:#5DCDAD}
.pointer {cursor: pointer}
.text-deep-blue {color: #6f777f}
.font-9 {font-size:9px!important;}

.nav.dashboard-type-tab {font-size: 30px}
.nav.dashboard-type-tab .nav-link {margin-left: 5px}
.nav.dashboard-type-tab .nav-link.active {color:#5DCDAD}

.download {font-size:13px;margin-left:auto;flex:none;border: 1px solid #dee2e6; color:#98a6ad;display:flex;align-items:center;padding:6px;width:250px;cursor:pointer}
.download span {border-radius:4px;background:#666;color:#fff;font-size:12px;font-weight:500;padding:5px 8px;display:block;margin-right:10px;}
.download i {margin-left:auto;font-size:17px}
.download:hover {background:#f6f6f6}
.user-table .btn {width:60px;padding:.28rem 0}
.user-table .badge {width:60px;padding:.25em 0}
.vertical-top {vertical-align:top}
.vertical-top.input {padding-top:13px}
.approval-card-img {cursor:pointer;margin-bottom:5px;border-radius:4px;width:100%;border:2px dashed #dee2e6;height:150px;background-size:cover!important;background-repeat:no-repeat!important;background-position:center!important;background-image:url("../img/no-img.png")}
.list-mb > div {margin-bottom:2px}
.clickToUpload {border: 2px dashed #dee2e6;cursor:pointer;height:150px;font-weight:bold;display:flex;align-items:center;justify-content:center;color:#dee2e6;position:relative}
.clickToUpload input[type=file] {cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0}
.display-eyes {display:inline-flex;align-items:center;position:relative}
.display-eyes.form-check {padding:0;margin:0;display:flex;align-items:center;justify-content:center}
.display-eyes.form-check .form-check-input {margin:0;padding:0}
.header-title img {margin-right: .5rem;height:20px}
.header-title .title-icon {font-size:30px;margin-right:.5rem;}
.badge-main {background:#5DCDAD;color:#fff}
.badge-info {background:#3aafd1;color:#fff}
.badge-gray {background:#aaacae;color:#fff}
.badge-success {background:#0acf97;color:#fff}
.badge-warning {background:#ffbc00;color:#000}
.badge-orange {background: #ff7f4d;color:#fff}

.text-gray {color: #989898;}
.text-main {color: #5DCDAD!important;}
.text-dark-red {color:#a11f1f}

.bg-main-sk {background: darkorange}
.bg-main {background: #5DCDAD}

.carListBox {color:#6c757d; border-radius: 10px;border:1px solid #dee2e6;padding:0;overflow:hidden;box-shadow:1px 1px 10px rgba(0,0,0,.1);transition:all .2s;background:#fff;}
.carListBox:hover {box-shadow:1px 1px 10px rgba(0,0,0,.3)}

.carListBox .img {width:100%;height:180px;background-position:center!important;background-repeat:no-repeat!important;background-size:cover!important;}

.left-50 {left: 50%}
.translate-50 {transform: translate(-50%, -50%)}

.chart06-man,
.chart06-woman
{font-weight:bold;text-align:center;display:flex;flex:1;align-items:center;justify-content:center;flex-direction:column}
.chart06-man i,
.chart06-woman i{color:#39afd1;font-size:50px;}
.chart06-woman i {color:#fa5c7c}
.chart06-man i.xi-star,
.chart06-woman i.xi-star {font-size:15px;margin-right:0.2rem}
.chart06-man span,
.chart06-woman span {font-size:20px}
.chart06-man.small i,
.chart06-woman.small i{font-size:40px;}
.chart06-man.small span,
.chart06-woman.small span {font-size:16px}
.chart06-man.small i.xi-star,
.chart06-woman.small i.xi-star {font-size:12px}

#chart03,
#chart04 {height:70px;position:relative;bottom:40%}

#chart03.small {height:130px;bottom:20px}

.chart-needle {transform: rotate(-90deg);width:5%;transform-origin:0 100%;position:absolute;bottom:0;left:50%;margin-left:-2.5%}
.side-nav-link {position: relative}
.nav-toggle {position:absolute;top:0;right:0;width:60px;height:100%;display:flex;align-items:center;justify-content:center}

.modal-width-auto {width:auto;display:inline-block;max-width:80%;}
.modal-width-auto .modal-body img {max-width:100%;margin:0 auto;}

.h20p {height:20px}
.h45p {height:45px}
.h80p {height:80px}
.w45p {width:45px}
.w70p {width:70px}
.w150p {width:150px}
.line-height09 {line-height:.9em}
.line-height14 {line-height:1.4em}
.line-height16 {line-height:1.6em}
.fw-500 {font-weight: 500}
.border-red {border:1px solid red}
.max-h240 {max-height: 240px}
.max-h250 {max-height: 250px}
.max-h350 {max-height: 350px}
.text-dark-blue {color:darkblue}

.bg-rainbow1 {background: #72d0e9}
.bg-rainbow2 {background: #b3d769}
.bg-rainbow3 {background: #f3ca60}
.bg-rainbow4 {background: #ffa762}
.bg-rainbow5 {background: #f59393}

.text-red {color: red}

.form-table,
.payment-table {color:#6c757d;}
.form-table th,
.form-table td,
.payment-table th,
.payment-table td {padding:4px 5px;}
.form-table th {text-align:right;font-weight:500}
.payment-table th {text-align:left;font-weight:normal}
.payment-table th,
.payment-table td {border:none}
.payment-table td {text-align:right}

.border-rd5 {border-radius:5px}
.border-rd100 {border-radius:100px}
.text-light-gray {color: #aeaeae;}

.sub-title {display:flex;align-items:center;font-weight:bold;margin-bottom:.75rem;color:#6c757d;font-size:14px;}
.sub-title i {font-size:18px;margin-right:3px}

.form-check-input {position: relative;top:2px}
.chart-info-table {font-size:13px;}
.chart-info-table th,
.chart-info-table td {padding:5px 2px;text-align:right}
.chart-info-table th {font-weight:500;color:#98a6ad}
.chart-info-table td {color:darkblue}

.carDetailSlide {overflow: hidden}
.carDetailSlide .swiper-pagination {bottom:10px;right:10px;left:auto;background:#000;color:#fff;font-size:12px;text-align:center;padding:2px 10px;display:inline-block;width:auto;border-radius:5px;font-weight:500}
.carDetailSlide .slide-badge {display:flex;align-items:center;flex-direction:column;position:absolute;top:20px;left:20px;text-align:center;}
.carDetailSlide .slide-badge p {border-radius:5px;font-weight:500;font-size:13px;padding:2px 10px;display:inline-block}
.carDetailSlide .slide-badge p:first-child {background:#fff;border:1px solid #666}
.carDetailSlide .slide-badge p:last-child {background:#5DCDAD;color:#fff;border:1px solid #666}
.carDetailSlide .swiper-button-prev,
.carDetailSlide .swiper-button-next {background-image:url("../img/slide-arrow.png");background-size:auto 44px}
.carDetailSlide .swiper-button-next {transform:rotate(180deg)}

.hover-grayBg {transition:all .2s}
.hover-grayBg:hover {background:#f6f6f6}

@media (max-width:3200px) {
    .chat {max-height:1400px;overflow-y:auto}
}
@media (max-width:2800px) {
    .chat {max-height:1200px;overflow-y:auto}
}
@media (max-width:2400px) {
    .chat {max-height:1000px;overflow-y:auto}
}
@media (max-width:2000px) {
    .chat {max-height:800px;overflow-y:auto}
}
@media (max-width:1600px) {
    .chat {max-height:600px;overflow-y:auto}
}

.chat-date {max-width:300px;width:80%;padding:5px 0;display:flex;align-items:center;justify-content:center;background:#999;color:#fff;font-weight:bold;font-size:12px;border-radius:20px;margin:0 auto 20px;}
.chat-box-wrap {margin-bottom:80px}
.chat-box-wrap > li {display:flex;align-items:start;margin-bottom:20px;}
.chat-profile {text-align:center;font-weight:bold;font-size:20px;display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;margin-right:10px;background-position:center!important;background-repeat:no-repeat!important;background-size:cover!important;}
.chat-box {flex:none}
.chat-profile-name {font-weight:bold;color:#777;font-size:14px;height:40px;display:flex;align-items:center;margin-right:10px;}
.chat-item {display:inline-block;width:max-content;}
.chat-list {display:flex;flex-direction:column}
.chat-list > li {position:relative;border-radius:3px;padding:0;margin-bottom:10px;font-size:13px;line-height:1.3;font-weight:500;color:#666;display:inline-block;width:max-content;max-width:280px}
.chat-list > li > span {color: #b7b7b7;display:inline-block;width:max-content;font-size:12px;position:absolute;bottom:0;left:calc(100% + 5px)}
.chat-list a {transition:all .2s}
.chat-type-alarm {width:280px!important;max-width:none!important;}
.chat-type-alarm > p {background:#5DCDAD;color:#fff;padding:5px 10px;border-radius:3px 3px 0 0;}
.chat-type-alarm > div {padding:10px;border:1px solid #dedede;border-top:0;border-radius:0 0 3px 3px;}
.chat-type-alarm > div a {margin:10px auto 0;display:flex;align-items:center;justify-content:center;background: #cdcdcd;color:#fff;max-width:70%;border-radius:5px;padding:3px 10px;}
.chat-type-alarm > div a:hover {background: #b5b5b5}
.chat-type-from {background:#f6f6f6;padding:10px!important;}
.chat-type-to {background: #fff1dc;padding:10px!important;}
.chat-right {flex-direction: row-reverse}
.chat-right .chat-profile-name {justify-content:flex-end}
.chat-right .chat-list > li > span {left:auto;right:calc(100% + 5px)}

.chat-bg-blur {position: relative}
.chat-bg-blur div {position:relative;z-index:2;}
.chat-bg-blur:before {z-index:1;opacity:.7;content:'';position:absolute;top:0;left:0;width:100%;height:100%;filter:blur(10px);background:url("../img/chat-sample.png") no-repeat center;background-size:cover;}

.text-left {text-align:left}
.min-h200 {min-height:200px}
.btn-w75 {width:75px;padding-left:0;padding-right:0}

.profile-img {display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;background-position:center!important;background-repeat:no-repeat!important;background-size:cover!important;}

.h-350p {height:350px}
.w-95 {width:95%}
.w-30 {width:30%}
.h-50p {height:50px}
.resize-none {resize:none}
.left-0 {left:0}
.h35p {height:35px;}
.h40p {height:40px;}
.w40p {width:40px;}

.thfix-table {overflow: auto; height: 290px;}
.thfix-table thead th { position: sticky; top: 0; z-index: 1; background: #fff; border-bottom:0}
.thfix-table thead th:after {content: '';display:block;height:1px;width:100%;position:absolute;bottom:0;left:0;background:#efefef}

.thfix-table2 {overflow: auto; height: 500px;}
.thfix-table2 thead th { position: sticky; top: 0; z-index: 1; background: #fff; border-bottom:0}
.thfix-table2 thead th:after {content: '';display:block;height:1px;width:100%;position:absolute;bottom:0;left:0;background:#efefef}

.thfix-table2 thead .th2 { position: sticky; top: 66.59px; z-index: 1; background: #fff; border-bottom:0}
.thfix-table2 thead .th2:after {content: '';display:block;height:1px;width:100%;position:absolute;bottom:0;left:0;background:#efefef}

.thfix-table3 {overflow-y: auto; overflow-x: auto; height: 600px; width: auto!important; table-layout: fixed;white-space: nowrap;}
.thfix-table3 thead th { position: sticky; top: 0; left: 400; z-index: 1; background: #fff; border-bottom:0}
/* .thfix-table3 thead th:after {content: '';display:block;height:1px;width:100%;position:absolute;bottom:0;left:0;background:#efefef} */
.thfix-table3 thead td { position: sticky; top: 0; left: 400; z-index: 1; background: #fff; border-bottom:0 }
/* .thfix-table3 thead td:after {content: '';display:block;height:1px;width:100%;position:absolute;bottom:0;left:0;background:#efefef} */

.text-transform-none {text-transform: none}
.calendar-text-box {border-radius:5px;font-size:13px;background:#efefef;color:#6e6962}
.calendar-text-box h3 {font-size:16px;}
.calendar-text-box li {margin-bottom:20px;}
.calendar-text-box p {position:relative;padding-left:10px;}
.calendar-text-box p:after {position:absolute;left:0;top:7px;content:'';display:block;width:4px;height:4px;background:#6e6962;border-radius:50%}
.fc-event-title {text-align: left}

.info-box {border-radius:5px;border:1px solid #dee2e6;background:#f6f6f6}
.info-box h4 {font-size:13px;font-weight:500;padding:10px;background:#666;color:#fff;}
.info-box ul {padding:10px 20px;max-height:200px;overflow-y:auto}
.info-box li {font-size:12px;color:#666;margin-bottom:10px;}
.info-box li p {position:relative;padding:0 0 0 10px;}
.info-box li p:before {content: '';display:block;width:5px;height:5px;background:#666;position:absolute;top:50%;transform:translateY(-50%);left:0;}
.info-box li span {padding-left:20px;color: #a6aaab}

.popover-body {background:#fff}
.bg-orange {background:darkorange}
.align-items-inherit {align-items: inherit}

.vanilla-calendar {background:transparent;box-shadow:none;border:0}
.vanilla-calendar .vanilla-calendar-week {background:transparent;border-bottom:1px solid #EAEAEA}
.vanilla-calendar .vanilla-calendar-week span {color:#000}
.vanilla-calendar .vanilla-calendar-header {display:none}
.vanilla-calendar .vanilla-calendar-date {border:2px solid transparent;border-radius:50%;padding:11px 0;box-sizing:border-box;background:transparent}
.vanilla-calendar .vanilla-calendar-date--selected {background-color:transparent;color:inherit}
.vanilla-calendar .vanilla-calendar-date--squre {background-color:transparent;color:inherit}
.vanilla-calendar-date {position:relative}
.vanilla-calendar .vanilla-calendar-date--today:after,
.vanilla-calendar-date.selected:after,
.vanilla-calendar-date.line:after {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);content:'';display:block;width:35px;height:35px;border-radius:50%;border:2px solid transparent}
.vanilla-calendar-date.selected:after {border-color: darkorange}
.vanilla-calendar-date.line.skyblue:after {border-color:skyblue}
.vanilla-calendar-date.line.pink:after {border-color:hotpink}
.vanilla-calendar-date.line.black:after {border-color:black}
.vanilla-calendar .vanilla-calendar-date--today:after {background:#e7e9ed!important;z-index:-1}
.vanilla-calendar .vanilla-calendar-date--disabled {opacity:1}
.vanilla-calendar .vanilla-calendar-date--disabled span {opacity: 0.2}
.vanilla-calendar-date.squre:after {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);content:'';display:block;width:35px;height:35px;border-radius:15%;border:2px solid transparent}
.vanilla-calendar-date.squre:after {border-color: skyblue}

.swiper-button-next, .swiper-button-prev {z-index:8}

.rentalHistorySlide .swiper-slide {background:#fff}
.rentalHistorySlide .swiper-button-next,
.rentalHistorySlide .swiper-button-prev {top:1px;margin-top:0;width:20px;height:20px}
.rentalHistorySlide .swiper-button-next {right:10%;background:url("../img/slide-next.png") no-repeat center;background-size:contain}
.rentalHistorySlide .swiper-button-prev {left:10%;background:url("../img/slide-prev.png") no-repeat center;background-size:contain}



@media screen and (max-width: 575px) {

  .mb-p-2 {padding:.75rem!important;}
  .mb-font-12 {font-size:12px!important;}
  .mb-mt-2 {margin-top:.75rem!important;}

  .form-table,
  .form-check {font-size:13px}

  .mb-pb-30p {padding-bottom:30% !important}
  #sk-carinfo #chart06 .apexcharts-canvas {position: absolute;left:50%;transform: translateX(-50%)}

}