/*
 * Skin: Blue
 * ----------
 */

:root {
    --body-color: #F0F0F4;
    --main-sidebar: #ffffff;
    --main-color: #333333;
    --link-color: #0069bb;
    --title-color: #333;
    --td-even-bgcolor: #fff;
    --td-odd-bgcolor: #F5F5F9;
    --table-link-color: #0069bb;
    --table-border: #ddd;
    --table-th: #fff;
    --td-filter-bgcolor: #efefef;
    --tfoot-color: #eee;
    --td-sort-bgcolor: #555;
    --panel-bgcolor: #3795EB;
    --tab-pane-bgcolor: #f7f7f7;
}

.dark {
    --body-color: #444;
    --main-sidebar: #333333;
    --main-color: #ffffff;
    --link-color: #ffffff;
    --title-color: #fff;
    --td-even-bgcolor: #444;
    --td-odd-bgcolor: #333333f0;
    --table-link-color: #fff;
    --table-border: #4a4a4a;
    --table-th: #333;
    --td-filter-bgcolor: #666;
    --tfoot-color: #4a4a4a;
    --td-sort-bgcolor: #555;
    --panel-bgcolor: #333;
    --tab-pane-bgcolor: #505050;
}


/* Date picker */

.dark .ui-datepicker.ui-widget-content {
    background: #555;
    border: none;
}

    .dark .ui-datepicker .ui-datepicker-header {
        background: #333;
        border: none;
    }

.dark .ui-datepicker th {
        color: #fff;
}


    .dark .ui-datepicker .ui-state-default,
    .dark .ui-datepicker .ui-widget-content .ui-state-default,
    .dark .ui-datepicker .ui-widget-header .ui-state-default,
    .dark .ui-datepicker .ui-button,
    html .dark .ui-datepicker .ui-button.ui-state-disabled:hover,
    html .dark .ui-datepicker .ui-button.ui-state-disabled:active {
        border: 1px solid #3f3f3f;
        background: #3f3f3f;
        color: #fff;
    }

    .dark .ui-datepicker .ui-state-active,
    .dark .ui-datepicker .ui-state-hover,
    .dark .ui-datepicker .ui-state-highlight,
    .dark .ui-datepicker .ui-widget-content .ui-state-highlight,
    .dark .ui-datepicker .ui-widget-header .ui-state-highlight {
        background: #fff;
        color: #333;
    }

    .table {
        margin: 0;
    }

.skin-blue.dark input, .skin-blue.dark select {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid #fff;
}
.nav-tabs {
    margin: 30px 0 0 0;
}
    .nav-tabs > li > a:hover,
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
        background: var(--tab-pane-bgcolor);
        border: none;
        color: var(--title-color);
    }

    .nav-tabs > li {
        margin-bottom: -3px;
    }
    .nav-tabs > li > a {
        background: transparent;
        color: var(--link-color);
    }

.tab-pane {
    background: var(--tab-pane-bgcolor);
    padding: 0 20px;
}


.panel-primary > .panel-heading,
.panel-primary {
    border-color: var(--panel-bgcolor);
}
.panel,
.panel-primary > .panel-heading {
    background: var(--panel-bgcolor);
}

.tablesorter-bootstrap > tbody > tr td.primary,
.tablesorter-bootstrap > tbody > tr.even td.primary {
    background: var(--td-sort-bgcolor);
}

.tablesorter .tablesorter-filter-row td {
    background: var(--td-filter-bgcolor);
}

.tablesorter-bootstrap tfoot td, .tablesorter-bootstrap tfoot th, .tablesorter-bootstrap thead td, .tablesorter-bootstrap thead th {
    background: var(--tfoot-color);
}

.tablesorter-bootstrap > tbody > tr.even:hover > td,
.tablesorter-bootstrap > tbody > tr.hover > td,
.tablesorter-bootstrap > tbody > tr.odd:hover > td,
.tablesorter-bootstrap > tbody > tr.tablesorter-hasChildRow.even:hover ~ .tablesorter-childRow.even > td,
.tablesorter-bootstrap > tbody > tr.tablesorter-hasChildRow.odd:hover ~ .tablesorter-childRow.odd > td {
    background: var(--td-even-bgcolor);
}


.content-wrapper, .right-side, .content {
    background: var(--body-color);
    color: var(--title-color);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--title-color);
}

