/*
* Template Name: Animado - Animation & Cartoon Studio Template
* Author:  Giantco
* Author URL: https://themeforest.net/user/giantco
* Version: 1.0
*/

/* =============================================================================

[Table of contents]

0.0 Common CSS START 
1.0 HEADER AREA START 
2.0 BANNER AREA START
3.0 FEATURE AREA START
4.0 ABOUT AREA START
5.0 GALLERY AREA START
6.0 PRODUCT AREA START
7.0 TEAM AREA START
8.0 PRICE AREA START
9.0 REVIEW AREA START
10.0 CONTACT AREA START 
11.0 BLOG AREA START 
12.0 SUBSCRIBE AREA START 
13.0 FOOTER AREA START 
14.0 COPY_RIGHT AREA START 
 
/*===========================
0.0 *** Common CSS START ***
=============================*/
* {
  margin: 0;
  padding: 0;
  outline: 0;
}

ul,
ol {
  list-style-type: none;
}

a,
a:focus,
a:hover {
  text-decoration: none;
  outline: 0;
}

img {
  overflow: hidden;
  border: 0;
  vertical-align: middle;
}

.zindex {
  position: relative;
  z-index: 999;
}

.clr {
  clear: both;
}

.vbox-overlay {
  z-index: 999999;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin: 0;
  padding: 0;
}

p {
  line-height: 26px;
}

#dark-mode {
  background: #121212;
  overflow-x: hidden;
  position: relative;
  height: 100%;
}

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

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

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

/* model */
.modal-content {
  background: #121212;
}

.modal-title {
  font-size: 26px;
  color: white;
  font-family: pb;
}

.modal-header {
  border-bottom: 1px dashed #222;
}

.modal-body {
  padding: 42px 30px 30px;
}

.dropboxx {
  background: #151515;
}

.dropboxx,
.dropboxx2 {
  padding: 12px 20px;
  font-size: 17px;
  color: white;
  border: none;
  border-radius: 3px;
  font-family: pb;
}

.dropboxx:focus,
.dropboxx2:focus {
  outline: 0;
}

.dropboxx2 {
  background: #ff7657;
}

.close {
  color: white;
}

.close:hover,
.close:focus {
  color: #fff;
  outline: 0;
}

.modal-footer {
  border-top: 1px dashed #222;
  padding: 25px;
}

/* preloader */
.preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #161616;
  z-index: 9999999;
  top: 0;
  left: 0;
}

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  background: #161616;
  color: #fff;
}

.center {
  position: absolute;
  width: 220px;
  height: 220px;
  top: 90px;
  left: 90px;
}

.dot-1 {
  position: absolute;
  z-index: 3;
  width: 30px;
  height: 30px;
  top: 95px;
  left: 95px;
  background: #fff;
  border-radius: 50%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: jump-jump-1 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite
    alternate;
  animation: jump-jump-1 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite
    alternate;
}

.dot-2 {
  position: absolute;
  z-index: 2;
  width: 60px;
  height: 60px;
  top: 80px;
  left: 80px;
  background: #fff;
  border-radius: 50%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: jump-jump-2 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite
    alternate;
  animation: jump-jump-2 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite
    alternate;
}

.dot-3 {
  position: absolute;
  z-index: 1;
  width: 90px;
  height: 90px;
  top: 65px;
  left: 65px;
  background: #fff;
  border-radius: 50%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: jump-jump-3 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite
    alternate;
  animation: jump-jump-3 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite
    alternate;
}

