#main-body{
    //background-color:blue; // just a test
}
body{
    font-family: Roboto,Arial,Helvetica, sans-serif !important;
}

html #nav a:hover {
    color: #fff;
    text-decoration: none;
}

a {
    color: #ffffff;
    text-decoration: none;
    background-color: transparent;
}
 
a:hover {
    color: #4AF626;
    text-decoration: none;
}

a.badge-success:focus, a.badge-success:hover {
    color: #ced4da;
    background-color: #4AF626;
}

.sidebar .list-group-item {
    padding: 7px 15px;
    border-color: #333;
}


@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 90%;
    }
}

@media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 90%;
    }
}

@media (min-width: 768px) {
    .container, .container-md, .container-sm {
        max-width: 90%;
    }
}

@media (min-width: 576px) {
    .container, .container-sm {
        max-width: 90%;
    }
}

header.header {
    background-color: #161616;
    color: #fff;
    margin: 0 0 2.0rem 0;
}

header.header .logo-img {
    max-width: 400px;
    max-height: 60px;
    margin-top: 1rem;
    margin-left: -2rem;
}

header.header .topbar {
    margin: 0;
    padding: 2px 0;
    background-color: #161616;
    color: rgba(255, 255, 255, .65);
}

header.header .topbar .btn {
    line-height: 1;
    color: rgba(255, 255, 255, .65);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

header.header .topbar .active-client .input-group-text {
    padding: .25rem;
    font-size: .7rem;
    color: rgba(255, 255, 255, .75);
    background-color: transparent;
    border: 0;
}

/* Specific styles for client-active name link */
header.header .topbar .active-client .btn {
    color: #f10000;
    text-transform: none;
    letter-spacing: 0px;
}

/* Specific styles for the #accountNotifications button */
#accountNotifications.btn {
    line-height: 1;
    color: #f10000; /* This should override the general .btn color */
    font-size: 0.7rem;
    text-transform: none;
    letter-spacing: 0px;
}

header.header .navbar-nav a {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 1.3333333333em;
}

.fw-bold {
    font-weight: 800 !important;
}

.master-breadcrumb {
    background-color: #161616;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem -2.3rem 0 0;
    font-size: 1rem;
    color: #d3d3d3;
    text-align: left;
    list-style: none;
    background-color: #000;
    background-clip: padding-box;
    border: 1px solid #222;
    border-radius: .25rem;
}

.master-breadcrumb .breadcrumb {
    margin: 0;
    padding: 9px 0;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: #161616;
    border-radius: .25rem;
}

.breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding-right: .65rem;
    color: #ced4da;
    content: "|";
}

footer.footer {
    margin: 0;
    padding: 50px 0 80px;
    background-color: #161616;
    color: #fff;
    font-size: .9rem;
}

.primary-bg-color {
    color: #d3d3d3;
    background-color: #161616;
}

.tiles .tile {
    display: block;
    position: relative;
    padding: 12px 20px;
    background-color: #212121;
    border-right: 1px solid #ccc;
    text-decoration: none;
    transition: all .3sease;
}

.promo-banner {
    margin: 0;
    padding: 15px 10px 20px 10px;
    background-color: #212121;
    border: 1px solid #ddd;
    font-size: 1em;
    overflow: auto;
}

html #btnCompleteProductConfig .btn {
    background-color: #f10000;
}

.btn-primary {
    color: #fff;
    background-color: #f10000;
    border-color: #f10000;
}

.btn-primary:hover {
    color: #161616;
    background-color: #4AF626;
    border-color: #4AF626;
}

.btn-outline-primary {
    color: #f10000;
    border-color: #f10000;
    border-width: 2px;    
}

.btn-outline-primary:hover {
    color: #222;
    background-color: #fff;
    border-color: #fff;
}

.btn-info {
    color: #fff;
    background-color: #f10000;
    border-color: #f10000;
}

.btn-info:hover {
    color: #161616;
    background-color: #4AF626;
    border-color: #4AF626;
}

.btn-success {
    color: #fff;
    background-color: #f10000;
    border-color: #f10000;
}

.btn-success:hover {
    color: #161616;
    background-color: #4AF626;
    border-color: #4AF626;
}

.status-accepted {
    background-color: #4AF626;
    color: #161616;
}

