/* ============================================================
Dark / Light Mode
- Toggle button styles apply in both modes.
- Every dark rule is scoped to html[data-theme="dark"], so the
original light colours are untouched when dark mode is off.
============================================================ */

/* Toggle Button Start */
.theme-toggle{
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0px;
margin: 0px 10px;
flex-shrink: 0;
font-size: 20px;
line-height: 1;
color: black;
background-color: white;
border: 2px solid black;
border-radius: 50%;
cursor: pointer;
}
.theme-toggle:hover{
color: white;
background-color: black;
}
.theme-toggle:focus{
outline: none;
}
.theme-toggle:focus-visible{
outline: 3px solid black;
outline-offset: 3px;
}
.theme-toggle .theme-icon-sun{
display: none;
}
html[data-theme="dark"] .theme-toggle .theme-icon-moon{
display: none;
}
html[data-theme="dark"] .theme-toggle .theme-icon-sun{
display: inline-block;
}
/* Mobile: logo, theme toggle and menu button on one line */
@media screen and (max-width: 767px) {
header .navbar > .container{
flex-wrap: wrap;
align-items: center;
}
header .navbar-brand{
margin-right: 0px;
flex: 0 1 auto;
min-width: 0;
}
header .navbar-brand img{
width: min(227px, calc(100vw - 124px));
height: auto;
}
/* Menu button: icon only (screen readers still get its aria-label), same size as the theme toggle */
header .navbar .theme-toggle,
header .navbar-toggler{
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px;
height: 40px;
padding: 0px;
font-size: 0px;
line-height: 1;
color: black;
background-color: white;
border: 2px solid black;
border-radius: 50%;
}
header .navbar .theme-toggle{
margin: 0px 8px 0px auto;
}
header .navbar .theme-toggle .bi,
header .navbar-toggler .bi{
font-size: 20px;
}
header .navbar-toggler:hover{
color: white;
background-color: black;
}
header .navbar-toggler:focus{
box-shadow: none;
}
header .navbar-toggler:focus-visible{
outline: 3px solid black;
outline-offset: 3px;
}
}
/* Mobile header is fixed and now shorter, so start the page content right below it */
@media screen and (max-width: 575px) {
section.cover-section,
.best-way-section,
.easyread-hero{
margin-top: min(119px, calc((100vw - 196px) * 0.342 + 66px));
}
}
/* Tablet and desktop: float above the menu so the menu links keep their original layout */
@media screen and (min-width: 768px) {
header .navbar .theme-toggle{
position: absolute;
/*top: -18px;*/
right: -40px;
width: 40px;
height: 40px;
margin: 0px;
font-size: 16px;
z-index: 2;
}
}
/* Toggle Button End */

/* ============================================================
Dark Mode Colours
============================================================ */
html[data-theme="dark"]{
--dm-bg: #151A22;
--dm-box: #242C38;
--dm-text: #FFFFFF;
--dm-muted: #CBD5E1;
--dm-link: #FBBF24;
--dm-btn: #087E94;
--dm-btn-hover: #066A7D;
--dm-btn-text: #FFFFFF;
--dm-border: #CBD5E1;
--dm-line: #3A4556;
--dm-error: #F87171;
--dm-success: #4ADE80;

/* Easy Read page variables */
--color-shadow: #000000;
--color-darkgray: #242C38;
--color-lightgray: #242C38;
--color-blue: #FBBF24;
--color-brown: #FBBF24;
--dn-blue: #FBBF24;
--dn-blue-dark: #FBBF24;
--dn-black: #242C38;
--dn-white: #151A22;
--dn-off: #242C38;
--dn-border: #3A4556;
--dn-text: #FFFFFF;
--dn-muted: #CBD5E1;
--dn-red: #F87171;
--text-dark: #FFFFFF;
--text-muted: #CBD5E1;
--primary-green: #FBBF24;

color-scheme: dark;
background-color: var(--dm-bg);
}

/* Toggle button in dark mode */
html[data-theme="dark"] .theme-toggle{
color: var(--dm-link);
background-color: var(--dm-box);
border-color: var(--dm-border);
}
html[data-theme="dark"] .theme-toggle:hover{
color: var(--dm-bg);
background-color: var(--dm-link);
border-color: var(--dm-link);
}

