:root{
    --bg:#07090d;
    --bg2:#0c0f14;
    --box:#101318;
    --box2:#171b22;
    --box3:#1c2129;
    --border:#2b313b;
    --border2:#363d48;
    --red:#ef1b30;
    --red2:#b90d1d;
    --white:#ffffff;
    --text:#edf0f3;
    --muted:#9ba3ad;
    --green:#3ca653;
}

*{
    box-sizing:border-box!important;
}

html,
body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
}

html{
    color-scheme:dark;
}

body{
    margin:0!important;
    background:var(--bg)!important;
    color:var(--text)!important;
    font-family:Arial,Helvetica,sans-serif!important;
}

img,
video,
iframe{
    max-width:100%!important;
    height:auto!important;
}

a{
    color:#ff4656;
}

a:hover{
    color:#ff7781;
    text-decoration:none;
}

h1,h2,h3,h4,h5,h6{
    color:#fff!important;
}

/* =====================================================
   HEADER NOU
===================================================== */

.sp-top{
    position:sticky;
    top:0;
    z-index:99999;
    width:100%;
    background:#07090d;
    border-bottom:1px solid var(--red);
    box-shadow:0 6px 25px rgba(0,0,0,.35);
}

.sp-top-inner{
    max-width:1280px;
    min-height:64px;
    margin:auto;
    padding:0 18px;
    display:flex;
    align-items:center;
    gap:20px;
}

.sp-logo{
    color:#fff!important;
    text-decoration:none!important;
    font-size:22px;
    font-weight:900;
    white-space:nowrap;
}

.sp-logo-red{
    color:var(--red);
}

.sp-top-menu{
    display:flex;
    align-items:center;
    gap:2px;
}

.sp-top-menu a{
    color:#e8ebef!important;
    text-decoration:none!important;
    padding:9px 11px;
    border-radius:6px;
    font-size:13px;
    font-weight:700;
}

.sp-top-menu a:hover{
    background:#181d24;
}

.sp-top-user{
    margin-left:auto;
    display:flex;
    gap:7px;
    align-items:center;
}

.sp-small{
    min-height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 11px;
    border-radius:6px;
    border:1px solid #343b46;
    background:#11151b;
    color:#fff!important;
    font-size:11px;
    font-weight:800;
    text-decoration:none!important;
}

.sp-red{
    background:var(--red);
    border-color:var(--red);
}

.sp-red:hover{
    background:var(--red2);
}

.sp-sold{
    color:#c4c9d0;
    font-size:11px;
}

.sp-mobile{
    display:none;
    margin-left:auto;
    width:36px;
    height:34px;
    background:#11151b;
    border:1px solid #343b46;
    border-radius:6px;
    color:#fff;
}

/* =====================================================
   WHMCS HEADER / MENIU
===================================================== */

header.header,
header.header .navbar,
.navbar,
.navbar-light,
.navbar-default,
.top-nav{
    background:#0c0f14!important;
    color:#fff!important;
    border-color:var(--border)!important;
}

header.header a,
.navbar a{
    color:#e4e7eb!important;
}

.master-breadcrumb,
.breadcrumb,
.breadcrumb-container{
    background:#101318!important;
    color:#b8bec7!important;
    border-color:var(--border)!important;
}

.breadcrumb a{
    color:#e1e4e8!important;
}

/* =====================================================
   FUNDAL GLOBAL - TOT INCHIS
===================================================== */

section#main-body,
#main-body,
.main-body,
.main-content,
.primary-content,
.content-padded,
.container-fluid{
    background:var(--bg)!important;
    color:#fff!important;
}

#main-body > .container,
#main-body .container{
    background:transparent!important;
}

/* =====================================================
   TOATE BOX-URILE
===================================================== */

.card,
.card-body,
.card-header,
.card-footer,
.panel,
.panel-body,
.panel-heading,
.panel-footer,
.well,
.jumbotron,
.modal-content,
.modal-body,
.modal-header,
.modal-footer,
.invoice-container,
.table-container,
.dataTables_wrapper,
.list-group,
.popover,
.popover-header,
.popover-body,
.auth-container,
.logincontainer,
.login-container,
.registration-form{
    background:var(--box)!important;
    color:#fff!important;
    border-color:var(--border)!important;
    box-shadow:none!important;
}

.card-header,
.card-footer,
.panel-heading,
.panel-footer,
.modal-header,
.modal-footer{
    background:var(--box2)!important;
}

/* =====================================================
   SIDEBAR
===================================================== */

.sidebar .panel,
.sidebar .card{
    background:var(--box)!important;
    border-color:var(--border)!important;
}

.list-group-item,
.sidebar .list-group-item{
    background:#0e1116!important;
    color:#e7eaee!important;
    border-color:var(--border)!important;
}

.list-group-item:hover,
.sidebar .list-group-item:hover{
    background:#191e25!important;
    color:#fff!important;
}

.list-group-item.active,
.sidebar .list-group-item.active{
    background:linear-gradient(90deg,#76101a,#321014)!important;
    color:#fff!important;
    border-color:#971523!important;
}

/* =====================================================
   NOTIFICARI
===================================================== */

.client-alerts,
.top-alerts,
.notifications,
.notification,
.notification-area,
#notifications{
    background:#1b1f26!important;
    color:#fff!important;
    border-color:#3a414c!important;
}

.client-alerts *,
.top-alerts *,
.notifications *,
.notification *,
.notification-area *,
#notifications *{
    color:#fff!important;
    opacity:1!important;
}

.notifications .badge,
.notification .badge,
.badge-notification{
    background:var(--red)!important;
    color:#fff!important;
}

/* =====================================================
   FORMULARE
===================================================== */

.form-control,
.custom-select,
select,
textarea,
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=tel],
input[type=url],
input[type=search]{
    background:#090c10!important;
    color:#fff!important;
    border:1px solid #373e49!important;
}

.form-control:focus,
select:focus,
textarea:focus,
input:focus{
    background:#090c10!important;
    color:#fff!important;
    border-color:var(--red)!important;
    box-shadow:0 0 0 3px rgba(239,27,48,.12)!important;
}

input::placeholder,
textarea::placeholder{
    color:#747c87!important;
}

.input-group-text,
.input-group-addon{
    background:#191e25!important;
    color:#fff!important;
    border-color:#373e49!important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
    -webkit-text-fill-color:#fff!important;
    -webkit-box-shadow:0 0 0 1000px #090c10 inset!important;
}

/* =====================================================
   BUTOANE
===================================================== */

.btn{
    border-radius:6px!important;
    font-weight:700!important;
}

.btn-primary,
.btn-success,
.btn-danger{
    background:var(--red)!important;
    border-color:var(--red)!important;
    color:#fff!important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover{
    background:var(--red2)!important;
    border-color:var(--red2)!important;
}

.btn-default,
.btn-secondary,
.btn-light{
    background:#191e25!important;
    color:#fff!important;
    border-color:#373e49!important;
}

/* =====================================================
   TABELE - FARA ALB
===================================================== */

.table-responsive,
.table,
table,
thead,
tbody,
tfoot{
    background:var(--box)!important;
    color:#fff!important;
}

.table thead,
table thead,
.table thead tr,
table thead tr{
    background:#1a1f27!important;
}

.table thead th,
table thead th{
    background:#1a1f27!important;
    color:#fff!important;
    border-color:#343b46!important;
}

.table tbody,
table tbody{
    background:#101318!important;
}

.table tbody tr,
table tbody tr{
    background:#101318!important;
}

.table tbody tr:nth-child(even),
table tbody tr:nth-child(even){
    background:#0d1015!important;
}

.table tbody td,
table tbody td{
    background:transparent!important;
    color:#e8ebef!important;
    border-color:#303640!important;
}

.table tbody td a,
table tbody td a{
    color:#fff!important;
    font-weight:700!important;
}

.dataTables_empty{
    background:#101318!important;
    color:#939ba6!important;
}

/* =====================================================
   SERVICIILE MELE
===================================================== */

#tableServicesList,
#tableServicesList_wrapper,
#tableServicesList tbody,
#tableServicesList tbody tr,
#tableServicesList tbody td{
    background:#101318!important;
    color:#e8ebef!important;
}

#tableServicesList tbody tr:nth-child(even){
    background:#0d1015!important;
}

#tableServicesList thead th{
    background:#1a1f27!important;
    color:#fff!important;
}

#tableServicesList tbody a{
    color:#fff!important;
}

/* =====================================================
   DETALII SERVICIU
===================================================== */

.product-details,
.product-details .card,
.product-details .panel,
.product-details .card-body,
.product-details .panel-body{
    background:#101318!important;
    color:#fff!important;
    border-color:var(--border)!important;
}

.product-details .product-icon,
.product-details .product-image,
.product-details .product-status,
.product-details .product-status-wrapper{
    background:
        radial-gradient(circle at 50% 35%,rgba(239,27,48,.13),transparent 40%),
        linear-gradient(145deg,#171b22,#0d1015)!important;
    color:#fff!important;
}

.product-details .product-icon *,
.product-details .product-image *,
.product-details .product-status *{
    color:#fff!important;
}

.product-details .product-icon i,
.product-details .product-image i,
.product-details .fa,
.product-details .fas{
    color:var(--red)!important;
    opacity:1!important;
}

.product-details .product-title,
.product-details .product-name{
    color:#fff!important;
    font-weight:900!important;
}

/* ACTIV */
.label-success,
.badge-success,
.status-active,
.product-status-active{
    background:var(--green)!important;
    color:#fff!important;
}

/* =====================================================
   TICHETE - COMPLET NEGRE
===================================================== */

.CodeMirror,
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-lines,
.CodeMirror-code,
.CodeMirror-gutters,
.CodeMirror pre,
.CodeMirror-line,
.CodeMirror-line-like{
    background:#090c10!important;
    color:#fff!important;
}

.CodeMirror{
    border:1px solid #373e49!important;
}

.CodeMirror-cursor{
    border-left:1px solid #fff!important;
}

.CodeMirror-gutters{
    border-right:1px solid #373e49!important;
}

.editor-toolbar{
    background:#11151b!important;
    border:1px solid #373e49!important;
    border-bottom:0!important;
    opacity:1!important;
}

.editor-toolbar a,
.editor-toolbar button{
    background:#171c23!important;
    color:#fff!important;
    border-color:#303640!important;
}

.editor-toolbar a:hover,
.editor-toolbar a.active{
    background:#252b34!important;
    color:#fff!important;
    border-color:var(--red)!important;
}

.editor-toolbar i,
.editor-toolbar svg{
    color:#fff!important;
    fill:#fff!important;
}

.editor-statusbar{
    background:#090c10!important;
    color:#858d98!important;
    border:1px solid #373e49!important;
    border-top:0!important;
}

.editor-preview,
.editor-preview-side{
    background:#101318!important;
    color:#fff!important;
}

textarea[name=message]{
    background:#090c10!important;
    color:#fff!important;
}

/* atasamente */
input[type=file]{
    width:100%!important;
    background:#090c10!important;
    color:#aab2bd!important;
    border:1px solid #373e49!important;
}

input[type=file]::file-selector-button{
    background:#1a1f27!important;
    color:#fff!important;
    border:0!important;
    border-right:1px solid #373e49!important;
    padding:8px 12px!important;
}

/* =====================================================
   DROPDOWN
===================================================== */

.dropdown-menu{
    background:#101318!important;
    color:#fff!important;
    border-color:#303640!important;
}

.dropdown-menu a,
.dropdown-item{
    color:#fff!important;
}

.dropdown-menu a:hover,
.dropdown-item:hover{
    background:#1b2028!important;
    color:#fff!important;
}

/* =====================================================
   NAV TABS
===================================================== */

.nav-tabs{
    border-color:#303640!important;
}

.nav-tabs .nav-link,
.nav-tabs li a{
    background:#11151b!important;
    color:#c4cad2!important;
    border-color:#303640!important;
}

.nav-tabs .nav-link.active,
.nav-tabs li.active a{
    background:#191e25!important;
    color:#fff!important;
    border-top:2px solid var(--red)!important;
}

/* =====================================================
   ORDER / CART
===================================================== */

#order-standard_cart,
#order-standard_cart .product,
#order-standard_cart .product-info,
#order-standard_cart .product-desc,
#order-standard_cart .product-details,
#order-standard_cart .summary-container,
#order-standard_cart .order-summary,
#order-standard_cart .view-cart-items,
#order-standard_cart .view-cart-items .item,
#order-standard_cart .cart-body,
#order-standard_cart .cart-sidebar,
#order-standard_cart .checkout-security-msg,
#order-standard_cart .panel-addon{
    background:#101318!important;
    color:#fff!important;
    border-color:#303640!important;
}

#order-standard_cart .product header{
    background:#171b22!important;
    color:#fff!important;
    font-weight:900!important;
}

#order-standard_cart .product header *,
#order-standard_cart .product-title,
#order-standard_cart .product-name{
    color:#fff!important;
    font-weight:900!important;
}

#order-standard_cart .sub-heading span{
    background:#07090d!important;
    color:var(--red)!important;
}

#order-standard_cart .btn-order-now{
    min-height:31px!important;
    width:auto!important;
    padding:5px 10px!important;
    font-size:11px!important;
}

/* =====================================================
   HOMEPAGE
===================================================== */

.sp-home{
    background:#07090d;
}

