body:lang(np),
body:lang(np) * {
    font-family: laila !important;
}

.background {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}

.cb_bg {
    background-color: #CBC5AC;
}

.fw-1{
  background-color: #71534D;
  right: 10%;
  width: 45%;
  border-radius: 15px;  
  padding: 3%;
  color : #2F3F56;
  background-color: #84D4C8;
}

.instrn-top{
    width: 100%;
    height: 15%;
    background-color: #4C6E9F;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
}

.didi-1{
    width: 14%;
    left: 52%;
    bottom: 5%;
}

.girl-1{
    width: 11%;
    left: 70%;
    bottom: 5%;
}

/* #region national anthem styles */

.na-container{
    width: 40%;
    height: 80%;
    right: 12.5%;
    top: 3%;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #ffffff;
    border: 2px solid #a19663;
}

.na-title{
    top: 0%;
    left: 0%;
    width: 100%;
    height: 10%;
    background-color: #F4D883;
    border-bottom: 2px solid #a19663;
}

.na{
    position: relative;
    width: 100%;
    transition: transform .5s;
}

.na:hover{
    cursor: pointer;
    transform: scale(1.03, 1.03);
}

.na-1{
    margin-top: 12%;
}

.controls-container{
    bottom: 2.5%;
    right: 22.5%;
    width: 20%;
    height: 12%;
    display: flex;
    justify-content: space-evenly;
}

.control:hover{
    transform: scale(1.05, 1.05);
    cursor: pointer;
}

/* #endregion */


/* #region speechbox */

.sp-1{
    position: absolute;
    top: 15%;
    left: 63%;
    width: 24%;
    height: 21%;
    padding: .5% 1% 1% 2.2%;
}

.box {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}

.speechbox>p {
    position: relative;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.mirrored{
    transform: rotateY(180deg);
}

/* #endregion speech box styles end */


/* #endregion */


/* #region left video styles */
.vid-container-left{
    position: absolute;
    left: 7.5%;
    top: 7.5%;
    height: 85%;
    width: 30%;
    background-color: #FFF7C1;
    border: 2px solid #EAB247;
    box-shadow: -10px 10px 5px #eab247;
    border-radius: 50px;
    overflow: hidden;
}
.v-h-l{
    top: 0%;
    left: 10%;
    height: 80%;
    width: 80%;
    background: #FFF7C1;
}

.replaybtn_container {
    position: absolute;
    bottom: 0%;
    height: 22%;
}
.playvideo{
    width: 100%;
    height: 85%;
}
#replay_video_btn {
    width: 35%;
}

.no_pointer {
    pointer-events: none;
}

.vid {
    width: 100%;
    position: absolute;
    left: 0%;
    bottom: 15%;
    opacity: 0;
}
.corincorclass{
    position: absolute;
    bottom: 110%;
    width: 22%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

/* #endregion */


/* #region video player css */
.sidevideoDiv_coverpg{
    height: 100%;
    width: 35%;
    left: 0%;
}

div[class*="svd"]{
    height: 90%;
    width: 30%;
    top: 5%;
}

.svd-l{
    left: 5%;
}

.svd-l_1{
    left: 5%;
    top: 50% !important;
    height: 90% !important;
}

.svd-r{
    right: 5%;
}

.side_video_holder{
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: #938D76;
    border: 4px solid #5B5643;
    box-shadow: 0px 5px 3px #895A25;
}

.videolabel-btm {
    position: absolute;
    bottom: 0%;
    width: 100%;
    background: #969a7d;
    padding: 5%;
}

#nslVideo {
    position: absolute;
    width: 40%;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
}

.video_container {
    position: absolute;
    height: 80%;
    width: 100%;
    bottom: 20%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    overflow: hidden;
}

.replaybtn_container {
    position: absolute;
    bottom: 0%;
    height: 20%;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

#replay_video_btn {
    position: absolute;
    width: 60%;
    top: 20%;
    left: 20%;

}

/* #endregion */


/* #region common */
.p-abs{
    position: absolute;
}

.c-x{
    left: 50%;
    transform: translateX(-50%);
}

.c-y{
    top: 50%;
    transform: translateY(-50%);
}
.c-xy{
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.no-click{
    pointer-events: none;
}

.cur-read{
    background-color: #F4D883;
}
/* #endregion */


@media screen and (min-aspect-ratio: 4/3) {
    .obj-top-txt, .obj-btm-txt{
        font-size: 4vh;
    }
    .fw-1{ font-size: 5vh; }
    .f-4, .item-name,
    .item-name-side,
    .instrn-top,
    .opt-name{ font-size: 4vh; }
    .na, .na-title{ font-size: 3.8vh; }
    .txt1{ font-size: 4vh;}
}

@media screen and (max-aspect-ratio: 4/3) {
    .obj-top-txt, .obj-btm-txt{
        font-size: 2.8vw;
    }
    .fw-1{ font-size: 4vw; }

    .f-4, .item-name,
    .item-name-side,
    .instrn-top,
    .opt-name{ font-size: 2.8vw; }
    .na, .na-title{ font-size: 2.3vw; }
    .txt1{ font-size: 2.8vw;}
}