@import "../scss/vars";

.are-you-sure {
    width: 800px;
    text-align: left;

    &__header {
        background-color: $secondary-blue;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        color: white;
        font-size: $font-size--lg;
        font-weight: bold;
        margin-bottom: 10px;
        padding: 10px;
    }

    &__description {
        color: $dark-grey;
        font-size: $font-size--md;
        padding: 14px 5% 0;
    }

    &__buttons {
        margin-top: 10px;
        padding-bottom: 10px;
        width: 100%;
        display: inline-flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }

    &__yes-button,
    &__no-button {
        display: block;
        margin-right: 10px;
    }

    &__password {
        margin: 0 auto;
        margin-top: 20px;
    }

    &__close-icon {
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 10px;
        color: white;
    }

    .separator {
        width: 90%;
        margin: 30px auto;
    }
}

@media screen and (max-width: 800px) {
    .are-you-sure {
        width: auto;
    }
}