html,body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #dcdde1;
  /* overflow: hidden; */
  font-family: sans-serif;
}

body{
  overflow:hidden !important
}

.downiframe{
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  overflow: none;
  box-shadow: none;
  z-index: -1;
}

.box_body{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

  width: 90%;
  height: 90%;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,.3);

  overflow: none;
  background: #fff;
}
/* .box_body{
  overflow: none;
  background: #fff;
  position: absolute;
  min-height: 300px;
} */


/* title font */
.font1{
  font-weight: bold;
  font-size: 20px;
}

/* btn font */
.font2{
  font-family: sans-serif;
}

/* input font */
.font3{
  font-size: 17px;
}

/* copyright */
.font4{
  color: #aaa69d;
}

/* title2 */
.font5{
  color: #666;
  font-size: 14px;
  font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif;
}


.inside_box{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  min-width: 300px;
  min-height: 300px;
  height: 100%;
}

/* LOGO 标题 */
.logo{
  margin-top: 50px;              /*上方外边距 空50px的距离*/
  height: 40px;
  text-align: center;
  border-bottom: 3px solid #000;   /*字体下方的黑色粗线*/
}

/* 服务器容量显示 */
.dirsize{
  position: relative;
  margin: 10px auto;              /*上下外边距 空10px的距离*/
  width: 100%;
  height: 60px;
}

.dirsize .showsize{
  position: relative;
  width: 100%;
  height: 30px;
}

.dirsize .showsize .free,
.dirsize .showsize .max{
  line-height: 30px;
  color: #44bd32;
  font-weight: bold;
}

.dirsize .showsize .max{
  position: absolute;
  right: 0;
}

/* 显示大小容量进度条外边框 */
.dirsize .showsize .bar_box{
  width: 100%;
  height: 15px;
  border-radius: 50px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
  background: #dcdde1;
  overflow: hidden;
}

.dirsize .showsize .bar_box .bar{
  position: absolute;
  width: 0%;
  height: 14px;
  border-radius: 50px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  background: #44bd32;
  text-align: center;
  transition: width 1s;
  overflow: hidden;                          /*溢出隐藏*/
}

.dirsize .showsize .bar_box .bar span{
  display: block;
  color: #fff;
  font-weight: normal;
  line-height: 15px;
  font-size: 13px;
}

/* 下载输入控件 */

.download_box{
  position: relative;
  margin-top: 10px;              /*上方外边距 空10px的距离*/
  width: 100%;
  height: 40px;
  display: flex;
}

/* 输入框 */


.input{
  border-bottom: 2px solid #44bd32;
  caret-color: #4cd137;                            /*输入框 光标颜色*/
}

.input input[type="text"]{
  width: 100%;
  height: 35px;
  outline: none;
  border: 0;
  background-color: transparent;
}

.download_box .download_input{
  position: absolute;
  right: 80px;
  width: calc(100% - 80px);
}


.download_box .download_btn{
  position: absolute;
  right: 0;
}

.download_box .download_btn button{
  border: none;
  outline: none;
  color: #fff;
  background: #03a9f4;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
}

.download_box .download_btn button:active{
  box-shadow: 0 0 5px rgba(0,0,0,.8) inset;
}

.download_list{
  position: relative;
  top: 10px;
  width: 100%;
  height: calc(100% - 90px - 90px - 10px - 40px);
  /* background: red; */
  overflow-x: none;      /*溢出隐藏*/
  overflow-y:auto;

  /* IE */
  scrollbar-arrow-color: transparent;  /*上下箭头*/
  scrollbar-track-color: transparent;  /*底层背景色*/
  scrollbar-face-color: #aaa;   /*滚动条前景色*/
  scrollbar-Shadow-color: transparent; /*滚动条边线色*/
  /* 默认 */
  scrollbar-color: #aaa transparent;
  scrollbar-width: thin;
}


.download_list::-webkit-scrollbar { /*滚动条整体样式*/
    width: 6px !important; /*高宽分别对应横竖滚动条的尺寸*/
    height: 6px !important;
    background: transparent !important;
    cursor: pointer !important;

}

.download_list::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 5px !important;
    -webkit-box-shadow: inset 0 0 5px #aaa !important;
    background: #aaa !important;
    cursor: pointer !important;
}

.download_list::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px #aaa !important;
    border-radius: 0 !important;
    background: #aaa !important;
    cursor: pointer !important;
}

