html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: #030713;
  color: white;
}

header {
  width: 100%;
  height: 1cm;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: #070F2B;
  color: #00ffcc;
  padding: 3mm 0;
}
header .header-left, header .header-right{
  font-family: "Biome W01 Regular";
  font-size: 2rem;
  text-shadow: 0 0 10px #00ffcc;
  color: white;
}
header .logo {
  display: flex;
  justify-content: center;
  width: 2cm;
}
header .logo img {
  object-fit: contain;
  filter: drop-shadow(0 0 15px white) brightness(500%);
}
header .line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgba(0, 212, 255, 0) 100%);
  z-index: 1;
}
header .line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(0, 212, 255, 0) 100%);
  filter: blur(5px);
  z-index: -1;
}

main {
  font-family: 'Inter', sans-serif;
  position: relative;
  top: 2cm;
  display: flex;
  flex-direction: row;
  padding: 5mm;
  height: 100%;
}

main .left-zone {
  display: flex;
  flex-direction: column;
  width: 15%;
  gap: 10px;
  margin-right: 10px;
  transition: width 0.3s ease-out;
}

main .left-zone .Business-descript-zone {
  font-family: 'Inter', sans-serif;
  outline: none;
  resize: none;
  height: 100%;
  font-size: 15px;
  padding: 10px;
  background-color: #07102db8;
  color: white;
  border: 3px solid #3fb4cee0;
  box-shadow: 0 0 20px 5px #070f2b;
  border-radius: 5px;
  transition: box-shadow 0.5s, border-color 0.5s ease;
}

main .left-zone .Business-descript-zone:focus {
  border-color: white;
  box-shadow: 0 0 5px white;
}

main .right-zone {
  padding: 0.1cm;
  display: flex;
  min-height: 30%;
  width: 85%;
  flex-direction: column;
  background-color: rgba(7, 15, 43, 0.8901960784);
  border: 2px solid #23adccba;
  box-shadow: 0px 0px 20px 1px rgba(1, 1, 1, 0.5);
  border-radius: 30px;
  overflow: auto;
  transition: width 0.3s ease-out;
}

.search-type{
  display: flex;
  font-family: "Biome W01 Regular";
  font-size: 1.6rem;
  text-shadow: 0 0 10px #00ffcc;
  color: white;
  flex-direction: row;
  justify-content: center;
}

