/*NOTE: 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: ENFont;
    src: url(../assets/font/Corporate-S-Regular.otf);
}
@font-face {
    font-family: GESS;
    src: url(../assets/font/GESSTextMedium-Medium.woff2);
}


:root {
    /*NOTE: Global Font */
    --font-family-bold:  ENFont, GESS !important;
    --font-family-light:  ENFont, GESS !important;
    /* --font-family: ENFont, GESS !important; */

    --font-size: 13px !important;

    /*NOTE: Color Variables*/
    --main-color: #7f2d2d;
    --secondary-color: #54575a;
    --gold-color: #99784F;
    --white-color: #f6f4f5;
    --black-color: #383838;
    --gray-color: #ECECEC;
    --dark-gray-color: #757575;
    --border-color: #c8c8cb;
    --red-color: #DC3545;
    --faqsColor: #818785;
    /*NOTE: Scroll Bar*/
    --scrollbar-width: 0.6em;
    --scrollbar-track: inset 0 0 100px var(--white-color);
    --scrollbar-track-border-radius: 7px;
    --scrollbar-thumb-border-radius: 7px;
    --scrollbar-thumb-background: var(--main-color);
    --scrollbar-thumb-outline: 1px solid var(--main-color);


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

    /*NOTE: prechat popup*/
    --prechat-popup-box-shadow: 0px 5px 7px 3px rgb(0 142 255 / 20%);
    --prechat-popup-background-color: var(--main-color);
    --prechat-popup-border: 1px solid var(--main-color);
    --prechat-popup-border-radius: 7px;
    --prechat-popup-logo-width:55%;
    --prechat-popup-logo-vertical-position:100px;
    --prechat-popup-form-holder-width:90%;
    --prechat-popup-form-holder-vertical-position:35%;
    --prechat-popup-form-holder-horizontal-position:5%;
    --prechat-popup-form-headertext-color:var(--white-color);;
    --prechat-popup-form-headertext-size:15px;
    --prechat-popup-form-input-radius:7px;
    --prechat-popup-form-btn-vertical-position:10%;
    --prechat-popup-form-btn-width:100%;
    --prechat-popup-form-btn-padding:5px;
    --prechat-popup-form-btn-background: var(--secondary-color);
    --prechat-popup-form-btn-text-color: var(--white-color);
    --prechat-popup-form-btn-hover-background: var(--main-color);
    --prechat-popup-form-btn-text-hover-color: var(--white-color);

    /*NOTE: Header Variables */
    --header-font-color: var(--white-color);
    --header-background-color: var(--main-color);
    --header-font-size: 20px;
    --header-height: 70px;
    --header-padding: 0;
    --header-top-leftRight-radius:7px;

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

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

    /*NOTE: header close chat button style*/
    --header-stop-chat-button-width:30px;

    /*NOTE: Body */
    --body-background-color: var(--white-color);
    --body-height: 100%;
    --body-main-top-clearance: 0;
    --body-scroller:scroll; /*toggle between none/scroll*/

    /*NOTE: Footer */
    --footer-border-top: none;
    --footer-background: #fff !important;
    --footer-padding:0;
    --footer-bottom-right-radius:7px;
    --footer-bottom-left-radius:7px;

    /*NOTE: Footer Menu Container*/
    --footer-menu-container-height: calc(100vh - 60px);
    --footer-menu-container-background: var(--white-color);;
    --footer-menu-container-padding-upDown:25%;
    --footer-menu-container-padding-left-right:5%;

    /*NOTE: Footer Menu buttons */
    --bottom-menu-button-radius:7px;
    --bottom-menu-button-padding:2%;
    --bottom-menu-button-width:95%;
    --bottom-menu-button-image-size:10%;
    --bottom-menu-button-font-size:16px !important;
    --bottom-menu-button-hover-color: #fff;
    --bottom-menu-button-border:1px solid #e9ecef;
    --bottom-menu-button-background:#F4F4F4;
    /*NOTE: Footer Buttons (Send)*/
    --footer-button-background-color: #545759;
    --footer-button-btn-color: var(--white-color);
    --footer-button-btn-radius: 50%;
    --footer-button-btn-width: 40px;
    --footer-button-btn-height: 40px;
    --footer-button-horizontal-position: 1%;
    --footer-button-vertical-position: 1%;

    /*NOTE: the send icon*/
    --footer-button-icon-width: 35px;
    --footer-button-icon-padding: 0 5px 0 0;
        /* Footer Input*/
    --write-message-input: 80%;

    /*NOTE: FLAG and inputs placeholder*/
    --input-placeholder-color: #979797;
    --input-text-color: var(--black-color);
    --flag-horizontal-position: 12px !important;
    --footer-attachment-button-background: var(--main-color);
    --footer-attachment-button-color: var(--white-color);
    --footer-attachment-button-border-radius: 7px;
    --footer-attachment-button-width: 40px;
    --footer-attachment-button-height: 40px;
    --footer-attachment-button-horizontal-position: 60px;
    --footer-attachment-button-vertical-position: 14px;
    --footer-attachment-button-show-hide: none !important;

    /*NOTE: bottom elements holder*/
    --bottom-elements-holder-color:#fff;
    --bottom-elements-holder-radius:50px;
    --bottom-elements-holder-padding:4px;

    /*NOTE: Image Upload */
    /*NOTE: Image Upload Container Dialog */
    --image-upload-container-vertical-position: 37%;
    --image-upload-container-height: 50%;
    --image-upload-container-background-color: var(--main-color);
    --image-upload-container-padding: 2%;

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

    /*NOTE: 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);

    /*NOTE: 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);

    /*NOTE: Image Upload Dimensions*/
    --Image-min-width: 150px;
    --Image-max-width: 210px;
    --Image-min-height: 150px;
    --Image-max-height: 210px;
    --Image-border-radius:7px;

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

    /*NOTE: FAQS AND SUGGESTIONS */
    /*NOTE: 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;

    /*NOTE: 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;

    /*NOTE: 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(--secondary-color);
    --faq-question-border-radius: 0;
    --faq-question-bottom-clearance: 8px;

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

    /*NOTE: Messages Settings */
    /*NOTE: User Message */
    --user-message-background-color: var(--main-color);
    --user-message-text-color: #545759;
    --user-message-border-radius: 7px;
    --user-message-font-size: 15px !important;
    --user-message-border: 1px solid var(--white-color);
    --user-message-min-width: 95px;
    --user-message-max-width: 70%;
    --user-message-avatar-size: 41px;
    --user-message-avatar-border-radius: 7px;
    --user-message-avatar-shadow: 0 0 3px white;

    /*NOTE: Bot Message */
    --bot-message-background-color: #fff;
    --bot-message-text-color: #6f6f6f;
    --bot-message-border-radius: 22px;
    --bot-message-font-size: 15px !important;
    --bot-message-border: 1px solid var(--main-color);
    --bot-message-image-vertical-position: -30px;
    --bot-message-min-width: 95px;
    --bot-message-max-width: 75%;
    --received-message-avatar-width: 55px;
    --received-message-avatar-border-radius: 50%;
    --received-message-avatar-shadow: 0 0 7px 2px #969696;
    /*NOTE: Options or menu */
    --bot-message-menu-options-buttons-background-color: transperant;
    --bot-message-menu-options-buttons-text-color: #545759;
    --bot-message-menu-options-buttons-border: 1px solid #9e9e9e;
    --bot-message-menu-options-buttons-border-radius: 10px;

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

    /*NOTE: live chat form*/
    /*NOTE: border-radius is available in prechat popup*/
    --livechat-form-input-vertical-space-top: 4%;
    --livechat-form-input-vertical-space-bottom: 4%;
    --livechat-form-buttons-gap:20px;
    --livechat-form-btn-background: var(--main-color);
    --livechat-form-btn-text-color: var(--white-color);
    --livechat-form-btn-hover-background: var(--white-color);
    --livechat-form-btn-text-hover-color: var(--main-color);
}