:root {
  --basic-gray-0: #f7f7f8;
  --basic-gray-1: #edeef1;
  --basic-gray-2: #dbdde3;
  --basic-gray-3: #bfc1c7;
  --basic-gray-4: #83868e;
  --basic-gray-5: #616471;
  --basic-gray-6: #434959;
  --basic-gray-7: #212636;
  --basic-gray-8: #010205;

  --basic-green-0: #F2FAE4;
  --basic-green-1: #E6F7C9;
  --basic-green-2: #CCF08E;
  --basic-green-3: #ACE843;
  --basic-green-4: #8BD40D;
  --basic-green-5: #7EBF07;
  --basic-green-6: #649E00;
  --basic-green-7: #3B7504;
  --basic-green-8: #295401;

  --basic-red-1: #FEE7E4;
  --basic-red-2: #FF988A;
  --basic-red-3: #F56451;
  --basic-red-4: #EA4A35;
  --basic-red-5: #df351f;
  --basic-red-6: #d4250e;
  --basic-red-7: #c91b04;
  --basic-red-8: #b61500;

  --basic-blue-0: #f3f9ff;
  --basic-blue-1: #d3e9fe;
  --basic-blue-2: #a9d4ff;
  --basic-blue-3: #78bbfe;
  --basic-blue-4: #358fea;
  --basic-blue-5: #2278e1;
  --basic-blue-6: #094cab;
  --basic-blue-7: #012d6b;

  --bg-disabled: #f8f7f7;
  --text-default: #010205;
  --white: #ffffff;
}

dialog {
  display: none;
}

dialog[open] {
  display: block;
}

details > summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  background: url(../img/icon/ic-close-16.svg) no-repeat;
  background-size: contain;
  opacity: 0;
}

input[type="search"]:focus::-webkit-search-cancel-button {
  cursor: pointer;
  pointer-events: all;
  opacity: 0.6;
}

body {margin: 0!important}

.spin-animation {
  animation: rotation 2s infinite linear;
}

@keyframes modal-open-scale {
  from {transform: scale(0.9); }
  to   {transform: scale(1);}
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.skeleton {
  color: transparent !important;
  border-radius: 5px;
  background: rgba(130, 130, 130, 0.2);
  background: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(130, 130, 130, 0.2)), color-stop(18%, rgba(130, 130, 130, 0.3)), color-stop(33%, rgba(130, 130, 130, 0.2)));
  background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
  background-size: 800px 100px;
  animation: wave-squares 2s infinite ease-out;
}

 @keyframes wave-squares {
    0% {
        background-position: -468px 0;
    }
     100% {
        background-position: 468px 0;
    }
}

.loader {
  width: 100%;
  height: 3px;
  display: block;
  position: relative;
  background: var(--basic-blue-3);
  overflow: hidden;
}

.loader::after {
  content: '';
  width: 192px;
  height: 3px;
  background: #FFF;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  animation: animloader 2s linear infinite;
}

@keyframes animloader {
  0% {
    left: 0;
    transform: translateX(-100%);
  }
  100% {
    left: 100%;
    transform: translateX(0%);
  }
}