webserverai/WebServerAI/assets/AI/css/webserverai.min.css

WebServerAI is an advanced project using AI to revolutionize web development. It empowers users to create visually stunning websites tailored to their needs without extensive coding knowledge. This innovative tool streamlines the design process, offering

:host, 
:root{
    --wsa-light-bg: #dedede;
    --wsa-light-color: #000;
    --wsa-light-txtarea-bg: #f6f6f6;
    --wsa-light-txtarea-color: #292929;
    --wsa-light-history-item-bg: rgba(207, 207, 207, 0.85);
    --wsa-light-history-item-color: #555555;
    --wsa-light-usertag: #64a995;
    --wsa-light-history-danger: rgba(244, 8, 0, 0.85);
    --wsa-light-history-danger-usertag: #d7e1de;
    --wsa-light-history-info: rgba(33, 190, 212, 0.86);
    --wsa-light-history-info-usertag: #d7e1de;
    --wsa-light-history-success: rgba(6, 196, 99,0.85);
    --wsa-light-history-success-usertag: #bef4e5;
    --wsa-light-editor-controller: rgba(212,212,212,0.65);
    --wsa-light-editor-controller-color: #676765;
    --wsa-light-btn-color: #4b5352;
    --wsa-light-btn-bgHover: rgba(171,200,196,0.85);
    --wsa-light-boxShadow: #a7b8c7;
    --wsa-light-link: #0d0dff;
    --wsa-light-scrollbar-bg: #d5d5d5;
    --wsa-light-scrollbar-thumb: #b6b6b6;
    --wsa-light-mic-enabled: #ff0000;
    --wsa-light-smart-bg: rgb(95,21,199);
    --wsa-light-smart-bg-linear: linear-gradient(90deg, rgba(95,21,199,1) 0%, rgba(152,25,210,1) 50%, rgba(171,0,255,1) 100%);
    --wsa-light-smart-color: #d5d5d5;
    --wsa-light-smart-accept-border: #1ab91a;
    --wsa-light-smart-accept-color: #000;
    --wsa-light-smart-decline-border: #c5c5c5;
    --wsa-light-smart-decline-color: #000;
    --wsa-light-credits-low: #ff0000;

    --wsa-dark-bg: #000;
    --wsa-dark-color: #dedede;
    --wsa-dark-txtarea-bg: #292929;
    --wsa-dark-txtarea-color: #f6f6f6;
    --wsa-dark-history-item-bg: rgba(85, 85, 85, 0.85);
    --wsa-dark-history-item-color: #cfcfcf;
    --wsa-dark-usertag: #1ca27c;
    --wsa-dark-history-danger: rgba(132, 33, 30, 0.85);
    --wsa-dark-history-danger-usertag: #9a9797;
    --wsa-dark-history-info: rgba(23, 126, 139, 0.86);
    --wsa-dark-history-info-usertag: #9a9797;
    --wsa-dark-history-success: rgb(40, 95, 80, 0.85);
    --wsa-dark-history-success-usertag: #8ee2cc;
    --wsa-dark-editor-controller: rgba(103, 103, 101,0.65);
    --wsa-dark-editor-controller-color: #d4d4d4;
    --wsa-dark-btn-color: #e3e3e3;
    --wsa-dark-btn-bgHover: rgba(80, 96, 94, 0.85);
    --wsa-dark-boxShadow: #46525d;
    --wsa-dark-link: #9c9cfc;
    --wsa-dark-copy: #cdcbcb;
    --wsa-dark-scrollbar-bg: #525252;
    --wsa-dark-scrollbar-thumb: #747474;
    --wsa-dark-toggleBtn-bg:rgba(71, 71, 71, 0.65);
    --wsa-dark-toggleBtn-color: rgb(255,255,255);
    --wsa-dark-mic-enabled: #c91414;
    --wsa-dark-smart-bg: rgb(55 15 112);
    --wsa-dark-smart-bg-linear: linear-gradient(90deg, rgb(55 15 112) 0%, rgb(49 9 67) 50%, rgb(20 2 28) 100%);
    --wsa-dark-smart-color: #a1a1a1;
    --wsa-dark-smart-accept-border: #1d851d;
    --wsa-dark-smart-accept-color: #dcdcdc;
    --wsa-dark-smart-decline-border: #6c6c6c;
    --wsa-dark-smart-decline-color: #dcdcdc;
    --wsa-dark-credits-low: #c61515;


    --wsa-box-width: calc(100% - 53%);
    --wsa-box-height: calc(100% - 60%);

    --wsa-txtarea-size: 20px;
    --wsa-txtarea-disabled: rgba(147,147,147, 0.65);

    --wsa-bubble-color: #587bda;
    --wsa-bubble-border: #cfcfcf;
    --wsa-element-focus: #124254;
    --wsa-target-tag: rgba(149,0,209,0.70);
    --wsa-target-attr: rgba(14,37,227,0.70);
    --wsa-elemName-bg: rgb(212, 212, 212);
    --wsa-target-size: #6e6d6d;
}