.dark .table, .dark table {
    color: var(--title-color);
    background: transparent;
}

.table, table {
    color: var(--title-color);
    background: #fff;
}

.skin-blue.dark .table a {
    text-decoration: underline;
    color: var(--table-link-color);
}

.skin-blue.dark .table a:hover {
    text-decoration: none;
    color: var(--table-link-color);
}

.table.tablesorter thead tr th,
.table.tablesorter tfoot tr th {
    color: var(--title-color);
    background: var(--table-th);
}

table.tablesorter thead tr th,
table.tablesorter tfoot tr th,
.table > thead > tr > th, .table > tbody > tr > th,
.table > tfoot > tr > th, .table > thead > tr > td,
.table > tbody > tr > td, .table > tfoot > tr > td {
    border: 1px solid var(--table-border) !important;
}

.skin-blue table.tablesorter tbody .odd td {
    background: var(--td-odd-bgcolor);
    color: var(--title-color);
}

table.tablesorter tbody td,
.tablesorter-bootstrap > tbody > tr.even > td,
.tablesorter-bootstrap > tbody > tr.tablesorter-hasChildRow.even:hover ~ tr.tablesorter-hasChildRow.even ~ .tablesorter-childRow.even > td {
    background: var(--td-even-bgcolor) !important;
    color: var(--title-color) !important;
}
.dark .main-sidebar .darkmode {
    display: none;
}
.dark .main-sidebar .lightmode {
        display: block;
}

.main-sidebar .darkmode {
        display: block;
}

.main-sidebar .lightmode {
        display: none;
 }

.skin-blue a,
.skin-blue a:hover {
    color: var(--link-color);
}
.skin-blue a:hover {
    text-decoration: underline;
}

.sticky {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 9999;
}
.skin-blue.sidebar-mini .sidebar-menu {
    overflow-y: auto;
    height: calc(100vh - 110px);
}

.skin-blue.sidebar-mini.sidebar-collapse .sidebar-menu {
    overflow-y: inherit;
    height: inherit;
}

.skin-blue .sidebar-menu > li:hover > a {
    color: var( --main-sidebar );
    background-color: var( --main-color );
}

.skin-blue .main-sidebar .treeview.active .pull-right {
    transform: scaleY(-1);
}


@media (min-width: 768px) {
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
        color: var( --main-sidebar );
        background-color: var( --main-color );
        border-bottom: none;
    }
    .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
        padding-bottom: 0;
        padding-top: 0;
    }
}

    .skin-blue .main-header .navbar {
        background-color: #3c8dbc;
    }

        .skin-blue .main-header .navbar .nav > li > a {
            color: #ffffff;
        }

            .skin-blue .main-header .navbar .nav > li > a:hover,
            .skin-blue .main-header .navbar .nav > li > a:active,
            .skin-blue .main-header .navbar .nav > li > a:focus,
            .skin-blue .main-header .navbar .nav .open > a,
            .skin-blue .main-header .navbar .nav .open > a:hover,
            .skin-blue .main-header .navbar .nav .open > a:focus,
            .skin-blue .main-header .navbar .nav > .active > a {
                background: rgba(0, 0, 0, 0.1);
                color: #f6f6f6;
            }

        .skin-blue .main-header .navbar .sidebar-toggle {
            color: #ffffff;
        }

            .skin-blue .main-header .navbar .sidebar-toggle:hover {
                color: #f6f6f6;
                background: rgba(0, 0, 0, 0.1);
            }

        .skin-blue .main-header .navbar .sidebar-toggle {
            color: #fff;
        }

            .skin-blue .main-header .navbar .sidebar-toggle:hover {
                background-color: #367fa9;
            }

