@charset "UTF-8";

/* ! Add  */
html{scroll-behavior:smooth}
*, ::before, ::after{
    --spacing: 0.25rem;
}
h2 {
    display: block;
}
.btn-color-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(102 191 191 / var(--tw-bg-opacity, 1));
}
.w-90 {
    width: 90%;
}
.w-25 {
    width: 25%;
}
.bottom-1 {
    bottom: 1rem;
}
.border-solid{
    border-style: solid;
}
.gap-3 {
    gap: calc(var(--spacing) * 3);
}
.block {
  display: block;
}
.status-ranking {
    background-color: #d0d0d0;
}
.status-ranking-1 {
    background-color: #d8b20f;
}
.status-ranking-2 {
    background-color: #848484;
}
.status-ranking-3 {
    background-color: #b9610c;
}
.utility-hidden {
    display: none;
}
.clockwise-grid img:nth-child(1) {
	order: 1;
}
.clockwise-grid img:nth-child(2) {
	order: 2;
}
.clockwise-grid img:nth-child(3) {
	order: 4;
}
.clockwise-grid img:nth-child(4) {
	order: 3;
}
.modaal-close {
    position: absolute !important;
    top: 4px;
    right: 4px;
    z-index: 9999 !important;
    width: 30px;
    height: 30px;
    padding: 6px 12px;
    background: rgba(0,0,0,0.6) !important;
    color: #fff;
    border-radius: 50%;
}
.modaal-close:after,
.modaal-close:before {
    top: 8px;
    left: 14px;
    width: 3px;
    height: 15px;
}
.modaal-close:hover {
    background: rgba(0,0,0,0.8) !important;
}
.modaal-close:hover:after,
.modaal-close:hover:before  {
    background: #fff;
}
@media (min-width: 640px){
    .sm-w-75 {
        width: 75%;
    }
    .sm\:flex-row {
        flex-direction: row;
    }
    .sm\:hidden-fix {
        display: none !important;
    }
    .sm\:utility-block {
        display: block !important;
    }
}
@media (min-width: 768px){
    .md-w-50 {
        width: 50%;
    }
    .md\:text-2xl {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
}
@media (min-width: 1024px){
    .lg-w-40 {
        width: 40%;
    }
}