html,body {
  	width: 100%;
 		height: 100%;
 		background: #f2f2f2;
}
.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		background: #42424c;
		text-align: center;
		padding: 0;
    border-top: 2px solid; 
    border-left: 0; 
    border-right: 0; 
    border-bottom: 0; 
    border-image: 
    linear-gradient(to right, #7da0e3 0%, #77c8a9 100%);  
    border-image-slice: 1;
}
.footer_div{
  float: left; 
  width: 33.3%; 
  border-right: 1px solid #2b2b33;
}
.footer_div2{
  float: left; 
  width: 33.3%;
}
.footer_div3{
  float: left; 
  width: 50%; 
  border-right: 1px solid #2b2b33;
}
.footer_div4{
  float: left; 
  width: 50%;
}
.footer_div5{
  float: left; 
  width: 100%; 
}
.footer_div_font{
  color: white; 
  font-size: 12px; 
  border-radius: 0; 
  padding-top: 20px; 
  padding-bottom: 20px;
}
.footer_div_font2{
  color: white; 
  font-size: 12px; 
  padding-top: 20px; 
  padding-bottom: 20px;
}
.footer_icon{
  width: 20%; 
  margin-bottom: 4%;
}
.footer2{
    position: fixed;
    bottom: 80px;
    left: 0;
    right: 0;
    z-index: 10;
    text-align: center;
    padding: 0;
}
.header {
  	position: fixed;
  	top: 0;
  	left: 0;
  	right: 0;
  	z-index: 10;
  	height: 30px;
  	background: #f2f2f2;
  	padding-top: 10px;
  	padding-bottom: 45px;
}
.content {
		text-align: center;
		/*padding-bottom: 100%;*/
		width: 100%;
  	/*height: 100%;*/
  	overflow: auto;
		background: #f2f2f2;
		margin-top: 60px;
		/*margin-bottom: 180px;*/
    padding-bottom: 80px;
}
.basic_font_color{
  color: #173347;
  font-weight: bold;
}
.today_arrive{
  float: left; 
  font-weight: bold; 
  font-size: 1rem; 
  margin-top: 10px;
  background-color: #f2f2f2; 
  width: 55%;
  text-align: left;
  padding-left: 20px;
}
.today_arrive2{
  float: left; 
  font-weight: bold; 
  font-size: 1rem; 
  background-color: #f2f2f2; 
  width: 60%; 
  text-align: left; 
  padding-left: 20px;
  margin-top: 10px;
}
.my_schedule{
  float: left; 
  width: 100%; 
  font-weight: bold; 
  font-size: 1rem; 
  background-color: #f2f2f2; 
  width: 55%; 
  text-align: left; 
  padding-left: 10px;
}
.reserve_schedule{ 
  float: left; 
  font-size: 1rem; 
  background-color: #f2f2f2; 
  width: 100%; 
  margin-top: 10px; 
  text-align: left; 
  padding-left: 20px; 
}
.new_reserve{
  float: left; 
  font-size: 1rem; 
  background-color: #f2f2f2; 
  width: 100%; 
  margin-top: 10px; 
  text-align: left; 
  padding-left: 20px;
}
.terms_service{
  float: left; 
  font-weight: bold; 
  font-size: 1rem; 
  background-color: #f2f2f2; 
  width: 55%; 
  margin-top: 45px; 
  padding-bottom: 20px; 
  padding-top: 20px;
  padding-left: 20px;
}
.visitor_join{
  font-weight: bold; 
  font-size: 1rem; 
  background-color: #f2f2f2; 
  width: 100%; 
  margin-top: 55px; 
  padding-bottom: 10px; 
  padding-top: 10px;
  padding-left: 10px;
}
.not_apprve_right{
  float: right; 
  background-color: #f2f2f2; 
  width: 45%; 
  margin-top: 10px;
} 
.arrive_color{
  color: #3e5cdc;
}
.font_09rem{
  font-size: 0.9rem;
}
.black_col{
  color: black;
}
.gray_col{
  color: gray;
}
.new_reserve_col{
  color: #dd6047;
}
.new_reserve_bg{
  background-color: #dd6047;
}
.font14px{
  font-size: 14px;
}
.font13px{
  font-size: 13px;
}
.font12px{
  font-size: 12px;
}
.font10px{
  font-size: 10px;
}
.bold_font{
  font-weight: bold;
}
.list_count{
  font-size: 14px; 
  border-radius: 5px; 
  padding-left: 8px; 
  padding-right: 8px;  
  background-color: #7c7c81; 
  color: white;
} 
.not_info_list{
  float: left; 
  border: 1px solid #e4e4e5; 
  border-radius: 12px; 
  width: 95%; 
  margin-left: 2.5%; 
  background-color: white; 
  padding-top: 30px; 
  padding-bottom: 30px; 
  margin-top: 5px;
} 
.not_info_list2{
  float: left; 
  border: 1px solid #e4e4e5; 
  border-radius: 12px; 
  width: 95%; 
  margin-left: 2.5%; 
  background-color: white; 
  padding-top: 30px; 
  padding-bottom: 30px;
}
.list_info1{ 
  float: left; 
  border: 1px solid #e4e4e5; 
  border-radius: 12px; 
  width: 95%; 
  margin-left: 2.5%; 
  background-color: white; 
  margin-top: 5px; 
  padding-top: 5px; 
  padding-bottom: 5px;
}  
.detail_info{
  float: left; 
  text-align: left; 
  border: 1px solid #e4e4e5; 
  border-radius: 12px; 
  width: 95%; 
  margin-left: 2.5%; 
  background-color: white; 
  display: none; 
  font-size: 10px;
} 
.my_schedule_list{
  float: left; 
  border: 1px solid #e4e4e5; 
  border-radius: 12px; 
  width: 95%; 
  margin-left: 2.5%; 
  background-color: white; 
  padding-top: 10px; 
  padding-bottom: 10px; 
  margin-top: 5px; 
  text-align: left; 
  padding-left: 10px;
}
.float_left{
  float: left;
}
.list_info_time{ 
  text-align: left; 
  margin-top: 5px; 
  font-weight: bold; 
  padding-left: 5px;
}
.watch_img{
  float: left; 
  width: 20px; 
  height: 20px;
}
.watch_img2{
  float: left; 
  width: 20px; 
  height: 15px;
}
.list_info_name{
  text-align: left; 
  padding-left: 5px
}
.list_btn_rescue{
  float: right; 
  padding-right: 10px;
}
.list_btn_rescue2{
  float: right; 
  padding-right: 5px;
}
.list_left_div{
  float: left; 
  margin-right: 5px;
}
.list_right_div{
  float: right;
  margin-right: 5px;
} 
.btn_arrive1{
  font-size: 0.8rem; 
  color: white; 
  background-color: #627df3; 
  margin-top: 5px; 
  margin-bottom: 5px; 
  padding: .90rem 2.4rem;
}
.btn_complete1{
  font-size: 0.8rem; 
  color: white; 
  background-color: #4f4f59; 
  margin-top: 5px; 
  margin-bottom: 5px; 
  padding: .90rem 2.4rem;
}
.btn_basic_rescue{
  font-size: 0.8rem; 
  color: white; 
  margin-top: 5px; 
  margin-bottom: 5px; 
  padding: .90rem .55rem;
}
.admission_col{
  background-color: #627df3;
}
.complete_col{
  background-color: #4f4f59;
}
.confirm_col{
  background-color: #32b280;
}
.reject_col{
  background-color: #4f4f59;
}
.waiting_col{
  background-color: #4f4f59;
}
.cancel_col{
  background-color: #dd6047;
}
.not_apprve_col{
  color: #32b280;
} 
.visit_purpose{
  font-size: 14px; 
  border-right: 1px solid gray; 
  margin-right: 2px; 
  padding-right: 3px; 
  color: gray;
}
.visit_purpose2{
  font-size: 14px; 
  margin-right: 2px; 
  padding-right: 3px;
}
.btn_apprve_wait{
  font-size: 0.8rem; 
  color: white; 
  background-color: #4f4f59; 
  margin-top: 5px; 
  margin-bottom: 5px; 
  padding: .90rem 2.4rem;
}
.btn_arrive{ 
  font-size: 0.8rem; 
  color: white; 
  background-color: #627df3; 
  margin-top: 5px; 
  margin-bottom: 5px; 
  padding: .90rem .55rem;
}
.btn_arrive2{
  font-size: 0.8rem; 
  color: white; 
  background-color: #627df3; 
  margin-top: 5px; 
  margin-bottom: 5px; 
  padding: .90rem 2.4rem;
}
.btn_reserve_cancel{ 
  font-size: 0.8rem; 
  color: white; 
  background-color: #4f4f59; 
  margin-top: 5px; 
  margin-bottom: 5px;
  padding: .90rem 2rem;
}
.my_schedule1{
  float: left; 
  width: 100%; 
  padding-left: 10px;
  padding-right: 10px;
}
.my_schedule2{
  float: left; 
  width: 100%;
}
.my_schedule3{
  float: left; 
  width: 30%; 
  margin-left: 5%;
}
.btn_schedule{
  color: white; 
  background-color: #627df3; 
  padding: .30rem .30rem;
}
.vrs_info{
  align-content: center; 
  /*margin-top: 15%;*/
}
.main_vrs_info_img{
  max-width: 100%; 
  height: auto;
}
.expected_to_arrive_font{
  float: left; 
  margin-right: 10px; 
  margin-top: 17px; 
  color: #627df3; 
  font-weight: 900;
}
.staff_reject_font{
  float: right; 
  width: 100%; 
  margin-right: 25%; 
  margin-top: 15px; 
  color: #d94c4c; 
  font-weight: 900;
}
.visitor_cancel_font{
  float: right; 
  width: 100%; 
  margin-right: 25%; 
  margin-top: 15px; 
  color: #d94c4c; 
  font-weight: 900;
}
.check_waiting_font{
  float: right; 
  width: 100%; 
  margin-right: 25%; 
  margin-top: 15px; 
  color: #828282; 
  font-weight: 900;
}
.check_waiting_font{
  float: right; 
  width: 100%; 
  margin-right: 25%; 
  margin-top: 15px; 
  color: #828282; 
  font-weight: 900;
}
.check_waiting_font2{
  float: right; width: 100%; 
  margin-right: 5%; 
  margin-top: 20px; 
  color: #828282; 
  font-weight: 900; 
  font-size: 0.8rem;
}
.arrive_visiting_font{
  float: right; 
  width: 100%; 
  margin-right: 10%; 
  margin-top: 15px; 
  color: #627df3; 
  font-weight: 900;
}
.check_complete_font{
  float: right;
  width: 100%; 
  margin-right: 5%; 
  margin-top: 20px; 
  color: #58be96; 
  font-weight: 900; 
  font-size: 0.8rem;
}
/*----------------------------------terms-----------------------------------------------*/
.ccheck input[type="checkbox"] {
    display:none;
}
.ccheck label{
    width:100%;
    height:20px;
}
    
