/* **********************************************************************
        Full width style add class name  "ge-webform" 
        2 column style add class name  "ge-webform col-2-webform" 

        Background style (default style is transparent)
        "ge-webform light-bg"(light background)
        "ge-webform dark-bg"(dark background)

        Button style (default style is center)
        "ge-webform btn--right"(right align)
        "ge-webform btn--left"(Left align)


        "form-group-w-50" element level class to apply 50% width

        "text-transform-reset" and "font-regular" element level class to apply change font style
 
********************************************************************** */

/* ***********************************
            Full width style
*********************************** */

.ge-webform {
    background-color: transparent;
    display: flex;
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    flex-wrap: wrap;
    flex-direction: column;
}

.ge-webform form {
    width: 88.2978723404%;
    display: flex;
    flex-wrap: wrap;
    margin-right: auto;
    margin-left: auto;
    padding: 40px 10px;
}

.ge-webform .field__label {
    display: none;
}
/* Common width Style */
.ge-webform form .form-group,
.ge-webform fieldset,
.ge-webform .js-webform-states-hidden.js-form-wrapper,
.ge-webform .form-group .form-textarea,
.ge-webform .form-group.custom_select,
.ge-webform .js-webform-states-hidden.js-form-wrapper,
.ge-webform .js-form-type-checkbox,
.ge-webform small.description.form-text.text-muted,
.ge-webform .form-actions {
    width: 97%;
    flex: 0 0 97%;
    margin-right: 3%;
}
.ge-webform small.description.form-text.text-muted,
.ge-webform .js-webform-states-hidden.js-form-wrapper .form-group.js-form-type-webform-markup {
    width: 100%;
    flex: 0 0 100%;
}

.ge-webform form .form-group.form-group-w-50,
.ge-webform fieldset.form-group-w-50,
.ge-webform .js-form-type-checkbox.form-group-w-50,
.ge-webform .js-webform-states-hidden.js-form-wrapper.form-group-w-50 {
    width: 47%;
    flex: 0 0 47%;
    margin-right: 3%;
}

.ge-webform .form-group input.form-control,
.ge-webform .form-group .form-textarea,
.ge-webform .form-group.custom_select {
    width: 100% !important;
}
.ge-webform .form-group.custom_select {
    margin-bottom: 0;
}

/* Common width Style end */

.ge-webform .js-form-type-checkbox.form-group-w-50 {
    align-content: baseline;
}

.ge-webform form .form-group {
    margin-bottom: 2rem;
}

.ge-webform .form-group label,
.ge-webform fieldset.card legend,
.ge-webform .form-check-label,
.ge-webform .js-form-type-webform-markup p {
    text-transform: uppercase;
    font-family: var(--ge-font-semibold);
    font-size: 14px;
    line-height: 1.14;
    letter-spacing: 2px;
    color: var(--ge-white);
    display: block;
    width: 100%;
    margin-bottom: 1.125rem !important;
}
.ge-webform .form-item .js-form-required::after {
    color: var(--ge-white);
    margin-left: 7px;
}
.ge-webform .form-group h6 {
    display: block;
    width: 100%;
}
.ge-webform .js-form-type-webform-markup {
    flex: 0 0 100%;
    max-width: 100%;
}
.ge-webform .js-form-type-webform-markup p {
    margin-bottom: 0 !important;
}
.ge-webform .js-form-type-webform-markup p a {
    padding: 0;
}
.ge-webform .form-group input.form-control,
.ge-webform .form-group select.form-select,
.ge-webform .form-group.custom_select select.form-select {
    height: 52px;
    /* border-radius: 29.5px; */
    border-radius: 10px;
    /* border: none !important; */
    border: 2px solid transparent !important;
    outline: none;
    padding-left: 32px;
    color: var(--ge-white);
    font-size: 18px;
    line-height: 24px;
    background-color: rgba(255, 255, 255, 0.05);
    transition: all 0.5s ease;
}
.ge-webform .form-group select.form-select option {
    font-size: 18px;
    line-height: 24px;
    color: var(--ge-atmosphere-blue);
}

.ge-webform .form-group .form-textarea {
    border: none;
    outline: none;
    padding-left: 32px;
    color: var(--ge-white);
    font-size: 18px;
    line-height: 24px;
    background-color: rgba(var(--ge-rgb-white), 0.05);
    transition: all 0.5s ease;
}

