body{
    margin:0;
    padding:0;
	font-size: 16px;
    background-image: linear-gradient(150deg, #111221 50%, #656bd6) !important;
	background-repeat: no-repeat;
	width: 100vw;
	height: 100vh;
	min-height: 960px;
}
.loading-screen{
    background:rgba(13,0,255,.78);
    width:100%;
    height:100%;
    position:absolute;
    display:flex;
    justify-content:center;
    align-items:center
}
.loading-screen .progressbar{
    border:2px solid #fff;
    border-radius:5px;
    width:300px;
    height:30px;
    display:flex;
    padding:3px
}
.loading-screen .progress{
    height:30px;
    width:50px;
    background:#fff;
    transition:all .3s linear
}
.loading-screen .progress-message{
    color:#fff;
    text-align:center;
    margin-top:20px;
    font-size:18px
}

/*#main_wrapper {
	display: block; 
	padding: 20px;
	margin: auto;
	width: 100%;
}*/

		#side_block{ 
			background-color: #3f51b5;
			background-color: rgba(0,0,0,0);			
			margin-left: 15px;
			width: 500px;
		}
		
		#main_wrapper{
			position: absolute; 
			left: 50%; 
			top: 0; 
			transform: translate(-50%, 0%);
			background-image: url('assets/images/buildings_white.png');
			background-repeat: no-repeat;
			background-position: right bottom;
		}
		
		.main {
			display: block; 
			margin: auto; 
			position: relative;
		}

		#time_menu {
			height: 135px; 
			width: 100%; 
			color: #efefef;
			display: flex;
		}
		
		#obim_img {
			width: 102px;
			height: 71px;
			padding-top: 30px;
		}
		
		#checkinout {
			margin-left: 100px;
			display: flex;
			color: #efefef;
			font-size: 130%;
			align-items: center;
		}
		
		#calendar_img {
			width: 40px;
			height: 44px;
			padding-right: 10px;
		}
		
		#clock_img {
			width: 39x;
			height: 39px;
			padding-right: 15px;
			padding-left: 15px;
		}
		
		#search_time {
		color: #efefef; 
		margin-left: 25px; 
		border-left: 1px solid #efefef; 
		display: flex; 
		align-items: center;
		}
		
		#start_time, #end_time {
		margin-left: 5px; 	
		padding: 2px; 
		font-size: 70%; 
		background-color:rgb(92,94,122,0.6); 
		width: 80px; 
		text-align: center;"
		}
		
		#start_time {
		margin-left: 0px;
		border-bottom-right-radius: 2px;
		border-top-right-radius: 2px;
		border-bottom-left-radius: 7px;
		border-top-left-radius: 7px;		
		}
		
		#end_time {
		border-bottom-left-radius: 2px;
		border-top-left-radius: 2px;
		border-bottom-right-radius: 7px;
		border-top-right-radius: 7px;		
		}
		
		#side_info {
			background-color: #3f51b5;
			height: 53%;
			width: 100%;
		}
		
		form {
		width: 75%;
		margin: auto;
		text-align: center;
		}
		
		label {
			color: #efefef;
			
		}
		
		input {
			color: #111221;
			border: 0;
			width: 100%;
			height: 25px;
			text-align: center;
			margin-bottom: 10px;
		}
		
		#user_name, #user_email, #user_phone {color: #afafaf;}
		
		#checkdate {
			border-radius: 10px; 
			padding: 2px; 
			font-size: 70%; 
			margin-top: 10px; 
			width: 200px;
		}
		
		#fillin_text {
			text-align: center; 
			color: #efefef; 
			font-weight: 600; 
			padding-top: 10px;}
			
		.checkbox_label {
			width: 100%; 
			text-align: left;
		}
		
		.submit_button {
			margin-top: 15px; 
			font-size: 90%; 
			height: 30px; 
			width: 150px; 
			background-color: #3f51b5; 
			border: 1px solid #efefef; 
			color: #efefef;
		}
		
		#sub_wrapper {
			display: flex; 
			flex-wrap: nowrap;
			padding: 0; 
			margin: 0; 
			width: 100%; 
		}
		
		
