/** 
*
* Vesta Web Interface
*
* Copyright (C) 2020 Carter Roeser <carter@cdgtech.one>
* https://cdgco.github.io/VestaWebInterface
*
* Vesta Web Interface is free software: you can redistribute it and/or modify
* it under the terms of version 3 of the GNU General Public License as published 
* by the Free Software Foundation.
*
* Vesta Web Interface is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
* 
* You should have received a copy of the GNU General Public License
* along with Vesta Web Interface.  If not, see
* <https://github.com/cdgco/VestaWebInterface/blob/master/LICENSE>.
*
*/

@import url(https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900);

:root {
    
    /* Theme Colors */
    --main-theme-color: #597480;
    --secondary-theme-color: #242b3c;
    
    --white: #fff;
    --black: #000;
        
    --other-one: #8a8e92;
    --other-two: #0c0c0c;
    --other-three: #01c0c8;
    --other-four: #54667a;
    --other-five: #dedede;
    --other-six: #597480;
    --other-seven: #c2c5ce;
    --other-eight: #b5b5b5;
    --other-nine: #a1a5a9;
    --other-ten: #7b8f98;
    --other-eleven: #727373;
    --other-twelve: #707cd2;
    --other-thirteen: #d0d0d0;
    --other-fourteen: #565961;
    --other-fifteen: #a8adab;
    --other-sixteen: #f9f9f9;
    
    --success: #45b97f;
    --danger: #bf5d5d;
    --warning: #cc8f38;
    --info: #2c84ab;
    --purple: #4a5398;
    --inverse: #6d788a;
    --default: #8a8e92;
    
}

.preloader {
    background: var(--secondary-theme-color);
}
body {
    background: var(--other-two) !important;
}
.logo i {
  color: var(--white);
}
.theme-color {
  color: var(--main-theme-color);
}
.navbar-header {
  background: var(--main-theme-color);
}
.navbar-top-links > li > a {
  color: var(--white);
}
.right-sidebar .rpanel-title {
  background: var(--main-theme-color);
}
.bg-title .breadcrumb .active {
  color: var(--main-theme-color);
}
.sidebar {
  background: var(--secondary-theme-color);
  box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
}
.sidebar .label-custom {
  background: var(--other-three);
}
#side-menu li a {
  color: var(--other-one);
}
#side-menu li a {
  color: var(--other-one);
  border-left: 0px solid var(--white);
}
#side-menu > li > a:hover,
#side-menu > li > a:focus {
  background: rgba(0, 0, 0, 0.07);
}
#side-menu > li > a.active {
  background: var(--main-theme-color);
  color: var(--white);
  font-weight: 500;
}
#side-menu ul > li > a:hover {
  color: var(--main-theme-color);
}
#side-menu ul > li > a.active {
  color: var(--main-theme-color);
  font-weight: 500;
}
.user-profile .user-pro-body .u-dropdown {
  color: var(--other-four);
}
.color-button,
.color-button.disabled {
    background: var(--main-theme-color);
    color: var(--black) !important;
    border: 1px solid var(--main-theme-color);
}
.color-button:hover,
.color-button.disabled:hover,
.color-button:focus,
.color-button.disabled:focus,
.color-button.focus,
.color-button.disabled.focus {
    color: var(--white) !important;
    border: 1px solid var(--main-theme-color);
  background: var(--main-theme-color);
  opacity: 0.8;
}
.bg-theme {
  background-color: var(--main-theme-color) !important;
}
.bg-theme-dark {
  background-color: var(--main-theme-color) !important;
}
.btn-custom {
  background: var(--main-theme-color);
  border: 1px solid var(--main-theme-color);
  color: var(--white);
}
.btn-custom:hover {
  background: var(--main-theme-color);
  opacity: 0.8;
  color: var(--white);
  border: 1px solid var(--main-theme-color);
}
.customtab li.active a,
.customtab li.active a:hover,
.customtab li.active a:focus {
  border-bottom: 2px solid var(--white);
  color: var(--main-theme-color);
}
.tabs-vertical li.active a,
.tabs-vertical li.active a:hover,
.tabs-vertical li.active a:focus {
  background: var(--main-theme-color);
  border-right: 2px solid var(--main-theme-color);
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
  background: var(--main-theme-color);
  color: var(--white);
}

/* Theme Specific CSS */

