/*!
Theme Name: usc-liffe
Version: 1.0.0
Text Domain: usc-liffe
*/




@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap');

* { font-family: 'Plus Jakarta Sans'; box-sizing: border-box;}
html, body { margin: 0 !important; padding: 0; overflow-x: hidden;}

:root {
    --Global-White: #ffffff;
    --Global-Black: #000000;
    --Primary-Main-0: #1865FC;

    --text-color-EBEBEB: #EBEBEB;
    --avatar-bg: #FEEEE1;

    /* Shades of Primary */
    --Primary-Shade-90: #457BE6;
    --Primary-Shade-80: #3E6DCC;
    --Primary-Shade-70: #3660B3;
    --Primary-Shade-60: #2E5299;
    --Primary-Shade-50: #274580;
    --Primary-Shade-40: #1F3766;
    --Primary-Shade-30: #17294C;
    --Primary-Shade-20: #0F1B33;
    --Primary-Shade-10: #080E19;

    /* Tints of Primary */
    --primary-Tints-10: #edf3ff;
    --primary-Tints-40: #b8d0ff;
    --Primary-Tints-90: #5F94FF;
    --Primary-Tints-80: #71A0FF;
    --Primary-Tints-70: #82ACFF;
    --Primary-Tints-60: #94B8FF;
    --Primary-Tints-50: #A6C4FF;
    --Primary-Tints-40: #B8D0FF;
    --Primary-Tints-30: #CADCFF;
    --Primary-Tints-20: #DBE7FF;
    --Primary-Tints-10: #EDF3FF;


    /* Neutral */
    --Neutral-90: #040F25;
    --Neutral-80: #262F40;
    --Neutral-70: #475166;
    --Neutral-60: #6C7B99;
    --Neutral-50: #A3B1CC;
    --Neutral-40: #B9C4DA;
    --Neutral-30: #D0D8E7;
    --Neutral-20: #EFF3FA;
    --Neutral-10: #FCFCFD;

    /* Gradient */
    --gradient-primary: linear-gradient(90deg, #00c9ff 0%, #d49bdf 100%);
    --gradient-border: linear-gradient(356.9deg,
      rgba(0, 201, 255, 0.5) 1.72%,
      rgba(212, 155, 223, 0.5) 93.53%);
    
      /*red*/
    --red-10: #E13B3B;

    /*green*/
    --green-10: #089F18;
    --green-20: #F5FAF5;
}

/* Class for bold text*/
.bl-color{ color: var(--Neutral-90); text-decoration: underline;}
.bold-color{ color: var(--Neutral-90);}

/* Typography */
h1 { font-size: 54px; line-height: 64px; font-family: 'Plus Jakarta Sans'; margin: 0; padding: 0; } 
h2 { font-size: 44px; line-height: 52px; font-family: 'Plus Jakarta Sans'; margin: 0; padding: 0; } 
h3 { font-size: 36px; line-height: 44px; font-family: 'Plus Jakarta Sans'; margin: 0; padding: 0; } 
h4 { font-size: 28px; line-height: 34px; font-family: 'Plus Jakarta Sans'; margin: 0; padding: 0; } 
h5 { font-size: 22px; line-height: 26px; font-family: 'Plus Jakarta Sans'; margin: 0; padding: 0; } 
.h5-sm { font-size: 20px; line-height: 24px;} 
h6 { font-size: 18px; line-height: 22px; font-family: 'Plus Jakarta Sans'; margin: 0; padding: 0; } 

p           { font-size: 16px; line-height: 24px; font-family: 'Plus Jakarta Sans'; margin: 0; padding: 0; } 
.text-lg    { font-size: 18px; line-height: 28px; font-family: 'Plus Jakarta Sans'; margin: 0; padding: 0; } 
.text-sm    { font-size: 14px; line-height: 22px; font-family: 'Plus Jakarta Sans'; margin: 0; padding: 0; }
.text-xs    { font-size: 12px; line-height: 16px; font-family: 'Plus Jakarta Sans'; margin: 0; padding: 0; }

.f-700 { font-weight: 700;}
.f-600 { font-weight: 600;}
.f-500 { font-weight: 500;}
.f-400 { font-weight: 400;}
.f-300 { font-weight: 300;}

.lh-20 { line-height: 20px !important;}

.text-center { text-align: center;}

.mt-0 { margin-top: 0 !important;}
.mb-0 { margin-bottom: 0 !important;}
.pt-0 { padding-top: 0 !important;}
.pb-0 { padding-bottom: 0 !important;}

.mt-24 { margin-top: 24px;}
.mb-24 { margin-bottom: 24px;}
.mt-16 { margin-top: 16px;}
.mb-16 { margin-bottom: 16px;}
.mt-12 { margin-top: 12px;}
.mb-12 { margin-bottom: 12px;}
.mt-8 { margin-top: 8px;}
.mb-8 { margin-bottom: 8px;}

.pt-24 { padding-top: 24px;}
.pb-24 { padding-bottom: 24px;}
.pt-16 { padding-top: 16px;}
.pb-16 { padding-bottom: 16px;}
.pt-12 { padding-top: 12px;}
.pb-12 { padding-bottom: 12px;}
.pt-8 { padding-top: 8px;}
.pb-8 { padding-bottom: 8px;}

/* End of Typography */

/* Buttons */
button { padding: 0; border: unset;}
.btn { font-family: Plus Jakarta Sans; font-size: 16px; font-weight: 600; line-height: 26px; text-align: center; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; text-decoration: none; offset: none; transition: all 0.3s ease; cursor: pointer;}
.btn-dark { padding: 12px 24px; background-color: var(--Primary-Main-0); color: var(--Global-White);}
.btn-dark.active,
.btn-dark:hover { background-color: var(--Primary-Shade-70);}

.btn-light { padding: 11px 23px; border: 1px solid var(--Primary-Main-0); background-color: var(--Global-White); color: var(--Primary-Main-0);}
.btn-light.active,
.btn-light:hover { background-color: var(--Primary-Main-0); color: var(--Global-White);}

.btn-sky { padding: 12px 24px; background-color: var(--Primary-Tints-10); color: var(--Primary-Shade-40);}
.btn-sky.active,
.btn-sky:hover { background-color: var(--Primary-Tints-40);}



.absolute-link      { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; cursor: pointer; z-index: 2; transition: all 0.3s ease;}
/* End of Buttons */

.pos-abs            { position: absolute;}
.pos-rel            { position: relative;}

/* Image */
img { width: 100%; max-width: 100%; height: auto;}
/* End of Image */

/* Input Fields */

input[type=text], input[type=email], input[type=url], 
input[type=password], input[type=search], 
input[type=number], input[type=tel], input[type=date], 
input[type=month], input[type=week], 
input[type=time], input[type=datetime], input[type=datetime-local], 
input[type=color], textarea                                         { padding: 14px 16px; width: 100%; color: var(--Neutral-60) !important; font-family: Plus Jakarta Sans; font-size: 16px; font-weight: 500; line-height: 26px; border: 1.5px solid var(--Neutral-40); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: var(--white); transition: all 0.3s ease;}

input[type=text]:focus, input[type=email]:focus, 
input[type=url]:focus, input[type=password]:focus, 
input[type=search]:focus, input[type=number]:focus, 
input[type=tel]:focus, input[type=date]:focus, 
input[type=month]:focus, input[type=week]:focus, 
input[type=time]:focus, input[type=datetime]:focus, 
input[type=datetime-local]:focus, 
input[type=color]:focus, textarea:focus                              { outline: none !important;}

::-webkit-input-placeholder { /* WebKit browsers */
    color: var(--Neutral-60);
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: var(--Neutral-60);
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: var(--Neutral-60);
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: var(--Neutral-60);
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    opacity: 1;
}
/* End of Input Fields */

/* Custom Scroll Bar */
/* For Chrome, Safari, and Opera */
::-webkit-scrollbar {
    width: 0px;  /* For vertical scrollbars */
    height: 0px; /* For horizontal scrollbars */
    display: none;
}
/* End of Custom Scroll Bar */


/* container */
.container {
    width: 100%;
    padding-inline: 16px;
    margin-right: auto;
    margin-left: auto;
}
/* End of container */

/* ================================= Common CSS ================================= */
main { height: 100dvh; position: relative; z-index: 1;}
.bg-design::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; background: linear-gradient(97deg, #1865FC 0%, #0E57E4 100%); z-index: -2;}
.bg-design::after { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; background-image: url(./assets/images/Union.svg); background-repeat: repeat; background-size: 38px 38px; z-index: -1;}

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

.logo { max-width: 83px;}

/**************** DatePicker ******************/
.daterangepicker td.active, .daterangepicker td.active:hover { background: #1865FC !important; }



/* header */
.mob-profile-btn-wrapper { display: none;}
.header-container { padding-block: 20px 30px; width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.header-button-dropdown-wrapper { position: relative;}
.header-button { position: relative; padding: 8px 12px;  width: max-content; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 14px; color: var(--text-color-EBEBEB); background-color: #115BEC; white-space: nowrap; border: 1px solid #FFF; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; transition: all 0.3s ease; cursor: pointer;}
.header-button-dropdown-wrapper:hover .header-button { background-color: var(--Primary-Shade-70); color: var(--Global-White); border-color: transparent;}
.header-button img { width: 48px; aspect-ratio: 1/1; background-color: var(--Global-White); border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;}

.header-dropdown { position: absolute; margin-top: 10px; padding: 8px; top: 100%; right: 0; transform: scaleY(0); transform-origin: top; opacity: 0; visibility: hidden; transition: transform 0.3s ease, opacity 0.3s ease; background-color: var(--Global-White); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0px 0px 23px 0px rgba(21, 40, 77, 0.11); -webkit-box-shadow: 0px 0px 23px 0px rgba(21, 40, 77, 0.11); -moz-box-shadow: 0px 0px 23px 0px rgba(21, 40, 77, 0.11); z-index: 3;}
.header-dropdown::before { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 100%; height: 10px; display: block; background-color: transparent;}
.header-dropdown .dropdown-item { padding: 12px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--Neutral-60); background-color: transparent; text-decoration: none; white-space: nowrap; transition: all 0.3s ease; cursor: pointer;}
.header-dropdown .dropdown-item:hover,
.header-dropdown .dropdown-item.active { color: var(--Primary-Shade-40); background-color: var(--Primary-Tints-10); border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;}
.header-dropdown .dropdown-item svg { width: 24px; height: 24px; aspect-ratio: 1/1; transition: all 0.3s ease;}
.header-dropdown .dropdown-item:hover svg path,
.header-dropdown .dropdown-item.active svg path { stroke: var(--Primary-Shade-40);}
.header-button-dropdown-wrapper.active-dropdown .header-dropdown { transform: scaleY(1); opacity: 1; visibility: visible;}
/* End of header */

/* Avatar Preview - PopUp */
.change-avatar-popup { position: fixed; width: calc(100vw - 32px); max-width: 818px; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; z-index: 10; opacity: 0; visibility: hidden; transition: all 0.5s ease;}
.avatar-popup-wrap  { padding: 16px; display: flex; justify-content: space-between; gap: 16px; background-color: var(--Global-White); border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px;}

.select-avatar-wrap { width: 100%; max-width: calc(60% - 8px); background-color: var(--Global-White); border: 1px solid var(--Neutral-40); border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;}
.select-avatar-wrap p { padding: 16px 16px 10px; color: var(--Neutral-80); font-weight: 600;}
.avatar-images-wrapper { max-height: 412px; padding-inline: 16px; padding-bottom: 16px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; overflow-x: auto;}
.avatar-images-wrapper .avatar-wrap { position: relative; width: 100%; max-width: calc(25% - 12px); aspect-ratio: 1/1;}
.avatar-images-wrapper .avatar-wrap input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; margin: 0; font-size: 0; display: block; opacity: 0; z-index: 2; cursor: pointer;}
.avatar-images-wrapper .avatar-img { position: relative; width: 100%; height: 100%; border: 2px solid transparent; transition: all 0.3s ease;}
.avatar-images-wrapper .avatar-img::after { content: ''; position: absolute; top: 5%; right: 5%; transform: translate(0, 0); width: 16px; height: 16px; display: inline-block; background-image: url(./assets/images/selected-icon.svg); background-position: center center; background-size: cover; background-repeat: no-repeat; z-index: 1; opacity: 0; transition: all 0.3s ease;}
.avatar-images-wrapper .avatar-wrap input:checked ~ .avatar-img,
.avatar-images-wrapper .avatar-wrap:hover .avatar-img { border-color: var(--Primary-Main-0);}
.avatar-images-wrapper .avatar-wrap input:checked ~ .avatar-img::after,
.avatar-images-wrapper .avatar-wrap:hover .avatar-img:after { opacity: 1;}
.avatar-img     { position: relative; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;}
.avatar-bg      { background-color: var(--avatar-bg);}
.avatar-bg img  { object-fit: cover; height: 100%;}
.preview-avatar-wrap { position: relative; padding-top: 65px; width: 100%; max-width: calc(40% - 8px); display: flex; flex-direction: column; justify-content: space-between; align-items: center;}
.preview-bg-design { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 122px; background: linear-gradient(97deg, #1865FC 0%, #0E57E4 100%); border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; z-index: 0;}
.preview-bg-design::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; background-image: url(./assets/images/Union.svg); background-repeat: repeat; background-size: 18px 18px; z-index: -1;}
.preview-img    { width: 100%; max-width: 114px; max-height: 114px; aspect-ratio: 1/1; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px;}
.preview-wrapper { width: 100%; max-width: 247px; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.preview-wrapper p.text-lg { padding-block: 8px 2px;}
.preview-wrapper p.text-sm { color: var(--Neutral-60); font-weight: 500; text-align: center;}
.preview-action { width: 100%; margin-top: auto; display: flex; flex-direction: row; justify-content: space-between; align-items: center;}

#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; z-index: 9; opacity: 0; visibility: hidden; transition: all 0.5s ease;}
.opened-popup { display: block !important; opacity: 1 !important; visibility: visible !important;}
/* End of Avatar Preview - PopUp */

/* ===============================End of Common CSS ============================= */

/* survey-button */
.survey-button{margin-inline: auto; width: fit-content; text-decoration: none;}

/* ================================= Dashboard Data ================================= */
.dashboard-data { position: relative;}
.dashboard-data::after { position: absolute; content: ''; bottom: 0; left: 0; transform: translate(0, 0); width: 100%; height: 80%; display: block; background-color: #F7F7F7; border-radius: 30px 30px 0px 0px; -webkit-border-radius: 30px 30px 0px 0px; -moz-border-radius: 30px 30px 0px 0px; z-index: 0;}
.dashboard-data .container { position: relative; z-index: 1;}
.dashboard-title-subtitle p { padding-bottom: 4px; font-weight: 600; line-height: 19.2px; color: var(--text-color-EBEBEB);}
.dashboard-title-subtitle h4 { color: var(--Global-White); font-weight: 700;}

/* Gender PopUp */
.gender-popup { position: fixed; padding: 32px; width: 100%; max-width: 413px; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; background: var(--Global-White); border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px; opacity: 0; transition: all 0.3s ease; z-index: 11; }
.gender-popup-content { text-align: center;}
.gender-popup-content p { margin-top: 8px; color: var(--Neutral-60);}
.gender-popup-content .radio-wrapper { padding: 16px; position: relative; display: flex; justify-content: flex-start; align-items: center; gap: 8px; background-color: var(--Primary-Tints-10); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; transition: all 0.3s ease;}
.gender-popup-content .radio-wrapper label { padding-left: 32px; width: 100%; text-align: left; font-size: 16px; line-height: 26px; font-weight: 500; color: var(--Primary-Shade-40);}
.gender-popup-content input[type="radio"] { padding: 0; margin: 0; position: absolute; top: 50%; left: 16px; transform: translateY(-50%); width: 24px; height: 24px; display: block; z-index: 1; cursor: pointer;}
.gender-popup-content:last-child { margin-bottom: 0;}
.radio-content-wrapper { padding-block: 24px; display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 12px;}
/* End of Gender PopUp */


.dashboard-main { padding-block: 27px; position: relative;;}

/* Dashboard Statistics cards */
.dashboard-cards-wrapper { padding-bottom: 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; gap: 24px;}
.dashboard-card     { position: relative; width: calc(33.33% - 16px); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; background-color: var(--Global-White); border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; overflow: hidden;}
.user-deatils-card::before { content: ''; position: absolute; top: 45px; left: -24px; transform: translate(0, 0); width: 80px; height: 80px; aspect-ratio: 1/1; display: block; background-image: url(./assets/images/dashboard-user-deatils-card-bg.svg); background-position: center center; background-size: contain; background-repeat: no-repeat; z-index: 1;}
.dashboard-user-details { max-width: 100%;}
.dashboard-user-details.preview-img { max-width: 144px; max-height: 144px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;}
.user-details { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;}
.dashboard-card h5 { color: #333333; position: relative; }
.dashboard-user-details.preview-wrapper h5 { padding-block: 12px 0;}
.dashboard-user-details.preview-wrapper p { text-align: center; line-height: 19px; color: #667085;}

.lets-start-button { margin-top: 16px; width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px;}
.lets-start-button span { width: 24px; height: 24px; display: flex; justify-content: center; align-items: center;}
.lets-start-button img { width: 14px; height: 14px; aspect-ratio: 1/1; object-fit: cover; object-position: center center; transform: translateX(0); transition: all 0.3s ease;}
.lets-start-button:hover img { transform: translateX(5px);}

.progress-card::after { content: ''; position: absolute; top: 35px; right: 42px; transform: translate(0, 0); width: 32px; height: 32px; aspect-ratio: 1/1; display: block; background-image: url(./assets/images/chart-bg-image.svg); background-position: center center; background-size: contain; background-repeat: no-repeat; z-index: 0;}
.chart-states-wrapper { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; z-index: 1;}
.progress-chart { padding-block: 12px 18px;}
.chart-states-text { display: flex; justify-content: flex-start; align-items: center; gap: 10px; color: var(--Global-Black);}
.chart-states-text p { letter-spacing: 0.28px;}
.chart-label-dot { width: 13px; height: 13px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;}
.pending .chart-label-dot { background-color: #FF7675;}
.completed .chart-label-dot { background-color: #1148FE;}

#dashboardProgressDoughnutChart { width: 204px; height: 204px; aspect-ratio: 1/1;}

.time-spent-card { padding-top: 68px; justify-content: flex-start; text-align: center; gap: 8px;}
.time-spent-card::after { content: ''; position: absolute; top: 107px; left: 10px; transform: translate(0, 0); width: 21px; height: 21px; aspect-ratio: 1/1; display: block; background-image: url(./assets/images/total-time-sm-bg.svg); background-position: center center; background-size: contain; background-repeat: no-repeat;}
.time-spent-card::before { content: ''; position: absolute; bottom: 0; right: 0; transform: translate(0, 0); width: 67px; height: 51px; aspect-ratio: 1/1; display: block; background-image: url(./assets/images/total-time-lg-bg.svg); background-position: center center; background-size: contain; background-repeat: no-repeat;}
.time-spent-card .bg-clock { width: 148px; height: 145px; position: absolute; bottom: 0; left: 0; transform: translate(0, 0); background-image: url(./assets/images/clock-bg-image.svg); background-repeat: no-repeat; background-size: contain;}
.time-spent-card .bg-text { position: absolute; top: -17px; left: 36px; transform: translate(0, 0); width: 100%; height: 100%; max-height: 174px; color: #F9F9F9; font-size: 174px; font-weight: 800; line-height: 174px; opacity: 0.6;}
.time-spent-card h5 { max-width: 252px;}
.total-minutes { position: relative; color: #344054; font-size: 74px; line-height: 88.8px;}
/* End of Dashboard Statistics cards */



/* Dashboard Program Summary */
.dashboard-programs-wrapper { padding: 26px; background-color: var(--Global-White); border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;}
.dashboard-programs-wrapper .h5-sm { color: #101828;}

/* Program Table */
.table-program-wrapper { display: none; width: 100%;}

.program-table-wrapper { padding-top: 28px;}
.progress-table { width: 100%;}

.prog-heading-row { padding-bottom: 22px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between;}
.prog-col-heading:first-child { width: 100%; max-width: 55%; padding-left: 0;}
.prog-col-heading:nth-child(2) { width: 100%; max-width: 20%; text-align: center;}
.prog-col-heading:last-child { width: 100%; max-width: 25%;}
.prog-col-heading { text-transform: uppercase; font-size: 16px; line-height: 20px; font-weight: 600; color: #8D97AD; text-align: left;}

.prog-row {
    padding-bottom: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-bottom: 1px solid #F4F4F6;
} 
.prog-row-child-1 { width: 100%; max-width: 55%; padding-left: 0;}
.prog-row-child-2 { width: 100%; max-width: 20%;}
.prog-row-child-3 { width: 100%; max-width: 25%;}

.prog-row .program-time-spent-wrapper { display: flex; justify-content: center; align-items: center;}

.program-parent-row {display: flex; flex-direction: column;  gap: 12px;}

.program-table-wrapper th,
.program-table-wrapper td {
    text-align: left;
    padding: 0 6px;
}
.program-table-wrapper .prog-details {
    width: 55%;
    padding-left: 0;
}
.program-table-wrap .prog-time-spent {
    width: 20%;
    text-align: center;
}
.program-table-wrapper .prg-progress {
    width: 25%;
}
.program-table-wrapper tbody tr td {
    padding-top: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid #F4F4F6;
}
.program-table-wrapper tbody tr:first-child td { 
    padding-top: 0;
}
.program-icon img { width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.progress-table .program-name-icon      { width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px;}
.progress-table .program-icon   { width: 52px; height: 52px; aspect-ratio: 1/1;}
.progress-table .program-name .program-title        { padding-bottom: 4px; color: #182230; font-weight: 600; cursor: pointer;}
.progress-table .program-name .program-sub-title    { color: #667085; font-weight: 500;}
.progress-table .program-time-spent     { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px;}
.progress-table .program-time-spent img { width: 20px; height: 20px;}
.progress-table .program-time-spent p { display: inline-block; white-space: nowrap; color: #667085; font-weight: 500;}

.program-completed-progress { display: flex; flex-direction: column; justify-content: start; gap: 6px;}
.program-completed-progress-text { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px;}
.program-completed-progress-percent { color: var(--Neutral-90);}
.program-completed-progress-static-text { color: #667085; letter-spacing: 0.5px;}

.program-progress-bar { position: relative; line-height: 0;}
.filled-progress-image { position: absolute; top: 0; left: 0; height: 100%; z-index: 1; object-position: left; object-fit: cover;}
/* End of Dashboard Program Summary */
/* ===============================End of Dashboard Data ============================= */


/* ================================= Program Page ================================= */
.prog-page-main { overflow-y: hidden; }
.prog-sec { height: 100%; background-color: #F6F9FE; border-radius: 30px 30px 0px 0px; -webkit-border-radius: 30px 30px 0px 0px; -moz-border-radius: 30px 30px 0px 0px;}

.prog-container { padding-block: 24px; position: relative; width: 100%; height: 100%; overflow-y: hidden;}
.programs-row { height: 100%; max-height: calc(100vh - 150px); display: flex; justify-content: space-between; align-items: stretch; gap: 32px;}
.prog-left { width: calc(100% - 16px); max-width: 40.6%; display: flex; flex-direction: column;}
.prog-right { width: calc(100% - 16px); max-width: 59.4%;}


/* *************** Program Left Side Data *************** */
/* ====== program title / prog / Exit Button ====== */
.prog-title-icon-wrapper { padding: 16px 24px 27px 16px; display: flex; gap: 24px; justify-content: flex-start; align-items: center; background-color: var(--Global-White); border-radius: 30px 30px 30px 0px; -webkit-border-radius: 30px 30px 30px 0px; -moz-border-radius: 30px 30px 30px 0px;}
.prog-name-num-wrapper { width: 100%; max-width: 318px;}
.prog-num { padding-bottom: 6px; line-height: 26px; color: var(--Primary-Main-0);}
.prog-name { line-height: 36px; color: var(--Neutral-80);}
.prog-icon { flex-basis: 120px;}
.prog-icon img { border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px;}
.prog-progress-exit-wrapper { position: relative; display: flex; justify-content: space-between; align-items: flex-end; }
.prog-progress-wrapper { position: relative; padding-left: 16px; padding-bottom: 16px; flex-grow: 1; background-color: var(--Global-White); border-radius: 0 0 30px 30px; -webkit-border-radius: 0 0 30px 30px; -moz-border-radius: 0 0 30px 30px;}
.program-completed-progress { position: relative; max-width: 204px; z-index: 1;}
.program-completed-progress-text { gap: 4px !important;}
.prog-progress-exit-wrapper .program-completed-progress-percent { color: var(--Neutral-80);}
/* .prog-progress-wrapper::after { position: absolute; content:''; width: 32px; height: 50%; bottom: 0; right: -16px; transform: translate(0, 0); display: block; background-color: #F6F9FE; border-radius: 0 0 30px 0; -webkit-border-radius: 0 0 30px 0; -moz-border-radius: 0 0 30px 0; z-index: 1;} */

/* Save and Exit Button */
.prog-exit-btn { position: absolute; bottom: 0; right: 0; z-index: 0; display: block;  padding-left: 16px;
    /* bottom: -16px; */
    /* right: -16px; */
    /* padding-top: 16px;  */
}
/* .prog-exit-btn::before { position: absolute; content:''; width: 100%; height: 100%; top: 0; left: 0; transform: translate(0, 0); display: block; background-color: #F6F9FE; border-radius: 30px 0 0 0; -webkit-border-radius: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; z-index: 1;} */
.prog-exit-btn .btn { position: relative; z-index: 1; background-clip: padding-box; box-shadow: 0px 0px 0px 16px #F6F9FE; -webkit-box-shadow: 0px 0px 0px 16px #F6F9FE; -moz-box-shadow: 0px 0px 0px 16px #F6F9FE;
    /* border-radius: 26px; */
    /* border: 16px solid #F6F9FE; */
}
.prog-exit-btn::before { position: absolute; content: ''; width: 40px; height: 40px; bottom: 0; right: calc(100% - 2px); transform: translate(0, 0); display: block; border-radius: 0 0 24px 0px; -webkit-border-radius: 0 0 24px 0px; -moz-border-radius: 0 0 24px 0px; z-index: 1; box-shadow: 16px 16px 0px 0px #F6F9FE; -webkit-box-shadow: 16px 16px 0px 0px #F6F9FE;    -moz-box-shadow: 16px 16px 0px 0px #F6F9FE;
    /* bottom: 16px;*/
    /* right: calc(100% - 16px); */
    /* background-color: #F6F9FE; */
}
/* ====== End of program title / prog / Exit Button ====== */



/* ====== Program Narrator ====== */
.prog-narrator { height: 100%; margin-top: 24px; padding: 16px; display: flex; position: relative; background-color: #AFC8F9; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; overflow: hidden;}
.prog-narrator::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; background-image: url(./assets/images/Union-light.svg); background-repeat: repeat; background-size: 48px 48px; z-index: 0;}
.narrator-avatar { margin-top: auto; max-width: 233px; height: auto !important; max-height: 279px !important; bottom: -23px; right: 0; position: relative; z-index: 1;}
.narrator-content-wrapper { position: relative; margin-inline: auto 0; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; width: 100%; max-width: 259px; background-color: var(--Global-White); border-radius: 19px; -webkit-border-radius: 19px; -moz-border-radius: 19px; z-index: 1; overflow-y: auto !important;}
.narrator-content { width: 100%; height: 100%; max-width: 227px; overflow: hidden;}
/* .narrator-content p { font-size: 20px; line-height: 24px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px;} */
.narrator-content p { display: flex; flex-wrap: wrap; gap: 0 4px; font-size: 20px; line-height: 24px; padding-bottom: 6px;}
.narrator-content .hyperaudio-transcript .unread { color: var(--Neutral-70); font-weight: 400;}
.narrator-content .hyperaudio-transcript .read,
.narrator-content .hyperaudio-transcript .active { color: var(--Primary-Main-0); font-weight: 500;}
.narrator-control-wrapper { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 8px;}
.narrator-control { padding: 9px; width: 36px; height: 36px; display: flex; background-color: #E8EDF8; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; filter: none; transition: all 0.3s ease;}
.narrator-control:hover { filter: opacity(0.8); cursor: pointer;}
.narrator-reload { background-color: #F8B133;}
.narrator-pause { background-color: var(--Primary-Main-0);}


/* Quote Narrator */
.quote-narrator { display: flex; flex-direction: column; justify-content: flex-start; gap: 16px;}
.quote-message { color: var(--Neutral-70);}
.quote-author-name { margin-top: auto; margin-bottom: 0; line-height: 26px; align-self: flex-end; color: var(--Primary-Main-0);}
/* End of Quote Narrator */
/* ====== End of Program Narrator ====== */
/* *************** End of Program Left Side Data *************** */





/* Program Right Side Data */
.prog-data-wrapper { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 100%; background-color: var(--Global-White); border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;}
.prog-data { /*position: relative; padding: 24px; padding-bottom: 18px; height: calc(100% - 69px);*/ /* max-height: 540px; */ /*overflow-y: auto;*/}
.prog-data-title { padding: 10px; padding-left: 0 !important; border-bottom: 1px solid var(--Neutral-50);}
.prog-data-title h5 { color: var(--Neutral-90); font-weight: 600;}
.prog-detailed-content { padding-top: 16px;}
.prog-detailed-content p { color: var(--Neutral-60); line-height: 26px; font-weight: 500;}

.prog-navigation { padding: 16px 24px; border-top: 1px solid var(--Neutral-30); background-color: var(--Global-White); position: relative; z-index: 2; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-radius: 0 0 30px 30px; -webkit-border-radius: 0 0 30px 30px; -moz-border-radius: 0 0 30px 30px;}

.prog-read-more-btn { position: absolute; top: -41px; left: 50%; transform: translate(-50%, 0);  z-index: 1;}
.btn-read { padding: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--Neutral-40); color: var(--Neutral-70); background-color: var(--Global-White); border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; z-index: 2; transition: all 0.3s ease;}
.btn-read svg { transition: all 0.3s ease;}
.btn-read svg path { transition: stroke 0.3s ease;}
.btn-read:hover { background-color: var(--Primary-Main-0); color: var(--Global-White); cursor: pointer;}
.btn-read:hover svg { animation: slide 1s infinite;}
@keyframes slide {
    0% { transform: translateY(0); }
    50% { transform: translateY(30%); }
    100% { transform: translateY(0); }
}
.btn-read:hover svg path { stroke: var(--Global-White);}
.back-save-btn-wrapper { display: flex; justify-content: space-between; align-items: center;}
.go-back-btn { position: relative; padding-right: 14px; color: var(--Neutral-60); font-weight: 500; text-decoration: none;}
.go-back-btn::after { position: absolute; content: ''; display: block; right: 0; top: 50%; transform: translate(0, -50%); width: 1px; height: 100%; max-height: 21px; background-color: #A3B1CC; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;}
.save-exit-btn { padding-left: 14px; font-weight: 500; text-decoration: none; color: var(--Primary-Main-0);}
.prog-navigation a { opacity: 1; transition: opacity 0.3s ease;}
.prog-navigation a:hover { cursor: pointer; opacity: 0.75;}
.navigation-line { flex-grow: 1; height: 1px; background-color: var(--Neutral-50); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;}
.next-prev-arrow-btn { display: flex; gap: 8px; justify-content: space-between;}
.next-prev-arrow-btn a { width: 36px; height: 36px;}


/* Program 2 */
/*=== New CSS ===*/
/* .prog-2 .main-point { padding-top: 24px;} */
.prog-2 .prog-detailed-content p + .main-point { padding-top: 24px;}
.prog-2 .prog-detailed-content p:empty + .main-point { padding-top: 0;}



/* Screen 1 */
.main-point { display: flex; justify-content: flex-start; align-items: flex-start; gap: 12px; font-size: 0;}
.main-point p { color: var(--Neutral-80); font-weight: 600;}
.prog-data textarea { padding: 12px 14px; margin-top: 12px; font-weight: 500; font-size: 16px; line-height: 26px; color: var(--Neutral-60); resize: none;}
.quote-icon svg { width: 56px; height: auto; aspect-ratio: 1.12/1;}

/* Checkbox */
.checkbox-item  { position: relative; margin-top: 12px; padding-left: 32px;}
.checkbox-label { display: block; font-size: 16px; line-height: 26px; font-weight: 500; color: var(--Neutral-70);}
.checkbox-label input { margin: 0; padding: 0; position: absolute; top: 5px; left: 5px; width: 16px; height: 16px; display: block; background-color: var(--Primary-Main-0); border: none; opacity: 0; z-index: 2;}
.checkbox-label input:checked  +  .checkmark { border-color: var(--Primary-Main-0); background-color: var(--Primary-Main-0);}
.checkmark { position: absolute; top: 5px; left: 5px; width: 16px; height: 16px; display: block; border: 1px solid #A3B1CC; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; transition-duration: 0.3s;}
.checkmark::before { content: ''; position: absolute; left: 5px; top: 1px; transform: translate(0, 0); width: 3px; height: 8px; border: solid white; border-width: 0 2px 2px 0; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

/* Start of Program 3 */
/* Program 3 Screen 1 */
.cloud-screen-wrapper { margin-top: 24px; position: relative; width: 100%; height: 100%; min-height: 324px; max-height: 324px; display: flex; background-color: #ECF0F6; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; overflow: hidden;}
.cloud-screen-wrapper::after { width: 814px; /* height: 650px; */ aspect-ratio: 1.25/1; position: absolute; content: ''; /* left: -79px; right: 79px; bottom: 49px; */ left: -12%; right: 12%; bottom: 15%; transform: translate(0, 0); display: block; background-color: #D9E1ED; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; z-index: 0;}
.men-women-smoking-wrapper { margin-top: auto; margin-bottom: 0; position: relative; width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; z-index: 1;}
.men-women-smoking-wrapper img:first-child { margin-left: 10px; width: 163px; height: 162px;}
.men-women-smoking-wrapper img:last-child { width: 167px; height: 132px;}

.cloud-screen-wrapper .cloud { position: absolute; width: 100%; z-index: 1;}
.cloud-screen-wrapper .cloud img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease;}
.cloud-hidden { opacity: 0;}
.cloud-visible { opacity: 1;}
.cloud-common-img { display: block;}
.cloud-mob-img { display: none;}
.cloud-ultrafine { max-width: 278px; aspect-ratio: 1.72/1; 
    /* left: 23px; top: 52px;  */
    left: 3%; top: 16%; transform: translate(0, 0); display: block; z-index: 1;
}
.cloud-nicotin { max-width: 166px; aspect-ratio: 1.711/1; 
    /* top: 141px; left: 221px; */
    top: 43%; left: 34%; transform: translate(0, 0); display: block; z-index: 1;
}
.cloud-cancer { max-width: 188px; aspect-ratio: 1.711/1; left: unset; 
    /* top: 16px; right: 152px; */
    top: 4%; right: 22%; transform: translate(0, 0); display: block; z-index: 1;
}
.cloud-heavy-metals { max-width: 213px; aspect-ratio: 1.59/1; left: unset; 
    /* top: 118px; right: 36px; */
    top: 35%; right: 6%; transform: translate(0, 0); display: block; z-index: 1;
}

/* Program 3 Screen 2 */
ul li::marker { color: #1865FC; width: 8px; height: 8px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;}
ul { margin: 0; margin-top: 16px; padding-left: 28px;}
ul li { font-size: 16px; line-height: 26px; font-weight: 500; color: var(--Neutral-60);}
ul li:not(:last-child) { padding-bottom: 12px;}

/* Program 3 Screen 3 - Brain Animation */
.prog-data ul.dots-ul,
#prog3screen3 ul { margin-top: 0;}
.dark-bg-radius-box { padding: 16px; background-color: #ECF0F6; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px;}
.brain-img-content-wrapper { margin-top: 24px; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 16px;}
.brain-img-wrapper { width: 100%; max-width: 50%; padding: 17px 0 0 21px; background-color: var(--Global-White); border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;}
.brain-img-wrapper img { display: block;}
.brain-content-wrapper { width: 100%; max-width: 50%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px;}
p.colored-bar-text { position: relative; padding-left: 28px;}
.colored-bar-text::before { content: ''; position: absolute; top: 9px; left: 8px; transform: translate(0, 0); width: 8px; height: 2px; display: block; background-color: var(--Neutral-60); border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px;}
.colored-title { padding-bottom: 4px; font-weight: 600 !important; color: var(--Neutral-80) !important;}
.colored-title::before { top: 9px; left: 4px; width: 16px; height: 6px;}
.colored-title.blue-bar::before { background-color: var(--Primary-Main-0);}
.colored-title.saffron-bar::before { background-color: #F29100;}

/* Program 3 Screen 4 */
#prog3screen4 ul { margin-top: 0;}

/* Program 3 Screen 5 - Youtube Video - iFrame */
.video-frame-wrapper { width: 100%; max-width: 656px; aspect-ratio: 1.777/1; background-color: #E7E7E7; border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px;}
.video-frame-wrapper video { width: 100%; height: 100%; display: block; border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px;}

/* Program 3 Screen 6 */
.harms-smoking-box { margin-top: 24px; padding-bottom: 0 !important; overflow: hidden;}
.harms-smoking-box .text-sm { color: var(--Neutral-80);}
.harms-smoking-img-wrapper { position: relative; margin-top: 16px; padding-top: 208px;}
.harms-smoking-img-wrapper::before { position: absolute; content: ''; width: 488px; aspect-ratio: 1/1; top: 16px; left: 50%; transform: translate(-50%, 0%); background-color: #D9E1ED; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; z-index: 1;}
.harms-smoking-img-wrapper img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; aspect-ratio: 2.4903; max-width: 518px; max-height: 208px; display: block; transition-duration: 0.75s; z-index: 2;}
.common-harms-smoking-img { display: block !important;}
.mob-harms-smoking-img { display: none !important;}
.harms-smoking-user-img-visible { opacity: 1; visibility: visible;}
.harms-smoking-user-img-hidden { opacity: 0; visibility: hidden;}

/* Program 3 Screen 7 - Ladder Dropdown GIF */
#prog3screen7 ul { margin-top: 0;}
.falling-from-stairs-wrapper { padding: 30px 24px; margin-top: 32px; width: fit-content; margin-inline: auto; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 12px; border: 1px solid #AEBCD7; background-color: var(--Global-White); border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; }
.falling-from-stairs-text { display: block; width: 374px; aspect-ratio: 6.67857/1;}
.falling-from-stairs { display: block; width: 141px; aspect-ratio: 1.7625/1;}

/* Program 3 Screen 8 */
.vaping-bottles-wrapper { margin-inline: auto; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 12px;}
.vaping-bottles-img { display: block; width: 254px; aspect-ratio: 1.5030/1; object-fit: cover; object-position: center center; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px;}

/* Program 3 Screen 9 */
.checkbox-title-text-p { padding-top: 24px; color: var(--Neutral-80) !important; font-weight: 600 !important;}
.checkbox-title-text-span { display: block; padding-top: 12px; color: var(--Neutral-70); font-weight: 500;}

/* Program 3 Screen 10 */
#prog3screen10 .main-point { padding-top: 24px;}
/* End of Program 3 */


/* Start of Program 4 */
#prog4screen1 .prog-detailed-content > p:first-child { padding-bottom: 16px;}

/* Range Bar */
.range-bar-wrapper      { width: 100%; position: relative;}
.range-bar              { margin: 8px 0; width: 100%; height: 8px; background-color: #ECF0F6; position: relative; border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px;}
.filled-bar             { width: 0; height: 100%; background-color: #1865FC; border-radius: 40px; border-top-right-radius: 0; border-bottom-right-radius: 0; -webkit-border-radius: 40px; -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius: 40px; -moz-border-top-right-radius: 0; -moz-border-bottom-right-radius: 0;}
.range-control-btn      { position: absolute; top: 50%; transform: translateY(-50%); width: 24px; height: 24px;}
.range-input            { width: 100%; height: 100%; position: absolute; opacity: 0; cursor: pointer; z-index: 2;}
.range-numbers          { display: flex; justify-content: space-between; padding-top: 4px;}
.range-number           { position: relative; min-width: 19px; padding-top: 8px; color: var(--Neutral-60); text-align: center;}
.range-number::before   { position: absolute; content: ""; width: 2px; height: 8px; background-color: #D9D9D9; top: 0; left: 50%; transform: translate(-50%, 0);}

.radio-buttons-wrapper              { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px 16px;}
.radio-button                       { display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; max-width: calc(33.33% - 10.67px); gap: 8px;}
.radio-button label                 { font-size: 16px; line-height: 26px; font-weight: 500; color: var(--Neutral-80);}
.radio-button input[type="radio"]   { padding: 0; margin: 4px; width: 16px; height: 16px; min-width: 16px;}
.radio-button:last-child            { max-width: unset;}



/* Basic styles for the accordion */
.accordion-container:has(~.accordion-pro-title .prog-data-title) ~ .accordion-pro-title .prog-data-title { display: none; }

.accordion-header { cursor: pointer; padding: 10px 34px 10px 0px; font-size: 22px; line-height: 26px; font-weight: 600; color: var(--Neutral-90); border-bottom: 1px solid var(--Neutral-50); position: relative; width: 100%; background: transparent; text-align: left; }
.accordion-header::after { content: ''; transform-origin: center; position: absolute; background: url('./assets/images/arrow-down.svg') no-repeat center center / 24px; width: 24px; height: 24px; transition: all 0.5s; -webkit-transition: all 0.5s; top: 12px; right: 0px; transform: rotate(180deg); -webkit-transform: rotate(180deg); }
.accordion-header:has(~.accordion-content.active)::after { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
.accordion-content { display: none; }
.accordion-content .redirect_program { cursor: pointer; position: relative; padding: 9px 20px 9px 9px; width: 100%; font-size: 16px; line-height: 26px; font-weight: 600; color: var(--Neutral-70); text-align: left; background: transparent; }
.accordion-content .redirect_program::after { content: ''; position: absolute; top: 11px; right: 0px; background: url('./assets/images/lock.svg') no-repeat center center /18px; width:18px; height:18px; }
.accordion-content .redirect_program.unlocked-icon::after { content: ''; position: absolute; top: 11px; right: 0px; background: url('./assets/images/unlock.svg') no-repeat center center /18px; width:18px; height:18px; }

/* Last Response screen show date icon */
.quit-date {display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center;  }
.quit-date img { display: inline-block; width: 24px; margin-left: 6px; }
.quit-date > p { padding: 0px 8px 0px 0px; }
/* Last Response screen show date icon */

/*  Page ID  3204 */
.program-id-3204 > p { color: var(--red-10); }
.program-id-3204 .radio-buttons-wrapper { flex-direction: column; }
.program-id-3204 .radio-buttons-wrapper .radio-button { max-width: 100%; background: var(--Neutral-10); padding: 8px; border-radius: 8px; }
.program-id-3204 .radio-buttons-wrapper .radio-button.green-status { background: var(--green-20); }

/*END Page ID 3204*/

.quiz-ans { margin-top: 24px; display: flex; display: -webkit-flex; align-items: flex-start; -webkit-align-items:flex-start; gap: 24px; }
.quiz-ans img {width: 94px;}
.quiz-ans p { position: relative; background: var(--Neutral-20); padding: 16px; border-radius: 16px; }
.quiz-ans p::after { content: ''; position: absolute; width: 0; height: 0; border-top: 20px solid transparent; border-right: 30px solid var(--Neutral-20); border-bottom: 5px solid transparent; left: -30px; top: 50%; transform: translateY(0%); -webkit-transform: translateY(0%); }
.quiz-ans .red-txt { color: var(--red-10); }
.quiz-ans .green-txt { color: var(--green-10); }
 


/* Page ID 3052 */

.program-id-3205 > p { color: var(--red-10); }
.program-id-3205 .radio-buttons-wrapper { flex-direction: column; }
.program-id-3205 .radio-buttons-wrapper .radio-button { max-width: 100%; background: var(--Neutral-10); padding: 8px; border-radius: 8px; }

/* END of Page ID 3052 */



/* Page ID 3206 */

.program-id-3206 > p { color: var(--red-10); }
.program-id-3206 .radio-buttons-wrapper { flex-direction: column; }
.program-id-3206 .radio-buttons-wrapper .radio-button { max-width: 100%; background: var(--Neutral-10); padding: 8px; border-radius: 8px; }
.radio-buttons-wrapper .radio-button.green-status { background: var(--green-20); }
.radio-buttons-wrapper .radio-button.red-status { background: #FAF5F5; } 
.radio-button .status-holder { position: relative; }
.radio-button .status-holder::after { content: ''; pointer-events: none; display: none; }
.radio-button .status-holder:has(input[type="radio"]:checked)::after { display: block; }
.radio-button.green-status .status-holder::after { content: ''; position: absolute; background: url('./assets/images/green-status-check.svg') no-repeat center center / 26px; width: 26px; height: 26px; left: -1px; top: -1px; }
.radio-button.red-status .status-holder::after { content: ''; position: absolute; background: url('./assets/images/red-status-check.svg') no-repeat center center / 26px; width: 26px; height: 26px; left: -1px; top: -1px; }

/* END of Page ID 3053 */


/* Page ID 3054*/
#prog3screen2-program-3207 .prog-data-title { margin-bottom: 16px; }
#prog3screen2-program-3207 p { color: var(--Neutral-60); font-weight: 500; }
#prog3screen2-program-3207 ol { padding-left: 20px; }
#prog3screen2-program-3207 ol li { margin-bottom: 12px; color: var(--Neutral-60); font-weight: 500; }
#prog3screen2-program-3207 ol li:last-child { margin-bottom: 0px; }
#prog3screen2-program-3207 ol li::marker { color: var(--Primary-Main-0); font-weight: 600; }
#prog3screen2-program-3207 ~ .main-point { margin: 24px 0px 16px 0px; }
#prog3screen2-program-3207 ~ .date-picker { position: relative; }
#prog3screen2-program-3207 ~ .date-picker legend { background: var(--Global-White); padding: 2px; font-size: 12px; line-height: 16px; color: var(--Neutral-60); font-weight: 600; margin: -10px 15px; width: fit-content; position: relative; z-index: 1; }
/* END of Page ID 3054 */


/* End of Program 4 Screen 1 */

/* Program 4 Screen 2 - Charts */
.flex-chart-wrapper     { display: flex; justify-content: start; align-items: flex-start; gap: 24px;}
.chart-content-wrapper                   { width: 100%; max-width: 360px;}
.chart-content-wrapper > p:first-of-type { color: var(--Neutral-80) !important;}
.chart-content-wrapper .colored-bar-text { padding-left: 32px; display: flex; justify-content: space-between; align-items: center;}
.chart-content-wrapper .colored-bar-text { padding-bottom: 0; margin-bottom: 8px;}
.chart-content-wrapper .colored-bar-text:last-child { margin-bottom: 0 !important;}
.chart-content-wrapper .colored-bar-text .chart-label { color: var(--Neutral-60); font-weight: 500;}
#prog4screen3 .colored-bar-text::before { top: 11px; left: 7px;}
.chart-canvas-wrapper { position: relative; padding: 26px; width: 100%; max-width: 228px; aspect-ratio: 1/1; background-color: var(--Global-White); border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;}
.vapingDoughnutChart canvas { position: absolute; width: 100%; height: 100%; max-width: 100%; max-height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%);}
/* Doughnut Chart */
#vapingDoughnutBackgroundChart { z-index: 1;}
#vapingDoughnutValueChart { z-index: 2;}
/* Polar Chart */
#vapingPolarChart { width: 100%; height: auto;}
/* Polar Chart bar Colors */
.colored-title.medium-slate-blue-bar::before { background-color: #7275F2;}
.colored-title.light-slate-blue-bar::before { background-color: #AF64F8;}
.colored-title.energy-yellow-bar::before { background-color: #F7D347;}
.colored-title.french-rose-bar::before { background-color:#EE509E;}
.colored-title.mountain-meadow-bar::before { background-color: #14B8A6;}
/* End of Program 4 Screen 2 */

/* Program 4 Screen 3 - Bar Chart */
.p4s4-inner-content-box:first-of-type { margin-top: 0;}
.p4s4-inner-content-box { display: flex; flex-direction: column; align-items: flex-start; gap: 16px;}
.right-point { display: flex; justify-content: flex-start; align-items: flex-start; gap: 8px; font-size: 0;}
.right-point p { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--Primary-Shade-60);}
.main-point-subtitle-wrapper > p { padding-top: 6px;}
.p4s4-inner-content-box ul { margin-top: 8px;}
.p4s4-inner-content-box ul li:not(:last-child) { padding-bottom: 8px;}
.right-point-ul-box ul { margin-top: 0;}
.right-point-ul-box ul li:not(:last-child) { padding-bottom: 6px;}

.main-point-chart-wrapper { width: 100%;}
.barChart-wrapper { padding: 16px !important; width: 100%; max-width: 473px !important; aspect-ratio: 2.09/1 !important;}
#barChart { width: 100%; height: 100%;}
/* Program 4 Screen 3 - Bar Chart */
/* End of Program 4 */


/* Program 5 */
/* Program 5 Screen 2 */
#prog5screen2 .adultSmokedPerDayWrapper { flex-direction: column !important;}
#prog5screen2 .adultSmokedPerDayWrapper .radio-button { max-width: 100% !important;}

/* Program 5 Screen 4 */
.common-pt-24 { padding-top: 24px;}
/* End of Program 5 */

/* Program 7 */
/* Program 7 Screen 1 */
#prog7screen1 ul  { margin-top: 0 !important;}
#prog7screen1 ul li:not(:last-child) { padding-bottom: 8px !important;}

/* Program 7 Screen 2 */
/* ol  { margin: 0; padding-left: 22px;}
ol li  { padding-left: 6px; font-size: 16px; line-height: 26px; font-weight: 500; color: var(--Neutral-60);}
ol li:not(:last-child) { padding-bottom: 8px ;}
ol li::marker { color: var(--Neutral-80); font-weight: 600;} */
.num-list-wrapper   { display: flex; flex-direction: column; justify-content: start; align-items: flex-start; gap: 8px;}
.num-list           { display: flex; flex-direction: row; justify-content: start; align-items: flex-start; gap: 4px; font-size: 16px; line-height: 26px; font-weight: 500; color: var(--Neutral-60);}
.num-list .num      { padding-inline: 6px; color: var(--Neutral-80); font-weight: 600;}

/* End of Program 7 */

/* Program 8 */
/* Program 8 Screen 1 - Range Bar with Data */
.trigger-range-bar-wrapper { display: flex; gap: 12px; align-items: center;}
.trigger-progress-bar { flex-grow: 1; height: 8px; background-color: #ECF0F6; position: relative; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px;}
.trigger-progress-bar-fill { height: 100%; background-color: var(--Primary-Main-0); width: 0%; position: absolute; border-radius: inherit; border-top-right-radius: unset; border-bottom-right-radius: unset; -webkit-border-radius: inherit; -webkit-border-top-right-radius: unset; -webkit-border-bottom-right-radius: unset; -moz-border-radius: inherit; -moz-border-top-right-radius: unset; -moz-border-bottom-right-radius: unset;}
.trigger-progress-divider { position: absolute; height: 100%; width: 1px; background-color: #C5C9CF;}
.trigger-progress-val-wrapper { color: var(--Neutral-60);}
#triggerProgressVal { color: var(--Neutral-80);}
#prog8screen1 .checkbox-title-text-p { padding-top: 12px !important;}

/* Program 8 Screen 5 - Celebrate Achievement */
.achievement-img { margin-inline: auto; display: block; width: 100%; max-width: 460px; aspect-ratio: 2.5414/1; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px;}

/* Program 8 Screen 8 */
#prog8screen8 ul li:not(:last-child) { padding-bottom: 8px !important;}
/* End of Program 8 */

/* Program 9 */
/* Program 9 Screen 1 */
.goodluck-img-wrapper { margin-top: 32px; padding-block: 16px; width: 274px; margin-inline: auto; text-align: center; background-color: #ECF0F6; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px;}
.goodluck-img-wrapper img { width: 157px; aspect-ratio: 1.30/1;}

/* Program 9 Screen 2 */
.summary-title-list-wrapper:not(:last-child) { padding-bottom: 16px;}
.cmn-dark-p { font-weight: 600 !important; color: var(--Neutral-80) !important;}
.summary-title-list-wrapper ul { margin-top: 12px;}
#prog9screen2 ul li:not(:last-child) { padding-bottom: 8px !important;}
/* End of Program 9 */
/* End of Program Right Side Data */
/* ===============================End of Program Page ============================= */



/* =================================== 404 Page ================================ */
.page-404-main .logo { position: relative;}
.page-404-main .sec-404 .container { height: 100%;}
.data-wrapper-404                       { width: 100%; height: 75vh; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.data-wrapper-404 *                     { text-align: center;}
.data-wrapper-404 h2                    { padding-block: 32px; color: var(--Global-Black);}
.data-wrapper-404 .image-wrapper-404 img{ max-width: clamp(275px, 30vw, 512px); width: 100%;}

/* =============================== End of 404 Page ============================= */



/*=== New CSS ===*/
p:empty { display: none; }
.hyperaudio-transcript{border: 0 !important; padding: 0 !important;}
.hyperaudio-transcript + div > a { display: none !important; }
.hyperaudio-transcript article section{ display: flex; flex-wrap: wrap; gap: 0 4px; }
.narrator-content #video-holder{display: none;}
.hyperaudio-transcript article section .unread span{display: inline-block !important;}
.h-100{height: 100%;}
.prog-detailed-content .video-frame-wrapper{margin-top: 8px;}
.prog-data .prog-detailed-content .vaping-bottles-wrapper + .dots-ul,
.prog-data .prog-detailed-content p + .dots-ul{margin-top: 16px;}
.vaping-bottles-wrapper br,
.harms-smoking-img-wrapper br,
.falling-from-stairs-wrapper br{display: none;}
.program-form-content{ position: relative; padding: 24px; padding-bottom: 18px; height: calc(100% - 69px); /* max-height: 540px; */ overflow-y: auto; }
#prog2screen2 .prog-data-title{border: 0; padding: 0;}
#prog2screen2 .prog-detailed-content{padding-top: 24px;}
.page-id-1129 #prog2screen2 .prog-detailed-content,
#prog2screen2-program-1847 .prog-detailed-content {padding: 0; margin: 0;}
.page-id-1129 #prog2screen2 .prog-detailed-content p,
#prog2screen2-program-1844 .prog-detailed-content > p,
#prog2screen2-program-1847 .prog-data-title h5,
#prog2screen2-program-2013 .prog-data-title h5 { color: var(--Neutral-80) !important; font-weight: 600 !important; line-height: 26px; font-size: 16px; }
#prog2screen2 .prog-detailed-content .main-point,
#prog2screen2-program-1844 .prog-detailed-content .main-point,
#prog2screen2-program-1847 .prog-detailed-content .main-point { padding-top: 12px; display: block;}
#prog2screen2 .prog-detailed-content .main-point .point-icon svg,
#prog2screen2-program-1844 .prog-detailed-content .main-point .point-icon svg,
#prog2screen2-program-1847 .prog-detailed-content .main-point .point-icon svg,
#prog2screen2-program-2013 .prog-detailed-content .main-point .point-icon svg  {display: none;}
#prog2screen2 .prog-detailed-content p,
#prog2screen2 .prog-detailed-content .main-point p,
#prog2screen2-program-1844 .prog-detailed-content .main-point p,
#prog2screen2-program-1847 .prog-detailed-content p, 
#prog2screen2-program-1847 .prog-detailed-content .main-point p,
#prog2screen2-program-2013 .prog-detailed-content .main-point p { color: var(--Neutral-70) !important; font-weight: 500 !important; font-size: 14px; line-height: 22px; }
#prog2screen2 .prog-data-title h5{
    padding-top: 24px;
    font-size: 16px;
    line-height: 26px;
    color: var(--Neutral-80) !important;
    font-weight: 600 !important;        
}
#prog2screen2-program-1844 .prog-detailed-content > p,
#prog2screen2-program-1847 .prog-detailed-content > p,
#prog2screen2-program-1847 .prog-data-title h5 { padding-top: 7px;}
#prog2screen2-program-1847 .prog-data-title,
#prog2screen1-program-2002 .prog-data-title,
#prog2screen2-program-2013 .prog-data-title,
#prog2screen1-program-2036 .prog-data-title { border: none;}
#prog2screen1-program-2002 .prog-data-title,
#prog2screen1-program-2036 .prog-data-title { padding: 0;}
#prog4screen1-program-1858 .prog-detailed-content > p:first-child,
#prog4screen1-program-1875 .prog-detailed-content > p:first-child,
.point-radio-wrapper .prog-detailed-content > p:first-child,
#prog3screen2-program-2057 .prog-detailed-content p:first-child { padding-bottom: 16px;}
#prog2screen2-program-2013 .prog-detailed-content,
#prog2screen2-program-2013 .prog-detailed-content .main-point { padding: 0; display: block;}
.error { padding-top: 5px; font-size: 12px; line-height: 19px;}




/* ================================= Responsive CSS ================================= */
@media (min-width: 1366px) {
    .container { max-width: calc(1235px + 32px);}

    /* Program 4 Screen 1 */
    .radio-button:last-child { max-width: calc(66.66% - 16px);}
    /* End of Program 4 Screen 1 */

}

@media (min-width: 1200px) and (max-width: 1365px) {
    .container { max-width: 1140px;}

    /* Typography */
    h1 { font-size: 50px; line-height: 60px;} 
    h2 { font-size: 42px; line-height: 50px;} 
    h3 { font-size: 34px; line-height: 40px;} 
    h4 { font-size: 26px; line-height: 30px;} 
    h5 { font-size: 22px; line-height: 26px;} 
    .h5-sm { font-size: 19px; line-height: 24px;} 
    h6 { font-size: 18px; line-height: 22px;} 

    p           { font-size: 16px; line-height: 24px;} 
    .text-lg    { font-size: 18px; line-height: 28px;} 
    .text-sm    { font-size: 14px; line-height: 22px;}
    .text-xs    { font-size: 12px; line-height: 16px;}

    .mt-24 { margin-top: 22px;}
    .mb-24 { margin-bottom: 22px;}
    
    .pt-24 { padding-top: 22px;}
    .pb-24 { padding-bottom: 22px;}
    


    /* =============================== Dashboard Data ============================= */
    /* Gender PopUp */
    .gender-popup { padding: 26px;}
    .radio-content-wrapper { padding-block: 22px; gap: 10px;}
    .gender-popup-content .radio-wrapper { padding: 14px;}
    .gender-popup-content .radio-wrapper label { padding-left: 30px; font-size: 16px; line-height: 24px;}
    .gender-popup-content input[type="radio"] { width: 22px; height: 22px; left: 14px;}
    /* End of Gender PopUp */


    .header-container { padding-block: 20px 28px;}
    .dashboard-main { padding-block: 25px;}

    .dashboard-card { padding: 22px; }
    #dashboardProgressDoughnutChart { width: 200px; height: 200px;}
    .chart-states-text { gap: 6px;}
    .chart-label-dot { width: 10px; height: 10px;}
    .time-spent-card { padding-top: 50px;}
    .total-minutes { font-size: 70px; line-height: 80px;}
    .time-spent-card .bg-clock { width: 132px; height: 132px;}
    
    .prog-heading-row { padding-bottom: 20px;}
    .dashboard-programs-wrapper { padding: 24px;}
    .program-table-wrapper { padding-top: 24px;}
    .prog-row { padding-bottom: 18px;}

    /* =============================== End of Dashboard Data ============================= */

    /* ================================= Program Page ================================= */
    .prog-container { padding-block: 20px;}
    .programs-row { gap: 24px;}
    .prog-left { width: calc(100% - 12px); max-width: 40.6%;}
    .prog-right { width: calc(100% - 12px); max-width: 59.4%;}

    /* *************** Program Left Side Data *************** */
    /* ====== program title / prog / Exit Button ====== */
    .prog-title-icon-wrapper { padding: 16px 16px 20px; gap: 20px;}
    .prog-name-num-wrapper { max-width: 100%;}
    .prog-num { padding-bottom: 6px; line-height: 24px;}
    .prog-name { line-height: 32px;}
    .prog-icon { flex-basis: unset; width: 40%; max-width: 110px;}
    .prog-progress-wrapper { padding-left: 16px; padding-bottom: 16px;}
    .program-completed-progress { max-width: 190px;}

    /* Save and Exit Button */
    .prog-exit-btn { padding-left: 16px;}
    .prog-exit-btn .btn { box-shadow: 0px 0px 0px 14px #F6F9FE; -webkit-box-shadow: 0px 0px 0px 14px #F6F9FE; -moz-box-shadow: 0px 0px 0px 14px #F6F9FE;}
    .prog-exit-btn::before { width: 40px; height: 40px; right: calc(100% - 2px); border-radius: 0 0 24px 0px; -webkit-border-radius: 0 0 24px 0px; -moz-border-radius: 0 0 24px 0px; z-index: 1; box-shadow: 16px 16px 0px 0px #F6F9FE; -webkit-box-shadow: 16px 16px 0px 0px #F6F9FE; -moz-box-shadow: 16px 16px 0px 0px #F6F9FE;}
    /* ====== End of program title / prog / Exit Button ====== */

    /* ====== Program Narrator ====== */
    .prog-narrator { margin-top: 20px; padding: 16px;}
    .narrator-avatar { max-width: 200px; bottom: -16px; right: 0; align-self: end;}
    .narrator-content-wrapper { padding: 14px; max-width: 55%;}
    .narrator-content { max-width: 100%;}
    /* .narrator-content p  { font-size: 19px; line-height: 24px; gap: 4px;} */
    .narrator-content p  { font-size: 19px; line-height: 24px; padding-bottom: 4px;}
    .narrator-control-wrapper { gap: 6px;}
    .narrator-control { padding: 8px; width: 36px; height: 36px;}
    /* ====== End of Program Narrator ====== */
    /* *************** End of Program Left Side Data *************** */

    /* *************** Program Right Side Data *************** */
    .prog-data { /*padding: 20px; padding-bottom: 18px; height: calc(100% - 69px);*/ /* max-height: 540px; */}

    /*=== New CSS -Start ===*/
    .program-form-content{padding: 20px; padding-bottom: 18px; height: calc(100% - 69px);}
    /*=== New CSS -End ===*/


    .prog-data-title { padding: 10px;}
    .prog-detailed-content p { line-height: 24px;} /* LINE HEIGHT CHANGED */

    .prog-navigation { padding: 16px 24px; gap: 12px;}
    .prog-read-more-btn { top: -41px;}
    .btn-read { padding: 8px; gap: 8px;}
    .go-back-btn { padding-right: 14px;}
    .go-back-btn::after { max-height: 21px;}
    .save-exit-btn { padding-left: 14px;}
    .next-prev-arrow-btn { gap: 8px;}
    .next-prev-arrow-btn a { width: 36px; height: 36px;}

    /* Program 2 */
    /* Screen 1 */
    .main-point { gap: 10px; }
    .quote-icon svg { width: 50px;}

    /* Checkbox */
    .checkbox-label { font-size: 16px; line-height: 24px;}
    .checkbox-label input { top: 4px;}
    .checkmark { top: 4px;}

    /* Program 3 */
    .cloud-screen-wrapper::after { width: 700px; left: -8%; right: 0%;}
    .cloud-ultrafine { max-width: 240px; top: 22%; left: 5%;}
    .cloud-nicotin { max-width: 146px; top: 46%; left: 35%;}
    .cloud-cancer { max-width: 160px; top: 6%; right: 25%;}
    .cloud-heavy-metals { max-width: 200px; top: 37%;right: 7%;}

    /* Program 3 Screen 2 */
    ul li { font-size: 16px; line-height: 24px;}

    /* Program 3 Screen 7 - Ladder Dropdown GIF */
    .falling-from-stairs-wrapper { padding: 26px 22px; margin-top: 30px; gap: 12px;}
    .falling-from-stairs-text { width: 350px;}
    .falling-from-stairs { width: 134px;}

    /* Program 3 Screen 8 */
    .vaping-bottles-img { width: 234px;}

    /* Program 3 Screen 9 */
    .checkbox-title-text-p { padding-top: 22px;}

    /* Program 3 Screen 10 */
    #prog3screen10 .main-point { padding-top: 22px;}

    /* Program 4 Screen 1 */
    .radio-button:last-child { max-width: calc(50% - 6px);}
    .radio-buttons-wrapper              { gap: 12px}
    .radio-button                       { max-width: calc(33.33% - 8px); gap: 6px;}
    .radio-button label                 { line-height: 24px;}
    /* End of Program 4 Screen 1 */

    /* Program 4 Screen 2 - Charts */
    .flex-chart-wrapper     { justify-content: space-between; gap: 20px;}
    .chart-content-wrapper .colored-bar-text { padding-left: 30px;}
    .chart-content-wrapper .colored-bar-text { margin-bottom: 8px;}
    .chart-canvas-wrapper { padding: 20px; max-width: 208px;}
    #prog4screen3 .colored-bar-text::before { top: 9px;}
    /* End of Program 4 Screen 2 - Charts */

    /* Program 5 Screen 4 */
    .common-pt-24 { padding-top: 22px;}

    /* Program 7 Screen 2 */
    .num-list-wrapper   { gap: 8px;}
    .num-list           { gap: 4px; font-size: 16px; line-height: 24px;}
    .num-list .num      { padding-inline: 6px;}

    /* Program 9 */
    /* Program 9 Screen 1 */
    .goodluck-img-wrapper { margin-top: 30px;}

    /* *************** End of Program Right Side Data *************** */
    /* ===============================End of Program Page ============================= */

    /* =================================== 404 Page ================================ */
    .data-wrapper-404 h2 { padding-block: 28px;}
    /* =============================== End of 404 Page ============================= */



}

@media (min-width: 992px) and (max-width: 1199px) {
    .container { max-width: 960px;}

    /* Typography */
    h1 { font-size: 46px; line-height: 56px;} 
    h2 { font-size: 38px; line-height: 46px;} 
    h3 { font-size: 32px; line-height: 36px;} 
    h4 { font-size: 25px; line-height: 28px;} 
    h5 { font-size: 21px; line-height: 24px;} 
    .h5-sm { font-size: 18px; line-height: 22px;} 
    h6 { font-size: 18px; line-height: 21px;} 

    p           { font-size: 16px; line-height: 22px;} 
    .text-lg    { font-size: 18px; line-height: 27px;} 
    .text-sm    { font-size: 14px; line-height: 21px;}
    .text-xs    { font-size: 12px; line-height: 16px;}

    .mt-24 { margin-top: 20px;}
    .mb-24 { margin-bottom: 20px;}
    
    .pt-24 { padding-top: 20px;}
    .pb-24 { padding-bottom: 20px;}
    
    /* Gender PopUp */
    .gender-popup { padding: 24px;}
    .radio-content-wrapper { padding-block: 20px; gap: 10px;}
    .gender-popup-content .radio-wrapper { padding: 14px;}
    .gender-popup-content .radio-wrapper label { padding-left: 30px; font-size: 15px; line-height: 22px;}
    .gender-popup-content input[type="radio"] { width: 22px; height: 22px; left: 14px;}
    /* End of Gender PopUp */

    .header-container { padding-block: 20px 28px;}
    .dashboard-main { padding-block: 25px;}

    .dashboard-cards-wrapper { gap: 16px;}
    .dashboard-card { padding: 20px; width: calc(33.33% - 10.665px);}
    #dashboardProgressDoughnutChart { width: 190px; height: 190px;}
    .chart-states-wrapper { gap: 4px;}
    .chart-states-text { gap: 4px;}
    .chart-label-dot { width: 10px; height: 10px;}
    .time-spent-card { padding-top: 60px;}
    .total-minutes { font-size: 56px;}
    .time-spent-card .bg-clock { width: 125px; height: 125px;}
    .progress-card h5 { font-size: 18px; line-height: 30px;}
    .prog-heading-row { padding-bottom: 18px;}
    .dashboard-programs-wrapper { padding: 22px;}
    .program-table-wrapper { padding-top: 24px;}
    .prog-row { padding-bottom: 18px;}



    /* ================================= Program Page ================================= */
    .prog-container { padding-block: 16px;}
    .programs-row { gap: 16px;}
    .prog-left { width: 100%; max-width: calc(45% - 8px);}
    .prog-right { width: 100%; max-width: calc(55% - 8px);}

    /* *************** Program Left Side Data *************** */
    /* ====== program title / prog / Exit Button ====== */
    .prog-title-icon-wrapper { padding: 14px 14px 16px; gap: 12px;}
    .prog-name-num-wrapper { max-width: 100%;}
    .prog-num { padding-bottom: 4px; line-height: 22px;}
    .prog-name { line-height: 28px;}
    .prog-icon { flex-basis: unset; width: 40%; max-width: 86px;}
    .prog-progress-wrapper { padding-left: 14px; padding-bottom: 14px;}
    .program-completed-progress { max-width: 160px;}

    /* Save and Exit Button */
    .prog-exit-btn { padding-left: 16px;}
    .prog-exit-btn .btn { padding: 10px 20px; box-shadow: 0px 0px 0px 14px #F6F9FE; -webkit-box-shadow: 0px 0px 0px 14px #F6F9FE; -moz-box-shadow: 0px 0px 0px 14px #F6F9FE;}
    .prog-exit-btn::before { width: 40px; height: 40px; right: calc(100% - 2px); border-radius: 0 0 24px 0px; -webkit-border-radius: 0 0 24px 0px; -moz-border-radius: 0 0 24px 0px; z-index: 1; box-shadow: 16px 16px 0px 0px #F6F9FE; -webkit-box-shadow: 16px 16px 0px 0px #F6F9FE; -moz-box-shadow: 16px 16px 0px 0px #F6F9FE;}
    /* ====== End of program title / prog / Exit Button ====== */

    /* ====== Program Narrator ====== */
    .prog-narrator { margin-top: 20px; padding: 16px;}
    .narrator-avatar { max-width: 40%; bottom: -16px; right: 0; align-self: end;}
    .narrator-content-wrapper { padding: 14px; max-width: 60%;}
    .narrator-content { max-width: 100%;}
    /* .narrator-content p { font-size: 18px; line-height: 22px; gap: 4px;} */
    .narrator-content p { font-size: 18px; line-height: 22px; padding-bottom: 4px;}
    .narrator-control-wrapper { gap: 8px;}
    .narrator-control { padding: 6px; width: 36px; height: 36px;}
    /* ====== End of Program Narrator ====== */
    /* *************** End of Program Left Side Data *************** */

    /* *************** Program Right Side Data *************** */
    /* .prog-data { padding: 20px; padding-bottom: 18px; height: calc(100% - 69px); } */

    /*=== New CSS -Start ===*/
    .program-form-content{padding: 20px; padding-bottom: 18px; height: calc(100% - 69px);}
    /*=== New CSS -End ===*/

    .prog-data-title { padding: 10px 10px 10px 0;}
    .prog-detailed-content p { line-height: 22px;} /* LINE HEIGHT CHANGED */

    .prog-navigation { padding: 12px 20px; gap: 10px;}
    .prog-read-more-btn { top: -41px;}
    .btn-read { padding: 8px; gap: 8px;}
    .back-save-btn-wrapper a { font-size: 16px; line-height: 26px;}
    .go-back-btn { padding-right: 12px;}
    .go-back-btn::after { max-height: 21px;}
    .save-exit-btn { padding-left: 12px;}
    .next-prev-arrow-btn { gap: 8px;}
    .next-prev-arrow-btn a { width: 36px; height: 36px;}

    /* Program 2 */
    /* Screen 1 */
    .main-point { gap: 10px;}
    .quote-icon svg { width: 46px;}

    /* Checkbox */
    .checkbox-label input { top: 5px;}
    .checkmark { top: 5px;}

    /* Program 3 */
    .cloud-screen-wrapper { min-height: 300px; max-height: 300px;}
    .men-women-smoking-wrapper img:first-child { width: 143px; height: 142px;}
    .men-women-smoking-wrapper img:last-child { width: 147px; height: 122px;}
    .cloud-screen-wrapper::after { width: 600px; left: -14%; right: 0%;}
    .cloud-ultrafine { max-width: 220px; top: 25%; left: 4%;}
    .cloud-nicotin { max-width: 126px; top: 54%; left: 32%;}
    .cloud-cancer { max-width: 140px; top: 6%; right: 24%;}
    .cloud-heavy-metals { max-width: 180px; top: 37%; right: 6%;}

    /* Program 3 Screen 6 */
    .harms-smoking-box { margin-top: 20px;}
    .harms-smoking-img-wrapper { margin-top: 16px; padding-top: 174px;}

    /* Program 3 Screen 7 - Ladder Dropdown GIF */
    .falling-from-stairs-wrapper { padding: 24px 20px; margin-top: 26px; gap: 12px;}
    .falling-from-stairs-text { width: 270px;}
    .falling-from-stairs { width: 114px;}

    /* Program 3 Screen 8 */
    .vaping-bottles-img { width: 200px;}

    /* Program 3 Screen 9 */
    .checkbox-title-text-p { padding-top: 20px;}

    /* Program 3 Screen 10 */
    #prog3screen10 .main-point { padding-top: 20px;}

    /* Program 4 Screen 1 */
    .radio-buttons-wrapper              { gap: 12px}
    .radio-button                       { max-width: calc(50% - 6px); gap: 6px;}
    .radio-button label                 { line-height: 22px;}
    /* End of Program 4 Screen 1 */

    /* Program 4 Screen 2 - Charts */
    .flex-chart-wrapper     { flex-direction: column; justify-content: space-between; gap: 16px;}
    .chart-content-wrapper                   { max-width: 100%;}
    .chart-content-wrapper .colored-bar-text { padding-left: 26px;}
    .chart-content-wrapper .colored-bar-text  { margin-bottom: 4px;}
    .chart-canvas-wrapper { padding: 16px; max-width: 190px; align-self: center;}
    #prog4screen3 .colored-bar-text::before { top: 8px; left: 5px;}
    /* End of Program 4 Screen 2 - Charts */

    /* Program 4 Screen 3 - Bar Chart */
    .right-point p { font-size: 18px; line-height: 27px;}
    /* End of Program 4 Screen 3 - Bar Chart */

    /* Program 5 Screen 4 */
    .common-pt-24 { padding-top: 20px;}

    /* Program 7 Screen 2 */
    /* ol li  { line-height: 22px;} */
    .num-list-wrapper   { gap: 8px;}
    .num-list           { gap: 4px; font-size: 16px; line-height: 22px;}
    .num-list .num      { padding-inline: 6px;}
    
    /* Program 9 */
    /* Program 9 Screen 1 */
    .goodluck-img-wrapper { margin-top: 26px;}

    /* *************** End of Program Right Side Data *************** */
    /* ===============================End of Program Page ============================= */

    /* =================================== 404 Page ================================ */
    .data-wrapper-404 h2 { padding-block: 24px;}
    /* =============================== End of 404 Page ============================= */




}

@media (max-width: 991px){
    .container { max-width: 960px;}

    /* Typography */
    h1 { font-size: 40px; line-height: 48px;} 
    h2 { font-size: 34px; line-height: 40px;} 
    h3 { font-size: 28px; line-height: 30px;} 
    h4 { font-size: 24px; line-height: 26px;} 
    h5 { font-size: 20px; line-height: 24px;} 
    .h5-sm { font-size: 17px; line-height: 22px;}
    h6 { font-size: 18px; line-height: 20px;} 

    p           { font-size: 16px; line-height: 20px;} 
    .text-lg    { font-size: 18px; line-height: 24px;} 
    .text-sm    { font-size: 14px; line-height: 20px;}
    .text-xs    { font-size: 12px; line-height: 16px;}

    .mt-24 { margin-top: 16px;}
    .mb-24 { margin-bottom: 16px;}
    .mt-16 { margin-top: 12px;}
    .mb-16 { margin-bottom: 12px;}
    
    .pt-24 { padding-top: 16px;}
    .pb-24 { padding-bottom: 16px;}
    .pt-16 { padding-top: 12px;}
    .pb-16 { padding-bottom: 12px;}
    

    /* Input Fields */
    input[type=text], input[type=email], input[type=url], 
    input[type=password], input[type=search], input[type=number], 
    input[type=tel], input[type=date], input[type=month], 
    input[type=week], input[type=time], input[type=datetime],
    input[type=datetime-local], input[type=color], textarea, .input-field     { padding: 12px 14px; font-size: 16px; line-height: 22px;}
    
    ::-webkit-input-placeholder { /* WebKit browsers */
        line-height: 22px;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        line-height: 22px;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        line-height: 22px;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
        line-height: 22px;
    }
    /* End of Input Fields */

    /* Buttons */
    .btn { font-size: 16px; line-height: 22px;}
    .btn-dark { padding: 11px 22px;}
    .btn-light { padding: 9px 20px;}
    /* End of Buttons */



    /* Gender PopUp */
    .gender-popup { padding: 20px;}
    .radio-content-wrapper { padding-block: 18px; gap: 8px;}
    .gender-popup-content .radio-wrapper { padding: 14px;}
    .gender-popup-content .radio-wrapper label { padding-left: 30px; font-size: 15px; line-height: 22px;}
    .gender-popup-content input[type="radio"] { width: 22px; height: 22px; left: 14px;}
    /* End of Gender PopUp */

    /* Avatar Preview - PopUp */
    .change-avatar-popup { width: calc(100% - 32px); max-width: 720px;}
    .avatar-images-wrapper { gap: 12px;}
    /* .avatar-images-wrapper .avatar-wrap { max-width: calc(33.33% - 8px);} */
    .preview-img { max-width: 104px; max-height: 104px;}
    /* End of Avatar Preview - PopUp */

    .header-container { padding-block: 18px 26px;}
    .dashboard-main { padding-block: 24px;}

    .dashboard-user-details { justify-content: flex-start;}
    .dashboard-cards-wrapper { gap: 12px;}
    .dashboard-card { padding: 20px; width: calc(33.33% - 8px);}
    #dashboardProgressDoughnutChart { width: 175px; height: 175px;}
    .chart-states-wrapper { flex-direction: column; align-items: flex-start; gap: 4px;}
    .chart-states-text { gap: 6px;}
    .chart-label-dot { width: 8px; height: 8px;}
    .chart-states-text p { color: #667085;}
    /* .chart-value-span { display: none;} */
    .time-spent-card { padding-top: 48px;}
    .total-minutes { font-size: 48px;}
    .time-spent-card .bg-clock { width: 110px; height: 110px;}
    .progress-card h5 { font-size: 17px; line-height: 28px; font-weight: 600; text-align: center;}
    .prog-heading-row { padding-bottom: 16px;}
    .dashboard-programs-wrapper { padding: 22px;}
    .program-table-wrapper { padding-top: 22px;}
    .prog-row { padding-bottom: 16px;}


    /* ================================= Program Page ================================= */
    .prog-container { padding-block: 16px;}
    .programs-row { gap: 12px;}
    .prog-left { width: 100%; max-width: calc(45% - 6px);}
    .prog-right { width: 100%; max-width: calc(55% - 6px);}

    /* *************** Program Left Side Data *************** */
    /* ====== program title / prog / Exit Button ====== */
    .prog-title-icon-wrapper { padding: 12px 12px 14px; align-items: flex-start; gap: 8px;}
    .prog-name-num-wrapper { max-width: 100%;}
    .prog-num { padding-bottom: 4px; line-height: 20px;}
    .prog-name { line-height: 26px;}
    .prog-icon { flex-basis: unset; width: 25%; max-width: 60px;}
    .prog-progress-wrapper { padding-left: 12px; padding-bottom: 14px;}
    .program-completed-progress { max-width: 140px;}

    /* Save and Exit Button */
    .prog-exit-btn { padding-left: 16px;}
    .prog-exit-btn .btn { padding: 10px 20px; box-shadow: 0px 0px 0px 14px #F6F9FE; -webkit-box-shadow: 0px 0px 0px 14px #F6F9FE; -moz-box-shadow: 0px 0px 0px 14px #F6F9FE;}
    .prog-exit-btn::before { width: 40px; height: 40px; right: calc(100% - 2px); border-radius: 0 0 24px 0px; -webkit-border-radius: 0 0 24px 0px; -moz-border-radius: 0 0 24px 0px; z-index: 1; box-shadow: 16px 16px 0px 0px #F6F9FE; -webkit-box-shadow: 16px 16px 0px 0px #F6F9FE; -moz-box-shadow: 16px 16px 0px 0px #F6F9FE;}
    /* ====== End of program title / prog / Exit Button ====== */

    /* ====== Program Narrator ====== */
    .prog-narrator { margin-top: 16px; padding: 12px;}
    .narrator-avatar { max-width: 40%; bottom: -12px; right: 0; align-self: end;}
    .narrator-content-wrapper { padding: 12px; max-width: 60%;}
    .narrator-content { max-width: 100%;}
    /* .narrator-content p { font-size: 17px; line-height: 22px; gap: 6px;} */
    .narrator-content p { font-size: 17px; line-height: 22px; padding-bottom: 6px;}
    .narrator-control-wrapper { gap: 6px;}
    .narrator-control { padding: 4px; width: 30px; height: 30px;}
    /* ====== End of Program Narrator ====== */
    /* *************** End of Program Left Side Data *************** */

    /* *************** Program Right Side Data *************** */
    /* .prog-data { padding: 16px; padding-bottom: 16px; height: calc(100% - 61px); } */

    /*=== New CSS -Start ===*/
    .program-form-content{padding: 16px; padding-bottom: 16px; height: calc(100% - 61px);}
    /*=== New CSS -End ===*/

    .prog-data-title { padding: 8px 8px 8px 0;}
    .prog-detailed-content { padding-top: 12px;}
    .prog-detailed-content p { line-height: 20px;}

    .prog-navigation { padding: 10px 16px; gap: 8px;}
    .prog-read-more-btn { top: -41px;}
    .btn-read { padding: 8px; gap: 6px;}
    .back-save-btn-wrapper a { font-size: 16px; line-height: 20px;}
    .go-back-btn { padding-right: 8px;}
    .go-back-btn::after { max-height: 18px;}
    .save-exit-btn { padding-left: 8px;}
    .next-prev-arrow-btn { gap: 6px;}
    .next-prev-arrow-btn a,
    .next-prev-arrow-btn a svg { width: 30px; height: 30px;}

    /* Program 2 */
    /* Screen 1 */
    .main-point { gap: 8px;}
    textarea { font-size: 14px; line-height: 24px;}
    .quote-icon svg { width: 42px;}

    /* Checkbox */
    .checkbox-label { font-size: 16px; line-height: 20px;}


    /* Program 3 */
    .cloud-screen-wrapper { min-height: 375px; max-height: 375px;}
    .men-women-smoking-wrapper img:first-child { width: 153px; height: 165px;}
    .men-women-smoking-wrapper img:last-child { width: 127px; height: 102px;}
    .cloud-screen-wrapper::after { width: 600px; left: -20%; right: 0%;}
    .cloud-ultrafine { max-width: 213px; top: 34%; left: 7%;}
    .cloud-nicotin { max-width: 137px; top: 20px; left: 20px;}
    .cloud-cancer { max-width: 156px; top: 50px; right: 9px;}
    .cloud-heavy-metals { max-width: 184px; top: 53%; right: 5%;}


    /* Program 3 Screen 2 */
    ul { margin-top: 12px; padding-left: 24px;}
    ul li { font-size: 16px; line-height: 20px;}

    /* Program 3 Screen 3 - Brain Animation */
    .dark-bg-radius-box { padding: 16px; margin-top: 20px;}
    .brain-img-content-wrapper { margin-top: 20px; gap: 16px; flex-direction: column;}
    .brain-content-wrapper { max-width: 100%;}
    .brain-img-wrapper { padding: 17px 0 0 17px; max-width: 100%;}
    .brain-img-wrapper img { max-height: 171px; max-width: 278px;}
    p.colored-bar-text { padding-left: 24px;}
    .colored-title::before { width: 14px; height: 5px;}

    /* Program 3 Screen 6*/
    .harms-smoking-img-wrapper { margin-top: 12px; padding-top: 41%;}
    .harms-smoking-box .text-sm { line-height: 20px;}

    /* Program 3 Screen 7 - Ladder Dropdown GIF */
    .falling-from-stairs-wrapper { padding: 20px 16px; margin-top: 24px; gap: 10px;}
    .falling-from-stairs-text { width: 100%; max-width: 200px;}
    .falling-from-stairs { width: 100%; max-width: 124px;}

    /* Program 3 Screen 8 */
    .vaping-bottles-wrapper {gap: 10px;}
    .vaping-bottles-img { width: 175px;}

    /* Program 3 Screen 9 */
    .checkbox-title-text-p { padding-top: 20px;}

    /* Program 3 Screen 10 */
    #prog3screen10 .main-point { padding-top: 20px;}

    /* Start of Program 4 */
    #prog4screen1 .prog-detailed-content > p:first-child { padding-bottom: 12px;}

    /* Program 4 Screen 1 *
    /* Range Bar */
    .range-bar              { margin: 6px 0; height: 6px; border-radius: 32px; -webkit-border-radius: 32px; -moz-border-radius: 32px;}
    .filled-bar             { border-radius: 32px; -webkit-border-radius: 32px; -moz-border-radius: 32px;}
    .range-control-btn      { width: 20px; height: 20px;}
    .range-numbers          { padding-top: 4px;}
    .range-number           { min-width: 19px;}

    .radio-buttons-wrapper              { gap: 12px 6px;}
    .radio-button                       { max-width: calc(50% - 4px); gap: 4px;}
    .radio-button label                 { font-size: 16px; line-height: 20px;}
    /* End of Program 4 Screen 1 */





    /* Program 4 Screen 2 - Charts */
    .flex-chart-wrapper     { flex-direction: column; justify-content: space-between; gap: 12px;}
    .chart-content-wrapper                   { max-width: 100%;}
    .chart-content-wrapper .colored-bar-text { padding-left: 24px;}
    .chart-canvas-wrapper { padding: 12px; max-width: 190px; align-self: center;}
    #prog4screen3 .colored-bar-text::before { top: 7.5px; left: 5px;}
    /* End of Program 4 Screen 2 - Charts */

    /* Program 4 Screen 3 - Bar Chart */
    .p4s4-inner-content-box { gap: 12px;}
    .barChart-wrapper { padding: 12px !important; }
    .right-point p { font-size: 18px; line-height: 24px;}
    .right-point svg { width: 24px; height: 24px;}
    /* End of Program 4 Screen 3 - Bar Chart */

    /* Program 5 Screen 4 */
    .common-pt-24 { padding-top: 20px;}

    /* Program 7 */
    /* Program 7 Screen 1 */
    #prog7screen1 .dark-bg-radius-box { margin-top: 12px;}
    /* Program 7 Screen 2 */
    #prog7screen2 .dark-bg-radius-box { margin-top: 12px;}
    /* End of Program 7 */

    /* Program 7 Screen 2 */
    /* ol  { padding-left: 20px;}
    ol li  { padding-left: 4px; font-size: 16px; line-height: 20px;}
    ol li:not(:last-child) { padding-bottom: 8px;} */
    .num-list-wrapper   { gap: 8px;}
    .num-list           { gap: 4px; font-size: 16px; line-height: 20px;}
    .num-list .num      { padding-inline: 6px;}
    
    /* Program 9 */
    /* Program 9 Screen 1 */
    .goodluck-img-wrapper { margin-top: 24px;}

    /* *************** End of Program Right Side Data *************** */
    /* ===============================End of Program Page ============================= */

    /* =================================== 404 Page ================================ */
    .data-wrapper-404 h2 { padding-block: 20px;}
    /* =============================== End of 404 Page ============================= */


    .quiz-ans img {width: 74px;}
    .quiz-ans p::after { top: 30px; }


}

@media (max-width: 767px) {
    .container { max-width: 720px;}

    /* Typography */
    h1 { font-size: 38px; line-height: 44px;} 
    h2 { font-size: 32px; line-height: 36px;} 
    h3 { font-size: 26px; line-height: 28px;} 
    h4 { font-size: 22px; line-height: 24px;} 
    h5 { font-size: 18px; line-height: 24px;} 
    h6 { font-size: 17px; line-height: 20px;} 

    p           { font-size: 15px;}
    .text-lg    { font-size: 17px; line-height: 20px;} 
    .text-sm    { font-size: 13px; line-height: 18px;}
    .text-xs    { font-size: 12px; line-height: 14px;}

    .mt-8 { margin-top: 6px;}
    .mb-8 { margin-bottom: 6px;}

    .pt-8 { padding-top: 6px;}
    .pb-8 { padding-bottom: 6px;}


    /* Input Fields */
    input[type=text], input[type=email], input[type=url], 
    input[type=password], input[type=search], input[type=number], 
    input[type=tel], input[type=date], input[type=month], 
    input[type=week], input[type=time], input[type=datetime],
    input[type=datetime-local], input[type=color], textarea, .input-field     { padding: 10px 12px; font-size: 15px; line-height: 20px;}
    
    ::-webkit-input-placeholder { /* WebKit browsers */
        font-size: 15px;
        line-height: 20px;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        font-size: 15px;
        line-height: 20px;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        font-size: 15px;
        line-height: 20px;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
        font-size: 15px;
        line-height: 20px;
    }
    /* End of Input Fields */

    /* Buttons */
    .btn { font-size: 15px; line-height: 20px;}
    .btn-dark { padding: 10px 20px;}
    .btn-light { padding: 8px 18px;}
    /* End of Buttons */


    /* Avatar Preview - PopUp */
    .change-avatar-popup { width: calc(100% - 32px); max-width: 540px;}
    .preview-bg-design { height: 80px;}
    .preview-img { max-width: 94px; max-height: 94px;}
    .preview-avatar-wrap { padding-top: 40px;}
    .avatar-images-wrapper .avatar-img::after { width: 14px; height: 14px;}
    /* End of Avatar Preview - PopUp */

    /* Gender PopUp */
    .gender-popup { max-width: calc(100% - 32px); padding: 16px;}
    .radio-content-wrapper { padding-block: 16px; gap: 8px;}
    .gender-popup-content .radio-wrapper { padding: 14px;}
    .gender-popup-content .radio-wrapper label { padding-left: 26px; font-size: 14px; line-height: 20px;}
    .gender-popup-content input[type="radio"] { width: 20px; height: 20px; left: 12px;}
    /* End of Gender PopUp */

    /* Header with profile Title */
    .mob-profile-btn-wrapper { display: block;}
    .header-dropdown { margin-top: 4px;}
    .header-dropdown::before { top: -4px;}
    .common-header { display: none;}
    .dashboard-title-subtitle-profile-wrapper { padding-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px;}
    .mob-profile-btn-wrapper h6 { display: none;}
    .mob-profile-btn-wrapper .header-button { padding: 0; border: none; border-radius: unset; -webkit-border-radius: unset; -moz-border-radius: unset;}
    .mob-profile-btn-wrapper .header-button img { border-radius: 70px; -webkit-border-radius: 70px; -moz-border-radius: 70px;}
    .header-button-dropdown-wrapper:hover .header-button { background-color: transparent;}
    .dashboard-title-subtitle h4 { font-size: 24px; line-height: 28px;}

    .header-dropdown .dropdown-item { font-size: 15px; line-height: 22px;}
    .header-dropdown .dropdown-item svg { width: 20px; height: 20px;}
    /* End of Header with profile Title */


    .dashboard-main { padding-block: 16px;}
    .dashboard-data::after { height: 80%; background-color: #EBF2FD; border-radius: 24px 24px 0px 0px; -webkit-border-radius: 24px 24px 0px 0px; -moz-border-radius: 24px 24px 0px 0px;}

    /* Dashboard Cards */
    .user-deatils-card::before { display: none;}
    .dashboard-cards-wrapper { padding-bottom: 24px; flex-wrap: wrap; gap: 16px;}
    .dashboard-card { padding: 16px; width: calc(50% - 8px);}
    .chart-states-wrapper { flex-direction: row; gap: 8px;}
    .chart-states-text { gap: 6px;}
    .chart-label-dot { width: 8px; height: 8px;}
    .chart-states-text p { color: #667085;}
    .chart-value-span { display: none;}
    .user-deatils-card { flex-basis: 100%;}
    .dashboard-user-details .preview-img  { max-width: 72px; max-height: 72px;}
    .dashboard-user-details { flex-direction: row; align-items: flex-start; gap: 4px 12px;}
    .user-details { display: flex; flex-direction: column; align-items: flex-start; gap: 4px;}
    .dashboard-user-details.preview-wrapper h5 { padding: 0;}
    .dashboard-user-details.preview-wrapper p { text-align: start; line-height: 20px;}
    
    .progress-chart { padding-block: 4px 8px;}
    #dashboardProgressDoughnutChart { width: 112px; height: 112px;}
    .progress-card h5 { font-size: 16px; line-height: 24px; font-weight: 600; text-align: center;}
    .progress-card::after { display: none;}

    .total-minutes { color: #344054; font-size: 38px; font-weight: 700; line-height: 45.6px;}
    .time-spent-card { padding-top: 40px;}
    .time-spent-card h5 { max-width: 100%; font-size: 14px; line-height: 20px; font-weight: 600;}
    .time-spent-card::before,
    .time-spent-card::after { display: none;}
    .time-spent-card .bg-clock { width: 80px; height: 80px;}
    .time-spent-card .bg-text { top: 5px; left: 16px; font-size: 81.122px; line-height: 81.122px;}
 
    /* End of Dashboard Cards */

    /* Dashboard Main Data */
    .dashboard-programs-wrapper { padding: 0; width: 100%; background-color: transparent; border-radius: unset; -webkit-border-radius: unset; -moz-border-radius: unset;}
    .dashboard-programs-wrapper .h5-sm { font-size: 16px; font-weight: 600; line-height: 24px;}
    .program-table-wrapper { padding-top: 12px;}
    .prog-heading-row { display: none;}
    .prog-row { padding: 16px; flex-wrap: wrap; row-gap: 8px; border: none; background-color: var(--Global-White); border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;}
    .prog-row-child-1 { max-width: 100%;}
    .prog-row-child-3 { max-width: clamp(205px, 65%, 210px);}
    .prog-row-child-2 { align-self: flex-end; justify-content: flex-end !important; order: 3;}
    .progress-table .program-name-icon { align-items: flex-start;}
    .progress-table .program-name .program-title { padding-bottom: 2px;}
    .progress-table .program-icon { width: 48px; height: 48px;}
    .progress-table .program-time-spent { gap: 6px;}
    .progress-table .program-time-spent p { font-size: 14px; line-height: 22px;}
    .progress-table .program-time-spent img { width: 16px; height: 16px;}
    .program-completed-progress-percent { font-size: 14px; line-height: 22px; font-weight: 700;}
    /* End of Dashboard Main Data */


    /* ================================= Program Page ================================= */
    .prog-page-main { height: auto; overflow-y: auto;}
    .prog-sec { border-radius: 24px 24px 0px 0px; -webkit-border-radius: 24px 24px 0px 0px; -moz-border-radius: 24px 24px 0px 0px;}
    /* Program Page Header */
    .prog-page-main .common-header      { display: block; margin-bottom: 12px;}
    .prog-page-main .header-container   { padding: 12px 16px;}
    .prog-page-main .header-button      { padding: 0; border: none;}
    .prog-page-main .header-button img  { width: 52px; height: 52px; border-radius: 70px; -webkit-border-radius: 70px; -moz-border-radius: 70px;}
    .prog-page-main .header-button h6   { display: none;}
    
    .prog-container { overflow-y: auto; padding-block: 16px; padding-bottom: 81px; min-height: 85dvh;}
    .programs-row { flex-direction: column; gap: 16px; max-height: 100%;}
    .prog-left { width: 100%; max-width: 100%;}
    .prog-right { width: 100%; max-width: 100%;}

    /* *************** Program Left Side Data *************** */
    /* ====== program title / prog / Exit Button ====== */
    .prog-title-icon-wrapper { padding: 16px 12px 4px 16px; align-items: flex-start; gap: 12px; border-radius: 24px 24px 24px 0px; -webkit-border-radius: 24px 24px 24px 0px; -moz-border-radius: 24px 24px 24px 0px;}
    .prog-name-num-wrapper { max-width: 100%;}
    .prog-num { padding-bottom: 2px; font-size: 12px; line-height: 18px;}
    .prog-name { font-size: 18px; line-height: 28px;}
    .prog-icon { flex-basis: unset; width: 100%; max-width: 64px;}
    .prog-progress-wrapper { padding-left: 16px; padding-bottom: 16px; border-radius: 0 0 24px 24px; -webkit-border-radius: 0 0 24px 24px; -moz-border-radius: 0 0 24px 24px;}
    .program-completed-progress { max-width: 176px;}
    
    .prog-page-main .program-completed-progress-text { gap: 8px !important;}
    .prog-page-main .program-completed-progress-percent { font-size: 14px; line-height: 22px; font-weight: 700; color: var(--Neutral-Gray-90);}
    .prog-page-main .program-completed-progress-static-text { letter-spacing: 0.5px;}
    /* Save and Exit Button */
    .prog-exit-btn { padding-left: 16px;}
    .prog-exit-btn .btn { padding: 10px 16px; box-shadow: 0px -8px 0px 14px #F6F9FE; -webkit-box-shadow: 0px -8px 0px 14px #F6F9FE; -moz-box-shadow: 0px -8px 0px 14px #F6F9FE}
    .prog-exit-btn::before { width: 40px; height: 40px; right: calc(100% - 2px); border-radius: 0 0 24px 0px; -webkit-border-radius: 0 0 24px 0px; -moz-border-radius: 0 0 24px 0px; z-index: 1; box-shadow: 16px 16px 0px 0px #F6F9FE; -webkit-box-shadow: 16px 16px 0px 0px #F6F9FE; -moz-box-shadow: 16px 16px 0px 0px #F6F9FE;}
    /* ====== End of program title / prog / Exit Button ====== */

    /* ====== Program Narrator ====== */
    .prog-narrator { margin-top: 16px; padding: 12px; padding-left: 0; justify-content: center; border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px;}
    .narrator-avatar { max-width: 134px; max-height: 176px !important; bottom: -12px; right: 0; align-self: end;}
    .narrator-content-wrapper { margin-inline: unset; padding: 12px; padding-right: 9px; max-width: 65%; gap: 12px;}
    .narrator-content { max-height: 94px;}
    /* .narrator-content p { gap: 4px;} */
    .narrator-content p { padding-bottom: 4px;}
    .narrator-control-wrapper { gap: 8px;}
    .narrator-control { padding: 6.67px; width: 32px; height: 32px;}
    /* ====== End of Program Narrator ====== */
    /* *************** End of Program Left Side Data *************** */

    /* *************** Program Right Side Data *************** */
    .prog-data-wrapper { border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px;}
    /* .prog-data { padding: 12px; height: 100%;} */

    /*=== New CSS -Start ===*/
    .program-form-content{padding: 12px; height: 100%;}
    #prog2screen2 .prog-detailed-content .main-point p{font-size: 13px; line-height: 18px;}
    /*=== New CSS -End ===*/

    .prog-data-title { padding: 10px 10px 8px 0;}
    .prog-data-title h5 { font-size: 16px; line-height: 26px;}
    .prog-detailed-content p { line-height: 22px;}

    .prog-navigation { padding: 16px; gap: 8px; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; z-index: 5;}
    .prog-read-more-btn { display: none;}
    .back-save-btn-wrapper a { font-size: 14px; line-height: 22px;}
    .go-back-btn { padding-right: 11px;}
    .go-back-btn::after { max-height: 22px;}
    .save-exit-btn { padding-left: 11px;}
    .next-prev-arrow-btn { gap: 8px;}
    .next-prev-arrow-btn a,
    .next-prev-arrow-btn a svg { width: 32px; height: 32px;}

    /* Program 2 */
    /* Screen 1 */
    .main-point { gap: 8px;}
    /* .main-point .point-icon { width: 20px; height: 20px;} */
    .main-point .point-icon svg { width: 20px; height: 20px;}
    .prog-data textarea { padding: 14px 16px; font-size: 16px; line-height: 24px;}
    .quote-icon svg { width: 40px;}

    /* Checkbox */
    .checkbox-item { padding-left: 28px;}
    .checkbox-label { font-size: 14px; line-height: 22px;}
    .checkbox-label input { top: 3px;}
    .checkmark { top: 3px;}

    /* Program 3 */
    .cloud-screen-wrapper { min-height: 375px; max-height: 375px;}
    .men-women-smoking-wrapper img:first-child { width: 163px; height: 162px;}
    .men-women-smoking-wrapper img:last-child { width: 167px; height: 132px;}
    .cloud-screen-wrapper::after { width: 700px; left: 50%; right: 0%; transform: translateX(-50%);}
    .cloud-ultrafine { max-width: 243px; top: 33%; left: 6%;}
    .cloud-nicotin { max-width: 157px; top: 12px; left: 25%;}
    .cloud-cancer { max-width: 166px; top: 50px; right: 10%;}
    .cloud-heavy-metals { max-width: 204px; top: 44%; right: 6%;}

    /* Program 3 Screen 2 */
    ul li { font-size: 14px; line-height: 22px;}

    /* Program 3 Screen 3 - Brain Animation */
    .dark-bg-radius-box { padding: 12px; margin-top: 16px;}
    .brain-img-content-wrapper { padding-bottom: 12px; margin-top: 16px; gap: 12px; flex-direction: row;}
    .brain-content-wrapper { max-width: 50%;}
    .brain-img-wrapper { max-width: 50%;}


    /* Program 3 Screen 6 */
    .mob-harms-smoking-img { display: block !important;}
    .common-harms-smoking-img { display: none !important;}
    .harms-smoking-img-wrapper { margin-top: 16px; padding-top: clamp(160px, 55%, 162px);}
    .harms-smoking-img-wrapper img { aspect-ratio: 1.7826; max-width: 287px; max-height: 161px;}
    .mob-harms-smoking-img:first-of-type { max-width: 144px !important;}
 
    /* Program 3 Screen 7 - Ladder Dropdown GIF */
    .falling-from-stairs-wrapper { padding: 18px 16px; margin-top: 16px; gap: 12px; border-radius: 13px; -webkit-border-radius: 6px; -moz-border-radius: 13px;}
    .falling-from-stairs-text { max-width: 270px;}
    .falling-from-stairs { max-width: 184px;}

    /* Program 3 Screen 8 */
    .vaping-bottles-wrapper {gap: 12px;}
    .vaping-bottles-img { width: calc(50% - 6px); max-width: 225px;}

    /* Program 3 Screen 9 */
    .checkbox-title-text-p { padding-top: 16px;}

    /* Program 3 Screen 10 */
    #prog3screen10 .main-point { padding-top: 16px;}

    /* Program 3 Screen 11 */
    .video-frame-wrapper { max-width: 450px;}

    /* Program 4 Screen 1 */
    /* Range Bar */
    .range-number           { font-size: 14px !important; min-width: 16px;}

    .radio-buttons-wrapper              { gap: 10px 8px;}
    .radio-button                       { max-width: calc(50% - 8px); gap: 6px;}
    .radio-button label                 { font-size: 15px; line-height: 22px;}
    /* Program 4 Screen 1 */

    /* Program 4 Screen 2 - Charts */
    .flex-chart-wrapper.dark-bg-radius-box { padding-bottom: 12px;}
    .flex-chart-wrapper     { flex-direction: row; justify-content: center; gap: 12px;}
    .chart-content-wrapper                   { width: 100%; max-width: 400px;}
    .chart-content-wrapper .colored-bar-text { padding-left: 28px;}
    .chart-canvas-wrapper { padding: 12px; max-width: 180px; align-self: flex-start;}
    #prog4screen3 .colored-bar-text::before { top: 9px; left: 7px;}
    /* End of Program 4 Screen 2 - Charts */

    /* Program 4 Screen 3 - Bar Chart */
    .p4s4-inner-content-box { padding: 12px;}
    .barChart-wrapper { padding: 12px !important;}
    .right-point p { font-size: 17px; line-height: 20px;}
    .right-point svg { width: 20px; height: 20px;}
    /* End of Program 4 Screen 3 - Bar Chart */

    /* Program 5 Screen 4 */
    .common-pt-24 { padding-top: 16px;}

    /* Program 7 */
    /* Program 7 Screen 1 */
    #prog7screen1 .dark-bg-radius-box { padding-bottom: 12px;}
    /* Program 7 Screen 2 */
    #prog7screen2 .dark-bg-radius-box { padding-bottom: 12px;}
    #prog7screen1 ul li:not(:last-child) { padding-bottom: 6px !important;}
    /* End of Program 7 */

    /* Program 7 Screen 2 */
    /* ol li  { font-size: 14px; line-height: 22px;}
    ol li:not(:last-child) { padding-bottom: 6px;} */
    .num-list-wrapper   { gap: 6px;}
    .num-list           { gap: 4px; font-size: 14px; line-height: 22px;}
    .num-list .num      { padding-inline: 4px;}


    /* Program 8 */
    /* Program 8 Screen 2 */
    #prog8screen2 .dark-bg-radius-box { padding-bottom: 12px;}
    
    /* Program 8 Screen 3 */
    #prog8screen3 .dark-bg-radius-box { padding-bottom: 12px;}
    
    /* Program 8 Screen 4 */
    #prog8screen4 .dark-bg-radius-box { padding-bottom: 12px;}
    
    /* Program 8 Screen 8 */
    #prog8screen8 .dark-bg-radius-box { padding-bottom: 12px;}
    #prog8screen8 ul li:not(:last-child) { padding-bottom: 6px !important;}
    
    /* Program 9 */
    /* Program 9 Screen 1 */
    .goodluck-img-wrapper { padding-block: 12px; width: 100%; max-width: 250px;}
    
    /* Program 9 Screen 2 */
    .summary-screen .dark-bg-radius-box { padding-bottom: 12px;}
    .summary-title-list-wrapper ul { margin-top: 8px;};
    #prog9screen2 ul li:not(:last-child) { padding-bottom: 6px !important;}
    
    /* Program 9 Screen 3 */
    .summary-title-list-wrapper .cmn-dark-p.pb-12 { padding-bottom: 6px;}
    
    /* Program 9 Screen 4 */
    #prog9screen4 ul li:not(:last-child) { padding-bottom: 6px !important;}
    
    /* *************** End of Program Right Side Data *************** */
    /* ===============================End of Program Page ============================= */


    /* =================================== 404 Page ================================ */
    .page-404-main { overflow: hidden; height: 100dvh;}
    .data-wrapper-404 h2 { padding-block: 16px;}
    /* =============================== End of 404 Page ============================= */



}

@media (max-width: 575px){
    .container { max-width: 100%;}

    /* Typography */
    h1 { font-size: 34px; line-height: 40px;} 
    h2 { font-size: 28px; line-height: 32px;} 
    h3 { font-size: 24px; line-height: 26px;} 
    h4 { font-size: 20px; line-height: 22px;} 
    h5 { font-size: 18px; line-height: 24px;} 
    h6 { font-size: 16px; line-height: 18px;} 

    p           { font-size: 14px;} 
    .text-lg    { font-size: 16px; line-height: 18px;} 
    .text-sm    { font-size: 12px; line-height: 16px;}
    .text-xs    { font-size: 12px; line-height: 14px;}

    /* Input Fields */
    input[type=text], input[type=email], input[type=url], 
    input[type=password], input[type=search], input[type=number], 
    input[type=tel], input[type=date], input[type=month], 
    input[type=week], input[type=time], input[type=datetime],
    input[type=datetime-local], input[type=color], textarea, .input-field     { padding: 10px 12px; font-size: 16px; line-height: 18px;}

    ::-webkit-input-placeholder { /* WebKit browsers */
        font-size: 14px;
        line-height: 16px;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        font-size: 14px;
        line-height: 16px;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        font-size: 14px;
        line-height: 16px;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
        font-size: 14px;
        line-height: 16px;
    }
    /* End of Input Fields */
    
    .btn { font-size: 14px; line-height: 16px;}




    /* Avatar Preview - PopUp */
    .change-avatar-popup { max-height: 90vh; height: 100%; overflow-y: auto;}
    /* End of Avatar Preview - PopUp */

    /* Avatar Preview - PopUp */
    .avatar-popup-wrap { flex-direction: column-reverse;}
    .select-avatar-wrap, .preview-avatar-wrap { max-width: 100%;}
    .avatar-images-wrapper { gap: 8px; padding-inline: 12px;}
    .avatar-images-wrapper .avatar-wrap { max-width: calc(33.33% - 5.333px);}
    .avatar-images-wrapper .avatar-img::after { width: 10px; height: 10px;}
    .preview-img { max-width: 104px; max-height: 104px;}
    .preview-action { padding-top: 16px; justify-content: space-around;}
    .avatar-images-wrapper .avatar-img::after { width: 10px; height: 10px;}
    /* End of Avatar Preview - PopUp */


    /* Dashboard Cards */
    .chart-states-wrapper { flex-direction: column; gap: 8px;}
    .chart-states-text { gap: 6px;}
    .chart-value-span { display: inline-block;}
    .program-progress-bar img { display: block;} 
    /* End of Dashboard Cards */

    /* ====== program title / prog / Exit Button ====== */
    /* Save and Exit Button */
    .prog-exit-btn .btn { box-shadow: 0px -14px 0px 14px #F6F9FE; -webkit-box-shadow: 0px -14px 0px 14px #F6F9FE; -moz-box-shadow: 0px -14px 0px 14px #F6F9FE}
    /* ====== End of program title / prog / Exit Button ====== */


    /* Program 2 */
    .narrator-content-wrapper { gap: 8px;}
    /* Screen 1 */
    .quote-icon svg { width: 32px;}

    /* Program 3 */
    .cloud-screen-wrapper { min-height: 510px; max-height: 520px;}
    .men-women-smoking-wrapper img:first-child { margin-left: 4px; width: 163px; height: 181px;}
    .men-women-smoking-wrapper img:last-child { display: none;}
    .cloud-screen-wrapper::after { width: 814px; height: 650px; left: 50%; bottom: 110px; transform: translateX(-50%);}
    .cloud-ultrafine { max-width: 256px; top: 46%; left: 9%;}
    .cloud-nicotin { max-width: 137px; top: 24px; left: 20px;}
    .cloud-cancer { max-width: 156px; top: 50px; right: 8px;}
    .cloud-heavy-metals { max-width: 213px; max-height: 81px; height: 100%; top: 141px; left: 20px; right: unset; aspect-ratio: unset;}
    .cloud-common-img { display: none;}
    .cloud-mob-img { display: block;}


    /* Program 3 Screen 3 - Brain Animation */
    .brain-img-content-wrapper { gap: 16px; flex-direction: column;}
    .brain-content-wrapper { max-width: 100%;}
    .brain-img-wrapper { max-width: 100%;}

    /* Program 3 Screen 7 - Ladder Dropdown GIF */
    .falling-from-stairs-wrapper { padding: 12px; margin-top: 16px; gap: 6px;}
    .falling-from-stairs-text { max-width: 190px;}
    .falling-from-stairs { max-width: 96px;}

    /* Program 4 Screen 1 */
    /* Range Bar */
    .range-number           { min-width: 16px; padding-top: 6px;}
    .range-number::before   { width: 2px; height: 6px;}
    .mob-sm-range-text .range-number { font-size: 7px !important; min-width: 10px !important;}

    .radio-buttons-wrapper              { gap: 6px;}
    .radio-button                       { max-width: 100%; gap: 8px;}
    .radio-button label                 { font-size: 14px;}
    /* End of Program 4 Screen 1 */

    /* Program 4 Screen 2 - Charts */
    .flex-chart-wrapper     { flex-direction: column; justify-content: center; gap: 16px;}
    .chart-content-wrapper                   { width: 100%; max-width: 100%; align-self: center;}
    .chart-canvas-wrapper { padding: 11px; max-width: 160px; align-self: center;}
    .chart-content-wrapper .colored-bar-text { margin-bottom: 12px;}
    #prog4screen3 .colored-bar-text::before { top: 9px; left: 7px;}
    .vapingDoughnutChart ~ .chart-content-wrapper p.pb-16 { padding-bottom: 16px;}
    /* End of Program 4 Screen 2 - Charts */


    /* Program 4 Screen 3 - Bar Chart */
    .barChart-wrapper { padding: 12px !important; aspect-ratio: unset !important;}
    /* End of Program 4 Screen 3 - Bar Chart */



    #prog2screen2 .prog-detailed-content .main-point p{font-size: 12px; line-height: 16px;}




}

@media (max-width: 360px) {
    .prog-page-main .common-header { margin-bottom: 0;}
    /* ================================= Program Page ================================= */ 
    .prog-container { padding-bottom: 69px; min-height: 88dvh;}
    /* *************** Program Left Side Data *************** */
    /* ====== program title / prog / Exit Button ====== */
    .prog-title-icon-wrapper { padding: 12px 12px 8px 12px; gap: 8px;}
    .prog-num { line-height: 16px;}
    .prog-name { font-size: 17px; line-height: 22px;}
    .prog-icon { max-width: 54px;}
    .prog-progress-wrapper { padding-left: 12px; padding-bottom: 12px;}
    .program-completed-progress { max-width: 124px;}
    
    .prog-page-main .program-completed-progress-text { gap: 6px !important;}
    /* Save and Exit Button */
    .prog-exit-btn { padding-left: 16px;}
    .prog-exit-btn .btn { box-shadow: 0px -2px 0px 14px #F6F9FE; -webkit-box-shadow: 0px -2px 0px 14px #F6F9FE; -moz-box-shadow: 0px -2px 0px 14px #F6F9FE}
    .prog-exit-btn::before { width: 40px; height: 40px; right: calc(100% - 2px); border-radius: 0 0 24px 0px; -webkit-border-radius: 0 0 24px 0px; -moz-border-radius: 0 0 24px 0px; z-index: 1; box-shadow: 16px 16px 0px 0px #F6F9FE; -webkit-box-shadow: 16px 16px 0px 0px #F6F9FE; -moz-box-shadow: 16px 16px 0px 0px #F6F9FE;}
    /* ====== End of program title / prog / Exit Button ====== */

    /* ====== Program Narrator ====== */
    .narrator-avatar { max-width: 110px;}
    .narrator-content-wrapper { padding: 8px; max-width: 60%; gap: 10px;}
    .narrator-content { max-height: 138px;}
    .narrator-control { padding: 6px; width: 28px; height: 28px;}
    /* ====== End of Program Narrator ====== */
    /* *************** End of Program Left Side Data *************** */

    /* *************** Program Right Side Data *************** */
    .prog-data-title { padding: 0 8px 8px 0;}
    .prog-data-title h5 { line-height: 24px;}
    .prog-detailed-content p { line-height: 20px;}

    .prog-navigation { padding: 12px; gap: 8px;}
    .back-save-btn-wrapper a { font-size: 14px; line-height: 20px;}
    .go-back-btn { padding-right: 8px;}
    .go-back-btn::after { max-height: 20px;}
    .save-exit-btn { padding-left: 8px;}
    .next-prev-arrow-btn { gap: 6px;}
    .next-prev-arrow-btn a,
    .next-prev-arrow-btn a svg { width: 28px; height: 28px;}

    /* Program 2 */
    /* Screen 1 */
    .quote-icon svg { width: 30px;}
    .prog-data textarea { padding: 10px 12px;}
    /* Screen 2 */

    /* Program 3 Screen 6*/
    .harms-smoking-img-wrapper { padding-top: clamp(130px, 55%, 150px);}

    /* Program 3 Screen 7 - Ladder Dropdown GIF */
    .falling-from-stairs-text { max-width: 154px;}
    .falling-from-stairs { max-width: 76px;}

    /* Program 3 Screen 11 */
    .video-frame-wrapper { max-width: 300px;}

    /* Program 4 Screen 1 *
    /* Range Bar */
    .range-numbers          { font-size: 13px !important;}
    .mob-sm-range-text .range-number {
        font-size: 6px !important;
        min-width: 6px !important;
    }
    /* End of Program 4 Screen 1 */


    /* Program 4 Screen 3 - Bar Chart */
    .barChart-wrapper { padding: 12px 0 12px 2px !important;}
    /* End of Program 4 Screen 3 - Bar Chart */

    /* Program 9 */
    /* Program 9 Screen 1 */
    .goodluck-img-wrapper { margin-top: 16px; max-width: 200px;}
    .goodluck-img-wrapper img { width: 130px; aspect-ratio: 1.30/1;}













    /* *************** End of Program Right Side Data *************** */
    /* ===============================End of Program Page ============================= */


}

@media (min-height: 920px) { 
    .prog-left { max-height: 620px;}
}

@media (max-height: 850px) { 
    .login-form { margin-top: 60px;}
}


/* =============================== End of Responsive CSS ============================== */



/* Loader CSS Start */
.overlay {
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 9999;
    top: 0;
    left: 0;
}
.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid #1e1e1e;
    border-right-color: transparent;
    transform-origin: center;
    animation: rotate 1s linear infinite;
}
.overflow-active {
    overflow: hidden;
}
@keyframes rotate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}
/* Loader CSS End */

.error {
    display: block;
    color: #D8000C;
    position: fixed;
    top: 20px;
    right: 20px;
    width: 200px;
    background: #ffe0e0;
    border: 1px solid #ff5c5c;
    padding: 10px;
    border-radius: 5px;
    z-index: 1000;
}
.overflow-active {
    overflow: hidden;
}


/* Full-screen overlay  POPUP CSS*/
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Dark background */
    display: flex; 
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Popup box */
.modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    width: 350px;
    max-width: 90%;
    text-align: center;
    position: relative;
}

/* Close button */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
}

/* Icon */
.popup-icon {
    font-size: 40px;
    width: 65px;
    height: 80px;
    display: inline-block;
}

/* Heading */
.modal-content h2 {
    font-size: 20px;
    font-weight: bold;
    color: #000;
    margin: 10px 0;
}

/* Text */
.modal-content p {
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
}

/* Button container */
.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Cancel Button */
.cancel-btn {
    background: #fff;
    color: #007bff;
    border: 1px solid #007bff;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

/* Save Button */
.save-btn {
    background: #007bff;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

/* Hover effects */
.cancel-btn:hover {
    background: #e0eaff;
}

.save-btn:hover {
    background: #0056b3;
}

/*  POPUP CSS END */

/* ================================
   Age Gate Overlay
================================ */
.age-gate-overlay {
  position: fixed;
  inset: 0;
  background: url("./assets/images/age-gate/age-gate-bg.webp") no-repeat top left / cover;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow-y: auto;
}

.age-gate-container {
  max-width: 832px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.age-gate-title {
  margin: 0;
  color: var(--primary-Tints-10);
  font-size: 3.5em;
  font-weight: 700;
  line-height: 1.2;
}

.age-gate-subtitle {
  margin: 0;
  padding: 0 2em;
  color: var(--primary-Tints-40);
  font-size: 1.75em;
  font-weight: 500;
  line-height: 1.3;
}

/* ================================
   Options
================================ */
.age-gate-container .age-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.age-gate-container .age-option {
  position: relative;
  width: 400px;
  height: 285px;
  padding: 1.5em;
  border-radius: 32px;
  border: 3px solid transparent;
  cursor: pointer;
  background: linear-gradient(rgba(1, 1, 1, 0.7), rgba(1, 1, 1, 0.7)) padding-box,
    var(--gradient-border) border-box;
}

.age-gate-container .age-option input[type="radio"] {
  display: none;
}

/* Label Wrap */
.age-label {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 30px 0;
  cursor: pointer;
}

.age-label:focus,
.age-label:focus-within {
  outline: none !important;
  border: none !important;
}

/* Age Gate Radio Custom */
.age-gate-container .radio-btn-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.age-gate-container .radio-button {
  width: 26px;
  height: 26px;
  border: 3px solid var(--primary-Tints-40);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.age-gate-container .radio-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.2s ease;
}

/* Checked State */
.age-option input[type="radio"]:checked+.age-label .radio-button {
  border-color: #dfc5ff;
}

.age-option input[type="radio"]:checked+.age-label .radio-circle {
  background: #dfc5ff;
}

/* Title / Text */
.option-title img {
  max-width: 100%;
  height: auto;
  display: block;
}

.option-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.option-age {
  color: var(--primary-Tints-40);
  font-size: 2.25em;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
}

.option-description {
  color: var(--primary-Tints-40);
  font-size: 1.375em;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
}

/* ================================
   Responsive
================================ */
@media (max-width: 768px) {
  .age-gate-title {
    font-size: 36px;
  }

  .age-options {
    flex-direction: column;
    align-items: center;
  }

  .age-option {
    width: 100%;
    max-width: 350px;
  }
}

/* ================================
   Responsive
================================ */
@media (max-width: 1024px) {
  .age-gate-title {
    font-size: 2.75em;
    /* smaller for tablets */
  }

  .age-gate-subtitle {
    font-size: 1.5em;
    padding: 0 1.5em;
  }

  .age-option {
    width: 320px;
    height: 250px;
    padding: 1.25em;
  }

  .option-age {
    font-size: 1.75em;
  }

  .option-description {
    font-size: 1.125em;
  }
}

@media (max-width: 768px) {
  .age-gate-title {
    font-size: 2.25em;
  }

  .age-gate-subtitle {
    font-size: 1.25em;
  }

  .age-options {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .age-option {
    width: 100%;
    max-width: 350px;
    height: 230px;
  }

  .age-label {
    padding: 20px 0;
  }
}

@media (max-width: 480px) {
  .age-gate-container {
    gap: 28px;
    padding: 0 16px;
  }

  .age-gate-title {
    font-size: 1.75em;
  }

  .age-gate-subtitle {
    font-size: 1em;
    padding: 0 1em;
  }

  .age-option {
    max-width: 100%;
    padding: 1em;
    border-radius: 20px;
  }

  .option-age {
    font-size: 1.5em;
  }

  .option-description {
    font-size: 1em;
  }

  /* .radio-button {
    width: 22px;
    height: 22px;
  } */

  .radio-circle {
    width: 8px;
    height: 8px;
  }
}