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: #f8fff2;
}
body {min-height:100%;
    font-family: 'Manrope', sans-serif;
    margin: 0;
    background-size: cover;
    background-attachment: fixed;
    padding-left: 100px;
}

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


.notapproved{opacity: 0.5;}

.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 a{ 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 a:hover{  opacity: .9; box-shadow: 0px 8px 20px #0000001a; transform: translate(0,-2px);}
.sideline a.active{     background: #80b556; color:white;}
.sideline a .fal{    display: block;
    font-size: 18pt;
    padding: 8px;}
.sideline a span{display:block;font-size: 10pt;}
.sideline a strong{     position: absolute;top: 14px;font-size: 10pt;left: 55px;background: #ecf9e3;color: black;height: 30px;border-radius: 15px;padding: 5px 12px; }
.sideline a.active strong{display: none;}


.usericon{    border-radius: 50%;background: #ecf9e3;float: left;text-align: center;width: 40px;height: 40px;padding: 8px 0 0 0; background-size: cover; background-position: center;}
.userbox .usericon{    border-radius: 50%;background: #ecf9e3;float: left;text-align: center;width: 40px;height: 40px;padding: 8px 0 0 0; background-size: cover; background-position: center;}
.userbox .userbox-in{ padding: 0 0 0 50px;  }
.letterbox{background: #80b556;    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;   position: relative; z-index: 99; box-shadow: 0px 8px 20px #0000001a; padding: 15px 15px 16px 15px;; width: 280px;}
.userhead .usericon{    border-radius: 50%;background: #ecf9e3;float: left;text-align: center;width: 40px;height: 40px;padding: 8px 0 0 0; background-position: center; background-size: cover;}
.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 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_divide{
    width: 26px;
    height: 39px;
    margin: -24px 10px 0 8px;
    background: transparent;
    border-style: solid;
    border-color: #c7c7c7;
    border-width: 0 0 3px 3px;
    float: left;
    border-radius: 0 0 0 9px;

}

input{padding: 14px 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: 14px 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: 14px 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: -35px 15px 0 0;z-index: 999;position: relative;opacity: .6; transform: scale(1.2,1.2);}


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

.label{    float: left;background: #80b556;color: white;margin: 0 8px 5px 0;font-size: 10pt;padding: 5px 10px; text-decoration: none;}
.label.priority{ background: #33c0fd; color:white;}
.label.priority2{ background: #fd335e; color:white;}
.label.approve{ background: black; color:white;}
.label.light{    background: #80b556; opacity:  .6;}

.board{margin: 0 -10px;}
.board .sq{    width: 33.3333%;float: left;padding: 10px;}
.board .sq .sqin{    background: white; box-shadow: 0px 8px 20px #0000001a;padding: 15px;}
.board .sq .sqin .label{    float: left;background: #80b556;color: white;margin: 0 8px 5px 0;font-size: 10pt;padding: 5px 10px;}
.board .sq .sqin .label.priority{ background: #ecf9e3; color:black;}
.board .sq .sqin strong{display: block;clear: both;margin: 0; padding: 5px 0;}
.board .sq .sqin p{font-size: 10pt; margin: 0; padding: 5px 0;}
.board .sq .over{max-height: 200px; overflow: hidden; position: relative; }
.board .sq .over .overbtn{position: absolute;  bottom: 0; left: 0; width: 100%; padding: 70px 10px 0px 10px; font-weight: bold; text-align: center; cursor: pointer;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 8%, rgba(255,255,255,1) 99%);
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.08) 8%,rgba(255,255,255,1) 99%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.08) 8%,rgba(255,255,255,1) 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

}


.boardsearch {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns:  33.333% 33.333% 33.333% ;
    grid-auto-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.boardsearch .sq{width: 100%; }
.boardsearch .sq .sqin{height: 100%;}


.editbar{clear:both;}
.editbar span{font-size: 10pt;opacity: .7;}
.editbarline 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;}
.inlinebtn{cursor: pointer;  }
.editbar .inlinebtn{cursor: pointer;  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); }


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

.sharebox{    box-shadow: 0px 8px 20px #0000001a;
    margin: 0 -10px 10px -10px;
    padding: 10px;}

.calendar { background: white; box-shadow: 0px 8px 20px #0000001a;padding: 15px;}
.calendar .calcontrol{}
.calendar .calcontrol strong{margin: 10px 0 0 0;display: block; float:left;}
.calendar .calcontrol .controls{margin: -10px 0 0 0;}
.calendar .calcontrol .controls div{float:right; padding: 10px; transition: all 300ms ease-in-out; cursor: pointer;}
.calendar .calcontrol .controls div:hover{opacity: .9;  transform: translate(0,-2px);}
.calendar .calcontrol .controls .move{}
.calendar .calcontrol .controls .move i{font-size: 24pt;}

.calendar .calcontent{ position: relative; height: 150px; }
.calendar .calcontent .day{float:left; width: 14.285%;}
.calendar .calcontent .day.blank{  height: 140px;  margin:-1px 0 0 -1px;}
.calendar .calcontent .day.event{border: 1px solid white;background: #ecf9e3;margin: -1px 0 0 -1px;height: 150px;padding: 5px; overflow:hidden; position: relative;}
.calendar .calcontent .day.event .more{position: absolute; bottom: 0; width: 100%;color: #80b556; font-size: 9pt; font-weight: bold; cursor: pointer; text-align: center; padding: 15px 0 0 0;
    text-shadow: 0 0 10px #ecf9e3;
    background: -moz-linear-gradient(top,  rgba(233,237,240,0) 0%, rgba(233,237,240,0.87) 100%);
    background: -webkit-linear-gradient(top,  rgba(233,237,240,0) 0%,rgba(233,237,240,0.87) 100%);
    background: linear-gradient(to bottom,  rgba(233,237,240,0) 0%,rgba(233,237,240,0.87) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f2f5f8', endColorstr='#def2f5f8',GradientType=0 );




}

#uploadreact{position: relative;}
#uploadreact .tooltip{display:none;}
#uploadreact.enter .tooltip{     display: block;position: absolute;width: 100%;min-height: 100%;background: #ce7a22d9;z-index: 9;color: white;padding: 40px; }
#uploadreact.enter .tooltip .tooltipin{padding: 40px;border-color: #ffffff47;border-style: dashed;border-width: 2px;}

.calendar .calcontent .day .event{background: #80b556; color:white;transition: all 300ms ease-in-out; padding: 5px; margin: 0 0 5px 0; cursor: pointer;}
.calendar .calcontent .day .event:hover{opacity: .9;  transform: translate(0,-1px);}
.calendar .calcontent .day .event span{font-size: 9pt; display: block; float:left; padding: 1px 0;}
.calendar .calcontent .day .event strong{display:block; padding: 0 0 0 34px; font-size: 10pt;}


.calendar .calcontent .day.info{font-size: 9pt; opacity: .6; padding: 0 0 10px 0;}
.calendar .calcontent.week .day.info{ padding: 0 0 0 0;}
.calendar .calcontent.week{}
.calendar .calcontent.week .time{width: 2%; float:left; padding: 25px 0 0 0;}
.calendar .calcontent.week .time .hour{font-size: 9pt; opacity: .6; padding: 5px 0 0 0; height: 160px; position: relative;}
.calendar .calcontent.week .time .hour:before{content: ""; position: absolute; top: 0; width: 1210px; left: 0; height: 1px; background: #ecf9e3;}
.calendar .calcontent.week .day{width: 14%; }
.calendar .calcontent .day .date{font-size: 18pt;opacity: .6; font-weight: bold; padding: 0 0 0 5px; cursor: pointer;}
.calendar .calcontent.week .day .date{font-size: 12pt; padding: 0;}

.calendar .calcontent.week .events{position: relative;}
.calendar .calcontent.week .event{position: absolute;min-width: 90%; outline: solid 1px white;}
.calendar .calcontent.week .event:hover{z-index: 888;}

.bootstrap-datetimepicker-widget{position: absolute; max-width: 425px; z-index: 999; background: white; box-shadow: 0px 8px 20px #0000001a;padding: 15px; margin: -10px 0 0 10px;}
.bootstrap-datetimepicker-widget .datepicker{float:left; }
.bootstrap-datetimepicker-widget .timepicker{float:left;     margin: 32px 0 0 14px; border-left: solid 1px #80b556}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before{display:none;}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after{display:none;}
.bootstrap-datetimepicker-widget .glyphicon{ display: inline-block;  font-family: 'Font Awesome 5 Pro';    font-weight: 300;font-style: normal;font-weight: normal; color:#80b556;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.bootstrap-datetimepicker-widget .glyphicon-chevron-up:before{content: "\f106";}
.bootstrap-datetimepicker-widget .glyphicon-chevron-down:before{content: "\f107";}
.bootstrap-datetimepicker-widget .glyphicon-chevron-left:before{content: "\f104";}
.bootstrap-datetimepicker-widget .glyphicon-chevron-right:before{content: "\f105";}
.bootstrap-datetimepicker-widget .glyphicon-chevron-up:before, .bootstrap-datetimepicker-widget .glyphicon-chevron-down:before{    margin: 13px 0;    display: block;    font-size: 20pt;}



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: #8cda6d;}
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 .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 50px 10px 10px !important;}

.removefile{background: #da6d6d; color:white;  position: absolute; width: 40px; height: 50px; right: 0; text-align: center; padding: 10px;}

form .fileUpload .bar{background: #8cda6d;  height: 40px;color:white;  padding: 10px 0;  }

.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);}



.crumbs{font-size: 10pt; opacity: .7; margin: 0 -10px 20px -10px;}
.crumbs span, .crumbs a{font-size: 10pt; opacity: .7; color:black; text-decoration: none; display:inline-block; margin: 0 10px 0 10px; transition: all 300ms ease-in-out;}
.crumbs a: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: #80b556;color: white;border-radius: 50%;width: 40px;height: 40px;text-align: center; font-weight: bold;}
.filemanager .folders .circle.red{background: #ecf9e3; color:black;}
.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;}


.filemanager.view-row .folders .item{width: 100%;     margin: 0 10px 0 10px; background: transparent; box-shadow: none; border-color: gainsboro; border-width: 0 0 1px 0; border-style: solid; }
.filemanager.view-row .folders .item .circle{width: 24px; height: 24px; background: transparent; padding: 0;}
.filemanager.view-row .folders .item .circle .fal{color: #80b556;}
.filemanager.view-row .folders .item strong{display: inline-block;}
.filemanager.view-row .folders .item span{display: inline-block; padding-left: 20px;}
.filemanager.view-row .files{display: block;}
.filemanager.view-row .files .item{width: 100%;  text-align: left;   margin: 0 10px 0 10px; background: transparent; box-shadow: none; border-color: gainsboro; border-width: 0 0 1px 0; border-style: solid;     padding: 15px 15px 15px 5px;}
.filemanager.view-row .files .item .nahledcont{ display: inline-block; width: 40px;}
.filemanager.view-row .files .item .nahledicon{ display: inline-block; width: 35px; height: 24px; padding: 0 5px 0 0; margin: 0; border-radius: none; background: none; font-size: 12pt;}
.filemanager.view-row .files .item .nahledicon .fal{color: #80b556;}
.filemanager.view-row .files .item .data{ display: inline-block; padding-left: 8px;}
.filemanager.view-row .files .item .nahled{    max-width: 40px; max-height: 20px;}
.filemanager.view-row .files .item .data strong{display: inline-block;}
.filemanager.view-row .files .item .data span{display: inline-block; padding-left: 20px;}

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

.collapse{    border-style: solid;
    border-width: 1px;
    border-color: lightgray;
    margin: 10px 0px;}
.collapse .collapselabel{display: block;     padding: 10px;}
.collapse .collapselabel:hover{background: #f8f8f8;}
.collapse .collapsecontent{display:none; padding: 10px;}
.collapse.open .collapsecontent{display:block;}

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

.filemanager.view-row .files .item .nahledicon.yellow .fal{color: #efbd48;}
.filemanager.view-row .files .item .nahledicon.blue .fal{color: #85caf5;}
.filemanager.view-row .files .item .nahledicon.red .fal{color: #da6d6d;}
.filemanager.view-row .files .item .nahledicon.green .fal{color: #8cda6d;}
.filemanager.view-row .files .item .nahledicon.orange .fal{color: #ea9b55;}
.filemanager.view-row .files .item .nahledicon.grey .fal{color: #dadada;}

.filemanager.view-row .files .nahledcont{min-height: auto;}

.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: #8cda6d;}
.message.red{background: #da6d6d;}
.message .fal{float:left; font-size: 22px;}
.message .message-in{padding: 0 0 0 50px;}

.filemanager .files{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-columns:  16.666% 16.666% 16.666% 16.666% 16.666% 16.666% ;
    grid-auto-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 10px;
}
.filemanager .files .item{    margin: 0;transition: all 300ms ease-in-out;cursor: pointer;  padding: 15px; text-align: center; position: relative;}
.filemanager .files .item:hover{opacity: .9;  transform: translate(0,-2px); box-shadow: 0px 8px 20px #0000001a;}
.filemanager .files .nahled{max-width: 100%; max-height: 120px; display: inline-block; }
.filemanager .files .nahledcont img{


    background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
    background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
    background-repeat: repeat, repeat;
    background-position: 0px 0, 5px 5px;
    -webkit-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    -webkit-background-origin: padding-box, padding-box;
    background-origin: padding-box, padding-box;
    -webkit-background-clip: border-box, border-box;
    background-clip: border-box, border-box;
    -webkit-background-size: 10px 10px, 10px 10px;
    background-size: 10px 10px, 10px 10px;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
    -webkit-transform: scaleX(1) scaleY(1) scaleZ(1);
    transform: scaleX(1) scaleY(1) scaleZ(1);

}
.filemanager .files .nahledcont{position: relative; display:block;     min-height: 124px;
    display: flex;
    align-items: center;
    justify-content: center;}
.filemanager .files .nahledcont:before{
    content: " ";
    display: none;
    position: absolute;
    width: 120px;
    height: 29px;
    background-image: url(/img/filecorner.png);
    background-size:cover;
    background-position: top right;
    top: 0;
    right: 0;
    z-index: 9999;
}
.filemanager .files .nahledicon{   margin: 22px auto; padding: 16px 0 0 0;background: #80b556;color: white;border-radius: 50%;width: 80px;height: 80px;text-align: center; font-size:22pt; text-align: center;}
.filemanager .files .nahledicon.yellow{background: #efbd48;}
.filemanager .files .nahledicon.blue{background: #85caf5;}
.filemanager .files .nahledicon.red{background: #da6d6d;}
.filemanager .files .nahledicon.green{background: #8cda6d;}
.filemanager .files .nahledicon.orange{background: #ea9b55;}
.filemanager .files .nahledicon.grey{background: #dadada;}
.filemanager .files .data{text-align: center;}
.filemanager .files .data strong{display:block;}
.filemanager .files .data span{display:inline-block;font-size: 10pt; opacity: .7;}



.btn{padding: 15px 30px; text-decoration: none; background: #80b556; 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.btn2{color: #80b556;
    background: #ecf9e3;}
.btn.btnR{background: #da6d6d;}
.btn.btnG{background: #8cda6d;}
.btn.btnIn{color: #80b556;background: #ecf9e3;padding: 15px 15px;}
.btn.btnBlock{display: block;
    max-width: 200px;
    float: none !important;
    margin: 10px auto !important;}
.btn.flR{float:right; margin: 0 0 10px 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;
    padding: 4px 11px;
    margin: 0 0 0 10px;}

.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: #8cda6d;}

.userphoto{border-radius: 50%; width: 50px; height: 50px; background-position: center; background-size: cover; display: inline-block;}
.userphoto.userphotosmall{width: 22px; height: 22px;}
.userphoto.inline{margin: 0 0 -6px 0;}

.editbar{display: block; float:right; margin: 0 0 20px 0;  }
table .editbar{display: inline-block; float:none; margin: 0;  }
@media screen and (max-width: 940px) {
    .userphoto.userphotosmall{width: 24px; height: 24px;}
    .userphoto.inline{margin: 0 0 -6px 0;}

}
.userphoto.userphotosmallset{width: 24px; height: 24px;}
.userphoto.userphotosmallset.inline{margin: 0 0 -6px 0;}

.line.wphoto{position: relative; height: auto; padding-left: 250px;}
.line.wphoto2{position: relative; height: auto; padding-left: 300px;}
.line .perexphoto{position: absolute; width: 230px; margin: -20px 20px -20px -20px; left: 20px;  height: 100%; background-size: cover; background-position: center;}
.line .perexphoto2{position: absolute; width: 280px; margin: -20px 20px -20px -20px; left: 20px;  height: 100%; max-height: 300px; background-size: cover; background-position: center;}

.line.chat-line{}
.line.chat-line p{padding: 0; margin: 0;}
.line.chat-line.chat-otherside{width: 60%;}
.line.chat-line.chat-me{width: 60%; float:right;}
.line.chat-line.chat-me.op{ opacity: .6;}

.line.infoG{background: #8cda6d; color:White; font-weight: bold; font-size: 10pt;}
.line.infoR{background: #da6d6d; color:White; font-weight: bold; font-size: 10pt;}
.line.info2{background: #ea9b55; color:White; font-weight: bold; font-size: 10pt;}
.line.lineshort{  max-width: 500px; margin: 0 auto;}

.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: 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: #8cda6d;}
.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: #85caf5;}

.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: 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;}

.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: #8cda6d;}
.table tr.red .cir{background: #da6d6d;}
.table tr.orange .cir{background: #ea9b55;}
.table tr.yellow .cir{background: #efbd48;}
.table tr.blue .cir{background: #85caf5;}
.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: #ecf9e3;}
.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: 0px;
    left: 0;
    margin: 0; padding: 0 0 0 100px;
    width: 100%;
    max-width: 100%;
    position: fixed;
    z-index: 99;
    box-shadow: 0px 8px 20px #0000001a;
}
.menu .logo{float:left;  padding: 0;  }
.menu .logo.logcent{margin: 0 auto; text-align: center; float:none; margin-top: 50px; max-width: 500px; }
.menu .logo img{max-width: 330px;     height: 55px; padding: 10px 0;}
.menu .menuright{float:right; padding: 0;}

.hb{display:none;}
.resp-search{display:none;}
.resp-user{display:none;}

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

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


.content.formcontent{ 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: 100%;   padding: 80px 30px;overflow:hidden; overflow-y: scroll;}
.content.formcontent.formmax .formcontentout{    max-width: 100%; }
.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);}


.viewchanger{float:right;     margin: 0 0 0 10px;}
.viewchanger .btn{padding: 15px 15px;     background: transparent;}
.viewchanger .btn.active{  background: #ecf9e3;}
.viewchanger .btn .fal{     transform: scale(1) translate(0,0); }


p a {color:white; }


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




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

    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: #80b556;
    line-height: 36px;
    min-width: 38px;
    text-align: center;
    display: inline-block;
    margin: 2px;
    padding: 0 3px;
    background: #ecf9e3;
    text-decoration: none;
}

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

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

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

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




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


    .resp-search{     display: block;
        z-index: 120;
        position: fixed;
        top: 12px;
        right: 60px;
        width: 45px;
        height: 45px;
        background: transparent;
        text-align: center;
        padding: 10px 0 0 0;}

    .resp-search .fa{color:white;}


    .resp-user{     display: block;
        z-index: 150;
        position: fixed;
        top: 12px;
        right: 12px;
        width: 45px;
        height: 45px;
        background: #fce61d;
        text-align: center;
        padding: 10px 0 0 0;}

    .resp-user .fa{color:#80b556;}



    .menu.content .userhead{display:none;}
    .menu.content .userhead.visible{display: block;
        position: fixed;
        z-index: 140;
        top: 0;
        right: 0;}
    .menu.content .userhead.visible .rollout{display:block;}


    .menu.content .hledaniform{display:none;}
    .menu.content .hledaniform.visible{    display: block;
        background: white;
        position: fixed;
        top: 71px;box-shadow: 0px 8px 20px #0000001a;
        padding: 10px;
        left: 0;
        width: 100%;}
    .menu.content .hledaniform.visible:before{
        position: absolute;
        content: " ";
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid white;
        right: 70px;
        top: -10px;
    }

    .hledaniform input {
        min-width: 100%;    margin: 0;
    }


    h1{  font-size: 20pt; padding: 0 0px;}
    h2{  font-size: 16pt; padding: 0 0px;}
    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%;}


    .filemanager .files {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-columns: 25% 25% 25% 25%;
        grid-auto-rows: 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

}



@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) {

.filterform{display: none;}


    .editbar{padding: 0 0 10px 0;display: block;
        min-height: 37px;}

    .btn{padding: 10px 20px; margin: 0 5px 5px 0; }
    .btn.btnIn{padding: 10px 20px; }


    .clearresp{clear:both;}


    .board .sq {width: 50%; }

    .filemanager .files {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-columns: 50% 50%;
        grid-auto-rows: 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }



    .boardsearch {

        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-columns: 50% 50%;
        grid-auto-rows: 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }
    .board.boardsearch .sq {
        width: 100%;
    }


    .line.wphoto {     padding-left: 20px;    }
    .line.wphoto2 {     padding-left: 20px;    }


    .line .perexphoto {   width: 100%; position: relative; height: 250px; margin: 0 -20px 20px -20px; }
    .line .perexphoto2 {   width: 100%; position: relative; height: 250px; margin: 0 -20px 20px -20px; }






    .col-4 {  width: 100%;  }
    .col-6, .col-5, .col-7 {  width: 100%;  float: none;  margin: 1.2em 0;  }


    .col-2, .col-3 {  width: 50%;    }
    .col-9 { width: 100%; }

    table .resphide{display:none;}
    
}

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



    .filemanager .files {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-columns: 100%;
        grid-auto-rows: 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

    .sideline{display: none; padding-top: 70px;}
    .sideline.visible{display: block;}
    body{padding-left: 0;}
    body{padding-left: 0;}
    .content.menu {        padding: 0 0 0 50px; }

    .hb{     display: block;
    z-index: 150;
    position: fixed;
    top: 12px;
    left: 12px;
    width: 45px;
    height: 45px;
    background: #ecf9e3;
    text-align: center;
    padding: 10px 0 0 0;}

   .hb .fa{color:#80b556;}
    .sideline a {    width: 250px;
        height: auto;
        padding: 5px;
        text-align: left; }
    .sideline a .fal { display: inline-block;   width: 40px;  font-size: 14pt;     text-align: right; }
    .sideline a span { display: inline-block; }
    .sideline a strong { left: auto;        right: 10px;        top: 7px; }

    .board .sq {width: 100%; }

    .col-4 {  width: 100%;  margin: 10px auto;  float: none;  }
    .col-1 {  width: 100%;   float: none;  }
    .col-10 {  width: 100%;   float: none;  }
}

@media (max-width: 460px) {
    .navig span {
        display: block;
        line-height: 10px;
        height: 20px;
    }
}