div,span.body,input,li,ul,textarea,a,form,strong, span, i {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}

html { height: 100%; min-height:100%;   font-family: sans-serif;background: #e9edf0;
}
body {min-height:100%;
    font-family: 'Titillium Web', sans-serif;
    margin: 0;
    padding-left: 100px;
    background-size: cover;
    background-attachment: fixed;
}

input, select, button {font-family: 'Titillium Web', sans-serif;}

.sideline{position: absolute; left: 0; top: 0; background: white; z-index: 99;   box-shadow: 0px 8px 20px #0000001a; color:black;
    position: fixed;
    z-index: 99;
    height: 100%;
    overflow: auto;}
.sideline .item{cursor: pointer; transition: all 300ms ease-in-out;   display: block;width: 100px;height: 100px;padding: 20px 0 0 0;text-align: center;  text-decoration: none;color:black; position: relative;}
.sideline .item:hover{  opacity: .9; box-shadow: 0px 8px 20px #0000001a; transform: translate(0,-2px);}
.sideline .item.active{background:  #2f8ac6; color:white;}
.sideline .item .fal{    display: block;
    font-size: 18pt;
    padding: 8px;}
.sideline .item img{    height: 18px; padding: 8px;}
.sideline .item svg{    height: 18px; padding: 8px;}
.sideline .item.active svg path{  fill:white;}
.sideline .item span{display:block;font-size: 10pt;}
.sideline .item strong{     position: absolute;top: 14px;font-size: 10pt;left: 55px;background: #da6d6d;color: white;height: 30px;border-radius: 15px;padding: 5px 12px; }
.sideline .item strong.red{  background: #da6d6d;color: white;height: 30px;border-radius: 15px;padding: 5px 13px; }
.sideline .item strong.yellow{  background: #efbd48;color: white;height: 30px;border-radius: 15px;padding: 5px 13px; }

#maincontent{

    position: relative;
    z-index: 99;
}


#loader{
    text-align: center;
    height: 400px;
    padding: 180px;
    margin: 0 0 -400px 0;
    opacity: 0;
}
#loader .loader{text-align: center; font-size: 32pt; opacity: 0.4;}


#loader.loading {

    opacity: 1;
}


.userbox .usericon{    border-radius: 50%;background: #e9edf0;float: left;text-align: center;width: 40px;height: 40px;padding: 8px 0 0 0;}
.userbox .userbox-in{ padding: 0 0 0 50px;  }
.letterbox{background: #2f8ac6;    color: white;    width: 100px;    height: 100px;    padding: 20px 0 0 0;    text-align: center;margin: 0 0 15px 0;    font-size: 28pt;}

.userhead{background: white; margin: 0 0 0 20px;  position: relative; z-index: 99; box-shadow: 0px 8px 20px #0000001a; padding: 14px 15px; width: 280px; float:left; }
.userhead .usericon{    border-radius: 50%;background: #e9edf0;float: left;text-align: center;width: 40px;height: 40px;padding: 8px 0 0 0;}
.userhead .userhead-in{ padding: 0 0 0 50px;  }
.userhead strong{font-size: 12pt; display: block; }
.userhead span{font-size: 10pt; opacity: .7; display: block;}
.userhead .rollout{display:none;     position: absolute;background: white; box-shadow: 0px 8px 20px #0000001a;padding: 10px 15px;width: 280px;margin: 14px -15px;   }
.userhead .rollout #headsearchlist{ max-height: 165px; overflow: auto; margin: 0px 0px -10px 0px; padding: 0 0 10px 0; }
.userhead .rollout input{width: 100%; margin-bottom: 10px;}
.userhead .rollout a{display: block;font-size: 10pt;padding: 5px;text-decoration: none;color: black;transition: all 300ms ease-in-out; }
.userhead .rollout a:hover{opacity: .9;  transform: translate(0,-1px); }
.userhead.out .rollout{display:block; }


.subline_title{background: white; position: relative; z-index: 99;}
.subline_title2{background: white; position: relative; z-index: 99;     margin-left: 35px;}
.subline_divide{
    width: 26px;
    height: 39px;
    margin: -24px 10px 0 8px;
    background: transparent;
    border-style: solid;
    border-color: #e0e4e7;
    border-width: 0 0 2px 2px;
    float: left;
    border-radius: 0 0 0 9px;
}
.subline_divide2{
    width: 26px;
    height: 39px;
    margin: -24px 10px 0 48px;
    background: transparent;
    border-style: solid;
    border-color: #e0e4e7;
    border-width: 0 0 2px 2px;
    float: left;
    position: relative;
    border-radius: 0 0 0 9px;
}
.subline_divide2:before{     position: absolute;
    left: -42px;
    content: " ";
    top: -2px;
    width: 2px;
    height: 44px;
    background: #e0e4e7;}


input{padding: 10px 15px; background: white; border: solid 1px #dadada;    display: inline-block; font-size: 10pt; font-weight: bold;text-align: left; color:black;transition: all 300ms ease-in-out; }
input:focus{outline: none; background:#f1f1f1; }
input[readonly]{opacity: .5;background:#f1f1f1;}

textarea{padding: 10px 15px; background: white; border: solid 1px #dadada;    display: inline-block; font-size: 10pt; font-weight: bold;text-align: left; color:black;transition: all 300ms ease-in-out; }
textarea:focus{outline: none; background:#f1f1f1; }


select{border-radius:0; -webkit-appearance:none; padding: 10px 15px; position: relative; background: white; border: solid 1px #dadada;    display: inline-block; font-size: 10pt; font-weight: bold;text-align: left; color:black;transition: all 300ms ease-in-out; }
select:focus{outline: none; background:#f1f1f1; }
.selecticon{    float: right;margin: -29px 15px 0 0;z-index: 999;position: relative;opacity: .6;}


form{}
form label{display: block; padding: 10px 0 5px; font-size: 10pt;}
form input{width: 100%;}
form select{width: 100%;}
form textarea{width: 100%;}


.editbar{clear:both;}
.editbar span{font-size: 10pt;opacity: .7;}
.editbar .fllft{float:left;}
.editbar .flrgh{float:right;}
td.editbar .inlinebtn{font-size: 12pt;opacity: .7;}
td.editbar span{font-size: 12pt;opacity: .7;}
.editbar .inlinebtn{font-size: 10pt; opacity: .7; color:black; text-decoration: none; float: right; margin: 0 0 0 10px; transition: all 300ms ease-in-out; cursor: pointer;}
.editbar .inlinebtn:hover{opacity: .9;  transform: translate(0,-1px); }

.inlinebtn{cursor: pointer; transition: all 300ms ease-in-out; cursor: pointer;}
.inlinebtn:hover{cursor: pointer; background: #efefef;}

.hledaniform{position: relative;}
.menu.content .hledaniform{float:right; margin: 0 20px 0 0;}
.content .hledaniform{  margin: 0 0  20px 0;}
.hledaniform input{background: none;    padding: 25px;    min-width: 400px;}
.hledaniform input:focus{background: #d3d7da;}
.hledaniform .btn{background: none; position: absolute; right: 0; top: 0 ;color: #2f8ac6; height: 72px;}



form .switch{overflow: hidden; cursor: pointer; position: relative; height: 42px;     width: 140px; background: white;border: solid 1px #dadada;display: inline-block;font-size: 10pt;font-weight: bold;text-align: left;color: gray;}
form .switch .mover{width: 70px;  position: absolute; left: 0; height: 52px; transition: all 300ms ease-in-out; }
form .switch.val0 .mover{background: #da6d6d; left: 70px;}
form .switch.val1 .mover{background: #64d5b8;}
form .switch .yes{color:white; left: 0; position: absolute; width: 70px; text-align: center; height: 52px; padding: 10px 0;transition: all 300ms ease-in-out; }
form .switch .no{color:white; right: 0; position: absolute; width: 70px; text-align: center; height: 52px;padding: 10px 0;transition: all 300ms ease-in-out; }
form .switch.val0 .yes{color:#2d2d2d;}
form .switch.val1 .no{color:#2d2d2d; }

form .switch.switchstyle{   width: 240px; }
form .switch.switchstyle .yes{text-align: center;width: 120px;}
form .switch.switchstyle .no{text-align: center;width: 120px;}
form .switch.switchstyle .mover{width: 120px;  position: absolute; left: 0; height: 52px; transition: all 300ms ease-in-out; }
form .switch.switchstyle.val0 .no{color:#2d2d2d;}
form .switch.switchstyle.val0 .mover{background: #d2f2f9; left: 120px;}
form .switch.switchstyle.val1 .mover{background: #2b3454;}

form .fileUpload{overflow: hidden; cursor: pointer; position: relative; height: 42px;    width: 100%;background: white;border: solid 1px #dadada;display: inline-block;font-size: 10pt;font-weight: bold;text-align: left;color: gray; }
form .fileUpload strong{    float: left;color: black;padding: 10px 15px !important;}
form .fileUpload span{float: right;font-size: 10pt; opacity: .7;padding: 10px !important;}
form .fileUpload .bar{background: #64d5b8;  height: 40px;color:white;  padding: 10px 0;  }


.line-circle{ float: left;color: white; width: 40px;height: 40px;text-align: center; font-weight: bold;}
.line-wth-user{padding: 0 0 0 50px;}

.line-circle .nahled{max-width: 100%;  display: inline-block; }
.line-circle .nahledicon{    padding: 8px 0 0 0;background: #2f8ac6;color: white;border-radius: 50%;width: 40px;height: 40px;text-align: center; font-size:12pt;}
.line-circle .nahledicon.yellow{background: #efbd48;}
.line-circle .nahledicon.blue{background: #8cc1d8;}
.line-circle .nahledicon.red{background: #da6d6d;}
.line-circle .nahledicon.green{background: #64d5b8;}
.line-circle .nahledicon.orange{background: #ea9b55;}
.line-circle .nahledicon.grey{background: #dadada;}
.line-circle .nahledicon.greyU{background: #e9edf0; color:black;}

.message{padding: 15px;       min-width: 300px;    position: fixed;    right: 40px;    bottom: 40px;    color: white; z-index: 9999;   box-shadow: 0px 8px 20px #0000001a;}
.message.green{background: #64d5b8;}
.message.red{background: #da6d6d;}
.message .fal{float:left; font-size: 22px;}
.message .message-in{padding: 0 0 0 50px;}

.inlinelabel{
    display: inline-block;
    background: #e9edf0;
    font-size: 9pt;
    color: #2d2d2d;
    border-radius: 10px;
    padding: 0 10px;
    font-weight: normal;;
}

.tipbox{    background: #e5f8f3;
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #64d5b8;
    margin: -0px;}
.tipbox strong{display: inline !important;}

.btn{padding: 11px 30px; text-decoration: none; background: #2f8ac6; border-style:none;  cursor: pointer; display: inline-block; font-size: 10pt; font-weight: bold;text-align: center; color:white;transition: all 300ms ease-in-out; }
.btn:hover{ opacity: .9; box-shadow: 0px 8px 20px #0000001a; transform: translate(0,-2px);  }
.btn.btnO{background: #dadada; color:black;}
.btn.btn2{background: #efbd48;}
.btn.btnR{background: #da6d6d;}
.btn.btnG{background: #64d5b8;}
.btn.btnIn{color: #2f8ac6;background: #e9edf0;padding: 15px 15px;}
.btn.btnBlock{display: block;
    max-width: 200px;
    float: none !important;
    margin: 10px auto !important;}
.btn.flR{float:right; margin: 0 0 0 10px;}
.btn.circle{height: 46px; width: 46px; padding: 15px 0; border-radius: 50%;}
.btn .fal{transform: scale(1.5) translate(-5px,0);  }
.btn .num{    background: white;
    border-radius: 50px;
    color:black;
    padding: 4px 11px;
    margin: 0 0 0 10px;}

.chrtover{     float: right;
    background: #e5f8f3;
    color: #64d5b8;
    font-weight: bold;
    padding: 0px 10px;
    border-radius: 20px;
}
.chrtover.red{color: #da6d6d;
    background: #da6d6d2e;}



.inlinemess{padding: 4px 8px; border-radius: 5px; margin-top: 5px;}
.inlinemess.green{background: #64d5b8; color:White; font-weight: bold; font-size: 10pt;}
.inlinemess.red{background: #da6d6d; color:White; font-weight: bold; font-size: 10pt;}
.inlinemess.orange{background: #ea9b55; color:White; font-weight: bold; font-size: 10pt;}
.lighttext{opacity: .5;  font-size: 10pt;}

.btnsmall{padding: 5px 5px; text-decoration: none; background: #2f8ac6; min-width: 30px; border-style:none;  cursor: pointer; display: inline-block; font-size: 10pt; font-weight: bold;text-align: center; color:white;transition: all 300ms ease-in-out; }
.btnsmall:hover{ opacity: .9; box-shadow: 0px 8px 20px #0000001a; transform: translate(0,-2px);  }
.btnsmall .num{       background: #ffffff4d;
    border-radius: 50px;
    color: white;
    padding: 0px 10px;
    margin: 0 0 0 4px;}

.line{
    position: relative; padding: 20px 20px 20px 20px; background: white;    box-shadow: 0px 8px 20px #0000001a;
    margin: 0 0 20px 0;
}
.line h3{margin: 0;}
.line h3 a{color:black; text-decoration: none;}
.line .btnspace{position: absolute; right: 20px; top: 20px; }
.line .btnspace .btn{margin: 0 0 0 15px;}
.line .url{ opacity: .7; font-size: 10pt; }
.line .infoblock.trafflight{min-width: 20px; animation-name: blink; animation-duration: 1.5s;  animation-iteration-count: infinite;}
.line .infoblock.trafflight .trflght{width: 15px; height: 15px; border-radius: 50%; }
.line .infoblock.trafflight .trflght.red{background: #da6d6d;}
.line .infoblock.trafflight .trflght.yellow{background: #ea9b55;}
.line .infoblock.trafflight .trflght.green{background: #64d5b8;}

pre{        margin: 10px 0;padding: 10px;background: #e9edf0;border-width: 1px; border-style: solid;border-color: #e0e4e7;}
textarea.pre{
    font-weight: normal; color:#2f8ac6;
    margin: 10px 0;padding: 10px;background: #e9edf0;border-width: 1px; border-style: solid;border-color: #e0e4e7; width: 100%; height: 80px; padding: 20px;}

.inlinecheck{padding: 4px 8px;}
.inlinecheck.green{background: #64d5b8; color:White; font-weight: bold; font-size: 10pt;}
.inlinecheck.red{background: #da6d6d; color:White; font-weight: bold; font-size: 10pt;}
.inlinecheck.orange{background: #ea9b55; color:White; font-weight: bold; font-size: 10pt;}
.lighttext{opacity: .5;  font-size: 10pt;}

.content.authform form{position: relative; padding: 20px 20px 20px 20px; background: white;   box-shadow: 0px 8px 20px #0000001a;    max-width: 500px; margin: 0 auto;}
.content.authform form strong{display:block; padding: 5px 0 5px 0;}
.content.authform form label{width: 100%; opacity: .8; padding: 10px 0 0px 0; display: block; font-size: 10pt; font-weight: bold;}
.content.authform form input{-webkit-appearance:none;width: 100%;   ;display: block; margin: 0 auto;  font-size: 12pt;}
.content.authform form .btn{float:none; margin: 20px auto 0 auto; display:block;}


.line .infoblock.tit{width: 600px;}
.line .infoblock.tit a{color:black; text-decoration: none;}
.line .infoblock.titDet{width: 380px;}
.line .infoblock{float:left; padding: 5px 10px 5px 0; min-width: 150px;}
.line .infoblock strong{display: block;}
.line .infoblock span{display: block; opacity: .7; font-size: 10pt;}
.line.linecirc{padding: 20px 0px 20px 20px;}
.line .infoblock.infocirc{width: 202px}
.line .infoblock.infocirc span{padding: 0 6px 12px 6px;}
.line .infoblock .fa-spin{color:#b9b9b9;}
.line .infoblock.infocirc .fa-spin{color:#b9b9b9;}
.line .infoblock.infocirc strong .fa-spin{color: white;}
.line .infoblock.infocirc strong{display: inline-block;padding: 10px 20px;border-radius: 50px;color: white;font-size: 14pt;}
.line .infoblock.infocirc.if-all strong{background: #b6c0c7;}
.line .infoblock.infocirc.if-green strong{background: #64d5b8;}
.line .infoblock.infocirc.if-red strong{background: #da6d6d;}
.line .infoblock.infocirc.if-orange strong{background: #ea9b55;}
.line .infoblock.infocirc.if-yellow strong{background: #efbd48;}
.line .infoblock.infocirc.if-blue strong{background: #8cc1d8;}

.informline{border-style: solid; border-width: 0 0 1px 0; border-color:#b3b3b3;}
.informline strong{margin: 0; padding: 0 !important; float:left;}
.informline .inlinebtn{float:right;}
.informline span{}


.light{    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #64d5b8;
    margin: -2px auto;}
.light.pulse{

    animation-name: blink;
    animation-duration: 1.5s; animation-iteration-count: infinite;
}
.light.yellow{background: #ea9b55;}
.light.red{background: #da6d6d;}
@keyframes blink {
    50% {opacity: .5}

}


.timeline{}
.timeline .line{padding-bottom: 0;}
.timeline .line .fullinfo{overflow: hidden;}

.line .actinfo {}
.line .actinfo .infoblock{width: 300px;}
.line .actinfo .infoblock.infocirc2 strong{display: inline-block;padding: 10px 6px;border-radius: 50px;color: black;font-size: 14pt;}
.line .actinfo .infoblock.infocirc2 span{padding: 0 6px 12px 6px;}

.line .actinfo .screenblock{    float: right;
    max-height: 366px;
    overflow: hidden;
    position: relative;;
    width: 540px;
    padding: 20px 20px 0 20px;
    margin: -20px;
}
.line .actinfo .screenblock .shadow{    width: 500px;
    height: 20px;
    position: absolute;
    top: 366px;
    background: white;
    box-shadow: 0px 8px 20px #0000006e;}
.line .actinfo .screenblock img {border-radius: 5px;
    box-shadow: 0px 8px 20px #0000001a; margin-bottom: 20px;}




.line .actinfo .screenblockBig{
    max-height: 566px;

    width: 740px;
    padding: 20px 20px 0 20px;
    margin: -20px;
}
.line .actinfo .screenblockBig .shadow{    width: 700px;
    height: 20px;

    top: 566px;
   }
.load{opacity: .4;}



.load{opacity: .4;}




.tabs{position: relative;}
.tabs .tab{cursor:pointer; float:left; padding: 13px 20px 25px; margin: 0 10px 0 0; background: white;opacity: .7; border-radius: 5px 5px 0 0;transition: all 300ms ease-in-out;}
.tabs .tab.active{position: relative; z-index: 9999; transform: translate(0,-4px); padding-top: 17px; opacity: 1;}
.tabs .tab:hover{ transform: translate(0,-4px);padding-top: 17px; opacity: 1;  }
.tabs .tabR{float:right;}
.tabs .dwnl{    cursor: pointer;
    color:black;
    position: relative;
    transition: all .3s ease-in-out;
    border-radius: 5px;
    padding: 9px 0px 9px 3px;
    text-align: center;
    width: 36px;}
.tabs .dwnl:hover{background: rgba(90, 106, 117, 0.23);}
.tabs .dwnl:hover span{opacity: 1;}
.tabs .dwnl span{
    position: absolute;
    background: #ffffff;
    display: block;
    border-radius: 5px;
    opacity: 0;
    transition: all .3s ease-in-out;
    z-index: 9999;
    box-shadow: 0px 8px 20px #0000001a;
    width: 140px;
    padding: 6px;
    left: -50%;
    margin: 13px 0 0 -38px;
}
.tabs .dwnl span:before{
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #ffffff;
    border-width: 6px;
    margin-left: -6px;
}


.table{width: 100%; border-collapse: collapse; }
.table td{vertical-align: top; padding: 5px 0;}
.table tr.top{opacity: .7;}
.table tr{position: relative;transition: all 300ms ease-in-out; border-radius: 5px; }
.table tr .cirout{padding: 8px 10px 10px 8px; }
.table tr .cir{  width: 10px; height: 10px;   border-radius: 5px; }
.table tr.green .cir{background: #64d5b8;}
.table tr.red .cir{background: #da6d6d;}
.table tr.orange .cir{background: #ea9b55;}
.table tr.yellow .cir{background: #efbd48;}
.table tr.blue .cir{background: #8cc1d8;}
.table td {text-overflow: ellipsis;}
.table td .crop{  cursor: pointer;  white-space: nowrap; display: block;  max-width: 1000px; overflow: hidden;text-overflow: ellipsis;}
.table td .infobox{    font-size: 10pt;
    padding: 10px;
    margin: 5px 10px 5px 0;
    border-radius: 5px;
    background: #e9edf0;}
.table td .infobox a{color:black;}
.table .btn{    padding: 3px 10px;margin: -6px 0;float: right;}


.cl{clear:left;}

.logo a{text-decoration: none; color:black;}
.logo h1{margin: 3px 0;}


#page{
   width: 100%; }


.content.menu{margin-top: 20px; margin-bottom: 0;}
.menu .logo{float:left;  padding: 0; opacity: 0.8; }
.menu .logo.logcent{margin: 0 auto; text-align: center; float:none; margin-top: 50px;}
.menu .logo img{max-width: 330px;     height: 55px; padding: 10px 0;}
.menu .menuright{float:right; padding: 0;position: relative;z-index: 120;}

.content{    margin: 0 auto 20px auto;max-width: 1280px;padding: 20px;color:#2d2d2d;}

.footer{text-align: center; font-size: 8pt; opacity: .4;}
.footer a{color:black;}



.settingsrow{

    margin: 0 0 0px 0;
    display: flex; /* equal height of the children */
}
.settingsrow .col {
    flex: 1; /* additionally, equal width */
    padding: 1em;
}
.settingsrow .overwhite {
    position: relative;;
    background: white;
    z-index: 99;
    margin: 0 0 5px 0;
}
.settingsrow .subline_divide{
    margin: -39px  10px 0 8px;
    height: 55px;
}

.inrow{
    display: flex;
}
.inrow .item{
    flex-grow: 1;
    flex: 1 1 0px;
    text-align: center;
   border-style: solid;
    border-color:#e0e4e7;
    border-width: 0 0 0 1px;
    height: 100%;
}



.grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
.grid .item{background: white;    margin: 0;transition: all 300ms ease-in-out;cursor: pointer;  padding: 15px; text-align: center; position: relative;}
.grid .item:hover{opacity: .9;  transform: translate(0,-2px); box-shadow: 0px 8px 20px #0000001a;}
.grid .item .photo{text-align: center; padding: 10px 0;}
.grid .item .photo img{max-width: 210px; height: 110px;}
.grid .item .photo i{font-size: 24pt; opacity: .6; margin: 10px 0;}



.grid .item .inrow2 {clear:both;}
.grid .item .inrow2:after {content: " "; position: relative; display: block; clear:both;}
.grid .item .inrow2 div{float:left; width: 50%;}

.grid .item .inrow3 {clear:both;}
.grid .item .inrow3:after {content: " "; position: relative; display: block; clear:both;}
.grid .item .inrow3 div{float:left; width: 33.33%;}

.grid .item .small{font-size: 10pt; text-align: left; opacity: 0.6;}
.grid .item .small-r{text-align: right;}
.grid .item .small-c{text-align: center;}
.grid .item .tit2{min-height: 48px;}

.grid .item .status{    width: 10px;
    height: 10px;
    margin: 2px 2px 0px 0;
    background: #dadada;
    border-radius: 50%;
    display: inline-block;
}
.grid .item .status.red{background: #da6d6d;}
.grid .item .status.orange{background: #ea9b55;}
.grid .item .status.green{background: #64d5b8;}

.line .item{width:20%; float:left;}
.line .item{background: white;    margin: 0;  padding: 15px; text-align: center; position: relative;}
.line .item .small{font-size: 10pt; text-align: left; opacity: 0.6;}
.line .item .small-c{text-align: center;}
.line .item tit2{min-height: 48px;}

.filemanager{ }
.filemanager .foldertopbar{ }
.filemanager .path{font-size: 10pt; opacity: .7; margin: 0 -10px 10px -10px;}
.filemanager .path span{font-size: 10pt; opacity: .7; color:black; text-decoration: none; display:inline-block; margin: 0 10px 0 10px; transition: all 300ms ease-in-out; cursor: pointer;}
.filemanager .path span:hover{opacity: .9;  transform: translate(0,-2px);}


.filemanager .folders{ margin: 0 -10px;}
.filemanager .folders .item{    margin: 0 10px 20px 10px;transition: all 300ms ease-in-out;cursor: pointer;float: left;width: 295px;background: white;box-shadow: 0px 8px 20px #0000001a;padding: 15px;}
.filemanager .folders .item:hover{opacity: .9;  transform: translate(0,-2px);}
.filemanager .folders .circle{    float: left;padding: 8px 0 0 0 ;background: #2f8ac6;color: white;border-radius: 50%;width: 40px;height: 40px;text-align: center; font-weight: bold;}
.filemanager .folders .circle.red{background: #da6d6d;}
.filemanager .folders .circle.orange{background: #ea9b55;}
.filemanager .folders .circle.green{background: #64d5b8;}
.filemanager .folders .circle .fa-folder-open{padding: 0 0 0 2px;}
.filemanager .folders .data{padding: 0 0 0 50px;}
.filemanager .folders .data strong{display:block;}
.filemanager .folders .data span{display:block;font-size: 10pt; opacity: .7;}
.filemanager .folders a{color:black;}



.content.formcontent{ backdrop-filter: blur(3px); max-width: 100%;    padding: 0px;    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    max-width: 100%;    background: #000000ad;    z-index: 999;}
.content.formcontent .formcontentout{    height: 100%;    margin: 0 auto;    max-width: 560px;    padding: 80px 30px;overflow:hidden; overflow-y: scroll;}
.content.formcontent.formmax .formcontentout{    max-width: 1060px; }
.content.formcontent .formcontentout.del{  padding: 180px 30px;}
.content.formcontent form{position: relative;    padding: 20px 20px 20px 20px;    background: white;      box-shadow: 0px 8px 20px #0000001a;    max-width: 500px;    margin: 0 auto;    }
.content.formcontent.formmax form{     max-width: 1000px;      }
.content.formcontent form strong{display:block; padding: 5px 0 30px 0;}
.content.formcontent form strong.title{padding: 5px 0 5px 0;}
.content.formcontent form strong.large{padding: 5px 0 5px 0; font-size: 22pt;}
.content.formcontent form p {  padding: 0 0 10px 0; margin: 0;}
.content.formcontent form p.small{font-size: 10pt; opacity: .8; padding: 0; margin: 0;}
.content.formcontent form label{width: 100%; opacity: .8; padding: 10px 0 5px 0; display: block; font-size: 10pt; font-weight: bold;}
.content.formcontent form select{width: 100%;}
.content.formcontent form input{width: 100%;}
.content.formcontent form input[readonly]{opacity: .7;}
.content.formcontent form .btn{float:right; margin: 20px 0 0 0;}
.content.formcontent form .fa-times{float: right;padding: 10px;cursor: pointer;margin: -8px -5px 0 0;transition: all 300ms ease-in-out;}
.content.formcontent form .fa-times:hover{opacity: .7; }


.content.formcontent form p.small .path{ color:black; text-decoration: none; display:inline-block; margin: 0 10px 0 10px; transition: all 300ms ease-in-out; cursor: pointer;}
.content.formcontent form p.small .path:hover{opacity: .9;  transform: translate(0,-2px);}



.filterform{position: relative; background: #e9edf0;

    display: flex;
}
.filterform .col-2{padding: 0;}
.filterform button{    padding: 15px 20px; margin: 0 0 0 5px; }
.filterform a{       background: white;

    display: block;
    text-decoration: none;
    color: black;
    padding: 7px 14px;
    margin: 5px 0 5px 5px;
}

.filterform input, .filterform select{background: none; border:none; background: white; margin: 5px 0 5px 5px}
.filterform input{ padding: 8px 10px;}
.filterform select{ padding: 10px 10px;}

.navig {
    margin: 10px 0 0 0;
    text-align: center;
    border: 1px solid #ecf9e3;
    border-width: 1px 0 0 0;
    padding: 10px 0 0 0;
}

.navig a, .navig strong{
    color: #472613;
    line-height: 36px;
    min-width: 38px;
    text-align: center;
    display: inline-block;
    margin: 2px;
    padding: 0 3px;
    background: #e9edf0;
    text-decoration: none;
}

.navig strong {
    background: #472613;
    color: White;
    font-weight: normal;
}

.navig span {
    display: inline-block;
    content: "...";
    color: #472613;
    line-height: 30px;
    margin: 0 5px;
}

.navig a:hover {
    background:#80b556;
    color: White;
    text-decoration: none;
}

.navig i {
    font-size: 1.2em;
}



p a {color:white; }



.chart{height: 100px; margin: 0 0 40px 0; position: relative; }
.chart.hours{}
.chart .point{float:left; padding: 0 2px 0 0;position: relative;    width: 8px;height: 100px;}
.chart.hours .point{}
.chart .point .vertical{position: absolute; bottom: -16px; opacity: .6; font-size: 8pt;}
.chart .point span{display:block;   background:  #ea9b55; position: absolute; bottom: 0;}
.chart.hours .point span{display:block; width: 6px; height: 6px; background: red; border-radius: 3px;}
.chart.week .point{  width: 7px;}
.chart.week .point span{display:block; width: 5px; height: 6px; background: red; border-radius: 4px;}
.chart.month .point{  width: 8px;}
.chart.month.preview .point{  width: 7.8px;}
.chart.month .point span{display:block; width: 6px; height: 6px; background: red; border-radius: 4px;}

.chart .point.red span{background: #da6d6d;}
.chart .point.green span{background: #64d5b8;}
.chart .point.yellow span{background: #efbd48;}
.chart .point.orange span{background: #ea9b55;}

.chart .max{position: absolute; font-size: 8pt; opacity: .6; z-index: 99; right: 20px; top: -10px;}
.chart .min{position: absolute; font-size: 8pt; opacity: .6; z-index: 99; right: 20px; bottom: 0px;}
.chart .aprox{position: absolute; font-size: 8pt; opacity: .4;   right: 20px; width: 1200px; border-bottom: 1px dashed #0000005e; text-align: right; }



.modal .row .colin.mvR{ margin: 0;  }
.modal .row .colin.mvL{ margin: 0 ;  }

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

    .menu .menuright{display:none; }

    h1{  font-size: 20pt; padding: 0 20px;}
    h2{  font-size: 16pt; padding: 0 20px;}
    p{ margin: 30px  20px;}
    p.main{font-size: 12pt;}

    .row{display:block;}
    .row .colin.mvR{ margin: -20px 0 0 0;  }
    .row .colin.mvL{ margin: 0 0 -20px 0 ;  }


    .row .colin.wthArrRight:before{ position: absolute;    bottom: -30px;    left: 0px;      top: auto;}
    .row .colin.wthArrLeft:before{ position: absolute;    top: -30px;    left: 0px;
        border-top: none;
        border-left:none;
        border-bottom: 30px solid red;
        border-right: 30px solid transparent;
    }
    .row .colin.green:before{border-bottom-color:#d8222e;}

    .modal .row .colin.mvR{ margin: -20px 0 0 0;  }
    .modal .row .colin.mvL{ margin: 0 0 -20px 0 ;  }

    .rozc .row{display: flex;flex-wrap: wrap}
    .rozc .row .col{flex: 0 0 50%;}


    .articles .row{display: flex;flex-wrap: wrap}
    .articles .row .col{flex: 0 0 100%;}

}



@keyframes loader {
    0% {stroke-dashoffset: 141; opacity: 0;}
    5%{opacity: 1;}
    50% {stroke-dashoffset: 0;}
    95%{opacity: 1;}
    100% {stroke-dashoffset: -141; opacity: 0;}

}


@keyframes blink {
    50% {opacity: .5}

}

.clear{clear:both;}


.foot{text-align: center; width: 100%; opacity: .3; font-size: 9pt; padding: 200px 0 100px 0;}
.foot a{color:black;}

.row .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11 {padding: 0 10px;}
.row{margin: -10px; }

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11 {min-height:1px; float: left;  position: relative;}
.col-1:after,.col-2:after,.col-3:after,.col-4:after,.col-5:after,.col-6:after,.col-7:after,.col-8:after,.col-9:after,.col-10:after,.col-11:after{ content: " "; clear: both; display: block; }

.col-1 { width: 8.333333333333332%; }
.col-2 { width: 16.666666666666664%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333333333333%; }
.col-5 { width: 41.66666666666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.333333333333336%; }
.col-8 { width: 66.66666666666666%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333333333334%; }
.col-11 { width: 91.66666666666666%; }
.col-12 { width: 100%; }


@media screen and (max-width: 710px) {
    .inrow .item{border-color: transparent; }
    .settingsrow{display:block;}
    .col-4 {  width: 100%;  }
    .col-6, .col-5, .col-7 {  width: 100%;  float: none;  margin: 1.2em 0;  }
}

@media screen and (max-width: 710px) {
    .col-2, .col-3 {  width: 50%;    }
    .col-9 { width: 100%; }
}

@media screen and (max-width: 470px) {
    .col-4 {  width: 100%;  margin: 10px auto;  float: none;  }
    .col-1 {  width: 100%;   float: none;  }
    .col-10 {  width: 100%;   float: none;  }
}