@import "./bootstrap-compat-safe.css?v=1.0.0";

@font-face {
    font-family: 'robotomedium';
    src: url('../fonts/roboto-medium-webfont.eot');
    src: url('../fonts/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-medium-webfont.woff2') format('woff2'), url('../fonts/roboto-medium-webfont.woff') format('woff'), url('../fonts/roboto-medium-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body{
    font-family: robotomedium;
    color: #FFF;
    margin: 0;
    padding: 0;
}
h1{
    font-size: 48px;
    font-weight: 200;
    opacity: 0.8;
    margin: 0;
}

/*=============*/
/*LAYOUT STYLES*/
/*=============*/
.container{
    align-items: center;
    min-height: 10em;

    text-align: center;
    width: 100vw;
    height: calc(100vh - 50px);
    background-size: cover;
}
.kiosk-container {
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    min-height: 10em;
    text-align: center;
    width: 100vw;
    height: 100vh;
    background: url('../images/hid-safe-product-logos/hid-wallpaper-for-kiosk-1-d-5-c-10-jpg.jpg') center no-repeat;
    background-size: cover;
}
.col-container{
    height: 100%;
    width: 100%;
    margin: 0 auto;
    text-align: center;
	display: flex;
    display: -ms-flexbox;
    align-items: center;
    /*min-height: 40em;*/
}
.footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    padding: 10px 0;
}
.footercopy{
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
	line-height: 36.5px;
	letter-spacing: 0.2px;
	color: #9C9C9C;
}
.footerresource{
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 36.5px;
	letter-spacing: -0.2px;
	text-transform: capitalize;
	color: #8A8A8A;
}

.left-col{
    text-align: left;
    float: left;
	background: #00539B;
	border-radius: 0px 0px 110px 0px;
    height: 100%;
}
.right-col{
    text-align: left;
	max-width: 500px
}
.banner-div {
	height: 100%;
	align-content: center;
	width: 100%;
}
.banner-text {
	font-size: 55px; 
	line-height: 64px; 
	font-weight: 375;
	text-align: center; 
	letter-spacing: 2px; 
	color: #FFFFFF;
	width: 100%;
}
.banner-subtext {
	font-size: 22px; 
	line-height: 26px; 
	font-weight: 350;
	text-align: center; 
	letter-spacing: 1px; 
	color: #FFFFFF;
	width: 100%;
}
.serviceLabel {
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	line-height: 22px;
	text-align: center;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	color: #494949;
	width: 100%;
	padding: 0px 10px 30px 10px;
}

/*============*/
/*RIGHT COLUMN*/
/*============*/
.check-in-form{
    background-color: #FFF;
    padding: 10px 25px 50px 25px;
	border: 1px solid #B1B1B1;
	box-sizing: border-box;
}

.input-label,
.select-label{
    color: #555;
    font-size: 12px;
    text-transform: uppercase;
	font-weight: 400;
}
.form-input,
.form-select{
    display: block;
    width: 100%;
    margin-bottom: 22px;
    height: 36px;
    margin-top: 6px;
    border-radius: 2px;
    border: 1px solid #DDD;
    background-color: #FFF;
    color:#555555;
    padding: 5px;
}

.form-select{
  /* background-image: url('../images/icon__select-dropdown-arrow.svg');*/
    background-repeat: no-repeat;
    background-position: 95% center;

    -webkit-appearance:  none;
    -moz-appearance:  none;
    appearance:  none;
}
.btn{
    text-decoration: none;
    display: block;
    text-align: center;
    line-height: 36px;
    font-size: 14px;
}
.btn:hover, .btn:focus{
    color: #FFF;
}

.login-button{
    color: #FFF;
    width: 100%;
    height: 36px;
    border-radius: 2px;
    background-color: #002E56; 
    line-height: 22px;
	text-transform: uppercase;
}

.btn-group{
    position: relative;
}
.btn-group a{
    display: inline-block;
}

.hideForm{
    display:none;
}

.error {
    color: #d0021b;
    font-weight: 500;
}

.validation-summary-errors ul {
    list-style: none;
    margin-left: -40px;
    color: red;
	font-size: 14px;
}

.center-element {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}

.textTransform ::-webkit-input-placeholder { /* Edge */
    text-transform: capitalize
}

.textTransform :-ms-input-placeholder { /* Internet Explorer */
    text-transform: capitalize
}

.textTransform ::placeholder {
    text-transform: capitalize
}