@-webkit-keyframes jump-jump-1 {
  0%,
  70% {
    -webkit-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    -webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jump-jump-1 {
  0%,
  70% {
    -webkit-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    -webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes jump-jump-2 {
  0%,
  40% {
    -webkit-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    -webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jump-jump-2 {
  0%,
  40% {
    -webkit-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    -webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes jump-jump-3 {
  0%,
  10% {
    -webkit-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    -webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jump-jump-3 {
  0%,
  10% {
    -webkit-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    -webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/* Back to top */
.backtotop {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 9999;
  display: none;
}

.backtotop i {
  color: #ff7657;
  text-align: center;
  font-size: 25px;
  line-height: 65px;
  width: 65px;
  height: 65px;
  -webkit-box-shadow: 0 0 7px rgba(46, 59, 125, 0.23);
  box-shadow: 0 0 7px rgba(46, 59, 125, 0.23);
  border-radius: 50%;
  background: #161616;
  -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
  box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
}

.backtotop:hover {
  cursor: pointer;
}

/* Version 3 */
.particles-js-canvas-el {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

/* Version 4 */
#ckLine {
  position: absolute;
  width: 100%;
  height: 100%;
}

/*===========================
1.0 *** HEADER AREA START ***
=============================*/
.navbar {
  position: fixed;
  width: 100%;
  z-index: 9999;
  -weebkit-transition: all linear 0.3s;
  -webkit-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
  padding-top: 30px;
  background: transparent !important;
}

.menu-item {
  padding-right: 30px;
}

.navbar-light .navbar-nav .nav-link {
  color: #fff;
  font-family: pr;
  font-size: 17px;
  font-weight: 500;
  -webkit-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
  position: relative;
  margin-right: 18px;
}

.bor {
  background: #161616;
  padding: 10px 25px !important;
  position: relative;
  border-radius: 3px;
  -webkit-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
}

.bor:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 44px;
  top: 7px;
  left: 0;
  background: #212121;
  z-index: -1;
  border-radius: 3px;
  -webkit-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.67);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.67);
}

.bor:hover:after,
.bor:focus:after {
  top: 0;
}

.bor:focus:after {
  top: 0;
}

.navbar-light .navbar-nav .nav-link:focus {
  color: white;
}

.navbar-light .navbar-nav .nav-link:hover {
  color: #ff7657;
}

.navbar-light .navbar-nav .nav-link.active {
  color: #ff7657;
}

.navbar-light .navbar-brand {
  color: #fff;
  font-family: pb;
  font-size: 26px;
  -webkit-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
}

.navbar-light .navbar-brand b {
  color: #ff7657;
}

.navbar-light .navbar-brand:focus {
  color: #ff7657;
}

.navbar-light .navbar-brand:hover {
  color: #ff7657;
}

.nav-bg {
  background: #161616 !important;
  padding: 25px 0;
  -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
  box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
}

.nav-bg .navbar-brand {
  color: #fff;
  font-size: 26px;
  -webkit-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
}

.nav-bg .navbar-brand:hover {
  color: #fff;
}

.nav-bg .bor {
  background: #ff7657;
}

.nav-bg .bor:after {
  background: #db5536;
}

.nav-bg .bor:hover {
  color: white !important;
}

.nav-bg .navbar-nav .nav-link {
  color: #fff;
}

/*===========================
2.0 *** BANNER AREA START ***
=============================*/
#banner {
  padding: 260px 0 100px;
  position: relative;
  width: 100%;
}

#banner::after {
  position: absolute;
  content: "";
  top: 170px;
  right: 80%;
  overflow: hidden;
  width: 800px;
  height: 800px;
  border: 2px solid #ededed;
  display: block;
  border-color: #1d1d1d;
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

#banner::before {
  position: absolute;
  content: "";
  top: -349px;
  right: -300px;
  overflow: hidden;
  width: 800px;
  height: 800px;
  border: 2px solid #ededed;
  display: block;
  border-color: #1d1d1d;
  -webkit-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

.banner-txt h3 {
  font-size: 36px;
  font-family: pb;
  color: #ff7657;
  line-height: 45px;
  padding-bottom: 23px;
  padding-top: 16px;
}

.banner-txt p {
  font-size: 17px;
  color: #787878;
  padding-right: 40px;
  line-height: 26px;
  padding-bottom: 45px;
}

.separate-p {
  padding-bottom: 40px;
}

.banner-txt a {
  padding: 14px 20px;
  background: #ff7657;
  color: white;
  font-family: pb;
  font-size: 18px;
  position: relative;
}

.banner-txt a:hover:after {
  top: 7px;
}

.banner-txt a::after {
  width: 100%;
  height: 100%;
  position: absolute;
  content: "";
  top: 10px;
  left: 0;
  background: #db5536;
  z-index: -1;
  -webkit-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
}

.design-layer {
  position: absolute;
  width: 100%;
  height: 100%;
}

.design-layer::after {
  position: absolute;
  content: "";
  top: 380px;
  right: 0;
  width: 170px;
  height: 140px;
  background: #ff7657;
  z-index: -1;
  -webkit-clip-path: polygon(
    34% 32%,
    64% 46%,
    100% 31%,
    100% 55%,
    65% 70%,
    33% 56%,
    0 61%,
    0 39%
  );
  clip-path: polygon(
    34% 32%,
    64% 46%,
    100% 31%,
    100% 55%,
    65% 70%,
    33% 56%,
    0 61%,
    0 39%
  );
  -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
  box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
}

.design-layer::before {
  position: absolute;
  content: "";
  top: 430px;
  right: 0;
  width: 170px;
  height: 140px;
  background: #ff7657;
  z-index: -1;
  -webkit-clip-path: polygon(
    34% 32%,
    64% 46%,
    100% 31%,
    100% 55%,
    65% 70%,
    33% 56%,
    0 61%,
    0 39%
  );
  clip-path: polygon(
    34% 32%,
    64% 46%,
    100% 31%,
    100% 55%,
    65% 70%,
    33% 56%,
    0 61%,
    0 39%
  );
  -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
  box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
}

/*===========================
3.0 *** FEATURE AREA START ***
=============================*/
#overview {
  padding: 80px 0;
}

.over-pa {
  padding-top: 60px;
}

.over-item {
  background: #161616;
  -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
  box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
  padding: 35px 31px;
  margin-top: 30px;
}

.unique-style,
.unique-style2 {
  position: relative;
}

.unique-style::after {
  position: absolute;
  content: "";
  top: 50%;
  right: -145px;
  height: 2px;
  width: 190px;
  border: 2px solid #ededed;
  border-color: #1d1d1d;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -11;
}

.unique-style::before {
  position: absolute;
  content: "";
  top: 50%;
  right: -152px;
  height: 10px;
  border-radius: 50%;
  width: 10px;
  background: #ff7657;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}

.unique-style2:after {
  position: absolute;
  content: "";
  top: 50%;
  left: -170px;
  height: 2px;
  width: 230px;
  border: 2px solid #ededed;
  border-color: #1d1d1d;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -11;
}

.unique-style2:before {
  position: absolute;
  content: "";
  top: 50%;
  left: -171px;
  height: 10px;
  border-radius: 50%;
  width: 10px;
  background: #ff7657;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}

.unique-style3::after {
  position: absolute;
  content: "";
  top: -70px;
  left: 20px;
  height: 230px;
  width: 2px;
  border: 2px solid #ededed;
  border-color: #1d1d1d;
  z-index: -11;
}

.unique-style3::before {
  position: absolute;
  content: "";
  top: -76px;
  left: 16px;
  height: 10px;
  border-radius: 50%;
  width: 10px;
  background: #ff7657;
  z-index: -1;
}

.unique-style4::after {
  position: absolute;
  content: "";
  bottom: -105px;
  right: 20px;
  height: 230px;
  width: 2px;
  border: 2px solid #ededed;
  border-color: #1d1d1d;
  z-index: -11;
}

.unique-style4::before {
  position: absolute;
  content: "";
  bottom: -106px;
  right: 17px;
  height: 10px;
  border-radius: 50%;
  width: 10px;
  background: #ff7657;
  z-index: -1;
}

.header-text h3 {
  font-size: 37px;
  font-family: pb;
  color: white;
  letter-spacing: 10px;
  position: relative;
  display: inline-block;
}

.header-text h3:after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 240px;
  height: 2px;
  background: #1d1d1d;
}

.header-text h3 span {
  color: #ff7657;
}

.over-i {
  font-size: 27px;
  color: #fff;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  text-align: center;
  background: #f8615a;
}

.over-item h3 {
  font-size: 24px;
  color: white;
  font-family: pb;
  padding: 20px 0;
  position: relative;
}

.over-item p {
  font-size: 17px;
  color: #787878;
  line-height: 26px;
}

.over-btn {
  padding-top: 15px;
}

.over-btn a {
  color: #ff7657;
  font-size: 17px;
  font-family: pb;
}

over-btn a i {
  padding-right: 5px;
}

.txt-right {
  text-align: right;
}

.txt-right p {
  padding-left: 20px;
}

.txt-left p {
  padding-right: 20px;
}

/*===========================
4.0 *** ABOUT AREA START ***
=============================*/
#about {
  padding: 80px 0;
}

.about-header h3:after {
  width: 192px;
}

.about-img {
  background: #151515;
  -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
  box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.about-pa {
  padding-top: 25px;
}

.about-item {
  padding-top: 90px;
}

.about-img {
  position: relative;
}

.ai-one::after {
  position: absolute;
  content: "";
  top: 350px;
  left: -65px;
  width: 120px;
  height: 120px;
  border: 25px solid #161616;
  z-index: -1;
  border-radius: 50%;
}

.ai-two::after {
  position: absolute;
  content: "";
  top: 344px;
  right: -55px;
  width: 120px;
  height: 120px;
  border: 25px solid #161616;
  z-index: -1;
  -webkit-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  transform: rotate(35deg);
}

.ai-three::after {
  position: absolute;
  content: "";
  top: 350px;
  left: -65px;
  width: 120px;
  height: 120px;
  border: 25px solid #161616;
  z-index: -1;
  border-radius: 50%;
}

.about-img img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
}

.about-img:hover img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

.separet-span {
  font-family: pr;
  font-size: 19px;
  color: #ff7657;
}

.about-txt {
  padding-top: 30px;
}

.about-txt h3 {
  font-family: pb;
  font-size: 26px;
  color: #fff;
  padding-bottom: 16px;
  padding-top: 8px;
}

.about-txt p {
  font-size: 17px;
  color: #787878;
  line-height: 27px;
  padding-bottom: 30px;
}

.separate-p {
  padding-bottom: 50px !important;
}

.about-txt a {
  padding: 14px 20px;
  background: #ff7657;
  color: #fff;
  font-size: 18px;
  font-family: pb;
  position: relative;
}

.about-txt a i {
  padding-left: 8px;
}

.about-txt a::after {
  width: 100%;
  height: 100%;
  position: absolute;
  content: "";
  top: 10px;
  left: 0;
  background: #db5536;
  z-index: -1;
  -webkit-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
}

.about-txt a:hover:after {
  top: 6px;
}

.p-bar span {
  font-size: 18px;
  color: #787878;
}

.p-bars {
  padding-top: 35px;
}

.progress-bar {
  background: #ff7657;
}

.progress {
  background: #151515;
}

.p-bar {
  margin-bottom: 20px;
}

.counter-main {
  padding-top: 50px;
}

.counter-1 h5 {
  font-size: 18px;
  color: #ff7657;
  margin-top: -56px;
  margin-left: 28px;
  padding-bottom: 38px;
}

.counter-1 span {
  font-size: 18px;
  color: #787878;
}

/*===========================
5.0 *** GALLERY AREA START ***
=============================*/
#gallery {
  padding: 80px 0;
}

.gallery-pa {
  padding-top: 80px;
}

.gallery-img img {
  border-radius: 5px;
}

.g-mar {
  margin-top: 25px;
}

.sp-img2 {
  height: 340px;
}

.sp-img {
  height: 320px;
}

/*===========================
6.0 *** PRODUCT AREA START ***
=============================*/
#product {
  padding: 80px 0;
}

.product-pa {
  padding-top: 145px;
  padding-bottom: 110px;
}

.product-item {
  background: #151515;
  -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
  box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 40px 30px;
  position: relative;
}

.product-item img {
  position: absolute;
  top: -100px;
}

.product-txt span {
  color: #ff7657;
  font-family: pr;
  font-size: 18px;
}

.product-txt h3 {
  font-size: 25px;
  font-family: pb;
  color: white;
  padding-top: 6px;
  padding-bottom: 23px;
}

.product-txt p {
  color: #787878;
  font-family: pr;
  padding-bottom: 33px;
}

.next-p {
  padding-right: 17px;
  padding-top: 0;
}

.product-txt a {
  padding: 14px 20px;
  background: #ff7657;
  color: #fff;
  font-size: 18px;
  font-family: pb;
}

.product-slider {
  background: #151515;
  -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
  box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 30px 0 20px;
}

.pro-img {
  padding: 30px 0;
}

.pro-img img {
  border: 5px solid #ff7657;
  border-radius: 50%;
  display: inline-block;
}

.product-slider h3 {
  font-size: 26px;
  color: white;
  font-family: pb;
  padding-bottom: 6px;
}

.product-slider a {
  color: #ff7657;
}

.stars {
  padding-right: 35px;
}

.stars i {
  color: #fbaa33;
  margin: 0 1px;
}

.product-slider span {
  color: #787878;
  font-family: pr;
}

.border-style {
  border-bottom: 1px dashed #222;
  padding-bottom: 30px;
}

.pro-info {
  padding: 20px 0 0;
}

/*===========================
7.0 *** TEAM AREA START ***
=============================*/
#team {
  padding: 80px 0;
  position: relative;
}

.team-header h3:after {
  width: 164px;
}

#team::after {
  position: absolute;
  content: "";
  top: 380px;
  left: -25px;
  width: 170px;
  height: 140px;
  background: #ff7657;
  z-index: -1;
  -webkit-clip-path: polygon(
    34% 32%,
    64% 46%,
    100% 31%,
    100% 55%,
    65% 70%,
    33% 56%,
    0 61%,
    0 39%
  );
  clip-path: polygon(
    34% 32%,
    64% 46%,
    100% 31%,
    100% 55%,
    65% 70%,
    33% 56%,
    0 61%,
    0 39%
  );
  -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
  box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
}

#team::before {
  position: absolute;
  content: "";
  top: 430px;
  left: -25px;
  width: 170px;
  height: 140px;
  background: #ff7657;
  z-index: -1;
  -webkit-clip-path: polygon(
    34% 32%,
    64% 46%,
    100% 31%,
    100% 55%,
    65% 70%,
    33% 56%,
    0 61%,
    0 39%
  );
  clip-path: polygon(
    34% 32%,
    64% 46%,
    100% 31%,
    100% 55%,
    65% 70%,
    33% 56%,
    0 61%,
    0 39%
  );
  -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
  box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
}

.team-pa {
  padding-top: 85px;
}

.team-item img {
  border-radius: 30% 84% 28% 76% / 87% 23% 69% 29%;
  border: 6px solid #ff7657;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
}

.team-item:hover img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

.team-item h3 {
  font-family: pb;
  font-size: 26px;
  color: white;
  padding: 30px 0 14px;
}

.team-item p {
  font-family: pr;
  font-size: 18px;
  color: #787878;
  padding-bottom: 14px;
}

.team-item a {
  font-family: pb;
  font-size: 16px;
  color: #ff7657;
}

.team-btn a {
  padding: 14px 20px;
  background: #ff7657;
  color: #fff;
  font-size: 18px;
  font-family: pb;
  position: relative;
}

/*===========================
8.0 *** PRICE AREA START ***
=============================*/
#price {
  padding: 80px 0;
}

.price-pa {
  padding-top: 80px;
}

.price-table {
  background: #151515;
  -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
  box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
  padding: 30px 0 45px;
  border-radius: 4px;
}

.price-table h3 {
  color: white;
  font-family: pb;
  font-size: 18px;
  text-align: center;
  padding-bottom: 30px;
}

.gold {
  color: #ff7657 !important;
}

.gold-bg {
  border: 2px solid #ff7657;
}

.price-table h4 {
  font-size: 40px;
  font-family: pb;
  color: white;
  text-align: center;
  padding-bottom: 30px;
}

.price-table sub {
  font-family: pr;
  color: #ff7657;
  font-size: 16px;
}

.price-table p {
  color: #787878;
  font-family: pr;
  padding-bottom: 15px;
  padding-left: 35px;
}

.price-table p i {
  color: #ff7657;
  font-size: 18px;
  padding-right: 4px;
}

.price-table a {
  padding: 14px 20px;
  font-family: pb;
  font-size: 16px;
  color: #161616;
  background: white;
  text-align: center;
  border-radius: 50px;
  -webkit-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
}

.price-table a:hover {
  background: #ff7657;
  color: white;
}

.price-btn {
  padding-top: 35px;
}

.gold-bg2 a {
  background: #ff7657;
  color: white;
}

/*===========================
9.0 *** REVIEW AREA START ***
=============================*/
#review {
  padding: 80px 0;
  position: relative;
}

