/* =========================================================
   TECHNOXANDER BOOK A DEMO
   ELEMENTOR STYLE OVERRIDES
   ========================================================= */

/* =========================================================
   POPUP ROOT / MODAL
   ========================================================= */

#technoxander-demo-popup {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 30px !important;

    display: none !important;

    align-items: center !important;
    justify-content: center !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-sizing: border-box !important;

    background: rgba(0, 0, 0, 0.55) !important;

    z-index: 999999 !important;
}


/* =========================================================
   POPUP OPEN STATE
   ========================================================= */

#technoxander-demo-popup.is-open {
    display: flex !important;
}

/* =========================================================
   POPUP BASE RESET
   ========================================================= */

#technoxander-demo-popup,
#technoxander-demo-popup *,
#technoxander-demo-popup *::before,
#technoxander-demo-popup *::after {
    box-sizing: border-box;
}


/* =========================================================
   POPUP ROOT
   ========================================================= */

#technoxander-demo-popup {
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
}


/* =========================================================
   POPUP CONTAINER
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-popup-container {
	position: relative !important;
    width: 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: #ffffff !important;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.22) !important;
}


/* =========================================================
   POPUP CONTENT
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-popup-content {
    width: 100% !important;

    margin: 0 !important;

    padding: 42px 46px 46px !important;
}


/* =========================================================
   HEADING RESET
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-form-state h2,
#technoxander-demo-popup
.technoxander-demo-success-state h2 {
    display: block !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 45px 12px 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #111111 !important;

    font-family: inherit !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    font-style: normal !important;

    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;

    text-align: left !important;
}


/* =========================================================
   DESCRIPTION RESET
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-form-state > p {
    display: block !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 0 30px !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #555555 !important;

    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    font-style: normal !important;

    line-height: 1.6 !important;
    letter-spacing: normal !important;
    text-transform: none !important;

    text-align: left !important;
}


/* =========================================================
   CLOSE BUTTON
   =========================================================
   Elementor is applying its global button styling here.
   This completely resets that styling.
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-popup-close {
    position: absolute !important;

    top: 16px !important;
    right: 18px !important;

    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;

    border-radius: 50% !important;

    background: transparent !important;
    background-color: transparent !important;

    color: #333333 !important;

    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;

    cursor: pointer !important;

    transform: none !important;
}


/* =========================================================
   CLOSE BUTTON HOVER
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-popup-close:hover {
    background: #f3f3f3 !important;
    background-color: #f3f3f3 !important;

    color: #111111 !important;

    box-shadow: none !important;

    transform: none !important;
}


/* =========================================================
   CLOSE BUTTON SPAN
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-popup-close span {
    display: block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    color: inherit !important;

    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1 !important;

    text-align: center !important;
}

/* =========================================================
   POPUP CONTENT SCROLLING
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-popup-container {
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* =========================================================
   FORM RESET
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-form {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}


/* =========================================================
   FORM ROW
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-form-row {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   FIELD RESET
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-field {
    width: 100% !important;

    margin: 0 0 20px !important;
    padding: 0 !important;

    border: 0 !important;
}


/* =========================================================
   LABEL RESET
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-field label {
    display: block !important;

    width: auto !important;

    margin: 0 0 8px !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #222222 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-style: normal !important;

    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;

    text-align: left !important;
}


/* =========================================================
   REQUIRED ASTERISK
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-field label > span[aria-hidden="true"] {
    display: inline !important;

    margin: 0 0 0 2px !important;
    padding: 0 !important;

    color: #f58220 !important;

    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}


/* =========================================================
   OPTIONAL TEXT
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-optional {
    display: inline !important;

    margin: 0 0 0 5px !important;
    padding: 0 !important;

    color: #888888 !important;

    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 400 !important;

    line-height: inherit !important;
}


/* =========================================================
   INPUT / SELECT / TEXTAREA RESET
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-field input,
#technoxander-demo-popup
.technoxander-demo-field select,
#technoxander-demo-popup
.technoxander-demo-field textarea {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 13px 14px !important;

    border: 1px solid #d7d7d7 !important;
    border-radius: 6px !important;

    outline: none !important;

    background: #ffffff !important;
    background-image: none !important;

    color: #222222 !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    font-style: normal !important;

    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;

    text-align: left !important;

    box-shadow: none !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}


/* =========================================================
   SELECT
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-field select {
    cursor: pointer !important;
}


/* =========================================================
   TEXTAREA
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-field textarea {
    min-height: 125px !important;

    resize: vertical !important;
}


/* =========================================================
   INPUT FOCUS
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-field input:focus,
#technoxander-demo-popup
.technoxander-demo-field select:focus,
#technoxander-demo-popup
.technoxander-demo-field textarea:focus {
    border-color: #f58220 !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(245, 130, 32, 0.12) !important;
}

/* =========================================================
   HONEYPOT FIELD
   Hidden from normal users but kept in the DOM for spam
   detection.
   ========================================================= */

#technoxander-demo-popup .technoxander-demo-honeypot {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 50px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 13px 24px !important;

    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;

    border-radius: 6px !important;

    background: #f58220 !important;
    background-color: #f58220 !important;
    background-image: none !important;

    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-style: normal !important;

    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;

    text-align: center !important;
    text-decoration: none !important;

    box-shadow: none !important;

    cursor: pointer !important;

    transform: none !important;
}


