@import "base.css";
@import "font-awesome/css/all.css";
@import "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,100&display=swap";

:root {
    /* Header Customization */
    --HeaderBackground: var(--colorWhite2);

    /* Ctrl Customization */
    --CtrlDefaultButtonColor: var(--colorAquamarin4);
    --CtrlIconContainerSize: 24px;
    --CtrlIconFontSize: 14px;
    --CtrlContainerColor: var(--colorWhite2);

    /* Login Customization */
    --InputLogoColor: var(--colorOrange5);
    --LoginButtonColor: var(--colorOrange5);

    /* General */
    --Background: var(--colorWhite2);
    --TitleColor: var(--colorDarkBlueText6);
    --DropShadow: 0 0 5px 1px var(--colorWhite5);

    /* Menu Customization */
    --MenuItemBackground: var(--colorDarkBlueBackground4);
    --MainMenuItemFontColor: var(--colorDarkBlueText5);

    /* Table Customization*/
    --RowOddBackground: var(--colorWhite1);
    --RowEvenBackground: var(--colorWhite1);
    --TableCaptionBackground: var(--colorWhite2);
    --TableCaptionColor: var(--colorDarkBlueText6);
}

html {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

body {
    padding: 0;
    margin: 0;
    background-color: var(--Background);
    font-size: 16px;
    font-family: Roboto, Times, sans-serif;
    width: 100%;
    max-width: 100%;
}

a {
    text-decoration: none;
    color: var(--colorWhite2);
}
td > a {
    text-decoration: underline;
}
a:active {
    background-color: none;
}

button, i {
    font-size: 1em;
    background: inherit;
}

button .icon-container {
    background-color: var(--LoginButtonColor);
}

.Head_LOGO img {
    max-width: 50%;
}

.Head_LOGO {
    display: none;
    width: 100%;
    padding: 5px 0;
    justify-content: center;
    background-color: var(--HeaderBackground);
    border-bottom: 2px solid var(--colorWhite5);
    box-shadow: var(--DropShadow);
}
.Head_Visible {
    display: flex;
}

.TitleContainer {
    padding: 10px 10px 2px;
}

.Title {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.8em;
    width: 100%;
}
.Title img {
    max-width: 32px;
    max-height: 32px;
}
.Title span {
    margin-left: 5px;
    color: var(--TitleColor);
    word-break: break-all;
    font-size: 1.2em;
}

.Frm {
    padding: 5px 10px;
}

.Frm > a {
    color: var(--colorDarkBlueText4);
    display: block;
    padding-left: 10px;
    margin-top: 10px;
}

.InputDialog {
    display: flex;
    flex-direction: column;
    margin: 4px 5px 0;
    padding: 10px 15px;
    background-color: var(--colorWhite1);
    border-radius: 10px;
    box-shadow: var(--DropShadow);
}
.fa-barcode {
    font-size: 32px;
}
.InputContainer {
    display: flex;
}
.InputBarcodeContainer {
    display: flex;
    align-items: center;
}
.InputTitle {
    margin-bottom: 5px;
}
.InputFieldContainer {
    width: 100%;
    display: flex;
    align-items: center;
}
.InputDialog .InputField {
    border: 0;
    padding: 3px;
    width: inherit;
    height: inherit;
    margin-left: 10px;
    box-sizing: border-box;
    box-shadow: var(--DropShadow);
    border-radius: 5px;
    font-size: 0.9em;
}
.InputDialog .InputField:focus {
    outline: 0;
}
.InputDialog .Submit_Input {
	display: none;
}

.Sht, .ListTabVal a {
    font-size: 0.9em;
    color: var(--colorDarkBlueText6);
    min-width: 100%;
}
.ShtContainer {
    padding: 5px;
    overflow-x: auto;
}

#Sht1 .InputTabFieldVal {
    text-align: right;
}
#Sht2 {
    font-size: 0.9
}

.Sht {
    border-spacing: 0px 10px;
    border-collapse: separate;
}

.Sht td, .Sht th {
    padding: 7px;
}

.Sht tr {
    border-radius: 10px;
    box-shadow: var(--DropShadow);
}

.Sht tr td:first-child, .Sht tr th:first-child {
    border-radius: 10px 0 0 10px;
}
.Sht tr td:last-child, .Sht tr th:last-child {
    border-radius: 0 10px 10px 0;
}
.Sht tr td.No_Val, .Sht tr th.No_Cap {
    border-radius: 10px;
}
.ListTabCap.No_Cap {
    text-align: center;
    padding: 5px;
}
.InputTabFieldCap, .ListTabCap {
    text-align: left;
    font-weight: bold;
}

.MsgError {
    padding: 0 10px;
    color: var(--colorRed5);
}

.Sht tr:nth-child(even) {
    background-color: var(--RowEvenBackground);
}
.Sht tr:nth-child(odd) {
    background-color: var(--RowOddBackground);
}