@media only screen and (min-width: 1366px) and (max-width: 1820px) {
		
		body{
			min-height: 780px;
		}
		
		#side_block{ 
			margin-left: 15px;
			width: 375px;
		}
		
		#sub_wrapper {
			display: flex; 
			flex-wrap: nowrap;
			padding: 0; 
			margin: 0; 
			width: 100%; 
		}
		

		#root,
        #application,
        #threeRendererDom {
			width: 960px !important;
            height: 540px !important;
        }
		
		#main_wrapper{
			background-size: 400px 243px;
		}
		
		#side_info {
			background-color: #3f51b5;
			height: 70%;
			width: 100%;
		}
		
}

@media only screen and (min-width: 800px) and (max-width: 1365px) {
		body{
			width: 100vw;
			height: 1366px;
		}
		
		#main_wrapper {
			display: block;
			background-position: right bottom 15%;
			background-size: 400px 243px;
		}
		
		#time_menu {
			height: 135px; 
			width: 100%; 
			color: #efefef;
		}
		
		#sub_wrapper{
			display: block; 
			
			padding: 0; 
			margin: 0; 
			width: 100%; 
			
		}		
		
		#side_block{ 
			margin-left: 0;
			width: 720px;
			height: 405px;
			padding-left: 0;
			margin-top: 15px;
		}
		
		#root,
        #application,
        #threeRendererDom {
			width: 720px !important;
            height: 405px !important;
			margin-left: 0;
			padding-left: 0;
        }
		
		#sub_wrapper{
			display: flex; 
			flex-wrap: wrap;
			padding: 0; 
			margin: 0; 
			width: 100%; 
			overflow: clip;
		}
		#side_info {
			height: 100%;
			width: 50%;
		}
		
		#checkinout {
			margin-left: 20px;
			display: flex;
			flex-wrap: nowrap;
		}
		#checkinout_text {
			display: block;
			max-width: 130px;
			font-size: 70%;
		}
		#search_time{margin-left: 10px;}
		
		#calendar_img {
			width: 34px;
			height: 37px;
			padding-right: 10px;
		}		
		
		#clock_img {
			padding-right: 7px;
			padding-left: 7px;
			width:29px;
			height:29px;
		}
		
		#end_time {
			margin-left: 5px;
		}
		
		#selectdate_arrow{
			display: none;
		}		
		
}

@media (orientation: portrait) {
body{
    width: 100vw;
	height: 1366px;
}

		#main_wrapper {
			display: block;
			background-size: 400px 243px;
			background-position: right bottom 15%;
		}
		
		#time_menu {
			height: 135px; 
			width: 100%; 
			color: #efefef;
		}
		
		#sub_wrapper{
			display: block; 
			
			padding: 0; 
			margin: 0; 
			width: 100%; 
			
		}

		#side_block{ 
			margin-left: 0;
			width: 720px;
			height: 405px;
			padding-left: 0;
			margin-top: 15px;
		}
		
		#root,
        #application,
        #threeRendererDom {
			width: 720px !important;
            height: 405px !important;
			margin-left: 0;
			padding-left: 0;
        }
		
		#side_info {
			height: 100%;
			width: 50%;
		}
		
		#checkinout {
			margin-left: 20px;
			display: flex;
			flex-wrap: nowrap;
		}
		#checkinout_text {
			display: block;
			max-width: 130px;
			font-size: 70%;
		}
		#search_time{margin-left: 10px;}
		
		#calendar_img {
			width: 34px;
			height: 37px;
			padding-right: 10px;
		}
		
		#clock_img {
			padding-right: 7px;
			padding-left: 7px;
			width:29px;
			height:29px;			
		}
		
		#end_time {
			margin-left: 5px;
		}
		
		#selectdate_arrow{
			display: none;
		}		
		
}

/*# sourceMappingURL=main.css.map*/




/*@media (orientation: portrait) {
body{
    margin:0;
    padding:0;
	font-size: 16px;
    background-image: linear-gradient(150deg, #111221 50%, #656bd6) !important;
	background-repeat: no-repeat;
	width: 100vw;
	height: 100vh;
}*/

}