@font-face {
    font-family: 'Circular Std-normal';
    src: url('fonts/CircularStd-Book.ttf') format('truetype'); /* Adjust the path as needed */
    font-weight: 500; /* Specify the font weight */
    font-style: normal; /* Specify the font style */
}

@font-face {
    font-family: 'Circular Std-medium';
    src: url('fonts/CircularStd-Medium.ttf') format('truetype'); /* Adjust the path as needed */
}

@font-face {
    font-family: 'Circular Std-bold';
    src: url('fonts/CircularStd-Bold.ttf') format('truetype'); /* Adjust the path as needed */
}

body, html {
    /*background: url(images/page-background.jpg);*/
    background: #f3f3f3;
    /*background: transparent;*/
    height: 100%;
    min-height: 100%;
    font-family: 'Circular Std-medium', sans-serif !important;
    font-weight: 500 !important;
    font-size: 12px !important;
}

.sm-blue ul a.highlighted, .sm-blue ul a:active, .sm-blue ul a:focus, .sm-blue ul a:hover {
    background: #fff;
    background-image: linear-gradient(to bottom,#fff,#fff);
    color: #444;
    border-left: 2px solid #f5821f !important;
    transition: .1s ease-in-out
}

.sm-blue {
    background: #fff;
    border-radius: 0;
    box-shadow: 0 0 0 rgba(0,0,0,.2)
}

    .sm-blue a, .sm-blue a.highlighted, .sm-blue a:active, .sm-blue a:focus, .sm-blue a:hover {
        padding: 12px 10px;
        background: #fff;
        color: #444
    }

@media only screen and (max-width:768px) {
    .sm-blue a, .sm-blue a.highlighted, .sm-blue a:active, .sm-blue a:focus, .sm-blue a:hover {
        padding: 4px;
        background: #fff;
        color: #444
    }
}

.sm-blue a .sub-arrow {
    top: auto;
    margin-top: 0;
    bottom: 2px;
    left: 50%;
    margin-left: -5px;
    right: auto;
    width: 0;
    height: 0;
    border-width: 5px;
    border-style: solid dashed dashed dashed;
    border-color: #444 transparent transparent transparent;
    background: 0 0;
    border-radius: 0
}

.sm-blue > li {
    border-left: 1px solid #ddd
}

.skin-blue .main-header .navbar {
    background-color: #fff;
    min-height: 44px;
    color: #444;
    box-shadow: 0 0 10px #444;
    box-shadow: 0 8px 6px -6px #444
}

.box-header.with-fill {
    background: #fff;
    padding: 3px;
    color: #444;
    margin: 0;
    padding-bottom: 0;
    border: 0;
    border-bottom: 2px solid #dee2e6
}

    .box-header.with-fill .btn {
        border-radius: 4px
    }

    .box-header.with-fill .btn-xs {
    }

    .box-header.with-fill .btn-primary {
        background-color: transparent !important;
        font-size: 14px !important;
        border: 1px solid #ddd !important;
        color: grey !important;
        border-radius: 4px !important;
        font-weight: 500 !important;
        outline-style: none !important;
        margin: 0px 2px 2px 2px !important;
        text-decoration: none !important;
        padding: 0px 4px !important;
        box-shadow: none !important;
        width: auto !important;
    }

        .box-header.with-fill .btn-primary:hover {
            box-shadow: 0px 1px 3px 0px #848282 !important;
        }

        .box-header.with-fill .btn-primary:focus {
            box-shadow: 0px 1px 3px 0px #848282 !important;
            background-color: transparent !important;
            color: grey !important;
            border: 1px solid #ddd !important;
        }

        .box-header.with-fill .btn-primary:target {
            box-shadow: 0px 1px 3px 0px #848282 !important;
            background-color: transparent !important;
            color: grey !important;
            border: 1px solid #ddd !important;
        }

        .box-header.with-fill .btn-primary.active.focus, .box-header.with-fill .btn-primary.active:focus, .box-header.with-fill .btn-primary.active:hover,
        .box-header.with-fill .btn-primary:active.focus, .box-header.with-fill .btn-primary:active:focus, .box-header.with-fill .btn-primary:active:hover {
            box-shadow: 0px 1px 3px 0px #848282 !important;
            background-color: transparent !important;
            color: grey !important;
            border: 1px solid #ddd !important;
        }

        .box-header.with-fill .btn-primary.disabled, .box-header.with-fill .btn-primary.disabled.active, .box-header.with-fill .btn-primary.disabled.focus,
        .box-header.with-fill .btn-primary.disabled:active, .box-header.with-fill .btn-primary.disabled:focus, .box-header.with-fill .btn-primary.disabled:hover,
        .box-header.with-fill .btn-primary[disabled], .box-header.with-fill .btn-primary[disabled].active, .box-header.with-fill .btn-primary[disabled].focus,
        .box-header.with-fill .btn-primary[disabled]:active, .box-header.with-fill .btn-primary[disabled]:focus, .box-header.with-fill .btn-primary[disabled]:hover {
            box-shadow: 0px 1px 3px 0px #848282 !important;
            background-color: transparent !important;
            color: grey !important;
            border: 1px solid #ddd !important;
        }

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    background: #fff;
    border: none;
    color: #444;
    border: 1px solid #f5821f;
    border-top: 3px solid #f5821f;
    border-bottom: 1px solid transparent;
    border-radius: 0
}

.nav-tabs > li > a {
    background: #fff;
    border: none;
    color: #444;
    border-top: 3px solid #fff;
    border-bottom: 1px solid #f5821f;
    border-radius: 0
}

.nav-tabs > li {
    margin-left: -.15%
}

.swMain ul.anchor li a.selected {
    color: #f8f8f8;
    background: #f5821f;
    color: #fff;
    border: 1px solid #f5821f;
    cursor: text;
    -moz-box-shadow: 1px 5px 10px #888;
    -webkit-box-shadow: 1px 5px 10px #888;
    box-shadow: 1px 5px 10px #888;
    border: 2px solid #f5821f;
    border-left: 4px solid #f5821f;
    border-radius: 0
}

    .swMain ul.anchor li a.selected:hover {
        background: #f5821f;
        opacity: .8
    }

.swMain ul.anchor li a.done {
    position: relative;
    color: #fff;
    background: #fff;
    color: #444;
    border: 1px solid #f5821f;
    z-index: 99;
    border-radius: 0
}

#SearchText {
    border-bottom: 2px solid #f5821f;
    border-radius: 0;
    padding: 0 4px 0 4px;
    transition: .3s ease-in-out
}

    #SearchText:hover {
        width: 180px;
        transition: .3s ease-in-out
    }

    #SearchText:focus {
        width: 180px;
        transition: .3s ease-in-out
    }

.btn {
    border-radius: 4px
}

.btn-primary {
    background-color: #fff !important;
    font-size: 12px !important;
    border: 1px solid #f5821f !important;
    color: #f5821f !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    box-shadow: 0px 1px 3px 0px #848282 !important;
    outline-style: none !important;
    margin: 2px !important;
    width: 100px;
}

    .btn-primary:hover {
        color: #fff !important;
        background-color: #f5821f !important;
        font-size: 11px !important;
        border: 1px solid #f5821f !important;
        /*border-color: #f5821f;*/
        /*opacity: .7 !important*/
    }

    .btn-primary:focus {
        color: #fff !important;
        background-color: #f5821f !important;
        font-size: 11px !important;
        border: 1px solid #f5821f !important;
        /*border-color: #f5821f;*/
        /*opacity: .7 !important*/
    }

    .btn-primary:target {
        color: #fff !important;
        background-color: #f5821f !important;
        font-size: 11px !important;
        border: 1px solid #f5821f !important;
        /*border-color: #f5821f;*/
        /*opacity: .7 !important*/
    }

    .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover {
        color: #fff !important;
        background-color: #f5821f !important;
        border: 1px solid #f5821f !important;
        /*border-color: #f5821f !important;*/
        /*opacity: .7 !important*/
    }

    .btn-primary.disabled, .btn-primary.disabled.active, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled], .btn-primary[disabled].active, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary.active, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {
        color: #fff !important;
        background-color: #f5821f !important;
        border: 1px solid #f5821f !important;
        /*border-color: #f5821f;*/
        opacity: .5 !important
    }

div fieldset {
    border: solid 0px #f5821f;
    background: rgba(255, 255, 255, 0.5);
    margin: 10px 0px 10px 0px;
    position: relative;
    display: inline;
    padding: 4px 0px 4px 0px;
    width: 99%;
    text-align: left;
    background: #fff !important;
    box-shadow: 2px 2px 4px #ddd !important;
    border-radius: 10px !important;
}

/*form fieldset legend {
    background: #fff !important;
    border-bottom: 2px solid #f5f5f5 !important;
}*/

fieldset legend {
    background: #fff !important;
    border-bottom: 2px solid #f5f5f5 !important;
    font-size: 20px !important;
    color: #333 !important;
    /*font-weight: bold !important;*/
    padding: 4px !important;
    margin: 0 !important;
    position: relative !important;
    width: 100% !important;
    border-radius: 4px 4px 0 0 !important;
    /* border: 1px solid #f5821f; */
    /*padding: 10px;
    border-radius: 8px;
    color: #ffffff;
    font-weight: normal;
    font-size: 15px;
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";*/
}
/*fieldset .pnlInsingleRow,
fieldset .pnlTwoInRow
{*/
/*width: 100% !important;*/
/*margin-left: 10px !important;
    display: grid;
    width: 100% !important;
}
fieldset .pnlInsingleRow input[type=checkbox], 
fieldset .pnlInsingleRow input[type=radio],
fieldset .pnlTwoInRow input[type=checkbox],
fieldset .pnlTwoInRow input[type=radio] {
    display: block !important;
    width: fit-content;
}*/
/*.dxgvHeader {
    cursor: pointer;
    white-space: nowrap;
    padding: 4px 6px 5px 6px;
    border: Solid 1px #f5f5f5;
    background-color: #f5821f;
    overflow: hidden;
    font-weight: 400;
    color: #fff;
    text-align: left
}*/
.dxgvGroupPanel {
    white-space: nowrap;
    font-size: 11px;
    color: #676a6c;
    /*border-bottom: Solid 1px #f5821f;*/
    border: none;
    padding: 7px 4px 8px 6px;
    background: #fff;
}

/*.dxgvTitlePanel {
    background: #f5f5f5;
    border-bottom: 1px solid #f5821f
}*/

/*.dxgvGroupPanel {
    background: #f5f5f5
}*/

table.mGrid th {
    padding: 4px 2px;
    color: #333;
    background: #f5821f !important;
    border-left: solid 1px #f5f5f5;
    font-size: 12px;
    font-weight: bold !important;
}

table.mGrid {
    width: 100%;
    background-color: #fff;
    margin: 5px 0 10px 0;
    border: 1px solid #f5f5f5
}

    table.mGrid td {
        padding: 4px;
        border: solid 1px #f5f5f5;
        color: #333 !important;
        font-weight: bold !important;
        font-size: 12px;
    }

    table.mGrid tr.hilite {
        background: #fafafa
    }

.div-left {
    background: #f5821f
}

.navbar-custom-menu .navbar-nav > li > a {
    background: #444
}

.form-control {
    height: 24px;
    padding: 2px;
    font-size: 12px;
    line-height: 11px;
    float: left;
    margin: 2px 0 4px 0;
    width: auto;
}

    .form-control:focus {
        box-shadow: 0 0 4px #f5821f !important;
        border-bottom: 2px solid #f5821f !important
    }

.form-control {
    border-radius: 0px;
    box-shadow: none
}

.swMain .buttonPrevious {
    background: #f5821f;
    border-radius: 4px;
    border: none
}

.swMain .buttonNext {
    background: #f5821f;
    border-radius: 4px;
    border: none
}

section.content {
    background: #f5f5f5
}

a {
    color: #f5821f
}

    a:hover {
        color: #f5821f
    }

    a:active, a:focus, a:target {
        color: #f5821f
    }

.login-page, .register-page {
    background: #f5821f
}

.dxgvControl, .dxgvDisabled {
    border: none
}

.dxgvFilterRow {
    background: #f5f5f5 !important
}

.dxpgControl {
    border: 1px solid #f5821f
}

.dxpgExpBar {
    background: #f5821f
}

.dxpgFilterArea {
    background: #f5f5f5
}

.dxpgArea {
    background: #f5f5f5
}

.dropdown-menu ul.menu li:hover {
    border-left: 2px solid #f5821f
}

#acc .par-selected {
    background: #f5821f
}

#acc h3 {
    border: 1px solid #f5821f;
    background: #f5f5f5;
    border-left: 6px solid #f5821f
}

#acc .acc-content {
    border: 1px solid #f5821f
}

#nested .acc-selected {
    background: #f5821f
}

#nested h3 {
    border: 1px solid #f5821f;
    color: #fff
}

#nested .acc-content {
    border: 1px solid #f5821f
}

#nested1 .acc-selected1 {
    background: #f5821f;
    color: #fff
}

#nested1 .acc-content1 {
    border: 1px solid #f5821f
}

#nested2 .acc-selected2 {
    background: #f5821f;
    color: #fff
}

#nested2 .acc-content2 {
    border: 1px solid #f5821f
}

#nested3 .acc-selected3 {
    background: #f5821f;
    color: #fff
}

#nested3 .acc-content3 {
    border: 1px solid #f5821f
}

#nested4 .acc-selected4 {
    background: #f5821f;
    color: #fff
}

#nested4 .acc-content4 {
    border: 1px solid #f5821f
}

#acc h3:hover {
    background: #f5821f
}

#nested h3 {
    background: #f5821f
}

.acc-content2, .acc-content3, .acc-content4, .acc-content5 {
    border-color: #f5821f !important
}

.nav-tabs > li > a:hover {
    background: #fff;
    border: none;
    color: #444;
    border-top: 3px solid #ddd;
    border-bottom: 1px solid #f5821f;
    border-radius: 0;
    background: #ddd
}

.ui-widget-header {
    border: 1px solid #f5821f;
    background: #f5821f
}

.ui-widget-content {
    border: 1px solid #f5821f
}

    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        border: 1px solid #f5821f
    }

.ui-datepicker .ui-datepicker-calendar .ui-state-highlight a {
    background: #f5821f;
    border: 2px solid #444 !important
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: #999;
    color: #fff;
    border: none !important
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: none !important;
    background: #f5821f
}

.ui-state-default:hover {
    background: #444;
    color: #fff
}

.ui-datepicker .ui-datepicker-next:hover, .ui-datepicker .ui-datepicker-prev:hover {
    background: #444 !important;
    border-color: #f5821f !important
}

.dxgvControl a {
    color: #f5821f
}

table.mGrid .pgr a,
table.mGrid td a {
    color: #f5821f
}

    table.mGrid .pgr a:hover {
        color: #333
    }

.dxgvFilterBar {
    background: #f5f5f5 !important;
    border-top: 1px solid #f5821f !important
}

table.mGrid .pgr {
    background: #f5821f
}

.label-primary {
    background-color: #f5821f !important
}

.TrainTime .TrainTimeHome {
    background-color: #f5821f !important
}

.TrainTime .TrainTimeMatter {
    border-color: #f5821f !important
}

.wizard > .steps .current a, .wizard > .steps .current a:active, .wizard > .steps .current a:hover {
    background-color: #f5821f !important
}

dialog {
    border-color: #f5821f !important
}

.form-control-combo:focus, .form-control-uc:focus {
    border-bottom: 2px solid #f5821f !important;
    box-shadow: 0 0 4px #f5821f !important
}

.pnlInsingleRow {
    clear: left !important;
    /*padding: 4px 0 0 0 !important;*/
    width: 900px !important;
    float: left !important;
    /*margin: 5px;*/
}

.pnlInsingleRow2 {
    clear: left !important;
    /*padding: 4px 0 0 0 !important;*/
    width: 100% !important;
    float: left !important;
    /*margin: 5px;*/
}

.pnlTwoInRow {
    /*padding: 4px 0 0 0 !important;*/
    width: auto !important;
    float: left !important;
    /*margin: 5px;*/
}

.pnlTwoInRow2 {
    padding: 4px 0 0 0 !important;
    width: 450px !important;
    float: left !important;
    /*margin: 5px;*/
}

    .pnlInsingleRow .pnlLableColumn,
    .pnlTwoInRow .pnlLableColumn,
    .pnlTwoInRow2 .pnlLableColumn,
    .pnlLableColumn,
    span.pnlLableColumnHead {
        /*span.all {*/
        color: #333;
        float: left;
        font-weight: bold !important;
        width: 106px;
        font-size: 12px;
        margin: 5px !important;
        text-align: left !important;
    }

.control-label.all,
table > tbody > tr > td .rangerselectiondiv span.all,
table > tbody > tr > td > span.all {
    color: #333 !important;
    float: left !important;
    font-weight: bold !important;
    /*width: 106px !important;*/
    font-size: 12px !important;
    /*margin: 5px !important;*/
}

table > tbody > tr > td > span {
    color: #333 !important;
    font-size: 12px !important;
}

.largeTextbox {
    width: 300px !important
}

.MediumTextbox {
    width: 192px !important
}

.SmallTextbox {
    width: 95px !important
}

.UploadFormWidth {
    width: 300px !important
}

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

.pnlButton {
    clear: left !important;
    padding: 4px 0 0 0 !important;
    /*width: 900px !important;*/
    float: left !important;
    padding-left: 20px !important;
    margin-top: 5px !important
}

.ButtonWidth {
    width: 100px !important
}

.ButtonWidthAuto {
    width: auto !important;
}

.FULarge {
    width: 400px !important;
    margin-left: 20px !important
}