@media (min-width: 768px) {
    .skin-blue .sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.treeview) > a > span {
        border-bottom: none;
    }
    .skin-blue.sidebar-collapse .sidebar-menu li:hover > a > .pull-right-container {
        width: 0 !important;
        height: 0 !important;
        z-index: -1;
    }
}
@media (max-width: 767px) {
    .skin-blue .main-header .navbar .dropdown-menu li.divider {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .skin-blue .main-header .navbar .dropdown-menu li a {
        color: #fff;
    }

    .skin-blue .main-header .navbar .dropdown-menu li a:hover {
        background: #367fa9;
     }
}

    .skin-blue .main-header li.user-header {
        background-color: #3c8dbc;
    }

    .skin-blue .content-header {
        background: transparent;
    }

    .skin-blue .wrapper,
    .skin-blue .left-side {
        background-color: #ffffff;
        /*border-right:1px solid #122253;*/
    }

    .main-sidebar {
        background: var(--main-sidebar);
    }

    .skin-blue .user-panel > .info,
    .skin-blue .user-panel > .info > a {
        color: var( --main-color );
    }

    .skin-blue .sidebar-menu > li.header {
        color: var(--main-sidebar);
        background: var(--main-color);
    }

    .skin-blue .sidebar-menu > li > a {
        border-left: 3px solid transparent;
        /*border-top: 1px solid transparent;*/
        border-right: none;
    }
    /*.skin-blue .sidebar-menu > li:hover > a,*/
    .skin-blue .sidebar-menu > li.active > a {
        color: var(--main-sidebar);
        background: var(--main-color);
        /*border-left-color: #3c8dbc;*/
    }

    .skin-blue .sidebar-menu > li > .treeview-menu {
        margin: 0 0px;
        /*background: #FFFFFF;*/
        background: #dddddd;
        color: #ffffff;
        /*border-bottom: 1px solid #122253;
        border-right: 1px solid #122253;*/
    }

    .skin-blue .sidebar a {
        color: var(--main-color);
    }


.skin-blue .treeview-menu > li > a {
    background: #dddddd;
    color: #333333;
}

    .skin-blue  .sidebar-menu .treeview-menu {
        padding-left: 0;
    }

    .skin-blue .treeview-menu > li.active > a,
    .skin-blue .treeview-menu > li > a:hover {
        color: #333333;
    }

    .skin-blue .sidebar-form {
        border-radius: 3px;
        border: 1px solid #374850;
        margin: 10px 10px;
    }

        .skin-blue .sidebar-form input[type="text"],
        .skin-blue .sidebar-form .btn {
            box-shadow: none;
            background-color: #374850;
            border: 1px solid transparent;
            height: 35px;
        }

        .skin-blue .sidebar-form input[type="text"] {
            color: #666;
            border-top-left-radius: 2px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 2px;
        }

        .skin-blue .sidebar-form input[type="text"]:focus,
        .skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
                background-color: #fff;
                color: #666;
        }

        .skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
            border-left-color: #fff;
        }

        .skin-blue .sidebar-form .btn {
            color: #999;
            border-top-left-radius: 0;
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
            border-bottom-left-radius: 0;
        }


.content {
    padding: 30px 30px;
    padding-left: 30px;
    padding-right: 30px;
}
@media (min-width: 768px) {
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span {
        padding: 12px 5px 12px 15px;
        line-height: 1;
    }
}


/*.skin-blue .form-horizontal {
    max-width: 800px;
}*/
/*.skin-blue .form-horizontal .row:first-child {
    display: flex;
}

@media (min-width: 992px) {
    .skin-blue .form-horizontal .col-md-6 {
        float: inherit;
    }
}*/
    /*.skin-blue .sidebar-menu li > a:hover {
    border-top: 1px solid #122253; test
}*/

.dark div[contenteditable=true] {
    background-color: #9e9e9e;
    color: #333;
}

.dark .columnSelector {
    background: #333;
    border: 1px solid #333;
}


/*
#histories .buttons,
#comments .buttons,
#details .buttons {
    position: fixed;
    top: 0;
    right: 0;
    background: #f7f7f7;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    z-index: 999;
    padding: 10px;
    border-bottom: 1px solid #f0f0f4;
}
.dark #histories .buttons,
.dark #comments .buttons,
.dark #details .buttons {
    background: #525252;
    border-bottom: 1px solid #444;
}


#histories .buttons button,
#comments .buttons button,
#details .buttons button {
    padding: 0;
    background: transparent;
    font-weight: bold;
}

#histories .content,
#comments .content,
#details .content {
    padding: 75px;
}

#histories .buttons .btn-success,
#comments .buttons .btn-success,
#details .buttons .btn-success {
    color: #7BC253;
}

#histories .buttons .btn-info,
#comments .buttons .btn-info,
#details .buttons .btn-info {
    color: #3795EB;
}

#histories .buttons .btn-danger,
#comments .buttons .btn-danger,
#details .buttons .btn-danger {
    color: #E84C1C;
}
*/