/* 滚动条结束 */


.download_list .download{
  position: relative;
  height: 60px;
  background: #26de81;
  margin-top: 15px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* 进度条 */
.download_list .download .downloadbar{
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #45aaf2;
  transition: width .5s;
}

/* 文件名 */
.download_list .download .name{
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  color: #000;
  font-weight: bold;
  cursor: pointer;
}

/* 文件大小显示 */
.download_list .download .size{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #000;
  font-weight: bold;
  cursor: pointer;
}

/* 三个按钮的外层div */
.download .control_btn{
  position: absolute;
  right: 0;
  top: 0;
  z-index: 15;
  height: 100%;
  display: flex;
}

/* 三个按钮的div */
.download .control_btn div{
  position: relative;
  margin: auto 15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  background-color: #d1d8e0;
}

/* 按钮div的鼠标悬浮样式 */
.download .control_btn div:hover{
  background-color: #f7b731;
}

.download .control_btn div svg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}


.copyright{
  position: absolute;
  bottom: 10px;
  height: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.install{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 400px;
  min-width: 400px;
  height: 300px;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
  border-radius: 10px;
  background: white;
  z-index: 10;
}

.install_rely,
.setpath,
.setredis,
.setpasswd,
.login{
  text-align: center;
}

.setpath p,
.setredis p,
.setpasswd p,
.login p
{
  font-weight: bold;
}

.install_rely ._curl,
.install_rely ._redis{
  background: #487eb0;
  height: 50px;
  border-top: #000 solid 1px;
  border-bottom: #000 solid 1px;
}

.install_rely ._curl span,
.install_rely ._redis span{
  line-height: 50px;
}

.install button{
  z-index: 20;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  outline: none;
  color: #fff;
  background: #03a9f4;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
}

/* 按钮被禁用时的样式 */
.install button[disabled]{
  background: #dcdde1;
}

.install button:active{
  box-shadow: 0 0 5px rgba(0,0,0,.8) inset;
}



.setpath .inputpath,
.setpasswd .inputpasswd,
.login .inputpasswd{
  width: 80%;
  height: 40px;
  margin: 20px auto;
  border-bottom: 2px solid #9c88ff;
}

.setredis .redis_ip,
.setredis .redis_port{
  text-align: right;
  width: 10px;
}

.setredis .inputipbox,          /* 配置页 设置Redis 地址输入框的外box */
.setredis .inputportbox         /* 配置页 设置Redis 端口输入框的外box */
{
  text-align: left;
  width: 150px;
  height: 30px;
  margin: 20px auto;
  border-bottom: 2px solid #9c88ff;
}


.setredis input                /* 配置页 设置Redis 输入框 */
{
  width: 98%;
  height: 15px;
  border: none;
  line-height: 15px;
  outline: none;
  font-size: 16px;
  background: transparent;
}

.setpath .inputpath input,
.setpasswd .inputpasswd input,
.login .inputpasswd input{
  width: 100%;
  height: 30px;
  border: none;
  line-height: 20px;
  outline: none;
  font-size: 18px;
  background: transparent;
}



/* 设置按钮 及页面 */
.setup{
  position: absolute;
  right: 40px;
  bottom: 50px;
  width: 50px;
  height: 50px;
  /* background: red; */
  /* transition: all .5s; */
}

/* .setup:hover{
  height: 130px;
} */

/* 齿轮按钮 和 退出登录按钮 */
.setup .setup_btn{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 45px;
  height: 45px;
  cursor: pointer;
  transition: all .5s;
}

/* 单个的齿轮图标的特有样式 */
.setup .setup_btn.setup_icon{
  z-index: 5;
  width: 100%;
  height: 50px;
}

.setup .setup_btn svg{
  width: 100%;
  height: 100%;
}

/* 让鼠标悬浮时 图标自旋转 */
.setup_btn.setup_icon:hover{
  transform: rotate(360deg);
}

/* 点击设置按钮的时候打开的窗口 */
.setup_form_box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 400px;
  min-width: 400px;
  height: 450px;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
  border-radius: 10px;
  background: white;
  padding: 0;
  z-index: 9;
}

.setup_form_box .setup_form{
  position: relative;
  width: 95%;
  height: 95%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}


