@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url("../Content/fonts/Open-Sans-Light.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Merriweather Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Merriweather Sans Medium'), local('Merriweather-Medium'), url("../Content/fonts/MerriweatherSans-Medium.ttf") format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.bg-dark-gradient {
    background: rgb(14,14,14);
    background: -moz-linear-gradient(270deg, rgba(14,14,14,1) 0%, rgba(55,55,55,1) 100%);
    background: -webkit-linear-gradient(270deg, rgba(14,14,14,1) 0%, rgba(55,55,55,1) 100%);
    background: linear-gradient(270deg, rgba(14,14,14,1) 0%, rgba(55,55,55,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0e0e0e",endColorstr="#3a3a3a",GradientType=1);
    color:white;
}
.bg-red-gradient {
    background: rgb(100,20,20);
    background: -moz-linear-gradient(270deg, rgba(100,20,20,1) 0%, rgba(126,17,17,1) 100%);
    background: -webkit-linear-gradient(270deg, rgba(100,20,20,1) 0%, rgba(126,17,17,1) 100%);
    background: linear-gradient(270deg, rgba(100,20,20,1) 0%, rgba(126,17,17,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#641414",endColorstr="#7e1111",GradientType=1);
    color:white;
}


#login, html {
    font-family: 'Open Sans';
    overflow-x:hidden;
}
#login .font-emphasis {
    font-family: 'Merriweather Sans';
    text-transform: uppercase;
    letter-spacing:0.1rem;
}
#login .divider {
    padding:6rem;
}

#login .container-fluid {
    padding: 0;
}

#login .row.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

#login #paper-loader-message {
    display:none;
}

#login .gallery-square {
    //background-color: #007bff; /* Example color */
    height: auto; /* You can adjust this */
    min-height: 20rem;
}

#login a.gallery-square {
    text-decoration:none;
    color:white;
}

#login a.gallery-square:hover {
    filter:brightness(120%);
}
#login a.gallery-square + a:hover {
    filter: brightness(120%);
}

#login .row.no-gutters .col-3 {
    padding: 0; /* Remove padding between the columns */
}

#login .btn-default, #login .btn {
    border-radius: 0;
    color: white;
    font-size: 0.75rem;
    border:none;
}

#login button, #login input, #login textarea {
    border:none;
}

#login button, #login input, #login textarea {
    border-radius: 0;
}

#login textarea.bg-grey-4:focus {
    background: #2d2d2d;
    color: white;
}

#login .disclaimer {
    line-height: 1rem;
    opacity: 0.5;
    font-weight: lighter;
    padding-top: 1rem;
    max-height: 9rem;
    overflow-y: auto;
    font-size: 0.7rem;
}

#login hr {
    border:none;
}

#login .logo-shift {
    transform: translate(10px, 5px);
}

#login .btn-secondary {
    background: #5a5a5a;
}
#login .bg-rad-arms {
    background-image: url("login/rad-sm.jpg");
}
#login .bg-ob {
    background-image: url("login/ob.jpg");
}
#login .bg-ob-2 {
    background-image: url("login/ob-2.jpg");
}
#login .bg-cardiology {
    background-image: url("login/cardiology.jpg");
}
#login .bg-opth {
    background-image: url("login/opth.jpg");
}
#login .bg-admin {
    background-image: url("login/adminconsole.jpg");
}
#login .bg-vas {
    background-image: url("login/vas.jpg");
}
#login .perspective-container {
    perspective: 109vw;
}
#login .perspective-frame {
    position: absolute;
    transform: scale(105%) translate(35%, -20%) rotateY(359deg) rotateX(40deg) rotateZ(5deg) rotate(19deg);
    max-width: 42vw;
}
#login .perspective-screen {
    position: absolute;
    transform: translate(39%, -20%) rotateY(359deg) rotateX(40deg) rotateZ(5deg) rotate(19deg);
    max-width: 42vw;
}
#login .perspective-frame-1 {
    position: absolute;
    transform: translate(-75%, -48%) rotateY(359deg) rotateX(40deg) rotateZ(5deg) rotate(19deg);
    max-width:56vw;
}

#login .perspective-screen-1 {
    position: absolute;
    transform: translate(-75%, -48%) rotateY(359deg) rotateX(40deg) rotateZ(5deg) rotate(19deg);
    max-width: 54vw;
}
#login .perspective-frame-2 {
    position: absolute;
    transform: translate(-75%, -48%) rotateY(359deg) rotateX(40deg) rotateZ(5deg) rotate(19deg);
    max-width: 56vw;
}

