@charset "utf-8";

video::cue{
    font-size: smaller;
    background:transparent;
    text-shadow: 1px 1px 2px black;
}

:root{
    --word-color:#333333;
}
p{
    margin: 0;
    line-height: 22px;
}
.colCenter{
    display: flex;
    flex-direction:  column;
    align-items: center;

}

.bgWhite{
    background: white;
}
.bgGray{
    background: #fafafa;
}
.titleGray{
    font-size: 16px;
    color: #333333;
    line-height: 48px;
}


.flowIndex > div:first-child{
    width: 48px;
    height:48px;
    line-height: 48px;
    text-align: center;
    font-size: 28px;
    flex-grow: 1;

    border:1px solid gray;
    border-radius: 48px;
    color: gray;
}

.flowIndex > div:last-child{
    margin-left:35px;
    margin-top: -20px;
    background: #fafafa;
    color: gray;
    font-weight: bold;
}


.flowIndexSel > div:first-child{
    color: var(--word-color);
    border:1px solid var(--word-color);
}

.flowIndexSel > div:last-child{

    color: var(--word-color);
}


.panel{
    padding: 10px;
    margin: 10px;
    flex-grow: 1;
    box-shadow:  0 1px 4px 0 rgb(0 0 0 / 13%);

    position: relative;
}
.panel:after{
    content:attr(title);
    position: absolute;
    right:10px;
    top:-40px;
    font-size: 16px;
    color:#AAAAAA;
    font-weight: 100;
}
.panel > div:first-child{
    color: black;
    text-shadow: 0 0 1px #333333;
    line-height: 34px;
}

.panel > div:first-child > span{
    text-shadow: 0 0 1px #FFFFFF;
    margin-right: 5px;
    font-size: 12px;
}
.panel > div:not(first-child){
    color: black;
    line-height: 170%;
    font-weight: 300;
}
.panel > div:not(first-child) > span{
    background: #EEEEEE;
}
.panel > div:not(first-child) > .buttonsOrange > div{
    border-color: orange;
    color: orange;
}
.panel > div:not(first-child) > .buttonsGreen > div{
    border-color: green;
    color: green;
}
.panel > div:not(first-child) > .buttonsBlue > div{
    border-color: blue;
    color: blue;
}

.panel sup:not(.nomal){
    margin-left: 10px;
    color:orange;
    text-shadow: none;
    font-weight: normal;
}
.panel .nomal{
    margin-left: 10px;
    text-shadow: none;
    color: #333333;
    font-weight: 100;
}

.tags{
    display: flex;
    flex-direction: row;
    font-size: 12px;
    height:25px;
    line-height:25px;
    text-shadow:0 0 0 ;
    font-weight: 300;
    color: gray;
}
.tags > div{
    display: flex;
    flex-direction: row;
    margin-right: 20px;
    border: 1px solid #DDDDDD;
}
.tags > div > div:first-child{
    padding: 0px 10px ;
    background: #EEEEEE;
}
.tags > div > div:last-child{
    padding: 0px 10px ;
    background: white;
    color: #1e98d4;
}


.line{
    margin : 24px 10px;

    height:1px;
    background: #DDDDDD;
    flex-grow: 1;
}
.marginTop20{
    margin-top: 20px;
}
.marginButtom20{
    margin-bottom: 20px;
}
.marginRight10{
    margin-right: 10px;
}
.borderRadius10{
    border-radius: 10px ;
}


.bigTitle{
    line-height: 48px;
    font-size: 18px;
    margin: 10px 0px;
}
.bigTitleColor{

    padding: 5px 10px;
    font-size: 18px;
    margin: 30px 0px;
    border-left: 5px var(--form-main-color) solid;
    width:100px;
}
.content{
    line-height: 160%;
    text-indent: 2em;
    color:#333333;
}
.plan{
    display: flex;
    flex-direction: row;
    background: #F7f7f7;
}
.plan > div:first-child{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 200px;
    font-size: 15px;
    color:black;
    text-shadow:0 0 1px  white;
    background: #EEEEEE;
}
.plan > div:last-child{
    border-left:1px gray solid;
    padding: 20px;
    color:black;
    position: relative;
}
.plan > div:last-child:after{
    content: "";
    width:10px;
    height:10px;
    background: gray;
    border-radius: 10px;
    position: absolute;
    top:50%;
    left:-5px;
}
.statNum{
    border:1px solid #EEEEEE;
    display: flex;
    flex-direction: row;
}
.statNum > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}