.sp-home-hero{
    padding:80px 20px 70px;
    background:
        radial-gradient(circle at 82% 15%,rgba(239,27,48,.18),transparent 34%),
        radial-gradient(circle at 14% 80%,rgba(239,27,48,.06),transparent 35%),
        #080a0e;
    text-align:center;
}

.sp-home-hero h1{
    max-width:900px;
    margin:10px auto 16px;
    font-size:46px;
    font-weight:900;
}

.sp-home-hero p{
    max-width:720px;
    margin:0 auto;
    color:#a2aab4!important;
    font-size:16px;
    line-height:1.7;
}

.sp-home-section{
    padding:65px 20px;
    background:#07090d;
}

.sp-home-section.alt{
    background:#0c0f14;
}

.sp-wrap{
    max-width:1280px;
    margin:auto;
}

.sp-title{
    max-width:720px;
    margin:0 auto 34px;
    text-align:center;
}

.sp-title h2{
    font-size:31px;
    font-weight:900;
}

.sp-title p{
    color:#98a0aa!important;
}

.sp-plans{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:16px;
}

.sp-plan{
    position:relative;
    overflow:hidden;
    padding:24px 18px;
    background:#101318;
    border:1px solid #2b313b;
    border-radius:11px;
}

.sp-plan h3{
    color:#fff!important;
    font-size:19px;
    font-weight:900;
}

.sp-plan-price{
    color:#fff;
    margin:15px 0;
    font-size:27px;
    font-weight:900;
}

.sp-plan-price small{
    color:#929aa5!important;
    font-size:10px;
}

.sp-plan ul{
    min-height:215px;
    margin:0 0 20px;
    padding:0;
    list-style:none;
}

.sp-plan li{
    position:relative;
    padding:7px 0 7px 17px;
    color:#d9dde2;
    font-size:11px;
    border-bottom:1px solid #252a32;
}

.sp-plan li:before{
    content:"✓";
    position:absolute;
    left:0;
    color:var(--red);
}

.sp-plan.recommended{
    border:2px solid var(--red);
}

.sp-ribbon{
    position:absolute;
    top:15px;
    right:-38px;
    width:145px;
    padding:5px 0;
    transform:rotate(39deg);
    background:var(--red);
    color:#fff;
    text-align:center;
    font-size:9px;
    font-weight:900;
}

.sp-order{
    display:inline-flex;
    min-height:32px;
    padding:0 12px;
    align-items:center;
    justify-content:center;
    background:var(--red);
    color:#fff!important;
    border-radius:6px;
    text-decoration:none!important;
    font-size:11px;
    font-weight:800;
}

/* =====================================================
   FOOTER
===================================================== */

.sp-footer{
    padding:44px 20px 18px;
    background:#07090d;
    border-top:1px solid #252a32;
}

.sp-footer-inner{
    max-width:1280px;
    margin:auto;
}

.sp-footer-brand{
    margin-bottom:28px;
    color:#fff;
    font-size:19px;
    font-weight:900;
}

.sp-footer-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr;
    gap:45px;
}

.sp-footer h4{
    position:relative;
    color:#fff!important;
    font-size:12px;
    text-transform:uppercase;
    padding-bottom:9px;
    margin-bottom:17px;
}

.sp-footer h4:after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:38px;
    height:2px;
    background:var(--red);
}

.sp-footer p,
.sp-footer li{
    color:#9ca4ae!important;
    font-size:12px;
    line-height:1.7;
}

.sp-footer ul{
    padding:0;
    list-style:none;
}

.sp-footer a{
    color:#c1c6cd!important;
}

.sp-footer-bottom{
    margin-top:30px;
    padding-top:15px;
    border-top:1px solid #20252d;
    color:#7f8791;
    font-size:11px;
}

/* =====================================================
   FARA DOMENII
===================================================== */

a[href*="domainregister"],
a[href*="domaintransfer"],
a[href*="domainchecker"],
a[href*="action=domains"],
a[href*="a=add&domain"]{
    display:none!important;
}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:1050px){
    .sp-plans{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:800px){

    .sp-mobile{
        display:block;
    }

    .sp-top-menu,
    .sp-top-user{
        display:none;
    }

    .sp-top-inner.open{
        flex-wrap:wrap;
        padding-bottom:12px;
        background:#080a0e;
    }

    .sp-top-inner.open .sp-top-menu,
    .sp-top-inner.open .sp-top-user{
        display:flex;
        width:100%;
        flex-direction:column;
        align-items:stretch;
        background:#080a0e;
    }

    .sp-top-inner.open .sp-top-menu a,
    .sp-top-inner.open .sp-small{
        width:100%;
        background:#11151b;
        border:1px solid #252b34;
        text-align:left;
    }

    .container,
    .container-fluid,
    #main-body,
    #main-body > .container,
    #main-body .container,
    .main-content,
    .primary-content{
        width:100%!important;
        max-width:100%!important;
        margin-left:0!important;
        margin-right:0!important;
        padding-left:8px!important;
        padding-right:8px!important;
    }

    .row{
        margin-left:0!important;
        margin-right:0!important;
    }

    [class*="col-"]{
        max-width:100%!important;
    }

    .sidebar{
        width:100%!important;
        max-width:100%!important;
        margin-bottom:12px!important;
    }

    .sp-plans{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    #tableServicesList{
        width:100%!important;
        max-width:100%!important;
        table-layout:fixed!important;
        font-size:10px!important;
    }

    #tableServicesList th,
    #tableServicesList td{
        padding:5px 3px!important;
        white-space:normal!important;
        overflow-wrap:anywhere!important;
        font-size:10px!important;
    }

    #tableServicesList th:nth-child(3),
    #tableServicesList td:nth-child(3){
        display:none!important;
    }

    .table-responsive{
        width:100%!important;
        max-width:100%!important;
        overflow-x:hidden!important;
    }

    .CodeMirror,
    .CodeMirror-scroll,
    .editor-toolbar,
    .editor-statusbar,
    textarea{
        width:100%!important;
        max-width:100%!important;
    }

    .sp-footer-grid{
        grid-template-columns:1fr;
        gap:26px;
    }
}

@media(max-width:520px){

    .sp-plans{
        grid-template-columns:1fr;
    }

    .sp-plan{
        width:100%;
        max-width:100%;
    }

    .sp-home-hero{
        padding:55px 13px 50px;
    }

    .sp-home-hero h1{
        font-size:31px;
    }
}


/* =========================================================
   SUSPENET - FINISAJ FARA ALB
========================================================= */

/* =========================================================
   MENIU SUS - FIECARE LINK CA BUTON
========================================================= */

.sp-top-menu {
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
}

.sp-top-menu a {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:34px !important;
    padding:0 12px !important;

    background:#101318 !important;
    border:1px solid #2e3540 !important;
    border-radius:6px !important;

    color:#ffffff !important;
    font-size:11px !important;
    font-weight:700 !important;

    transition:.15s ease !important;
}

.sp-top-menu a:hover {
    background:#1a1f27 !important;
    border-color:#ef1b30 !important;
    color:#ffffff !important;
}


/* =========================================================
   SCOATE COMPLET FOOTERUL ORIGINAL WHMCS
   ALA GRI CU CONTACT + MONEDA + COPYRIGHT
========================================================= */

footer.footer,
body > footer.footer {
    display:none !important;
}

/* footerul nostru ramane */
footer.sp-footer {
    display:block !important;
    background:#07090d !important;
}


/* =========================================================
   PANOUL RADIO - FARA CHENAR / FUNDAL ALB
========================================================= */

.product-details .tab-content,
.product-details .tab-pane,
.product-details .tab-content > .tab-pane,
.product-details .panel-body,
.product-details .card-body,

.tab-content,
.tab-content > .tab-pane,
.tab-pane.active {
    background:#101318 !important;
    color:#ffffff !important;
    border-color:#2b313b !important;
}

/* elimina acel dreptunghi alb mare din jurul Panou Radio */
.tab-content > .active,
.tab-content > .tab-pane.active {
    background:#101318 !important;
}

.product-details .tab-content {
    border:1px solid #2b313b !important;
}

/* continut modul radio */
.product-details .tab-pane > div,
.product-details .tab-pane > section,
.product-details .tab-pane > article {
    background:#101318 !important;
    color:#ffffff !important;
    border-color:#2b313b !important;
}


/* =========================================================
   EDITOR TICHETE - ABSOLUT TOT DARK
========================================================= */

textarea.markdown-editor,
textarea[name="message"],
#message {
    background:#0a0d11 !important;
    color:#ffffff !important;
    border:1px solid #363d48 !important;
}

div.CodeMirror,
div.CodeMirror.cm-s-default,
div.CodeMirror.cm-s-paper,
.CodeMirror,
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-code,
.CodeMirror-lines,
.CodeMirror-gutters,
.CodeMirror pre,
.CodeMirror-line,
.CodeMirror-line-like {
    background-color:#0a0d11 !important;
    background:#0a0d11 !important;
    color:#ffffff !important;
}

.CodeMirror {
    border:1px solid #363d48 !important;
}

.CodeMirror-scroll {
    min-height:270px !important;
}

.CodeMirror-gutters {
    border-right:1px solid #363d48 !important;
}

.CodeMirror-cursor {
    border-left:1px solid #ffffff !important;
}

.CodeMirror-selected {
    background:#333945 !important;
}

.CodeMirror-focused .CodeMirror-selected {
    background:#3b424e !important;
}


/* toolbar editor */
.editor-toolbar {
    background:#11151b !important;
    border:1px solid #363d48 !important;
    border-bottom:0 !important;
    opacity:1 !important;
}

.editor-toolbar:before,
.editor-toolbar:after {
    display:none !important;
}

.editor-toolbar a,
.editor-toolbar button {
    background:#171c23 !important;
    color:#ffffff !important;
    border:1px solid #2d343e !important;
}

.editor-toolbar a:hover,
.editor-toolbar a.active,
.editor-toolbar button:hover {
    background:#252b34 !important;
    color:#ffffff !important;
    border-color:#ef1b30 !important;
}

.editor-toolbar i,
.editor-toolbar svg {
    color:#ffffff !important;
    fill:#ffffff !important;
}


/* status editor */
.editor-statusbar {
    background:#0a0d11 !important;
    color:#828a95 !important;
    border:1px solid #363d48 !important;
    border-top:0 !important;
}

.editor-preview,
.editor-preview-side {
    background:#101318 !important;
    color:#ffffff !important;
}


/* =========================================================
   ATASAMENTE - SCOATE BARA ALBA
========================================================= */

input[type="file"] {
    background:#0a0d11 !important;
    color:#aab2bc !important;
    border:1px solid #363d48 !important;
}

input[type="file"]::file-selector-button {
    background:#1a1f27 !important;
    color:#ffffff !important;
    border:0 !important;
    border-right:1px solid #363d48 !important;
}


/* =========================================================
   ORICE ALB RAMAS IN FORMULARE / CARDURI
========================================================= */

.bg-white,
.bg-light,
.table-light,
.card.bg-white,
.panel.bg-white,
.modal-content,
.dropdown-menu {
    background:#101318 !important;
    color:#ffffff !important;
}

.form-control,
input,
textarea,
select {
    background-color:#0a0d11 !important;
    color:#ffffff !important;
}


/* =========================================================
   FOOTER SUSPENET
========================================================= */

.sp-footer {
    background:#07090d !important;
    border-top:1px solid #262c35 !important;
}

.sp-footer-brand {
    color:#ffffff !important;
    font-size:19px !important;
}

.sp-footer-brand .sp-logo-red {
    color:#ef1b30 !important;
}

.sp-footer-grid {
    display:grid !important;
    grid-template-columns:1.25fr 1fr 1fr !important;
    gap:45px !important;
}

.sp-footer h4 {
    position:relative !important;
    color:#ffffff !important;
    font-weight:800 !important;
    padding-bottom:10px !important;
}

.sp-footer h4:after {
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    bottom:0 !important;
    width:38px !important;
    height:2px !important;
    background:#ef1b30 !important;
}

.sp-footer p,
.sp-footer li {
    color:#9ca4ae !important;
}

.sp-footer a {
    color:#c3c8cf !important;
}

.sp-footer a:hover {
    color:#ef1b30 !important;
}


/* =========================================================
   MOBIL - UN SINGUR MENIU
========================================================= */

