@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body.login-background {
    background-image: url('../images/background-login.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Fira Sans', sans-serif !important;
    color: #000;
    margin: 0 auto;
    padding: 0;
    position: relative;
	overflow: hidden;
}

h1{ font-size:28px;}
h2{ font-size:26px;}
h3{ font-size:18px;}
h4{ font-size:16px;}
h5{ font-size:14px;}
h6{ font-size:12px;}
h1,h2,h3,h4,h5,h6{ color:#563D64;}
small{ font-size:10px;}
b, strong{ font-weight:bold;}
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
.left { float:left; }
.right { float:right; }
.alignleft { float: left; margin-right: 15px; }
.alignright { float: right; margin-left: 15px; }
.clearfix:after,
form:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/* .container { margin: auto; position: relative; width: auto; } */
#content {
    background: #f9f9f9; 
    border: 1px solid #c4c6ca;
    font-family: 'Fira Sans', sans-serif !important;
    border-radius: 10px !important;
    margin: 0 auto;
    padding: 1px 0 0;
    position: relative;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    height: auto;
    width: 320px;
}
#content h1 {
    color: #7E7E7E;
    /* font: bold 25px 'Ubuntu Condensed', sans-serif; */
    letter-spacing: -0.05em;
    line-height: 10px;
    margin: 10px 0 10px;
}
#content h1:before,
#content h1:after {
    content: "";
    height: 1px;
    position: absolute;
    top: 10px;
    width: 15%;
}
#content h1:after {
    background: rgb(126,126,126);
    background: -moz-linear-gradient(left,  rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    right: 0;
}

#content form { margin: 0 10px; position: relative }
#content form input[type="text"],#content form input[type="password"]{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    color: #777;
    padding: 15px 10px 15px 55px;
    width: 100%;
    text-transform: uppercase;
}
#identificador { background-position: 15px 10px !important }
#email { background-position: 15px -30px !important }
#senha { background-position: 15px -75px !important }
#content form input[type="submit"] {
    cursor: pointer;
    float: center;
    height: 35px;
    margin: 15px 0 0 0;
    position: relative;
    letter-spacing: 1.5px;
}

#content form div a {
    color: white;
    float: right;
    font-size: 14px;
    margin: 10px 0 0 0;
    text-decoration: underline;
}

html, body {height:100%;}

#imagemlogo{
    width: 100%;
    text-align: center;
}

#bannerlateral {
    padding-top: 30%;
    margin-left: 20%;
    
}
.footer {
    position:relative;
    bottom: 5;
    width: 100%;
    font-family: 'Fira Sans', sans-serif !important;
    font-size: 12px;
    text-align: center;
    margin-bottom: 5%;
    margin-left: 0%;
    text-decoration: none;    
}

#info, #infol{visibility: hidden;}
#groupPerfil{margin-top: 10px; margin-bottom: 15px;}
.btn-patient{
   
    background: #d9534f;
    width: 110px;
    color: #ffff;
}

.btn-patient:hover, .btn-patient:focus, .btn-patient.active{
    
    background-image: -ms-linear-gradient(bottom, #d9534f 0%, #ffff 10000%);
    background-image: -moz-linear-gradient(bottom, #d9534f 0%, #ffff 10000%);
    background-image: -o-linear-gradient(bottom, #d9534f 0%, #d9534f 10000%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #d9534f), color-stop(100, #ffff));
    background-image: -webkit-linear-gradient(bottom, #d9534f 0%, #ffff 10000%);
    background-image: linear-gradient(to top, #d9534f 0%, #ffff 10000%);
    
    color: #ffff;
}

.btn-doctor{
   
    background: #00adf5;
    width: 110px;
    color: #ffff;
}

.btn-doctor:hover, .btn-doctor:focus, .btn-doctor.active{
    
    background-image: -ms-linear-gradient(bottom, #00adf5 0%, #ffff 10000%);
    background-image: -moz-linear-gradient(bottom, #00adf5 0%, #ffff 10000%);
    background-image: -o-linear-gradient(bottom, #00adf5 0%, #ffff 10000%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #00adf5), color-stop(100, #ffff));
    background-image: -webkit-linear-gradient(bottom, #00adf5 0%, #ffff 10000%);
    background-image: linear-gradient(to top, #00adf5 0%, #ffff 10000%);
    
    color: #ffff;
}
#socialbarra {
    width: 70%;
    margin-left: 25%;
    line-height: 50%;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid white; 
    background-color: white;
}

.errspan {
    float: left;
    width: 20px;
    margin-left: 5%;
    margin-top: -25px;
    position: relative;
    z-index: 2;
    color: dimgray;
  }
 
.text-primary {
    color: #006699 !important;
}
.btn-primary {
    color: #fff;
    background-color: #006699;
    border-color: #006699;
}
.btn-info {  
    color: #fff;
    background-color: #66CCDD;
    border-color: #66CCDD;
}
.text-info {
    color: #66CCDD !important;
}
.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
    display: inline-block;
    font-size: 20px;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.logo-container {
    max-height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 2rem;
}

.logo-container .logo {
    max-height: 80px;
    max-width: 100%;
    object-fit: contain;
}

.links {
    text-decoration: none;
  }

@keyframes custom-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.custom-spinner {
    animation: custom-spin 0.8s linear infinite;
    display: inline-block;
}

@media (max-width: 768px) {
    body.login-background {
        background-image: url('../images/background-login-mobile.jpg');
        background-size: cover;
        background-position: center;
    }
}

/* High-resolution background support */
@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) { 
    body.login-background {
        background-image: url('../images/background-login@2x.jpg');
    }
    
    @media (max-width: 768px) {
        body.login-background {
            background-image: url('../images/background-login-mobile@2x.jpg');
        }
    }
}

@media only screen and (max-width: 420px) {
    #bannerlateral {
        display: none;
    }
    #socialbarra {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    #bannerlateral {
        display: none;
    }
    #socialbarra {
        display: none;
    }
 
}

input::placeholder {
    color: white !important;
}