:root {
    --header-height: 3.5rem;
}

html {
    font-size: 1.1rem;
}

@media (min-width: 768px) {
    html {
        font-size: 1.1rem !important;
    }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial !important;
    font-size: 1.1rem !important;
}

.main-header {
    height: var(--header-height) !important;
    border-bottom: none !important;
    box-shadow: 0px 0px 28px 0px rgba(86, 61, 124, 0.13) !important;
}

.brand-link {
    padding: 14px 9px !important;
    height: var(--header-height) !important;
    border-bottom: none !important;
}

.user-panel {
    border-bottom: none !important;
}

.main-footer {
    height: 2.8125rem !important;
    border-top: none !important;
}

.mb-10px {
    margin-bottom: 10px !important;
}

.navbar-light .navbar-nav .nav-link {
    color: rgba(0, 0, 0, 0.5) !important;
}

.navbar-light .navbar-nav .pushmenu {
    color: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    border-radius: 5px !important;
}

.navbar-light .navbar-nav .pushmenu:hover {
    color: #FFFFFF !important;
    border-color: #886AB5 !important;
    background-color: #A38CC6 !important;
}

.nav-flat.nav-sidebar>.nav-item .nav-treeview,
.nav-flat.nav-sidebar>.nav-item>.nav-treeview {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.w-50per {
    width: 50% !important;
}

.w-60per {
    width: 60% !important;
}

.w-70per {
    width: 70% !important;
}

.w-80per {
    width: 80% !important;
}

.w-90per {
    width: 90% !important;
}

.w-100per {
    width: 100% !important;
}

.bg-icon-create {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 5em;
    height: 5em;
    line-height: 1em;
    padding: .5em 0;
    margin: .25rem;
    background-color: #FAF8FB;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3em;
}

.icon-create {
    height: 18px;
    zoom: 3;
    color: rgba(0, 0, 0, 0.5);
}

.btn:first-child:active,
:not(.btn-check)+.btn:active {
    border-color: transparent !important;
}

.btn.disabled {
    border: none;
    border-color: transparent !important;
}

.btn:disabled {
    border: none;
    color: #6c757d;
    cursor: not-allowed;
}

.offcanvas-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem 1rem !important;
}

.offcanvas-level2 .offcanvas {
    z-index: 1055 !important;
}

.offcanvas-level2 .offcanvas-backdrop.show {
    z-index: 1050 !important;
}

.fs-14px {
    font-size: 1.1rem !important;
}

.mlr-5px {
    margin-left: 5px !important;
    margin-right: 5px !important;
}

.box-select {
    border: 1px solid #CED4DA !important;
    border-radius: .25rem !important;
    box-shadow: inset 0 0 0 transparent !important;
}

.form-control:focus .box-select {
    border-color: #80BDFF !important;
    box-shadow: inset 0 0 0 transparent !important;
}

.input-custom {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-radius: 0 !important;
}

.custom-form-control .form-control {
    border-radius: 6px;
}
.custom-form-control .input-group-append .input-group-text,
.custom-form-control .input-group-append .btn{
    border-radius: 6px;
}

.custom-form-control .form-control + .input-group-append .input-group-text,
.custom-form-control .form-control + .input-group-append .btn{
    height: calc(2.25rem + 2px);
}

.custom-form-control .form-control-sm +.input-group-append .input-group-text,
.custom-form-control .form-control-sm +.input-group-append .btn {
    height: calc(1.8125rem + 2px);
}

.select2-container--default .select2-selection--single {
    border-radius: 6px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 12px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
    right: 13px !important;
    display: block;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23888888' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat !important;
    background-position: right 0 center;
    background-size: 12px;
}

.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: rotate(-180deg);
}

.select2-custom+.select2-container--default .select2-selection--single {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-radius: 0 !important;
}

.select2-custom {
    border-top: 1px solid #CED4DA !important;
}

.ml-2px {
    margin-left: 2px !important;
}

.ml-20px {
    margin-left: 20px !important;
}

.mr-2px {
    margin-right: 2px !important;
}

.mr-20px {
    margin-right: 20px !important;
}

.mt-2px {
    margin-top: 2px !important;
}

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

.fs-22px {
    font-size: 22px !important;
}

.text-sort {
    color: #495057 !important;
}

.text-sort i {
    color: rgba(0, 0, 0, 0.5) !important;
}

.text-sort.active i {
    color: #17A2B8 !important;
}

.color-ffffff {
    color: #FFFFFF !important;
}

