#permission-request-ui {
    position: absolute;
    display: flex;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    box-sizing: border-box;
    justify-content: center;
    align-items: center;

    background-color: #222;

    transition: opacity 1.0s ease-in-out;

    z-index: 100;
}

#instruction-ui {
    position: absolute;
    display: flex;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    box-sizing: border-box;
    justify-content: center;
    align-items: center;

    transition: opacity 1.0s ease-in-out;

    opacity: 0.0;
    z-index: 200;

    pointer-events: none;
}

#instruction-ui .display-rect {
    display: flex;

    top: 0;
    left: 0;

    width: 300px;
    height: 380px;
    padding: 30px;

    background-color: #fff;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
    color: #555555;

    border-radius: 16px;

    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    transition: opacity 1.0s ease-in-out;

    line-height: 1.5em;
}

#permission-request-ui .display-rect {
    display: flex;

    top: 0;
    left: 0;

    width: 300px;
    height: 380px;
    padding: 30px;

    background-color: #fff;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
    color: #555555;

    border-radius: 16px;

    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    transition: opacity 1.0s ease-in-out;

    line-height: 1.5em;
}

#permission-request-ui .title {
    /* background-color: bisque; */

    width: 100%;
    margin-bottom: 30px;

    text-align: center;
    font-size: 1.2em;
    font-weight: bold;

    box-sizing: border-box;
}

#instruction-ui .title {
    /* background-color: bisque; */

    width: 100%;
    margin-bottom: 30px;

    text-align: center;
    font-size: 1.6em;
    font-weight: bold;

    line-height: 1.5em;

    box-sizing: border-box;
}

#permission-request-ui .description {
    /* background-color: bisque; */

    width: 100%;
    text-align: justify;
    font-size: 1.0 em;
    box-sizing: border-box;
}

#instruction-ui .description {
    /* background-color: bisque; */

    width: 100%;
    margin-bottom: 30px;
    text-align: center;
    font-size: 1.0 em;
    box-sizing: border-box;
}


#instruction-ui .instruction-image {
    aspect-ratio: 1.66;
    width: 100%;

    background-image: url(../assets/interactive-instruction.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;

    margin-bottom: 20px;
}

#permission-request-ui .permission-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;

    width: 100%;
}

.permission-list .permission-item {
    width: 100%;
    background-color: #FFDE1F;

    box-sizing: border-box;
    padding: 6px 0px;
    margin: 8px 0px;
    border-radius: 30px;

    /* shadow */
    /* box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); */

    user-select: none;

    display: flex;
    justify-content: center;
}

.permission-list .permission-text {
    display: inline-block;
    font-size: 0.8 em;
    font-weight: 600;
    text-align: center;
    margin: 0px;
}

.permission-list .permission-status {
    display: inline-block;
    font-size: 0.8 em;
    font-weight: 600;
    text-align: center;
    margin-left: 3px;
}

#warning-ui {
    position: absolute;
    display: none;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    box-sizing: border-box;
    justify-content: center;
    align-items: center;

    z-index: 300;
}

#warning-ui .display-rect {
    display: flex;

    width: 300px;
    height: 380px;
    padding: 30px;

    background-color: #FFF;
    color: #555555;

    border-radius: 16px;
    border: 6px solid #FFDE1F; /* red border */

    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    transform: scale(0.0);
    transition: transform 0.3s ease-out;

    line-height: 1.5em;
}

#warning-ui .title {
    width: 100%;
    margin-bottom: 30px;

    text-align: center;
    font-size: 1.6em;
    font-weight: bold;
    line-height: 1.5em;

    box-sizing: border-box;
}

#warning-ui .description {
    width: 100%;
    margin-bottom: 30px;
    text-align: justify;
    font-size: 1.0em;
    box-sizing: border-box;
}

#warning-ui .description div {
    display: none;
}