/* COMMON STYLES */
.wf-form-component {
    padding: 0;
}

.wf-form-paid {
    padding-bottom: 45px;
}

.wf-form-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.wf-parent {
    padding: 0;
    height: 100%;
    box-sizing: border-box;
    overflow: auto;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.wf-wrapper * {
    box-sizing: border-box;
}

.wf-wrapper {
    width: 100%;
    max-width: 700px;
    border-radius: 10px;
    margin: auto;
    border: none;
}

.iframe-container {
    height: 100%;
    width: 100%;
    border: none;
    min-height: 365px;
}

.wf-logo {
    display: flex;
    margin-bottom: 30px;
    max-height: 60px;
    justify-content: center;
}

.wf-logo[data-ux-logo-size='lg'] {
    height: 60px;
}

.wf-logo[data-ux-logo-size='md'] {
    height: 50px;
}

.wf-logo[data-ux-logo-size='sm'] {
    height: 30px;
}

.wf-logo[data-ux-logo-pos='left'] {
    justify-content: left;
}

.wf-logo[data-ux-logo-pos='center'] {
    justify-content: center;
}

.wf-logo[data-ux-logo-pos='right'] {
    justify-content: right;
}

.wf-header {
    font-size: 22px;
    padding-bottom: 35px;
    font-weight: bold;
    word-break: break-word;
    display: none;
}

.wf-sec-wrap {
    margin-bottom: 40px;
}

.wf-sec-wrap:first-child .wf-sec-head {
    margin-top: 0;
}

.wf-sec-head {
    margin-bottom: 20px;
    margin-top: 35px;
}

.wf-sec-title {
    font-size: 18px;
    font-weight: bold;
    word-break: break-word;
}

.wf-sec-desc {
    margin: 0;
    margin-top: 5px;
    word-break: break-word;
}

.wf-row {
    margin-bottom: 20px;
    width: 100%;
}

.wf-row.full-row {
    width: 100%;
}

.wf-row-with-supplementary {
    margin-bottom: 10px;
}

.wf-label {
    font-size: 18px;
    word-break: break-word;
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
    color: var(--color-charcol-grey);
    font-family: var(--font-family-base), sans-serif;
}

.wf-field:not( .multiple-fields-div) {
    text-align: left;
    word-break: break-word;
    border: 0;
    position: relative;
}

.wf-field-inner {
    position: relative;
    display: flex;
    flex: 1;
}

.wf-field-input:focus {
    border: 1px solid #1980d8;
}

.wf-field-dropdown .wf-field-input:focus {
    border: none;
}

.wf-input-focus.wf-field::after {
    opacity: 1;
}

.wf-input-focus.wf-field::after,
.wf-field-error-active.wf-field .wf-field-error {
    display: block;
}

.wf-field-error-active.wf-field .wf-error-view-more {
    display: flex;
}

.wf-field-error-active.wf-field .wf-field-input:not(.date-input-container .wf-field-input), .wf-field-error-active.wf-field .wf-field-dropdown, .wf-field-error-active .date-input-container {
    border: 1px solid #FD6B6D;
}

.wf-field-mandatory .wf-field-inner::before {
    content: '';
    position: absolute;
    left: 0;
    background-color: #ff6a6a;
    width: 3px;
    height: 100%;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    z-index: 2;
    top: 0;
    bottom: 0;
    display: none;
}

.wf-field-mandatory .wf-field-inner.no-results-elem::before {
    height: 98%;
}

.wf-field-input,
.wf-field-dropdown {
    width: 100%;
    border-radius: 12px;
    padding: 10px 15px;
    min-height: 56px;
    font-size: 16px;
    font-family: var(--font-family-base), sans-serif;
    color: var(--color-primary);
    background-color: transparent;
    font-weight: 500;
    border: 1px solid var(--color-blue-300);
}

select:not([data-wform-field='select-multiple']) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    background-image: url(\"data:image/svg+xml;utf8,<svg fill= 'black' height= '34' viewBox= '0 0 24 24' width= '24' xmlns= 'http://www.w3.org/2000/svg' ><path d= 'M7 10l5 5 5-5z' /><path d= 'M0 0h24v24H0z' fill= 'none' /></svg>\");
    background-repeat: no-repeat;
    background-position-x: 99%;
    min-width: 70px;
}

input,
select {
    background-color: #fff;
}

.wf-field-item {
    min-height: 56px;
}

.wf-time-field-wrapper {
    display: flex;
    flex: 1;
}

.icon-text-dropdown {
    font-size: 14px;
}

.icon-chevron-right {
    margin-left: 5px;
}

.wf-time-field-wrapper select {
    margin-left: 10px;
}

.wf-form-component .wf-field-error,
.wf-form-component .wf-field-help-text {
    text-align: left;
}

.wf-form-component .wf-field-error {
    /*text-align: right;*/
}

.wf-field-error {
    color: #FF5050;
    font-size: 12px;
    margin-top: 4px;
    display: none;
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.wf-field-error-long {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-error-view-more {
    font-size: 12px;
    display: none;
    white-space: nowrap;
    align-items: center;
    color: #1880d8;
    margin-top: 4px;

    &:hover {
        text-decoration: underline;
        cursor: pointer;
    }
}

.wf-error-parent-ele {
    display: flex;
    justify-content: start;
    width: 100%;
}

.wf-field-help-text {
    color: #515159;
    font-size: 12px;
    margin-top: 5px;
}

.wf-field-help-text + .wf-error-parent-ele .wf-field-error,
.wf-field-help-text + .wf-error-parent-ele .wf-error-view-more {
    margin: 0;
}

.wf-field-help-text-link {
    text-decoration: none;
}

.wf-field-checkbox {
    cursor: pointer;
    border-radius: 3px;
    min-width: 14px;
    min-height: 20px;
    box-sizing: initial;
    accent-color: #1980d8;
    margin-right: 10px;
    margin-bottom: auto;
}

.wf-field-dropdown-date {
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
}

.wf-field-dropdown-date {
    border: 1px solid #BDC8D3;
}

.wf-field-dropdown-date:hover {
    border: 1px solid #65C199;
}

.wform-field-item-upload-input {
    min-height: 5rem;
    background-color: #FBFCFD;
    border: 1px dashed #bdc8d3;
    line-height: 2.1;
    cursor: pointer;
}

.wform-field-item-upload-input:focus {
    border: 1px dashed #bdc8d3;
}

.wform-file-upload-input-label {
    background-color: #fff;
    background-image: linear-gradient(to top, #F5F8FA, #ffffff);
    color: #212129;
    border-color: #d3dbe3;
    border: 1px solid #d3dbe3;
    border-radius: 4px;
    padding: 0.7rem 2rem;
    font-size: 1.4rem;
    right: 1rem;
    transform: translateY(-50%);
    top: 50%;
    position: absolute;
}

input[type='file']::file-selector-button, input[type='file']::-webkit-file-upload-button {
    opacity: 0;
    width: 0;
    height: 28px;
}

.wf-row[data-ux-field-appearance='captcha'] .wf-field {
    display: flex;
    align-items: center;
}

.wform-field-item-captcha-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.wf-field-captcha-img-wrap {
    border: 1px solid var(--color-blue-300);
    border-radius: 16px;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: initial;
    overflow: hidden;
    min-width: 120px;
}

.wf-field-captcha-img {
    height: 56px;
    width: 100%;
}

.reload-img {
    font-size: 23px;
    color: #4B5569;
    margin-right: 5px;
}

.reload-captcha {
    margin-left: 10px;
    user-select: none
}

.wf-btn {
    position: relative;
}

.wf-btn[data-ux-btn-type='default'] {
    font-size: 16px;
    padding: 10px 30px;
    border-radius: 40px;
    font-weight: 500;
    cursor: pointer;
    color: var(--color-charcol-grey);
    border: 1px solid var(--color-charcol-grey);
    font-family: var(--font-family-base), sans-serif;
    background-color: transparent;
    transition: all var(--speed-default) ease-in-out;
    position: relative;
}

.wf-btn[data-ux-btn-type='default']:hover {
    color: var(--color-white);
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
}

.wf-btn[data-ux-btn-type='primary'] {
    border-radius: 4px;
}

.wf-btn[data-ux-btn-type='secondary'] {
    border-radius: 20px;
}

.wform-btn-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
}

.wform-poweredby-container {
    position: absolute;
    left: 0;
    bottom: 0;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: #23384F;
    font-size: 13px;
    padding: 6px 8px;
    font-family: sans-serif;
    display: flex;
    align-items: center;
}

.wf-text-area-input {
    resize: vertical;
    height: 100px;
    min-height: 100px;
    max-height: 200px;
}

.wf-field-select:after,
.dropdown-contents::after {
    /*border-left: 0.4rem solid transparent;*/
    /*border-right: 0.4rem solid transparent;*/
    /*border-top: 0.4rem solid black;*/
    top: 22px;
    content: '';
    position: absolute;
    right: 1rem;
    pointer-events: none;
    width: 18px;
    height: 10px;
    background-image: url('../images/select-arrow.png');
    background-repeat: no-repeat;
}

.dropdown.flex-center-v:after {
    display: none;
}


/* ==================== * MultiPicklist Styles * ==================== */
.multiselect.wf-field-dropdown {
    padding: 0;
    cursor: text;
    position: relative;
}

.multiselect.dropbox-active {
    border-color: #0D0D0D;
    border-radius: 12px 12px 0 0;
}

.multiselect.dropbox-active.dropdownTop:not(.ux-pick-mixed .multiselect.dropbox-active) {
    border-radius: 0 0 4px 4px;

    .dropdown-input {
        /*min-height: 36px;*/
        border-radius: 0 0 4px 4px;
    }
}

.multiselect.no-results-elem {
    border-radius: 4px;
}

.selected-options.selected-options-field {
    display: none;
}

.selected-options {
    max-height: 150px;
    overflow: auto;
    padding: 3px 5px 7px 5px;
    border-radius: 4px 4px 0 0;
    border-bottom: 0;
    min-height: 38px;
    height: 38px;
    transition: 0.3s all;
    scroll-behavior: smooth;
}

.selected-options.hide-opt-list {
    min-height: 0;
    height: 0;
    padding: 0;
}

.selected-options.set-opt-list {
    height: auto;
}

.selected-options.drp-dwn-no-val {
    border-right: unset !important;
}

.dropdown-input.drop-box-closed {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.dropdown-input.drop-box-active {
    border-top-right-radius: 0 !important;
    border-radius: 4px;
}

.dN {
    display: none !important;
}

.dropdown {
    position: relative;
    width: 100%;
    /*height: 36px;*/
    transition: 0.3s all ease-in-out;
}

.dropdown.hide-dropdown {
    height: 0;
}

.dropdown-input {
    width: 100%;
    border: none;
    outline: none;
    height: 30px;
    padding: 5px;
    border-radius: 4px 4px 0 0;
    padding-left: 14px;
}

.dropdown-input::placeholder {
    color: var(	--color-medium);
    font-size: 16px;
    font-weight: 500;
}

.dropdown-menu {
    position: absolute;
    display: none;
    background-color: #FFF4D9;
    border: 1px solid #0D0D0D;
    border-radius: 0 0 12px 12px;
    max-height: 300px;
    overflow-y: auto;
    width: calc(100% + 2px);
    left: -1px;
    z-index: 3;
    top: 37px;
    transition: 0.3s all;
}

.dropdown-menu.hide-the-inp {
    top: 0;
}

.dropdown.open .dropdown-menu {
    display: block;
}

.dropdown-menu.dropdown-focus {
    border-color: #0D0D0D;
    border-top: 1px solid #0D0D0D;
    padding-left: 0;
}

.dropdown-menu.dropdown-focus.dropdownTop:not(.ux-pick-mixed .dropdown-menu.dropdown-focus) {
    border-top: 1px solid #1980d8;
    border-radius: 5px 5px 0 0;
}

.multiselect.dropbox-active .dropdown-input {
    border-top: 0;
    border-bottom: 0;
    padding-top: 0;
    border-left-color: transparent;
}

.dropdown-list-option li {
    position: relative;
}

.dropdown-list-option .option {
    position: relative;
}
.dropdown-list-option .option:after {
    content:'';
    position: absolute;
    top: 13px;
    right: 14px;
    width: 22px;
    height: 22px;
    border-radius: 2px;
    border: solid 2px #0D0D0D;
}

.dropdown-list-option .option.no-results:after {
    display: none;
}

.multi-tag {
    padding: 2px 5px 3px 10px;
    border-radius: 15px;
    margin: 5px 5px 0 2px;
    display: inline-flex;
    max-width: 96%;
    background-color: #CEEBFF;
}

.tag-data-val {
    cursor: default;
    max-width: 550px;
}

.no-results {
    cursor: default !important;
    text-align: center;
    color: #919191;
    font-size: 14px;
}

.no-results:hover {
    background-color: unset !important;
}

.opt-hide {
    display: none;
}

.opt-show {
    display: block;
}

.tag-close-btn {
    margin-left: 3px;
    padding: 0 4px 0;
    border-radius: 50%;
    opacity: 0.5;
    font-weight: bold;
    cursor: pointer;
}

.multi-tag:hover .tag-close-btn {
    opacity: 1;
}

.option {
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid #FFF4D9;
}

.option:hover {
    background-color: #F2E1B9;
}

.input-not-active {
    display: none;
}

.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* ==================== * MultiPicklist Styles * ==================== */
.ux-pick-mixed {
    .dropdown-contents {
        padding: 3px 15px;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .dropdown-menu {
        width: max-content;
        max-width: 30rem;
        top: 42px;
        border: 1px solid #0D0D0D;
        border-radius: 4px;
        box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);

        .option[data-selected=true] {
            background-color: #F2E1B9;
            font-weight: 600;
        }
    }

    .wf-field-dropdown.dropbox-active::after {
        content: '';
        border: 2px solid #1980d8;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        box-sizing: border-box;
        z-index: 1;
    }

    .wf-field-item:not(.selected-options) {
        min-height: 56px;
        border-left: none;
    }
}

.wf-form-component:not([data-ux-form-alignment='top']) .multiple-fields-div {
    width: 70%;
}

.icon-with-text-dropdown {
    .dropdown > span {
        margin-right: 1px;
    }

    .icon-text-dropdown {
        display: flex;
        align-items: center;

        > span:first-child {
            font-size: 18px;
        }
    }

    .option {
        padding: 14px;
    }
}

.dropdown-with-search {
    .dropdown.open .dropdown-menu {
        display: flex;
        flex-direction: column;
    }

    .dropdown-items-wrapper {
        flex-grow: 1;
        overflow-y: auto;
    }
}

.multiple-fields-div {
    display: flex;
    flex-direction: column;

    &.flex-1-5 {
        .field-1 {
            flex: 1;
        }

        .field-2 {
            flex: 5;
        }
    }

    .wf-field-dropdown {
        border-radius: 12px 0 0 12px;
    }

    .wf-field-item:not(.selected-options) {
        border-radius: 0 12px 12px 0;
    }

    &.wf-field {
        word-break: unset;
    }
}

.dropdown-menu {
    .dropdown-search-input {
        padding: 5px 10px;
        width: 92%;
        margin: 10px;
        border-radius: 4px;
        min-height: 50px;
        border: 1px solid #0D0D0D;
        background-color: #fff;
    }

    .dropdown-search-input:hover {
        border: 1px solid #0D0D0D;
    }

    .dropdown-search-input:focus {
        border: 1px solid #0D0D0D;
    }
}

/* RTL Css change start */
html[dir=rtl] {
    .multiple-fields-div {
        .wf-field-item:not(.selected-options) {
            border-radius: 4px 0 0 4px;
        }

        .wf-field-dropdown {
            border-radius: 0 4px 4px 0;
            border-left: 0;
            border-right: 1px solid #BDC8D3;
        }
    }

    .ux-pick-mixed {
        .dropdown-menu {
            right: -1px;
        }
    }

    .wf-form-component[data-ux-form-alignment='left'] .wf-label {
        padding-left: 2rem;
        padding-right: 0;
    }

    .wf-time-field-wrapper select {
        margin-left: 0;
        margin-right: 10px;
    }

    .wf-calendar-nav-icons.nav-icon-with-space {
        margin-left: 10px;
    }
}

/* RTL Css change end *//* ==================== *** Form Alignment *** ==================== */
.wf-form-component:not([data-ux-form-alignment='top']) .wf-row {
    display: flex;
}

.wf-form-component:not([data-ux-form-alignment='top']) .wf-label {
    word-break: break-word;
    width: 30%;
    padding: 1.2rem 2rem 0;
}

.wf-form-component[data-ux-form-alignment='left'] .wf-label {
    text-align: left;
    padding-left: 0;
}

.wf-form-component[data-ux-form-alignment='right'] .wf-label {
    text-align: right;
}

.wf-form-component[data-ux-form-alignment='center'] .wf-label {
    text-align: center;
}

.wform-btn-wrap[data-ux-pos='left'] {
    justify-content: flex-start;
}

.wform-btn-wrap[data-ux-pos='center'] {
    justify-content: center;
}

.wform-btn-wrap[data-ux-pos='right'] {
    justify-content: flex-end;
}

.wf-form-component:not([data-ux-form-alignment='top']) .wf-field {
    width: 70%;
}

.wf-form-component[data-ux-form-alignment='top'] .wf-label {
    padding-top: 0;
}

.wf-form-component[data-ux-form-alignment='top'] .reload-captcha {
    text-align: right;
}

.wf-row[data-ux-field-appearance='captcha'] .wf-field-inner {
    height: 56px;
}

.wf-row[data-ux-field-appearance='captcha'] .wf-field.wf-field-error-active {
    flex-wrap: wrap;
}

.wf-row[data-ux-field-appearance='captcha'] .wf-field-error {
    flex-basis: 100%;
    width: 100%;
}

/* ==================== *** Form Alignment ends *** ==================== */

/* ==================== *** css animations *** ==================== */
@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }
    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* ==================== *** css animations ends *** ==================== */

/* ==================== *** Mediaquery *** ==================== */
@media screen and (min-width: 1025px) {
    .wf-row {
        width: 48%;
    }

}

@media screen and (max-width: 1024px) {
    .wf-wrapper {
        max-width: 700px;
        width: 100%;
        border: 0;
    }

    .wf-field input[type=text],
    .wf-field select,
    .wf-field textarea {
        width: 100% !important;
    }

    .wf-label:empty {
        display: none;
    }

    .wf-field-checkbox {
        min-width: 18px;
        min-height: 18px;
    }
}

@media screen and (max-width: 768px) {
    .wf-wrapper {
        max-width: 700px;
        border: 0;
    }

    .wf-field input[type=text],
    .wf-field select,
    .wf-field textarea {
        width: 100% !important;
    }

    .wf-label:empty {
        display: none;
    }

    .wf-form-component[data-ux-form-alignment='top'] .wform-btn-wrap {
        justify-content: flex-start;
    }
}

@media screen and (max-width: 590px) {
    .wf-parent {
        padding: 20px 0;
    }

    .wf-wrapper {
        border: 0;
    }

    .wf-form-component {
        padding: 0;
        padding-bottom: 60px;
    }

    .wf-field input[type=text],
    .wf-field select,
    .wf-field textarea {
        width: 100% !important;
    }

    .wf-label:empty {
        display: none;
    }

    .wf-row[data-ux-field-appearance='date-time'] .wf-field-inner {
        flex-direction: column;
    }

    .wf-row[data-ux-field-appearance='date-time'] .wf-time-field-wrapper {
        margin-top: 10px;
    }

    .wf-row[data-ux-field-appearance='date-time'] .wf-field-item:first-child {
        margin-left: 0;
    }

    .wf-row[data-ux-field-appearance='date-time'] .wf-field-item {
        flex: 1;
    }

    .wf-row[data-ux-field-appearance='captcha'] .wf-field {
        flex-direction: column;
    }

    .wf-row[data-ux-field-appearance='captcha'] .reload-captcha {
        margin-left: auto;
    }

    .wf-row[data-ux-field-appearance='captcha'] .wf-field-inner {
        width: 100%;
    }
}