/* ********************************************************* */
/* GLOBAL */

.mainbox {
    height: 100vh;
    max-width: 900px
}

:root {
    --bs-body-font-family: 'Roboto', sans-serif;
    --bs-body-font-size: 13px;
}

.row {
    margin-right: 0 !important;
}

/* ********************************************************* */
table.table-number td {
    text-align: right;
}
table.table-number td:after {
    content: ' €';
}
table th {
    vertical-align: middle;
}
table.vertical-align-top th {
    vertical-align: top;
}
th.vertical-align-middle {
    vertical-align: middle !important;
}

.calcbox {
    background-color: #ffecf4 !important;
}
/* ********************************************************* */
/* NAVEGACION */
.bottom-navbar {
    padding-top: 1em;
    padding-right: 1.5em;
    z-index: 98;
    background-color: #fff;
    padding-bottom: 1em;
    box-shadow: 0 -.8rem 1rem rgba(0,0,0,.15)!important
}

/* ********************************************************* */
/* BOTONES */
.accordion-button {
    padding-top: .5em;
    padding-bottom: .5em;
}
.form-control {
    font-size: 12px;
    font-weight: 400;
    line-height: 2;
    color: #212529;
    background-color: #f9fbfe;
}

.button-primary {
    background-color: #ff7a59;
    border-color: #ff7a59;
    color: #fff;
}

.button-primary:hover {
    background-color: #ff8f73;
    border-color: #ff8f73;
    color: #fff;
}

.button-close {
    background-color: #053150;
    border-color: #597aff;
    color: #fff;
}

.button-close:hover {
    background-color: #304760;
    border-color: #597aff;
    color: #fff;
}

.button-default {
    font-size: 14px;
    line-height: 14px;
    padding: 0.8em 0.8em;
    font-weight: 500;
}

.private-button {
    border: none;
    text-decoration: none;
    border-radius: 3px;
    border-width: 1px;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    font-weight: 400;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: all .15s ease-out;
    display: inline-block;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
    min-width: 8em;
}
.blue-button {
    background-color: #6ba7ff;
    color: white;
}
.blue-text {
    color: #6ba7ff;
}
.bullet-number {
    font-size: 14px;
    margin-top: 4px;
    margin-right: 10px;
}
.blue-button:hover {
    color: white;
    background-color: #a0c7ff;
}
.circle{
    border: 1px solid  #6ba7ff;
    width: 22px;
    height: 22px;
    border-radius: 100%;
    position: relative;
    margin: 4px;
    display: inline-block;
    vertical-align: middle;
    background:  #6ba7ff;
}
.circle:hover{
    background: #a0c7ff;
}
.circle:active{
    background: radial-gradient(#aaa, #fff);
}
.circle:before,
.circle:after{
    content:'';position:absolute;top:0;left:0;right:0;bottom:0;
}
/* PLUS */
.circle.plus:before,
.circle.plus:after {
    background: white;
    box-shadow: 1px 1px 1px #ffffff9e;
}
.circle.plus:before{
    width: 2px;
    margin: 3px auto;
}
.circle.plus:after{
    margin: auto 3px;
    height: 2px;
    box-shadow: none;
}
/* MINUS */
.circle.minus:before{
    background: white;
    margin: auto 3px;
    height: 2px;
    box-shadow: 0px 1px 1px #dd4e4e;
}
.emailBox {
    max-width: 25em;
}

.emailInput {
    height: 2.8em;
}

/* ********************************************************* */
/* LOADER */

.loader {
    width: 100%;
    z-index: 99;
    position: fixed;
    top: 0;
    height: 100%;
    background: #000000e8;
}
.loader.inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.loader.inner .loader-wheel {
    top: 35%;
}
.loader.inner .loader-text {
    top: 60%;
}

.loader-wheel {
    animation: spin 1s infinite linear;
    border: 5px solid rgb(57 166 207 / 50%);
    border-left: 4px solid #fff;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    position: absolute;
    top: 45%;
    left: 50%;
}

.loader-text {
    font-size: 20px;
    color: #fff;
    top: 53%;
    position: absolute;
    left: 49%;
}

.loader-text:after {
    content: 'Loading';
    animation: load 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes load {
    0% {
        content: 'Cargando';
    }
    33% {
        content: 'Cargando.';
    }
    67% {
        content: 'Cargando..';
    }
    100% {
        content: 'Cargando...';
    }
}

/* ********************************************** */
/* ERROR */
.errorBox {
    position: fixed;
    z-index: 99;
    background-color: #000000e8;
    width: 100%;
    height: 100%;
    top: 0;
}

.index-98 {
    z-index: 98 !important;
}

.errorCard {
    width: 30rem;
    top: 25%;
    left: 35%;

}


.input-container {
    position: relative;
}

.icon-container {
    position: absolute;
    right: 10px;
    top: calc(50% - 10px);
}
.input-loader {
    position: relative;
    height: 20px;
    width: 20px;
    display: inline-block;
    animation: around 5.4s infinite;
}

@keyframes around {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.input-loader::after, .input-loader::before {
    content: "";
    background: white;
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    border-width: 2px;
    border-color: #333 #333 transparent transparent;
    border-style: solid;
    border-radius: 20px;
    box-sizing: border-box;
    top: 0;
    left: 0;
    animation: around 0.7s ease-in-out infinite;
}

.input-loader::after {
    animation: around 0.7s ease-in-out 0.1s infinite;
    background: transparent;
}