@charset "ISO-8859-1";
:root {
    --col: 210;
}

body {
    background: hsl(var(--col), 100%, 96%);
    /* background-image: url(img/drible-darkgreen.png); */
    height: 100%;
}

a {
    color: #455a74;
}

a:hover,
a:focus,
a:active {
    color: #ff9044;
}

a .cmsm {
    color: hsl(var(--col), 100%, 85%);
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: hsl(var(--col), 85%, 80%);
}

.bg-fanta {
    background-color: #ff7050;
    color: #fff;
}

.bgline-warning {
    background-color: #ffffff;
    background-image: linear-gradient( 135deg, #ffae0040 10%, transparent 0, transparent 50%, #ffbe0052 0, #ffae0040 60%, transparent 0, transparent);
    background-size: 7.07px 7.07px;
}

.bgline-danger {
    background-color: #ffe7e780;
    background-image: linear-gradient( 135deg, #ff000040 10%, transparent 0, transparent 50%, #ff000029 0, #ff67002b 60%, transparent 0, #ff545400);
    background-size: 7.07px 7.07px;
}

.main-header {
    display: flex;
    gap: 0px;
    height: 42px;
    width: 100vw;
    background-color: hsl(var(--col), 70%, 25%);
}

.header-logo {
    font-size: 25px;
    padding: 0px 10px;
    color: #fff;
    align-self: center;
    background: #ff6f00;
}

.margin-right {
    float: right;
}

.navbar-collapse {
    padding-left: 0px;
}

.main-header .admin-status .btn-default {
    padding-left: 10px;
    padding-right: 10px;
    border: none;
    background: none;
    color: hsl(var(--col), 60%, 70%);
}

.navbar {
    margin-bottom: 0px;
}

.navbar-nav>li>a {
    padding-top: 9px;
    padding-bottom: 9px;
    color: hsl(var(--col), 60%, 70%);
}


.nav>li>a:hover,
.nav>li>a:focus {
    background: hsl(var(--col), 35%, 44%);
}
.nav>li.active>a{
    background: #295e91;
    color: #fff;
}


.navbar-nav>li.active>a {
    background: hsl(var(--col), 60%, 30%);
    color: #fff;
}

.nav .open>a,
.nav .open>a,
.nav .open>a:hover,
.nav .open>a:focus {
    background: hsl(var(--col), 60%, 25%);
    border-color: hsl(var(--col), 60%, 25%);
}

.nav .open>.dropdown-menu {
    background-color: hsl(var(--col), 70%, 20%);
}

.nav .open>.dropdown-menu>li>a {
    color: hsl(var(--col), 100%, 80%);
    padding: 8px 20px;
}

.nav .open>.dropdown-menu>li>a:hover {
    background: hsl(var(--col), 60%, 25%);
}

.dark.btn-default {
    background: #333333;
    color: #999;
    border: 1px solid #222;
}

.dark.btn-default:hover,
.dark.btn-default:focus,
.dark.btn-default:active {
    background: #555555;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
    border: 1px solid #222;
}

.dark.admin-status .btn-default:hover span,
.dark.admin-status .dropdown:hover span {
    /* color:#ff6c60; */
    color: #ffaa33;
}

.dark .nav-tabs {
    background: #394348;
    border-bottom: 3px solid #8c8c8c;
}

.dark .nav-tabs a {
    font-size: 14px;
    background: #596569;
    color: #a5b3ba;
    border-bottom: 1px solid #596569;
}

.dark .nav-tabs a:hover,
.dark .nav-tabs a:focus {
    background: #555555;
    border-color: #555555;
    border-bottom: 1px solid #8c8c8c;
}

.dark .nav-tabs .active a,
.dark .nav-tabs .active a:hover,
.dark .nav-tabs .active a:focus {
    background: #8c8c8c;
    color: #222;
    border-color: #8c8c8c;
}

.main-nav .navbar-default {
    border-radius: 0px;
}

.dark .navbar-default {
    background: #8c8c8c;
    border-color: #8c8c8c;
    border-bottom: 3px solid #ff8000;
}

.dark ul.nav.navbar-nav li a {
    font-size: 14px;
    color: #fff;
}

.dark ul.nav.navbar-nav li a:hover,
.dark ul.nav.navbar-nav li a:focus {
    /* background:#A5B3BA; */
}

.dark .navbar-default .navbar-nav>.open>a,
.dark .navbar-default .navbar-nav>.open>a:hover,
.dark .navbar-default .navbar-nav>.open>a:focus {
    background: none;
    color: #fff;
}

.nav-pills .nav-link {
    border-radius: 0;
}

.dark .nav-link {
    color: hsl(var(--col), 100%, 80%);
}

.dark .nav-link:focus,
.nav-link:hover {
    color: #fff;
}

.list-title {
    display: table-cell;
    font-size: 18px;
    color: hsl(var(--col), 50%, 50%);
    vertical-align: top;
}

.list-title .custom,
.list-title .glyphicon {
    font-size: 24px;
    color: hsl(var(--col), 25%, 70%);
    padding-right: 8px;
    margin-right: 3px;
    border-right: 1px solid #ddd;
    cursor: pointer;
}

.list-title .glyphicon:hover,
.list-title .glyphicon:focus {
    color: hsl(var(--col), 50%, 50%);
}

.list-title .title {
    display: block;
    margin: 2px 5px;
}

.table {
    --bs-table-striped-bg: tranparent;
}

.table-striped>tbody>tr:nth-child(odd)>th {}

.toprow {
    display: block;
    left: 50%;
    bottom: 0;
    margin-left: -7px;
    width: 14px;
    position: absolute;
    /* border-bottom:8px solid #B3FF60;
	border-left:7px solid rgba(136,148,131,0);
	border-right:7px solid rgba(136,148,131,0); */
}

.dark .dropdown-menu {
    /* background: hsl(var(--col), 75%, 20%); */
    border-color: #fff;
    border: none;
    border-radius: 0px;
}

.topnav .dropdown-menu {
    border: 1px solid hsl(var(--col), 35%, 80%);
    border-radius: 0 0 5px 5px !important;
    margin-top: -1px !important;
    margin-left: -1px !important;
    border-top: 0;
    padding:0;
    min-width: 101%;
}

.dark ul.dropdown-menu>li>a {
    padding: 5px 20px;
    white-space:nowrap;
    /* color: hsl(var(--col), 100%, 85%); !important; */
    border:0;
    border-top: 1px solid #295e9121;
}

.dark ul.dropdown-menu>li>a:hover,
.dark ul.dropdown-menu>li>a:focus {
    background: hsl(var(--col), 56%, 36%);
    color: #fff !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background: hsl(var(--col), 80%, 50%);
}

.dark ul.dropdown-menu.top-row {
    margin-top: 6px;
    border: 1px solid #888;
}

.dark .dropdown-menu.top-row:before {
    top: -9px;
    right: 6px;
    content: "";
    display: inline-block;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #ccc;
    border-top: 0;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    position: absolute;
}

.dark .dropdown-menu.top-row:after {
    top: -7px;
    right: 7px;
    content: "";
    display: inline-block;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
    border-top: 0;
    position: absolute;
}

.main-content {
    /* min-height: 600px; */
    position: relative;
}


/* .dark.panel-default{
	background-color: #2d3438;
	border-color: #2d3438;

} */

.dark.panel-default {
    background-color: rgba(31, 38, 37, 0.59);
    border-color: #141d1b;
}

.dark.panel-heading {
    background-color: #2d3438;
    border-color: #2d3438;
    border-radius: 0;
    color: #bbb;
}

.dark.btn:hover,
.btn:focus {
    color: #b5c3ca;
}


/* primary #3F908A #1F706A ---spot #FF7060 --- #d0dfe6 #B5C3CA #A5B3BA #8c8c8c #697579  #596569 #555555 #394348 #313B3E #303030 #151D20 #11181A #0D1416  */

.listing th {
    text-align: center;
}

.table td {
    text-align: left;
    font-size: 14px;
    vertical-align: middle;
}

.table td.right,
.table th.right {
    text-align: right;
}

.table td.center,
.table th.center {
    text-align: center;
}

.update td {
    white-space: nowrap;
    background-color: hsl(var(--col), 100%, 96%);
}

.detail td {
    /* background: #f2f2f2; */
}

.update td.lable,
.detail td.no,
.detail td.lable,
.detail td.no,
.update tbody>tr>td.no {
    white-space: nowrap;
    background: #e0effe;
    /* text-align: right; */
    color: #666;
    /* padding: 12px 6px; */
}

.form-control {
    border: 1px solid hsl(var(--col), 100%, 80%);
}

.pagination>li>a,
.pagination>li>span {
    color: hsl(var(--col), 50%, 40%);
    text-decoration: none;
    display: inline-block;
    padding: 2px 10px;
    margin-left: -1px;
    border: 1px solid #f0f0f0;
    background: #fff6;
    font-size: 1rem;
}

.pagination>li>a span {
    color: hsl(var(--col), 60%, 50%);
    font-size: 12px;
}

.pagination>li>a:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>span:focus {
    color: hsl(var(--col), 60%, 50%);
}

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    background-color: hsl(var(--col), 100%, 95%);
    border-color: hsl(var(--col), 85%, 85%);
    color: hsl(var(--col), 50%, 40%);
}

.pagination>li>a,
.pagination>li>span {
    border-color: hsl(var(--col), 50%, 80%);
}

.pagination>li>a:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>span:focus {
    color: hsl(var(--col), 50%, 40%);
    background-color: hsl(var(--col), 97%, 97%);
    border-color: hsl(var(--col), 90%, 90%);
}

#modal-alert .modal-footer {
    padding: 4px 10px;
}

