:root {
    /* Main Colors */
    --color-light-gray: #EEE;
    --color-soft-gray: #F7F7F7;
    --color-bright-pink: #e80566;
    --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;
    --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.5);
    --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;
}

/* MAIN STYLES */
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(--color-bright-pink) !important; }
.nav-tabs .btn.border.active { background: var(--color-white); color: var(--color-bright-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(--color-bright-pink) !important; background: var(--color-bright-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 { position: relative; }
.bg-shadow:before { content: ''; background: var(--color-semi-transparent-black); position: absolute; width: 100%; height: 100%; }
.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(--color-bright-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; }
.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(--color-bright-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); }
.additional-modules .logo-st0 *, .social-media.facebook .logo-st0 *, .social-media.instagram .logo-st0 *, .social-media.twitter .logo-st0 *, .social-media.linkedin .logo-st0 *, .social-media.pinterest .logo-st0 *, .social-media.vimeo .logo-st0 * { fill: var(--color-white); }
.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 */
.menu li { position: relative; display: inline-block; }
.menu ul { z-index: 9; }
.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.sub-menu li:first-child a:hover, .menu ul.sub-menu li:last-child ul li:first-child a:hover { border-radius: 4px 4px 0 0; }
.menu ul.sub-menu li:last-child a:hover, .menu ul.sub-menu li:last-child ul li:last-child a:hover { border-radius: 0 0 4px 4px; }
.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); }
.special-border, .navbar i { color: var(--color-white); }
.navbar.affix .special-border, .navbar.affix i, #lang .dropdown-menu a { color: var(--color-dark-text); }
.menu.navbar-nav .nav-link { font-size: 16px !important; padding: 5px 15px; font-weight: 400; }
#menuNavFront .menu.navbar-nav { margin: 0 auto; }
#menuNavFront .sub-menu { width: 360px; margin: 0; padding: 10px 20px 5px !important; border-radius: 15px; }
#menuNavFront .dropdown .dropdown-menu, #menuNavFront .sub-menu { border: 1px var(--color-light-border) solid; }
#menuNavFront .sub-menu li { width: 100%; vertical-align: top; }
#menuNavFront .sub-menu li a { color: var(--color-dark-text); font-weight: 600; background: none !important; padding: 3px 0; font-size: 14px !important; }
#menuNavFront .sub-menu li a:hover, #menuNavFront .sub-menu li a.active { color: var(--color-orange) !important; }
#menuNavFront .sub-menu p { font-size: 13px; line-height: 20px; margin-bottom: 10px; color: var(--color-medium-text); }
#navbarSupportedContent a.nav-link.dropdown-toggle::after { display: inline-block !important; }
@media (min-width: 992px) {
    .special-space { margin-left: 50px; }
    li.nav-item:hover ul.sub-menu { display: block; }
}
@media (max-width: 767px) {
    .menu li, nav { margin: 0; }
    .menu li, .responsive-menu { display: block; }
    .menu ul, .menu ul ul { left: 0; }
    .menu li:hover > ul, .menu li > ul ul:hover, .menu ul, .menu ul ul { transform: initial; }
    .header nav.navbar { padding: .5rem 1rem; }
    nav { background: 0 0; }
    #menuNavFront .nav-item .nav-link:after { display: none !important; }
    .menu.navbar-nav .nav-link { padding: 8px 15px; }
    ul.menu li a.nav-link.dropdown-toggle:after { position: absolute; right: 15px; top: 15px; }
}
@media (max-width: 992px) {
    #menuNavFront .navbar-nav a { color: var(--color-dark-text); }
    div#navbarSupportedContent.show { display: block; }
    #menuNavFront .navbar-nav { padding: 10px; border-radius: 25px; background: var(--color-white); }
    #menuNavFront .dropdown-menu { box-shadow: none; border: none; background: none !important; width: 100%; }
    .dropdown-toggle:focus { outline: none; }
    .dark-mode #menuNavFront .navbar-nav a { color: var(--color-white); }
    .dark-mode #menuNavFront .navbar-nav { padding: 10px; border-radius: 25px; background: var(--color-dark-mode-bg); }
}

/* ADDITIONAL STYLES */
.free-package { border-radius: 1rem !important; }
.bg-primary-front .breadcrumb-item + .breadcrumb-item::before { color: var(--color-light-separator); }
#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#menuNavFront, .api-status nav#menuNavFront { 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 #menuNavFront .sub-menu p { color: var(--color-dark-text-gray); }