@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root{--pri:rgb(0, 68, 146);--sec:#BBBBBB;--the:#E2E2E2;--four:#989898;--five:#139200;--sex:#c0ce00;--red:red;--prio40:rgba(0, 68, 146,0.6)}
*{font-family: 'Roboto', sans-serif;box-sizing: border-box; margin: 0; padding: 0;}
input:focus, button{outline: none;}
.row{display: flex;flex-wrap: wrap;}
.n-fx{flex:none}
.col-1{flex:1}.col-2{flex:2}.col-3{flex:3}.col-4{flex:4}.col-5{flex:5}.col-6{flex:6}.col-7{flex:7}.col-8{flex:8}.col-9{flex:9}.col-10{flex:10}.col-11{flex:11}.col-12{flex:12}
.bk-s{background-color: var(--sec);}.bk-t{background-color: var(--the);}.bk-p{background-color: var(--pri);}.bk-f{background-color: var(--four);}.bk-fi{background-color: var(--five);}.bk-se{background-color: var(--sex);}.bk-red{background-color: var(--red);}
.btn{height: 40px;font-size: 20px;border-radius: 10px;border: none;cursor: pointer;}
.ip{width: 100%;height: 40px;border: solid 2px var(--pri);border-radius: 10px;padding-left: 55px;font-size: 15px;font-weight: bold;color: var(--pri);}
.w-100{width: 100%;}.w-90{width: 90%;}.w-95{width: 95%;}.w-70{width: 70%;}.w-40{width: 40%;}
.lm-450{max-width: 450px;}
.cl-p{color: var(--pri) !important;}.cl-s{color: var(--sec);}.cl-t{color: var(--the);}.cl-r{color: red !important;}.cl-f{color: var(--five);}.cl-se{color:var(--sex)}
.tx-c{text-align: center;}.tx-l{text-align: left;}.tx-r{text-align: right;}.tx-j{text-align: justify;}
.stx-sb{font-size: 30px;}.stx-b{font-size: 20px;}.stx-n{font-size: 15px !important;}.stx-s{font-size:10px}.stx-12{font-size: 12px !important;}
.b{font-weight: bold;}.n{font-weight: normal;}
.mt-10{margin-top: 10px;}.mt-20{margin-top: 20px;}.mt-5{margin-top: 5px;}.mt-100{margin-bottom: 100px;}
.mb-10{margin-bottom: 10px;}.mb-20{margin-bottom: 20px;}.mb-5{margin-bottom: 5px;}
.ml-10{margin-left: 10px;}.ml-5{margin-left:5px}.ml-15{margin-left:15px}.ml-0{margin-left: 0;}
.mr-10{margin-right: 10px;}.mr-5{margin-right:5px}.mr-15{margin-right:15px}.mr-35{margin-right: 35px;}
.m-a{margin-left: auto; margin-right: auto;}
.pl-5{padding-left: 5px;}.pl-10{padding-left: 10px;}.pl-15{padding-left: 15px;}.pl-20{padding-left: 20px !important;}.pl-3{padding-left: 3px;}
.pr-5{padding-right: 5px;}.pr-10{padding-right: 10px;}.pr-15{padding-right: 15px;}.pr-20{padding-right: 20px;}.pr-3{padding-right: 3px;}
.pt-5{padding-top: 5px;}.pt-10{padding-top: 10px;}.pt-15{padding-top: 15px;}.pt-20{padding-top: 20px;}.pt-3{padding-top: 3px;}
.pb-5{padding-bottom: 5px;}.pb-10{padding-bottom: 10px;}.pb-15{padding-bottom: 15px;}.pb-20{padding-bottom: 20px;}.pb-3{padding-bottom: 3px;}
.al-yc{align-items: center;}.al-syc{align-self: center;}.al-xc{justify-content: center;}.al-d{justify-content: flex-end;}.al-b{justify-content: space-between;}.al-jsa{justify-content: space-around;}.al-l{justify-content: left;}.al-yt{align-content:start;}.al-selfs{align-self: stretch;}
.db-i{display: inline !important;}.db-d{display: block;}.db-ib{display: inline-block;}.posir{position: relative;}.posa{position: absolute;}
.p-relative{position: relative;}
.br-10{border-radius: 10px;}
.cp{cursor: pointer;}
.s-none{user-select: none;}
.h-100{height: 100% !important;}
.h-100vh{height: 100vh;}.h-auto{height: auto !important;}
.h-85{height: 85%;}
.p-rel{position: relative;}
.ws-break{white-space: normal;}
.wordb{word-wrap: break-word;}
.cp_edit{
    cursor: url(../img/cursor_edit.png) 0 30,auto;
}

button:disabled{
    filter: grayscale(1);
    font-style: italic;
}

.invisible{
opacity: 0;
}

header{
    height: 60px;
    align-items: center;
    padding-left: 10px;
}
#logo{
    height: 50px;
    margin-right: 10px;
}
.imgInput{
    height: 25px;
}
.hidden{
    display: none !important;
}
.sv{
    overflow-y: auto;
}
.sv-h{
    overflow-y: hidden;
}
#mask_modal{
    height: 100vh;
    width: 100vw;
    background-color: var(--pri);
    opacity: 0.7;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6;
}
#logo_load{
    position: fixed;
    top: calc(50vh - 75px);
    left: calc(50vw - 75px);
    margin-left: auto;
    margin-right: auto;
    height:150px;
    width:150px;
    z-index: 7;
}
.load {
    animation: loadSend;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

}
@keyframes loadSend{
    from{transform: rotate(0deg);}
    to{transform: rotate(3600deg);}
}
.msgModal{
    color: var(--the);
    width: 100%;
    text-align: center;
    margin-top: 100px;
    position: relative;
    z-index: 10;
}
.input-clear{
    border-color: red !important;
}
::-webkit-scrollbar{
    height: 8px;
    width: 8px;
}
::-webkit-scrollbar-track{
    background: var(--sec);
}
::-webkit-scrollbar-thumb{
    background: var(--pri);
    border-radius: 4px;
}