.setup_form_box .switch_box      /* 指定下载文件是否要手动重命名,指定设置Cookie box */
{
  padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  height: 50px;
  /* background: #000; */
}

.setup_form_box .switch     /* 设置"设置Cookie" 选择器样式, 设置重命名选择器switch样式 */
{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.setup_form_box .switch_box .text{
  line-height: 50px;
  font-weight: bold;
}

/* 设置代理服务器复选框 及输入框 */
.setup_form_box .switch_box.setproxy:hover + .switch_box_child,
.setup_form .switch_box_child:hover
{
  opacity: 1;
  height:80px;
}

.setup_form .switch_box_child{
  opacity: 0;
  height:0px;
  display: flex;
  background: #00000010;
  margin-bottom: 5px;
  transition: .5s all;
}

.setup_form .switch_box_child .inputL,.setup_form .switch_box_child .inputR{
  width: 48%;
  margin-left:auto
}


/* 设置Cookie 的文本输入 */
.setup_form_box .setup_form .setcookie_text{
  position: relative;
  resize: vertical;
  width: 98%;
  min-height: 80px;
  outline: none;
  border: 1px solid #000;
}

.setup_form_box .setup_form .setcookie_text:focus{
  border: none;
  outline:1px solid #00a8ff;
}


/* 设置窗口最后一行按钮 */
.setup_form_box .setup_form .btn_box{
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 60px;
  text-align: center;
}

/* 设置窗口底部按钮 */
.setup_form_box .setup_form .btn_box button{
  background: none;
  border: 2px solid #000;
  font-family: "montserrat",sans-serif;
  text-transform: uppercase;
  padding: 10px 40px;
  min-width: 50px;
  margin: auto 10px;
  cursor: pointer;
  transition: color 0.4s linear;
  position: relative;
  top: 50%;
  outline: none;
  transform: translateY(-50%);
}

.setup_form_box .setup_form .btn_box button:hover{
  color: white;
}

.setup_form_box .setup_form .btn_box button::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: -1;
  transition: transform 0.5s;
  transform-origin: 0 0;
  transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
}

.setup_form_box .setup_form .btn_box .logout::before{
  transform: scaleY(0);
}

.setup_form_box .setup_form .btn_box .form_close::before{
  transform: scaleY(0);
}

.setup_form_box .setup_form .btn_box .logout:hover::before{
  transform: scaleX(1);
}

.setup_form_box .setup_form .btn_box .form_close:hover::before{
  transform: scaleY(1);
}

/* switch复选框按钮 */
.switch{
  cursor: pointer;
  position: relative;
  display: block;
  width: 60px;
  height: 32px;
}

.switch input[type="checkbox"]{
  display: none;
}

.switch::before{
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  display: block;
  width: 60px;
  height: 32px;
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 0 5px rgba(0,0,0,.9);
}

.switch input[type="checkbox"] + .line::before,
.switch input[type="checkbox"] + .line::after{
  position: absolute;
  top: 14px;
  left: 4px;
  content: "";
  width: 24px;
  height: 4px;
  background-color: #d3d4ec;
  border-radius: 5px;
  transition: .3s;
}

.switch input[type="checkbox"] + .line::before{
  transform: scaleX(0);
  left: 4px;
  transform-origin: left;
}

.switch input[type="checkbox"] + .line::after{
  transform: scaleX(1);
  left: 32px;
  transform-origin: right;
}

.switch input[type="checkbox"]:checked + .line::before{
  transform: scaleX(1);
}

.switch input[type="checkbox"]:checked + .line::after{
  transform: scaleX(0);
}

.switch input[type="checkbox"] + .line span::before{
  position: absolute;
  top: 4px;
  left: 4px;
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #d3d4ec;
  background-color: #fff;
  transition: .3s;

}

.switch input[type="checkbox"]:checked + .line span::before{
  box-shadow: inset 0 0 0 10px #275efe;
  left: 32px;
}



/* 图片页面内显示控件样式 */
.imageview{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: #00000099;
}

.imageview .fileinfo{
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  z-index: 1001;
}

.imageview .fileinfo:hover{
  background-color: rgba(0,0,0,.5);
}

.imageview img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 100%;
  max-height: 100%;
  /* width: 100%; */
  /* height: 100%; */
  object-fit: cover;        /*保持图片不变形*/
}

.imageview .closebtn{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1001;
  cursor: pointer;
}

