@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;400;600;800&display=swap');


@font-face {
    font-family: "EamesBold";
    src: url("../fonts/EamesCenturyModern-Bold.woff2") format("woff2"),     url("Eames.woff") format("woff");

}

@font-face {
    font-family: "EamesItalic";
    src: url("../fonts/EamesCenturyModern-BoldItalic.woff2") format("woff2"),     url("Eames.woff") format("woff");

}
/*

Logogrün #ADA711

Hell background: #f2f4ec;
rgb(242, 244, 236)
Footer  background-color: #bdb714;

WHMCS
--primary: #336699
--secondary:#6c757d
--success:#28a745
--info:#17a2b8
--warning:#ffc107
--danger:#dc3545
--light:#f8f9fa
--dark:#343a40

.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-warning {}

.alert-danger {}
*/

:root {
        --lightBG: #f2f4ec;
/* var(--lightBG) */
        --lightBlue1:#BEEAEE;
        --lightBlue3:#AEE4E9;
        --lightBlue5:#9DDEE1;
/* var(--lightBlue1) */
        --darkBlue1:#00959A;   
        --darkBlue3:#008287;   
        --darkBlue5:#006E73; 
 /* var(--darkGreen5) */  
 
        --green1:#BDB715;
        --green3:#ADA711;
        --green5:#9C950D;

 
        --darkGreen1:#137634;   
        --darkGreen3:#005E2E;   
        --darkGreen5:#004C24;   
/* var(--yellowBG) */
        --yellowBG:#FCEA49;


}
/*
::-moz-selection {  background-color: var(--lightBlue1); }

::selection {   background-color: var(--lightBlue1); }


 #####   Allgemeine Styles (Body und Text)  #####  */




body {font-family: Inter,'Open Sans',sans-serif; color: #020;}

h1,h2,h3,h4,h5,h6 {
    color: #040;  font-weight: 600;
    /* font-family: 'EamesBold'; */
}

/* allgemeine info-Button Farben */

/* aktuelll die Roten, blauen, grauen, grünen kleinen Buttons wie (active, pending, storniert und so */

/* allgemeine info-Felder Farben Box-BG und Textfarbe ( Warning "orange", info "blau", success "grün", danger "rot" )  */


/* #####   Standard Button  #####  */


.btn,
#login,
.btn i  {
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    font-size: 1rem;
    line-height: 1.5;
    color: #fff;
    background-color:var(--green3);
    border: 0px solid #B9B20B;
   
}
.btn:hover,
#loadmorebutton {background-color:#ADA711 !important; color: #FFF !important;}

.btn-primary,
.btn-primary.disabled, 
.btn-primary:disabled

{
    color: #fff;
background-color:var(--green3);
border: 1.5px solid #B9B20B;
}

.btn-primary:hover,.btn-primary:focus,.btn-primary:active,
#login:hover {
    color: #fff;
    background-color: rgba(156,149,13,.9);
    border-color: rgb(156,149,13);
}
.uk-button-primary:focus, .uk-button-primary:hover {
    background-color: rgba(156,149,13,.9);
    color: #fff;
    border-color: transparent;
}


/* Button Shop Domain */
  .spotlight-tld .btn:not(.domain-contact-support) {  background-color: var(--darkGreen5);}
  
  #order-standard_cart .domain-checker-available {  color: var(--darkGreen5);}