.panel-heading .btn,
.panel-footer .btn {
    /* border-radius:17px; */
}

.btn-primary {
    color: #fff;
    background-color: hsl(var(--col), 80%, 50%);
    border-color: hsl(var(--col), 80%, 60%);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: hsl(var(--col), 70%, 30%);
    border-color: hsl(var(--col), 70%, 30%);
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
    outline: none !important;
}

.btn-clear {
    margin: 3px 8px;
    background: transparent;
    border: none;
    color: hsl(var(--col), 50%, 80%);
}

.btn-clear:hover {
    color: #fff;
}

.form-control {
    border-radius: 2px;
}

input {
    border: 1px solid #aaa;
}

.btn:focus,
.btn:active,
input,
.btn:target,
.form-control:focus,
.select2-selection:focus {
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 1%), 0 0 8px rgb(152 183 105 / 0%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 1%), 0 0 8px rgb(152 183 105 / 0%);
}

.panel {
    border-radius: 3px;
    border: 0;
    background: #fff;
}

.panel-default {
    border-color: hsl(var(--col), 90%, 90%);
}

.panel-heading {
    text-align: left;
    padding: 2px 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 0;
}

.panel-default>.panel-heading {
    color: #333;
    background-color: hsl(var(--col), 58%, 85%);
    border-color: hsl(var(--col), 85%, 85%);
}

