/* Example override for the primary background color */

/* comfortaa-300 - latin_cyrillic */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../fonts/comfortaa-v34-latin_cyrillic-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/comfortaa-v34-latin_cyrillic-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* comfortaa-regular - latin_cyrillic */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/comfortaa-v34-latin_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/comfortaa-v34-latin_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* comfortaa-500 - latin_cyrillic */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('../fonts/comfortaa-v34-latin_cyrillic-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/comfortaa-v34-latin_cyrillic-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* comfortaa-600 - latin_cyrillic */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('../fonts/comfortaa-v34-latin_cyrillic-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/comfortaa-v34-latin_cyrillic-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* comfortaa-700 - latin_cyrillic */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/comfortaa-v34-latin_cyrillic-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/comfortaa-v34-latin_cyrillic-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

:root {
    --primary: #27b2e7;
    --secondary: #1f91bd;
    --light: #fff;
    --medium: #8b8b8b;
    --medium-ligth: #d8d8d8;
    --dark: #202020;
    --border: #000;
    --alert: #e72727;
    --bg-light: #f2fafe;
    --bg-dark: #e6f6fd;
}


body {
  font-family: "Comfortaa", sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  font-weight: 300;
  color: var(--dark);
  background-color: var(--light);
}

body,
input,
button,
select,
textarea {
  font-family: "Comfortaa", sans-serif;
  color: var(--dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Comfortaa", sans-serif;
    font-weight: 600;
}

h1,
h2 {
    color: var(--primary);
    font-weight: 700;
}

em, i {
    font-style: normal !important;
}

a {
  color: var(--primary);
  transition: 0.3s;
  text-decoration: none;
}
a:hover,
a:focus {
  color: var(--secondary);
  text-decoration: underline;
}

blockquote {
  font-weight: 300;
  border-left: 5px solid var(--medium-ligth);
}

.label {
    border-radius: 4px;
}
.label-default {
  background-color: var(--medium-ligth);
}
.label-default[href]:hover,
.label-default[href]:focus {
  background-color: var(--medium);
}

ul.top-nav > li.primary-action > a.btn {
    background-color: var(--primary);
    border: 1px solid var(--primary);
    color: var(--light);
    border-radius: 20px;
}
ul.top-nav > li.primary-action > a.btn:hover,
ul.top-nav > li.primary-action > a.btn:focus {
    border: 1px solid var(--primary);
    color: var(--primary);
    background-color: var(--light) !important;
}

section#header {
    padding: 36px 0;
    background-color: var(--light);
    border-radius: 0;
}

section#main-menu {
    padding: 10px 0;
    background-color: var(--bg-dark);     
}

.navbar {
    border-radius: 0;
}
.navbar-main {
    font-family: "Comfortaa", sans-serif;
    background-color: var(--bg-dark);
    min-height: 38px;    
}

.navbar-main .navbar-nav > li > a {
    color: #002020;
    transition: 0.3s;
}

.navbar-main .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
}

.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > .open > a:focus {
    color: var(--primary);
    background-color: transparent;
}

.navbar-nav > li > .dropdown-menu {
    border-radius: 4px;
  
}
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
.navbar-main .dropdown-menu {
    padding: 0;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 0;
  margin: 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: var(--light);
  background-clip: padding-box;
  border: none;
  border: none;
  border-radius: 4px;
  -webkit-box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1);
   box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}



.nav .nav-divider {
    height: 1px;
    margin: 0 0;
    overflow: hidden;
    background-color: var(--bg-dark);
}

.navbar-main .navbar-nav .dropdown-menu > li > a {
    transition: 0.3s;
}

.navbar-main .navbar-nav .dropdown-menu > li > a:hover,
.navbar-main .navbar-nav .dropdown-menu > li > a:focus,
.navbar-main .navbar-nav .dropdown-menu > .active > a,
.navbar-main .navbar-nav .dropdown-menu > .active > a:hover,
.navbar-main .navbar-nav .dropdown-menu > .active > a:focus,
.navbar-main .navbar-nav .dropdown-menu > .open > a,
.navbar-main .navbar-nav .dropdown-menu > .open > a:hover,
.navbar-main .navbar-nav .dropdown-menu > .open > a:focus {
    color: var(--primary);
    background-color: var(--bg-dark);
}

