/* Import Font Awesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

.navbar_top{

   height:60px;
   width:inherit;  /* Fixed height for the header */
    max-width: var(--Max-width) !important;
   display: flex; /* Flexbox for layout */
   transition: all .5s;
   /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
   gap: 10px;
   align-items: center;
   justify-content: center;
   position:fixed;
   left: 50%;          /* Start from center */
   transform: translateX(-50%); /* Pull back by half of width */
   z-index: 10;
   top: 0; /* Position it at the top of the page */
   padding-top: 20px;
   /* background: linear-gradient( to bottom, var(--global-color-bg) 10%, transparent 100%);*/
   margin-left: auto;
   margin-right: auto;

}


.Nav_container {
  flex: 1;
  align-items: center; /* Align items vertically within the container */
  /*background: linear-gradient(135deg,  var(--Brand_Color)  10%, transparent 50%);*/
  height: 100%;
}

.logo_ {
    height: 100%;
    width: 100px;
    height: 40px;
    align-items: center; /* Align items vertically within the container */
    display: flex;
    margin-left: 10px;
    margin-top: auto;
    text-decoration: none;
    justify-content: center;
    background: url("./Assets/text_logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 104% 115%;
    border-radius: 4px;
    Background-color: rgba(57, 89, 116, 0.4);
}

.logo_:hover {
   Background-color: var(--Brand_Color);
}







.Nav_Links_container {
    background-color: transparent;
    color: var(--global-color-fg);
    list-style: none;
    text-decoration: none;
    cursor: pointer;
    border: 0px solid transparent;
    align-items: center;
    justify-content: center;
    display: flex;
    overflow: hidden;
    float: right;
    font-size: 1.4em;
    margin-right: 10px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    font-family: "Calibri";
    font-weight: 500;
}

.Nav_Links_container:hover {
    color: hsl(214, 84%, 56%);
}

.Nav_Links_container_1{
    background-color: transparent;
    color: var(--global-color-fg);
    list-style: none;
    text-decoration: none;
    cursor: pointer;
    border: 0px solid transparent;
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center horizontally */
    align-items: flex-start; /* Align to the top */
    flex-wrap: wrap;
    float: right;
    font-size: 1.3em;
    margin-right: 10px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    font-family: 'Arial Black';

}

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

.dropdown_nav{
  display: none;
  backdrop-filter: blur(2100px);
  width: auto;
  height: auto;
  position: absolute;
  padding: 3% 5% 5% 5%;
  transition: visibility 0s, opacity 0.3s ease-in-out;
  border-radius: 5px;
  transform: translateX(-40%);
  z-index: 1000;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.genre_each{
  width: 110px;
  padding: 2%;
  background: transparent;
  margin: auto;
  font-size: 1.1em;
  font-family: 'Courier New';
  color: var(--global-color-fg);
}

.genre_each:hover{
     color: var(--Brand_Color);
}






/*========================= Search ======================================================================*/



 .search_btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: start;
  justify-content: start;
  border-radius: 50px;
  -webkit-border-radius: 20px;
  transform: translateZ(0);
  overflow: hidden;
  will-change: width, height;
  -webkit-will-change: width, height;
  cursor: pointer;
  transition: 0.6s cubic-bezier(.17,1,.33,1);
  backdrop-filter: blur(201px);
  background-color:  transparent;
   box-shadow: 0 0 11px rgba(0, 0, 0, .4);
}

.search_btn.active {
  width: 400px;
  height: 40px;
  transition: 1s cubic-bezier(.17,1,.33,1);
  cursor: auto;
  background-color:  var(--global-color-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.search_btn_toggle {
    position: absolute;
    z-index: 1;
    right: 0px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 1;
    cursor: pointer;
    transition: 0.2s all;
    backdrop-filter: blur(100px);
    background-color: transparent;
    color: var(--global-color-fg);
    font-size: 1.5em;
    font-family: 'Times New Roman';
    margin-top: auto;
    margin-bottom: auto;
}

.search_btn_toggle i:hover{
      color:  hsl(214, 84%, 56%);;
}

.search_filter_btn_toggle {
    position: absolute;
    z-index: 1;
    right: 44px;
    width: 60px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    opacity: 1;
    cursor: pointer;
    transition: 0.2s all;
    backdrop-filter: blur(100px);
    background-color:  var(--Brand_Color);
    color: var(--global-color-fg);
    font-size: 1em;
    font-family: 'Times New Roman';
    margin-top: auto;
    margin-bottom: auto;
    box-shadow: 0 1px 2px gray;
}



.search_btn.active .search_btn_toggle {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(24000px);
  transform: rotate(45deg);
  color: red;
  font-size: 2em;
  font-family: 'Cooper Black';
}


.search_btn_toggle_content {
    position: relative;
    width: 100%;
    height: 40px;
    display: none;
    transform: scale(0.8);
    transition: transform 1s cubic-bezier(.16,.61,.23,1);
    backdrop-filter: blur(24000px);
}

.search_btn.active .search_btn_toggle_content {
  display: flex;
}
.search_btn.active .search_btn_toggle_content {
      transform: scale(1);
}


.search-input {
    width: 90%;
    height: 100%;
    border: none;
    outline: none;
    border-radius: Internet;
    background-color: transparent;
    color: var(--global-color-bg);
    text-align: center;
    font-size: 1.3em;
    cursor: pointer;
}

.search-input:focus {
    border-color: var(--Brand_Color); /* Border color on focus */
    color: var(--global-color-bg);
    cursor: pointer;
}
/*================= notification_ ====================================================================================*/

.reload_btn {
  background-color: transparent;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin: auto;
  border: 0.3px solid transparent;
  backdrop-filter: blur(201px);
  align-items: center;
  justify-content: center;
  display: none;
  overflow: hidden;
  font-size: 1.5em;
  color: var(--Brand_Color);
  cursor: pointer;
  margin-right: auto;
  margin-left: 15px;
}

.reload_btn *{
  color: var(--Brand_Color);
}

.notification_picture {
  position: relative;
  background-color: transparent;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin: auto;
  border: 0.3px solid transparent;
  backdrop-filter: blur(201px);
  align-items: center;
  justify-content: center;
  display: none; /*flex*/
  font-size: 1.5em;
  color: var(--global-color-fg);
  cursor: pointer;
  box-shadow: 0 0 11px rgba(0, 0, 0, .4);
}

.notification_picture *{
    color: var(--global-color-fg);
}


.notification_picture:hover {
    border-color: var(--Brand_Color);
}

.notification_badge  {
  position: absolute;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  background: red;
  color: var(--global-color-fg);
  animation: pulse_glow 5s infinite ease-in-out;
  font-size: 14px;
  font-weight: bold;
  display: none;
  align-items: center;
  justify-content: center;
  top: -5px;
  right: -5px;
}

@keyframes pulse_glow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.8);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
    text-shadow: 0 0 12px rgba(255, 0, 0, 1);
  }
}