/* .ge-webform .form-group input.form-control:hover, */
.ge-webform .form-group input.form-control:focus,
/* .ge-webform .form-group select.form-select:hover, */
.ge-webform .form-group select.form-select:focus,
/* .ge-webform .form-group .form-textarea:hover, */
.ge-webform .form-group .form-textarea:focus {
    border: 2px solid var(--ge-sky-blue) !important;
    box-shadow: none;
}

.ge-webform .form-group.custom_select:before {
    border: 1px solid var(--ge-white);
}

.ge-webform .form-group.custom_select:after {
    border-top: 5px solid var(--ge-white);
}

.ge-webform .form-actions input.button,
.ge-webform .form-actions input.button.btn-primary {
    font-family: var(--ge-font-semibold);
    font-size: 14px;
    line-height: 1.14;
    letter-spacing: 2px;
    height: 52px;
    border-radius: 26px;
    padding: 0 2em;
    text-transform: uppercase;
    color: var(--ge-button-primary-light-text) !important;
    border: 2px solid var(--ge-button-primary-light-border);
    background-color: var(--ge-button-primary-light);
}
.ge-webform .form-actions input.button:hover,
.ge-webform .form-actions input.button.btn-primary:hover {
    color: var(--ge-button-primary-light-text-hover) !important;
    border: 2px solid var(--ge-button-primary-light-border-hover);
    background-color: var(--ge-button-primary-light-hover);
}

.ge-webform fieldset {
    background-color: transparent;
    border: 0;
    margin-bottom: 2rem !important;
}

.ge-webform fieldset .card-header {
    background-color: transparent;
    border: 0;
    padding: 0;
}

.ge-webform fieldset .card-body.fieldset-wrapper {
    padding: 0;
}

.ge-webform fieldset .js-webform-radios {
    display: flex;
    flex-wrap: wrap;
}
.ge-webform .js-webform-states-hidden.js-form-wrapper {
    display: flex;
    flex-direction: unset;
}
.ge-webform .js-webform-states-hidden.js-form-wrapper .form-group.js-form-type-webform-markup {
    display: flex;
    margin-right: 0;
    flex-direction: unset;
}
.ge-webform fieldset .js-form-type-radio {
    display: flex;
    align-items: center;
    padding-left: 0;
    margin-right: 50px;
    min-width: 150px;
    margin-bottom: 12px;
}

.ge-webform fieldset .form-check-input {
    width: 20px;
    height: 20px;
    position: relative;
    margin: 0 10px 0 0;
}

.ge-webform .form-check-label,
.ge-webform .js-form-type-checkbox .form-check-label {
    font-family: var(--ge-font-regular);
    margin: 0 !important;
}

.ge-webform fieldset .js-webform-radios h6 {
    margin: 0;
}

.ge-webform .form-group input.form-range {
    padding-left: 0;
    padding-right: 0;
}

.ge-webform .js-form-type-checkbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    margin-bottom: 2rem;
}
.ge-webform .js-form-type-checkbox .form-checkbox {
    width: 20px;
    height: 20px;
    display: block;
    margin: 0 10px 0 0;
    position: relative;
}
.ge-webform .js-form-type-checkbox h6 {
    display: block;
    width: calc(100% - 30px);
    margin: 0;
}

.ge-webform .js-form-type-webform-markup p {
    text-transform: none;
    font-family: var(--ge-font-regular);
    display: block;
}

.ge-webform small.description.form-text.text-muted {
    display: flex;
}

.ge-webform .webform-element-description {
    font-size: 14px;
    line-height: 1.14;
    letter-spacing: 2px;
    color: var(--ge-white);
    margin-top: 15px;
}

.ge-webform .form-actions {
    display: flex;
    justify-content: center;
}

.ge-webform.btn--left .form-actions {
    justify-content: left;
}

.ge-webform.btn--right .form-actions {
    justify-content: right;
    padding-right: 5%;
}

/* ***********************************
            Light background style
*********************************** */

.ge-webform.light-bg {
    background-color: var(--ge-tungsten);
}

.ge-webform.light-bg .form-group h1,
.ge-webform.light-bg .form-group h2,
.ge-webform.light-bg .form-group h3,
.ge-webform.light-bg .form-group h4,
.ge-webform.light-bg .form-group h5,
.ge-webform.light-bg .form-group h6,
.ge-webform.light-bg .form-group label,
.ge-webform.light-bg fieldset.card legend,
.ge-webform.light-bg .form-check-label,
.ge-webform.light-bg .js-form-type-webform-markup p,
.ge-webform.light-bg .webform-element-description,
.ge-webform.light-bg .form-item .js-form-required::after {
    color: var(--ge-primary-default-text);
}

