main {
    display: flex;
}

input {
    border-radius: 1vmin;
    border: .4vmin solid #02a7eb;
}

.TitleCatalogue {
    left: 2vmin;
    position: relative;
    color: #0e3368;
    font-weight: 500;
    width: 90vw;
    overflow-y: hidden;
    margin-top: calc(3vh + 10.5vw);
    margin-bottom: 0.4em;
}

span.TitleCatalogue {
    font-size: 2vmin;
}

#filterbar {
    width: 25vw;
}

#filterbar .input-with-icon {
    width: 100%;
    gap: 0.4vw;
}

#filterText {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: 5vw;
    width: 100%;
    font-size: 1.8vw;
}

#filterbarDate {
    width: 24vw;
    height: 6vw;
    display: flex;
    align-items: center;
}

#filterbarDate .input-with-icon {
    width: 100%;
    gap: 0.4vw;
    color: var(--popup-text-color);
    opacity: 0.8;
}

#filterTextKeyboard {
    right: 4vw;
}

#filterTextEraser {
    right: 1vw;
}

.input-icon {
    font-size: 2.5vw;
}

#filterDate {
    padding: .1vw .8vw;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    color: var(--popup-text-color);
    box-sizing: border-box;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: 5vw;
    width: 100%;
    font-size: 1.8vw;
}

#filterbarDate .input-with-icon .input-icon {
    position: static;
    transform: none;
    cursor: pointer;
    z-index: 1;
}

#filterbarDate .fas {
    font-size: 2vw;
}

.glass-grey-icon {
    pointer-events: none;
    cursor: not-allowed;
}

.glass-icon-enabled {
    background: var(--glass-blue-bg);
    border: 1px solid var(--glass-blue-border);
    backdrop-filter: var(--glass-blue-backdrop);
    box-shadow: var(--glass-blue-shadow);
    pointer-events: all;
    cursor: pointer;
}

#import {
    right: 2vw;
}

#viewall {
    right: 12vw;
}

.allcatalogs {
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: flex-start;
    gap: 1vh;
}

.acatalog {
    width: calc(max(12vh, 12vw) + 0.5em);
    height: calc(max(12vh, 12vw) + 5.6em);
    margin: 0;
    background: white;
    border: 1px solid var(--glass-border, #c0c0c0);
    border-radius: max(0.5vh, 0.5vw);
    backdrop-filter: var(--glass-backdrop, blur(4px));
    box-shadow: var(--glass-shadow, 0 4px 16px rgba(31, 38, 135, 0.2));
    transition: all 0.3s ease;
    font-size: max(.7vh, .7vw);
    line-height: max(.7vh, .7vw);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.acatalog:hover {
    border-color: #c0c0ff;
}

.acatalog>p {
    margin: 0;
    padding: 0.1vh 0.5vw;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acatalog:hover>p {
    background-color: #c0c0ff;
    color: #098B03;
}

.bigText {
    font-size: 2.5vmin;
    font-weight: bold;
    color: #0e3368;
    text-align: center;
    margin-top: 2vh;
}

div.cover {
    display: flex;
    width: max(12vh, 12vw);
    height: max(12vh, 12vw);
    margin-top: .3vw;
}

.catalog-card-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 1.2vw;
    margin-top: 0.2vh;
    margin-bottom: 0.2vh;
}

img.cover {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: zoom-in;
}

.infobtn i,
.openbtn i,
.deletebtn i {
    font-size: min(1.8vh, 2.8vw);
}

.infobtn,
.openbtn,
.deletebtn {
    position: absolute;
    width: min(3.4vh, 5.4vw);
    height: min(3.4vh, 5.4vw);
    top: 1vh;
}

.infobtn,
.openbtn {
    left: 1vw;
}

.deletebtn {
    right: 1vw;
}

.catalog-filter-btn {
    width: min(3.6vh, 5.6vw);
    height: min(3.6vh, 5.6vw);
    border: none;
    padding: 0;
}

.catalog-filter-btn i {
    font-size: min(1.8vh, 2.8vw);
}

.BodyStyleCatalog {
    color: #0e3368;
    font-family: Ubuntu, Verdana, Segoe UI, Roboto, Oxygen-Sans, Cantarell, Helvetica Neue, sans-serif;
    word-break: break-word;
    overflow-wrap: break-word;
    background: #F5F5F5;
}

.allcatalogs {
    margin-top: 0.5vh;
}

.pointer {
    cursor: pointer;
}

.ToolbarElement {
    min-width: 4% !important;
}

.ToolbarFilterField {
    width: 20%;
    align-items: start;
}

.ToolbarFilterField input {
    width: 98%;
    height: 3vw;
    font-size: 3vmin;
}

.ToolbarDateField input {
    height: 3vw;
}

.ToolbarDateField {
    width: 14%;
    text-align: center;
}

.ToolbarButtonImage {
    height: 4vw !important;
}

.KeyboardButton {
    align-items: end !important;
}

#askDialogConfirmDeleteCatalog {
    position: fixed;
    inset: 0;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
    background: rgba(10, 20, 80, 0.45);
    backdrop-filter: blur(6px);
    z-index: 99999;
}

#askConfirmQuestion,
#askConfirmInfoCatalog {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 1 1 22rem;
    gap: 0.75rem;
    width: min(32rem, 100%);
    padding: 1rem 1.25rem;
    text-align: center;
}