.background {
  background: linear-gradient(to bottom, #09334a, #0a1438, #030713);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.loading {
    position: relative;
    display: none;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    margin-top: 3cm;
    opacity: 0.65;
}

.load_img {
    border-radius: 100cm;
    width: 30%; /* Resize the GIF */
    height: auto; /* Maintain aspect ratio */
    box-shadow: 0px 0px 40px 40px #000120
}

.tab_generator {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

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

.profile{
  position: relative;
  height: 1cm;
  width: 1cm;
  top: 50%;
  transform: translateY(-50%);
  background-color: #394a6d;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 100%;
  transition: background-color 0.3s, box-shadow 0.3s ease;
}

.profile_name {
  padding: 10px 20px; 
  display: none; 
  position: fixed; /* Fixed positioning to overlay all elements */
  border: solid 3px; 
  border-color: #394a6d; 
  border-radius: 8px; 
  background-color: #02091b; 
  box-shadow: 0 0 10px 5px #070f2b; 
  z-index: 9999; /* High z-index to overlay all elements */
  transition: opacity 0.3s ease; /* Smoother transition for opacity */
  opacity: 0; /* Start with opacity 0 */
}

.profile:hover {
  display: block;
  color: #4b5e7c;
  background-color: white;
  box-shadow: 0 0 10px #00ffcc;
}

.tab_creator {
    display: flex;
    padding: 10px 20px;
    width: 60%;
    border: solid 3px;
    border-color: #394a6d;
    border-radius: 50px;
    background-color: #02091b;
    box-shadow: 0 0 10px 5px #070f2b;
    overflow: hidden;
    transition: box-shadow 0.5s, border-color 0.5s ease; /* Smooth border transition */
}

.tab_creator.focused {
  border-color: white; /* Change the border color when input is focused */
  box-shadow: 0 0 5px white;
}

.table_name_create {
  background-color: transparent;
  width: 100%;
  font-size: 20px;
  color: white;
  border: none;
  outline: none;
}

.add_tab_btn {
  border-radius: 100%;
  background-color: #388266;
  border: none;
  color: white;
  cursor: pointer;
  transition: background-color 0.5s, box-shadow 0.5s, color 0.5s ease;
}
.add_tab_btn:hover {
  color: #4b5e7c;
  background-color: white;
  box-shadow: 0 0 5px #00ffcc;
}

.tabs {
  padding-top: 0.1cm;
  display: flex;
  justify-content: flex-start;
  border-bottom: 2px solid #394a6d;
}
.tab {
  display: flex;
  align-items: center;
  background-color: #1b3a57;
  border: none;
  cursor: pointer;
  color: white;
  border-bottom: 3px solid transparent;
  transition: background-color 0.3s, border-bottom 0.3s, box-shadow 0.3s ease;
}
.tabs .tab-button {
  padding: 10px;
  background-color: #1b3a57;
  border: none;
  cursor: pointer;
  color: white;
  border-bottom: 3px solid transparent;
  transition: background-color 0.3s, border-bottom 0.3s, box-shadow 0.3s ease;
}
.tabs .tab-button:hover{
  color: #4b5e7c;
  background-color: white;
  box-shadow: 0 0 10px #00ffcc;
}

.link-name {
  text-decoration: none;
  color: #00ffcc;
  transition: color 0.5s, font-weight 0.5s, box-shadow 0.5s;
  animation: 1s ease infinite pulse;
}
.link-name:hover {
  font-weight: bolder;
  color: white;
  text-shadow: 0 0 10px #00ffcc;
}

.tab-button.active {
  border-bottom: 3px solid white;
}

.table-content {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
  transition: display 0.5s ease;
}

table {
  width: 100%;
  border-collapse: collapse;
  color: white;
  overflow-x: hidden;
}
table th, table td {
  padding: 8px;
  border: 1px solid #394a6d;
  text-align: left;
}
table th {
  background-color: #23395d;
}
table tr.added-row {
  background-color: #006d77;
}

.save-button {
  font-weight: bold;
  position: relative;
  height: 1cm;
  width: 3cm;
  top: 50%;
  transform: translateY(-50%);
  background-color: #394a6d;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 100cm;
  transition: background-color 0.3s, box-shadow 0.3s ease;
}

.remove-button, .detail-button, .return_to_table, .keep-button, .help_button, .tab-erase{
  padding: 5px 10px;
  background-color: #394a6d;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 50px;
  transition: background-color 0.3s, box-shadow 0.3s ease;
}

.remove-button:hover, .detail-button:hover, .detail-button.active, .return_to_table:hover, .keep-button:hover, .keep-button.active, .save-button:hover, .help_button:hover, .tab-erase:hover {
  color: #4b5e7c;
  background-color: white;
  box-shadow: 0 0 10px #00ffcc;
}

.search-button {
  margin: 10px auto;
  padding: 10px 20px;
  background-color: #394a6d;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 100px;
  transition: background-color 0.3s, box-shadow 0.3s;
}
.search-button:hover {
  color: #4b5e7c;
  background-color: white;
  box-shadow: 0 0 10px #00ffcc;
}
.dot-flash::after {
  content: '';
  display: inline-block;
  animation: dots 1.5s infinite steps(4, end);
}

@keyframes dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
  100% { content: ''; }
}
.details {
  display: none;
  color: white;
  background-color: transparent;
  padding: 20px;
  border: none;
  transition: display 0.5s ease;
}

.hidden-elem {
  visibility: hidden;
  opacity: 0%;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}



/* Customizing the tooltip appearance */
.introjs-tooltip {
    background-color: #070F2B;  /* Dark background for the tooltip */
    color: #ffffff;             /* White text */
    border-radius: 8px;         /* Rounded corners */
    border: solid;
    border-color: white;
    border-width: 2px;
    padding: 10px;              /* Add some padding */
}

/* Changing the appearance of the highlighted element */
.introjs-helperLayer {
  box-shadow: 0 0 10px #00ffcc;
  border-radius: 10px;  /* Rounded corners for the highlight */
  border-color: white;
  border: solid;
  border-width: 3px;
}

/* Customizing the overlay background */
.introjs-overlay {
    background-color: rgba(0, 0, 0, 0.7);  /* Darker overlay */
}

/* Styling the buttons */
.introjs-skipbutton,
.introjs-prevbutton,
.introjs-nextbutton {
    background-color: #394a6d;    /* Blue button background */
    color: white;               /* White text */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.3s ease; /* Smoother transition for opacity */
}

/* Changing the hover state of buttons */
.introjs-skipbutton:hover,
.introjs-prevbutton:hover,
.introjs-nextbutton:hover {
  display: block;
  color: #4b5e7c;
  background-color: white;
  box-shadow: 0 0 10px #00ffcc;
}

.swal2-popup {
  font-family: "Biome W01 Regular";
  color: #000120;
}