@media screen and (max-width: 1900px) {
    .field--range.field--span-half, .field--range.field--span-one, .field--range.field--span-three {
        width: calc(100% - var(--field-gap) - 4px);
        max-width: calc(100% - var(--field-gap) - 4px);
    }
}


@media screen and (max-width: 1600px) {
    .field--span-one {
        width: calc(50% - var(--field-gap) - 4px);
        max-width: calc(50% - var(--field-gap) - 4px);
    }

    .field--range.field--span-half, .field--range.field--span-one, .field--range.field--span-three {
        width: calc(100% - var(--field-gap) - 4px);
        max-width: calc(100% - var(--field-gap) - 4px);
    }
}

@media screen and (max-width: 1400px) {
    /* UI framework */
    :root {
        --field-gap: 8px;
    }

    .field--span-half, .field--span-one, .field--span-three {
        width: calc(100% - var(--field-gap) - 4px);
        max-width: calc(100% - var(--field-gap) - 4px);
    }

    .field--span-one {
        min-width: 80px;
    }

    .field--span-half {
        min-width: 80px;
    }

    .field--span-three {
        min-width: 80px;
    }

    .field--span-full {
        min-width: 80px;
    }

    .cssmenu-container .menulogo {
        width: 120px;
    }

    .cssmenu-container .profile-username {
        display: none;
    }
}

