html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
:root {
    --light-grey: #E8E8E8;
    --strong-blue: #2145FA;
    --green-shine: #3ee32b;
    --light-red: #EAC3C3;
    --light-blue: #B6D6E3;
    --bg-inputdark: rgba(0,0,0,0.1);
    --bg-inputdark2: rgba(0,0,0,0.2);
    --bg-inputdark3: rgba(0,0,0,0.3);
    --bg-inputdark4: rgba(0,0,0,0.4);
    --bg-inputdark5: rgba(0,0,0,0.5);
    --bg-inputdark6: rgba(0,0,0,0.6);
    --bg-inputdark7: rgba(0,0,0,0.7);
    --bg-inputdark8: rgba(0,0,0,0.8);
    --bs-body-bg2-dark: #3D3E3E;
    --custom-txt-shadow: 1px 1px 5px black;
    --custom-light-red: #f05d5d;
    --custom-bg-light-red: #f58c8c;
    --custom-green: #47d647;
    --custom-dark: #121111;
    /* font family */
    --michroma-font: 'Michroma', sans-serif;
}
.respFontSize {
    font-size: clamp(1.7rem, 2vw + 1rem, 3rem);
}
/* bg-inputdark*/
.bg-inputdark5{
    background-color:var(--bg-inputdark5)
}
.bg-inputdark6 {
    background-color: var(--bg-inputdark6)
}
.bg-inputdark7 {
    background-color: var(--bg-inputdark7)
}
.bg-inputdark8 {
    background-color: var(--bg-inputdark8)
}
/* colours variable */
.light-grey{
    color:var(--light-grey);
}
.custom-green-color{
    color:var(--custom-green);
}
.custom-darkBg{
    background-color: var(--custom-dark);
}
.strong-blue{
    color:var(--strong-blue);
}
.green-shine{
    color:var(--green-shine);
}
.light-red{
    color:var(--light-red);
}
.light-blue{
    color:var(--light-blue);
}
.custom-light-red{
    color:var(--custom-light-red);
}
.custom-bg-light-red{
    background-color: var(--custom-bg-light-red);
}
.custom-input {
    background-color: var(--bg-inputdark);
    color:var(--light-grey);
}
.custom-input:focus {
    background-color: var(--bg-inputdark);
    border:1.5px solid var(--strong-blue);
    box-shadow:none;
    box-shadow:1px 1px 3px var(--strong-blue);
    color:var(--light-grey);
}
.custom-txt-shadow{
    text-shadow: var(--custom-txt-shadow);
}
/* colour send*/
.michroma{
    font-family:var(--michroma-font);
}
html {
    position: relative;
    min-height: 100%;
}

body {
  
}
.alertHover:hover {
    border-left: 5px solid var(--strong-blue);
    border-top: 1px solid var(--strong-blue);
    border-right: 1px solid var(--strong-blue);
    border-bottom: 1px solid var(--strong-blue);
}
/* Default (light) theme */
html.bg-theme {
    --bs-body-bg: #ffffff;
    --bs-body-color: #212529;
    --bs-navbar-bg: #ffffff;
    --bs-footer-bg: #edf1f2;
    --text-custom: #000000; /* black text in light mode */
    --bs-body-bg2: #F1EEEF;
}

/* Dark theme */
    html.bg-theme.dark-mode {
        --bs-body-bg: #121212;
        --bs-body-color: #f8f9fa;
        --bs-navbar-bg: #1f1f1f;
        --bs-footer-bg: #0D0C0C;
        --text-custom: white; /* light grey text in dark mode */
        --bs-body-bg2: darkred;
    }
.secondSection{
    background-color:var(--bs-body-bg2);
}

.text-custom {
    color: var(--text-custom) !important;
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.navbar {
    background-color: var(--bs-navbar-bg) !important;
}

footer {
    background-color: var(--bs-footer-bg);
    color: var(--bs-body-color);
}
alert{
    background-color: var(--custom-dark);
}
/* Register */
.registerBackground {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), url("background/empowerhub_project_reg-login.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
}
.registerButton {
    border: 1.5px solid var(--strong-blue);
    background-color: var(--bg-inputdark6);
    color: var(--strong-blue);
}
.registerButton:hover {
    border: 1.5px solid var(--strong-blue);
    background-color: var(--bg-inputdark6);
    color: var(--strong-blue);
    box-shadow:0 0 8px var(--strong-blue);
}

/* Register end */


/* Home Page Video */
/* Home Page */
@media (min-aspect-ratio: 16/9) {
    #background-video {
        width: 100%;
    }
}