.FUMedium {
    width: 300px !important
}

@media screen and (min-width:1200px) {
    .pnlInsingleRow {
        width: 90% !important
        /*width: auto !important;*/
    }

    .pnlInsingleRow2 {
        width: auto !important;
    }

    .pnlTwoInRow {
        width: 37.5% !important;
        /*width: auto !important*/
    }
}

@media screen and (max-width:500px) {
    .largeTextbox {
        width: 192px !important
    }

    .FULarge {
        width: 192px !important;
        margin-left: 20px !important
    }

    .FUMedium {
        width: 192px !important
    }
}

.div-left, .div-right {
    height: 100%;
    width: 50%
}

.div-left {
    float: left
}

.parentContainer {
    margin: 18% auto;
    vertical-align: middle
}

.div-right {
    float: right;
    /*position: relative;
    top: -95px*/
}

ul.social-icons {
    margin: 10px auto;
    width: 240px;
    padding: 0
}

    ul.social-icons li {
        display: inline-block;
        margin: 0 8px
    }

        ul.social-icons li a {
            display: inline-block;
            margin-bottom: -2px;
            transition: .17s ease-in-out;
            -moz-transition: .17s ease-in-out;
            -webkit-transition: .17s ease-in-out;
            -o-transition: .17s ease-in-out
        }

            ul.social-icons li a i {
                font-size: 22px;
                color: #fed5b1
            }

            ul.social-icons li a:hover {
                transform: scale(1.4);
                -ms-transform: scale(1.4);
                -webkit-transform: scale(1.4);
                -moz-transform: scale(1.4);
                -o-transform: scale(1.4)
            }

@media only screen and (max-width:768px) {
    .div-left, .div-right {
        width: 100%;
        height: 100%
    }

    .div-left {
        display: none
    }

    .pLogoArea {
        padding: 10% 0 !important;
        height: 8rem !important
    }
}

.strike {
    display: block;
    text-align: center;
    white-space: nowrap;
    margin: 5px
}

    .strike > span {
        position: relative;
        display: inline-block;
        color: #999
    }

        .strike > span:after, .strike > span:before {
            content: "";
            position: absolute;
            top: 50%;
            width: 9999px;
            height: 1px;
            background: #ddd
        }

        .strike > span:before {
            right: 100%;
            margin-right: 15px
        }

        .strike > span:after {
            left: 100%;
            margin-left: 15px
        }

#frmSignUp .form-group {
    margin: 0 !important
}

    #frmSignUp .form-group .control-label {
        text-align: left !important;
        font-size: 11px
    }

    #frmSignUp .form-group .form-control {
        padding: 14px !important;
        width: 100%
    }

.floatleft {
    float: left
}

.mainbg {
    /*height: 100%;*/
    width: 100%;
    /*position: fixed;
    top: 0;
    left: 0;*/
    background: url(images/mainLoginBG.png) center/cover no-repeat fixed !important;
    background-color: #f5821f !important;
    /*min-height: 500px*/
    height: 100vh;
}

.mainBox {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    width: 100%;
    height: 100%;
}

.Mainlogin-box, .register-box-body {
    background: #fff;
    padding: 20px;
    border-top: 0;
    color: #666;
    width: 78vw;
    height: 495px;
    margin: 6% auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)
}

.main-sidebar, [class*=sidebar-dark-] {
    background-color: #fff !important
}

.panel-title {
    margin-bottom: 12px;
    font-size: 18px !important
}

/*.login-box-body {
    padding: 0 !important
}*/

/*.login-box, .register-box {
    width: auto;
    margin: 0 2% !important
}*/

.div-right .clientLogo,
.div-right .login-logo {
    width: 100%;
    margin: 10px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

    .div-right .clientLogo img,
    .div-right .login-logo img {
        width: 100%;
        overflow: hidden;
    }
/*.pLogoArea {
    padding: 5%;
    height: 8rem
}*/

/*.pLogo {
    width: 30rem;
    height: 8rem
}*/

.mainLogoFooter {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35px
}

#lblCopyYear, .nav-item-li {
    justify-content: center;
    display: flex
}

.leftSideLogo,
.leftSideLogo .leftLogo {
    width: 100%;
    height: 320px;
}

#lblCopyYear {
    align-items: center;
    font-size: 12px;
    font-weight: normal;
    color: grey;
}

.txtMessage {
    overflow-x: hidden !important;
    overflow-y: scroll;
    height: 110px;
    scrollbar-width: none
}

#lblPin, #lblUserName, #lbl_Password {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 40px;
    background-color: #3f474e;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    text-align: center;
    padding: 13px 10px 10px;
    color: #fff;
    margin: 2px 0px 0px 0px !important;
}

.box .box-primary {
    border-top-color: #f5821f !important;
}

.loading {
    position: fixed;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.7);
    height: 100%;
    width: 100%;
    display: none;
}

    .loading > div {
        position: relative;
        top: 30%;
        display: flex;
        justify-content: center;
    }

.imgLogoLoader {
    background: #f5821f;
    width: 150px;
    height: 150px;
    border-radius: 50%;
}


/*Added By Nehal*/
/*For CORE Popup Modal CSS Start*/
:root {
    --modal-duration: 1s;
    --modal-color: #1b1a21;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    margin: 10% auto;
    width: 75%;
    height: 100%;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: var(--modal-duration);
}

.modal-header h2,
.modal-footer h3 {
    margin: 0;
}

.modal-header {
    background: #f5821f;
    padding: 13px;
    color: #fff;
    height: 40px;
    /*border-top-left-radius: 5px;
    border-top-right-radius: 5px;*/
}

    .modal-header .close {
        position: relative;
        top: 0px;
        border: 1px solid #fff;
        font-size: 18px;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: #fff;
        color: #333;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.modal-body {
    padding: 10px 20px;
    background: #fff;
    /*height: 75vh;*/
}

.modal-footer {
    background: var(--modal-color);
    padding: 10px;
    color: #fff;
    text-align: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/*.close {
    color: #ccc;
    float: right;
    font-size: 30px;
    color: #fff;
}

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }*/

.modalHeading {
    font-size: 15px;
    font-family: "CircularStd", sans-serif;
    /*font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";*/
}

/*For CORE Popup Modal CSS END*/

/*For New Grid Style Start*/

div.dataTables_scrollBody table {
    margin-top: -52px !important; /* Offset for missing thead height */
}

table.dataTable tr th {
    border: none !important;
    background: #f3f3f3 !important;
    color: #333;
    font-size: 13px;
    font-weight: bold !important;
}

table.dataTable tr td {
    /*padding: 0px 15px !important;*/
    border-bottom: 2px solid #f3f3f3 !important;
    background: #fff !important;
    color: #333 !important;
    font-size: 12px;
    font-weight: bold !important;
    height: 50px !important;
}

table.dataTable tr:hover td {
    background: #eeeeee !important;
    cursor: default !important;
}

table.dataTable > thead > tr > th.filterData {
    background: #f3f3f3 !important;
    border: none !important;
    border-bottom: 2px solid #ddd !important;
}

table.dataTable > thead > tr .filterData .searchFilter {
    color: #111;
    max-width: 100% !important;
    min-width: auto !important;
    width: 100% !important;
    max-height: 20px;
    border-radius: 0px;
    background: white;
    border: 1px solid #ddd;
    font: 12px Tahoma, Geneva, sans-serif;
}

table.dataTable > thead > tr .filterData {
    background: #f3f3f3 !important;
    color: #111;
    /*border-bottom: Solid 1px #C1C1C1;
    border-right: Solid 1px #C1C1C1;*/
}

    table.dataTable > thead > tr .filterData .filtrationDiv {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        table.dataTable > thead > tr .filterData .filtrationDiv .filterImg {
            margin-left: 6px;
            width: 11px;
            height: 11px;
            cursor: pointer;
            position: relative;
        }

table.table-striped tbody tr .actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    table.table-striped tbody tr .actions a {
        margin: 2px;
        padding: 2px;
    }

table.mGrid {
    width: 100% !important;
}

    table.mGrid tr th a,
    table.mGrid tr th {
        padding: 2px 2px 2px 2px;
        border: none !important;
        background: #f3f3f3 !important;
        color: #444;
        font-size: 12px;
        font-weight: bold !important;
        width: auto !important;
    }

    table.mGrid tr td {
        /*padding: 0px 15px !important;*/
        border-bottom: 2px solid #f3f3f3 !important;
        border-left: 0px !important;
        border-right: 0px !important;
        background: #fff !important;
        color: #333 !important;
        font-size: 12px;
        font-weight: bold !important;
        height: 50px !important;
        width: auto !important;
    }

    table.mGrid tr:hover td {
        background: #eeeeee !important;
        cursor: default !important;
    }

    table.mGrid > thead > tr > th.filterData {
        background: #f3f3f3 !important;
        border: none !important;
        border-bottom: 2px solid #ddd !important;
    }

    table.mGrid > thead > tr .filterData .searchFilter {
        color: #111;
        max-width: 100% !important;
        min-width: auto !important;
        width: 100% !important;
        max-height: 20px;
        border-radius: 0px;
        background: white;
        border: 1px solid #ddd;
        font: 12px Tahoma, Geneva, sans-serif;
    }

    table.mGrid > thead > tr .filterData {
        background: #f8f9fa !important;
        padding: 2px 2px 2px 2px;
        color: #111;
        /*border-bottom: Solid 1px #C1C1C1;
    border-right: Solid 1px #C1C1C1;*/
    }

        table.mGrid > thead > tr .filterData .filtrationDiv {
            display: flex;
            justify-content: center;
            align-items: center;
        }

            table.mGrid > thead > tr .filterData .filtrationDiv .filterImg {
                margin-left: 6px;
                width: 11px;
                height: 11px;
                cursor: pointer;
                position: relative;
            }
/*For New Grid Style End*/
/* EMPLOYEE Profile CSS Start*/
.container-fluid .row {
    /*margin: 0px !important;*/
    width: 100%;
}

.profile-view {
    position: relative;
    font-size: 16px;
    font-weight: bold;
}

    .profile-view .profile-img-wrap {
        height: 120px;
        width: 120px;
        position: absolute;
    }

.profile-img-wrap {
    height: 120px;
    width: 120px;
    position: absolute;
    background: #FFF;
    overflow: hidden;
}

.profile-view .profile-img {
    width: 120px;
    height: 120px;
}

.profile-view .profile-img-wrap img {
    border-radius: 50%;
    height: 120px;
    width: 120px;
}

.profile-view .profile-basic {
    margin-left: 140px;
    padding-right: 50px;
}

    .profile-view .profile-basic .profile-info-left {
        border-right: 2px dashed #D3D3D4;
        display: flex;
        justify-content: center;
        /* align-items: center; */
        flex-direction: column;
    }

        .profile-view .profile-basic .profile-info-left .user-name {
            color: #373B3E;
            font-size: 1.5rem;
            font-weight: 500;
        }

            .profile-view .profile-basic .profile-info-left .user-name .all {
                margin: 0px;
            }

        .profile-view .profile-basic .profile-info-left h6,
        .profile-view .profile-basic .profile-info-left small,
        .profile-view .profile-basic .profile-info-left .small {
            /*margin: 5px 0px;*/
            /*font-size: 1rem !important;*/
            font-weight: bold !important;
        }

        .profile-view .profile-basic .profile-info-left .staff-id {
            font-size: 14px;
            font-weight: bold;
            margin-top: 5px;
            color: #333;
        }

        .profile-view .profile-basic .profile-info-left .staff-msg {
            margin-top: 30px;
        }

.Main-Personal-info {
    padding: 0;
    margin: 0;
    list-style: none;
}

    .Main-Personal-info li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 10px;
    }

        .Main-Personal-info li .title {
            color: #333;
            float: left;
            font-weight: bold;
            width: 30%;
            font-size: 12px;
        }

        .Main-Personal-info li .text {
            color: #7A7C7F;
            display: block;
            overflow: hidden;
            width: 70%;
            float: left;
            font-size: 12px
        }

            .Main-Personal-info li .text .avatar-box {
                float: left;
                position: relative;
            }

                .Main-Personal-info li .text .avatar-box .avatar-xs {
                    line-height: normal;
                }

.personal-info {
    padding: 0;
    margin: 0;
    list-style: none;
}

    .personal-info li {
        display: -webkit-box;
        display: -ms-flexbox;
        /*display: flex;*/
        margin-bottom: 10px;
    }

        .personal-info li .title {
            color: #333;
            float: left;
            font-weight: bold;
            width: 50%;
            font-size: 12px;
        }

        .personal-info li .text {
            color: #7A7C7F;
            display: block;
            overflow: hidden;
            width: 50%;
            float: left;
            font-size: 12px
        }

            .personal-info li .text .avatar-box {
                float: left;
                position: relative;
            }

                .personal-info li .text .avatar-box .avatar-xs {
                    line-height: normal;
                }

.avatar > img {
    width: 50px;
    height: 50px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}

.line-tabs {
    overflow: hidden;
}
/*.user-tabs {
    border-bottom: 1px solid #D5D8DA;
}*/
.user-tabs .nav-tabs {
    border-bottom: 1px solid #ddd;
}

    .user-tabs .nav-tabs li a {
        color: #444;
        border-bottom-width: 2px;
    }

.user-tabs .nav-tabs-bottom .nav-item,
.user-tabs .nav-tabs-bottom .nav-item .nav-link {
    margin: 0px;
}

    .user-tabs .nav-tabs-bottom .nav-item:hover {
        font-weight: bold;
        border-top: none !important;
        margin: 0px;
    }

.flex-fill {
    flex: 1 1 auto !important;
}

.profile-box {
    height: 250px;
}

    .form-card-header .card-title,
    .profile-box .card-title {
        color: #373B3E;
        font-size: 20px;
        font-weight: 500;
        margin: 0px;
        /*margin-bottom: 20px;*/
    }

    .profile-box .card-body {
        overflow: auto;
        scrollbar-width: thin;
    }
/* EMPLOYEE Profile CSS End*/
/*CARD CSS START */
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid rgba(0,0,0,.125);
    border-radius: .25rem
}

    .card > hr {
        margin-right: 0;
        margin-left: 0
    }

    .card > .list-group {
        border-top: inherit;
        border-bottom: inherit
    }

        .card > .list-group:first-child {
            border-top-width: 0;
            border-top-left-radius: calc(.25rem - 0);
            border-top-right-radius: calc(.25rem - 0)
        }

        .card > .list-group:last-child {
            border-bottom-width: 0;
            border-bottom-right-radius: calc(.25rem - 0);
            border-bottom-left-radius: calc(.25rem - 0)
        }

        .card > .card-header + .list-group, .card > .list-group + .card-footer {
            border-top: 0
        }

.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem
}

.card-subtitle {
    margin-top: -.375rem;
    margin-bottom: 0
}

.card-text:last-child {
    margin-bottom: 0
}

.card-link:hover {
    text-decoration: none
}

.card-link + .card-link {
    margin-left: 1.25rem
}

.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 0 solid rgba(0,0,0,.125)
}

    .card-header:first-child {
        border-radius: calc(.25rem - 0) calc(.25rem - 0) 0 0
    }

.card-footer {
    padding: .75rem 1.25rem;
    background-color: rgba(0,0,0,.03);
    border-top: 0 solid rgba(0,0,0,.125)
}

    .card-footer:last-child {
        border-radius: 0 0 calc(.25rem - 0) calc(.25rem - 0)
    }

.card-header-tabs {
    margin-right: -.625rem;
    margin-bottom: -.75rem;
    margin-left: -.625rem;
    border-bottom: 0
}

.card-header-pills {
    margin-right: -.625rem;
    margin-left: -.625rem
}

.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.25rem;
    border-radius: calc(.25rem - 0)
}

.card-img, .card-img-bottom, .card-img-top {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%
}

.card-img, .card-img-top {
    border-top-left-radius: calc(.25rem - 0);
    border-top-right-radius: calc(.25rem - 0)
}

.card-img, .card-img-bottom {
    border-bottom-right-radius: calc(.25rem - 0);
    border-bottom-left-radius: calc(.25rem - 0)
}

.card-deck .card {
    margin-bottom: 7.5px
}

@media (min-width:576px) {
    .card-deck {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        margin-right: -7.5px;
        margin-left: -7.5px
    }

        .card-deck .card {
            -ms-flex: 1 0 0%;
            flex: 1 0 0%;
            margin-right: 7.5px;
            margin-bottom: 0;
            margin-left: 7.5px
        }
}

.card-group > .card {
    margin-bottom: 7.5px
}

@media (min-width:576px) {
    .card-group {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap
    }

        .card-group > .card {
            -ms-flex: 1 0 0%;
            flex: 1 0 0%;
            margin-bottom: 0
        }

            .card-group > .card + .card {
                margin-left: 0;
                border-left: 0
            }

            .card-group > .card:not(:last-child) {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0
            }

                .card-group > .card:not(:last-child) .card-header, .card-group > .card:not(:last-child) .card-img-top {
                    border-top-right-radius: 0
                }

                .card-group > .card:not(:last-child) .card-footer, .card-group > .card:not(:last-child) .card-img-bottom {
                    border-bottom-right-radius: 0
                }

            .card-group > .card:not(:first-child) {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0
            }

                .card-group > .card:not(:first-child) .card-header, .card-group > .card:not(:first-child) .card-img-top {
                    border-top-left-radius: 0
                }

                .card-group > .card:not(:first-child) .card-footer, .card-group > .card:not(:first-child) .card-img-bottom {
                    border-bottom-left-radius: 0
                }
}

.card-columns .card {
    margin-bottom: .75rem
}