.ccheck input[type="checkbox"] + label .chk_img {
  padding:0 0 0 40px;
  height:20px;
  background:url("/assets/img/checkbox2.png") left/40px no-repeat;
  cursor:pointer;
}
.ccheck input[type="checkbox"]:checked + label .chk_img {
  background:url("/assets/img/checkbox1.png") left/40px no-repeat;
}
.card2 {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #f2f2f2;
    background-clip: border-box;
    border: 1px solid rgb(247,247,247);
    border-radius: .25rem;
}
.card_bg_cl{
  background-color: #f2f2f2;">
}
.card_font_size{
  font-size: 0.8rem;
}
.start_btn2{
  background-color: #42424c; color: white; font-weight: bold; border-radius: 7px; padding: .70rem;
}
.next_btn2{
  border-radius: 7px; background-color: #627df3; color: white; font-weight: bold; padding: .70rem;
}
/*-----------------------join and visit apply------------------------------------------------*/
.block{
  border-radius: 4px; border: 1px solid #dbdce1;
}
.visitor_join_form{ 
  width: 100%; 
  /*margin-bottom: 180px;*/
  padding-bottom: 140px; 
  padding-left: 10px; 
  padding-right: 10px;
}
.ccheck2 input[type="checkbox"] {
  display:none;
}
.ccheck2 label{
  width:100%;
  height:20px;
}
.ccheck2 input[type="checkbox"] + label .chk_img2 {
  padding:0 0 0 35px;
  height:20px;
  background:url("/assets/img/checkbox2.png") left/40px no-repeat;
  cursor:pointer;
}
.ccheck2 input[type="checkbox"]:checked + label .chk_img2 {
  background:url("/assets/img/checkbox1.png") left/40px no-repeat;
}
.visit_apply_form{
  margin-top: 55px; 
  padding-left: 10px; 
  padding-right: 10px;
  height: 100%;
}
.visit_name_search{
  background-image: url(/assets/img/search.png); 
  background-repeat: no-repeat; 
  background-position: right; 
  background-size: 40px;
}
.visit_purpose_check{
  background-color: white; 
  padding-top: 6px; 
  padding-bottom: 3px; 
  margin-top: 4px;
}
/*------------------------------visitor check login------------------------------*/
.visitor_check_form{
  padding-left: 10px; 
  padding-right: 10px;
}
.visitor_btn_div{
  float: left; 
  width: 100%; 
  padding-left: 10px; 
  padding-right: 10px;
}

