@import "font-arabic.css";
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  background: #060f0f !important;
  font-family: SansArabic, sans-serif !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
button {
  font-family: SansArabic, sans-serif !important;
}
html {
  scroll-behavior: smooth;
}
a {
  color: #d8d8d8 !important;
  text-decoration: none !important;
}
a:hover {
  color: #ff5900 !important;
}
.limit-line-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.limit-line-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.limit-line-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.limit-line-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dis-none {
  display: none;
}

::placeholder {
  color: #d8d8d8;
  opacity: 1;
}
::-ms-input-placeholder {
  color: #d8d8d8;
}

.loadingSpinner {
  background-color: #313131;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 85%;
  z-index: 5;
}
.loadingSpinner img {
  width: 10vh;
  height: 10vh;
  position: absolute;
  top: 45%;
  left: 48%;
}

.mainSidebar {
  background-color: #2b2828;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 15%;
  font-size: 1.4em;
  padding: 0 1%;
  z-index: 1;
}
.sidbarLogoFrame {
  width: 40%;
  padding: 0 !important;
  margin: 20% auto !important;
}
.sidbarLogoFrame img {
  width: 100%;
  height: auto;
}
.mainSidebar a {
  display: block;
  color: #d8d8d8;
  border-radius: 4px;
  text-decoration: none;
  padding: 5%;
  margin-bottom: 5%;
}
.theMainParent {
  width: 85%;
  position: relative;
  z-index: 2;
  margin-right: 15%;
  background: #060f0f;
}
.theMainLayout {
  width: 100%;
  background-image: url(/assets/img/homeBgImg.png);
  background: #060f0f;
}