.notification_container{
  background: var(--global-color-bg);
  border: 17px solid transparent;
  box-shadow: 0 0 11px rgba(0, 0, 0, .4);
  border-radius: 0.8em;
  display: none;
  flex-wrap: wrap;
  backdrop-filter: blur(210px);
  width: 300px;
  height: auto;
  max-height: 400px;
  position: absolute;
  padding:  2px;
  transition: visibility 0s, opacity 0.3s ease-in-out;
  transform: translateX(-40%) translateY(65%);
  z-index: 5000;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow: scroll;
  gap:10px;
}


.notification_container_each{
  width:100%;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
}
.notification_container_each:hover{
    opacity: 0.8;
    background: rgba(57, 89, 116, 0.2);
}

.notification_container_each_img{
   height: 90%;
   width:  20%;

   aspect-ratio: 9/12;
   background: var(--Brand_Color);
   margin-top: auto;
   margin-bottom: auto;
   margin-left: 4%;
}

.notification_container_info {
      height: 90%;
      width: 70%;
      margin: auto;
      margin-right: 4px;
      overflow: hidden;

}

.notification_container_title{
    width: 90%;
    overflow: hidden;
    max-height: 91%;
    margin: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    font-size: 0.7em;
    font-family: "Calibri Light";
}

.notification_container_Details{
    width: 90%;
    overflow: hidden;
    max-height: 91%;
    margin: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    font-size: 0.7em;
    font-family: "Calibri Light";
    color: gray;
}


