:root {
    /*COLORS*/
    --blue-brand: #0460A9; /* Main Blue*/
    --blue-dark: #06064d;
    --blue-light: #c1dce8; /*Secondary Blue*/
    --blue-blue: #127aa8;
    --blue-l-bckgrnd: rgb(242, 242, 255);
    --navy-txt: rgb(2, 27, 78);
    --teal-brand: #20C997; /*Mars Main Green + Sucess Messages*/
    --text-primary: #111111;
    --green-action: rgba(0,255,0,0.01);
    --green-l-bckgrnd: #80c381;
    --green-d: #144115;
    --red-brand: #FA0000; /*Mars Main Red + Error Messa ges*/
    --red-txt: #460909;
    --red-l-bkgrnd: rgb(250,230,215);
    --yellow-txt: #f1ed48;
    --yellow-bckgrnd: #fffda6;
    --black-brand: #1F1F1F; /*Main Black + Text Color*/
    --white-brand: #FFFFFF; /*Main White*/
    --grey-table: #F1F1F1; /*Main Background Color for Tables*/
    --gray-l-brand: #9ea3b0;
    --gray-d-btn: #949fbe;
    --gray-l-btn: #9ea9c7;
    --silver: rgb(230,230,230);
    --disable-btn: silver;
    --disable-txt: dimgray;
    /*BORDERS*/
    --border-primary: solid 1px #B2B2B2; /*Primary Border*/
    --border-radius-primary: 5px;
    --border-radius-input: 2px;
    /*Widths*/
    --container-desktop-max: 1000px;
    --container-desktop-min: 700px;
    /*Typography*/
    --text-small: 0.8rem;
    --text-large: 1.5rem;
    /*Input Forms*/
    --input-height-default: 35px;
    /*Padding*/
    --padding-default: 1rem;
    --padding-vertical: 1rem 0;
    --padding-horizontal: 0 1rem;
    --padding-sm: 5px;
}

/*GENERAL*/

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html {
    font-size: 100%;
}
/*16px*/

body {
    font-family: 'Open Sans', 'Calibri light';
    font-weight: 400;
    line-height: 1.75;
    color: var(--text-primary);
    margin: 10rem;
}

li {
    margin-bottom: 8px;
}

/*Typography*/

h1, h2, h3, h4 {
    color: var(--blue-brand);
}

.tblLogin {
    margin: 0 auto;
    max-width: 400px;
    width: 100%;
    border: solid 5px silver;
    border-radius: 10px ;
}

    .tblLogin tr {
        height: 40px;
    }

.testPage {
    color: red;
    border: solid 5px red;
    padding: 10px;
    background-color: yellow;
    border-radius: 10px 10px;
}

.newUpdate {
    font-size: 11pt;
    color: red;
    font-style: italic;
    font-weight: bold;
    border: dashed 1px red;
    padding: 2px 5px;
}

.txtmain, .txtDate {
    padding-left: var(--padding-deafult);
    height: var(--input-height-default);
    border-radius: var(--border-radius-input);
    width: 80%;
    border: var(--border-primary);
    background-color: white;
}

    .txtmain:hover, .txtmain:focus, .txtmain:active, .txtDate:hover, .txtDate:focus, .txtDate:active {
        background-color: rgb(220,235,240);
        cursor: pointer;
    }

    .txtmain:disabled, .txtDate:disabled {
        background-color: lightgray;
    }

.ddlmain {
    height: var(--input-height-default) !important;
    border-radius: var(--border-radius-input);
    width: 80%;
    border: var(--border-primary);
}

    .ddlmain:hover, .ddlmain:focus, .ddlmain:active {
        background-color: rgb(220,235,240);
        cursor: pointer;
    }

.max400px {
    max-width: 400px;
}

.max180pxddl {
    max-width: 190px;
}

.max180px {
    max-width: 180px;
}

.max600px {
    max-width: 600px;
}

.btnMain {
    -webkit-font-smoothing: antialiased;
    height: var(--input-height-default);
    padding: 0.5rem 1rem;
    background-color: white;
    border-radius: var(--border-radius-primary);
    border: solid 1px var(--black-brand);
}

    .btnMain:hover, .btnMain:focus, .btnMain:active {
        background-color: var(--black-brand);
        -webkit-font-smoothing: antialiased;
        color: white;
        font-weight: 700;
        cursor: pointer;
    }

    .btnMain:disabled:hover {
        background-color: lightblue;
        color: dimgray;
    }

.btnNewProd {
    min-width: 250px;
    padding: 10px 15px;
    font-weight: bold;
    border-radius: 5px 5px;
    border: dashed 5px green;
    font-size: 12pt;
    background-color: white; /*rgb(220,235,245);*/
    color: darkgreen;
}

    .btnNewProd:hover, .btnNewProd:focus, .btnNewProd:active {
        background-color: lightgreen;
        color: darkblue;
        cursor: pointer;
    }

    .btnNewProd:disabled:hover {
        background-color: lightblue;
        color: dimgray;
    }

.btnLink {
    min-width: 60px;
    padding: 6px 6px;
    font-weight: bold;
    border-radius: 3px 3px;
    border: solid 1px blue;
    background-color: lightblue; /*rgb(220,235,245);*/
}

    .btnLink:hover, .btnLink:focus, .btnLink:active {
        background-color: blue;
        color: white;
        cursor: pointer;
    }

