@import 'https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css';

.wrapper {
    transform: translateY(90px);
    opacity: 0;
    transition:
        transform 0.5s ease,
        opacity 0.5s ease;
}
.wrapper.opened {
    transform: translateY(0);
    opacity: 1;
}
.comodoSecureLoginPage {
    text-align: center;
    pointer-events: none;
}

a, a:link, a:hover, a:focus, a:visited {
    color: #000000;
}

a.loginOption{
    text-decoration: underline;
}

@media screen and (max-width: 530px) and (orientation: portrait) {
    .wrapper.opened:has(> img.logo) {
        width: 98%;
    }

    #enterUsernamePasswordLabel ~ .field {
        max-width: 80%;
        min-width: 160px;
    }
}

@media screen and (max-height: 460px) and (orientation: landscape) {
    body {
        padding-top: 2%;
    }

    .wrapper.opened:has(> img.logo) {
        max-width: 75%;
        padding-top: 1%;
        gap: 0;
    }

    .wrapper.opened:has(> img.logo) img.logo {
        max-width: 50%;
    }

    .wrapper.opened:has(> img.logo) form {
        gap: 12px;
    }

    #enterUsernamePasswordLabel ~ .field {
        width: 45%;
    }

    #enterUsernamePasswordLabel ~ .field input {
        height: 2em;
    }

    #enterUsernamePasswordLabel ~ input[type=submit] {
        padding: 0.2em 1.25em;
    }
}