@media(max-width:800px) {

    /*
     * Ascundem meniul/headerul mobil original WHMCS.
     * Ramane DOAR meniul SusPenet.
     */
    header.header,
    .main-navbar-wrapper,
    .navbar-main,
    .primary-navbar {
        display:none !important;
    }

    .sp-top {
        width:100% !important;
        max-width:100% !important;
    }

    .sp-top-inner {
        width:100% !important;
        max-width:100% !important;
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .sp-top-inner.open {
        background:#07090d !important;
        border-bottom:1px solid #ef1b30 !important;
        box-shadow:0 16px 35px rgba(0,0,0,.75) !important;
    }

    .sp-top-inner.open .sp-top-menu {
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        gap:6px !important;
    }

    .sp-top-inner.open .sp-top-menu a {
        display:flex !important;
        justify-content:flex-start !important;

        width:100% !important;
        min-height:39px !important;

        padding:0 12px !important;

        background:#11151b !important;
        border:1px solid #2c333d !important;
        border-radius:6px !important;

        color:#ffffff !important;
    }

    .sp-top-inner.open .sp-top-menu a:hover {
        border-color:#ef1b30 !important;
        background:#191e25 !important;
    }

    .sp-top-inner.open .sp-top-user {
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        gap:6px !important;
    }

    .sp-top-inner.open .sp-small {
        width:100% !important;
        justify-content:flex-start !important;
    }

    /*
     * NIMIC nu trebuie sa iasa din ecran.
     */
    html,
    body {
        width:100% !important;
        max-width:100% !important;
        overflow-x:hidden !important;
    }

    #main-body,
    #main-body > .container,
    #main-body .container,
    .container,
    .container-fluid,
    .main-content,
    .primary-content {
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
        padding-left:8px !important;
        padding-right:8px !important;
    }

    .row {
        margin-left:0 !important;
        margin-right:0 !important;
    }

    [class*="col-"] {
        max-width:100% !important;
    }

    .CodeMirror,
    .CodeMirror-scroll,
    .editor-toolbar,
    .editor-statusbar,
    input,
    select,
    textarea {
        max-width:100% !important;
    }

    .sp-footer-grid {
        grid-template-columns:1fr !important;
        gap:27px !important;
    }

}

/* =========================================================
   FIX MOBILE MENU + SERVICII + TICHETE
========================================================= */

/* MENIU DESKTOP - ramane normal */
.sp-top-menu{
    display:flex;
}

/* =========================================================
   MOBILE - SUS RAMANE DOAR BUTONUL DE MENIU
========================================================= */
@media(max-width:800px){

    .sp-top-menu,
    .sp-top-user{
        display:none !important;
    }

    .sp-mobile{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        margin-left:auto !important;
    }

    .sp-top-inner.open{
        flex-wrap:wrap !important;
        background:#07090d !important;
    }

    .sp-top-inner.open .sp-top-menu{
        display:flex !important;
        width:100% !important;
        flex-direction:column !important;
        gap:6px !important;
        margin-top:8px !important;
    }

    .sp-top-inner.open .sp-top-menu a{
        width:100% !important;
        justify-content:flex-start !important;
        background:#11151b !important;
        border:1px solid #2d343e !important;
        border-radius:6px !important;
        color:#fff !important;
        padding:10px 12px !important;
    }

    .sp-top-inner.open .sp-top-user{
        display:flex !important;
        width:100% !important;
        flex-direction:column !important;
        gap:6px !important;
        margin-top:6px !important;
    }
}

/* =========================================================
   SERVICIILE MELE - TOT DARK
========================================================= */

#tableServicesList,
#tableServicesList_wrapper,
#tableServicesList thead,
#tableServicesList tbody,
#tableServicesList tr,
#tableServicesList th,
#tableServicesList td,
.table-list,
.table-list thead,
.table-list tbody,
.table-list tr,
.table-list th,
.table-list td{
    background:#101318 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

#tableServicesList thead th,
.table-list thead th{
    background:#191e25 !important;
    color:#ffffff !important;
    font-weight:700 !important;
}

#tableServicesList tbody tr:nth-child(even),
.table-list tbody tr:nth-child(even){
    background:#0d1015 !important;
}

#tableServicesList tbody td,
.table-list tbody td{
    background:transparent !important;
    color:#e8eaed !important;
}

#tableServicesList a,
.table-list a{
    color:#ffffff !important;
}

/* cele 4 coloane sa nu mai aiba alb */
#tableServicesList th:nth-child(1),
#tableServicesList td:nth-child(1),
#tableServicesList th:nth-child(2),
#tableServicesList td:nth-child(2),
#tableServicesList th:nth-child(3),
#tableServicesList td:nth-child(3),
#tableServicesList th:nth-child(4),
#tableServicesList td:nth-child(4){
    background:#101318 !important;
}

/* =========================================================
   TICHET - EDITORUL MARE SA FIE NEGRU
========================================================= */

textarea[name="message"],
textarea.markdown-editor,
#message{
    background:#090c10 !important;
    color:#ffffff !important;
    border:1px solid #363d48 !important;
}

/* CodeMirror / EasyMDE */
.CodeMirror,
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-lines,
.CodeMirror-code,
.CodeMirror-gutters,
.CodeMirror pre,
.CodeMirror-line,
.CodeMirror-line-like,
.CodeMirror-wrap{
    background:#090c10 !important;
    color:#ffffff !important;
}

.CodeMirror{
    border:1px solid #363d48 !important;
}

.CodeMirror pre{
    color:#ffffff !important;
}

.CodeMirror-cursor{
    border-left:1px solid #ffffff !important;
}

.CodeMirror-gutters{
    background:#090c10 !important;
    border-right:1px solid #363d48 !important;
}

.CodeMirror-selected{
    background:#343b46 !important;
}

/* unele versiuni EasyMDE lasa fundal inline alb */
.cm-s-paper.CodeMirror,
.cm-s-default.CodeMirror{
    background:#090c10 !important;
    color:#ffffff !important;
}

.cm-s-paper .CodeMirror-line,
.cm-s-default .CodeMirror-line{
    background:#090c10 !important;
    color:#ffffff !important;
}

/* toolbar */
.editor-toolbar{
    background:#11151b !important;
    border:1px solid #363d48 !important;
    border-bottom:0 !important;
    opacity:1 !important;
}

.editor-toolbar a{
    background:#171c23 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

/* status bar jos */
.editor-statusbar{
    background:#090c10 !important;
    color:#858d98 !important;
    border:1px solid #363d48 !important;
    border-top:0 !important;
}

/* preview */
.editor-preview,
.editor-preview-side{
    background:#101318 !important;
    color:#ffffff !important;
}

/* atasament fara alb */
input[type="file"]{
    background:#090c10 !important;
    color:#c0c6ce !important;
    border:1px solid #363d48 !important;
}

input[type="file"]::file-selector-button{
    background:#1a1f27 !important;
    color:#ffffff !important;
    border:0 !important;
    border-right:1px solid #363d48 !important;
}

/* =========================================================
   SUSPENET - FIX PUNCTUAL 23 AUG
========================================================= */

/* COMANDA - buton mic, normal */
#order-standard_cart .btn-order-now,
#order-standard_cart a.btn-order-now,
#order-standard_cart .product .btn,
.sp-order {
    width:auto !important;
    min-width:0 !important;
    min-height:29px !important;
    height:auto !important;
    padding:5px 10px !important;
    font-size:10px !important;
    line-height:1.2 !important;
    border-radius:5px !important;
    font-weight:700 !important;
}

/* AUTENTIFICARE / INREGISTRARE mai compacte */
.sp-top-user .sp-small,
.sp-small {
    width:auto !important;
    min-width:0 !important;
    min-height:29px !important;
    height:29px !important;
    padding:0 9px !important;
    font-size:10px !important;
    line-height:27px !important;
    white-space:nowrap !important;
}

/* optiunile contului sunt ascunse pe desktop */
.sp-mobile-account {
    display:none;
}

/* =========================================================
   TICHETE - ZONA DE SCRIS COMPLET NEAGRA
========================================================= */

/* EasyMDE / CodeMirror */
body .CodeMirror,
body .CodeMirror-scroll,
body .CodeMirror-sizer,
body .CodeMirror-lines,
body .CodeMirror-code,
body .CodeMirror-gutters,
body .CodeMirror-wrap,
body .cm-s-paper,
body .cm-s-default {
    background:#090c10 !important;
    background-color:#090c10 !important;
    color:#ffffff !important;
}

body .CodeMirror pre,
body .CodeMirror-line,
body .CodeMirror-line-like,
body .cm-s-paper .CodeMirror-line,
body .cm-s-default .CodeMirror-line {
    background:transparent !important;
    color:#ffffff !important;
}

body .CodeMirror {
    border:1px solid #363d48 !important;
}

body .CodeMirror-cursor {
    border-left:1px solid #ffffff !important;
}

/* Bootstrap Markdown - pentru versiunea WHMCS care nu foloseste CodeMirror */
body .md-editor,
body .md-editor > textarea,
body .md-editor textarea,
body .md-editor .md-preview,
body .md-editor .md-body {
    background:#090c10 !important;
    background-color:#090c10 !important;
    color:#ffffff !important;
    border-color:#363d48 !important;
}

body .md-editor > .md-header {
    background:#11151b !important;
    border-color:#363d48 !important;
}

body textarea[name="message"],
body textarea.markdown-editor,
body #message {
    background:#090c10 !important;
    background-color:#090c10 !important;
    color:#ffffff !important;
    border-color:#363d48 !important;
}

/* atasamentul tot dark */
body input[type="file"] {
    background:#090c10 !important;
    color:#c3c8cf !important;
    border:1px solid #363d48 !important;
}

body input[type="file"]::file-selector-button {
    background:#1a1f27 !important;
    color:#ffffff !important;
    border:0 !important;
    border-right:1px solid #363d48 !important;
}

/* =========================================================
   MOBIL - CONT LOGAT
========================================================= */

@media(max-width:800px) {

    /* sus ramane doar logo + hamburger */
    .sp-top-menu,
    .sp-top-user {
        display:none !important;
    }

    .sp-mobile {
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        margin-left:auto !important;
    }

    /* dupa hamburger */
    .sp-top-inner.open {
        display:flex !important;
        flex-wrap:wrap !important;
        background:#07090d !important;
    }

    .sp-top-inner.open .sp-top-menu {
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        gap:5px !important;
        margin-top:8px !important;
    }

    .sp-top-inner.open .sp-top-user {
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        width:100% !important;
        gap:5px !important;
        margin-top:5px !important;
    }

    .sp-top-inner.open .sp-top-menu > a,
    .sp-top-inner.open .sp-top-user > a {
        width:100% !important;
        height:auto !important;
        min-height:36px !important;
        padding:9px 11px !important;
        line-height:1.3 !important;
        text-align:left !important;
        justify-content:flex-start !important;
        background:#11151b !important;
        border:1px solid #2e3540 !important;
        border-radius:6px !important;
        color:#ffffff !important;
        font-size:11px !important;
    }

    /* Panoul meu / Serviciile mele / Facturi etc */
    .sp-top-inner.open .sp-mobile-account {
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        gap:5px !important;
    }

    .sp-mobile-account a {
        display:block !important;
        width:100% !important;
        padding:9px 11px !important;

        background:#0f1318 !important;
        border:1px solid #2b323c !important;
        border-left:2px solid #ef1b30 !important;
        border-radius:5px !important;

        color:#ffffff !important;
        font-size:11px !important;
        font-weight:600 !important;
        text-decoration:none !important;
    }

    .sp-mobile-account a:hover {
        background:#191e25 !important;
        border-color:#ef1b30 !important;
    }

    /* soldul in meniul deschis */
    .sp-top-inner.open .sp-sold {
        display:block !important;
        width:100% !important;
        padding:7px 10px !important;
        color:#c5cad1 !important;
        font-size:10px !important;
        background:#0c0f14 !important;
        border:1px solid #262c35 !important;
        border-radius:5px !important;
    }
}


/* =========================================================
   FIX FINAL: TICKET + PAGINARE + ORDER + MOBILE MENU
========================================================= */

/* ---------- TICKET EDITOR ---------- */

/* editor WHMCS Bootstrap Markdown */
.md-editor,
.md-editor > .md-header,
.md-editor > textarea
cd /home/adminbestnew/web/clienti.suspenet.ro/public_html

sudo tee -a templates/suspenet/css/suspenet.css >/dev/null <<'EOF'

/* =========================================================
   MOBILE MENU FIX - LATIME FIXA, FARA MARIRE
========================================================= */

@media(max-width:800px){

    .sp-top{
        position:sticky !important;
        top:0 !important;
        width:100% !important;
        max-width:100% !important;
        overflow:visible !important;
    }

    .sp-top-inner{
        position:relative !important;
        width:100% !important;
        max-width:100% !important;
        min-height:58px !important;
        padding:0 10px !important;
        flex-wrap:nowrap !important;
    }

    .sp-logo{
        flex:0 0 auto !important;
        font-size:20px !important;
        white-space:nowrap !important;
    }

    .sp-mobile{
        flex:0 0 36px !important;
        width:36px !important;
        min-width:36px !important;
        max-width:36px !important;
        height:36px !important;
        min-height:36px !important;
        max-height:36px !important;
        margin-left:auto !important;
        padding:0 !important;
    }

    /* meniul deschis nu mareste headerul pe latime */
    .sp-top-inner.open{
        flex-wrap:nowrap !important;
    }

    .sp-top-inner.open .sp-top-menu,
    .sp-top-inner.open .sp-top-user{
        position:absolute !important;
        top:58px !important;
        left:10px !important;
        right:10px !important;

        width:auto !important;
        max-width:none !important;

        background:#080a0e !important;
        border:1px solid #2d343e !important;
        border-top:2px solid #ef1b30 !important;
        border-radius:0 0 8px 8px !important;

        padding:8px !important;
        margin:0 !important;

        box-shadow:0 18px 35px rgba(0,0,0,.75) !important;
        z-index:999999 !important;
    }

    .sp-top-inner.open .sp-top-user{
        top:auto !important;
        margin-top:0 !important;
    }

    .sp-top-menu a,
    .sp-mobile-account a,
    .sp-top-user > a{
        width:100% !important;
        max-width:100% !important;
        min-height:34px !important;
        height:auto !important;
        padding:8px 10px !important;
        font-size:11px !important;
        line-height:1.2 !important;
    }

    html,
    body{
        overflow-x:hidden !important;
    }
}

