@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700);

body{
    background: #EFEFEF;
}
.body-container {
    float: left;
    width: 100%;
    /* padding: 110px 0px 50px 0px; */
    padding: 90px 0px 50px 0px;
    overflow: hidden;
    background: #fff;
    /* height: 100vh; */
}

.d-none {
    display: none !important;
}


.bookmarked-saved-container {
    width: 70%;
    margin: 0 auto;
    overflow: hidden;
}

.saved-history {
    width: 362px;
    border: solid 1px #cccccc;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
}

    .saved-history:hover div {
        cursor: pointer;
    }

.btn-saved {
    float: left;
    background-color: #ffffff;
    padding: 4px 60px;
    width: 50%;
    text-align: center;
    font-family: OpenSansRegular;
    font-size: 15px;
    color: #333333;
}

.btn-history {
    float: left;
    background-color: #ffffff;
    padding: 4px 60px;
    width: 50%;
    text-align: center;
    font-family: OpenSansRegular;
    font-size: 15px;
    color: #333333;
}


.saved-history .active {
    background-color: #ff9900;
    font-family: OpenSansBold;
    font-size: 15px;
    color: #ffffff;
}

/*#region saved card */

/* .save-card-hld {
    width: 100%;
    float: left;
    margin-top: 20px;
} */