/* Button Passwort */
.btn i.fa-eye {color: #495057;}



/* ##### Header ##### */

#header {border-top:rgb(173, 167, 17) solid 4px ;}

header.header .topbar {background-color:#9c950d;}

.kp-title, .kp-gws-site {  height:45px;font-family: inter;}
                
.kp-title p {color:#005E2E; letter-spacing:1px;  font-weight:700; font-size: 16px; padding: 10px; margin:0; }

.kp-gws-site a { font-weight:400; padding: 10px; margin:0; display: block;color: #aca711;}

header.header .logo-img {
    max-height: 95px;
}


/* #####  Hauptnavigation  #####  */
header.header .navbar a {
    font-size: 1.125em;
    color: #00959a;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .01em;
}

header.header .navbar a:hover {color: #62b9b4; text-decoration:none; }

header.header .navbar .dropdown-item a {
    color: #898002;
    padding: 0.3125em 0;
    font-size: 1em;
    font-weight: 400;
    text-transform: none;
}
.dropdown-item:focus, .dropdown-item:hover {
  
    background-color: var(--lightBG);
}

@media (max-width: 385px) {
    .logo-clientarea {
      width:190px;
      height:auto;
    }
   .toolbar .nav-item.d-xl-none {margin: 0!important;}
   .navbar-light  {padding-left:0;}
  }

  @media (max-width: 315px) {
    .logo-clientarea {
      width:180px;
      height:auto;
    }
   .toolbar .nav-item.d-xl-none {margin: 0!important;}
   .navbar-light  {padding-left:0; padding-right:0;}
  }


/* #####  Subnavigation navigation  #####  */

.card-header {background-color: #dee2c9;}
.list-group-item-action { color:#014020;}
.list-group-item-action:hover { color:#014020;}



.list-group-item, .list-group-item.active:focus {background-color:#e8ebdb; }
.list-group-item:hover { background-color: #FFF;}

.sidebar .list-group-item .badge { background-color: transparent;}
/*
.list-group-item.active {background-color:var(--darkBlue3);}
.list-group-item.active:hover {background-color:var(--darkBlue3); color:#FFF;}
*/
.sidebar .list-group-item.active, .sidebar .list-group-item.active:focus, .sidebar .list-group-item.active:hover,
.cart-sidebar .list-group-item.active, .cart-sidebar .list-group-item.active:focus, .cart-sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active i.fas, .cart-sidebar .list-group-item.active i.fas
        {background-color:var(--darkGreen5);
            color: #fff;
        }




 

/* #####   CHANGES ANDREAS (Body und Text)  #####  */

a {color: #03717a;}
a:hover {color: #04a3a0; }

.primary-content .card.mw-540 { max-width: 730px;}

.table { color: #020;}

.dataTables_wrapper table.table-list thead th { border-bottom: 4px solid var(--lightBG); }
.dataTables_wrapper table.table-list {border: 0px;}
.dataTables_wrapper table.table-list thead th.sorting_asc, .dataTables_wrapper table.table-list thead th.sorting_desc {background-color: #dee2c9; }

.alert-warning { color: var(--darkGreen3);  background-color:var(--lightBlue1);   border-color:var(--lightBlue1); 
}


/*  Login button startseite   

ist der absichtlich blau mit grünem rahmen?

A: Der Rahmen ist nicht Absicht, da war ich mir nicht sicher, was sonst noch alles daran hängt. 



#login {padding: 7px 40px; background-color: #36595c; color:#ade9e6;}

header.header .main-navbar-wrapper .navbar-collapse { padding: .5rem 1rem .5rem 0rem; margin-bottom: 14px;}
.navbar {padding: .5rem 1rem .5rem 0rem;}

.breadcrumb-item.active { color: var(--green5);}
.breadcrumb-item + .breadcrumb-item::before {color: var(--green5);}

.master-breadcrumb { background-color: #f2f4ec;}
.breadcrumb {background-color: #f2f4ec;}
*/
.tiles .tile i {color:var(--darkBlue1);}
.tiles .tile i:hover {color:var(--darkBlue5);}
.tiles .tile i {font-size: 43px;}

/* client area home */

.tiles .tile .stat {
    margin-bottom: 10px;
 
}
.stat {font-family:EamesBold; color: var(--darkGreen3); font-size: 2.6em !important;}

.tiles .tile .title {color: var(--darkGreen5); }

.label-success {background-color: var(--darkGreen1); }

.card { background-color: #fafbf7;}
tr.masspay-total td { background-color: var(--lightBG); }

.card-accent-red, 
.card-accent-gold, 
.card-accent-emerald, 
.card-accent-blue,
.card-accent-teal {border-top: 3px solid #ada711;}

#order-standard_cart .domain-selection-options .option {background-color: #FFF;}

.page-item.active .page-link, .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {  background-color: var(--darkBlue5);}

.alert-success { color: var(--darkGreen5); background-color: #d2ce6e;   border-color: #d2ce6e;}


.badge {font-weight: 600;}
.badge-success { background-color: var(--darkGreen1);}
.badge-danger { background-color: #CC3300;}

.requestor-type-operator { background-color:var(--darkBlue1);}



.label {padding: .4em .7em;  font-weight: 600;}

input.form-control:active, input.form-control:hover, input.form-control:focus { background-color: #FFF;}
.form-control:disabled, .form-control[readonly] { background-color: var(--lightBG);}

.status-active, .status-completed, .status-open { background-color: #8c8e09;}
.status-unpaid {  background-color: #cc3300;}

.network-issue-alert {background-color: #ecf3f4;}

/* ON/OFF button */
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success, 
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success 
{
    background-color: var(--darkGreen5); border-color: var(--darkGreen5);}
 
 .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:hover,
 .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:hover {

    color: #292b2c;
    background-color: #e6e6e6;
    border-color: #adadad;}

.bootstrap-switch  .bootstrap-switch-handle-off.bootstrap-switch-secondary 
{background-color: #8c8e09; border-color: var(--darkGreen5);}





.header-lined { font-size: 40px; font-family: EamesBold; font-weight:normal;}


.bg-color-gold {background-color: #ada711;}
.bg-color-red { background-color: #ada711;}
.bg-color-green {background-color: #ada711;}
.bg-color-blue {background-color: #ada711;}
/* 

@media only screen and (min-width: 1200px) {

.container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1260px !important;}

}


#####   ENDE CHANGES ANDREAS (Body und Text)  #####  */


/* xćlientarea productdetails */

.product-icon .fa-inverse {color: #FFF;}

.product-details h4 {margin-top:18px; font-size:20px;}

.product-status-active {background-color: var(--darkGreen5);}


#frmGeneratePassword .modal-header {background-color: var(--darkGreen5)!important;}
#frmGeneratePassword .modal-header h4 {color: #FFF;}


#layers .lu-btn--primary
{
    color: #fff!important;
background-color:var(--green3)!important;
border: 1.5px solid #B9B20B!important;
}






/* ##### FOOTER ##### */

footer.footer  {background-color: #bdb714; margin-top: 100px;}



/* #####   content bereich allgemein #####  */
.primary-bg-color {background-color:var(--lightBG);}

.fa, .fab, .fad, .fal, .far {color: rgba(0,0,0,0.5);  padding-right: 3px;}

.fas {color:#030;}

/*  clientarea home (startseite nach dem login) */

/*  Liste mit Sortierfunkion */


/* affiliate seite  */


.affiliate-stat i {
    float: left;
    padding: 10px;
    font-size: 3em;
}
@media (max-width: 778px) {
.affiliate-stat i {
    padding: 5px;
}
}

/*  FORMULARE  */

.form-control {
   
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    vertical-align: middle;
    background-color: #fff;
    background-clip: padding-box;
    
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  /*  background: rgba(0,0,0,.02);*/
    color: #373737;
    border:0;
    border-bottom: 1.5px solid rgba(0,0,0,.1);
}
input.form-control:active,
input.form-control:hover,
input.form-control:focus {
outline: 0;
background-color: transparent;
color: #373737;
border-color: #bdb714!important;
}


.form-control option:checked,.form-control option:hover {
    color: white;
    background:green ;
}


/* ticket form */

.btn-toolbar .btn-default,
.btn-toolbar .btn-primary {
    color: #333;
    background-color: #fff;
    border-color: #CCC;
}



/* Order Cart            */

#order-standard_cart .font-size-36 {
    font-size: 28px;
}

#order-standard_cart .secondary-cart-body .view-cart-items-header {
    margin: 0;
    padding: 8px 15px;
    background-color: #dee2c9;
    color: #020;
    font-size: .9em;
    border-radius: 4px 4px 0 0;
}

#order-standard_cart .secondary-cart-body .view-cart-items {
 
    border-bottom: 2px solid #dee2c9;
}
#order-standard_cart  .secondary-cart-body  .empty-cart .btn,
#order-standard_cart  .secondary-cart-body  .empty-cart .btn i {
    color: #fff;
    background-color:var(--green5);
}

#order-standard_cart .secondary-cart-sidebar .order-summary {

    background-color: #dee2c9;
    color: #020;
    border-bottom: 3px solid #dee2c9;
}
#order-standard_cart .secondary-cart-sidebar .order-summary h2 {
    color: #020;
    font-weight: 600;}

#order-standard_cart .order-summary .btn-continue-shopping  {
    margin-top:8px;
}



.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active,
.show>.btn-success.dropdown-toggle,
.btn-success.focus, .btn-success:focus {
    color: #fff;
    background-color: var(--green3);
    border: 0px solid #B9B20B;
}

/* checkout button disabled*/

.btn-checkout.disabled,
.btn-success.disabled, 
.btn-success:disabled {
    background-color: #ADA711 !important;
    color: #FFF !important;}

/* Firewall module */

.fwmodul {margin-top:1em;}
.fwmodul .panel-heading {font-weight: bold;}



/* #####   DOMAINCHECKER   #####    */

#order-standard_cart .domain-pricing .tld-row.highlighted {
    background: rgba(189, 183, 21,0.15);
}
#order-standard_cart .domain-pricing .two-row-center {
 
    border-right: 2px solid #BDB715;}

#order-standard_cart .domain-pricing .tld-pricing-header .col-sm-2,
#order-standard_cart .domain-pricing .tld-pricing-header .col-sm-4,
#order-standard_cart .domain-pricing .tld-pricing-header .col-xs-2,
#order-standard_cart .domain-pricing .tld-pricing-header .col-xs-4 {
  
        border-bottom: 6px solid rgba(189, 183, 21,0.2);

    }
#order-standard_cart .domain-pricing .tld-pricing-header div:nth-child(odd) {
        border-color: #BDB715;
       
    }
.domain-promo-box .text-warning,
.domain-promo-box .text-primary {color: #333!important;}



/* hide transfer button */
#transferbutton {display:none;}


.domain-checker-container .domain-checker-bg {
    margin: 0;

    background-repeat: no-repeat;
    background-position:bottom right;
    background-image: url(../img/DomainCheckerBG.png);
    background-size: cover;
}

.cart-body .domain-checker-container {
   
    background-color: #9DDEE4;
    background: -webkit-linear-gradient(top,#9DDEE4,#9DDEE4);}

.domain-checker-bg2 .search-input-bar {
   
    padding: 30px 3px 80px 3px;
    background-repeat: no-repeat;
    background-position: bottom right;
    background-image: url("https://clientarea.greenwebspace.com/templates/gws21child/img/DomainCheckerBG.png");
    background-size: cover;
    width:100%;
}
.domain-checker-bg2 .row1 {width:80%;}

.domain-checker-bg2 .search-form .search-input-bar .input-group {
    
     background-color: #FFF;
     padding:5px;
     height:58px;
     border-radius: 10px;
     width:100%;
}

#main-body #dcmain {min-height:250px; background-color: #f2f4ec;}

#dcmain #searchfield {border: #ddd 1px solid; background-color: #FFF; }

#dcmain .search-input-bar {min-height:200px; width:100%;}

#dcmain .btn-danger:hover, #dcmain .btn-danger:active, #dcmain .btn-danger:focus,
#dcmain .btn-hx-search:hover,#dcmain .btn-hx-search:active,#dcmain .btn-hx-search:focus {
    color: #fff;
    background-color: #ADA711;
    border-color: #ADA711;

}

#dcmain .btn-hx-search {
    color: #fff;
background-color:#B9B20B;
border: 1.5px solid #B9B20B;
	border-radius: 5px;
	border: none;
	margin-right: 0px;
}

/*  bleibt kommentiert
.search-form .search-input-bar .input-group {max-width:800px;}
*/

#resultsarea .row1 {max-width:600px;}
.domainbox {width:100%;}
.domainbox {
border-radius: 0;
border-bottom: 2px #9C950D solid;
padding-bottom:8px;
}

.checkboxarea .far.fa-square.avail,.checkboxarea  .fas.fa-check-square.avail,.checkboxarea  .tld-zone.available{
   color: #9C950D;
}
.label-hx-available {
    color: #9C950D;
    border: 1px #9C950D solid;
}

.first-line .domain-label.available.added {
    color: #9C950D;
}
.first-line .domain-label.available{
    font-weight: 500;
    color: #9C950D;
}
.first-line .tld-zone.available.added {
    font-weight: bold;
    color:  #9C950D;
}
.first-line .tld-zone.available {
    font-weight: bold;
    color: #9C950D;
}

.second-line .registerprice {
 color: #9C950D;
}

.second-line .label-hx-available,
.second-line .registerprice.added
{
  color: #137634;
}

.second-line .label-hx-taken {  color: #dc3545; }

#datafilters {margin-top:30px;}

#dc-custom-hinweis {
    margin: 0 auto 10px;
    max-width: 600px;
}

/*  clientarea hostedby badge rows  */

.badgerow-7 .badgeCol img,
.badgerow-9 .badgeCol img {margin-top:10px;}
.badgerow-7 .badgeCol,
.badgerow-9 .badgeCol {background-color:#B9B20B;}{background-color:#B9B20B;}