.btnlinkRed:hover {
    background-color: red;
}

.tblSearchBox {
    width: 100%;
    border-collapse: collapse;
}

    .tblSearchBox tr {
        height: 40px;
    }

    .tblSearchBox td {
        padding: 5px;
        border: solid 1px silver;
    }

.subTable {
    border-collapse: collapse;
    width: 95%;
}

    .subTable tr {
        height: 20px;
    }

    .subTable td {
        border: solid 1px silver;
        padding: 5px;
        font-size: 11pt;
    }

.borderlessTable {
    border-collapse: collapse;
    width: 100%;
}

    .borderlessTable tr {
        height: 40px;
    }

    .borderlessTable td {
        border: none;
        padding: 5px;
    }

.basicTable {
    border-collapse: collapse;
    width: 100%;
}

    .basicTable tr {
        height: 40px;
    }

    .basicTable td {
        border: solid 1px silver;
        padding: 5px;
    }

.topTable {
    border-collapse: collapse;
    width: 100%;
}

    .topTable tr {
        height: 25px;
    }

    .topTable td {
        border: solid 1px silver;
        padding: 5px;
    }

.blankTable tr td:first-child {
    width: 150px;
    font-weight: bold;
}

.resultTable {
    border-collapse: collapse;
    width: 100%;
}

    .resultTable tr {
        height: 40px;
    }

    .resultTable td {
        border: solid 1px black;
        padding: 5px;
    }

.headTD {
    color: #000000;
}

.headTR {
    background-color: lightgray;
    font-weight: bold;
    font-size: 11pt;
    height: 40px;
}

.headDarkTR {
    background-color: rgb(90,90,90);
    font-weight: bold;
    font-size: 11pt;
    height: 40px;
    color: white;
}

.headTRsmall {
    background-color: lightgray;
    font-weight: bold;
    font-size: 11pt;
    height: 25px;
}

.normalTR {
    background-color: white;
}

    .normalTR:hover {
        background-color: lightblue;
    }

.normalTRsmall {
    background-color: #FFFFFF;
    font-size: 11pt;
}

    .normalTRsmall:hover {
        background-color: rgb(220, 235, 245);
    }

.errorTR {
    background-color: #FFFF00;
}

.normalTD {
    background-color: #FFFFFF;
}

.error, .alert {
    font-weight: bold;
    font-style: italic;
    color: red;
    padding: 10px 5px;
    margin: 10px 0;
    border: solid 1px red;
    background-color: rgba(255,0,0,0.1);
    border-radius: 2px 2px;
    font-size: 12pt;
}

.divAlert {
    font-weight: bold;
    font-style: italic;
    color: blue;
    padding: 10px 5px;
    margin: 10px 0;
    border: solid 1px navy;
    background-color: rgba(0,0,245,0.1);
    border-radius: 2px 2px;
    font-size: 12pt;
}

a {
    color: blue;
}

.divSubNote {
    font-style: italic;
    color: darkblue;
    padding: 5px 0px 5px 0px;
    font-size: 12pt;
    font-weight: bold;
}

.small {
    color: #800000;
    font-size: 11pt;
}

.message {
    font-weight: bold;
    font-style: italic;
    color: red;
    font-size: 12pt;
    margin-bottom: 10px;
}

.highlightTR {
    background-color: #FFFF00;
    font-style: italic;
}

/*.defaultTextBox {
    padding: 0;
    height: 30px;
    position: relative;
    left: 0;
    outline: none;
    border: 1px solid #000000;
    border-color: rgba(0,0,0,.15);
    background-color: white;
    font-size: 16px;
}*/


/* style for popup locker */
.LockOff {
    display: none;
    visibility: hidden;
}

.LockOn {
    display: block;
    visibility: visible;
    position: fixed;
    z-index: 9999;
    top: 0px;
    left: 0px;
    padding-top: 250px;
    width: 100%;
    height: 100%;
    margin: 0 0;
    background-color: rgba(130, 130, 130, 0.8); /*rgb(219,229,241);*/
    text-align: center;
}

.divLock {
    font-size: 12pt;
    font-weight: bold;
    color: Navy;
    border: solid 5px Navy;
    background-color: white; /*#00092b rgb(0,0,155);*/
    width: 90%;
    margin: 0 auto;
    max-width: 500px;
    height: 200px;
}

.popUpLockOn {
    display: block;
    visibility: visible;
    position: fixed;
    z-index: 9999;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 0 0;
    background-color: rgba(130, 130, 130, 0.8); /*rgb(219,229,241);*/
    text-align: center;
}



/* ========================================= */
/* ========================================= */
/* Style the tab on main menu page */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

    /* Style the buttons inside the tab */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 15px 25px;
        transition: 0.3s;
        font-size: 15px;
        font-weight: bold;
    }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: silver;
        }

        /* Create an active/current tablink class */
        .tab button.active {
            background-color: blue;
            color: white;
        }

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}


@media (max-width: 600) {
    body {
        padding: 10px;
        margin: 0;
    }
}