body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 4px;
}

table {
    width: 100%;
    font-size: 76%;
}

input {
    border-radius: 2px;
}

    input[type=submit], input[type=button] {
        border-color: white;
        border-width: 2px;
    }

        input[type=submit]:hover, input[type=button]:hover {
            border-color: #E2E2D9;
        }

    button, input[type="button"] {
        border-radius: 2px;
    }

        .button:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover {
            transform: translateY(2px);
            transform: translateX(-1px);
            -webkit-box-shadow: 1px 1px 2px 1px rgb(34 52 82 / 20%);
            -moz-box-shadow: 1px 1px 2px 1px rgba(34,52,82,0.2);
            box-shadow: 1px 1px 2px 1px rgb(34 52 82 / 20%);
        }

#DivLoginWrap {
    width: 100%;
    margin: 0 auto;
    background: #fff;
}

#OngoingLogotype {
    display: none;
}

#DivLoginHeader {
    display: none;
}

#DivScanningLoginPage #ButLogin, #DivScanningLoginPage #ButSsoLogin, #DivScanningLoginPage #ButOngoingEmployeeSsoLogin {
    display: block;
    background: #2E4064;
    color: #fff;
    font-family: 'Roboto Slab', sans-serif;
    font-weight: 700;
    border: none;
    border-radius: 3px;
    width: 100%;
    padding: 20px 20px 20px 20px;
    margin: 20px 20px 0.5rem 0;
    height: 60px;
    font-size: 1.25rem;
    background: #6BB27C;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    cursor: pointer;
}

#ButLogin:hover {
    transform: translateY(2px);
    transform: translateX(-1px);
    -webkit-box-shadow: 1px 1px 2px 1px rgb(34 52 82 / 20%);
    -moz-box-shadow: 1px 1px 2px 1px rgba(34,52,82,0.2);
    box-shadow: 1px 1px 2px 1px rgb(34 52 82 / 20%);
}

#DivScanningLoginPage input[type="submit"] {
    width: 70px;
}

/* CSS HOOVER TOOLTIP */
div.tooltip {
    outline: none;
    text-align: center;
    width: 100%;
    padding-top: 0px !important;
}

    div.tooltip strong {
        line-height: 30px;
    }

    div.tooltip:hover {
        text-decoration: none;
    }

    div.tooltip img {
        width: 24px;
        height: 24px;
    }

    div.tooltip span {
        z-index: 10;
        display: none;
        padding: 10px;
        margin-top: -10px;
        margin-left: 0px;
        max-width: 240px;
        line-height: 16px;
        text-align: left;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        -moz-box-shadow: 5px 5px 8px #CCC;
        -webkit-box-shadow: 5px 5px 8px #CCC;
        box-shadow: 5px 5px 8px #CCC;
    }

    div.tooltip:hover span {
        display: inline;
        position: absolute;
        color: #111;
        border: 1px solid #A8A8A8;
        background: #fff;
        text-align: left;
        max-width: 240px;
    }

