:root {
    /* Main Colors */
    --color-light-gray: #EEE;
    --color-soft-gray: #F3F3F3;
    --color-dark-blue: #1e2a5e;
    --color-medium-gray: #999;
    --color-white: #FFF;
    --color-red: #dc3545;
    --color-dark-gray: #28333d;
    --color-dark-text: #333;
    --color-orange: #ff8c00;
    --primary-pink: #dc3c5f;
    --color-medium-text: #555;
    --color-very-dark-blue: #151b24;
    --color-dark-blue-gray: #1f2e44;
    --color-very-dark-blue-gray: #1E2734;
    --color-dark-border: #314056;

    /* RGBA Colors */
    --color-semi-transparent-white: rgba(255, 255, 255, 0.7);
    --color-semi-transparent-black: rgba(0, 0, 0, 0.6);
    --color-semi-transparent-shadow: rgba(0, 0, 0, 0.3);
    --color-transparent: rgba(0, 0, 0, 0);

    /* Additional Colors */
    --color-light-border: #CCC;
    --color-light-separator: #DDD;
    --color-light-icon: #bbb;
    --color-dark-text-gray: #999;
    --color-text-shadow: #111;

    /* Logo Colors */
    --color-logo-pink: #FF005A;
    --color-logo-white: #FFF;

    /* Dark Mode Specific Colors */
    --color-dark-mode-bg: #151b24;
    --color-dark-mode-bg-secondary: #1f2e44;
    --color-dark-mode-card: #1E2734;
    --color-dark-mode-border: #314056;

    /* Menus colors */
    --text-color-1: #005485;
    --text-color-2: #c5840a;
    --text-color-3: #9f0c7d;
    --text-color-4: #217733;

    /* Menus colors dark mode*/
    --dark-mode-text-color-1: #0ca2d7;
    --dark-mode-text-color-2: #efb731;
    --dark-mode-text-color-3: #f54091;
    --dark-mode-text-color-4: #6cc05f;

    /* Gradients */
    --gradient-1: linear-gradient(45deg, #00bcff, #c91d73);
    --gradient-1-2: linear-gradient(45deg, #054981, #d0026a);
    --gradient-2: linear-gradient(45deg, #ffcb4e, #b94d01);
    --gradient-3: linear-gradient(45deg, #833ab4, #f56040);
    --gradient-4: linear-gradient(45deg, #8eea80, #0d3816);
}

/* MAIN STYLES */
html {scroll-behavior: smooth;}
body { overflow-y: auto; }
/* Utility Classes */
.border-light { border: 1px var(--color-light-gray) solid !important; }
.bg-soft { background: var(--color-soft-gray) !important; }
.bg-primary-front, .nav-tabs .btn.btn-grey-front.active { background: var(--primary-pink) !important; }
.nav-tabs .btn.border.active { background: var(--color-white); color: var(--primary-pink) !important; }
.btn-grey-front { background: var(--color-medium-gray); }
.bg-secondary-front { background: var(--color-dark-blue) !important; }
.btn-white-transparent { background: var(--color-semi-transparent-white) !important; }
.dark-mode .btn.btn-primary-front, .btn.btn-primary-front { border-color: var(--primary-pink) !important; background: var(--primary-pink) !important; color: var(--color-white) !important; }
.dark-mode .btn.btn-secondary-front, .btn.btn-secondary-front { border: none !important; background: var(--color-dark-blue) !important; color: var(--color-white) !important; }
.bg-shadow, .bg-gradient-1, .bg-shadow-half { position: relative; }
.bg-shadow:after, .bg-gradient-1:after { content: ''; z-index: 0; top: 0; background: var(--color-semi-transparent-black); position: absolute; width: 100%; height: 100%; }
.bg-gradient-1:after { background: var(--gradient-1-2); opacity: 0.85}
.bg-shadow-half:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 35%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.1) 50%, transparent 55%);    z-index: 0;
    pointer-events: none;
}
.bg-shadow *, .bg-gradient-1 *, .bg-shadow-half * {z-index: 1}



.font-weight-700 { line-height: initial; font-weight: 700; }
.font-weight-300 { font-weight: 300; }
.text-shadow { text-shadow: 0 0 15px var(--color-text-shadow) !important; }
.shadow-strong { box-shadow: 0 .5rem 1rem var(--color-semi-transparent-shadow) !important; }
.text-primary-front { color: var(--primary-pink) !important; }
.custom-control-input:checked ~ .custom-control-label::before { border-color: var(--color-red); background-color: var(--color-red); }
.domainPrice a, .app .colored { color: var(--color-red) !important; }
.line-height-1 { line-height: 1; }
.line-height-1-3 { line-height: 1.375; }
img { max-width: 100%; }
/* Topography Styles */
.topography { position: relative; z-index: 1 }
.topography .topo-svg { width: 100%; height: 100px; position: absolute; bottom: -1px; }
.topography.bg-soft polygon { fill: var(--color-soft-gray); }
.topography.bg-primary-front polygon { fill: var(--primary-pink) !important; }
.topography.bg-secondary-front polygon { fill: var(--color-dark-blue) !important; }
.bg-dark { background: var(--color-dark-gray) !important; }
.topography.bg-dark polygon { fill: var(--color-dark-gray) !important; }
@media (max-width: 992px) {
    .topography .topo-svg { height: 50px; }
}

/* LOGO STYLES */
a.navbar-brand svg { width: 140px; }
.logo-st0 * { fill: var(--color-logo-pink); }
.navbar.affix .logo-st0 * { fill: var(--color-logo-pink) !important; }
.logo-st1 * { fill: var(--color-white); }
.navbar.affix .logo-st1 *, .app-header-clean .logo-st1 * { fill: var(--color-dark-text); }

/* MENU STYLES */
#headerNav .menu.navbar-nav{margin:0 auto}
#headerNav .sub-menu{width:100vh;margin:0;padding:10px!important;border-radius:15px;max-width:800px}
#headerNav .dropdown .dropdown-menu,#headerNav .sub-menu{border:1px var(--color-light-border) solid}
#headerNav .sub-menu li{width:100%;vertical-align:top}
#headerNav .sub-menu li a{color:var(--color-dark-text);font-weight:600;background:none!important;padding:3px 0;font-size:14px!important}
#headerNav .sub-menu p{font-size:13px;line-height:20px;margin-bottom:10px;color:var(--color-medium-text)}
#menuNavFront a.nav-link.dropdown-toggle::after{display:inline-block!important}
.menu li{position:relative;display:inline-block}
.menu ul{z-index:9}
#headerNav .dropdown-toggle{outline:none!important;box-shadow:none!important}
.header nav.navbar{padding:.3rem 1rem}
.navbar-brand{font-size:inherit;height:auto;}
.navbar a{font-weight:600;text-decoration:none;display:block;color:var(--color-white)}
.menu ul ul{left:200px;top:0;transform:translate(20px,20px);transition:.2s ease-out}
.navbar.affix{background:var(--color-white)!important;border-bottom:1px solid var(--color-light-border)}
.navbar.affix a{color:var(--color-dark-text)}
.navbar i{color:var(--color-white)}
.navbar.affix i,#lang .dropdown-menu a{color:var(--color-dark-text)}
.menu.navbar-nav .nav-link{font-size:16px!important;padding: 10px 15px;font-weight:400}
@media (min-width: 1200px) {
    li.nav-item:hover ul.sub-menu{display:block}
}
@media (max-width: 1199px) {
    #menuNavFront{z-index:1;position:absolute;top:0;background:#FFF;left:0;height:var(--vh);overflow:auto}
    #menuNavFront .menu {padding-bottom: 80px}
    #headerNav .sub-menu{width:100%;max-width:inherit}
    #menuNavFront .menu.navbar-nav{margin:0 auto}
    #menuNavFront .navbar-nav{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}
    #menuNavFront .nav-link{color:var(--color-dark-text); padding: 15px}
    #menuNavFront .dropdown-menu{position:relative!important;box-shadow:none!important;border:none!important;background:none!important}
    #menuNavFront a.nav-link.dropdown-toggle::after{float:right;margin-top:10px}
    .dark-mode #menuNavFront{background:var(--color-very-dark-blue-gray)}
    .dark-mode #menuNavFront .nav-link{color:var(--color-white)!important}
}


.menu-gradient-1, .menu-gradient-2, .menu-gradient-3, .menu-gradient-4{display:inline-block}
.menu-gradient-1{background: var(--gradient-1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;color: var(--primary-blue)}
.menu-gradient-2{background: var(--gradient-2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;color: var(--text-color-2)}
.menu-gradient-3{background: var(--gradient-3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;color: var(--text-color-3)}
.menu-gradient-4{background: var(--gradient-4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;color: var(--text-color-4)}

#menuNavFront .sub-menu li h3 { font-size: 16px}
#menuNavFront .sub-menu li p { font-weight: normal; font-size: 13px}
#menuNavFront .sub-menu li a:hover .menu-color-link-1, a.active .menu-color-link-1 {color:var(--text-color-1)!important}
#menuNavFront .sub-menu li a:hover .menu-color-link-2, a.active .menu-color-link-2 {color:var(--text-color-2)!important}
#menuNavFront .sub-menu li a:hover .menu-color-link-3, a.active .menu-color-link-3 {color:var(--text-color-3)!important}
#menuNavFront .sub-menu li a:hover .menu-color-link-4, a.active .menu-color-link-4 {color:var(--text-color-4)!important}

.dark-mode #menuNavFront .sub-menu li a:hover .menu-color-link-1, .dark-mode a.active .menu-color-link-1 {color:var(--dark-mode-text-color-1)!important}
.dark-mode #menuNavFront .sub-menu li a:hover .menu-color-link-2, .dark-mode a.active .menu-color-link-2 {color:var(--dark-mode-text-color-2)!important}
.dark-mode #menuNavFront .sub-menu li a:hover .menu-color-link-3, .dark-mode a.active .menu-color-link-3 {color:var(--dark-mode-text-color-3)!important}
.dark-mode #menuNavFront .sub-menu li a:hover .menu-color-link-4, .dark-mode a.active .menu-color-link-4 {color:var(--dark-mode-text-color-4)!important}

#switchBranch { width: 22px; margin-top: 2px;}
#switchBranch .dropdown-menu a{color:#333}

/* ADDITIONAL STYLES */
.free-package { border-radius: 1rem !important; }
#find-domain-front h5.search-title { display: none; }
#find-domain-front #searchDomainResult label { background: var(--color-white); border-radius: 15px !important; }
#find-domain-front #info-prices { color: var(--color-white) !important; }
#find-domain-front #searchDomainResult h5, #find-domain-front #searchDomainResult .symbol, #find-domain-front #searchDomainResult .value { color: var(--color-dark-text) !important; }
.front-page.documentation .side-menu { padding: 0 30px; }
.front-page.signup .ss-main .ss-single-selected { border-radius: 15px; }

/* API STATUS STYLES */
.api-documentation nav#headerNav, .api-status nav#headerNav { background: none !important; border: none !important; position: absolute !important; }
.api-status-blocks { width: 6px; height: 24px; margin: 0 2px; }
#captcha-lock .unlock-wrapper { display: block !important; width: 100%; }
#captcha-lock p { font-size: 13px; display: inline-block; max-width: 170px; vertical-align: middle; margin: 15px 10px; }
#captcha-lock .unlock, #captcha-lock .unlock:active, #captcha-lock .unlock:focus, #captcha-lock .unlock:not(:disabled):not(.disabled):active { background: none !important; }
#captcha-lock .unlock { width: 50px; height: 50px; border-radius: 50% !important; border-style: solid; border-width: 4px; float: left; text-align: center; line-height: 40px; vertical-align: baseline; margin: 10px 0; }
#captcha-lock .unlock i { font-size: 20px; color: var(--color-light-icon); }
.unlock-wrapper .btn-primary.unlock { border-color: var(--color-transparent) !important; }
.unlock-wrapper .unlock.completed, .unlock-wrapper .unlock.completed + .lock-text { display: none !important; }

/* DARK MODE STYLES */
.dark-mode .navbar.affix .logo-st1 *, .dark-mode .app-header-clean .logo-st1 * { fill: var(--color-white); }
.dark-mode .topography polygon { fill: var(--color-dark-mode-bg) !important; }
.dark-mode .topography.bg-soft polygon, .dark-mode .topography.bg-primary-front polygon { fill: var(--color-dark-mode-bg-secondary) !important; }
.dark-mode .card .topography polygon { fill: var(--color-dark-mode-card) !important; }
.dark-mode .topography.bg-dark polygon { fill: var(--color-dark-gray) !important; }
.dark-mode .topography.bg-secondary-front polygon { fill: var(--color-dark-blue) !important; }
.dark-mode .bg-soft, .dark-mode section.bg-primary-front { background: var(--color-dark-mode-bg-secondary) !important; }
.dark-mode .navbar.affix, .dark-mode .border-bottom, .dark-mode .border-top { border-color: var(--color-dark-mode-border) !important; }
.dark-mode .navbar.affix { background: var(--color-dark-mode-bg) !important; }
.dark-mode .navbar.affix a, .dark-mode .navbar.affix i, .dark-mode .navbar.affix .special-border { color: var(--color-white) !important; }
.dark-mode #headerNav .sub-menu p { color: var(--color-dark-text-gray); }


/********** PAGES **********/

/* index */
.nav-modern button{background:none;width:100%;text-align:center;align-content:center;min-height:100px;border-radius:10px!important}
.nav-modern button i{font-size:24px;color:#222;margin-bottom:5px}
.nav-modern button h4{font-size:14px;height:34px;align-content:center;margin:0}
.nav-modern button.active{background:#222}
.nav-modern button.active h4,.nav-modern button.active i{color:#FFF!important}
.tab-modern .item-tab{background-position:center; display:inline-block;width:100%;border-radius:10px;height:250px;overflow:hidden;transition:background-size 2s,background-position 2s;background-size:cover}
.dark-mode .nav-modern button.active{background:#FFF}
.dark-mode .nav-modern button.active h4,.dark-mode .nav-modern button.active i{color:#222!important}
.tab-modern .item-tab p{margin:0}

.item-wrap:first-child { padding-left: 0 !important;}
.item-wrap:last-child { padding-right: 0 !important;}

@media (min-width: 1200px) {
    .tab-modern .item-tab{background-size:100%!important}
    .tab-modern .item-tab:hover{background-size:110%!important;}
}
@media (max-width: 767px) {
    .tab-modern .item-tab{height: 220px}
    .item-wrap {padding: 0.5rem}
    .item-wrap + .item-wrap {padding-right: 0; padding-left: 0.5rem}
    .item-wrap + .item-wrap + .item-wrap {padding-left: 0; padding-right: 0.5rem}
    .item-wrap:last-child { padding-right: 0 !important; padding-left: 0.5rem !important;}
}

/* images library*/
#photos .image{margin:0!important}
div#photosDisplay{top:0;position:absolute;z-index:0;width:100%}

/* breadcrumbs */
.front-page .breadcrumb-item + .breadcrumb-item::before { color: #FFF !important;}
.custom-breadcrumb { padding: 0 !important;}
@media (max-width: 450px) {
    .custom-breadcrumb .breadcrumb-item {display: block}
    .custom-breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 0 !important;}
    .front-page .breadcrumb-item + .breadcrumb-item::before { content: none !important;}
}

/*justify-content-center align-content-center h-min-250px h-md-min-350px pb-md-5 my-5*/
.page-header{-ms-flex-pack:center!important;-webkit-box-pack:center!important;justify-content:center!important;-ms-flex-line-pack:center!important;align-content:center!important;min-height:300px;padding-bottom:3rem!important;margin:3rem 0!important}
.page-header-slim{min-height:200px}
.page-header-doc{min-height:150px!important;padding:3rem 0 0!important;margin-bottom:0!important}
@media (max-width: 992px) {
    .page-header{min-height:250px;padding-bottom:0!important}
}