body {font-family: "Helvetica Neue","PT Sans",sans-serif; margin: 0; outline: none; font-size: 11pt; text-rendering: optimizeLegibility;}
* {box-sizing: border-box;}
input, select, textarea, .dateformat {border-radius: 3px; border: solid 2px #e6f7ff; background-color: #e6f7ff; padding: .3em;}
input:focus {border-radius: 3px; border: solid 2px #21044E; 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;}

a {outline: none; width: 100%;}
.emph {border-radius: 3px; border: 2px solid gold; transition: .2s;}
.allBtns:hover, .menuBtn:hover {cursor: pointer;}
.allBtns {
    display: inline-block;
    border-radius: 3px;
    border: solid 2px var(--mainColor-1);
    padding: 3px 5px;
    min-width: 120px;
    text-align: center;
    background: var(--mainColor-1);
    color: white;
    font-weight: bold;
}
.toblur {filter: blur(3px);}
:root {
    --menuColor-1: #06214c;
    --menuColor-2: #08396c;
    --mainColor-1: #08396c;
    --tb-border: #d7cfee;
    --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;}

.menuBtn {
    display: inline-block;
    border-radius: 3px;
    border-style: solid;
    border-width: 3px;
    padding: 13px 0px;
    width: 20%;
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
    background: var(--mainColor-1);
    color: white;
    border-color: var(--mainColor-1);
}

#pagi i {border: 2px solid; border-radius: 3px;}
#pagi i:hover {background: var(--mainColor-1); color: #fefefe; border-color: var(--mainColor-1)}
#pagi #page {line-height: 2; font-weight: bold; padding: 0 15px;}


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

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

/* Modal Content Box */
#mdlContent, #wh_mdl, #pr_mdl_ctt {
    position: relative;
    background-color: var(--mainColor-1);
    margin: 50px auto;
    border: none;
    width: 90%;
    border-radius: 3px;
    box-shadow: 0 4px 8px 0 #08396c,0 6px 20px 0 #08396c;
    animation-name: animatetop;
    animation-duration: 0.2s;
    overflow-y: auto;
    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; font-weight: bold; vertical-align: middle;}
#del_img {top: 5px; bottom: unset !important;}
#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;}


/********************
** Misc modal CSS ***
********************/
#misc_mdl_wrapper {z-index: 80 !important; overflow: auto;}
#misc_mdl {
    position: relative;
    background-color: #fefefe;
    margin: 20vh 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 rgb(33, 4, 78),0 6px 20px 0 rgb(33, 4, 78);
    animation-name: animatereveal;
    animation-duration: 0.3s;
}
#miscMdlStatus {font-size: 28px; font-weight: bold; color: var(--mainColor-1);}
#miscMdlContent {font-size: 28px; font-weight: bold; color: var(--mainColor-1);}
#miscMdlClose {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;}

/* Action Buttons */
#miscMdlBtns {display: flex; justify-content: space-evenly; margin: 4em auto 10px; width: 90%;}
.miscMdlBtns {background: rgb(33, 4, 78); 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 ***/
/****************************************************************************/
.pgCtnr {display: flex; flex-direction: column; flex-wrap: nowrap; height: 100vh;}
.appCtnr {flex-grow: 1; overflow: hidden; display: flex; flex-direction: column; margin: 0 10%;}

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

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

.actionBtns {margin: 0em 1.5em; border-radius: 3px; padding: 3px 10px; font-weight: 600; background: var(--mainColor-1); color: whitesmoke;}
.actionBtns:hover {cursor: pointer;}

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

.tabBar {display: none; position: relative; margin-top: auto;}
#tabCtnr {display: flex; flex-grow: 1; margin-left: 1em;}
.tabs {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: 1.5em;}
.tabConf .i_wrapper {height: 26px; width: 26px; background: none;}
.tabConf .i_wrapper i {font-size: 30px;}

.flex_mid {flex-basis: 0; flex-grow: 1; overflow: hidden auto; width: 100%; font-weight: bold; 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 {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_option {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; 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; width: 100%; padding: 6px 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;}

.is0:after {content: "\25CF"; color: #cec9d7; font-size: 15pt; line-height: 0;}
.is1:after {content: "\25CF"; color: #21044e; font-size: 15pt; line-height: 0;}

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


/*#menu, #charts {text-align: center;}

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


/***************
** Animations **
****************/
@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){
    #tabConf {width: 180px;}
    .tabConf_option {font-size: 11pt;}
    #tabConf span {font-size: 11pt;}
    input, select, textarea, .dateformat {padding: .1em !important;}
}

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

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

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