.CtrlActions a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.CtrlInf {
    display: none;
    font-size: 0.5em;
    margin-top: 5px;
}

.icon-container {
    align-items: center;
    background-color: var(--InputLogoColor);
    border-radius: 50%;
    box-shadow: var(--DropShadow);
    color: var(--colorWhite1);
    display: flex;
    justify-content: center;
    min-height: 32px;
    min-width: 32px;
}

.CtrlTop {
    display: flex;
    justify-content: center;
    padding: 5px 10px;
    background-color: var(--CtrlContainerColor);
    border-bottom: 2px solid grey;
}

.CtrlActions div {
    color: var(--colorWhite1);
    display: flex;
    background-color: var(--CtrlDefaultButtonColor);
    min-width: var(--CtrlIconContainerSize);
    min-height: var(--CtrlIconContainerSize);
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 0 5px;
}
.CtrlTop .CtrlActions div:not(:first-child) {
    margin-left: 10px;
}

.CtrlActions {
    display: flex;
    justify-content: flex-start;

    --backColor: var(--colorDarkBlueText6);
    --mainColor: var(--colorOrange4);
    --logoutColor: var(--colorRed4);
    --undoColor: var(--colorBlueGreen4);
    --firstColor: var(--colorBlueGreen4);
    --previousColor: var(--colorBlueGreen4);
    --nextColor: var(--colorAquamarin4);
    --lastColor: var(--colorAquamarin4);
}

/* #region Action Colors */
.CtrlTop .CtrlActions .CtrlTop_BACK {
    background-color: var(--backColor);
}
.CtrlTop .CtrlActions .CtrlTop_MAIN {
    background-color: var(--mainColor);
}
.CtrlTop .CtrlActions .CtrlTop_Logout {
    background-color: var(--logoutColor);
}
.CtrlTop .CtrlActions .CtrlTop_FT {
    background-color: var(--firstColor);
}
.CtrlTop .CtrlActions .CtrlTop_PV {
    background-color: var(--previousColor);
}
.CtrlTop .CtrlActions .CtrlTop_NX {
    background-color: var(--nextColor);
}
.CtrlTop .CtrlActions .CtrlTop_LT {
    background-color: var(--lastColor);
}
.CtrlTop .CtrlActions .CtrlTop_Undo {
    background-color: var(--lastColor);
}
/* #endregion */


.CtrlTop_BACK span, 
.CtrlTop_MAIN span, 
.CtrlTop_Logout span, 
.CtrlTop_FT span, 
.CtrlTop_PV span, 
.CtrlTop_NX span, 
.CtrlTop_LT span, 
.CtrlTop_Undo span {
    display: none
}

div.CtrlTop_BACK, 
div.CtrlTop_MAIN, 
div.CtrlTop_Logout, 
div.CtrlTop_FT, 
div.CtrlTop_PV, 
div.CtrlTop_NX, 
div.CtrlTop_LT, 
div.CtrlTop_Undo {
    border-radius: 50%;
    padding: 0;
}


.CtrlActions div:hover {
    opacity: 0.8;
}

@supports (display: grid) {
    .Mnu {
        width: 90%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 2fr));
        margin: 10px auto;
        max-width: 600px;
        gap: 5px;
    }
    .Mnu-item {
        background-color: var(--MenuItemBackground);
        padding: 7px 5px;
        max-width: 100%;
    }
    .Mnu-item-extend {
        grid-column: 1 / span 2;
    }
    .Mnu-item a {
        display: inline-flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
    }
    .Mnu_Img {
        max-width: 48px;
        max-height: 48px;
        font-size: 12px;
    }
    
    .Mnu-item .Mnu_Text {
        display: none;
    }
    .Mnu-item .Mnu_Text:only-child {
        display: inline;
        color: inherit;
        text-align: center;
        word-wrap: normal;
        width: 100%;
    }
    .MA_MAIN, .WMS_MENU_MAIN, .PDA_MAIN {
        color: var(--colorWhite2);
    }
}

div[class^="MAIN_0_"] {
    padding: 0;
}
div[class^="MAIN_0_"] .Mnu_Img {
    max-width: 64px;
    max-height: 64px;
}
/* Text when the main menu contains no image */
div[class^="MAIN_0_"].Mnu-item .Mnu_Text {
    color: var(--MainMenuItemFontColor);
}

.login-input {
    padding: 5px;
}
.login-button {
    display: flex;
    margin-top: 10px;
    justify-content: flex-end;
}
.login-button button {
    border: none;
    opacity: 1;
    margin-left: 10px;
}
.login-button button:focus {
    outline: none;
}
.login-button button:hover {
    opacity: 0.8;
}

.input-container {
    background-color: var(--colorWhite1);
    box-shadow: var(--DropShadow);
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    padding: 5%;
    box-sizing: border-box;
    border-radius: 5px;
    min-height: 55px;
}
.input-container input {
    width: 80%;
    font-size: 1.1em;
    align-self: flex-end;
    border: none;
    border-bottom: 1px solid var(--colorDarkBlueText5);
}