#review:after {
  position: absolute;
  content: "";
  top: -40px;
  right: -280px;
  width: 800px;
  height: 800px;
  border: 80px solid #161616;
  border-radius: 50%;
  z-index: -1;
  -webkit-box-shadow: 0 25px 60px rgba(0, 0, 0, 0.67),
    inset 0 25px 60px rgba(0, 0, 0, 0.67);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.67),
    inset 0 25px 60px rgba(0, 0, 0, 0.67);
}

.review-pa {
  padding-top: 80px;
}

.review-item {
  background: #151515;
  -webkit-box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
  box-shadow: 0 31px 35px rgba(0, 0, 0, 0.1);
  padding: 40px 0 30px;
  border-radius: 3px;
}

.comment {
  padding: 0 25px 30px;
}

.comment p {
  color: #787878;
  font-family: pr;
  font-size: 17px;
}

.comment p i {
  color: #ff7657;
  font-size: 22px;
  padding: 0 3px;
}

.user {
  padding: 30px 40px 0;
  border-top: 2px dashed #222;
}

.user-img img {
  background: #ff7657;
  border: 2px solid #ff7657;
  border-radius: 50%;
}

.user-txt h3 {
  font-size: 24px;
  font-family: pb;
  color: white;
  padding-bottom: 10px;
}

.user-txt span {
  color: #787878;
}

.star2 i {
  color: #fbaa33;
  margin: 0 4px;
}

/*===========================
10.0 *** CONTACT AREA START ***
=============================*/
#contact {
  padding: 80px 0;
  position: relative;
}

.contact-pa {
  padding-top: 80px;
}

.faq-icon {
  background: #151515;
  border: 1px solid #151515;
}

.faq-icon i {
  color: #ff7657;
}

.contact-icon i {
  color: #ff7657;
}

.form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.zom {
  font-size: 17px;
}

.box-bg {
  background: #151515;
  border: 1px solid #151515;
  color: #fffbfb;
}

.box-bg:focus {
  color: #fff;
  background: #151515;
  border: 1px solid #151515;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input:focus,
input:hover,
input::-moz-placeholder,
textarea::-moz-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: white !important;
}

.contact-input {
  height: 55px;
  margin-bottom: 29px !important;
}

.form-group {
  margin-bottom: 20px;
}

.con-btn {
  padding: 15px 40px;
  color: white;
  font-family: pb;
  background: #ff7657;
  border-radius: 50px;
  font-size: 18px;
  border: none;
  -webkit-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
}

.con-btn:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
  cursor: pointer;
}

.card-header {
  background: #151515;
  border: 1px solid #151515;
}

.card-body {
  background: #161616;
  color: #ccc;
  padding: 26px 40px;
  line-height: 28px;
  font-family: pr;
}

.card {
  border: none;
}

.btn-link {
  color: #ff7657;
  font-family: pb;
}

.btn-link:hover,
.btn-link:focus {
  text-decoration: none;
  color: #ff7657;
}

input::placeholder,
textarea::placeholder {
  color: white !important;
}

/*===========================
11.0 *** BLOG AREA START ***
=============================*/
#blog {
  padding: 80px 0;
}

.blog-header h3:after {
  width: 186px;
}

.blog-pa {
  padding-top: 80px;
}

.tags {
  padding-top: 60px;
}

.tags h4 {
  color: white;
  font-family: pb;
  padding-bottom: 45px;
  font-size: 21px;
}

.tags a {
  padding: 12px 17px;
  background: #151515;
  color: #787878;
  margin-right: 8px;
}

.tag-pa {
  padding-top: 48px;
}

.blog-item-txt h3 {
  color: white;
  font-size: 24px;
  font-family: pb;
  padding: 22px 0 16px;
}

.blog-item-txt p {
  color: #787878;
  padding-bottom: 14px;
}

.blog-item-txt a {
  color: #ff7657;
  font-size: 17px;
  font-family: pb;
  padding-top: 5px;
}

.blog-shadow {
  background: #151515;
  border-radius: 6px;
}

.blog-item-txt {
  padding-left: 23px;
  padding-bottom: 25px;
}

.search-btn {
  width: 60px;
  background: #ff7657;
  color: white;
  border: 1px solid #ff7657;
}

/*===========================
12.0 *** SUBSCRIBE AREA START ***
=============================*/
#subscribe {
  padding: 30px 0;
  margin-bottom: -70px;
}

.sub-main {
  padding: 30px 0;
  background: #ff7657;
  border-radius: 50px;
}

.sub-main h3 {
  padding-left: 60px;
  font-size: 26px;
  color: white;
  font-family: pb;
}

.sub-main a {
  background: white;
  padding: 15px 25px;
  border-radius: 50px;
  font-family: pb;
  color: #ff7657;
  font-size: 18px;
}

/*===========================
13.0 *** FOOTER AREA START ***
=============================*/

#footer {
  padding: 120px 0 85px;
  background: #151515;
  border-bottom: 1px solid #151515;
  border-top: 2px dashed #222;
}

.footer-logo p {
  color: #787878;
  font-family: pr;
  padding-top: 10px;
  line-height: 29px;
  font-size: 16px;
  padding-bottom: 13px;
}

.footer-social {
  padding-top: 11px;
}

.footer-social i {
  width: 45px;
  height: 45px;
  border: 1px solid #fff;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  color: #ff7657;
  background: white;
  font-size: 20px;
  margin-right: 13px;
  -webkit-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
}