.status-paid {
    background-color: #4AF626;
    color: #161616;
}

.status-unpaid {
    background-color: #f10000;
    color: #161616;
}

.status-delivered {
    background-color: #4AF62622;
}

.spotlight-tld .btn:not(.domain-contact-support) {
    padding: 2px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    background-color: #f10000;
    border-color: #f10000;
    color: #fff;
    width: 85%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.table-list thead th {
    padding: 8px;
    background-color: #212121;
    border-bottom: 1px solid #ccc;
    color: #fff;
    text-align: center;
}

.table td, .table th {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #222;
}

.list-group-item {
    position: relative;
    display: block;
    padding: .75rem 1.25rem;
    background-color: #212121;
    border: 1px solid rgba(255, 255, 255, .125);
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #212121;
    background-clip: border-box;
    border: 1px solid #222222;
    border-radius: 0rem;
}

html #sylius-billing-address .card {
    word-wrap: break-word;
    background-clip: border-box;
    background-color: #212121;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}

.client-home-cards .card-header {
    background-color: #212121;
    border-bottom: 0;
    font-weight: 700;
}

.client-home-cards .list-group .list-group-item {
    padding: 4px 10px;
    border: 0;
    border-bottom: 1px solid #333;
}

.invoice-summary-table td.total-row {
    background-color: #212121;
    font-weight: 700;
}

html #order-standard_cart .products .product {
    padding: 1px 0 10px 0;
    margin: 0 0 20px 0;
    background: #212121;
    border-radius: 3px;
    border: 0px solid #ddd;
}

html #order-standard_cart .products .product div.product-desc {
    float: left;
    width: 60%;
    padding: 8px 14px;
    font-size: .9em;
}

html #order-standard_cart .products .product header {
    position: relative;
    padding: 10px 20px;
    margin: 0 1px;
    background: #333;
    border-radius: 3px 3px 0 0;
}

html #order-standard_cart .product-info .product-title {
    margin: 0;
    font-size: 1.9em;
    font-weight: 500;
}

html #order-standard_cart .product-info {
    margin: 0 0 20px 0;
    padding: 6px 15px;
    font-size: .9em;
    background-color: #212121;
    border-top: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
}

ul#nav.navbar-nav {
    margin-left: 26%;
}

ul#nav.navbar-nav li a {
    padding-bottom: 2rem; /* Ensure consistent spacing */
    border-bottom: transparent 4px solid; /* Start with a transparent border */
    transition: border-bottom 0.3s ease-in-out 0.1s; /* Transition with delay */
}

ul#nav.navbar-nav li:hover a { 
    border-bottom: #f10000 8px solid;
    padding-bottom: 2rem;

}

ul#nav.navbar-nav li:hover a.dropdown-item{
    border-bottom:none;
}

ul#nav.navbar-nav li.dropdown-item a:hover{
//background-color: #f10000;
}

.dataTables_wrapper table.table-list {
    margin: 10px 0 !important;
    width: 100% !important;
    border-radius: 0px;
    border: 1px solid #222222;
}

.wbteampro a {
    color: #ffffff !important;
}

.wbteampro a:hover {
    color: #4AF626 !important;
    text-decoration: none !important;
}

html #wbteampro .dashboard .datatable tr th {
    color: #fff !important;
    border: none;
    padding: 8px 12px;
    text-align: left;
}

html #wbteampro .dashboard .datatable {
    background: #212121;
    border-radius: 4px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
}

html #wbteampro .datatable tr.action.overdue td {
    background-color: #f663;
}

html #wbteampro #tabs>ul {
    margin: 0;
    height: 38px;
    border-bottom: 1px solid #333;
}

html #wbteampro #tabs>ul>li>a, #wbteampro #tabs>ul>li>div {
    display: block;
    padding: 0 12px;
    margin: 0;
    line-height: 36px;
    background: #212121 !important;
    border-radius: 0;
    border: 1px solid #222;
    border-bottom: 1px solid #222;
    text-decoration: none;
    transition: background-color .25s;
}

html #wbteampro #tabs + .tabbox, #wbteampro #tabs + .tab-content {
    position: relative;
    background: #212121 !important;
    padding: 10px 15px;
    border-radius: 0 0 0 0;
    border: 1px solid #212121 !important;
    border-top: 0;
    margin-bottom: 15px;
}

