* {
    /* color: #666; */
    margin: 0;
    /* border: solid 1px #f00; */
    font-family: Arial, Helvetica, sans-serif;
}

:root,
[data-theme=light] {
    --width: 82dvw;
    --max-width: 400px;
    --shadow: -2px 3px 25px -6px rgba(56, 56, 56, 0.56);


    --color-primary: #c7c7c7;
    --color-secondary: #b6d697;
    --bg-color-primary: #d4d4d4;
    --bg-color-secondary: #e0dddd;

    /* Body and Text (General) */
    --body-color: #ffffff;
    --text-color: #616161;

    /* Home Player */
    --home-player-background-color: #fff;
    --home-player-play-icon: #247B32;
    --home-player-pause-icon: #DE1C1C;
    --home-player-title-text: #5e5e5e;
    --home-player-subtitle-text: #6d6d6d;

    /* Program List */
    --program-head-text: #6b6b6b;
    --program-list-item-background: #fff;
    --program-list-item-main-text: #707070;
    --program-list-subtitle-text: #979797;
    --program-list-arrow-color: #707070
        /* Settings */
        --settings-head-text: #6b6b6b;
    --settings-list-item-background: #fff;
    --settings-list-item-main-text: #707070;

    /* Footer */
    --footer-background-color: #fff;
    --footer-default-btn-color: #CCF8CB;
    --footer-default-icon-color: #77A880;
    --footer-active-btn-color: #5D8B65;
    --footer-active-icon-color: #F3F5F3;

}

[data-theme=dark] {
    --width: 82dvw;
    --max-width: 400px;
    --shadow: 0px;

    --color-primary: #c7c7c7;
    --color-secondary: #e6e6e6;
    --bg-color-primary: #404040;
    --bg-color-secondary: #5a5a5a;

    /* General Color */
    --body-color: #333333;
    --text-color: #fafafa;

    /* Home Player */
    --home-player-background-color: #4e4e4e;
    --home-player-play-icon: #EBEBEB;
    --home-player-pause-icon: #EBEBEB;
    --home-player-title-text: #EEFFEE;
    --home-player-subtitle-text: #E9E9E9;

    /* Program List */
    --program-head-text: #6b6b6b;
    --program-list-item-background: #4e4e4e;
    --program-list-item-main-text: #EBEBEB;
    --program-list-subtitle-text: #C5C5C5;
    --program-list-arrow-color: #7B7B7B;

    /* Settings */
    --settings-head-text: #6b6b6b;
    --settings-list-item-background: #5E5E5E;
    --settings-list-item-main-text: #EBEBEB;

    /* Footer */
    --footer-background-color: #5E5E5E;
    --footer-default-btn-color: #707070;
    --footer-default-icon-color: #EBEBEB;
    --footer-active-btn-color: #EBEBEB;
    --footer-active-icon-color: #404040;
}

body,
.bg {
    color: var(--text-color);
    background: var(--body-color);
}

.d-flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}

.flex-column {
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
}

.flex-row {
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
}

.align-center {
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}

.justify-center {
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
}

.justify-between {
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
}

.justify-start {
    -webkit-justify-content: start;
    -moz-justify-content: start;
    justify-content: start;
}

.justify-around {
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around;
}
/* TEXT */
.text-size-1{
    font-size: .6rem;
}
.text-size-2{
    font-size: .7rem;
}
.text-size-3{
    font-size: .8rem;
}
.text-size-4{
    font-size: .8rem;
}
.text-size-5{
    font-size: .9rem;
}
.text-size-5{
    font-size: 1rem;
}
/* END TEXT */

/* IMG */
.img-fluid{
    max-width: 100%;
    height: auto;
}
/* END IMG */