.save-search-text-hld {
    width: 80%;
    border: solid 1px #cccccc;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 40px;
    padding: 6px 10px;
}

    .save-search-text-hld .save-search-textbox {
        border: 0px;
        width: 90%;
        float: left;
        outline: none;
    }

    .save-search-text-hld .save-search-btn {
        background-image: url(https://cdn2.onference.in/images/cutouts/search.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 21px 22px;
        float: right;
        width: 24px;
        height: 24px;
        margin: 0 auto;
    }

        .save-search-text-hld .save-search-btn:hover {
            cursor: pointer;
        }

.save-card {
    width: 95%;
    padding: 20px 40px;
    border-radius: 15px;
    box-shadow: 0px 1px 10px 0 rgba(0, 0, 0, 0.11);
    background-color: #ffffff;
    margin: 0 auto;
    margin-bottom: 10px;
    display: block;
}

.remove-save {
    background-image: url(https://cdn2.onference.in/images/cutouts/delete-copy.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 23px 23px;
    float: right;
    width: 25px;
    height: 25px;
    margin: 0 auto;
    cursor: pointer;
}

.save-short-title {
    font-family: OpenSansRegular;
    font-size: 12px;
    font-weight: 600;
    color: #33ccff;
    margin-bottom: 5px;
    text-transform: uppercase;
    overflow: hidden;
}

/* .save-title {
    font-family: OpenSansBold;
    font-size: 18px;
    color: #333333;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 8px;
    cursor: pointer;
    text-decoration: none;
} */

    .save-title:hover {
        color: #333333;
        text-decoration: none;
    }

/* .save-speaker {
    font-family: OpenSansRegular;
    font-size: 14px;
    color: #333333;
    margin-bottom: 20px;
    overflow: hidden;
} */

.save-purchase {
    border-radius: 3px;
    background-color: #f5f5f5;
    padding: 3px 10px;
    font-size: 12px;
    color: #ff9933;
    text-align: right;
    float: right;
    position: relative;
    bottom: 20px;
}

/*#endregion */

/*#region history card */

.history-card-hld {
    width: 100%;
    float: left;
    margin-top: 15px;
    margin-bottom: 20px;
}

.history-search-text-hld {
    width: 80%;
    border: solid 1px #cccccc;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 40px;
    padding: 6px 10px;
}

    .history-search-text-hld .history-search-textbox {
        border: 0px;
        width: 90%;
        float: left;
        outline: none;
    }

    .history-search-text-hld .history-search-btn {
        background-image: url(https://cdn2.onference.in/images/cutouts/search.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 21px 22px;
        float: right;
        width: 24px;
        height: 24px;
        margin: 0 auto;
    }

        .history-search-text-hld .history-search-btn:hover {
            cursor: pointer;
        }

.history-card {
    width: 95%;
    padding: 20px 40px;
    border-radius: 15px;
    box-shadow: 0px 1px 10px 0 rgba(0, 0, 0, 0.11);
    background-color: #ffffff;
    margin: 0 auto;
    margin-bottom: 10px;
    display: block;
}

.history-short-title {
    font-family: OpenSansRegular;
    font-size: 12px;
    font-weight: 600;
    color: #33ccff;
    margin-bottom: 5px;
    text-transform: uppercase;
    overflow: hidden;
}

/* .history-title {
    font-family: OpenSansBold;
    font-size: 18px;
    color: #333333;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 8px;
    cursor: pointer;
    text-decoration: none;
} */

    .history-title:hover {
        color: #333333;
        text-decoration: none;
    }

.history-speaker {
    font-family: OpenSansRegular;
    font-size: 14px;
    color: #333333;
    /* margin-bottom: 20px; */
    overflow: hidden;
}

.history-watched {
}

.percentage-watched {
    font-family: OpenSansRegular;
    font-size: 12px;
    text-align: left;
    /* color: rgba(153, 153, 153, 0.7); */
    color: #324669;

}

.chapter-watched {
    font-family: OpenSansRegular;
    font-size: 12px;
    float: right;
    padding: 2px 8px;
    background-color: #e9ecef;
    color: orange;
    margin-bottom: 5px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
}

.history-card .progress {
    width: 100%;
}

/*#endregion */

.no-result {
    width: 100%;
    overflow: hidden;
    float: left;
    text-align: center;
    font-family: OpenSansRegular;
    font-size: 18px;
}

.footer-area {
    position: fixed;
    bottom: 0px;
}

/*#region media queries */


/*Custom Layout instaed 959px*/
@media only screen and (max-width : 991px) {
    .bookmarked-saved-container {
        width: 100%;
    }
    /* .body-container{
        height: 100vh;
    } */
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 959px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

    .bookmarked-saved-container {
        overflow: visible;
    }

    .saved-history {
        width: 260px;
    }

    .btn-saved, .btn-history {
        padding: 4px 10px;
    }

    /* .save-card-hld,
    .history-card-hld {
        width: 100%;
        margin-top: 25px;
    } */

    .save-search-text-hld,
    .history-search-text-hld {
        margin-bottom: 25px;
    }

    .save-card,
    .history-card {
        width: 100%;
        padding: 20px 20px;
    }
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

    .body-container {
        /* padding: 90px 0px 50px 0px; */
        padding: 70px 0px 25% 0px !important; 
    }

    .saved-history {
        width: 190px;
    }

    .btn-saved, .btn-history,
    .btn-saved .active, .btn-history .active {
        padding: 4px 10px;
        font-size: 12px !important;
    }

    /* .save-card-hld,
    .history-card-hld {
        width: 100%;
        margin-top: 20px;
    } */

    .save-search-text-hld,
    .history-search-text-hld {
        padding: 4px 10px;
    }

        .save-search-text-hld .save-search-textbox,
        .history-search-text-hld .history-search-textbox {
            height: 23px;
            font-size: 12px;
        }

        .save-search-text-hld .save-search-btn,
        .history-search-text-hld .history-search-btn {
            background-position: center top 3px;
            background-size: 18px 18px;
            width: 18px;
            height: 23px;
        }

    .save-card,
    .history-card {
        width: 100%;
        padding: 15px;
    }

    .remove-save {
        background-size: 18px 18px;
        width: 18px;
        height: 18px;
    }


    .save-title,
    .history-title {
        font-size: 16px;
    }

    .save-speaker,
    .history-speaker {
        font-size: 14px;
        /* margin-bottom: 15px; */
    }
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

    .body-container {
        /* padding: 90px 0px 50px 0px; */
        padding: 70px 0px 25% 0px !important;
    }

    .saved-history {
        width: 180px;
    }

    .btn-saved, .btn-history,
    .btn-saved .active, .btn-history .active {
        padding: 4px 10px;
        font-size: 12px !important;
    }

    /* .save-card-hld,
    .history-card-hld {
        width: 100%;
        margin-top: 20px;
    } */

    .save-search-text-hld,
    .history-search-text-hld {
        padding: 4px 10px;
    }

        .save-search-text-hld .save-search-textbox,
        .history-search-text-hld .history-search-textbox {
            height: 23px;
            font-size: 10px;
        }

        .save-search-text-hld .save-search-btn,
        .history-search-text-hld .history-search-btn {
            background-position: center top 3px;
            background-size: 18px 18px;
            width: 18px;
            height: 23px;
        }

    .save-card,
    .history-card {
        width: 100%;
        padding: 15px;
    }

    .remove-save {
        background-size: 18px 18px;
        width: 18px;
        height: 18px;
    }


    .save-title,
    .history-title {
        font-size: 16px;
    }

    .save-speaker,
    .history-speaker {
        font-size: 14px;
        /* margin-bottom: 15px; */
    }
}
/*#endregion */


/* new design css  */

   .section {
      margin-top: 24px;
    }

    .section h2 {
      font-size: 16px;
      color: #333;
      margin-bottom: 10px;
    }

    .card-row {
      display: flex;
      overflow-x: auto;
      gap: 12px;
      padding-bottom: 8px;
    }

    .card {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.08);
      min-width: 210px;
      padding: 12px;
      flex-shrink: 0;
    }

    .card p {
      font-size: 12px;
      color: #555;
      margin: 4px 0;
    }

    .card h3 {
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 6px;
      color: #222;
    }

    .dots {
      display: flex;
      justify-content: center;
      margin-top: 6px;
      gap: 5px;
    }

    .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #ccc;
    }

    .dot.active {
      background: #0CA9EA;
    }

    .play-icon {
      float: right;
      background: #0CA9EA;
      color: white;
      font-weight: bold;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }

    .reminder {
      margin-top: 4px;
      font-size: 12px;
      color: #0CA9EA;
    }

    .saved-card {
      background: #FFF5E9;
    }

    .reminder-orange {
      color: #FF7A00;
    }

    .progress-bar {
      height: 7px;
      background: #eee;
      border-radius: 4px;
      overflow: hidden;
      /* margin: 6px 0; */
    }

    .progress {
      height: 100%;
      /* background: #0CA9EA; */
      /* background: #B5B6B7 */
      background: #fff;
      margin-top: 6px;
    }

    /* ///// */


    .save-scroll-wrapper {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}

.save-scroll-wrapper::-webkit-scrollbar {
  height: 6px;
}
.save-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.save-card {
  flex: 0 0 auto;
  width: 240px;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.06);
  padding: 12px;
  text-decoration: none;
  color: #000;
  position: relative;
}


