.logo{
  width: 100%;
  display: flex;
  justify-content: center; 
  align-items: center; 
  margin: 20px 0;

}
.logo img{
  width: 30%;

}
.download-bg {
  background-color: #E8E8E8;
  height: 70px;
  display: flex;
  justify-content: center; 
  align-items: center; 
  margin: auto 0;
  padding: 20px;
}
.download-svg {
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 30px;
}

.download-text label {
  color: #6e6e6e;
  font-size: 1.2em;
}
.download-button{
 display: flex;
 justify-content: center; 
 align-items: center; 
 margin: 0 20px;
}

.note-step-text label{
  font-size: 1.1em;
}

.download-button > .badge{
  font-size: 100%;
  margin-left: 5px;
}
.flashing{
  animation: flash 1s linear infinite;
}
.flash {
  -moz-animation: flash .5s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash .5s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash .5s ease-out;
  -ms-animation-iteration-count: 1;

  animation: flash .5s ease-out;
  animation-iteration-count: 1;
}

@-webkit-keyframes flash {
    0% { background-color: none; }
    50% { background-color: #fad44b; }
    100% { background-color: none; }
}

@-moz-keyframes flash {
    0% { background-color: none; }
    50% { background-color: #fad44b; }
    100% { background-color: none; }
}

@-ms-keyframes flash {
    0% { background-color: none; }
    50% { background-color: #fad44b; }
    100% { background-color: none; }
}

@keyframes flash {
    0% { background-color: none; }
    50% { background-color: #fad44b; }
    100% { background-color: none; }
}
/* <!-- upload section--> */
.upload-bg {
  background-color: #4E73DF;
  height: 140px;
  display: flex;
}
.step1-section{
  display: flex;
  margin: auto;
  width: 820px;
}

.step-icon{
  margin: auto 30px;

}
.step-icon img {
  width: 150px;
  height: 50px;
  position: relative;
}

.upload-arrow-up {
  height: 30px;
  margin-bottom: 20px;
}

.upfile-text {
  padding-top: 10px;
}

.upfile-text label{
  color: white;
}

/* <!--  check-file section--> */
.check-file{
  background-color: #283F82;
  height: 140px;
  display: flex;
}
.step2-section{
  display: flex;
  margin: auto;
  width: 820px;
}
.checked-text {
  text-align: center;
}
.checked-text label{
  color: white;
  margin-top: 10px;
}

.step2-column1{
  display: flex;
}
.checked-btn button{
  background-color: #4E73DF;
  margin-left: 10px;
  color: white;
  padding: 8px 25px;
  border-radius: 5px;
  border: 1px solid #4E73DF;
  font-size: 18px;
}


/* <!-- map section--> */
.map-div{
  position: relative;
}
.check-map{
  height: 937px;
}

.step3-section{
  z-index: 100;
}
.step3-icon{
  margin: auto;
  width: 820px;
  position: absolute;
  left: 50%;
 
  margin-left: -380px;
  top: 10px;
  pointer-events: none;

}
.step3-icon img {
  width: 150px;
  height: 50px;
 
}

.ol-control {
  position: absolute;
  /* background-color: rgba(255,255,255,.4); */
  display: flex;
  border-radius: 4px;
  padding: 2px;
  top: 6px;
  left: 200px;
  z-index: 100;
}


.ol-control button {
    height: 2rem;
    width: 2rem;
    display: block;
    margin: 2px;
    padding: 0;
    color: #fff;
    font-size: 1.14em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    line-height: .4em;
    background-color: rgba(78, 115, 223, .9);
    border: none;
    border-radius: 2px;
}
.ol-control button:hover {
  background-color: rgb(154 175 234);
}
.ol-control-group {
  position: absolute;
  /* background-color: rgba(255,255,255,.4); */
  display: flex;
  border-radius: 4px;
  padding: 2px;
  top: 6px;
  left: 290px;
  z-index: 100;
}
.ol-control-group button {
  height: 2rem;
  width: 2rem;
  display: block;
  margin: 2px;
  padding: 0;
  color: #fff;
  font-size: 1.14em;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  line-height: .4em;
  background-color: rgba(78, 115, 223, .9);
  border: none;
  border-radius: 2px;
}
.ol-control-group img {
  height: 20px;
  width: auto;
}
.ol-control-group button:hover {
  background-color: rgb(154 175 234);
}
/* <!-- massage section--> */
.check-result{
  background-color: #283F82;
  height: 170px;
  display: flex;
}
.step4-section{
  display: flex;
  margin: auto;
  width: 820px;
}
.message-status {
  margin-top: 8px;
}
.message-status .btn{
  color: rgb(0, 0, 0);
  background-color: #fff;
  
  font-size: 1.5em;
  font-weight: bold;
}
.CurveArrow{
  width: 50px;
}
.message-dwonload-text label{
  color: white;
}
.goToDownload{
  display: flex;
  margin-left: 220px;
  margin-top: 10px;
}
.infoLight{
  margin-left: 10px;
}

.infoLight button{
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
  font-size: 1.5em;
  font-weight: bold;
  color: #15303b;
}


/* <!-- result section--> */
.check-status {
  background-color: #4E73DF;
  padding: 15px 0;
  padding-bottom: 28px;
}
.step5-section{
  display: flex;
  margin: auto ;
  width: 830px;
}
.check-message{
  font-size: 0.95em;
  font-weight: bold;
  color: white;
}
.check-message > div{
  margin-top: 10px;
  display: flex;
}
.check-message img{
  width: 15px;
  margin-right: 10px;
}
.status-text{
 font-size: 1rem;
}
/* ---------modal-content--檢覈結果-------------- */

.modal {

  top: 80px;

}

.modal-header {
  padding: 1rem 2rem;

}

.modal-body {

  padding: 1rem 2rem;
}


.messContent label{
  padding: 0.5rem 0;
}
.messContent-form508 label{
  padding: 0.5rem 0;
}
.disclaimer-text{
  margin-bottom: 10px;
}
/* .disclaimer label{
  font-weight: 900;
} */

.modal-footer > button{
  background-color: #efefef;
}