.color-886ab5 {
    color: #886AB5 !important;
}

.color-495057 {
    color: #495057 !important;
}

.color-212529 {
    color: #212529 !important;
}

.color-666666 {
    color: #666666 !important;
}

.color-3599bc {
    color: #3599BC !important;
}

.btn-create {
    color: #FFFFFF !important;
    background-color: #3BCCBD !important;
    border-color: #3BCCBD !important;
    border-radius: 6px !important;
}
/* ----------------------------------------------------------------------------- */

/* New JO */
.btn-17a2b8 {
    background-color: #17a2b8 !important;
    color: white !important;;
    border: none !important;;
}
.btn-17a2b8:hover { opacity: 0.9 !important; }

/* New PR */
.btn-3A8C90 {
    background-color: #3A8C90 !important;
    color: white !important;;
    border: none !important;;
}
.btn-3A8C90:hover { opacity: 0.9 !important; }

/* Planner */
.btn-005792 {
    background-color: #005792 !important;
    color: white !important;;
    border: none !important;;
}
.btn-005792:hover { opacity: 0.9 !important; }

/* Notification */
.btn-fd3995 {
    background-color: #FD3995 !important;
    color: white !important;;
    border: none !important;;
}
.btn-fd3995:hover { opacity: 0.9 !important; }

/* .btn-fd3995 {
    color: #FFFFFF !important;
    background-color: #FD3995 !important;
    border-color: #FD3995 !important;
}

.btn-fd3995:hover {
    color: #FFFFFF !important;
    background-color: #FD1381 !important;
    border-color: #FC077A !important;
} */

/* ----------------------------------------------------------------------------- */

.btn-1dc9b7 {
    color: #FFFFFF !important;
    background-color: #1DC9B7 !important;
    border-color: #1DC9B7 !important;
}

.btn-1dc9b7:hover {
    color: #FFFFFF !important;
    background-color: #18A899 !important;
    border-color: #179C8E !important;
}

.btn-1dc9b7:focus,
btn-1dc9b7:active {
    color: #FFFFFF !important;
    background-color: #18A899 !important;
    border-color: #179C8E !important;
    box-shadow: 0 0 0 0.2rem rgba(63, 209, 194, 0.5) !important;
}



.btn-fd3995:focus,
.btn-fd3995:active {
    color: #FFFFFF !important;
    background-color: #FD1381 !important;
    border-color: #FC077A !important;
    box-shadow: 0 0 0 0.2rem rgba(253, 87, 165, 0.5) !important;
}

.btn-2196f3 {
    color: #FFFFFF !important;
    background-color: #2196F3 !important;
    border-color: #2196F3 !important
}

.btn-2196f3:hover {
    color: #FFFFFF !important;
    background-color: #1B7CC9 !important;
    border-color: #2777B7 !important;
}

.btn-2196f3:focus,
.btn-2196f3:active {
    color: #FFFFFF !important;
    background-color: #1B7CC9 !important;
    border-color: #2777B7 !important;
    box-shadow: 0 0 0 0.2rem rgba(71, 168, 245, 0.5) !important;
}

.btn-e3a06d {
    color: #FFFFFF !important;
    background-color: #E3A06D !important;
    border-color: #E3A06D !important;
}

.btn-e3a06d:hover {
    color: #FFFFFF !important;
    background-color: #B68057 !important;
    border-color: #AA7D5A !important;
}

.btn-e3a06d:focus,
.btn-e3a06d:active {
    color: #FFFFFF !important;
    background-color: #B68057 !important;
    border-color: #AA7D5A !important;
    box-shadow: 0 0 0 0.2rem rgba(227, 160, 109, 0.5) !important;
}

.btn-outline-1dc9b7 {
    color: #1DC9B7 !important;
    background-color: #FFFFFF !important;
    border-color: #1DC9B7 !important;
}

.btn-outline-1dc9b7:hover {
    color: #FFFFFF !important;
    background-color: #1DC9B7 !important;
    border-color: #1DC9B7 !important;
}

.btn-outline-1dc9b7.active {
    color: #FFFFFF !important;
    background-color: #1DC9B7 !important;
    border-color: #1DC9B7 !important;
}

.btn-outline-2196f3 {
    color: #2196F3 !important;
    background-color: #FFFFFF !important;
    border-color: #2196F3 !important
}

.btn-outline-2196f3:hover {
    color: #FFFFFF !important;
    background-color: #2196F3 !important;
    border-color: #2196F3 !important
}

