/* COMMON STYLES */
:root,
html {
font-size: 10px;
}
* {
padding: 0;
margin: 0;
outline: 0;}
html,
body {
height: 100%;
width: 100%;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #EDF1F4;
font-size: 15px;
}
ul,
ol {
list-style-position: inside;
}
textarea,
input[type='text'],
input[type='button'],
input[type='submit'],
input[type='date'] {
-webkit-appearance: none;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}.link{
color: #1980D8;
cursor: pointer;
}
.cP{
cursor: pointer;
}.flex-center-v{
display: flex;
align-items: center;
}
/* COMMON STYLES */
.wf-form-component {
padding: 30px 40px 60px;
}
.wf-form-paid {
padding-bottom: 45px;
}
.wf-parent {
padding: 30px 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;
background-color: #fff;
color: #222;
box-shadow: 0px 0px 2px 0 #00000033;
}
.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;
}
.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;
}
.wf-row-with-supplementary{
margin-bottom: 10px;
}
.wf-label {
padding: 7px 0;
word-break: break-word;
text-align:left; /* add*/
}
.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; /* multipicklist search */
}.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;
box-shadow: 0 0 1px 1px #F4A2A2;
}
.wf-field-mandatory .wf-field-inner::before {
content: '';
position: absolute;
inset-inline-start: 0px;
background-color: #ff6a6a;
width: 3px;
height: 100%;
border-start-start-radius: 4px;
border-end-start-radius: 4px;
z-index: 2;
top: 0;
bottom: 0;
}
.wf-field-mandatory .wf-field-inner.no-results-elem::before{
height: 98%;
}
.wf-field-input,
.wf-field-dropdown {
width: 100%;
border: 1px solid #BDC8D3;
border-radius: 4px;
padding: 10px 15px;
min-height: 38px;
font-size: 15px;
font-family: inherit;
}
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%;
background-color: #fff;
min-width: 70px;
}
input,
select {
background-color: #fff;
}
.wf-field-item {
min-height: 38px;
}
.wf-time-field-wrapper {
display: flex;
flex: 1;
}
.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: end;
}
.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-inline-end: 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;
inset-inline-end: 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-start-end-radius: 0;
border-end-end-radius: 0;
}
.wf-field-captcha-img-wrap{
border: 1px solid #BDC8D3;
border-radius: 4px;
border-inline-start: 0;
border-start-start-radius: 0;
border-end-start-radius: 0;
height: initial;
overflow: hidden;
min-width: 120px;
}
.wf-field-captcha-img{
height: 38px;
width: 100%;
}
.reload-img{
font-size: 23px;
color: #4B5569;
margin-inline-end: 5px;
}
.reload-captcha{
margin-inline-start: 10px;
user-select: none
}
.wf-btn {
padding: 10px 20px;
border-radius: 4px;
font-size: 15px;
cursor: pointer;
font-weight: bold;
font-family: inherit;
}
.wf-btn[data-ux-btn-type='default'] {
border-radius: 0;
}
.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;
margin-top: 40px;
align-items: center;
justify-content: flex-end;
flex: 1;
}
.wform-poweredby-container {
position: absolute;
inset-inline-start: 0;
bottom: 0;
border-start-end-radius: 10px;
border-end-start-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;
}
.dropdown-contents::after {
border-left: 0.4rem solid transparent;
border-right: 0.4rem solid transparent;
border-top: 0.4rem solid black;
top: 45%;
content: '';
position: absolute;
inset-inline-end: 1rem;
pointer-events: none;
}
/* RTL Css change start */
[dir=rtl] {
.multiple-fields-div{
.wf-field-item:not(.selected-options) {
border-radius: 4px 0px 0px 4px;
}
.wf-field-dropdown {
border-radius: 0px 4px 4px 0px;
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: 0px;
margin-right: 10px;
}
.wf-calendar-nav-icons.nav-icon-with-space {
margin-left: 10px;
}
.wf-form-component .wf-field-help-text {
text-align: right;
}
}
/* 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: 38px;
}
.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%;
margin-inline-start: 5px;
}
/* ==================== *** 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 (max-width: 1024px) {
.wf-wrapper {
max-width: 700px;
width: calc(100% - 40px);
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;
width: calc(100% - 40px);
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 {
width: calc(100% - 40px) !Important;
border: 0;
}
.wf-form-component {
padding: 20px;
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%;
}
}
/* ==================== *** Mediaquery ends *** ==================== */
input[type=date], input[type=email], input[type=number], input[type=password], input[type=tel], input[type=text], input[type=time], select, textarea {
margin-bottom: 0px;
}