body, html {
font-family:"Calibri",sans-serif;
font-size:16px;
margin:0;
padding:0;
text-align:center;
}
body {
height:100%;
width:100%;
}
div:empty {display:none;}
.cl_b {color:#0000da;}
.cl_bu {color:#0000da; text-decoration:underline;}
.cl_r {color:#eb0000;}
.sb {font-weight:700;}

#header {
background:#fbfbfb;
position:relative;
}
#header h1 {
font-size:18px;
margin:0 auto 1px auto;
}

/*Login form*/
#logout {
display:block;
font-size:17px;
font-style:oblique;
font-weight:700;
margin:0;
position:absolute;
right:1%;
top:0;
}

#login {
position:relative;
width:13em;
margin:10% auto 2em auto;
background:#fefefe;
padding:1em;
border:2px solid #bbb;
font-size:1.2em;
font-weight:700;
}
#login label {
display:block;
margin:.2em 1px;
text-align:left;
}
#login #user, #login #pass {
width:10.7em;
background:#ff1;
padding:.1em;
font-style:oblique;
}
#login #user:focus, #login #pass:focus {
background:#d1e0fb;
}
#login #user {
margin-left:2.2em;
}
#login #submit {
display:block;
margin:1em auto .5em auto;
}
/*End*/

#wrap {
display:flex;
height:calc(99vh - 75px);
position:relative;
}
#wrap ul {
list-style-type:none;
margin:0;
padding:0 0 0 10px;
}
#serv_loc, #serv_ftp {
border:1px solid #333;
display:table-cell;
height:99%;
margin:1px;
min-width:303px;
position:relative;
text-align:left;
width:calc(50% - 10px);
}
#serv_loc_d , #serv_ftp_d {
background:#f4f5fd;
border-right:1px dashed #333;
display:inline-block;
height:calc(100% - 36px);
margin:0;
min-width:120px;
overflow:auto;
position:relative;
width:calc(38% - 4px);
}
#serv_loc_d .pre_dir, #serv_ftp_d .pre_dir {
background:#0000b0;
border-radius:5px;
cursor:pointer;
color:#fff;
font-weight:700;
margin:0 2px 0 1px;
padding:0 2px;
}
#serv_loc_d .pre_dir:hover, #serv_ftp_d .pre_dir:hover {
background:#e00000;
}
#serv_ftp #conn_set {
background:#fdfd99;
height:100%;
position:absolute;
text-align:center;
width:100%;
z-index:8888;
}
#conn_set #conn_data {
background:#d0d0fe;
border-radius:12px;
display:none;
font-weight:700;
padding:12px 16px;
margin:25% auto 25px auto;
width:80%;
}
#conn_set h2 {
background:#0000be;
border-radius:8px;
color:#fff;
cursor:pointer;
margin:25% auto 25px auto;
padding:12px 16px;
width:120px;
}
#conn_set h2:hover {
background:#d0d0fe;
color:#000;
}
#serv_loc_f, #serv_ftp_f {
background:#fefefe;
display:inline-block;
height:calc(100% - 36px);
margin:0 0 0 -4px;
min-width:175px;
overflow:auto;
padding:1px;
position:relative;
width:calc(61% - 5px);
}
#f_dir {
background:#f0f0fc;
font-size:14px;
font-style:oblique;
font-weight:700;
margin:0;
padding:0 1px 0 2px;
width:99%;
}
#serv_loc_f li:hover, #serv_ftp_f li:hover {
background:#edfded;
}
#serv_loc_f li label:hover, #serv_ftp_f li label:hover {
background:#eeee00;
cursor:pointer;
}
#serv_loc_f li em, #serv_ftp_f li em {
margin:0 0 0 10px;
}
.loc, .ftp {
cursor:pointer;
font-weight:700;
padding:1px;
}
.loc:hover, .ftp:hover {
background:#efefbb;
}
#cd {
background:#efefbb;
border:1px dashed #eeeeff;
}