.panel-footer {
    padding: 10px;
    background-color: hsl(var(--col), 58%, 85%);
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.panel-body {
    padding: 0px;
    background: transparent;
}

.panel-body table {
    margin-bottom: 0;
    border: 0px solid hsl(var(--col), 100%, 90%);
}

.panel-body table tr th {
    margin-bottom: 10px !important;
    color: hsl(var(--col), 60%, 40%);
    font-weight: normal;
}

.panel-body table tr:hover td {
    background: hsl(var(--col), 100%, 98%);
}

.panel-heading .breadcrumb {
    margin: 0;
    padding: 3px 0;
    font-size: 16px;
}

.panel-heading .breadcrumb a {
    text-decoration: none;
}

.header-color{
    color: #638eb7!important;
}

.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>td {
    border: 1px solid hsl(var(--col), 50%, 90%);
}

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
    background-color: hsl(var(--col), 97%, 98%);
}

.table-striped>tbody>tr>th {
    background-color: hsl(var(--col), 90%, 94%) !important;
    border-top: 1px solid hsl(var(--col), 80%, 85%);
    border-bottom: 1px solid hsl(var(--col), 80%, 85%);
    color: hsl(var(--col), 30%, 40%);
    font-weight: 500;
    font-size: .9rem;
    white-space: nowrap;
}