.footer-social i:hover {
  background: #ff7657;
  color: #fff;
  border: 1px solid #ff7657;
}

.links h3 {
  font-size: 21px;
  font-family: pb;
  color: #fff;
  font-weight: 600;
  text-transform: capitalize;
  padding-bottom: 4px;
}

.links ul li a {
  color: #787878;
  text-transform: capitalize;
  line-height: 38px;
  font-size: 16px;
  -webkit-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
  font-family: pr;
}

.links ul li a:hover {
  color: #ff7657;
  padding-left: 10px;
}

.location p {
  padding-bottom: 5px;
}

.location a {
  color: #ccc;
  font-size: 15px;
  line-height: 25px;
}

.f-logo {
  font-size: 27px;
  color: #ff7657;
  font-family: pb;
}

.f-logo:hover {
  color: #ff7657;
}

.insta-item {
  color: white;
}

.fg2 input {
  border-radius: 50px;
  background: none;
  color: #fff;
  border: 1px solid #ff416c;
}

.fg2 input:focus {
  background: none;
  border: 1px solid #ff416c;
  position: relative;
  right: 0;
}

.fg2 input:hover {
  border-radius: 50px;
  border: 1px solid #ff416c;
}

.fg2 button i {
  -webkit-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
}

.fg2 button {
  border-radius: 50px;
  position: absolute;
  right: 16px;
  top: 65px;
  border: none;
  background: #ff416c;
  color: #fff;
}

.fg2 button:hover {
  border: none;
  background: #ff416c;
}

.fg2 button:hover i {
  padding-right: 8px;
}

/*===========================
14.0 *** COPY_RIGHT AREA START ***
=============================*/

#footer-btm {
  background: #161616;
  border-top: 2px dashed #222;
  padding: 25px 0;
}

.fop-btm h2 {
  color: #fff;
  font-size: 16px;
  font-family: pr;
  margin-bottom: 0;
}

.fop-btm a {
  color: #ff7657;
  font-family: pb;
}
/* My add ons PythonP*/

.navbar .dropdown-menu {
  background-color: #161616; /* Replace #yourColor with your desired color */
}

.navbar .dropdown-menu .dropdown-item:hover {
  background-color: #ff7657; /* Replace #hoverColor with the color for hover */
}

.navbar .dropdown-menu .dropdown-item {
  color: #fff; /* Replace #textColor with your desired text color */
}

/* inspired from this svgbackgrounds.com/ */
.buttonPro {
  margin-top: 1em;
  width: fit-content;
  display: flex;
  padding: 0.8em 1.1em;
  gap: 0.4rem;
  border: none;
  font-weight: bold;
  border-radius: 30px;
  cursor: pointer;
  text-shadow: 2px 2px 3px rgb(136 0 136 / 50%);
  background: linear-gradient(
      15deg,
      #880088,
      #aa2068,
      #cc3f47,
      #de6f3d,
      #f09f33,
      #de6f3d,
      #cc3f47,
      #aa2068,
      #880088
    )
    no-repeat;
  background-size: 300%;
  background-position: left center;
  transition: background 0.3s ease;
  color: #fff;
}
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.buttonPro:hover {
  background-size: 320%;
  background-position: right center;
}

.buttonPro:hover svg {
  fill: #fff;
}

.buttonPro svg {
  width: 23px;
  fill: #f09f33;
  transition: 0.3s ease;
}

.buttonDownload {
  margin-left: 5px; /* Adjust the value as needed */
  position: relative;
  overflow: hidden;
  height: 2rem;
  padding: 0 2rem;
  border-radius: 1.5rem;
  background: #787878;
  background-size: 400%;
  color: #fff;
  border: none;
  cursor: pointer;
  
}

.buttonDownload:hover::before {
  transform: scaleX(1);
}

.buttonDownload-content {
  position: relative;
  z-index: 1;
}

.buttonDownload::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  width: 100%;
  height: inherit;
  border-radius: inherit;
  background: linear-gradient(82.3deg, #cc3f47 10.8%, #f09f33 94.3%);
  transition: all 0.475s;
}
/* CSS for the body element */

/* CSS for the #redeem-key-card:before pseudo-element */
#redeem-key-card:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
}

/* CSS for the #redeem-key-card:after pseudo-element */
#redeem-key-card:after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -2;
  filter: blur(20px);
}
:root {
  --color1: rgb(242, 255, 0);
  --color2: #ffb300;
  --color3: #fc01015d;
}

@keyframes moveGradient {
  0% {
    background-position: 100% 0%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Shared CSS for the #redeem-key-card:before and #redeem-key-card:after pseudo-elements */
#redeem-key-card:before,
#redeem-key-card:after {
  background: linear-gradient(
    60deg,
    var(--color1),
    var(--color2),
    var(--color3),
    var(--color1),
    var(--color2),
    var(--color3)
  );
  background-size: 300% 300%;
  border-radius: inherit;
}
#redeem-key-card:after {
  animation: moveGradient 2s linear infinite;
}

/*admin panel tab colors*/
/* Tab links */
.tab-links {
  overflow: hidden;
  background: #161616;
  padding: 0 10px;
  border-radius: 10px;
}

/* Style the buttons inside the tab */
.tab-links .tablink {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: background-color 0.3s;
  font-family: pb;
  color: white;
}

/* Change background color of buttons on hover */
.tab-links .tablink:hover {
  background-color: #ff7657;
}

/* Create an active/current tablink class */
.tab-links .tablink.active {
  background-color: #ff7657;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 20px;
  border: 1px solid #222;
  border-top: none;
  background-color: #161616;
  color: white;
  border-radius: 0 0 10px 10px;
}




.log-red { color: red; }
.log-green { color: limegreen; }
.log-yellow { color: yellow; }
.log-lightblue { color: lightblue; }


.logs-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* Fix the table layout to ensure consistent column widths */
}

.logs-table th,
.logs-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  white-space: normal; /* Allow text to wrap onto multiple lines */
  word-wrap: break-word; /* Ensure content wraps within the cell */
  overflow-wrap: break-word; /* Alternative to word-wrap for better browser support */
}

.logs-table th {
  background-color: #161616;
}

.logs-table tr:nth-child(even) {
  background-color: #2c2929;
}
@media screen and (max-width: 768px) {
  .logs-table table,
  .logs-table thead,
  .logs-table tbody,
  .logs-table th,
  .logs-table td,
  .logs-table tr {
    display: block;
  }

  .logs-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .logs-table tr {
    border: 1px solid #ddd;
    margin-bottom: 20px; /* Increase space between logs */
  }

  .logs-table td {
    border: none;
    border-bottom: 1px solid #ddd;
    position: relative;
    padding: 10px; /* Adjust padding for more spacing */
    text-align: center; /* Center text horizontally */
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .logs-table td:before {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%); /* Center vertically */
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    content: attr(data-label); /* Use the data-label attribute to show headers */
  }

  /* Hide empty rows */
  .logs-table td:empty {
    display: none;
  }
}





/* .logs-table tr:hover {
  background-color: #eaeaea;
} */
/* Filter Input Box Styling */
#logFilterInput {
  background-color: #161616; /* Dark background to match the theme */
  color: white; /* White text color */
  border: 1px solid #ff7657; /* Border color similar to theme highlights */
  padding: 10px 15px; /* Comfortable padding */
  margin-bottom: 20px; /* Space below the input box */
  border-radius: 5px; /* Rounded corners */
  font-family: pb; /* Using the theme's font */
  font-size: 16px; /* Readable text size */
  width: 100%; /* Full width to accommodate different screen sizes */
  box-shadow: 0 2px 5px rgba(255, 118, 87, 0.6); /* Soft shadow for depth, using the theme's accent color */
  transition: all 0.3s ease; /* Smooth transition for interactions */
}

#logFilterInput:focus {
  outline: none; /* Remove default focus outline */
  border-color: #db5536; /* Slightly lighter border on focus */
  box-shadow: 0 4px 8px rgba(255, 118, 87, 0.6); /* Larger shadow on focus */
}

#keyFilterInput {
  background-color: #161616; /* Dark background to match the theme */
  color: white; /* White text color */
  border: 1px solid #ff7657; /* Border color similar to theme highlights */
  padding: 10px 15px; /* Comfortable padding */
  margin-bottom: 20px; /* Space below the input box */
  border-radius: 5px; /* Rounded corners */
  font-family: pb; /* Using the theme's font */
  font-size: 16px; /* Readable text size */
  width: 100%; /* Full width to accommodate different screen sizes */
  box-shadow: 0 2px 5px rgba(255, 118, 87, 0.6); /* Soft shadow for depth, using the theme's accent color */
  transition: all 0.3s ease; /* Smooth transition for interactions */
}
#keyFilterInput:focus {
  outline: none; /* Remove default focus outline */
  border-color: #db5536; /* Slightly lighter border on focus */
  box-shadow: 0 4px 8px rgba(255, 118, 87, 0.6); /* Larger shadow on focus */
}


