/* Structure
    1- Color variables
    2- Scroll Bar
    3- input
    4- popup
    5- Header
    6- body
    7- Footer
    8- Image Upload
    9- FAQS AND Suggestions
    10- User Messages
    11- chatBot messages + Options/menu
*/
@font-face {
    font-family: FedraSans;
    src: url(../font/FedraSansBook.ttf);
}
@font-face {
    font-family: Calibri;
    src: url(../font/CalibriRegular.ttf);
}

:root {
    /* Color Variables*/
    --main-color: #0096a1;
    --secondary-color: #00424c;
    --third-color: linear-gradient(20deg, #00bbc6, #00424c);;
    /*--third-color: linear-gradient(20deg,#00bbc5,#00bbc5,#00bbc5,#2594b7,#004b55,#004b55,#004b55);*/
    --white-color: #ffffff;
    --black-color: #000000;
    --gray-color: #b1b1b1;
    --red-color: #DC3545;


    /* Scroll Bar*/
    --scrollbar-width: 0.4em;
    --scrollbar-track: inset 0 0 6px var(--main-color);
    --scrollbar-thumb-background: var(--main-color);
    --scrollbar-thumb-outline: var(--main-color);


    /* Global Font */
    --font-family: FedraSans, Calibri !important;


    /* popup */
    --popup-box-shadow: 0px 5px 7px 3px rgb(0 142 255 / 20%);
    --popup-background-color: var(--white-color);
    --popup-border: 1px solid var(--main-color);


    /* Header Variables */
    --header-font-color: var(--white-color);
    --header-background-color: var(--third-color);
    --header-font-size: 20px;

    /*Header Menu*/
    /*block to enable - none to disable*/
    --header-menu-view: block;
    --header-menu-color: var(--white-color);

    /*Header Image*/
    /*block to enable - none to disable*/
    --header-image-view: block;
    --header-image-vertical-movement: 2%;
    --header-image-size: 60% !important;


    /* Body */
    --body-background-color: transparent;
    --body-height: 100%;


    /* Footer */
    --footer-border-top: none;
    --footer-background: var(--white-color);

    /* Footer Buttons (Send)*/
    --footer-button-background-color: var(--main-color);
    --footer-button-icon-color: var(--white-color);
    --footer-button-icon-radius: 50%;
    --footer-button-icon-width: 50px;
    --footer-button-icon-height: 50px;
    --footer-button-horizontal-position: 1%;
    --footer-button-vertical-position: 1%;

    /* Footer Input*/
    --input-placeholder-color: var(--black-color);

    /* Footer Buttons (Attachment Button)*/
    --footer-attachment-button-background: var(--main-color);
    --footer-attachment-button-color: var(--white-color);
    --footer-attachment-button-border-radius: 50%;
    --footer-attachment-button-width: 50px;
    --footer-attachment-button-height: 50px;
    --footer-attachment-button-horizontal-position: 75px;
    --footer-attachment-button-vertical-position: 14px;
    --footer-attachment-button-show-hide: none !important;


    /* Image Upload */
    /* Image Upload Container Dialog */
    --image-upload-container-vertical-position: 37%;
    --image-upload-container-height: 50%;
    --image-upload-container-background-color: var(--third-color);
    /*--image-upload-container-border-radius:25px;*/
    /*--image-upload-container-border:1px solid var(--white-color);*/
    /*--image-upload-container-box-shadow:var(--main-color) 0px -7px 19px 0px;*/

    /* Image Upload buttons group */
    --Image-buttons-group-width: 100%;
    --Image-buttons-group-padding: 8%;
    --Image-buttons-group-gap: 7%;

    /* Image Upload confirmation button */
    --image-confirm-send-button-background: var(--white-color);
    --image-confirm-send-button-border: 1px solid var(--main-color);
    --image-confirm-send-button-color: var(--main-color);

    /* Image Upload cancel button */
    --image-cancel-button-background: var(--red-color);
    --image-cancel-button-border: 1px solid var(--red-color);
    --image-cancel-button-color: var(--white-color);

    /* Image Upload Dimensions*/
    --Image-min-width: 150px;
    --Image-max-width: 210px;
    --Image-min-height: 150px;
    --Image-max-height: 210px;

    /* Image Upload confirmation message*/
    --Image-confirmation-message-color: var(--white-color);
    --Image-confirmation-message-size: 22px;

    /* FAQS AND SUGGESTIONS */
    /* edit the tab with the badge */
    --click-for-suggestions-tab-width: 50%;
    --click-for-suggestions-tab-background-color: var(--gray-color);
    --click-for-suggestions-tab-border-top-left-radius: 50px;
    --click-for-suggestions-tab-border-top-right-radius: 50px;
    --click-for-suggestions-tab-border-bottom-left-radius: 0;
    --click-for-suggestions-tab-border-bottom-right-radius: 0;
    --click-to-close-button-text-color: var(--white-color);
    --click-to-close-button-text-size: 1rem;

    /* Faqs container */
    --faqs-container-background-color: var(--main-color);
    --faqs-container-vertical-position: 9%;
    --faqs-container-border: 1px solid rgb(255, 255, 255);
    --faqs-container-box-shadow: var(--black-color) 0px -4px 9px 0px;

    /* faq question in the container (each element of the list of available faqs) */
    --faq-question-background-color: var(--white-color);
    --faq-question-text-color: var(--main-color);
    --faq-question-border-radius: 25px;

    /* Faqs Badge settings */
    --faqs-badge-background-color: var(--red-color);
    --faqs-badge-font-color: var(--white-color);
    /* to hide the badge make the font size below equals to 0 */
    --faqs-badge-font-size: .75rem !important;

    /* Messages Settings */
    /* User Message */
    --user-message-background-color: var(--main-color);
    --user-message-text-color: var(--white-color);
    --user-message-border-radius: 25px;
    --user-message-font-size: 13px !important;
    --user-message-border: 1px solid var(--white-color);

    /* Bot Message */
    --bot-message-background-color: var(--white-color);
    --bot-message-text-color: var(--secondary-color);
    --bot-message-border-radius: 25px;
    --bot-message-font-size: 13px !important;
    --bot-message-border: 1px solid var(--main-color);
    --bot-message-image-vertical-position: -30px;

    /* Options or menu */
    --bot-message-menu-options-buttons-background-color: var(--white-color);
    --bot-message-menu-options-buttons-text-color: var(--main-color);
    --bot-message-menu-options-buttons-border: 1px solid var(--main-color);
    --bot-message-menu-options-buttons-border-radius: 25px;

    /* Options or menu on mouse hover Hover */
    --bot-message-menu-options-buttons-hover-background-color: var(--main-color);
    --bot-message-menu-options-buttons-hover-text-color: var(--white-color);
    --bot-message-menu-options-buttons-hover-border: 1px solid var(--secondary-color);
}