.space{
	width:100%;
	height:1em;
}

.container{
	*min-height:600px;
}

.login{
	width:60%;
	margin:0 auto;
}

.login .item{
	width:100%;
}

.login .item .content{
	width:100%;
}

.login .item  .actions, .login .item  .actions input{
	width:100%;
}

.form, .form label, .form div, .form input{
	width:100%;
}

.form .part{
	width:80%;
	float:left;
}

.form .btn-2{
	width:20%;
	float:left;
}

.form input.auto{
	width:auto;
}    


.list .item{
	width:100%;
}
	
.list .item .content{
	width:70%;
	float:left;
}

.list .item  .actions{
	width:30%;
	float:left;
}

.table2excel{
	
}

table.table2excel {
	width:50%;
	margin:0 auto;
}

table.table2excel thead tr,table.table2excel thead td table.table2excel tbody tr, table.table2excel tbody td{
	border:1px solid #000;
}

.board{
	width: 100%;
	*max-width:800px;
	max-width:574px;
	margin:0 auto;
	*border:1px solid #000;
}

.board .line{
	width: 100%;
    display: flex;
}

.board .line .letter,
.board .line .number {
	width:20%;
	min-height:30px;
	float:left;
	cursor:pointer;
}

.board .line .circle{
        background: #456BD9;
    border: 0.1875em solid #0F1C3F;
    border-radius: 50%;
    box-shadow: 0.375em 0.375em 0 0 rgba(15, 28, 63, 0.125);
    height: 2.7em;
    width: 17%;
    margin-left: 1%;
    margin-right: 2%;
        margin-top: 1%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    text-align: center;
    font-size: 40px;
}



.board .line .circle.selected{
	background: yellow;
}

 .board .line .circle.white {
     background: #FFFFFF;
	 border: 0px solid #0F1C3F;
}

 .board .line .circle.small{
    padding-top: 2em;
    padding-bottom: 3.4em;
    font-size: 20px;
    text-align: left;
    padding-left: 6px;

}

.board .line .letter{
	
    text-align: center;
    font-weight: bold;
    font-size: 2em;
}

.board .banner{
	*margin-top: 20px;
    *margin-bottom: 20px;
    max-height: 300px;
	border:0px solid #000;
}

.board .banner.up{
    *padding-bottom: 2em;
}

.board .banner.down{
	 *padding-top: 2em;
	  margin-top: 1em;
	  border:1px solid #000;
}
select{	width:100%;	padding-top:3px;	padding-bottom:3px;}


.board .banner img{	
    width: 100%;
    max-height: 300px;
}.titlecenter{	text-align:center;}
@media (max-width: 600px) {
    .login {    width: 100%;    margin: 0 auto;}
    body{
        padding-top:0px;
    }
    .padding-mobile{		margin-top:3em;	}
    .navbar{
        *display:none;
    }
    
	
	.mt-4.hide{
	    display:none;
	}
	
	.lead.hide{
	    display:none;
	}
	
	.board{
		width: 90%;
		max-width:600px;
		margin:0 auto;
	}
  
  .board .line {
    *margin-top: 0.3em;
    margin-bottom: 0.3em;
  }
  
  .board .line .circle {
     background: #456BD9;
    border: 0.1875em solid #0F1C3F;
    border-radius: 50%;
    box-shadow: 0.375em 0.375em 0 0 rgba(15, 28, 63, 0.125);
    height: 70%;
    width: 22%;
    text-align: center;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-right: 1%;
    margin-left: 1%;
	font-size: 20px;
  }
  
   .board .line .circle.white {
     background: #FFFFFF;
	 border: 0px solid #0F1C3F;
   }
   

 .board .line .circle.small{    
    padding-top: 2em;
    padding-bottom: 3.1em;
    font-size: 9px;
    text-align: left;
    padding-left: 6px;
 }


}

@media (max-width: 411px) {
     .board .contentboard{
        padding: 9px;
         margin-top:-11px;
    }
    
    .board .line .circle{
        font-size: 22px;
        padding-top: 0.5em;
    }
    
    .board .line .circle.small{    
    padding-top: 2.7em;
    padding-bottom: 3.1em;
    font-size: 9px;
    text-align: left;
    padding-left: 6px;
 }
}

@media (max-width: 414px) {
     .board .contentboard{
        padding: 9px;
         margin-top:-11px !important;
    }
    
    .board .line .circle{
        font-size: 23px;
        padding-top: 0.5em;
    }
    
     .board .line .circle.small{    
    padding-top: 2.7em;
    padding-bottom: 3.1em;
    font-size: 9px;
    text-align: left;
    padding-left: 6px;
 }
 
}

@media (max-width: 375px) {
    .board .contentboard{
        padding: 9px;
         margin-top:-5px;
    }
    
    .board .line .circle{
        font-size: 20px;
        padding-top: 0.5em;
    }
    
     .board .line .circle.small{    
    padding-top: 2em;
    padding-bottom: 3.1em;
    font-size: 9px;
    text-align: left;
    padding-left: 6px;
 }
    
    
}


@media (max-width: 360px) {
    .board .contentboard{
        padding: 9px;
         margin-top:-13px !important;
    }
    
    .board .line .circle{
        font-size: 19px;
        padding-top: 0.7em;
    }
 
 .board .line .circle.small{    
    padding-top: 2em;
    padding-bottom: 3.1em;
    font-size: 9px;
    text-align: left;
    padding-left: 6px;
 }    
 
    
        
}

@media (max-width: 320px) {
     .board .contentboard{
        padding: 9px;
         margin-top:-5px;
    }
    
    .board .line .circle{
        font-size: 17px;
        padding-top: 0.5em;
    }
    
     .board .line .circle.small{    
    padding-top: 2em;
    padding-bottom: 2em;
    font-size: 9px;
    text-align: left;
    padding-left: 6px;
 }
    
    
}