.type {display: none;}

/*CALENDER FOR CLASSES*/


.calendar-nav {

                display:            flex; /* Establish flex container */
                align-items:        center; /* Vertically align items in the middle */
                justify-content:    center; /* Horizontally center the content */
                gap:                1.5rem;/* Space between the back icon, dates, and next icon */

}


.calendar-days {

                display:            flex; /* Make the list horizontal */
                list-style-type:    none; /* Remove default list styling */
                padding:            0.5rem;    /* Remove default padding */*/
                margin:             2rem; /* Remove default margin */
                gap:                2.5rem; /* Space between each date */
                font-size:          1.1rem;
                align-items:        center;
                
                


}


.calendar-days a:hover {

                color:              var(--text-color);
                text-decoration:    underline;
/*                text-shadow:        0px 0px 3px rgba(0, 0, 0, 0.5);*/
               

}


.active {

                
                background:         var(--secondary-color);
                padding-left:       2rem; 
                padding-right:      2rem; 
                padding-top:        0.5rem; 
                padding-bottom:     0.5rem;
                border-radius:      1rem;


}


.back-icon, .next-icon {

                display:            flex;
                cursor:             pointer; /* Change mouse cursor on hover */
                padding:            0.5rem; /* Padding around the icons for easier click */
                user-select:        none; /* Prevent the icons from being selectable */
                margin-top:         -0.5rem;
                align-items:        center;

}


/*START OF MAIN LISTINGS*/


.class-day h2 {

                background:         var(--third-color);
                color:              var(--text-color);
                padding:            1rem;
                font-size:          1.5rem;
                margin-top:         2rem;
                margin-bottom:      1rem;
                font-size:          1.25rem;
                text-align:         left;
                margin-left:        2rem;
}


.class-listing {

                display:            flex;
                background:         var(--background-color);
                padding:            1rem;
                box-shadow:         0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
                gap:                1rem;
                margin-bottom:      1rem;
                margin-left:        2rem;
                margin-right:       1rem;
                padding-top:        2.5rem;
                padding-bottom:     2.5rem;
                align-items:        center;
                font-family:        var(--font-secondary);
                font-weight:        var(--poppins-light);
             

}


.class-listing .book {

                margin-left:        auto;

}


.class-listing time,
.class-listing h3,
.class-listing p {

                margin:             0;
                color:              var(--text-color);


}

.class-listing h3 {

                font-size:          1rem;

}


.class-listing img {

                border-radius:      50%;
                width:              4rem; /* 64px */
                height:             4rem; /* 64px */

}


.class-listing .title a {

                color: var(--text-color);

}

.class-listing .title a:hover {

                text-decoration: underline;

}


.class-listing p,
.instructor {

                color: var(--secondary-color);

}


.class-listing button {

                background:         var(--secondary-color);
                color:              var(--text-color);
                border:             none;
                padding:            1rem 4rem;
                cursor:             pointer;
                border-radius:      0.3rem;
                transition:         background-color 0.3s;
                text-transform:     uppercase;

}


.class-listing button:hover {

                background:         var(--muted-color);
/*                color:              var(--background-color);*/
               
}

/*FOR SEARCH BUTTONS*/


.filter-actions {

                display:            flex;
                justify-content:    space-between;
                padding-top:        1rem 4rem;
                border-radius:      0.3rem;

}


.apply-filters, .reset-filters {

                 padding:            1.5rem 3rem;
                border-radius:      1rem;
                border:             none;
                cursor:             pointer;
                
}


.apply-filters {

                background-color:   var(--third-color);
                color:              var(--text-color);
}


.reset-filters {

                background-color:   var(--secondary-color);
                color:              var(--text-color);

}


.apply-filters:hover {

                 background-color:   var(--third-color-hover);
}


.reset-filters:hover {

                 background-color:   var(--secondary-color-hover);
}


.filterCont {


                display:             block;
               

}


.tbc {          display:             none;}


.filter-toggle-button {

                display:            none;
                cursor:             pointer;
                background-color:   var(--secondary-color);
                color:              var(--text-color);
                display:            flex;
                justify-content:    space-between;
                padding:            1rem 4rem;
                border-radius:      0.3rem;
                width:              50%;
                margin:             0 auto;
                border:             0px;
    
}


.filter-toggle-button:hover {


                background-color:   var(--secondary-color-hover);

}

/*FOR iclass*/


