* { 
box-sizing: border-box; 
}
body {/*
	background: rgba(27,53,101,1);
	background: -moz-linear-gradient(top, rgba(27,53,101,1) 30%, rgba(82,106,170,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(30%, rgba(27,53,101,1)), color-stop(100%, rgba(82,106,170,1)));
	background: -webkit-linear-gradient(top, rgba(27,53,101,1) 30%, rgba(82,106,170,1) 100%);
	background: -o-linear-gradient(top, rgba(27,53,101,1) 30%, rgba(82,106,170,1) 100%);
	background: -ms-linear-gradient(top, rgba(27,53,101,1) 30%, rgba(82,106,170,1) 100%);
	background: linear-gradient(to bottom, rgba(27,53,101,1) 30%, rgba(82,106,170,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b3565', endColorstr='#526aaa', GradientType=0 );
	color:#fff;*/ 
font-size: 20px; 
font-family: 'Hind', sans-serif; 
margin: 0; 
}
h1, h2, h3, h4, h5, h6 { 
font-weight: normal; 
}
h3 { 
margin: 15px 0; 
font-weight: 500; 
font-size: 19px; 
line-height: 30px; 
}
h4 { 
font-size: 16px; 
font-weight: bolder; 
margin: 0; 
}
.auto-height, .login-container, .lg-button { 
-webkit-display: flex; 
-moz-display: flex; 
-ms-display: flex; 
-o-display: flex; 
display: flex; 
-webkit-align-items: center; 
-moz-align-items: center; 
-ms-align-items: center; 
-o-align-items: center; 
align-items: center; 
-webkit-justify-content: center; 
-moz-justify-content: center; 
-ms-justify-content: center; 
-o-justify-content: center; 
justify-content: center; 
}
.login-container { 
-webkit-flex-direction: column; 
-moz-flex-direction: column; 
-ms-flex-direction: column; 
-o-flex-direction: column; 
flex-direction: column; 
max-width: 750px; 
width: 100%; 
}
.login-container a { 
text-align: center; 
color: #000; 
}
.lg-input { 
height: 60px; 
width: 100%; 
font-size: 25px; 
text-align: center; 
border: 1px solid #000; 
}
.lg-button { 
height: 70px; 
width: 170px; 
font-size: 25px; 
margin: auto; 
}
.mt30 { 
margin-top: 30px; 
}
.mt10 { 
margin-top: 10px; 
}
.mb30 { 
margin-bottom: 30px; 
}
.mb10 { 
margin-bottom: 10px; 
}
.mb50 { 
margin-bottom: 50px; 
}
.pl30 { 
padding-left: 30px; 
}
.text-center { 
text-align: center; 
}
.lg-button { 
box-sizing: border-box; 
border: 5px solid #a4a4a4ba; 
border-radius: 100px; 
padding: 13px 20px; 
width: auto; 
height: auto; 
min-width: 280px; 
/*width: 100%; */
background: rgba(152,152,152,1); 
background: -moz-linear-gradient(top, rgba(152,152,152,1) 0%, rgba(128,128,128,1) 100%); 
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(152,152,152,1)), color-stop(100%, rgba(128,128,128,1))); 
background: -webkit-linear-gradient(top, rgba(152,152,152,1) 0%, rgba(128,128,128,1) 100%); 
background: -o-linear-gradient(top, rgba(152,152,152,1) 0%, rgba(128,128,128,1) 100%); 
background: -ms-linear-gradient(top, rgba(152,152,152,1) 0%, rgba(128,128,128,1) 100%); 
background: linear-gradient(to bottom, rgba(152,152,152,1) 0%, rgba(128,128,128,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#989898', endColorstr='#808080', GradientType=0 );
color: #ffffff; 
}
.lg-button span, .lg-button img { 
margin: 0px 10px; 
}
.logo { 
max-width: 270px; 
}
.bg-grey { 
width: 100%; 
background-color: #e4e4e4; 
padding: 20px; 
}
.profile { 
display: block; 
margin-left: auto; 
margin-right: auto; 
border: 1px solid #000; 
width: 100%; 
max-width: 160px; 
}
label { 
font-size: 16px; 
font-weight: 500; 
text-transform: uppercase; 
line-height: 15px; 
}
.flex { 
-webkit-display: flex; 
-moz-display: flex; 
-ms-display: flex; 
-o-display: flex; 
display: flex; 
}
.ai-center { 
-webkit-align-items: center; 
-moz-align-items: center; 
-ms-align-items: center; 
-o-align-items: center; 
align-items: center; 
}
.jc-center { 
-webkit-justify-content: center; 
-moz-justify-content: center; 
-ms-justify-content: center; 
-o-justify-content: center; 
justify-content: center; 
}
.jc-spacebetween { 
-webkit-justify-content: space-between; 
-moz-justify-content: space-between; 
-ms-justify-content: space-between; 
-o-justify-content: space-between; 
justify-content: space-between; 
}
.mt0 { 
margin-top: 0; 
}
.wrap { 
-webkit-flex-wrap: wrap; 
-moz-flex-wrap: wrap; 
-ms-flex-wrap: wrap; 
-o-flex-wrap: wrap; 
flex-wrap: wrap; 
}
.w-30 { 
max-width: 30%; 
width: 100%; 
}
.w-70 { 
max-width: 70%; 
width: 100%; 
}
.mw-33 { 
max-width: 33.3%; 
}
.mt20 { margin-top: 20px; }
.mt10 { margin-top: 10px; }
.mb20 { margin-bottom: 20px; }
.mb50 { margin-bottom: 50px; }
.title-bar { 
padding: 0; 
}
.title-bar > h3 { 
width: 100%; 
text-align: center; 
margin: 0; 
background: #1b3565; 
color: #fff; 
padding: 10px; 
line-height: normal; 
margin-bottom: 30px; 
}
.pad-lr-30 { 
padding-left: 30px; 
padding-right: 30px; 
}
break { 
width: 100%; 
height: 0; 
margin: 0; 
padding: 0; 
}
.current-id { 
max-width: 430px; 
width: 100%; 
height: auto; 
border: 1px solid #000; 
display: table; 
}
.vehicles { 
width: 100%; 
font-weight: 500; 
font-size: 25px; 
line-height: 40px; 
margin: 5px 0; 
-webkit-display: flex; 
-moz-display: flex; 
-ms-display: flex; 
-o-display: flex; 
display: flex; 
-webkit-align-items: stretch; 
-moz-align-items: stretch; 
-ms-align-items: stretch; 
-o-align-items: stretch; 
align-items: stretch; 
-webkit-justify-content: flex-start; 
-moz-justify-content: flex-start; 
-ms-justify-content: flex-start; 
-o-justify-content: flex-start; 
justify-content: flex-start; 
}
.vehicles.valid span { 
background: #ff0000; 
color: #fff; 
-webkit-border-radius: 50%; 
-moz-border-radius: 50%; 
border-radius: 50%; 
padding-top: 4px; 
margin-right: 5px; 
}
.vehicles span { 
width: 40px; 
min-width: 40px; 
min-height: 40px; 
height: 40px; 
-webkit-display: inline-flex; 
-moz-display: inline-flex; 
-ms-display: inline-flex; 
-o-display: inline-flex; 
display: inline-flex; 
-webkit-align-items: center; 
-moz-align-items: center; 
-ms-align-items: center; 
-o-align-items: center; 
align-items: center; 
-webkit-justify-content: center; 
-moz-justify-content: center; 
-ms-justify-content: center; 
-o-justify-content: center; 
justify-content: center; 
}
.title-bar.red > h3 { 
background: red !important; 
}
.select-flag { 
padding: 5px 5px; 
border-color: #000; 
margin: 10px; 
}
.mrg0 { 
margin: 0 !important; 
}
.id-set { 
max-width: 240px; 
}

.modal { 
/*width:100%;*/ display: none; 
width: 100%; 
max-width: 900px; 
}
.image-viewer { 
padding: 20px; 
}
.inner-modal { 
background: #fff; 
padding: 20px; 
border-radius: 20px; 
}
.inner-modal { 
-webkit-cursor: zoom-out; 
-moz-cursor: zoom-out; 
-ms-cursor: zoom-out; 
-o-cursor: zoom-out; 
cursor: zoom-out; 
position: relative; 
}
.view-image { 
-webkit-cursor: zoom-in; 
-moz-cursor: zoom-in; 
-ms-cursor: zoom-in; 
-o-cursor: zoom-in; 
cursor: zoom-in; 
position: relative; 
}
.image-viewer .inner-modal img { 
width: 100%; 
margin: auto; 
display: block; 
}
img.close { 
position: absolute; 
top: 30px; 
right: 30px; 
}
@media screen and (min-width:1024px) {
.auto-height {
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    -o-align-items: flex-start;
    align-items: flex-start;
}
}

@media screen and (max-width:767px) {
.mobile-break{
	width:100%;
	height:0;
}
.lg-input { 
height: 50px; 
}
.auto-height { 
-webkit-align-items: flex-start; 
-moz-align-items: flex-start; 
-ms-align-items: flex-start; 
-o-align-items: flex-start; 
align-items: flex-start; 
}
.modal { 
width: 85%; 
}
.w-30, .w-70 { 
max-width: 100%; 
}
label, h3 { 
width: 100%; 
text-align: center; 
display: table; 
}
.pl30 { 
padding: 0; 
}
.mw-33 { 
width: 100%; 
max-width: 100%; 
}
}

@media screen and (max-width:414px) {
.modal.image-viewer { 
-webkit-transform: rotate(90deg); 
-moz-transform: rotate(90deg); 
-ms-transform: rotate(90deg); 
-o-transform: rotate(90deg); 
transform: rotate(90deg); 
width: 140%; 
}

.modal.image-viewer {
    margin-top: 22% !important;
}
}


#information,
#vehicles {
    background: url(images/qrcode/info_content.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: unset;
}



#vehicles {
    background-size: cover;
    background-position: right;
}
@media screen and (max-width: 560px) {
    #information,
    #vehicles {
        background-size: 100% calc(100% - 46px);
        background-position: bottom;
    }
    #vehicles {
        background-size: cover;
        background-position: right;
    }
    h3 {
        font-size: 16px;
    }
    h4 {
        font-size: 14px;
    }
    .title-bar>h3 {
        margin-bottom: 10px;
    }
    .pad-lr-30 {
        padding-left: 5px;
        padding-right: 5px;
    }
    #information div.ai-center {
        flex-wrap: nowrap !important;
        align-items: flex-start;
    }
    #information div.it {
        flex-basis: 50%;
        width: 50%;
    }
    #information div.it.mb30 {
        margin-bottom: 10px;
    }
    #information div.it img {
        width: 100%;
        height: 100%
    }
    #information div.it label {
        color: #2d47f2;
        font-size: 10px;
    }
    #information div.it h3 {
        font-size: 13px;
        text-align: left;
    }
    h5.mt0.mb30 {
        margin-bottom: 15px;
    }
    h3.mt0.mb30 {
        font-size: 13px;
        margin-bottom: 15px;
    }
    #information div.it label,
    #information div.it h3 {
        text-align: left;
        white-space: normal;
        line-height: 16px;
    }
    #information div.it div.jc-spacebetween {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-around;
    }
    .vehicles {
        padding-left: 10px;
        font-size: 17px;
    }
    .vehicles span {
        width: 30px;
        height: 30px;
    }
}