.home-slider {
  height: 85vh;
  margin-bottom: 3vh;
  overflow: hidden;
  position: relative !important;
  width: 100% !important;
}
.slideBox::before {
  background: rgb(6, 15, 15);
  background: -moz-linear-gradient(
    270deg,
    rgba(6, 15, 15, 0) 0%,
    rgba(6, 15, 15, 1) 100%
  );
  background: -webkit-linear-gradient(
    270deg,
    rgba(6, 15, 15, 0) 0%,
    rgba(6, 15, 15, 1) 100%
  );
  background: linear-gradient(
    270deg,
    rgba(6, 15, 15, 0) 0%,
    rgba(6, 15, 15, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#060f0f",endColorstr="#060f0f",GradientType=1);
  bottom: 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.poster-ccr,
.banner-ccr {
  margin: 3.5% 0;
}
.poster-ccr h1,
.banner-ccr h1,
.big-banner-ccr h1,
.big-poster-ccr h1 {
  color: #d8d8d8;
  font-size: 1.8em;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  margin: 0;
  margin-right: 2%;
}

.home-slider .owl-thumbs {
  position: absolute;
  bottom: 4vh;
  left: 0;
  right: 0;
  width: 80%;
  margin: 0 auto;
  z-index: 2;
}
.home-slider .owl-thumb-item {
  display: inline-block;
  width: 10%;
  padding: 0;
  margin: 0 5%;
  cursor: pointer;
  background-color: transparent !important;
}
.home-slider .owl-thumb-item img {
  width: 100%;
  height: 13vh;
  padding-bottom: 2vh;
}
.home-slider .owl-thumbs .active {
  border-bottom: 2px solid #ff4e00;
}
.slideBox {
  display: block;
  width: 100%;
  height: 85vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  position: relative;
  z-index: 1;
}
.slideBoxFrame {
  position: absolute;
  top: 7%;
  right: 3%;
  width: 40%;
  z-index: 3;
}
.slideBoxLogo {
  width: auto !important;
  height: 15vh;
}
.slideBoxTitle {
  color: #fff;
  font-size: 1.7em;
  font-weight: 800;
  line-height: 3.5vh;
  margin: 0.4em 0;
  padding: 0 0.6em;
  position: relative;
  text-align: start;
}
.slideBoxTitle::before {
  background-color: #ff4e00;
  content: "";
  height: 25px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  width: 5px;
}
.slideBoxGenre {
  position: relative;
  margin-bottom: 0.7em;
}
.slideBoxGenre h6,
.slideBoxGenre p {
  display: inline;
  margin: 0;
  margin-left: 3%;
  color: #a3afc2;
  font-size: 1.2em;
  font-style: normal;
  font-weight: 500;
  line-height: 2vh;
  text-align: start;
  text-transform: capitalize;
}
.slideBoxGenre h6 span,
.slideBoxGenre p span {
  display: inline-block;
  background-color: #ff4e00;
  border-radius: 50%;
  height: 10px;
  width: 10px;
  margin-left: 2%;
}
.slideBoxbuttons {
  display: inline;
  background: rgba(209, 215, 224, 0.22);
  padding: 3.2% 0 3.2% 3.2%;
  border-radius: 5000px;
}
.slideBoxPlayNow {
  display: inline-block;
  padding-left: 3%;
}
.slideBoxPlayNow p {
  display: inline;
  color: #fff;
  font-size: 1.3em;
  font-weight: 500;
  line-height: 2.5vh;
  text-align: start;
  text-transform: capitalize;
  white-space: nowrap;
  margin-right: 0.5em;
}
.slideBoxPlayNow img {
  display: inline !important;
  width: 3.3em !important;
  height: 3.3em;
  border-radius: 50%;
  padding: 8%;
  cursor: pointer;
  background: #ff4e00;
}
.slideBoxPlayNow img:hover {
  background: #ff6b1c;
}
.slideBoxBookmark {
  display: inline-block;
}
.slideBoxBookmark p {
  display: inline;
  color: #fff;
  font-size: 1.3em;
  font-weight: 500;
  line-height: 2.5vh;
  text-align: start;
  text-transform: capitalize;
  white-space: nowrap;
  margin-right: 0.5em;
}
.slideBoxBookmarkImg {
  display: inline !important;
  width: 2.5em !important;
  height: 2.5em;
  border: 1px solid #ff4e00;
  border-radius: 50%;
  padding: 5%;
  cursor: pointer;
}
.slideBoxBookmarkImg:hover {
  background: #ff4e00;
}
.slideBoxDescription {
  width: 70%;
  color: #fff;
  font-size: 1.2em;
  font-weight: 500;
  line-height: 1.2em;
  margin: 0;
  text-align: justify;
  text-transform: capitalize;
  margin-top: 0.7em;
}

.home-poster,
.home-big-poster {
  margin: 2.4% 0 0;
  position: relative;
}
.home-banner,
.home-big-banner {
  margin: 2% 0 0;
  position: relative;
}
.home-banner .owl-stage-outer,
.home-poster .owl-stage-outer,
.home-big-poster .owl-stage-outer,
.home-big-banner .owl-stage-outer {
  margin-right: 2% !important;
}

.home-poster .owl-prev,
.home-big-poster .owl-prev {
  color: white !important;
  position: absolute;
  margin: 0 !important;
  width: 4%;
  height: 100%;
  top: 0;
  right: 2%;
  border-radius: 0 !important;
  font-size: 5vw !important;
  opacity: 1 !important;
  cursor: pointer !important;
  background: rgba(6, 15, 15, 0.6) !important;
}
.home-banner .owl-prev,
.home-big-banner .owl-prev {
  color: white !important;
  position: absolute;
  margin: 0 !important;
  width: 4%;
  height: 95%;
  top: 2.5%;
  right: 2%;
  border-radius: 0 !important;
  font-size: 5vw !important;
  opacity: 1 !important;
  cursor: pointer !important;
  background: rgba(6, 15, 15, 0.6) !important;
}
.poster-DetailPage .owl-prev {
  right: 1%;
}
.home-poster .owl-next,
.home-big-poster .owl-next {
  color: white !important;
  position: absolute;
  margin: 0 !important;
  width: 4%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 0 !important;
  font-size: 5vw !important;
  opacity: 1 !important;
  cursor: pointer !important;
  background: rgba(6, 15, 15, 0.6) !important;
}
.home-banner .owl-next,
.home-big-banner .owl-next {
  color: white !important;
  position: absolute;
  margin: 0 !important;
  width: 4%;
  height: 95%;
  top: 2.5%;
  left: 0;
  border-radius: 0 !important;
  font-size: 5vw !important;
  opacity: 1 !important;
  cursor: pointer !important;
  background: rgba(6, 15, 15, 0.6) !important;
}
.owl-next:hover,
.owl-prev:hover {
  color: #fb4d00 !important;
}

.home-banner .owl-item,
.home-poster .owl-item,
.home-big-poster .owl-item,
.home-big-banner .owl-item {
  transition: transform 200ms linear;
}
.home-banner .owl-item:hover,
.home-poster .owl-item:hover,
.home-big-poster .owl-item:hover,
.home-big-banner .owl-item:hover {
  transform: scale(1.2);
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
}
.home-banner .owl-stage-outer,
.home-poster .owl-stage-outer,
.home-big-poster .owl-stage-outer,
.home-big-banner .owl-stage-outer {
  padding: 2.5% 0;
  margin: -2.5% 0;
}
.home-banner .ccBox div,
.home-big-banner .ccBox div {
  position: relative;
  width: 100%;
  padding-top: 56%;
  overflow: hidden;
  /* border-radius: 15.5px; */
}
.home-poster .ccBox div img,
.home-big-poster .ccBox div img {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  /* border-radius: 15.5px 15.5px 0 0; */
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.theHomePage .home-poster .ccBox div img,
.theHomePage .home-big-poster .ccBox div img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  /* border-radius: 15.5px 15.5px 0 0; */
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.home-banner .ccBox div img,
.home-big-banner .ccBox div img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* border-radius: 15.5px; */
}
.home-poster .ccBox div,
.home-big-poster .ccBox div {
  position: relative;
  width: 100%;
  padding-top: 120%;
  overflow: hidden;
  /* border-radius: 15.5px 15.5px 0 0; */
}
.home-poster .ccBox p,
.home-big-poster .ccBox p {
  margin: 0;
  padding: 4%;
  background-color: #2b2828;
  /* border-radius: 0 0 15.5px 15.5px; */
}
.home-poster .ccBox p span,
.home-big-poster .ccBox p span {
  color: #d8d8d8;
  font-size: 1.3em;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

#myVideo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  z-index: 1;
}

#customControlBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.92);
  height: 21vh;
  padding: 4vh 2vw 0;
}

#playPauseButton {
  position: absolute;
  bottom: 4vh;
  left: 6vh;
  z-index: 3;
  width: 9vh;
  height: 9vh;
  background: #424444;
  border-radius: 50%;
  padding: 1vh;
  cursor: pointer;
  text-align: center;
}
#playPauseButton img:first-child {
  margin-top: 1vh;
  width: 5vh;
  height: 5vh;
}
#playPauseButton img {
  width: 7vh;
  height: 7vh;
}
#seekBarContainer {
  background-color: #464e5a;
  padding: 1vh;
  position: relative;
  border-radius: 50rem;
  cursor: pointer;
  top: -1.3vh;
}