.home_btn{
    width: 130px; 
    padding-right: 10px;
  }


.complete_info_box{
  background-color: white; 
  margin-top: 10%; 
  margin-left: 6%; 
  margin-right: 6%; 
  padding-top: 9%; 
  padding-bottom: 5%; 
  border-radius: 20px; 
  border-image: linear-gradient(to right, #7da0e3 0%, #77c8a9 100%); 
  border-image-slice: 1;
}

.check_icon{
  width: 40vw;
}

.complete_info_font{
  font-size: 7vw; 
  color: #496cbb; 
  font-weight: 600;
  margin-bottom: 0;
}

.complete_info_content{
  font-size: 3.5vw; 
  font-weight: bolder;
}

.complete_info_content2{
  font-size: 3.5vw; 
  font-weight: normal;
}

.mdm_download_btn{
  color: white; 
  font-size: 5vw; 
  border-radius: 12px;
  background-color: #42424c; 
  padding: 5% 10% 5% 10%;
  font-weight: normal;
  background: linear-gradient( to right, #516d8b 0%, #445b75 100%);
  text-decoration: none;
}

.down_btn_div{
  margin-top: 20%;
}
.down_btn_div:hover {
  text-decoration: none;
  color: white;
}
.down_icon{
  width: 10vw; 
  margin-left: 5px;
}

.main_info_title{
  text-align: left; 
  margin-left: 5%; 
  font-weight: 600; 
  font-size: 6vw; 
  color: #474c4f;
}


@media screen and (min-width: 1200px) {
.complete_info_box{
  background-color: white;
  margin-top: 0;
  margin-left: 30%; 
  margin-right: 30%; 
  padding-top: 5%; 
  padding-bottom: 5%; 
  border-radius: 20px; 
  border-image: linear-gradient(to right, #7da0e3 0%, #77c8a9 100%); 
  border-image-slice: 1;
}

.complete_info_font{
    font-size: 2vw; 
    color: #496cbb; 
    font-weight: 600;
    margin-bottom: 0;
}
.check_icon{
  width: 10vw;
}

.complete_info_content{
  font-size: 1.5vw; 
  font-weight: bolder;
}

.complete_info_content2{
  font-size: 1vw; 
  font-weight: normal;
}

.mdm_download_btn{
  color: white; 
  font-size: 2vw; 
  border-radius: 12px;
  background-color: #42424c; 
  padding: 3% 5% 3% 5%;
  font-weight: normal;
  background: linear-gradient( to right, #516d8b 0%, #445b75 100%);
  text-decoration: none;
}
.down_btn_div{
  margin-top: 5%;
}
.down_icon{
  width: 4vw; 
  margin-left: 5px;
}

.main_info_title{
  text-align: center;
  margin-left: 0; 
  font-weight: 600; 
  font-size: 1.5vw; 
  color: #474c4f;
}

}

@media screen and (max-width: 350px) {
  .today_arrive{
    float: left; 
    font-weight: bold; 
    font-size: 0.9rem; 
    margin-top: 10px;
    background-color: #f2f2f2; 
    width: 55%;
    text-align: left;
    padding-left: 20px;
  }
  .today_arrive2{
    float: left; 
    font-weight: bold; 
    font-size: 0.9rem; 
    background-color: #f2f2f2; 
    width: 55%; 
    text-align: left; 
    padding-left: 20px;
    margin-top: 10px;
  }
  .visitor_join_form{ 
    width: 100%; 
    padding-bottom: 150px; 
    padding-left: 10px; 
    padding-right: 10px;
  }
  .font_09rem{
    font-size: 0.7rem;
  }
  .font14px{
    font-size: 13px;
  }
  .font13px{
    font-size: 12px;
  }
  .font12px{
    font-size: 11px;
  }
  .font10px{
    font-size: 6px;
  }

  .list_count{
    font-size: 13px; 
    border-radius: 5px; 
    padding-left: 8px; 
    padding-right: 8px;  
    background-color: #7c7c81; 
    color: white;
  } 
  .home_btn{
    width: 130px; 
    padding-right: 25px;
  }

  .main_info_title{
    text-align: left;
    margin-left: 5%; 
    font-weight: 600; 
    font-size: 5vw; 
    color: #474c4f;
  }

}

@media screen and (max-width: 280px) {
  .home_btn{
    width: 130px; 
    padding-right: 40px;
  }
  .footer_div_font{
    color: white; 
    font-size: 10px; 
    border-radius: 0; 
    padding-top: 20px; 
    padding-bottom: 20px;
  }
  .footer_div_font2{
    color: white; 
    font-size: 10px; 
    padding-top: 20px; 
    padding-bottom: 20px;
  }
  .font_09rem{
    font-size: 0.6rem;
  }
  .font14px{
    font-size: 12px;
  }
  .font13px{
    font-size: 11px;
  }
  .font12px{
    font-size: 10px;
  }
  .font10px{
    font-size: 5px;
  }
  .today_arrive{
    float: left; 
    font-weight: bold; 
    font-size: 0.7rem; 
    margin-top: 10px;
    background-color: #f2f2f2; 
    width: 55%;
    text-align: left;
    padding-left: 20px;
  }
  .today_arrive2{
    float: left; 
    font-weight: bold; 
    font-size: 0.8rem; 
    background-color: #f2f2f2; 
    width: 55%; 
    text-align: left; 
    padding-left: 20px;
    margin-top: 10px;
  }
  .visitor_join_form{ 
    width: 100%; 
    padding-bottom: 150px; 
    padding-left: 10px; 
    padding-right: 10px;
  }

  /*@media screen and (min-width: 670px) {
    .vrs_info{
      align-content: center; 
      margin-top: 5%;
      height: 100px;
    }

    .content {
        text-align: center;
        padding-bottom: 100%;
        width: 100%;
        height: 100%;
        overflow: auto;
        background: #f2f2f2;
        height: 970px;
        margin-top: 20px;
        margin-bottom: 180px;
        padding-bottom: 80px;
    }

  }*/

}







.hidden {
  display: none;
}

.loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.8);
}
.center-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* loader */
.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(98,125,243, 0.2);
  border-right: 1.1em solid rgba(98,125,243, 0.2);
  border-bottom: 1.1em solid rgba(98,125,243, 0.2);
  border-left: 1.1em solid #627df3;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


.ui-timepicker-standard a {
	text-align: left;
}