@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-white;
  @apply text-gray-600;
  @apply font-light;
}

a {
  @apply text-gray-600;
}

a:hover {
  @apply text-blue-900;
  @apply underline;
  @apply underline-offset-2;
}

.ti, .icon-tabler {
  stroke-width: 1px;
  fill: none;
  @apply text-gray-500;
  @apply stroke-gray-500;
}

a:hover .ti, a:hover .icon-tabler {
  @apply stroke-blue-900;
}

ul {
  @apply !list-inside;
}
input[type="radio"],input[type="checkbox"] {
  @apply focus:ring-transparent;
}

.wrapper {
  max-width: 50rem;
  width: 100%;
  margin: 0 auto;
}
.tabs {
  position: relative;
  height: 14.75rem;
   
}
.tabs::before,
.tabs::after {
  content: "";
  display: table;
}
.tabs::after {
  clear: both;
}
.tab {
  float: left;
  
}
.tab-switch {
  display: none;
}
.tab-label {
  position: relative;
  display: block;
  line-height: 2.75em;
  height: 3em;
  padding: 0 1.618em;
  color: #000000;
  cursor: pointer;
  top: 0;
  transition: all 0.25s;
  border-bottom: #000000;
  width: 120px;
  text-align: center;
}
.tab-label:hover {
  top: -0.25rem;
  transition: top 0.25s;
  
}
.tab-content {
  height: 12rem;
  position: absolute;
  z-index: 1;
  top: 2.75em;
  left: 0;
  padding: 1.618rem;
  background: #fff;
  color: #2c3e50;
  opacity: 0;
  transition: all 0.35s;
}
.tab-switch:checked + .tab-label {
  background: #fff;
  color: #ffffff;
  border-bottom: 0;
  transition: all 0.35s;
  z-index: 1;
  top: -0.0625rem;
  background-color: rgb(23 37 84); 
}
.tab-switch:checked + label + .tab-content {
  z-index: 2;
  opacity: 1;
  transition: all 0.35s;
}
.mainBody::-webkit-scrollbar {
  -webkit-appearance: none;
}
.mainBody::-webkit-scrollbar:vertical {
  width: 11px;
}
.mainBody::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid white; /* should match background, can't be transparent */
  background-color: rgba(0, 0, 0, .5);
}
.mainBody::-webkit-scrollbar-track { 
  background-color: #fff; 
  border-radius: 8px; 
} 
.mainBody {
  height: 250px;
  background-color: #ddd;
  padding: 24px;
  overflow: scroll;  
  border: 2px solid #000;
}
.pop-up{
  display: none;
  overflow-y:auto;
  position: fixed; 
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%); 
  height: 70%; 
  background-color: white;
  padding: 20px; z-index: 9999;
  box-shadow: 0 0 0 9999px #000000b0;

}