@media (max-width: 767px) {
    .navbar-main .navbar-nav .open .dropdown-menu > li > a {
        color: var(--dark);
    }
    .navbar-main .navbar-nav .open .dropdown-menu > li > a:hover {
        color: var(--primary);
    }
}

.dropdown-menu > li > a {
  padding: 10px 20px;
  color: #333333;
}


.navbar-main li.account {
    background-color: var(--primary);
    border-radius: 4px;
}

#primary-nav li.account {
    background: transparent;
}


/**
 * -------------------------
 * @section Main Navbar
 * -------------------------
 */

.navbar-main .navbar-toggle .icon-bar {
    background-color: var(--primary);
    transition: 0.3s;
}

.navbar-main .navbar-toggle:focus .icon-bar,
.navbar-main .navbar-toggle:hover .icon-bar {
    background-color: var(--secondary);
}


.navbar-default .navbar-collapse {
    border-color: transparent;
}

/**
 * -------------------------
 * @section General Styles
 * -------------------------
 */

div.header-lined h1 {
    margin-top: 0;
    margin-bottom: 15px;
    padding:6px 0;
    border-bottom:1px solid var(--medium-ligth);
    font-weight: 700;
    color: var(--primary);
}

div.header-lined .breadcrumb li a {
    color: var(--medium);
}
div.header-lined .breadcrumb > .active {
    color: var(--primary);
}

div.header-lined small {
    white-space: normal;;
    overflow: unset;
    display: block;
    color: var(--medium);
    line-height: 1.4;
    font-weight: 300;
}


label {
  font-weight: 300;
}

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: var(--dark);
  background-color: var(--light);
  background-image: none;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 4px;
  box-shadow: none;  
  transition: 0.3s;
}
.form-control:focus {
  background-color: #fafafa;
  border: 1px solid rgba(0,0,0,0.1);
  outline: 0;
  box-shadow: none;
}

.btn {
    border-radius: 20px;
    transition: 0.3s;
}
.btn-primary {
  color: var(--light);
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-primary:focus,
.btn-primary.focus {
  color: var(--primary)
  background-color: var(--light);
  border-color: var(--primary)
}
.btn-primary:hover {
  color: var(--primary);
  background-color: var(--light);
  border-color: var(--primary)
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: var(--primary);
  background-color: var(--light);
  border-color: var(--primary)
  background-image: none;
}

.btn-default {
  color: var(--primary);
  background-color: var(--light);
  border-color: var(--primary);
}
.btn-default:focus,
.btn-default.focus {
  color: var(--primary)
  background-color: var(--bg-light);
  border-color: var(--primary)
}
.btn-default:hover {
  color: var(--primary);
  background-color: var(--bg-light);
  border-color: var(--primary)
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: var(--primary);
  background-color: var(--light);
  border-color: var(--bg-primary)
  background-image: none;
}

section#main-body {
    padding:  80px 0 20px 0;    
}

/**
 * -------------------------
 * @section Home Page Banner
 * -------------------------
 */

section#home-banner {
    margin: 0;
    padding: 60px 0 60px;
    background-color: var(--bg-light);
    color: var(--dark);
}

section#home-banner .tooltip-inner {
    background-color: var(--primary);
}

section#home-banner .tooltip.left .tooltip-arrow {
    border-left-color: var(--primary);
}

section#home-banner .tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--primary);
}

section#home-banner .tooltip.right .tooltip-arrow {
    border-right-color: var(--primary);
}

section#home-banner h2 {
    margin: 0;
    padding: 0 25px 18px 25px;
}

section#home-banner .form-control {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

section#home-banner .btn {
    border-radius: 0;
    border: 0;
    font-weight: 300;
    color: #fff;
}

section#home-banner .btn.search {
    background-color: var(--primary);
}
section#home-banner .btn.search:hover,
section#home-banner .btn.search:focus {
    background-color: var(--secondary) !important;
}
section#home-banner .btn.transfer {
    background-color: var(--secondary);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
section#home-banner .btn.transfer:hover,
section#home-banner .btn.transfer:focus {
    background-color: var(--primary) !important;
}

