/* This CSS file is used to style the interface. EJS variables are used to make editing colors easier */

.content-wrapper {

}

.btn-primary {
background-color: #55c8e8;
border-color: #55c8e8;
}
.box.box-info {
border-top-color: #55c8e8 !important;
}

.box.box-primary {
border-top-color: #55c8e8 !important;
}
.skin .main-header .navbar {
/*background-color: #10529f*/
background-color: #191b22
}
.skin .main-header .navbar .nav>li>a {
color: #fff
}

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

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

.skin .main-header .navbar .sidebar-toggle:hover {
color: #f6f6f6;
background: #101216
}

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

.skin .main-header .navbar .sidebar-toggle:hover {
background-color: #101216
}

@media (max-width:767px) {
.skin .main-header .navbar .dropdown-menu li.divider {
background-color: rgba(255,255,255,0.1)
}

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

.skin .main-header .navbar .dropdown-menu li a:hover {
background: #101216
}
}

.skin .main-header .logo {
/*background-color: #0e4688;*/
background-color: #55c8e8;
color: #fff;
border-bottom: 0 solid transparent
}

.skin .main-header .logo:hover {
background-color: #191b22
}

.skin .main-header li.user-header {
background-color: #191b22
}

.skin .content-header {
background: transparent
}

.skin .wrapper,.skin .main-sidebar,.skin .left-side {
/*background-color: #191b22*/
background-color: #191b22;
}

.skin .user-panel>.info,
.skin .user-panel>.info>a {
    color: #fff
}

.skin .sidebar-menu>li.header {
color: #c9ccce;
/*    background: #101216;*/
background: #101216;

}

.skin .sidebar-menu>li>a {
    border-left: 3px solid transparent
}

.skin .sidebar-menu>li:hover>a,
.skin .sidebar-menu>li.active>a,
.skin .sidebar-menu>li.menu-open>a {
    color: #fff;
    background: #15161c;
    background: #1c1d23;
}

.skin .sidebar-menu>li.active>a {
border-left-color: #101216
}

.skin .sidebar-menu>li>.treeview-menu {
    margin: 0 1px;
    background: #242731
}

.skin .sidebar a {
    color: #abb0c2
}

.skin .sidebar a:hover {
    text-decoration: none
}

.skin .sidebar-menu .treeview-menu>li>a {
    color: #7f87a1
}

.skin .sidebar-menu .treeview-menu>li.active>a,
.skin .sidebar-menu .treeview-menu>li>a:hover {
    color: #fff
}

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

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

.skin .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 .sidebar-form input[type="text"]:focus,
.skin .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
    background-color: #fff;
    color: #666
}

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

.skin .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
}

.skin.layout-top-nav .main-header>.logo {
background-color: #101216
color: #fff;
border-bottom: 0 solid transparent
}

.skin.layout-top-nav .main-header>.logo:hover {
background-color: #101216
}

.abcRioButtonLightBlue {
    margin: 0px auto;
}

hr {
    padding-left: 1px;
}

code {
    background-color: #eef1f6;
    color: #596981;
    border-radius: 2px;
    padding-left: 4px;
    padding-right: 4px;
    line-height: 1.4;
    font-size: 85%;
    border: 1px solid rgba(0, 0, 0, .1);
    display: inline-block;
}

.loginbox {
    padding-top: 20em;

}

.paymentbutton {
    height: 36px;
    cursor: pointer;
    padding-left: 5px;
}

.bancontactbutton {
    border: 1px solid black;
    border-radius: 5px;
    margin-left: 5px;
}

.paymentbutton-invoice {
    height: 30px;
    cursor: pointer;
    padding-left: 5px;
}

.bancontactbutton-invoice {
    border: 1px solid black;
    border-radius: 5px;
    margin-left: 5px;
}

.invoice-row>td {
    vertical-align: middle !important;
}

.btn-margin-top {
    margin-top: 3px;
}

.ticket-username {
    color: black;
}

.productpage .select2-container--default .select2-selection--single {
    / / border: none;
    border-radius: 0px;
}

.productpage .select2-container .select2-selection--single {
    height: 34px;
}

/* Proxmox module specific styles */
.proxmoxmodule .dl-horizontal dt {
    text-align: left;
    margin-left: 1em;
}

.proxmoxmodule .btn-app {
    min-width: 75px;
}

/* Login box */
.loginbox {
    padding-top: 20em;

}

.registerpage .loginbox {
    padding-top: 150px
}

/* Custom styles for the chat interface */
.direct-chat-msg {
    margin-bottom: 50px;
    width: 40%;
    margin-right: 55%;
    padding-right: 0px;
    float: left;
}

@media (max-width: 768px) {
    .direct-chat-msg {
        width: 90%;
    }

    .direct-chat-messages {
        overflow-x: hidden;
    }

}


.direct-chat-msg.right {
    float: right;
    margin-right: unset;
    margin-left: 55%
}


.direct-chat-text {
    white-space: pre-line;
    min-height: 80px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Oxxa page */
/* Subtle zebra striping to improve row tracking */
.oxxapage .row-even {
    background-color: rgba(255, 255, 255, 0.95);
}

.oxxapage .row-odd {
    background-color: rgba(247, 249, 252, 0.95);
}

.oxxapage .row-even:hover,
.row-odd:hover {
    background-color: #eef3f8;
}

.oxxapage .table.no-margin td,
.table.no-margin th {
    border-top: 1px solid #e6e6e6;
}

/* Dark mode adjustments (skin-midnight) */
body.skin-midnight .oxxapage .row-even {
    background-color: rgba(46, 52, 64, 0.55);
}

body.skin-midnight .oxxapage .row-odd {
    background-color: rgba(34, 38, 49, 0.55);
}

body.skin-midnight .oxxapage .row-even:hover,
body.skin-midnight .oxxapage .row-odd:hover {
    background-color: rgba(62, 68, 80, 0.75);
}

body.skin-midnight .oxxapage .table.no-margin td,
body.skin-midnight .oxxapage .table.no-margin th {
    border-top: 1px solid #3a3f44;
}

/* New payment page adjustments */
.newitempage .select2-container--default .select2-selection--single {
    border-radius: 0px;
}

.newitempage .select2-container .select2-selection--single {
    height: 34px;
}

/* Login page */
.loginpage .abcRioButtonLightBlue {
    margin: 0px auto;
}

.loginpage .g_id_signin {
    padding-bottom: 20px;
}
/* Cart page */
.cartpage .alertholder .alert {
    margin: auto !important;
}

.cartpage .alertholder .icon {
    color: white;
}