/*================= Profile ====================================================================================*/


.profile-picture {
  filter: none !important;
  background-color: transparent ;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin: auto;
  border: 0.3px solid transparent;
  backdrop-filter: blur(201px);
  align-items: center;
  justify-content: center;
  display: flex;
  overflow: hidden;
  font-size: 1.5em;
  color: var(--global-color-fg);
  cursor: pointer;
  margin-right: 15px;
  box-shadow: 0 0 11px rgba(0, 0, 0, .4);
}

.profile-picture *{
    color: var(--global-color-fg);
}


.profile-picture:hover {
    border-color: var(--Brand_Color); /* Border color on hover */
}


.hide-navbar {
    top: -100px; /* Adjust this value based on your navbar height */
}

.hide-navbar_color {
    background-color: var(--global-color-bg);

}

.hid_element {
    display: none !important;
}
/* ====================================================================================================================*/
/*============= BOTTOM NAV BAR ========================================================================================*/


.nav_bar_bottom{
   height:45px;
   width:94%;  /* Fixed height for the header */
   transition: all .5s;
   gap: auto;
   align-items: center;
   justify-content: space-between;
   position:fixed;
   z-index: 1000;
   bottom: 0;
   background: var(--global-color-bg);
   padding-right: 3%;  /* Padding on the right */
   padding-left: 3%;
   padding-bottom: 9px;
   display: none;
   transform: translateX(-50%);
   left: 50%;
}

.nav_bar_bottom.active{
   height: 50px;
   bottom: 50%;
   transition: 1s cubic-bezier(.17,1,.33,1);
   width:84%;
   left: 50%;
   transform: translateX(-50%); /* Center horizontally */
   border-radius: 20px;
   border-radius: 20px;
   background: transparent
   box-shadow: 0 4px 4px 0 var(--Brand_Color), 0 6px 20px 0 transparent;
}

.nav_bar_bottom.active .nav_tub {
   display: none; /* Hide .nav_tub when active */
}

.nav_tub {
    background-color: transparent;
    height: 40px;
    width: 50px;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.nav_tub_icon {
    background-color: transparent;
    width: 100%;
    height: 25px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    color: var(--global-color-fg);
    display: flex;
    overflow: hidden;
}

.nav_tub_text {
    cursor: pointer;
    height: 40%;
    font-size: 10px;
    color: var(--global-color-fg);
    align-items: center;
    justify-content: center;
    overflow. hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    font-family: 'Calibri Light';

}


.nav_bar_bottom_active *{
    color: var(--Brand_Color); /* Adjust text color */
}


.search_div_bottom {
    position: absolute;
    bottom: 0;
    z-index: 1;
    left: 0px;
    display: none;
    width: 100%;
    height: 100%;
    background: transparent;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: inherit;
    backdrop-filter: blur(2100px)
}


.search_input_bottom {
    width: 80%;
    height: 100%;
    border: none;
    outline: none;
    border-radius: inherit;
    background: transparent;
    color: var(--global-color-fg);
    text-align: center;
    font-size: 1.3em;
    cursor: pointer;
    margin-right: auto;
}

.search_btn_bottom_cancel {
    display: flex;
    transform: rotate(45deg);
    position: absolute;
    z-index: 1;
    right: 0px;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 1;
    cursor: pointer;
    transition: 0.2s all;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(24000px);
    font-size: 2em;
    font-family: 'Cooper Black';
    color: red;
    animation: cancel_flicker 2s infinite;
    margin-right: 8px;
}

.search_btn_filter_bottom {
    display: flex;
    position: absolute;
    z-index: 1;
    right: 49px;
    width: 45px;
    height: 35px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    opacity: 1;
    cursor: pointer;
    transition: 0.2s all;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(240px);
    font-size: 1em;
    font-family: 'Cooper Black';
    color: var(--Brand_Color);
    margin-right: 9px;
}







.dropdown_nav_bottom{
  display: none;
  width: 100%;
  height: auto;
  max-height: 350px;
  position: ;
  padding: 3% 5% 5% 5%;
  border-radius: 5px;
  overflow: scroll;
  z-index: 1000;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  -webkit-backdrop-filter: blur(240px); /* Add this line */
  backdrop-filter: blur(240px);
}

.dropdown_nav_bottom::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}


