@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: normal;
    src: url(PTSans-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'PT Sans';
    font-style: italic;
    font-weight: normal;
    src: url(PTSans-Italic.ttf) format('truetype');
}
@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: bold;
    src: url(PTSans-Bold.ttf) format('truetype');
}
@font-face {
    font-family: 'PT Sans';
    font-style: italic;
    font-weight: bold;
    src: url(PTSans-BoldItalic.ttf) format('truetype');
}

body {font-family: "PT Sans", sans-serif; margin: 0; outline: none; font-size: 10pt; text-rendering: optimizeLegibility;}
* {box-sizing: border-box;}
table {border-collapse: collapse;}
input, select, textarea {font-family: "PT Sans"; border-radius: 3px; border: 1px solid lightblue; background-color: #e6f7ff85; padding: .1em .2em;}
input:focus {border-radius: 3px; border: solid 1px var(--mainColor-1); transition: .3s;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;} /*hide input arrows*/
input[type=number] {-moz-appearance: textfield;}
select:hover {cursor: pointer;}
button {border: none;}
a {outline: none; width: 100%;}
.emph {border-radius: 3px; border: 2px solid gold; transition: .2s;}

.allBtns {display: inline-block; border-radius: 3px; border: solid 2px var(--mainColor-1); padding: 3px 5px; min-width: 80px; text-align: center; background: var(--mainColor-1); color: white; font-weight: bold;}
.actionBtns {margin: 0em 1em; border-radius: 3px; padding: 1px 5px; font-weight: 600; background: var(--mainColor-1); color: whitesmoke;}
.actionBtns:hover, .minBtns:hover, .allBtns:hover {cursor: pointer;}
.minBtns {margin: 1px 2px; border-radius: 3px; padding: 0px 5px; font-weight: bold; background: var(--mainColor-1); color: white;}

.toblur {filter: blur(3px);}
:root {
    --menuColor-1: #020e2c;
    --menuColor-2: #03133a;
    --mainColor-1: #04194c;
    --logoColor-1: #0072bc;
    --logoColor-2: #00a651;
    --logoColor-3: #ffffff;
    --logoColor-4: #000000;
    --locked: #2a575ea3;
    --logo-col: #1c7faf;
    --tb-border: #d7cfee;
    --used: #08396c;
    --free: #3a8ee6;
}

.radioSel {background: cornflowerblue; border-radius: 5px; color: white;}
.radioSel_ctnr div {padding: 5px 0px;}
.radioSel_ctnr div:hover {cursor: pointer; border-radius: 5px; background: cornflowerblue;}

#pagi i {border: 2px solid; border-radius: 8px;}
#pagi #page {line-height: 2; font-weight: bold; padding: 0 15px;}
.sum_icon {z-index: 60}
.deepurple.sum_icon {border: 1px solid var(--logoColor-1); color: var(--logoColor-1); border-radius: 5px; position: absolute; right:10px; top: 0;}
.sum_icon:hover {transition: .3s; cursor: pointer; background: var(--logoColor-1); color: #fefefe;}

#limit_export {color: black; background: darkorange; border: 1px solid darkorange;}
#limit_export_date {margin-left: 10px;}


/********************
** Main modal CSS ***
********************/
#mdlHdr, #pr_mdlHdr {display: flex; align-items: center; width: 100%; height: max-content; padding: 5px 0; background: var(--mainColor-1); border-radius: 3px 3px 0px 0px;}
/*#mdlHdr, #pr_mdlHdr {display: flex; align-items: center; width: 100%; height: 50px; background: var(--mainColor-1); border-radius: 3px 3px 0px 0px;}*/
#showLog {position: absolute; right: 0; border-radius: 2px; border: solid 1px white; width: 6em; margin-right: 5%; text-align: center; color: white; font-weight: bold;}
#showLog:hover {cursor: pointer; background: white; color: var(--mainColor-1); transition: .3s;}

/* Modals background */
#mdl, #misc_mdl_wrapper, #missing_mdl_wrapper, #wh_mdl_wrapper, #pr_mdl, #yesno_mdl_wrapper {
    display: none;
    position: fixed;
    z-index: 50;
    right: 0;
    top: 0;
    height: 100%; /* Full height */
    width: 100%;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content Box */
#lockbtn {display: inline-block;/*position: absolute; left: 50%; top: 40%; z-index: 70;*/}
#lockbtn:hover {cursor: pointer;}
#lockbtn i {font-size: 120px;}
#mdllock {position:absolute; display:flex; flex-direction:column; justify-content:center; background:var(--locked); z-index:60; width:calc(86% - 10px); height: calc(98vh - 80px); text-align:center;}

#mdlContent, #wh_mdl, #pr_mdl_ctt {
    position: relative;
    background-color: var(--mainColor-1);
    margin: 30px auto;
    border: none;
    width: 90%;
    border-radius: 3px;
    box-shadow: 0 4px 8px 0 var(--mainColor-1),0 6px 20px 0 var(--mainColor-1);
    animation-name: animatetop;
    animation-duration: 0.2s;
    max-height: 90vh;}
#mdlInner, #pr_mdlInner {padding: 20px 15px 15px; background-color: #fefefe; border-radius: 0px 0px 3px 3px;}

.tb_row .lbl, label {display: table-cell; padding-bottom: 7px; vertical-align: middle;}
#del_img {top: 5px; bottom: unset !important; display: none;}
#edit_img {}

.item_dDown {display: none; position: absolute; z-index: 1; background-color: cornflowerblue; border-radius: 3px; padding: 10px; max-height: 230px; overflow-y: auto;}
.item_dDown li {display: table-row;}
.li_name, .li_code {padding: 0 20px 2px 0;}

.item_dDown li:hover {background-color: grey; cursor: pointer;}

/* The Close Button */
.mdlclose {color: #fefefe; font-size: 2em; font-weight: bold; position: absolute; right: 14px; top: 0px; z-index: 40;}
.mdlclose:hover {color: black; text-decoration: none; cursor: pointer;}


/*************************
** Warehouse modal CSS ***
*************************/
#wh_mdl_wrapper {z-index: 70;}
#wh_mdl {background-color: #fefefe;margin: 40px auto; padding: 10px; animation-name: animatereveal; animation-duration: 0.3s;}
#whMdlStatus {display: none; font-size: 18px; font-weight: bold; background: #ff2222; color: white; position: absolute; left: 10px; bottom: -150px; padding: 0px 5px;}
#whMdlStatus::before {content: '\26A0\ ';}
#whMdlStatus::after {content: ' \26A0';}
#whMdlClose {color: var(--mainColor-1); font-size: 2em; font-weight: bold; position: absolute; right: 14px; top: 0px; line-height: 1;}


/********************
** Misc modal CSS ***
********************/
#misc_mdl_wrapper {z-index: 80 !important;}
#yesno_mdl_wrapper {z-index: 90 !important;}
#misc_mdl, #missing_mdl, #yesno_mdl {
    position: relative;
    background-color: #fefefe;
    margin: 15vh auto; /* 15% from the top and centered */
    padding: 20px;
    text-align: center;
    border: none;
    width: 60%; /* Could be more or less, depending on screen size */
    border-radius: 3px;
    box-shadow: 0 4px 8px 0 var(--mainColor-1),0 6px 20px 0 var(--mainColor-1);
    animation-name: animatereveal;
    animation-duration: 0.3s;
}
#miscMdlStatus, #missingStatus {font-size: 22px; font-weight: bold; color: var(--mainColor-1);}
#miscMdlContent, #missingContent, .mdlCtt {font-size: 18px; font-weight: bold; color: var(--mainColor-1);}
#miscMdlClose, #missingClose {color: var(--mainColor-1); font-size: 2em; font-weight: bold; position: absolute; right: 0; top: 0; line-height: 1; background: #2957ae; padding: 0 8px; border-radius: 0 3px;}
#miscMdlClose:hover, #missingClose:hover {cursor: pointer;}

#export_mdl_wrp {font-size: 10pt; display: flex; justify-content: space-evenly;}
.export_mdl_rows {text-align: left;}
.export_filters {margin-top: 30px;}
.export_filters .lbl {padding: 0 10px 20px 0;}


/* Action Buttons */
#miscMdlBtns, .mdlBtn_Wrap {display: flex; justify-content: space-evenly; margin: 4em auto 10px; width: 90%;}
.miscMdlBtns {background: var(--mainColor-1); color: whitesmoke; padding: 10px 20px; border-radius: 3px; font-weight: bolder; font-size: 18px;}
.miscMdlBtns:hover {cursor: pointer;}


/******************************************************************************/
/***** appCtnr, pgCtnr, topPannel, flex_mid, actionBar, tabBar, Search bar ***/
/****************************************************************************/
#pdf_print_wrapper {display: none;}
.pgCtnr {display: flex; flex-wrap: nowrap; height: calc(100vh - 20px)}
.appCtnr {flex-grow: 1; overflow: hidden; display: flex; flex-direction: column;}

.flex_top {flex-basis: 80px; flex-shrink: 0; display: flex; position: relative; flex-direction: column; background-color: #f7f3f3;}
#top_bar {min-height: 40px; background-color: #cde86e; color: var(--used); display: none; position: absolute; z-index: 500; min-width: 30%; left: 50%;
    transform: translate(-50%, 0); border-radius: 5px; top: 50%; text-align: center; font-weight: bolder; font-size: larger; line-height: 2; padding: 5px 15px;
    animation-name: animatereveal; animation-duration: 0.3s;}
#actionBar {display: flex; position: relative; align-items: center; justify-content: end; margin-top: 5px;}
#actionBar span {display: table-cell;}
.export, .import {padding-right: 10px; border-right: 1px solid white;}
.import, .batchmod {padding-left: 10px;}
#prints {margin: 0 5px 0 15px; background: darkcyan;}

.bar1 {}
.i_wrapper {height: 28px; width: 28px; background: whitesmoke; justify-content: center; align-items: center; display: flex;}
.i_wrapper i {font-size: 30px;}

.search {}
#searchinput {border: 2px solid var(--mainColor-1); border-radius: 3px; padding: 3px 5px; font-weight: 600; color: var(--mainColor-1); width: 100%; height: 28px;}
.newArt {margin-right: .5em; height: 28px; width: 28px; background: var(--mainColor-1); border-radius: 3px; position: relative; display: flex; justify-content: center; align-items: center;}

.tabBar {display: flex; position: relative; margin-top: auto;}
#tabCtnr {display: flex; flex-grow: 1; margin-left: 1em;}
.tabs {display: none; min-width: 50px; padding: 5px 20px !important; margin-left: 1px; border-radius: 3px 3px 0px 0px; background: #3d5f8b7a; text-align: center;}
.tabs.active {background: white;}
.tabs:hover, .tabConf:hover, .export:hover, .import:hover, .batchmod:hover, .newArt:hover {cursor: pointer;}
.tabConf {display: flex; flex-direction: column; justify-content: center; margin-right: .6em;}
.tabConf .i_wrapper {height: 23px; width: 23px; background: none;}
.tabConf .i_wrapper i {font-size: 23px;}

.flex_mid {flex-basis: 0; flex-grow: 1; overflow: hidden auto; width: 100%; color: var(--mainColor-1); display: flex;}
.pgContent {flex-grow: 1;}


/*************
** Tables ***
**************/
.tb_containers {width: 100%;}
.tables {display: table; width: 100%; text-align: left;}
.tb_row {position: relative; display: table-row;}

#tabConf {
    display: none;
    flex-direction: column;
    position: absolute;
    right: 1.5em;
    top: 32px;
    z-index: 5;
    min-height: 80px;
    width: 205px;
    background: var(--menuColor-1);
    border-radius: 3px;
    color: aliceblue;
    font-weight: bold;
    padding-top: 12px;
    overflow-y: auto;
    max-height: calc(100vh - 187px);
}
#tabConf span {font-size: 18px; padding-left: 15px;}
.tabConf_row {display: table-row;}
.tabConf_row span {padding-left: 15px;}
.tabConf_row:hover {cursor: pointer;}
.tabConf_option_on {display: table-cell; padding-right: 10px;}
.tabConf_label {display: table-cell; width: 100%; color: whitesmoke; font-size: 16px; padding: 5px 0px 5px 5px;}
.tabConf_row:last-child {padding-bottom: 10px;}
.tabConf_row:nth-child(2) {padding-top: 10px;}

#thead {display: table-header-group;}
#theadrow {display: table-row;}
#theadrow .thead_cells {display: table-cell; vertical-align: middle; position: sticky; top: 0; z-index: 1; background-color: #f7f7f7; border-bottom: 1px solid rgba(33, 4, 78, 0.25);}
.thead_cells {position: relative;}
.thead_cells:first-child, .tbody_cells:first-child {padding-left: 1em; width: 0px;}
.thead_cells:hover {cursor: pointer;}
.headers {display: inline-block !important; font-weight: bold; width: 100%; padding: 9px 0px;}
.arrow {margin-left: .3em}
.headers_resize {display: none; position: absolute; height: 100vh; border-left: 5px solid darkslateblue; top: 0; right: -5px; width: 10px;}

#tbody {display: table-row-group;}
.tr {display: table-row;}
.tr div {border-bottom: 1px solid rgba(33, 4, 78, 0.25); display: table-cell; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; height: 35px;}
.tr:hover {cursor: pointer; background-color: lavender;}
.cellsWrap {display: contents !important;}
.p_img_rows {display: flex !important;}
.p_param {text-align: center;}

.col_hide {display: none !important;}
.visi_col_hide {visibility: hidden !important;}

.mdl_tables_wrp {
    padding: 0em 1em 1em 1em;
    flex-basis: 0;
    flex-grow: 1;
    width: 100%;
    position: relative;
    max-height: calc(91vh - 202px);
    overflow: hidden auto;
}
.mdl_tables {
    text-align: center;
    width: 100%;
}
.mdl_tables th {
    padding: 1px 10px;
    background: cadetblue;
    position: sticky;
    top: 0;
    z-index: 1;
}


.to_thing_span {margin-right: 10px;}
.to_thing_td {position: relative;}

.is0:after {content: "\25CF"; color: #cec9d7; font-size: 15pt; line-height: 0;}
.is1:after, .prepared_cells.is2:after {content: "\25CF"; color: var(--mainColor-1); font-size: 14pt; line-height: 0;}
.is3:after {content: "\25CF"; color: deepskyblue; font-size: 15pt; line-height: 0;}
.status_cells.is0:after {content: "\25CF"; color: forestgreen!important; font-size: 15pt; line-height: 0;}      /*Created*/
.status_cells.is1:after {content: "\25CF"; color: orange!important; font-size: 15pt; line-height: 0;}       /*Confirmed*/
.status_cells.is2:after {content: "\25CF"; color: deepskyblue!important; font-size: 15pt; line-height: 0;}      /*Converted*/
.status_cells.is3:after {content: "\25CF"; color: darkred!important; font-size: 15pt; line-height: 0;}      /*Canceled*/
.status_cells.is4:after {content: "\25CF"; color: #8e3838 !important; font-size: 15pt; line-height: 0;}      /*Canceled*/

.w_1 {background: #adff2f8a!important; color: var(--mainColor-1);}      /*waiting*/
.w_2 {background: #0093ffa8!important; color: var(--mainColor-1);}      /*waiting and in stock*/
.w_1:hover {background: #80c21bd6!important;}      /*waiting*/
.w_2:hover {background: #026bb9c2!important;}      /*waiting and in stock*/
.p_1 {background: darkorange!important; color: white;}      /*Has low limitdate*/
.p_1:hover {background: #dc7900!important;}      /* || */

.no_franco {display: block; position: absolute; top: 0; right: 0; border: 1px solid red; border-radius: 5px; background: indianred;}

.mvmt_1, .mvmt_3, .mvmt_9, .mvmt_11 {background: #8bc34a; padding: 0 2px; border-radius: 3px;}
.mvmt_2, .mvmt_4, .mvmt_8, .mvmt_10, .mvmt_12 {background: darkred; color: white; padding: 0 2px; border-radius: 3px;}
.mvmt_5, .mvmt_6, .mvmt_7 {background: darkorange; padding: 0 2px; border-radius: 3px;}

.no_del {background: #0093ffa8!important; color: var(--mainColor-1);}
.yes_del {background: tomato!important; color: var(--mainColor-1);}
.donothing {background: #b4b4b4a8!important; color: var(--mainColor-1);}
.no_del:hover {background: #026bb9c2!important; color: whitesmoke}
.yes_del:hover {background: darkred!important; color: whitesmoke;}
.donothing:hover {background: rgb(92, 92, 92) !important; color: whitesmoke;}

.bg_red {background: darkred!important; color: whitesmoke;}
.bg_green {background: #80c21bd6!important;}
.bg_lightgrey {background: lightgrey!important;}

.checkCtnr {text-align: right; width: 25px;}
.checkCtnr:last-child {padding-right: .7em;}

.mdl_tables_tb tr:hover {background: #c6fdfd;}
.to_prod:hover, .to_ppl:hover, .to_thing:hover {cursor: pointer;}

.half_th {border: none !important;}

#mm_wait_div, #full_wait_div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #010518eb;
    z-index: 100;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: medium;
    color: white;
    text-align: center;
}
#mm_no_btn {background: darkred;}
/*#menu, #charts {text-align: center;}

.charts {
    display: inline-block;
    width: 20%;
    margin-left: 5%;
    margin-right: 5%;
}*/


/***************
** Animations **
****************/
.pleasewait {
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid var(--logoColor-1);
    border-right: 6px solid var(--logoColor-3);
    border-bottom: 6px solid var(--logoColor-2);
    border-left: 6px solid var(--logoColor-3);
    width: 30px;
    height: 30px;
    animation: spin 2s forwards infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes animatetop {
    0% {top: -40px; opacity: 0.2}
    50% {top: 20px; opacity: 0.5}
    100% {top: 0px; opacity: 1}
}

@keyframes animateright {
    0% {margin-left: 50px; opacity: 0.2}
    25% {margin-left: 40px; opacity: 0.4}
    50% {margin-left: 30px; opacity: 0.6}
    75% {margin-left: 10px; opacity: 0.8}
    100% {margin-left: 0px; opacity: 1}
}

@keyframes animateleft {
    0% {margin-right: 50px; opacity: 0.2}
    25% {margin-right: 40px; opacity: 0.4}
    50% {margin-right: 30px; opacity: 0.6}
    75% {margin-right: 10px; opacity: 0.8}
    100% {margin-right: 0px; opacity: 1}
}

@keyframes animatereveal {
    0% {opacity: 0.2;}
    25% {opacity: 0.4;}
    50% {opacity: 0.6;}
    75% {opacity: 0.8;}
    100% {opacity: 1;}
}

@media (max-width: 1920px){
    body {font-size: 8pt;}
    input, select, textarea {font-size: 8pt}
    #mdlInner, #pr_mdlInner {padding: 7px 6px 6px;}
    #mdllock {width: calc(86% - 5px);}
    .tr div {height: 25px;}
}

@media (max-width: 1366px){
    #searchinput {padding: 3px 2px; height: 24px;}
    .newArt {margin-right: .4em;}
    .i_wrapper i {font-size: 28px;}
    .tabConf {margin-right: .6em;}
    .tabConf .i_wrapper {width: 20px; height: 20px;}
    .tabConf .i_wrapper i {font-size: 20px;}
    #tabConf {width: 160px;}
    #tabConf span {font-size: 13px; padding-left: 10px;}
    .tabConf_label {font-size: 12px; padding: 5px 0px;}

    .tr div {height: 25px;}

    .is0:after, .is1:after, .is3:after,
    .status_cells.is0:after, .status_cells.is1:after, .status_cells.is2:after, .status_cells.is3:after {font-size: 13pt;}

    #mdl, #misc_mdl_wrapper, #missing_mdl_wrapper, #wh_mdl_wrapper, #pr_mdl, .mdl_wrappers {width: 100vw;}
    #misc_mdl, #missing_mdl, #yesno_mdl {padding: 10px;}
    #miscMdlClose, #missingClose {padding: 0 5px;}
    #miscMdlBtns, .mdlBtn_Wrap {margin: 1em auto 10px;}
    #mdlInner, #pr_mdlInner {padding: 5px;}
    #mdllock {width: calc(84% - 3px); height: 100%;}
    #mdlContent {max-height: calc(91vh - 20px);}
    #mdlContent, #wh_mdl, #pr_mdl_ctt {margin: 30px auto;}
    .tb_row .lbl, label {padding-bottom: 2px;}
}

@media (max-width: 1280px){
}

@media (max-width: 480px){
    .is0::after, .is1::after, .is3::after, .status_cells.is0::after, .status_cells.is1::after, .status_cells.is2::after, .status_cells.is3::after {
        font-size: 20pt;
        display: flex;
        margin: 25% auto;
    }
}