html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    width: 100%;
    height: 100%;
    position: absolute;
    line-height: 1;
    background: #000;
    top: 0;
    left: 0;
}

*{
    outline: none;
}

ol,
ul {
    list-style: none;
}

ul li {
    outline: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input,
button {
    outline: none;
}

@font-face {
    font-family: "Poppins-Regular";
    src: url("../fonts/Poppins-Regular.ttf") format("opentype");
}

@font-face {
    font-family: "Poppins-Medium";
    src: url("../fonts/Poppins-Medium.ttf") format("opentype");
}

@font-face {
    font-family: "Poppins-Bold";
    src: url("../fonts/Poppins-Bold.ttf") format("opentype");
}

@font-face {
    font-family: "Poppins-ExtraBold";
    src: url("../fonts/Poppins-ExtraBold.ttf") format("opentype");
}

@font-face {
    font-family: "Poppins-SemiBold";
    src: url("../fonts/Poppins-SemiBold.ttf") format("opentype");
}

@font-face {
    font-family: "Poppins-Light";
    src: url("../fonts/Poppins-Light.ttf") format("opentype");
}



.splash-screen {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    position: absolute;
    background: url("../images/splash-screen.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.loader {
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 999999;
    position: absolute;
    text-align: center;
}

.circle_loader {
    top: 42%;
    left: 45%;
    width: 130px;
    height: 130px;
    margin: 0 auto;
    position: absolute;
    background-size: cover;
    background: url(../images/loader.png) no-repeat;
    -moz-animation: spin 5s infinite linear;
    -webkit-animation: spin 5s infinite linear;
}

.main_container {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    text-align: center;
}

.container-box {
    top: 0;
    left: 90px;
    float: right;
    height: 100%;
    width: 1190px;
    display: none;
    position: absolute;
}

.right-side-container {
    display: flex;
}

/* ====================================Start of error message=========================== */
.error_container {
    top: 110px;
    display: none;
    font-size: 30px;
    color: #ff0000;
    position: relative;
    text-align: center;
}

.error-box {
    top: 22px;
    height: 20px;
    color: #ff0000;
    font-size: 28px;
    text-align: center;
    margin: 10px 0;
}

.error-box-forgot {
    display: none;
    color: #ff0000;
    font-size: 22px;
    padding: 0.8rem 0;
    position: relative;
}

.error-message {
    display: none;
}

.no-result-found{
    color: #FFF;
    font-size: 1.4rem;
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    line-height: 2.4rem;
    position: absolute;
    font-family: 'Poppins-Regular';
    transform: translate(-50%, -50%);
}
/* ====================================End of error message=========================== */
/* ====================================Start of virtaul keyoard=========================== */
.keyboard_container {
    top: 11px;
    display: none;
    position: relative;
    background-color: transparent;
}

.virtual-keyboard {
    position: relative;
}

.virtual-keyboard .row {
    justify-content: center;
}

.virtual-keyboard .row div {
    width: 8rem;
    padding: 1rem;
    color: #000;
    font-size: 2rem;
    font-weight: 600;
    border: 1px solid;
    background: #fff;
    text-align: center;
}

/* .virtual-keyboard .row div.key-special {
    width: 200px !important;
} */

.virtual-keyboard .row div.space-key {
    width: 759px !important;
}

.virtual-keyboard .keys:focus {
    background-color: red;
    color: #FFFFFF;
}



/* ====================================End of virtaul keyoard=========================== */

/* ==================================== Start of left side bar screen=========================== */
.menu_container {
    display: none;
}

.left_navbar {
    background: #000000;
    width: 90px;
    height: 100%;
    float: left;
    position: fixed;
    z-index: 999999;
    padding-top: 15px;
}

.left_navbar span {
    display: none;
}

.logo_img {
    height: 34px;
    width: 278px;
    text-align: center;
    margin-bottom: 65px;
    padding: 12px 24px 24px 24px;
}

.logo_img img {
    width: 100%;
}

.menu_sidebar {
    margin: 0px 0px;
    padding: 0px 0px;
}

.menu_sidebar .menu_item {
    margin: 10px 0px;
    text-align: left;
    padding: 5px 15px;
    list-style-type: none;
    display: block;
    text-decoration: none;
    color: #B2B2B2;
    width: 225px;
}

.menu_sidebar .menu_item img {
    width: 55px;
    height: 55px;
}

.menusidebar_minimize {
    width: 90px !important;
}

.menusidebar_expand {
    width: 225px !important;
}

.menusidebar_expand span {
    display: block !important;
}

.menusidebar_expand .menu_sidebar {
    padding-right: 100px;
}

.menusidebar_minimize .menu_item {
    width: 90px !important;
}

.menusidebar_minimize span {
    display: none !important;
}

.menusidebar_expand span {
    display: inline-block !important;
}

.menu_sidebar span {
    font-size: 1.6rem;
    font-family: "Poppins-Regular";
    position: absolute;
    margin: 15px;
    margin-left: 5px;
}

.menu_sidebar .menu_item:focus {
    background: #FE0404;
}

/* ==================================== End of left side bar screen=========================== */

/* ====================================start of home screen=========================== */
.home_container {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
}

.top_banner_container {
    top: 0;
    width: 100%;
    position: absolute;
    height: 62%;
}

.top_navbar {
    left: 0;
    width: 100%;
    display: flex;
    position: fixed;
    justify-content: end;
    z-index: 99999;
}
.top_navbar .top_navbar_box{
    width: 80%;
    position: relative;
    display: flex;
    justify-content: start;
}

.navbarlisted {
    margin: 2rem 0 0 2rem;
    padding: 5px 6px;
    background: rgba(255, 255, 255, .7);
    border-radius: 40px 40px;
    z-index: 99999;
    position: relative;
    max-width: 700px;
    display: inline-block;
    left: 0;
}

.navbarlisted .navbarlisted-items {
    /* padding: 7px 7px; */
    display: inline-block;
}

.navbarlisted .navbarlisted-items span {
    padding: 8px 30px 8px 30px;
    border-radius: 40px 40px;
    text-decoration: none;
    display: block;
    color: #000;
    font-size: 27px;
    font-family: "Poppins-Regular";
}

.navbarlisted .navbarlisted-items span.activenav {
    background: #272727;
    color: #fff;
    font-family: "Poppins-Regular";
}

.navbarlisted .navbarlisted-items:focus span {
    color: red;
}

.card_details {
    width: 60%;
    margin-top: 100px;
    position: relative;
    z-index: 999;
    text-align: left;
    padding-left: 10px;
}

.card_details h1 {
    color: #fff;
    font-size: 28px;
    line-height: 38px;
    margin-bottom: 5px;
    font-family: "Poppins-Bold";
}

ul.card_category li {
    margin: 6px 12px 10px 0px;
    padding: 0px 0px;
    list-style-type: none;
    display: inline-block;
    font-size: 20px;
    line-height: 30px;
    font-family: "Poppins-SemiBold";
    color: #fff;
}

ul.card_category li+li:before {
    content: "";
    display: inline-block;
    width: 2px;
    height: 20px;
    background: #eee;
    top: 2px;
    right: 8px;
    position: relative;
}

ul.card_category li:last-child {
    text-transform: uppercase;
    color: red;
}


.cc_border {
    border: 4px 4px;
    border: 1px #fff solid;
    border-radius: 5px 5px;
    padding: 2px 12px;
    display: inline-block;
    margin-right: 10px;
}

.partxt {
    color: #B9B9B9 !important;
    margin-bottom: 10px;
}

.card_details p {
    width: 100%;
    color: #fff;
    font-size: 22px;
    line-height: 30px;
    font-family: "Poppins-Regular";
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

ul.star li {
    display: inline-block;
    margin: 10px 2px;
}

ul.button_group {
    margin-top: 25px;
}

ul.button_group li {
    margin: 10px 0px;
    list-style-type: none;
    display: block;
}

.home_container .button_box {
    width: 840px;
    padding: 18px 30px;
    text-align: center;
    font-size: 26px;
    font-family: "Poppins-Regular";
    color: #fff;
    margin-top: 15px;
}

.btn_transparent {
    background: transparent;

}

.btn_primary {
    background: #FE0404;
    color: #fff;
}

.icon {
    margin-right: 15px;
    width: 24px;
    height: 24px;
}

.seeicon {
    position: relative;
    top: 4px;
}

.category_row {
    /* margin-bottom: 20px; */
    padding: 0 2px 0 0;
}

.category_heading {
    text-align: start;
	z-index: 900;
    /* position: absolute; */
}

.home_item_rows {
    overflow: hidden;
}

div.category_list {
    width: 100000000px;
}

div.category_list div.category-items {
    margin:  10px 6px 15px 0px;
    float: left;
    /* margin-bottom: 0; */
    width: 290px;
}

.category_item {
    width: 290px;
    height: 164px;
    position: relative;
    border: 5px solid transparent;
}

div.category_list div.portrait {
    margin:  10px 6px 15px 0px !important;
    width: 192px !important;
    height: 288px !important;
}

div.category_list div.portrait .category_item{
    width: 192px !important;
    height: 288px !important;
}

.category_item img {
    width: 100%;
    height: 100%;
    position: relative;
    border: 5px solid transparent;
}

.category_list .category-items:focus img {
    border: 5px #FE0404 solid;
}

.category_list div.category-items:focus p {
    display: none;
    color: #FE0404;
}

.home_rows {
    position: absolute;
    width: 100%;
    height: 334px;
    top: 383px;
    overflow: hidden;
    z-index: 1;
}

.category_heading h3 {
    color: #fff;
    margin-left: 20px;
    font-size: 1.4rem;
    font-family: "Poppins-Regular";
    display: inline-block;
}

.headline_nos {
    color: #fff;
    float: right;
    margin-right: 25px;
    font-size: 1.4rem;
    font-family: "Poppins-Regular";
}

.item_title {
    height: 20px;
    width: 250px;
    color: #fff;
    line-height: 1;
    font-size: 20px;
    font-family: "Poppins-Regular";
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    display: none;
    /* padding-left: 3rem; */
}

.card_backimage {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 67%;
    height: 100%;
}

.gradientimg {
    background: linear-gradient(to left, transparent 40%, #000000 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    z-index: 1;
}

.gradientimg_back {
    background: linear-gradient(to bottom, transparent 0%, black 100%);
    width: 100%;
    height: 140px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 1;
}

.card_backimage img {
    width: 100%;
    height: 100%;
}

.home-category-container {
    display: none;
    overflow: hidden;
    height: 580px;
    top: 8rem;
    position: relative;
}
.current-item-number{
    color: red;
}

.category_item .view-more-box {
    display: grid;
    place-items: center;
    color: #FFFFFF;
    font-size: 24px;
    width: 100%;
    height: 100%;
    background: transparent;
    border: 1px solid #cccccc2e;
}
.category_item .view-more-box div{
    display: grid;
    place-items: center;
    width: 100%;
    height: 50%;
    padding: 12px;
}

div.view-all:focus .category_item {
    border: 5px #FE0404 solid;
}

/* ====================================End of Home screen=========================== */

/* ====================================Start of search screen=========================== */

.search_title {
    color: #fff;
    font-size: 30px;
    font-family: "Poppins-Regular";
    text-align: left;
    padding: 4px 18px;
}

.search_fullimg {
    width: 100%;
    height: 620px;
    overflow: hidden;
}

.search_alphabet {
    width: 32%;
    float: left;
    margin-right: 15px;
    padding: 20px 0px;
}

.search-keys-list {
    margin: 0px 0px;
    padding: 0px 0px;
}

.search-keys-list .focusable {
    width: 80px;
    height: 30px;
    color: #fff;
    font-size: 20px;
    font-family: "Poppins-Regular";
    display: inline-grid;
    text-align: center;
    /* padding: 23px 23px; */
    border-radius: 4px;
    border: 1px #75749C solid;
    margin: 4px 2px;
    align-items: center;
    position: relative;
}

.search_space {
    position: relative;
    height: 20px;
    border: 2px solid #cccc;
    display: block;
    border-top: none;
    color: transparent !important;
}

.search-keys-list .half_list {
    width: 160px;
    height: 44px;
    margin: 5px 10px;
}

.search-keys-list .focusable:focus {
    background-color: red;
    color: #FFFFFF;
}

.search_result_container {
    width: 67%;
    height: 100%;
    overflow: hidden;
    padding: 15px 8px;
    display: grid;
}

.search-result-heading {
    color: #fff;
    text-align: left;
    font-size: 26px;
    margin: 12px 0px;
}

.search_input {
    background: rgba(117, 116, 156, 60%);
    width: 100%;
    height: 50px;
    padding: 6px 25px;
    font-size: 27px;
    font-style: italic;
    color: #75749C;
}

.mean_container {
    text-align: left;
    padding: 15px;
}

.mean_title {
    color: #fff;
    font-size: 30px;
    font-family: "Poppins-Bold";
    margin-bottom: 10px;
}

ul.mean_descption {
    margin: 0px 0px;
    padding: 0px 0px;
}

ul.mean_descption li {
    margin: 4px 0px;
    padding: 10px 0px;
    color: #fff;
    font-size: 24px;
    font-family: "Poppins-Regular";
}

.search-result-box .focusable {
    float: left;
    width: 44%;
    margin: 10px 10px 10px 0px;
    height: 100%;
    color: #fff;
}

.search-result-box .focusable:nth-child(even) {
    margin: 10px 10px 10px 40px;
}

.item-image-box {
    width: 330px;
    height: 190px;
    border: 2px solid transparent;
}

.item-image-box img {
    width: 100%;
}

.search-result-box .focusable:focus .item-image-box {
    border: 2px solid red;
}

.search-result-box .focusable:focus .slider_txt {
    color: red !important;
}

.search_text_input{
    background: transparent;
    border: none;
    width: 50%;
    padding: 0 10px;
    color: #fff;
}



/* ====================================End of search screen=========================== */


/* ====================================Start of Category screen=========================== */
.category-box {
    top: 18%;
    position: relative;
}

.category-list-container {
    position: relative;
    margin-bottom: 20px;
    height: 570px;
    overflow: hidden;
}

.category-list {
    width: 100%;
    position: relative;
    height: 100%;
}

.category-list .focusable {
    float: left;
    width: 272px;
    height: 160px;
    display: table;
    background: #75749C;
    border: 4px solid transparent;
    margin: .6rem .6rem;
}

.category-list .focusable span {
    color: #fff;
    font-size: 1.4rem;
    display: table-cell;
    vertical-align: middle;
    font-family: 'Poppins-SemiBold';
}

.category-list .focusable:focus {
    border: 5px #FE0404 solid;
}

/* ====================================End of catgeory screen=========================== */

/* ====================================Start of  category item container screen=========================== */
.category-item-container-box {
    margin-top: 370px;
}

.category-item-container-box .fav-heading {
    width: 100%;
    color: #ffffff;
    text-align: left;
    font-weight: 500;
    line-height: 20px;
    font-size: 26px;
    font-family: "Poppins-SemiBold";
    display: inline-block;
    z-index: 990;
    padding: 0 0 .9rem 1rem;
}

.category-item_fullimg {
    overflow: hidden;
    width: 100%;
    height: 300px;
    position: relative;
}

ul.my-list {
    margin: 0px 0px;
    padding: 0px 0px;
}


ul.my-list li.portrait{
    margin: 10px 30px 15px 15px !important;
    width: 192px !important;
    height: 270px !important;
}
/* ====================================End of category item container screen=========================== */


/* ====================================Start of favorite screen=========================== */
.mylist-container-box {
   margin-top: 115px;
}

.mylist-container-box .fav-heading {
    width: 100%;
    color: #ffffff;
    text-align: left;
    font-weight: 600;
    line-height: 20px;
    font-size: 30px;
    font-family: "Poppins-SemiBold";
    display: inline-block;
    z-index: 990px;
    padding: 0 0 .9rem 1rem;
}

.mylist_fullimg {
    overflow: hidden;
    width: 100%;
    height: 565px;
    position: relative;
}

ul.my-list {
    margin: 0px 0px;
    padding: 0px 0px;
}

ul.my-list li {
    display: block;
    margin: 22px 22px;
    margin: 22px 22px;
    float: left;
    width: 320px;
    height: 210px;
    position: relative;
}

ul.my-list li.portrait{
    margin: 10px 30px 15px 15px !important;
    width: 192px !important;
    height: 270px !important;
}



ul.my-list li.portrait .my-list-box {
    width: 192px !important;
    height: 288px !important;
}

.my-list-box img {
    width: 100%;
    /* height: 203px; */
    position: relative;
    border: 5px transparent solid;
}

.fav-item-title{
    color: #fff;
    font-size: 20px;
    margin-top: 7px;
    font-family: "Poppins-Regular";
}

.my-list-item-title {
    color: #fff;
    font-size: 20px;
    margin-top: 7px;
    font-family: "Poppins-Regular";
}

ul.my-list li:focus .my-list-box img {
    border: 5px #FE0404 solid;
}

.favorite-not-found {
    color: #000000;
    font-size: 26px;
    line-height: 20px;
    font-family: "Poppins-SemiBold";
    width: 58%;
    /* transform: translate(45%, 18%); */
    padding: 1.3rem;
    border: 5px solid red;
    border-radius: 10px;
    background: #bdcedd;
    margin: 0 auto;
    top: 4rem;
    position: relative;
}

.favorite-not-found h4{
    color: #000000;
    font-size: 2rem;
    line-height: 30px;
    font-family: "Poppins-Medium";
    font-weight: 600;
    padding: 1rem;
    text-underline-offset: 1rem;
}

.favorite-not-found .favorite-not-found-message{
    color: #000;
    font-size: 28px;
    font-family: "Poppins-Regular";
    font-weight: 500;
    padding: .2rem;
    line-height: 1.2;
    /* text-align: justify; */
    background: #bdcedd;
    margin: 1rem 0;
}

/* ====================================End of favorite screen=========================== */
/* ====================================Start of setting screen=========================== */
.setting-container-box {
    display: flex;
    position: relative;
}

.setting-page-sidebar {
    width: 100%;
    height: 570px;
    position: relative;
}

.left_settingbar {
    width: 350px;
    height: 720px;
    float: left;
    row-gap: 8px;
    padding: 20px 0px;
    display: grid;
}

.right_sidein {
    float: left;
    width: 100%;
    padding: 40px;
    overflow: auto;
    max-height: 100%;
    text-align: left;
    padding-top: 30px;
    overflow: unset;
}

h4.settting-main-heading {
    color: #fff;
    font-family: "Poppins-Medium";
    font-size: 26px;
    margin: 15px 0px;
    font-weight: bolder;
}

h4.settting-sub-heading {
    color: #fff;
    font-family: "Poppins-Medium";
    font-size: 24px;
    margin: 10px 0px;
}

.menutxt {
    margin: auto 0;
    color: #fff;
    font-size: 20px;
    text-align: left;
    padding: 0px 0px;
    list-style-type: none;
    display: inline-block;
    position: relative;
    position: relative;
    font-family: "Poppins-Regular";
}

.setting-qr-container {
    position: relative;
    width: 100%;
}
.inner-qr-box{
    width: 180px;
    height: 180px;
}
.inner-qr-box img{
    width: 100%;
    height: auto;
    border: 4px solid transparent;
}
.privacy-center-box{
    position: relative;
    height: 610px;
    overflow-y: hidden;
}
.qr-box{
    border: none;
    outline: none;
}
.qr-box:focus img{
    border: 4px solid red;
}
.settingnavbar {
    margin: 0px 0px;
    padding: 0px 0px;
}

.settingnavbar .focusable {
    margin: 10px auto;
    text-align: left;
    padding: 0px 0px;
    list-style-type: none;
    display: flex;
    position: relative;
}

.settingnavbar .focusable img {
  padding: 10px;
}

.settingnavbar .focusable.activated {
    background: red;
}

.right_sidein h1,
.right_sidein h2,
.right_sidein h3,
.right_sidein h4,
.right_sidein h5,
.right_sidein h6 {
    color: #fff;
    font-family: "Poppins-Medium";
    font-size: 26px;
    margin: 1rem 0 2rem 0;
}

.right_sidein p {
    margin: 1rem 0;
    color: #fff;
    font-size: 20px;
    line-height: 30px;
    font-family: "Poppins-Regular";
}

.setting-menus-heading {
    color: #fff;
    font-size: 32px;
    font-family: "Poppins-Medium";
    position: relative;
    margin-top: 86px;
}

.tablist {
    margin: 30px 0px;
    padding: 0px 0px;
}

.tablist .focusable {
    width: 180px;
    color: #fff;
    font-size: 24px;
    line-height: 30px;
    padding: 8px 10px;
    font-family: "Poppins-Regular";
    margin: 12px 0;
}

.tablist .activelist {
    background: #fff;
    color: #000;
}

.tablist .active-autoplay {
    background: #fff;
    color: #000;
}

.tablist .focusable img {
    margin-right: 20px;
    margin-left: 20px;
}

.description-container{
    font-size: 1.2rem;
    display: block;
    position: relative;
    color: #FFFFFF;
    font-weight: 400;
    line-height: 2rem;
    font-family: 'Poppins-Regular';
    text-align: justify;
    max-height: 95%;
    white-space: wrap;
    text-wrap: wrap;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
}

.description-container:focus-within {
    border: 2px solid red;
}

.description-box {
    width: 100%;
    padding: 10px;
    height: auto;
    display: inline-block;
    position: relative;
    text-align: justify;
    position: absolute;
}
.users-age-stage, .autoplay-case {
    display: flex;
    justify-content: center;
}
.users-age-stage img{
    display: none;
}

.activelist .users-age-stage img{
    display: block;
}

.autoplay-case img{
    display: none;
}

.active-autoplay .autoplay-case img{
    display: block;
}

.tablist .focusable:focus{
    background-color: red !important;
}

/* ====================================End of setting screen=========================== */
/* ====================================Start of Live tv screen=========================== */
.live_container {
    width: 1144px;
    height: 344px;
    overflow: hidden;
    position: relative;
}

ul.livetable li {
    background: rgba(117, 116, 156, .7);
    padding: 6px 15px;
    margin: 10px 10px;
    float: left;
    height: 100px;
    position: relative;
}

ul.livetable li.live-list {
    background: rgb(117, 116, 156);
    border: 2px solid transparent;
}

ul.livetable li.live-list:focus {
    border: 2px solid red;
}

ul.livetable li.live-list:focus span {
    color: red;
}

.live_time {
    /* margin: 10px 0px; */
    padding: 4px 0px;
    color: #fff;
    font-size: 24px;
    display: block;
    font-family: "Poppins-Regular";
}

.livetable_fullbox {
    display: table;
    /* overflow-x: hidden; */
    width: 1154px;
}


.container_block {
    width: 1160px;
    margin: 0px 0px;
    margin-top: 3rem;
    overflow: auto;
}

table {
    font-family: "Open Sans", sans-serif;
    position: relative;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
    width: 100%;
    border: none;
}

table * {
    border: none;
}

table thead tr {
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
}

table thead tr th,
table tbody tr td {
    vertical-align: middle;
}

table tr>th:first-child,
table tr>td:first-child {
    position: sticky;
    left: 0;
}

.Live_time_show {
    background: rgba(117, 116, 156);
    /* padding: 10px 20px; */
    /* margin: 10px 10px; */
    /* width: 250px; */
    /* height: 100px; */
    overflow: hidden;
    text-overflow: ellipsis;
}

.live_time_img {
    background: rgba(117, 116, 156);
    padding: 10px 20px;
    margin: 10px 10px 10px 0px;
    width: 250px;
    height: 100px;
    text-align: center;
}

.live_time_img img {
    margin: 8px auto;
}

.live_intime {
    color: #fff;
    font-size: 19px;
}

.live-list.channels {
    padding: 0;
    width: 140px;
    height: 100px;
    margin: 10px 10px;
}

.live-list.channels img {
    width: 100%;
    height: 200px;
    max-width: 100%;
    max-height: 100%;
}

.live-list.channels span {
    display: block;
    font-size: 16px;
    color: #000000;
    padding: 8px 0px 8px 0px;
}

.program-list span{
    color: #fff;
    font-size: 24px;
    display: block;
    font-family: "Poppins-Regular";
}

/* ====================================End of Live tv screen=========================== */


/* ====================================Start of detail screen=========================== */
.detail-top-banner {
    position: relative;
    /* padding: 30px 0px; */
    height: 100%;
}

.detail-top-banner .card_details {
    margin: 0;
    padding-top: 100px;
}

.detail-top-banner .card_backimage {
    height: 60%;
}

.detail-top-banner .gradientimg {
    height: 100%;
}

.detail-top-card h1 {
    height: 70px;
    color: #fff;
    font-size: 28px;
    line-height: 38px;
    margin-bottom: 5px;
    font-family: "Poppins-Bold";
}

p.full-detail-desc{
        height: 115px;
        font-size: 20px
}

.detail-top-card ul.card_category li {
    font-size: 20px;
    margin: 10px 12px 3px 0px;
    line-height: 28px;
}

.detail-top-card .datalist {
    line-height: 32px;
    color: #FFF;
    font-size: 24px;
}

.detail-top-card .datalist dt {
    float: left;
    left: 4px;
    color: #B2B2B2;
}

.detail-top-card .datalist dd {
    position: relative;
    left: 10px;
}

.detail-top-card p.partxt {
    margin: 0;
}

div.detail-screen-buttons {
    position: relative;
    margin: 15px 0px 0px 0px;
}

div.detail-screen-buttons div.focusable {
    position: relative;
    width: 400px;
    margin: 10px 0px;
    display: block;
    list-style-type: none;
    color: #FFFFFF;
    font-weight: bolder;
    font-family: 'Poppins-Bold';
}

div.detail-screen-buttons div.focusable .btn_primary {
    padding: 8px;
}

div.detail-screen-buttons div.focusable .btn_transparent {
    color: #FFFFFF;
}

div.detail-screen-buttons div.focusable span {
    position: relative;
    font-size: 22px;
    bottom: 4px;
}

div.detail-screen-buttons div.focusable img.icon {
    margin-right: 10px;
}

div.detail-screen-buttons div.focusable .button_box {
    text-align: left;
    padding: 10px 8px;
}

.you-might-also-like-container {
    /* top: 14px; */
    position: relative;
}

.might-also-like-heading {
    color: #fff;
    text-align: left;
    font-size: 26px;
    line-height: 20px;
    padding: 6px 0px;
}

.similar-item-list-box {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.detail-screen-carousel {
    display: flex;
    width: 1000000000000px;
}

.detail-screen-carousel li {
    width: 224px;
    /* height: 160px; */
    color: #FFFFFF;
    position: relative;
    margin: 10px 4px;
}

.detail-screen-carousel li .sliderbox {
    width: 230px;
    height: 129px;
    border: 5px solid transparent;
}

.detail-screen-carousel li img {
    width: 100%;
    height: 100%;
}

.detail-screen-carousel li:focus {
    color: red;
}

.detail-screen-carousel li:focus .sliderbox {
    border: 5px solid red;
}
.detail-screen-carousel li p.slider_txt{
    display: none;
}

.toast{
    width: 250px;
    font-size: 1.4rem;
}

.fade {
    transition: opacity .5s linear !important;
}
.toast-body{
    color: white;
    background-color: #597aaa;
}
/* ====================================End of dettail screen=========================== */

/* ====================================start of login keyboard=========================== */
.login_keyboard_container{
    width: 100vw;
    height: auto;
    position: relative;
    bottom: 0;
    display: none;
    padding: 0;
}
.searchminbox{
    position: relative;
    margin: 0 auto;
    width: 95%;
}
ul{
    margin-top: 0;
    padding: 0;
}
.arrow_list {
    width: 150px;
    float: left;
    margin-right:25px  !important;
    display:block;
}
.searchmin_list {
    width: 600px;
    float: left;
    margin-right: 25px !important;
    display:block;
}
.no_list {
    width: 260px;
    float: left;
    margin-right:25px  !important;
    display:block;
}
.numeric_list {
    width: 100px;
    float: left;
    display:block;
}
.arrow_list, .arrow_list .focusable, .searchmin_list, .searchmin_list .focusable, .no_list .focusable, .numeric_list .focusable {
    margin: 0px 0px;
    padding: 0px 0px;
    list-style-type:none;
}
.arrow_list .focusable {
    padding: 6px 0px;
    display: table;
    color: #fff;
    text-align: center;
    font-size: 35px;
    margin-bottom: 4px;
    background: #3751ee;
    border-radius:2px;
    width:100%;
    height: 47px;
}
.searchmin_list .focusable{
    padding: 8px 8px;
    display: inline-block;
    color: #fff;
    text-align: center;
    font-size: 35px;
    margin-bottom: 4px;
    background: #3751ee;
    border-radius:2px;
    width: 80px;
    height: 57px;
}
.no_list .focusable {
    padding: 8px 8px;
    display: inline-block;
    color: #fff;
    text-align: center;
    font-size: 35px;
    margin-bottom: 4px;
    background: #3751ee;
    border-radius:2px;
    width: 80px;
    height: 57px;
}
.numeric_list .focusable {
    padding: 8px 8px;
    display: block;
    color: #fff;
    text-align: center;
    font-size: 35px;
    margin-bottom: 4px;
    background: #3751ee;
    border-radius:2px;
    width: 130px;
    height: 57px;
    display: grid;
    place-items: center;
}
.halfminbox {
    width: 70px !important;
    float: left;
}
.halfminbox img{
    width: 40px;
    height: auto;
}
.searchmin_boxlist {
    width: 100%;
    margin: 2px auto;
    display: table;
    position: relative;
    bottom: 0;
    background: #000000;
    padding: 4px 0px;
}
.arrowblock {
    display:block;
    clear: both;
    width:100%;
}
.arrowblock img{
    width: 39px;
    height: auto;
}
.halfgap {
    margin-right: 10px !important;
    margin-bottom: 30px !important;
}
.gaptop {
    margin-top: 26px !important;
}
.fullbtn {
    width: 582px !important;
}
.halfinbtn {
    width: 415px !important;
}
.gaptop{
    padding: 11px 0px !important;
}

.arrow_list .focusable:focus,
.searchmin_list .focusable:focus,
.no_list .focusable:focus,
.numeric_list .focusable:focus {
    background: #f84e1b !important;
}

.selected-input {
    border: 2px solid #f84e1b;
    /* background-color: #ccc; */
}

/* ====================================End of login keyboard=========================== */

/* ====================================Start of Account container CSS=========================== */
.account_container{
    width: 100vw;
    height: 100vh;
    position: relative;
    top: 0;
    left: 0;
    margin: auto;
    display: none;
}

.account-box{
    width: 100vw;
    height: 100vh;
    position: relative;
    top: 0;
    left: 0;
    margin: auto;

}
.account-box .row{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-card {
/*    height: 50%;*/
    text-align: center;
    /* border: 2px solid #FFFFFF;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
    /* display: grid;
    place-items: center; */
}

.profile-image-container {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ddd;
}

.profile-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-card div{
    color: #FFFFFF;
    font-size: 34px;
    text-align: center;
    font-family: 'Poppins-Regular';
}

button.logout-btn {
   width: 200px;
   height: auto;
   padding: 15px;
   color: #FFFFFF;
   font-size: 32px;
   border-radius: 2px;
   background-color: #000000;
   border: 2px solid #FFFFFF;
   font-family: 'Poppins-Regular';
}

.logout-btn:focus{
    background-color: red;
    color: #000000;
    border: none;
}

.account-name{
    text-transform: capitalize;
}





/* ====================================End of Account container CSS=========================== */

/* ====================================Start of season container CSS=========================== */

.season_conatiner{
    display: none;
    width: 100%;
    height: 18rem;
    position: relative;
    overflow-y: hidden;
}

.season_row{
    width: 100%;
}

.season_heading{
    font-size: 1.6rem;
    color: #fff;
    font-family: 'Poppins-Regular';
    /* margin: 10px 0px; */
    /* margin-bottom: 10px; */
    /* position: sticky; */
    top: 0;
    z-index: 1;
    padding: 2px 0;
    white-space: nowrap;
    text-align: left;
}

.episode_list_container {
    overflow-x: auto; /* Enable horizontal scrolling */
}

.episode_list {
    height: 11rem;
    text-align: left;
    display: inline-flex;
    justify-content: left;
    width: 1000000000000px;
    display: flex;
    white-space: nowrap; /* Prevent wrapping */
    padding: 2px 0;
}

.episode-image{
    width: 18rem;
    height: 9rem;
    margin: 1rem .8rem 0 0;
    flex: 0 0 auto;
    border: 4px solid transparent;
}

.episode-image img{
    width: 100%;
    height: 100%;
    max-width: 18rem;
    /* height: auto; */
}

.episode-image:focus {
    border: 4px solid red;
}

/*
.number-keyboard .focusable{
    width: 300px;
    height: 300px;
}*/

/* ====================================End of season container CSS=========================== */

/* --- Category item list: make ul.my-list li match home rows sizing/gutter --- */
/* Replace the previous ul.my-list li rules for category item screen with these. */

ul.my-list li {
    display: block;
    margin: 10px 6px 15px 0;   /* match home rows: small right gutter */
    float: left;
    width: 290px;              /* same as home row landscape card width */
    height: 164px;             /* same as home row landscape card height */
    position: relative;
    z-index: 1;
}

/* Portrait variant on the category item list */
ul.my-list li.portrait {
    margin: 10px 6px 15px 0 !important;
    width: 192px !important;
    height: 288px !important;
}

/* Make the inner image behave like home rows */
ul.my-list li .my-list-box {
    width: 100%;
    height: 100%;
    position: relative;
}

ul.my-list li .my-list-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 5px solid transparent;
}

/* Focus styling consistent with home rows */
ul.my-list li:focus .my-list-box img,
ul.my-list li:focus .category_item img {
    border: 5px #FE0404 solid;
}

/* Make sure the `.category-item_fullimg` area doesn't push content under the left menu;
   small default left padding (JS will override with exact menu width). */
.category-item_fullimg {
    padding-left: 12px;
}

/* If category items are rendered as ul.my-list > li (legacy), ensure same sizing */
ul.my-list li {
    display: block;
    float: left;
    width: calc((100% - (5 * 12px)) / 6);
    box-sizing: border-box;
    margin: 10px 6px 15px 0;
    position: relative;
    z-index: 1;
    height: 164px; /* landscape card height kept consistent */
}

/* Portrait variant: keep aspect ratio but allow width derived from the 6-column grid */
div.category_list div.portrait,
ul.my-list li.portrait {
    height: 288px !important;
    /* portrait cards should be narrower; scale from the computed slot width */
    width: calc(((100% - (5 * 12px)) / 6) * (192 / 290));
}

/* Inner image wrappers fill their tile */
div.category_list div.category_item,
ul.my-list li .my-list-box,
ul.my-list li .category_item {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Image sizing and focus border match home rows */
div.category_list div.category_item img,
ul.my-list li img,
ul.my-list li .category_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 5px solid transparent;
}

div.category_list .category-items:focus img,
ul.my-list li:focus .my-list-box img,
ul.my-list li:focus .category_item img {
    border: 5px #FE0404 solid;
}

/* Small nicety: ensure focused tile keeps a small left margin visible when scrolled */
div.category_list .category-items:focus,
ul.my-list li:focus {
    scroll-margin-left: 12px;
}

/* Force category list tiles to match home-row tile dimensions and box model so 6 fit reliably. */
/* Scope to the category screen so it's non-invasive. */

.category-item_fullimg,
.category-item_fullimg .category_list,
.category-item_fullimg ul.my-list {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* Landscape tile: match home rows (290x164) */
.category-item_fullimg .category_list .category-items,
.category-item_fullimg ul.my-list li {
  width: 290px !important;
  height: 164px !important;
  box-sizing: border-box;
  margin: 10px 6px 15px 0 !important; /* home gutter */
  float: left;
}

/* Portrait override matches home rows portrait sizes */
.category-item_fullimg .category_list .category-items.portrait,
.category-item_fullimg ul.my-list li.portrait {
  width: 192px !important;
  height: 288px !important;
}

/* Ensure inner wrapper fills the tile and images don't create extra layout */
.category-item_fullimg .category-items .category_item,
.category-item_fullimg ul.my-list li .my-list-box,
.category-item_fullimg ul.my-list li .category_item {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* Images should cover tile area and not change layout size */
.category-item_fullimg .category-items .category_item img,
.category-item_fullimg ul.my-list li img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  box-sizing: border-box;
  border: 5px solid transparent;
}

/* Focus styling consistent with home rows */
.category-item_fullimg .category-items:focus img,
.category-item_fullimg ul.my-list li:focus img {
  border-color: #FE0404 !important;
}
/* Ensure focus border does not change tile size: include border in box model and keep a transparent default border.
   Scoped to the category area so it doesn't affect other screens.
*/

.category-item_fullimg,
.category-item_fullimg .category_list,
.category-item_fullimg ul.my-list,
.category-item_fullimg .category_list .category-items,
.category-item_fullimg ul.my-list li {
  box-sizing: border-box;
}

/* Put the 5px transparent border on the inner wrapper so focus color doesn't change layout */
.category-item_fullimg .category-items .category_item,
.category-item_fullimg ul.my-list li .my-list-box,
.category-item_fullimg ul.my-list li .category_item {
  border: 5px solid transparent !important;
  box-sizing: border-box !important;
  width: 100%;
  height: 100%;
}

/* Focused state: only change color (not size) */
.category-item_fullimg .category-items:focus .category_item,
.category-item_fullimg ul.my-list li:focus .my-list-box,
.category-item_fullimg ul.my-list li:focus .category_item {
  border-color: #FE0404 !important;
}

/* Ensure images don't themselves add borders or sizing differences */
.category-item_fullimg .category-items img,
.category-item_fullimg ul.my-list li img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  border: none !important;
  box-sizing: border-box !important;
}
.category-item_fullimg .category_list .category-items,
.category-item_fullimg ul.my-list li {
  width: calc(290px - 10px) !important;  /\* 290 - 10 = 280px \*/
  height: calc(164px - 10px) !important; /\* 164 - 10 = 154px \*/
}

.category-item_fullimg .category_list .category-items.portrait,
.category-item_fullimg ul.my-list li.portrait {
  width: calc(192px - 10px) !important;  /\* portrait fallback \*/
  height: calc(288px - 10px) !important;
}
/* Scoped, minimal permanent CSS for Category (keeps Home rows untouched)
   - Ensures the category area has a comfortable left standoff and wider gutters
   - Keeps border-box + reserved transparent border so focus color doesn't change layout
   - Scope: only elements under .category-item_fullimg (category page / See All)
*/

/* Tweak these values (start conservative) */
:root {
  --fh-category-gutter: 16px;  /* spacing between tiles */
  --fh-reserved-border: 5px;   /* reserve border space so focusing doesn't resize */
}

/* Category viewport: set standoff only here (does not touch .container-box) */
.category-item_fullimg {
  padding-left: var(--fh-category-left) !important;
  box-sizing: border-box;
}

/* Inner list gutters and box model */
.category-item_fullimg .category_list,
.category-item_fullimg ul.my-list,
.category-item_fullimg .my-list {
  margin-left: 0 !important;        /* ensure no legacy negative nudge remains */
  padding-left: 0 !important;
  gap: var(--fh-category-gutter);
  box-sizing: border-box;
}

/* tile gutter and layout (scoped) */
.category-item_fullimg .category_list .category-items,
.category-item_fullimg ul.my-list li {
  margin-right: var(--fh-category-gutter) !important;
  margin-left: 0 !important;
  box-sizing: border-box;
}

/* Reserve the focus border on the inner wrapper rather than the tile itself */
.category-item_fullimg .category-items .category_item,
.category-item_fullimg ul.my-list li .my-list-box,
.category-item_fullimg ul.my-list li .category_item {
  border: var(--fh-reserved-border) solid transparent !important;
  box-sizing: border-box !important;
  width: 100%;
  height: 100%;
}

/* Focus: only change border color */
.category-item_fullimg .category-items:focus .category_item,
.category-item_fullimg ul.my-list li:focus .my-list-box,
.category-item_fullimg ul.my-list li:focus .category_item {
  border-color: #FE0404 !important;
}

/* Ensure images don't add extra size */
.category-item_fullimg .category-items img,
.category-item_fullimg ul.my-list li img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border: none !important;
  box-sizing: border-box !important;
}

/* Keep a comfortable visible gap when focused */
.category-item_fullimg .category_list .category-items:focus,
.category-item_fullimg ul.my-list li:focus {
}
.category-item_fullimg .category_list .category-items,
.category-item_fullimg ul.my-list li {
  width: calc(290px - 10px) !important;  /\* 290 - 10 = 280px \*/
  height: calc(164px - 10px) !important; /\* 164 - 10 = 154px \*/
}

.category-item_fullimg .category_list .category-items.portrait,
.category-item_fullimg ul.my-list li.portrait {
  width: calc(192px - 10px) !important;  /\* portrait fallback \*/
  height: calc(288px - 10px) !important;
}
/* Show up to 4 lines for the banner description and slightly reduce font-size so 4 lines are comfortable.
   Scoped to #banner_detail_desc only. Keeps ellipsis and is reversible.
*/
#banner_detail_desc {
  /* multi-line clamp (WebKit / Blink) */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;

  /* fallbacks and trimming */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
  font-size: 20px;


  box-sizing: border-box !important;
}
/* Scoped category grid overrides. Include this after your main style.css so it wins. 
   Uses CSS Grid inside .category-item_fullimg only (non-invasive elsewhere). */

.category-item_fullimg {
  --fh-category-gutter: 16px;  /* horizontal gap between tiles */
  --fh-reserved-border: 5px;   /* reserved border space (focus) */
  --columns: 6;                /* default columns if not set via dataset / JS */
  box-sizing: border-box;
}

/* Use grid for the category item list (responsive, predictable) */
.category-item_fullimg .category_list,
.category-item_fullimg ul.my-list {
  display: grid !important;
  grid-template-columns: repeat(var(--columns), 1fr) !important;
  gap: var(--fh-category-gutter) !important;
  align-items: stretch;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Each tile fills its grid cell; remove float-based sizing conflicts */
.category-item_fullimg .category_list .category-items,
.category-item_fullimg ul.my-list li {
  float: none !important;
  width: auto !important;
  height: 164px !important; /* landscape height preserved */
  box-sizing: border-box !important;
  margin: 0 !important; /* gap handled by grid gap */
}

/* Portrait tile variant: taller height, same column slot but scaled width via grid */
.category-item_fullimg .category_list .category-items.portrait,
.category-item_fullimg ul.my-list li.portrait {
  height: 288px !important;
}

/* Inner wrapper: reserve transparent border so focus border doesn't change layout */
.category-item_fullimg .category-items .category_item,
.category-item_fullimg ul.my-list li .my-list-box,
.category-item_fullimg ul.my-list li .category_item {
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  border: var(--fh-reserved-border) solid transparent !important;
  display: block !important;
}

/* Images fill their wrapper and won't change tile size */
.category-item_fullimg .category-items img,
.category-item_fullimg ul.my-list li img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border: none !important;
  box-sizing: border-box !important;
}

/* Focus: change border color only (no size change) */
.category-item_fullimg .category-items:focus .category_item,
.category-item_fullimg ul.my-list li:focus .my-list-box,
.category-item_fullimg ul.my-list li:focus .category_item {
  border-color: #FE0404 !important;
}

/* Optional: keep the scroll margin left so focus isn't hidden under left menu */
.category-item_fullimg .category-items:focus,
.category-item_fullimg ul.my-list li:focus {
  scroll-margin-left: 12px;
}

/* Ensure this scoped grid wins over older rules by using specificity and !important where needed. */

/* Remove left/right padding and margin from view-more tile and its words */
.category-items.view-all .view-more-box,
.category-items.view-all .view-all-box {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure each word is shrink-to-fit and centered with no extra left-gap */
.category-items.view-all .view-all-word {
  display: inline-block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
  max-width: calc(100% - 0px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}
/* ==================================== Start of log-in screen=========================== */

.login_container {
    width: 100%;
    height: 100%;
    display: none;
    display: flex;
    position: relative;
    align-items: center;
    display: -ms-flexbox;
    display: -webkit-flex;
    -ms-flex-align: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
}

.logo_container {
    width: 100%;
    display: flex;
    text-align: center;
    position: relative;
    justify-content: center;
}

.logo_container img {
    width: 25%;
}
.login-logo-box {
    position: absolute;
    top: 40px;
    /* CRITICAL FIX: Force horizontal centering for absolute element */
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    z-index: 1000; /* Ensure it stays above other elements */
    pointer-events: none; /* Let clicks pass through if it overlaps anything */
}

.login_with_container {
    display: flex;
    position: relative;
    text-align: center;
    background: #000;
}

.login_with_email {
    border-right: 1px solid #FFFFFF;
}

.block_divider {
    width: 2px;
    position: relative;
    background-color: #fff;
}

.login_with_code {
    border-left: 1px solid #FFFFFF;
    padding-left: 4px;
}

.login_with_emial_phone {
    color: #FFFFFF;
    text-align: center;
}

.button_box {
    text-align: center;
    position: relative;
}

.login_txt {
    color: #FFFFFF;
    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 48px;
    font-family: 'Poppins-Regular';
}
.login_txt span{
    color: red;
}

.login_input {
    padding: .5rem;
    outline: none;
    color: #FFFFFF;
    margin: 1.5rem 0;
    font-size: 2.2rem;
    position: relative;
    background: rgba(117, 116, 156, 0.6);
    border: 2px solid transparent;
}

.login_input::placeholder {
    font-size: 32px;
    font-weight: 400;
    line-height: 48px;
    font-style: normal;
    font-family: 'Poppins-Regular';
}

.btn_next {
    position: relative;
    text-align: center;
}

.btn_submit {
    /* Global properties for all buttons using this class */
    width: 30%; /* Retains original width for cases not overridden */
    color: #000;
    margin: 0 auto;
    
    /* Reduced size for consistency and vertical space saving */
    font-size: 1.6rem; 
    font-weight: 700;
    line-height: 2.2rem; /* Reduced from 3rem */
    
    /* Flow control for consistency and wrapping fix */
    white-space: nowrap !important; /* Forces text onto a single line everywhere */
    
    position: relative;
    align-items: center;
    text-align: center;
    font-style: normal;
    background: #FFFFFF;
    font-family: 'Poppins-Regular';
    height: auto; /* Allows element height to be determined by line-height/padding */
    box-sizing: border-box; /* Safest box model */
}

.btn_logincode {
    margin: 0 auto;
    color: #181818;
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 4rem;
    align-items: center;
    position: relative;
    text-align: center;
    font-style: normal;
    font-family: 'Poppins-Regular';
    background-color: #000000;
}

.login_code_box {
    padding: 4px;
    height: 168px;
}

.login_code_box div {
    padding: 25px;
    font-size: 80px;
    color: #FFFFFF;
    position: relative;
    position: absolute;
    position: relative;
    font-weight: bolder;
    align-content: center;
    text-transform: uppercase;
    background-color: #181818;
}

.login_code_box input {
    text-transform: uppercase;
}

::placeholder {
    color: #8080807d;
}

input:focus {
    border: 2px solid #FE0404;
}

.btn_submit:focus {
    color: #FFFFFF;
    background: #FE0404;
    border: 2px solid #FE0404;
}
.login_container .account-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 8px);
  width: 84%;
  max-width: 680px;
  padding: 6px 8px;
  color: #FFFFFF;
  font-size: 1.0rem;
  line-height: 1.25rem;
  text-align: center;
  white-space: normal;
  background: transparent;
  z-index: 2000;
  box-sizing: border-box;
  pointer-events: none;               /* non-interactive by default */
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* Hide the hint while any control inside the login container is focused (keyboard active).
   Supports both :focus-within and an explicit .input-focused class (JS fallback). */
body.fh-login-active .login_container:focus-within .account-hint,
body.fh-login-active .login_container.input-focused .account-hint {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  pointer-events: none;
}

/* Visually-hidden utility (screen-reader-only) - keep one canonical definition in global CSS */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Class to hide the visible hint (use in JS). Do NOT reuse .visually-hidden for visible elements. */
.fh-login-hint-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Keep empty error container from overlaying the hint */
#login_error:empty { display: none !important; }
#login_error[aria-hidden="true"] { display: none !important; }

/* Global baseline: account hint is hidden unless login is active and JS marks it visible */
.account-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* horizontal centering baseline */
  top: calc(100% + 8px);
  width: 84%;
  max-width: 680px;
  padding: 6px 8px;
  color: #FFFFFF;
  background: transparent;
  z-index: 2000;
  box-sizing: border-box;

  /* hidden by default globally to avoid showing on splash/other screens */
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Only show when login is active, container is ready, and JS marked it visible */
body.fh-login-active .login_container.ready .account-hint.is-visible {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: none;
}
/* Signup line final placement & styling */
.login_container .signup-line {
  /* Make it span full available width below form */
  display: block;
  width: 100%;
  max-width: 680px;
  margin: 16px auto 0;
  padding: 4px 8px;
  box-sizing: border-box;
  text-align: center;
  color: #fff !important;         /* Force white text */
  font-size: 14px;
  line-height: 1.25rem;
  font-family: 'Poppins-Regular', Arial, sans-serif;
  /* If parent is flex-row, force this to be new row */
  flex: 0 0 100%;
  order: 60;                       /* Larger than button's order (if button has an order) */
}

/* Hide while initializing (class used by JS) */
.login_container .signup-line.fh-init-hidden {
  display: none;
  visibility: hidden;
  opacity: 0;
}

/* Visible state (JS toggles .is-visible) */
.login_container .signup-line.is-visible {
  display: block;
  visibility: visible;
  opacity: 1;
  transition: opacity 180ms ease;
}

/* Ensure the visual domain segment is white even if nested */
.login_container .signup-line .domain-visual {
  color: #fff !important;
}

/* Optional: when inputs focused, keep line visible (remove any previous opacity fade logic) */
.login_container.input-focused .signup-line {
  opacity: 1;
}
/* Shared Horizontal Button Layout for Login AND Signup */
#loginActionButtons,
#signupActionButtons {  /* <--- ADDED THIS SELECTOR */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin: 1.5rem auto;
    width: 80%;
}

/* Apply button sizing overrides to both containers */
#loginActionButtons .btn_submit,
#loginActionButtons button.btn_submit,
#signupActionButtons .btn_submit,       /* <--- ADDED THIS */
#signupActionButtons button.btn_submit { /* <--- ADDED THIS */
    width: auto !important;
    flex: 0 0 auto;
    padding: 0.6rem 1.5rem;
    margin: 0 !important;
}
/* Tighten Error Box to reclaim vertical space */
#login_error, .error-box {
    margin: 5px 0 !important; /* Reduced from 10px+ */
    min-height: 24px; /* Fix height to prevent collapse/expand jitter */
    padding: 0 !important;
}

/* Reduce Input Margins */
.login_input {
    margin: 0.8rem 0 !important; /* Reduced from 1.5rem */
}

/* Reduce Button Margins */
.btn_submit {
    margin-bottom: 10px !important;
}

/* Ensure Logo hides completely to give space to keyboard */
body.keyboard-active #login_logo,
body.keyboard-active .login-logo-box {
    display: none !important;
}
/* ====================================End of log-in screen=========================== */