/* design changes start from here */

.save-card-hld,.show {
        display: flex !important;
    flex-direction: row;
    gap: 10px;
    overflow-y: hidden;
    overflow-x: auto;
    padding-top: 15px;
}

.save-card {
  
    background: #FFFBEC;
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.12);
 width: 170px;
 height: 127px;
 margin-left: 0;
}
.save-title{
    color: rgba(51, 65, 85, 1);
    font-size: 16px;
     font-family: Lato;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    min-height: 36px;
    overflow: hidden;
        margin-bottom: 0;
cursor: pointer;
font-weight: 700;
line-height: 17px;
}
.save-name{
      font-family: Lato;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    min-height: 26px;
    overflow: hidden;
    padding-bottom: 5px;
    color: rgba(51, 65, 85, 1);
    font-size: 16px;
    font-weight: 500;
    padding-top: 8px;
    text-align: justify;

}

.saveDate{
    font-family: Lato;
font-weight: 400;
font-size: 14px;
line-height: 120%;
letter-spacing: 0%;
color: rgba(51, 65, 85, 1);

}
.saveRemider{
        display: flex;
    align-items: center;
    justify-content: space-between;
font-size: 12px;
color: rgba(51, 65, 85, 1);
}

/* histor card css start here */
.history-card-hld {
  display: flex !important;
    flex-direction: row;
    gap: 10px;
    overflow-y: hidden;
    overflow-x: auto;
     scrollbar-width: thin; 
  
}


.history-card {
  /* min-width: 250px; 
  flex-shrink: 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  background-color: #fff; */

 background: #E2F5FF;
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.12);
 width: 170px !important;
 height: 127px;
 padding: 12px !important; 
 min-width: 170px;
 margin-left: 0;

}

.history-title{
    color: rgba(51, 65, 85, 1);
    font-size: 16px;
     font-family: Lato;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    min-height: 41px;
    overflow: hidden;
        margin-bottom: 0;
cursor: pointer;
font-weight: 700;
line-height: 20px;
}