#appSessionFilterInput {
  background-color: #161616; /* Dark background to match the theme */
  color: white; /* White text color */
  border: 1px solid #ff7657; /* Border color similar to theme highlights */
  padding: 10px 15px; /* Comfortable padding */
  margin-bottom: 20px; /* Space below the input box */
  border-radius: 5px; /* Rounded corners */
  font-family: pb; /* Using the theme's font */
  font-size: 16px; /* Readable text size */
  width: 100%; /* Full width to accommodate different screen sizes */
  box-shadow: 0 2px 5px rgba(255, 118, 87, 0.6); /* Soft shadow for depth, using the theme's accent color */
  transition: all 0.3s ease; /* Smooth transition for interactions */
}
#appSessionFilterInput:focus {
  outline: none; /* Remove default focus outline */
  border-color: #db5536; /* Slightly lighter border on focus */
  box-shadow: 0 4px 8px rgba(255, 118, 87, 0.6); /* Larger shadow on focus */
}



#webSessionFilterInput {
  background-color: #161616; /* Dark background to match the theme */
  color: white; /* White text color */
  border: 1px solid #ff7657; /* Border color similar to theme highlights */
  padding: 10px 15px; /* Comfortable padding */
  margin-bottom: 20px; /* Space below the input box */
  border-radius: 5px; /* Rounded corners */
  font-family: pb; /* Using the theme's font */
  font-size: 16px; /* Readable text size */
  width: 100%; /* Full width to accommodate different screen sizes */
  box-shadow: 0 2px 5px rgba(255, 118, 87, 0.6); /* Soft shadow for depth, using the theme's accent color */
  transition: all 0.3s ease; /* Smooth transition for interactions */
}
#webSessionFilterInput:focus {
  outline: none; /* Remove default focus outline */
  border-color: #db5536; /* Slightly lighter border on focus */
  box-shadow: 0 4px 8px rgba(255, 118, 87, 0.6); /* Larger shadow on focus */
}


.buttonAddTime,
.buttonAddApp,
.buttonAddTier,
.buttonDeleteKey,
.buttonCreateKey {
  background-color: #ff7657; /* Primary color of the theme */
  color: white; /* Text color */
  border: none; /* No border */
  padding: 10px 20px; /* Padding inside the button */
  margin: 15px 0; /* Margin around the button */
  border-radius: 5px; /* Rounded corners */
  font-family: "pb", sans-serif; /* Font family as per your theme */
  font-size: 16px; /* Font size */
  cursor: pointer; /* Cursor changes to pointer to indicate it's clickable */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effects */
}

.buttonAddTime:hover,
.buttonAddApp:hover,
.buttonAddTier:hover,
.buttonDeleteKey:hover,
.buttonCreateKey:hover {
  background-color: #db5536; /* Darker shade on hover */
  color: #fff; /* Keeping text color white for contrast */
}
/* pop up */

/* Modal-specific styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}


.dropdown2 {
  position: relative;
  display: inline-block;
  width: 100%; /* Ensure the dropdown takes the full width of its container */
  box-sizing: border-box; /* Include padding and border in the element's width */
  text-align: center; /* Center align the text */
}

.dropdown2-content {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* Center the dropdown content horizontally */
  min-width: 160px; /* Set a minimum width for the dropdown */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown2:hover .dropdown2-content {
  display: block;
}
.buttonCreateKey2 {
  background-color: #ff7657; /* Primary color of the theme */
  color: white; /* Text color */
  border: none; /* No border */
  padding: 0.6rem 1rem; /* Adjust padding for scalability */
  margin: 0.9rem 0; /* Margin around the button */
  border-radius: 5px; /* Rounded corners */
  font-family: "pb", sans-serif; /* Font family as per your theme */
  font-size: 1rem; /* Font size (adjusted for scalability) */
  cursor: pointer; /* Cursor changes to pointer to indicate it's clickable */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effects */
  width: 100%; /* Make the button take the full width of its container */
  box-sizing: border-box; /* Include padding and border in the element's width */
}

.buttonCreateKey2:hover {
  background-color: #db5536; /* Darker shade on hover */
  color: #fff; /* Keeping text color white for contrast */
}
.modal-content {
  background-color: #161616;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #222;
  width: 30%;
  color: white;
  position: relative;
  box-sizing: border-box;
}

/* Mobile Support */
@media (max-width: 768px) {
  .modal-content {
    width: 80%; /* Adjust width for mobile screens */
    margin: 20% auto; /* Adjust margin for better positioning on mobile */
    padding: 15px; /* Slightly reduce padding */
  }

  .row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .half-width31 {
    width: 100%; /* Make elements full-width on mobile */
  }
}

@media (max-width: 480px) {
  .modal-content {
    width: 90%; /* Further adjust width for smaller screens */
  }
}

.close {
  color: #aaa;
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 28px;
  cursor: pointer;
}

.close:hover {
  color: #ff7657;
}

/* Enhanced input boxes */
input[type="number"],
input[type="text"],
input[type="submit"] {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #2c2929;
  color: white;
  border: none;
}

input[type="submit"] {
  background-color: #ff7657;
  color: white;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #db5536;
}

label {
  color: white;
  padding: 8px 0;
  display: inline-block;
}
/* Styling for the dropdown */
#userSelect,
#keyTimeUnit,
#editSubscriptions,
#appSelect,
#appTier,
#appName {
  background-color: #161616; /* Dark background */
  color: white; /* White text color */
  border: 2px solid #ff7657; /* Border color matching the theme */
  padding: 8px 12px; /* Comfortable padding */
  margin-bottom: 15px; /* Margin below the dropdown */
  border-radius: 5px; /* Rounded corners */
  font-family: "pb", sans-serif; /* Font family as per your theme */
  font-size: 16px; /* Readable font size */
  width: 100%; /* Full width to accommodate different screen sizes */
  box-shadow: 0 2px 5px rgba(255, 118, 87, 0.6); /* Soft shadow for depth */
  -webkit-appearance: none; /* Removes default styling of dropdown in Webkit browsers */
  -moz-appearance: none; /* Removes default styling of dropdown in Firefox */
  appearance: none; /* Standard way to remove default dropdown styling */
  cursor: pointer; /* Cursor changes to pointer to indicate it's clickable */
  position: relative; /* Required for custom arrow positioning */
}

/* Custom arrow for the dropdown */
#userSelect,
#keyTimeUnit,
#editSubscriptions,
#appSelect,
#appTier,
#appName {
  background-image: linear-gradient(45deg, transparent 50%, white 50%),
    linear-gradient(135deg, white 50%, transparent 50%),
    linear-gradient(to right, #ff7657, #ff7657);
  background-position: calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px), 100% 0;
  background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
  background-repeat: no-repeat;
}

/* Change arrow color on hover */
#userSelect:hover,
#keyTimeUnit:hover,
#editSubscriptions:hover,
#appSelect:hover,
#appTier:hover,
#appName:hover {
  background-image: linear-gradient(45deg, transparent 50%, #ff7657 50%),
    linear-gradient(135deg, #ff7657 50%, transparent 50%),
    linear-gradient(to right, #db5536, #db5536);
}

/* Styling adjustments when the dropdown is focused */
#userSelect:focus,
#keyTimeUnit:focus,
#editSubscriptions:focus,
#appSelect:focus,
#appTier:focus,
#appName:focus {
  outline: none; /* Remove default focus outline */
  border-color: #db5536; /* Slightly lighter border on focus */
  box-shadow: 0 4px 8px rgba(255, 118, 87, 0.6); /* Larger shadow on focus */
}


/* HWID table styling */


.hwid-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* Fix the table layout to ensure consistent column widths */
}

.hwid-table th,
.hwid-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  white-space: normal; /* Allow text to wrap onto multiple lines */
  word-wrap: break-word; /* Ensure content wraps within the cell */
  overflow-wrap: break-word; /* Alternative to word-wrap for better browser support */
}

.hwid-table th {
  background-color: #161616;
  color: white; /* Ensure text color contrasts with the background */
}

.hwid-table tr:nth-child(even) {
  background-color: #2c2929;
}

@media screen and (max-width: 768px) {
  .hwid-table table,
  .hwid-table thead,
  .hwid-table tbody,
  .hwid-table th,
  .hwid-table td,
  .hwid-table tr {
    display: block;
  }

  .hwid-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .hwid-table tr {
    border: 1px solid #ddd;
    margin-bottom: 20px; /* Increase space between rows */
  }

  .hwid-table td {
    border: none;
    border-bottom: 1px solid #ddd;
    position: relative;
    padding: 10px; /* Adjust padding for more spacing */
    text-align: center; /* Center text horizontally */
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .hwid-table td:before {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%); /* Center vertically */
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    content: attr(data-label); /* Use the data-label attribute to show headers */
  }

  /* Hide empty rows */
  .hwid-table td:empty {
    display: none;
  }
}





