: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-red-5: #df351f;
  --basic-red-6: #d4250e;
  --basic-red-7: #c91b04;
  --basic-red-8: #b61500;

  --basic-blue-3: #78bbfe;

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

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 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;
    }
}