#askDialogConfirmDeleteCatalog > div {
    min-height: auto;
    box-sizing: border-box;
    background: var(--popup-glass-bg);
    border: 1px solid var(--popup-glass-border);
    backdrop-filter: var(--popup-glass-backdrop);
    box-shadow: var(--popup-glass-shadow);
    color: var(--popup-text-color);
}

#askConfirmInfoCatalog {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    border-right: 0;
}

#askConfirmQuestion {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

#askConfirmInfoCatalog .cover {
    width: 100%;
    max-width: 16rem;
    aspect-ratio: 1 / 1;
    margin: 0;
}

#askConfirmInfoCatalog .cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.65);
}

#askConfirmInfoCatalog p,
#askConfirmQuestion p {
    margin: 0;
}

#askDialogTitle {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}

#askConfirmInfoCatalog,
#askConfirmQuestion {
    min-width: 18rem;
    max-width: 26rem;
}

#askConfirmQuestion p {
    font-size: 1rem;
}

#cataloginfo {
    color: var(--popup-text-color);
}

#cataloginfo .SectionModification {
    margin-top: 0.6rem;
    padding: 0.8rem;
    border-radius: var(--border-radius);
    background: var(--popup-glass-bg);
    border: 1px solid var(--popup-glass-border);
    backdrop-filter: var(--popup-glass-backdrop);
    box-shadow: var(--popup-glass-shadow);
}

#cataloginfo .WarningMessage {
    margin: 0 0 0.7rem 0;
    padding: 0.55rem 0.8rem;
    border-radius: var(--border-radius);
    background: rgba(5, 80, 24, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.75);
    color: #fff;
    box-shadow: var(--glass-green-shadow);
}

#cataloginfo .WarningMessage p {
    margin: 0;
}

#cataloginfo .catalog-info-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

#cataloginfo .catalog-info-table td {
    padding: 0.5rem 0.7rem;
    vertical-align: middle;
}

#cataloginfo .catalog-info-table tr td:first-child {
    width: 40%;
    font-weight: 700;
}

#cataloginfo #catalog_Title,
#cataloginfo #catalog_StartDate,
#cataloginfo #catalog_EndDate {
    max-width: 100%;
    min-height: 2.3rem;
    padding: 0.35rem 0.6rem;
}

#cataloginfo .catalog-save-row {
    text-align: center;
    padding-top: 0.8rem;
}

#cataloginfo .catalog-save-row .glass-button {
    min-width: 11rem;
}

#askConfirmCloseSpan {
    width: 100%;
    text-align: right;
}

#askConfirmCloseButton {
    color: gray;
    font-weight: bold;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
}

#askConfirmCloseButton:hover,
#askConfirmCloseButton:active {
    color: black;
}

#askConfirmImgButtons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    margin-top: 0.5rem;
}

.catalog-modal-btn {
    width: 3.5rem;
    height: 3.5rem;
    border: none;
    padding: 0;
}

.catalog-modal-btn i {
    font-size: 1.1rem;
}

.catalog-modal-btn:hover {
    transform: translateY(-2px) scale(1.03);
}

.askConfirmCloseImgButton,
.askConfirmConfirmImgButton {
    width: 4vw;
    height: 4vw;
    vertical-align: middle;
    cursor: pointer;
}

.askConfirmCloseImgButton:hover,
.askConfirmConfirmImgButton:hover {
    filter: brightness(140%);
}

.askConfirmConfirmImgButton {
    margin-left: 1vw;
}

@media (max-width: 900px) {
    #askDialogConfirmDeleteCatalog {
        padding: 1rem;
    }

    #askConfirmQuestion,
    #askConfirmInfoCatalog {
        width: min(100%, 28rem);
        border-radius: var(--border-radius);
    }

    #askConfirmInfoCatalog {
        border-right: 1px solid var(--popup-glass-border);
    }

    #askDialogConfirmDeleteCatalog {
        flex-direction: column;
    }
}

.Toolbar {
    clear: left;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
}

.ToolbarElement {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    cursor: pointer;
}

.ExpiredCatalogs {
    height: 2vh;
    width: 98vw;
    background-color: rgb(255, 0, 0, 0.5);
    position: absolute;
    bottom: .1vh;
    border: 2px solid red;
    border-radius: .4vh;
    text-align: center;
    font-size: 1vh;
    line-height: 2vh;
}

@media (orientation: landscape) {
    .TitleCatalogue {
        left: 0;
        margin-left: calc(3vw + 10vh);
        margin-top: 0;
        top: 1vh;
    }

    .Toolbar {
        margin-top: 2vh;
        margin-left: calc(2vw + 10vh);
    }

    .ToolbarDateField input {
        width: 98%;
        height: 3vw;
    }

    .ToolbarDateField input {
        font-size: 3vmin;
    }

    .KeyboardButton {
        align-items: center !important;
    }

    .allcatalogs {
        margin-left: calc(3vw + 10vh);
        width: calc(96vw - 10vh);
    }

    .acatalog {
        width: calc(10vw + 0.5em);
        height: calc(12vh + 7em);
        margin-right: 1vh;
        margin-bottom: 1vh;
        border-radius: .5vmax;
        font-size: .7vmax;
        line-height: .7vmax;
    }

    div.cover {
        width: 10vw;
        height: 12vh;
        margin-top: .3vw;
    }

    .infobtn,
    .openbtn,
    .deletebtn {
        top: 8vh;
    }

    .infobtn {
        left: 1vw;
    }

    .deletebtn {
        left: 7vw;
    }

    .ExpiredCatalogs {
        width: calc(96vw - 10vh);
        left: calc(3vw + 10vh);
    }
}