:root { --blue: #177ebc; --obsidian: #0b1215; --rich-blue: #2260ff; --invert: #cde138; --active-color: #2260ff; } /* Apply focus styles globally except for the .bg-dark class */ *:not(.bg-dark):focus-visible { outline: 3px solid #177ebc; outline-offset: 0.25rem; } /* Override focus styles for .bg-dark class */ .bg-dark:focus-visible { outline: 3px solid #fff !important; } .btn-roumi:focus-visible, .btn-roumi-reverse:focus-visible { outline: 3px solid #177ebc; outline-offset: 2px; } .enable-trigger-circle, .enable-trigger-check { fill: #177ebc !important; } .keyboard-shorcut { color: #177ebc !important; } /* for the invert colors bug */ .toolbar-fixed { position: fixed; } /* the toolbar start */ .ac_toolbar { position: fixed; bottom: 0; background: #5d7083; width: 100%; min-height: 12.5em; /* min-height: 36em; */ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; vertical-align: middle; padding: 3em; z-index: 6; opacity: 0.96; } .toolbar-top { position: absolute; top: 0; margin-top: 1.45rem; } /* CSS */ .close-button { position: fixed; right: 44px; /* bottom: 250px; */ color: #fff; background-color: var(--obsidian); border: 2px solid var(--obsidian); width: 44px; height: 44px; appearance: none; border-radius: 22px; box-sizing: border-box; cursor: pointer; display: inline-block; line-height: normal; outline: none; text-align: center; text-decoration: none; transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1); user-select: none; -webkit-user-select: none; touch-action: manipulation; will-change: transform; justify-content: center; align-items: center; /* margin-bottom: 0.45em; margin-left: 0.45em; padding: 0.25em; */ z-index: 9; } .close-button svg { /* width: 1.45em; height: 1.45em; */ width: 1.35em; height: 1.35em; } .close-button:disabled { pointer-events: none; } .close-button:hover { background: var(--rich-blue); border: 2px solid var(--rich-blue); color: #fff; box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px; transform: translateY(-2px); } .close-button:active { box-shadow: none; transform: translateY(0); } .radio-inputs { display: flex; justify-content: center; align-items: center; width: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .radio-inputs > * { margin: 6px; } .radio-input:checked + .radio-tile { border-color: var(--active-color); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); color: var(--active-color); } .radio-input:checked + .radio-tile:before { transform: scale(1); opacity: 1; background-color: var(--rich-blue); border-color: var(--rich-blue); } .radio-input:checked + .radio-tile .radio-icon svg { fill: var(--rich-blue); } .radio-input:checked + .radio-tile .radio-label { color: var(--rich-blue); } .radio-input:focus + .radio-tile { border-color: var(--rich-blue); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc; } .radio-input:focus + .radio-tile:before { transform: scale(1); opacity: 1; } .radio-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 7.5em; height: 7.5em; border-radius: 0.5rem; border: 3px solid #b5bfd9; background-color: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); transition: 0.15s ease; cursor: pointer; position: relative; } .radio-tile:before { content: ""; position: absolute; display: block; width: 0.85rem; height: 0.85rem; border: 3px solid #b5bfd9; background-color: #fff; border-radius: 50%; top: 0.65rem; right: 0.65rem; /* was 0.25 */ opacity: 0; transform: scale(0); transition: 0.25s ease; } .radio-tile:hover { border-color: var(--rich-blue); } .radio-tile:hover:before { transform: scale(1); opacity: 1; } .radio-icon svg { width: 2rem; height: 2rem; fill: var(--bs-gray-dark); margin-bottom: 0.45em; } .radio-label { color: var(--bs-gray-dark); transition: 0.375s ease; text-align: center; font-size: 16px; font-weight: 600; font-optical-sizing: auto; text-rendering: optimizeSpeed; } .radio-input { clip: rect(0 0 0 0); -webkit-clip-path: inset(100%); clip-path: inset(100%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /* the toolbar end */ .toolbar-bottom { margin-top: 1em; } .reset { color: white; background-color: var(--obsidian); font-weight: 500; border-radius: 0.5rem; font-size: 1rem; line-height: 2rem; padding-left: 2rem; padding-right: 2rem; padding-top: 0.7rem; padding-bottom: 0.7rem; cursor: pointer; text-align: center; /* margin-left: 0.5rem; */ display: inline-flex; align-items: center; border: none; } .reset:hover { background-color: var(--rich-blue); } .reset svg { display: inline; width: 1.3rem; height: 1.3rem; margin-left: 0.75rem; color: white; } .reset:focus svg { animation: spin_reset 0.5s linear; } /* .invertColors { filter: invert(1); } */ body.invertColors { background: #000; } html.invertColors { scrollbar-color: var(--invert) var(--obsidian); } html.invertColors::-webkit-scrollbar-track { background: var(--obsidian); } html.invertColors::-webkit-scrollbar-thumb { background-color: var(--obsidian); border: 3px solid var(--invert); } body.invertColors h1, body.invertColors h2, body.invertColors h3, body.invertColors h4, body.invertColors h5, body.invertColors h6, body.invertColors p, body.invertColors .service-item a, body.invertColors .header_logo, body.invertColors .dropdown-item:hover, body.invertColors .themeToggle, body.invertColors .navbar, body.invertColors .processCard, body.invertColors .appointment, body.invertColors .bg-white, body.invertColors .form-floating, body.invertColors .form-control, body.invertColors .navbar.sticky-top, body.invertColors .dropdown-item, body.invertColors .flex-shrink-0, body.invertColors #hero-section, body.invertColors .swiper-button-next, body.invertColors .swiper-button-prev, body.invertColors .swiper-button-next:hover, body.invertColors .swiper-button-prev:hover, body.invertColors .btn-roumi-reverse, body.invertColors .btn-roumi { filter: invert(1); } /* body.invertColors img { filter: invert(1); } */ /* body.invertColors .logoinvert{ filter: invert(1); } */ body.invertColors .checkmark { color: #000; } body.invertColors .footer-title { color: #000 !important; font-size: clamp(1rem, 4.5vw, 1.4rem); font-weight: 600 !important; } body.invertColors img:not(.footer img) { filter: invert(1); } body.invertColors .dropdown-menu { filter: invert(1) !important; filter: invert(1); } body.invertColors .footer { filter: invert(1); } body.invertColors .footer a { filter: invert(1); } body.invertColors .appointment a { color: var(--invert); } body.invertColors .footer .btn.btn-link, body.invertColors .footer .btn.btn-link::after, body.invertColors .footer .bi-envelope-fill::before, body.invertColors .footer .bi-telephone-fill::before { color: #000; font-weight: 400; font-size: 16px; } /* .graycycle { filter: grayscale(100%); } */ html.graycycle { scrollbar-color: #fff #2a2a2a; } html.graycycle::-webkit-scrollbar-track { background: #2a2a2a; } html.graycycle::-webkit-scrollbar-thumb { background-color: #2a2a2a; border: 3px solid #fff; } /* body.graycycle .ac_toolbar { position: fixed; bottom: -50px; } */ body.graycycle h1, body.graycycle h2, body.graycycle h3, body.graycycle h4, body.graycycle h5, body.graycycle h6, body.graycycle p, body.graycycle .service-item a, body.graycycle .header_logo, body.graycycle .dropdown-item:hover, body.graycycle .themeToggle, body.graycycle .navbar, body.graycycle .processCard, body.graycycle .appointment, body.graycycle .bg-white, body.graycycle .form-floating, body.graycycle .form-control, body.graycycle .navbar.sticky-top, body.graycycle .dropdown-item, body.graycycle .dropdown-menu, body.graycycle img, body.graycycle .flex-shrink-0, body.graycycle #hero-section, body.graycycle .swiper-button-next, body.graycycle .swiper-button-prev, body.graycycle .swiper-button-next:hover, body.graycycle .swiper-button-prev:hover, body.graycycle .footer, body.graycycle .col2a, body.graycycle .logoinvert { filter: grayscale(100%); } .highlighted { background-color: var(--invert); color: #0b344b; font-weight: 600; } .highlighted-link { background-color: #b13356; color: #fff !important; font-weight: 600; border-radius: 0; /* outline: 5px solid #177ebc; outline-offset: 3px; */ } /* reduce motion start */ .reduced-motion .header_logo, .reduced-motion #logo_nav_shrink, .reduced-motion .moving-right_side, .reduced-motion .moving-left_side, .reduced-motion .themeToggle:hover, .reduced-motion .st-sunMoonThemeToggleBtn, .reduced-motion .hidden, .reduced-motion .form-control, .reduced-motion .form-control::file-selector-button, .reduced-motion .form-control::-webkit-file-upload-button, .reduced-motion .form-floating > label, .reduced-motion .btn, .reduced-motion .btn-primary:hover, .reduced-motion .btn-send:hover, .reduced-motion .btn-static, .reduced-motion .btn-roumi, .reduced-motion .btn-roumi-reverse, .reduced-motion .btn-roumi::before, .reduced-motion .btn-roumi-reverse::before, .reduced-motion .btn-thirdly, .reduced-motion .readMore, .reduced-motion .nav-link, .reduced-motion .navbar-toggler, .reduced-motion .nav-icon, .reduced-motion .navbar.sticky-top, .reduced-motion .footer .btn.btn-link, .reduced-motion .speedyui-partner .swiper-button-next, .reduced-motion .speedyui-partner .swiper-button-prev, .reduced-motion .speedyui-partner .partner-wrapper, .reduced-motion .map, .reduced-motion .pin, .reduced-motion .pulse, .reduced-motion .pulse:after, .reduced-motion .map_marker, .reduced-motion .zoom-n-pan, .reduced-motion .btn-cssbuttons { transition: none !important; animation: none !important; } .reduced-motion .spinner-border, .reduced-motion .spinner-grow { animation-duration: 1.5s !important; } /* new tile with checkbox start */ .sticky-bottom { position: absolute; bottom: 0; margin-bottom: 1em; width: 100%; }