#login .perspective-screen-2 {
position: absolute;
transform: translate(92%, -69%) rotateY(359deg) rotateX(40deg) rotateZ(5deg) rotate(19deg);
max-width: 54vw;
}

@media (min-width: 1800px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1620px;
    }
}

/*----------------------------SHARED CSS-----------------------*/
.above-1 {
    z-index: 1;
    position: relative;
}
.bg-grey-8 {
    background: #171717;
}
.bg-grey-9 {
    background: #111111;
}
.bg-grey-6 {
    background: #393939;
}
.bg-grey-5 {
    background: #242424;
    color:white;
}
.bg-grey-4 {
    background: #2d2d2d;
    color:white;
}
.bg-grey-3 {
    background: #717171;
}

.bg-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-red-primary, .btn.bg-red-primary {
    background-color: #6b1313;
}

.greyscale {
    filter: saturate(0);
}

input.bg-grey-4:focus, input.bg-grey-4:active {
    background: #2f2f2f;
    border: none;
    color:white;
}

.fs-01 {
    font-size: 5.5rem;
}
.fs-7 {
    font-size:0.8rem;
}

.h-100 {
    height: 100%;
}
.h-90 {
    height: 90%;
}
.h-80 {
    height: 80%;
}

.h-100vh {
    height:100vh;
}
.h-lg-100vh {
    height: auto;
}

@media (min-width: 992px) {
    .h-lg-100 {
        height: 100%;
    }
}

.ls-1 {
    letter-spacing: 0.1rem;
}

.ls-2 {
    letter-spacing: 0.2rem;
}

.ls-3, #login .ls-3 {
    letter-spacing: 0.3rem;
}

.mx-w-5 {
    max-width: 5rem;
}

.mx-w-7 {
    max-width: 7rem;
}

.mx-w-9 {
    max-width: 9rem;
}

.shadow-2 {
    box-shadow: 2px 2px 8px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 2px 2px 8px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 2px 8px 3px rgba(0,0,0,0.2);
}

.shadow-5 {
    -webkit-filter: drop-shadow(23px 30px 20px rgba(0,0,0,0.5));
    filter: drop-shadow(23px 30px 20px rgba(0,0,0,0.5));
}
.shadow-8 {
    box-shadow: 0px 0px 80px 35px rgba(0,0,0,0.35);
    -webkit-box-shadow: 0px 0px 80px 35px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 0px 80px 35px rgba(0,0,0,0.35);
}

.txt-primary-red {
    color: #a10d10;
}
.txt-light-red {
    color: #ff4145;
}
.txt-grey, a.text-grey {
    color:grey;
}

.py-6 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

@media (max-width: 1199.98px) {
    .fs-01 {
        font-size: 4.5rem; /* Medium screens (e.g., 992px to 1199.98px) */
    }
}

@media (max-width: 991.98px) {
    .fs-01 {
        font-size: 3.5rem; /* Small screens (e.g., 768px to 991.98px) */
    }
}

@media (max-width: 767.98px) {
    .fs-01 {
        font-size: 2.5rem; /* Extra small screens (e.g., 576px to 767.98px) */
    }
}

@media (min-width: 1600px) {
    .col-xxxl-1 {
        width: 8.333333%;
    }

    .col-xxxl-2 {
        width: 16.666667%;
    }

    .col-xxxl-3 {
        width: 25%;
    }

    .col-xxxl-4 {
        width: 33.333333%;
    }

    .col-xxxl-5 {
        width: 41.666667%;
    }

    .col-xxxl-6 {
        width: 50%;
    }

    .col-xxxl-7 {
        width: 58.333333%;
    }

    .col-xxxl-8 {
        width: 66.666667%;
    }

    .col-xxxl-9 {
        width: 75%;
    }

    .col-xxxl-10 {
        width: 83.333333%;
    }

    .col-xxxl-11 {
        width: 91.666667%;
    }

    .col-xxxl-12 {
        width: 100%;
    }
}

@keyframes scrollIndicatorAnimation {
    0% {
        transform: scale(1) translate(0px, 20px);
    }

    50% {
        transform: scale(1.5) translate(0px, 25px);
    }

    100% {
        transform: scale(1) translate(0px, 20px);
    }
}

.scroll-indicator-animation {
    animation: scrollIndicatorAnimation 2s infinite ease-in-out;
}


/*----------------------------END SHARED CSS-----------------------*/

@media (max-width: 992px) and (orientation: landscape) {
    .h-100vh {
        height:150vh;
    }
}

@media (min-width:992) and (max-width: 1200px) and (orientation: portrait) {
    .h-100vh {
        height: 50vh;
    }
}