/* =========================================================
   SUSPENET - MOBILE + ZERO ALB + COMANDA FINAL
========================================================= */

/* ---------- RESPONSIVE REAL ---------- */

html,
body {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow-x:hidden !important;
}

body * {
    box-sizing:border-box !important;
}

img,
video,
iframe,
canvas,
svg {
    max-width:100% !important;
}

.container,
.container-fluid,
#main-body,
#main-body > .container,
#main-body .container,
.main-content,
.primary-content,
.content-padded {
    max-width:100% !important;
}

.row {
    max-width:100% !important;
}

table {
    max-width:100% !important;
}


/* =========================================================
   EDITOR TICHET - FARA NICIUN PIXEL ALB
========================================================= */

.EasyMDEContainer,
.EasyMDEContainer .CodeMirror,
.EasyMDEContainer .CodeMirror-scroll,
.EasyMDEContainer .CodeMirror-sizer,
.EasyMDEContainer .CodeMirror-lines,
.EasyMDEContainer .CodeMirror-code,
.EasyMDEContainer .CodeMirror-gutters,
.EasyMDEContainer .CodeMirror-wrap,

.CodeMirror,
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-lines,
.CodeMirror-code,
.CodeMirror-gutters,
.CodeMirror-wrap,

.cm-s-paper,
.cm-s-default {
    background:#090c10 !important;
    background-color:#090c10 !important;
    color:#ffffff !important;
}

.EasyMDEContainer .CodeMirror pre,
.CodeMirror pre,
.CodeMirror-line,
.CodeMirror-line-like {
    background:transparent !important;
    color:#ffffff !important;
}

.EasyMDEContainer .CodeMirror,
.CodeMirror {
    border:1px solid #343b46 !important;
}

.CodeMirror-gutters {
    border-right:1px solid #343b46 !important;
}

.CodeMirror-cursor {
    border-left:1px solid #ffffff !important;
}

/* toolbar */
.EasyMDEContainer .editor-toolbar,
.editor-toolbar {
    background:#11151b !important;
    border:1px solid #343b46 !important;
    border-bottom:0 !important;
    opacity:1 !important;
}

.EasyMDEContainer .editor-toolbar a,
.editor-toolbar a,
.editor-toolbar button {
    background:#171c23 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

.editor-toolbar a:hover,
.editor-toolbar a.active,
.editor-toolbar button:hover {
    background:#252b34 !important;
    color:#ffffff !important;
    border-color:#ef1b30 !important;
}

/* bara de jos a editorului */
.editor-statusbar {
    background:#090c10 !important;
    color:#838b96 !important;
    border:1px solid #343b46 !important;
    border-top:0 !important;
}

/* preview */
.editor-preview,
.editor-preview-side {
    background:#101318 !important;
    color:#ffffff !important;
}

/* fallback textarea */
textarea[name="message"],
textarea.markdown-editor,
#message {
    background:#090c10 !important;
    color:#ffffff !important;
    border-color:#343b46 !important;
}


/* =========================================================
   ATASAMENTE - FARA ALB
========================================================= */

input[type="file"] {
    width:100% !important;
    max-width:100% !important;
    background:#090c10 !important;
    color:#bbc1c9 !important;
    border:1px solid #343b46 !important;
}

input[type="file"]::file-selector-button {
    background:#1a1f27 !important;
    color:#ffffff !important;
    border:0 !important;
    border-right:1px solid #343b46 !important;
}


/* =========================================================
   PAGINARE / ARATA X ARTICOLE - TOT DARK
========================================================= */

.dataTables_wrapper,
.dataTables_wrapper .row,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate {
    background:transparent !important;
    color:#d8dce2 !important;
}

.dataTables_wrapper select,
.dataTables_length select {
    background:#101318 !important;
    color:#ffffff !important;
    border:1px solid #343b46 !important;
}

.dataTables_wrapper input {
    background:#090c10 !important;
    color:#ffffff !important;
    border:1px solid #343b46 !important;
}

.dataTables_wrapper .paginate_button,
.pagination .page-link,
.pagination li a,
.pagination li span {
    background:#11151b !important;
    color:#ffffff !important;
    border:1px solid #303640 !important;
}

.dataTables_wrapper .paginate_button:hover,
.pagination .page-link:hover,
.pagination li a:hover {
    background:#1b2028 !important;
    color:#ffffff !important;
    border-color:#ef1b30 !important;
}

.dataTables_wrapper .paginate_button.current,
.pagination .active .page-link,
.pagination li.active a,
.pagination li.active span {
    background:#ef1b30 !important;
    color:#ffffff !important;
    border-color:#ef1b30 !important;
}


/* =========================================================
   SERVICIILE MELE - TOATE CELE 4 COLOANE DARK
========================================================= */

#tableServicesList,
#tableServicesList thead,
#tableServicesList tbody,
#tableServicesList tr,
#tableServicesList th,
#tableServicesList td,
.table-list,
.table-list thead,
.table-list tbody,
.table-list tr,
.table-list th,
.table-list td {
    background:#101318 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

#tableServicesList thead th,
.table-list thead th {
    background:#1a1f27 !important;
    color:#ffffff !important;
}

#tableServicesList tbody tr:nth-child(even),
.table-list tbody tr:nth-child(even) {
    background:#0d1015 !important;
}

#tableServicesList td,
.table-list td {
    background:transparent !important;
}


/* =========================================================
   ORDER / CATEGORIE PRODUSE
========================================================= */

#order-standard_cart,
#order-standard_cart .product,
#order-standard_cart .product-info,
#order-standard_cart .product-desc,
#order-standard_cart .product header,
#order-standard_cart .summary-container,
#order-standard_cart .order-summary {
    background:#101318 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

#order-standard_cart .product header,
#order-standard_cart .product-title,
#order-standard_cart .product-name {
    color:#ffffff !important;
    font-weight:800 !important;
}

/* buton produs mic */
#order-standard_cart .btn-order-now,
#order-standard_cart .product .btn,
a.btn-order-now {
    width:auto !important;
    min-width:0 !important;
    min-height:29px !important;
    padding:5px 10px !important;
    font-size:10px !important;
    line-height:1.2 !important;
    border-radius:5px !important;
    background:#ef1b30 !important;
    border-color:#ef1b30 !important;
    color:#ffffff !important;
}


/* =========================================================
   MOBILE - NIMIC NU IESE DIN ECRAN
========================================================= */

@media(max-width:800px) {

    html,
    body {
        width:100% !important;
        max-width:100vw !important;
        overflow-x:hidden !important;
    }

    .container,
    .container-fluid,
    #main-body,
    #main-body > .container,
    #main-body .container,
    .main-content,
    .primary-content,
    .content-padded {
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
        padding-left:8px !important;
        padding-right:8px !important;
    }

    .row {
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    [class*="col-"] {
        width:100% !important;
        max-width:100% !important;
        flex-basis:100% !important;
    }

    .card,
    .panel,
    .well,
    .table-responsive,
    .dataTables_wrapper,
    .CodeMirror,
    .EasyMDEContainer,
    .editor-toolbar,
    .editor-statusbar,
    input,
    textarea,
    select {
        width:100% !important;
        max-width:100% !important;
    }

    /* servicii pe mobil */
    #tableServicesList {
        width:100% !important;
        table-layout:fixed !important;
        font-size:9px !important;
    }

    #tableServicesList th,
    #tableServicesList td {
        padding:5px 3px !important;
        font-size:9px !important;
        white-space:normal !important;
        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    /* ascundem doar scadenta ca sa incapa */
    #tableServicesList th:nth-child(3),
    #tableServicesList td:nth-child(3) {
        display:none !important;
    }

    #tableServicesList th:nth-child(1),
    #tableServicesList td:nth-child(1) {
        width:48% !important;
    }

    #tableServicesList th:nth-child(2),
    #tableServicesList td:nth-child(2) {
        width:27% !important;
    }

    #tableServicesList th:nth-child(4),
    #tableServicesList td:nth-child(4) {
        width:25% !important;
        text-align:center !important;
    }

    .table-responsive {
        overflow-x:hidden !important;
    }
}


/* =========================================================
   FIX REAL - BOOTSTRAP MARKDOWN / PAGINARE / MOBILE
========================================================= */


/* =========================================================
   TICHET - ASTA ESTE EDITORUL DIN POZA
========================================================= */

body .md-editor,
body div.md-editor {
    background:#090c10 !important;
    border:1px solid #343b46 !important;
    color:#fff !important;
}

/* bara cu B I H etc */
body .md-editor > .md-header,
body .md-editor .md-header {
    background:#11151b !important;
    border-color:#343b46 !important;
    padding:6px !important;
}

/* BUTOANELE EDITORULUI */
body .md-editor .md-header .btn,
body .md-editor .md-controls .btn {
    background:#171c23 !important;
    color:#fff !important;
    border:1px solid #303640 !important;
}

body .md-editor .md-header .btn:hover,
body .md-editor .md-header .btn:focus {
    background:#252b34 !important;
    color:#fff !important;
    border-color:#ef1b30 !important;
}

/* ZONA MARE ALBA DIN POZA */
body .md-editor > textarea,
body .md-editor textarea,
body textarea.markdown-editor,
body textarea[name="message"],
body #message {
    display:block !important;
    width:100% !important;
    max-width:100% !important;

    background:#090c10 !important;
    background-color:#090c10 !important;

    color:#fff !important;
    -webkit-text-fill-color:#fff !important;

    border:0 !important;
    border-top:1px solid #343b46 !important;
    border-bottom:1px solid #343b46 !important;

    box-shadow:none !important;
    outline:none !important;
}

/* preview */
body .md-editor > .md-preview,
body .md-editor .md-preview {
    background:#090c10 !important;
    color:#fff !important;
}

/* footer: lines / words / salvat */
body .md-editor > .md-footer,
body .md-editor .md-footer {
    background:#090c10 !important;
    color:#7f8792 !important;
    border-color:#343b46 !important;
}


/* =========================================================
   ATASAMENTUL ALB DIN TICHET
========================================================= */

body input[type="file"],
body .form-control[type="file"] {
    background:#090c10 !important;
    color:#c4cad1 !important;
    border:1px solid #343b46 !important;
}

body input[type="file"]::file-selector-button {
    background:#191e25 !important;
    color:#fff !important;
    border:0 !important;
    border-right:1px solid #343b46 !important;
}


/* =========================================================
   PAGINARE: INAPOI / INAINTE / 1 / 2 ETC
========================================================= */

body .pagination,
body ul.pagination {
    background:transparent !important;
}

body .pagination > li > a,
body .pagination > li > span,
body .page-item .page-link,
body .dataTables_paginate .paginate_button,
body .dataTables_paginate .previous,
body .dataTables_paginate .next {
    background:#11151b !important;
    color:#fff !important;
    border:1px solid #303640 !important;
    box-shadow:none !important;
}

body .pagination > li > a:hover,
body .page-item .page-link:hover,
body .dataTables_paginate .paginate_button:hover {
    background:#1b2028 !important;
    color:#fff !important;
    border-color:#ef1b30 !important;
}

body .pagination > .active > a,
body .pagination > .active > span,
body .page-item.active .page-link,
body .dataTables_paginate .paginate_button.current {
    background:#ef1b30 !important;
    color:#fff !important;
    border-color:#ef1b30 !important;
}

body .pagination > .disabled > a,
body .pagination > .disabled > span,
body .page-item.disabled .page-link,
body .dataTables_paginate .paginate_button.disabled {
    background:#0d1015 !important;
    color:#626a75 !important;
    border-color:#262c35 !important;
}


/* "Articole pe pagina" + selector */
body .dataTables_length,
body .dataTables_info,
body .dataTables_filter {
    color:#d8dce1 !important;
}

body .dataTables_length select,
body .dataTables_filter input {
    background:#090c10 !important;
    color:#fff !important;
    border:1px solid #343b46 !important;
}


/* =========================================================
   MOBILE - SITE-UL NU SE MAI LATESTE / MARESTE
========================================================= */