.wsa,
.wsa *{
    margin: 0;
    padding: 0;
    box-sizing: content-box;
}
.wsa{
    display: block;
    position: fixed;
    z-index: 2000;
    width: var(--wsa-box-width);
    height: var(--wsa-box-height);
    transition: height 0.3s;
    border-radius: 5px;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.wsa.dragging{
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.wsa[wsa-stat="closed"]{
    height: 0px;
}

.wsa[wsa-stat="closed"] .wsa-container{
    overflow: hidden;
}
.wsa[wsa-theme="light"]{
    background-color: var(--wsa-light-bg);
    color: var(--wsa-light-color);
    box-shadow: 0 0 8px 6px var(--wsa-light-boxShadow);
}
.wsa[wsa-theme="dark"]{
    background-color: var(--wsa-dark-bg);
    color: var(--wsa-dark-color);
    box-shadow: 0 0 8px 6px var(--wsa-dark-boxShadow);
}

.wsa[wsa-position="top left"],
.wsa-drop-bubble[landing-pos="top left"]{
    top:0;
    left: 0;
}

.wsa[wsa-position="top center"],
.wsa-drop-bubble[landing-pos="top center"]{
    top:0;
    left: 50%;
    transform: translateX(-50%);
}

.wsa[wsa-position="top right"],
.wsa-drop-bubble[landing-pos="top right"]{
    top:0;
    right: 0;
}

.wsa[wsa-position="center left"],
.wsa-drop-bubble[landing-pos="center left"]{
    top:50%;
    left: 0;
    transform: translateY(-50%);
}

.wsa[wsa-position="center right"],
.wsa-drop-bubble[landing-pos="center right"]{
    top:50%;
    right: 0;
    transform: translateY(-50%);
}

.wsa[wsa-position="bottom left"],
.wsa-drop-bubble[landing-pos="bottom left"]{
    bottom:0;
    left: 0;
}

.wsa[wsa-position="bottom center"],
.wsa-drop-bubble[landing-pos="bottom center"]{
    bottom:0;
    left: 50%;
    transform: translateX(-50%);
}

.wsa[wsa-position="bottom right"],
.wsa-drop-bubble[landing-pos="bottom right"]{
    bottom:0;
    right: 0;
}


.wsa .wsa-title{
    padding-top: .5rem;
    text-align: center;
    width: 100%;
    display: grid;
    position: relative;
}
.wsa .wsa-title .wsa-subtitle{
    display: inline-block;
}
.wsa .wsa-title .wsa-version,
.wsa .wsa-title .wsa-credits{
    font-size: 15px;
    font-weight: bold;
    cursor: help;
}
.wsa .wsa-title .wsa-credits .current{
    font-size: 18px;
    text-decoration: underline;
}
.wsa[wsa-theme="light"] .wsa-title .wsa-credits .current.low{
    color: var(--wsa-light-credits-low);
}
.wsa[wsa-theme="dark"] .wsa-title .wsa-credits .current.low{
    color: var(--wsa-dark-credits-low);
}
.wsa .wsa-container{
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}
.wsa .wsa-ui{
    padding: 1rem;
    height: 75%;
    position: relative;
    display: contents;
}
.wsa .wsa-ui *{
    width: 100%;
}
.wsa .wsa-ui .wsa-history{
    height: calc(100% - 75px);
    overflow: auto;
}
.wsa .wsa-ui .wsa-history .wsa-history-item{
    word-wrap: break-word;
    font-size: 20px;
    width: calc(100% - 10px);
    padding: 5px;
    border-radius: 5px;
    margin-top:3px;
    margin-bottom: 3px;
    
}
.wsa .wsa-ui .wsa-history .wsa-history-item .wsa-user{
    font-size: 18px;
    font-style: italic;
}
.wsa[wsa-theme="light"] .wsa-ui .wsa-history .wsa-history-item .wsa-user{
    color: var(--wsa-light-usertag);
}
.wsa[wsa-theme="dark"] .wsa-ui .wsa-history .wsa-history-item .wsa-user{
    color: var(--wsa-dark-usertag);
}

.wsa .wsa-ui .wsa-history .wsa-history-item a{
    text-decoration: none;
}
.wsa[wsa-theme="light"] .wsa-ui .wsa-history .wsa-history-item a{
    color: var(--wsa-light-link);
}
.wsa[wsa-theme="dark"] .wsa-ui .wsa-history .wsa-history-item a{
    color: var(--wsa-dark-link);
}

.wsa[wsa-theme="light"] .wsa-ui .wsa-history .wsa-history-item{
    background-color: var(--wsa-light-history-item-bg);
    color: var(--wsa-light-txtarea-color);
}
.wsa[wsa-theme="dark"] .wsa-ui .wsa-history .wsa-history-item{
    background-color: var(--wsa-dark-history-item-bg);
    color: var(--wsa-dark-txtarea-color);
}

.wsa .wsa-ui textarea{
    border:0;
    outline: none;
    resize: none;
    font-size: var(--wsa-txtarea-size);
    padding: 5px;
}
.wsa[wsa-theme="light"] .wsa-ui textarea{
    background-color: var(--wsa-light-txtarea-bg);
    color: var(--wsa-light-txtarea-color);
}
.wsa[wsa-theme="dark"] .wsa-ui textarea{
    background-color: var(--wsa-dark-txtarea-bg);
    color: var(--wsa-dark-txtarea-color);
}
.wsa .wsa-ui textarea:disabled,
.wsa .wsa-ui textarea[disabled],
.wsa .wsa-ui textarea.disabled{
    background-color: var(--wsa-txtarea-disabled);
    cursor: auto;
    pointer-events: none;
}

.wsa[wsa-theme="light"] .wsa-ui .wsa-history [wsa-cmdtype="danger"]{
    background-color: var(--wsa-light-history-danger);
}
.wsa[wsa-theme="light"] .wsa-ui .wsa-history [wsa-cmdtype="danger"] .wsa-user{
    color: var(--wsa-light-history-danger-usertag);
}

.wsa[wsa-theme="dark"] .wsa-ui .wsa-history [wsa-cmdtype="danger"]{
    background-color: var(--wsa-dark-history-danger);
}
.wsa[wsa-theme="dark"] .wsa-ui .wsa-history [wsa-cmdtype="danger"] .wsa-user{
    color: var(--wsa-dark-history-danger-usertag);
}

.wsa[wsa-theme="light"] .wsa-ui .wsa-history [wsa-cmdtype="info"]{
    background-color: var(--wsa-light-history-info);
}
.wsa[wsa-theme="light"] .wsa-ui .wsa-history [wsa-cmdtype="info"] .wsa-user{
    color: var(--wsa-light-history-info-usertag);
}

.wsa[wsa-theme="dark"] .wsa-ui .wsa-history [wsa-cmdtype="info"]{
    background-color: var(--wsa-dark-history-info);
}
.wsa[wsa-theme="dark"] .wsa-ui .wsa-history [wsa-cmdtype="info"] .wsa-user{
    color: var(--wsa-dark-history-info-usertag);
}

.wsa[wsa-theme="light"] .wsa-ui .wsa-history [wsa-cmdtype="success"]{
    background-color: var(--wsa-light-history-success);
}
.wsa[wsa-theme="light"] .wsa-ui .wsa-history [wsa-cmdtype="success"] .wsa-user{
    color: var(--wsa-light-history-success-usertag);
}
.wsa[wsa-theme="dark"] .wsa-ui .wsa-history [wsa-cmdtype="success"]{
    background-color: var(--wsa-dark-history-success);
}
.wsa[wsa-theme="dark"] .wsa-ui .wsa-history [wsa-cmdtype="success"] .wsa-user{
    color: var(--wsa-dark-history-success-usertag);
}
.wsa .wsa-ui .wsa-history .wsa-cmd{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wsa .wsa-ui .wsa-history .wsa-cmd .wsa-copymsg{
    width: auto;
    background-color: transparent;
    font-size: 25px;
    cursor: pointer;
    border:0;
}
.wsa[wsa-theme="dark"] .wsa-ui .wsa-history .wsa-cmd .wsa-copymsg{
    color: var(--wsa-dark-copy);
}

/*Scrollbar*/

.wsa ::-webkit-scrollbar{
    cursor: default;
}

.wsa[wsa-theme="light"] ::-webkit-scrollbar{
    background-color: var(--wsa-light-scrollbar-bg);
}
.wsa[wsa-theme="light"] ::-webkit-scrollbar-thumb{
    background-color: var(--wsa-light-scrollbar-thumb);
}


.wsa[wsa-theme="light"] ::-webkit-scrollbar-button{
    background-size: 16px 16px; /* Adjust the size of the arrow image */
    background-position: center; /* Center the arrow image */
    border: none; /* Remove the default border */
    width: 16px; /* Adjust the width of the arrow */
    height: 16px; /* Adjust the height of the arrow */
    cursor: pointer; /* Make the arrow clickable */
}
.wsa[wsa-theme="light"] ::-webkit-scrollbar-button:vertical:start{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath fill='%23000000' d='M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3C/svg%3E");
}
.wsa[wsa-theme="light"] ::-webkit-scrollbar-button:vertical:end{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath fill='%23000000' d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E");
}

.wsa[wsa-theme="light"] ::-webkit-scrollbar-button:horizontal:start{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath fill='%23000000' d='M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6l0 256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z'/%3E%3C/svg%3E");
}
.wsa[wsa-theme="light"] ::-webkit-scrollbar-button:horizontal:end{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath fill='%23000000' d='M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z'/%3E%3C/svg%3E");
}

.wsa[wsa-theme="dark"] ::-webkit-scrollbar{
    background-color: var(--wsa-dark-scrollbar-bg);
}
.wsa[wsa-theme="dark"] ::-webkit-scrollbar-thumb{
    background-color: var(--wsa-dark-scrollbar-thumb);
}


.wsa[wsa-theme="dark"] ::-webkit-scrollbar-button{
    background-size: 16px 16px; /* Adjust the size of the arrow image */
    background-position: center; /* Center the arrow image */
    border: none; /* Remove the default border */
    width: 16px; /* Adjust the width of the arrow */
    height: 16px; /* Adjust the height of the arrow */
    cursor: pointer; /* Make the arrow clickable */
}
.wsa[wsa-theme="dark"] ::-webkit-scrollbar-button:vertical:start{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath fill='%23ffffff' d='M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3C/svg%3E");
}
.wsa[wsa-theme="dark"] ::-webkit-scrollbar-button:vertical:end{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath fill='%23ffffff' d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E");
}

.wsa[wsa-theme="dark"] ::-webkit-scrollbar-button:horizontal:start{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath fill='%23ffffff' d='M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6l0 256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z'/%3E%3C/svg%3E");
}
.wsa[wsa-theme="dark"] ::-webkit-scrollbar-button:horizontal:end{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath fill='%23ffffff' d='M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z'/%3E%3C/svg%3E");
}

.wsa .wsa-editor{
    display: flex;
    height: auto;
    position: relative;
}
.wsa .wsa-editor .wsa-controllers{
    display: flex;
    flex-direction: column;
    flex: 1 1.3 auto;
    align-items: center;
}.wsa .wsa-editor .wsa-controllers:last-child{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.wsa[wsa-theme="light"] .wsa-editor .wsa-controllers{
    background-color: var(--wsa-light-editor-controller);
    color: var(--wsa-light-editor-controller-color);
}
.wsa[wsa-theme="dark"] .wsa-editor .wsa-controllers{
    background-color: var(--wsa-dark-editor-controller);
    color: var(--wsa-dark-editor-controller-color);
}
.wsa .wsa-btn{
    border:0;
    background-color: transparent;
    cursor: pointer;
    font-size: 2.8vh;
    border-radius: 5px;
    padding: .3rem 0 .3rem 0;
    transition: 0.3s all;
}
.wsa .wsa-btn:disabled,
.wsa .wsa-btn[disabled],
.wsa .wsa-btn.disabled{
    cursor: auto;
    opacity: .5;}
.wsa[wsa-theme="light"] .wsa-btn{
    color: var(--wsa-light-btn-color);
}
.wsa[wsa-theme="dark"] .wsa-btn{
    color: var(--wsa-dark-btn-color);
}
.wsa[wsa-theme="light"] .wsa-btn:not(:disabled,[disabled],.disabled):hover{
    background-color: var(--wsa-light-btn-bgHover);
}
.wsa[wsa-theme="dark"] .wsa-btn:not(:disabled,[disabled],.disabled):hover{
    background-color: var(--wsa-dark-btn-bgHover);
}
.wsa .wsa-btn-group{
    display: inline-flex;
}
.wsa .wsa-editor-actions{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.wsa .wsa-editor-actions button{
    background: transparent;
    height: 100%;
    border: 0;
    cursor: pointer;
    font-size: 5vh;
    padding: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.wsa-drop-bubble{
    position: fixed;
    z-index: 2000;
    background-color: var(--wsa-bubble-color);
    border: 2px solid var(--wsa-bubble-border);
    width: 64px;
    height: 64px;
    border-radius: 50%;
}
.wsa .wsa-txt{
    width: 410px;
    overflow: auto;
}

.wsa[wsa-theme="light"] .wsa-mic:not(.wsa-mic-muted){
    background-color: var(--wsa-light-mic-enabled);
    animation: flashingMic 0.7s linear alternate infinite;
}
.wsa[wsa-theme="dark"] .wsa-mic:not(.wsa-mic-muted){
    background-color: var(--wsa-dark-mic-enabled);
    animation: flashingMic 0.7s linear alternate infinite;
}
@keyframes flashingMic {
    from{
        opacity: 1;
    }
    to{
        opacity: 0.5;
    }
}

/*[wsa-elemfocus]{
    border: 3px dotted var(--wsa-element-focus);
    padding: .8rem;
}*/
.wsa-targetName{
    position: absolute;
    z-index: 2000;
    background-color: var(--wsa-elemName-bg);
    font-weight: 500;
    width: 260px;
    padding: 2px;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    height: auto;
    font-size: 15px;
}
.wsa-targetName .wsa-title-bag{
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}
.wsa-color-info{
    display: flex;
    align-items: center;
}
.wsa-color-info span:first-child{
    display:block;
    width:12px;
    height:12px;
    margin-right: 3px;
}
.wsa-targetName .wsa-title-bag .wsa-swh{
    color: var(--wsa-target-size);
}
[wsa-target-container]{
    position: relative;
}
.wsa-target-tag{
    color: var(--wsa-target-tag);
    font-weight: 800;
}
.wsa-target-attr{
    color: var(--wsa-target-attr);
    font-weight: 600;
}
/*Smart AI*/
.wsa_smart_prompt{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: auto;
    font-size: 28px;
    position: absolute;
    width: auto;
    height: auto;
    padding: .5rem;
    border-radius: 5px;
    top:0;
    left: calc(0px + 30%);
}
.wsa_smart_prompt div{
    margin: auto 0 auto 0;
}
.wsa_smart_prompt div h1{
    margin: 0;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 7vh;
}
.wsa_smart_prompt div h1::after{
    content: '!';
}

.wsa_smart_prompt .ai_smart_recommended{
    font-style: italic;
    font-size: 18px;
    text-decoration: underline;
    font-weight: 200;
}
.wsa_smart_prompt .ai_smart_recommended::before{
    content: '> ';
}
[wsa-theme="light"] .wsa_smart_prompt{
    background-color: var(--wsa-light-smart-bg);
    background: var(--wsa-light-smart-bg-linear);
    color:var(--wsa-light-smart-color);
   
}
[wsa-theme="dark"] .wsa_smart_prompt{
    background-color: var(--wsa-dark-smart-bg);
    background: var(--wsa-dark-smart-bg-linear);
    color:var(--wsa-dark-smart-color);
}

.wsa_smart_prompt .ai_smart_opt{
    margin-top: 5px;
}
.wsa_smart_prompt .ai_smart_opt button{
    background: transparent;
    border: 0;
    font-size: 4vh;
    cursor: pointer;
    padding: .5rem;
    border-radius: 5px;
    transition: all 0.3s;
}
[wsa-theme="light"] .wsa_smart_prompt .ai_smart_opt button.ai_smart_accept{
    border: 3px solid var(--wsa-light-smart-accept-border);
    color: var(--wsa-light-smart-accept-color);
}
[wsa-theme="light"] .wsa_smart_prompt .ai_smart_opt button.ai_smart_decline{
    border: 3px solid var(--wsa-light-smart-decline-border);
    color: var(--wsa-light-smart-decline-color);
}
[wsa-theme="light"] .wsa_smart_prompt .ai_smart_opt button.ai_smart_accept:hover{
    background-color: var(--wsa-light-smart-accept-border);
    opacity: .8;
}
[wsa-theme="light"] .wsa_smart_prompt .ai_smart_opt button.ai_smart_decline:hover{
    background-color: var(--wsa-light-smart-decline-border);
    opacity: .8;
}

[wsa-theme="dark"] .wsa_smart_prompt .ai_smart_opt button.ai_smart_accept{
    border: 3px solid var(--wsa-dark-smart-accept-border);
    color: var(--wsa-dark-smart-accept-color);
}
[wsa-theme="dark"] .wsa_smart_prompt .ai_smart_opt button.ai_smart_decline{
    border: 3px solid var(--wsa-dark-smart-decline-border);
    color: var(--wsa-dark-smart-decline-color);
}
[wsa-theme="dark"] .wsa_smart_prompt .ai_smart_opt button.ai_smart_accept:hover{
    background-color: var(--wsa-dark-smart-accept-border);
    opacity: .8;
}
[wsa-theme="dark"] .wsa_smart_prompt .ai_smart_opt button.ai_smart_decline:hover{
    background-color: var(--wsa-dark-smart-decline-border);
    opacity: .8;
}