.web-color-grabber-tool {display: flex; justify-content: space-between; gap: var(--s3) var(--s6);}
.web-color-grabber-tool .content {max-width: 574px; display: flex; flex-direction: column; flex: 1;}
.web-color-grabber-tool .content p:last-child {margin-bottom: var(--s0);}
.web-color-grabber-tool .colors-extractor { gap: var(--s5); display: flex; max-width: 536px; flex-direction: column; flex: 1;}
.web-color-grabber-tool .colors-extractor form { display: flex; flex-direction: column;}
.web-color-grabber-tool .colors-extractor form .form-group { display: flex; flex-direction: column;}
.web-color-grabber-tool .colors-extractor form label:not(.error) {font-size: 21px; font-style: normal; font-weight: 600; line-height: 33px; letter-spacing: -0.116px; color: var(--text-text-primary, #222); margin-bottom: var(--s2);}
.web-color-grabber-tool .colors-extractor form label.error {margin-bottom: var(--s0); margin-top: var(--s2); font-size: 16px; line-height: 28px; color: var(--Tertiary-Red-Light);}
.web-color-grabber-tool .colors-extractor form .input-group { display: flex;}
.web-color-grabber-tool .colors-extractor form .input-group input {
    border-radius: 8px 0px 0px 8px;
    border: 1px solid var(--color-grays-gray-03, #ABB9C2);
    background: #FFF;
    padding: 16px 24px;
    font-family: var(--font-inter);
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 133.333% */
    letter-spacing: -0.116px;
    display: flex;
    height: auto;
    flex: 1;
    color: var(--Primary-Dark-Gray);
}
.web-color-grabber-tool .colors-extractor form .input-group input::placeholder {color: var(--text-text-secondary, #869298);}
.web-color-grabber-tool .colors-extractor form .input-group button {
    margin: 0px;
    border-radius: 0px 8px 8px 0px;
    display: flex;
    height: auto;
    text-align: center;
    font-size: 21px !important;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 35px !important;
    letter-spacing: -0.168px;
}

.web-color-grabber-tool .colors-extractor form .input-group button .loader-spinner {
    width: 35px;
    height: 35px;
    border: 5px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

.web-color-grabber-tool .colors-extractor .results {
    display: flex;
    flex-direction: column;
}

.web-color-grabber-tool .colors-extractor .results > p {
    margin-bottom: var(--s2);
}

.web-color-grabber-tool .colors-extractor .results ul.colors-palette {
    margin: 0px;
    list-style: none;
    display: flex;
    gap: var(--s3);
    flex-wrap: wrap;
}

.web-color-grabber-tool .colors-extractor .results ul.colors-palette li.slot {   
    padding: var(--s0);
    display: flex;
    max-width: 88px;
    flex: 1 1 88px;
    width: 100%;
}

.web-color-grabber-tool .colors-extractor .results ul.colors-palette li.slot a.color {   
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    align-items: center;
    width: 100%;
}

.web-color-grabber-tool .colors-extractor .results ul.colors-palette li.slot a.color > * {
    width: 100%;
    max-width: 88px;
}

.web-color-grabber-tool .colors-extractor .results ul.colors-palette li.slot a.color .previewer-wrapper {
    border-radius: var(--s1);
    border: 1px solid #F2F2F2;
    display: flex;
}

.web-color-grabber-tool .colors-extractor .results ul.colors-palette li.slot a.color .previewer {
    background: var(--color-grays-gray-01, #F2F2F2);
    height: 88px;
    border-radius: var(--s1);
    max-width: 88px;
    width: 100%;
}

.web-color-grabber-tool .colors-extractor .results ul.colors-palette li.slot a.color .hex-code {
    color: var(--text-text-primary, #222);
    text-align: center;
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 15px */
    letter-spacing: -0.045px;
}

@media screen and (max-width: 1024px) {
    .web-color-grabber-tool .colors-extractor .results ul.colors-palette {gap: var(--s2);}
    .web-color-grabber-tool .colors-extractor .results ul.colors-palette li.slot {
        max-width: 70px;
        flex: 1 1 70px;
    }
    .web-color-grabber-tool .colors-extractor .results ul.colors-palette li.slot a.color .previewer {
        max-width: 70px;
        height: 70px;
    }
}

@media screen and (max-width: 991px) {
    .web-color-grabber-tool {flex-direction: column;}
    .web-color-grabber-tool .content {max-width: 100%;}
}