/* FLOAT */
.float-right{
    float: right;
}
/* END FLOAT */
/* CLAMP */
.clamp {
    -webkit-line-clamp: 2; /* Set the default line clamp */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.clamp.expanded {
    white-space: pre-line;
    -webkit-line-clamp: inherit; /* Remove line clamp when expanded */
}
/* END CLAMP */
/* TEXT TRUNCATE */
.text-truncate-1{
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 1; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: pre-line;
}
.text-truncate-2{
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: pre-line;
}
.text-truncate-3{
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 3; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: pre-line;
}
/* END TEXT TRUNCATE */

/* PADDING */
.p-1 {
    padding: .5rem;
}

.p-2 {
    padding: 1rem;
}

.p-3 {
    padding: 1.5rem;
}

.pb-1 {
    padding-bottom: .5rem;
}

.pb-2 {
    padding-bottom: 1rem;
}

.pb-3 {
    padding-bottom: 1.5rem;
}

.px-1 {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.px-2 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.px-3 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* !-PADDING */
/* MARGIN */
.m-1 {
    margin: .5rem;
}

.m-2 {
    margin: 1rem;
}

.m-3 {
    margin: 1.5rem;
}

.mx-1 {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.mx-2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.mx-3 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.mb-1 {
    margin-bottom: .5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.mt-1 {
    margin-top: .5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

/* !-MARGIN */
/* BORDER RADIUS */
.br-1 {
    border-radius: .5rem;
}

.br-2 {
    border-radius: 1rem;
}

/* !-BORDER RADIUS */
/* WIDTH */
.width-limit {
    width: var(--width);
    max-width: var(--max-width);
}

.w-1 {
    width: 100%;
    height: auto;
}

.w-2 {
    width: 50%;
    height: auto;
}

.w-3 {
    width: 33.33%;
    height: auto;
}

.w-4 {
    width: 25%;
    height: auto;
}

/* !-WIDTH */

.shadow {
    -webkit-box-shadow: var(--shadow);
    -moz-box-shadow: var(--shadow);
    box-shadow: var(--shadow);
    background-color: var(--program-list-item-background);
}

.container {
    justify-content: space-between;
    align-items: center;
    height: 100dvh;
}

.swiper {
    width: 100%;
    height: 100%;
}

/* HOME CSS STYLES */
.home {
    justify-content: space-around;
}

.home .head h1 {
    font-weight: 300;
    color: var(--text-color);
}

.home .body {
    margin: 1rem;
}

.home .body .home-logo {
    border-radius: 2rem;
    margin-bottom: 2rem;
}

.home .body .player-container {

    border-radius: 1.5rem;
    /* align-items: center; */
    /* justify-content: center; */
    padding: 1rem;
    background-color: var(--home-player-background-color);
}

.home .body .player-container .play-btn i {
    font-size: 3rem;
    padding: 1rem;
    color: var(--home-player-play-icon);
}

.home .body .player-container .station-name-holder {
    padding: 1rem;
}

.home .body .player-container .station-name-holder h2 {
    font-weight: 300;
    padding-bottom: .5rem;
    color: var(--home-player-title-text);
}

.home .body .player-container .station-name-holder div {
    font-weight: 300;
    /* padding-bottom: .5rem; */
    color: var(--home-player-subtitle-text);
}

/* END HOME CSS STYLES */


/* Program */
.program .head h1 {
    /* padding-left: 2rem; */
    padding-top: 1.5rem;
    /* padding-bottom: 1rem; */
    width: var(--width);
    max-width: var(--max-width);
    font-weight: 500;
    margin-bottom: 0;
    color: var(--text-color);
}

.program .program-list {
    align-items: center;
    /* justify-content:flex-start; */
    width: 100%;
    margin-top: .5rem;
    padding-bottom: .5rem;
    overflow-y: auto;
}

.program .program-list .list-item {
    border-radius: 1.5rem;
    margin: 1rem 0rem 0rem 0rem;
    ;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: var(--program-list-item-background);
}

.program .program-list .list-item .list-detail-holder .program-name {
    margin: 1.5rem 1rem 0 1rem;
    font-weight: 300;
    color: var(--program-list-item-main-text);
}

.program .program-list .list-item .list-detail-holder .program-days {
    margin: .5rem 1rem 1.5rem 1rem;
    font-weight: 300;
    color: var(--program-list-subtitle-text);
}

.program .program-list .list-item .list-detail-holder .program-days h4 {
    font-weight: 400;
    margin-bottom: 2px;
}

.program .program-list .list-item .arrow i {
    font-size: 1.5rem;
    margin: 0 1rem 0 0;
}

/* END Program */
/* Program */
.loader{
    height: 100%;
    position: absolute;
}
.loader img{
    width: 3rem;
    z-index: 999;
    position: fixed;
    bottom: 1rem;
}
.fb .head h2 {
    /* padding-left: 2rem; */
    padding-top: 1rem;
    /* padding-bottom: 1rem; */
    width: var(--width);
    max-width: var(--max-width);
    font-weight: 500;
    margin-bottom: 0;
    color: var(--text-color);
}

.fb .fb-list {
    align-items: center;
    /* justify-content:flex-start; */
    width: 100%;
    margin-top: .5rem;
    padding-bottom: .5rem;
    overflow-y: auto;
}

.fb .fb-list .list-item {
    border-radius: 1.5rem;
    margin: 1rem 0rem 0rem 0rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: var(--program-list-item-background);
    width: 99dvw !important;
    max-width: 450px;
}

.fb .fb-list .list-item .list-detail-holder {
    width: -webkit-fill-available;
}

.fb .fb-list .list-item .list-detail-holder .program-days {
    margin: .5rem 1rem 1.5rem 1rem;
    font-weight: 300;
    color: var(--program-list-subtitle-text);
}

.fb .fb-list .list-item .list-detail-holder .program-days h4 {
    font-weight: 400;
    margin-bottom: 2px;
}

.fb .fb-list .list-item .arrow i {
    font-size: 1.5rem;
    margin: 0 1rem 0 0;
}

/* END Program */

/* Settings */
.settings .head h1 {
    /* padding-left: 2rem; */
    padding-top: 2rem;
    /* padding-bottom: 1rem; */
    width: var(--width);
    max-width: var(--max-width);
    font-weight: 500;
    margin-bottom: 0;
    color: var(--text-color);
}

.settings .settings-list {

    /* justify-content:flex-start; */
    width: 100%;
    margin-top: 1rem;
    overflow-y: auto;
    padding: 1rem;
}

.settings .settings-list .list-item {
    border-radius: 1.5rem;
    margin: .5rem;
    max-width: var(--max-width);
    width: var(--width);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: var(--settings-list-item-background);
}

.settings .settings-list .list-item .list-detail-holder .settings-name {
    padding: 1rem;
    font-weight: 300;
    color: var(--setttings-list-item-main-text);
}

.settings-icon-holder i {
    font-size: 1rem;
    padding: 1rem;
    color: var(--setttings-list-item-main-text);
}

.setting-about {
    background-color: var(--body-color);
    color: var(--text-color);
    height: 100dvh;
}

.setting-about .body {
    overflow-x: auto;
}

.setting-about .body .logo {
    width: 50dvw;
    border-radius: 1rem;
}

/* End  Settings*/

/* FOOTER */
.footer {
    /* position:sticky; */
    width: 100vw;
    border-radius: 2rem 2rem 0 0;
    /* margin-top: 1rem; */
    max-width: var(--max-width);
    -webkit-box-shadow: var(--shadow);
    -moz-box-shadow: var(--shadow);
    box-shadow: var(--shadow);
    background-color: var(--footer-background-color);
}

.footer div.footer-list {
    display: flex;
    justify-content: space-between;
    width: 80vw;
    margin: 1rem;
}

.footer div.footer-list span.swiper-bullet {
    font-size: 1.5rem;
    /* font-weight: 500; */
    padding: 1rem;
    border-radius: 1rem;
    background-color: var(--footer-default-btn-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--footer-default-icon-color);
}

.footer div.footer-list span.swiper-pagination-bullet-active {
    font-size: 1.5rem;
    font-weight: 500;
    padding: 1rem;
    border-radius: 1rem;
    background-color: var(--footer-active-btn-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer div.footer-list span.swiper-bullet i {
    color: var(--footer-default-icon-color);
}

.footer div.footer-list span.swiper-pagination-bullet-active i {
    color: var(--footer-active-icon-color);
}

.facebook-responsive {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.facebook-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
@media only screen and (max-height: 700px) {

    /* Hide home header for smaller devices */
    .home .head h1 {
        font-size: 1.5rem;
        font-weight: 300;
        padding: 1rem 2.5rem;
        max-width: 500px;
        display: none;
    }
}
/* SWIPER */
.swiper-slide-subattachement {
    height: auto;
    display: flex;
    align-items: center;
}
.swiper-slide-subattachement::before {
    -webkit-backdrop-filter: blur(10px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
    -moz-webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px); /* Supported in all major browsers */
    content: "";
    z-index: 10;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
  }
/* END SWIPER */
video{
    border-radius: 1rem !important;
}
div.vjs-theme-default{
    border-radius: 1rem !important; 
}
div.vjs-poster picture img{
    border-radius: 1rem !important;
}
.vjs-control-bar{
    border-radius: 1rem !important;
}