/*
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%;
    width: 100%;
    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;
    max-width: 400px;
    margin: auto;
    width: 100%;
    padding: .5rem 0rem;
}
.login__label {
    width: 49%;
    padding: .5rem 0rem;
    display: inline-block;
}
.login__input {
    width: 49%;
    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;
}

.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;
    }
   
}