.btn-outline-2196f3.active {
    color: #FFFFFF !important;
    background-color: #2196F3 !important;
    border-color: #2196F3 !important
}

.warning-text-custom:hover {
    color: #FFFFFF !important;
}

.warning-text-custom.active {
    color: #FFFFFF !important;
}

.nav-link-custom {
    color: #495057 !important;
}

.nav-link-custom.active {
    color: #0D6EFD !important;
}

.text-bg-1dc9b7 {
    color: #FFFFFF !important;
    background-color: #1DC9B7 !important;
}

.bg-menu {
    background-color: #5DE0E6 !important;
    background-image: linear-gradient(270deg, rgba(59, 170, 209, 0.3), transparent) !important;
}

.bg-color-ffffff {
    background-color: #FFFFFF !important;
}

.bg-color-faf8fb {
    background-color: #FAF8FB !important;
}

.bg-color-f3f3f3 {
    background-color: #F3F3F3 !important;
}

.bd-color-e9e9e9 {
    border-color: #E9E9E9 !important;
}

.bd-table-ebebeb {
    border: 2px solid #EBEBEB !important;
}

.table .thead-custom th {
    color: #495057 !important;
    background-color: #F3F3F3 !important;
    border-color: #E9E9E9 !important;
}

.card-summary {
    height: 350px;
    overflow-y: auto;
}

.card-opposite-summary {
    height: 350px;
}

.info-card {
    position: relative;
    width: 16.875rem;
    height: 9.53rem;
    color: #FFFFFF;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0px;
    padding-bottom: 0px;
}

.info-card .profile-image {
    width: 3.125rem;
    height: auto;
    display: inline-block;
    z-index: 2;
    position: relative;
}

.info-card .info-card-text {
    position: relative;
    color: inherit;
    margin-left: 1rem;
    z-index: 1;
    line-height: normal;
    text-shadow: #000 0 1px;
}

.info-card-text {
    font-size: 1rem;
    display: inline-block;
    vertical-align: middle;
}

.info-card img.cover {
    opacity: 0.5;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    height: auto;
}

.info-card img.cover {
    background-size: cover;
}

[class*=icheck-]>input:first-child+input[type=hidden]+label::before,
[class*=icheck-]>input:first-child+label::before {
    border-radius: 6px !important;
}

.form-search {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-right: 0px !important;
}

.form-control:focus+.btn-search {
    border-color: #80BDFF !important;
}

.form-control:focus+.btn-search:hover {
    color: #6C757D !important;
    background-color: #FFFFFF !important;
    border-color: #80BDFF !important;
}

.form-control:focus+.btn-search:active {
    color: #6C757D !important;
    background-color: #FFFFFF !important;
    border-color: #80BDFF !important;
}

.form-control:focus+.input-group-prepend .span-search {
    border-color: #80BDFF !important;
}

.form-control:focus+.input-group-append .span-search {
    border-color: #80BDFF !important;
}

.btn-search {
    border-radius: 6px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-left: 0px !important;
    border-color: #CED4DA !important;
}

.btn-search:hover {
    color: #6C757D !important;
    background-color: #FFFFFF !important;
    border-color: #CED4DA !important;
}

.btn-search:active {
    color: #6C757D !important;
    background-color: #FFFFFF !important;
    border-color: #CED4DA !important;
}

.span-search {
    border-radius: 6px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-left: 0px !important;
    border-color: #CED4DA !important;
    background-color: #FFFFFF !important;
}

.daterangepicker:before,
.daterangepicker:after {
    display: none !important;
}

.description-header {
    font-size: 24px !important;
    font-weight: 700 !important;
}

.description-body {
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-top: 15px !important;
    margin-bottom: 5px !important;
}

.border-md-right {
    border-right: none !important;
}

@media (min-width: 768px) {
    .border-md-right {
        border-right: 1px solid #dee2e6 !important;
    }
}

.pagination-number {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    color: #000000;
    margin-left: 2px;
    margin-right: 2px;
}

.pagination-number:hover {
    background-color: #886AB5;
    border-color: #886AB5;
    color: #FFFFFF;
}

.pagination-number.active {
    background-color: #886AB5;
    border-color: #886AB5;
    color: #FFFFFF;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    margin-top: -5px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: -1px !important;
}

.hidden {
    display: none;
}

.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

[class*=sidebar-light-] .nav-sidebar>.nav-item>.nav-link.active {
    box-shadow: none !important;
}


.th-first {}

.th-last {}


.td-top-first {
    border-top-left-radius: 15px !important;
}

