html,php{width:100%; height:100%; color: #00004c; font: 12px Verdana, Geneva, sans-serif; margin:0; padding:0}
.hline{border-bottom:1px solid #00004c;}
h1{font-size: 16px; }
h4{font-size: 14px; padding: 10px}
header{background-color: #00004c;}
main{width:100%; margin: 0 auto; }
form {border:none}
.cleaner{clear:both}
a{color: #00004c;}
.w{color:#fff; text-decoration:none}
p{margin: 0 0}
.small{font-size:10px}
.invert:hover{background-color:#00004c; color:#fff;}
.tc{text-align:center;}
.tal{text-align:left !important;}
.b{font-weight:bold}
/* LOGIN-FORM */
#loginForm {width:310px;  margin: 5% auto;text-align:center; position:relative; }
#loginForm input { width:200px; border: none; font-size:16px; padding: 5px; text-align:center }
#loginForm input::placeholder{font-size:16px; font-style:italic; color:#ccc}
#loginForm input.invalid{background-color: #ffdddd}
button { background-color: #00004c; border: 1px solid #fff; color:#fff; font-size:14px; font-weight:bold; padding: 10px 30px; margin: 140px auto 0 auto}
button:hover { border: 1px solid #00004c; background-color: #fff; color:#00004c;}
.border_bottom{border-bottom:1px solid #00004c; }
.login_fld{width:288px; border-bottom:1px solid #00004c !important; }
.step{width: 270px; position:absolute; top:140px; left:0; display: none; padding: 20px; opacity: 1;}

/* HEADER */
#logo{width:102px; height:58px; padding: 9px; float:left}
#head{min-width:303px; height:77px; margin: 0 auto}
 #head ul ul {display:none; border: 1px solid white; z-index:200;}
 #head ul li:hover  ul {display: block;}
 #head ul {display: inline-block; list-style-type: none; position: relative;  padding: 0; margin:0; float:right;  }
 #headp ul:after {content: ""; clear: both; display: block;}
 #head ul li { float:left }
 #head ul li a {display:block; color:#fff;  line-height: 77px; padding: 0 30px 0 30px; text-align: center; text-decoration:none}
 #head ul li .ri, #head ul li a:hover {background-color: #fff; color: #00004c;}
 #head ul ul {position: absolute; top: 100%;   padding: 0;}
 #head ul ul li {border-bottom: 1px solid #ddd; float:none;  position: relative; }
 #head ul ul li a {  background-color:#00004c;  color:#fff; height: 30px; line-height: 30px; padding: 0 5px 0 5px; }	
 #head ul ul li a:hover {background: #fff; color:#00004c;  }
 #head ul ul li.current a {background-color: #fff; color:#00004c;}
 
 #mmenu{width:65px; height:65px; display:none; }

/* ACCORDION background:url("../images/nav_white.png") no-repeat; background-position: center center; -webkit-filter: grayscale(100%); filter: grayscale(100%);float:right */

.ac-container{	width: 100%; margin: 10px auto ; text-align: left;}
 .v {width: 25% !important;margin: 0 !important;text-align: left;} 
 .ac-container label{padding: 5px 20px; position: relative; z-index: 20; display: block; height: 30px; cursor: pointer; line-height: 33px; font-size: 16px; border-bottom: 2px solid #00004c;  }
 .ac-container label:hover{font-weight:bold}
 .ac-container input:checked + label, .ac-container input:checked + label:hover{background-color:#00004c; color:#fff}
 .ac-container label:hover:after,.ac-container input:checked + label:hover:after{content: '';position: absolute; width: 24px;height: 24px;right: 13px;top: 7px; background: transparent url(/img_fol/arrow_down_b.png) no-repeat center center;}
 .ac-container input:checked + label:hover:after{background-image: url(/img_fol/arrow_up_w.png);}
 .ac-container input{display: none;}
 .ac-container input:checked ~article{height: auto;}
 .ac-container input:checked ~form div{height: auto; padding: 20px 40px;}
 .ac-container article{margin-top: -1px;	overflow: hidden;height: 0px;position: relative;z-index: 10;transition: height 0.3s ease-in-out, box-shadow 0.6s linear;}
 .ac-container article ul li{	font-size: 14px; padding: 0px;}
 .ac-container article p{padding: 20px }
 .ac-container input:checked ~ article{	transition: height 0.5s ease-in-out}
 .lbl{all:revert;}

/* FILE-TABLE */
#search{width:25%; height:50px; text-align: left; font-size: 16px; border: none; padding:0 0 0 15px; float:left}
#search::placeholder{font-style:italic; color:#ccc}
#content_table{table-layout:fixed; width:100%}
#content_table tr:hover td{border: 1px solid #fff}
#content_table tr:hover a{color:#fff}
#content_table, #content_table th, #content_table td{border: 1px solid #00004c; border-collapse:collapse}
#content_table th, #content_table td{padding: 20px; text-align:center}

.tupld{width: 90px;}
.tdate{width: 160px;}
.tdownl{width: 120px;}
.tr:hover .downloadBtn{background-image:url("/img_fol/ICON-Dow-W.png");}
.tr:hover .delBtn{background-image:url("/img_fol/ICON-Del-W.png");}
.tr:hover a{color:#fff}
.tr:hover td{border-color:#fff !important}


/* UPLOAD */
#input_fld{display:none}

#upload_button{ width:50px; height:50px; background-image:url(/img_fol/ICON-Add-B.png); background-size:contain; padding:0; margin: 8px 0; float:right; }
#upload_button:hover{ background-image:url(/img_fol/ICON-Add-WonB.png);}

#swindow{display:none; position:fixed; top:0; left: 0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.4);text-align:center; z-index:50}
#swindow_content{width: 50%;  margin: 10% auto; background-color:#fff;  }

#upld{background-color:#fff;}
#upld button{cursor: pointer; margin:20px}
#hinput_fld{display:none}
#nofiles{width:100%; clear:both; font-size: 20px; font-weight:bold; text-align:center }

#flist{width:100%; list-style-type:none; padding:0; margin:0; display:none}
#flist li{border:1px solid #00004c; display:block; height: 40px; line-height:40px; position:relative}
#flist li:hover span{color:#fff}
.close{display: block; cursor:pointer; position:absolute; top:50%; right:0; padding: 0 20px; transform:translate(0%, -50%);}
.lcol{float:left; padding-left:20px }
.rcol{width:250px; float:right}

/* support form */
form{margin: 0 auto;}
form div{padding: 20px 40px;}
form label{ border:none; }
input, textarea{}

input[type=text], input[type=password], textarea {width:100%; padding: 5px 10px; margin: 8px 0; display:inline-block; border:1px solid #bbb; box-sizing:border-box}
.psnmsp{padding:5px; margin:0 }
#send_msg{margin:0;}


/* FOOTER */

#status-msg, #fstatus-msg { position:fixed; left:0; bottom:0; border-bottom: 2px solid #00004c;  width:100%; height:10px; color:white; font-weight:bold; line-height:10px; padding: 5px; text-align:center; animation-duration:5s}
#status-msg { transform:translate(0, 100%); animation-name: statusmsg; }
#fstatus-msg { transform:translate(0, 100%); animation-name: fstatusmsg; display:none }
.allfine {background-color: green}
.notfine{ background-color: #b20000;}



footer{position:fixed; left:0; bottom:0; width:100%; background-color: #00004c; color:#fff; text-align:right; z-index:101}
footer p{margin: 5px; padding: 2px 0; }

@keyframes statusmsg {
	0% {transform:translate(0,0); opacity:0;}
	15% {opacity:1}
	25% {transform:translate(0, -100%);}
	75% {transform:translate(0, -100%);}
	85% {opacity:1}
	100% {transform:translate(0, 0); opacity:0}
}
@keyframes fstatusmsg {
	0% {transform:translate(0,100%); opacity:0;}
	25% {transform:translate(0, 0); opacity:1}
	75% {transform:translate(0, 0); opacity:1}
	100% {transform:translate(0, 100%); opacity:0; display:none}
}


@media only screen and (max-width:650px){
	main{margin: 20px auto}
    #content_table th, #content_table td{padding: 2px; text-align:center}
	.tupld{width: 60px}
    .tdate{width: 75px}
    .tdownl{width: 65px}
	
}
@media only screen and (max-width:320px){
	main{font-size:10px; padding:0}
    #content_table th, #content_table td{padding: 1px; text-align:center}
	.tupld{width: 50px}
    .tdate{width: 65px}
    .tdownl{width: 55px}
	
}