﻿
.anonymouse-card {
    box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.08);
    border-radius: 16px;
    min-height: 600px;
    height: fit-content;
    width: 65%;
}

    .anonymouse-card.register-fields-active {
        width: 80%;
    }

    .anonymouse-card .text-light-blue {
        color: rgba(3, 122, 167, 1);
    }

    .anonymouse-card .text-blue-green {
        color: rgba(0, 191, 166, 1);
    }

    .anonymouse-card .text-light-green {
        color: rgba(30, 183, 23, 1);
    }

    .anonymouse-card .accounts-input-container {
        display: flex;
        align-items: center;
        gap:10px;
        border: 1px solid #eee;
        padding: 10px;
        border-radius: 8px;
        background: #fff;
    }

    .anonymouse-card .model-state-invalid .accounts-input-container.is-invalid {
        border: 1px solid rgba(227, 60, 47, 0.37);
        color: rgba(227, 60, 47, 0.37) !important;
    }

        .anonymouse-card .model-state-invalid .accounts-input-container.is-invalid i {
            color: rgba(227, 60, 47, 0.37) !important;
        }

        .anonymouse-card .model-state-invalid .accounts-input-container.is-invalid .form-control {
            color: rgba(0,0,0,.5) !important;
        }

        .anonymouse-card .model-state-invalid .accounts-input-container.is-invalid .form-control::placeholder {
            color: rgba(227, 60, 47, 0.37) !important;
        }

        .anonymouse-card .accounts-input-container .fa-circle-check {
            display: none;
        }

        .anonymouse-card .accounts-input-container .form-control {
            border: none;
            padding: 0;
        }

            .anonymouse-card .accounts-input-container i {
                line-height: 1.5;
            }

            .anonymouse-card .accounts-input-container .form-control:active,
            .anonymouse-card .accounts-input-container .form-control:focus {
                border: none;
                box-shadow: none;
            }

        .anonymouse-card .accounts-input-container input[type="date"]::-webkit-calendar-picker-indicator {
            display: none;
            -webkit-appearance: none;
        }

    .anonymouse-card .accounts-input-container input[type=password]::-ms-reveal,
    .anonymouse-card .accounts-input-container input[type=password]::-ms-clear {
        display: none;
    }

        .anonymouse-card .accounts-input-container.is-valid .fa-circle-check {
            display: block;
        }

        .anonymouse-card .accounts-input-container.is-valid .fa-circle-question {
            display: none;
        }

        .anonymouse-card .accounts-input-container.is-invalid .fa-circle-question {
            display: block;
        }

        .anonymouse-card .accounts-input-container.is-invalid .fa-circle-check {
            display: none;
        }

    .anonymouse-card .accounts-input-container .form-control::placeholder {
        opacity: .8;
    }
    .anonymouse-card .accounts-input-container .form-control:focus::placeholder {
        opacity: .4;
    }


    /*------- X-Small devices (portrait phones, less than 576px) -------*/
    @media (max-width: 575.98px) {
        .anonymouse-card, .anonymouse-card.register-fields-active {
        width: 95%;
        /*background: transparent;
        border: none;
        box-shadow: none !important;*/
    }

}

/*------- Small devices (landscape phones, less than 768px) -------*/
@media (min-width: 575.99px) and (max-width: 767.98px) {
    .anonymouse-card,
    .anonymouse-card.register-fields-active {
        width: 90%;
    }
}

/*------- Medium devices (tablets, less than 992px) -------*/
@media (min-width: 767.99px) and (max-width: 991.98px) {
    .anonymouse-card {
        width: 85%;
    }

        .anonymouse-card.register-fields-active {
            width: 95%;
        }
}

/*------- Large devices (desktops, less than 1200px) -------*/
@media (min-width: 991.99px) and (max-width: 1199.98px) {
    .anonymouse-card {
        width: 80%;
    }

        .anonymouse-card.register-fields-active {
            width: 90%;
        }
}

/*------- X-Large devices (large desktops, less than 1400px) -------*/
@media (min-width: 1199.99px) and (max-width: 1399.98px) {
    .anonymouse-card {
        width: 70%;
    }

        .anonymouse-card.register-fields-active {
            width: 80%;
        }
}