.history-name{
      font-family: Lato;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    min-height: 26px;
    overflow: hidden;
    padding-bottom: 5px;
    color: rgba(51, 65, 85, 1);
    font-size: 16px;
    font-weight: 500;
    text-align: justify;

}
.history-card-hld::-webkit-scrollbar {
  height: 8px;
}
.history-card-hld::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}
.recentwatchedText{
    font-family: Lato;
font-weight: 900;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
margin-top: 20px;

}
.savedText{
    font-family: Lato;
font-weight: 900;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
/* margin-top: 12px;
padding-top: 20px; */

}
.UpdatesText{
     font-family: Lato;
font-weight: 900;
font-size: 18px;
line-height: 100%;
letter-spacing: 0%;
margin-top: 15px;
padding-bottom: 15px;
}
.notification-hld{
    display: flex !important;
    flex-direction: row;
    gap: 10px;
    overflow-y: hidden;
    overflow-x: auto;
    padding-bottom: 10px;
}
.notireadmore{
        color: #006CBA;
    text-decoration: underline;
    font-size: 14px;
}
.notification-card{
   
    background: #F1F5F9;
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.12);
 /* width: 170px !important; */
 height: 188px;
 padding: 12px !important; 
 min-width: 235px;
 border-radius: 10px;
}
.notification-logo{
    display: none;
}
.notification-title{
    color: rgba(51, 65, 85, 1);
    font-size: 16px;
     font-family: Lato;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    min-height: 41px;
    overflow: hidden;
        margin-bottom: 0;
cursor: pointer;
font-weight: 700;
text-align: start;
line-height: 20px;
}
/* .notification-description.expanded {
    -webkit-line-clamp: unset;
    display: block;
    max-height: none;
} */
.notification-description{
      /* font-family: Lato;
      padding-top: 10px;
    display: -webkit-box;
    overflow: hidden;
    padding-bottom: 5px;
    color: rgba(51, 65, 85, 1);
    font-size: 12px;
    text-overflow: ellipsis;
    font-weight: 500;
        width: 211px; */
        font-family: Lato;
            display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 212px;
    height: 102px;
    line-height: 1.3em;
    font-size: 14px;
padding-top: 10px;
padding-bottom: 5px;
 color: rgba(51, 65, 85, 1);
 text-align: start;
 
  /* display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: max-height 0.3s ease; */
}



.continue-card .card-content {
  background: #e6f4ff;
}

.saved-card .card-content {
  background: #fff9e6;
}

.continue-title {
  color: #2087d8;
}

.saved-title {
  color: #ff8c00;
}


.subtext {
  font-size: 13px;
  color: #334155;
  margin-top: 5px;
  font-family: Lato;
}

.monthlysubscText{
    display: none !important;
}
.profile-tab-container {
    display: block !important;
        padding-right: 16px;
}
.interest-filter {
    display: none !important;
}
.savedText{
    color:  #FF7A00;;
}
.mobile-search{

    padding-right: 14px;
  
}
.continue-card{
    margin-bottom: 10px;
}