@media screen and (max-width:800px) {

    html {
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        overflow-x:hidden !important;
    }

    body {
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        overflow-x:hidden !important;
        margin:0 !important;
    }

    body * {
        box-sizing:border-box !important;
        min-width:0;
    }

    #main-body,
    #main-body > .container,
    #main-body .container,
    .container,
    .container-fluid,
    .main-content,
    .primary-content,
    .content-padded {
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    .row {
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    img,
    iframe,
    video,
    input,
    select,
    textarea,
    .form-control,
    .md-editor,
    .CodeMirror,
    .card,
    .panel,
    .well {
        max-width:100% !important;
    }

    /* editorul sa nu forteze pagina mai lata */
    .md-editor,
    .md-editor textarea {
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
    }

    /* tabele servicii */
    #tableServicesList {
        width:100% !important;
        max-width:100% !important;
        table-layout:fixed !important;
    }

    #tableServicesList th,
    #tableServicesList td {
        white-space:normal !important;
        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    /* meniul hamburger ramane peste pagina, nu o lateste */
    .sp-top {
        width:100% !important;
        max-width:100% !important;
    }

    .sp-top-inner {
        width:100% !important;
        max-width:100% !important;
    }

    .sp-top-inner.open .sp-top-menu,
    .sp-top-inner.open .sp-top-user {
        max-width:calc(100vw - 20px) !important;
        overflow:hidden !important;
    }
}


/* =========================================================
   DOAR CULORI - NU MODIFICA DIMENSIUNI
========================================================= */


/* =========================================================
   1. TICHET - ZONA DE SCRIS ACEEASI MARIME, DAR DARK
========================================================= */

.md-editor,
.md-editor > textarea,
.md-editor textarea,
textarea.markdown-editor,
textarea[name="message"],
#message,
.CodeMirror,
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-lines,
.CodeMirror-code {
    background:#0b0e12 !important;
    background-color:#0b0e12 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
    box-shadow:none !important;
}

/* bara de sus cu B / I / H / link etc */
.md-editor > .md-header,
.md-editor .md-header,
.editor-toolbar {
    background:#11151b !important;
    border-color:#303640 !important;
}

/* butoanele editorului */
.md-editor .btn,
.md-header .btn,
.editor-toolbar a,
.editor-toolbar button {
    background:#171c23 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

/* preview */
.md-preview,
.editor-preview,
.editor-preview-side {
    background:#0b0e12 !important;
    color:#ffffff !important;
}

/* zona lines / words / salvat */
.md-footer,
.editor-statusbar {
    background:#0b0e12 !important;
    color:#818995 !important;
    border-color:#303640 !important;
}


/* =========================================================
   2. CELE 4 CASETE DIN PANOUL CLIENT
   SERVICII / OFERTE / TICHETE / FACTURI
========================================================= */

.tiles .tile,
.tiles .tile:nth-child(1),
.tiles .tile:nth-child(2),
.tiles .tile:nth-child(3),
.tiles .tile:nth-child(4),

.client-home-panels .tile,
.client-home-panels .card,
.client-home-panels .panel,

.home-kb-search .tile,

.dashboard-tile,
.dashboard-stat,
.client-home .tile {

    background:#101318 !important;
    background-color:#101318 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

/* toate elementele din casute */
.tiles .tile *,
.dashboard-tile *,
.dashboard-stat * {
    color:#ffffff !important;
}

/* iconurile raman vizibile */
.tiles .tile i,
.dashboard-tile i,
.dashboard-stat i {
    opacity:1 !important;
}

/* numerele */
.tiles .tile .stat,
.tiles .tile .stat-value,
.dashboard-stat .stat,
.dashboard-stat .number {
    color:#ef1b30 !important;
}

/* daca Twenty-One foloseste carduri albe in dashboard */
.client-home-panels .card-body,
.client-home-panels .panel-body {
    background:#101318 !important;
    color:#ffffff !important;
}


/* =========================================================
   3. PAGINARE - ACEEASI CULOARE CU TEMA
========================================================= */

.pagination,
.pagination ul,
.dataTables_paginate {
    background:transparent !important;
}

.pagination .page-link,
.pagination > li > a,
.pagination > li > span,
.dataTables_paginate .paginate_button,
.dataTables_paginate .previous,
.dataTables_paginate .next {

    background:#11151b !important;
    color:#ffffff !important;
    border-color:#303640 !important;
    box-shadow:none !important;
}

/* hover */
.pagination .page-link:hover,
.pagination > li > a:hover,
.dataTables_paginate .paginate_button:hover {

    background:#1a1f27 !important;
    color:#ffffff !important;
    border-color:#ef1b30 !important;
}

/* pagina selectata */
.pagination .active .page-link,
.pagination > .active > a,
.pagination > .active > span,
.dataTables_paginate .paginate_button.current {

    background:#ef1b30 !important;
    color:#ffffff !important;
    border-color:#ef1b30 !important;
}

/* inapoi/inainte inactive */
.pagination .disabled .page-link,
.pagination > .disabled > a,
.pagination > .disabled > span,
.dataTables_paginate .paginate_button.disabled {

    background:#0d1015 !important;
    color:#626a74 !important;
    border-color:#262c35 !important;
}


/* selector Articole pe pagina */
.dataTables_length select,
.dataTables_filter input {
    background:#0b0e12 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

.dataTables_length,
.dataTables_info,
.dataTables_filter {
    color:#d8dce2 !important;
}


/* TICHETE - casuta efectiva in care se scrie mesajul */
textarea[name="message"],
textarea#message,
textarea.markdown-editor,
.md-editor textarea,
.md-editor > textarea,
.CodeMirror,
.CodeMirror-scroll,
.CodeMirror-lines,
.CodeMirror-code,
.CodeMirror pre {
    background-color: #0b0e12 !important;
    color: #ffffff !important;
    border-color: #303640 !important;
}

/* cursor + text editor */
.CodeMirror-cursor {
    border-left-color: #ffffff !important;
}

/* placeholder */
textarea[name="message"]::placeholder,
textarea#message::placeholder {
    color: #7f8792 !important;
}

/* elimina fundalul alb impus de editor */
.md-editor,
.md-editor .CodeMirror,
.md-editor .CodeMirror-scroll {
    background: #0b0e12 !important;
}


/* FIX FINAL - editor mesaj TIChet - NUMAI CULORI */
body .md-editor > textarea,
body .md-editor > textarea:focus,
body .md-editor > textarea:hover,
body .md-editor textarea,
body .md-editor textarea:focus,
body .md-editor textarea:hover,
body textarea.md-input,
body textarea.md-input:focus,
body textarea[name="message"],
body textarea[name="message"]:focus {
    background: #0b0e12 !important;
    background-color: #0b0e12 !important;
    color: #ffffff !important;
    border-color: #303640 !important;
    box-shadow: none !important;
}

/* interior editor */
body .md-editor {
    background: #0b0e12 !important;
    border-color: #303640 !important;
}

/* bara de jos */
body .md-editor .md-footer {
    background: #11151b !important;
    color: #8b939e !important;
    border-color: #303640 !important;
}

/* preview */
body .md-editor > .md-preview {
    background: #0b0e12 !important;
    color: #ffffff !important;
    border-color: #303640 !important;
}


/* =========================================================
   FIX FINAL SERVICII + UTILIZARE RESURSE
   NU ATINGE TICHETELE
========================================================= */

/* ---------- SERVICIILE MELE DESKTOP ---------- */

#tableServicesList,
#tableServicesList_wrapper,
#tableServicesList_wrapper .table-responsive {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    background:#101318 !important;
    color:#fff !important;
}

#tableServicesList {
    table-layout:auto !important;
}

#tableServicesList thead,
#tableServicesList thead tr,
#tableServicesList thead th {
    background:#191e25 !important;
    color:#fff !important;
    border-color:#303640 !important;
}

#tableServicesList tbody,
#tableServicesList tbody tr,
#tableServicesList tbody td {
    background:#101318 !important;
    color:#e8eaed !important;
    border-color:#303640 !important;
}

#tableServicesList tbody tr:nth-child(even),
#tableServicesList tbody tr:nth-child(even) td {
    background:#0d1015 !important;
}

#tableServicesList a {
    color:#fff !important;
}

#tableServicesList .label-success,
#tableServicesList .badge-success,
#tableServicesList .status-active {
    background:#3ca653 !important;
    color:#fff !important;
}


/* =========================================================
   PAGINA SERVICIULUI / CONFIGURARE / UTILIZARE RESURSE
========================================================= */

.product-details,
.product-details .tab-content,
.product-details .tab-pane,
.product-details .tab-content > .active,
.product-details .tab-content > .tab-pane.active,

.clientarea-product-details,
.clientarea-product-details .tab-content,
.clientarea-product-details .tab-pane,

.module-client-area,
.module-client-area .card,
.module-client-area .card-body,
.module-client-area .panel,
.module-client-area .panel-body {

    background:#101318 !important;
    background-color:#101318 !important;
    color:#fff !important;
    border-color:#303640 !important;
}


/* zona alba de sub "Configurare" */
.product-details .tab-content,
.product-details .tab-pane,
.tab-content,
.tab-pane {
    background:#101318 !important;
    background-color:#101318 !important;
    color:#fff !important;
}


/* toate containerele din utilizare resurse */
.product-details .tab-pane > div,
.product-details .tab-pane > section,
.product-details .tab-pane > article,
.product-details .tab-pane .row,
.product-details .tab-pane [class*="col-"] {
    background-color:transparent !important;
    color:#fff !important;
}


/* titluri */
.product-details .tab-pane h1,
.product-details .tab-pane h2,
.product-details .tab-pane h3,
.product-details .tab-pane h4,
.product-details .tab-pane h5,
.product-details .tab-pane strong {
    color:#fff !important;
}


/* text secundar */
.product-details .tab-pane p,
.product-details .tab-pane small,
.product-details .tab-pane .text-muted {
    color:#9ba3ad !important;
}


/* ---------- grafice utilizare ---------- */

.product-details svg,
.product-details canvas {
    max-width:100% !important;
}

.product-details .progress {
    width:100% !important;
    max-width:100% !important;
    background:#191e25 !important;
    border-color:#303640 !important;
}

.product-details .progress-bar {
    max-width:100% !important;
}


/* =========================================================
   MOBIL - SERVICIILE MELE
========================================================= */

@media(max-width:800px) {

    /*
     * IMPORTANT:
     * anulam vechiul min-width:560px care facea tabelul
     * sa iasa din ecran.
     */

    #tableServicesList_wrapper,
    #tableServicesList_wrapper .table-responsive {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        overflow:hidden !important;
    }

    #tableServicesList {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        table-layout:fixed !important;
    }

    #tableServicesList th,
    #tableServicesList td {
        min-width:0 !important;
        max-width:none !important;
        padding:6px 3px !important;
        font-size:9px !important;
        line-height:1.2 !important;
        white-space:normal !important;
        word-break:break-word !important;
        overflow-wrap:anywhere !important;
    }

    /*
     * Pe mobil afisam:
     * Produs/Serviciu + Pret + Stare.
     * Scadenta se ascunde doar pe mobil ca sa incapa corect.
     */

    #tableServicesList th:nth-child(1),
    #tableServicesList td:nth-child(1) {
        display:table-cell !important;
        width:52% !important;
    }

    #tableServicesList th:nth-child(2),
    #tableServicesList td:nth-child(2) {
        display:table-cell !important;
        width:25% !important;
    }

    #tableServicesList th:nth-child(3),
    #tableServicesList td:nth-child(3) {
        display:none !important;
    }

    #tableServicesList th:nth-child(4),
    #tableServicesList td:nth-child(4) {
        display:table-cell !important;
        width:23% !important;
        text-align:center !important;
    }


    /* ---------- PAGINA UNUI SERVICIU ---------- */

    .product-details,
    .product-details .tab-content,
    .product-details .tab-pane,
    .clientarea-product-details,
    .module-client-area {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        overflow:hidden !important;
    }

    .product-details .row,
    .product-details [class*="col-"] {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }


    /*
     * "Utilizare resurse" sa ocupe pana la margine,
     * nu cutia ingusta din poza.
     */
    .product-details .tab-content {
        padding-left:8px !important;
        padding-right:8px !important;
    }

    .product-details .nav-tabs,
    .product-details .nav-tabs > li,
    .product-details .nav-tabs .nav-item {
        max-width:100% !important;
    }


    /* graficele sa nu mai iasa spre dreapta */
    .product-details svg,
    .product-details canvas,
    .product-details .progress,
    .product-details .progress-bar {
        width:100% !important;
        max-width:100% !important;
    }

}


/* =====================================================
   SUSPENET - PRODUCT DETAILS / RESOURCE USAGE FINAL
===================================================== */

#resourceusage {
    width: 100% !important;
    max-width: 100% !important;
    background: #101318 !important;
    color: #fff !important;
    padding: 18px !important;
    box-sizing: border-box !important;
}

#resourceusage .suspenet-resource-full {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#resourceusage .row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#resourceusage .col-sm-6 {
    background: #101318 !important;
    color: #fff !important;
    box-sizing: border-box !important;
}

#resourceusage h4,
#resourceusage p {
    color: #fff !important;
}

#resourceusage .text-muted {
    color: #818995 !important;
}

/* TAB CONFIGURARE - fara alb */
.product-details-tab-container,
.product-details-tab-container .tab-content,
.product-details-tab-container .tab-pane,
#tabOverview,
#tabOverview .tab-content {
    background: #101318 !important;
    color: #fff !important;
}


/* ==========================
   MOBIL
========================== */

@media (max-width: 800px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    #resourceusage {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 8px !important;
        overflow: hidden !important;
    }

    #resourceusage .suspenet-resource-full {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #resourceusage .suspenet-resource-full > .row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #resourceusage .col-sm-6 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 12px 4px !important;
        margin: 0 !important;
        text-align: center !important;
    }
}



/* ==========================================================
   SUSPENET FINAL
   SERVICIILE MELE + RESOURCE USAGE + MOBILE
========================================================== */


/* ==========================================================
   SERVICIILE MELE - DESKTOP
========================================================== */

#tableServicesList_wrapper,
#tableServicesList_wrapper .table-container,
#tableServicesList_wrapper .table-responsive {
    background:#101318 !important;
    color:#fff !important;
    border-color:#303640 !important;
}

#tableServicesList {
    width:100% !important;
    background:#101318 !important;
    color:#fff !important;
    border-collapse:collapse !important;
}

#tableServicesList thead,
#tableServicesList thead tr,
#tableServicesList thead th {
    background:#191e25 !important;
    color:#fff !important;
    border-color:#303640 !important;
}

#tableServicesList tbody {
    background:#101318 !important;
}