#seekBarThumb {
  height: 2vh;
  background-color: #f34b00;
  border-radius: 50rem;
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
}
#seekBarThumb::before {
  content: "";
  width: 3vh;
  height: 3vh;
  background-color: #f34b00;
  border-radius: 5000rem;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  border: 0.1vh solid #ff5900;
  left: 100%;
  z-index: 1;
}
#fastForwardButton {
  position: fixed;
  bottom: 5vh;
  left: 31vh;
  z-index: 3;
  width: 5vh;
  height: 5vh;
  cursor: pointer;
}
#fastRewindButton {
  position: fixed;
  bottom: 5vh;
  left: 23vh;
  z-index: 3;
  width: 5vh;
  height: 5vh;
  cursor: pointer;
}
#fastForwardButton img,
#fastRewindButton img {
  width: 5vh;
  height: 5vh;
}
#closeButton {
  position: fixed;
  top: 3.5vh;
  left: 8vh;
  z-index: 3;
  width: 5vh;
  height: 5vh;
  cursor: pointer;
}
#closeButton img {
  width: 5vh;
  height: 5vh;
}
#playerTitle {
  position: fixed;
  background: rgba(24, 29, 37, 1);
  color: #fff;
  top: 3.5vh;
  right: 8vh;
  width: fit-content;
  white-space: nowrap;
  padding: 1.5vh;
  border-radius: 1vh;
  font-size: 1.7em;
}
#muteControlButton {
  position: fixed;
  bottom: 4vh;
  left: 45vh;
  z-index: 3;
  width: 7vh;
  height: 7vh;
  cursor: pointer;
}
#muteControlButton img {
  width: 7vh;
  height: 7vh;
}
#currentTimeButton {
  position: fixed;
  bottom: 5vh;
  right: 200px;
  z-index: 3;
  width: fit-content;
  height: 4vh;
  color: #fb4d00;
  font-size: 1.5em;
}
#remainTimeButton {
  position: fixed;
  bottom: 5vh;
  right: 65px;
  z-index: 3;
  width: fit-content;
  height: 4vh;
  color: #ffffff;
  font-size: 1.5em;
}
#remainTimeButton span {
  margin-right: 13px;
}

