@import 'root.css';
@import 'font_definitions.css';


body#login-base
   {
   padding:           0 ;
   margin:            0 ;
   width:             100vw ;
   min-width:         1280px ;
   height:            100vh ;
   min-height:        650px;
   background-color:  var( --purple-dark-color ) ;

   display:           flex ;
   flex-direction:    column ;
   align-items:       center ;
   justify-content:   space-between ;

   font-family:       LatoRegular, sans-serif ;
   font-size:         calc( 14 * var( --font-zoom-factor ) ) ;

   overflow-y:        auto;
   }

@media all and (max-width: 1080px) {
   body#login-base {
      overflow-x: auto;
   }
}

#center-container {
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 48px 0;
}

#center-container #login-cont
   {
   width:             calc( 950 * var( --zoom-factor ) ) ;
   height:            calc( 480 * var( --zoom-factor ) ) ;
   flex-grow:         0 ;
   flex-shrink:       0 ;
   display:           flex ;
   flex-direction:    row ;
   background-color:  var( --bright-white-color ) ;
   overflow:          hidden ;
   }

#center-container #register-cont
{
   width:             calc( 980 * var( --zoom-factor ) ) ;
   height:            calc( 590 * var( --zoom-factor ) ) ;
   flex-grow:         0 ;
   flex-shrink:       0 ;
   display:           flex ;
   flex-direction:    row ;
   background-color:  var( --bright-white-color ) ;
   overflow:          hidden ;
}

   /********** LOGIN TEMPLATE **********/

#center-container #login-section
   {
   flex-grow:         1 ;
   flex-shrink:       1 ;
   display:           flex ;
   flex-direction:    column ;
   width: 49%;
   padding: 24px;
   }

#center-container #login-section > #internal-login
   {
   flex-grow:         1 ;
   }

form #widget-with-error {
   width: 100%;
}

form #widget-with-error > input
   {
   background-color:    var( --light-warning-color ) ;
   }

 form #warning-sign i
   {
   color:               var( --medium-warning-color ) ;
   font-size:           1.3em ;
   }

#warning-sign {
   position: absolute;
   right: 5px;
   top: calc(50% + 2px);
}

#center-container #login-section > #internal-login > form > #form-entry
   {
   margin-bottom:       calc( 10 * var( --zoom-factor ) ) ;
   display:             flex ;
   flex-direction:      row ;
   }

#center-container #login-section > #external-logins > #login-provider-logo
   {
   align-self:          center ;
   }

#center-container #widget {
   width: 100%;
}

#center-container #internal-login .horizontal-line {
   height:              1px ;
   flex-grow:           3 ;
   flex-shrink:         3 ;
   background-color:    var( --gray-light-color ) ;
}

#center-container #internal-login .login-type-separator {
   color: var( --purple-dark-color );
   font-size: 18px;
   font-family: ZillaSlabBold, serif;
   flex-grow: 1;
   flex-shrink: 1;
   text-align: center;
}

#center-container #separator
   {
   width:               1px ;
   height:              100% ;

   flex-grow:           0 ;
   flex-shrink:         0 ;
   background-color:    var( --gray-light-color ) ;
   }


#center-container #create-account-section
   {
   flex-grow:         1 ;
   flex-shrink:       1 ;
   display:           flex ;
   flex-direction:    column ;
   overflow:          hidden ;
   align-items:       flex-start ;
   width: 49%;
   padding: 24px;
}


#center-container #create-account-section > #logo
   {
   width: 290px;
   height: 104px;
   object-fit: contain;
   }

#center-container #create-account-section > #welcome-text
   {
   flex-grow:         1 ;
   display:           flex ;
   flex-direction:    column ;
   overflow:          hidden ;
   margin-top:        calc( 40 * var( --zoom-factor ) ) ;
   color: var( --purple-dark-color );
   font-family: LatoRegular, sans-serif;
   font-size: 16px;
   line-height: 32px;
   }

#center-container #create-account-section > a
   {
   text-decoration:   none ;
   }

#center-container #create-account-section > a > #create-account-button
   {
   font-family:       LatoBold ;
   background-color:  var( --light-purple-color ) ;
   color:             white ;
   padding:           10px ;
   border-radius:     6px ;
   }

   /********** CREATE-USER-AND-ACCOUNT TEMPLATE **********/