/* Base */
html[data-theme="dark"] body{
background-color: var(--dm-bg);
color: var(--dm-text);
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] label,
html[data-theme="dark"] dt,
html[data-theme="dark"] dd,
html[data-theme="dark"] td,
html[data-theme="dark"] th{
color: inherit;
}
html[data-theme="dark"] a{
color: var(--dm-link);
}
html[data-theme="dark"] a:hover{
color: var(--dm-link);
text-decoration: underline;
}
html[data-theme="dark"] hr{
background-color: var(--dm-muted);
opacity: 1;
}
html[data-theme="dark"] *:focus-visible{
outline: 3px solid var(--dm-link) !important;
outline-offset: 2px;
}
html[data-theme="dark"] ::selection{
background-color: var(--dm-link);
color: var(--dm-bg);
}

/* Generic colour helpers */
html[data-theme="dark"] .green-text,
html[data-theme="dark"] .pink-text,
html[data-theme="dark"] .orange-text,
html[data-theme="dark"] .blue,
html[data-theme="dark"] .brown,
html[data-theme="dark"] .see-all,
html[data-theme="dark"] .plus-section-title span{
color: var(--dm-link) !important;
}
html[data-theme="dark"] .black-bg,
html[data-theme="dark"] .black-container,
html[data-theme="dark"] .maroon-bg,
html[data-theme="dark"] .green-container,
html[data-theme="dark"] .bg-lightgray{
background-color: var(--dm-box) !important;
color: var(--dm-text);
}
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black{
color: var(--dm-text) !important;
}
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary{
color: var(--dm-muted) !important;
}
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light{
background-color: var(--dm-box) !important;
}
html[data-theme="dark"] .bg-dark,
html[data-theme="dark"] .bg-black{
background-color: var(--dm-box) !important;
}
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-dark{
border-color: var(--dm-line) !important;
}

