/* Title */

.main-title{
    background:linear-gradient(135deg,#162047,#243b7a);
           
    color: #fff;
    text-align: center;
    padding: 14px;
    font-size: 20px;
    font-weight: 700;
    border-top: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
}

/* Tabs */

.tabs{
    display:flex;
    flex-wrap:nowrap;
    overflow:hidden;
    background:#162047;
    box-shadow:
    0 15px 35px rgba(22,32,71,.15);
}

.tab-btz{

    flex:1;

    border:none;

    background:transparent;

    color:#cdd8ff;

    padding:18px 10px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

    position:relative;

    text-align:center;
}

.tab-btz:hover{

    background:rgba(255,255,255,.05);

    color:#fff;
}

.tab-btz.active{

    background:linear-gradient(
    135deg,
    #14d9ff,
    #6f6bff
    );

    color:#fff;

    box-shadow:
    0 0 25px rgba(20,217,255,.35);
}

.tab-btz.active::after{

    content:'';

    position:absolute;

    right:0;
    left:0;
    bottom:0;

    height:3px;

    background:#fff;
}

/* Content */

.day-content{

  display:none;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:2px;
}

.day-content.active{
    display:grid;
}

@keyframes showContent{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

/* Cards */

 

.card::before{

    content:'';

    position:absolute;

    top:0;
    right:0;

    width:5px;
    height:100%;

    background:
    linear-gradient(
    180deg,
    #14d9ff,
    #6f6bff
    );
}

.card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 18px 45px rgba(0,0,0,.12);
}

/* Title */

.title{

    color:#1f2937;

    font-size:17px;

    font-weight:700;

    line-height:2;

    margin-bottom:15px;

    text-align:right;
}

/* Status */

.card{
    background:#fff;
    padding:10px 14px;
    position:relative;
    overflow:hidden;
    border:none;
    text-align:right;
    transition:.35s;
    margin:0;
    box-shadow:0 4px 12px rgba(0,0,0,.05);
}

.status{

    position:absolute;

    top:8px;

    left:8px;

    padding:4px 10px;

    border-radius:20px;

    background:#eefbff;

    color:#0891b2;

    border:1px solid #c8f1fb;

    font-size:10px;

    font-weight:700;

    line-height:1.2;

    z-index:2;
}

/* Mobile */

@media(max-width:768px){
    
      .card{
        padding:5px 7px;
        border-radius:8px;
         height: 30px;
    }

  .status{

        position:absolute;

        top:8px;

        left:8px;

        padding:3px 10px;

        border-radius:20px;

        background:#eefbff;

        color:#0891b2;

        border:1px solid #c8f1fb;

        font-size:10px;

        font-weight:700;

        line-height:1.2;

        z-index:2;
    }

    .title{
        font-size:13px;
        line-height:1.4;
    }
    

    .main-title{
        font-size:14px;
        padding:8px;
    }

    .tab-btz{
          flex:unset;
        width:auto;
        min-width:50px;
        padding:10px 6px;
        font-size:11px;
    }

    .day-content.active{
        grid-template-columns:1fr;
    }

}