@media (min-width:576px) {
    .card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
        -webkit-column-gap: 1.25rem;
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
        orphans: 1;
        widows: 1
    }

        .card-columns .card {
            display: inline-block;
            width: 100%
        }
}

.accordion {
    overflow-anchor: none
}

    .accordion > .card {
        overflow: hidden
    }

        .accordion > .card:not(:last-of-type) {
            border-bottom: 0;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0
        }

        .accordion > .card:not(:first-of-type) {
            border-top-left-radius: 0;
            border-top-right-radius: 0
        }

        .accordion > .card > .card-header {
            border-radius: 0;
            margin-bottom: 0
        }

.card-primary:not(.card-outline) > .card-header {
    background-color: #007bff
}

    .card-primary:not(.card-outline) > .card-header, .card-primary:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-primary:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-primary.card-outline {
    border-top: 3px solid #007bff
}

.card-primary.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-primary.card-outline-tabs > .card-header a.active, .card-primary.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #007bff
}

.bg-gradient-primary > .card-header .btn-tool, .bg-primary > .card-header .btn-tool, .card-primary:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-gradient-primary > .card-header .btn-tool:hover, .bg-primary > .card-header .btn-tool:hover, .card-primary:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-gradient-primary .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-primary .bootstrap-datetimepicker-widget .table th, .card.bg-primary .bootstrap-datetimepicker-widget .table td, .card.bg-primary .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-primary .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-primary .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-primary .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-primary .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-primary .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-primary .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-primary .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-primary .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-primary .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-primary .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #0067d6;
    color: #fff
}

.card.bg-gradient-primary .bootstrap-datetimepicker-widget table td.today::before, .card.bg-primary .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-gradient-primary .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-primary .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-primary .bootstrap-datetimepicker-widget table td.active, .card.bg-primary .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #3395ff;
    color: #fff
}

.card-secondary:not(.card-outline) > .card-header {
    background-color: #6c757d
}

    .card-secondary:not(.card-outline) > .card-header, .card-secondary:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-secondary:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-secondary.card-outline {
    border-top: 3px solid #6c757d
}

.card-secondary.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-secondary.card-outline-tabs > .card-header a.active, .card-secondary.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #6c757d
}

.bg-gradient-secondary > .card-header .btn-tool, .bg-secondary > .card-header .btn-tool, .card-secondary:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-gradient-secondary > .card-header .btn-tool:hover, .bg-secondary > .card-header .btn-tool:hover, .card-secondary:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-gradient-secondary .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-secondary .bootstrap-datetimepicker-widget .table th, .card.bg-secondary .bootstrap-datetimepicker-widget .table td, .card.bg-secondary .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-secondary .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-secondary .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-secondary .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-secondary .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-secondary .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-secondary .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-secondary .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-secondary .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-secondary .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-secondary .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #596167;
    color: #fff
}

.card.bg-gradient-secondary .bootstrap-datetimepicker-widget table td.today::before, .card.bg-secondary .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-gradient-secondary .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-secondary .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-secondary .bootstrap-datetimepicker-widget table td.active, .card.bg-secondary .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #868e96;
    color: #fff
}

.card-success:not(.card-outline) > .card-header {
    background-color: #28a745
}

    .card-success:not(.card-outline) > .card-header, .card-success:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-success:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-success.card-outline {
    border-top: 3px solid #28a745
}

.card-success.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-success.card-outline-tabs > .card-header a.active, .card-success.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #28a745
}

.bg-gradient-success > .card-header .btn-tool, .bg-success > .card-header .btn-tool, .card-success:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-gradient-success > .card-header .btn-tool:hover, .bg-success > .card-header .btn-tool:hover, .card-success:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-gradient-success .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-success .bootstrap-datetimepicker-widget .table th, .card.bg-success .bootstrap-datetimepicker-widget .table td, .card.bg-success .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-success .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-success .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-success .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-success .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-success .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-success .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-success .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-success .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-success .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-success .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #208637;
    color: #fff
}

.card.bg-gradient-success .bootstrap-datetimepicker-widget table td.today::before, .card.bg-success .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-gradient-success .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-success .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-success .bootstrap-datetimepicker-widget table td.active, .card.bg-success .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #34ce57;
    color: #fff
}

.card-info:not(.card-outline) > .card-header {
    background-color: #17a2b8
}

    .card-info:not(.card-outline) > .card-header, .card-info:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-info:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-info.card-outline {
    border-top: 3px solid #17a2b8
}

.card-info.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-info.card-outline-tabs > .card-header a.active, .card-info.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #17a2b8
}

.bg-gradient-info > .card-header .btn-tool, .bg-info > .card-header .btn-tool, .card-info:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-gradient-info > .card-header .btn-tool:hover, .bg-info > .card-header .btn-tool:hover, .card-info:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-gradient-info .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-info .bootstrap-datetimepicker-widget .table th, .card.bg-info .bootstrap-datetimepicker-widget .table td, .card.bg-info .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-info .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-info .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-info .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-info .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-info .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-info .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-info .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-info .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-info .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-info .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #128294;
    color: #fff
}

.card.bg-gradient-info .bootstrap-datetimepicker-widget table td.today::before, .card.bg-info .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-gradient-info .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-info .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-info .bootstrap-datetimepicker-widget table td.active, .card.bg-info .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #1fc8e3;
    color: #fff
}

.card-warning:not(.card-outline) > .card-header {
    background-color: #ffc107
}

    .card-warning:not(.card-outline) > .card-header, .card-warning:not(.card-outline) > .card-header a {
        color: #1f2d3d
    }

        .card-warning:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-warning.card-outline {
    border-top: 3px solid #ffc107
}

.card-warning.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-warning.card-outline-tabs > .card-header a.active, .card-warning.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #ffc107
}

.bg-gradient-warning > .card-header .btn-tool, .bg-warning > .card-header .btn-tool, .card-warning:not(.card-outline) > .card-header .btn-tool {
    color: rgba(31,45,61,.8)
}

    .bg-gradient-warning > .card-header .btn-tool:hover, .bg-warning > .card-header .btn-tool:hover, .card-warning:not(.card-outline) > .card-header .btn-tool:hover {
        color: #1f2d3d
    }

.card.bg-gradient-warning .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-warning .bootstrap-datetimepicker-widget .table th, .card.bg-warning .bootstrap-datetimepicker-widget .table td, .card.bg-warning .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-warning .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-warning .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-warning .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-warning .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-warning .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-warning .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-warning .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-warning .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-warning .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-warning .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #dda600;
    color: #1f2d3d
}

.card.bg-gradient-warning .bootstrap-datetimepicker-widget table td.today::before, .card.bg-warning .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #1f2d3d
}

.card.bg-gradient-warning .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-warning .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-warning .bootstrap-datetimepicker-widget table td.active, .card.bg-warning .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #ffce3a;
    color: #1f2d3d
}

.card-danger:not(.card-outline) > .card-header {
    background-color: #dc3545
}

    .card-danger:not(.card-outline) > .card-header, .card-danger:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-danger:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-danger.card-outline {
    border-top: 3px solid #dc3545
}

.card-danger.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-danger.card-outline-tabs > .card-header a.active, .card-danger.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #dc3545
}

.bg-danger > .card-header .btn-tool, .bg-gradient-danger > .card-header .btn-tool, .card-danger:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-danger > .card-header .btn-tool:hover, .bg-gradient-danger > .card-header .btn-tool:hover, .card-danger:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-danger .bootstrap-datetimepicker-widget .table td, .card.bg-danger .bootstrap-datetimepicker-widget .table th, .card.bg-gradient-danger .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-danger .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-danger .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-danger .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-danger .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-danger .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-danger .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-gradient-danger .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-danger .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-danger .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-danger .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-danger .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #c62232;
    color: #fff
}

.card.bg-danger .bootstrap-datetimepicker-widget table td.today::before, .card.bg-gradient-danger .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-danger .bootstrap-datetimepicker-widget table td.active, .card.bg-danger .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-gradient-danger .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-danger .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #e4606d;
    color: #fff
}

.card-light:not(.card-outline) > .card-header {
    background-color: #f8f9fa
}

    .card-light:not(.card-outline) > .card-header, .card-light:not(.card-outline) > .card-header a {
        color: #1f2d3d
    }

        .card-light:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-light.card-outline {
    border-top: 3px solid #f8f9fa
}

.card-light.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-light.card-outline-tabs > .card-header a.active, .card-light.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #f8f9fa
}

.bg-gradient-light > .card-header .btn-tool, .bg-light > .card-header .btn-tool, .card-light:not(.card-outline) > .card-header .btn-tool {
    color: rgba(31,45,61,.8)
}

    .bg-gradient-light > .card-header .btn-tool:hover, .bg-light > .card-header .btn-tool:hover, .card-light:not(.card-outline) > .card-header .btn-tool:hover {
        color: #1f2d3d
    }

.card.bg-gradient-light .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-light .bootstrap-datetimepicker-widget .table th, .card.bg-light .bootstrap-datetimepicker-widget .table td, .card.bg-light .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-light .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-light .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-light .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-light .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-light .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-light .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-light .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-light .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-light .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-light .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #e0e5e9;
    color: #1f2d3d
}

.card.bg-gradient-light .bootstrap-datetimepicker-widget table td.today::before, .card.bg-light .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #1f2d3d
}

.card.bg-gradient-light .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-light .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-light .bootstrap-datetimepicker-widget table td.active, .card.bg-light .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #fff;
    color: #1f2d3d
}

.card-dark:not(.card-outline) > .card-header {
    background-color: #343a40
}

    .card-dark:not(.card-outline) > .card-header, .card-dark:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-dark:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-dark.card-outline {
    border-top: 3px solid #343a40
}

.card-dark.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-dark.card-outline-tabs > .card-header a.active, .card-dark.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #343a40
}

.bg-dark > .card-header .btn-tool, .bg-gradient-dark > .card-header .btn-tool, .card-dark:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-dark > .card-header .btn-tool:hover, .bg-gradient-dark > .card-header .btn-tool:hover, .card-dark:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-dark .bootstrap-datetimepicker-widget .table td, .card.bg-dark .bootstrap-datetimepicker-widget .table th, .card.bg-gradient-dark .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-dark .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-dark .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-dark .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-dark .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-dark .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-dark .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-gradient-dark .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-dark .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-dark .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-dark .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-dark .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #222629;
    color: #fff
}

.card.bg-dark .bootstrap-datetimepicker-widget table td.today::before, .card.bg-gradient-dark .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-dark .bootstrap-datetimepicker-widget table td.active, .card.bg-dark .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-gradient-dark .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-dark .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #4b545c;
    color: #fff
}

.card-lightblue:not(.card-outline) > .card-header {
    background-color: #3c8dbc
}

    .card-lightblue:not(.card-outline) > .card-header, .card-lightblue:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-lightblue:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-lightblue.card-outline {
    border-top: 3px solid #3c8dbc
}

.card-lightblue.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-lightblue.card-outline-tabs > .card-header a.active, .card-lightblue.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #3c8dbc
}

.bg-gradient-lightblue > .card-header .btn-tool, .bg-lightblue > .card-header .btn-tool, .card-lightblue:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-gradient-lightblue > .card-header .btn-tool:hover, .bg-lightblue > .card-header .btn-tool:hover, .card-lightblue:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-gradient-lightblue .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-lightblue .bootstrap-datetimepicker-widget .table th, .card.bg-lightblue .bootstrap-datetimepicker-widget .table td, .card.bg-lightblue .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-lightblue .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-lightblue .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-lightblue .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-lightblue .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-lightblue .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #32769d;
    color: #fff
}

.card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.today::before, .card.bg-lightblue .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-lightblue .bootstrap-datetimepicker-widget table td.active, .card.bg-lightblue .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #5fa4cc;
    color: #fff
}

.card-navy:not(.card-outline) > .card-header {
    background-color: #001f3f
}

    .card-navy:not(.card-outline) > .card-header, .card-navy:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-navy:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-navy.card-outline {
    border-top: 3px solid #001f3f
}

.card-navy.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-navy.card-outline-tabs > .card-header a.active, .card-navy.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #001f3f
}

.bg-gradient-navy > .card-header .btn-tool, .bg-navy > .card-header .btn-tool, .card-navy:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-gradient-navy > .card-header .btn-tool:hover, .bg-navy > .card-header .btn-tool:hover, .card-navy:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-gradient-navy .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-navy .bootstrap-datetimepicker-widget .table th, .card.bg-navy .bootstrap-datetimepicker-widget .table td, .card.bg-navy .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-navy .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-navy .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-navy .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-navy .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-navy .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-navy .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-navy .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-navy .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-navy .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-navy .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #000b16;
    color: #fff
}

.card.bg-gradient-navy .bootstrap-datetimepicker-widget table td.today::before, .card.bg-navy .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-gradient-navy .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-navy .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-navy .bootstrap-datetimepicker-widget table td.active, .card.bg-navy .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #003872;
    color: #fff
}

.card-olive:not(.card-outline) > .card-header {
    background-color: #3d9970
}

    .card-olive:not(.card-outline) > .card-header, .card-olive:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-olive:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-olive.card-outline {
    border-top: 3px solid #3d9970
}

.card-olive.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-olive.card-outline-tabs > .card-header a.active, .card-olive.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #3d9970
}

.bg-gradient-olive > .card-header .btn-tool, .bg-olive > .card-header .btn-tool, .card-olive:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-gradient-olive > .card-header .btn-tool:hover, .bg-olive > .card-header .btn-tool:hover, .card-olive:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-gradient-olive .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-olive .bootstrap-datetimepicker-widget .table th, .card.bg-olive .bootstrap-datetimepicker-widget .table td, .card.bg-olive .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-olive .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-olive .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-olive .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-olive .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-olive .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-olive .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-olive .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-olive .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-olive .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-olive .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #317c5b;
    color: #fff
}

.card.bg-gradient-olive .bootstrap-datetimepicker-widget table td.today::before, .card.bg-olive .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-gradient-olive .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-olive .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-olive .bootstrap-datetimepicker-widget table td.active, .card.bg-olive .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #50b98a;
    color: #fff
}

.card-lime:not(.card-outline) > .card-header {
    background-color: #01ff70
}

    .card-lime:not(.card-outline) > .card-header, .card-lime:not(.card-outline) > .card-header a {
        color: #1f2d3d
    }

        .card-lime:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-lime.card-outline {
    border-top: 3px solid #01ff70
}

.card-lime.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-lime.card-outline-tabs > .card-header a.active, .card-lime.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #01ff70
}

.bg-gradient-lime > .card-header .btn-tool, .bg-lime > .card-header .btn-tool, .card-lime:not(.card-outline) > .card-header .btn-tool {
    color: rgba(31,45,61,.8)
}

    .bg-gradient-lime > .card-header .btn-tool:hover, .bg-lime > .card-header .btn-tool:hover, .card-lime:not(.card-outline) > .card-header .btn-tool:hover {
        color: #1f2d3d
    }

.card.bg-gradient-lime .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-lime .bootstrap-datetimepicker-widget .table th, .card.bg-lime .bootstrap-datetimepicker-widget .table td, .card.bg-lime .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-lime .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-lime .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-lime .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-lime .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-lime .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-lime .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-lime .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-lime .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-lime .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-lime .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #00d75e;
    color: #1f2d3d
}

.card.bg-gradient-lime .bootstrap-datetimepicker-widget table td.today::before, .card.bg-lime .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #1f2d3d
}

.card.bg-gradient-lime .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-lime .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-lime .bootstrap-datetimepicker-widget table td.active, .card.bg-lime .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #34ff8d;
    color: #1f2d3d
}

.card-fuchsia:not(.card-outline) > .card-header {
    background-color: #f012be
}

    .card-fuchsia:not(.card-outline) > .card-header, .card-fuchsia:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-fuchsia:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-fuchsia.card-outline {
    border-top: 3px solid #f012be
}

.card-fuchsia.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-fuchsia.card-outline-tabs > .card-header a.active, .card-fuchsia.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #f012be
}

.bg-fuchsia > .card-header .btn-tool, .bg-gradient-fuchsia > .card-header .btn-tool, .card-fuchsia:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-fuchsia > .card-header .btn-tool:hover, .bg-gradient-fuchsia > .card-header .btn-tool:hover, .card-fuchsia:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-fuchsia .bootstrap-datetimepicker-widget .table td, .card.bg-fuchsia .bootstrap-datetimepicker-widget .table th, .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-fuchsia .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-fuchsia .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-fuchsia .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-fuchsia .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-fuchsia .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #cc0da1;
    color: #fff
}

.card.bg-fuchsia .bootstrap-datetimepicker-widget table td.today::before, .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-fuchsia .bootstrap-datetimepicker-widget table td.active, .card.bg-fuchsia .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #f342cb;
    color: #fff
}

.card-maroon:not(.card-outline) > .card-header {
    background-color: #d81b60
}

    .card-maroon:not(.card-outline) > .card-header, .card-maroon:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-maroon:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-maroon.card-outline {
    border-top: 3px solid #d81b60
}

.card-maroon.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-maroon.card-outline-tabs > .card-header a.active, .card-maroon.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #d81b60
}

.bg-gradient-maroon > .card-header .btn-tool, .bg-maroon > .card-header .btn-tool, .card-maroon:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-gradient-maroon > .card-header .btn-tool:hover, .bg-maroon > .card-header .btn-tool:hover, .card-maroon:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-gradient-maroon .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-maroon .bootstrap-datetimepicker-widget .table th, .card.bg-maroon .bootstrap-datetimepicker-widget .table td, .card.bg-maroon .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-maroon .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-maroon .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-maroon .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-maroon .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-maroon .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-maroon .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #b41650;
    color: #fff
}