/**
 * -------------------------
 * @section Home Page Shortcut Buttons
 * -------------------------
 */

.home-shortcuts {
  background: var(--primary);
  color: var(--light);
}

.home-shortcuts li {
  padding: 15px 3px;
  border-right: 1px solid rgba(255,255,255, 0.2);
}
.home-shortcuts li:first-child {
  border-left: 1px solid rgba(255,255,255, 0.2);
}
.home-shortcuts li:last-child {
  border-right: 1px solid transparent;
}
.home-shortcuts li a {
  display: block;
  color: var(--light);
  text-decoration: none;
  transition: 0.3s;
}
.home-shortcuts li i {
  font-size: 22px;
}
.home-shortcuts li p {
  margin: 2px 0 0;
  text-transform: uppercase;
  transition: 0.3s;
  display: flex;
  justify-content: center;
}
.home-shortcuts li span {
  opacity: 0;
  display: inline !important;
  transition: 0.3s;
}
.home-shortcuts li:hover span {
  opacity: 1;
  display: inline;
  margin-left: 4px;
}
.home-shortcuts .lead {
  margin: 0;
  line-height: 75px;
}
@media (max-width: 992px) {
  .home-shortcuts ul {
    text-align: center;
  }
}
@media (max-width: 767px) {
  .home-shortcuts li {
    border-bottom: 1px solid rgba(255,255,255, 0.2);
    border-right: 1px solid transparent;
  } 
  .home-shortcuts li:first-child {
      border-left: 1px solid transparent;
    } 
}

/**
 * -------------------------
 * Sidebar Panels
 * -------------------------
 */

.panel-sidebar {
    border-color: rgba(0,0,0,0.1);
    font-size: 15px;
}
.panel-sidebar>.panel-heading {
    color: var(--light);
    background-color: var(--primary);
    border-bottom: 0;
}

.panel-sidebar .panel-title {
    font-family: 'Comfortaa', sans-serif;
    color: var(--light);
}
.panel-sidebar .panel-minimise {
    margin-top: 4px;
    color: var(--light);
    cursor: pointer;
    transition: transform 200ms ease;
}

.panel-sidebar>.panel-footer {
    color: #333;
    background-color: #f5f5f5;
    border-top: 0;
}

.panel-sidebar .list-group-item i:not(.fa-circle):not(.fa-dot-circle):not(.no-transform) {
    color: #ccc;
    transition: color 0.3s;
}
.panel-sidebar .list-group-item.disabled,
.panel-sidebar .list-group-item.disabled:focus,
.panel-sidebar .list-group-item.disabled:hover {
    background-color: transparent;
    opacity: 0.5;
}

.panel-sidebar a.list-group-item:hover i.fas,
.panel-sidebar a.list-group-item:hover i.far {
    color: #666 !important;
}
.panel-sidebar a.list-group-item.active,
.panel-sidebar a.list-group-item.active:focus,
.panel-sidebar a.list-group-item.active:hover {
    background-color: var(--secondary);
    border-color: var(--secondary);
}
.panel-sidebar a.list-group-item.active i,
.panel-sidebar a.list-group-item.active:focus i,
.panel-sidebar a.list-group-item.active:hover i {
    color: var(--light) !important;
}
.panel-sidebar.view-filter-btns .list-group-item.active,
.panel-sidebar.view-filter-btns .list-group-item.active:focus,
.panel-sidebar.view-filter-btns .list-group-item.active:hover {
    background-color: #eee;
    border-color: #eee;
    color: #555;
}

.panel-sidebar .recent-ticket {
    line-height: 20px;
}

.panel-sidebar .validation-status-label {
    font-size: initial;
}
.panel-sidebar .validation-submit-div {
    margin-top: 1em;
}
.panel-sidebar .validation-status-container {
    text-align: center;
    margin-top: 5px;
}

a.list-group-item:hover,
button.list-group-item:hover,
a.list-group-item:focus,
button.list-group-item:focus {
  color: var(--dark);
  text-decoration: none;
  background-color: var(--bg-light);
}