.contentDetailParent {
  width: 85%;
  position: relative;
  z-index: 2;
  margin-right: 15%;
}
.contentDetailHeader {
  width: 100%;
  min-height: 100vh;
}
.contentDetailHeaderImg {
  position: relative;
  width: 100%;
  height: 70vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}
.contentDetailHeaderImg::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -ms-linear-gradient(left, #171414 0%, rgba(0, 0, 0, 0) 100%);
}
.contentDetailHeaderImgFrame {
  position: absolute;
  bottom: 5vh;
  right: 15vh;
  width: 25vh;
  height: 37vh;
}
.contentDetailHeaderImgFrame div {
  position: relative;
  width: 100%;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding-top: 148%;
}
.contentDetailHeaderImgFrame img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: auto;
  height: 100%;
}
.contentDetailHeaderTexts {
  width: 100%;
  height: 30%;
  padding-right: 15vh;
}
.contentDetailHeaderTitles {
  height: 100%;
  width: 35%;
  direction: rtl;
  padding: 3vh 0;
  float: right;
}
.contentDetailHeaderTitles h1 {
  color: #d8d8d8;
  font-size: 1.8em;
  font-weight: 900;
  line-height: normal;
  position: relative;
  padding-right: 1.5vh;
  margin-bottom: 2vh;
}
.contentDetailHeaderTitles h1::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.5vh;
  height: 100%;
  background-color: #fb4d00;
}
.contentDetailHeaderTitles p {
  color: #d8d8d8;
  font-size: 1.2em;
  font-weight: 900;
  line-height: normal;
  margin-bottom: 2vh;
}
.contentDetailHeaderGenres {
  font-size: 2vh;
}
.contentDetailHeaderGenres h6 {
  display: inline-block;
  color: #d8d8d8;
  font-size: 1.4em;
  font-weight: 900;
  line-height: normal;
  margin-left: 2vh;
  margin-bottom: 1vh;
}
.contentDetailHeaderGenres div {
  display: inline-block;
  color: #d8d8d8;
  font-size: 1.4em;
  font-weight: 900;
  line-height: normal;
  position: relative;
  padding: 0 2.2vh;
  margin-bottom: 1vh;
}
.contentDetailHeaderGenres div span {
  position: absolute;
  right: 0;
  bottom: 0.5vh;
  width: 1.5vh;
  height: 1.5vh;
  border-radius: 50%;
  background-color: #5d717e;
}
.contentDetailHeaderbuttons {
  height: 100%;
  width: 65%;
  padding: 3vh;
  float: left;
}
.contentDetailHeaderbuttons p {
  font-size: 1.1em;
  font-weight: 400;
  line-height: normal;
  color: #fff;
  margin-top: 3vh;
}
.contentDetailPlayButt {
  display: inline-block;
  width: fit-content;
  height: fit-content;
  margin-right: 1vh;
  text-decoration: none;
}
.contentDetailPlayButt button {
  white-space: nowrap;
  padding: 1vh 1vw 1vh 1.5vw;
  border-radius: 5000rem;
  background: #ff5900;
  border: none;
  color: #fff;
  text-align: center;
  font-family: SansArabic, sans-serif;
  font-size: 1.2em;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  cursor: pointer;
}
.contentDetailPlayButt button img {
  width: 1.5em;
  height: 1.5em;
  margin-left: 0.4em;
  vertical-align: middle;
}
.contentDetailBookmarkButt {
  display: inline-block;
  width: fit-content;
  height: fit-content;
  padding-right: 3vw;
}
.contentDetailBookmarkButt button {
  white-space: nowrap;
  padding: 1vh 1vw 1vh 1.5vw;
  border-radius: 5000rem;
  background: rgba(255, 255, 255, 0.22);
  border: none;
  color: #fff;
  text-align: center;
  font-family: SansArabic, sans-serif;
  font-size: 1.2em;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  cursor: pointer;
}
.contentDetailBookmarkButt button img {
  width: 1.5em;
  height: 1.5em;
  margin-left: 0.4em;
  vertical-align: middle;
}
.poster-relateds {
  margin: 3% 0;
}
.poster-relateds h1 {
  color: #d8d8d8;
  font-size: 1.8em;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  margin: 0;
  margin-right: 2%;
}