.statNum > div > div{

    text-align: center;
}

.statNum > div > div:first-child{
    background: #f7f7f7;
    width: 100%;
    padding: 10px;
}

.statNum > div > div:last-child{
    font-size: 24px;
    line-height: 50px;
    width: 100%;


}


.tab {
    border-bottom:1px solid #AAAAAA;

}

.tab > div{
    padding: 5px 10px;
    border:1px solid #AAAAAA;
    border-bottom-width: 0;
    border-radius: 5px 5px 0 0 ;
    margin-right: 10px;
    font-size: 13px;
    cursor: pointer;
}
.tab > .sel{
    background: #333333;
    color:white;
    cursor: default;
}


.rightMenu{
    position:absolute;
    width: fit-content;
    border:1px solid #CCCCCC;
    min-width: 150px;
    background: white;
}

.rightMenu > div{
    padding: 5px 10px;
    border-bottom: 1px solid #CCCCCC;
}

.rightMenu > div:hover{
    background: #333333;
    color:white;
    cursor: default;
}

.rightMenu > div:last-child{
    border-bottom: 0px;
}

.addBtn{
    font-size: 20px;
    height: 34px;
    line-height: 34px;
    width:100%;
    justify-content: center;
    border:1px solid #EEEEEE;
    background: #fdfdfd;
    color: green;
    text-align: center;
}

.addBtn:hover{

    background: #EEEEEE;
    cursor: pointer;
}



/* 
   基本表单包括单行输入、多行输入、下拉选择、单选按钮、复选按钮、上传组件
   由于form表单种种缺陷，通过jquery直接控制div表单的行为更为友好
   由于不存在真正的表单，所以模拟表单的提交要采用组装form的形式
*/

:root{
    --word-color:#333333;
}

body{
    margin: 0;
    padding: 0;
    font-size: 14px;

}

div{
    box-sizing: border-box;
    -webkit-text-size-adjust: none;
}


div[required]::after{
    content:'*';
    padding-left: 5px;
    color:red;
}

.lineBg{
    background: #EEEEEE;
}

