html {
    scroll-behavior: smooth;
}

/*********************Login styles*************/

.login {
    min-height: 80vh;
}

#login-logo{
padding: 20px;
width: 30%;
}

.sectionForm {
    margin-top: 25%;
}

.block {
    margin-top: 20%;
}

.error {
    color: rgb(189, 0, 0);
    padding-left: 5%;
}

.mailError, .passError,.charging,.progress {
    display: none;
}


/**********************************************/

td {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

h6, h5 {
    margin-bottom: 10px;
}

nav .brand-logo {
    padding-left: 15px;
}



#drawNotes {
    max-width: 100%!important;
    border: none!important;
    overflow: auto!important;
}

#drawDiv, #content {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

th p, #tests-title, #r-eye, #lft-eye, #treatment-title, #extra-notes-title, #extra-notes-title, #aditional-for-pacient, #pacient-conclusion {
    margin-top: 0;
    margin-bottom: 0;
}

th p, h4, h6, .bold {
    font-weight: bold;
}

textarea, #tests {
    margin-bottom: 1px;
}

table textarea {
    text-align: center;
}

.no-margin {
    margin: 0px!important;
}

.top-margin-h {
    margin-top: 15px;
}

#main-title {
    margin: 0;
    padding: 0;
}

#logo {
    display: none;
}

#info-general, #pacient-tests, #pacient-treatment {
    margin-bottom: 1px;
}

#pacient-recomendations {
    margin-bottom: 15px;
}

#revision-title {
    margin-bottom: 15px;
}
.jSignature
#op-multiple, #btn-side {
    display: none;
}

#signature {
    background-position: center center;
    background-color: rgb(35, 207, 115);
    background: url("../img/eyes.png");
    background-repeat: no-repeat !important;
    background-size: 100%;  
}

#signature1 {
    background-position: center center;
    background-color: rgb(35, 207, 115);
    background: url("../img/openeye.png");
    background-repeat: no-repeat !important;
    background-size: 100%;
}

#signature2 {
    background-position: center center;
    background-color: rgb(35, 207, 115);
    background: url("../img/dog.png");
    background-repeat: no-repeat !important;
    background-size: 100%;
}

#signature3 {
    background-position: center center;
    background-color: rgb(35, 207, 115);
    background: url("../img/internalEye.png");
    background-repeat: no-repeat !important;
    background-size: 100%;
}

#signature4 {
    background-position: center center;
    background-color: rgb(35, 207, 115);
    background: url("../img/fundus.png");
    background-repeat: no-repeat !important;
    background-size: 100%;
}

canvas.jSignature {
    background-color: transparent!important;

}


.page-footer {
    padding-top: 10px;
    color: #fff;
}

nav ul {
    margin-right : 15px;
}

th {
    padding: 10px 5px;
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    border-radius: 2px;
}

td {
    border: 0px solid black;
    padding-top: 10px;
}

label {
    font-size: 1rem;
    color: black;
}

.input-field.inline {
    display: inline-block;
    vertical-align: baseline!important;
    margin-left: 5px;
}


/**************************************Media responsive styles****************************************/

/* Extra large devices (large laptops and desktops, 320px and up) */

@media only screen and (min-width: 320px) {
    #signature1, #signature2, #signature3, #signature4, #signature, canvas.jSignature {
        min-height: 0px !important;
    }
    #drawNotes {
        min-height: 0px!important;
        max-height: 0px!important;
        resize: none;
    }
    .sectionForm {
        margin-top: 2%;
    }
}

/* Extra large devices (large laptops and desktops, 411px and up) */

@media only screen and (min-width: 411px) {
    #signature1, #signature2, #signature3, #signature4, #signature, canvas.jSignature {
        min-height: 0px !important;
    }
    #drawNotes {
        min-height: 0px!important;
        max-height: 0px!important;
    }
    .login {
        min-height: 70vh;
    }
    .sectionForm {
        margin-top: 15%;
    }
}

/* Extra large devices (large laptops and desktops, 480px and up) */

@media only screen and (min-width: 480px) {
    #signature1, #signature2, #signature3, #signature4, #signature, canvas.jSignature {
        min-height: 0px !important;
    }
    #drawNotes {
        min-height: 0px!important;
        max-height: 0px!important;
    }
}

/* Extra large devices (large laptops and desktops, 568px and up) */

@media only screen and (min-width: 568px) {
    #signature1, #signature2, #signature3, #signature4, #signature, canvas.jSignature {
        min-height: 0px !important;
    }
    #logo {
        display: block;
    }
    #drawNotes {
        min-height: 0px!important;
        max-height: 0px!important;
    }
    #blackColor {
        margin-top: 15px;
    }
}

/* Extra large devices (large laptops and desktops, 600px and up) */