.poster-seasons {
  margin: 3% 0;
}
.poster-seasons h1 {
  color: #d8d8d8;
  font-size: 1.8em;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  margin: 0;
  margin-right: 2%;
}
.listOfSeasons {
  margin: 1% 0 3.5% 0;
  padding-right: 2%;
}
.listOfSeasons .item div {
  color: #d8d8d8;
  font-size: 1em;
  font-weight: 500;
  line-height: 25.46px;
  cursor: pointer;
  background-color: #3b3838;
  text-align: center;
  padding: 6% 0.2em;
  border-radius: 0.5em;
}
.listOfSeasons .active-item {
  background-color: #ff5900 !important;
}
.listOfSeasons .owl-nav {
  margin: 0;
}
.listOfSeasons .owl-next {
  color: white !important;
  position: absolute;
  margin: 0 !important;
  width: 4%;
  height: 150%;
  top: -40%;
  left: 0;
  border-radius: 0 !important;
  font-size: 45px !important;
  opacity: 1 !important;
  cursor: pointer !important;
  background: rgba(6, 15, 15, 0.6) !important;
}
.listOfSeasons .owl-prev {
  color: white !important;
  position: absolute;
  margin: 0 !important;
  width: 4%;
  height: 150%;
  top: -40%;
  right: 2%;
  border-radius: 0 !important;
  font-size: 45px !important;
  opacity: 1 !important;
  cursor: pointer !important;
  background: rgba(6, 15, 15, 0.6) !important;
}
.listOfSeasons .owl-next:hover,
.listOfSeasons .owl-prev:hover {
  color: #e84700 !important;
}