.btns {
background:#bfefc9;
height:31px;
margin:0;
padding:1px 1% 0 .1%;
position:relative;
}
#btns_dir_loc, #btns_dir_ftp {
vertical-align:top;
}
.btns span {
background-size: calc(25px + .8%); 27px;
display:inline-block;
cursor:pointer;
height:28px;
margin:0 calc(2px + .8%);
width:calc(25px + .8%);
padding:1px;
position:relative;
width:35px;
}
.btns #btn_upload {
background: url('upload.png') no-repeat scroll center center;
}
.btns #btn_download {
background: url('download.png') no-repeat scroll center center;
}
.btns .btn_cr_dir {
background: url('create_dir.png') no-repeat scroll center center;
}
.btns .btn_ren {
background: url('rename.png') no-repeat scroll center center;
}
.btns .btn_del {
background: url('delete.png') no-repeat scroll center center;
}
.btns #btn_dis {
background: url('disconnect.png') no-repeat scroll center center;
}
.btns em {
background:#fbfe00;
border:1px dashed #0000bb;
border-radius:6px;
display:none;
font-weight:700;
left:-8px;
max-width:90px;
padding:0 3px;
position:absolute;
text-align:center;
top:-20px;
width:290%;
z-index:8899;
}
.btns span:hover{
border:1px solid #be0000;
border-radius:5px;
padding:0;
}
.btns span:hover em, .btns em:hover{
display:block;
}
.chk_all {
bottom:1px;
color:#0000be;
cursor:pointer;
font-size:14px;
font-weight:700;
margin:0 0 0 82%;
max-height:20px;
padding:0 4px 0 1px;
position:absolute;
right:.8%;
style-type:oblique;
text-align:right;
}
.chk_all:hover {
background:#fbfb11;
}

#msg {
border:1px solid #1111b0;
border-radius:12px;
background:#0000be;
display:none;
left:0;
margin:0 auto;
max-height:calc(95vh - 4% - 8px);
max-width:800px;
position:fixed;
right:0;
top:calc(4% + 8px);
width:95%;
z-index:8990;
}
#msg #msg_cls {
background:#eee;
border:1px solid #0000be;
border-radius:6px;
color:#ee0000;
cursor:pointer;
display:block;
font-weight:700;
font-size:22px;
padding:0 3px;
position:absolute;
right:-10px;
top:-10px;
}
#msg #msg_cls:hover {
background:#febbbb;
color:#0000d0;
}
#msg #msg_txt {
background:#fefefe;
font-size:17px;
height:94%;
margin:2.5% auto;
max-height:calc(88vh - 28px);
overflow:auto;
padding:2px 2px 3px 2px;
position:relative;
width:95%;
}
#msg #msg_txt h4 {
margin:2px auto 4px auto;
}
#msg #conf_msg{
background:#fdfdd0;
font-weight:700;
margin:0 0 calc(1% + 5px) 0;
padding:2px;
}
#msg #conf_msg label {
cursor:pointer;
display:block;
margin:calc(3% + 8px) auto 8px auto;
}
#msg #conf_msg #msg_rew {
color:#e00000;
font-size:14px;
font-style:oblique;
font-weight:500;
}
#msg #msg_txt button {
cursor:pointer;
font-size:17px;
font-weight:700;
margin:0 8px;
padding:1px 2px;
}
#msg #copied_files {
margin:1px 5px;
text-align:left;
}

#footer {
margin:8px auto;
}
#mpcw {
display:block;
margin:5px auto;
font-size:15px;
}

@media screen and (max-width: 500px) {

#header h1 {
font-size:17px;
margin:0 65px 1px auto;
}
#wrap {
display:block;
height:70vh;
width:99.8%;
}
#serv_loc, #serv_ftp {
display:block;
margin:0 auto;
width:99.9%;
}
#conn_set #conn_data {
margin:1% auto;
}
#conn_set h2 {
margin:2% auto;
}
}