.search_input_bottom:focus {
    border-color: var(--Brand_Color); /* Border color on focus */
    color: var(--global-color-fg);
}


/*================== Terms_Container ==================================================================================*/

.Terms_Container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  backdrop-filter: blur(5px); /* Adjust the blur intensity as needed */
  z-index: 1000; /* Ensure it's on top of other content */
  display: flex;
  align-items: center;
  justify-content: center;

}

.Terms_Box {
      width: 50%;
      max-width: 500px;
      aspect-ratio: 1;

      background-color: rgba(57, 89, 116, 0.9); /* Green overlay */
      border-radius: 10px;
      box-shadow: inset 2px -2px 20px var(--global-color-fg);
      transition: 1s cubic-bezier(.17,1,.33,1);
}

.Terms_Box.active {
    width:50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    overflow: hidden;
    transition: 1s cubic-bezier(.17,1,.33,1);
}

.show_terms {
    width:50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    background: var(--global-color-bg);
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: inset 2px -2px 20px var(--Brand_Color);
}

.Terms_Details {
      width: 100%;
      height: 85%;
}

.Terms_Details_title{
    font-family: "Georgia";
    font-size: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
    height: 10%;
}
.Terms_Details_content{
   height: 90%;
   width: 92%;
   overflow: scroll;
   justify-content: center;
   padding-left: 4%;
   padding-right: 4%;
   text-align: justify;
   -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Terms_Details_content::-webkit-scrollbar {
  display: none;
}
.Terms_Details_content h2{
  font-family: "Georgia";
  font-size: 0.85em;
}
.Terms_Details_content p{
  font-family: "Times New Roman";
  font-size: 0.85em;
}

.Terms_Details_content strong{
  color: var(--Brand_Color)
}

.custom_bullets {
    padding-left: 4%;
    font-size: 0.7em;
}



.Terms_Feedback{
     width: 100%;
     height: 15%;
     align-items: center;
     justify-content: center;
}
.terms_Date_btn{
    height: 40%;
    font-family: "Georgia";
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.t_bts{
   height: 50%;
   width: 100%;
   display: flex;
   gap: 10px;
   align-items: center;
   justify-content: center;
}

.terms_agree_btn {
    width: 40%;
    height: 70%;
    font-family: "Georgia";
    font-size: 1em;
    background: var(--Brand_Color);
    align-items: center;
    justify-content: center;
    align-text: center;
    display: flex;

}

.terms_Disagree_btn {
    width: 40%;
    height: 70%;
    font-family: "Georgia";
    font-size: 1em;
    background: #7C0A02;
    align-items: center;
    justify-content: center;
    align-items: center;
    justify-content: center;
    align-text: center;
    display: flex;
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*=========================================    Trailer Play    ======================================================*/


.trailer_div {
  position: fixed;
  width: 70%;
  z-index: 1000;
  aspect-ratio: 16/9;
  background:  black;
  border: 1px solid var(--global-color-bg);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: gray;

  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.trailer_div_cancel{
   position: absolute;
   top: 0;
   background: transparent;
   right: 2px;
   transform: rotate(0.2deg);
   font-family: 'Segoe Script';
   font-weight: 500;
   aspect-ratio: 16/9;
   color: red;
   animation: cancel_flicker 2s infinite;
   font-size: 1.5em;
   border: none;
}

.trailer_div_iframe{
    height: 100%;
    aspect-ratio: 16/9;
    background: transparent;
    border: none;
}
.trailer_div_iframe *{
   width: 100%;
   height: 100%;
   aspect-ratio: 16/9;
   border: none;
}

@keyframes cancel_flicker {
  0%, 100% {
    color: red;
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 20px red;
  }
  50% {
    color: red;
    text-shadow: 0 0 2px red, 0 0 5px red;
  }
  25%, 75% {
    color: red;
    text-shadow: none;
  }
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.Authentication_section{
  position: fixed;
  flex-direction: column;
  height:  102%;
  width: 102%;
  box-sizing: border-box;
  background:  var(--global-color-bg);
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);;
  padding: 40px;
  box-sizing: border-box;
  display: none;
  margin: 0;
}


.circle{
  position: absolute;
  border-radius: 50%;
  background: var(--Brand_Color);
  animation: ripple 15s infinite;
  box-shadow: 0px 0px 1px 0px #508fb9;
}

.small{
  width: 200px;
  height: 200px;
  left: -100px;
  bottom: -100px;
}

.medium{
  width: 400px;
  height: 400px;
  left: -200px;
  bottom: -200px;
}

.large{
  width: 600px;
  height: 600px;
  left: -300px;
  bottom: -300px;
}

.xlarge{
  width: 800px;
  height: 800px;
  left: -400px;
  bottom: -400px;
}

.xxlarge{
  width: 1000px;
  height: 1000px;
  left: -500px;
  bottom: -500px;
}

.shade1{
  opacity: 0.2;
}
.shade2{
  opacity: 0.5;
}

.shade3{
  opacity: 0.7;
}

.shade4{
  opacity: 0.8;
}

.shade5{
  opacity: 0.9;
}

@keyframes ripple{
  0%{
    transform: scale(0.8);
  }

  50%{
    transform: scale(1.2);
  }

  100%{
    transform: scale(0.8);
  }
}


.login_cancel{
   height:40px;
   aspect-ratio: 1;
   border-radius: 50%;
   z-index: 100;
   backdrop-filter: blur(240px);
   background:  url("./Assets/cancel.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100% 100%;
   position: absolute;
   right: 5px;
   box-shadow: 0 4px 6px gray; /* Add a subtle shadow */
}
.login_cancel:hover{
    box-shadow: 2px 8px 13px gray;
}

.Login_container_header{
   display: flex;
   width: 80%;
   height: 50px;
   gap: 5%;
   font-family: 'Georgia', sans-serif;
   font-size: 20px;
   font-weight: bold;
   margin-left: auto;
   margin-right:auto;
   margin-right:auto;
   box-shadow: 0 4px 6px gray; /* Add a subtle shadow */
   justify-content: center;
   align-items: center;
   background: rgba(57, 89, 116, 0.4);
   border-radius: 1em;
   position: relative;

}

.Login_container{
      margin: auto;
      width: 90%;
      height: auto;
}
 .Register_container, .Forgot_password_container  {
      display: none;
      margin: auto;
      width: 90%;
      height: auto;
      background: transparent;

}

.input_form::placeholder {
    font-size: 12px;
    color: #999;
    opacity: 0.5;
     padding: 20px;
}
.input_form::-moz-placeholder { /* Firefox 19+ */
    font-size: 12px;
    color: #999;
    opacity: 0.5;
     padding: 20px;
}
.input_form:-ms-input-placeholder { /* IE 10+ */
    font-size: 12px;
    color: #999;
    opacity: 0.5;
    padding: 20px;
}

.input_form{
   width: 350px;
   height: 60px;
   display: flex;
   outline: none;
   align-items: center;
   justify-content: center;
   font-size: 1.5em;
   font-family: 'sans-serif';
   margin: 15px;
   margin-left: auto;
   margin-right: auto;
   border-radius: 0.4em;
   background: transparent;
   backdrop-filter: blur(240px);
   border: 0.5px solid gray;
   padding-left: 15px;
   padding-right: 10px;
   box-sizing: border-box;
     box-shadow: 0 0 11px rgba(0, 0, 0, .4);

}

.input_form:focus {
    border-color: var(--Brand_Color); /* Assuming this is a CSS variable defined elsewhere */
    color: var(--global-color-fg); /* Assuming this is a CSS variable defined elsewhere */
    cursor: pointer;
}

.input_form_submit {
   width: 350px;
   height: 60px;
   display: flex;
   outline: none;
   align-items: center;
   justify-content: center;
   font-size: 1.5em;
   font-family: 'sans-serif';
   margin: 10px;
   margin-left: auto;
   margin-right: auto;
   border-radius: 10px;
   font-family: 'Georgia';
   border-radius: 0.5em;
   background:  #a2703f;
   backdrop-filter: blur(240px);
   user-select: none;
}

.input_form_submit:hover{
      background:  #1C352D;
}


.error {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2%;
    font-size: 0.95em;
    color:  red;
    font-family: '';
}

.loading_active{
      background: linear-gradient(-90deg, transparent 50%, green 50%);
      background-size: 200% 100%;
      background-position: right;
      transition: background-position 20s linear;
}



/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/======= Small Screens ======================================================================================================= */


@media (max-width: 968px) {
          .navbar_top{
            display: flex;
            background: transparent !important;
          }
          .logo_, .Nav_Links_container{
             display: none;
          }
          .nav_bar_bottom{
              display: flex;
          }

          .search_btn.active {
              position: absolute;
              padding: 5px;
              width: 70%;
              height: 40px;
              Z-index: 1001;
            }
          .notification_picture {
              min-width: 50px;
              min-height: 50px;
          }
          .profile-picture{
              min-width: 50px;
              min-height: 50px;
          }
          .reload_btn{
             display: flex;
          }

          .Terms_Box {
              width:  95%;
          }
         .trailer_div {
              width: 90%;
          }

        .input_form{
           width: 300px;
        }
        .input_form_submit{
           width: 300px;
        }

        .notification_container{
           background: #1B1B1B;
           border: 2px solid black;
        }
}


/* =================== others ====================================================================================*/




@keyframes logo_flicker {
  0%, 100% {
    color: var(--global-color-fg);
    text-shadow: 0 0 5px var(--global-color-fg), 0 0 10px var(--global-color-fg), 0 0 20px var(--global-color-fg);
  }
  50% {
    color: var(--global-color-fg);
    text-shadow: 0 0 2px var(--global-color-fg), 0 0 5px var(--global-color-fg);
  }
  25%, 75% {
    color: var(--global-color-fg);
    text-shadow: none;
  }
}


@keyframes cancel_flicker {
  0%, 100% {
    color: red;
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 20px red;
  }
  50% {
    color: red;
    text-shadow: 0 0 2px red, 0 0 5px red;
  }
  25%, 75% {
    color: red;
    text-shadow: none;
  }
}


.float_animation_nav{

			transform: translateX(0px);
			animation: float 6s ease-in-out infinite;
		}

		@keyframes float {
			0% {
				box-shadow: 0 5px 15px 0px rgba(0,0,0,0.1);
				transform: translateX(0px);
			}
			50% {
				box-shadow: 0 25px 15px 0px rgba(0,0,0,0.1);
				transform: translateX(-5px);
			}
			100% {
				box-shadow: 0 5px 15px 0px rgba(0,0,0,0.1);
				transform: translateX(0px);
			}
		}


.no-select { /*prevent users from selecting or highlighting text within the elements*/
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard syntax */
}


}