/* CSS rules for ipad/tablet/iphone Login */
@media only screen and (min-width : 320px), only screen and (-webkit-min-device-pixel-ratio: 2) {
    body {
        padding: 20px;
    }

    input {
        -webkit-tap-highlight-color: transparent;
    }

        input[type="button"]:active, input[type="submit"]:active, .GridItem td a:active:not(.aspNetDisabled), .GridSelect td a:active:not(.aspNetDisabled), .GridParentItem td a:active:not(.aspNetDisabled), .GridSubItem td a:active:not(.aspNetDisabled), .GridParentSelect td a:active:not(.aspNetDisabled) {
            box-shadow: 0 1px 5px rgba(66, 91, 135, 0.78) inset;
        }

    body#BodyLogin {
        margin: 0;
        padding: 8px;
        background: #2E4064;
        background-image: url('../Bilder/login-background.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }

    @supports (background-image: url('../Bilder/login-background.webp')) {
        .login-body {
            background-image: url('../Bilder/login-background.webp');
        }
    }

    .lightGreyGradient {
        background-color: #E2E2DA;
    }

    #CustomerSpecificLogo {
        max-height: 100px;
        max-width: 300px;
        margin: 20px auto 0;
    }

    #OngoingLogotype {
        display: inline;
    }

    .ongoing-login-logo {
        width: 150px;
        height: auto;
        margin-bottom: 17px;
    }

    .MenuButtonsTopLineLogo {
        height: 50px;
        width: 50px;
    }

    #DivLoginHeader {
        font-family: 'Roboto Slab', sans-serif;
        color: #3D57A9;
        display: block;
        padding: 10px 0;
        border-top-right-radius: 6px;
        border-top-left-radius: 6px;
        font-size: 26px;
    }

    #DivLoginWrap {
        margin-top: 25px;
        max-width: 340px;
        text-align: center;
        border-radius: 6px;
        box-shadow: 6px 6px 0px 0px rgb(238 238 238 / 20%);
    }

    #DivScanningLoginPage {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
        text-align: left;
    }

        #DivScanningLoginPage .errorMessage {
            font-size: 1em;
        }

        #DivScanningLoginPage input:not(#CheckRememberMFA) {
            -webkit-appearance: none;
            width: 100%;
            box-sizing: border-box;
            height: 40px;
            font-size: 1.5em;
            padding: 5px;
            border: solid 1px;
        }

            #DivScanningLoginPage input[type="submit"] {
                width: 100%;
                margin: 5px 0;
                border-radius: 3px;
            }

                #DivScanningLoginPage input[type="submit"]:active {
                    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.3) inset;
                }

        #DivScanningLoginPage #LMessage {
            clear: both;
            display: block;
            margin: 10px 0;
        }

        #DivScanningLoginPage input[type="text"], #DivScanningLoginPage input[type~="password"], #DivScanningLoginPage select {
            width: 100%;
            border: solid 1px #eee;
            border-radius: 2px;
            background: #f9f9f9;
        }

            #DivScanningLoginPage input[type~="text"]:focus, #DivScanningLoginPage input[type~="password"]:focus {
                outline: none;
                border: solid 2px #000000;
            }

        #DivScanningLoginPage label {
            font-size: 0.8125rem;
            color: #999999;
        }

    .dlGoodsOwners {
        table-layout: fixed;
    }

        .dlGoodsOwners .ListButtons {
            overflow: hidden;
            text-overflow: ellipsis;
        }
}

.MainDiv {
    width: 100%;
}

div {
    width: 100%;
}

td {
    vertical-align: top;
}

    td.leftTd {
        width: 70%;
    }

    td.rightTd {
        width: 30%;
    }

.smallButtons {
    width: 50%;
    background-color: #E2E2DA;
}

.ListButtons {
    width: 100%;
    background-color: #E2E2DA;
    font-size: 1.5em;
    padding: 0.5em 0;
    margin: 0px;
    cursor: pointer;
}

.ListButtonsMedium {
    width: 100%;
    background-color: #E2E2DA;
    font-size: 1.5em;
    padding: 0.5em 0;
    margin: 0px;
}

.MenuButtons {
    width: 80px;
    background-color: #E2E2DA;
    font-size: 1.5em;
}

select {
    font-size: 1em;
    width: 100%;
    border-radius: 2px;
}

.text {
    font-size: 1.5em;
}

.textOK {
    font-size: 1.5em;
    background-color: Green;
    color: White;
    font-weight: bold;
}

.textNOK {
    font-size: 1.5em;
    background-color: Red;
    color: White;
    font-weight: bold;
}

.textWRN {
    font-size: 1.5em;
    background-color: Orange;
    color: White;
    font-weight: bold;
}

.headerText {
    font-size: 1em;
    font-weight: bold;
    padding-bottom: 1em;
    display: inline-block;
}

.userName {
    font-size: 1em;
    font-weight: bold;
    display: inline-block;
}

td.menu {
    width: 30%;
    vertical-align: top;
}