/* =========================================================
   SUBMIT BUTTON HOVER
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-submit:hover {
    background: #df7014 !important;
    background-color: #df7014 !important;

    color: #ffffff !important;

    box-shadow:
        0 6px 18px rgba(245, 130, 32, 0.20) !important;

    transform: translateY(-1px) !important;
}


/* =========================================================
   SUBMIT BUTTON TEXT
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-submit span {
    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;

    line-height: inherit !important;
    text-transform: none !important;
}

/* =========================================================
   SUBMIT BUTTON STATES
   ========================================================= */

#technoxander-demo-popup .technoxander-demo-submit-loading {
    display: none !important;
}

#technoxander-demo-popup .technoxander-demo-submit-text {
    display: inline !important;
}

/* Loading state */
#technoxander-demo-popup
.technoxander-demo-submit.is-loading
.technoxander-demo-submit-text {
    display: none !important;
}

#technoxander-demo-popup
.technoxander-demo-submit.is-loading
.technoxander-demo-submit-loading {
    display: inline !important;
}

/* =========================================================
   SUCCESS STATE HEADING
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-success-state h2 {
    text-align: center !important;
}


/* =========================================================
   SUCCESS STATE PARAGRAPHS
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-success-state p {
    font-family: inherit !important;
}


/* =========================================================
   SOLUTIONS LINK
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-solutions-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;

    margin: 0 !important;

    padding: 12px 22px !important;

    border: 0 !important;
    border-radius: 6px !important;

    background: #f58220 !important;
    background-color: #f58220 !important;

    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    line-height: 1.4 !important;
    text-decoration: none !important;
    text-transform: none !important;

    box-shadow: none !important;
}

/* =========================================================
   MOBILE ELEMENTOR OVERRIDES
   ========================================================= */

@media (max-width: 767px) {

    #technoxander-demo-popup
    .technoxander-demo-popup-container {
        max-width: 720px !important;
    }

    #technoxander-demo-popup
    .technoxander-demo-popup-content {
        padding: 34px 22px 28px !important;
    }

    #technoxander-demo-popup
    .technoxander-demo-form-state h2,
    #technoxander-demo-popup
    .technoxander-demo-success-state h2 {
        margin-right: 40px !important;

        font-size: 26px !important;
        line-height: 1.2 !important;
    }

    #technoxander-demo-popup
    .technoxander-demo-form-state > p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    #technoxander-demo-popup
    .technoxander-demo-field input,
    #technoxander-demo-popup
    .technoxander-demo-field select,
    #technoxander-demo-popup
    .technoxander-demo-field textarea {
        font-size: 16px !important;
    }
	#technoxander-demo-popup {
        padding: 16px !important;
    }

    #technoxander-demo-popup
    .technoxander-demo-popup-container {
        max-height: calc(100vh - 32px) !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    #technoxander-demo-popup
    .technoxander-demo-popup-content {
        padding: 30px 18px 22px !important;
    }

    #technoxander-demo-popup
    .technoxander-demo-form-state h2,
    #technoxander-demo-popup
    .technoxander-demo-success-state h2 {
        font-size: 24px !important;
    }

}
body.technoxander-demo-popup-open {
    overflow: hidden;
}

/* =========================================================
   BOOK A DEMO
   VALIDATION UI
   ========================================================= */


/* =========================================================
   INVALID FIELD
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-field
.is-invalid {
    border-color: #dc3545 !important;
    background-color: #fff8f8 !important;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.08) !important;
}


/* =========================================================
   INVALID FIELD - FOCUS
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-field
.is-invalid:focus {
    border-color: #dc3545 !important;
    background-color: #ffffff !important;
    box-shadow:
        0 0 0 2px rgba(220, 53, 69, 0.12) !important;
    outline: none !important;
}


/* =========================================================
   FIELD ERROR
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-field-error {
    display: none;
    margin-top: 5px !important;
    color: #dc3545 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}


/* =========================================================
   SHOW ERROR ONLY WHEN MESSAGE EXISTS
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-field-error:not(:empty) {
    display: block;
}


/* =========================================================
   ERROR INDICATOR
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-field-error:not(:empty)::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    margin-right: 5px;
    border: 1px solid #dc3545;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    vertical-align: -1px;
}


/* =========================================================
   GENERAL VALIDATION MESSAGE
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-form-status {
    display: none;
    margin: 4px 0 12px !important;
    padding: 9px 12px !important;
    border: 1px solid rgba(220, 53, 69, 0.20) !important;
    border-radius: 5px !important;
    background: #fff5f5 !important;
    color: #b4232f !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}


/* =========================================================
   SHOW GENERAL VALIDATION MESSAGE
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-form-status:not(:empty) {
    display: block;
}


/* =========================================================
   GENERAL MESSAGE INDICATOR
   ========================================================= */

#technoxander-demo-popup
.technoxander-demo-form-status:not(:empty)::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-right: 7px;
    border: 1px solid #dc3545;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    vertical-align: -2px;
}


/* =========================================================
   INVALID SELECT
   ========================================================= */

#technoxander-demo-popup
select.is-invalid {
    color: #333 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #technoxander-demo-popup
    .technoxander-demo-field-error {
        font-size: 11px !important;
    }

    #technoxander-demo-popup
    .technoxander-demo-form-status {
        font-size: 11px !important;
    }

}