/* .ge-webform.light-bg .form-group input.form-control:hover, */
.ge-webform.light-bg .form-group input.form-control:focus,
/* .ge-webform.light-bg .form-group select.form-select:hover, */
.ge-webform.light-bg .form-group select.form-select:focus,
/* .ge-webform.light-bg .form-group .form-textarea:hover, */
.ge-webform.light-bg .form-group .form-textarea:focus {
    border: 2px solid var(--ge-sky-blue) !important;
}

.ge-webform.light-bg .form-group input.form-control,
.ge-webform.light-bg .form-group select.form-select,
.ge-webform.light-bg .form-group .form-textarea {
    color: var(--ge-primary-default-text);
    background-color: var(--ge-white);
}

.ge-webform.light-bg .form-actions input.button {
    color: var(--ge-white);
}
.ge-webform.light-bg .form-group.custom_select:before {
    border: 1px solid var(--ge-primary-default-text);
}

.ge-webform.light-bg .form-group.custom_select:after {
    border-top: 5px solid var(--ge-primary-default-text);
}

/* ***********************************
            Dark background style
*********************************** */

.ge-webform.dark-bg {
    background-color: var(--ge-primary-dark);
}

.ge-webform.dark-bg .form-group h1,
.ge-webform.dark-bg .form-group h2,
.ge-webform.dark-bg .form-group h3,
.ge-webform.dark-bg .form-group h4,
.ge-webform.dark-bg .form-group h5,
.ge-webform.dark-bg .form-group h6,
.ge-webform.dark-bg label,
.ge-webform.dark-bg .form-group label,
.ge-webform.dark-bg fieldset.card legend,
.ge-webform.dark-bg .form-check-label,
.ge-webform.dark-bg .js-form-type-webform-markup p,
.ge-webform.dark-bg .webform-element-description,
.ge-webform.dark-bg .form-actions input.button,
.ge-webform.dark-bg .form-item .js-form-required::after,
.ge-webform.dark-bg .webform-section-title.js-form-required.form-required {
    color: var(--ge-white);
}

.ge-webform.dark-bg .form-group input.form-control,
.ge-webform.dark-bg .form-group select.form-select,
.ge-webform.dark-bg .form-group .form-textarea {
    color: var(--ge-white);
    background-color: rgba(255, 255, 255, 0.05);
}
/* .ge-webform.dark-bg .form-group input.form-control:hover, */
.ge-webform.dark-bg .form-group input.form-control:focus,
/* .ge-webform.dark-bg .form-group select.form-select:hover, */
.ge-webform.dark-bg .form-group select.form-select:focus,
/* .ge-webform.dark-bg .form-group .form-textarea:hover, */
.ge-webform.dark-bg .form-group .form-textarea:focus {
    border: solid 2px rgba(255, 255, 255, 0.4) !important;
}

.ge-webform.dark-bg .form-actions input.button {
    color: var(--ge-white);
}
.ge-webform.dark-bg .form-group.custom_select:before {
    border: 1px solid var(--ge-white);
}

.ge-webform.dark-bg .form-group.custom_select:after {
    border-top: 5px solid var(--ge-white);
}
.ge-webform.dark-bg .form-actions input.button,
.ge-webform.dark-bg .form-actions input.button.btn-primary {
    color: var(--ge-button-primary-text) !important;
    border: 2px solid var(--ge-button-primary-border);
    background-color: var(--ge-button-primary);
}
.ge-webform.dark-bg .form-actions input.button:hover,
.ge-webform.dark-bg .form-actions input.button.btn-primary:hover {
    color: var(--ge-button-primary-text-hover) !important;
    border: 2px solid var(--ge-button-primary-border-hover);
    background-color: var(--ge-button-primary-hover);
}
.ge-webform.dark-bg .webform-section-title{
    color: var(--ge-white);
}

/* ***********************************
            2 column style 
*********************************** */

.ge-webform.col-2-webform form .form-group,
.ge-webform.col-2-webform form fieldset,
.ge-webform.col-2-webform form .form-group.js-form-type-select {
    width: 47%;
    flex: 0 0 47%;
    margin-right: 3%;
}

.ge-webform.col-2-webform .form-group input.form-control,
.ge-webform.col-2-webform .form-group .form-textarea,
.ge-webform.col-2-webform .form-group.custom_select {
    width: 90% !important;
}