#create-user-and-account
   {
   width:             100% ;
   height: 100%;
   display:           flex ;
   flex-direction:    column ;
   overflow:          hidden ;
   padding: 24px;
   }

#create-user-and-account .back-to-login {
   text-decoration: underline;
   margin-left: 16px;
   font-size: 16px;
   color: var( --purple-dark-color );
   font-family: LatoRegular, sans-serif;
}

#create-user-and-account > #header-section > #logo
   {
   width:             calc( 165 * var( --zoom-factor ) ) ;
   height:            calc( 60 * var( --zoom-factor ) ) ;
   }

#create-user-and-account > #header-section > #caption
   {
   margin-top:        calc( 20 * var( --zoom-factor ) ) ;
   margin-bottom:     calc( 20 * var( --zoom-factor ) ) ;
   color:             var( --purple-dark-color ) ;
   font-size: 16px;
   }


#create-user-and-account > form
   {
   display:             flex ;
   flex-direction:      column ;
   }

#create-user-and-account form #widget-with-error > input
   {
   background-color:    var( --light-warning-color ) ;
   }

#create-user-and-account > form   #warning-sign i
   {
   color:               var( --medium-warning-color ) ;
   font-size:           1.3em ;
   }


#create-user-and-account > form > #account-name-section
   {
   flex-grow:           0 ;
   flex-shrink:         0 ;
   margin-bottom:       calc( 10 * var( --zoom-factor ) ) ;
   display:             flex ;
   flex-direction:      row ;
   width: 100%;
   }

#create-user-and-account > form > #account-name-section .form-group {
   width: 100%;
}

#create-user-and-account > form > #logins-section
   {
   display:             flex ;
   flex-direction:      row ;
   flex-grow:           1 ;
   flex-shrink:         1 ;
   width:               70%;
   }


#create-user-and-account > form > #logins-section > #local-account
   {
   flex-grow:           1 ;
   flex-shrink:         1 ;
   margin-right:        calc( 40 * var( --zoom-factor ) ) ;
   }

#create-user-and-account > form > #logins-section > #local-account > #explanation
   {
   font-family:         LatoBold, sans-serif ;
   color:          var( --purple-color ) ;
   font-size: 18px;
   margin-bottom:       calc( 20 * var( --zoom-factor ) ) ;
   }

#create-user-and-account > form > #logins-section > #local-account > #form-entry
   {
   margin-bottom:       calc( 10 * var( --zoom-factor ) ) ;
   display:             flex ;
   flex-direction:      row ;
   }

#vertical-separator
   {
   width:               1px ;
   height:              100% ;
   flex-grow:           0 ;
   flex-shrink:         0 ;
   background-color:    var( --gray-light-color ) ;
   }


#create-user-and-account > form > #logins-section > #external-logins
   {
   flex-grow:           0 ;
   flex-shrink:         0 ;
   display:             flex ;
   flex-direction:      column ;
   margin-left:         calc( 40 * var( --zoom-factor ) ) ;
   }

#create-user-and-account > form > #logins-section > #external-logins > #explanation
   {
   font-family:         LatoRegular, sans-serif ;
   color:          var( --purple-dark-color ) ;
   margin-bottom:       calc( 20 * var( --zoom-factor ) ) ;
   font-size: 16px;
   }

#create-user-and-account > form > #logins-section > #external-logins > #microsoft-login
   {
   width:               215px ;
   height:              41px ;
   background:          url( '/static/images/ms-symbollockup_signin_light.png' ) no-repeat center center ;
   border:              0 ;
   margin-bottom:       calc( 10 * var( --zoom-factor ) ) ;
   }

#create-user-and-account > form > #logins-section > #external-logins > #google-login
   {
   width:               191px ;
   height:              46px ;
   background:          url( '/static/images/btn_google_signin_light_normal_web.png' ) no-repeat center center ;
   border:              0 ;
   }

   /********** ACCOUNT ACTIVATION WELCOME **********/

#center-container #account-activation
   {
   width:             100% ;
   margin:            0 ;
   display:           flex ;
   flex-direction:    column ;
   }

#center-container #account-activation > #header
   {
   display:           flex ;
   flex-direction:    row ;
   }

#center-container #account-activation > #header > #logo
   {
   width:             calc( 165 * var( --zoom-factor ) ) ;
   height:            calc( 60 * var( --zoom-factor ) ) ;
   }

