/* ============================================================
   HOSTINGNET - LOGIN WHMCS
   Template personalizado
   ============================================================ */


/* ============================================================
   FONDO GENERAL
   ============================================================ */

body.hostingnet-login-body {
    min-height: 100vh;
    margin: 0;

    background:
        radial-gradient(
            circle at 50% 100%,
            rgba(37, 99, 235, 0.28),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            #061a47 0%,
            #082d78 35%,
            #0b47b5 68%,
            #1767e8 100%
        );

    background-attachment: fixed;
}


/* Quitar fondo que pueda traer el template */

body.hostingnet-login-body.primary-bg-color {
    background-color: transparent !important;
}


/* ============================================================
   MAIN BODY
   ============================================================ */

body.hostingnet-login-body #main-body {
    min-height: 100vh;

    margin: 0;
    padding: 0;

    background: transparent;
}


/* Container principal */

body.hostingnet-login-body #main-body > .container {
    max-width: none;
    width: 100%;

    margin: 0;
    padding: 0;
}


/* Row Bootstrap */

body.hostingnet-login-body #main-body > .container > .row {
    min-height: 100vh;

    margin: 0;
}


/* Columna principal */

body.hostingnet-login-body .primary-content {
    width: 100%;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================
   CONTENEDOR GENERAL LOGIN
   ============================================================ */

.hostingnet-login-page {
    width: 100%;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 40px 20px;
    box-sizing: border-box;
}


/* ============================================================
   WRAPPER
   ============================================================ */

.hostingnet-login-wrapper {
    width: 100%;
    max-width: 430px;

    margin: 0 auto;
}


/* ============================================================
   TARJETA LOGIN
   ============================================================ */

.hostingnet-login-card {
    width: 100%;
    max-width: 430px !important;

    margin: 0 auto !important;

    background: #ffffff;

    border: 0;
    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.22);
}


/* Card body */

.hostingnet-login-card .card-body {
    padding: 42px 46px !important;
}


/* ============================================================
   TÍTULO
   ============================================================ */

.hostingnet-login-card h6.h3 {
    margin-bottom: 6px;

    font-size: 30px;
    line-height: 1.25;

    font-weight: 600;

    color: #222b3a;
}


/* Subtítulo */

.hostingnet-login-card .text-muted {
    color: #7b8494 !important;
}


/* ============================================================
   LABELS
   ============================================================ */

.hostingnet-login-card .form-control-label {
    margin-bottom: 7px;

    font-size: 14px;
    font-weight: 600;

    color: #3b4351;
}


/* ============================================================
   FORM GROUPS
   ============================================================ */

.hostingnet-login-card .form-group {
    margin-bottom: 20px;
}


/* ============================================================
   INPUT GROUP
   ============================================================ */

.hostingnet-login-card .input-group {
    border-radius: 6px;
}


/* Iconos izquierda */

.hostingnet-login-card .input-group-text {
    height: 46px;

    background: #f7f9fc;

    border: 1px solid #d9e0e8;

    color: #7c8797;

    border-radius: 6px 0 0 6px;
}


/* ============================================================
   INPUTS
   ============================================================ */

.hostingnet-login-card .form-control {
    height: 46px;

    border: 1px solid #d9e0e8;

    background: #ffffff;

    color: #252d3b;

    font-size: 15px;

    box-shadow: none;
}


/* Placeholder */

.hostingnet-login-card .form-control::placeholder {
    color: #a7afbb;
}


/* Focus */

.hostingnet-login-card .form-control:focus {
    border-color: #4e8fe7;

    box-shadow:
        0 0 0 3px rgba(78, 143, 231, 0.12);

    outline: none;
}


/* Cuando el input tiene icono a la izquierda */

.hostingnet-login-card .input-group-prepend + .form-control {
    border-left: 0;
}


/* ============================================================
   BOTÓN MOSTRAR CONTRASEÑA
   ============================================================ */

.hostingnet-login-card .btn-reveal-pw {
    height: 46px;

    background: #ffffff;

    border: 1px solid #d9e0e8;
    border-left: 0;

    color: #7d8796;

    border-radius: 0 6px 6px 0;

    box-shadow: none;
}


.hostingnet-login-card .btn-reveal-pw:hover,
.hostingnet-login-card .btn-reveal-pw:focus {
    background: #f7f9fc;

    color: #3b4351;

    box-shadow: none;
}


/* ============================================================
   OLVIDÉ MI CONTRASEÑA
   ============================================================ */

.hostingnet-login-card a.small.text-muted {
    color: #4b83cb !important;

    font-weight: 500;

    text-decoration: none;
}