#order-pure_comparison .price-table-container .price-table .top-head {
    background: #f2fafe !important;
    background: -moz-linear-gradient(top,  #f2fafe 0%, #e6f6fd 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2fafe), color-stop(100%,#e6f6fd)) !important;
    background: -webkit-linear-gradient(top,  #f2fafe 0%,#e6f6fd 100%) !important;
    background: -o-linear-gradient(top,  #f2fafe 0%,#e6f6fd 100%) !important;
    background: -ms-linear-gradient(top,  #f2fafe 0%,#e6f6fd 100%) !important;
    background: linear-gradient(to bottom,  #f2fafe 0%,#e6f6fd 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2fafe', endColorstr='#e6f6fd',GradientType=0) !important;    
}
#order-pure_comparison .price-table-container .price-area {
    background: #ffffff !important;
    background: -moz-linear-gradient(top,  #ffffff 2%, #e6f6fd 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#ffffff), color-stop(100%,#e6f6fd)) !important;
    background: -webkit-linear-gradient(top,  #ffffff 2%,#e6f6fd 100%) !important;
    background: -o-linear-gradient(top,  #ffffff 2%,#e6f6fd 100%) !important;
    background: -ms-linear-gradient(top,  #ffffff 2%,#e6f6fd 100%) !important;
    background: linear-gradient(to bottom,  #ffffff 2%,#e6f6fd 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6f6fd',GradientType=0) !important;    
}

#order-pure_comparison .price-table-container .price-table .top-head .top-area {
    border-bottom:1px solid #e6f6fd !important;
}

#order-pure_comparison .price-table-container .order-button,
#order-pure_comparison .price-table-container .order-button:hover {
    background: var(--primary) !important;    
    -webkit-border-radius:20px !important;
    -moz-border-radius:20px !important;
    -ms-border-radius:20px !important;
    border-radius:20px !important;    
}

#order-standard_cart .order-summary {
    background-color: var(--primary) !important;
    border-bottom: 3px solid var(--primary) !important;
}
#order-standard_cart .summary-container {
    background-color: var(--medium-ligth);
}

#order-cloud_slider .plans-full-main {
    background: var(--light) !important;
}
#order-cloud_slider .heading-with-cloud .texts-container {
    color: var(--primary) !important;
}
.irs-line {
    background: var(--bg-dark) !important;
}
.irs-bar {
    border-top: 0 solid var(--bg-dark) !important;
    border-bottom: 0 solid var(--bg-dark) !important;
    background: var(--primary) !important;
}

#order-cloud_slider .price-calc-top .order-btn,
#order-cloud_slider .price-calc-top .order-btn:hover {
    background: var(--primary) !important;        
}

#order-modern .product {
    border: 1px solid var(--medium-ligth) !important;    
    transition: 0.3s;
}

#order-modern .product:hover {
    background-color: var(--bg-light) !important;
}

#order-modern .product .pricing {
    font-family: "Comfortaa", sans-serif !important;    
}

#order-modern .product .name {
    font-family: "Comfortaa", sans-serif !important;    
}

#order-standard_cart .view-cart-items-header {
    background-color: var(--primary) !important;    
}
#order-standard_cart .view-cart-items {
    border-bottom: 2px solid var(--primary) !important;
}
#order-standard_cart .empty-cart .btn {
    background-color: var(--primary) !important;   
}

.domain-checker-container {
    background: var(--bg-light) !important;    
}

.dataTables_wrapper .dataTables_info {
    background-color: var(--primary);   
    border-radius: 4px !important; 
}

.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(--primary);
  border-color: var(--primary);
}

.dataTables_wrapper .dataTables_length {
    border-radius: 4px;
}

#default-captcha-domainchecker #inputCaptcha {
    border: 1px solid var(--medium-ligth);
}

/**
 * -------------------------
 * @section footer
 * -------------------------
 */

section#footer {
    padding: 20px 10px;
    background-color: var(--bg-dark);
    border-top: 1px solid transparent;
    color: var(--dark);
    font-size: .9em;
}

section#footer .back-to-top i {
    padding: 10px;
    background-color: var(--primary);
    color: var(--light);
    border-radius: 4px;
    opacity: 1;
    transition: 0.3s;
}
section#footer .back-to-top i:hover,
section#footer .back-to-top i:focus {
    background-color: var(--secondary);
}