html #wbteampro .datatable td.fieldlabel {
    text-align: right;
    color: #fff;
    white-space: nowrap;
}

html #wbteampro .datatable_wrapper .datatablecontrol {
    background: 0;
    border: 0;
    border-bottom: 1px solid #333;
}

html .wbteampro .table thead th {
    vertical-align: bottom;
    border-bottom: 1px solid #333;
}

html #wbteampro .datatable tr.action.task td {
    color: #fff !important;
}

html #wbteampro .tabItemEdit .form {
    background: #333333 !important;
}

html #wbteampro .tabItemEdit .form .fieldlabel {
    width: 1%;
    white-space: nowrap;
    color: #ffffff !important;
    line-height: 32px;
    vertical-align: top;
}

.wbteampro.panel>.panel-body .datatable tbody tr td {
    padding: .5rem;
    border-top: 1px solid #333 !important;
}

.wbteampro .table th, .wbteampro .table td {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #333 !important;
}

.badge-info {
    color: #000000;
    background-color: #4AF626;
}

.label {
    max-width: 100%;
    margin-bottom: 5px;
    border-radius: 4px;
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    color: #fff; /* Disable tempoararily 20250321JA*/
}

.label-success {
    background-color: #4AF626;
    color: #000 !important;
}

.status-active, .status-completed, .status-open {
    background-color: #4AF626;
    color: #000000;
}

.status-cancelled {
    background-color: #87939f;
    color: #000;
}

.status-terminated {
    background-color: #f10000;
    color: #000;
}

.bg-color-green {
    background-color: #4AF626;
}

.bg-color-red {
    background-color: #f10000;
}

.promo-banner.sitelockvpn .btn:hover {
    background-color: #F10000;
    color:white;
}

button#btnCheckAvailability.btn-primary:focus,button#btnCheckAvailability.btn-primary:not(:disabled):not(.disabled):active{
    background-color: #F10000;
    border-color: #F10000;
    box-shadow: 0 0 0 .2rem rgba(241,0,0,.5);
}

div.spotlight-tld-container .spotlight-tld{
    background-color: #212121;
    color: #FFFFFF;
}
div.spotlight-tld-container .spotlight-tld .btn:not(.domain-contact-support){
    background-color: #F10000;
}
div#spotlightTlds.spotlight-tlds{
    background-color:#161616;
}

.domain-renewals, .service-renewals, .addon-renewals .service-renewal {
    background-color: #212121 !important;
}

.domain-renewals, .service-renewals {
    margin: 10px 0;
    border-top: 1px solid #444 !important;
}

.domain-renewals .domain-renewal, .service-renewals .service-renewal {
    margin: 0;
    padding: 15px;
    border-bottom: 1px solid #444 !important;
}

.suggested-domains .card-header, .suggested-domains .panel-heading{
    border-bottom:2px solid #212121 !important;
}

.panel-add {
    display: block;
    padding: 4px;
    background-color: #f10000 !important;
    color: #fff;
    border-radius: 0 0 4px 4px;
}

#jQueryGanttLeft table tr.action td.name div a span,#jQueryGanttTaskList .trow .txtr{
    color:  #000000 !important;
}
.wbteampro .btn.btn-default, .wbteampro .ui-dialog-buttonpane .ui-dialog-buttonset > .button.btn-default{
    background-color: #f10000 !important;
    border-color: #f10000 !important;
}

div.recent-ticket>small>span {
    color:#ffffff !important;
}
#jQueryGanttCenter .jQueryGanttDateMinor td,#jQueryGanttCenter .jQueryGanttDateMajor td,#jQueryGanttLeft table tr th{
    color: #000000 !important;
}
.landing-page.ssl .validation-levels{
    background-color: #161616 !important;
}
.viewsowbtn{
    background-color:#f10000;
    color:white;
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
    border-color: #f10000;
}
.viewsowbtn:hover{
    background-color:#4AF626;
    color: #161616;
    
}
ul#nav.navbar-nav li:hover .collapsable-dropdown-menu  a{
    border-bottom:none;
}
#app{
    color:#e9ecef !important;
}
.bg-info {
background-color: #f10000 !important;
}