#tableServicesList tbody tr {
    background:#101318 !important;
    border-color:#303640 !important;
}

#tableServicesList tbody tr:nth-child(even) {
    background:#0d1015 !important;
}

#tableServicesList tbody td {
    background:transparent !important;
    color:#e8eaed !important;
    border-color:#303640 !important;
}

#tableServicesList a {
    color:#fff !important;
    font-weight:700 !important;
}


/* STATUS */
#tableServicesList .label-success,
#tableServicesList .badge-success,
#tableServicesList .status-active,
#tableServicesList .label.status-active {
    background:#3ca653 !important;
    color:#fff !important;
}


/* ==========================================================
   ARTICOLE PE PAGINA + PAGINARE
========================================================== */

#tableServicesList_wrapper .dataTables_info,
#tableServicesList_wrapper .dataTables_length,
#tableServicesList_wrapper .dataTables_filter {
    color:#d6dae0 !important;
}

#tableServicesList_wrapper select,
#tableServicesList_wrapper input {
    background:#0b0e12 !important;
    color:#fff !important;
    border:1px solid #303640 !important;
}

#tableServicesList_wrapper .pagination .page-link,
#tableServicesList_wrapper .pagination li a,
#tableServicesList_wrapper .pagination li span,
#tableServicesList_wrapper .paginate_button {
    background:#11151b !important;
    color:#fff !important;
    border-color:#303640 !important;
}

#tableServicesList_wrapper .pagination .active .page-link,
#tableServicesList_wrapper .pagination li.active a,
#tableServicesList_wrapper .pagination li.active span,
#tableServicesList_wrapper .paginate_button.current {
    background:#ef1b30 !important;
    color:#fff !important;
    border-color:#ef1b30 !important;
}

#tableServicesList_wrapper .pagination .page-link:hover,
#tableServicesList_wrapper .paginate_button:hover {
    background:#1b2028 !important;
    color:#fff !important;
    border-color:#ef1b30 !important;
}


/* ==========================================================
   PAGINA SERVICIULUI
   CONFIGURARE + UTILIZARE RESURSE
========================================================== */

#tabOverview,
#tabOverview > div,
#tabOverview .tab-content,
#tabOverview .tab-pane,

#resourceusage,
#resourceusage > div,
#resourceusage .row,
#resourceusage [class*="col-"],

.product-details .tab-content,
.product-details .tab-pane {

    background:#101318 !important;
    background-color:#101318 !important;

    color:#fff !important;

    border-color:#303640 !important;
}


/* ZONA ALBA DE SUB CONFIGURARE */
#tabOverview .tab-content,
#tabOverview .tab-pane,
.product-details .tab-content,
.product-details .tab-content > .active {
    background:#101318 !important;
    background-color:#101318 !important;
}


/* CARDURI / MODULE DIN CONFIGURARE */
#tabOverview .card,
#tabOverview .card-body,
#tabOverview .card-header,
#tabOverview .panel,
#tabOverview .panel-body,
#tabOverview .panel-heading,
#tabOverview .well {

    background:#101318 !important;
    color:#fff !important;
    border-color:#303640 !important;
}


/* ==========================================================
   TABURI CONFIGURARE / UTILIZARE RESURSE
========================================================== */

.product-details .nav-tabs,
.product-details .nav-tabs > li,
.product-details .nav-tabs .nav-item {
    border-color:#303640 !important;
}

.product-details .nav-tabs .nav-link,
.product-details .nav-tabs li a {
    background:#11151b !important;
    color:#c7ccd3 !important;
    border-color:#303640 !important;
}

.product-details .nav-tabs .nav-link.active,
.product-details .nav-tabs li.active a {
    background:#191e25 !important;
    color:#fff !important;

    border-color:#303640 !important;
    border-top:2px solid #ef1b30 !important;
}


/* ==========================================================
   UTILIZARE RESURSE
========================================================== */

#resourceusage {
    width:100% !important;
    max-width:100% !important;

    background:#101318 !important;

    padding:15px !important;

    overflow:hidden !important;
}

#resourceusage .suspenet-resource-full {
    width:100% !important;
    max-width:100% !important;

    flex:0 0 100% !important;

    margin:0 !important;
    padding:0 !important;
}

#resourceusage .suspenet-resource-full > .row {
    width:100% !important;

    margin-left:0 !important;
    margin-right:0 !important;
}

#resourceusage .col-sm-6 {
    background:#101318 !important;
    color:#fff !important;
}

#resourceusage h1,
#resourceusage h2,
#resourceusage h3,
#resourceusage h4,
#resourceusage h5,
#resourceusage strong,
#resourceusage p {
    color:#fff !important;
}

#resourceusage .text-muted {
    color:#7f8792 !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:800px) {

    html,
    body {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        overflow-x:hidden !important;
    }

    body * {
        box-sizing:border-box !important;
    }


    /* ======================================================
       MENIU
       ascundem optiunile imprastiate ale contului
    ====================================================== */

    .sp-top-inner.open .sp-sold {
        display:none !important;
    }

    .sp-top-inner.open .sp-mobile-account {
        display:none !important;
    }

    /*
     * butonul cu numele clientului nu mai ocupa loc
     */
    .sp-top-inner.open .sp-top-user > .sp-red {
        display:none !important;
    }

    /*
     * ramane Serviciile mele daca exista
     */
    .sp-top-inner.open .sp-services-direct {
        display:flex !important;

        width:100% !important;
        min-height:36px !important;

        align-items:center !important;

        padding:0 11px !important;

        background:#11151b !important;
        color:#fff !important;

        border:1px solid #303640 !important;
        border-left:2px solid #ef1b30 !important;
        border-radius:6px !important;
    }


    /* ======================================================
       SERVICIILE MELE

       PE MOBIL NU MAI FOLOSIM TABEL CU 4 COLOANE.
       FIECARE SERVICIU DEVINE CARD.
    ====================================================== */

    #tableServicesList_wrapper,
    #tableServicesList_wrapper .table-responsive,
    #tableServicesList_wrapper .table-container {

        width:100% !important;
        max-width:100% !important;

        overflow:visible !important;
    }


    #tableServicesList {
        display:block !important;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        background:transparent !important;
    }


    /* ascundem titlul tabelului */
    #tableServicesList thead {
        display:none !important;
    }


    #tableServicesList tbody {
        display:block !important;

        width:100% !important;

        background:transparent !important;
    }


    #tableServicesList tbody tr {

        display:grid !important;

        grid-template-columns:1fr auto !important;

        width:100% !important;

        margin:0 0 8px 0 !important;

        padding:9px 10px !important;

        background:#101318 !important;

        border:1px solid #303640 !important;
        border-left:2px solid #ef1b30 !important;

        border-radius:7px !important;
    }


    #tableServicesList tbody tr:nth-child(even) {
        background:#0d1015 !important;
    }


    #tableServicesList tbody td {

        display:block !important;

        width:auto !important;
        max-width:100% !important;

        padding:3px 0 !important;

        border:0 !important;

        background:transparent !important;

        color:#dce0e5 !important;

        font-size:11px !important;

        text-align:left !important;

        white-space:normal !important;
        overflow-wrap:anywhere !important;
        word-break:normal !important;
    }


    /*
     * PRODUS / SERVICIU
     */
    #tableServicesList tbody td:nth-child(1) {

        grid-column:1 / 2 !important;
        grid-row:1 !important;

        color:#fff !important;

        font-size:12px !important;
        font-weight:800 !important;
    }


    /*
     * PRET
     */
    #tableServicesList tbody td:nth-child(2) {

        grid-column:1 / 2 !important;

        grid-row:2 !important;

        color:#9fa7b1 !important;

        font-size:10px !important;
    }


    #tableServicesList tbody td:nth-child(2)::before {
        content:"Pret: ";

        color:#777f89 !important;

        font-weight:400 !important;
    }


    /*
     * SCADENTA
     */
    #tableServicesList tbody td:nth-child(3) {

        display:block !important;

        grid-column:1 / 2 !important;
        grid-row:3 !important;

        color:#9fa7b1 !important;

        font-size:10px !important;
    }


    #tableServicesList tbody td:nth-child(3)::before {
        content:"Scadenta: ";

        color:#777f89 !important;
    }


    /*
     * STARE
     */
    #tableServicesList tbody td:nth-child(4) {

        display:flex !important;

        grid-column:2 !important;

        grid-row:1 / 4 !important;

        align-items:center !important;
        justify-content:center !important;

        padding-left:8px !important;

        text-align:center !important;
    }


    /*
     * DACA EXISTA O A 5-A COLOANA / BUTON ACTIUNE
     */
    #tableServicesList tbody td:nth-child(5) {

        display:flex !important;

        grid-column:2 !important;

        align-items:center !important;
        justify-content:center !important;
    }


    /* ======================================================
       PAGINARE MOBIL
    ====================================================== */

    #tableServicesList_wrapper .dataTables_length {
        display:flex !important;

        align-items:center !important;

        gap:6px !important;

        margin-top:10px !important;

        font-size:11px !important;
    }

    #tableServicesList_wrapper .dataTables_paginate {
        margin-top:7px !important;
    }


    /* ======================================================
       UTILIZARE RESURSE MOBIL
    ====================================================== */

    #resourceusage {

        width:100% !important;
        max-width:100% !important;

        padding:10px 8px !important;

        background:#101318 !important;

        overflow:hidden !important;
    }


    #resourceusage .suspenet-resource-full {

        width:100% !important;
        max-width:100% !important;

        flex:0 0 100% !important;

        padding:0 !important;
        margin:0 !important;
    }


    #resourceusage .suspenet-resource-full > .row {

        display:flex !important;

        width:100% !important;

        flex-direction:column !important;

        margin:0 !important;
    }


    #resourceusage .col-sm-6 {

        display:block !important;

        width:100% !important;
        max-width:100% !important;

        flex:0 0 100% !important;

        padding:12px 5px !important;
        margin:0 !important;

        background:#101318 !important;

        text-align:center !important;
    }


    /* ================================================
       CONFIGURARE - ELIMINA ALBUL
    ================================================ */

    #tabOverview,
    #tabOverview .tab-content,
    #tabOverview .tab-pane,
    .product-details .tab-content,
    .product-details .tab-pane {

        width:100% !important;
        max-width:100% !important;

        background:#101318 !important;
        background-color:#101318 !important;

        color:#fff !important;
    }

}


/* ==========================================================
   CONFIGURARE + RESURSE - FIX VIZUAL MOBIL
========================================================== */

/* tabul/configurarea sa fie complet dark */
.product-details .nav-tabs,
.product-details .nav-tabs .nav-item,
.product-details .nav-tabs .nav-link,
.product-details .tab-content,
.product-details .tab-pane,
#tabOverview,
#resourceusage {
    background:#101318 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

/* elimina dreptunghiul alb de sub Configurare */
.product-details .tab-content,
.product-details .tab-content > .tab-pane,
.product-details .tab-content > .active,
#tabOverview,
#tabOverview > div,
#tabOverview .tab-pane {
    background:#101318 !important;
    background-color:#101318 !important;
}

/* selectorul activ */
.product-details .nav-tabs .nav-link.active,
.product-details .nav-tabs li.active a {
    background:#191e25 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
    border-top:2px solid #ef1b30 !important;
}

/* selector neactiv */
.product-details .nav-tabs .nav-link,
.product-details .nav-tabs li a {
    background:#11151b !important;
    color:#c7ccd3 !important;
}


/* ==========================================================
   CERCURI RESURSE
========================================================== */

#resourceusage {
    padding:12px 8px !important;
    text-align:center !important;
}

#resourceusage .col-sm-6 {
    text-align:center !important;
}

/* titlurile */
#resourceusage h4 {
    font-size:18px !important;
    margin-bottom:8px !important;
    color:#ffffff !important;
}

/* valorile MB */
#resourceusage p {
    margin-top:7px !important;
    margin-bottom:12px !important;
    color:#ffffff !important;
    font-size:13px !important;
}

/* ultima actualizare */
#resourceusage .text-muted {
    font-size:11px !important;
    line-height:1.4 !important;
    color:#7f8792 !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:800px) {

    #resourceusage {
        padding:10px 6px !important;
    }

    #resourceusage .col-sm-6 {
        padding:10px 4px !important;
    }

    #resourceusage h4 {
        font-size:17px !important;
    }

    #resourceusage p {
        font-size:12px !important;
    }
}


/* =========================================================
   FIX STRICT: CONFIGURARE + NUMARUL DIN CERCURI
   CERCURILE RAMAN ASA CUM SUNT
========================================================= */

/* zona alba de sub Configurare -> culoarea temei */
.product-details .tab-content,
.product-details .tab-content > .tab-pane,
.product-details .tab-content > .active,
.product-details .tab-pane,
#tabOverview,
#tabOverview > div,
#resourceusage {
    background:#101318 !important;
    background-color:#101318 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

/* daca WHMCS pune un container alb direct inauntru */
.product-details .tab-content > div,
.product-details .tab-pane > div {
    background-color:#101318 !important;
    color:#ffffff !important;
}

/* tabul Configurare */
.product-details .nav-tabs .nav-link,
.product-details .nav-tabs li a {
    background:#11151b !important;
    color:#d6dae0 !important;
    border-color:#303640 !important;
}

.product-details .nav-tabs .nav-link.active,
.product-details .nav-tabs li.active a {
    background:#191e25 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
    border-bottom-color:#ef1b30 !important;
}