.middleRowSide table {

                width:              90%;
                border-collapse:    collapse;
                background-color:   var(--background-color);
                box-shadow:         0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
                margin-left:        5%;
                margin-top:         2rem;
                text-align:         left;

}


.middleRowSide th {

                /*background-color: var(--primary-color);*/
                color:              var(--text-color);
                padding:            1rem;
                text-align:         left;
                border-bottom:      1px solid var(--secondary-color);

}


.middleRowSide td {

                padding:            0.8rem;
                color:              var(--text-color);
                border-bottom:      1px solid var(--secondary-color);

}


.middleRowSide .profile button {

                background-color:   var(--third-color);
                color:              var(--text-color);
                padding:            1.5rem 1.5rem;
                border:             none;
                border-radius:      0.25rem;
                cursor:             pointer;
                transition:         background-color 0.3s ease;
                width:              90%;
                margin-top:         2rem;
                margin-bottom:      3rem;

}


.middleRowSide .profile button:hover {

                background-color:   var(--third-color-hover);
                text-decoration:    underline;
}


.profile-img {

                float:              left; 
                margin-right:       1rem; 
                border-radius:      50%; 
                width:              9rem;
                height:             auto;

}


/*FOR SLIDER*/

/* Container (Track) */

input[type=range] {

              -webkit-appearance:   none; /* Override default CSS styles */
              appearance:           none;
              width:                60%; /* Full-width */
              height:               1rem; /* Specified height */
              background:           var(--secondary-color);
              outline:              none; /* Remove outline */
              opacity:              0.7; /* Set transparency (cross-browser) */
              -webkit-transition:   .2s; /* 0.2 seconds transition on hover */
              transition:           opacity .2s;
}


/* Mouse-over effects */

input[type=range]:hover {

            opacity:                1; /* Fully opaque on hover */
}


/* Slider Handle (use webkit for Chrome, Safari, Edge and others) */

input[type=range]::-webkit-slider-thumb {

                -webkit-appearance:   none; /* Override default look */
                appearance:           none;
                width:                2.5rem; /* Width and height of the slider handle */
                height:               2.5rem;
                border-radius:        50%;
                background:           var(--third-color);
                cursor:               pointer; /* Cursor on hover */
}


input[type=range]::-moz-range-thumb {

                width:                2.5rem; /* Width and height of the slider handle */
                height:               2.5rem;
                background:            var(--third-color);
                cursor:               pointer;
}

/* Firefox specific styling */

input[type=range]::-moz-range-track {

                background:           var(--secondary-color);
}


/* For IE */

input[type=range]::-ms-thumb {

              width:                    2.5rem;
              height:                   2.5rem;
              background:               var(--secondary-color);
              cursor:                   pointer;

}


input[type=range]::-ms-track {

              background:               transparent;
              border-color:             transparent;
              color:                    transparent;
              
}


/*FOR JOINCLASSLIVE LINKS*/


.joinClassLink {

                display:                inline-block;
                margin-bottom:          3rem;
                background-color:       var(--third-color);
                color:                  var(--text-color);
                padding:                3rem;
                border-radius:          5px;
                box-shadow:             0 2px 4px rgba(0,0,0,0.2);
}


.joinClassLink a {
    
                color:                  var(--text-color);
                text-decoration:        none;
                   
}


.joinPasswordText {

                display:                inline-block;
                background-color:       var(--secondary-color);
                color:                  var(--text-color);
                padding:                0.5rem 1rem;
                border-radius:          5px;
                box-shadow:             0 2px 4px rgba(0,0,0,0.2);
}


.joinPasswordText #classPassword {

   
                background-color:       var(--muted-color);
                padding:                0.2rem 0.5rem;
                border-radius:          4px;
                margin-left:            5px;

}


@media screen and (max-width: 920px) {
  

    .noShow {

                display:            none;
    }


    .active {

                background:         none;
                padding:            0rem;


    }


    .class-listing {

                margin-left:        0rem;
                margin-right:       0rem;
                padding-top:        2rem;
                padding-bottom:     2rem;

    }


        .instructor,
        .type,
        .photo {

                display:            none;

    }

    .class-day h2 {
            
                text-align:         center;
                margin-left:        0rem;

    }


    .class-listing button {
           
                padding:            0.5rem 2rem;

        }


    .filterCont {


                display:             none; 

    }

    .tbc { 

                display:             block;

        }


    .filter-toggle-button {


                display:            block;
    }



}