/* 点击文件DIV后出现的信息窗口 */
.fileinfo_box{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}

.fileinfo_box .fileinfo_close{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 105;
  background: #00000053;
}

.fileinfo_box .fileinfo{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40%;
  z-index: 150;
  background: #fff;
}

.fileinfo_box .fileinfo .inner{
  position: absolute;
  width: 80%;
  height: 95%;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%,-50%);
  /* background: #000 */
}

.fileinfo_box .fileinfo .inner .fname,
.fileinfo_box .fileinfo .inner .fsize{
  width: 100%;
  height: 50px;
  overflow: hidden;
  text-align: center;
  /* background: #000 */
}

.fileinfo_box .fileinfo .inner .fname span{
  font-size: 13px;
  word-wrap: break-word;
  overflow: hidden;
}

.fileinfo_box .fileinfo .inner .fsize span{
  font-size: 15px;
  word-wrap: break-word;
  overflow: hidden;
}

/* FileInfo窗口底部三个按钮 */
.fileinfo_box .fileinfo .inner .btn button{
  background: none;
  border: 2px solid #000;
  font-family: "montserrat",sans-serif;
  text-transform: uppercase;
  padding: 10px 0;
  width: 100%;
  min-width: 50px;
  margin: 10px 0;
  cursor: pointer;
  transition: color 0.4s linear;
  position: relative;
  /* left: 50%; */
  outline: none;
  /* transform: translateX(-50%); */
}

.fileinfo_box .fileinfo .inner .btn{
  position: absolute;
  width: 100%;
  bottom: 0;
}

.fileinfo_box .fileinfo .inner .btn button:focus{
  color: white;
}

.fileinfo_box .fileinfo .inner .btn button::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: -1;
  transition: transform 0.5s;
  transform-origin: 0 0;
  transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
}

.fileinfo_box .fileinfo .inner #open::before{
  transform: scaleX(0);
}

.fileinfo_box .fileinfo .inner #download::before{
  transform: scaleX(0);
}

.fileinfo_box .fileinfo .inner #delete::before{
  transform: scaleX(0);
}

.fileinfo_box .fileinfo .inner #open:focus::before{
  transform: scaleX(1);
}

.fileinfo_box .fileinfo .inner #download:focus::before{
  transform: scaleX(1);
}

.fileinfo_box .fileinfo .inner #delete:focus::before{
  transform: scaleX(1);
}


/* Video Player */
.videoplayer{
  position: absolute;
  left: calc(50% - 360px);
  top: calc(50% - 175px);
  width: 720px;
  height: 350px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  padding: 40px 10px 10px 10px;
}

.videoplayer .fileinfo{
  position: absolute;
  top: 5px;
  width: calc(100% - 50px);
  height: 30px;
  line-height: 30px;
}

.videoplayer .closebtn{
  position: absolute;
  top: 5px;
  right: 10px;
  width: 30px;
  height: 30px;
  color: #000;
}

.videoplayer .closebtn:hover{
  background: #fbc531;
  border-radius: 2px;
  transition: background .2s;
}

.videoplayer .video-js{
  width: 100%;
  height: 100%;
  outline: none !important;
  -moz-outline: none !important;
}

/* LXDownload Rename_DIV */
.rename_div{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 120px;
  transform: translate(-50%,-50%);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  padding: 20px 10px 10px 10px;
  z-index: 100;
}

.rename_div .closebtn{
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}

.rename_div span{
  display: block;
  text-align: center;
}

/*
.rename_div .input[type="text"]{
  width: 100%;
} */

.rename_div .input input{
  width: 100%;
  height: 35px;
  outline: none;
  border: 0;
  background-color: transparent;
}

.rename_div .SuffixAndBtn_box{
  margin-top: 15px;
}

.rename_div .Suffix li{
  margin-right: 10px;
  padding: 2px 6px;            /* 上右下左 */
  float: left;
  list-style-type: none;
  background: #d0ece7;
  border-radius: 6px;
  color: #9c88ff;
  cursor: pointer;
}

.rename_div .btn_box{
  width: 100%;
  /* margin-top: 15px; */
}

.rename_div .btn_box button{
  float: right;
  border: none;
  outline: none;
  color: #fff;
  background: #03a9f4;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
}

.rename_div .btn_box button:active{
  box-shadow: 0 0 5px rgba(0,0,0,.8) inset;
}