:root {
    --screen-width: 1366;
    --mobile-screen-width: 390;
}

:root {
    --bs-custom-offcanvas-width: 300px;
}

@media (min-width: 992px) {
    :root {
        --bs-custom-offcanvas-width: calc((400 / var(--screen-width)) * 100vw) !important;
    }
}

@media (max-width: 992px) {
    .hide-on-mobile {
        display: none !important;
    }
    .hide-on-desktop {
        /*display: revert !important;*/
    }
    .show-on-desktop {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .hide-on-mobile {
        /*display: revert !important;*/
    }
    .show-on-mobile {
        display: none !important;
    }
    .hide-on-desktop {
        display: none !important;
    }
    .show-on-desktop {
        /*display: revert !important;*/
    }
}

.hidden {
    display: none !important;
}

.pointer-events-none {
    pointer-events: none;
}

.one-row-ellipsis {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.offcanvas.offcanvas-start {
    width: var(--bs-custom-offcanvas-width) !important;
}

main > .container, main > .container-fluid
{
    padding: 70px 15px 20px;
}

.footer {
    background-color: #f5f5f5;
    font-size: .9em;
    height: 60px;
}

.footer > .container, .footer > .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

.btn-block {
    display: block;
    width: 100%;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px #212529;
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px #212529;
    border-bottom-width: 0;
}

.grid-view th,
.grid-view td:last-child {
    white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
    min-width: 50px;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.navbar form > button.logout {
    padding-top: 7px;
    color: rgba(255, 255, 255, 0.5);
}

@media(max-width:767px) {
    .navbar form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.navbar form > button.logout:focus,
.navbar form > button.logout:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
}

.navbar form > button.logout:focus {
    outline: none;
}

/* style breadcrumb widget as in previous bootstrap versions */
.breadcrumb {
    background-color: var(--bs-gray-200);
    border-radius: .25rem;
    padding-left: 12px;
    padding-right: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
}

.breadcrumb-item > a
{
    text-decoration: none;
}

.cursor-pointer
{
    cursor: pointer;
}

/**BS4 media queries for padding classes**/
@media (min-width: 992px) {
    .breadcrumb {
        background-color: var(--bs-gray-200);
        border-radius: .25rem;
        padding-left: calc((12 / var(--screen-width)) * 100vw);
        padding-right: calc((24 / var(--screen-width)) * 100vw);
        padding-top: calc((24 / var(--screen-width)) * 100vw);
        padding-bottom: calc((24 / var(--screen-width)) * 100vw);
    }

    .p-lg-0 {
        padding: 0 !important;
    }

    .p-lg-1 {
        padding: .25rem !important;
    }

    .p-lg-2 {
        padding: .5rem !important;
    }

    .p-lg-3 {
        padding: 1rem !important;
    }

    .p-lg-4 {
        padding: 1.5rem !important;
    }

    .p-lg-5 {
        padding: 3rem !important;
    }

    .p-lg-6 {
        padding: 4rem !important;
    }

    .p-lg-7 {
        padding: 6rem !important;
    }

    .p-lg-8 {
        padding: 8rem !important;
    }

    .p-lg-9 {
        padding: 12rem !important;
    }

    .p-lg-10 {
        padding: 16rem !important;
    }

    .pt-lg-0 {
        padding-top: 0 !important;
    }

    .pt-lg-1 {
        padding-top: .25rem !important;
    }

    .pt-lg-2 {
        padding-top: .5rem !important;
    }

    .pt-lg-3 {
        padding-top: 1rem !important;
    }

    .pt-lg-4 {
        padding-top: 1.5rem !important;
    }

    .pt-lg-5 {
        padding-top: 3rem !important;
    }

    .pt-lg-6 {
        padding-top: 4rem !important;
    }

    .pt-lg-7 {
        padding-top: 6rem !important;
    }

    .pt-lg-8 {
        padding-top: 8rem !important;
    }

    .pt-lg-9 {
        padding-top: 12rem !important;
    }

    .pt-lg-10 {
        padding-top: 16rem !important;
    }

    .pr-lg-0 {
        padding-right: 0 !important;
    }

    .pr-lg-1 {
        padding-right: .25rem !important;
    }

    .pr-lg-2 {
        padding-right: .5rem !important;
    }

    .pr-lg-3 {
        padding-right: 1rem !important;
    }

    .pr-lg-4 {
        padding-right: 1.5rem !important;
    }

    .pr-lg-5 {
        padding-right: 3rem !important;
    }

    .pr-lg-6 {
        padding-right: 4rem !important;
    }

    .pr-lg-7 {
        padding-right: 6rem !important;
    }

    .pr-lg-8 {
        padding-right: 8rem !important;
    }

    .pr-lg-9 {
        padding-right: 12rem !important;
    }

    .pr-lg-10 {
        padding-right: 16rem !important;
    }

    .pb-lg-0 {
        padding-bottom: 0 !important;
    }

    .pb-lg-1 {
        padding-bottom: .25rem !important;
    }

    .pb-lg-2 {
        padding-bottom: .5rem !important;
    }

    .pb-lg-3 {
        padding-bottom: 1rem !important;
    }

    .pb-lg-4 {
        padding-bottom: 1.5rem !important;
    }

    .pb-lg-5 {
        padding-bottom: 3rem !important;
    }

    .pb-lg-6 {
        padding-bottom: 4rem !important;
    }

    .pb-lg-7 {
        padding-bottom: 6rem !important;
    }

    .pb-lg-8 {
        padding-bottom: 8rem !important;
    }

    .pb-lg-9 {
        padding-bottom: 12rem !important;
    }

    .pb-lg-10 {
        padding-bottom: 16rem !important;
    }

    .pl-lg-0 {
        padding-left: 0 !important;
    }

    .pl-lg-1 {
        padding-left: .25rem !important;
    }

    .pl-lg-2 {
        padding-left: .5rem !important;
    }

    .pl-lg-3 {
        padding-left: 1rem !important;
    }

    .pl-lg-4 {
        padding-left: 1.5rem !important;
    }

    .pl-lg-5 {
        padding-left: 3rem !important;
    }

    .pl-lg-6 {
        padding-left: 4rem !important;
    }

    .pl-lg-7 {
        padding-left: 6rem !important;
    }

    .pl-lg-8 {
        padding-left: 8rem !important;
    }

    .pl-lg-9 {
        padding-left: 12rem !important;
    }

    .pl-lg-10 {
        padding-left: 16rem !important;
    }

    .px-lg-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .px-lg-1 {
        padding-right: .25rem !important;
        padding-left: .25rem !important;
    }

    .px-lg-2 {
        padding-right: .5rem !important;
        padding-left: .5rem !important;
    }

    .px-lg-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .px-lg-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .px-lg-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .px-lg-6 {
        padding-right: 4rem !important;
        padding-left: 4rem !important;
    }

    .px-lg-7 {
        padding-right: 6rem !important;
        padding-left: 6rem !important;
    }

    .px-lg-8 {
        padding-right: 8rem !important;
        padding-left: 8rem !important;
    }
}



@media (min-width: 768px) {
    .p-md-0 {
        padding: 0 !important;
    }

    .p-md-1 {
        padding: .25rem !important;
    }

    .p-md-2 {
        padding: .5rem !important;
    }

    .p-md-3 {
        padding: 1rem !important;
    }

    .p-md-4 {
        padding: 1.5rem !important;
    }

    .p-md-5 {
        padding: 3rem !important;
    }

    .p-md-6 {
        padding: 4rem !important;
    }

    .p-md-7 {
        padding: 6rem !important;
    }

    .p-md-8 {
        padding: 8rem !important;
    }

    .p-md-9 {
        padding: 12rem !important;
    }

    .p-md-10 {
        padding: 16rem !important;
    }

    .pt-md-0 {
        padding-top: 0 !important;
    }

    .pt-md-1 {
        padding-top: .25rem !important;
    }

    .pt-md-2 {
        padding-top: .5rem !important;
    }

    .pt-md-3 {
        padding-top: 1rem !important;
    }

    .pt-md-4 {
        padding-top: 1.5rem !important;
    }

    .pt-md-5 {
        padding-top: 3rem !important;
    }

    .pt-md-6 {
        padding-top: 4rem !important;
    }

    .pt-md-7 {
        padding-top: 6rem !important;
    }

    .pt-md-8 {
        padding-top: 8rem !important;
    }

    .pt-md-9 {
        padding-top: 12rem !important;
    }

    .pt-md-10 {
        padding-top: 16rem !important;
    }

    .pr-md-0 {
        padding-right: 0 !important;
    }

    .pr-md-1 {
        padding-right: .25rem !important;
    }

    .pr-md-2 {
        padding-right: .5rem !important;
    }

    .pr-md-3 {
        padding-right: 1rem !important;
    }

    .pr-md-4 {
        padding-right: 1.5
    }

    .pr-md-5 {
        padding-right: 3rem !important;
    }

    .pr-md-6 {
        padding-right: 4rem !important;
    }

    .pr-md-7 {
        padding-right: 6rem !important;
    }

    .pr-md-8 {
        padding-right: 8rem !important;
    }

    .pr-md-9 {
        padding-right: 12rem !important;
    }

    .pr-md-10 {
        padding-right: 16rem !important;
    }

    .pb-md-0 {
        padding-bottom: 0 !important;
    }

    .pb-md-1 {
        padding-bottom: .25rem !important;
    }

    .pb-md-2 {
        padding-bottom: .5rem !important;
    }

    .pb-md-3 {
        padding-bottom: 1rem !important;
    }

    .pb-md-4 {
        padding-bottom: 1.5rem !important;
    }

    .pb-md-5 {
        padding-bottom: 3rem !important;
    }

    .pb-md-6 {
        padding-bottom: 4rem !important;
    }

    .pb-md-7 {
        padding-bottom: 6rem !important;
    }

    .pb-md-8 {
        padding-bottom: 8rem !important;
    }

    .pb-md-9 {
        padding-bottom: 12rem !important;
    }

    .pb-md-10 {
        padding-bottom: 16rem !important;
    }

    .pl-md-0 {
        padding-left: 0 !important;
    }

    .pl-md-1 {
        padding-left: .25rem !important;
    }

    .pl-md-2 {
        padding-left: .5rem !important;
    }

    .pl-md-3 {
        padding-left: 1rem !important;
    }

    .pl-md-4 {
        padding-left: 1.5rem !important;
    }

    .pl-md-5 {
        padding-left: 3rem !important;
    }

    .pl-md-6 {
        padding-left: 4rem !important;
    }

    .pl-md-7 {
        padding-left: 6rem !important;
    }

    .pl-md-8 {
        padding-left: 8rem !important;
    }

    .pl-md-9 {
        padding-left: 12rem !important;
    }

    .pl-md-10 {
        padding-left: 16rem !important;
    }

    .px-md-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .px-md-1 {
        padding-right: .25rem !important;
        padding-left: .25rem !important;
    }

    .px-md-2 {
        padding-right: .5rem !important;
        padding-left: .5rem !important;
    }

    .px-md-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .px-md-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .px-md-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .px-md-6 {
        padding-right: 4rem !important;
        padding-left: 4rem !important;
    }

    .px-md-7 {
        padding-right: 6rem !important;
        padding-left: 6rem !important;
    }

    .px-md-8 {
        padding-right: 8rem !important;
        padding-left: 8rem !important;
    }
}