/* Keys table styling */


.keys-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* Fix the table layout to ensure consistent column widths */
}

.keys-table th,
.keys-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  white-space: normal; /* Allow text to wrap onto multiple lines */
  word-wrap: break-word; /* Ensure content wraps within the cell */
  overflow-wrap: break-word; /* Alternative to word-wrap for better browser support */
}

.keys-table th {
  background-color: #161616;
  color: white; /* Ensure text color contrasts with the background */
}

.keys-table tr:nth-child(even) {
  background-color: #2c2929;
}

@media screen and (max-width: 768px) {
  .keys-table table,
  .keys-table thead,
  .keys-table tbody,
  .keys-table th,
  .keys-table td,
  .keys-table tr {
    display: block;
  }

  .keys-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .keys-table tr {
    border: 1px solid #ddd;
    margin-bottom: 20px; /* Increase space between rows */
  }

  .keys-table td {
    border: none;
    border-bottom: 1px solid #ddd;
    position: relative;
    padding: 10px; /* Adjust padding for more spacing */
    text-align: center; /* Center text horizontally */
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .keys-table td:before {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%); /* Center vertically */
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    content: attr(data-label); /* Use the data-label attribute to show headers */
  }

  /* Hide empty rows */
  .keys-table td:empty {
    display: none;
  }
}
/* Optional: Styling for hovering over rows */
.row31 {
  display: flex;
  align-items: center; /* Center vertically */
}

.half-width31 {
  flex: 1;
  margin-right: 10px; /* Optional margin for spacing between elements */
}

#keyTimeUnit {
  margin-top: 15px; /* Adjust the value to lower or raise the dropdown */
}
.deleteTierButton,
.deleteAppButton,
.buttonSingleDeleteKey {
  width: 100%;
  background-color: #ff7657; /* Primary color of the theme */
  color: white; /* Text color */
  border: none; /* No border */
  padding: 10px 20px; /* Padding inside the button */
  margin: 5px 0; /* Margin around the button */
  border-radius: 5px; /* Rounded corners */
  font-family: "pb", sans-serif; /* Font family as per your theme */
  font-size: 14px; /* Font size */
  cursor: pointer; /* Cursor changes to pointer to indicate it's clickable */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effects */
}
.deleteTierButton:hover,
.deleteAppButton:hover,
.buttonSingleDeleteKey:hover {
  background-color: #db5536; /* Darker shade on hover */
  color: #fff; /* Keeping text color white for contrast */
}

/* Users page */
/* Users Table Styling */


.users-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* Fix the table layout to ensure consistent column widths */
}

.users-table th,
.users-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  white-space: normal; /* Allow text to wrap onto multiple lines */
  word-wrap: break-word; /* Ensure content wraps within the cell */
  overflow-wrap: break-word; /* Alternative to word-wrap for better browser support */
}

.users-table th {
  background-color: #161616;
}

.users-table tr:nth-child(even) {
  background-color: #2c2929;
}

/* Give the last column more room */
.users-table th:last-child,
.users-table td:last-child {
  width: 130px; /* Set a fixed width for the last column */
}

/* Distribute remaining space equally among other columns */
.users-table th:not(:last-child),
.users-table td:not(:last-child) {
  width: calc((100% - 130px) / (number_of_columns - 1)); /* Adjust 'number_of_columns' */
}

@media screen and (max-width: 768px) {
  .users-table th:last-child,
  .users-table td:last-child {
    width: auto; /* Remove fixed width in mobile view */
  }

  .users-table table,
  .users-table thead,
  .users-table tbody,
  .users-table th,
  .users-table td,
  .users-table tr {
    display: block;
  }

  .users-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .users-table tr {
    border: 1px solid #ddd;
    margin-bottom: 20px; /* Increase space between users */
  }

  .users-table td {
    border: none;
    border-bottom: 1px solid #ddd;
    position: relative;
    padding: 10px; /* Adjust padding for more spacing */
    text-align: center; /* Center text horizontally */
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .users-table td:before {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%); /* Center vertically */
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    content: attr(data-label); /* Use the data-label attribute to show headers */
  }

  /* Center buttons within the td */
  .users-table td .button-class { /* Replace .button-class with the actual class of your button */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
  }

  /* Hide empty rows */
  .users-table td:empty {
    display: none;
  }
}
/* Users Table Hover Effect */
/* Uncomment below if you want a hover effect */
/*
.users-table tr:hover {
  background-color: #eaeaea;
}
*/

/* Filter Input Box Styling for Users */
#userFilterInput {
  background-color: #161616; /* Dark background to match the theme */
  color: white; /* White text color */
  border: 1px solid #ff7657; /* Border color similar to theme highlights */
  padding: 10px 15px; /* Comfortable padding */
  margin-bottom: 20px; /* Space below the input box */
  border-radius: 5px; /* Rounded corners */
  font-family: pb; /* Using the theme's font */
  font-size: 16px; /* Readable text size */
  width: 100%; /* Full width to accommodate different screen sizes */
  box-shadow: 0 2px 5px rgba(255, 118, 87, 0.6); /* Soft shadow for depth, using the theme's accent color */
  transition: all 0.3s ease; /* Smooth transition for interactions */
}

#userFilterInput:focus {
  outline: none; /* Remove default focus outline */
  border-color: #db5536; /* Slightly lighter border on focus */
  box-shadow: 0 4px 8px rgba(255, 118, 87, 0.6); /* Larger shadow on focus */
}

/* 
admin username effect */
:root {
  --color1: rgb(242, 255, 0);
  --color2: #ffb300;
  --color3: #fc01015d;
}

@keyframes moveGradient {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.admin-username {
  font-weight: bold;
  background: linear-gradient(
    60deg,
    var(--color1),
    var(--color2),
    var(--color3),
    var(--color1),
    var(--color2),
    var(--color3)
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* Makes the text transparent, showing only the background */
  animation: moveGradient 2s linear infinite;
}
/* app page style */

/* Apps Table Styling */

.apps-table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px; /* Space above the table */
  table-layout: fixed; /* Fix the table layout to ensure consistent column widths */
}

.apps-table th,
.apps-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  color: white; /* Text color for table cells */
  white-space: normal; /* Allow text to wrap onto multiple lines */
  word-wrap: break-word; /* Ensure content wraps within the cell */
  overflow-wrap: break-word; /* Alternative to word-wrap for better browser support */
}

.apps-table th {
  background-color: #161616; /* Header background */
}

.apps-table tr:nth-child(even) {
  background-color: #2c2929; /* Alternate row color */
}

/* Give the last column more room */
.apps-table th:last-child,
.apps-table td:last-child {
  width: 130px; /* Set a fixed width for the last column */
}

/* Distribute remaining space equally among other columns */
.apps-table th:not(:last-child),
.apps-table td:not(:last-child) {
  width: calc((100% - 130px) / (number_of_columns - 1)); /* Adjust 'number_of_columns' */
}

@media screen and (max-width: 768px) {
  .apps-table th:last-child,
  .apps-table td:last-child {
    width: auto; /* Remove fixed width in mobile view */
  }

  .apps-table table,
  .apps-table thead,
  .apps-table tbody,
  .apps-table th,
  .apps-table td,
  .apps-table tr {
    display: block;
  }

  .apps-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .apps-table tr {
    border: 1px solid #ddd;
    margin-bottom: 20px; /* Increase space between rows */
  }

  .apps-table td {
    border: none;
    border-bottom: 1px solid #ddd;
    position: relative;
    padding: 10px; /* Adjust padding for more spacing */
    text-align: center; /* Center text horizontally */
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .apps-table td:before {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%); /* Center vertically */
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    content: attr(data-label); /* Use the data-label attribute to show headers */
  }

  /* Center buttons within the td */
  .apps-table td .button-class { /* Replace .button-class with the actual class of your button */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
  }

  /* Hide empty rows */
  .apps-table td:empty {
    display: none;
  }
}

/* Filter Input Box Styling for Apps */
#appFilterInput {
  background-color: #161616; /* Dark background */
  color: white; /* White text color */
  border: 1px solid #ff7657; /* Border color */
  padding: 10px 15px; /* Padding */
  margin-bottom: 20px; /* Space below the input */
  border-radius: 5px; /* Rounded corners */
  font-family: pb; /* Font family */
  font-size: 16px; /* Font size */
  width: 100%; /* Full width */
  box-shadow: 0 2px 5px rgba(255, 118, 87, 0.6); /* Shadow for depth */
  transition: all 0.3s ease; /* Smooth transition */
}

