@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700&display=swap');

/* General */
html{
    min-height: 100%;
    position: relative;
}
body {
    margin: 0;
    margin-bottom: 40px;
    background-color: #f8fafc;
    font-family: 'Raleway', sans-serif;
    padding-bottom: 60px;
}
label.error{
    color: red;
}

.navbar-expand-md {
    width: 100%;
    left: 0;
    top: 0;
    position: fixed;
    z-index: 50;
}
.btn-primary {
    background-color: #00ADEF;
    border-color: #00ADEF;
}

.btn-secondary {
    background-color: #87888a !important;
    border-color: #87888a;
}
.btn-secondary:hover {
    background-color: #919292 !important;
    border-color: #919292;
}
.btn-primary:hover {
    background-color: #0097ef;
    border-color: #0097ef;
}
.content {
    border-radius: 10px;
    margin-top: 80px;
    margin-bottom: 40px;
    padding: 1rem;
    background-color: white;
    box-shadow: 6px 5px 15px -3px #f0f0f0;
}
.content1 {
    margin-top: 80px;
    margin-bottom: 40px;
}
.content2 {
    margin-top: 100px;
    margin-bottom: 40px;
}
.nav-link {
    color: #00ADEF;
}
.nav-link:hover {
    color: #000;
}
li .active {
    color: #00ADEF;
    font-weight: 600;
}
a {
  color: #00ADEF;
}
h6, h5 {
    font-weight: 700;
}
.bold {
    font-weight: 700;
}
.sp-blue {
    color: #00ADEF;
}
.sesion {
    color: white;
    text-decoration: none;
}
.sesion:hover{
    color: white;
}
.btn-check:active+.btn-outline-secondary,
.btn-check:checked+.btn-outline-secondary,
.btn-outline-secondary.active,
.btn-outline-secondary.dropdown-toggle.show,
.btn-outline-secondary:active {
    color: #fff;
    background-color: #00ADEF;
    border-color: #00ADEF;
}
a {
    text-decoration: none;
}

footer {
    background-color: #f1f1f1;
}
.fw-500{
    font-weight: 500;
}
.err{
    font-size: 14rem; 
    font-weight: 800;
}

/* Switch */
.form-check-input:checked {
    background-color: #00ADEF;
    border-color: #00ADEF;
}

/* Iconos */
.fs-2 {
    font-size: 2rem;
}
.co-in {
    color: #70dd6d;
}
.co-ex {
    color: #F57373;
}
.co-du {
    color: #f8cb69;
}
.co-fi {
    color: #00ADEF;
}
/* Inicio */

.hove:hover{
    background-color: #00ADEF !important;
}

/*Tab datos*/
.bg{
    background-color: #f8fafc;
    border-radius: 10px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link .mtab {
    color: black;
    background-color: transparent;
    font-size: 600;
    border-bottom: 2px solid #00ADEF;
}
.nav-pills .nav-link {
    border-radius: 0px;
    color: #000;
}

/* Login */
.vh{
    height: 100vh;
}
.card-img-left {
    width: 50%;
    background: scroll center url(../img/supraflex.jpg);
    background-size: cover;
}

/* Lesiones */
.accordion-button:not(.collapsed) {
    color: #000;
    background-color: #F9FBFC;
}
.accordion-button:focus {
    border-color: #00ADEF;
    box-shadow: 0 0 0 0.25rem #0097ef56;
}

/*Tablas*/
.page-link{
    color: #00ADEF;
}
.page-item.active .page-link {
    border-color: #00ADEF;
    background-color: #00ADEF;
}
 .bootstrap-table .fixed-table-pagination>.pagination-detail{
    display: none !important;
}
/*Menú */
.transparent {
    padding-top: 5px;
    padding-bottom: 5px;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid #e6e6e6;
    background-color: rgba(255, 255, 255, 0.6);
}

#mainMenu li > a {
    color: #000;
    font-weight: 400;
    position: relative;
    z-index: 1;
    text-decoration: none;
}

.main-header.fixed-nav #mainMenu li > a {
    color: #000;
    text-decoration: none;
}

#mainMenu li:not(:last-of-type) {
    margin-right: 30px;
}

#mainMenu li > a::before {
    position: absolute;
    content: "";
    width: calc(100% - 1px);
    height: 2px;
    background: #00ADEF;
    bottom: -4px;
    left: 0;

    -webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    z-index: -1;

    -webkit-transition: transform 0.5s ease;
    transition: transform 0.5s ease;
}

#mainMenu li > a:hover::before,
#mainMenu li > a.active::before {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
}

/*Cards*/
.card-w1 {
    background-color: white;
    border-radius: 10px;
    padding-top: 3rem;
    padding-bottom: 1rem;
    padding-left: 3rem;
    padding-right: 3rem;
    height: 100%;
}
.card-w1 ul {
    padding-left: 0;
}
.card-w1 li {
    list-style: disc;
}
.card-w1 li i{
    padding-right: 0.5rem;
}

.card-b .card-header {
    background-color: #f8fafc;
}

/* Perfil */

.user-card-full {
    overflow: hidden
}

.card-p {
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
    box-shadow: 6px 5px 15px -3px #f0f0f0;
    border: none;
    margin-bottom: 30px
}

.user-card-full .user-profile {
    border-radius: 5px 0 0 5px
}

.bg-c-lite-green {
    background-color: #e4e9ee;
}

.card .card-block p {
    line-height: 25px
}

.b-b-default {
    border-bottom: 1px solid #e0e0e0
}

/*Tabla*/
.clickable {
    cursor: pointer;
}
tbody, td, tfoot, th, thead, tr {
    border-bottom-style: solid;
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
}
thead {
    background-color: #F9FBFC;
}

/*ALERTS*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}
@keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}
.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

.hideMe {
    -moz-animation: cssAnimation 0s ease-in 7s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 7s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 7s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 7s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        visibility:hidden;
        /*width:0;
        height:0;
        overflow:hidden;*/
    }
}
@-webkit-keyframes cssAnimation {
    to {
        /*width:0;
        height:0;*/
        visibility:hidden;
    }
}
.mt80{
    margin-top: 80px;
}
.tcenter{
    text-align: center;
}

.content-p-5{
    padding-top:2rem !important;
    padding-left:3rem !important;
    padding-right:3rem !important;
    padding-bottom:3rem !important;
}

.position {
    position: fixed;
    right: 0;
    z-index: 100;
}

.nowrap{
    white-space: nowrap;
}
.alignCenter{
    text-align: center;
}