@media (max-width: 480px) {
  .dashboard-section {
    padding: 0 10px;
  }

  .card-content {
    padding: 12px;
  }

  .section-title {
    font-size: 15px;
  }

  .subtext {
    font-size: 12px;
  }
}
@media only screen and (min-width: 1200px) {
    .history-card,.save-card {
        /* min-width: 420px !important;
        max-width: 470px !important; */
                max-width: 100% !important;
        min-width: 48% !important;
        /* width: 100% !important; */
    }
    .history-card-hld{
        width: 73% !important;
    }
    .save-card-hld {
         width: 73% !important;
          left: 22.4em !important; 
    }
 
}
@media only screen and (min-width:  991px){
    /* .notification-hld{
        flex-direction: column;
        width: 100%;
    max-width: 237px;
    } */
     body{
        overflow: hidden;
        overflow-y: hidden;
     }
     .col-md-12{
        position: unset;
        padding-right:unset;
        padding-left: unset;
     }
     .container{
        margin-left: unset;
        margin-right: unset;
        padding-right:unset;
        padding-left: unset;
     }
     .row{
        /* margin-left: unset;
        margin-right: unset; */
     }
     .bookmarkupdates{
        display: flex;
     }
     .bookmarkedinnerdiv{
       
        flex-direction: column !important;
     }
     .history-card-hld {
    
    /* flex-direction: column !important; */
  
}
.save-card-hld, .show {
   
    /* flex-direction: column !important; */
   
}
.notification-hld {

    flex-direction: column !important;
    height: 80vh;
    overflow: hidden;
    overflow-y: auto;
     scrollbar-width: none; 
   padding-top: 10px;
}
.notification-card{
            max-width: 300px;
        min-width: 280px;
         background: #F1F5F9;
}
.notification-description{
        width: 253px;
}
.recentwatchedText{
    margin-top: unset;
    color: #fff !important;
    font-size: 24px;
}
.savedText{
    font-size: 24px;
   
    color: #334155;

}
.c-inner-div{
    display: flex;
    align-items: center;
    gap: 10px;
}
.s-inner-div{
    display: flex;
    align-items: center;
    gap: 10px;
}
.c-parent-div.active .c-progress-text{
      font-size: 16px;
    font-family: Lato;
    color: #fff;
}
.c-progress-text{
    font-size: 16px;
    font-family: Lato;
     color: #64748B;

}
.s-progress-text{
    font-size: 16px;
    font-family: Lato;
    color: #64748B;

    

}
.c-parent-div{
background: #fff;
        border-radius: 10px;
      
        padding: 10px;
        display: flex
;
        flex-direction: column;
        gap: 10px;
        color: #334155;
        border: 1px solid #C7D0DE;
        cursor: pointer;

}
.c-parent-div.active{
background: #006CBA;
        border-radius: 10px;
        color: #fff;
        padding: 10px;
        display: flex
;
        flex-direction: column;
        gap: 10px;
        color: #fff;
}
.c-parent-div.active .c-inner-div .recentwatchedText {
  color: #fff !important;
}
.c-parent-div .c-inner-div .recentwatchedText {
  color: #334155 !important;
}

.s-parent-div{
   border: 1px solid #C7D0DE;
background: #fff;
        border-radius: 10px;
        color: #fff;
        padding: 10px;
        display: flex
;
        flex-direction: column;
        gap: 10px;
        margin-left:10px;
        cursor: pointer;
}
.s-parent-div.active{
   border: 1px solid #C7D0DE;
   background: #FF7A00;


        border-radius: 10px;
        color: #fff;
        padding: 10px;
        display: flex
;
        flex-direction: column;
        gap: 10px;
        margin-left:10px
}

.s-parent-div.active .s-inner-div .savedText {
  color: #fff !important;
}
.s-parent-div.active .s-progress-text {
  color: #fff !important;
}
.s-parent-div .s-inner-div .savedText {
  color: #334155 !important;
}

/* .history-card-hld {
   display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;

  width: calc(2 * 150px + 10px); 
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
} */

/* history card vertically scroll start */
.history-card,.save-card {
    /* min-width: 330px;
    max-width: 470px; */

     max-width: 100% ;
        min-width: 48% ;
    /* width: 100% !important; */
}
.save-card-hld{
    /* display: none !important; */
}
.show-flex {
  display: flex !important;
}
.hide-force {
  display: none !important;
}
.updateinnerdiv{
    display: block !important;
    background-color: #ECEBEB;
    padding-right: 17px;
    /* padding-right:unset; */
        padding-left: 3.2em !important;
        /* width: 360px !important; */
        width: 500px !important;
}
.body-container{
/* background-color: #ECEBEB; */
background-color: #fff;
padding: 77px 0px 50px 0px;
}
.saveinnerdiv,.historyinnerdiv{
    background-color: #fff;
    padding-top: 20px;
}
.historysavediv{
    display: flex;
    background-color: #fff;
    padding-left: 20px;
    width: 100%;
}
.updatesxinnerdiv{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
}
.upadateseeallfordesktop{
    display: none;
       width: 107;
height: 49;
gap: 10px;
border-radius: 8px;
border-width: 1px;
padding: 10px 20px;
background: #FFFFFF;
border: 1px solid #C7D0DE;
font-family: Lato;
font-weight: 400;
font-size: 20px;
line-height: 100%;
letter-spacing: 0%;
color: #64748B;


    }
 .history-card-hld{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;  
    overflow-y: auto;  
    max-height: 73vh;  
    padding: 10px 60px 80px 0px;  
    width: 70%;
    position: absolute;
     background-color: #fff;
     scrollbar-width: thin;
}
 .save-card-hld {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;  
    overflow-y: auto;  
    max-height: 73vh;  
    /* padding: 10px;   */
      /* padding: 10px 60px 80px 0px;   */
      padding: 10px 60px 80px 7px;  
    width: 70%;
    position: absolute;
    left: 21.9em;
            margin-top: 18px;
            background-color: #fff;
            scrollbar-width: thin;
}


/* .history-card {
    width: calc(50% - 10px);  
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
} */

/* .history-card:hover {
    background-color: #f0f0f0;  
} */

/* Optional: Add some styling for the history title, speaker, and progress bar */
/* .history-title {
    font-size: 16px;
    font-weight: bold;
}

.history-speaker {
    font-size: 14px;
    color: #666;
}

.progress-bar {
    background-color: #66ccff;
    height: 7px;
} */

/* history card vertically scroll end */

}
@media only screen and (max-width:  991px){

    /* .tabs {
   animation: unset;
  } */

 
    .upadateseeallfordesktop{
        display: none;
    }
    .updateinnerdiv{
        display: block !important;
    }
    .no-result {
        width: 100%;
   overflow: hidden;
   float: left;
   text-align: center;
   font-family: Lato;
   font-size: 15px;
   text-align: left;
   }
    .recentwatchedText,.savedText{
font-size: 18px;

}
   .history-title, .save-title{
    font-size: 14px;

}
.saveDate{
  
font-size: 12px;

}
.history-name,.save-name{  
    font-size: 14px;

}
.s-svgimg{
    display: none !important;
}
.c-svgimg{
    display: none !important;
}
.c-progress-text{
    display: none;
}
.s-progress-text{
    display: none;
}
}