/*
Copyright 2020 Eduworks Corporation
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.dimOverlay {
    display: block;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.4;
}


.lightBoxLoginForm {
    display: flex;
    position: fixed;
    z-index: 1002;
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    left: 0;
    top: 5%;
    top: 5%;
    max-width: 70rem;
    overflow: hidden;
    background-color: rgb(240, 240, 240);
    border-radius: 15px;
    min-height: 15em;
    padding-bottom: 20px;
    right: 0;
    margin-left: auto;
    margin-right: auto;
   /* max-width: 500px;*/
}

.lightBoxLoginForm .lightBoxContent {
    position: relative;
    background-color: rgb(240, 240, 240);
    margin: auto;
    padding: 0;
    /*width: 90%;*/
    display: flex;
    max-height: 100vh;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.lightBoxLoginForm .linkedInButton {
    margin-left: auto;
    margin-right: auto;
    color: white;
    font-size: 1.5rem;
    width: fit-content;
    padding: .5rem;
    border-radius: .5rem;
    background-color: #2867B2;
    height: 5.5rem;
    cursor: pointer;
    
}
.linkedInButton img, 
.linkedInButton p {
    display: inline-block;
    margin: .5rem;
    color:white;
}

 .registered-trademark {
    vertical-align: bottom;
    margin-left: 0 !important;
    font-size: xx-small;

}
.lightBoxLoginForm #loginTeamSelect {
}

.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline: none;
}
.select-css option {
	font-weight:normal;
}
lightBoxLoginForm h2, h3, h4 {
}
.login__header {
    display: block;
    padding: 1rem;
    width: 100%;
}
.login__image {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: auto;
}
.login__image img {
    max-height: 200px;
    max-width: 100%;
    object-fit:contian;
    display: block;
    margin: auto;
}
.login__form-section {
    width: 100%;
    max-width: 400px;
    margin: auto;
} 
.login__input-wrapper,
.select-username, 
.select-wrapper {
    display: block;
    margin: auto;
    width: 100%;
    padding: .5rem 0rem;
}
.login__label {
    width: 20%;
    padding: .5rem 0rem;
    display: inline-block;
}
.login__input {
    width: 75%;
    display: inline-block;
}
.login__input input {
    width: 100%;
}
label {
    font-size: 16px;
}
#loginClassSelect, #loginTeamSelect {
    border-radius: .5rem;
    padding: 8px;
    line-height: 24px;
    font-size: 16px;
    height: 36px;
    max-width: 500px;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    /* -webkit-appearance: none; */
}

.login__button {
    max-width: 160px;
    border-radius: .5rem;
    background-color: #3A85E2;
    width: 100%;
    height: 36px;
    color: white;
    float:right;
    font-size: 1.75rem;
}
.login__button:hover {
    background-color: rgb(79, 146, 228);
}
.login__button:active {
    background-color:rgb(51, 120, 205);
}

.confirmLogoutButtonContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
}

.confirmLogoutMessage {
    text-align: center;
}

.cancel-button {
    max-width: 160px;
    border-radius: .5rem;
    background-color: #747474;
    width: 100%;
    height: 48px;
    color: white;
    float:right;
    font-size: 2rem;
}
.confirm-button {
    max-width: 160px;
    border-radius: .5rem;
    background-color: #3A85E2;
    width: 100%;
    height: 48px;
    color: white;
    float:right;
    font-size: 2rem;
}

@media screen and (orientation:portrait) and (max-height: 768px), (max-width: 768px) {
    
    .login__label {
        width: 100%;
        display: block;
    }
    .login__input {
        width: 100%;
        display: block;
    }
    .login__image img {
        width: auto;
        max-height: 200px;
    }
    .lightBoxLoginForm {
        left: 0;
        right: 0;
        top:0;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        height: 100%;
        position:absolute;
        border-radius: 0px;

    }
    
    .lightBoxLoginForm .linkedInButton {
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
        background-color: #2867B2;

    }
    
}

@media screen and (orientation:landscape) and (max-width: 768px), (max-height: 560px) and (max-width: 768px) {
    .login__input-wrapper {
        margin: none;
        max-width: none;
    }
    .lightBoxLoginForm h2, h3, h4 {
        text-align: left;
    }
/*    .lightBoxLoginForm .lightBoxContent {
        flex-direction: row;
    }*/
    .login__header {
        width: 100%;
    }
    .login__form-section {
        width: 66%;
    }
    .lightBoxLoginForm {
        left: 0;
        right: 0;
        top:0;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        height: 100%;
        position:absolute;
        border-radius: 0px;

    }
    .linkedin-button-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .login-image {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

}

@media screen and (orientation:landscape) and (max-width: 1025px), (max-height: 560px) and (max-width: 1025px){
    .login__label {
        /* width: 50%; */
        display: inline-block;
    }
    .login__input {
        /* width: 50%; */
        display: inline-block;
    }
    .login__input-wrapper {
        margin: none;
        max-width: none;
    }
    .lightBoxLoginForm h2, h3, h4 {
        text-align: left;
    }
/*    .lightBoxLoginForm .lightBoxContent {
        flex-direction: row;
    }*/
    .login__header {
        width: 100%
    }
    .login__form-section {
        width: 66%;
    }
    .lightBoxLoginForm {
        left: 0;
        right: 0;
        top:0;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        height: 100%;
        position:absolute;
        border-radius: 0px;

    }
    .linkedin-button-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .login-image {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
   
}