@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

.reachux-widget-container {font-family: 'Ubuntu', sans-serif !important; overflow: hidden; display: none; width: 375px; position: fixed; z-index: 9999999999; bottom: 70px; right: 10px; background-color: var(--primary-color); border-radius: 15px; box-shadow: 0 0 10px 5px #0000001a;}

.reachux-form-row {display: flex; justify-content: space-between; gap: 5px; margin-bottom: 10px;}
.reachux-form-column {flex: 1; margin-right: 10px;}
.reachux-form-column:last-child {margin-right: 0;}

/**************************
 * => Widget Header
 **************************/
.reachux-widget-header {text-align: center; padding: 25px 35px 15px;}
.reachux-widget-header .back-btn {display: none; position: absolute; top: 15px; left: 15px; width: 22px; height: 22px; padding: 0; background-image: none; background-color: var(--font-color); border: 0; font-size: 0; cursor: pointer; -webkit-mask-image: url("../img/icons/back_btn_icon.svg"); mask-image: url("../img/icons/back_btn_icon.svg"); transition: all .3s ease-in-out;}
.reachux-widget-header .back-btn:hover {background-color: var(--accent-color);}
.reachux-widget-header .back-btn:focus {outline: none;}
.reachux-widget-header .close-btn {display: block; position: absolute; top: 15px; right: 15px; width: 22px; height: 22px; padding: 0; background-image: none; background-color: var(--font-color); border: 0; font-size: 0; cursor: pointer; -webkit-mask-image: url("../img/icons/close_btn_icon.svg"); mask-image: url("../img/icons/close_btn_icon.svg"); transition: all .3s ease-in-out;}
.reachux-widget-header .close-btn:hover {background-color: var(--accent-color);}
.reachux-widget-header .close-btn:focus {outline: none;}
.reachux-widget-header img.reachux-widget-header-logo {max-width: 225px; width: auto;}

/**************************
 * => Widget Footer
 **************************/
.reachux-widget-footer {position: relative; bottom: 0; left: 0; width: 100%; background-color: var(--secondary-color); text-align: center; color: #fff;}
.reachux-widget-footer .footer-content {display: flex; justify-content: center; align-items: center; gap: 15px; cursor: pointer; opacity: 0.8; padding: 15px 35px; transition: all .3s ease-in-out;}
.reachux-widget-footer .footer-content:hover {opacity: 1;}
.reachux-widget-footer span {color: #fff; font-weight: 300; font-size: 13px; text-decoration: none;}
.reachux-widget-footer a,
.reachux-widget-footer a:hover,
.reachux-widget-footer a:focus {color: #fff; font-weight: 300; font-size: 13px; text-decoration: none;}
.reachux-widget-footer img.reachux-widget-footer-logo {position: relative; top: 2px; max-width: 100px; width: auto;}

/**************************
 * => Widget Options/Menu
 **************************/
.reachux-widget-options {padding: 0 35px 15px; margin: 0;}
.reachux-widget-options li {list-style: none; display: flex; align-items: center; font-size: 17px; color: var(--font-color); cursor: pointer; border-bottom: 1px solid var(--secondary-color); padding: 15px 0;}
.reachux-widget-options li:hover > .option-icon {margin-right: 3px;}
.reachux-widget-options li:hover > .option-icon i {background-color: var(--accent-color);}
.reachux-widget-options li:last-child {border-bottom: none;}

.reachux-widget-options .option-icon {width: 45px; transition: all .3s ease-in-out;}
.reachux-widget-options .option-icon .text {display: block; width: 30px; height: 26px; background-color: var(--font-color); transition: all .3s ease-in-out; -webkit-mask-image: url("../img/icons/text_icon.svg"); mask-image: url("../img/icons/text_icon.svg");}
.reachux-widget-options .option-icon .call {display: block; width: 21px; height: 29px; background-color: var(--font-color); transition: all .3s ease-in-out; -webkit-mask-image: url("../img/icons/call_icon.svg"); mask-image: url("../img/icons/call_icon.svg");}
.reachux-widget-options .option-icon .email {display: block; width: 30px; height: 20px; background-color: var(--font-color); transition: all .3s ease-in-out; -webkit-mask-image: url("../img/icons/email_envelope_icon.svg"); mask-image: url("../img/icons/email_envelope_icon.svg");}
.reachux-widget-options .option-icon .search {display: block; width: 30px; height: 30px; background-color: var(--font-color); transition: all .3s ease-in-out; -webkit-mask-image: url("../img/icons/search_icon.svg"); mask-image: url("../img/icons/search_icon.svg");}

/**************************
 * => Text With Us Module
 **************************/
.reachux-text-us-container {display: none;}

.reachux-text-us-container .text-msg-form-conf {color: #d8000c; font-size: 14px; text-align: center; background-color: #ffbaba; padding: 10px; margin-bottom: 15px; border-radius: 5px; border: 1px solid #d8000c; display: none;}
.reachux-text-us-container .text-msg-form-conf.success {color: #4f8a10; background-color: #dff2bf; border: 1px solid #4f8a10;}

#reachuxTextMsgForm {margin: 5px auto 30px; padding: 0 15px;}
#reachuxTextMsgForm h4 {font-family: 'Ubuntu', sans-serif !important; color: var(--font-color); font-weight: 400; font-size: 20px; line-height: 1.2em; text-rendering: auto; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; text-align: center; margin: 0 auto 15px;}
#reachuxTextMsgForm p {color: var(--font-color); font-weight: 300; font-size: 15px; text-align: center; line-height: 1.4em;}
#reachuxTextMsgForm input,
#reachuxTextMsgForm textarea {font-family: 'Ubuntu', sans-serif; background-color: #f1f1f1; font-size: 14px; width: 100%; line-height: normal; padding: 10px; margin-bottom: 5px; border: 0; border-radius: 5px; box-sizing: border-box; transition: all .3s ease-in-out;}
#reachuxTextMsgForm input:focus,
#reachuxTextMsgForm textarea:focus {outline: none; background-color: #fff;}
#reachuxTextMsgForm input#confirmPhone {display: none !important;}
#reachuxTextMsgForm button {display: block; height: 40px; width: 100%; background-image: none; background-color: var(--button-color); color: var(--font-color); font-family: 'Ubuntu', sans-serif; text-transform: uppercase; text-align: center; line-height: 001em; font-size: 15px; font-weight: 500; border: 0; border-radius: 5px; cursor: pointer; padding: 10px; transition: all .3s ease-in-out;}
#reachuxTextMsgForm button:hover {background-color: var(--secondary-color);}
#reachuxTextMsgForm button:focus {outline: none;}
#reachuxTextMsgForm button i {position: relative; top: 1px; display: inline-block; margin-right: 5px; width: 18px; height: 18px; background-color: var(--font-color); -webkit-mask-image: url("../img/icons/email_plane_icon.svg"); mask-image: url("../img/icons/email_plane_icon.svg");}
#reachuxTextMsgForm button span {position: relative; bottom: 2px;}

#reachuxTextMsgForm input:invalid,
#reachuxTextMsgForm textarea:invalid {background-color: #f8d7da;}
#reachuxTextMsgForm .error-placeholder {color: #873133 !important; opacity: 1 !important;}
#reachuxTextMsgForm .error-placeholder::placeholder {color: #873133; opacity:  0.6;}

/**************************
 * => Email Us Module
 **************************/
.reachux-email-us-container {display: none;}

.reachux-email-us-container .email-form-conf {color: #d8000c; font-size: 14px; text-align: center; background-color: #ffbaba; padding: 10px; margin-bottom: 15px; border-radius: 5px; border: 1px solid #d8000c; display: none;}
.reachux-email-us-container .email-form-conf.success {color: #4f8a10; background-color: #dff2bf; border: 1px solid #4f8a10;}

#reachuxEmailForm {margin: 5px auto 30px; padding: 0 15px;}
#reachuxEmailForm h4 {font-family: 'Ubuntu', sans-serif !important; color: var(--font-color); font-weight: 400; font-size: 20px; line-height: 1.2em; text-rendering: auto; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; text-align: center; margin: 0 auto 15px;}
#reachuxEmailForm p {color: var(--font-color); font-weight: 300; font-size: 15px; text-align: center; line-height: 1.4em;}
#reachuxEmailForm input,
#reachuxEmailForm textarea {font-family: 'Ubuntu', sans-serif; background-color: #f1f1f1; font-size: 14px; width: 100%; line-height: normal; padding: 10px; margin-bottom: 5px; border: 0; border-radius: 5px; box-sizing: border-box; transition: all .3s ease-in-out;}
#reachuxEmailForm input:focus,
#reachuxEmailForm textarea:focus {outline: none; background-color: #fff;}
#reachuxEmailForm input#confirmEmail {display: none !important;}
#reachuxEmailForm button {display: block; height: 40px; width: 100%; background-image: none; background-color: var(--button-color); color: var(--font-color); font-family: 'Ubuntu', sans-serif; text-transform: uppercase; text-align: center; line-height: 001em; font-size: 15px; font-weight: 500; border: 0; border-radius: 5px; cursor: pointer; padding: 10px; transition: all .3s ease-in-out;}
#reachuxEmailForm button:hover {background-color: var(--secondary-color);}
#reachuxEmailForm button:focus {outline: none;}
#reachuxEmailForm button i {position: relative; top: 1px; display: inline-block; margin-right: 5px; width: 18px; height: 18px; background-color: var(--font-color); -webkit-mask-image: url("../img/icons/email_plane_icon.svg"); mask-image: url("../img/icons/email_plane_icon.svg");}
#reachuxEmailForm button span {position: relative; bottom: 2px;}

#reachuxEmailForm input:invalid,
#reachuxEmailForm textarea:invalid {background-color: #f8d7da;}
#reachuxEmailForm .error-placeholder {color: #873133 !important; opacity: 1 !important;}
#reachuxEmailForm .error-placeholder::placeholder {color: #873133; opacity:  0.6;}

/**************************
 * => Search Module
 **************************/
.reachux-search-container {display: none;}

#reachuxSearchWidget {margin: 5px auto 30px; padding: 0 15px;}
#reachuxSearchWidget h4 {font-family: 'Ubuntu', sans-serif !important; color: var(--font-color); font-weight: 400; font-size: 20px; line-height: 1.2em; text-rendering: auto; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; text-align: center; margin: 0 auto 15px;}
#reachuxSearchWidget p {color: var(--font-color); font-weight: 300; font-size: 15px; text-align: center; line-height: 1.4em;}
#reachuxSearchWidget input {height: 40px; background-color: #f1f1f1; font-family: 'Ubuntu', sans-serif; font-size: 14px; width: 100%; padding: 10px 60px 10px 10px; border: 0; border-radius: 5px; transition: all .3s ease-in-out;}
#reachuxSearchWidget input:focus {outline: none; background-color: #fff;}
#reachuxSearchWidget button {position: absolute; right: 15px; background-image: none; background-color: var(--button-color); width: 50px; height: 40px; border: 0; border-top-left-radius: 0; border-top-right-radius: 5px; border-bottom-left-radius: 0; border-bottom-right-radius: 5px; cursor: pointer; line-height: normal; padding: 0; transition: all .3s ease-in-out;}
#reachuxSearchWidget button:hover {background-color: var(--secondary-color);}
#reachuxSearchWidget button:focus {outline: none;}
#reachuxSearchWidget button .search {position: relative; left: 13px; display: block; width: 22px; height: 22px; background-color: var(--font-color); -webkit-mask-image: url("../img/icons/search_icon.svg"); mask-image: url("../img/icons/search_icon.svg");}

/**************************
 * => Widget Controls
 **************************/
.reachux-controls-container {position: fixed; z-index: 9999999999; bottom: 10px; right: 10px; display: flex; border-radius: 10px; box-shadow: 0 0 10px 5px #0000001a; overflow: hidden;}

.reachux-controls-container .control-btn {width: 50px; height: 50px; background-image: none; background-color: var(--primary-color); text-align: center; border: 0; border-radius: 0; border-right: 1px solid var(--secondary-color); cursor: pointer; padding: 0; transition: all .3s ease-in-out;}
.reachux-controls-container .control-btn:last-child,
.reachux-controls-container .control-btn:last-child:hover,
.reachux-controls-container .control-btn:last-child:focus {border-right: 0;}
.reachux-controls-container .control-btn:hover,
.reachux-controls-container .control-btn:focus {background-color: var(--secondary-color); outline: none; border-right: 1px solid var(--secondary-color);}

.reachux-controls-container .control-btn.connect {width: 100px; font-family: 'Ubuntu', sans-serif !important; color: var(--font-color); font-size: 15px; font-weight: 500;}
.reachux-controls-container .control-btn.primary-toggle {background-image: none; background-color: var(--button-color);}
.reachux-controls-container .control-btn.primary-toggle:hover,
.reachux-controls-container .control-btn.primary-toggle:focus {background-color: var(--secondary-color); outline: none;}
.reachux-controls-container .control-btn.primary-toggle .bars {display: block; width: 24px; height: 20px; margin: auto; background-image: none; background-color: var(--font-color); -webkit-mask-image: url("../img/icons/bars_icon.svg"); mask-image: url("../img/icons/bars_icon.svg");}
.reachux-controls-container .control-btn .text {display: block; width: 28px; height: 24px; margin: auto; background-image: none; background-color: var(--font-color); -webkit-mask-image: url("../img/icons/text_icon.svg"); mask-image: url("../img/icons/text_icon.svg");}
.reachux-controls-container .control-btn .email {display: block; width: 25px; height: 25px; margin: auto; background-image: none; background-color: var(--font-color); -webkit-mask-image: url("../img/icons/email_plane_icon.svg"); mask-image: url("../img/icons/email_plane_icon.svg");}

/**************************
 * => Keyframes
 **************************/
@keyframes widgetFadeUp {
	from {opacity: 0; transform: translateY(20px);}
	to {opacity: 1; transform: translateY(0);}
}

@keyframes optionFadeUp {
	from {opacity: 0; transform: translateY(20px);}
	to {opacity: 1; transform: translateY(0);}
}

.reachux-widget-load {animation: widgetFadeUp 0.3s ease-out forwards;}
.reachux-option-load {opacity: 0; animation: optionFadeUp ease 0.5s 0.1s forwards;}