td.menuLogOut {
    width: 40%;
    vertical-align: top;
    text-align: right;
}


input.PalletList {
    width: 50%;
}

input.TCommand {
    width: 95%;
}

textarea.TCommand {
    width: 90%;
}

input.TCommandSmall {
    width: 80%;
}

.MenuButtonsTop {
    width: 100%;
    background-color: #E2E2DA;
}

.MenuButtonsTopLineBreak {
    width: 100%;
    background-color: #E2E2DA;
    white-space: normal;
    cursor: pointer;
    color: #2E4064;
}

.GridHead {
    background-color: #2E4064;
    font-size: 1.2em;
}

    .GridHead, .GridHead td a {
        color: white;
        text-align: left;
        font-weight: bold;
    }

tr.GridHead td.rAlign {
    color: white;
    text-align: right;
    font-weight: bold;
    padding-right: 5px;
}

.GridItem td, .GridSelect td, .GridParentItem td, .GridSubItem td, .GridSubSelect td, .GridParentSelect td {
    padding-right: 3pt;
    font-size: 1.2em;
}

    tr.GridItem td.rAlign, tr.GridSelect td.rAlign, .GridParentItem td.rAlign, .GridSubItem td.rAlign, .GridSubSelect td.rAlign, .GridParentSelect td.rAlign {
        text-align: right;
    }

tr.GridSelect.checked {
    background-color: #D1D5DC;
}

tr.GridSelect {
    background: rgba(107, 178, 124, 0.3);
}

tr.GridItem:nth-child(2n+1) {
    background-color: #fafbff;
}

tr.GridItem:hover, tr.GridParentItem:hover, tr.GridSubItem:hover {
    background-color: #cad3f7;
}

tr.GridSubSelect:hover, tr.GridParentSelect:hover {
    background-color: rgba(85, 195, 54, 0.94);
}

.GridItem td a, .GridSelect td a, .GridParentItem td a, .GridSubItem td a, .GridParentSelect td a, .GridSubSelect td a {
    font-size: 1em;
    padding: 3px;
    text-align: center;
    background-color: #E2E2DA;
    border: solid 1px #8591A6;
    box-sizing: border-box;
    color: #000;
    text-decoration: none;
}

    .GridItem td a.aspNetDisabled, .GridSelect td a.aspNetDisabled, .GridParentItem td a.aspNetDisabled, .GridSubItem td a.aspNetDisabled, .GridParentSelect td a.aspNetDisabled, .GridSubSelect td a.aspNetDisabled {
        color: #888888;
    }

tr.GridSubItem {
    font-style: italic;
    background: rgba(0,41,110,0.15);
}

tr.GridSubSelect {
    font-style: italic;
    background: rgba(107, 178, 124, 0.3);
}

    tr.GridSubItem > td:first-child, tr.GridSubSelect > td:first-child {
        padding-left: 15px;
        background: url(Bilder/icons/dark/subpalletitem.png) left center no-repeat;
    }

tr.GridParentItem {
    background: rgba(0,41,110,0.3);
}

.icon {
    font-family: 'IcoFont' !important;
    color: #276695 !important;
    font-size: 1.5rem !important;
    text-decoration: none !important;
    font-weight: normal;
    margin-top: 5px;
    padding: 10px;
}

    .icon.settingsIcon::before {
        content: "\ec83";
    }

.infoIcon::before {
    content: "\efca";
}

tr.GridParentSelect {
    background: rgba(32, 189, 3, 0.32);
}

.search-div > .GridHeadSearch, .search-div > .GridHeadFrom, .search-div > .GridHeadTo {
    display: inline;
}

.search-div.active > .GridHeadSearch, .search-div.active > .GridHeadFrom, .search-div.active > .GridHeadTo {
    display: none;
}

.search-div > .GridHeadClearSearch, .search-div > .GridHeadSearchField {
    display: none;
}

.search-div.active > .GridHeadClearSearch, .search-div.active > .GridHeadSearchField {
    display: inline;
}

