:root {

    --botOverlay: rgb(255, 255, 255, 0.75);
    --botButton: #FF991A;
    --botContainer: #FF991A;

    --botQuery: #2D394B;
    --botQueryText: #EEE
;
    --botOption: #EEEEEE;
    --botOptionText: black;

    --botActiveOption:  #FF991A;
    --botActiveOptionText:  white;

}

#infoBotBtn {

    width: 75px;
    height: 75px;
    border-radius: 50%;

    background-color: var(--botButton);

    background-position: center;
    background-repeat: no-repeat;
    background-size: 75%;
    background-image: url("botIcon.svg");

    position: fixed;
    right: 25px;
    bottom: 25px;

    box-shadow: none;
    cursor: pointer;

}

#botOverlay, .botOverLay {

    width: 100vw;
    height: 100vh;

    position: absolute;
    z-index: 9999;
    display: none;

    background-color: var(--botOverlay);


}

#infoBot {

    width: 80vw;
    margin: 0 auto;

    display: flex;
    flex-flow: column nowrap;
    gap: 25px;

    border: 1px solid var(--botContainer);
    border-radius: 15px;
    padding: 25px;

}

.botLogo {

    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-image: url('botLogo.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    flex-shrink: 0;
    flex-grow: 0;

}

.botQuery {

    /* display: flex; */
    display: none;

    flex-flow: column nowrap;
    gap: 25px;
    padding: 0;

}

.botQueryContainer {

    background-color: var(--botQuery);
    color: var(--botQueryText);
    padding: 15px;
    border-radius: 5px;

    display: flex;
    flex-flow: row nowrap;
    gap: 15px;
    align-items: flex-start;

}

.botOption {

    background-color: var(--botOption);
    color: var(--botOptionText);
    padding: 15px;
    border-radius: 5px;

}

.botOption:hover {

    background-color: var(--botActiveOption);
    color: var(--botActiveOptionText);
    cursor: pointer;

}

.botGuiQuery {

    border-right: 1px solid var(--botQuery);
    border-left: 1px solid var(--botQuery);
    border-bottom: 1px solid var(--botQuery);
    border-radius: 5px;
    display: flex;
    flex-flow: column nowrap;
    margin: 0 auto 15px auto;
    width: 95%;
    height: 50px;
    overflow: hidden;

}

.botGuiQuery > div:last-child {

    cursor: pointer;

}

.botGuiPreview {

    min-height: 50px;
    border-radius: 5px;
    overflow: clip;
    background-color: var(--botQuery);
    color: var(--botQueryText);
    padding: 15px;
    cursor: pointer;

}

.botGuiAnswer {

    padding: 15px;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    gap: 15px;

}

.botGuiAnswer div {

    cursor: pointer;

}

.botGuiAnswer > div:first-child {

    cursor: initial;
    flex-grow: 1;

}