/* text resurse */
#resourceusage h4,
#resourceusage p,
#resourceusage strong {
    color:#ffffff !important;
}

#resourceusage .text-muted {
    color:#858d98 !important;
}


/* =========================================================
   KNOB - PROCENTAJ CENTRAT CORECT IN CERC
   NU MODIFICA CERCUL
========================================================= */



/* wrapperul creat de jquery-knob */


/* parintele canvas/input trebuie sa permita centrarea */



/* =========================================================
   SUSPENET - RESOURCE USAGE FINAL
========================================================= */

/* ZONA DE SUB CONFIGURARE - DARK */
.sp-product-tab-content,
.sp-product-tab-content > .tab-pane,
.sp-product-tab-content > .tab-pane.active,
#configoptions,
#additionalinfo,
#metrics,
#resourceusage {
    background:#101318 !important;
    background-color:#101318 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

/* inclusiv randurile din interior */
.sp-product-tab-content .row {
    background:transparent !important;
    color:#ffffff !important;
}

/* taburile */
.nav-tabs .nav-link {
    background:#11151b !important;
    color:#c8cdd4 !important;
    border-color:#303640 !important;
}

.nav-tabs .nav-link.active {
    background:#191e25 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
    border-top:2px solid #ef1b30 !important;
}


/* ==========================================
   CERC + PROCENTAJ
========================================== */

.sp-knob-wrap {
    position:relative !important;

    width:100px !important;
    height:100px !important;

    margin:0 auto 7px auto !important;

    background:transparent !important;
}

/* jquery knob deseneaza canvas-ul aici */
.sp-knob-wrap canvas {
    display:block !important;

    width:100px !important;
    height:100px !important;

    margin:0 !important;
}

/* procentajul nostru, exact in centru */
.sp-knob-percent {
    position:absolute !important;

    top:50% !important;
    left:50% !important;

    transform:translate(-50%,-50%) !important;

    display:block !important;

    margin:0 !important;
    padding:0 !important;

    background:transparent !important;

    color:#ffffff !important;

    font-size:15px !important;
    font-weight:800 !important;
    line-height:1 !important;

    white-space:nowrap !important;

    pointer-events:none !important;

    z-index:20 !important;
}

/* inputul exista pentru jquery-knob dar NU mai afiseaza text */
.sp-knob-wrap input.dial-usage {
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

/* texte */
#resourceusage h4 {
    color:#ffffff !important;
}

#resourceusage p {
    color:#ffffff !important;
}

#resourceusage .text-muted {
    color:#858d98 !important;
}


/* MOBILE */
@media(max-width:800px) {

    .sp-product-tab-content,
    #resourceusage {
        width:100% !important;
        max-width:100% !important;
        background:#101318 !important;
    }

    .sp-knob-wrap {
        width:100px !important;
        height:100px !important;
    }

}


/* =========================================================
   RADIO - CONFIGURARE / INFORMATII SUPLIMENTARE / RESURSE
   TABURI COMPLET DARK
========================================================= */

.product-details ul.nav-tabs,
.product-details .nav-tabs,
.product-details .nav-tabs > li,
.product-details .nav-tabs .nav-item {
    background:#101318 !important;
    background-color:#101318 !important;
    border-color:#303640 !important;
}

/* TOATE taburile, inclusiv cele inactive */
.product-details .nav-tabs > li > a,
.product-details .nav-tabs .nav-link,
.product-details .nav-tabs a[href="#configoptions"],
.product-details .nav-tabs a[href="#additionalinfo"],
.product-details .nav-tabs a[href="#resourceusage"],
.product-details .nav-tabs a[href="#metrics"] {
    background:#11151b !important;
    background-color:#11151b !important;
    color:#d8dce2 !important;
    -webkit-text-fill-color:#d8dce2 !important;

    border:1px solid #303640 !important;
    border-bottom-color:#303640 !important;

    box-shadow:none !important;
}

/* TAB ACTIV */
.product-details .nav-tabs > li.active > a,
.product-details .nav-tabs > li > a.active,
.product-details .nav-tabs .nav-link.active {
    background:#191e25 !important;
    background-color:#191e25 !important;

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    border-color:#303640 !important;
    border-bottom:2px solid #ef1b30 !important;
}

/* hover */
.product-details .nav-tabs > li > a:hover,
.product-details .nav-tabs .nav-link:hover {
    background:#171b21 !important;
    color:#ffffff !important;
}

/* continutul pentru cele trei sectiuni */
#configoptions,
#additionalinfo,
#resourceusage,
#metrics,
.sp-product-tab-content {
    background:#101318 !important;
    background-color:#101318 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

/* inclusiv continutul intern */
#configoptions > div,
#additionalinfo > div,
#resourceusage > div,
#metrics > div {
    background-color:transparent !important;
    color:#ffffff !important;
}


/* =========================================================
   SUSPENET RADIO
   CONFIGURARE + INFORMATII SUPLIMENTARE - DARK
   NU ATINGE RESOURCE USAGE / CERCURILE
========================================================= */

/* bara pe care stau taburile */
.product-details .nav-tabs,
.product-details ul.nav-tabs,
.product-details .nav-tabs > li,
.product-details .nav-tabs .nav-item {
    background:#101318 !important;
    background-color:#101318 !important;
    border-color:#303640 !important;
}

/* CONFIGURARE */
.product-details a[href="#configoptions"],
.product-details [data-target="#configoptions"],
.product-details [data-bs-target="#configoptions"] {
    background:#11151b !important;
    background-color:#11151b !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    border-color:#303640 !important;
    box-shadow:none !important;
}

/* INFORMATII SUPLIMENTARE */
.product-details a[href="#additionalinfo"],
.product-details [data-target="#additionalinfo"],
.product-details [data-bs-target="#additionalinfo"] {
    background:#11151b !important;
    background-color:#11151b !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    border-color:#303640 !important;
    box-shadow:none !important;
}

/* cand Configurare este selectat */
.product-details li.active > a[href="#configoptions"],
.product-details a[href="#configoptions"].active {
    background:#191e25 !important;
    background-color:#191e25 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
    border-bottom:2px solid #ef1b30 !important;
}

/* cand Informatii suplimentare este selectat */
.product-details li.active > a[href="#additionalinfo"],
.product-details a[href="#additionalinfo"].active {
    background:#191e25 !important;
    background-color:#191e25 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
    border-bottom:2px solid #ef1b30 !important;
}

/* continut CONFIGURARE */
#configoptions,
#configoptions.active,
#configoptions.show,
#configoptions > div,
#configoptions .row,
#configoptions .card,
#configoptions .card-body,
#configoptions .panel,
#configoptions .panel-body {
    background:#101318 !important;
    background-color:#101318 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

/* continut INFORMATII SUPLIMENTARE */
#additionalinfo,
#additionalinfo.active,
#additionalinfo.show,
#additionalinfo > div,
#additionalinfo .row,
#additionalinfo .card,
#additionalinfo .card-body,
#additionalinfo .panel,
#additionalinfo .panel-body {
    background:#101318 !important;
    background-color:#101318 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

/* elimina fundalul alb cand se schimba intre cele doua */
#configoptions *,
#additionalinfo * {
    border-color:#303640;
}

/* textul sa ramana vizibil */
#configoptions,
#configoptions p,
#configoptions span,
#configoptions label,
#configoptions strong,
#additionalinfo,
#additionalinfo p,
#additionalinfo span,
#additionalinfo label,
#additionalinfo strong {
    color:#ffffff !important;
}


/* RADIO - DOAR CONFIGURARE + INFORMATII SUPLIMENTARE */

a[href="#configoptions"],
a[href="#additionalinfo"],
[data-target="#configoptions"],
[data-target="#additionalinfo"],
[data-bs-target="#configoptions"],
[data-bs-target="#additionalinfo"] {
    background:#11151b !important;
    background-color:#11151b !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

/* tab selectat */
li.active > a[href="#configoptions"],
li.active > a[href="#additionalinfo"],
a[href="#configoptions"].active,
a[href="#additionalinfo"].active {
    background:#191e25 !important;
    background-color:#191e25 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

/* continutul celor doua */
#configoptions,
#configoptions.active,
#configoptions.show,
#additionalinfo,
#additionalinfo.active,
#additionalinfo.show {
    background:#101318 !important;
    background-color:#101318 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}


/* AZURACAST / WHMCS PRODUCT DETAILS
   DOAR CONFIGURARE + INFORMATII SUPLIMENTARE */

#configoptions,
#additionalinfo {
    background:#101318 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

#configoptions .row,
#additionalinfo .row {
    background:#101318 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

#configoptions .col-sm-5,
#configoptions .col-sm-7,
#additionalinfo .col-sm-5,
#additionalinfo .col-sm-7 {
    background:#101318 !important;
    color:#ffffff !important;
}

#configoptions strong,
#additionalinfo strong {
    color:#ffffff !important;
}

/* =========================================================
   FIX BARA ALBA DIN PRODUCT DETAILS
   DOAR CONFIGURARE + INFORMATII SUPLIMENTARE
========================================================= */

/* wrapperul general al taburilor */
.product-details .tab-content,
.product-details .tab-content > .tab-pane,
.product-details .tab-content > .active,
.product-details .tab-pane.fade,
.product-details .tab-pane.show {
    background:#101318 !important;
    background-color:#101318 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

/* wrapper-ele imediate din jurul continutului */
.product-details .tab-content > div,
.product-details .tab-pane > div,
.product-details .tab-pane > .row,
.product-details .tab-pane > .card,
.product-details .tab-pane > .panel {
    background:#101318 !important;
    background-color:#101318 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

/* continut configurare */
#configoptions,
#configoptions > div,
#configoptions .row,
#configoptions .card,
#configoptions .card-body,
#configoptions .panel,
#configoptions .panel-body {
    background:#101318 !important;
    background-color:#101318 !important;
    color:#ffffff !important;
}

/* continut informatii suplimentare */
#additionalinfo,
#additionalinfo > div,
#additionalinfo .row,
#additionalinfo .card,
#additionalinfo .card-body,
#additionalinfo .panel,
#additionalinfo .panel-body {
    background:#101318 !important;
    background-color:#101318 !important;
    color:#ffffff !important;
}

/* taburile propriu-zise */
.product-details .nav-tabs,
.product-details .nav-tabs > li,
.product-details .nav-tabs .nav-item {
    background:#101318 !important;
    background-color:#101318 !important;
}

.product-details .nav-tabs a,
.product-details .nav-tabs .nav-link {
    background:#11151b !important;
    background-color:#11151b !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

.product-details .nav-tabs .active,
.product-details .nav-tabs .nav-link.active,
.product-details .nav-tabs li.active > a {
    background:#191e25 !important;
    background-color:#191e25 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
    border-bottom:2px solid #ef1b30 !important;
}


/* PRODUCT DETAILS - FARA FUNDAL ALB */
.suspenet-dark-tabs,
.suspenet-dark-tabs > .tab-pane,
.suspenet-dark-tabs .row,
.suspenet-dark-tabs .card,
.suspenet-dark-tabs .card-body,
.suspenet-dark-tabs .panel,
.suspenet-dark-tabs .panel-body,
.suspenet-dark-tabs .module-client-area {
    background:#101318 !important;
    background-color:#101318 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
}

/* taburile de sus */
.product-details .nav-tabs,
.product-details .nav-tabs > li,
.product-details .nav-tabs .nav-item {
    background:#101318 !important;
    border-color:#303640 !important;
}

.product-details .nav-tabs .nav-link {
    background:#11151b !important;
    color:#d8dce2 !important;
    border-color:#303640 !important;
}

.product-details .nav-tabs .nav-link.active {
    background:#191e25 !important;
    color:#ffffff !important;
    border-color:#303640 !important;
    border-bottom:2px solid #ef1b30 !important;
}

/* orice bg-white ramas in interiorul acestei zone */
.suspenet-dark-tabs .bg-white {
    background:#101318 !important;
    background-color:#101318 !important;
    color:#ffffff !important;
}

/* FIX EXACT BARA ALBA DINTRE TABURI SI CONTINUT */
.responsive-tabs-sm-connector,
.responsive-tabs-sm-connector .channel,
.responsive-tabs-sm-connector .bottom-border {
    background:#101318 !important;
    background-color:#101318 !important;
    border-color:#303640 !important;
    box-shadow:none !important;
}

/* linia de separare ramane discreta */
.responsive-tabs-sm-connector .bottom-border {
    border-bottom:1px solid #303640 !important;
}

/* daca tema pune alb prin pseudo-elemente */
.responsive-tabs-sm-connector::before,
.responsive-tabs-sm-connector::after,
.responsive-tabs-sm-connector .channel::before,
.responsive-tabs-sm-connector .channel::after,
.responsive-tabs-sm-connector .bottom-border::before,
.responsive-tabs-sm-connector .bottom-border::after {
    background:#101318 !important;
    background-color:#101318 !important;
    border-color:#303640 !important;
}


/* =========================================================
   SUSPENET - BRAND PE PACHETE
========================================================= */

.sp-plan-brand {
    display:flex;
    align-items:center;
    gap:7px;
    min-height:27px;
    margin-bottom:8px;
    color:#8e98a5;
    font-size:11px;
    font-weight:600;
}

.sp-plan-brand img {
    display:block;
    width:auto;
    max-width:68px;
    height:21px;
    object-fit:contain;
}

.sp-plan-brand-radio img {
    max-width:76px;
}

.sp-plan-brand-web img {
    max-width:58px;
}


/* =========================================================
   SLIDER PROFESIONAL SUSPENET
========================================================= */

.sp-showcase {
    width:100%;
    max-width:1100px;
    margin:55px auto;
    padding:0 15px;
    box-sizing:border-box;
}

.sp-showcase-slider {
    position:relative;
    overflow:hidden;
    min-height:330px;

    background:
        radial-gradient(circle at 82% 25%, rgba(239,27,48,.12), transparent 32%),
        #0d1116;

    border:1px solid #2a3038;
    border-radius:12px;
}

.sp-showcase-slide {
    display:none;
    grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);
    align-items:center;
    min-height:330px;
    padding:38px 42px;
    gap:35px;
}