.breadcrumb>li+li:before {
    padding: 0 5px;
    color: #ddd;
    font-size: 20px;
    content: "|";
}

.btn-group.action span {
    color: hsl(var(--col), 30%, 60%);
    font-size: 16px;
}

.btn-group.action .btn {
    padding: 4px 12px;
    white-space: nowrap;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open>.dropdown-toggle.btn-default {
    color: hsl(var(--col), 50%, 50%);
    background-color: hsl(var(--col), 100%, 95%);
    border-color: hsl(var(--col), 85%, 85%);
}

.btn-group.action .btn-xs {
    padding: 4px 8px;
}

.bs-tooltip-inner {
    background-color: #206070;
}

.bs-tooltip.top .bs-tooltip-arrow {
    border-top-color: #206070;
}

.bs-tooltip.top-left .bs-tooltip-arrow {
    border-top-color: #206070;
}

.bs-tooltip.top-right .bs-tooltip-arrow {
    border-top-color: #206070;
}

.bs-tooltip.right .bs-tooltip-arrow {
    border-right-color: #206070;
}

.bs-tooltip.left .bs-tooltip-arrow {
    border-left-color: #206070;
}

.bs-tooltip.bottom .bs-tooltip-arrow {
    border-bottom-color: #206070;
}

.bs-tooltip.bottom-left .bs-tooltip-arrow {
    border-bottom-color: #206070;
}

.bs-tooltip.bottom-right .bs-tooltip-arrow {
    border-bottom-color: #206070;
}

.input-group-addon {
    padding: 6px 10px;
}

.dropdown-menu.set_time {
    width: 218px;
    white-space: normal;
    padding: 6px;
    margin-left: 22px;
    border-radius: 0;
}

.dropdown-menu.set_time:before {
    top: -7px;
    left: 96px;
    content: "";
    display: inline-block;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-top: 0;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    position: absolute;
}

.dropdown-menu.set_time:after {
    top: -5px;
    left: 97px;
    content: "";
    display: inline-block;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-top: 0;
    position: absolute;
}

.dropdown-menu.set_time span {
    display: inline-block;
    width: 36px;
    margin: -1px;
    border-radius: 0;
    border-color: #eee;
}

.dropdown-menu .hour:before {
    display: block;
    content: "Hour";
    text-align: center;
    padding: 3px 0;
    color: #1f706a;
    background: #f6f6f6;
}

.dropdown-menu .hour:after {
    display: block;
    content: "Minute";
    text-align: center;
    padding: 3px 0;
    margin-top: 10px;
    background: #f6f6f6;
    color: #1f706a;
}

.dropdown-menu .ampm {
    background: #f6f6f6;
    margin-top: 10px;
    padding: 8px 15px;
}

.ulbox .libox {
    display: block;
    padding: 10px;
}

.main-footer {
    position: relative;
    padding: 10px;
    /* width: 200px; */
    /* margin-left:-100px; */
    margin: 10px auto;
    text-align: center;
    color: #596569;
    font-size: 12px;
    /* left:50% */
}

.alert-danger {
    color: #c00400;
    background-color: #fff2e8;
    border-color: #ffab92;
}

.breadcrumb {
    background: none;
}

.dark.panel-default>.panel-heading {
    /*  color: #333; */
    /* background-color: #2d373c; */
}

.breadcrumb>.active {
    color: #aaa;
}

.breadcrumb>li+li:before {
    color: #666;
}

.close {
    float: right;
    font-size: 24px;
    line-height: 1;
    color: #777;
    filter: alpha(opacity=20);
    opacity: 0.6;
    font-weight: normal;
    text-shadow: none;
    text-decoration: none;
}

.nav-tabs>li>a {
    border: 0;
}

@media (min-width: 768px) {
    .navbar-nav.navbar-right:last-child {
        margin-right: 0px;
    }
}