.filter > div {
    display: inline-block;
    width: auto;
}

table.KeyValueTable {
    line-height: 1em;
    border: solid 2px #2e4064;
    font-size: 1.2em;
}

    table.KeyValueTable.small {
        line-height: 1em;
        border: solid 2px #2e4064;
        font-size: 0.7em;
    }

    table.KeyValueTable tr:nth-child(odd) {
        background-color: #F9F9F9;
    }

    table.KeyValueTable td:first-child.KeyValueTable {
        text-align: right;
        font-weight: bold;
        width: 20%;
    }

/* CSS rules for ipad/tablet/iphone Scanning */
@media only screen and (min-width: 320px), only screen and (-webkit-min-device-pixel-ratio: 2) {
    .MenuButtonsTop {
        font-size: 1.5em;
    }

    .MenuButtonsTopLineBreak {
        font-size: 0.8em;
    }

    a {
        font-size: 1.5em;
    }

    .GridItem td a, .GridSelect td a, .GridParentItem td a, .GridSubItem td a, .GridParentSelect td a, .GridSubSelect td a {
        display: inline-block;
        width: 100%;
    }

    .GridHead td a {
        font-size: 1em;
    }

    #DivMain div {
        padding-top: 10px;
    }

    div#MobilePanel {
        padding-top: 0px;
    }

    .GridItem td a div, .GridSelect td a div, .GridParentItem td a div, .GridSubItem td a div, .GridParentSelect td a div, .GridSubSelect td a div {
        padding-top: 0px !important;
    }

    .ListButtons {
        width: 100%;
        background-color: #B8C7E6;
        font-size: 2em;
        height: 3em;
        color: #2E4064;
    }

    .ListButtonsMedium {
        width: 100%;
        background-color: #B8C7E6;
        font-size: 1.5em;
        height: 4em;
    }

    .TCommand {
        height: 4em;
    }

    input[type="text"], input[type="submit"], input[type="button"] {
        -webkit-appearance: none;
        box-sizing: border-box;
        line-height: 1em;
    }

    input[type="text"], input[type=number], input[type=date], input[type=datetime], input[type=number] {
        background: #F9F9F9;
    }

    .ListButtons, .ListButtonsMedium, .lightGreyGradient, .MenuButtonsTop, .MenuButtonsTopLineBreak, .buttonInput {
        background-color: #E2E2D9;
    }

        .ListButtons:disabled, .ListButtons.aspNetDisabled, .ListButtonsMedium:disabled, .ListButtonsMedium.aspNetDisabled, .ListButtonsLineBreak.aspNetDisabled,
        .lightGreyGradient:disabled, .lightGreyGradient.aspNetDisabled, .MenuButtonsTop:disabled, .MenuButtonsTop.aspNetDisabled, .MenuButtonsTopLineBreak:disabled, .MenuButtonsTopLineBreak.aspNetDisabled,
        .buttonInput:disabled, .buttonInput.aspNetDisabled {
            opacity: 0.5;
            font-style: italic;
        }

    .RedGradientBackground {
        background: #ffbcbc !important;
        background-image: -o-linear-gradient(top, #ffe2e2 0%,#ffbcbc 100%) !important;
        background-image: -ms-linear-gradient(top, #ffe2e2 0%,#ffbcbc 100% !important);
        background-image: -moz-linear-gradient(top, #ffe2e2 0%,#ffbcbc 100%) !important;
        background-image: -webkit-linear-gradient(top, #ffe2e2) 0%,#ffbcbc 100%) !important;
        background-image: linear-gradient(to bottom, #ffe2e2 0%,#ffbcbc 100%) !important;
    }

    .MenuButtonsTop, .MenuButtonsTopLineBreak, .ListButtons, .ListButtonsMedium, .buttonInput {
        border: solid 1px white;
        border-radius: 3px;
        padding: 10px;
    }

        .MenuButtonsTop:active, MenuButtonsTopLineBreak:active, .ListButtons:active, .ListButtonsMedium:active {
            box-shadow: 0 1px 15px rgba(0, 0, 0, 0.3) inset;
        }

    input.TCommand, input.TScanningInput {
        width: 100%;
        color: #172B4D;
        border: solid 1px #ccc;
        box-shadow: 0 1px 5px rgba(0, 2, 5, 0.1) inset;
        padding: 10px;
        background: #F9F9F9;
    }

    input.TScanningInput {
        height: 2em;
        padding: 10px;
        font-size: 1.5em;
    }

        input.TCommand:focus, input.TScanningInput:focus {
            outline: none;
            border: solid 2px black;
        }
}

/* Scanning UI Classes */

.width-half {
    width: 49.99%;
}

.width-full {
    width: 99.99%;
}

.width80 {
    width: 80%;
}

.width20 {
    width: 20%;
}

.left {
    float: left;
}

.right {
    float: right;
}

@supports (-webkit-touch-callout: none) {
    input[type='date'] {
        -webkit-min-logical-width: calc(100% - 16px);
    }
}

.textInput {
    width: 100%;
    box-sizing: border-box;
}

.textInputSearch {
    width: 100%;
    box-sizing: border-box;
    background-image: url(../Bilder/icons/dark/search.png) !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    background-size: auto 1.5em !important;
}

.buttonInput {
    width: 100%;
}

.dropdownInput {
    padding: 10px;
}

.textLabel, textLabelMedium {
    font-size: 1em;
}

.goodsOwnerLogoOrText {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
    font-weight: bold;
    font-size: 2.5em
}

.goodsOwnerLogoOrTextCompact {
    text-align: center;
    margin-top: 2px;
    margin-bottom: 2px;
    font-weight: bold;
    font-size: 2.5em
}

.infoTable {
    border-collapse: collapse;
    font-size: 1.5em;
}

    .infoTable td {
        border: solid 1px #ccc;
    }

.errorMessage {
    border: solid 2px rgb(235, 106, 95);
    text-align: center;
    color: #000000;
    background: rgba(235, 106, 95, 0.25);
    font-weight: 700;
    font-size: 1em;
    padding: 10px 0;
    box-sizing: border-box;
    line-height: 1em;
    margin-bottom: 0.1em;
}

.successMessage {
    border: solid 2px rgb(107, 178, 124);
    text-align: center;
    color: #2E4064;
    background: rgba(107, 178, 124, 0.3);
    font-weight: 700;
    font-size: 1em;
    padding: 10px 0;
    box-sizing: border-box;
    line-height: 1em;
    margin-bottom: 0.1em;
}

.confirmMessage {
    border: solid 2px #EEC800;
    text-align: center;
    background: #FFFFD5;
    color: #2E4064;
    font-weight: bold;
    font-size: 1em;
    padding: 10px 0;
    box-sizing: border-box;
    line-height: 1em;
    margin-bottom: 0.1em;
}

.infoMessage {
    border: solid 2px #2E4064;
    background: rgba(34,52,82,0.1);
    color: #2E4064;
    padding: 10px 0;
    font-size: 1em;
    box-sizing: border-box;
    margin-bottom: 0.1em;
    clear: both;
    word-break: break-word;
    text-align: center;
}

.undisabled {
    background: #fff;
    border: solid #aaa 1px;
}

.PickabilityOk {
    width: 10px;
    background: rgb(100, 185, 90);
    background: rgba(50, 160, 40, 0.6);
}

.PickabilityPrio {
    width: 10px;
    background: rgb(200, 220, 120);
    background: rgba(190, 220, 60, 0.6);
}

.PickabilityNoPrio {
    width: 10px;
    background: rgb(255, 255, 120);
}

.PickabilityNot {
    width: 10px;
    background: rgb(204, 72, 57);
}

.scanningCheckbox input, .checkbox-list-scrollable-container input {
    cursor: pointer;
}

.scanningCheckbox label, .checkbox-list-scrollable-container label {
    cursor: pointer;
}

@media (min-width: 320px) {
    .ListButtons {
        height: 3em;
        font-size: 2em;
    }

    .successMessage, .errorMessage, .confirmMessage, .textLabel, .buttonInput, .textInput, .textInputSearch, .dropdownInput, .infoMessage {
        font-size: 2.3em;
        line-height: 1.7em;
    }

    .textLabelMedium {
        font-size: 1.5em;
        line-height: 1.5em;
    }

    select, .textInput, .textInputSearch, .buttonInput {
        font-size: 1.5em;
        padding: 10px;
    }

    .textLabel {
        font-size: 2em;
        padding: 0 0;
    }

    .headerText, .userName {
        font-size: 1.5em;
    }

    input.TScanningInput {
        height: 3em;
        padding: 10px;
        font-size: 2em;
    }

    .GridHead, .GridItem td, .GridSelect td, .GridParentItem td, .GridSubItem td, .GridSubSelect td, .GridParentSelect td {
        font-size: 1.5em;
    }

    .GridHead {
        background-color: #2E4064;
    }

    .scanningCheckbox {
        display: block;
        width: 100%;
        height: 3.1em;
        float: left;
        margin-bottom: 20px;
    }

        .scanningCheckbox > input[type=checkbox], .checkbox-list-scrollable-container table input {
            -ms-transform: scale(2);
            -moz-transform: scale(2);
            -webkit-transform: scale(2);
            -o-transform: scale(2);
            transform: scale(2);
            margin: 1.5em 1.75em 0.5em 1em;
            box-shadow: none
        }

    @media screen and (min-width: 600px) {
        .scanningCheckbox > label {
            font-size: 2em;
        }

        .checkbox-list-scrollable-container table label {
            font-size: 2.5em;
        }
    }

    @media screen and (max-width: 600px) {
        /* Decrease size on smaller screen */
        .scanningCheckbox > label {
            font-size: 1.5em;
        }

        .checkbox-list-scrollable-container table label {
            font-size: 2em;
        }
    }

    .scanningRadio > input[type=radio] {
        -ms-transform: scale(2);
        -moz-transform: scale(2);
        -webkit-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
        margin: 1.5em 1.75em 0.5em 1em;
        box-shadow: none
    }

    .scanningRadio > label {
        font-size: 2em;
        margin-right: 1.5em;
    }
}

.gridmessage-div {
    padding: 5px;
    border-radius: 4px;
    color: white;
    border: solid 1px;
    min-width: 30px;
}

.gridmessage-success {
    background: #B4DB9E;
    color: #295e0c;
    border-color: #295e0c;
}

.gridmessage-warning {
    background-color: Orange;
    color: White;
    border-color: white;
}

.gridmessage-error {
    background: #F7E4E1;
    color: #EB6A5F;
    border-color: #EB6A5F;
}

.gridmessage-info {
    background: #C3D4F9;
    color: #12347E;
    border-color: #12347E;
}

.choose-process-button-div {
    padding-top: 0px;
}

.choose-process-button {
    white-space: normal;
}

.table-cell-right-aligned {
    text-align: right;
}

    .table-cell-right-aligned.first {
        width: 20%;
    }

.checkbox-list-button {
    font-size: 1.5em !important;
    color: black !important
}

.td-function-item a:hover {
    background: #F9F9F9;
}


/*
    .hide-before is a css class to hide psudo-elements created by using the "::before" selector
*/

.hide-button-text {
    transition: all 0.2s;
    opacity: 0;
}

.hide-before:before {
    display: none !important;
}

.button--loading-green:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 4px solid transparent;
    border-top-color: #6bb27c;
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite;
}

.button--loading-blue:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 4px solid transparent;
    border-top-color: #2E4064;
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite;
}

.LargeFunctionButtons .GridItem td a {
    padding: 8px 1px 8px 1px !important;
}

@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn);
    }

    to {
        transform: rotate(1turn);
    }
}

.scanningWarning {
    color: red;
    font-weight: bold;
}