/*==================
Name: Akappella INC
URL: Akappella.com
verison:  1.0 
29.10
====================*/
:root{
  --main-body: #121212;
  --main-bg:#171717;
  --main-button:#2D2D2D;
  --text-dark:#868686;
  --text-white:#ffffff;
  --text-inactive:#595959;
  --text-red:#F01145;
  /* --text-correct:#CFFF81; */
  --text-correct:linear-gradient(90deg, #FF9F9F 0.41%, #F3EDB5 100%);
  --text-read:#34B2E8;
  --main-hover:#1A1A1A;
  --main-purple:#CBAAF9;
  --popup-bg:#171717;
  --main-org:#E4976C;
  --whole-black:#000000;
  --search-btn:#212121;
  --ltr-gry:#1F1F1F;
}
/*==MAIN==*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
ul,
ol {
  list-style: none;
}
html:focus-within {
  scroll-behavior: smooth;
}
html, body {
  height: 100%;
}
body { 
  font-family: 'Mulish', sans-serif;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  margin: 0;
  background: var(--main-body);
  color: var(--text-white);
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover{
  color: var(--main-color-hover);
}
a:not([class]) {
  text-decoration-skip-ink: auto;
}
img, picture  {
  max-width: 100%;
  height: auto;
  display: block;
}
input,
button,
textarea,
select {
  font: inherit;
}
textarea:focus, input:focus{
  outline: none;
}
ul, ol {
  padding-left: 1rem;
}
button {
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--text-white);
}
label {
  display: inline-block;
  margin-bottom: 0.5rem;
}
::-webkit-input-placeholder {
  color: var(--text-inactive) !important;
}
:-ms-input-placeholder {
  color: var(--text-inactive) !important;
}
::placeholder {
  color: var(--text-inactive) !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
  transition: background-color 5000s;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
}
/*scrollbar*/
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: hsl(0deg 0% 18% / 39%);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: hsl(0deg 0% 18% / 89%);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/*==colors==*/
.body {
  color: var(--main-body);
}
.bg-transparent{
  background: transparent !important;
}
.bg-body {
  background: var(--main-body);
}
.bg-background {
  background: var(--main-bg);
}
.button{
  color: var(--main-button);
}
.bg-button{
  background: var(--main-button);
}
.text-white{
  color: var(--text-white);
}
.bg-white{
  background: var(--text-white);
}
.text-dark{
  color: var(--text-dark);
}
.text-black{
  color: var(--main-body);
}
.bg-text{
  background: var(--text-dark);
}
.inactive{
  color: var(--text-inactive);
}
.bg-inactive{
  background: var(--text-inactive);
}
.red {
  color: var(--text-red);
}
.bg-red{
  background: var(--text-red);
}
.correct,
.correct .marquee,
.correct .marquee__inner {
  background: var(--text-correct);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-correct{
  background: var(--text-correct);
}
.read{
  color: var(--text-read);
}
.bg-read{
  background: var(--text-read);
}
.bg-hover{
  background: var(--main-hover);
}
.purple{
  color: var(--main-purple);
}
.bg-purple{
  background: var(--main-purple);
}
.bg-org{
  background: var(--main-org);
}
.bg-grey{
  background: var(--ltr-gry);
}
.lt-grey{
  color: var(--ltr-gry);
}
.btn-grey{
  color: var(--search-btn);
}
.bg-dgrey{
  background: var(--search-btn);
}
/*==display==*/
.d-contents {
  display: contents;
}
.d-flex {
  display: flex !important;
}
.flex-grow-0 {
  flex-grow: 0 !important;
}
.flex-grow-1 {
  flex-grow: 1 !important;
}
.flex-shrink-0 {
  flex-shrink: 0 !important;
}
.flex-shrink-1 {
  flex-shrink: 1 !important;
}
.flex-center{
  align-items: center;
  justify-content: center;
}
.align-items {
  align-items: center;
}
.justify-center{
  justify-content: center;
}
.justify-content-between {
  justify-content: space-between;
}
.flex-left {
  align-items: flex-start !important;
}
.flex-right {
  align-items: flex-end !important;
}
.flex-direction{
  flex-direction: column !important;
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-auto{
  overflow: auto;
}
/*==grid==*/
.grid {
  display: grid;
}
.d-inline-block{
  display: inline-block;
}
.d-inline{
  display: inline;
}
.d-block{
  display: block;
}
.d-none{
  display: none !important;
}
.bd-rd {
  border-radius: 5px;
}
.bd-10 {
  border-radius: 10px;
}
.bd-12, .br-12{
  border-radius: 12px;
}
.bd-16 {
  border-radius: 16px;
}
.br-50{
  border-radius: 50%;
}
.br-50px{
  border-radius: 50px;
}
.border-0{
  border: 0;
}
.stroke {
  border: 1px solid var(--main-button);
}
.stroke-dark {
  border: 1px solid var(--text-dark);
}
.w-25{
  width: 25%;
}
.w-50{
  width: 50%;
}
.w-100{
  width: 100%;
}
.h-100{
  height: 100%;
}
.position-relative{
  position: relative;
}
.position-absolute{
  position: absolute;
}
.text-center {
  text-align: -webkit-center;
  text-align: center;
}
.text-left{
  text-align: left;
}
.text-right{
  text-align: right;
}
/*==gap==*/
.gap-1 {
  gap: 0.25rem !important;
}
.gap-2 {
  gap: 0.5rem !important;
}
.gap-3 {
  gap: 1rem !important;
}
.gap-4 {
  gap: 2rem !important;
}
.gap-5 {
  gap: 5rem !important;
}
/*==margins==*/
.m-0{
  margin: 0 !important;
}
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}
.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}
.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}
.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}
.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}
.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}
.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}
.m-auto {
  margin: auto !important;
}
.ml-auto{
  margin-left: auto;
}
.mr-auto{
  margin-right: auto;
}
.mt-auto{
  margin-top: auto;
}
.mb-auto{
  margin-bottom: auto;
}
.mt-0 {
  margin-top: 0 !important;
}
.mt-1 {
  margin-top: 0.25rem !important;
}
.mt-2 {
  margin-top: 0.5rem !important;
}
.mt-3 {
  margin-top: 1rem !important;
}
.mt-4 {
  margin-top: 1.5rem !important;
}
.mt-5 {
  margin-top: 3rem !important;
}
.ml-1 {
  margin-left: 0.25rem !important;
}
.mr-1 {
  margin-right: 0.25rem !important;
}
.ml-2 {
  margin-left: 0.5rem !important;
}
.mr-2 {
  margin-right: 0.5rem !important;
}
.ml-3 {
  margin-left: 1rem !important;
}
.mr-3 {
  margin-right: 1rem !important;
}
.mr-4 {
  margin-right: 1.5rem !important;
}
.mr-5 {
  margin-right: 3rem !important;
}
.mx-3 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}
.m-4 {
  margin: 1.5rem !important;
}
.ml-4 {
  margin-left: 1.5rem !important;
}
.ml-5 {
  margin-left: 3rem !important;
}
.mr-8 {
  margin-right: 8px;
}
.mr-20 {
  margin-right: 20px;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-1 {
  margin-bottom: 0.25rem !important;
}
.mb-2 {
  margin-bottom: 0.5rem !important;
}
.mb-3 {
  margin-bottom: 1rem !important;
}
.mb-4{
  margin-bottom: 1.5rem !important;
}
.mb-5{
  margin-bottom: 3rem !important;
}

/*==paddings==*/
.p-0 {
  padding: 0;
}
.p-auto {
  padding: auto;
}
.p-1 {
  padding: 0.25rem !important;
}
.p-2 {
  padding: 0.5rem !important;
}
.pt-1{
  padding-top: 0.25rem !important;
}
.px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}
.px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.px-3 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.px-4 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
.py-0{
  padding-top: 0.0 !important;
  padding-bottom: 0.0 !important;
}
.py-1{
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.py-2{
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.py-3{
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.py-4{
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
.p-3 {
  padding: 1rem !important;
}
.pt-3 {
  padding-top: 1rem !important;
}
.pt-4 {
  padding-top: 1.5rem !important;
}
.pt-5 {
  padding-top: 3rem !important;
}
.pb-1 {
  padding-bottom: 0.25rem !important;
}
.pb-2 {
  padding-bottom: 0.5rem !important;
}
.pb-3 {
  padding-bottom: 1rem !important;
}
.pb-4 {
  padding-bottom: 1.5rem !important;
}
.p-4 {
  padding: 1.5rem !important;
}
.pr-4 {
  padding-right: 1.5rem !important;
}
.p-5 {
  padding: 3rem !important;
}
.px-5 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}
.pb-5 {
  padding-bottom: 3rem !important;
}
.pr-5 {
  padding-right: 3rem !important;
}
.pl-1 {
  padding-left: 0.25rem !important;
}
.pr-1 {
  padding-right: 0.25rem !important;
}
.pl-2{
  padding-left: 0.5rem !important;
}
.pr-2{
  padding-right: 0.5rem !important;
}
.pl-3{
  padding-left: 1rem !important;
}
.pl-2rem{
  padding-left: 2rem !important;
}
.pl-4{
  padding-left: 1.5rem !important;
}
.pl-5{
  padding-left: 3rem !important;
}
.pr-3{
  padding-right: 1rem !important;
}
.vertical-middle{
  vertical-align: middle;
}
.lh-0{
  line-height: 0;
}
.lh-normal{
  line-height: normal;
}
/*==fonts==*/
.f-bold {
  font-weight: 700;
}
.f-400{
  font-weight: 400;
}
.f-600{
  font-weight: 600;
}
.fs-8 {
  font-size: 8px;
}
.fs-10 {
  font-size: 10px;
}
.fs-12{
  font-size: 12px;
}
.fs-14{
  font-size: 14px;
}
.lh-14{
  line-height: 14px;
}
.fs-16 {
  font-size: 16px;
}
.fs-20 {
  font-size: 20px;
}
.fs-21 {
  font-size: 21px;
}
.fs-24 {
  font-size: 24px;
}
.fs-26 {
  font-size: 26px;
}
.fs-30 {
  font-size: 30px;
}
.fs-35 {
  font-size: 35px;
}
.h1 {
  font-size: 28px;
}
.t-trim{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*==marquee==*/
#player-title {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
}
#player-title .marquee {
  display: inline-flex;
  gap: var(--marquee-gap, 32px);
  will-change: transform;
  animation: marquee linear infinite;
  animation-play-state: paused; 
}
#player-title .marquee.is-animating {
  animation-play-state: running;
}
#player-title:hover .marquee,
.player:hover #player-title .marquee {
  animation-play-state: paused !important;
}
#player-title .marquee__inner {
  display: inline-block;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--marquee-gap, 32px) / 2)); }
}
/*==images-set==*/
.bg-img{
  background-position: center;
  background-size: cover;
}
/*==table==*/
.table {
  width: 100%;
  vertical-align: middle;
  caption-side: bottom;
  border-collapse: collapse;
}
.table > tbody {
  vertical-align: inherit;
}
.table > thead {
  /* vertical-align: bottom; */
}
.table > * {
  text-align: left;
}
.table > * > * > * {
  padding: .8rem .3rem .8rem 0;
}
.t-click{
  width: 2%;
}
.t-project{
  width: 45%;
}
.t-details{
  width: 15%;
}
.t-extra{
  width: 10%;
}
.t-hover {
  width: 5%;
}
.t-hover-bt {
  visibility: hidden;
}
.table tr:hover .t-hover-bt, .dropdown-active .t-hover-bt {
  visibility: visible;
}
tbody tr:hover {
  background: var(--main-hover);
}
tbody tr:hover button {
/*  background: var(--main-button);*/
}
tbody tr button.active img{
  visibility: visible;
}
tbody tr:hover .checkbox {
  background: var(--main-button);
}
th {
  font-weight: inherit;
}
.hvr:hover{
  background: var(--main-hover) !Important;
}
.hvr-dark:hover{
  background: var(--main-body) !Important;
}
.ico {
  /* -webkit-filter:invert(1);
  filter: invert(1); */
}
.ico-8 {
  height: 8px;
  /* -webkit-filter:invert(1);
  filter: invert(1); */
}
.ico-10 {
  height: 10px;
  /* -webkit-filter:invert(1);
  filter: invert(1); */
}
.ico-12 {
  height: 12px;
  /* -webkit-filter:invert(1);
  filter: invert(1); */
}
.ico-14 {
  height: 14px;
  /* -webkit-filter:invert(1);
  filter: invert(1); */
}
.ico-16 {
  height: 16px;
  /* -webkit-filter:invert(1);
  filter: invert(1); */
}
.ico-20 {
  height: 20px;
  /* -webkit-filter:invert(1);
  filter: invert(1); */
}
.ico-24 {
  height: 24px;
  /* -webkit-filter:invert(1);
  filter: invert(1); */
}
.ico-38 {
  height: 38px;
  /* -webkit-filter:invert(1);
  filter: invert(1); */
}
.fill-black {
  filter: brightness(0);
}
.t-user{
  height: 21px;
  width: 21px;
}
.search-btn:hover{
  filter: brightness(10);
}
.cp, #table-body tr, .pro-table tr, .breadcrumb span, .esdrp_list tr, .import-table tr td{
  cursor: pointer;
}
/*==checkbox==*/
.checkbox{
  cursor: pointer;
  margin: 0 0 0 0.85rem;
  width: 16px;
  height: 16px;
  background-color: var(--main-button);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
  border-radius: 5px;
}
.checkbox:checked {
  background-color: var(--text-white) !important;
  border-color: var(--text-white) !important;
}
.checkbox:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