.sup { 
	position: relative;
    font-size: 15px;
    vertical-align: baseline;
    top: -2.2em;
}
.header-logo {
	max-height: 120px;
	max-width: 275px;
	padding-bottom: 30px;
	border-radius: 0px;
    display: block;
    margin: auto;

}
.poweredbylogo {
	max-height: 19.48px;
	max-width: 130px;
	border-radius: 0px;
}
.poweredbylabel{
	font-style: italic;
	font-weight: normal;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: #ACACAC;
}	
.linkedinlogo {
	max-height: 36.57px; 
	max-width: 36.57px;
}
.mobile-unhide{
		display:none;
	}
/*============*/
/*=RESPONSIVE=*/
/*============*/

@media (max-width: 1620px) {
    .col-container{
        max-width: 100%;
    }
	.banner-text {
		font-size: 30px; 
	}
	.banner-subtext {
		font-size: 18px; 
	}
	.footercopy{
		font-size: 10px;
	}
	.footerresource{
		font-size: 12px;
	}
	.left-col{
		max-width: 75% !important;
	}
	.form-input{
        width: 100% !important;
    }
	.login-button{
        width: 100% !important;
    }
}

@media (max-width: 900px) {
    .col-container{
        max-width: 100%;
    }
}
@media (max-width: 982px) {
    .container{
        height: calc(100vh - 70px) !important;
    }
}
@media (max-width: 1255px) {
    .container{
        height: calc(100vh - 60px) !important;
    }
}
@media (max-width: 700px) {
    .container{
        padding-left: 0;
    }
    .col-container .col{
        display: block;
        width: 100%;
        clear: both;
    }
    .left-col{
        float: none;
        margin-bottom: 20px;
    }
    .form-input{
        width: 100% !important;
        margin-right: 0;
        vertical-align: middle;
        display: inline-block;
    }
    .header-logo-visitor {
        width: 100% !important;
        height: 300%;
    }

}


@media (min-width:701px) and (max-width:770px){
    .header-logo-visitor {
        width: 100% !important;
        height: 300%;
    }
    

}

@media (min-width:771px) and (max-width:900px){
    .header-logo-visitor {
        width: 100% !important;
        height: 300%;
    }
    
}

@media (min-width:901px) and (max-width:1199px){
    .header-logo-visitor {
        position: relative !important;
        width: 50% !important;
        right: 1% !important;
        height: 300%;
    }
}
@media (min-width:1200px){
    .header-logo-visitor {
        margin-left:150px;
        position: relative !important;
        width: 48% !important;
    }
}

@media (min-width:1200px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .header-logo-visitor {
        position: relative !important;
    }
    .col {
        margin: 0px !important;
    }
}

@media only screen and (max-width: 576px) {
	.input-label,
	.select-label{
		font-size: 20px;
	}
	.btn{
		font-size: 22px;
	}
	.serviceLabel {
		font-size: 28px;
	}
	.col-12 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.mobile-hiding{
        display:none !important;
    }
	.mobile-unhide{
		display:block;
	}
    .mobile-col-container {
		height: 100%;
		width: 100%;
		margin: 0 auto;
		text-align: center;
		padding-bottom: 40px;
		display: flex;
		display: -ms-flexbox;
		align-items: center;
		zoom: 1;
		justify-content: center;
	}	
	.mobile-check-inform {
		background-color: #FFF;
		padding: 5px 5px 5px 5px;
		border: 1px solid #B1B1B1;
		box-sizing: border-box;
	}
}

@media screen and (max-device-width: 576px) {
	.col-12 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.mobile-hiding{
        display:none !important;
    }
	.mobile-unhide{
		display:block;
	}
    .mobile-col-container {
		height: 100%;
		width: 100%;
		margin: 0 auto;
		text-align: center;
		padding-bottom: 40px;
		display: flex;
		display: -ms-flexbox;
		align-items: center;
		zoom: 2;
		justify-content: center;
	}	
	.mobile-check-inform {
		background-color: #FFF;
		padding: 5px 5px 5px 5px;
		border: 1px solid #B1B1B1;
		box-sizing: border-box;
	}

	.footercopy{
		font-size: 22px
	}
	.input-label,
	.select-label{
		font-size: 20px;
	}
	.btn{
		font-size: 22px;
	}
	.serviceLabel {
		font-size: 28px;
	}
}

@media screen and (max-height: 600px) {
	.hidefooter {
        display:none !important;
    }
	.mobile-col-container {
		zoom: 1.5 !important;
	}
	.footercopy{
		font-size: 22px
	}
}
@media screen and (max-device-height: 350px) {
	.hidefooter {
        display:none !important;
    }
	.mobile-col-container {
		zoom: 2;
	}
	.input-label,
	.select-label{
		font-size: 20px;
	}
	.btn{
		font-size: 22px;
	}
	.serviceLabel {
		font-size: 28px;
	}
	.footercopy{
		font-size: 22px
	}
}