.card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.today::before, .card.bg-maroon .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-maroon .bootstrap-datetimepicker-widget table td.active, .card.bg-maroon .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #e73f7c;
    color: #fff
}

.card-blue:not(.card-outline) > .card-header {
    background-color: #007bff
}

    .card-blue:not(.card-outline) > .card-header, .card-blue:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-blue:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-blue.card-outline {
    border-top: 3px solid #007bff
}

.card-blue.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-blue.card-outline-tabs > .card-header a.active, .card-blue.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #007bff
}

.bg-blue > .card-header .btn-tool, .bg-gradient-blue > .card-header .btn-tool, .card-blue:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-blue > .card-header .btn-tool:hover, .bg-gradient-blue > .card-header .btn-tool:hover, .card-blue:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-blue .bootstrap-datetimepicker-widget .table td, .card.bg-blue .bootstrap-datetimepicker-widget .table th, .card.bg-gradient-blue .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-blue .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-blue .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-blue .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-blue .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-blue .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-blue .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-gradient-blue .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-blue .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-blue .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-blue .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-blue .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #0067d6;
    color: #fff
}

.card.bg-blue .bootstrap-datetimepicker-widget table td.today::before, .card.bg-gradient-blue .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-blue .bootstrap-datetimepicker-widget table td.active, .card.bg-blue .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-gradient-blue .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-blue .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #3395ff;
    color: #fff
}

.card-indigo:not(.card-outline) > .card-header {
    background-color: #6610f2
}

    .card-indigo:not(.card-outline) > .card-header, .card-indigo:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-indigo:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-indigo.card-outline {
    border-top: 3px solid #6610f2
}

.card-indigo.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-indigo.card-outline-tabs > .card-header a.active, .card-indigo.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #6610f2
}

.bg-gradient-indigo > .card-header .btn-tool, .bg-indigo > .card-header .btn-tool, .card-indigo:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-gradient-indigo > .card-header .btn-tool:hover, .bg-indigo > .card-header .btn-tool:hover, .card-indigo:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-gradient-indigo .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-indigo .bootstrap-datetimepicker-widget .table th, .card.bg-indigo .bootstrap-datetimepicker-widget .table td, .card.bg-indigo .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-indigo .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-indigo .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-indigo .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-indigo .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-indigo .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-indigo .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-indigo .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-indigo .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-indigo .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-indigo .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #550bce;
    color: #fff
}

.card.bg-gradient-indigo .bootstrap-datetimepicker-widget table td.today::before, .card.bg-indigo .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-gradient-indigo .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-indigo .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-indigo .bootstrap-datetimepicker-widget table td.active, .card.bg-indigo .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #8540f5;
    color: #fff
}

.card-purple:not(.card-outline) > .card-header {
    background-color: #6f42c1
}

    .card-purple:not(.card-outline) > .card-header, .card-purple:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-purple:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-purple.card-outline {
    border-top: 3px solid #6f42c1
}

.card-purple.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-purple.card-outline-tabs > .card-header a.active, .card-purple.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #6f42c1
}

.bg-gradient-purple > .card-header .btn-tool, .bg-purple > .card-header .btn-tool, .card-purple:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-gradient-purple > .card-header .btn-tool:hover, .bg-purple > .card-header .btn-tool:hover, .card-purple:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-gradient-purple .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-purple .bootstrap-datetimepicker-widget .table th, .card.bg-purple .bootstrap-datetimepicker-widget .table td, .card.bg-purple .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-purple .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-purple .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-purple .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-purple .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-purple .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-purple .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #5d36a4;
    color: #fff
}

.card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.today::before, .card.bg-purple .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-purple .bootstrap-datetimepicker-widget table td.active, .card.bg-purple .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #8c68ce;
    color: #fff
}

.card-pink:not(.card-outline) > .card-header {
    background-color: #e83e8c
}

    .card-pink:not(.card-outline) > .card-header, .card-pink:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-pink:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-pink.card-outline {
    border-top: 3px solid #e83e8c
}

.card-pink.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-pink.card-outline-tabs > .card-header a.active, .card-pink.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #e83e8c
}

.bg-gradient-pink > .card-header .btn-tool, .bg-pink > .card-header .btn-tool, .card-pink:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-gradient-pink > .card-header .btn-tool:hover, .bg-pink > .card-header .btn-tool:hover, .card-pink:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-gradient-pink .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-pink .bootstrap-datetimepicker-widget .table th, .card.bg-pink .bootstrap-datetimepicker-widget .table td, .card.bg-pink .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-pink .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-pink .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-pink .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-pink .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-pink .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-pink .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-pink .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-pink .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-pink .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-pink .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #e21b76;
    color: #fff
}

.card.bg-gradient-pink .bootstrap-datetimepicker-widget table td.today::before, .card.bg-pink .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-gradient-pink .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-pink .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-pink .bootstrap-datetimepicker-widget table td.active, .card.bg-pink .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #ed6ca7;
    color: #fff
}

.card-red:not(.card-outline) > .card-header {
    background-color: #dc3545
}

    .card-red:not(.card-outline) > .card-header, .card-red:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-red:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-red.card-outline {
    border-top: 3px solid #dc3545
}

.card-red.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-red.card-outline-tabs > .card-header a.active, .card-red.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #dc3545
}

.bg-gradient-red > .card-header .btn-tool, .bg-red > .card-header .btn-tool, .card-red:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-gradient-red > .card-header .btn-tool:hover, .bg-red > .card-header .btn-tool:hover, .card-red:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-gradient-red .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-red .bootstrap-datetimepicker-widget .table th, .card.bg-red .bootstrap-datetimepicker-widget .table td, .card.bg-red .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-red .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-red .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-red .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-red .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-red .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-red .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-red .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-red .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-red .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-red .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #c62232;
    color: #fff
}

.card.bg-gradient-red .bootstrap-datetimepicker-widget table td.today::before, .card.bg-red .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-gradient-red .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-red .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-red .bootstrap-datetimepicker-widget table td.active, .card.bg-red .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #e4606d;
    color: #fff
}

.card-orange:not(.card-outline) > .card-header {
    background-color: #fd7e14
}

    .card-orange:not(.card-outline) > .card-header, .card-orange:not(.card-outline) > .card-header a {
        color: #1f2d3d
    }

        .card-orange:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-orange.card-outline {
    border-top: 3px solid #fd7e14
}

.card-orange.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-orange.card-outline-tabs > .card-header a.active, .card-orange.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #fd7e14
}

.bg-gradient-orange > .card-header .btn-tool, .bg-orange > .card-header .btn-tool, .card-orange:not(.card-outline) > .card-header .btn-tool {
    color: rgba(31,45,61,.8)
}

    .bg-gradient-orange > .card-header .btn-tool:hover, .bg-orange > .card-header .btn-tool:hover, .card-orange:not(.card-outline) > .card-header .btn-tool:hover {
        color: #1f2d3d
    }

.card.bg-gradient-orange .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-orange .bootstrap-datetimepicker-widget .table th, .card.bg-orange .bootstrap-datetimepicker-widget .table td, .card.bg-orange .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-orange .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-orange .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-orange .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-orange .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-orange .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-orange .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-orange .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-orange .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-orange .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-orange .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #e66a02;
    color: #1f2d3d
}

.card.bg-gradient-orange .bootstrap-datetimepicker-widget table td.today::before, .card.bg-orange .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #1f2d3d
}

.card.bg-gradient-orange .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-orange .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-orange .bootstrap-datetimepicker-widget table td.active, .card.bg-orange .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #fd9a47;
    color: #1f2d3d
}

.card-yellow:not(.card-outline) > .card-header {
    background-color: #ffc107
}

    .card-yellow:not(.card-outline) > .card-header, .card-yellow:not(.card-outline) > .card-header a {
        color: #1f2d3d
    }

        .card-yellow:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-yellow.card-outline {
    border-top: 3px solid #ffc107
}

.card-yellow.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-yellow.card-outline-tabs > .card-header a.active, .card-yellow.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #ffc107
}

.bg-gradient-yellow > .card-header .btn-tool, .bg-yellow > .card-header .btn-tool, .card-yellow:not(.card-outline) > .card-header .btn-tool {
    color: rgba(31,45,61,.8)
}

    .bg-gradient-yellow > .card-header .btn-tool:hover, .bg-yellow > .card-header .btn-tool:hover, .card-yellow:not(.card-outline) > .card-header .btn-tool:hover {
        color: #1f2d3d
    }

.card.bg-gradient-yellow .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-yellow .bootstrap-datetimepicker-widget .table th, .card.bg-yellow .bootstrap-datetimepicker-widget .table td, .card.bg-yellow .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-yellow .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-yellow .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-yellow .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-yellow .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-yellow .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-yellow .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-yellow .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-yellow .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-yellow .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-yellow .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #dda600;
    color: #1f2d3d
}

.card.bg-gradient-yellow .bootstrap-datetimepicker-widget table td.today::before, .card.bg-yellow .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #1f2d3d
}

.card.bg-gradient-yellow .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-yellow .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-yellow .bootstrap-datetimepicker-widget table td.active, .card.bg-yellow .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #ffce3a;
    color: #1f2d3d
}

.card-green:not(.card-outline) > .card-header {
    background-color: #28a745
}

    .card-green:not(.card-outline) > .card-header, .card-green:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-green:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-green.card-outline {
    border-top: 3px solid #28a745
}

.card-green.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-green.card-outline-tabs > .card-header a.active, .card-green.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #28a745
}

.bg-gradient-green > .card-header .btn-tool, .bg-green > .card-header .btn-tool, .card-green:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-gradient-green > .card-header .btn-tool:hover, .bg-green > .card-header .btn-tool:hover, .card-green:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-gradient-green .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-green .bootstrap-datetimepicker-widget .table th, .card.bg-green .bootstrap-datetimepicker-widget .table td, .card.bg-green .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-green .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-green .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-green .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-green .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-green .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-green .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-green .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-green .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-green .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-green .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #208637;
    color: #fff
}

.card.bg-gradient-green .bootstrap-datetimepicker-widget table td.today::before, .card.bg-green .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-gradient-green .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-green .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-green .bootstrap-datetimepicker-widget table td.active, .card.bg-green .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #34ce57;
    color: #fff
}

.card-teal:not(.card-outline) > .card-header {
    background-color: #20c997
}

    .card-teal:not(.card-outline) > .card-header, .card-teal:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-teal:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-teal.card-outline {
    border-top: 3px solid #20c997
}

.card-teal.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-teal.card-outline-tabs > .card-header a.active, .card-teal.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #20c997
}

.bg-gradient-teal > .card-header .btn-tool, .bg-teal > .card-header .btn-tool, .card-teal:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-gradient-teal > .card-header .btn-tool:hover, .bg-teal > .card-header .btn-tool:hover, .card-teal:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-gradient-teal .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-teal .bootstrap-datetimepicker-widget .table th, .card.bg-teal .bootstrap-datetimepicker-widget .table td, .card.bg-teal .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-teal .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-teal .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-teal .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-teal .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-teal .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-teal .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-teal .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-teal .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-teal .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-teal .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #1aa67d;
    color: #fff
}

.card.bg-gradient-teal .bootstrap-datetimepicker-widget table td.today::before, .card.bg-teal .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-gradient-teal .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-teal .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-teal .bootstrap-datetimepicker-widget table td.active, .card.bg-teal .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #3ce0af;
    color: #fff
}

.card-cyan:not(.card-outline) > .card-header {
    background-color: #17a2b8
}

    .card-cyan:not(.card-outline) > .card-header, .card-cyan:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-cyan:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-cyan.card-outline {
    border-top: 3px solid #17a2b8
}

.card-cyan.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-cyan.card-outline-tabs > .card-header a.active, .card-cyan.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #17a2b8
}

.bg-cyan > .card-header .btn-tool, .bg-gradient-cyan > .card-header .btn-tool, .card-cyan:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-cyan > .card-header .btn-tool:hover, .bg-gradient-cyan > .card-header .btn-tool:hover, .card-cyan:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-cyan .bootstrap-datetimepicker-widget .table td, .card.bg-cyan .bootstrap-datetimepicker-widget .table th, .card.bg-gradient-cyan .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-cyan .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-cyan .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-cyan .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-cyan .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-cyan .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-cyan .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-gradient-cyan .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-cyan .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-cyan .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-cyan .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-cyan .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #128294;
    color: #fff
}

.card.bg-cyan .bootstrap-datetimepicker-widget table td.today::before, .card.bg-gradient-cyan .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-cyan .bootstrap-datetimepicker-widget table td.active, .card.bg-cyan .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-gradient-cyan .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-cyan .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #1fc8e3;
    color: #fff
}

.card-white:not(.card-outline) > .card-header {
    background-color: #fff
}

    .card-white:not(.card-outline) > .card-header, .card-white:not(.card-outline) > .card-header a {
        color: #1f2d3d
    }

        .card-white:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-white.card-outline {
    border-top: 3px solid #fff
}

.card-white.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-white.card-outline-tabs > .card-header a.active, .card-white.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #fff
}

.bg-gradient-white > .card-header .btn-tool, .bg-white > .card-header .btn-tool, .card-white:not(.card-outline) > .card-header .btn-tool {
    color: rgba(31,45,61,.8)
}

    .bg-gradient-white > .card-header .btn-tool:hover, .bg-white > .card-header .btn-tool:hover, .card-white:not(.card-outline) > .card-header .btn-tool:hover {
        color: #1f2d3d
    }

.card.bg-gradient-white .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-white .bootstrap-datetimepicker-widget .table th, .card.bg-white .bootstrap-datetimepicker-widget .table td, .card.bg-white .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-white .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-white .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-white .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-white .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-white .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-white .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-white .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-white .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-white .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-white .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #ebebeb;
    color: #1f2d3d
}

.card.bg-gradient-white .bootstrap-datetimepicker-widget table td.today::before, .card.bg-white .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #1f2d3d
}

.card.bg-gradient-white .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-white .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-white .bootstrap-datetimepicker-widget table td.active, .card.bg-white .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #fff;
    color: #1f2d3d
}

.card-gray:not(.card-outline) > .card-header {
    background-color: #6c757d
}

    .card-gray:not(.card-outline) > .card-header, .card-gray:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-gray:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-gray.card-outline {
    border-top: 3px solid #6c757d
}

.card-gray.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-gray.card-outline-tabs > .card-header a.active, .card-gray.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #6c757d
}

.bg-gradient-gray > .card-header .btn-tool, .bg-gray > .card-header .btn-tool, .card-gray:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-gradient-gray > .card-header .btn-tool:hover, .bg-gray > .card-header .btn-tool:hover, .card-gray:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-gradient-gray .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-gray .bootstrap-datetimepicker-widget .table th, .card.bg-gray .bootstrap-datetimepicker-widget .table td, .card.bg-gray .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-gray .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-gray .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-gray .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-gray .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-gray .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-gray .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gray .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gray .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gray .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gray .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #596167;
    color: #fff
}

.card.bg-gradient-gray .bootstrap-datetimepicker-widget table td.today::before, .card.bg-gray .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-gradient-gray .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-gray .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-gray .bootstrap-datetimepicker-widget table td.active, .card.bg-gray .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #868e96;
    color: #fff
}

.card-gray-dark:not(.card-outline) > .card-header {
    background-color: #343a40
}

    .card-gray-dark:not(.card-outline) > .card-header, .card-gray-dark:not(.card-outline) > .card-header a {
        color: #fff
    }

        .card-gray-dark:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.card-gray-dark.card-outline {
    border-top: 3px solid #343a40
}

.card-gray-dark.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.card-gray-dark.card-outline-tabs > .card-header a.active, .card-gray-dark.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #343a40
}

.bg-gradient-gray-dark > .card-header .btn-tool, .bg-gray-dark > .card-header .btn-tool, .card-gray-dark:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .bg-gradient-gray-dark > .card-header .btn-tool:hover, .bg-gray-dark > .card-header .btn-tool:hover, .card-gray-dark:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget .table td, .card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget .table th, .card.bg-gray-dark .bootstrap-datetimepicker-widget .table td, .card.bg-gray-dark .bootstrap-datetimepicker-widget .table th {
    border: none
}

.card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .card.bg-gray-dark .bootstrap-datetimepicker-widget table td.day:hover, .card.bg-gray-dark .bootstrap-datetimepicker-widget table td.hour:hover, .card.bg-gray-dark .bootstrap-datetimepicker-widget table td.minute:hover, .card.bg-gray-dark .bootstrap-datetimepicker-widget table td.second:hover, .card.bg-gray-dark .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #222629;
    color: #fff
}

.card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget table td.today::before, .card.bg-gray-dark .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget table td.active, .card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget table td.active:hover, .card.bg-gray-dark .bootstrap-datetimepicker-widget table td.active, .card.bg-gray-dark .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #4b545c;
    color: #fff
}

