*{
    font-family:"Poppins", sans-serif;
    scroll-behavior:smooth;
}

figure img, span img, div img{width:100%}

:root{
    --nebula-desktop:1400px;
    --header-size:70px;
    --header-negative:-80px;
    --color-card:#2D2D2D;
    --light-blue:#4AAEFF;
    --light-orange:#FF8629;
    --light-danger:#FF1717;
    --light-success:#0aaf06;
    --light-info:#8e8e8e;
    --dashboard-nav-size:75px;
    
}

/*format*/
.flex{display:flex}
.column{flex-direction:column}
.wrap{flex-wrap:wrap}

.main_content{
    width:100%;
    max-width:450px;
    padding:3em 1em;
    gap:25px;
    margin:auto;
}

.title_site_view{
    font-size:25px;
    line-height:90%;
    text-align:center;
}
.title_site_view{
    font-size:16px;
    line-height:130%;
    color:#fff;
    font-weight:500;
}

/*contenedor de las tarjetas*/
.content_cards{
    width:100%;
    max-width:350px;
    gap:20px;
}

/*estilo de las tarjetas*/
.visor_card_month{
    justify-content:center;
    align-items:flex-start;
    padding:1em;
    border-radius:15px;
    background:var(--color-card);
    gap:10px;
}
.visor_card_month p{
    color:#fff;
}
.headding_month p{font-size:18px}

.content_users{
    width:100%;
    gap:5px;
}
.user_field{
    width:100%;
    overflow:hidden;
    justify-content:space-between;
    align-items:center;
    padding:0.2em;
    gap:8px;
    background:#ffffff08;
    border-radius:8px;
    cursor:pointer;
}
.cnt_name_user{
    align-items:center;
    gap:8px;
}
.user_field img{
    max-width:25px;
    border-radius:10em;
}
.user_field p{font-size:14px}
p.name_user{
    line-height:120%;
    color:#cdcdcd;
}
.vacation_day{
    padding:0 0.5em;
    border-radius:10em;
}

.fest_field p{font-weight:600}

p.light_blue{color:var(--light-blue)}
.day_blue{background:var(--light-blue)}
.day_red{background:var(--light-danger)}
.day_orange{background:var(--light-orange)}

.separate{
    border:1px solid #ffffff2e;
    border-radius:5px;
    width:100%;
}
.content_response{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    gap:10px;
    padding:1em;
}
.alert-danger,
.alert-success{
    border:1px solid;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    padding:0 1em;
    border-radius:8px;
    background:#2d2d2d;
}
p.alert-danger{
    color:var(--light-danger);
}
p.alert-success{
    color:var(--light-success);
}

/*menu dashboard*/
.navigation{
    width:100%;
    position:fixed;
    bottom:0;
    background:#ffffff10;
    display:flex;
    justify-content:center;
    align-items:center;
    height:var(--dashboard-nav-size);
}

.content_nav{
    display:flex;
    width:100%;
    justify-content:space-between;
    align-items:center;
    gap:5px;
    max-width:400px;
}
.option_nav,
.option_nav a,
.option_nav span{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:5px;
    border-radius:10em;
    cursor:pointer;
}

.option_nav a,
.option_nav span{
    padding:0.5em;
}

.option_nav p{
    color:#fff;
}

.option_nav img{
    max-width:20px;
}

.op_close img{
    max-width:16px;
}


/*Modal*/

.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.4);
  display: flex; justify-content: center; align-items: center;
}
.modal.hidden { display: none; }
.modal_content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    width:100%;
    max-width:300px;
    position:relative;
}
.actions_modal{
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-top:15px;
}
.cancel_edit{
    position:absolute;
    top:-10px;right:-10px;
}
.btn_edit{
    border:0;
    border-radius:8px;
    padding:0.5em;
    color:#fff;
    font-weight:600;
}
.btn_edit_primary{
    width:100%;
}
.btn_edit_primary{background:var(--light-success)}
.btn_edit_danger{background:var(--light-danger)}
.btn_edit_info{background:var(--light-info)}

.edit_modal{
    border:1px solid #d3d3d3;
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:1em;
    border-radius:8px;
}

/**/



.op_user{background:var(--light-blue)}
.op_enter{background:var(--light-orange)}
.op_calendar{background:var(--light-success)}
.op_close{background:var(--light-danger)}

@media(max-width:800px){
    .option_nav p{display:none}   
    .content_nav{
        justify-content:space-evenly;
        gap:15px;
    }
    .option_nav {
        width:65px;
        height:50px;
    }
}