#background-video {
    width: 100vw;
    object-fit: cover;
    position: fixed;
    overflow: hidden;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

.video-container {
    width: 100%;
    position: relative;
    height: 654px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
}

.video-container video {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    z-index: -1;
    box-sizing: border-box;
}


.video-container .caption {
    z-index: 1;
    position: relative;
    text-align: center;
    color: #dc0000;
    padding: 10px;
}
/* Employee Pages CRUD */
.employeeBackground {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), url("background/employee/istockphoto-1564492589-1024x1024.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
}
.employeeBackground_dark {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("background/employee/istockphoto-1442236508-1024x1024_dark.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
}
/* CREATE input field */
.custom-input-create {
    background-color: var(--bg-inputdark5);
    color: var(--custom-green);
}

.custom-input-create:focus {
    background-color: var(--bg-inputdark5);
    border: 1.5px solid var(--custom-green);
    box-shadow: none;
    box-shadow: 1px 1px 3px var(--custom-green);
    color: var(--custom-green);
}
.custom-input-create8 {
    background-color: var(--bg-inputdark8);
    color: var(--custom-green);
}

.custom-input-create8:focus {
    background-color: var(--bg-inputdark8);
    border: 1.5px solid var(--custom-green);
    box-shadow: none;
    box-shadow: 1px 1px 3px var(--custom-green);
    color: var(--custom-green);
}


.flashing {
    visibility: hidden;
}


/***/
/* QR Code */
#qrcodeBg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("background/qrcode/qr_code_light.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
}
/*Password*/
.passwordBackground {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("img/password_empowerhub.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}



/* Media Query desktop, tablet, mobile */
/* Mobile  */
@media (max-width: 575.98px) {
    .section1Text {
        margin-top: 20px;
        margin-bottom: 15px;
    }
    .imgSection1 {
        max-width: 465px;

    }
    .sectionText2{
        margin-top:20px;
    }
}

/* Tablet  */
@media (min-width: 576px) and (max-width: 991.98px) {
    .section1Text {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

/* Desktop  */
@media (min-width: 992px) {
    .imgSection1{
        max-width:600px;
        display:flex;
        align-items:center;
    }
    .section1Text{
        margin-top:20px;
        margin-bottom:20px;
    }
}

/* spin svg */
@keyframes spinFiveTimes {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(1800deg); /* 5 × 360° */
    }
}

.spin-fast {
    animation: spinFiveTimes 2s ease-in-out forwards;
    transform-origin: center;
}

/*password generator*/
.passwordBtn{
    background-color:var(--bg-inputdark6);
    border:0.5px solid var(--light-blue);
    color:var(--light-blue);
}
.passwordBtn:hover {
    background-color: var(--bg-inputdark6);
    border: 0.5px solid var(--light-blue);
    color: var(--light-blue);
    box-shadow:1px 1px 10px var(--light-blue);
}
.selectIcon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='10px' height='10px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M903.232 256l56.768 50.432L512 768 64 306.432 120.768 256 512 659.072z' fill='%23B6D6E3' /%3E%3C/svg%3E");
    background-size: contain; /* Ensure it scales nicely */
    background-repeat: no-repeat; /* Avoid repeating the image */
    background-size: 12px 12px;
}
/*QR Code */
.customBorder{
    border:0.5px solid var(--light-red);
}
.customBtnLightRed{
    border:0.5px solid var(--light-red);
    color:var(--light-red);
    background-color: var(--bg-inputdark6);
}
.customBtnLightRed:hover {
    border: 1.5px solid var(--light-red);
    color: var(--light-red);
    background-color: var(--bg-inputdark6);
    box-shadow:1px 1px 10px var(--light-red);
}