#appFilterInput:focus {
  outline: none; /* Remove default focus outline */
  border-color: #db5536; /* Lighter border on focus */
  box-shadow: 0 4px 8px rgba(255, 118, 87, 0.6); /* Larger shadow on focus */
}

/* Button Styling for Apps Section */
.buttonAppAction {
  background-color: #ff7657; /* Primary theme color */
  color: white; /* White text */
  border: none; /* No border */
  padding: 10px 20px; /* Padding */
  margin: 5px; /* Margin around button */
  border-radius: 5px; /* Rounded corners */
  font-family: pb; /* Font family */
  font-size: 14px; /* Font size */
  cursor: pointer; /* Pointer cursor */
  transition: background-color 0.3s ease; /* Transition for hover */
}

.buttonAppAction:hover {
  background-color: #db5536; /* Darker shade on hover */
}

/* Responsive table for admin panel phone support*/
@media screen and (max-width: 768px) {
  .responsive-table {
    overflow-x: auto;
  }
}

/* Footer below */
.footer-gif {
  position: fixed; /* or 'absolute' if you don't want it fixed during scroll */
  left: 0;
  bottom: 40px; /* Adjust the size as needed */
  height: auto;
  transform: scaleX(1); /* Flip horizontally */
}
.custom-footer {
  position: fixed; /* Keeps the footer at the bottom left */
  left: 0;
  bottom: 0;
  width: 100%;
  /* background-color: #16161600; Dark background similar to your theme */
  color: rgba(255, 255, 255, 0.5); /* Light white text color */
  text-align: left; /* Aligns the text to the left */
  padding: 10px; /* Padding for spacing */
  font-family: pb; /* Consistent font with your theme */
}

.custom-footer .container {
  max-width: none; /* Removes the max-width constraint */
}

.custom-footer a {
  color: #ff7657; /* Replace #HEX_COLOR with the color you want */
  text-decoration: none; /* Optional: removes the underline */
}

/* Optional: changes color on hover */
.custom-footer a:hover {
  color: #db5536; /* Replace with the color you want on hover */
}
/* This style will only apply when the screen width is 767 pixels or less */
@media (max-width: 767px) {
  .custom-footer,
  .footer-gif {
    display: none;
  }
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-menu a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-menu a:hover {
  background-color: #f1f1f1;
}

/* Mobile styling */
@media screen and (max-width: 768px) {
  .dropdown-menu {
    position: static; /* Change to static to allow centering */
    margin: 0 auto; /* Center the dropdown menu */
    width: 100%; /* Make the dropdown take full width on mobile */
    text-align: center; /* Center the text within the dropdown */
  }

  .dropdown-menu a {
    padding: 12px 16px; /* Adjust padding for better spacing */
    text-align: center; /* Ensure links are centered */
  }
}
.heavy-png {
  position: fixed; /* or 'absolute' if you don't want it fixed during scroll */
  left: 0;
  bottom: 40px; /* Adjust the size as needed */
  left: 20px; /* Adjust the size as needed */
  height: auto;

  width: 200px; /* 10% of 1000px */
  height: 200px; /* 10% of 1000px */
}
@media (max-width: 767px) {
  .custom-footer,
  .heavy-png {
    display: none;
  }
}

/* Container for buttons */
.button-container {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.buttonExtendUser,
.buttonDelete,
.buttonSubmit {
  width: calc(50% - 5px); /* Adjust the width as needed */
  margin-right: 10px; /* Add margin to create spacing */
}

.buttonSubmit2 {
  width: calc(45%); /* Adjust the width as needed */
  margin-right: 10px; /* Add margin to create spacing */
}

.buttonDelete {
  background-color: #820000;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-family: "pb", sans-serif;
  font-size: 16px;
  cursor: pointer;
}

.buttonSubmitKey,
.buttonSubmitApp,
.buttonSubmitTier {
  background-color: #ff7657; /* Button background color */
  color: white; /* Button text color */
  border: none; /* No border */
  padding: 10px 20px; /* Padding around the text */
  border-radius: 5px; /* Rounded corners */
  font-family: "pb", sans-serif; /* Font family */
  font-size: 16px; /* Font size */
  cursor: pointer; /* Pointer cursor on hover */

  display: block; /* Make the button a block-level element */
  width: calc(100%); /* Take up the whole width minus some margin */
  margin: 20px auto; /* Center the button with margin on top and bottom */
}

.buttonSubmitKey:hover,
.buttonSubmitApp:hover,
.buttonSubmitTier:hover {
  background-color: #db5536; /* Darker shade on hover */
}

.buttonSubmit2,
.buttonSubmit {
  background-color: #ff7657;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-family: "pb", sans-serif;
  font-size: 16px;
  cursor: pointer;
}

.buttonSubmit2:hover,
.buttonSubmit:hover {
  background-color: #db5536;
}

.buttonDelete:hover {
  background-color: #820000b8;
}

.buttonExtendUser {
  background-color: #00a6ff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-family: "pb", sans-serif;
  font-size: 16px;
  cursor: pointer;
}

.buttonExtendUser:hover,
.buttonExtendUser:hover {
  background-color: #00a6ffb3;
}

.header-text2 h3 {
  font-size: 37px;
  font-family: pb;
  color: white;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
}
.header-text2 h3:after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 240px;
  height: 2px;
}

.header-text2 h3 span {
  color: #ff7657;
}
/* Profile page */

/* 
 Session stuff below  */

.sessions-table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px; /* Space above the table */
  table-layout: fixed; /* Fix the table layout to ensure consistent column widths */
}

.sessions-table th,
.sessions-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  color: white; /* Text color for table cells */
  white-space: normal; /* Allow text to wrap onto multiple lines */
  word-wrap: break-word; /* Ensure content wraps within the cell */
  overflow-wrap: break-word; /* Alternative to word-wrap for better browser support */
}

.sessions-table th {
  background-color: #161616; /* Header background */
}

.sessions-table tr:nth-child(even) {
  background-color: #2c2929; /* Alternate row color */
}

/* Give the last column more room */
.sessions-table th:last-child,
.sessions-table td:last-child {
  width: 130px; /* Set a fixed width for the last column */
}

/* Distribute remaining space equally among other columns */
.sessions-table th:not(:last-child),
.sessions-table td:not(:last-child) {
  width: calc((100% - 130px) / (number_of_columns - 1)); /* Adjust 'number_of_columns' */
}

@media screen and (max-width: 768px) {
  .sessions-table th:last-child,
  .sessions-table td:last-child {
    width: auto; /* Remove fixed width in mobile view */
  }

  .sessions-table table,
  .sessions-table thead,
  .sessions-table tbody,
  .sessions-table th,
  .sessions-table td,
  .sessions-table tr {
    display: block;
  }

  .sessions-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .sessions-table tr {
    border: 1px solid #ddd;
    margin-bottom: 20px; /* Increase space between rows */
  }

  .sessions-table td {
    border: none;
    border-bottom: 1px solid #ddd;
    position: relative;
    padding: 10px; /* Adjust padding for more spacing */
    text-align: center; /* Center text horizontally */
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .sessions-table td:before {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%); /* Center vertically */
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    content: attr(data-label); /* Use the data-label attribute to show headers */
  }

  /* Center buttons within the td */
  .sessions-table td .button-class { /* Replace .button-class with the actual class of your button */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
  }

  /* Hide empty rows */
  .sessions-table td:empty {
    display: none;
  }
}

/* Filter Input Box Styling for sessions */
#sessionFilterInput {
  background-color: #161616; /* Dark background */
  color: white; /* White text color */
  border: 1px solid #ff7657; /* Border color */
  padding: 10px 15px; /* Padding */
  margin-bottom: 20px; /* Space below the input */
  border-radius: 5px; /* Rounded corners */
  font-family: pb; /* Font family */
  font-size: 16px; /* Font size */
  width: 100%; /* Full width */
  box-shadow: 0 2px 5px rgba(255, 118, 87, 0.6); /* Shadow for depth */
  transition: all 0.3s ease; /* Smooth transition */
}

#sessionFilterInput:focus {
  outline: none; /* Remove default focus outline */
  border-color: #db5536; /* Lighter border on focus */
  box-shadow: 0 4px 8px rgba(255, 118, 87, 0.6); /* Larger shadow on focus */
}

.buttonTerminateSession {
  background-color: #ff7657; /* Primary color of the theme */
  color: white; /* Text color */
  border: none; /* No border */
  padding: 10px 20px; /* Padding inside the button */
  margin: 5px 0; /* Margin around the button */
  border-radius: 5px; /* Rounded corners */
  font-family: "pb", sans-serif; /* Font family as per your theme */
  font-size: 14px; /* Font size */
  cursor: pointer; /* Cursor changes to pointer to indicate it's clickable */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effects */
}