.ge-webform.col-2-webform form .form-group.js-form-type-select .form-group.custom_select,
.ge-webform.col-2-webform .form-group.js-form-type-webform-markup {
    flex: 0 0 100%;
    max-width: 100%;
}
.col-2-webform form .form-group.js-form-type-select h6 {
    flex: 0 0 100%;
    max-width: 100%;
}

.col-2-webform form .form-group .col-2-webform form fieldset.fieldgroup {
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-content: baseline;
}

.ge-webform.col-2-webform form .form-group,
.ge-webform.col-2-webform form fieldset,
.ge-webform.col-2-webform form .form-group.js-form-type-select {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.ge-webform.col-2-webform form .form-group.js-form-type-select,
.ge-webform.col-2-webform form .form-group.js-form-type-textarea {
    flex-direction: unset;
}
.ge-webform.col-2-webform form .form-group.js-form-type-textarea textarea {
    margin-right: 0;
    flex: 0 0 100%;
}
.ge-webform.col-2-webform form .form-group.js-form-type-select .form-group.custom_select {
    margin-right: 0;
    margin-bottom: 0;
    flex-direction: column;
}

.col-2-webform form .form-group.js-form-type-select h6 {
    display: flex;
}
.ge-webform.col-2-webform form {
    display: flex;
    flex-wrap: wrap;
}

.ge-webform form section.js-form-wrapper {
    display: flex;
    flex: 0 0 50%;
    max-width: 50%;
    flex-wrap: wrap;
    align-content: baseline;
}
.ge-webform form .webform-section-wrapper {
    max-width: 100%;
    flex: 0 0 95%;
}
.ge-webform form label.form--inline {
    max-width: 100%;
}
@media (min-width: 576px) {
    .ge-webform form {
        width: 88.2978723404%;
    }
}
@media (min-width: 768px) {
    .ge-webform form {
        width: 92.7083333333%;
    }
}
@media (min-width: 992px) {
    .ge-webform form {
        width: 81.25%;
    }
}

@media (max-width: 991px) {
    .ge-webform fieldset .js-form-type-radio {
        margin-right: 20px;
        min-width: 100px;
    }
}

@media (max-width: 767px) {
    .ge-webform form .form-group,
    .ge-webform fieldset,
    .ge-webform .js-webform-states-hidden.js-form-wrapper,
    .ge-webform .form-group .form-textarea,
    .ge-webform .form-group.custom_select,
    .ge-webform .js-webform-states-hidden.js-form-wrapper,
    .ge-webform .js-form-type-checkbox,
    .ge-webform small.description.form-text.text-muted,
    .ge-webform .form-actions,
    .ge-webform form .form-group.form-group-w-50,
    .ge-webform fieldset.form-group-w-50,
    .ge-webform .js-form-type-checkbox.form-group-w-50,
    .ge-webform .js-webform-states-hidden.js-form-wrapper.form-group-w-50,
    .ge-webform.col-2-webform form .form-group,
    .ge-webform.col-2-webform form fieldset,
    .ge-webform.col-2-webform form .form-group.js-form-type-select,
    .ge-webform .js-form-type-webform-markup p,
    .ge-webform.col-2-webform .js-form-type-webform-markup p,
    .ge-webform form section.js-form-wrapper {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .ge-webform form label.form--inline {
        width: 100% !important;
    }

    .ge-webform.col-2-webform form .form-group,
    .ge-webform.col-2-webform form fieldset {
        display: flex;
        flex-wrap: wrap;
        margin-right: 0;
        flex-direction: column;
    }
    .ge-webform.col-2-webform form .form-group.js-form-type-select {
        display: flex;
        flex-wrap: wrap;
        margin-right: 0;
        flex-direction: unset;
    }
    .ge-webform .js-form-type-webform-markup p,
    .ge-webform.col-2-webform .js-form-type-webform-markup p {
        display: block;
    }

    .ge-webform .form-group label,
    .ge-webform fieldset.card legend,
    .ge-webform .form-check-label {
        margin-bottom: 12px !important;
    }
    .ge-webform .js-form-type-webform-markup p {
        margin-bottom: 0 !important;
    }
    .ge-webform .form-check-label,
    .ge-webform .js-form-type-checkbox .form-check-label {
        margin: 0 !important;
    }
}

/* ***********************************
           Admin Editor style 
*********************************** */

.editor-styles-wrapper .ge-webform .webform__field-webform,
.gutenberg__editor .ge-webform .webform__field-webform {
    width: 81.25%;
    margin-right: auto;
    margin-left: auto;
    padding: 40px 10px;
}
.text-transform-reset {
    text-transform: none;
}
.font-regular {
    font-family: var(--ge-font-regular);
}