@media only screen and (min-width: 600px) {
    #signature1, #signature2, #signature3, #signature4, #signature, canvas.jSignature {
        min-height: 0px !important;
    }
    #logo {
        display: block;
    }
    #drawNotes {
        min-height: 0px!important;
        max-height: 0px!important;
    }
    #blackColor {
        margin-top: 0;
    }
    .login {
        min-height: 80vh;
    }
    .sectionForm {
        margin-top: 40%;
    }
}

/* Extra large devices (large laptops and desktops, 768px and up) */

@media only screen and (min-width: 768px) {
    #signature1, #signature2, #signature3, #signature4, #signature, canvas.jSignature {
        min-height: 0px !important;
    }
    #logo {
        display: block;
    }
    #drawNotes {
        min-height: 0px!important;
        max-height: 0px!important;
    }
    #blackColor {
        margin-top: 15px;
    }
}

/* Extra large devices (large laptops and desktops, 800px and up) */

@media only screen and (min-width: 800px) {
    #signature1, #signature2, #signature3, #signature4, #signature, canvas.jSignature {
        min-height: 0px !important;
    }
    #logo {
        display: block;
    }
    #drawNotes {
        min-height: 0px!important;
        max-height: 0px!important;
    }
    .login {
        min-height: 85vh;
    }
    .sectionForm {
        margin-top: 60%;
    }
}

/* Extra large devices (large laptops and desktops, 1024px and up) */

@media only screen and (min-width: 1024px) {
    #signature1, #signature2, #signature3, #signature4, #signature, canvas.jSignature {
        min-height: 0px !important;
    }
    #drawNotes {
        min-height: 0px!important;
        max-height: 0px!important;
    }
    .login {
        min-height: 85vh;
    }
    .sectionForm {
        margin-top: 50%;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
    #signature1, #signature2, #signature3, #signature4, #signature, canvas.jSignature {
        min-height: 0px !important;
    }
    #drawNotes {
        min-height: 0px!important;
        max-height: 0px!important;
    }
    .login {
        min-height: 78vh;
    }
    .sectionForm {
        margin-top: 25%;
    }
    
}

/* Extra large devices (large laptops and desktops, 1366px and up) */

@media only screen and (min-width: 1366px) {
    #signature1, #signature2, #signature3, #signature4, #signature, canvas.jSignature {
        min-height: 0px !important;
    }
    #drawNotes {
        min-height: 0px!important;
        max-height: 0px!important;
    }
}

/* Extra large devices (large laptops and desktops, 1480px and up) */

@media only screen and (min-width: 1480px) {
    #signature1, #signature2, #signature3, #signature4, #signature, canvas.jSignature {
        min-height: 0px !important;
    }

    #drawNotes {
        min-height: 0px !important;
        max-height: 0px !important;
    }
}

/* Extra large devices (large laptops and desktops, 2000px and up) */

@media only screen and (min-width: 2000px) {
    #signature1, #signature2, #signature3, #signature4, #signature, canvas.jSignature {
        min-height: 0px !important;
    }
    #drawNotes {
        min-height: 0px!important;
        max-height: 0px!important;
    }
}

.top-margin-h {
    margin-top: 10px;
}

@media only screen and (min-width: 993px)
 .container {
    width: 90%;
}

@media only screen and (min-width: 601px)
.container {
    width: 90%;
}

.container {
    margin: 0 auto;
    max-width: 1280px;
    width:90%;
}


/*********************Print styles******************************************/


@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        color-adjust: black !important;
        font-size: 12px;
        color: black !important;
    }

    @page {
        margin: 0;
    }

    body {
        margin: 0;
        padding: 0;
    }

    h6, th p {
        font-weight: bold;
    }

    td p, footer p {
        font-size: 10px;
        color: black;
    }

    #nav, #print, #top-btn, #btn-side, #opt-multiple, .btn-floating, #line-width, #colors, #btn-limpiar {
        display: none;
    }

    #logo {
        display: block;
    }


    /*********Pacient information**********/
    #ubication-div {
        width: 30%;
        margin-bottom: 0;
    }

    #date-div {
        width: 15%;
        margin-bottom: 0;
    }

    #appoinment-div {
        width: 90%;
        margin-bottom: 0;
    }

    #pacient-div, #owner-div, #breed-div {
        width: 20%;
        margin-bottom: 0;
    }

    #weight-div, #age-div {
        width: 15%;
        margin-bottom: 0;
    }
    /***********************************************/
    #revision-title, #content, #drawDiv {
        margin-top: 0px;
    }

    #content {
        width: 98%;
        position: center;
    }

    #pacient-conclusion {
        margin-top: 0px;
    }

    #appoinment-div, #pacient-tests, #div-hist, #lft-eye-div, #rgt-eye-div, #tests-title, #treatment-title, #extra-notes-title, #signature, canvas.jSignature {
        margin-bottom: 0;
    }

    .page-footer {
        padding-top: 10px;
        color: black;
    }

    .white-text {
        color: black !important;
    }

    #info-general {
        color: black !important;
    }
}