@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../../../assets/fonts/opensans.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    display: flex;
    flex-direction: column;
    font-size: 1.11vw;
}

.panel-heading {
    position: relative;
    top: 0;
    background: var(--popup-glass-bg);
    border-bottom: 1px solid var(--popup-glass-border);
    backdrop-filter: var(--popup-glass-backdrop);
    transition: margin .3s, top .3s;
    padding: 1.5rem 1rem;
    display: flex;
    align-items: center;
    box-shadow: 0 0.2rem 0.2rem -0.1rem rgba(0, 0, 0, .22);
    height: 9vmin;
    margin-bottom: 2vmin;
}

main {
    display: flex;
    flex-direction: column;
}

#scripts {
    width: 96vw;
    margin: 0 2vw;
    padding-top: 1vh;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1vh;
}

.script-row {
    font-family: 'Open Sans', sans-serif;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1vmin 2vmin;
    height: 8vw;
    background: var(--popup-glass-bg);
    border: 1px solid var(--popup-glass-border);
    border-radius: var(--border-radius);
    backdrop-filter: var(--popup-glass-backdrop);
    box-shadow: var(--popup-glass-shadow);
    color: var(--popup-text-color);
    transition: all 0.3s ease;
}

.script-row:hover {
    transform: translateY(-2px);
    box-shadow: var(--popup-glass-shadow), var(--hover-blue-glow);
    border-color: var(--glass-blue-bg);
}

.playimg,
.editimg,
.delimg {
    margin-right: 1vw;
}

.row-caption {
    font-size: 3vw;
    line-height: 1.4;
    display: inline-block;
    padding-left: 1.5vw;
    font-weight: 600;
    color: var(--popup-text-color);
}

.dialog-icon {
    float: left;
    width: 4vw;
    height: 4vw;
}

@media (orientation: landscape) {

    .page-toolbar,
    #scripts {
        margin-left: 2vw;
        width: calc(92vw - 10vh);
    }

    #scripts {
        margin-top: 2vh;
    }
}