@import url("reset.css");

input{outline: none;}

.fullScreenWrap{display: flex; align-items: center; justify-content: center; width: 100%; height: 100dvh; /*background: url('../img/loginbg.jpg') no-repeat center center / cover;*/ background-color: #f1f1f1; /* background: url('../img/workat_blue_logo.png') repeat repeat center center / 150px auto; */}
.fullScreenWrap-column{flex-direction: column;}

.fullScreenWrap .loginBlock{display: block;}

.fullScreenWrap .loginWrap{display: flex; flex-direction: column; gap: 15px; width: 400px; padding: 30px; background: rgb(255, 255, 255, 0.9); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); border-radius: 30px; position: relative;}

.fullScreenWrap .loginBlock .mainLogo{display: block; width: 130px; background: rgb(255, 255, 255, 0.9); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); padding: 30px; margin: 0 auto 30px auto; border-radius: 50%; overflow: hidden;}
.fullScreenWrap .loginBlock .mainLogo .logoWrap{display: block; width: 100%; padding-bottom: 100%; position: relative;}
.fullScreenWrap .loginBlock .mainLogo img{display: block; max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.fullScreenWrap .loginBlock .sysName{display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 15px 0; font-size: 18px;}
.fullScreenWrap .loginBlock .sysName img{display: block; height: 30px;}
.fullScreenWrap .loginBlock .sysName span{color: #343434; font-weight: bolder;}

.fullScreenWrap .loginBlock .inputLine{display: block; width: 100%; position: relative;}


.fullScreenWrap .loginBlock .inputLine .inputWrap{display: flex; align-items: center; width: 100%; position: relative; position: relative; border-radius: 10px;}

.fullScreenWrap .loginBlock .inputLine input[type="password"], .fullScreenWrap .loginBlock .inputLine input[type="text"]{display: block; width: 100%; font-size: 18px; color: #343434; padding: 10px 20px; border: 1px solid #a8a8a8; border-radius: 10px;}
.fullScreenWrap .loginBlock .inputLine label{position: absolute; top: 50%; left: 21px; transform: translate(0, -50%); color: #a8a8a8; transition: 0.2s ease all;}
.fullScreenWrap .loginBlock .inputLine input[type="password"]:not(:placeholder-shown) + label, .fullScreenWrap .loginBlock .inputLine input[type="text"]:not(:placeholder-shown) + label{font-size: 12px; top: 0; left: 16px; background: #fff; padding: 0 5px; transition: 0.2s ease all; color: #343434;}

.fullScreenWrap .loginBlock .inputLine .alert{display: block; width: 100%; font-size: 0.7rem; padding: 0 20px; color: #dd354b; margin: 5px 0 0 0;}
.fullScreenWrap .loginBlock .inputLine .alert.remind{color: #343434;}

.fullScreenWrap .loginBlock .inputLine button{display: flex; align-items: center; gap: 5px; padding: 5px 20px; font-size: 18px; background: #f1f1f1; color: #fff; border-radius: 10px; border: none; margin: 0 auto; cursor: pointer; transition: .5s;}
.fullScreenWrap .loginBlock .inputLine button i{display: block; width: 10px; height: 19px; position: relative; transition: .5s;}
.fullScreenWrap .loginBlock .inputLine button i::before{content: ''; display: block; width: 100%; height: 1px; background: #fff; position: absolute; bottom: 0; left: 0;}
.fullScreenWrap .loginBlock .inputLine button i::after{content: ''; display: block; width: 1px; height: 50%; background: #fff; position: absolute; bottom: 0.5px; right: 0; transform-origin: right bottom; transform: rotate(-45deg);}

.fullScreenWrap .loginBlock .inputLine button.act:hover i{width: 30px; transition: .5s;}
.fullScreenWrap .loginBlock .inputLine button.act{background: #005eff; transition: .5s;}

.fullScreenWrap .loginBlock .inputLine .inputWrap-captcha input{border-radius: 10px 0 0 10px; border-right: none;}
.fullScreenWrap .loginBlock .inputLine .inputWrap .captchaPic{display: block; height: 43px; flex: 0 0 auto; position: relative; border-radius: 0 0 0 0; overflow: hidden;}
.fullScreenWrap .loginBlock .inputLine .inputWrap .refreshCaptcha{display: block; width: 43px; height: 43px; background: url('../img/icons/refresh.png') no-repeat center center / 50% 50%; background-color: #f1f1f1; border-radius: 0 10px 10px 0;}
.fullScreenWrap .loginBlock .inputLine .inputWrap .captchaPic img{display: block; height: 100%;}

.fullScreenWrap .workatLogo{display: none; width: 200px; margin: 15px auto 0 auto;}
.fullScreenWrap .workatLogo img{display: block; width: 100%;}

.fullScreenWrap .sideMenu{display: flex; flex-direction: column; flex: 0 0 auto; width: 80px; height: 100%; background: #f1f1f1; /*box-shadow: 2.5px 0 5px rgba(0, 0, 0, 0.3);*/ z-index: 2;}

.fullScreenWrap .sideMenu .fnMenu{display: block; width: 100%; flex: 1 1 auto; overflow-y: auto;}
.fullScreenWrap .sideMenu .fnMenu li{display: block; width: 100%;}
.fullScreenWrap .sideMenu .fnMenu li a{display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 15px; text-decoration: none; position: relative;}
.fullScreenWrap .sideMenu .fnMenu li a .icon{display: block; width: 90%; padding-bottom: 90%; background: #f1f1f1; border-radius: 50%; overflow: hidden; margin: 0 auto 10px auto; position: relative; z-index: 2;}
.fullScreenWrap .sideMenu .fnMenu li a img{display: block; width: 60%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.fullScreenWrap .sideMenu .fnMenu li a span{display: block; width: 100%; text-align: center; color: #343434; font-size: 12px; transition: 0.5s ease all; z-index: 2;}

.fullScreenWrap .sideMenu .fnMenu li a::before{content: ''; display: block; width: 0%; height: 100%; position: absolute; top: 0; right: 0; background: #343434; transition: 0.2s ease all;}
.fullScreenWrap .sideMenu .fnMenu li a.act::before, .fullScreenWrap .sideMenu .fnMenu li a:hover::before{content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: auto; background: #343434; transition: 0.5s ease all; z-index: 1;}
.fullScreenWrap .sideMenu .fnMenu li a.act span, .fullScreenWrap .sideMenu .fnMenu li a:hover span{color: #fff; transition: 0.5s ease all;}

.fullScreenWrap .sideMenu .fnMenu li a.act::before{display: none;}
.fullScreenWrap .sideMenu .fnMenu li a.act{box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, 0.3), /* 上 */
    inset 0 -5px 5px -5px rgba(0, 0, 0, 0.3); /* 下 */ background-color: #fff;}
.fullScreenWrap .sideMenu .fnMenu li a.act span{color: #343434;}

.fullScreenWrap .sideMenu .squeezeBlock{display: block; width: 100%; flex: 0 0 auto;}
.fullScreenWrap .sideMenu .squeezeBlock li{display: block; width: 100%;}
.fullScreenWrap .sideMenu .squeezeBlock li a{display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 15px; text-decoration: none; position: relative; cursor: pointer;}
.fullScreenWrap .sideMenu .squeezeBlock li a .icon{display: block; width: 90%; padding-bottom: 90%; background: #f1f1f1; border-radius: 50%; overflow: hidden; margin: 0 auto 10px auto; position: relative; z-index: 2;}
.fullScreenWrap .sideMenu .squeezeBlock li a img{display: block; width: 60%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.fullScreenWrap .sideMenu .squeezeBlock li a span{display: block; width: 100%; text-align: center; color: #343434; font-size: 12px; transition: 0.5s ease all; z-index: 2;}

.fullScreenWrap .sideMenu .squeezeBlock li a::before{content: ''; display: block; width: 0%; height: 100%; position: absolute; top: 0; right: 0; background: #dd354b; transition: 0.2s ease all;}
.fullScreenWrap .sideMenu .squeezeBlock li a.act::before, .fullScreenWrap .sideMenu .squeezeBlock li a:hover::before{content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: auto; background: #dd354b; transition: 0.5s ease all; z-index: 1;}
.fullScreenWrap .sideMenu .squeezeBlock li a.act span, .fullScreenWrap .sideMenu .squeezeBlock li a:hover span{color: #fff; transition: 0.5s ease all;}

.fullScreenWrap .sideMenu .squeezeBlock .logout a .icon{display: block; width: 90%; padding-bottom: 90%; background: #f1f1f1; border-radius: 50%; overflow: hidden; margin: 0 auto 10px auto; position: relative; z-index: 2;}
.fullScreenWrap .sideMenu .squeezeBlock .logout a::before{content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: auto; background: #dd354b; transition: 0.5s ease all; z-index: 1;}
.fullScreenWrap .sideMenu .squeezeBlock .logout a span{color: #fff; transition: 0.5s ease all;}

.fullScreenWrap .sideMenu .squeezeBlock .logoBtn{box-shadow: 0 2.5px 5px rgba(0, 0, 0, 0.3); background: #fff;}
.fullScreenWrap .sideMenu .squeezeBlock .logoBtn a::before{display: none!important;}
.fullScreenWrap .sideMenu .squeezeBlock .logoBtn a:hover{background: transparent;}
.fullScreenWrap .sideMenu .squeezeBlock .logoBtn a .icon{width: 100%; border-radius: 0; background: #fff; padding-bottom: 100%; margin: 0; position: relative;}
.fullScreenWrap .sideMenu .squeezeBlock .logoBtn a img{display: block; width: auto; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.fullScreenWrap .contentBlock{display: flex; flex-direction: column; gap: 15px; flex: 1 1 auto; width: 100%; height: 100%; background: #ffffff; padding: 15px; z-index: 1;}
.fullScreenWrap .contentBlock .titleBar{display: flex; align-items: center; justify-content: space-between; padding: 15px; border-radius: 5px; background: #f1f1f1; border: 0px solid #eeeeee; margin: 0 0 0 0;}
.fullScreenWrap .contentBlock .titleBar .titleText{display: flex; align-items: flex-end; gap: 5px; width: fit-content;}
.fullScreenWrap .contentBlock .titleBar .titleText h1{font-size: 20px; font-weight: bold; color: #000000; margin: 0 0 0 0;}
.fullScreenWrap .contentBlock .titleBar .titleText h2{font-size: 18px; color: #a8a8a8;}

.fullScreenWrap .contentBlock .titleBar .buttonGroup .ckboxGroup{display: flex; align-items: center; gap: 10px;}
.fullScreenWrap .contentBlock .titleBar .buttonGroup .ckboxGroup label{display: block; width: 50px; height: 30px; border-radius: 50px; background: #a8a8a8; position: relative; cursor: pointer; transition: .3s;}
.fullScreenWrap .contentBlock .titleBar .buttonGroup .ckboxGroup label::before{content: ''; display: block; width: 20px; height: 20px; background: #fff; box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); position: absolute; top: 5px; left: 5px; border-radius: 50%; transition: .3s;}
.fullScreenWrap .contentBlock .titleBar .buttonGroup .ckboxGroup input[type="checkbox"]{display: none;}
.fullScreenWrap .contentBlock .titleBar .buttonGroup .ckboxGroup input[type="checkbox"]:checked + label{background: #2ad37e; transition: .3s;}
.fullScreenWrap .contentBlock .titleBar .buttonGroup .ckboxGroup input[type="checkbox"]:checked + label::before{left: auto; left: 50%; transition: .3s;}

.fullScreenWrap .contentBlock .titleBar .buttonGroup .memberInfo{display: block; width: fit-content; padding: 5px 10px; border-radius: 30px; background: #fff;}

.fullScreenWrap .contentBlock .inputBlock{display: flex; flex-direction: column; gap: 15px; flex: 1 1 auto; overflow-y: auto; width: 100%; padding: 5px 0;}

.fullScreenWrap .contentBlock .inputBlock .inputLine{display: flex; align-items: center; width: 100%; gap: 15px;}
.fullScreenWrap .contentBlock .inputBlock .inputLine .col{display: block; flex: 1 1 auto;}
.fullScreenWrap .contentBlock .inputBlock .inputLine .inputWrap{display: flex; align-items: center; width: 100%; position: relative; position: relative; border-radius: 10px;}
.fullScreenWrap .contentBlock .inputBlock .inputLine .inputWrap input[type="password"],
.fullScreenWrap .contentBlock .inputBlock .inputLine .inputWrap input[type="text"]{display: block; width: 100%; font-size: 18px; color: #343434; padding: 10px 20px; border: 1px solid #a8a8a8; border-radius: 10px;}
.fullScreenWrap .contentBlock .inputBlock .inputLine .inputWrap label{position: absolute; top: 50%; left: 21px; transform: translate(0, -50%); color: #a8a8a8; transition: 0.2s ease all;}
.fullScreenWrap .contentBlock .inputBlock .inputLine .inputWrap input[type="password"]:not(:placeholder-shown) + label, .fullScreenWrap .contentBlock .inputBlock .inputLine input[type="text"]:not(:placeholder-shown) + label{font-size: 12px; top: 0; left: 16px; background: #fff; padding: 0 5px; transition: 0.2s ease all; color: #343434;}

.fullScreenWrap .contentBlock .inputBlock .inputLine .col .alert{display: block; font-size: 12px; color: #dd354b; padding: 5px;}
.fullScreenWrap .contentBlock .inputBlock .inputLine .col .alert ul{display: flex; flex-direction: column; gap: 5px;}

.fullScreenWrap .contentBlock .dashboardBlock{display: flex; flex: 1 1 auto; justify-content: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 15px; overflow-y: auto;}
.fullScreenWrap .contentBlock .dashboardBlock .dashboard{display: flex; max-width: calc(50% - 15px); flex-direction: column; justify-content: center; align-items: flex-start; width: fit-content; flex: 0 1 auto; background-color: #f1f1f1; padding: 30px; border-radius: 30px;}
.fullScreenWrap .contentBlock .dashboardBlock .dashboard h6{display: block; width: fit-content; background: #3194e6; color: #fff; padding: 10px 30px; border-radius: 30px; margin: 0 0 15px 0;}
.fullScreenWrap .contentBlock .dashboardBlock .dashboard .detail{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; flex-grow: 0; width: fit-content; gap: 15px;}
.fullScreenWrap .contentBlock .dashboardBlock .dashboard .detail .group{display: block;}
.fullScreenWrap .contentBlock .dashboardBlock .dashboard .detail .group strong{display: block; background: #fff; border-radius: 15px; padding: 10px 30px; border-radius: 30px; margin: 0 0 10px 0;}
.fullScreenWrap .contentBlock .dashboardBlock .dashboard .detail .group span{display: block; width: fit-content; flex: 0 0 auto; margin: 0 auto;}
.fullScreenWrap .contentBlock .dashboardBlock .dashboard--full{width: 100%; max-width: none;}

.fullScreenWrap .contentBlock .dashboardBlock .DT-bottom{position: sticky; bottom: 0; background-color: #fff;}
.fullScreenWrap .contentBlock .dashboardBlock .listAndEditor{height: 100%;}

.inputLine .ckboxGroup{display: flex; align-items: center; gap: 10px;}
.inputLine .ckboxGroup label{display: block; width: 50px; height: 30px; border-radius: 50px; background: #a8a8a8; position: relative!important; transform: translate(0, 0)!important; left: 0!important; top: 0!important; cursor: pointer; transition: .3s;}
.inputLine .ckboxGroup label::before{content: ''; display: block; width: 20px; height: 20px; background: #fff; box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); position: absolute; top: 5px; left: 5px; border-radius: 50%; transition: .3s;}
.inputLine .ckboxGroup input[type="checkbox"]{display: none;}
.inputLine .ckboxGroup input[type="checkbox"]:checked + label{background: #2ad37e; transition: .3s;}
.inputLine .ckboxGroup input[type="checkbox"]:checked + label::before{left: auto; left: 50%; transition: .3s;}

.fullScreenWrap .contentBlock .inputBlock .inputLine .addBtnGroup{display: flex; align-items: center; gap: 5px; background: #f1f1f1; border-radius: 5px; padding: 5px 10px; margin: 0 auto;}
.fullScreenWrap .contentBlock .inputBlock .inputLine .addBtnGroup span{font-size: 12px; color: #343434;}
.fullScreenWrap .contentBlock .inputBlock .inputLine .addBtnGroup input{padding: 5px 10px; border: 1px solid #a8a8a8; border-radius: 5px; font-size: 12px;}
.fullScreenWrap .contentBlock .inputBlock .inputLine .addBtnGroup button{border: none; background: #a8a8a8; color: #fff; padding: 5px 10px; border-radius: 5px; font-size: 12px; cursor: pointer;}

.fnBlock{display: flex; align-items: center; justify-content: flex-end; gap: 15px; width: 100%; padding: 15px 0 0 0; position: sticky; bottom: 0; z-index: 3; background: #fff;}
.fnBlock button{display: flex; align-items: center; gap: 5px; padding: 5px 20px; font-size: 18px; background: #f1f1f1; color: #fff; border-radius: 10px; border: none; cursor: pointer; transition: .5s;}
.fnBlock button i{display: block; width: 10px; height: 19px; position: relative; transition: .5s;}
.fnBlock button i::before{content: ''; display: block; width: 100%; height: 1px; background: #fff; position: absolute; bottom: 0; left: 0;}
.fnBlock button i::after{content: ''; display: block; width: 1px; height: 50%; background: #fff; position: absolute; bottom: 0.5px; right: 0; transform-origin: right bottom; transform: rotate(-45deg);}

.fnBlock button:hover i{width: 30px; transition: .5s;}
.fnBlock button{background: #005EFF; transition: .5s;}

.listAndEditor{display: flex; flex: 1 1 auto; overflow: hidden; padding: 0 0;}
.listAndEditor .tableBlock{display: flex; flex-direction: column; width: 100%; flex: 0 0 auto; font-size: 12px; transition: .5s;}
.listAndEditor .tableBlock.min{width: 500px!important; flex: 0 0 auto; transition: .5s; border-right: 1px solid #f1f1f1; padding: 0 10px 0 0;}
.listAndEditor .tableBlock div.dt-container{display: flex; flex-direction: column; width: 100%; flex: 1 1 auto; overflow-y: auto;}

.listAndEditor .tableBlock table.dataTable > thead > tr > td{}

.listAndEditor .tableBlock table.dataTable > tbody > tr > td{padding: 15px 10px; line-height: 16px;}
.listAndEditor .tableBlock table.dataTable > tbody > tr:hover > td{background: #f1f1f1;}
.listAndEditor .tableBlock table.dataTable > tbody > tr > td{vertical-align: middle;}

.listAndEditor .tableBlock table.dataTable > tbody > tr > td a{color: #005eff; text-decoration: underline; cursor: pointer;}

.listAndEditor .tableBlock table.dataTable > tbody > tr > td .tag{padding: 5px 10px; border-radius: 3px; color: #fff;}

.listAndEditor .tableBlock table.dataTable > tbody > tr > td .download{display: block; width: 100%; padding-bottom: 100%; margin: 0 auto;}
.listAndEditor .tableBlock table.dataTable > tbody > tr > td .download.pdf{background: url('../img/icons/pdf.png') no-repeat center center / contain;}

.listAndEditor .tableBlock table.dataTable > tbody > tr > td .statusTag{padding: 3px 5px; border-radius: 5px; color: #fff; border: none; font-size: 12px; font-weight: 400; cursor: pointer;}

.listAndEditor .tableBlock .filterBlock{display: flex; flex-direction: column; gap: 10px; margin: 0 0 15px 0;}
.listAndEditor .tableBlock .filterBlock.filterBlock-row{flex-direction: row; align-items: center;}
.listAndEditor .tableBlock .filterBlock.filterBlock-row .searchBlock{width: 100%; flex: 1 1 auto;}
.listAndEditor .tableBlock .filterBlock.filterBlock-row .dtsBtnGroup{width: fit-content; flex: 0 0 auto;}
.listAndEditor .tableBlock .filterBlock .searchBlock{display: flex; align-items: center; width: 100%;}
.listAndEditor .tableBlock .filterBlock .searchBlock input{display: block; width: 100%; font-size: 14px; border: 1px solid #cccccc; padding: 5px 10px; border-radius: 5px 0 0 5px; border-right: none;}

.listAndEditor .tableBlock .filterBlock .searchBlock .searchBtn{display: block; width: 28px; height: 28px; outline: none; border: none; background: url('../img/icons/search.png') no-repeat center center / 70% 70%; background-color: #fff; border: #005EFF solid 1px; border-radius: 0 5px 5px 0;}

.listAndEditor .tableBlock .filterBlock .dtsBtnGroup{display: flex; width: 100%; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px;}
.listAndEditor .tableBlock .filterBlock .dtsBtnGroup button{display: flex; align-items: center; gap: 5px; width: fit-content; padding: 5px 10px; border: none; border: 1px solid #005EFF; background: #005EFF; color: #fff; border-radius: 5px; cursor: pointer;} 
.listAndEditor .tableBlock .filterBlock .dtsBtnGroup button.addBtn::before{content: ''; width: 25px; height: 25px; background: url('../img/icons/add.png') no-repeat center center / 100% 100%; background-color: #005EFF;}

.listAndEditor .tableBlock .filterBlock .dtsBtnGroup button.deleteBtn{display: none; background-color: #ffffff; color: #343434; border: 1px solid #343434; box-sizing: border-box;}
.listAndEditor .tableBlock .filterBlock .dtsBtnGroup button.deleteBtn::before{content: ''; width: 25px; height: 25px; background: url('../img/icons/trash.png') no-repeat center center / 100% 100%;}

.listAndEditor .tableBlock .filterBlock .dtsBtnGroup button.closeEditor{display: none; align-items: center; background-color: #ffffff; color: #343434; border: 1px solid #343434; box-sizing: border-box;}
.listAndEditor .tableBlock .filterBlock .dtsBtnGroup button.closeEditor::before{display: block; content: ''; width: 25px; height: 25px; background: url('../img/icons/swipe-right.png') no-repeat center center / 100% 100%;}

.listAndEditor .tableBlock .filterBlock .dtsBtnGroup input{display: block; width: 100%; font-size: 14px; border: 1px solid #cccccc; padding: 5px 10px; border-radius: 5px;}

.listAndEditor .tableBlock .filterBlock .dtsBtnGroup .group{display: flex; align-items: center; gap: 5px;}
.listAndEditor .tableBlock .filterBlock .dtsBtnGroup .group span{white-space: nowrap;}

.listAndEditor .tableBlock .top .dtsBtnGroup{display: flex; width: 100%; align-items: center; flex-wrap: wrap;}

.listAndEditor .tableBlock .mainBlock{display: block; width: 100%; flex: 1 1 auto;}

.listAndEditor .tableBlock input[type="checkbox"]{display: none;}
.listAndEditor .tableBlock input[type="checkbox"]+label{display: block; width: 20px; height: 20px; background: #f1f1f1; position: relative; border: 1px solid #cccccc; cursor: pointer;}
.listAndEditor .tableBlock input[type="checkbox"]+label:hover{background: #dadada;}
.listAndEditor .tableBlock input[type="checkbox"]:checked + label{background: url('../img/icons/check-mark.png') no-repeat center center / 80% 80%; background-color: #eeeeee;}

.listAndEditor .editor{display: flex; flex-direction: column; width: calc(100% - 500px); background: none; flex: 0 0 auto; padding: 0; overflow-y: auto; position: relative; background: #fff;}
.listAndEditor .editor{display: flex; flex-direction: column; width: calc(100% - 500px); background: none; flex: 0 0 auto; padding: 0; overflow-y: auto; position: relative; background: #fff;}

.listAndEditor .editor .iframeLoading{display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;}
.listAndEditor .editor .iframeLoading .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side,#343434 90%,#0000);
  background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: l3 1s infinite linear;
}
@keyframes l3 {
    20%{background-position:0%   0%, 50%  50%,100%  50%}
    40%{background-position:0% 100%, 50%   0%,100%  50%}
    60%{background-position:0%  50%, 50% 100%,100%   0%}
    80%{background-position:0%  50%, 50%  50%,100% 100%}
}

.listAndEditor .editor iframe{display: block; flex: 1 1 auto;}

.listAndEditor.listAndEditor-half .tableBlock.min{width: calc(50% - 0px)!important;}
.listAndEditor.listAndEditor-half .editor{width: 0!important; flex: 1 1 auto;}

/*.listAndEditor .editor .closeEditorBtn{display: block; width: fit-content; background: #005EFF; color: #fff; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); z-index: 10;}*/
 
.editorWrap{display: flex; flex-direction: column; gap: 15px; padding: 0 15px;}
.editorWrap .fixedBar{display: flex; flex-direction: column; gap: 15px; position: sticky; top: 0; z-index: 3; background: #fff; padding: 5px 0 30px 0;}

.editorWrap.fullScreenEditor{display: flex; flex-direction: column; height: 100dvh;}
.editorWrap.fullScreenEditor .editor{display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; position: relative; gap: 15px;}
.editorWrap.fullScreenEditor .editor .editorGroup{display: flex; flex-direction: column; flex: 0 0 auto; width: 100%; position: relative; gap: 15px; margin: 0 0 30px 0;}
.editorWrap.fullScreenEditor .editor .editorGroup:last-child{margin: 0;}
.editorWrap.fullScreenEditor .editor .editorGroup .groupTitle{display: flex; align-items: flex-end; gap: 15px;}
.editorWrap.fullScreenEditor .editor .editorGroup .groupTitle span{white-space: nowrap; color: #343434;}
.editorWrap.fullScreenEditor .editor .editorGroup .groupTitle::after{content: ''; display: none; width: 100%; height: 1px; border-bottom: 1px solid #cccccc; flex: 1 1 auto;}
.editorWrap.fullScreenEditor .editor iframe{flex: 1 1 auto; width: 100%;}

.editorWrap.fullScreenEditor .editor .tabWindow{display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; height: 100%; background: #ffffff; position: absolute; top: 0; left: 0; padding: 0 0; overflow-y: auto;}

.editorWrap.fullScreenEditor.style-2{background: #f1f1f1; overflow-y: auto; padding: 0;}
.editorWrap.fullScreenEditor.style-2 .editor{padding: 0 10px; gap: 15px;}
.editorWrap.fullScreenEditor.style-2 .editor .editorGroup{background: #fff; padding: 15px; border-radius: 5px; margin: 0;}
.editorWrap.fullScreenEditor.style-2 .editor .editorGroup .splitLine{display: block; width: 100%; height: 1px; background: #cccccc;}
.editorWrap.fullScreenEditor.style-2 .fnBlock{background: #f1f1f1; padding: 10px;}

.editorWrap .tabs{display: block; width: 100%; border-bottom: #3194e6 1px solid; margin: 0 0 0 0;}
.editorWrap .tabs ul{display: flex; align-items: flex-end;}
.editorWrap .tabs ul li{}
.editorWrap .tabs ul li a{display: block; font-size: 16px; text-decoration: none; padding: 10px 15px; color: #343434; cursor: pointer;}
.editorWrap .tabs ul li a.act{background: #3194e6; color: #fff;}

.editorWrap .iframeLoading{display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;}
.editorWrap .iframeLoading .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side,#343434 90%,#0000);
  background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: l3 1s infinite linear;
}

.inputLine{display: flex; align-items: flex-start; gap: 15px; z-index: 1; padding-top: 6px;}
.inputLine.inputLine-col{display: flex; flex-direction: column; align-items: flex-start;}

.inputLine .inputWrap{display: flex; align-items: center; width: 100%; position: relative; border-radius: 10px;}
.inputLine .inputWrap .inner-wrap{display: flex; align-items: center; width: 100%; position: relative;}
.inputLine .inputWrap.inputWrap--fit{width: auto; flex: 0 0 auto;}
.inputLine .inputWrap.inputWrap-gap{gap: 15px;}
.inputLine .inputWrap.inputWrap-gap-nogrow{gap: 10px; flex: 0 0 auto; width: fit-content;}
.inputLine .inputWrap.inputWrap-alert{flex-direction: column; align-items: flex-start;}
.inputLine .inputWrap.inputWrap-alert input, .inputLine .inputWrap.inputWrap-alert select{border-color: #ED2121!important;}
.inputLine .inputWrap.inputWrap-alert label{color: #ED2121!important;}

.inputLine .inputWrap .alert{display: block; width: 100%; padding: 5px 15px;}
.inputLine .inputWrap .alert ul{display: flex; flex-direction: column; gap: 5px; color: #ED2121;}

.inputLine .inputWrap button{display: flex; align-items: center; gap: 5px; width: fit-content; padding: 5px 10px; border: none; background: #3194e6; color: #fff; border-radius: 5px; cursor: pointer;} 
.inputLine .inputWrap button.addBtn::before{content: ''; width: 25px; height: 25px; background: url('../img/icons/add.png') no-repeat center center / 100% 100%; background-color: #2ad37e;}
.inputLine .inputWrap button.clear{background: #dd354b;}
.inputLine .inputWrap button.cancel{background: #cccccc;}
.inputLine .inputWrap #fileupload{display: none;}

.inputLine .inputWrap .fnName{min-width: 4rem; margin: 0 10px 0 0;}

.inputLine .inputWrap input[type="password"],
.inputLine .inputWrap textarea,
.inputLine .inputWrap select, .inputLine .inputWrap input[type="text"], .inputLine .inputWrap input[type="datetime-local"]{display: block; width: 100%; font-size: 18px; color: #343434; padding: 10px 20px; border: 1px solid #a8a8a8; border-radius: 10px;}
.inputLine .inputWrap select{padding: 9px 20px; outline: none;}
.inputLine .inputWrap textarea{resize: vertical; line-height: 25px; outline: none; min-height: calc(25px * 5 + 20px);}
.inputLine .inputWrap label{position: absolute; top: 50%; left: 21px; transform: translate(0, -50%); color: #a8a8a8; transition: 0.2s ease all;}
.inputLine .inputWrap textarea + label{top: 15px; transform: translate(0, 0);}
.inputLine .inputWrap input[type="password"]:not(:placeholder-shown) + label,
.inputLine .inputWrap textarea:not(:placeholder-shown) + label,
.inputLine .inputWrap select + label, 
.inputLine input[type="text"]:not(:placeholder-shown) + label,
.inputLine .shownInput + label
{font-size: 12px; top: 0; left: 16px; background: #fff; padding: 0 5px; transition: 0.2s ease all; color: #343434;}
.inputLine .inputWrap textarea:not(:placeholder-shown) + label{transform: translate(0, -50%);}

.inputLine .inputWrap input[type="file"] + label{color: red; position: static; transform: translate(0, 0);}

.inputLine .inputWrap select:disabled,
/*.inputLine .inputWrap select:read-only,*/
.inputLine .inputWrap input:disabled,
.inputLine .inputWrap input:read-only{background-color: #fff; color: #a8a8a8; border: 1px solid #a8a8a8!important; opacity: 0.7;}

.inputLine .permissionTable{width: 100%; max-width: 500px; border-collapse: collapse;}
.inputLine .permissionTable tr td{border: 1px solid #cccccc; padding: 5px 10px;}
.inputLine .permissionTable thead tr td{border: 1px solid #3194e6;}
.inputLine .permissionTable thead tr td{background: #3194e6; color: #fff;}
.inputLine .permissionTable tbody tr td:nth-child(1){background: #f1f1f1;}
.inputLine .permissionTable tbody tr td input[type="checkbox"]{display:block; margin: 0 auto;}

.lightBox .inputLine .inputWrap .fileName{}
.lightBox .inputLine .inputWrap input[type="file"]{display: none;}
.lightBox .inputLine .inputWrap input[type="file"]+label{color: #343434; display: flex; align-items: center; gap: 5px; width: fit-content; padding: 5px 10px; border: none; background: #3194e6; color: #fff; border-radius: 5px; cursor: pointer; margin: 0 auto;}

.lightBox .inputLine .inputWrap input[type="file"]+label.attachButton{background: #eeeeee; color: #343434; padding: 10px; margin: 0 15px 0 0;}
.lightBox .inputLine .inputWrap input[type="file"]+label.attachButton::before{content: ''; display: block; width: 20px; height: 20px; background: url('../img/icons/attach.png') no-repeat center center / 100% 100%;}

.inputLine .inputWrap .bigPicViewer{display: block; width: 100%;}
.inputLine .inputWrap .bigPicViewer .bigPicViewerBody{display: block; width: 100%; padding-bottom: 56.25%; background: #f1f1f1; position: relative;}
.inputLine .inputWrap .bigPicViewer .bigPicViewerBody img{display: block; max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.inputLine .inputWrap table{width: 100%; border-collapse: collapse;}
/* .inputLine .inputWrap table thead{position: sticky; top: 146px;} */
.inputLine .inputWrap table tr td{border: 1px solid rgb(128, 128, 128); padding: 10px 10px; vertical-align: middle;}
.inputLine .inputWrap table thead{border-left: 1px solid rgb(128, 128, 128); border-right: 1px solid rgb(128, 128, 128); position: sticky; top: 121px;}
.inputLine .inputWrap table thead tr td{background: rgb(128, 128, 128); color: #fff; border: none;}
.inputLine .inputWrap table tr td input[type="text"]{font-size: 14px; padding: 5px; border-radius: 3px;}
.inputLine .inputWrap table tbody tr:nth-child(2n) td{background: #f1f1f1;}
.inputLine .inputWrap table tr td .delete{display: none; width: 20px; height: 20px; background: url('../img/icons/clear.png') no-repeat center center / 100% 100%; padding: 0; margin: 0 auto;}
.inputLine .inputWrap table tr:hover td .delete{display: inline-block;}

.inputLine .picsBlock{display: flex; flex-wrap: wrap; gap: 10px; width: 100%; background: #f1f1f1; border-radius: 5px; padding: 10px;}
.inputLine .picsBlock .pic{display: block; width: calc(100% / 10 - 9px); aspect-ratio: 1 / 1; background: #ffffff; position: relative; cursor: pointer;}
.inputLine .picsBlock .pic input[type="file"]{display: none;}
.inputLine .picsBlock .pic input[type="file"] + label{display: block; font-size: 0; width: 100%; height: 100%; background: #f1f1f1; position: absolute; top: 0; left: 0; border-radius: 0; cursor: pointer; background: url('../img/icons/upload.png') no-repeat center center / 40% 40%;}
.inputLine .picsBlock .pic img {width: 100%; height: 100%; object-fit: cover; display: block;}

.newestHistory{display: flex; align-items: center; justify-content: space-between; width: 100%; background: #f1f1f1; border-radius: 0; padding: 15px 0; position: sticky; top: 0; left: 0; z-index: 1;}
.newestHistory .textGroup{display: flex; align-items: center; white-space: nowrap; gap: 15px;}
.newestHistory-fit{gap: 15px; line-height: 25px;}
.newestHistory button{display: flex; align-items: center; gap: 5px; width: fit-content; padding: 5px 10px; border: none; background: #3194e6; color: #fff; border-radius: 5px; cursor: pointer;} 
.newestHistory select{display: block; width: auto; font-size: 18px; color: #343434; padding: 10px 20px; margin: 0 0 0 0; border: 1px solid #a8a8a8; border-radius: 10px; outline: none; cursor: pointer;}

.inputLine .normalBtn{display: flex; align-items: center; gap: 5px; width: fit-content; padding: 5px 10px; border: none; background: #3194e6; color: #fff; border-radius: 5px; cursor: pointer;} 

/* 圖片選擇器 */
.picSelector{display: flex; align-items: center; width: 100%; gap: 10px; flex-wrap: wrap;}
.picSelector .picOption{display: block; flex: 0 0 auto; width: calc(100% / 10 - 9px); min-width: 100px; border: 1px dashed #cccccc; border-radius: 5px; position: relative;}
.picSelector .picOption .picViewer{display: block; width: 100%; padding-bottom: 100%; position: relative;}
.picSelector .picOption .picViewer img{display: block; max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;}
.picSelector .picOption .btnBlock{display: none; width: 100%; height: 24px; background: rgba(52, 52, 52, 0.9); position: absolute; bottom: 0; left: 0; z-index: 3;}
.picSelector .picOption:hover .btnBlock{display: flex;}
.picSelector .picOption .btnBlock button{display: block; width: 100%; flex: 1 1 auto; min-width: 24px; border-radius: 0;}
.picSelector .picOption .btnBlock button.rmBtn{background: url('../img/icons/trash_w.png') no-repeat center center / 18px 18px;}

.picSelector .picOption .picViewer .uploadRemind{display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; cursor: pointer;}
.picSelector .picOption .picViewer .uploadRemind .uploadIcon{display: block; width: 50px; height: 50px; background: url('../img/icons/image-upload.png') no-repeat center center / 100% 100%;}
.picSelector .picOption .picViewer .uploadRemind span{font-size: 12px; color: #3194e6;}
.picSelector .picOption input{display: none;}
/* 圖片選擇器 */

.lightBox{display: none; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 10;}
.lightBox .lightBoxWrap{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.lightBox .lightBoxWrap .window{display: block; width: 300px; min-height: 100px; background: #fff; padding: 30px;}
.lightBox .lightBoxWrap .window .btnGroup{display: flex; width: 100%; align-items: center; justify-content: space-evenly;}
.lightBox .lightBoxWrap .window .btnGroup button{display: flex; align-items: center; gap: 5px; width: fit-content; padding: 5px 10px; border: none; background: #cccccc; color: #fff; border-radius: 5px; cursor: pointer;} 
.lightBox .lightBoxWrap .window .btnGroup button.confirm{background: #2ad37e;}
.lightBox .lightBoxWrap .window h6{display: block; width: 100%; margin: 0 0 15px 0;}
.lightBox .lightBoxWrap .window p{display: block; width: 100%; margin: 0 0 15px 0; padding: 5px 10px; background: #f1f1f1; overflow-x: auto;}

.lightBox .lightBoxWrap .window-bigger{min-width: 800px;}

.lightBox .lightBoxWrap .recordEditor{display: flex; flex-direction: column; width: calc(100% - 80px); max-width: 800px; height: calc(100% - 80px); background: #fff; border-radius: 10px; padding: 30px; position: relative;}
.lightBox .lightBoxWrap .recordEditor .closeBtn{display: block; width: 30px; height: 30px; background: #fff; border-radius: 50%; position: absolute; top: 5px; right: 5px; border: 2px solid #005EFF; cursor: pointer;}
.lightBox .lightBoxWrap .recordEditor .closeBtn::before, .lightBox .lightBoxWrap .recordEditor .closeBtn::after{content: ''; display: block; width: 70%; height: 2px; background: #005EFF; position: absolute; top: 50%; left: 50%; transition: .5s;}
.lightBox .lightBoxWrap .recordEditor .closeBtn::before{transform: translate(-50%, -50%) rotate(45deg); transition: .5s;}
.lightBox .lightBoxWrap .recordEditor .closeBtn::after{transform: translate(-50%, -50%) rotate(-45deg); transition: .5s;}

.lightBox .lightBoxWrap .recordEditor .closeBtn:hover{background: #005EFF; transition: .5s;}
.lightBox .lightBoxWrap .recordEditor .closeBtn:hover::before{transform: translate(-50%, -50%) rotate(-45deg); transition: .5s; background-color: #fff;}
.lightBox .lightBoxWrap .recordEditor .closeBtn:hover::after{transform: translate(-50%, -50%) rotate(45deg); transition: .5s; background-color: #fff;}


.lightBox .lightBoxWrap .recordEditor .listBlock{display: block; width: 100%; flex: 1 1 auto; overflow-y: auto; padding: 0 0 15px 0;}

.lightBox .lightBoxWrap .recordEditor .listBlock ul{display: flex; flex-direction: column; gap: 15px; width: 100%; padding: 0 15px;}
.lightBox .lightBoxWrap .recordEditor .listBlock ul li{display: flex; flex-direction: column; align-items: flex-start; width: 100%;}
.lightBox .lightBoxWrap .recordEditor .listBlock ul li.self{align-items: flex-end;}
.lightBox .lightBoxWrap .recordEditor .listBlock ul li .owner{display: flex; align-items: flex-end; font-size: 16px; color: #343434; gap: 5px; margin: 0 0 5px 0;}
.lightBox .lightBoxWrap .recordEditor .listBlock ul li .owner .time{display: flex; font-size: 12px; color: #343434;}
.lightBox .lightBoxWrap .recordEditor .listBlock ul li .text{display: block; width: fit-content; max-width: 80%; letter-spacing: 1px; background: #E7EAFF; border: 1px solid #005EFF; color: #343434; padding: 10px 20px; border-radius: 30px; line-height: 25px;}

.lightBox .lightBoxWrap .recordEditor .listBlock ul li.self .text{background: #005EFF; border: 1px solid #005EFF; color: #fff;}

.lightBox .lightBoxWrap .recordEditor .listBlock ul li.noMes{align-items: center;}
.lightBox .lightBoxWrap .recordEditor .listBlock ul li.noMes .text{background: none; border: 0px solid #005EFF; color: #343434;}

.lightBox .lightBoxWrap .recordEditor .textAreaBlock{display: block; width: 100%; position: relative;}
.lightBox .lightBoxWrap .recordEditor .textAreaBlock textarea{display: block; width: 100%; height: 120px; outline: none; padding: 10px; line-height: 25px; border-radius: 10px; resize: none; border: 1px solid #ccc; background: #fff;}
.lightBox .lightBoxWrap .recordEditor .textAreaBlock .chatSend{display: block; padding: 10px 12px; position: absolute; bottom: 5px; right: 5px; background-color: #E7EAFF; color: #005EFF; font-size: 14px; border-radius: 10px; border: none; cursor: pointer;}

.loader {
  width: 45px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(#343434 0 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size: 20% 100%;
  animation: l1 1s infinite linear;
  margin: 0 auto;
}
@keyframes l1 {
  0%  {background-size: 20% 100%,20% 100%,20% 100%}
  33% {background-size: 20% 10% ,20% 100%,20% 100%}
  50% {background-size: 20% 100%,20% 10% ,20% 100%}
  66% {background-size: 20% 100%,20% 100%,20% 10% }
  100%{background-size: 20% 100%,20% 100%,20% 100%}
}

.cke_screen_reader_only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

.DT-bottom{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.DT-bottom .dt-info{justify-self: flex-end;}
.DT-bottom .dt-paging{display: flex; align-items: center; justify-content: center; width: 100%; background: #f1f1f1; padding: 5px 10px; margin: 5px 0 0 0;}

@media screen and (max-width: 600px) {
    .fullScreenWrap .loginWrap{width: 90%!important; margin: 0 auto;}

    .fullScreenWrap .sideMenu{display: none; position: fixed; width: 100%; height: 100dvh; top: 0; left: 0;}

    .listAndEditor .tableBlock.min{width: 0%!important;}

    .fullScreenWrap .contentBlock{flex: 1 1 0; padding: 0;}
    .fullScreenWrap .contentBlock .titleBar{border-radius: 0;}

    .listAndEditor{padding: 0 10px;}
}