.card {
    box-shadow: 0 0 1px rgba(0,0,0,.125),0 1px 3px rgba(0,0,0,.2);
    margin-bottom: 1rem
}

    .card.bg-dark .card-header {
        border-color: #383f45
    }

    .card.bg-dark, .card.bg-dark .card-body {
        color: #fff
    }

    .card.maximized-card {
        height: 100% !important;
        left: 0;
        max-height: 100% !important;
        max-width: 100% !important;
        position: fixed;
        top: 0;
        width: 100% !important;
        z-index: 1040
    }

        .card.maximized-card.was-collapsed .card-body {
            display: block !important
        }

        .card.maximized-card .card-body {
            overflow: auto
        }

        .card.maximized-card [data-card-widgett=collapse] {
            display: none
        }

        .card.maximized-card .card-footer, .card.maximized-card .card-header {
            border-radius: 0 !important
        }

    .card.collapsed-card .card-body, .card.collapsed-card .card-footer {
        display: none
    }

    .card .nav.flex-column:not(.nav-sidebar) > li {
        border-bottom: 1px solid rgba(0,0,0,.125);
        margin: 0
    }

        .card .nav.flex-column:not(.nav-sidebar) > li:last-of-type {
            border-bottom: 0
        }

    .card.height-control .card-body {
        max-height: 300px;
        overflow: auto
    }

    .card .border-right {
        border-right: 1px solid rgba(0,0,0,.125)
    }

    .card .border-left {
        border-left: 1px solid rgba(0,0,0,.125)
    }

    .card.card-tabs:not(.card-outline) > .card-header {
        border-bottom: 0
    }

        .card.card-tabs:not(.card-outline) > .card-header .nav-item:first-child .nav-link {
            border-left-color: transparent
        }

    .card.card-tabs.card-outline .nav-item {
        border-bottom: 0
    }

        .card.card-tabs.card-outline .nav-item:first-child .nav-link {
            border-left: 0;
            margin-left: 0
        }

    .card.card-tabs .card-tools {
        margin: .3rem .5rem
    }

    .card.card-tabs:not(.expanding-card).collapsed-card .card-header {
        border-bottom: 0
    }

        .card.card-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs {
            border-bottom: 0
        }

            .card.card-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs .nav-item {
                margin-bottom: 0
            }

    .card.card-tabs.expanding-card .card-header .nav-tabs .nav-item {
        margin-bottom: -1px
    }

    .card.card-outline-tabs {
        border-top: 0
    }

        .card.card-outline-tabs .card-header .nav-item:first-child .nav-link {
            border-left: 0;
            margin-left: 0
        }

        .card.card-outline-tabs .card-header a {
            border-top: 3px solid transparent
        }

            .card.card-outline-tabs .card-header a:hover {
                border-top: 3px solid #dee2e6
            }

            .card.card-outline-tabs .card-header a.active:hover {
                margin-top: 0
            }

        .card.card-outline-tabs .card-tools {
            margin: .5rem .5rem .3rem
        }

        .card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header {
            border-bottom: 0
        }

            .card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs {
                border-bottom: 0
            }

                .card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs .nav-item {
                    margin-bottom: 0
                }

        .card.card-outline-tabs.expanding-card .card-header .nav-tabs .nav-item {
            margin-bottom: -1px
        }

html.maximized-card {
    overflow: hidden
}

.card-body::after, .card-footer::after, .card-header::after {
    display: block;
    clear: both;
    content: ""
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(0,0,0,.125);
    padding: .75rem 1.25rem;
    position: relative;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem
}

.collapsed-card .card-header {
    border-bottom: 0
}

.card-header > .card-tools {
    float: right;
    margin-right: -.625rem
}

    .card-header > .card-tools .input-group, .card-header > .card-tools .nav, .card-header > .card-tools .pagination {
        margin-bottom: -.3rem;
        margin-top: -.3rem
    }

    .card-header > .card-tools [data-toggle=tooltip] {
        position: relative
    }

/*.card-title {
    float: left;
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: .75rem
}*/

.card-text {
    clear: both
}

.btn-tool {
    background-color: transparent;
    color: #adb5bd;
    font-size: .875rem;
    margin: -.75rem 0;
    padding: .25rem .5rem
}

    .btn-group.show .btn-tool, .btn-tool:hover {
        color: #495057
    }

    .btn-tool:focus, .show .btn-tool {
        box-shadow: none !important
    }

.text-sm .card-title {
    font-size: 1rem
}

.text-sm .nav-link {
    padding: .4rem .8rem
}

.card-body > .table {
    margin-bottom: 0
}

    .card-body > .table > thead > tr > td, .card-body > .table > thead > tr > th {
        border-top-width: 0
    }

.card-body .fc {
    margin-top: 5px
}

.card-body .full-width-chart {
    margin: -19px
}

.card-body.p-0 .full-width-chart {
    margin: -9px
}

.chart-legend {
    padding-left: 0;
    list-style: none;
    margin: 10px 0
}

@media (max-width:576px) {
    .chart-legend > li {
        float: left;
        margin-right: 10px
    }
}

.card-comments {
    background-color: #f8f9fa
}

    .card-comments .card-comment {
        border-bottom: 1px solid #e9ecef;
        padding: 8px 0
    }

        .card-comments .card-comment::after {
            display: block;
            clear: both;
            content: ""
        }

        .card-comments .card-comment:last-of-type {
            border-bottom: 0
        }

        .card-comments .card-comment:first-of-type {
            padding-top: 0
        }

        .card-comments .card-comment img {
            height: 1.875rem;
            width: 1.875rem;
            float: left
        }

    .card-comments .comment-text {
        color: #78838e;
        margin-left: 40px
    }

    .card-comments .username {
        color: #495057;
        display: block;
        font-weight: 600
    }

    .card-comments .text-muted {
        font-size: 12px;
        font-weight: 400
    }

.todo-list {
    list-style: none;
    margin: 0;
    overflow: auto;
    padding: 0
}

    .todo-list > li {
        border-radius: 2px;
        background-color: #f8f9fa;
        border-left: 2px solid #e9ecef;
        color: #495057;
        margin-bottom: 2px;
        padding: 10px
    }

        .todo-list > li:last-of-type {
            margin-bottom: 0
        }

        .todo-list > li > input[type=checkbox] {
            margin: 0 10px 0 5px
        }

        .todo-list > li .text {
            display: inline-block;
            font-weight: 600;
            margin-left: 5px
        }

        .todo-list > li .badge {
            font-size: .7rem;
            margin-left: 10px
        }

        .todo-list > li .tools {
            color: #dc3545;
            display: none;
            float: right
        }

            .todo-list > li .tools > .fa, .todo-list > li .tools > .fab, .todo-list > li .tools > .fad, .todo-list > li .tools > .fal, .todo-list > li .tools > .far, .todo-list > li .tools > .fas, .todo-list > li .tools > .ion, .todo-list > li .tools > .svg-inline--fa {
                cursor: pointer;
                margin-right: 5px
            }

        .todo-list > li:hover .tools {
            display: inline-block
        }

        .todo-list > li.done {
            color: #697582
        }

            .todo-list > li.done .text {
                font-weight: 500;
                text-decoration: line-through
            }

            .todo-list > li.done .badge {
                background-color: #adb5bd !important
            }

    .todo-list .primary {
        border-left-color: #007bff
    }

    .todo-list .secondary {
        border-left-color: #6c757d
    }

    .todo-list .success {
        border-left-color: #28a745
    }

    .todo-list .info {
        border-left-color: #17a2b8
    }

    .todo-list .warning {
        border-left-color: #ffc107
    }

    .todo-list .danger {
        border-left-color: #dc3545
    }

    .todo-list .light {
        border-left-color: #f8f9fa
    }

    .todo-list .dark {
        border-left-color: #343a40
    }

    .todo-list .lightblue {
        border-left-color: #3c8dbc
    }

    .todo-list .navy {
        border-left-color: #001f3f
    }

    .todo-list .olive {
        border-left-color: #3d9970
    }

    .todo-list .lime {
        border-left-color: #01ff70
    }

    .todo-list .fuchsia {
        border-left-color: #f012be
    }

    .todo-list .maroon {
        border-left-color: #d81b60
    }

    .todo-list .blue {
        border-left-color: #007bff
    }

    .todo-list .indigo {
        border-left-color: #6610f2
    }

    .todo-list .purple {
        border-left-color: #6f42c1
    }

    .todo-list .pink {
        border-left-color: #e83e8c
    }

    .todo-list .red {
        border-left-color: #dc3545
    }

    .todo-list .orange {
        border-left-color: #fd7e14
    }

    .todo-list .yellow {
        border-left-color: #ffc107
    }

    .todo-list .green {
        border-left-color: #28a745
    }

    .todo-list .teal {
        border-left-color: #20c997
    }

    .todo-list .cyan {
        border-left-color: #17a2b8
    }

    .todo-list .white {
        border-left-color: #fff
    }

    .todo-list .gray {
        border-left-color: #6c757d
    }

    .todo-list .gray-dark {
        border-left-color: #343a40
    }

    .todo-list .handle {
        cursor: move;
        display: inline-block;
        margin: 0 5px
    }

.card-input {
    max-width: 200px
}

.card-default .nav-item:first-child .nav-link {
    border-left: 0
}

.dark-mode .card-primary:not(.card-outline) > .card-header {
    background-color: #3f6791
}

    .dark-mode .card-primary:not(.card-outline) > .card-header, .dark-mode .card-primary:not(.card-outline) > .card-header a {
        color: #fff
    }

        .dark-mode .card-primary:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-primary.card-outline {
    border-top: 3px solid #3f6791
}

.dark-mode .card-primary.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-primary.card-outline-tabs > .card-header a.active, .dark-mode .card-primary.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #3f6791
}

.dark-mode .bg-gradient-primary > .card-header .btn-tool, .dark-mode .bg-primary > .card-header .btn-tool, .dark-mode .card-primary:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .dark-mode .bg-gradient-primary > .card-header .btn-tool:hover, .dark-mode .bg-primary > .card-header .btn-tool:hover, .dark-mode .card-primary:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.dark-mode .card.bg-gradient-primary .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-primary .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-primary .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-primary .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-primary .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-primary .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-primary .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-primary .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-primary .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-primary .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-primary .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-primary .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-primary .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-primary .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #335375;
    color: #fff
}

.dark-mode .card.bg-gradient-primary .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-primary .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.dark-mode .card.bg-gradient-primary .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-primary .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-primary .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-primary .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #5080b3;
    color: #fff
}

.dark-mode .card-secondary:not(.card-outline) > .card-header {
    background-color: #6c757d
}

    .dark-mode .card-secondary:not(.card-outline) > .card-header, .dark-mode .card-secondary:not(.card-outline) > .card-header a {
        color: #fff
    }

        .dark-mode .card-secondary:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-secondary.card-outline {
    border-top: 3px solid #6c757d
}

.dark-mode .card-secondary.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-secondary.card-outline-tabs > .card-header a.active, .dark-mode .card-secondary.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #6c757d
}

.dark-mode .bg-gradient-secondary > .card-header .btn-tool, .dark-mode .bg-secondary > .card-header .btn-tool, .dark-mode .card-secondary:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .dark-mode .bg-gradient-secondary > .card-header .btn-tool:hover, .dark-mode .bg-secondary > .card-header .btn-tool:hover, .dark-mode .card-secondary:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.dark-mode .card.bg-gradient-secondary .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-secondary .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-secondary .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-secondary .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-secondary .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-secondary .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-secondary .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-secondary .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-secondary .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-secondary .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-secondary .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-secondary .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-secondary .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-secondary .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #596167;
    color: #fff
}

.dark-mode .card.bg-gradient-secondary .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-secondary .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.dark-mode .card.bg-gradient-secondary .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-secondary .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-secondary .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-secondary .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #868e96;
    color: #fff
}

.dark-mode .card-success:not(.card-outline) > .card-header {
    background-color: #00bc8c
}

    .dark-mode .card-success:not(.card-outline) > .card-header, .dark-mode .card-success:not(.card-outline) > .card-header a {
        color: #fff
    }

        .dark-mode .card-success:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-success.card-outline {
    border-top: 3px solid #00bc8c
}

.dark-mode .card-success.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-success.card-outline-tabs > .card-header a.active, .dark-mode .card-success.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #00bc8c
}

.dark-mode .bg-gradient-success > .card-header .btn-tool, .dark-mode .bg-success > .card-header .btn-tool, .dark-mode .card-success:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .dark-mode .bg-gradient-success > .card-header .btn-tool:hover, .dark-mode .bg-success > .card-header .btn-tool:hover, .dark-mode .card-success:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.dark-mode .card.bg-gradient-success .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-success .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-success .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-success .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-success .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-success .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-success .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-success .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-success .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-success .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-success .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-success .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-success .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-success .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #00936e;
    color: #fff
}

.dark-mode .card.bg-gradient-success .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-success .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.dark-mode .card.bg-gradient-success .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-success .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-success .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-success .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #00efb2;
    color: #fff
}

.dark-mode .card-info:not(.card-outline) > .card-header {
    background-color: #3498db
}

    .dark-mode .card-info:not(.card-outline) > .card-header, .dark-mode .card-info:not(.card-outline) > .card-header a {
        color: #fff
    }

        .dark-mode .card-info:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-info.card-outline {
    border-top: 3px solid #3498db
}

.dark-mode .card-info.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-info.card-outline-tabs > .card-header a.active, .dark-mode .card-info.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #3498db
}

.dark-mode .bg-gradient-info > .card-header .btn-tool, .dark-mode .bg-info > .card-header .btn-tool, .dark-mode .card-info:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .dark-mode .bg-gradient-info > .card-header .btn-tool:hover, .dark-mode .bg-info > .card-header .btn-tool:hover, .dark-mode .card-info:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.dark-mode .card.bg-gradient-info .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-info .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-info .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-info .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-info .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-info .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-info .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-info .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-info .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-info .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-info .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-info .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-info .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-info .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #2383c4;
    color: #fff
}

.dark-mode .card.bg-gradient-info .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-info .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.dark-mode .card.bg-gradient-info .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-info .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-info .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-info .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #5faee3;
    color: #fff
}

.dark-mode .card-warning:not(.card-outline) > .card-header {
    background-color: #f39c12
}

    .dark-mode .card-warning:not(.card-outline) > .card-header, .dark-mode .card-warning:not(.card-outline) > .card-header a {
        color: #1f2d3d
    }

        .dark-mode .card-warning:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-warning.card-outline {
    border-top: 3px solid #f39c12
}

.dark-mode .card-warning.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-warning.card-outline-tabs > .card-header a.active, .dark-mode .card-warning.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #f39c12
}

.dark-mode .bg-gradient-warning > .card-header .btn-tool, .dark-mode .bg-warning > .card-header .btn-tool, .dark-mode .card-warning:not(.card-outline) > .card-header .btn-tool {
    color: rgba(31,45,61,.8)
}

    .dark-mode .bg-gradient-warning > .card-header .btn-tool:hover, .dark-mode .bg-warning > .card-header .btn-tool:hover, .dark-mode .card-warning:not(.card-outline) > .card-header .btn-tool:hover {
        color: #1f2d3d
    }

.dark-mode .card.bg-gradient-warning .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-warning .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-warning .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-warning .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-warning .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-warning .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-warning .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-warning .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-warning .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-warning .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-warning .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-warning .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-warning .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-warning .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #d2850b;
    color: #1f2d3d
}

.dark-mode .card.bg-gradient-warning .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-warning .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #1f2d3d
}

.dark-mode .card.bg-gradient-warning .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-warning .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-warning .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-warning .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #f5b043;
    color: #1f2d3d
}

.dark-mode .card-danger:not(.card-outline) > .card-header {
    background-color: #e74c3c
}

    .dark-mode .card-danger:not(.card-outline) > .card-header, .dark-mode .card-danger:not(.card-outline) > .card-header a {
        color: #fff
    }

        .dark-mode .card-danger:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-danger.card-outline {
    border-top: 3px solid #e74c3c
}

.dark-mode .card-danger.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-danger.card-outline-tabs > .card-header a.active, .dark-mode .card-danger.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #e74c3c
}

.dark-mode .bg-danger > .card-header .btn-tool, .dark-mode .bg-gradient-danger > .card-header .btn-tool, .dark-mode .card-danger:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .dark-mode .bg-danger > .card-header .btn-tool:hover, .dark-mode .bg-gradient-danger > .card-header .btn-tool:hover, .dark-mode .card-danger:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.dark-mode .card.bg-danger .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-danger .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-gradient-danger .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-danger .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-danger .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-danger .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-danger .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-danger .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-danger .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-gradient-danger .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-danger .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-danger .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-danger .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-danger .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #df2e1b;
    color: #fff
}

.dark-mode .card.bg-danger .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-gradient-danger .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.dark-mode .card.bg-danger .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-danger .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-gradient-danger .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-danger .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #ed7669;
    color: #fff
}

.dark-mode .card-light:not(.card-outline) > .card-header {
    background-color: #f8f9fa
}

    .dark-mode .card-light:not(.card-outline) > .card-header, .dark-mode .card-light:not(.card-outline) > .card-header a {
        color: #1f2d3d
    }

        .dark-mode .card-light:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-light.card-outline {
    border-top: 3px solid #f8f9fa
}

.dark-mode .card-light.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-light.card-outline-tabs > .card-header a.active, .dark-mode .card-light.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #f8f9fa
}

.dark-mode .bg-gradient-light > .card-header .btn-tool, .dark-mode .bg-light > .card-header .btn-tool, .dark-mode .card-light:not(.card-outline) > .card-header .btn-tool {
    color: rgba(31,45,61,.8)
}

    .dark-mode .bg-gradient-light > .card-header .btn-tool:hover, .dark-mode .bg-light > .card-header .btn-tool:hover, .dark-mode .card-light:not(.card-outline) > .card-header .btn-tool:hover {
        color: #1f2d3d
    }

.dark-mode .card.bg-gradient-light .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-light .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-light .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-light .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-light .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-light .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-light .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-light .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-light .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-light .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-light .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-light .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-light .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-light .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #e0e5e9;
    color: #1f2d3d
}

.dark-mode .card.bg-gradient-light .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-light .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #1f2d3d
}

.dark-mode .card.bg-gradient-light .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-light .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-light .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-light .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #fff;
    color: #1f2d3d
}