#center-container #account-activation > #header > #title
   {
   font-family:       LatoBold ;
   font-size:         1.4em ;
   color:             var( --deep-purple-color ) ;
   margin-top:        calc( 30 * var( --zoom-factor ) ) ;
   margin-left:       calc( 95 * var( --zoom-factor ) ) ;
   }


#center-container #account-activation > #welcome-message
   {
   margin:              calc( 40 * var( --zoom-factor ) ) ;
   color:               var( --deep-purple-color ) ;
   }

#center-container #account-activation > #welcome-message-centered
   {
   text-align:          center ;
   color:               var( --deep-purple-color ) ;
   }

#center-container #account-activation #login > #internal
   {
   flex-grow:         1 ;
   flex-shrink:       1 ;
   }

#center-container #account-activation #login > #internal > form > label
   {
   font-family:       LatoLightItalic ;
   font-size:         0.9em ;
   color:             var( --medium-gray-color    ) ;
   }

#center-container #account-activation #login > #horizontal-separator
   {
   width:             1px ;
   height:            100% ;
   flex-grow:         0 ;
   flex-shrink:       0 ;
   background-color:  var( --deep-purple-color ) ;
   }


#center-container #account-activation #login > #external
   {
   flex-grow:         1 ;
   flex-shrink:       1 ;
   }

#center-container #account-activation #login > #external > #login-provider-logo
   {
   justify-content:   center ;
   display:           flex ;
   margin-bottom:     calc( 15 * var( --zoom-factor ) ) ;
   }

#center-container #activate-new-account-member > #header > #logo
   {
   width:             calc( 165 * var( --zoom-factor ) ) ;
   height:            calc( 60 * var( --zoom-factor ) ) ;
   }

#center-container #activate-new-account-member {
   background-color: var( --white-color );
   width:             calc( 730 * var( --zoom-factor ) ) ;
   height:            calc( 600 * var( --zoom-factor ) ) ;
}

#center-container #activate-new-account-member #content-section {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
}

#center-container #activate-new-account-member #welcome-message {
   font-size: 16px;
   font-family: LatoRegular, sans-serif;
   color: var( --purple-dark-color );
   margin-bottom: 8px;
}

#center-container #activate-new-account-member #header #title {
   font-size: 18px;
   font-family: LatoBold, sans-serif;
   color: var( --purple-dark-color );
   margin-bottom: 16px;
   margin-top: 8px;
}

#center-container #activate-new-account-member #external-logins {
   padding: 16px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
}

#center-container #activate-new-account-member #form-section form {
   width: 100%;
   padding: 16px 16px 0 0;
}

#center-container #activate-new-account-member #form-section form .form-group,
#center-container #activate-new-account-member #form-section {
   width: 100%;
}

#account-activation.email-sent {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 400px;
   background-color: var( --white-color );
}

#account-activation.email-sent #logo,
#account-activation.welcome #logo{
   height: 104px;
   width: 290px;
   object-fit: contain;
}

#account-activation.email-sent #welcome-message-centered {
   margin: 16px 0;
   padding: 8px;
}

#account-activation.email-sent #welcome-message-centered p {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   color: var( --purple-dark-color );
   font-family: LatoRegular, sans-serif;
   font-size: 18px;
   margin: 8px 0;
}

#account-activation.email-sent #welcome-message-centered p:first-of-type {
   margin-bottom: 16px;
}

#account-activation.welcome {
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 100%;
}

#account-activation.welcome .container {
   height: 510px;
   width: 700px;
   background-color: var( --white-color );
   justify-content: space-between;
}

#account-activation.welcome #welcome-message {
   display: flex;
   flex-direction: column;
}

#account-activation.welcome #welcome-message span {
   color: var( --purple-dark-color );
   font-family: ZillaSlabRegular, monospace;
   font-size: 18px;
   margin: 8px 0;
   padding: 0 8px;
}

#account-activation.welcome #welcome-message span#title {
   font-family: ZillaSlabBold, sans-serif;
}

#center-container #account-activation.welcome #login {
   display:           flex ;
   flex-direction:    row ;
   justify-content: space-between;
}

#center-container #account-activation.welcome #login form {
   padding-right: 16px;
}

#center-container #account-activation.welcome #login > #internal {
   flex-grow: 3;
}

#center-container #account-activation.welcome #login > #external {
   padding: 16px;
   display: flex;
   flex-direction: column;
}

#center-container #account-activation.welcome #login > #external > #login-provider-logo {
   justify-content: flex-start;
}