/* small screen (mobile)*/
@media screen and (max-width: 900px) {
    /* UI framework */
    :root {
        --field-gap: 8px;
    }

    .field--span-half, .field--span-one, .field--span-three {
        width: calc(100% - var(--field-gap) - 4px);
        max-width: calc(100% - var(--field-gap) - 4px);
    }

    .field--span-one {
        min-width: 80px;
    }

    .field--span-half {
        min-width: 80px;
    }

    .field--span-three {
        min-width: 80px;
    }

    .field--span-full {
        min-width: 80px;
    }

    .collapsible-panel-collapsed, .collapsible-panel-expanded {
        margin-left: 0;
    }

    .grid-pager > td {
        padding-top: 0;
    }

        .grid-pager > td > table {
            table-layout: fixed;
            max-width: 100%;
            overflow: auto;
        }

            .grid-pager > td > table table {
                display: block;
                max-width: 100%;
                overflow: auto;
            }

    .grid-pager table > tbody > tr > td:first-child, .grid-pager table > tbody > tr > td:last-child {
        /*display: block;*/
        /*padding: 8px;*/
    }

    .grid-pager table > tbody > tr > td:last-child {
        padding-top: 0;
    }

    .field--caption-side {
        flex-direction: column;
        margin-bottom: 6px;
    }

        .field--caption-side label.field__caption, label.field__input-group {
            padding-top: 0;
        }

    label.field__caption {
        font-size: 0.8rem;
        padding-bottom: 0px;
        width: auto;
    }

    .panel-caption-aligned {
        margin-bottom: 16px;
    }

        .panel-caption-aligned > label.field__caption {
            /*display: none;*/
        }

    /* homepage related */
    /* edit page */
    .div-edit {
        padding: 24px;
        max-width: 100%;
        min-height: 30vh;
        padding-top: 12px;
    }

    .div-audit {
        padding: 24px;
        max-width: 100%;
    }

    .tabstrip-ver {
        flex-direction: column;
    }


    .tab-ver {
        flex: 1 1 60px;
        padding: 12px 0;
        padding-bottom: 8px;
        overflow: hidden;
        max-width: unset;
    }

        .tab-ver a, .tab-ver .selected a {
            width: auto;
            box-sizing: border-box;
            white-space: nowrap;
        }

            .tab-ver .selected a, .tab-ver .selected a:hover {
                border-radius: var(--border-radius);
                width: auto;
            }

        .tab-ver ul {
            display: flex;
            width: 100%;
            padding-bottom: 12px;
        }

    .div-main .tabstrip-ver .tabstrip-ver {
        padding-top: 0;
        padding-bottom: 0;
        width: unset;
        border-radius: unset;
        border-left: unset;
        border-right: unset;
        overflow-x: auto;
        overflow-y: hidden;
    }

        .div-main .tabstrip-ver .tabstrip-ver::-webkit-scrollbar {
            width: 0.4em;
            height: 0.4em;
        }

        .div-main .tabstrip-ver .tabstrip-ver::-webkit-scrollbar-track {
            width: 0.4em;
            height: 0.4em;
        }

        .div-main .tabstrip-ver .tabstrip-ver::-webkit-scrollbar-thumb {
            width: 0.4em;
            height: 0.4em;
        }

    .tabstrip-ver-content {
        min-height: unset;
        margin-right: 0;
        margin-top: 50px;
        box-shadow: none;
    }

        .tabstrip-ver-content.div-urgent {
            position: absolute;
            top: 120px;
            width: 100%;
        }

    .separator {
        margin: 16px 0;
    }

    .object-buttons {
        max-height: unset;
    }

    .div-main .tab-ver {
        margin: 0 0;
        padding: 0;
    }

    .div-main .tabstrip-ver .tabstrip-ver {
        position: static;
    }

    .div-main .tabstrip-ver ul {
        background: unset;
        padding: 8px 8px;
    }

    .div-main .tabstrip ul {
        padding: 0px;
    }

    .div-main .tabstrip-ver ul li:first-child {
        /*            margin-left: 24px;
*/
    }

    .object-panel-div-main .tab-ver {
        display: none;
    }

    .object-buttons-fixed--content {
        flex-direction: column;
        row-gap: 12px;
    }

    .object-buttons-fixed--content-right {
        flex-wrap: wrap;
    }

    .object-panel-div-main > div:first-child {
        flex-direction: column;
        max-width: 100vw;
    }

    .object-base-workflow .btn {
        width: 100%;
    }

    .object-base-workflow-dropdown {
        display: inline-block;
    }

    .object-base-workflow-buttons {
        display: none;
    }

    .div-status {
        right: 0;
        width: 100%;
    }

        .div-status::before, .div-status::after {
            display: none;
        }

    .div-objectbase {
        padding-top: 12px;
    }

    .object-base-workflow-container {
        display: flex;
        flex-direction: column-reverse;
    }

    .object-base-workflow {
        width: 100%;
        padding-left: 24px;
        box-sizing: border-box;
        padding-right: 24px;
    }

    .object-base-workflow-right {
        display: flex;
        column-gap: 6px;
    }

        .object-base-workflow-right > *:first-child {
            flex: 1 1 0;
        }

    .div-objectbase-int {
        padding: 0px 24px 0px 24px;
    }

    .dropdown-on-mobile .dropdown-button-menu--content .btn {
        text-align: left;
        background-color: rgba(158,158,158,.2);
        color: black;
    }

    .dropdown-on-mobile, .dropdown-on-mobile:not(.force-dropdown), .dropdown-on-mobile.force-dropdown {
        margin-right: 0;
    }

        .dropdown-on-mobile > .btn, .dropdown-on-mobile:not(.force-dropdown) > .btn, .dropdown-on-mobile.force-dropdown > .btn {
            display: inline-block;
        }

        .dropdown-on-mobile .dropdown-button-menu--content,
        .dropdown-on-mobile:not(.force-dropdown) .dropdown-button-menu--content,
        .dropdown-on-mobile.force-dropdown .dropdown-button-menu--content {
            display: inline-block;
            position: absolute;
            background: white;
            box-shadow: 2px 1px 1px 1px lightgrey;
            min-width: 200px;
            padding: 6px;
            max-width: 250px;
        }

    .dropdown-button-menu--content {
        padding: 6px;
        padding-bottom: 0;
    }

    .dropdown-on-mobile .dropdown-button-menu--content.hide,
    .dropdown-on-mobile:not(.force-dropdown) .dropdown-button-menu--content.hide,
    .dropdown-on-mobile.force-dropdown .dropdown-button-menu--content.hide {
        opacity: 0;
        display: none;
    }

    .dropdown-on-mobile .dropdown-button-menu--content .btn,
    .dropdown-on-mobile:not(.force-dropdown) .dropdown-button-menu--content .btn,
    .dropdown-on-mobile.force-dropdown .dropdown-button-menu--content .btn {
        display: inline-block;
        width: 100%;
        text-align: left;
        background-color: rgba(158,158,158,.2);
        color: black;
    }

    .dropdown-on-mobile::before, .dropdown-on-mobile:not(.force-dropdown)::before,
    .dropdown-on-mobile.force-dropdown::before {
        display: unset;
    }

    .object-base-workflow-button-container .dropdown-button-menu--content {
        /*        display: inline-block !important;
*/ flex-direction: column;
    }

    .subpanel-dialog {
        width: 100%;
        height: 100%;
    }

    .dialog-main {
        height: calc(100dvh - 164px);
        max-height: unset !important;
    }

    .normal-dialog {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
    }

    .search-dialog-div--searchbutton {
        padding-top: 24px;
    }


    .datetime-picker {
        flex-direction: column;
    }

    .time-picker {
        border-top: solid 1px #cad3dc;
        padding-bottom: 10px;
    }

        .time-picker .time-clock {
            display: none !important; /*force to hide analog clock*/
        }

    .div-main .tabstrip-ver .tabstrip-ver::-webkit-scrollbar, .grid-outer::-webkit-scrollbar {
        height: 12px;
        width: 14px;
        background: transparent;
        z-index: 12;
        overflow: visible;
    }

    .div-main .tabstrip-ver .tabstrip-ver::-webkit-scrollbar-track, .grid-outer::-webkit-scrollbar-track {
        background-color: #eee;
        border-radius: 10px;
        transition: all 0.12s;
    }


    .div-main .tabstrip-ver .tabstrip-ver::-webkit-scrollbar-corner, .grid-outer::-webkit-scrollbar-corner {
        background: #202020;
    }

    .div-main .tabstrip-ver .tabstrip-ver::-webkit-scrollbar-thumb, .grid-outer::-webkit-scrollbar-thumb {
        width: 10px;
        background-color: #aaa;
        background-clip: padding-box;
        border-radius: 10px;
        z-index: 12;
        border: 4px solid rgba(0,0,0,0);
        transition: background-color .32s ease-in-out;
        margin: 4px;
        min-height: 32px;
        min-width: 32px;
        background-clip: padding-box;
    }

        .div-main .tabstrip-ver .tabstrip-ver::-webkit-scrollbar-thumb:hover, .grid-outer::-webkit-scrollbar-thumb:hover {
            background: #999
        }

    .full-panel {
        display: flex;
        flex-direction: column-reverse;
    }

        .full-panel .div-main.object-panel-div-main {
            margin-top: 0 !important; /*for the urgent stick at the top*/
        }

    .cssmenu-container .menulogo {
        width: 80px;
    }

    .cssmenu-container .profile-username {
        display: none;
    }

    .search_limit_controls {
        width: 190px;
    }

    .panel-caption-aligned {
        padding: 0 !important;
    }
}