.input-container input:focus {
    outline: none;
}
._Login {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Everything under 400px is above (e.g small scanner, or the 240 x 360 scanner... ) */

/* Design for medium devices (tablets, bigger scanner, etc) */
@media only screen and (min-width: 400px) {
    :root {
        --CtrlIconContainerSize: 36px;
        --CtrlIconFontSize: 18px;
    }
    body {
        font-size: 20px;
    }
    .icon-container {
        min-width: 48px;
        min-height: 48px;
    }
    ._Login {
        max-width: 350px;
        margin: 0 auto;
    }
}

/* Design for large desktops */
@media only screen and (min-width: 992px) {
    body {
        font-size: 22px;
        max-width: 1000px;
    }
    .icon-container {
        min-width: 64px;
        min-height: 64px;
    }
    ._Login {
        max-width: 500px;
    }
    .input-wrap {
        margin-top: 20px;
    }
}

/* #region font-awesome */
#PaneCtrl {
    --font: 900 var(--CtrlIconFontSize) "Font Awesome 5 Free";
	--login: "\f2f6";
	--logout: "\f2f5";
	--mainMenu: "\f0c9";
	--back: "\f191";
	--listFirst: "\f100";
	--listBack: "\f104";
	--listNext: "\f105";
    --listLast: "\f101";
    --print: "\f02f";
    --undo: "\f0e2";
    --default: "\f7d9";
}
.icon::before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.CtrlTop_Logout a::before {
	font: var(--font);
    content: var(--logout);
    margin-left: 1px;
}
.CtrlTop_BACK a::before {
	font: var(--font);
    content: var(--back);
}
.CtrlTop_LOGIN a::before {
	font: var(--font);
	content: var(--login);
}
.CtrlTop_LOGOUT a::before {
	font: var(--font);
	content: var(--logout);
}
.CtrlTop_MAIN a::before {
    font: var(--font);
    content: var(--mainMenu);
}
.CtrlTop_FT a::before {
    font: var(--font);
    content: var(--listFirst);
}
.CtrlTop_PV a::before {
    font: var(--font);
    content: var(--listBack);
}
.CtrlTop_NX a::before {
    font: var(--font);
    content: var(--listNext);
}
.CtrlTop_LT a::before {
    font: var(--font);
    content: var(--listLast);
}
.CtrlTop_PRINT a::before {
    font: var(--font);
    content: var(--print);
}
.CtrlTop_Undo a::before {
    font: var(--font);
    content: var(--undo);
}
/* #endregion */

/*#region Utility*/
.Sht10 { width: 10%; }
.Sht10left{ width: 10%; text-align: left; }
.Sht10center { width: 10%;text-align: center; }
.Sht10right { width: 10%; text-align: right; }
.Sht20 { width: 20%; }
.Sht20left { width: 20%; text-align: left; }
.Sht20center { width: 20%; text-align: center; }
.Sht20right { width: 20%; text-align: right; }
.Sht35 { width: 35%; } 
.Sht35left { width: 35%; text-align: left; }
.Sht35center { width: 35%; text-align: center; }
.Sht35right { width: 35%; text-align: right; }
.Sht40 { width: 40%; } 
.Sht40left { width: 40%; text-align: left; }
.Sht40center { width: 40%; text-align: center; }
.Sht40right { width: 40%; text-align: right; }
.Sht60 { width: 60%; } 
.Sht60left { width: 60%; text-align: left; }
.Sht60center { width: 60%; text-align: center; }
.Sht60right { width: 40%; text-align: right; }
.Sht80 { width: 80%; } 
.Sht80left { width: 80%; text-align: left; }
.Sht80center { width: 80%; text-align: center; }
.Sht80right { width: 80%; text-align: right; }
.Sht100 { width: 100%; } 
.Sht100left { width: 100%; text-align: left; }
.Sht100center { width: 100%; text-align: center; }
.Sht100right { width: 100%; text-align: right; }
.Width_5 { width: 5%; }
.Width_10 { width: 10%; }
.Width_15 { width: 15%; }
.Width_20 { width: 20%; }
.Width_25 { width: 25%; }
.Width_30 { width: 30%; }
.Width_35 { width: 35%; }
.Width_40 { width: 40%; }
.Width_45 { width: 45%; }
.Width_50 { width: 50%; }
.Width_55 { width: 55%; }
.Width_60 { width: 60%; }
.Width_65 { width: 65%; }
.Width_70 { width: 70%; }
.Width_75 { width: 75%; }
.Width_80 { width: 80%; }
.Width_85 { width: 85%; }
.Width_90 { width: 90%; }
.Width_95 { width: 95%; }
.Width_100 { width: 100%; }
/* #endregion*/