/*
=====================================================

config部分

=====================================================
*/
html,body{
height: 100%;
}



/*
=====================================================

app部分

=====================================================
*/
#cotainer{
display: table;
width: 100%;
height: 100%;
}


article{
width: 90%;
margin: 0 auto;
display: table-row;
}

article main{
display: table-cell;
vertical-align: middle;
}
article .btn{
width: 100%;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
font-weight: bold;
position: relative;
}

article .btn:after{
content: " ";
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
font-weight: bold;
position: absolute;
top:0;
left: 0;
background: rgba(0,0,0,.6);
}

article.on .btn:after{
display: none;
}

article.done .btn:after{
background: rgba(255,255,255,.6);
}

article .input{
display: none;
}
article .input input{
width: 100%;
margin: 0;
box-sizing: border-box;
padding: 20px;
font-size: 24px;
color: #000;
}


.main{
margin-top: 2.5em;
}

.setup{
width: 100vw;
height: 100%;
position: absolute;
left: 0;
top:100%;
animation-name:sample01;
animation-duration:.4s;
animation-fill-mode: forwards;
}

@keyframes sample01 {
0% {
 opacity: 0;
}
  50%{
    opacity: 1;
     transform: translateY(0);
  }
 100% {
 opacity:1;
 transform: translateY(-100%);
 } 
}

/*
=====================================================

form部分

=====================================================
*/
#search{
padding: 10px;
background: #f4fdec;
text-align: center;
}

#search legend{
background: #00ba8b;
width: 200px;
text-align: center;
color: #fff;
border-radius: 10px;
}


#search button[type=submit]{
margin: 0 auto;
width: 100px;
}

.SearchItemsFielad{
display: flex;
justify-content: space-between;
}

.field{
width: 30%;
display: flex;
align-items: center;
}

.field label{
background: #00ba8b;
width: 20%;
padding: 5px;
color: #fff;
border-radius: 10px;
text-align: center;
}

.widget-table{
overflow: auto;
white-space: nowrap;
}

table tr:hover td{
background: #fee !important;
cursor: pointer;
}


.field .tel{
width: 60px;
}


#dummLoad{
width: 100%;
height: 100%;
position: fixed;
top:0;
left: 0;
display: table;
background: rgba(255,255,255,.7);
}

#dummLoadInner{
display: table-cell;
text-align: center;
vertical-align: middle;
}

#dummLoadInner span{
display: block;
font-weight: bold;
font-size: 2em;
}


.status{
display: inline-block;
padding: 3px;
border-radius: 3px;
white-space: nowrap;
color: #fff;
}

.status0{ background-color: #ef3a8b;}
.status1{ background-color: #07550f;}
.status2{ background-color: #0e3be6;}
.status3{ background-color: #31ceaf;}
.status4{ background-color: #998f1c;}



/**/
.modal {
width: 80%;
left: 30%;
}

.modal.fade.in {
height: 80%;
top: 30%;
}


.modal-body{
max-height: initial;
max-height: auto;
height:100%;
}



.modal-body .box{
margin-top: 20px;
}

.modal-body .box header{
background: #f1f1f1;
padding: 5px;
}
.modal-body .box header h1{
text-align: center;
color: #444;
padding: 0;
margin: 0;
font-size: 100%;
}


.modal-body .box .body{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

.modal-body .box.itemns .body{
justify-content: start;
align-items: flex-start;
}

.modal-body .box .body dl{
width: 50%;
display: flex;
margin: 0;
margin-top: 5px;
padding-top: 5px;
border-top: solid 1px #f1f1f1;
}

.modal-body .box .body dt,
.modal-body .box .body dd{
padding: 10px;
}
.modal-body .box .body dt{
background: #f1f1f1;
width: 30%;
}


.beacon .beaconID{
display: inline-block;
white-space: nowrap;
padding: 5px;
border-radius: 20px;
border:solid 1px #e60e6e;
color: #e60e6e;
}

.beacon label{
display: inline-block;
text-align: center;
margin-right: 20px;
}
.beacon label span{
display: inline-block;
white-space: nowrap;
padding: 5px;
border-radius: 20px;
border:solid 1px #abce31;
color: #fff;
font-size: 80%;
background: #abce31;
}
input[type=number]{
width: 50px;
margin: 0 auto; 
}

.ManualInput .forms{
display: none;
}

.ManualInput .forms input{
width: 70px;
}

th .sort{
display: block;
font-size: 80%;
padding: 2px 6px;
background-color: #00ba8b;
}

.num_rows{
margin-bottom: 20px;
}



#FormArea{
padding: 20px;
background: #f1f1f1;
margin: 20px 0;
border-radius: 10px;
}

.download{
margin-bottom: 20px;
}

#FormArea{
display: none;
}



#drag-area{
color: #00ba8b;
min-height: 100px;
width: 100%;
border-style: dashed;
border-width: 2px;
line-height: 100px;
text-align: center;
cursor: pointer;
margin-bottom: 20px;
}

.progress{
padding: 20px 0;
}

.progress progress {
height: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
width: 80%;
}


.drag-and-drop-area {
color: #00ba8b;
min-height: 100px;
width: 100%;
border-style: dashed;
border-width: 2px;
line-height: 100px;
text-align: center;
cursor: pointer;
}

.drag-and-drop-area-over {
border-color: #0000FF;
}

.drag-and-drop-area-over span {
opacity: 0.2;
}

.drag-and-drop-area-out {
border-color: #00ba8b;
}

.drag-and-drop-area-out span {
opacity: 1;
}



.err{
background-color: #fdd;
color: #c00;
}