/* 1. IMPORTAÇÃO DA FONTE POPPINS */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

html body {
    background-color: #fff;
}

body.ic-Login-Body,
body.ic-Login-Body input,
body.ic-Login-Body button,
body.ic-Login-Body .ic-Label,
body.ic-Login-Body a,
body.ic-Login-Body div {
    font-family: 'Poppins', sans-serif !important;
}

@media screen and (min-width: 1001px) {
    #f1_container { width: 100%; margin: 0 auto; min-height: 450px; background: #fff; height: 100%; padding: 0; }
    #f1_card { width: 510px; }
    .mobileLogin-Header { background-image: url("https://instructure-uploads.s3.amazonaws.com/account_120930000000000001/attachments/163/4447_Logo_04082017100740.jpg"); background-repeat: no-repeat; background-size: 510px 80px; }
    #f1_container a { color: #1b75bc; }
    #f1_card #login_form .Button--primary { background-color: #1b75bc; border: 0px; }
    button.Button.Button--primary.Button--block { color: #fff; }
}

@media screen and (max-width: 1000px) and (min-width: 421px) {
    #f1_card { width: 300px; }
    #f1_container { background-color: #fff; width: 100%; margin: 0 auto; padding: 0; height: 100%; }
    .mobileLogin-Header { background-image: url("https://instructure-uploads.s3.amazonaws.com/account_120930000000000001/attachments/163/4447_Logo_04082017100740.jpg"); background-repeat: no-repeat; background-size: 100%; min-height: 100px; }
    #f1_container a { color: #1b75bc; }
    #f1_card #login_form .Button--primary { background-color: #1b75bc; border: 0px; }
    button.Button.Button--primary.Button--block { color: #fff; }
}

@media screen and (max-width: 420px) {
    #f1_card { width: 260px; }
    #f1_container { background-color: #fff; width: 100%; margin: 0 auto; height: 100%; padding: 0; }
    .mobileLogin-Header { background-image: url("https://instructure-uploads.s3.amazonaws.com/account_120930000000000001/attachments/163/4447_Logo_04082017100740.jpg"); background-repeat: no-repeat; background-size: 100%; min-height: 100px; }
    #f1_container a { color: #1b75bc; }
    #f1_card #login_form .Button--primary { background-color: #1b75bc; border: 0px; }
    button.Button.Button--primary.Button--block { color: #fff; }
}

ul#flash_message_holder .ic-flash-success {
    padding-left: 35px;
}


/* Centraliza o cartão verticalmente */
body.ic-Login-Body .ic-Login__container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90vh;
}

/* 2. O CARTÃO DE LOGIN */
.ic-Login .ic-Login__content {
    background-color: #2346B7 !important; 
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0px 10px 40px rgba(0,0,0,0.3) !important;
    padding: 40px 30px !important;
    width: 400px !important;
    max-width: 90vw !important;
}

/* 3. LOGO */

.ic-Login .ic-Login-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
}

.ic-Login .ic-Login-header__logo {
    float: none !important;
    display: block !important;
    margin: 0 auto 10px auto !important; 
    text-align: center !important;
    width: 100% !important;
    flex: auto;
    padding: 0 !important;
}

.ic-Login .ic-Login-header__logo img {
    filter: brightness(0) invert(1) !important;
    max-width: 330px !important;
    display: inline-block !important;
}

/* 4. CAMPOS DE TEXTO (Inputs) */
.ic-Login .ic-Label {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 550 !important;
    margin-bottom: 8px !important;
}

.ic-Login .ic-Input {
    height: 50px !important;
    border: none !important;
    border-radius: 9px !important;
    border-left: 12px solid #BBFF00 !important; 
    background-color: #ffffff !important;
    color: #333 !important;
    box-shadow: none !important;
    font-size: 17px !important;
}

.ic-Login .ic-Input:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px #aeff00 !important;
}

/* 5. RODAPÉ DO FORMULÁRIO */
.ic-Login .ic-Login__actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important; 
    margin-top: 20px !important;
}

.ic-Login .ic-Login__actions-timeout {
    display: block !important;
    text-align: left !important;
}

/* CUSTOMIZAÇÃO DO CHECKBOX */
.ic-Login .ic-Login__actions-timeout input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    border: 2.627px solid #BBFF00 !important; 
    background: #FFF !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important; 
    cursor: pointer;
    
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
    margin-bottom: 2px !important; 
    position: relative;
}

.ic-Login .ic-Login__actions-timeout input[type="checkbox"]:checked {
    background-color: #BBFF00 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232346B7'%3E%3Cpath d='M20.285 2l-11.285 11.561-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E") !important;
    background-size: 80% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.ic-Login .ic-Login__actions-timeout label {
    display: inline-block !important;
    color: #fff !important;
    font-size: 12px !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
    cursor: pointer;
    font-weight: 400 !important; /
}

/* Link "Problemas com o acesso?" */
.ic-Login .ic-Login__link, 
.ic-Login .ic-Login__forgot-text,
.ic-Login .ic-Login__forgot {
    display: block !important;
    color: #fff !important;
    text-decoration: underline !important;
    font-size: 11px !important;
    margin-top: 10px !important; 
    margin-left: 2px !important;
}

/* 6. BOTÃO DE LOGIN */
.ic-Login .Button--login {
    background-color: #BBFF00 !important;
    color: #2346B7 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 10px 30px !important;
    width: auto !important;
    text-transform: capitalize !important;
    transition: all 0.2s ease;

}

.ic-Login .Button--login:hover {
    background-color: #BBFF00 !important;
    transform: scale(1.05);
}

/* 7. ESCONDER RODAPÉS PADRÃO DO CANVAS */
body.ic-Login-Body .ic-Login-footer { display: none !important; }
body.ic-Login-Body #footer { display: none !important; }
body.ic-Login-Body #footer-links,
body.ic-Login-Body #footer-epilogue,
body.ic-Login-Body #footer > a { display: none !important; }