div,span.body,input,li,ul,textarea,a {-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: #f4f4f4;
}
body {min-height:100%;
    margin: 0;
    background-size: cover;
    background-attachment: fixed;
}
p.smaller{text-align: center;
    font-size: 9pt; opacity: .9;}

table.logtable{border-collapse: collapse;width: 100%;}
table.logtable td{border-style: solid; border-width: 0 0 1px 0; padding: 5px 10px; border-color: lightgray}

.filters{display: flex;

    width: 100%;
    align-items: center;
    gap: 10px;}
.filters .filter{ flex: 1; position: relative;z-index: 999;}
.filters .filter:last-child {
    flex: 0 0 auto;
}
.filters button {
    white-space: nowrap;
}
.filters .filter label{display: block; opacity: .8; font-size: 9pt; padding: 5px 0;}
.filters .filter select, .filters .filter input{width: 100%;}


.filter .extras{display: none;}
.filter:hover .extras .btn{background: #46AACB; }
.filter:hover .extras{
    display: block;
    position: absolute;

    left: -5px;
    z-index: 9999;
    background: white;
    border-radius: 5px;
    padding: 5px;
    box-shadow: 0px 12px 12px #00000061;
    width: calc(200% + 20px);
}

.boxes{display: flex;
    width: 100%;
    align-items: center;
    margin: 0 0 10px 0;
    gap: 10px;}
.boxes .box{position: relative; flex: 1; padding: 10px 15px; background: #17244E; color:white; border-radius: 8px;  box-shadow: 0px 8px 20px #0000001a; }
.boxes .box.green{background: #17244E;}
.boxes .box.blue{background: #46AACB;}
.boxes .box.red{background: #db1a6f;}
.boxes .box.grey{background: #f4f4f4; color:black;}
.boxes .box.grey i{color: darkgray; top: 16px;}
.boxes .box label{opacity: .8; font-size: 9pt;}
.boxes .box .num{font-weight: bold; font-size: 16pt;}
.boxes .box .subnum{line-height: 12pt;}
.boxes .box .note{opacity: .8; font-size: 9pt; line-height: 12pt;}
.boxes .box i{position: absolute; right: 16px; top: 22px; color:white; font-size: 25pt; opacity: .4;}


.boxes.lazyload .box label{width: 160px; display: inline-block;}
.boxes.lazyload .box .num{width: 200px;}
.boxes.lazyload .box .note{width: 180px;}

.boxes.lazyload .box{opacity: .6; background: grey;

/* Grey animated gradient */
background: linear-gradient(
120deg,
   #e0e0e0 0%,
#cfcfcf 25%,
#bdbdbd 50%,
#cfcfcf 75%,
#e0e0e0 100%
);
background-size: 300% 300%;
animation: moveGradient 3s ease infinite;
}

/* Animation */
@keyframes moveGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


.maintable{width: 100%; border-collapse: collapse;  font-size: 10pt;}
.maintable th, .maintable td{padding: 10px 5px;}
.maintable th{ text-align: left;}
.maintable th{background: #f4f4f4;}
.maintable th:first-child{border-radius: 5px 0 0 0;}
.maintable th:last-child{border-radius: 0 5px 0 0;}
.maintable span{opacity: .7; font-size: 9pt;}
.maintable .cena{font-weight: bold; text-align: right;}

.maintable td{border-color: #f4f4f4;border-style: solid; border-width: 0 0 1px 0;}
.maintable td:last-child{text-align: right;}



.usertable{width: 100%; border-collapse: collapse;  font-size: 10pt;}
.usertable th, .usertable td{padding: 10px 10px;}
.usertable th{text-align: left; }
.usertable th{background: #f4f4f4;}
.usertable th:first-child{border-radius: 5px 0 0 0;}
.usertable th:last-child{border-radius: 0 5px 0 0;}
.usertable .label{opacity: .7;
    font-size: 9pt;
    background: #f4f4f4;
    padding: 5px 10px;
    margin: 0 0 0 5px;
    border-radius: 10px 10px 10px 0;}
.usertable select{padding: 7px 10px;}
.usertable .rmicon{
    padding: 8px 12px;
    text-decoration: none;
    background: #db1a6f;
    border-style: none;
    border-radius: 7px;
    cursor: pointer;
    display: inline-block;
    font-size: 10pt;
    font-weight: bold;
    text-align: center;
    color: white;
}
.usertable .rmicon.disabled{opacity: .6; background: black;}

.usertable td{border-color: #f4f4f4;border-style: solid; border-width: 0 0 1px 0;  }


.origprice{position: relative; cursor: pointer;}
.origprice:hover .origprice-text{display: block;}
.origprice i{opacity: .4;}
.origprice .origprice-text{
    display: none;
    position: absolute;
    right: -54px;
    top: -18px;
    border-radius: 10px 10px 10px 0;
    font-size: 9pt;
    padding: 4px 8px;
    background: white;
    box-shadow: 0px 8px 20px #00000063;
}

.crw{position: relative;
    padding: 20px 15px 20px 15px;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 3px 20px #0000001a;
    margin: -15px 0 0 0;}
.crw.all{ border-radius: 0 5px 5px 5px;}
.crawltable{width: 100%; border-collapse: collapse; }
.crawltable td{vertical-align: top; padding: 5px 0;}
.line:hover{box-shadow: 0px 8px 20px #0000001a;  }
 .cirout{padding: 8px 10px 10px 8px; }
 .cir{  width: 10px; height: 10px;   border-radius: 5px; display: inline-block; }
.green.cir{background: #8cda6d;}
.red.cir{background: #da6d6d;}
.orange.cir{background: #ea9b55;}
.yellow.cir{background: #efbd48;}
.blue.cir{background: #85caf5;}
.crawltable td {text-overflow: ellipsis;}
.crawltable td .crop{  cursor: pointer;  white-space: nowrap; display: block;  max-width: 1000px; overflow: hidden;text-overflow: ellipsis;}
.crawltable td .infobox{    font-size: 10pt;
    padding: 10px;
    margin: 5px 10px 5px 0;
    border-radius: 5px;
    background: #e9edf0;}
.crawltable td .infobox a{color:black;}

.content.formnew{    padding: 200px;position: fixed;top: 0;left: 0;width: 100%;height: 100%;max-width: 100%;background: #000000bf;z-index: 9999;}
.content.formnew form{position: relative; padding: 20px 20px 20px 20px; background: white; border-radius: 5px;  box-shadow: 0px 8px 20px #0000001a;    max-width: 500px; margin: 0 auto;}
.content.formnew form strong{display:block; padding: 5px 0 30px 0;}
.content.formnew form label{width: 100%; opacity: .8; padding: 10px 0 5px 0; display: block; font-size: 10pt; font-weight: bold;}
.content.formnew form select{width: 100%;}
.content.formnew form input{width: 100%;}
.content.formnew form input:read-only{opacity: .8; background: #efefef;}
.content.formnew form .formhelp{opacity: .8; font-size: 10pt; margin: 0 0 5px 0;}
.content.formnew form .btn{float:right; margin: 15px 0 0 0;}
.content.formnew form .fa-times{
    box-sizing: border-box;
    cursor: pointer;
    height: 34px;
    width: 34px;
    padding: 10px 0;
    border-radius: 50%;
    background: #f4f4f4;
    text-align: center;
    color: black;
    float:right;
    margin: 0 0 20px 0;
   margin: -8px -5px 0 0;transition: all 300ms ease-in-out;}
.content.formnew form .fa-times:hover{opacity: .7; }

input, select, textarea{padding: 8px 12px; background: white; border: solid 1px #dadada; border-radius: 7px;   display: inline-block; font-size: 10pt; font-weight: bold;text-align: left; color:black;transition: all 300ms ease-in-out; }
input:focus, select:focus, textarea:focus{outline: none; background:#f1f1f1; }
.btn{  padding: 9px 12px; text-decoration: none; background: #17244E; border-style:none; border-radius: 7px; 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{background: #46AACB;}
.btn.btnG{background: #db1a6f;}
.btn.btn3{background: #46AACB;}




.form-row {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 8px 16px;
    align-items: center;
    margin-bottom: 12px;
}

.form-row > label:first-child {
    font-weight: 600;
}

.form-row input[type="text"],
.form-row input[type="date"],
.form-row input[type="number"],
.form-row select,
.form-row textarea {
    width: 100%;
    box-sizing: border-box;
}

.form-row--checks {
    align-items: start;
}

.checkbox-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.checkbox-group label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
}

.error {
    grid-column: 2;
    color: #b00020;
    font-size: 0.9em;
}

.hidden {
    display: none;
}

@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .error {
        grid-column: auto;
    }
}


.toasters{position: fixed; bottom: 0; right: 10px; z-index: 9999;}
.toasters .toast{
    background: #17244e;
    color: white;
    padding: 10px 30px 10px 15px;
    margin: 0 0 10px 0;
    border-radius: 5px;
    min-width: 220px;
    font-size: 11pt;
    border-radius: 10px 10px 10px 0;
}
.toast span{opacity: .4;
    position: absolute;
    right: 10px;}

.sidepanel .fa-times{
    box-sizing: border-box;
    cursor: pointer;
    height: 34px;
    width: 34px;
    padding: 10px 0;
    border-radius: 50%;
    background: #f4f4f4;
    text-align: center;
    color: black;
    margin: 0 0 20px 0;
}

.sidepanel pre{    background: #f9f9f9;
    font-size: 10pt;
    padding: 15px;}

::selection {
    color: #db1a6f;
    background: #f4f4f4;
}

.sidepanel{
    transition: left 200ms ease-in-out;
    left: 100%;
    padding: 20px;
    width: 50%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 0;
    background: white;
    box-shadow: 0px 8px 20px #0000001a;
    z-index: 999;
}



.hidden {
    display: none;
}

.error {
    color: #b00020;
    font-size: 0.9em;
}

input:invalid,
select:invalid {
    border-color: #b00020;
}


.showallsources{cursor: pointer; display: inline-block; padding: 5px 10px;background: #d9dddf;border-radius: 5px;margin: -5px -5px -5px 0;transition: all 300ms ease-in-out;}
.showallsources:hover{opacity: .7;}
.line{
    position: relative; padding: 10px; background: white; border-radius: 8px;  box-shadow: 0px 8px 20px #0000001a;
    margin: 0 0 10px 0;
}


.line .btnspace{position: absolute; right: 20px; top: 20px; }
.line .btnspace .btn{margin: 0 0 0 10px;}
.line .url{ opacity: .7; font-size: 10pt; }
.infotable{ opacity: .8; font-size: 10pt; }
.infotable td{padding-right: 30px;}
.infotable span{display: block; opacity: .6;}
.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;}

.load{opacity: .4;}


.cl{clear:both;}

.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  0 0 20px;}
.menu .logo img{max-width: 330px;}
.menu .buttons{float:left; padding: 0 0 0 40px; text-align: center; }
.menu .menuright{float:right; padding: 0 20px 0 0;}

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

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

p a {color:white; }

.toolbar{text-align: right;}
.addnew{
    display: inline-block;
    padding: 0 0 10px 0;
}

.deleteajax, .previewajax{
    color: black;
    background: rgb(204 204 204 / 42%);
    border-radius: 5px;
    padding: 7px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 8pt;
    font-weight: bold;
    text-align: center;
    margin: -6px 0 -6px 5px;
}

.username{float: right; padding: 0px 5px 0 0;}
.username .usericon{
    float: left;
    display: block;
    color: white;
    background: #46AACB;
    border-radius: 50%;
    padding: 10px;
    width: 38px;
    height: 38px;
    text-align: center;
    margin: 0 10px 0 0;
}
.username .username{display: block; float:left;}
.username span{display:block; font-size: 10pt; opacity: .6; }

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

}


.content form.authform input {
    -webkit-appearance: none;
    width: 200px;
    letter-spacing: 14px;
    display: block;
    text-align: center;
    font-size: 16pt;
    margin: 10px 0;
    padding: 10px;
}

.content form.authform .btn {
    float: none;
    padding: 15px 30px;
    margin: 20px auto 0 auto;
    display: block;
}


.line.lineshort {
    max-width: 500px;
    margin: 0 auto;
}

.line.infoR {
    background: #da6d6d;
    color: White;
    font-weight: bold;
    font-size: 10pt;
}
.line {
    position: relative;
    padding: 20px 20px 20px 20px;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 8px 20px #0000001a;
    margin: 0 0 20px 0;
}


@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;}
.foot img{max-width: 120px; margin: 10px;}