.buttonTerminateSession:hover {
  background-color: #db5536; /* Darker shade on hover */
  color: #fff; /* Keeping text color white for contrast */
}

/* for admin panel */
.success-message {
  color: green;
  background-color: #dff2bf;
  margin: 15px 0;
  padding: 12px;
  border-left: 6px solid green;
}
/* Add this style tag in the head section of your HTML or in your CSS file */
.hover-reveal .secret-content {
  visibility: hidden;
  color: transparent;
  transition: visibility 0s, color 0.5s linear;
}
.hover-reveal:hover .secret-content {
  visibility: visible;
  color: inherit;
}
/* Add this style tag in the head section of your HTML or in your CSS file */
.blur-reveal .secret-content {
  filter: blur(5px);
  transition: filter 0.3s ease-in-out;
}

.blur-reveal:hover .secret-content {
  filter: blur(0px);
}
/* Responsive video CSS */
.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  position: relative;
  height: 0;
}
.video-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

/* HOWER OVER TEXT SHIT */
/* Style for the card text container */
.custom-tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: rgba(44, 41, 41, 0.8); /* Adjusted for transparency */
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Adjust transition for visibility */
  pointer-events: none; /* Prevents the tooltip from being a hover target */
}

.custom-tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s; /* Reset transition delay for visibility when showing the tooltip */
}

/* Optional: Adding an arrow to the tooltip */
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(44, 41, 41, 0.8) transparent transparent transparent;
}

#custom-banner {
  width: some-fixed-width; /* Define a width or max-width if you want it to be less than full width */
  margin-left: auto;
  margin-right: auto;
}
.admin-panel {
  position: absolute; /* or fixed if it needs to be placed in relation to the viewport */
  width: 100%; /* Fill the width of the container */
  /* Remove left and transform properties used for centering since width: 100% will take care of the full width */
}

.profileInfo {
  width: 100%; /* Fill the width of the container */
}

/* below are the tutorial link stuff */
.tutorial-link {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.tutorial-input {
  flex: 1;
  margin-right: 5px;
  padding: 12px 20px;
  background: #151515;
  border: none;
  border-radius: 3px;
  font-size: 17px;
  color: white;
  font-family: pb;
}

.tutorial-input:focus {
  outline: 0;
}

.remove-btn {
  background-color: #a20000;
  color: white;
  border: none;
  cursor: pointer;
  padding: 12px 20px;
  border-radius: 3px;
  font-size: 17px;
  font-family: pb;
}

.remove-btn:hover {
  background-color: #6f1400;
}

/* Button to add new tutorial link */
.add-btn {
  background-color: #ff7657;
  color: white;
  border: none;
  cursor: pointer;
  padding: 12px 20px;
  border-radius: 3px;
  font-size: 17px;
  font-family: pb;
}

.add-btn:hover {
  background-color: #db5536;
}



/*style for settings page toggle buttons*/
/* Toggle Button Container */
.toggle-container {
  margin-bottom: 20px;
  font-family: pb;
  font-size: 18px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Switch Style */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
  background-color: #2c2929; /* Matches your theme's dark background */
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #ff7657; /* Matches your theme's accent color */
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/* Rounded Slider */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


#panelTimezoneSelect {
    background-color: #161616; /* Dark background */
    color: white; /* White text color */
    border: 2px solid #ff7657; /* Border color matching the theme */
    padding: 8px 12px; /* Comfortable padding */
    margin-bottom: 15px; /* Margin below the dropdown */
    border-radius: 5px; /* Rounded corners */
    font-family: "pb", sans-serif; /* Font family as per your theme */
    font-size: 16px; /* Readable font size */
    width: 100%; /* Full width to accommodate different screen sizes */
    box-shadow: 0 2px 5px rgba(255, 118, 87, 0.6); /* Soft shadow for depth */
    -webkit-appearance: none; /* Removes default styling of dropdown in Webkit browsers */
    -moz-appearance: none; /* Removes default styling of dropdown in Firefox */
    appearance: none; /* Standard way to remove default dropdown styling */
    cursor: pointer; /* Cursor changes to pointer to indicate it's clickable */
    position: relative; /* Required for custom arrow positioning */
}

/* Timezone style */
#panelTimezoneSelect {
    background-color: #161616; /* Dark background matching the theme */
    color: white; /* White text color */
    border: 2px solid #ff7657; /* Accent color border */
    padding: 8px 10px; /* Comfortable padding */
    margin-bottom: 15px; /* Space below the dropdown */
    border-radius: 5px; /* Rounded corners */
    font-family: "pb", sans-serif; /* Font family as per your theme */
    font-size: 16px; /* Readable font size */
    width: auto; /* Automatic width based on content */
    min-width: 150px; /* Ensure minimum width for consistency */
    box-shadow: 0 2px 5px rgba(255, 118, 87, 0.6); /* Soft shadow for depth */
    appearance: none; /* Standard way to remove default dropdown styling */
    cursor: pointer; /* Pointer cursor to indicate interactivity */
    position: relative; /* For custom arrow positioning */
}

/* Custom arrow for the dropdown */
#panelTimezoneSelect {
    background-color: #161616; /* Dark background matching the theme */
    color: white; /* White text color */
    border: 2px solid #ff7657; /* Accent color border */
    padding: 8px 12px; /* Comfortable padding */
    margin-bottom: 15px; /* Space below the dropdown */
    border-radius: 5px; /* Rounded corners */
    font-family: "pb", sans-serif; /* Font family as per your theme */
    font-size: 16px; /* Readable font size */
    width: 180px; /* Fixed width to maintain consistent appearance */
    box-shadow: 0 2px 5px rgba(255, 118, 87, 0.6); /* Soft shadow for depth */
    appearance: none; /* Standard way to remove default dropdown styling */
    cursor: pointer; /* Pointer cursor to indicate interactivity */
    position: relative; /* For custom arrow positioning */
}

/* Custom arrow for the dropdown */
#panelTimezoneSelect {
    background-color: #161616; /* Dark background matching the theme */
    color: white; /* White text color */
    border: 2px solid #ff7657; /* Accent color border */
    padding: 8px 10px; /* Comfortable padding */
    margin-bottom: 15px; /* Space below the dropdown */
    border-radius: 5px; /* Rounded corners */
    font-family: "pb", sans-serif; /* Font family as per your theme */
    font-size: 16px; /* Readable font size */
    width: 180px; /* Fixed width to maintain consistent appearance */
    box-shadow: 0 2px 5px rgba(255, 118, 87, 0.6); /* Soft shadow for depth */
    appearance: none; /* Standard way to remove default dropdown styling */
    cursor: pointer; /* Pointer cursor to indicate interactivity */
    position: relative; /* For custom arrow positioning */
}

/* Custom arrow for the dropdown */
#panelTimezoneSelect {
    background-image: linear-gradient(45deg, transparent 50%, white 50%),
        linear-gradient(135deg, white 50%, transparent 50%);
    background-position: calc(100% - 15px) calc(50%),
        calc(100% - 10px) calc(50%);
    background-size: 5px 5px, 5px 5px; /* Adjusted arrow size */
    background-repeat: no-repeat;
}

/* Arrow color and border on hover */
#panelTimezoneSelect:hover {
    background-image: linear-gradient(45deg, transparent 50%, #ff7657 50%),
        linear-gradient(135deg, #ff7657 50%, transparent 50%);
}

/* Remove any unwanted overflow */
#panelTimezoneSelect {
    overflow: hidden;
}


/* Running app count text*/
.running-app-count-text {
  color: #ff7657; /* Match the primary theme color */
  font-family: pb; /* Use the bold Poppins font */
  font-size: 16px; /* Smaller font size for better fit */
  background-color: #161616; /* Dark background to match theme */
  padding: 10px 10px; /* Add padding for top, bottom, left, and right */
  border-radius: 5px; /* Rounded corners for a smooth look */
  box-shadow: 0 2px 5px rgba(255, 118, 87, 0.6); /* Soft shadow for depth */
  display: inline-block; /* Ensure it wraps around the text nicely */
  text-align: center; /* Center the text within the span */
  margin: 10px 5px; /* Space around the text block */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effects */
}

@media screen and (max-width: 1200px) {
  .running-app-count-text {
    display: block; /* Stack the text block below the button on mobile */
    margin: 30px 0; /* Space around the text block */

    width:80%;
  }
}

@media screen and (max-width: 768px) {
  .running-app-count-text {
    display: block; /* Stack the text block below the button on mobile */
    margin: 30px 0; /* Space around the text block */

    width:100%;
  }
}