@font-face {
    font-family: 'Muli';
    src: local('Muli'), url("../fonts/Muli.ttf");
}

/*BASE*/

.title-text {
    margin-top: 20px;
    color: white;
}

.title-text2 {
    margin-top: 20px;
}

.main-col {
    min-height: 100%;
    background-color: #123c4c;
}

.main-col2 {
    min-height: 100%;
}

.resumen-main-row {
    height: 20%;
}

.main-menu-sidebar {
    background-color: #63aa90;
}

.menu-link {
    color: white;
}

.menu-link:focus {
    color: white;
}

.menu-link:hover {
    color: white;
    background-color: rgba(255, 255, 255, .15);
    transition: 0.4s;
}

.menu-nav {
    width: 100%;
}

.menu-nav li {
    width: 100%;
}

.first-row {
    margin-top: 50px;
}

.card-img-top {
    width: auto;
    min-height: 20vh;
    max-height: 20vh;
    object-fit: contain;
}

.button-row {
    margin-top: 3vh;
}

.btn-square-lg {
    width: 100%;
    height: 10vh;
}


/*LOGIN*/

.emaus-login-logo{
    width: 50vw;
    height: auto;
    margin-left: 18%;
    margin-top: 8%;
}

.button-enter {
    font-family: Muli;
    border-radius: 0;
    background-color: yellowgreen;
    border:none;
}

#login-form {
    background-color: white;
}

/* Style form fields */
#login-form input[type="text"],
#login-form input[type="password"] {
    width: 20%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Style the submit button */
#login-form button[type="submit"] {
    font-family: Muli;
    border-radius: 0;
    background-color: yellowgreen;
    color: white;
    padding: 5px;
    border:none;
}

/*HOME*/

.resumen-main-row {
    background-color: #123c4c;
}

.home-table {
    min-height: 60%;
    background-color: #123c4c;
    color: white;
    width: 30%;
    margin: auto;
}

.home-table > tbody > tr >td {
    vertical-align: middle;
    white-space: nowrap;
    width: 1%;
    white-space: nowrap;
    width: 1%;
}



.home-table > tbody > tr >th {
    vertical-align: middle;
    white-space: nowrap;
    width: 1%;
}

.end-th {
    text-align: right;
}

.center-th {
    text-align: center;
}

.button-green {
    background-color: #73be43;
    color: white;
    border: 12px #73be43 solid;
}

.button-green:hover {
    background-color: #63aa90;
    border: 12px #63aa90 solid;
    transition: 0.7s;
}

.button-empty {
    background-color: transparent;
    color: white;
    border: 6px #637580 solid;
}

.button-empty:hover {
    background-color: #637580;
    border: 6px #637580 solid;
    transition: 0.7s;
}

.button-empty-blue {
    background-color: transparent;
    color: white;
    border: 2px #38b6ff solid;
    padding: 5px;
}
.hidden {
    display: none!important;
}
.button-empty-orange {
    background-color: transparent;
    color: white;
    border: 2px #f58220 solid;
    padding: 5px;
}

.button-empty-yellow {
    background-color: transparent;
    color: white;
    border: 2px #feca0a solid;
    padding: 5px;
}

.button-grey {
    background-color: #637580;
    color: white;
    border: 12px #637580 solid;
    width: 100%;
}

.button-new {
    background-color: darkgrey;
    color: white;
    border-bottom: solid 2px white;
    border-right: solid 2px white;
    border-left: solid 0px;
    border-top: solid 0px;
    padding: 5px;
    width: auto;
    padding-right: 10px;
}

.button-new:hover {
    background-color: grey;
    transition: 0.7s;
}

.button-grey:hover {
    background-color: #63aa90;
    border: 12px #63aa90 solid;
    transition: 0.7s;
}

.button-grey2 {
    background-color: darkgrey;
    color: white;
    border-bottom: solid 2px white;
    border-right: solid 2px white;
    border-left: solid 0px;
    border-top: solid 0px;
    padding: 5px;
    width: 100%;
}

.button-grey2:hover {
    background-color: grey;
    transition: 0.7s;
}

.button-back {
    background-color: darkgrey;
    color: white;
    border-bottom: solid 2px white;
    border-right: solid 2px white;
    border-left: solid 0px;
    border-top: solid 0px;
    padding: 5px;
    width: auto;
}

.button-back:hover {
    background-color: grey;
    transition: 0.7s;
}

.button-blue {
    background-color: #38b6ff;
    color: white;
    border: 12px #38b6ff solid;
    width: 100%;
}

.button-blue:hover {
    background-color: #63aa90;
    border: 12px #63aa90 solid;
    transition: 0.7s;
}

.button-orange {
    background-color: #f58220;
    color: white;
    border: 12px #f58220 solid;
    width: 100%;
}

.button-orange:hover {
    background-color: #63aa90;
    border: 12px #63aa90 solid;
    transition: 0.7s;
}

.button-yellow {
    background-color: #feca0a;
    color: white;
    border: 12px #feca0a solid;
    width: 100%;
}

.button-yellow:hover {
    background-color: #63aa90;
    border: 12px #63aa90 solid;
    transition: 0.7s;
}

/*COLLECTION FORM*/

.new-collection-form select option {
    background-color: white;
}

.new-collection-row {
    background-color: whitesmoke;
    border-radius: 5px;
    border: #123c4c 1px solid;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
}

.new-collection-form select {
    width: 100%;
}

.new-collection-form textarea {
    width: 100%;
}

.form-save-button {
    margin-top: 20px;
    width: 100%;
}

.form-delete-button {
    width: 100%;
    margin-top: 20px;
}

.form-back-button {
    width: 100%;
    margin-top: 20px;
}

.form-group div{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.full-button-div {
    display: block !important;
}

.form-group div label{
    display: flex;
}

.form-group div label input{
    margin-right: 10px;
}


.dbdp {
    flex-direction: row !important;
}

.form-check-input {
    width: 1em !important;
}


/*Tables and details*/

.table {
    width: 100%;
}

.detail-table tbody tr td:first-child {
    font-weight: bold;
}


/* Charts */

.chart {
    width: 100%;
    min-height: 400px;
}

.button-dashboard {
    background-color: #fafafa;
    color: #123c4c;
    border: none;
    padding: 5px;
    width: 100%;
}

.dashboard-side-col ul li {
    font-style: italic;
    font-weight: bold;
    color: #123c4c;
}

.hidden-form {
    display: none;
}