/* Theme / language toggle buttons */
.theme-toggle-btn,
.lang-toggle-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0 15px 0 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
}

.side-menu-toggles {
    display: flex;
    align-items: center;
}

.side-menu-toggles .theme-toggle-btn,
.side-menu-toggles .lang-toggle-btn {
    margin: 0 20px 0 0;
}

.lang-toggle-btn .lang-flag {
    display: none;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Show the flag of the language you will switch TO */
.lang-toggle-btn .lang-flag-ar {
    display: inline-block;
}

html[lang="es"] .lang-toggle-btn .lang-flag-ar {
    display: none;
}

html[lang="es"] .lang-toggle-btn .lang-flag-us {
    display: inline-block;
}

.theme-toggle-btn .icon-moon {
    display: none;
}

.theme-toggle-btn .icon-sun {
    filter: drop-shadow(0 0 3px rgba(255, 179, 0, 0.65));
}

.theme-toggle-btn .icon-moon {
    filter: drop-shadow(0 0 3px rgba(124, 140, 219, 0.65));
}

.theme-toggle-btn:hover .icon-sun {
    filter: drop-shadow(0 0 6px rgba(255, 179, 0, 0.9));
}

.theme-toggle-btn:hover .icon-moon {
    filter: drop-shadow(0 0 6px rgba(124, 140, 219, 0.9));
}

html.dark-mode .theme-toggle-btn .icon-sun {
    display: none;
}

html.dark-mode .theme-toggle-btn .icon-moon {
    display: inline-block;
}

/* ---- Dark mode theme override ---- */
html.dark-mode {
    color-scheme: dark;
}

html.dark-mode body {
    background-color: #14161a;
    color: #e6e6e6;
}

html.dark-mode header,
html.dark-mode .navbar,
html.dark-mode .side-menu .inner-wrapper {
    background-color: #101114 !important;
}

/* The base theme colors nav text/icons near-black, assuming a light navbar.
   Force them light so they stay readable against the dark navbar background. */
html.dark-mode .navbar-nav .nav-link,
html.dark-mode .header-social a,
html.dark-mode .theme-toggle-btn,
html.dark-mode .lang-toggle-btn {
    color: #f0f0f0 !important;
}

html.dark-mode .menu_bars span {
    background-color: #f0f0f0 !important;
}

html.dark-mode .gray-bg,
html.dark-mode .bg-light-gray {
    background-color: #14161a !important;
}

html.dark-mode .contact-box-shadow,
html.dark-mode .news_item.shadow,
html.dark-mode .awesome-feature,
html.dark-mode .single-service {
    background-color: #1d1f24 !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.45) !important;
}

html.dark-mode .color-black,
html.dark-mode .text-black,
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode p {
    color: #eaeaea !important;
}

html.dark-mode .color-grey,
html.dark-mode .color-light-grey {
    color: #a9acb1 !important;
}

html.dark-mode footer.bg-white {
    background-color: #101114 !important;
}

html.dark-mode .mapouter,
html.dark-mode .gmap_canvas {
    filter: invert(90%) hue-rotate(180deg);
}