/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Customer rofile initials */
.initials {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 2rem;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    text-decoration: none;
}

.novisiblelink {
    text-decoration: none;
}

/* SlimSelect dropdown arrow */
.ss-arrow {
    display: none;
}

/* Player still image */
.playable {
    position: relative;
    display: inline-block;
}

.playable .button {
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    text-shadow: 0.1rem 0.1rem 0.6rem rgba(0,0,0,0.8);
    cursor: pointer;
}

td.active {
    background-color: #8ee4a1 !important;
}

:target {
    background-color: rgba(255, 255, 140, 0.3) !important;
}

table hr {
    margin: 0.5rem 0.5rem;
}

dialog {
    border: none;
    width: 80vw;
    height: 80vh;

    &::backdrop {
      background: black;
      opacity: 0.3;
    }

    header {
        display: flex;
        justify-content: flex-end;
    }

    iframe {
        width: 100%;
        height: 80%;
    }
}