.dark-mode .card-dark:not(.card-outline) > .card-header {
    background-color: #343a40
}

    .dark-mode .card-dark:not(.card-outline) > .card-header, .dark-mode .card-dark:not(.card-outline) > .card-header a {
        color: #fff
    }

        .dark-mode .card-dark:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-dark.card-outline {
    border-top: 3px solid #343a40
}

.dark-mode .card-dark.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-dark.card-outline-tabs > .card-header a.active, .dark-mode .card-dark.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #343a40
}

.dark-mode .bg-dark > .card-header .btn-tool, .dark-mode .bg-gradient-dark > .card-header .btn-tool, .dark-mode .card-dark:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .dark-mode .bg-dark > .card-header .btn-tool:hover, .dark-mode .bg-gradient-dark > .card-header .btn-tool:hover, .dark-mode .card-dark:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.dark-mode .card.bg-dark .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-dark .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-gradient-dark .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-dark .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-dark .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-dark .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-dark .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-dark .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-dark .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-gradient-dark .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-dark .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-dark .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-dark .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-dark .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #222629;
    color: #fff
}

.dark-mode .card.bg-dark .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-gradient-dark .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.dark-mode .card.bg-dark .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-dark .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-gradient-dark .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-dark .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #4b545c;
    color: #fff
}

.dark-mode .card-lightblue:not(.card-outline) > .card-header {
    background-color: #86bad8
}

    .dark-mode .card-lightblue:not(.card-outline) > .card-header, .dark-mode .card-lightblue:not(.card-outline) > .card-header a {
        color: #1f2d3d
    }

        .dark-mode .card-lightblue:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-lightblue.card-outline {
    border-top: 3px solid #86bad8
}

.dark-mode .card-lightblue.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-lightblue.card-outline-tabs > .card-header a.active, .dark-mode .card-lightblue.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #86bad8
}

.dark-mode .bg-gradient-lightblue > .card-header .btn-tool, .dark-mode .bg-lightblue > .card-header .btn-tool, .dark-mode .card-lightblue:not(.card-outline) > .card-header .btn-tool {
    color: rgba(31,45,61,.8)
}

    .dark-mode .bg-gradient-lightblue > .card-header .btn-tool:hover, .dark-mode .bg-lightblue > .card-header .btn-tool:hover, .dark-mode .card-lightblue:not(.card-outline) > .card-header .btn-tool:hover {
        color: #1f2d3d
    }

.dark-mode .card.bg-gradient-lightblue .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-lightblue .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-lightblue .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-lightblue .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-lightblue .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-lightblue .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-lightblue .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-lightblue .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-lightblue .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #67a8ce;
    color: #1f2d3d
}

.dark-mode .card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-lightblue .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #1f2d3d
}

.dark-mode .card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-lightblue .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-lightblue .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-lightblue .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #acd0e5;
    color: #1f2d3d
}

.dark-mode .card-navy:not(.card-outline) > .card-header {
    background-color: #002c59
}

    .dark-mode .card-navy:not(.card-outline) > .card-header, .dark-mode .card-navy:not(.card-outline) > .card-header a {
        color: #fff
    }

        .dark-mode .card-navy:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-navy.card-outline {
    border-top: 3px solid #002c59
}

.dark-mode .card-navy.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-navy.card-outline-tabs > .card-header a.active, .dark-mode .card-navy.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #002c59
}

.dark-mode .bg-gradient-navy > .card-header .btn-tool, .dark-mode .bg-navy > .card-header .btn-tool, .dark-mode .card-navy:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .dark-mode .bg-gradient-navy > .card-header .btn-tool:hover, .dark-mode .bg-navy > .card-header .btn-tool:hover, .dark-mode .card-navy:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.dark-mode .card.bg-gradient-navy .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-navy .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-navy .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-navy .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-navy .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-navy .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-navy .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-navy .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-navy .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-navy .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-navy .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-navy .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-navy .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-navy .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #001730;
    color: #fff
}

.dark-mode .card.bg-gradient-navy .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-navy .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.dark-mode .card.bg-gradient-navy .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-navy .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-navy .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-navy .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #00458c;
    color: #fff
}

.dark-mode .card-olive:not(.card-outline) > .card-header {
    background-color: #74c8a3
}

    .dark-mode .card-olive:not(.card-outline) > .card-header, .dark-mode .card-olive:not(.card-outline) > .card-header a {
        color: #1f2d3d
    }

        .dark-mode .card-olive:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-olive.card-outline {
    border-top: 3px solid #74c8a3
}

.dark-mode .card-olive.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-olive.card-outline-tabs > .card-header a.active, .dark-mode .card-olive.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #74c8a3
}

.dark-mode .bg-gradient-olive > .card-header .btn-tool, .dark-mode .bg-olive > .card-header .btn-tool, .dark-mode .card-olive:not(.card-outline) > .card-header .btn-tool {
    color: rgba(31,45,61,.8)
}

    .dark-mode .bg-gradient-olive > .card-header .btn-tool:hover, .dark-mode .bg-olive > .card-header .btn-tool:hover, .dark-mode .card-olive:not(.card-outline) > .card-header .btn-tool:hover {
        color: #1f2d3d
    }

.dark-mode .card.bg-gradient-olive .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-olive .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-olive .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-olive .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-olive .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-olive .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-olive .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-olive .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-olive .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-olive .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-olive .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-olive .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-olive .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-olive .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #57bc8f;
    color: #1f2d3d
}

.dark-mode .card.bg-gradient-olive .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-olive .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #1f2d3d
}

.dark-mode .card.bg-gradient-olive .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-olive .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-olive .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-olive .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #99d6bb;
    color: #1f2d3d
}

.dark-mode .card-lime:not(.card-outline) > .card-header {
    background-color: #67ffa9
}

    .dark-mode .card-lime:not(.card-outline) > .card-header, .dark-mode .card-lime:not(.card-outline) > .card-header a {
        color: #1f2d3d
    }

        .dark-mode .card-lime:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-lime.card-outline {
    border-top: 3px solid #67ffa9
}

.dark-mode .card-lime.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-lime.card-outline-tabs > .card-header a.active, .dark-mode .card-lime.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #67ffa9
}

.dark-mode .bg-gradient-lime > .card-header .btn-tool, .dark-mode .bg-lime > .card-header .btn-tool, .dark-mode .card-lime:not(.card-outline) > .card-header .btn-tool {
    color: rgba(31,45,61,.8)
}

    .dark-mode .bg-gradient-lime > .card-header .btn-tool:hover, .dark-mode .bg-lime > .card-header .btn-tool:hover, .dark-mode .card-lime:not(.card-outline) > .card-header .btn-tool:hover {
        color: #1f2d3d
    }

.dark-mode .card.bg-gradient-lime .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-lime .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-lime .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-lime .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-lime .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-lime .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-lime .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-lime .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-lime .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-lime .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-lime .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-lime .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-lime .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-lime .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #3eff92;
    color: #1f2d3d
}

.dark-mode .card.bg-gradient-lime .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-lime .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #1f2d3d
}

.dark-mode .card.bg-gradient-lime .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-lime .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-lime .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-lime .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #9affc6;
    color: #1f2d3d
}

.dark-mode .card-fuchsia:not(.card-outline) > .card-header {
    background-color: #f672d8
}

    .dark-mode .card-fuchsia:not(.card-outline) > .card-header, .dark-mode .card-fuchsia:not(.card-outline) > .card-header a {
        color: #1f2d3d
    }

        .dark-mode .card-fuchsia:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-fuchsia.card-outline {
    border-top: 3px solid #f672d8
}

.dark-mode .card-fuchsia.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-fuchsia.card-outline-tabs > .card-header a.active, .dark-mode .card-fuchsia.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #f672d8
}

.dark-mode .bg-fuchsia > .card-header .btn-tool, .dark-mode .bg-gradient-fuchsia > .card-header .btn-tool, .dark-mode .card-fuchsia:not(.card-outline) > .card-header .btn-tool {
    color: rgba(31,45,61,.8)
}

    .dark-mode .bg-fuchsia > .card-header .btn-tool:hover, .dark-mode .bg-gradient-fuchsia > .card-header .btn-tool:hover, .dark-mode .card-fuchsia:not(.card-outline) > .card-header .btn-tool:hover {
        color: #1f2d3d
    }

.dark-mode .card.bg-fuchsia .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-fuchsia .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-fuchsia .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-fuchsia .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-fuchsia .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-fuchsia .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-fuchsia .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #f44cce;
    color: #1f2d3d
}

.dark-mode .card.bg-fuchsia .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #1f2d3d
}

.dark-mode .card.bg-fuchsia .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-fuchsia .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-fuchsia .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #f9a2e5;
    color: #1f2d3d
}

.dark-mode .card-maroon:not(.card-outline) > .card-header {
    background-color: #ed6c9b
}

    .dark-mode .card-maroon:not(.card-outline) > .card-header, .dark-mode .card-maroon:not(.card-outline) > .card-header a {
        color: #1f2d3d
    }

        .dark-mode .card-maroon:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-maroon.card-outline {
    border-top: 3px solid #ed6c9b
}

.dark-mode .card-maroon.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-maroon.card-outline-tabs > .card-header a.active, .dark-mode .card-maroon.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #ed6c9b
}

.dark-mode .bg-gradient-maroon > .card-header .btn-tool, .dark-mode .bg-maroon > .card-header .btn-tool, .dark-mode .card-maroon:not(.card-outline) > .card-header .btn-tool {
    color: rgba(31,45,61,.8)
}

    .dark-mode .bg-gradient-maroon > .card-header .btn-tool:hover, .dark-mode .bg-maroon > .card-header .btn-tool:hover, .dark-mode .card-maroon:not(.card-outline) > .card-header .btn-tool:hover {
        color: #1f2d3d
    }

.dark-mode .card.bg-gradient-maroon .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-maroon .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-maroon .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-maroon .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-maroon .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-maroon .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-maroon .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-maroon .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-maroon .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-maroon .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #e84883;
    color: #1f2d3d
}

.dark-mode .card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-maroon .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #1f2d3d
}

.dark-mode .card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-maroon .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-maroon .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #f29aba;
    color: #1f2d3d
}

.dark-mode .card-blue:not(.card-outline) > .card-header {
    background-color: #3f6791
}

    .dark-mode .card-blue:not(.card-outline) > .card-header, .dark-mode .card-blue:not(.card-outline) > .card-header a {
        color: #fff
    }

        .dark-mode .card-blue:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-blue.card-outline {
    border-top: 3px solid #3f6791
}

.dark-mode .card-blue.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-blue.card-outline-tabs > .card-header a.active, .dark-mode .card-blue.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #3f6791
}

.dark-mode .bg-blue > .card-header .btn-tool, .dark-mode .bg-gradient-blue > .card-header .btn-tool, .dark-mode .card-blue:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .dark-mode .bg-blue > .card-header .btn-tool:hover, .dark-mode .bg-gradient-blue > .card-header .btn-tool:hover, .dark-mode .card-blue:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.dark-mode .card.bg-blue .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-blue .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-gradient-blue .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-blue .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-blue .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-blue .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-blue .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-blue .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-blue .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-gradient-blue .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-blue .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-blue .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-blue .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-blue .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #335375;
    color: #fff
}

.dark-mode .card.bg-blue .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-gradient-blue .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.dark-mode .card.bg-blue .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-blue .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-gradient-blue .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-blue .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #5080b3;
    color: #fff
}

.dark-mode .card-indigo:not(.card-outline) > .card-header {
    background-color: #6610f2
}

    .dark-mode .card-indigo:not(.card-outline) > .card-header, .dark-mode .card-indigo:not(.card-outline) > .card-header a {
        color: #fff
    }

        .dark-mode .card-indigo:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-indigo.card-outline {
    border-top: 3px solid #6610f2
}

.dark-mode .card-indigo.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-indigo.card-outline-tabs > .card-header a.active, .dark-mode .card-indigo.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #6610f2
}

.dark-mode .bg-gradient-indigo > .card-header .btn-tool, .dark-mode .bg-indigo > .card-header .btn-tool, .dark-mode .card-indigo:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .dark-mode .bg-gradient-indigo > .card-header .btn-tool:hover, .dark-mode .bg-indigo > .card-header .btn-tool:hover, .dark-mode .card-indigo:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.dark-mode .card.bg-gradient-indigo .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-indigo .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-indigo .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-indigo .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-indigo .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-indigo .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-indigo .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-indigo .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-indigo .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-indigo .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-indigo .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-indigo .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-indigo .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-indigo .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #550bce;
    color: #fff
}

.dark-mode .card.bg-gradient-indigo .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-indigo .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.dark-mode .card.bg-gradient-indigo .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-indigo .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-indigo .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-indigo .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #8540f5;
    color: #fff
}

.dark-mode .card-purple:not(.card-outline) > .card-header {
    background-color: #6f42c1
}

    .dark-mode .card-purple:not(.card-outline) > .card-header, .dark-mode .card-purple:not(.card-outline) > .card-header a {
        color: #fff
    }

        .dark-mode .card-purple:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-purple.card-outline {
    border-top: 3px solid #6f42c1
}

.dark-mode .card-purple.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-purple.card-outline-tabs > .card-header a.active, .dark-mode .card-purple.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #6f42c1
}

.dark-mode .bg-gradient-purple > .card-header .btn-tool, .dark-mode .bg-purple > .card-header .btn-tool, .dark-mode .card-purple:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .dark-mode .bg-gradient-purple > .card-header .btn-tool:hover, .dark-mode .bg-purple > .card-header .btn-tool:hover, .dark-mode .card-purple:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.dark-mode .card.bg-gradient-purple .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-purple .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-purple .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-purple .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-purple .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-purple .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-purple .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-purple .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-purple .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-purple .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #5d36a4;
    color: #fff
}

.dark-mode .card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-purple .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.dark-mode .card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-purple .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-purple .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-purple .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #8c68ce;
    color: #fff
}

.dark-mode .card-pink:not(.card-outline) > .card-header {
    background-color: #e83e8c
}

    .dark-mode .card-pink:not(.card-outline) > .card-header, .dark-mode .card-pink:not(.card-outline) > .card-header a {
        color: #fff
    }

        .dark-mode .card-pink:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-pink.card-outline {
    border-top: 3px solid #e83e8c
}

.dark-mode .card-pink.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-pink.card-outline-tabs > .card-header a.active, .dark-mode .card-pink.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #e83e8c
}

.dark-mode .bg-gradient-pink > .card-header .btn-tool, .dark-mode .bg-pink > .card-header .btn-tool, .dark-mode .card-pink:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .dark-mode .bg-gradient-pink > .card-header .btn-tool:hover, .dark-mode .bg-pink > .card-header .btn-tool:hover, .dark-mode .card-pink:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.dark-mode .card.bg-gradient-pink .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-pink .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-pink .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-pink .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-pink .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-pink .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-pink .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-pink .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-pink .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-pink .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-pink .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-pink .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-pink .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-pink .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #e21b76;
    color: #fff
}

.dark-mode .card.bg-gradient-pink .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-pink .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.dark-mode .card.bg-gradient-pink .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-pink .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-pink .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-pink .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #ed6ca7;
    color: #fff
}

.dark-mode .card-red:not(.card-outline) > .card-header {
    background-color: #e74c3c
}

    .dark-mode .card-red:not(.card-outline) > .card-header, .dark-mode .card-red:not(.card-outline) > .card-header a {
        color: #fff
    }

        .dark-mode .card-red:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-red.card-outline {
    border-top: 3px solid #e74c3c
}

.dark-mode .card-red.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-red.card-outline-tabs > .card-header a.active, .dark-mode .card-red.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #e74c3c
}

.dark-mode .bg-gradient-red > .card-header .btn-tool, .dark-mode .bg-red > .card-header .btn-tool, .dark-mode .card-red:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .dark-mode .bg-gradient-red > .card-header .btn-tool:hover, .dark-mode .bg-red > .card-header .btn-tool:hover, .dark-mode .card-red:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.dark-mode .card.bg-gradient-red .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-red .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-red .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-red .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-red .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-red .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-red .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-red .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-red .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-red .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-red .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-red .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-red .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-red .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #df2e1b;
    color: #fff
}

.dark-mode .card.bg-gradient-red .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-red .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.dark-mode .card.bg-gradient-red .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-red .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-red .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-red .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #ed7669;
    color: #fff
}

.dark-mode .card-orange:not(.card-outline) > .card-header {
    background-color: #fd7e14
}

    .dark-mode .card-orange:not(.card-outline) > .card-header, .dark-mode .card-orange:not(.card-outline) > .card-header a {
        color: #1f2d3d
    }

        .dark-mode .card-orange:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-orange.card-outline {
    border-top: 3px solid #fd7e14
}

.dark-mode .card-orange.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-orange.card-outline-tabs > .card-header a.active, .dark-mode .card-orange.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #fd7e14
}

.dark-mode .bg-gradient-orange > .card-header .btn-tool, .dark-mode .bg-orange > .card-header .btn-tool, .dark-mode .card-orange:not(.card-outline) > .card-header .btn-tool {
    color: rgba(31,45,61,.8)
}

    .dark-mode .bg-gradient-orange > .card-header .btn-tool:hover, .dark-mode .bg-orange > .card-header .btn-tool:hover, .dark-mode .card-orange:not(.card-outline) > .card-header .btn-tool:hover {
        color: #1f2d3d
    }

.dark-mode .card.bg-gradient-orange .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-orange .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-orange .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-orange .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-orange .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-orange .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-orange .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-orange .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-orange .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-orange .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-orange .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-orange .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-orange .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-orange .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #e66a02;
    color: #1f2d3d
}

.dark-mode .card.bg-gradient-orange .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-orange .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #1f2d3d
}