.hostingnet-login-card a.small.text-muted:hover {
    color: #2867b5 !important;

    text-decoration: underline;
}


/* ============================================================
   RECORDARME
   ============================================================ */

.hostingnet-login-options {
    margin-top: 4px;
    margin-bottom: 20px;
}


.hostingnet-remember {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin: 0;

    font-size: 14px;
    font-weight: 400;

    color: #525c6b;

    cursor: pointer;
}


.hostingnet-remember .form-check-input {
    position: static;

    margin: 0;
}


/* ============================================================
   BOTÓN LOGIN
   ============================================================ */

.hostingnet-login-actions {
    width: 100%;
}


.hostingnet-login-actions .btn-primary {
    width: 100%;

    min-height: 46px;

    padding: 11px 20px;

    background: #1769d2;
    border-color: #1769d2;

    border-radius: 6px;

    font-size: 15px;
    font-weight: 600;

    box-shadow:
        0 5px 15px rgba(23, 105, 210, 0.20);

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .15s ease,
        box-shadow .2s ease;
}


.hostingnet-login-actions .btn-primary:hover,
.hostingnet-login-actions .btn-primary:focus {
    background: #105bbd;
    border-color: #105bbd;

    box-shadow:
        0 7px 18px rgba(23, 105, 210, 0.28);
}


.hostingnet-login-actions .btn-primary:active {
    transform: translateY(1px);
}


/* ============================================================
   FOOTER DE LA CARD
   ============================================================ */

.hostingnet-login-card .card-footer {
    padding: 17px 46px !important;

    background: #f8fafc;

    border-top: 1px solid #edf0f4;

    text-align: center;
}


.hostingnet-login-card .card-footer small {
    color: #7e8794;
}


.hostingnet-login-card .card-footer a {
    margin-left: 4px;

    color: #1769d2;

    text-decoration: none;
}


.hostingnet-login-card .card-footer a:hover {
    color: #105bbd;

    text-decoration: underline;
}


/* ============================================================
   MENSAJES / ALERTAS
   ============================================================ */

.hostingnet-login-card .alert {
    border-radius: 6px;

    font-size: 14px;
}


/* ============================================================
   CAPTCHA
   ============================================================ */

.hostingnet-login-card .captcha-container,
.hostingnet-login-card .text-center {
    margin-bottom: 20px;
}


/* ============================================================
   LINKED ACCOUNTS / GOOGLE
   ============================================================ */

.hostingnet-linkedaccounts {
    width: 100%;

    margin-top: 18px;

    text-align: center;
}


/* Si WHMCS genera botones */

.hostingnet-linkedaccounts .btn {
    max-width: 540px;

    border-radius: 6px;
}


/* ============================================================
   QUITAR MÁRGENES DEL TEMPLATE SOLO EN LOGIN
   ============================================================ */

body.hostingnet-login-body .primary-content > .hostingnet-login-page {
    margin: 0;
}


/* ============================================================
   RESPONSIVE TABLET
   ============================================================ */

@media (max-width: 767px) {

    .hostingnet-login-page {
        padding: 25px 15px;
    }


    .hostingnet-login-wrapper {
        max-width: 500px;
    }


    .hostingnet-login-card {
        max-width: 500px !important;

        border-radius: 8px;
    }


    .hostingnet-login-card .card-body {
        padding: 32px 26px !important;
    }


    .hostingnet-login-card .card-footer {
        padding: 16px 26px !important;
    }


    .hostingnet-login-card h6.h3 {
        font-size: 26px;
    }

}


/* ============================================================
   RESPONSIVE MÓVIL PEQUEÑO
   ============================================================ */

@media (max-width: 420px) {

    .hostingnet-login-page {
        padding: 15px 10px;
    }


    .hostingnet-login-card .card-body {
        padding: 26px 20px !important;
    }


    .hostingnet-login-card .card-footer {
        padding: 15px 20px !important;
    }


    .hostingnet-login-card h6.h3 {
        font-size: 24px;
    }


    .hostingnet-login-card .form-control,
    .hostingnet-login-card .input-group-text,
    .hostingnet-login-card .btn-reveal-pw {
        height: 44px;
    }

}
/* ============================================================
   LOGO LOGIN
   ============================================================ */

.hostingnet-login-logo {
    width: 100%;
    text-align: center;
    margin-bottom: 0px;
}

.hostingnet-login-logo-img {
    display: inline-block;
    width: auto;
    max-width: 320px;
    max-height: 110px;
}
/* ============================================================
   RECUPERAR CONTRASEÑA
   ============================================================ */

.hostingnet-password-reset-card {
    width: 100%;
    max-width: 430px !important;
    margin: 0 auto !important;
}