@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

html {
    &.no-scroll {
        overflow: hidden;
        touch-action: none;
    }
}
$main_font_size: 14px;
$main_font: "Open Sans", sans-serif;

#ai-overlay {
    display: block !important;
    opacity: 1 !important;
}

.ai-wrapper {
    font-size: $main_font_size;
    font-family: $main_font;
    line-height: $main_font_size;
    font-weight: normal;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100001;
    opacity: 1;
    box-sizing: border-box;

    &.hidden {
        display: none;
    }

    * {
        box-sizing: border-box;
        color: #000;
        opacity: 1;
        font-size: $main_font_size;
        font-family: $main_font;
        line-height: $main_font_size;
    }

    .form-item {
        margin: 0px;
        padding: 0px;
    }

    .ai-row {
        .form-options {
            display: flex;
            gap: 20px;
            justify-content: center;
            align-items: center;

            .form-item {
                label {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;
                    margin: 0px;
                    font-weight: 400;
                    letter-spacing: 0.5px;
                    font-size: $main_font_size;

                    input {
                        min-height: 0px;
                    }
                }
            }

            &.hidden {
                visibility: hidden;
            }
        }

        label {
            display: block;
            font-weight: 600;
            letter-spacing: 0.2px;
        }

        input[type=checkbox], input[type=radio] {
            margin-top: 0px;
            border-color: #000;
            color: #000;
            box-shadow: none;
        }

        textarea,
        select,
        input[type="number"],
        input[type="tel"],
        input[type="date"],
        input[type="phone"],
        input[type="text"],
        input[type="search"],
        input[type="email"] {
            border: 1px solid #c0c0c0 !important;
            padding: 14px !important;
            color: #1e1c26 !important;
            width: 100% !important;
            padding-left: 15px !important;
            padding-right: 15px !important;
            border-radius: 3px !important;
            text-transform: none;
            font-family: $main_font;
            background-color: #FFF;
            line-height: 21px;
            font-size: $main_font_size;
            resize: none;

            &:focus,
            &:active {
                outline: none;
            }

            &.locked {
                background-color: #ebebeb;
            }

            &[aria-invalid=true], 
            &.form-error {
                &::placeholder {
                    color: #e24848;
                }

                &:-ms-input-placeholder {
                    color: #e24848;
                }

                &::-ms-input-placeholder {
                    color: #e24848;
                }
            }

            &:focus,
            &:active {
                outline: none !important;
                border-color: none !important;
            }

            &::placeholder {
                color: #1E1C26;
                font-family: $main_font;
                opacity: 1;
                font-size: $main_font_size;
            }

            &:-ms-input-placeholder {
                color: #1E1C26;
                font-family: $main_font;
                opacity: 1;
                font-size: $main_font_size;
            }

            &::-ms-input-placeholder {
                color: #1E1C26;
                font-family: $main_font;
                opacity: 1;
                font-size: $main_font_size;
            }
        }
    }

    .ai-btn-icon {
        text-indent: -1000cm;
        display: block;
        width: 18px;
        height: 19px;

        &.settings {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iODAwIiB2aWV3Qm94PSIwIDAgNDYgNDYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik00My41IDE4LjRINDFjLS40LTEuNy0xLjEtMy40LTItNC45bDEuNy0xLjdhMi41IDIuNSAwIDAgMCAwLTMuNmwtMy0zYy0uOS0uOS0yLjUtLjktMy41IDBsLTEuOCAxLjljLTEuNS0uOS0zLjEtMS41LTQuOS0yVjIuNWMwLTEuNC0xLTIuNS0yLjUtMi41aC00YTIuNSAyLjUgMCAwIDAtMi42IDIuNXYyLjZjLTEuNy41LTMuMyAxLjEtNC44IDJsLTEuOS0xLjhjLTEtMS0yLjYtMS0zLjUgMGwtMyAzYTIuNSAyLjUgMCAwIDAgMCAzLjRMNyAxMy42Yy0uOSAxLjUtMS42IDMuMi0yIDVIMi40QTIuNSAyLjUgMCAwIDAgMCAyMC44djQuMmMwIDEuMyAxLjEgMi40IDIuNSAyLjRoMi40Yy41IDEuOCAxLjIgMy41IDIuMSA1bC0xLjcgMS43Yy0uNS41LS44IDEuMS0uOCAxLjhzLjMgMS4zLjggMS44bDIuOSAzYTIuNSAyLjUgMCAwIDAgMy41IDBsMS45LTJjMS41IDEgMyAxLjYgNC44IDJ2Mi43YzAgMS40IDEuMSAyLjUgMi41IDIuNUgyNWMxLjQgMCAyLjUtMS4xIDIuNS0yLjV2LTIuNmMxLjgtLjUgMy40LTEuMSA0LjktMmwxLjggMS44Yy41LjUgMS4xLjcgMS44LjdzMS4zLS4yIDEuOC0uN2wyLjktM2EyLjUgMi41IDAgMCAwIDAtMy41bC0xLjgtMS43YzEtMS41IDEuNy0zLjIgMi4xLTVoMi41YzEuMyAwIDIuNS0xIDIuNS0yLjR2LTQuMmMwLTEuMy0xLjItMi41LTIuNS0yLjV6TTIzIDMxYy00LjQgMC04LTMuNi04LTcuOSAwLTQuMyAzLjYtNy45IDgtNy45czggMy42IDggNy45YzAgNC4zLTMuNiA3LjktOCA3Ljl6Ii8+PC9zdmc+");
            background-repeat: no-repeat;
            background-position: left top;
            background-size: 18px auto;
        }
    }

    .ai-btn {
        border: 1px solid transparent;
        border-radius: 0;
        box-shadow: none;
        text-align: center;
        padding: 13px 27px !important;
        outline: none;
        display: inline-block;
        box-sizing: border-box;
        height: auto;
        background-image: none;
        font-family: $main_font;
        font-weight: 700 !important;
        text-decoration: none !important; 
        position: relative;
        -webkit-appearance: none;
        font-size: $main_font_size;
        border-radius: 4px !important;
        transition: all 0.2s linear;
        white-space: nowrap; 
        color: #FFFDFA !important;
        background-color: #FF4E46;
        text-transform: uppercase;
        letter-spacing: 1px;
        line-height: 1em;

        &.disabled {
            opacity: 0.4;
        }

        &:hover {
            box-shadow: none;
            cursor: pointer;
            color: #FFF !important;
            background-color: darken(#FF4E46, 35%);
        }

        &:focus,
        &:active {
            box-shadow: none;
            outline: none;
            border: none;
        }
        
        &:disabled {
            opacity: 0.5;

            &:hover {
                cursor: not-allowed;
            }
        }
    }
    
    .ai-content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%;
        z-index: 100002;
        padding: 0px;
        background-color: #fff;
        overflow: hidden;
        border-radius: 4px;
        border: 1px solid #909090;
        box-shadow: 0px 0px 5px 0px rgba(130,130,130,0.75);

        .ai-loading {
            color: #FFF;
            display: none;
            width: 100%;
            height: calc(100% - 45px);
            position: absolute;
            left: 0px;
            top: 45px;
            z-index: 9;
            background-color: #00000069;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 20px;
            color: #FFF;

            p {
                color: #FFF;
            }

            &.open {
                display: flex;
            }
        }

        .ai-header {
            border-bottom: 1px solid silver;
            padding-top: 15px;
            padding-bottom: 15px;
            font-weight: 700;
            display: flex;
            gap: 10px;
            justify-content: center;
            align-items: center;
            position: relative;

            .logo {
                background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDE0IiBoZWlnaHQ9IjgwIiB2aWV3Qm94PSIwIDAgNDE0IDgwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNDA0LjIzOCA2NC4wMDAxVjE3LjhINDEzLjI4VjY0LjAwMDFINDA0LjIzOFoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0zODkuNzkzIDY0LjAwMDFMMzcyLjEwNSAxNy44SDM4MS4xNDdMMzk5LjM2MyA2NC4wMDAxSDM4OS43OTNaTTM1My4yOTUgNjQuMDAwMUwzNzEuNTExIDE3LjhIMzgwLjU1M0wzNjIuODY1IDY0LjAwMDFIMzUzLjI5NVpNMzYxLjg3NSA1My44MzYxVjQ1Ljg1SDM5MC44NDlWNTMuODM2MUgzNjEuODc1WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTMyMy4yNTMgNDYuNjQyQzMyMy4yNTMgNDMuMDc4IDMyMy45MzUgNDAuMTMgMzI1LjI5OSAzNy43OThDMzI2LjcwNyAzNS40NjYgMzI4LjQ4OSAzMy43MjggMzMwLjY0NSAzMi41ODRDMzMyLjg0NSAzMS40NCAzMzUuMTMzIDMwLjg2OCAzMzcuNTA5IDMwLjg2OFYzOS4zMTZDMzM1LjQ4NSAzOS4zMTYgMzMzLjU3MSAzOS41NTggMzMxLjc2NyA0MC4wNDJDMzMwLjAwNyA0MC41MjYgMzI4LjU3NyA0MS4zMTggMzI3LjQ3NyA0Mi40MThDMzI2LjM3NyA0My41MTggMzI1LjgyNyA0NC45MjYgMzI1LjgyNyA0Ni42NDJIMzIzLjI1M1pNMzE3LjExNSA2NFYzMUgzMjUuODI3VjY0SDMxNy4xMTVaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMjk2LjE0NiA2NC43OTJDMjkyLjg5IDY0Ljc5MiAyOTAuMDA4IDY0LjA2NiAyODcuNSA2Mi42MTRDMjg0Ljk5MiA2MS4xMTggMjgzLjAxMiA1OS4wNzIgMjgxLjU2IDU2LjQ3NkMyODAuMTUyIDUzLjg4IDI3OS40NDggNTAuODg4IDI3OS40NDggNDcuNUMyNzkuNDQ4IDQ0LjExMiAyODAuMTc0IDQxLjEyIDI4MS42MjYgMzguNTI0QzI4My4xMjIgMzUuOTI4IDI4NS4xNDYgMzMuOTA0IDI4Ny42OTggMzIuNDUyQzI5MC4yOTQgMzAuOTU2IDI5My4yNjQgMzAuMjA4IDI5Ni42MDggMzAuMjA4QzI5OS41MTIgMzAuMjA4IDMwMi4xNzQgMzAuOTc4IDMwNC41OTQgMzIuNTE4QzMwNy4wNTggMzQuMDE0IDMwOS4wMTYgMzYuMjM2IDMxMC40NjggMzkuMTg0QzMxMS45NjQgNDIuMDg4IDMxMi43MTIgNDUuNjMgMzEyLjcxMiA0OS44MUgyODcuNjk4TDI4OC40OSA0OS4wMThDMjg4LjQ5IDUwLjY0NiAyODguODg2IDUyLjA3NiAyODkuNjc4IDUzLjMwOEMyOTAuNTE0IDU0LjQ5NiAyOTEuNTcgNTUuNDIgMjkyLjg0NiA1Ni4wOEMyOTQuMTY2IDU2LjY5NiAyOTUuNTc0IDU3LjAwNCAyOTcuMDcgNTcuMDA0QzI5OC44NzQgNTcuMDA0IDMwMC4zNDggNTYuNjMgMzAxLjQ5MiA1NS44ODJDMzAyLjYzNiA1NS4wOSAzMDMuNTE2IDU0LjA3OCAzMDQuMTMyIDUyLjg0NkwzMTEuOTIgNTUuODgyQzMxMC45OTYgNTcuNzMgMzA5Ljc4NiA1OS4zMzYgMzA4LjI5IDYwLjdDMzA2LjgzOCA2Mi4wMiAzMDUuMSA2My4wMzIgMzAzLjA3NiA2My43MzZDMzAxLjA1MiA2NC40NCAyOTguNzQyIDY0Ljc5MiAyOTYuMTQ2IDY0Ljc5MlpNMjg4Ljk1MiA0NC4xMzRMMjg4LjE2IDQzLjM0MkgzMDQuMDY2TDMwMy4zNCA0NC4xMzRDMzAzLjM0IDQyLjU1IDMwMi45NjYgNDEuMjk2IDMwMi4yMTggNDAuMzcyQzMwMS40NyAzOS40MDQgMzAwLjU0NiAzOC43IDI5OS40NDYgMzguMjZDMjk4LjM5IDM3LjgyIDI5Ny4zNTYgMzcuNiAyOTYuMzQ0IDM3LjZDMjk1LjMzMiAzNy42IDI5NC4yNTQgMzcuODIgMjkzLjExIDM4LjI2QzI5MS45NjYgMzguNyAyOTAuOTc2IDM5LjQwNCAyOTAuMTQgNDAuMzcyQzI4OS4zNDggNDEuMjk2IDI4OC45NTIgNDIuNTUgMjg4Ljk1MiA0NC4xMzRaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMjY5LjUxMSA2NC43OTIxQzI2NS44NTkgNjQuNzkyMSAyNjMuMDg3IDYzLjg5MDEgMjYxLjE5NSA2Mi4wODYxQzI1OS4zNDcgNjAuMjgyMSAyNTguNDIzIDU3LjcwODEgMjU4LjQyMyA1NC4zNjQxVjIwLjcwNDFIMjY3LjEzNVY1Mi40NTAxQzI2Ny4xMzUgNTMuODU4MSAyNjcuNDQzIDU0LjkzNjEgMjY4LjA1OSA1NS42ODQxQzI2OC42NzUgNTYuMzg4MSAyNjkuNTc3IDU2Ljc0MDEgMjcwLjc2NSA1Ni43NDAxQzI3MS4yMDUgNTYuNzQwMSAyNzEuNjg5IDU2LjY1MjEgMjcyLjIxNyA1Ni40NzYxQzI3Mi43NDUgNTYuMjU2MSAyNzMuMjk1IDU1Ljk0ODEgMjczLjg2NyA1NS41NTIxTDI3Ni45MDMgNjIuMDg2MUMyNzUuODQ3IDYyLjg3ODEgMjc0LjY1OSA2My41MTYxIDI3My4zMzkgNjQuMDAwMUMyNzIuMDYzIDY0LjUyODEgMjcwLjc4NyA2NC43OTIxIDI2OS41MTEgNjQuNzkyMVpNMjUzLjA3NyAzOC4zOTIxVjMxLjAwMDFIMjc1LjM4NVYzOC4zOTIxSDI1My4wNzdaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMjQxLjMxNiA2NEwyNDEuMDUyIDU3LjMzNFY0Ny4zMDJDMjQxLjA1MiA0NS4zMjIgMjQwLjgzMiA0My42MjggMjQwLjM5MiA0Mi4yMkMyMzkuOTk2IDQwLjgxMiAyMzkuMzM2IDM5LjczNCAyMzguNDEyIDM4Ljk4NkMyMzcuNTMyIDM4LjE5NCAyMzYuMzIyIDM3Ljc5OCAyMzQuNzgyIDM3Ljc5OEMyMzMuMzc0IDM3Ljc5OCAyMzIuMDk4IDM4LjEwNiAyMzAuOTU0IDM4LjcyMkMyMjkuODEgMzkuMzM4IDIyOC44NDIgNDAuMjg0IDIyOC4wNSA0MS41NkwyMjAuMzk0IDM4LjkyQzIyMS4wMSAzNy41MTIgMjIxLjkxMiAzNi4xNDggMjIzLjEgMzQuODI4QzIyNC4yODggMzMuNDY0IDIyNS44MjggMzIuMzY0IDIyNy43MiAzMS41MjhDMjI5LjY1NiAzMC42NDggMjMyLjAxIDMwLjIwOCAyMzQuNzgyIDMwLjIwOEMyMzguMTI2IDMwLjIwOCAyNDAuODk4IDMwLjg0NiAyNDMuMDk4IDMyLjEyMkMyNDUuMzQyIDMzLjM5OCAyNDYuOTkyIDM1LjIwMiAyNDguMDQ4IDM3LjUzNEMyNDkuMTQ4IDM5LjgyMiAyNDkuNjc2IDQyLjU1IDI0OS42MzIgNDUuNzE4TDI0OS40MzQgNjRIMjQxLjMxNlpNMjMyLjA3NiA2NC43OTJDMjI4LjExNiA2NC43OTIgMjI1LjAzNiA2My45MTIgMjIyLjgzNiA2Mi4xNTJDMjIwLjY4IDYwLjM5MiAyMTkuNjAyIDU3LjkwNiAyMTkuNjAyIDU0LjY5NEMyMTkuNjAyIDUxLjE3NCAyMjAuNzY4IDQ4LjUzNCAyMjMuMSA0Ni43NzRDMjI1LjQ3NiA0NC45NyAyMjguNzk4IDQ0LjA2OCAyMzMuMDY2IDQ0LjA2OEgyNDEuNDQ4VjUwLjUzNkgyMzYuMTAyQzIzMy4yNDIgNTAuNTM2IDIzMS4yNjIgNTAuODg4IDIzMC4xNjIgNTEuNTkyQzIyOS4wNjIgNTIuMjUyIDIyOC41MTIgNTMuMTk4IDIyOC41MTIgNTQuNDNDMjI4LjUxMiA1NS4zOTggMjI4Ljk1MiA1Ni4xNjggMjI5LjgzMiA1Ni43NEMyMzAuNzEyIDU3LjI2OCAyMzEuOTQ0IDU3LjUzMiAyMzMuNTI4IDU3LjUzMkMyMzQuOTggNTcuNTMyIDIzNi4yNTYgNTcuMjAyIDIzNy4zNTYgNTYuNTQyQzIzOC41IDU1LjgzOCAyMzkuNDAyIDU0Ljk1OCAyNDAuMDYyIDUzLjkwMkMyNDAuNzIyIDUyLjgwMiAyNDEuMDUyIDUxLjY4IDI0MS4wNTIgNTAuNTM2SDI0My4xNjRDMjQzLjE2NCA1NS4wMjQgMjQyLjMwNiA1OC41MjIgMjQwLjU5IDYxLjAzQzIzOC45MTggNjMuNTM4IDIzNi4wOCA2NC43OTIgMjMyLjA3NiA2NC43OTJaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMjAwLjQxNSA2NC43OTJDMTk3LjE1OSA2NC43OTIgMTk0LjI3NyA2NC4wNjYgMTkxLjc2OSA2Mi42MTRDMTg5LjI2MSA2MS4xMTggMTg3LjI4MSA1OS4wNzIgMTg1LjgyOSA1Ni40NzZDMTg0LjQyMSA1My44OCAxODMuNzE3IDUwLjg4OCAxODMuNzE3IDQ3LjVDMTgzLjcxNyA0NC4xMTIgMTg0LjQ0MyA0MS4xMiAxODUuODk1IDM4LjUyNEMxODcuMzkxIDM1LjkyOCAxODkuNDE1IDMzLjkwNCAxOTEuOTY3IDMyLjQ1MkMxOTQuNTYzIDMwLjk1NiAxOTcuNTMzIDMwLjIwOCAyMDAuODc3IDMwLjIwOEMyMDMuNzgxIDMwLjIwOCAyMDYuNDQzIDMwLjk3OCAyMDguODYzIDMyLjUxOEMyMTEuMzI3IDM0LjAxNCAyMTMuMjg1IDM2LjIzNiAyMTQuNzM3IDM5LjE4NEMyMTYuMjMzIDQyLjA4OCAyMTYuOTgxIDQ1LjYzIDIxNi45ODEgNDkuODFIMTkxLjk2N0wxOTIuNzU5IDQ5LjAxOEMxOTIuNzU5IDUwLjY0NiAxOTMuMTU1IDUyLjA3NiAxOTMuOTQ3IDUzLjMwOEMxOTQuNzgzIDU0LjQ5NiAxOTUuODM5IDU1LjQyIDE5Ny4xMTUgNTYuMDhDMTk4LjQzNSA1Ni42OTYgMTk5Ljg0MyA1Ny4wMDQgMjAxLjMzOSA1Ny4wMDRDMjAzLjE0MyA1Ny4wMDQgMjA0LjYxNyA1Ni42MyAyMDUuNzYxIDU1Ljg4MkMyMDYuOTA1IDU1LjA5IDIwNy43ODUgNTQuMDc4IDIwOC40MDEgNTIuODQ2TDIxNi4xODkgNTUuODgyQzIxNS4yNjUgNTcuNzMgMjE0LjA1NSA1OS4zMzYgMjEyLjU1OSA2MC43QzIxMS4xMDcgNjIuMDIgMjA5LjM2OSA2My4wMzIgMjA3LjM0NSA2My43MzZDMjA1LjMyMSA2NC40NCAyMDMuMDExIDY0Ljc5MiAyMDAuNDE1IDY0Ljc5MlpNMTkzLjIyMSA0NC4xMzRMMTkyLjQyOSA0My4zNDJIMjA4LjMzNUwyMDcuNjA5IDQ0LjEzNEMyMDcuNjA5IDQyLjU1IDIwNy4yMzUgNDEuMjk2IDIwNi40ODcgNDAuMzcyQzIwNS43MzkgMzkuNDA0IDIwNC44MTUgMzguNyAyMDMuNzE1IDM4LjI2QzIwMi42NTkgMzcuODIgMjAxLjYyNSAzNy42IDIwMC42MTMgMzcuNkMxOTkuNjAxIDM3LjYgMTk4LjUyMyAzNy44MiAxOTcuMzc5IDM4LjI2QzE5Ni4yMzUgMzguNyAxOTUuMjQ1IDM5LjQwNCAxOTQuNDA5IDQwLjM3MkMxOTMuNjE3IDQxLjI5NiAxOTMuMjIxIDQyLjU1IDE5My4yMjEgNDQuMTM0WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTE2Ny4yODkgNDYuNjQyQzE2Ny4yODkgNDMuMDc4IDE2Ny45NzEgNDAuMTMgMTY5LjMzNSAzNy43OThDMTcwLjc0MyAzNS40NjYgMTcyLjUyNSAzMy43MjggMTc0LjY4MSAzMi41ODRDMTc2Ljg4MSAzMS40NCAxNzkuMTY5IDMwLjg2OCAxODEuNTQ1IDMwLjg2OFYzOS4zMTZDMTc5LjUyMSAzOS4zMTYgMTc3LjYwNyAzOS41NTggMTc1LjgwMyA0MC4wNDJDMTc0LjA0MyA0MC41MjYgMTcyLjYxMyA0MS4zMTggMTcxLjUxMyA0Mi40MThDMTcwLjQxMyA0My41MTggMTY5Ljg2MyA0NC45MjYgMTY5Ljg2MyA0Ni42NDJIMTY3LjI4OVpNMTYxLjE1MSA2NFYzMUgxNjkuODYzVjY0SDE2MS4xNTFaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMTM1LjQ2NiA2NC43OTIxQzEzMC43NTggNjQuNzkyMSAxMjYuNTc4IDYzLjc4MDEgMTIyLjkyNiA2MS43NTYxQzExOS4zMTggNTkuNjg4MSAxMTYuNDggNTYuODcyMSAxMTQuNDEyIDUzLjMwODFDMTEyLjM0NCA0OS43MDAxIDExMS4zMSA0NS41NjQxIDExMS4zMSA0MC45MDAxQzExMS4zMSAzNi4yMzYxIDExMi4zNDQgMzIuMTIyMSAxMTQuNDEyIDI4LjU1ODFDMTE2LjQ4IDI0Ljk1MDEgMTE5LjMxOCAyMi4xMzQxIDEyMi45MjYgMjAuMTEwMUMxMjYuNTc4IDE4LjA0MjEgMTMwLjc1OCAxNy4wMDgxIDEzNS40NjYgMTcuMDA4MUMxMzguMjgyIDE3LjAwODEgMTQwLjg3OCAxNy40MjYxIDE0My4yNTQgMTguMjYyMUMxNDUuNjMgMTkuMDk4MSAxNDcuNzIgMjAuMjY0MSAxNDkuNTI0IDIxLjc2MDFDMTUxLjM3MiAyMy4yMTIxIDE1Mi45MTIgMjQuODg0MSAxNTQuMTQ0IDI2Ljc3NjFMMTQ2Ljc1MiAzMS4zOTYxQzE0Ni4wMDQgMzAuMjA4MSAxNDUuMDE0IDI5LjE1MjEgMTQzLjc4MiAyOC4yMjgxQzE0Mi41OTQgMjcuMzA0MSAxNDEuMjc0IDI2LjU3ODEgMTM5LjgyMiAyNi4wNTAxQzEzOC4zNyAyNS41MjIxIDEzNi45MTggMjUuMjU4MSAxMzUuNDY2IDI1LjI1ODFDMTMyLjU2MiAyNS4yNTgxIDEyOS45ODggMjUuOTQwMSAxMjcuNzQ0IDI3LjMwNDFDMTI1LjUgMjguNjI0MSAxMjMuNzQgMzAuNDUwMSAxMjIuNDY0IDMyLjc4MjFDMTIxLjE4OCAzNS4xMTQxIDEyMC41NSAzNy44MjAxIDEyMC41NSA0MC45MDAxQzEyMC41NSA0My45MzYxIDEyMS4xNjYgNDYuNjQyMSAxMjIuMzk4IDQ5LjAxODFDMTIzLjY3NCA1MS4zOTQxIDEyNS40NTYgNTMuMjY0MSAxMjcuNzQ0IDU0LjYyODFDMTMwLjAzMiA1NS45NDgxIDEzMi42NzIgNTYuNjA4MSAxMzUuNjY0IDU2LjYwODFDMTM3Ljk5NiA1Ni42MDgxIDE0MC4wNjQgNTYuMTQ2MSAxNDEuODY4IDU1LjIyMjFDMTQzLjcxNiA1NC4yOTgxIDE0NS4xNjggNTMuMDAwMSAxNDYuMjI0IDUxLjMyODFDMTQ3LjI4IDQ5LjY1NjEgMTQ3LjgwOCA0Ny43MjAxIDE0Ny44MDggNDUuNTIwMUwxNTYuMzg4IDQ0LjIwMDFDMTU2LjM4OCA0OC41NTYxIDE1NS40ODYgNTIuMjc0MSAxNTMuNjgyIDU1LjM1NDFDMTUxLjkyMiA1OC40MzQxIDE0OS40NTggNjAuNzg4MSAxNDYuMjkgNjIuNDE2MUMxNDMuMTY2IDY0LjAwMDEgMTM5LjU1OCA2NC43OTIxIDEzNS40NjYgNjQuNzkyMVpNMTM2Ljk4NCA0Ni4zMTIxVjM5LjI1MDFIMTU2LjM4OFY0NC44NjAxTDE1MS41MDQgNDYuMzEyMUgxMzYuOTg0WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02OS4zMDQgODBIODVMNjYuNDA2MiA0MC4xMTQzSDUxLjE5OTJMNjQuODMwOCA3MC45MzM2TDY0Ljg0NDIgNzAuOTYzOUw2NC44NDk5IDcwLjk3NjhMNjkuMzA0IDgwWk01Ny41MzQ3IDc1LjgyMzNDNTIuMTA2NiA3OC42MDc4IDQ2LjE2OTQgODAgMzkuNzIzIDgwQzMyLjU1OTIgODAgMjUuOTE4NiA3OC4yNDc2IDE5LjgwMTEgNzQuNzQyOUMxMy42ODM3IDcxLjE2MTkgOC44NTQxNyA2Ni4yODU3IDUuMzEyNSA2MC4xMTQzQzEuNzcwODMgNTMuOTQyOSAwIDQ3LjIzODEgMCA0MEMwIDMyLjc2MTkgMS43NzA4MyAyNi4wOTUyIDUuMzEyNSAyMEM4Ljg1NDE3IDEzLjgyODYgMTMuNjgzNyA4Ljk1MjM4IDE5LjgwMTEgNS4zNzE0M0MyNS45MTg2IDEuNzkwNDggMzIuNTU5MiAwIDM5LjcyMyAwQzQ4LjA5NDIgMCA1NS42NjA1IDIuNCA2Mi40MjE5IDcuMkM2OS4xODMyIDExLjkyMzggNzQuMDEyOCAxOC4xMzMzIDc2LjkxMDUgMjUuODI4Nkg2MS40NTZDNTkuMTIxNyAyMi4wMTkgNTYuMDIyNyAxOC45NzE0IDUyLjE1OTEgMTYuNjg1N0M0OC4zNzU5IDE0LjQgNDQuMjMwNiAxMy4yNTcxIDM5LjcyMyAxMy4yNTcxQzMyLjYzOTcgMTMuMjU3MSAyNi42MDI3IDE1Ljg4NTcgMjEuNjEyMiAyMS4xNDI5QzE2LjYyMTcgMjYuMzIzOCAxNC4xMjY0IDMyLjYwOTUgMTQuMTI2NCA0MEMxNC4xMjY0IDQ3LjM5MDUgMTYuNjIxNyA1My43MTQzIDIxLjYxMjIgNTguOTcxNEMyNi42MDI3IDY0LjE1MjQgMzIuNjM5NyA2Ni43NDI5IDM5LjcyMyA2Ni43NDI5QzQ0LjM3NjQgNjYuNzQyOSA0OC41NTc4IDY1LjYzMzQgNTIuMjY3NCA2My40MTQzTDU3LjUzNDcgNzUuODIzM1oiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=");
                background-position: left top;
                background-repeat: no-repeat;
                background-color: transparent;
                background-size: 94px auto;
                width: 96px;
                height: 19px;
                display: block;
                position: absolute;
                left: 15px;
                top: calc(50% - 18px / 2);
            }

            .close {
                background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0idy0yIGgtMiIgdmlld0JveD0iMCAwIDggOCIgZmlsbD0iY3VycmVudENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik03IDBMNCAzIDEgMCAwIDFsMyAzLTMgMyAxIDEgMy0zIDMgMyAxLTEtMy0zIDMtMy0xLTF6Ii8+PC9zdmc+");
                background-position: center center;
                background-repeat: no-repeat;
                background-color: #ddd;
                background-size: 14px auto;
                width: 30px;
                height: 30px;
                position: absolute;
                right: 43px;
                top: 39px;
                z-index: 9;
                text-indent: -1000cm;
                overflow: hidden;
                display: inline-block;
                border-radius: 50px;
                position: absolute;
                right: 15px;
                top: calc(50% - 30px / 2);

                &:hover {
                    cursor: pointer;
                }
            }
        }

        .to-server {
            max-height: 250px;
            overflow-y: scroll;
            background-color: #ffff9e;
            padding: 25px;
        }


        .ai-column-wrapper {
            min-width: 900px;
            position: relative;
            overflow-y: scroll;
            max-height: 468px;
            -webkit-overflow-scrolling: touch;
            overflow-scrolling: touch;

            &.no-scroll {
                overflow: hidden;
            }
            

            background:
            /* Shadow Cover TOP */
            linear-gradient(
            white 30%,
            rgba(255, 255, 255, 0)
            ) center top,
            
            /* Shadow Cover BOTTOM */
            linear-gradient(
            rgba(255, 255, 255, 0), 
            white 70%
            ) center bottom,
            
            /* Shadow TOP */
            radial-gradient(
            farthest-side at 50% 0,
            rgba(64, 64, 64, 0.2),
            rgba(64, 64, 64, 0)
            ) center top,
            
            /* Shadow BOTTOM */
            radial-gradient(
            farthest-side at 50% 100%,
            rgba(64, 64, 64, 0.2),
            rgba(64, 64, 64, 0)
            ) center bottom;
            
            background-repeat: no-repeat;
            background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
            background-attachment: local, local, scroll, scroll;

            /*
            &::-webkit-scrollbar {
                width: 0; 
                background: transparent; 
            }
            
            &::-webkit-scrollbar-thumb {
                background: #FF0000;
            }

            */
            form {
                display: flex;

                .ai-right,
                .ai-left {
                    width: 50%;
                    padding: 25px;

                    .ai-row {
                        margin: 0px !important;
                        margin-bottom: 20px !important;
                        display: flex;
                        justify-content: center;
                        align-items: flex-start;
                        flex-direction: column;
                        width: 100%;
                        
                        &:last-child {
                            margin-bottom: 0px;
                        }

                        .l {
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-bottom: 10px;
                        }

                        textarea,
                        input[type="text"] {
                            width: 100%;
                            max-height: 57px !important;
                            margin: 0px;
                            min-height: 100px;
                
                        }
                    }
                }
            }
        }

        .ai-actions {
            border-top: 1px solid #c0c0c0;
            display: flex;
            flex-direction: row;
            gap: 20px;
            justify-content: flex-end;
            align-items: center;
            width: 100%;
            padding: 15px;
            position: relative;

            a {
                position: relative;
            }

            .container-settings {
                border: 1px solid #e1e1e1;
                position: absolute;
                top: -35px;
                left: 0px;
                background-color: #FFF;
                display: none;
                border-radius: 5px;
                padding: 20px;
                transform: translate(-50%, -100%);
                text-indent: 0;
                z-index: 9;
                width: 310px;
                flex-direction: column;
                color: #000;
                text-decoration: none;
                gap: 15px;
                box-shadow: 0px 0px 5px 0px rgba(130, 130, 130, 0.25);

                &.open {
                    display: flex;
                }

                &:before {
                    content: "";
                    display: block;
                    width: 0;
                    height: 0;
                    position: absolute;
                    top: -10px;
                    left: 50%;
                    border-left: 10px solid rgba(0, 0, 0, 0);
                    border-right: 10px solid rgba(0, 0, 0, 0);
                    border-bottom: 10px solid #3677cc;
                    -webkit-transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                    transform: translateX(-50%);
                    display: none;
                }

                .ai-row {
                    label {
                        margin-bottom: 7px;
                    }

                    .form-options {
                        .form-item {
                            display: flex;
                            flex-grow: 1;
                            flex-shrink: 0;

                            label {
                                margin-bottom: 0px;
                            }
                        }
                    }
                }
            }
        }
    }
}

#ai-overlay {
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100vh;
    z-index: 5;
    display: none;
    opacity: 0;
    -webkit-animation: display-none-transition 1s both;
    animation: display-none-transition 1s both;
    backdrop-filter: blur(3px);
    

    &.open {
        display: block;
        opacity: 1;
    }
}