/* =========================================================================
Login Page
----------------------------------------------------------------------------
    1. Page Structure
    2. Form Panel (LHS)
    3. Content Panel (RHS)
    4. Media Queries
========================================================================= */

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
}

/* =========================================================================
    1. Page Structure
========================================================================= */

.login_page_wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    height: 100vh;
}

.login_page_form_panel {
    width: 30%;
    background-color: #ffffff;
    height: 100vh;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding: 7.5vh;
    box-sizing: border-box;
    overflow-y: auto;
}

.theme_dark .login_page_form_panel{
   background:#16161f !important;
}


.login_page_content_panel {
    display:flex;
    flex-direction:column;
    width: 70%;
    height: 100vh;
    background-color: #f58c46;
}

/* =========================================================================
    2. Form Panel (LHS)
========================================================================= */

.login_page_form_panel
.form_panel_logos {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;

    width: 100%;
}

.form_panel_logos
.form_panel_logo_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;

    width: 100%;
}

.login_page_form_panel
.form_panel_logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;

    width: 100%;
}

.form_panel_logos
.product_logo {
    opacity: 0.8;
}

.theme_dark
.division_logo{
 width:213px;
 height:40px;
}

.form_panel_logos
.division_logo {
}
.theme_dark .product_logo{
  filter: invert(1) hue-rotate(180deg) brightness(1.1) contrast(1.05);
}
.form_panel_prompt {
    color: #00a4e6;
    margin-top: 11.5vh;
    letter-spacing: 0.02em;
}

.theme_dark
.form_panel_product
.product_name {
    color: white;
}

span.slider {
    color: orange;
}

.theme_dark .login_form .login_form_input{
  background:#16161f;
  color:white;
}

.form_panel_product {
    color: #00a4e6;
    margin-bottom: 4.5vh;
}

.form_panel_product
.product_name {
    color: #001437;
    font-size: 2.75em;
    font-weight: 700;
    letter-spacing: 1px;
    float:left;
}

.form_panel_product
.product_environment {
    color: #ffffff;
}

.form_panel_input {
    width: 100%;
}

.form_panel_input
.login_form {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    margin-bottom: 7.5vh;
}

.form_panel_input
.login_form
label {
    color: #00a4e6;
    margin-bottom: 5px;
}

.login_form
.input_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    border-bottom: 1px solid #ddd;
    margin-bottom: 2.5vh;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    width: 100%;
}

.login_form
.login_form_input {
    border: none;
    outline: none;
    color: #001437;
    width: 100%;
    padding: 5px 0;
    font-size: 1.25em;
    vertical-align: middle;
    line-height: 1em;
}

.login_form
.input_wrapper:focus-within {
    border-bottom: 1px solid #00a4e6;
}

.login_form_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin-top: 2vh;
    width: 100%;
}

.external_link {
    color: #00a4e6;
    text-decoration: none;
    font-weight: 600;
}

.login_button {
    background-color: #f58c46;

    height: fit-content;
    width: 100px;

    padding: 10px 5px;
    border-radius: 15px;

    font-weight: 700;
    text-align: center;
    color: #ffffff;
    border: none;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.login_button:hover {
    filter: brightness(1.1);
    cursor: pointer;
}

.form_panel_demo_prompt {
    width: 100%;
    text-align: center;
    color: #aaa;
}

.input_icon {
    filter: opacity(0.2);
    margin-right: 10px;
    height: 20px;
    width: 20px;
}

.input_icon:hover {
    filter: invert(0.5) sepia(1) saturate(4) hue-rotate(150deg);
    cursor: pointer;
}

/* =========================================================================
    3. Content Panel (RHS)
========================================================================= */

.login_page_wrapper
.login_page_content_panel {

}

.error {
  font-size: 0.9rem;
  min-height: 9vh;
  color:red;
  font-weight:bold;
}

.theme_dark .forgot_password_text{
  color:white;
}

.forgot_password_text {
  font-size: 0.9rem;
  min-height: 9vh;
}

/* =========================================================================
    4. Media Queries
========================================================================= */

@media only screen and (max-width: 1300px) {
    .login_page_form_panel {
        width: 45%;
    }
    .login_page_content_panel {
        width: 55%;
    }
    .login_page_content_panel_prod {
        width: 55%;
    }
}

@media only screen and (max-width: 800px) {
    .login_page_wrapper {
        flex-direction: column;
        height: fit-content;
    }
    .login_page_form_panel {
            width: 100%;
    }

    .login_page_wrapper
    .login_page_form_panel {
        overflow-y: visible;
        height: fit-content;
    }

    .login_page_wrapper
    .login_page_content_panel{
        width: 100%;
    }
    .login_page_content_panel_prod{
            width: 100%;
    }
}

@media only screen and (max-height: 800px) {

    .error {
      font-size: 2vh;
      min-height: 9vh;
      color:red;
      font-weight:bold;
    }

    .forgot_password_text {
      font-size: 2vh;
      min-height: 9vh;
    }
}



.product_environment {
    background-color: #f58c46;
    float: right;
    height: fit-content;

    padding: 3px 5px;
    margin-left:25px;
    margin-top:18px;
    border-radius: 5px;

    font-weight: 700;
    text-align: center;
    color: #ffffff;
    border: none;
}

.product_environment_prod {
    background-color: #00a4e6;
    float: right;
    height: fit-content;

    padding: 3px 5px;
    margin-left:25px;
    margin-top:18px;
    border-radius: 5px;

    font-weight: 700;
    text-align: center;
    color: #ffffff;
    border: none;
}
tr.evenRow td {
    padding-top: .6em;
}

.support {
    margin-top:20px;
}

.support img {
    width: 45px;
    height: 43px;
    display: block;
    margin: 0 0 0 11px;
}

.login_page_content_panel_prod {
     display:flex;
     flex-direction:column;
     width: 70%;
     height: 100vh;
     background-color: #00a4e6;
 }

.login_page_content_panel_prod #copy {
    color: #e7eff1;
}

.login_page_content_panel #copy {
    color: #3a4456;
}

#copy {
    margin-top:auto;
    padding-bottom: 10px;
    text-align: center;
    font-size: .6em;
    line-height: 2em;
    white-space: nowrap;
}
#copy span {
    color: #001437;
}
#copy a {
    color: #001437;
    text-decoration: none;
    font-weight: 600;
}
#copy .wrap {
    white-space: break-spaces;
}
body.theme_dark {
 	background: #16161f;
}

.container {
     text-align: center;
     margin-top: 50px;
 }
 .toggle-switch {
     position: absolute;
     top:10px;
     right:20px;
     display: inline-block;
     width: 60px;
     height: 34px;
 }
 .toggle-switch input {
     opacity: 0;
     width: 0;
     height: 0;
 }
 .slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #ccc;
     transition: .4s;
     border-radius: 34px;
 }
 .slider:before {
     position: absolute;
     content: '\2600'; /* Sun symbol */
     font-size: 18px;
     line-height: 26px;
     text-align: center;
     width: 26px;
     height: 26px;
     left: 4px;
     bottom: 4px;
     background-color: white;
     transition: .4s;
     border-radius: 50%;
 }
 input:checked + .slider {
     background-color: #2d363d;
 }
 input:checked + .slider:before {
     transform: translateX(26px);
     content: '\1F319'; /* Moon symbol */
 }

/*----------------------------------------
Default colors
-----------------------------------------*/
:root {
    --zircon-blue: #00a4e6;
    --solitude-grey: #e7eff1;
    --prussian-navy: #001437;
    --zodiac-grey: #3a4456;
    --standard-white: #ffffff;
    --crusta-orange: #f58c46;
}