@media screen and (max-width: 900px) {
    .cssmenu-container .profile-username {
        display: none;
    }

    .search_limit_controls {
        display: none;
    }

    .div-home .grid-pager > td, .div-form .grid-pager > td {
        padding-left: 0;
        padding-right: 0;
    }

    .div-home .grid-pager table > tbody > tr > td:last-child, .div-form .grid-pager table > tbody > tr > td:last-child {
        padding-right: 40px;
    }

    .div-home .grid-pager table table > tbody > tr > td:first-child, .div-form .grid-pager table table > tbody > tr > td:first-child {
        padding-left: 40px;
    }

    .panel-caption-aligned {
        padding: 0 !important;
    }

    .search-icon-cell {
        width: 40px !important;
    }

    .search-icon-new {
        display: none;
    }

    div.search-simplesearch {
        width: calc(100vw - 180px) !important;
        max-width: 350px;
    }
        div.search-simplesearch input {
            width: calc(100vw - 180px) !important;
            max-width: 342px;
        }

    .div-search {
        padding-left: 40px !important;
    }
}


@media screen and (max-width: 600px) {
    .cssmenu {
        position: fixed;
        top: 76px;
        left: 0px;
        width: calc(100vw);
        height: calc(100vh - 76px);
        overflow-y: scroll;
    }

        .cssmenu > ul {
            flex-direction: column;
            width: calc(100vw);
            height: unset;
            padding: 0px;
            overflow: unset;
        }

            .cssmenu > ul > li {
                width: calc(100vw);
                margin-bottom: 1px;
                margin-right: 0px;
            }

            .cssmenu > ul > li > a {
                width: calc(100vw);
                border-radius: 0px;
            }

                .cssmenu > ul > li > a > .cssmenu-item-right {
                    display: none;
                }

    .cssmenu-container .hlink-white {
        display: block;
    }

    .cssmenu-container .cssmenu {
        display: none;
    }

    .cssmenu-container .cssmenu-logo {
        flex: 1 1 auto;
    }

    .cssmenu-container .menulogo {
        width: 120px;
    }

    .cssmenu-container .profile-username {
        display: none;
    }

    .panel-caption-aligned {
        padding: 0 !important;
    }

    .notify__text {
        width: calc(100vw - 150px);
    }
}


@media print {
    .div-main .tab-ver {
        display: none;
    }

    .div-edit {
        width: 100%;
        max-width: unset;
    }

    .object-base-workflow-buttons {
        display: none;
    }

    .object-buttons-fixed--content-right {
        display: none;
    }

    .layout-memo, .layout-attachments {
        box-sizing: border-box;
    }

    .field-action__link {
        display: none;
    }

    a {
        pointer-events: none;
        cursor: default;
        color: black;
    }

    a > span {
        color: black !important;
    }
}