/*==dropdown==*/
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-toggle {
  cursor: pointer;
}
.dropdown-toggle:focus {
  outline: none;
}
.dropdown-menu {
  display: none;
  position: absolute;
  background-color: var(--main-bg);
  border: 1px solid var(--main-button);
  border-radius: 10px;
  min-width: 160px;
  width: max-content;
  z-index: 1;
  list-style: none;
  overflow: hidden;
  padding: 0;
  margin-top: 10px;
}
.dropdown-menu li {
  padding: 8px 12px;
}
.dropdown-menu li a {
  text-decoration: none;
  color: var(--text-white);
  display: block;
}
.dropdown-menu li:hover {
  background-color: var(--main-hover);
}
.dropdown.open .dropdown-menu {
  display: block;
}
.dropdown.left-aligned .dropdown-menu {
  right: 0;
  left: auto;
}
.dropdown.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 10px;
}
/*==dropdown active tr==*/
tr.dropdown-active {
  background-color: var(--main-hover) !important;
}
/*==buttons==*/
.hover-white:hover, .hover-white.active{
  background-color: var(--text-white) !important;
  color: var(--main-body);
}
.hover-white:hover img , .hover-white.active img {
  filter: brightness(0);
}
.hover-agg:hover, .hover-agg.active{
  background: var(--text-correct) !important;
  color: var(--main-body) !important;
}
.xyz:hover{
  background: var(--text-correct) !important;
  color: var(--main-body) !important;
}
.hover-agg:hover *, .hover-agg.active *, .btn-agg img, .xyz:hover img{
  filter: brightness(0);
}
/*==img==*/
.im_xCrp{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
/*==popup==*/
.popup{
  display: none;
}
.popup.active{
  background: var(--main-body);
  opacity: 0.6;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
  display: block ;
}
.popup-body {
  background: var(--popup-bg);
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 30px;
  width: 50%;
  z-index: 99;
  display: none;
  overflow: hidden;
  border: 1px solid #313131;
  /* overflow-y: scroll; */
}
.pop-scroll{
  height: 100%;
  height: -webkit-fill-available;
  height: -moz-available;
  height: fill-available;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 70px;
}
.eh-90{
  padding-bottom: 90px;
}
.popup-body.active{
  display: block;
}
.close-popup {
  right: 1.5rem;
  top: 2rem;
}
/*==icon==*/
.for-black {
  filter: invert(0);
  -webkit-transform: translateZ(0);
}
.for-notify{
  filter: invert(86%) sepia(34%) saturate(3673%) hue-rotate(199deg) brightness(99%) contrast(97%);
/*  -webkit-transform: translateZ(0);*/
}
.for-grey{
  filter: invert(56%) sepia(2%) saturate(23%) hue-rotate(328deg) brightness(95%) contrast(94%);
}
.for-green{
  filter: invert(88%) sepia(19%) saturate(950%) hue-rotate(31deg) brightness(105%) contrast(101%);
}
/*==icon set==*/

@font-face {
  font-family: 'icomoon';
  src:  url('/fonts/icomoon.eot?ri6wee');
  src:  url('/fonts/icomoon.eot?ri6wee#iefix') format('embedded-opentype'),
    url('/fonts/icomoon.ttf?ri6wee') format('truetype'),
    url('/fonts/icomoon.woff?ri6wee') format('woff'),
    url('/fonts/icomoon.svg?ri6wee#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-pause-fill:before {
  content: "\e900";
}
.icon-pause:before {
  content: "\e901";
}
.icon-play-fill:before {
  content: "\e902";
}
.icon-play:before {
  content: "\e903";
}
/*==trigger==*/
input.akatogle {
  position: relative;
  width:24px;
  height:12px;
  -webkit-appearance: none;
  background: var(--text-dark);
  outline:none;
  border-radius: 40px;
  transition: .1s;
  cursor: pointer;
}
input.akatogle:checked[type="checkbox"] {
  background: var(--text-correct);
}
input.akatogle:before {
  content: '';
  position: absolute;
  width:12px;
  height:12px;
  border-radius: 20px;
  top:0px; 
  left:0px;
  background: #fff;
  transform: scale(1.05);
  transition: .1s;
  cursor: pointer;
}
input.akatogle:checked:before {
  left: 12px;
}
/*==progress==*/
.progress {
  display: flex;
  height: 8px;
  font-size: 0.75rem;
  background-color: var(--main-button);
}
.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  text-align: center; 
  white-space: nowrap;
  background: var(--text-correct);
  transition: width 0.6s ease;
}
/*==upload-files==*/
.upf__b{
  z-index: 9;
  right: 2rem;
  width: 416px;
  bottom: 0 !important;
  background-color: var(--main-body);
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  border-radius: 14px;
  border:1px solid var(--main-button);
  max-height: 50%;
  overflow: auto;
}
.upf__st_mn.upf__b{
  padding: 1rem !important;
}
.upf__fl:not(:last-child){
  min-width: 366px;
  margin-bottom: 1.5rem;
}
.upf__mx {
  display: block;
  right: 1rem;
  top: 1rem;
}
.upf__st_mx .upf__mx img{
  transform: rotate(90deg);
}
.upf__st_mn .upf__mx img{
  transform: rotate(-90deg);
}
.upf__max{
/*  padding-bottom: 1rem;*/
}
.upf__minl{
  min-width: 366px;
}
.upf__l {
  display: flex;
  height: 8px;
  font-size: 0.75rem;
  background-color: var(--main-button);
}
.upf__st_mn .upf__minl {
  padding-right: 2rem;
}
.upf__l-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background: var(--text-correct);
}
.upf__st_mx .upf__max, .upf__st_mn .upf__min {
  display: block;
}
.upf__st_mn .upf__max, .upf__st_mx .upf__min  {
  display: none;
}
.upf__PLA{
  margin-bottom: 80px;
}
.upf__st_mx, .upf__st_mn{
  position: fixed !important;
}
.upf__d{
  background: var(--main-agg);
}
.upf__l_ht{
  height: 4px;
}
.upf__max {
  position: relative;
}
#minmax {
  position: sticky;
  top: 0;
  right: 0;
  z-index: 10;
  background: var(--main-body);
}

.player-active.upf__st_mx, .player-active.upf__st_mn{
  bottom:110px !important;
}
.fillHeightDiv, .fullhtcb {
  overflow: auto; 
}