/* Category search: keep the magnifier and placeholder on the same row. */
.cateSearch {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    width: 100%;
    background: #292828;
}

.cateSearch input,
.livecateSearch input {
    display: block;
    flex: 1 1 auto;
    box-sizing: border-box;
    min-width: 0;
    width: 100% !important;
    padding-left: 60px !important;
    padding-left: clamp(40px, 3.125vw, 60px) !important;
}

.cateSearch i,
.livecateSearch i {
    position: absolute !important;
    top: 50% !important;
    left: 20px !important;
    left: clamp(12px, 1.05vw, 20px) !important;
    z-index: 2;
    margin: 0 !important;
    line-height: 1;
    color: #fff;
    pointer-events: none;
    transform: translateY(-50%);
}

/* Content headers, EPG, settings and Switch User. Dashboard and login use
   different class names and intentionally keep their original layout. */
.headerMain > .row,
.live_header > .row,
.pop_live_header > .row,
.movieInHeader > .row,
.masterSearchHeader > .row,
.listuserHeader > .row {
    align-items: center !important;
}

.liveInBack,
.liveInLogo,
.livebacks,
.liveLogos,
.movieInBack,
.movieInLogo,
.masterSearchBack,
.masterSearchLogo {
    display: flex !important;
    align-items: center !important;
    min-height: 32px;
    margin-top: 0 !important;
}

.liveInBack a,
.liveInLogo a,
.livebacks a,
.liveLogos a,
.movieInBack a,
.movieInBack span,
.movieInLogo a,
.masterSearchBack a,
.masterSearchLogo a {
    display: flex !important;
    align-items: center !important;
    min-height: 32px;
}

.headerMain .liveInBack img,
.masterSearchHeader .liveInBack img,
.pop_live_header .livebacks img,
.movieInHeader .movieInBack img,
.live_header .liveback a[title="Back"] img,
.listuserHeader .liveInBack img {
    display: block;
    width: clamp(32px, 2.6vw, 50px) !important;
    min-width: clamp(32px, 2.6vw, 50px) !important;
    max-width: clamp(32px, 2.6vw, 50px) !important;
    flex: 0 0 clamp(32px, 2.6vw, 50px) !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.liveInLogo img,
.liveLogos img,
.movieInLogo img,
.masterSearchLogo img {
    display: block;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.liveLogos,
.liveLogos a {
    justify-content: center;
}

/* Dashboard cards: keep each label centered beneath its icon. */
.bodyDiv .section_img1,
.bodyDiv .section_img2,
.bodyDiv .section_img3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bodyDiv .section_img1 > span:first-child,
.bodyDiv .section_img2 > span:first-child,
.bodyDiv .section_img3 > span:first-child {
    display: block;
    width: 100%;
    line-height: 0;
}

.bodyDiv .section_img1 .section-logoLive,
.bodyDiv .section_img2 .section-logo,
.bodyDiv .section_img3 .section-logo {
    position: static !important;
    display: block;
    height: auto;
    margin: 0 auto !important;
}

.bodyDiv .section-title-1,
.bodyDiv .section-title-2,
.bodyDiv .section-title-3 {
    position: static !important;
    display: block;
    margin: clamp(8px, 1vw, 20px) 0 0 !important;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

/* Subscription Info only. */
.userinfoPage .generalSettingMain {
    background-color: #36363b !important;
}

/* Master Search action button. */
.masterSearchHeader > .row > .padding:last-child {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: clamp(8px, 0.8vw, 16px) !important;
    padding-left: clamp(8px, 0.8vw, 16px) !important;
}

.masterSearchHeader .msearchtbn,
.masterSearchHeader .msearchtbn:hover,
.masterSearchHeader .msearchtbn:focus,
.masterSearchHeader .msearchtbn:active {
    box-sizing: border-box;
    width: 100% !important;
    min-width: max-content;
    white-space: nowrap;
    background-color: #5cb85c !important;
    border-color: #5cb85c !important;
}

.masterSearchHeader .msearchtbn:focus {
    box-shadow: 0 0 0 0.25rem rgba(92, 184, 92, 0.5) !important;
}

/* Movie/Series list headers: separate the paired controls without changing
   their breakpoint-specific image sizes or the Bootstrap header columns. */
#movieMain .live_header .liveback > a[title="Menu"],
#SeriesMain .live_header .liveback > a[title="Menu"] {
    position: relative;
    left: clamp(14px, 1.35vw, 28px);
}

#movieMain .live_header .liveSet > a[title="Search"],
#SeriesMain .live_header .liveSet > a[title="Search"] {
    position: relative;
    right: clamp(14px, 1.35vw, 28px);
}

#movieMain .live_header .liveSet,
#SeriesMain .live_header .liveSet {
    position: relative;
    right: clamp(18px, 1.2vw, 27px);
}

@media only screen and (max-width: 1099px) {
    #movieMain .live_header .liveback,
    #SeriesMain .live_header .liveback {
        position: relative;
        left: clamp(6px, 1vw, 9px);
    }

    #movieMain .live_header .liveSet,
    #SeriesMain .live_header .liveSet {
        right: clamp(34px, 4.5vw, 40px);
    }
}

/* Parental Control / Adult content popup */
.parentallockhtml .parenralconMain {
    background-color: #343434 !important;
    color: #ffffff !important;
}

.parentallockhtml .parenralconMain .genSettingHeader {
    color: #ffffff !important;
    border-bottom-color: #1f1f1f !important;
}

.parentallockhtml .parental_input h3 {
    color: #ffffff !important;
}

/* BACK / NEXT buttons */
.parentallockhtml .parenntalSetSaveBtn button,
.parentallockhtml .parenntalSetCloseBtn button {
    background-color: transparent !important;
    background-image: url(../images/btn.png) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    box-sizing: border-box;
    color: #f8f8f8 !important;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    text-transform: uppercase;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}


/* Hover / foco */
.parentallockhtml .parenntalSetSaveBtn button:hover,
.parentallockhtml .parenntalSetSaveBtn button:focus,
.parentallockhtml .parenntalSetSaveBtn button:focus-visible,
.parentallockhtml .parenntalSetCloseBtn button:hover,
.parentallockhtml .parenntalSetCloseBtn button:focus,
.parentallockhtml .parenntalSetCloseBtn button:focus-visible {
    background-image: url(../images/btn.png) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 4px #ffffff !important;
    transform: scale(1.03);
}