:root{
    --col-primario:#25447C;
    --col-secundario:#cf4a7e;
    --col-hover:#486497;
    --white-color: #FDFCFC;
}
body {
    background-image: url('../images/bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
header .topbar{
    background: var(--white-color);
    padding: 2em 0;
}

.breadcrumbs{
    background: rgba(26, 41, 71 ,0.24);
    padding: 1.5rem 0;

}
.breadcrumbs .bar{
    color: var(--white-color);
    font-size: 1.35rem;
    text-transform: uppercase;
}

.breadcrumbs .bar a{
    
    color: var(--white-color);
    font-weight: 600;
}
.breadcrumbs .bar a:hover{
    
    color: var(--col-secundario);
    font-weight: 600;
}

.breadcrumbs .bar span{
    display: inline-block;
    margin-right: 1rem;
}

.breadcrumbs .bar span::before{
  border: 1px solid;
  content: "➤";
  display: inline-block;
  height: 2rem;
  width: 2rem;
  text-align: center;
  line-height: 28px;
  border-radius: 50%;
}

.breadcrumbs .bar span.text{
    color: var(--white-color);
}

.dashboard_panel{
  min-height: 50vh;
  margin: 10vh 0;
}
.dashboard_panel_item{
    background: #FDFDFD;
    border-radius: 1rem;
    box-sizing: border-box;
    justify-content: center;
    min-height: 30vh;
    padding: 2rem;
}
.dashboard_panel_item img{
    max-width: 120px;
    margin: auto;
}
.dashboard_panel_item h3{
    text-align: center;
}
.dashboard_panel_item h3 [data-first-word] {
    display: block;
}


footer{
    color: var(--white-color);
}

footer div{
    text-align: center;
    padding: 3em 0;
}

.footer-authenticated{
    background: var(--white-color);
}

.footer-authenticated div{
    color: var(--col-primario);
}
.footer-login div{
    border-top: solid 2px var(--white-color);

}

.btn_1{
    background-color: var(--col-primario); 
    color: var(--white-color); 
    border-radius: 55px;
    padding: 0.75rem 2rem;
}

.btn_1:hover{
    background-color: var(--col-hover); 
}

.btn_2{
    background-color: var(--white-color); 
    color: var(--col-primario); 
    border-radius: 55px;
    padding: 0.75rem 2rem;
}

.heading_1 {
  color: var(--white-color);
  font-size: 40px;
  font-weight: 600;
  margin-top: 2rem;
  text-align: center;
  text-transform: uppercase;
}

.hide-field{
    display: none;
}

.text-field{  
    box-sizing: border-box;
    border-radius: 55px;
    color: var(--col-primario);
    padding: 15px;
    width: 100%;
}
.text-field::placeholder {
    color:  var(--col-primario); 
}
.select-field{  
    box-sizing: border-box;
    border-radius: 55px;
    color: var(--col-primario);
    padding: 15px;
    width: 100%;
}

.check-field{
    display: none;
}
.checkbox-label{
    display: flex;
    gap: 9px;
    align-content: center;
    align-items: center;
    position: relative;
}
.checkbox-label .checkbox-custom{
    display: inline-block;
    height: 40px;
    width: 80px;
    background: white;
    border-radius: 40px;
    border: solid 2px var(--col-primario);
}

.checkbox-label .checkbox-custom::after{
    content: '';
    background-color: var(--col-secundario);
    border-radius: 50%;
    display: block;
    height: 30px;
    left: 5px;
    font-size: 40px;
    font-weight: bold;
    line-height: 40px;
    position: absolute;
    margin-top: 3px;
    width: 30px;
}


.check-field:checked ~ .checkbox-custom::after{
    background: var(--col-primario);
    margin-left: 36px;
}
.label-field{  
    color: var(--white-color);
}

table{
    border-color: var(--white-color);
    width: 100%;
}

table td,
table th{
    border: solid 1px var(--white-color);
    color: var(--white-color);
    padding: 1.5rem;
}

table td h3{
    display: none;
    font-weight: bold;
    border-bottom: dashed 1px;
}

@media screen and (max-width:768px){
    table thead{
        display: none;
    }
    table tbody tr{
        display: flex;
        flex-direction: column;
    }
    
    table td h3{
        display: block;
    }
}