.sp-showcase-slide.is-active {
    display:grid;
    animation:spSliderFade .45s ease;
}

@keyframes spSliderFade {
    from {
        opacity:.25;
        transform:translateX(12px);
    }
    to {
        opacity:1;
        transform:translateX(0);
    }
}

.sp-showcase-text {
    position:relative;
    z-index:2;
}

.sp-showcase-kicker {
    display:inline-block;
    margin-bottom:10px;
    color:#ef1b30;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.7px;
}

.sp-showcase-text h2 {
    margin:0 0 13px;
    color:#fff;
    font-size:30px;
    line-height:1.18;
    font-weight:800;
}

.sp-showcase-text p {
    max-width:560px;
    margin:0;
    color:#9da7b4;
    font-size:14px;
    line-height:1.7;
}

.sp-showcase-tags {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:22px;
}

.sp-showcase-tags span {
    padding:6px 10px;
    color:#dce1e7;
    background:#141920;
    border:1px solid #2c333d;
    border-radius:5px;
    font-size:11px;
}

.sp-showcase-image {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    height:250px;
}

.sp-showcase-image img {
    display:block;
    max-width:100%;
    max-height:245px;
    width:auto;
    height:auto;
    object-fit:contain;
}

.sp-showcase-hestia img {
    max-width:85%;
    max-height:155px;
}

.sp-showcase-combined img {
    max-height:230px;
}

.sp-slider-controls {
    position:absolute;
    left:42px;
    right:42px;
    bottom:16px;

    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
}

.sp-slider-prev,
.sp-slider-next {
    width:30px;
    height:30px;
    padding:0;

    background:#141920;
    border:1px solid #303741;
    border-radius:5px;

    color:#fff;
    font-size:20px;
    line-height:25px;
    cursor:pointer;
}

.sp-slider-prev:hover,
.sp-slider-next:hover {
    background:#ef1b30;
    border-color:#ef1b30;
}

.sp-slider-dots {
    display:flex;
    align-items:center;
    gap:6px;
}

.sp-slider-dots button {
    width:7px;
    height:7px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#3b424c;
    cursor:pointer;
}

.sp-slider-dots button.active {
    width:18px;
    border-radius:5px;
    background:#ef1b30;
}


/* =========================================================
   INFRASTRUCTURA
========================================================= */

.sp-infrastructure {
    width:100%;
    max-width:1100px;
    margin:65px auto 20px;
    padding:0 15px;
    box-sizing:border-box;
}

.sp-infrastructure-heading {
    max-width:720px;
    margin:0 auto 32px;
    text-align:center;
}

.sp-infrastructure-heading > span {
    color:#ef1b30;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.6px;
}

.sp-infrastructure-heading h2 {
    margin:8px 0 10px;
    color:#fff;
    font-size:28px;
    font-weight:800;
}

.sp-infrastructure-heading p {
    margin:0;
    color:#909ba8;
    font-size:14px;
    line-height:1.7;
}

.sp-infrastructure-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}

.sp-infra-box {
    position:relative;
    min-width:0;
    padding:22px 19px;

    background:#101419;
    border:1px solid #2b3139;
    border-radius:9px;
}

.sp-infra-box::after {
    content:"";
    position:absolute;
    left:19px;
    bottom:0;
    width:35px;
    height:2px;
    background:#ef1b30;
}

.sp-infra-icon {
    display:flex;
    align-items:center;
    justify-content:center;

    width:35px;
    height:35px;
    margin-bottom:15px;

    background:#171c22;
    border:1px solid #343b45;
    border-radius:6px;

    color:#ef1b30;
    font-size:17px;
}

.sp-infra-box h3 {
    margin:0 0 9px;
    color:#fff;
    font-size:15px;
    font-weight:700;
}

.sp-infra-box p {
    margin:0;
    color:#8f99a6;
    font-size:12px;
    line-height:1.65;
}

.sp-infrastructure-quote {
    display:flex;
    align-items:flex-start;
    gap:20px;

    margin-top:25px;
    padding:25px 28px;

    background:
        linear-gradient(110deg,rgba(239,27,48,.08),transparent 45%),
        #0f1318;

    border:1px solid #2b3139;
    border-left:3px solid #ef1b30;
    border-radius:7px;
}

.sp-quote-mark {
    color:#ef1b30;
    font-size:48px;
    line-height:.8;
    font-family:Georgia,serif;
}

.sp-infrastructure-quote strong {
    color:#fff;
    font-size:15px;
}

.sp-infrastructure-quote p {
    margin:7px 0 0;
    color:#8e98a5;
    font-size:12px;
    line-height:1.7;
}


/* =========================================================
   MOBIL
========================================================= */

@media (max-width:767px) {

    .sp-showcase {
        margin:35px auto;
        padding:0 10px;
    }

    .sp-showcase-slider {
        min-height:0;
        border-radius:8px;
    }

    .sp-showcase-slide {
        grid-template-columns:1fr;
        min-height:0;
        padding:25px 20px 55px;
        gap:18px;
    }

    .sp-showcase-text {
        text-align:center;
    }

    .sp-showcase-text h2 {
        font-size:22px;
    }

    .sp-showcase-text p {
        font-size:12px;
    }

    .sp-showcase-tags {
        justify-content:center;
    }

    .sp-showcase-image {
        height:170px;
    }

    .sp-showcase-image img {
        max-height:165px;
    }

    .sp-showcase-hestia img {
        max-height:90px;
    }

    .sp-slider-controls {
        left:20px;
        right:20px;
        bottom:13px;
        justify-content:center;
    }


    .sp-infrastructure {
        margin-top:45px;
        padding:0 10px;
    }

    .sp-infrastructure-heading h2 {
        font-size:22px;
    }

    .sp-infrastructure-grid {
        grid-template-columns:1fr 1fr;
        gap:9px;
    }

    .sp-infra-box {
        padding:17px 14px;
    }

    .sp-infra-box h3 {
        font-size:13px;
    }

    .sp-infra-box p {
        font-size:11px;
    }

    .sp-infrastructure-quote {
        padding:20px 17px;
    }

    .sp-plan-brand {
        margin-bottom:6px;
    }

    .sp-plan-brand img {
        height:17px;
        max-width:55px;
    }
}


@media (max-width:420px) {

    .sp-infrastructure-grid {
        grid-template-columns:1fr;
    }

    .sp-showcase-text h2 {
        font-size:20px;
    }
}


/* =====================================================
   LOGO-URI PACHETE SUSPENET - VIZIBILITATE
===================================================== */

.sp-plan-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    min-height: 32px !important;
    margin-bottom: 8px !important;
    opacity: 1 !important;
}

.sp-plan-brand img {
    display: block !important;
    width: auto !important;
    object-fit: contain !important;
    opacity: 1 !important;
    filter: none !important;
}

/* AzuraCast - pachetele Radio */
.sp-plan-brand-radio img {
    height: 30px !important;
    max-width: 125px !important;
}

/* Hestia - pachetele Web */
.sp-plan-brand-web img {
    height: 27px !important;
    max-width: 115px !important;
}

/* Textul de langa logo */
.sp-plan-brand span {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #f5f7fa !important;
    opacity: 1 !important;
}

@media (max-width: 767px) {
    .sp-plan-brand-radio img {
        height: 27px !important;
        max-width: 110px !important;
    }

    .sp-plan-brand-web img {
        height: 25px !important;
        max-width: 105px !important;
    }
}


/* =========================================================
   SUSPENET - CHECKOUT DARK FINAL
========================================================= */

body #order-standard_cart {
    color:#e8edf3 !important;
}

/* Alege Cont - zona care ramanea alba */
body #order-standard_cart #containerExistingAccountSelect,
body #order-standard_cart #containerExistingAccountSelect .account,
body #order-standard_cart #containerExistingAccountSelect .account > div,
body #order-standard_cart #containerExistingAccountSelect label,
body #order-standard_cart .account {
    background:#101419 !important;
    background-color:#101419 !important;
    color:#e8edf3 !important;
    border-color:#303740 !important;
}

/* Cont selectat */
body #order-standard_cart #containerExistingAccountSelect .account.active {
    background:#151b22 !important;
    border:1px solid #ef1b30 !important;
}

/* Text cont */
body #order-standard_cart #containerExistingAccountSelect strong,
body #order-standard_cart #containerExistingAccountSelect span,
body #order-standard_cart #containerExistingAccountSelect p,
body #order-standard_cart #containerExistingAccountSelect div {
    color:#dce2e8 !important;
}

/* Cont nou */
body #order-standard_cart #containerNewUserSignup,
body #order-standard_cart #containerNewUserSignup .form-group,
body #order-standard_cart #containerExistingUserSignin {
    background:#101419 !important;
    color:#e8edf3 !important;
}

/* Campuri */
body #order-standard_cart input[type="text"],
body #order-standard_cart input[type="email"],
body #order-standard_cart input[type="password"],
body #order-standard_cart input[type="tel"],
body #order-standard_cart select,
body #order-standard_cart textarea,
body #order-standard_cart .form-control {
    background:#0b0e12 !important;
    background-color:#0b0e12 !important;
    color:#fff !important;
    border:1px solid #343b45 !important;
    box-shadow:none !important;
}

body #order-standard_cart input::placeholder,
body #order-standard_cart textarea::placeholder {
    color:#75808c !important;
}

/* Sectiuni checkout */
body #order-standard_cart .sub-heading span {
    background:#0b0e12 !important;
    color:#ef1b30 !important;
}

body #order-standard_cart .sub-heading {
    border-color:#353c45 !important;
}

/* Carduri / panouri */
body #order-standard_cart .card,
body #order-standard_cart .card-body,
body #order-standard_cart .panel,
body #order-standard_cart .panel-body,
body #order-standard_cart .well {
    background:#101419 !important;
    color:#e8edf3 !important;
    border-color:#303740 !important;
}

/* Zona metode plata */
body #order-standard_cart .payment-methods-container,
body #order-standard_cart #paymentGatewaysContainer,
body #order-standard_cart .payment-method {
    background:#101419 !important;
    color:#e8edf3 !important;
}

/* Labels */
body #order-standard_cart label {
    color:#e8edf3 !important;
}

/* iCheck */
body #order-standard_cart .iradio_square-blue,
body #order-standard_cart .icheckbox_square-blue {
    background-color:#171c23 !important;
}

/* Tabele daca apar */
body #order-standard_cart table,
body #order-standard_cart table td,
body #order-standard_cart table th {
    background:#101419 !important;
    color:#e8edf3 !important;
    border-color:#303740 !important;
}

/* Hover */
body #order-standard_cart #containerExistingAccountSelect .account:hover {
    background:#171c23 !important;
}

/* Nu atingem butonul rosu principal */
body #order-standard_cart .btn-primary {
    color:#fff !important;
}


/* =========================================================
   SUSPENET - REINNOIRE SERVICII DARK
========================================================= */

#serviceRenewals .service-renewal,
.service-renewal {
    background:#11161c !important;
    background-color:#11161c !important;
    color:#e8edf3 !important;
    border-color:#303740 !important;
}

/* toate blocurile din interior */
#serviceRenewals .service-renewal > div,
.service-renewal > div {
    background-color:transparent !important;
    color:#e8edf3 !important;
}

/* titlul serviciului */
#serviceRenewals .service-renewal h3,
#serviceRenewals .service-renewal h4,
#serviceRenewals .service-renewal h5,
#serviceRenewals .service-renewal .service-name,
.service-renewal h3,
.service-renewal h4,
.service-renewal h5 {
    color:#ffffff !important;
}

/* texte */
#serviceRenewals .service-renewal p,
#serviceRenewals .service-renewal span,
#serviceRenewals .service-renewal label,
#serviceRenewals .service-renewal div,
.service-renewal p,
.service-renewal span,
.service-renewal label {
    color:#c5ced8 !important;
}

/* separatoare */
#serviceRenewals .service-renewal,
#serviceRenewals .service-renewal * {
    border-color:#303740;
}

/* select perioada reinnoire */
#serviceRenewals .service-renewal select,
.service-renewal select {
    background:#0b0f14 !important;
    color:#ffffff !important;
    border:1px solid #343b45 !important;
}

/* hover */
#serviceRenewals .service-renewal:hover,
.service-renewal:hover {
    background:#151b22 !important;
    background-color:#151b22 !important;
}

/* addon-uri din interior */
#serviceRenewals .addon-renewals,
.service-renewal .addon-renewals {
    background:#0f1419 !important;
    color:#e8edf3 !important;
    border-color:#303740 !important;
}