.dark-mode .card.bg-gradient-orange .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-orange .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-orange .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-orange .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #fd9a47;
    color: #1f2d3d
}

.dark-mode .card-yellow:not(.card-outline) > .card-header {
    background-color: #f39c12
}

    .dark-mode .card-yellow:not(.card-outline) > .card-header, .dark-mode .card-yellow:not(.card-outline) > .card-header a {
        color: #1f2d3d
    }

        .dark-mode .card-yellow:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-yellow.card-outline {
    border-top: 3px solid #f39c12
}

.dark-mode .card-yellow.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-yellow.card-outline-tabs > .card-header a.active, .dark-mode .card-yellow.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #f39c12
}

.dark-mode .bg-gradient-yellow > .card-header .btn-tool, .dark-mode .bg-yellow > .card-header .btn-tool, .dark-mode .card-yellow:not(.card-outline) > .card-header .btn-tool {
    color: rgba(31,45,61,.8)
}

    .dark-mode .bg-gradient-yellow > .card-header .btn-tool:hover, .dark-mode .bg-yellow > .card-header .btn-tool:hover, .dark-mode .card-yellow:not(.card-outline) > .card-header .btn-tool:hover {
        color: #1f2d3d
    }

.dark-mode .card.bg-gradient-yellow .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-yellow .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-yellow .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-yellow .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-yellow .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-yellow .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-yellow .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-yellow .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-yellow .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-yellow .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-yellow .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-yellow .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-yellow .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-yellow .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #d2850b;
    color: #1f2d3d
}

.dark-mode .card.bg-gradient-yellow .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-yellow .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #1f2d3d
}

.dark-mode .card.bg-gradient-yellow .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-yellow .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-yellow .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-yellow .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #f5b043;
    color: #1f2d3d
}

.dark-mode .card-green:not(.card-outline) > .card-header {
    background-color: #00bc8c
}

    .dark-mode .card-green:not(.card-outline) > .card-header, .dark-mode .card-green:not(.card-outline) > .card-header a {
        color: #fff
    }

        .dark-mode .card-green:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-green.card-outline {
    border-top: 3px solid #00bc8c
}

.dark-mode .card-green.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-green.card-outline-tabs > .card-header a.active, .dark-mode .card-green.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #00bc8c
}

.dark-mode .bg-gradient-green > .card-header .btn-tool, .dark-mode .bg-green > .card-header .btn-tool, .dark-mode .card-green:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .dark-mode .bg-gradient-green > .card-header .btn-tool:hover, .dark-mode .bg-green > .card-header .btn-tool:hover, .dark-mode .card-green:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.dark-mode .card.bg-gradient-green .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-green .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-green .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-green .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-green .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-green .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-green .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-green .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-green .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-green .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-green .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-green .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-green .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-green .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #00936e;
    color: #fff
}

.dark-mode .card.bg-gradient-green .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-green .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.dark-mode .card.bg-gradient-green .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-green .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-green .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-green .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #00efb2;
    color: #fff
}

.dark-mode .card-teal:not(.card-outline) > .card-header {
    background-color: #20c997
}

    .dark-mode .card-teal:not(.card-outline) > .card-header, .dark-mode .card-teal:not(.card-outline) > .card-header a {
        color: #fff
    }

        .dark-mode .card-teal:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-teal.card-outline {
    border-top: 3px solid #20c997
}

.dark-mode .card-teal.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-teal.card-outline-tabs > .card-header a.active, .dark-mode .card-teal.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #20c997
}

.dark-mode .bg-gradient-teal > .card-header .btn-tool, .dark-mode .bg-teal > .card-header .btn-tool, .dark-mode .card-teal:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .dark-mode .bg-gradient-teal > .card-header .btn-tool:hover, .dark-mode .bg-teal > .card-header .btn-tool:hover, .dark-mode .card-teal:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.dark-mode .card.bg-gradient-teal .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-teal .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-teal .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-teal .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-teal .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-teal .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-teal .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-teal .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-teal .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-teal .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-teal .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-teal .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-teal .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-teal .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #1aa67d;
    color: #fff
}

.dark-mode .card.bg-gradient-teal .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-teal .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.dark-mode .card.bg-gradient-teal .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-teal .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-teal .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-teal .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #3ce0af;
    color: #fff
}

.dark-mode .card-cyan:not(.card-outline) > .card-header {
    background-color: #3498db
}

    .dark-mode .card-cyan:not(.card-outline) > .card-header, .dark-mode .card-cyan:not(.card-outline) > .card-header a {
        color: #fff
    }

        .dark-mode .card-cyan:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-cyan.card-outline {
    border-top: 3px solid #3498db
}

.dark-mode .card-cyan.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-cyan.card-outline-tabs > .card-header a.active, .dark-mode .card-cyan.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #3498db
}

.dark-mode .bg-cyan > .card-header .btn-tool, .dark-mode .bg-gradient-cyan > .card-header .btn-tool, .dark-mode .card-cyan:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .dark-mode .bg-cyan > .card-header .btn-tool:hover, .dark-mode .bg-gradient-cyan > .card-header .btn-tool:hover, .dark-mode .card-cyan:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.dark-mode .card.bg-cyan .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-cyan .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-gradient-cyan .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-cyan .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-cyan .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-cyan .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-cyan .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-cyan .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-cyan .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-gradient-cyan .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-cyan .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-cyan .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-cyan .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-cyan .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #2383c4;
    color: #fff
}

.dark-mode .card.bg-cyan .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-gradient-cyan .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.dark-mode .card.bg-cyan .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-cyan .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-gradient-cyan .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-cyan .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #5faee3;
    color: #fff
}

.dark-mode .card-white:not(.card-outline) > .card-header {
    background-color: #fff
}

    .dark-mode .card-white:not(.card-outline) > .card-header, .dark-mode .card-white:not(.card-outline) > .card-header a {
        color: #1f2d3d
    }

        .dark-mode .card-white:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-white.card-outline {
    border-top: 3px solid #fff
}

.dark-mode .card-white.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-white.card-outline-tabs > .card-header a.active, .dark-mode .card-white.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #fff
}

.dark-mode .bg-gradient-white > .card-header .btn-tool, .dark-mode .bg-white > .card-header .btn-tool, .dark-mode .card-white:not(.card-outline) > .card-header .btn-tool {
    color: rgba(31,45,61,.8)
}

    .dark-mode .bg-gradient-white > .card-header .btn-tool:hover, .dark-mode .bg-white > .card-header .btn-tool:hover, .dark-mode .card-white:not(.card-outline) > .card-header .btn-tool:hover {
        color: #1f2d3d
    }

.dark-mode .card.bg-gradient-white .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-white .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-white .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-white .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-white .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-white .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-white .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-white .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-white .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-white .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-white .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-white .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-white .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-white .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #ebebeb;
    color: #1f2d3d
}

.dark-mode .card.bg-gradient-white .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-white .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #1f2d3d
}

.dark-mode .card.bg-gradient-white .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-white .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-white .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-white .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #fff;
    color: #1f2d3d
}

.dark-mode .card-gray:not(.card-outline) > .card-header {
    background-color: #6c757d
}

    .dark-mode .card-gray:not(.card-outline) > .card-header, .dark-mode .card-gray:not(.card-outline) > .card-header a {
        color: #fff
    }

        .dark-mode .card-gray:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-gray.card-outline {
    border-top: 3px solid #6c757d
}

.dark-mode .card-gray.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-gray.card-outline-tabs > .card-header a.active, .dark-mode .card-gray.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #6c757d
}

.dark-mode .bg-gradient-gray > .card-header .btn-tool, .dark-mode .bg-gray > .card-header .btn-tool, .dark-mode .card-gray:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .dark-mode .bg-gradient-gray > .card-header .btn-tool:hover, .dark-mode .bg-gray > .card-header .btn-tool:hover, .dark-mode .card-gray:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.dark-mode .card.bg-gradient-gray .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-gray .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-gray .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gray .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-gray .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-gray .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-gray .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-gray .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-gray .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-gray .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gray .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gray .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gray .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gray .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #596167;
    color: #fff
}

.dark-mode .card.bg-gradient-gray .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-gray .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.dark-mode .card.bg-gradient-gray .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-gray .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-gray .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gray .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #868e96;
    color: #fff
}

.dark-mode .card-gray-dark:not(.card-outline) > .card-header {
    background-color: #343a40
}

    .dark-mode .card-gray-dark:not(.card-outline) > .card-header, .dark-mode .card-gray-dark:not(.card-outline) > .card-header a {
        color: #fff
    }

        .dark-mode .card-gray-dark:not(.card-outline) > .card-header a.active {
            color: #1f2d3d
        }

.dark-mode .card-gray-dark.card-outline {
    border-top: 3px solid #343a40
}

.dark-mode .card-gray-dark.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6
}

.dark-mode .card-gray-dark.card-outline-tabs > .card-header a.active, .dark-mode .card-gray-dark.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #343a40
}

.dark-mode .bg-gradient-gray-dark > .card-header .btn-tool, .dark-mode .bg-gray-dark > .card-header .btn-tool, .dark-mode .card-gray-dark:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255,255,255,.8)
}

    .dark-mode .bg-gradient-gray-dark > .card-header .btn-tool:hover, .dark-mode .bg-gray-dark > .card-header .btn-tool:hover, .dark-mode .card-gray-dark:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff
    }

.dark-mode .card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget .table th, .dark-mode .card.bg-gray-dark .bootstrap-datetimepicker-widget .table td, .dark-mode .card.bg-gray-dark .bootstrap-datetimepicker-widget .table th {
    border: none
}

.dark-mode .card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .dark-mode .card.bg-gray-dark .bootstrap-datetimepicker-widget table td.day:hover, .dark-mode .card.bg-gray-dark .bootstrap-datetimepicker-widget table td.hour:hover, .dark-mode .card.bg-gray-dark .bootstrap-datetimepicker-widget table td.minute:hover, .dark-mode .card.bg-gray-dark .bootstrap-datetimepicker-widget table td.second:hover, .dark-mode .card.bg-gray-dark .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #222629;
    color: #fff
}

.dark-mode .card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget table td.today::before, .dark-mode .card.bg-gray-dark .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff
}

.dark-mode .card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gradient-gray-dark .bootstrap-datetimepicker-widget table td.active:hover, .dark-mode .card.bg-gray-dark .bootstrap-datetimepicker-widget table td.active, .dark-mode .card.bg-gray-dark .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #4b545c;
    color: #fff
}

.dark-mode .card {
    background-color: #343a40;
    color: #fff
}

    .dark-mode .card .card {
        background-color: #3f474e;
        color: #fff
    }

    .dark-mode .card .nav.flex-column > li {
        border-bottom-color: #6c757d
    }

    .dark-mode .card .card-footer {
        background-color: rgba(0,0,0,.1)
    }

    .dark-mode .card.card-outline-tabs {
        border-top: 0
    }

        .dark-mode .card.card-outline-tabs .card-header a:hover {
            border-top-color: #6c757d;
            border-bottom-color: transparent
        }

    .dark-mode .card:not(.card-outline) > .card-header a.active {
        color: #fff
    }

.dark-mode .card-comments {
    background-color: #373d44
}

    .dark-mode .card-comments .username {
        color: #ced4da
    }

    .dark-mode .card-comments .card-comment {
        border-bottom-color: #454d55
    }

.product-list-in-card > .item {
    border-radius: 0;
    border-bottom: 1px solid rgba(0,0,0,.125)
}

    .product-list-in-card > .item:last-of-type {
        border-bottom-width: 0
    }

.direct-chat .card-body {
    overflow-x: hidden;
    padding: 0;
    position: relative
}

.card-widget {
    border: 0;
    position: relative
}

.widget-user .card-footer {
    padding-top: 50px
}

.login-box .card, .register-box .card {
    margin-bottom: 0
}

.login-card-body, .register-card-body {
    background-color: #fff;
    border-top: 0;
    color: #666;
    padding: 20px
}

    .login-card-body .input-group .form-control, .register-card-body .input-group .form-control {
        border-right: 0
    }

        .login-card-body .input-group .form-control:focus, .register-card-body .input-group .form-control:focus {
            box-shadow: none
        }

            .login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text, .login-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text, .register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text, .register-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text {
                border-color: #80bdff
            }

        .login-card-body .input-group .form-control.is-valid:focus, .register-card-body .input-group .form-control.is-valid:focus {
            box-shadow: none
        }

        .login-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text, .login-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text, .register-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text, .register-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text {
            border-color: #28a745
        }

        .login-card-body .input-group .form-control.is-invalid:focus, .register-card-body .input-group .form-control.is-invalid:focus {
            box-shadow: none
        }

        .login-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text, .register-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text {
            border-color: #dc3545
        }

    .login-card-body .input-group .input-group-text, .register-card-body .input-group .input-group-text {
        background-color: transparent;
        border-bottom-right-radius: .25rem;
        border-left: 0;
        border-top-right-radius: .25rem;
        color: #777;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out
    }

.dark-mode .login-card-body, .dark-mode .register-card-body {
    background-color: #343a40;
    border-color: #6c757d;
    color: #fff
}

.content-wrapper.kanban .card .card-body {
    padding: .5rem
}

.content-wrapper.kanban .card.card-row {
    width: 340px;
    display: inline-block;
    margin: 0 .5rem
}

    .content-wrapper.kanban .card.card-row:first-child {
        margin-left: 0
    }

    .content-wrapper.kanban .card.card-row .card-body {
        height: calc(100% - (12px + (1.8rem * 1.2) + .5rem));
        overflow-y: auto
    }

    .content-wrapper.kanban .card.card-row .card:last-child {
        margin-bottom: 0;
        border-bottom-width: 1px
    }

    .content-wrapper.kanban .card.card-row .card .card-header {
        padding: .5rem .75rem
    }

    .content-wrapper.kanban .card.card-row .card .card-body {
        padding: .75rem
    }

.content-wrapper.kanban .btn-tool.btn-link {
    text-decoration: underline;
    padding-left: 0;
    padding-right: 0
}

.card > .loading-img, .card > .overlay, .info-box > .loading-img, .info-box > .overlay, .overlay-wrapper > .loading-img, .overlay-wrapper > .overlay, .small-box > .loading-img, .small-box > .overlay {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.card .overlay, .info-box .overlay, .overlay-wrapper .overlay, .small-box .overlay {
    border-radius: .25rem;
    -ms-flex-align: center;
    align-items: center;
    background-color: rgba(255,255,255,.7);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 50
}

    .card .overlay > .fa, .card .overlay > .fab, .card .overlay > .fad, .card .overlay > .fal, .card .overlay > .far, .card .overlay > .fas, .card .overlay > .ion, .card .overlay > .svg-inline--fa, .info-box .overlay > .fa, .info-box .overlay > .fab, .info-box .overlay > .fad, .info-box .overlay > .fal, .info-box .overlay > .far, .info-box .overlay > .fas, .info-box .overlay > .ion, .info-box .overlay > .svg-inline--fa, .overlay-wrapper .overlay > .fa, .overlay-wrapper .overlay > .fab, .overlay-wrapper .overlay > .fad, .overlay-wrapper .overlay > .fal, .overlay-wrapper .overlay > .far, .overlay-wrapper .overlay > .fas, .overlay-wrapper .overlay > .ion, .overlay-wrapper .overlay > .svg-inline--fa, .small-box .overlay > .fa, .small-box .overlay > .fab, .small-box .overlay > .fad, .small-box .overlay > .fal, .small-box .overlay > .far, .small-box .overlay > .fas, .small-box .overlay > .ion, .small-box .overlay > .svg-inline--fa {
        color: #343a40
    }

    .card .overlay.dark, .info-box .overlay.dark, .overlay-wrapper .overlay.dark, .small-box .overlay.dark {
        background-color: rgba(0,0,0,.5)
    }

        .card .overlay.dark > .fa, .card .overlay.dark > .fab, .card .overlay.dark > .fad, .card .overlay.dark > .fal, .card .overlay.dark > .far, .card .overlay.dark > .fas, .card .overlay.dark > .ion, .card .overlay.dark > .svg-inline--fa, .info-box .overlay.dark > .fa, .info-box .overlay.dark > .fab, .info-box .overlay.dark > .fad, .info-box .overlay.dark > .fal, .info-box .overlay.dark > .far, .info-box .overlay.dark > .fas, .info-box .overlay.dark > .ion, .info-box .overlay.dark > .svg-inline--fa, .overlay-wrapper .overlay.dark > .fa, .overlay-wrapper .overlay.dark > .fab, .overlay-wrapper .overlay.dark > .fad, .overlay-wrapper .overlay.dark > .fal, .overlay-wrapper .overlay.dark > .far, .overlay-wrapper .overlay.dark > .fas, .overlay-wrapper .overlay.dark > .ion, .overlay-wrapper .overlay.dark > .svg-inline--fa, .small-box .overlay.dark > .fa, .small-box .overlay.dark > .fab, .small-box .overlay.dark > .fad, .small-box .overlay.dark > .fal, .small-box .overlay.dark > .far, .small-box .overlay.dark > .fas, .small-box .overlay.dark > .ion, .small-box .overlay.dark > .svg-inline--fa {
            color: #ced4da
        }

/*CARD CSS END */
#full-page-container1 {
    /*overflow-x: auto;*/
    /*overflow: auto !important;*/
    /*padding-top: 0px !important;*/
    padding-top: 26px;
    width: 100% !important;
    height: 100vh !important;
}

#ctl00_ContentPlaceHolder1_pnlMain,
#ctl00_ContentPlaceHolder1_Panel1 {
    width: 100% !important;
}

#ctl00_ContentPlaceHolder1_pnlList {
    width: 100% !important;
    overflow-x: auto !important;
}