.td-top-last {
    border-top-right-radius: 15px !important;
}

.td-bottom-first {
    border-bottom-left-radius: 15px !important;
}

.td-bottom-last {
    border-bottom-right-radius: 15px !important;
}

/*-----------------------------------------------Timeline-----------------------------------------------------*/
.timeline-steps {
    display: flex;
    justify-content: left;
    flex-wrap: wrap
}

.timeline-steps .timeline-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1rem
}

@media (min-width:768px) {
    .timeline-steps .timeline-step:not(:last-child):after {
        content: "";
        display: block;
        border-top: .25rem dotted;
        width: 3.46rem;
        position: absolute;
        left: 7.5rem;
        top: .3125rem
    }
    .timeline-steps .timeline-step:not(:first-child):before {
        content: "";
        display: block;
        border-top: .25rem dotted;
        width: 3.8125rem;
        position: absolute;
        right: 7.5rem;
        top: .3125rem
    }
    .timeline-steps .timeline-step.blue:not(:last-child):after,
    .timeline-steps .timeline-step.blue:not(:first-child):before {
        border-color: #3b82f6;
    }
    .timeline-steps .timeline-step.gray:not(:last-child):after,
    .timeline-steps .timeline-step.gray:not(:first-child):before {
        border-color: #6c757d;
    }
    .timeline-steps .timeline-step.no-line-next:after {
        display: none;
    }
}

.timeline-steps .timeline-content {
    width: 10rem;
    text-align: center
}

.timeline-steps .timeline-content .inner-circle {
    border-radius: 1.5rem;
    height: 1rem;
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.timeline-steps .timeline-content .inner-circle.blue {
    background-color: #3b82f6;
}

.timeline-steps .timeline-content .inner-circle.gray {
    background-color: #6c757d;
}

.timeline-steps .timeline-content .inner-circle:before {
    content: "";
    display: inline-block;
    height: 3rem;
    width: 3rem;
    min-width: 3rem;
    border-radius: 6.25rem;
    opacity: .5
}

.timeline-steps .timeline-content .inner-circle.blue:before {
    background-color: #3b82f6;
}

.timeline-steps .timeline-content .inner-circle.gray:before {
    background-color: #6c757d;
}
/*-----------------------------------------------Timeline-----------------------------------------------------*/


.new-pl {
    padding-left: 0px !important;
}

@media (min-width: 768px) {
    .new-pl-md {
        padding-left: 80px !important;
    }
}

.btn-transparent {
    color: rgb(60, 65, 77) !important;
    background-color: transparent !important;
    border: 1px solid rgb(211, 217, 223) !important;
    box-shadow: transparent 0px 0px 0px 1px inset !important;
}

    .btn-transparent:hover {
        background-color: rgb(218, 224, 229) !important;
        border: 1px solid rgb(211, 217, 223) !important;
        box-shadow: transparent 0px 0px 0px 1px inset !important;
    }

    .btn-transparent.active {
        background-color: rgb(218, 224, 229) !important;
        border: 1px solid rgb(211, 217, 223) !important;
        box-shadow: transparent 0px 0px 0px 1px inset !important;
    }

.border-top-left-radius {
    border-top-left-radius: 0px !important;
}

    .border-top-left-radius.switch {
        border-top-left-radius: .25rem !important;
    }

.col-8per {
    -ms-flex: 0 0 0 8%;
    flex: 0 0 0 8%;
    max-width: 8%;
}

.col-8per {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
}

.col-11per {
    -ms-flex: 0 0 0 8%;
    flex: 0 0 0 11%;
    max-width: 11%;
}

.col-11per {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
}

.col-23per {
    -ms-flex: 0 0 0 23%;
    flex: 0 0 0 23%;
    max-width: 23%;
}

.col-23per {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
}

.col-32per {
    -ms-flex: 0 0 0 8%;
    flex: 0 0 0 32%;
    max-width: 32%;
}

.col-32per {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
}

.header-fix {
    position: fixed !important;
    top: 0 !important;
    width: -webkit-fill-available !important;
    z-index: 1040 !important;
    margin-right: 7px !important;
}

.modal-backdrop.show + .header-fix {
    margin-right: 34px !important;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #e9ecef !important;
}

.readonly {
    pointer-events: none !important;
    background-color: #e9ecef !important;
    opacity: 1 !important;
}

.card-dashboard {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(0, 0, 0, 0.125) !important;
}

.card-dashboard.active {
    border-color: #80BDFF !important;

}