#page-wrapper {
  background: var(--other-two) !important;
}
html {
    background: var(--other-two) !important;
}
#wrapper {
    background: var(--other-two) !important;
}
.new-login-box .white-box {
    background: var(--other-two) !important;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--other-one);
}
.white-box {
    background: var(--secondary-theme-color);
        color: var(--other-five) !important;
}
.sidebar .sidebar-head {
    background: var(--secondary-theme-color);
}
.sidebar-head, .sidebar .sidebar-head h3 {
  background: var(--secondary-theme-color);
    color: var(--other-one) !important;
}
.content-wrap {
    background: var(--secondary-theme-color);
    color: var(--other-one) !important;
}
tbody {
    background: var(--secondary-theme-color);
    color: var(--other-one) !important;
}
ul.side-icon-text > li a {
    color: var(--other-one);
    font-weight: 400;
}
.footer {
    color: var(--other-one);
    background: var(--secondary-theme-color);
}
.manage-users .tabs-style-iconbox nav {
 background: var(--other-six);
}
.label, .circle {
    color: var(--secondary-theme-color);
}
.news-slide .news-content h2 {
    color: var(--other-seven);
}
.label-success, .bg-success {
    background: var(--success) !important;
}
.label-danger, .bg-danger {
    background: var(--danger) !important;
}
.label-warning, .bg-warning {
    background: var(--warning) !important;
}
.label-info, .bg-info {
    background: var(--info) !important;
}
.label-default, .bg-default {
    background: var(--default) !important;
}
.text-success {
    color: var(--success) !important;
}
.text-danger {
    color: var(--danger) !important;
}
.text-warning {
    color: var(--warning) !important;
}
.text-info {
    color: var(--info) !important;
}
.text-purple {
    color: var(--purple) !important;
}
.text-inverse {
    color: var(--inverse) !important;
}
.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
    color: var(--secondary-theme-color);
    cursor: not-allowed;
    background-color: var(--default) !important;
    border-color: var(--other-eight);
}
.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: var(--secondary-theme-color);
    text-decoration: none;
    background-color: var(--default) !important;
    border: none;
}
.pagination>li>a:hover, .pagination>li>span:hover {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: var(--secondary-theme-color);
    text-decoration: none;
    background-color: var(--other-nine) !important;
    border: none;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    z-index: 3;
    color: var(--secondary-theme-color);
    cursor: default;
    background-color: var(--other-eight);
    border-color: var(--other-eight);
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color:var(--other-eight) !important;
    border-color: var(--other-eight);
}
.bg-title {
    background:var(--secondary-theme-color);
}
.form-control {
    background-color: var(--main-theme-color);
    border: 1px solid var(--main-theme-color);
    color: var(--black);
}
.manage-table {
    border-top: 1px solid rgba(120, 130, 140, 0.13);
    margin: 10px -25px 0;
    background: var(--secondary-theme-color);
    padding: 30px;
}
.tabs-style-iconbox nav ul li.tab-current a {
    background: var(--other-ten);
    color: var(--other-five);
    box-shadow: -1px 0 0 var(--secondary-theme-color);
    
}
.table tbody tr.advance-table-row td {
    vertical-align: middle!important;
    border: 0px!important;
    font-size: 16px;
    background: var(--secondary-theme-color);
}
.tabs-style-iconbox nav ul li.tab-current a::after {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 10px;
    border-top-color: var(--other-ten);
    content: '';
    pointer-events: none;
}
.manage-users .tabs-style-iconbox nav ul li a {
    color: rgba(226, 226, 226, 0.6);
    text-transform: uppercase;
}
.panel {
    background-color: var(--secondary-theme-color);
    color: var(--default);
}
.panel-themecolor .panel-heading, .panel-theme .panel-heading {
    border-color: var(--main-theme-color);
    color: var(--white);
    background-color: var(--main-theme-color);
}
.table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 1px solid var(--other-eleven);
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td, .table > thead > tr > th, .table-bordered {
    border-top: 1px solid var(--other-eleven);
}
.form-material .form-control, .form-material .form-control.focus, .form-material .form-control:focus {
    background-image: linear-gradient(var(--other-twelve), var(--other-twelve), linear-gradient(rgb(251, 251, 251), rgba(47, 47, 47, 0.64));
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    float: none;
    color: var(--other-thirteen);
}
label {
    font-weight: 500;
    color: var(--other-thirteen);
}
.select2-drop {
    background: var(--secondary-theme-color);
    color: var(--other-thirteen);
}
.select2-container .select2-choice {
    color: var(--other-thirteen);
}
.uneditable-input {
        background-color: var(--other-fifteen) !important;
}
.swal2-modal, .swal2-show {
    background: var(--secondary-theme-color) !important;
    color: var(--other-five) !important;
}
.swal2-modal .swal2-title {
      color: var(--other-five) !important;
}
.swal2-modal .swal2-content {
      color: var(--other-five) !important;
}
.swal2-success-circular-line-left {
     background: var(--secondary-theme-color) !important;
} .swal2-success-circular-line-left {
        background: var(--secondary-theme-color) !important;
}
.well, pre {
    background: var(--secondary-theme-color);
    color: var(--other-five) !important;
}
.tab {
    background-color: var(--other-fifteen);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.active .tab {
    background-color: var(--other-five);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.btn-muted {
    color: var(--black) !important;
}
.overlay-box {
    background: var(--secondary-theme-color) !important;
}
.nav-tabs > li > a {
    border-radius: 0px;
    color: var(--other-five);
}
.nav-tabs > li > a:hover {
    border-radius: 0px;
    color: var(--secondary-theme-color);
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--other-sixteen);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}
option { 
    background-color:  var(--secondary-theme-color);
}