.full-page-container2 {
    /*padding-top: 26px;*/
    width: 100% !important;
    height: 100vh !important;
    padding: 0px 10px !important;
}

#ucReportCriteria1_pnlCriteria,
#pnlShow {
    padding: 0px 5px !important;
}
/*SELECT2 Drop Down CSS Start*/
/* Target the Select2 dropdown when it has focus */
.select2-container.select2-container--focus {
    box-shadow: 0 0 4px #f5821f !important;
    border-bottom: 2px solid #f5821f !important
}

select option:hover {
    background-color: #fff !important;
    border: 1px solid #f5821f !important;
    color: #333 !important;
}

.select2-results__options .select2-results__option:hover,
.select2-results__options .select2-results__option.select2-results__option--highlighted {
    /*background: #fff !important;
    border: 1px solid #f5821f !important;
    color: #333 !important;*/
    background: #f5821f !important;
    /*border: 1px solid #f5821f !important;*/
    color: #fff !important;
}

.select2-container--default .select2-selection--multiple, .select2-selection .select2-selection--multiple,
.select2-container .select2-selection--multiple {
    box-sizing: border-box !important;
    cursor: pointer !important;
    display: block !important;
    user-select: none !important;
    border: 1px solid #ccc !important;
    -webkit-user-select: none !important;
    min-height: 24px !important;
    height: 24px !important;
}
/*SELECT2 Drop Down CSS End*/

/*.all {
    color: #000 !important;
    float: left !important;
    font-weight: bold !important;*/
/*width: 50%;*/
/*font-size: 12px !important;*/
/*margin: 5px 0px !important;*/
/*}*/

.job-table > tbody > tr > td, .job-table > tbody > tr > th, .job-table > tfoot > tr > td, .job-table > tfoot > tr > th, .job-table > thead > tr > td, .job-table > thead > tr > th {
    padding: 8px !important;
    border: 1px solid #ddd !important;
}

.blockUI {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    /*transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);*/ /* IE 9 */
    /*-webkit-transform: translate(-50%, -50%);*/ /* Chrome, Safari, Opera */
}


    .blockUI center {
        /*background: #f5821f !important;
    position: fixed;
    top: 30%;
    left: 40%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    justify-content: center;*/
        /*transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);*/ /* IE 9 */
        /*-webkit-transform: translate(-50%, -50%);*/ /* Chrome, Safari, Opera */
    }

    .blockUI.blockMsg.blockPage {
        z-index: 1011 !important;
        position: fixed !important;
        width: 150px !important;
        height: 150px !important;
        top: 40% !important;
        left: 40% !important;
        border: none !important;
        background-color: #f5821f !important;
        border-radius: 50% !important;
        opacity: 1 !important;
        color: rgb(255, 255, 255);
    }

    .blockUI > center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .blockUI > center > div {
            background: url('./Images/TimeTrax - icon only - white.png');
            width: 150px !important;
            height: 150px !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
            background-size: cover !important;
        }

.table {
    margin-bottom: 0px !important;
}


/* Calender css */

.ajax__calendar_title {
    /*font-family: 'open_sansregular',Helvetica,Arial,sans-serif;*/
    font-family: 'CircularStd', 'sans-serif';
    font-weight: normal;
}

.ajax__calendar_active .ajax__calendar_day, .ajax__calendar_day:hover {
    background-color: #f5821f !important;
    border-color: #f5821f !important;
    color: #fff !important;
}

.ajax__calendar_today .ajax__calendar_day {
    /*font-family: 'open_sansregular',Helvetica,Arial,sans-serif;*/
    font-family: 'CircularStd', 'sans-serif';
    background-color: #fff !important;
    border-color: #f5821f !important;
    color: #f5821f !important;
}

.ajax__calendar_footer {
    background: none;
    color: #333;
    margin-bottom: 5px;
    /*font-family: 'open_sansregular',Helvetica,Arial,sans-serif;*/
    font-family: 'CircularStd', 'sans-serif';
}

/* MyCalendar css */
.MyCalendar {
    position: absolute !important;
    top: auto !important;
    z-index: 999999 !important;
}

    .MyCalendar .ajax__calendar_container {
        /*font-family: 'open_sansregular',Helvetica,Arial,sans-serif;*/
        font-family: 'CircularStd', 'sans-serif';
        width: 180px !important;
        z-index: 99999;
        background-color: #ffffff;
        border: 1px solid #f5821f;
        color: #000000;
    }

    .MyCalendar .ajax__calendar_body {
        height: 140px;
        width: 175px;
        /*font-family: 'open_sansregular',Helvetica,Arial,sans-serif;*/
        font-family: 'CircularStd', 'sans-serif';
    }

    .MyCalendar .ajax__calendar_title {
        font-family: 'CircularStd', 'sans-serif';
        /*font-family: 'open_sansregular',Helvetica,Arial,sans-serif;*/
        font-weight: normal;
    }

    .MyCalendar .ajax__calendar_container td {
        border: 0;
        padding: 0px;
        margin: 0;
        height: auto !important;
    }

    .MyCalendar .ajax__calendar_dayname {
        border-bottom: 1px solid #444;
    }

    .MyCalendar .ajax__calendar_active .ajax__calendar_month {
        background-color: #fff;
        border: 1px solid #444;
        color: #444;
    }

    .MyCalendar .ajax__calendar_active .ajax__calendar_year {
        background-color: #fff;
        border: 1px solid #444;
        color: #444;
    }

    .MyCalendar .ajax__calendar_month:hover {
        background-color: #e2e9da;
        border: 0px solid #444;
        color: #444;
    }

    .MyCalendar .ajax__calendar_year:hover {
        background-color: #e2e9da;
        border: 0px solid #f5821f;
        color: #444;
    }

    .MyCalendar .ajax__calendar_other .ajax__calendar_day, .MyCalendar .ajax__calendar_other .ajax__calendar_year {
        background-color: #fff;
        border-color: #444;
        color: #444;
    }

    .MyCalendar div.ajax__calendar_dayname, div.ajax__calendar_day {
        height: 18px;
        width: 20px;
        line-height: 20px;
        text-align: center;
        /*font-family: 'open_sansregular',Helvetica,Arial,sans-serif;*/
        font-family: 'CircularStd', 'sans-serif';
        font-weight: normal;
    }



    .MyCalendar .ajax__calendar_today .ajax__calendar_day {
        /*font-family: 'open_sansregular',Helvetica,Arial,sans-serif;*/
        font-family: 'Circular Std-medium', 'sans-serif';
        background-color: #fff !important;
        border: 1px solid #444 !important;
        color: #444 !important;
    }

    .MyCalendar .ajax__calendar_footer {
        border-top: 1px solid #f5f5f5;
        background: none;
        color: #333;
        margin-bottom: 5px;
        /*font-family: 'open_sansregular',Helvetica,Arial,sans-serif;*/
        font-family: 'CircularStd', 'sans-serif';
    }

.reftextop {
    position: absolute;
    top: 4px;
    left: 18px;
}

.btnEdit {
    margin: 0px 4px;
    padding: 4px;
    border: 0;
    height: 20px;
    width: 20px;
    background: url(images/Edit.png) repeat-x top;
    cursor: pointer;
}

.btnDelete {
    margin: 0px 4px;
    padding: 4px;
    border: 0;
    height: 20px;
    width: 20px;
    background: url(images/Delete.png) repeat-x top;
    cursor: pointer;
}

.margin-0 {
    margin: 0px !important;
}

#ctl00_ContentPlaceHolder1_pnlForm,
#ctl00_ContentPlaceHolder1_upCriteria {
    margin: 0px 6px;
}

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


#full-page-container3 {
    padding: 10px !important;
    width: 100% !important;
    height: 100vh !important;
}

.form-row {
    margin-right: 0px;
    margin-left: 0px;
}

.PartitionDiv1Style {
    width: 70%;
    float: left;
}

.PartitionDiv2Style {
    width: 30%;
    float: right;
}

.formTable {
    width: auto !important;
    display: flex;
}

.formTableTr {
    display: flex;
    flex-direction: row;
}

    .formTableTr td {
        width: 400px !important;
    }

.formTable2 {
    width: auto !important;
    display: flex;
    overflow-x: scroll;
}

.formTable tr td {
    width: auto !important;
}

.txtFieldTable tr td {
    padding: 0px 10px;
}

.txtFieldTable table > tbody > tr > td > span.all {
    width: auto !important;
}

.formDiv {
    padding: 10px;
}

.txtRed {
    color: red !important;
}

.overFlowX {
    overflow-x: scroll;
}

.Calendar {
    display: flex;
}

    .Calendar tr,
    .Calendar tr th {
        border: 1px solid #333 !important;
    }

#ctl00_ContentPlaceHolder1_gvwList_ctl02_imbDateIn,
#ctl00_ContentPlaceHolder1_gvwList_ctl02_imbDateOut {
    height: 24px !important;
    width: 24px !important;
    margin: 2px 0 4px 0 !important;
}

.white_content {
    position: absolute !important;
    top: 0 !important;
    left: 20% !important;
}

/*CHOOSEN DROPDOWN Start*/
.chosen-container-single .chosen-single {
    height: 24px !important;
    border: 1px solid #ccc !important;
}

.chosen-container-active .chosen-single {
    box-shadow: 0 0 4px #f5821f !important;
    border-bottom: 2px solid #f5821f !important
}

.chosen-container .chosen-results li.highlighted {
    background-color: #f5821f !important;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f5821f), color-stop(90%, #f5821f));
    background-image: -webkit-linear-gradient(#f5821f 20%, #f5821f 90%);
    background-image: -moz-linear-gradient(#f5821f 20%, #f5821f 90%);
    background-image: -o-linear-gradient(#f5821f 20%, #f5821f 90%);
    background-image: linear-gradient(#f5821f 20%, #f5821f 90%);
    color: #fff;
}

.chosen-container .chosen-results li.active-result:hover {
    background: #f5821f !important;
    color: #fff !important;
}
/*CHOOSEN DROPDOWN End*/
.style1 {
    width: 106px;
}

/*CHAT Communication CSS Start*/
.mainContainer {
    height: 90vh;
    padding: 0px;
}

.chat-panel-default {
    border: none !important;
    /*border: 1px solid #f5821f !important;*/
}

.chat-penal-head {
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat-penal-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-penal-heading-right span,
.chat-penal-heading-right span i,
.chat-penal-heading-left span,
.chat-penal-heading-left span i {
    color: #fff;
    font-size: 16px;
}

.chat-penal-head .pull-right i {
    font-size: 20px;
}

.chat-penal-heading-left {
    background: #f5821f !important;
    height: 60px !important;
    border-radius: 0px;
    border-right: 1px solid #fff !important;
    border-left: 1px solid #f5821f !important;
    border-top: 1px solid #f5821f !important;
}

.chat-penal-heading-right {
    background: #f5821f !important;
    height: 60px !important;
    border-radius: 0px;
    border-right: 1px solid #f5821f !important;
    border-top: 1px solid #f5821f !important;
}

.chat-panel-body-left {
    height: 500px;
    overflow-y: scroll;
    scrollbar-width: none;
    border-right: 1px solid #f5821f !important;
    border-left: 1px solid #f5821f !important;
    border-bottom: 1px solid #f5821f !important;
    padding: 5px !important;
}

.chat-panel-body-right {
    height: 500px;
    overflow-y: scroll;
    scrollbar-width: none;
    border-right: 1px solid #f5821f !important;
    border-bottom: 1px solid #f5821f !important;
    padding: 5px !important;
}

.chat-list-group-item {
    border: none;
    display: flex;
    justify-content: center;
    padding: 0px;
}

.chat-sidebar-form-control {
    background-color: #3f474e !important;
    border: 1px solid #56606a !important;
    color: #fff !important;
    border-radius: 4px !important;
    height: 35px !important;
    width: 100% !important;
    padding: 12px !important;
    font-size: 15px !important;
}

    .chat-sidebar-form-control:focus-visible,
    .chat-sidebar-form-control:active,
    .chat-sidebar-form-control:focus {
        border: none !important;
        outline: none !important;
    }

    .chat-sidebar-form-control::placeholder {
        color: #6c757d !important;
    }

.chat-list-group {
    background-color: #3f474e !important;
    border: 1px solid #56606a !important;
    color: #fff !important;
}

.chat-input-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

    .chat-input-group > .chatting-form-control {
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: 1%;
        margin-bottom: 2rem;
        padding: 10px;
        font-size: 12px;
    }

.chatting-form-control {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 14px !important;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    .chatting-form-control:focus-visible,
    .chatting-form-control:active,
    .chatting-form-control:focus {
        box-shadow: 0 0 4px #f5821f !important;
        border-bottom: 2px solid #f5821f !important;
        outline: none;
    }

.chat-input-group-append {
    margin-left: -1px;
}

.chat-input-group-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}
/*CHAT Communication CSS End*/

.numeric-style {
    text-align: right !important;
    float: right !important;
}

#ucGridhelper1_WebChart {
    padding-top: 34px !important;
    height: auto !important;
}

#ucGridhelper1_pnlSimple {
    padding-top: 34px !important;
}

#ucGridhelper1_CrystalReportViewer1 {
    margin-top: 34px !important;
}

.width-auto {
    padding: 4px 0 0 0 !important;
    width: auto !important;
    float: left !important;
}

.errorMsg {
    color: #ff0000 !important;
    font-weight: bold;
    font-size: 12px;
}

.txt-align {
    text-align: center;
}

/*Organogram Hierarchy CSS Start*/
.orgHeadPart {
    display: block;
    margin: 0 auto;
}

#chart-container {
    font-family: Arial;
    height: auto;
    border: 2px dashed #aaa;
    border-radius: 5px;
    overflow: auto;
    overflow-x: hidden;
    text-align: center;
}

.orgchart {
    background: transparent;
}

.orgchart .node {
    width: 150px;
}

.userName {
    margin-top: 0px;
}

.orgchart .node .title {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    /* height: 20px; */
    /* line-height: 20px; */
    overflow: hidden;
    /* text-overflow: ellipsis; */
    /* white-space: nowrap; */
    /*background: linear-gradient(#f5821f,#f5821f) !important;*/
    background: linear-gradient(#fff,#fff) !important;
    color: #f5821f !important;
    border: 1px solid #f5821f !important;
    border-radius: 4px 4px 0 0;
    min-height: 55px;
    overflow: hidden;
}

strong {
    font-weight: lighter;
    font-size: 11px;
}

.orgchart tr.lines td.leftLine {
    border-left: 1px solid #f5821f !important;
    float: none;
    border-radius: 0;
}

.orgchart tr.lines td.topLine {
    border-top: 2px solid #f5821f !important;
}

.orgchart tr.lines .downLine {
    background-color: #f5821f !important;
    margin: 0 auto;
    height: 20px;
    width: 2px;
    float: none;
}

.orgchart .verticalNodes ul > li::after, .orgchart .verticalNodes ul > li::before {
    content: '';
    position: absolute;
    left: -6px;
    border-color: #f5821f !important;
    border-style: solid;
    border-width: 0 0 2px 2px;
}

.orgchart .verticalNodes > td::before {
    content: '';
    border: 1px solid #f5821f !important;
}

.orgchart .node .content {
    padding: 5px;
    width: 100%;
    min-height: 20px;
    font-size: 11px;
    line-height: 18px;
    border: 1px solid #f5821f !important;
    border-radius: 0 0 4px 4px;
    text-align: center;
    background-color: #fff;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

#Table1 {
    display: none;
}
.orgchart .node {
    /*background-color: rgba(238, 217, 54, .4);*/
    transition: .8s;
    cursor: default;
    z-index: 20;
    border-radius: 5px;
    box-shadow: 5px 10px 20px #b7b2b2 !important;
}
.orgchart .node:hover {
    /*background-color: rgba(238, 217, 54, .4);*/
    transition: .8s;
    cursor: default;
    z-index: 20;
    border-radius: 5px;
    box-shadow: 5px 10px 20px #b7b2b2 !important;
}
.edge.fa-chevron-down:before {
    border-bottom: 1px solid #f5821f !important;
    /*border-left: 1px solid #f5821f !important;*/
    /*border-right: 1px solid #f5821f !important;*/
    border-radius: 50% !important;
    background: #fff !important;
    padding: 5px !important;
    position: relative !important;
    top: -8px !important;
}
.edge.fa-chevron-left:before {
    /*border-bottom: 1px solid #f5821f !important;*/
    border-left: 1px solid #f5821f !important;
    /*border-top: 1px solid #f5821f !important;*/
    border-radius: 50% !important;
    background: #fff !important;
    padding: 5px !important;
    position: relative !important;
    left: 3px;
}
.edge.fa-chevron-right:before {
    /*border-bottom: 1px solid #f5821f !important;*/
    /*border-top: 1px solid #f5821f !important;*/
    border-right: 1px solid #f5821f !important;
    border-radius: 50% !important;
    background: #fff !important;
    padding: 5px !important;
    position: relative !important;
    left: -9px !important;
}
.edge.fa-chevron-up:before {
    border-top: 1px solid #f5821f !important;
    /*border-left: 1px solid #f5821f !important;*/
    /*border-right: 1px solid #f5821f !important;*/
    border-radius: 50% !important;
    background: #fff !important;
    padding: 5px !important;
    position: relative !important;
    bottom: -8px;
}
/*Organogram Hierarchy CSS End*/
.d-flex2 {
    display: flex;
}
.ImgStandard {
    width: 24px !important;
    height: 24px !important;
    margin: 2px 0 4px 0 !important;
}

.StandardDateWidth {
    width: 75px !important;
}
.StandardTimeWidth {
    width: 45px !important;
}