@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --framer-input-border-bottom-width: 1px;
    --framer-input-border-color: rgb(38, 38, 38);
    --framer-input-border-left-width: 1px;
    --framer-input-border-radius-bottom-left: 6px;
    --framer-input-border-radius-bottom-right: 6px;
    --framer-input-border-radius-top-left: 6px;
    --framer-input-border-radius-top-right: 6px;
    --framer-input-border-right-width: 1px;
    --framer-input-border-style: solid;
    --framer-input-border-top-width: 1px;
    --framer-input-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
    --framer-input-font-color: rgb(153, 153, 153);
    --framer-input-icon-color: rgb(153, 153, 153);
    --framer-input-placeholder-color: rgb(153, 153, 153);
    --framer-input-focused-border-color: #0099ff;
    --framer-input-focused-border-style: solid;
    --framer-input-focused-border-width: 1px;
    --framer-input-font-family: "Inter";
    --framer-input-font-letter-spacing: 0em;
    --framer-input-font-line-height: 1.2em;
    --framer-input-font-size: 14px;
    --framer-input-font-weight: 400;
    --framer-input-padding: 0px 0px 2px 50px;
}

b,
.aa-ClearIcon,
.aa-DetachedCancelButton {
    color: cornflowerblue !important;
}

body {
    background-color: black;
}

.aa-Form,
.aa-DetachedSearchButton {
    background-color: transparent !important;
    border: 1px solid rgb(38 38 38 / 1) !important;
    border-radius: .5rem !important;
    height: 35px;

    .aa-SubmitIcon {
        color: rgb(156 163 175 / 1);
        height: 19px;
    }
}

input::placeholder {
    opacity: 1;
    color: rgb(156 163 175 / 1) !important;
}

#searchbox,
#searchbox2 {
    width: 48%;
    margin: auto;
}

input.aa-Input {
    border: none;
    padding: var(--framer-input-padding);
    background: transparent;
    font-weight: var(--framer-input-font-weight);
    font-size: var(--framer-input-font-size);
    color: var(--framer-input-font-color);
    border-radius: 6px;
    height: 32px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    letter-spacing: var(--framer-input-font-letter-spacing);
    line-height: var(--framer-input-font-line-height);
}

#searchSkuButton {
    display: none;
    color: white;
    float: right;
    margin-top: -31px;
    margin-right: 2rem;
}

#mainLogo {
    max-width: 32px;
    position: absolute;
    left: 22px;
    top: 22px;
}

#homeButton {
    color: white;
    margin-right: 10px;
}

#root {
    display: flex;
    margin: auto;
    margin-top: 10px;
    width: 70%;
}

#searchIcon {
    width: 100%;
    position: relative;
}

#searchIcon:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='rgb(156, 163, 175)' fill-rule='evenodd'%3E%3Cpath d='M16.036 18.455l2.404-2.405 5.586 5.587-2.404 2.404zM8.5 2C12.1 2 15 4.9 15 8.5S12.1 15 8.5 15 2 12.1 2 8.5 4.9 2 8.5 2zm0-2C3.8 0 0 3.8 0 8.5S3.8 17 8.5 17 17 13.2 17 8.5 13.2 0 8.5 0zM15 16a1 1 0 1 1 2 0 1 1 0 1 1-2 0'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}

#barcodeIcon {
    width: 100%;
    position: relative;
}

#barcodeIcon:before {
    content: "";
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    width: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 23 22' fill='rgb(156, 163, 175)' fill-rule='evenodd'%3E%3Cpath d='M4.4 3A1.4 1.4 0 0 0 3 4.4V6a1 1 0 0 1-2 0V4.4A3.4 3.4 0 0 1 4.4 1H6a1 1 0 0 1 0 2H4.4ZM17 2a1 1 0 0 1 1-1h1.6A3.4 3.4 0 0 1 23 4.4V6a1 1 0 1 1-2 0V4.4A1.4 1.4 0 0 0 19.6 3H18a1 1 0 0 1-1-1ZM2 17a1 1 0 0 1 1 1v1.6A1.4 1.4 0 0 0 4.4 21H6a1 1 0 1 1 0 2H4.4A3.4 3.4 0 0 1 1 19.6V18a1 1 0 0 1 1-1ZM22 17a1 1 0 0 1 1 1v1.6a3.4 3.4 0 0 1-3.4 3.4H18a1 1 0 1 1 0-2h1.6a1.4 1.4 0 0 0 1.4-1.4V18a1 1 0 0 1 1-1ZM18 8a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V9a1 1 0 0 1 1-1ZM15 9a1 1 0 1 0-2 0v6a1 1 0 1 0 2 0V9ZM10 8a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V9a1 1 0 0 1 1-1ZM7 9a1 1 0 1 0-2 0v6a1 1 0 1 0 2 0V9Z'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}

.aa-Panel {
    /* display: none; */
    background-color: #191919 !important;
}


.aa-Item {
    background-color: #191919 !important;
}

.aa-Item:hover {
    background-color: #2e2e2e !important;
}

.ais-InstantSearch {
    margin-top: 15px;
}

.InterfaceDemoHit,
.aa-ItemContentBody {
    display: block;
}

.aa-SubmitIcon {
    margin-top: 2px;
    margin-right: 4px;
}

.aa-Item {
    background-color: #F5F5F5;
    padding: 10px;
    margin: 5px;
}

.SecondaryAttribute img {
    max-height: 75px;
    position: unset;
}

.img-container {
    float: left;
    max-width: 50px !important;
    background-color: white;
    border-radius: 15px;
    margin-right: 15px;
}

.originalTitle {
    white-space: unset !important;
    word-wrap: break-word;
}

tr:nth-child(even) {
    background-color: lightgray;
}

tr:hover {
    background-color: coral;
}

.ais-SearchBox-form {
    width: 50%;
    margin: 10px auto;
    height: 50px;
    font-size: 15px;
}

.aa-Item div {
    color: white !important;
}

#hits {
    overflow-y: scroll;
}

.InterfaceDemoHit,
.aa-ItemContentBody {
    display: block !important;
}

.aa-DetachedSearchButton {
    background-color: transparent !important;
}

.aa-DetachedFormContainer {
    background-color: black !important;
}

@media (max-width: 1200px) {
    #searchSkuButton {
        display: block !important;
    }

    #searchbox,
    #searchbox2 {
        width: 56%;
    }
}

@media (max-width: 1000px) {

    #searchbox,
    #searchbox2 {
        width: 70%;
    }
}

@media (max-width: 750px) {
    .originalTitle {
        max-width: 230px !important;
    }
}

@media (max-width: 380px) {

    #searchbox,
    #searchbox2 {
        width: 63%;
    }
}