.hidden {
    display: none !important;
}

dialog {
      width: 450px;
      margin: 10% auto 0 auto;
    border: 0px;
    padding: 2rem;
    width: 450px;
    

    &::backdrop {
        background-color: rgba(0,0,0,0.5);
    }

    .items {
        max-height: 400px;
        overflow-y: auto;
        margin-bottom: 1rem;
        border: 1px solid #ccc;
        padding: 0.5rem;

        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;

            li {
                padding: 0.25rem 0;
                border-bottom: 1px solid #eee;
            }
        }
    }
    .header {
        font-size: 50px;
        margin: -1rem 0 1rem 0;
        text-align: center;
    }
    p {
        margin-bottom: 1rem;
    }
    .buttons {
        display: flex;
        gap: 1rem;
        justify-content: flex-end;

        button {
            padding: 0.5rem 1rem;
            cursor: pointer;

            &.confirm {
                background-color: #dc3545;
                color: white;
                border: none;
                border-radius: 5px;
            }

            &.cancel {
                background-color: #6c757d;
                color: white;
                border: none;
                border-radius: 5px;
            }
        }
    }
}

/* switch */
.checkbox-exclude-container {
    position: absolute;
    bottom: 90px;
    left: 20px;
    width: 50%; 
}
.switch-container input[type="checkbox"] {
    --active: #222;
    --active-inner: #fff;
    --focus: 2px #222;
    --border: #c4c3c3;
    --border-hover: #e6e6e6;
    --background: #fff;
    --disabled: #e6e6e6;
    --disabled-inner: #e6e6e6;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    &:after {
        content: "";
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
            opacity var(--d-o, 0.2s);
    }
    &:checked {
        --b: var(--active);
        --bc: var(--active);
        --d-o: 0.3s;
        --d-t: 0.6s;
        --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
    }
    &:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: 0.9;
        &:checked {
            --b: var(--disabled-inner);
            --bc: var(--border);
        }
        & + label {
            cursor: not-allowed;
        }
    }
    &:hover {
        &:not(:checked) {
            &:not(:disabled) {
            --bc: var(--border-hover);
            }
        }
    }
    &:focus {
        box-shadow: 0 0 0 var(--focus);
    }
    &:not(.switch) {
        width: 21px;
        &:after {
            opacity: var(--o, 0);
        }
        &:checked {
            --o: 1;
        }
    }
    & + label {
        font-size: 14px;
        line-height: 21px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: 4px;
    }
}
.switch-container input[type="checkbox"] {
    &:not(.switch) {
        border-radius: 7px;
        &:after {
            width: 5px;
            height: 9px;
            border: 2px solid var(--active-inner);
            border-top: 0;
            border-left: 0;
            left: 7px;
            top: 4px;
            transform: rotate(var(--r, 20deg));
        }
        &:checked {
            --r: 43deg;
        }
    }
    &.switch {
        width: 38px;
        border-radius: 11px;
        &:after {
            left: 2px;
            top: 2px;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            background: var(--ab, var(--border));
            transform: translateX(var(--x, 0));
        }
        &:checked {
            --ab: var(--active-inner);
            --x: 17px;
        }
        &:disabled {
            &:not(:checked) {
                &:after {
                    opacity: 0.6;
                }
            }
        }
    }
}

/* ribbon */
.ribbon {
    display: none;
    position: absolute;
    right: var(--right, 10px);
    filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5));
    z-index: 1;
}

.inactive .ribbon,
.exclude .ribbon {
    display: block;
}

.ribbon > .content {
    color: white;
    font-size: 1.25rem;
    text-align: center;
    font-weight: 400;
    background: var(--color, #2ca7d8) linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.25) 100%);
    padding: 5px 5px 15px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
    /* width: var(--width, 32px); */
    min-height: var(--height, 36px);
    transition: clip-path 1s, padding 1s, background 1s;
}
.ribbon.slant-up > .content {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 50% calc(100% - 6px), 0 100%);
}
.ribbon.slant-down > .content {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 6px), 0 calc(100% - 12px));
}
.ribbon.down > .content {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 50% 100%, 0 calc(100% - 8px));
}
.ribbon.up > .content {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
}
.ribbon.check > .content {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 40% 100%, 0 calc(100% - 12px));
}
.cr {
    width: 200px;
    padding: 16px;
    position: absolute;
    text-align: center;
    color: #f0f0f0;
    z-index: 9999;
}
.cr-sticky {
    position: fixed;
}

/* Positions */
.cr-top    { top: 15px; }
.cr-bottom { bottom: 25px; }
.cr-left   { left: -50px; }
.cr-right  { right: -50px; }

/* Rotations */
.cr-top.cr-left,
.cr-bottom.cr-right {
    transform: rotate(-45deg);
}
.cr-top.cr-right,
.cr-bottom.cr-left {
    transform: rotate(45deg);
}

/* Colors */
.cr-white     { background-color: #f0f0f0; color: #444; }
.cr-black     { background-color: #333; }
.cr-grey      { background-color: #999; }
.cr-blue      { background-color: #39d; }
.cr-green     { background-color: #2c7; }
.cr-turquoise { background-color: #1b9; }
.cr-purple    { background-color: #95b; }
.cr-red       { background-color: #e43; }
.cr-orange    { background-color: #e82; }
.cr-yellow    { background-color: #ec0; }

#crValid  { 
    top: 60px;
    width: 291px;
    left: -58px;
 }

.inactive .img-responsive {
    /* filter: grayscale(100%); */
}

.inner {
    overflow: hidden;
}

.excludeMode {
    visibility: hidden;
}