@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200;300;400;500;600;700;800&display=swap');

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    height: 100%;
    width: 100%;

    font-family: 'Mulish', sans-serif;
}




.backLinkContainer{
    position: absolute;
    top: 27px;
    left: 24px;
    z-index: 501;
}

a.backLink{
    font-size: clamp(0.75rem, 1.4vmin, 24px);
}


.backChevron{
    height: 8px;
    transform: rotate(180deg);
}


.backLink .backChevronFill{
    fill: #455A64;
}

.backLink:hover .backChevronFill{
    fill: #346D9A;
}






.navbar{
    position:absolute;
    top: 0;

    display: flex;
    justify-content: space-between;

    width: 100%;

    padding: 28px clamp(16px, 2.3vw, 3vw) 10px;

    z-index: 500;
}


.logoLink{
    text-decoration: none;
    color: #FFF;
}

.navLogo{
    display: flex;
    justify-content: center;
    align-items: center;
}

.navLogo .logoSentinel{
    max-height: 24px;
}



.navLinks{
    list-style: none;
    display: flex;
}

.navLinkLi{
    display: flex;
    align-items: center;

    margin-left: clamp(15px, 2vw, 2vw);
}

.navLink{
    font-size: 0.9rem;
    text-decoration: none;
    font-weight: 500;

    color: #455A64;
}

.navLink:hover{
    color: #346D9A;
}

.navLink::after {
    content: '';
    width: 0px;
    height: 1px;
    display: block;
    background: #346D9A;
    transition: 280ms;
  }
  
.navLink:hover::after{
    width: 100%;
}




.pagewrapper{
    height: 100vh;
    width: 100vw;

    min-height: 450px;    

    display: flex;
}


.StartSentinel{
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
    width: 46%;

    background: linear-gradient( rgba(0, 0, 0, 0.18), 
                                 rgba(0, 0, 0, 0.18) ), 
                                   url('SentinelBackground.jpg') 
                                   no-repeat center center;
    background-size: cover;
    

    color: #FFF;
}



.startSentinelContent{
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    min-height: 60%;
    margin-right: 10%;
    margin-bottom: 8%;

    margin: 8% 10% 8%;
}

.startSentinelContent > h1{
    max-width: 8ch;
    font-size: clamp(2rem, 10vmin, 6rem);
}

.startSentinelContent > h1 > span{
    font-weight: 500;
}

.startSentinelContent > p{
    max-width: 32ch;
    font-size: clamp(16px, 2vmin, 1.3rem);
    line-height: 150%;
}

.startSentinelCTA{
    display: flex;
    align-items: center;
    font-size: 1.1rem;
}

.startSentinelCTA> img {
    transform: translatey(2px);
}

.startSentinelCTA > p{
    margin-right: 8px;
}










.SolutionLinks{
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
    width: 54%;
}

.solutionLinkContainer{
    display: flex;
    flex-direction: column;

    overflow-Y:auto;
    height: clamp(300px, 77vh, 77vh); 

    margin: 24px;
}

.solutionLinkWrapper{
    margin: 2% 0px;
}

.solutionLink{
    text-decoration: none;
    color: #212121;
}

.solutionContainer{
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-right: 4px;
    padding: 3% calc(3% - 4px) 3% 3%;
    
    box-shadow: hsl(0, 0%, 89%, 0.6) 2px 4px 4px, hsl(0, 0%, 89%, 0.8) 0px 0px 3px 0px;
    border-radius: 4px;

}

.solutionContainer:hover{
    box-shadow: hsl(206, 66%, 80%, 0.38) 2px 4px 4px, hsl(206, 66%, 80%, 0.38) 0px 0px 3px 0px;
}


.solutionContainer > img {
    margin-right: 5px;
}

.solutionHeading {
    font-size: clamp(18px, 2.6vmin, 40px);
    font-weight: 400;
}

.solutionText{
    font-size: clamp(12px, 2vmin, 30px);
    max-width: 54ch;
}









/* Login */


.LoginWrapper{
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    height: 100%;
    width: 54%;
}

.LoginContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;


    width: clamp(100px, 50%, 400px);
    /* min-height: 60%; */

    /* font-size: 110%; */
    font-size: clamp(100%, 2.5vmin, 200%);
}

.LoginForm > div{
    margin-top: clamp(10px, 3vh, 30px);
}

.LoginForm{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}



.loginTitle{
    font-weight: 400;
    text-align: center;
}


.email h4, .password h4, .code h4{
    font-weight: 400;
    margin-bottom: 5px;
}


.textInput{
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 10px;
    font-size: clamp(14px, 0.9rem, 24px);
}

.textInput::placeholder{
    color: #aaa;
}

.loginBtnContainer{

}

.loginBtn{
    width: 100%;
    padding: 10px;
    border: none;
    background-color: #346D9A;
    color: #FFF;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
}

.loginBtn:hover{
    background-color: #225c88;
}














.errorMessage,
.codeMessage,
.emailHelp{
    min-height: 1.1rem;
    font-weight: 400;
    font-size: clamp(0.70rem, 1.4vmin, 20px);
}


.errorMessage{
    color: #a33;
    margin-top: 5px;
}

.codeMessage{
    color: #3c5263;
    margin: 7px 0px 3px;
}

.emailHelp{
    color: #3c5263;
}




.SecondaryFormActions{
    display: flex;
    justify-content: space-between;


    font-size: clamp(14px, 60%, 20px);
}

.rememberMe{
    display: flex;
    align-items: center;

    accent-color: #346D9A;

    margin-right: 15px;
}

.rememberMe > p{
    margin-left: 4px;
}

.forgottenPassword{
    text-align: right;
}

.forgottenPasswordLink{
    text-decoration: none;
    color: #346D9A;
}


.forgottenPasswordLink:hover{
    color: #346D9A;
}

.forgottenPasswordLink::after {
    content: '';
    width: 0px;
    height: 1px;
    display: block;
    background: #346D9A;
    transition: 280ms;
  }
  
.forgottenPasswordLink:hover::after{
    width: 100%;
}






.passwordInputContainer{
    position: relative;
}

.passwordEye{
    width: 20px;
    height: 40%;

    position: absolute;
    top: 30%;
    right: 10px;

    cursor: pointer;
}













@media (max-width: 794px){

    .pagewrapper{
        flex-direction: column;
    }

    .navLink {
        color: #FFF;
    }

    .SolutionLinks,
    .StartSentinel{
        width: 100%;
        height: auto;
    }

    .StartSentinel{
        min-height: 460px;
    }

    .startSentinelContent {
        align-items: center;
        margin: clamp(74px, 10%, 140px) 10% clamp(20px, 3%, 3%);
    }

    .startSentinelContent > h1,
    .startSentinelContent > p,
    .startSentinelCTA{
        text-align: center;
        margin: 10px;
    }

    .startSentinelCTA{
        flex-direction: column;
        align-items: center;
    }

    .startSentinelCTA > img {
        transform: rotate(90deg);
    }

    .startSentinelCTA > p {
        margin-bottom: 24px;
    }

    .solutionLinkContainer {
        max-height: unset;
        height: auto;
        overflow: unset;
    }
}




@media (max-width:360px) {
    
}