.lineBg > div{
    margin: 10px;

    background: linear-gradient(#EEEEEE 97%,#AAAAAA 3%);
    background-size: 100% 30px;
    line-height: 30px;
}

.row{
    display: flex;
    flex-direction: row;
}

.rowWrap{
    display: flex;
    flex-direction:  row;
    flex-wrap: wrap;
}

.rowCenter{
    justify-content: center;
    align-items: center;
}

.col{
    display: flex;
    flex-direction: column;
}
.around{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.between{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.center{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:100%;
    height: 100%;
}

.margin10{
    margin:10px;
}

.padding10{
    padding:10px;
}

.s16{
    font-size: 16px;
}
.s18{
    font-size: 18px;
}
.s20{
    font-size: 20px;
}

.green{
    background: green;
    color:white;
}

.red{
    background: red;
    color:white;
}

.graylight{
    background: #EEEEEE;
    color:gray;
}


.gray{
    background: gray;
    color:white;
}

.orange{
    background: orange;
    color:white;
}

.blue{
    background: #2A6787;
    color:white;
}

.hidden{
    display: none;
}

.inputLabel{
    width:15%;
    max-width:15%;
    min-width:15%;
    text-align: center;
}

.inputLabelNew{
    width:30%;
    max-width:30%;
    min-width:30%;
    text-align: center;
}

.label {


    padding:4px 10px;
    border:1px solid #DDDDDD;
    background: #ffffff;

    border-left: 5px solid  var(--word-color);

}
.label > div{

    color:gray;
    width: 100%;
    line-height: 30px;
    text-shadow:0px 0px 1px #CCCCCC;


}
.label > .radio{
    border:0px;
    padding: 0px;
    margin: 10px 0px;
}


.text{
    padding: 0 20px;
}
/*单行输入框*/

.input , .inputByCalendar ,.inputByDate{

    padding:0px 5px;
    border:1px solid #DDDDDD;
    background: #ffffff;

    width: 100%;
    height:32px;
    line-height: 32px;

    overflow: hidden;
    white-space:nowrap;
    outline: none;

    color: var(--word-color);
    text-shadow:0px 0px 1px #CCCCCC;
    -webkit-user-select: auto;


}
.input:empty:before , .inputByCalendar:empty:before, .inputByDate:empty:before{
    content: attr(placeholder);
    color: #AAAAAA;
    font-weight: 300;
    pointer-events:none;
    font-size: 12px;
}
.input:focus:before , .inputByCalendar:focus:before, .inputByDate:focus:before{
    content:none;
}
.input[search]{

}
.inputSearchTip{

    position:absolute;

    display: flex;
    flex-direction: column;
    border: 1px  #EEEEEE  solid ;

    width: 365px;

    height:max-content;
    max-height:200px;
    overflow-y: auto;

    background: #f7f7f7;

    z-index: 10;
}
.inputSearchTip > div{
    border-bottom: 1px  #EEEEEE  solid ;
    padding: 10px;
    cursor: default;
}
.inputSearchTip > div:hover{
    background:  #EEEEEE;
}

.inputShow{

    padding:5px 10px;

    background: #EFEFEF;
    border:1px solid white;

    color: black;
    text-shadow:0 0 2px 1px gray;

    width: 100%;
    min-height:36px;
    height: fit-content;
    line-height:24px;

    display: flex;
    flex-direction: row;

}

.inputShow > div{
    margin-right: 10px;
}


/*文本域*/

.textarea {

    padding:5px;
    position: relative;

    border:1px solid #DDDDDD;
    background: #ffffff;

    width: 100%;
    min-height:48px;
    line-height: 24px;

    color:var(--word-color);
    outline: none;
    text-shadow:0px 0px 1px #CCCCCC;
    -webkit-user-select: auto;

}
.textarea > div:first-child:empty:before{
    content: attr(placeholder);
    color: #AAAAAA;
    font-weight: 300;
    pointer-events:none;
    font-size: 12px;
}
.textarea> div:first-child:focus:before{
    content:none;
}

.textarea > div[contenteditable]{
    width: 100%;
    height:100%;
    outline: none;
}


/*下列选择输入*/
.select{

    background: #ffffff;
    border:1px solid #DDDDDD;
    padding: 0px 5px;
    min-width: 100px;
    position: relative;

}
.select:hover > .tooltip {
    display: block;
}

.select > div:first-child {

    height:30px;
    line-height: 30px;

    text-shadow:0px 0px 1px #CCCCCC;
    display: flex;
    flex-direction: row;

    white-space:nowrap;
    overflow-x: hidden;

    position: relative;

}

.select > div:first-child:focus-visible {
    outline: none;
}

.select > div:first-child:after{
    content: "▼";
    color: #7B7C5B;
    position: absolute;
    right:5px;

}
.select > div:first-child:empty:before{
    content: attr(placeholder);
    color: #DDDDDD;
}


.select > .selectOption {

    flex-direction: column;
    display: none;
    position: absolute;
    background: white;
    min-width: 100px;
    width: max-content;

    margin-left: -6px;
    margin-top: 1px;
    max-height: 231px;
    overflow-y: auto;
    overflow-x: hidden;

    z-index: 9;

}
.select > .selectOption > div {

    height:30px;
    line-height: 30px;
    border-bottom: 1px solid #EEEEEE;
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    padding: 0px 5px;

    white-space:nowrap;
    text-shadow:0px 0px 1px #CCCCCC;

}
.select > .selectOption > div:hover {
    background: #f7f7f7;
}

.select > .selectOption > div:last-child {
    border-radius:0 0 5px 5px;
}

.selectMuti{
    display: flex;
    flex-direction: row;
    align-items: center;

}
.selectMuti > div:last-child{
    height:12px;
    width:12px;
    border-radius: 12px;
    line-height: 9px;
    text-align: center;
    border: 1px solid #CCCCCC;
    color:#CCCCCC;
    margin: 0 2px;
}
.selectMuti > div:last-child:hover{
    color: red;
    cursor: pointer;
}
/*复选框输入*/
.checkbox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    border:1px solid #DDDDDD;
    height:fit-content;
    line-height: 30px;
    padding: 0px 5px;
    width: fit-content;

    background: #ffffff;
    position: relative;
}
.checkbox:hover > .tooltip {
    display: block;
}

.checkbox > div{
    margin-right: 10px;
    cursor: pointer;
    text-shadow:0px 0px 1px #CCCCCC;

}

.checkbox > .input{
    cursor: text;
    border:0;
    border-bottom:1px gray solid;
    height: 29px;
    width: 80px;
}


.checkbox0:before{
    content:"□ ";
    color:#DDDDDD;
}

.checkbox1:before{
    content:"■ ";
    color: var(--word-color);
}


/*单选输入*/
.radio {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    border:1px solid #DDDDDD;
    height: fit-content;
    line-height: 30px;
    min-height: 32px;


    padding: 0px 5px;
    width: 100%;

    background: #ffffff;
    position: relative;

}
.radio:hover > .tooltip {
    display: block;
}

.radio > div{
    margin-right: 10px;
    cursor: pointer;
    text-shadow:0px 0px 1px #CCCCCC;

}

.radio > .input{
    cursor: text;
    border:0;
    border-bottom:1px gray solid;
    height: 29px;
    width: 80px;
}


.radio0:before{
    content:"○ ";
    color:#DDDDDD;

}

.radio1:before{
    content:"● ";
    color: var(--word-color);
}


.buttongroup{
    display: flex;
    flex-direction: row;
    position: relative;
    line-height: 30px;
}
.buttongroup:hover > .tooltip {
    display: block;
}



.buttongroup > div{
    padding:0px 10px;
    cursor: pointer;
    border:1px solid #DDDDDD;
    border-left: 0px;
    white-space: nowrap;

}

.buttongroup > div:first-child{
    border-left:1px solid #DDDDDD;
}

.buttongroup0{

    background: #ffffff;
}
.buttongroup1{
    color:white;
    background: var(--word-color);
}


/*数字条组件，TODO：需要组件化*/

.slider{
    width: 100%;
    height: 100%;
    position: relative;
}
.slider > div:first-child{
    height:50%;
    border-bottom:1px solid #BBBBBB;
}

.slider > div:last-child{
    position: absolute;
    top:-5px;
    margin-left:100px;

    height:30px;
    width:30px;
    border-radius: 15px;

    background: #CCCCCC;
    cursor: pointer;

    -webkit-user-select: none;
}

/*开关键，开关键一般要有默认值*/

.power{
    height:32px;
    width:50px;
    border-radius: 32px;
    background:#EEEEEE;
    padding: 2px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    border:1px solid #DDDDDD;
    cursor: pointer;
    position: relative;
}

.power:hover > .tooltip{
    display: block;
    right:-60px;
}

.power:after{
    content: "";
    display: block;
    height:26px;
    width:26px;
    border-radius: 26px;
    background:white;
}

.powerMini{
    height:20px;
    width:50px;
    border-radius: 20px;
    background:#EEEEEE;
    padding: 2px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    border:1px solid #DDDDDD;
    cursor: pointer;
}

.powerMini:after{
    content: "";
    display: block;
    height:14px;
    width:14px;
    border-radius: 14px;
    background:white;
}

.powerOpen{
    background:green;
    justify-content: flex-end;
}







/*上传*/
.upload {

    display: flex;
    flex-direction: row;
    justify-content: space-between;


    border:1px solid #DDDDDD;
    background: white;
    height:fit-content;
    min-height: 32px;
    min-width: 100px;
    width: 100%;

    position: relative;

}
.upload:hover  > .tooltip {
    display: block;
}


.upload > input[type="file"]{
    display:none;
}
.upload > .filename{

    flex-grow: 1;
    padding: 5px;

    min-height:32px;
    outline: none;

    display: flex;
    flex-direction: row;
    align-items: center;

}

.upload > .filename > .filenameNote{

    padding-left: 30px;

}
.upload > .filename > .filenameUploaded{

    margin-left: 32px;
    text-decoration: underline;

}




.upload > .tipEn {
    position:absolute;
    font-size: 12px;
    bottom:-21px;
    right: 40px;

    padding: 6px 0px;
    line-height: 22px;
    height: 26px;
    font-weight: 300;
}
.upload > .tipEn > span:hover{
    cursor: pointer;
    font-weight: normal;
    border-bottom: 1px solid #333333;
}

.upload > .tipEn > span{
    border-bottom: 1px solid #AAAAAA;
}



.upload > .selBtn{

    width:40px;
    min-width:40px;
    min-height:30px;

    font-size: 20px;
    background: #DDDDDD;
    position: relative;
    text-align: center;


}
.upload > .selBtn:hover{
    cursor: pointer;
}




.uploadPreview{
    display: flex;
    flex-direction: row;
    border:1px solid #AAAAAA;
    width: 900px;
}
.uploadPreview > div{
    display: flex;
    flex-direction: column;
    width: 50%;
}

.uploadPreview > div:first-child{
    background: white;
    border-right: 1px solid #AAAAAA;
}
.uploadPreview > div:first-child > div:first-child{
    background: orange;
    padding: 5px;
}
/*
.uploadPreview > div:first-child > div:last-child{
    background: orange;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    color:#ffffff;
    text-shadow:0px 0px 3px black;

}
*/

.uploadPreview > div:first-child > .video{
    text-align: center;
    background: #EEEEEE;
    min-height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

.uploadPreview > div:first-child > .video > video{
    width:100%;
    height: auto;
}
.uploadPreview > div:first-child > .image {
    padding: 10px;
}
.uploadPreview > div:first-child > .image > img{
    width: 100%;
}
.uploadPreview > div:first-child > .pdf {
    padding: 10px;
    height:300px;
    overflow-y: auto;
}
.uploadPreview > div:last-child{
    background:  #f7f7f7;
}
.uploadPreview > div:last-child > img{
    width:fit-content;
    margin: 10px;
}

.uploadPreview > div:last-child > div:not(:last-child){
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #AAAAAA;
    justify-content: center;
    align-items: center;
}

.uploadPreview > div:last-child > div:not(:last-child) > div{
    width: 50%;
    padding: 5px;
    text-align: center;
}
.uploadPreview > div:last-child > div:not(:last-child) > div:first-child{
    border-right: 1px solid #AAAAAA;
}

.uploadPreview .upload{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 0px;
}
.uploadPreview .upload > .btn{
    cursor: pointer;
    padding: 5px 10px;
    border:1px solid #AAAAAA;
    background: green;
    width: fit-content;
    color: white;
}
.uploadPreview .upload > .percent{
    font-size: 20px;
}


.uploadPreview .error{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 0px;
}
.uploadPreview .error > div{

    width:fit-content;
    padding: 5px 10px;
    border-bottom:1px solid red;
    color: red;
}


.uploadShow{

}

.uploadShow > .fileWrap{
    height: 50vh;
    position: relative;
}

.uploadShow > .fileWrap > img {
    height: 100%;
}
.uploadShow > .fileWrap > video {
    height: 100%;
}
.uploadShow > .fileWrap > .pdf {
    width:700px;
    height: 100%;
}

.uploadShow > .fileWrap > .del{
    position: absolute;
    right: 10px;
    top:10px;
    color: red;
    border-bottom: 1px solid red;
    cursor: pointer;
}
.mainUpload{

    position: relative;
}

/*
 图片上传
*/


/*上传图片*/

.picture{

    display: flex;
    flex-direction: row;
    padding: 5px;

    flex-wrap: wrap;
    border:1px solid #DDDDDD;

}
.picture .picWrap{

    position: relative;

    width:100px;
    height:100px;


    min-height:100px;
    max-height:100px;

    min-width:100px;
    max-width: 200px;

    border:1px solid #DDDDDD;
    background: white;

    margin:5px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

.picture .picWrap img{
    max-height:100px;
    max-width: 100px;
}
.picture .pictureSel {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border:1px solid #DDDDDD;
    margin:5px;

    width:100px;
    height:100px;

    background: white;

}
.picture .pictureSel > input[type="file"]{
    display:none;
}
.picture .pictureSel > .selBtn{
    font-size: 25px;
    width:100%;
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-shadow:0px 0px 1px #CCCCCC;

}
.picture .pictureSel > .selBtn > img{
    width: 100%;
}
.picture .pictureSel > .selBtn:hover{
    cursor: pointer;

}
.picture .pictureSel > .name{

    padding-top:10px;
    line-height: 24px;
}




/*
 日历模块
*/


.calendarYM{
    display: flex;
    flex-direction: column;
    border:1px solid #CCCCCC;
    width: fit-content;
    padding:10px;
    font-size: 14px;
    position: absolute;
    left:0px;
    top:0px;
    background: white;
}
.calendarYM > .monthWrap{
    display: flex;
    flex-direction: row;
    width:  280px;
    flex-wrap:wrap;
}

.calendarYM > .monthWrap > .month{
    width: 60px;
    margin:5px;
    padding:5px;
    border:1px solid #EEEEEE;
    text-align: center;
}
.calendarYM > .monthWrap > .month:hover{
    background:  #EEEEEE;
    cursor: pointer;
}


.calendarYM > .dateNav{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.calendarYM > .dateNav > div:not(.date){
    padding: 0 5px;
    cursor: pointer;
}
.calendarYM > .dateNav > .date{
    margin: 0px 5px;
}
.calendarYM > .dateBtn{

    justify-content: flex-end;
}
.calendarYM > .dateBtn > span{
    padding: 0px 5px;
    margin: 0px 5px;
    cursor: pointer;
    border-bottom: 1px solid gray;
}

.calendarYM > div:last-child  {
    color: gray;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content:  flex-end;
    margin-top: 10px;
}
.calendarYM > div:last-child >span {
    margin: 0 5px;
}
.calendarYM > div:last-child >span:hover {
    cursor: pointer;
    border-bottom: 1px solid gray;
}



.calendar{
    display: flex;
    flex-direction: column;
    border:1px solid #CCCCCC;
    width: fit-content;
    padding:10px;
    font-size: 14px;
    position: absolute;
    left:0px;
    top:0px;
    background: white;
}
.calendar > .dateNav{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.calendar > .dateNav > div:not(.date){
    padding: 0 5px;
    cursor: pointer;
}
.calendar > .dateNav > .date{
    margin: 0px 5px;
}
.calendar > .week{
    background: #DDDDDD;
}
.calendar > div{
    display: flex;
    flex-direction: row;
}
.calendar > div:not(:first-child) > div{
    width:34px;
    padding: 5px 10px;
    text-align: center;
    border-bottom: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;

}
.calendar > div:not(:first-child) > div:first-child{

    border-left: 1px solid #DDDDDD;
}
.calendar .sel{
    background: orange;
    color:white;
}

.calendar .day:hover{
    cursor: pointer;
    color:red;
}
.calendar > div:last-child  {
    color: gray;
    justify-content:  flex-end;
}

.calendar > div:last-child >span {
    margin: 0 5px;
}
.calendar > div:last-child >span:hover {
    cursor: pointer;
    border-bottom: 1px solid gray;
}






/*
弹出层
*/



.alertWrap , .loadingWrap{
    position: fixed;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    left:0;
    top:0;
    width:100%;
    height:100%;
 
}

.alertWrap .alert , .loadingWrap .loading{

    display:flex;
    flex-direction: column;

    background: #f7f7f7;
    border:1px solid gray;

    min-width: 300px;
    max-width: 90vw;
    max-height: 90vh;
    box-shadow: 5px 5px 5px #CCCCCC;


}

.alertWrap .alert > div:first-child{
    margin: 10px;
    overflow-y: auto;
}

.alertWrap .alert > div:last-child{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.alertWrap .alert > div:last-child > div:first-child{

    display:flex;
    flex-direction: row;
    justify-content: center;
    flex-grow: 1;

    margin: 10px;
    padding: 5px 10px;

}
.alertWrap .alert > div:last-child > div:last-child{
    width: fit-content;
    border:1px solid #CCCCCC;
    margin: 10px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;

}
.alertWrap .index{
    width:10px;
    height: 10px;
    margin: 0 5px;
    background: #AAAAAA;
    cursor: pointer;
}
.alertWrap .indexSel{
    background: var(--word-color);
}




/*
弹出窗口(左距200px)
*/


.openWrap{
    position: fixed;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index: 100;

}

.openWrap .open{

    display:flex;
    flex-direction: column;

    background: #f7f7f7;
    border:1px solid gray;

    box-shadow: 5px 5px 5px #CCCCCC;

    max-width:100vw;
    max-height:100vh;

    position: absolute;
    /* 鼠标指针为移动图标 */
    cursor: move;

}


.open > div:first-child{

    display: flex;
    flex-direction: row;
    justify-content:  space-between;
    background: #DDDDDD;

}

.open > div:first-child>div:first-child{

    margin: 5px;
    padding: 5px;
    font-size: 14px;
    color: white;
    text-shadow: 0  0  2px  black
}

.open > div:first-child>div:last-child{

    margin: 5px;
    padding: 5px;

}

.open > div:first-child>div:last-child:hover{
    cursor: pointer;
    background: white;

}

.open > div:last-child{

}

.open > div:last-child > video{
    display:block;
}

.open > div:last-child > iframe{
    width: 50vw;
    height:70vh;


}

.open > div:last-child > iframe body{

    height: max-content;

}


/*
确定窗口
*/


.confirmWrap{
    position: fixed;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    left:0;
    top:0;
    width:100%;
    height:100%;
     
}

.confirmWrap .confirm{

    display:flex;
    flex-direction: column;

    background: #f7f7f7;
    border:1px solid gray;

    min-width: 300px;
    height:fit-content;

    max-width: 70vw;
    max-height: 70vh;

    box-shadow: 5px 5px 5px #CCCCCC;


}

.confirmWrap .confirm > div:first-child{
    margin: 10px;
    overflow-y: auto;
}

.confirmWrap .confirm > div:last-child{
    display:flex;
    flex-direction: row;
    justify-content: flex-end;
    margin: 10px;
}

.confirmWrap .confirm > div:last-child > div{
    width: fit-content;
    border:1px solid #CCCCCC;
    margin-left: 10px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;

}

.link{
    border: 1px solid #CCCCCC;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 5px;
    margin-right: 10px;
}
.link:hover{
    background: orange;
    color:white;
}

.linkSel{
    background: green;
    color:white;
}

.linkText{
    cursor: pointer;
    font-size: 12px;
    border-radius: 5px;
    margin-right: 10px;
    text-align: center;
    padding: 1px 5px;
    color: green;
}
.linkText:hover{
    background: orange;
    color:white;
}


/*
 分组卡片
*/


.card{
    border:1px solid #DDDDDD;
    margin-bottom: 30px;
    width:100%;
}
.card > div:first-child{
    margin-top:-13px;
    margin-left: 20px;
    padding:0px 10px;
    background: #ffffff;
    width: fit-content;
    font-size: 18px;
    font-weight: 300;
}
.card > div:last-child{
    background: #f7f7f7;
    margin: 10px;
    padding: 20px;
    border-radius: 10px;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}
.card > div:last-child>div{

    align-items: center;
    margin-bottom: 20px;
}




.card > .note{

    color: gray;
    padding: 0px 20px;
    width: 100%;
    text-align: right;
    font-size: 13px;

}


/*
 表格样式 
*/
.table{
    display: flex;
    flex-direction: column;

}
.table > div:first-child{
    display: flex;
    flex-direction: row;
    border-bottom:1px solid #DDDDDD;
    background:#EFEFEF;
    white-space: nowrap;

}
.table > div:first-child > div{

    white-space: nowrap;

}
.table > div:first-child > div{
    padding:10px;
    flex-grow: 1;
}

.table > div:last-child  {
    display: flex;
    flex-direction: column;

}

.table > div:last-child > div{
    display: flex;
    flex-direction: row;
    border-bottom:1px solid #DDDDDD;

}
.table > div:last-child > div > div{
    padding:10px;
    flex-grow: 1;
    flex:auto;
}


.table > div:last-child > div:hover{
    background-color: #EEEEEE;
}

.table a{
    text-decoration: none;
    color: #2A6787;
}
.table a:hover{
    color:red;
    border-bottom: 1px solid red;
}




/*表单样式*/

.form{
    margin: 10px;
    background: #F7f7f7;
    width: max-content;

}
.form > div{
    border-bottom: 1px solid #FFFFFF;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.form .row .name{
    min-width: 120px;
    padding-left: 10px;
    text-align: right;
}
.form .row .value{
    padding: 10px;
}
.form .row .note{
    padding-left: 20px;
    color:gray;
    font-size: 12px;
    font-weight: 300;
    max-width: 300px;
}


.buttons{
    display: flex;
    flex-direction: row;
}
.buttons > div{

    line-height:32px;
    height:32px;
    border:1px solid #DDDDDD;
    text-align: center;
    padding: 0 10px;
    margin-right: 10px;
    letter-spacing: 1px;


    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    white-space: nowrap;
}
.buttons > div:hover{
    box-shadow: 0 0 5px black;
    cursor: pointer;
}

.buttons > div > img{

    height:20px;
}

.submitBtn:hover{
    box-shadow: 0 0 5px black;
    cursor: pointer;
}




.tooltip {
    position: absolute;
    display: none;
    background: white;
    border:1px solid #CCCCCC;

    border-radius: 10px;
    bottom: 100%;
    font-size: 12px;

    z-index: 100;

    font-weight: 300;
    color: gray;
    margin-bottom: 15px;
    padding: 4px 10px;
    pointer-events: none;

    max-width: 300px;
    min-width: 100px;
    width: max-content;


    text-align: left;
    line-height: 18px;
    right:0px;



    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -ms-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;


}

.tooltip:after {

    content: "";
    position: absolute;
    width:10px;
    height:10px;
    background: white;

    border-right: 1px solid   #CCCCCC;
    border-bottom: 1px solid  #CCCCCC;

    transform: rotate(45deg);
    bottom: -7px;
    right:95px;


}


.tip {
    position: absolute;
    display: none;
    background: white;
    border:1px solid #CCCCCC;

    border-radius: 10px;
    bottom: 100%;
    font-size: 12px;

    z-index: 100;

    font-weight: 300;
    color: gray;
    margin-bottom: 15px;
    padding: 4px 10px;
    pointer-events: none;

    max-width: 300px;
    min-width: 100px;
    width: max-content;


    text-align: left;
    line-height: 18px;
    left:0px;



    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -ms-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;


}

.tip:after {

    content: "";
    position: absolute;
    width:10px;
    height:10px;
    background: white;

    border-right: 1px solid   #CCCCCC;
    border-bottom: 1px solid  #CCCCCC;

    transform: rotate(45deg);
    bottom: -7px;
    left:10px;


}

.toast{

    position: fixed;
    right:300px;
    top:20px;

    padding: 10px;
    width: 100px;
    text-align: center;


    background:#CCCCCC;
    color:green;
    z-index: 1000;

}

/*日历设置*/
.calendarSet {
    display:flex;
    flex-direction: column;

    margin:10px;
}


.calendarSet  > div{
    display:flex;
    flex-direction: row;
}

.calendarSet  > div >div{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    flex-grow: 1;
    text-align:center;
    width:3%;
    min-height:1em;
    border-right:1px solid gray;
    border-bottom:1px solid gray;
}

.calendarSet  > div:first-child >div{

    border-top:1px solid gray;
}
.calendarSet  > div >div:first-child{

    border-left:1px solid gray;
}

.calendarSet .open{
    color:white;
    cursor:pointer;
}

.calendarSet .open:hover{
    color:black;
}

.calendarSet .dayMouseOver{
    background: orange;

}
.calendarSet .dayMouseOverSel{
    background: red;

}
.calendarSet .weekMouseOver{
    background: red;
    cursor:pointer;
}
.calendarSet .timeMouseOver{
    background: red;
    cursor:pointer;
}

.noteIcon{
    position: relative;
    cursor: default;
    margin-left: 5px;
}
.noteIcon:after{
    display: block;
    text-align: center;
    content: "?";
    font-size: 12px;
    width: 14px;
    height:14px;
    line-height: 14px;
    border:1px solid gray;
    border-radius: 8px;
}

.noteIcon:hover > .tip {
    display: block;
}


/*富文本编辑区*/

.richText {


    background: #ffffff;


}

.richText .rich  {

    overflow-y: auto;
    height: 800px;
    padding: 10px;
}

.richText .rich > ._bold{

    font-weight: bold;

}

.richText  .rich> ._center{

    text-align: center;

}

.richText  .rich> ._big{

    font-size: 20px;

}

.richText > div:first-child{

    background: white;
    margin-bottom: 10px;
}

.richText > div:last-child{

    width: 100%;
    line-height: 200%;
    border:1px solid #DDDDDD;

    overflow-y: auto;
    outline: none;
    text-shadow:0px 0px 1px #CCCCCC;
    -webkit-user-select: auto;

}

.richText .rich > div{

    border-bottom: 1px dotted #AAAAAA;
    text-indent: 2em;
    padding: 10px 0em;
    line-height: 180%;
    font-size: 16px;

}

.richText .rich > .lineSel{

    border-bottom: 2px dotted red;

}

.richText .rich > .imgWrap , .imgWrap1X2 ,.imgWrap1X3 {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.richText .rich > .imgWrap >img {
    width:60%;
}

.richText .rich > .imgWrap1X2 >img {
    width:40%;
}

.richText .rich > .imgWrap1X3 >img {
    width:30%;
}

.richText .rich > .imgWrap >img:hover , .richText .rich > .imgWrap1X2 >img:hover ,.richText .rich > .imgWrap1X3 >img:hover {
    cursor: pointer;
}

.richText .rich > .imgTitle{

    text-indent: 0em;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;

}
.richText .rich > .imgTitle:after{

    content: " )";

}
.richText .rich > .imgTitle:before{

    content: "( ";

}



.richText > div:first-child > div{
    border:1px solid green;
    width: fit-content;
    padding: 5px 10px;
}


.loadingTip{
    color:green;
    position: absolute;
    width: fit-content;
    height:fit-content;
    background: white;
    font-size: 16px;
    padding: 10px 20px;
    opacity: 0.5;
}