/* Header */
html[data-theme="dark"] header{
background-color: var(--dm-bg);
}
html[data-theme="dark"] header .navbar-brand img{
background-color: #FFFFFF;
border-color: var(--dm-border);
box-shadow: none;
}
html[data-theme="dark"] header .nav-item a{
color: var(--dm-text) !important;
}
html[data-theme="dark"] header .nav-item a:hover,
html[data-theme="dark"] header .nav-item.active a{
color: var(--dm-link) !important;
}
html[data-theme="dark"] .navbar-toggler,
html[data-theme="dark"] header .navbar-toggler{
color: var(--dm-text);
background-color: var(--dm-box);
border-color: var(--dm-border);
}
html[data-theme="dark"] header .navbar-toggler:hover{
color: var(--dm-bg);
background-color: var(--dm-link);
border-color: var(--dm-link);
}
html[data-theme="dark"] header .navbar .theme-toggle{
color: var(--dm-link);
background-color: var(--dm-box);
border-color: var(--dm-border);
}
html[data-theme="dark"] header .navbar .theme-toggle:hover{
color: var(--dm-bg);
background-color: var(--dm-link);
border-color: var(--dm-link);
}
html[data-theme="dark"] .dropdown-menu{
background-color: var(--dm-box);
border-color: var(--dm-line);
}
html[data-theme="dark"] .dropdown-item{
color: var(--dm-text);
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus{
background-color: var(--dm-bg);
color: var(--dm-link);
}

/* Buttons */
html[data-theme="dark"] .the-button,
html[data-theme="dark"] .btn-info,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-blue,
html[data-theme="dark"] .btn-orange,
html[data-theme="dark"] .see-btn,
html[data-theme="dark"] .listen-btn,
html[data-theme="dark"] .apply-top-btn,
html[data-theme="dark"] .apply-big-btn,
html[data-theme="dark"] .submit-btn,
html[data-theme="dark"] .search-job-button,
html[data-theme="dark"] .calc-bg-green,
html[data-theme="dark"] .calc-bg-blue,
html[data-theme="dark"] .calc-bg-pink{
background-color: var(--dm-btn) !important;
border-color: var(--dm-btn) !important;
color: var(--dm-btn-text) !important;
}
html[data-theme="dark"] .the-button:hover,
html[data-theme="dark"] .btn-info:hover,
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-blue:hover,
html[data-theme="dark"] .btn-orange:hover,
html[data-theme="dark"] .apply-top-btn:hover,
html[data-theme="dark"] .listen-btn:hover,
html[data-theme="dark"] .search-job-button:hover{
background-color: var(--dm-btn-hover) !important;
border-color: var(--dm-link) !important;
color: var(--dm-btn-text) !important;
opacity: 1;
text-decoration: none;
}
html[data-theme="dark"] .see-btn:hover,
html[data-theme="dark"] .apply-big-btn:hover,
html[data-theme="dark"] .submit-btn:hover{
background-color: transparent !important;
border-color: var(--dm-link) !important;
color: var(--dm-link) !important;
text-decoration: none;
}
html[data-theme="dark"] .listen-btn svg{
fill: var(--dm-btn-text);
}
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .the-button-bordered,
html[data-theme="dark"] .calc-buy-btn,
html[data-theme="dark"] .btn-outline-dark,
html[data-theme="dark"] .btn-outline-secondary{
background-color: transparent !important;
border-color: var(--dm-border) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] .the-button-bordered:hover,
html[data-theme="dark"] .calc-buy-btn:hover{
border-color: var(--dm-link) !important;
color: var(--dm-link) !important;
}
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-dark{
background-color: var(--dm-box);
border-color: var(--dm-border);
color: var(--dm-text);
}
html[data-theme="dark"] .load-btn,
html[data-theme="dark"] .footer-link{
background-color: transparent;
border-color: var(--dm-link);
color: var(--dm-link);
}
html[data-theme="dark"] .load-btn:hover,
html[data-theme="dark"] .footer-link:hover{
background-color: var(--dm-link);
color: var(--dm-bg);
text-decoration: none;
}
html[data-theme="dark"] .btn-close{
filter: invert(1) grayscale(100%) brightness(200%);
}

/* Forms */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .the-form-container .the-input,
html[data-theme="dark"] .the-form-container .the-textarea,
html[data-theme="dark"] .easyread-input{
background-color: var(--dm-box);
color: var(--dm-text);
border-color: var(--dm-border);
caret-color: var(--dm-text);
}
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"],
html[data-theme="dark"] input[type="range"],
html[data-theme="dark"] input[type="submit"],
html[data-theme="dark"] input[type="button"]{
background-color: initial;
}
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"]{
accent-color: var(--dm-link);
}
html[data-theme="dark"] .form-check-input{
background-color: var(--dm-box);
border-color: var(--dm-border);
}
html[data-theme="dark"] .form-check-input:checked{
background-color: var(--dm-btn);
border-color: var(--dm-link);
}
html[data-theme="dark"] .form-select{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23CBD5E1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus{
background-color: var(--dm-box);
color: var(--dm-text);
border-color: var(--dm-link);
box-shadow: 0 0 0 3px rgba(251,191,36,0.35);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .form-control::placeholder{
color: var(--dm-muted);
opacity: 1;
}
html[data-theme="dark"] input::-webkit-input-placeholder,
html[data-theme="dark"] textarea::-webkit-input-placeholder{
color: var(--dm-muted);
}
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus{
-webkit-text-fill-color: var(--dm-text);
-webkit-box-shadow: 0 0 0 1000px var(--dm-box) inset;
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly]{
background-color: var(--dm-bg);
color: var(--dm-muted);
}
html[data-theme="dark"] [style*="color:red"],
html[data-theme="dark"] [style*="color: red"],
html[data-theme="dark"] #pass_message .invalid,
html[data-theme="dark"] .req,
html[data-theme="dark"] .text-danger,
html[data-theme="dark"] .invalid-feedback{
color: var(--dm-error) !important;
}
html[data-theme="dark"] [style*="color:green"],
html[data-theme="dark"] [style*="color: green"],
html[data-theme="dark"] #pass_message .valid,
html[data-theme="dark"] .text-success,
html[data-theme="dark"] .valid-feedback{
color: var(--dm-success) !important;
}
html[data-theme="dark"] [style*="color:var(--dn-muted)"]{
color: var(--dm-muted) !important;
}

/* Search */
html[data-theme="dark"] .search-section .black-container{
background-color: var(--dm-box);
}
html[data-theme="dark"] .search-section .search-container{
background-color: var(--dm-bg);
border: 2px solid var(--dm-border);
}
html[data-theme="dark"] .search-container .search-input{
background-color: transparent;
color: var(--dm-text);
border-bottom-color: var(--dm-muted);
}
html[data-theme="dark"] .search-container .search-btn{
color: var(--dm-link);
}
html[data-theme="dark"] .more-options-container,
html[data-theme="dark"] .more-options{
background-color: var(--dm-bg);
color: var(--dm-text);
border: 2px solid var(--dm-border);
}
html[data-theme="dark"] .more-options{
border-top-width: 0px;
}
html[data-theme="dark"] .more-options-container input{
background-color: var(--dm-box);
border-color: var(--dm-border);
}
html[data-theme="dark"] .more-options-container input:focus{
background-color: var(--dm-box);
}
html[data-theme="dark"] .filter-container,
html[data-theme="dark"] .filter-select{
background-color: var(--dm-box);
color: var(--dm-text);
border-color: var(--dm-border);
}

/* Vacancy listings */
html[data-theme="dark"] .search-results-section .job-container{
border-bottom-color: var(--dm-line);
}
html[data-theme="dark"] .search-results-section .company,
html[data-theme="dark"] .jd-info-section .salary-v,
html[data-theme="dark"] .jd-help-section .title,
html[data-theme="dark"] .show-more-section .show-more-button,
html[data-theme="dark"] .tc-quote-section .comma,
html[data-theme="dark"] .tc-content-section .sec-title,
html[data-theme="dark"] .company-thinking-section .visit-site-lnk,
html[data-theme="dark"] .comp-bottom-section .email,
html[data-theme="dark"] .stat-strip-item--accent .stat-strip-number{
color: var(--dm-link) !important;
}
html[data-theme="dark"] .jd-bottom-section .title{
color: var(--dm-muted);
}
html[data-theme="dark"] .jd-info-section .btn-outline{
border-color: var(--dm-border) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .jd-cover-section .the-logo,
html[data-theme="dark"] .jd-bottom-section .logo-img-container img,
html[data-theme="dark"] .eow-section .logo-img-container,
html[data-theme="dark"] .company-thinking-section .logo-img,
html[data-theme="dark"] .about-content-section .logo-img,
html[data-theme="dark"] .logo-img,
html[data-theme="dark"] .company-logo,
html[data-theme="dark"] .logo-bar img,
html[data-theme="dark"] .advertisers-logos-section img,
html[data-theme="dark"] .logos-scroll img{
background-color: #FFFFFF;
box-shadow: none;
}

/* Cover / hero sections */
html[data-theme="dark"] .cover-section .desc,
html[data-theme="dark"] .cover-section .sub-heading{
color: var(--dm-text);
}
html[data-theme="dark"] .cover-section .sub-heading span,
html[data-theme="dark"] .cover-section .desc .black-border,
html[data-theme="dark"] .slider-number span.border{
background-color: var(--dm-muted);
}
/* Titles overlap the cover photo, so add a dark halo to keep them readable */
html[data-theme="dark"] .cover-section .treatment-title,
html[data-theme="dark"] .cover-section .title{
text-shadow: 2px 2px 0 #151A22, -2px -2px 0 #151A22, 2px -2px 0 #151A22, -2px 2px 0 #151A22, 0 0 12px #151A22;
}
/* Cover line-art: hide the dark original and redraw it as light lines behind the content */
html[data-theme="dark"] .cover-section .container-fluid{
position: relative;
isolation: isolate;
background-image: none !important;
background-color: var(--dm-box);
}
html[data-theme="dark"] .cover-section .container-fluid::before{
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;
background-size: 100% 100%;
background-repeat: no-repeat;
filter: invert(1);
opacity: 0.75;
pointer-events: none;
}
html[data-theme="dark"] .search-cover-section .container-fluid::before{
background-image: url('../../img/search/cover.png');
}
html[data-theme="dark"] .jd-cover-section .container-fluid::before{
background-image: url('../../img/job-display/cover.png');
}
html[data-theme="dark"] .tc-cover-section .container-fluid::before{
background-image: url('../../img/terms/cover.png');
}
html[data-theme="dark"] .company-p-cover-section .container-fluid::before{
background-image: url('../../img/company-profile/cover.png');
}
html[data-theme="dark"] .about-cover-section .container-fluid::before{
background-image: url('../../img/about-us/cover.png');
}
html[data-theme="dark"] .register-cover-section .container-fluid::before{
background-image: url('../../img/login/cover.png');
}
html[data-theme="dark"] .compaign-cover-section .container-fluid::before{
background-image: url('../../img/compaign/cover.png');
}
html[data-theme="dark"] .recruiting-cover-section .container-fluid::before{
background-image: url('../../img/recruiting/cover.png');
}
html[data-theme="dark"] .booking-cover-section .container-fluid::before{
background-image: url('../../img/booking/cover.png');
}
html[data-theme="dark"] .cover-section .cover-img,
html[data-theme="dark"] .home-banner-section img{
box-shadow: none;
}

/* Home page sections */
html[data-theme="dark"] .best-way-section .black-container{
background-color: var(--dm-box);
}
html[data-theme="dark"] .best-way-section .bottom-div{
border-color: var(--dm-border);
color: var(--dm-text);
}
html[data-theme="dark"] .major-types-section .box-container{
border-color: var(--dm-border);
color: var(--dm-link);
}
html[data-theme="dark"] .major-types-section .content-container img,
html[data-theme="dark"] .sec-title-icon,
html[data-theme="dark"] .job-sec-icon,
html[data-theme="dark"] .label-icon,
html[data-theme="dark"] .meta-icon,
html[data-theme="dark"] .jd-meta-icon{
background-color: #FFFFFF;
border-radius: 6px;
padding: 3px;
}
html[data-theme="dark"] .pound-icon{
background-color: transparent;
padding: 0px;
}
html[data-theme="dark"] .confident-section .bg-container{
background-color: var(--dm-box);
}
html[data-theme="dark"] .hope-bg{
color: var(--dm-text);
}
html[data-theme="dark"] .blog-box .top-div,
html[data-theme="dark"] .blog-box .bottom-div{
background-color: var(--dm-box);
}
html[data-theme="dark"] .blog-box .top-div a,
html[data-theme="dark"] .blog-box .top-div p,
html[data-theme="dark"] .blog-box .bottom-div p{
color: var(--dm-text);
}
html[data-theme="dark"] .blog-box .bottom-div a{
color: var(--dm-link);
}
html[data-theme="dark"] .blog-section .blog{
background-color: var(--dm-box);
box-shadow: none;
border: 1px solid var(--dm-line);
}
html[data-theme="dark"] .blog-section .read-more-a{
color: var(--dm-link);
}
html[data-theme="dark"] .slick-dots li button{
background-color: var(--dm-muted);
}
html[data-theme="dark"] .slick-dots li.slick-active button{
background-color: var(--dm-link);
}
html[data-theme="dark"] section.advertise-stat-strip-section{
background-color: var(--dm-box) !important;
}
html[data-theme="dark"] .stat-strip-item{
background-color: var(--dm-bg);
border-color: var(--dm-link);
}

/* Campaign / recruiters / booking */
html[data-theme="dark"] .company-p-content-section .corporate-values-container{
background-color: var(--dm-box);
}
html[data-theme="dark"] .company-thinking-section .logo-container,
html[data-theme="dark"] .about-content-section .logo-container{
box-shadow: 10px 10px var(--dm-btn);
}
html[data-theme="dark"] .about-content-section .logo-container{
box-shadow: -10px 10px var(--dm-btn);
}
html[data-theme="dark"] .job-posting-section .price-section,
html[data-theme="dark"] .job-posting-section .btn-section,
html[data-theme="dark"] .job-posting-section .green-container .btn-section,
html[data-theme="dark"] .booking-format-section .the-box,
html[data-theme="dark"] .recruiting-content-section .green-text span,
html[data-theme="dark"] .comp-bottom-section .content-container,
html[data-theme="dark"] .comp-bottom-section .content-container::after{
border-color: var(--dm-border);
}
html[data-theme="dark"] .comp-bottom-section .email::before{
background-color: var(--dm-box);
}
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .card{
background-color: var(--dm-box);
border-color: var(--dm-line);
color: var(--dm-text);
}

/* Price calculator */
html[data-theme="dark"] .calc-parent-container,
html[data-theme="dark"] .calc-main-container{
background-color: var(--dm-box);
box-shadow: none;
border: 1px solid var(--dm-line);
}
html[data-theme="dark"] .job-price-calculator .calc-packages-row ul{
background-color: var(--dm-bg);
box-shadow: none;
border: 1px solid var(--dm-line);
}
html[data-theme="dark"] .job-price-calculator .actual-price,
html[data-theme="dark"] .job-price-calculator .actual-price .currency,
html[data-theme="dark"] .job-price-calculator .discount-price .currency{
color: var(--dm-muted);
}
html[data-theme="dark"] .job-price-calculator .desc.max{
color: var(--dm-text);
}
html[data-theme="dark"] .calc-green,
html[data-theme="dark"] .border-green{
color: #7FD1D4;
}
html[data-theme="dark"] .calc-blue,
html[data-theme="dark"] .border-blue{
color: #93C5FD;
}
html[data-theme="dark"] .calc-pink,
html[data-theme="dark"] .border-purple{
color: #D8B4FE;
}
html[data-theme="dark"] .countdown{
color: var(--dm-error);
}

/* Easy Read pages */
html[data-theme="dark"] .easy-cover-section,
html[data-theme="dark"] .current-vacancies-section .lightgray-sub-section,
html[data-theme="dark"] .easyread-footer,
html[data-theme="dark"] .easyread-ia-content-section .heading-container,
html[data-theme="dark"] .how-apply-section{
background-color: var(--dm-box);
color: var(--dm-text);
}
html[data-theme="dark"] .easy-cover-section,
html[data-theme="dark"] .job-container,
html[data-theme="dark"] .apply-job-detail-section{
box-shadow: 0px 10px 10px rgba(0,0,0,0.6);
}
html[data-theme="dark"] .easyread-label,
html[data-theme="dark"] .pound-icon,
html[data-theme="dark"] .easyread-disability-champions .dc-scroll-container .slide-title{
color: var(--dm-link);
}
html[data-theme="dark"] .register-form-section .form-ul li::before{
color: var(--dm-text);
}
html[data-theme="dark"] .top-nav,
html[data-theme="dark"] .logo-bar,
html[data-theme="dark"] .footer-nav,
html[data-theme="dark"] .job-card{
background-color: var(--dm-bg);
}
html[data-theme="dark"] .job-card{
background-color: var(--dm-box);
}
html[data-theme="dark"] .section-head,
html[data-theme="dark"] .nav-link.active{
background-color: var(--dm-btn);
color: var(--dm-btn-text);
}
html[data-theme="dark"] .hero-strip,
html[data-theme="dark"] .alerts-hero,
html[data-theme="dark"] .apply-strip{
background-color: var(--dm-box);
border-left-color: var(--dm-link);
}
html[data-theme="dark"] .hero-strip p,
html[data-theme="dark"] .alerts-hero p{
color: var(--dm-muted);
}
html[data-theme="dark"] .apply-strip.btn-container{
background-color: var(--dm-bg);
}
html[data-theme="dark"] .apply-help{
color: var(--dm-text);
}
html[data-theme="dark"] .apply-help:hover{
color: var(--dm-link);
}
html[data-theme="dark"] .share-icon:hover{
background-color: var(--dm-link);
color: var(--dm-bg);
}
html[data-theme="dark"] .checklist-section h3{
color: var(--dm-text);
}
html[data-theme="dark"] .success-msg{
background-color: var(--dm-box);
border-color: var(--dm-success);
}
html[data-theme="dark"] .success-msg h2,
html[data-theme="dark"] .success-msg p{
color: var(--dm-success);
}

/* Tables, pagination, alerts, modals */
html[data-theme="dark"] .table{
color: var(--dm-text);
border-color: var(--dm-line);
}
html[data-theme="dark"] .table > :not(caption) > * > *{
background-color: transparent;
color: var(--dm-text);
border-color: var(--dm-line);
}
html[data-theme="dark"] .page-link{
background-color: var(--dm-box);
border-color: var(--dm-line);
color: var(--dm-link);
}
html[data-theme="dark"] .page-item.active .page-link{
background-color: var(--dm-btn);
border-color: var(--dm-btn);
color: var(--dm-btn-text);
}
html[data-theme="dark"] .page-item.disabled .page-link{
background-color: var(--dm-bg);
color: var(--dm-muted);
}
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .alert,
html[data-theme="dark"] .list-group-item{
background-color: var(--dm-box);
border-color: var(--dm-line);
color: var(--dm-text);
}

/* Footer */
html[data-theme="dark"] footer ul > li:not(:last-child)::after,
html[data-theme="dark"] footer .img-container::after{
background-color: var(--dm-muted);
}
html[data-theme="dark"] footer ul a{
color: var(--dm-text);
}
html[data-theme="dark"] footer ul a:hover{
color: var(--dm-link);
}
html[data-theme="dark"] footer .img-container img{
background-color: #FFFFFF;
}
html[data-theme="dark"] footer .social-container img{
background-color: #FFFFFF;
border-radius: 50%;
}

/* Small screens: fixed white header */
@media screen and (max-width: 575px) {
html[data-theme="dark"] header{
background-color: var(--dm-bg);
}
html[data-theme="dark"] .blog-box .bottom-div a,
html[data-theme="dark"] .blog-box .bottom-div p{
color: var(--dm-text);
}
}

/* Medium screens and up */
@media screen and (min-width: 768px) {
html[data-theme="dark"] .best-way-section .bottom-div{
border-color: var(--dm-border);
color: var(--dm-text);
}
}