.castCrewParent {
  margin: 3% 0;
}
.castCrewParent h1 {
  color: #d8d8d8;
  font-size: 1.8em;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  margin: 0;
  margin-right: 2%;
}
.castCrewCarousel {
  margin: 1.5% 0;
  padding: 0.5% 2% 0.5%;
  position: relative;
}
.castCrewCarousel .owl-prev {
  width: 3%;
  color: white !important;
  position: absolute;
  top: 0;
  height: 100%;
  right: 0;
  font-size: 5vw !important;
  opacity: 1 !important;
  cursor: pointer !important;
  background: rgba(6, 15, 15, 0.6) !important;
}
.castCrewCarousel .owl-next {
  width: 4.5%;
  color: white !important;
  position: absolute;
  top: 0;
  height: 100%;
  left: 0;
  font-size: 5vw !important;
  opacity: 1 !important;
  cursor: pointer !important;
  background: rgba(6, 15, 15, 0.6) !important;
}
.castCrewCarousel .owl-prev:hover,
.castCrewCarousel .owl-next:hover {
  color: #e84700 !important;
}
.castCrewBox {
  width: 17vh;
}
.castCrewBox div {
  width: 100%;
  height: 17vh;
  border-radius: 50%;
  background: #fb4d00;
  margin-bottom: 1.5vh;
  position: relative;
}
.castCrewBox img {
  width: 80% !important;
  height: 80%;
  border-radius: 50%;
  position: absolute;
  top: 10%;
  left: 10%;
}
.castCrewBox p {
  color: #fff;
  text-align: center;
  font-size: 1.2em;
  font-weight: 600;
  line-height: normal;
}
.commentsParent {
  margin: 3% 0;
}
.commentsParent h1 {
  color: #d8d8d8;
  font-size: 1.8em;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  margin: 0;
  margin-right: 2%;
}
.commentsCarousel {
  margin: 1.5% 0;
  padding-right: 2%;
  position: relative;
}
.commentsCarousel .owl-prev {
  width: 4%;
  margin: 0 !important;
  color: white !important;
  position: absolute;
  top: -5%;
  height: 105%;
  right: 1%;
  font-size: 5vw !important;
  opacity: 1 !important;
  cursor: pointer !important;
  background: rgba(6, 15, 15, 0.6) !important;
}
.commentsCarousel .owl-next {
  width: 4%;
  margin: 0 !important;
  color: white !important;
  position: absolute;
  top: -5%;
  height: 105%;
  left: 0;
  font-size: 5vw !important;
  opacity: 1 !important;
  cursor: pointer !important;
  background: rgba(6, 15, 15, 0.6) !important;
}
.commentsCarousel .owl-prev:hover,
.commentsCarousel .owl-next:hover {
  color: #e84700 !important;
}
.commentsBox {
  background: #1f2125;
  width: 20vw;
  /* border-radius: 0.5em; */
  padding: 1.2em;
  position: relative;
}
.commentsBox div {
  display: inline-block;
  width: 100%;
}
.commentsProfile {
  display: inline-block !important;
  width: 4.2em !important;
  height: 4.2em;
  border-radius: 50%;
  vertical-align: top;
}
.commentsBox div div {
  display: inline-block;
  margin-right: 0.5em;
  width: auto;
  vertical-align: top;
}
.commentsBox div div h6 {
  display: block;
  color: #fff;
  font-size: 1em;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0.5em 0;
}
.commentCreatedTime {
  display: block;
  color: #a3afc2;
  font-size: 0.9em;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.commentsBox p {
  color: #fff;
  font-size: 1.3em;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  margin-top: 5%;
  margin-bottom: 7%;
}
.commentsLikes,
.commentsDisLikes {
  margin: 0 !important;
  float: left;
  background: #313337;
  padding: 2%;
  border-radius: 45%;
}
.commentsDisLikes {
  margin-left: 3% !important;
}
.commentsLikes span {
  display: inline-block !important;
  color: #d8d8d8;
  font-size: 1em;
  font-weight: 600;
  line-height: 2vh;
  text-align: center;
}
.commentsDisLikes span {
  display: inline-block !important;
  color: #e84700;
  font-size: 1em;
  font-weight: 600;
  line-height: 2vh;
  text-align: center;
}
.commentsLikesImg,
.commentsDisLikesImg {
  display: inline-block !important;
  width: 1.8em !important;
  height: 1.8em !important;
  vertical-align: bottom;
  padding-left: 0.5em;
}

.searchPage {
  min-height: 100vh;
  background-image: url(/assets/img/homeBgImg.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
.searchPage .search-header {
  text-align: center;
  position: relative;
  padding-top: 4%;
}
.searchPage .search-header::after {
  display: block;
  content: "";
  clear: both;
}
.searchPage button {
  position: relative;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  border: none;
  background: none;
  margin: 0 4%;
  float: right;
}
.searchPage button img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.searchPage input {
  width: 83%;
  padding: 10px;
  font-size: 1.5em;
  float: right;
  height: 60px;
  border: 1px solid transparent;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  border-radius: 8px;
}
.searchPage input:focus {
  border-color: #e84700;
}
.movieItemsFrame {
  padding: 4% 3%;
}
.movieItemsBox {
  display: inline-block;
  width: 16.6%;
  vertical-align: top;
  padding: 1.5% 1%;
  cursor: default !important;
  border: 1px solid transparent;
}
.movieItemsBox:hover {
  border: 1px solid #e84700;
}
.movieItemThumb {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-top: 141%;
  cursor: pointer;
}
.movieItemThumb img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: auto;
  height: 100%;
}
.movieItemsBox p {
  color: #d8d8d8;
  font-size: 1em;
  font-weight: 900;
  line-height: 1.5em;
  margin: 7% 0;
}

.loginPage {
  min-height: 100vh;
  background-image: url(/assets/img/homeBgImg.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
.loginPage:first-child {
  padding: 7% 10% 10% 25%;
}
.loginPage p,
.loginPage span {
  color: #d8d8d8;
  font-size: 1.3em;
  font-weight: 500;
  line-height: 1.5em;
  text-align: right;
}
.loginPage span {
  display: inline-block;
  background: #830101;
  margin-top: 0.4em;
  margin-bottom: 1em;
}
.loginPageText {
  margin-top: 1em;
}
.loginPageValid {
  margin-top: 1.2em;
  color: #d8d8d8;
  font-size: 1.7em;
  font-weight: 500;
  line-height: 2em;
}
.loginPageValid h6 {
  text-align: center;
  display: inline-block;
  width: auto;
  padding: 0 100px;
  vertical-align: top;
}
.loginPageValid h5 {
  margin-bottom: 0.5em;
}
.loginPageQR {
  display: inline-block;
  width: auto;
  vertical-align: top;
}
.loginPageQRImg {
  width: 5em;
  height: 5em;
}
.loginPageTheCode {
  display: inline-block;
  width: auto;
  vertical-align: top;
}
.loginPageValidCode {
  font-size: 1.7em;
  background: #e84700;
  padding: 0.2em;
}

.profilePage {
  min-height: 100vh;
  background-image: url(/assets/img/homeBgImg.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.profilePageFrame {
  padding: 7%;
  color: #d8d8d8;
}

.logoutModal {
  display: none;
  position: absolute;
  top: 31%;
  left: 33%;
  transform: translate(25%, 25%);
  background: #2b2828;
  color: #d8d8d8;
  text-align: center;
  font-size: 1.2em;
  font-weight: 500;
  padding: 3em;
}
.logoutModal p {
  margin-bottom: 1.3em;
}
.logoutModal button {
  color: #d8d8d8;
  text-align: center;
  font-size: 1em;
  font-weight: 500;
  width: 48%;
  border: 1px solid #e84700;
  border-radius: 5000px;
  padding: 0.5em 0;
  cursor: pointer;
}
.logoutModal button:hover {
  background: #ff6b1c;
}
.confirmLogout {
  background: #413e3e;
}
.cancelLogout {
  background: #e84700;
  margin-left: 1%;
}

.profilePage h1 {
  display: inline-block;
  padding: 0.5em;
  background: #2e2c2c;
  font-size: 1.5em;
  font-weight: 500;
  margin-bottom: 1em;
}
.profilePageBookmarked {
  display: inline-block;
  text-align: center;
  margin-left: 0.5em;
}
.profilePageBookmarked:hover {
  color: #d8d8d8 !important;
}
.profilePageLogOut {
  display: inline-block;
  text-align: center;
  cursor: pointer;
}
.profilePageTitles img {
  background: #d8d8d8;
  padding: 2em;
  width: 9em;
  height: 8em;
}
.profilePageTitles p {
  background: #2b2828;
  padding: 1em;
  margin-top: -6%;
  font-size: 1em;
  font-weight: 500;
}

.bookmarkedPage {
  min-height: 100vh;
  background-image: url(/assets/img/homeBgImg.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
.bookmarkedPageFrame {
  padding: 7%;
  color: #d8d8d8;
}
.bookmarkedPage h1 {
  display: inline-block;
  padding: 0.5em;
  background: #2e2c2c;
  font-size: 1.5em;
  font-weight: 500;
  margin-bottom: 1em;
}