/*
    SSO Signin Styles | Maintained By Chris | Aug 2025
    
*/

/* Frame */
.SignInWrapper{display:inline-block;position:relative;box-sizing:border-box;margin-top:25px;padding-top: 10px;}
.SignInWrapper h2{font-size:2em;font-weight:bold;color:#0f141c;margin:0;text-align:left;width:100%;float:left;display:inline; padding-bottom: 10px;}
.SignInWrapper h2 { color: #dd3091;}
.ButtonHolder {display: inline; float: left; width: 100%;}
.ButtonHolder.Google { width: 195px;}

/* Buttons */
.SSOBtn{display:inline;float:left;width:94%;border:2px solid #000;border-radius:3px;background-color:#fff;line-height:30px;margin-bottom:10px;box-sizing:border-box;padding:10px;text-align:left;border-radius:8px;font-weight:bold; text-align: center; position: relative; max-width: 600px;}
.SSOBtn .Logo {position: absolute; left: 10px; top:10px;}
.SSOBtn:hover{ cursor: pointer; transform:scale(1.004, 1.02); background-color: #fafafa;}
.SSOBtn.Google::after { content:'Continue with Google';}
.SSOBtn.Microsoft::after { content:'Continue with Microsoft';}
.SSOBtn.Email::after { content:'Continue with Email';}
.SSOBtn::after{display:inline;float:left;width:100%;text-align:center;text-indent:30px;}

/* Email Popup */

.EmailPopBG{position:fixed;width:100%;z-index:1001;background-color:#656f78;opacity:.6;left:0;top:0; height: 100%;}
.EmailPop{position:fixed;z-index:1002;background-color:#fff;color:#213A5E;width:300px;height:auto;top:50%;left:50%;margin-top:33px;margin-left:0;transform:translate(-50%,-50%);border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;box-shadow:0 2px 12px -4px rgb(35 40 106 / 40%); width: 700px; height: 375px; overflow: hidden;}
.EmailPop .ColOne{width:260px;height:100%;background: linear-gradient(135deg, #7bceee, #6fc2e2);font-size:28px;text-align:center;color:#fff;box-sizing:border-box;padding:20px;font-family: "Nunito", sans-serif; display: inline; float: left;}
.EmailPop .ColTwo{display:inline;float:left;width:calc(100% - 260px);box-sizing:border-box;padding:35px 40px;}

.EmailPop .ColOne span { font-size: 15px;}
.EmailPop .ColOne::before{content:'cloud';font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;font-size:100px;color:#fff;width:100%;text-align:center;margin-top:70px;}
.EmailPop .PopHeading{display:inline;float:left;width:100%;color:#0f141c;font-size:24px;font-weight:bold;text-align:center; margin-bottom: 12px;}

.EmailPop label,.EmailPop input{display:inline;float:left;width:100%;clear:left;text-align:left;margin-top:10px;margin-bottom:10px;font-weight:bold;}

.EmailPop input{display:inline;float:left;width:100%;box-sizing:border-box;border:2px solid #1d212e;border-radius:5px;height:49px;font-size:16px;padding:8px;font-weight:normal;margin-top:0;}
.EmailPop input.Error { border-color: #d7403a;}

.EmailPop button{background-color:#dd3091;color:#fff;border:none;padding:15px 32px;text-align:center;text-decoration:none;display:inline;float:left;font-size:16px;border-radius:5px;margin-top:10px;letter-spacing:.7px;cursor:pointer;}
.EmailPop input:hover, .EmailPop input:focus { border-color:#3f89d8;}
.EmailPop button:hover { transform: scale(1.01); box-shadow: 0px 2px 5px #d4d1d1; }

.EmailPop label>.Error{display:inline;float:right;color:#d7403a;display:none;}

.EmailPop .Close{position:absolute;top:3px;right:3px; z-index: 1;}
.EmailPop .Close::after { content:'close'; font-family: 'Material Symbols Outlined'; font-size: 25px;}
.EmailPop .Close:hover { transform: scale(1.01); cursor: pointer; }


/* Media Queries */

/* Massive Screen Sizes ---------------------------------------------------------*/
@media only screen and (min-width: 2500px) {
.SignInWrapper h2 {font-size: 3.5em; margin-bottom: .30em;}
.SSOBtn {max-width: 800px; font-size: 1.5em; line-height: 1.75em;margin-bottom: 1.2em;}
.SSOBtn .Logo { left: 15px; top: 15px;}

}


@media only screen and (min-width: 940px) and (max-width: 1300px) {
    .SignInWrapper h2{font-size:25px}
}
@media only screen and (max-width: 939px) {
   .SignInWrapper h2 { text-align: center;}
   .SSOBtn{margin-left: 50%; transform: translate(-50%, 0%)!important;}
   .SignInWrapper { margin-top: 20px;}
}
@media only screen and (max-width: 710px) {
  .SignInWrapper { margin-top: 0px; margin-bottom: 20px;}  
  .EmailPop { width: 90%;}  
  .EmailPop .ColOne { display: none;}
  .EmailPop .ColTwo { margin-left: 50%; transform: translate(-50%, 0%); width: 100%;}
}
@media only screen and (max-width: 475px) {
    .EmailPop .PopHeading { font-size:18px;}
    .SSOBtn.Google::after { content:'Login with Google';}
    .SSOBtn.Microsoft::after { content:'Login with Microsoft';}
    .SSOBtn.Email::after { content:'Login with Email';}

}
@media only screen and (max-width: 380px) {
    .EmailPop .PopHeading { font-size:16px;}
}