/* --------------------------------------------- */
/* Secure Custom Forms Frontend --------------------------------------------------------------------------------- */
/* --------------------------------------------- */

.flex-row {
    display: flex;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.scfw-hidden {
    display: none !important;
}

.scfw-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.scfw-antispam {
    display: none !important;
}

.scfw-field {
    margin: 0.75rem 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 49%;
}

.scfw-field input {
    width: 100%;
    height: 44px;
    padding: 0.5rem;
    margin: 0;
}

.scfw-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.scfw-container img {
    height: 100%;
    margin-right: 5px;
}

.scfw-img {
    position: relative;
}

.scfw-img:last-of-type {
    margin-right: 8px;
}

.scfw-img img {
    width: 60px;
}

.scfw-security-label-container .scfw-img {
    width: 20px;
    height: 20px;
    position: relative;
    top: 2px;
    margin-left: 5px;
    border-radius: 3px;
    cursor: pointer;
}

.scfw-security-label-container .scfw-img img {
    border-radius: 3px;
    border: solid 1px #999;
}

.scfw-security-label-container .scfw-img .scfw-overlay {
    opacity: 0.5;
}

.scfw-security-label-container {
    display: flex;
}

.scfw-submit {
    width: 100%;
    padding: 1rem;
    font-weight: 700;
    margin: auto;
    cursor: pointer;
    text-align: center;
    border-radius: 7px;
    box-shadow: 2px 2px 6px #555;
}

#scfw-submit-actual {
    display: none;
}

.scfw-submit span {
    font-size: 23px;
}

.scfw-field label {
    margin-bottom: 5px;
}

.scfw-img-container {
    flex-wrap: nowrap;
    max-height: 44px;
}

.scfw-message {
    width: 100%;
}

#visitor_message {
    padding: 10px;
    font-size: 16px;
}

.scfw-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    mix-blend-mode: color-burn;
}

.scfw-required span {
    font-size: 12px;
    position: relative;
    top: -5px;
    color: red;
}

#scfw_error_notice {
    display: none;
    color: red;
    border: 1px solid red;
    border-radius: 5px;
    background: #FFF7F7;
    padding: 1rem;
    margin-bottom: 2rem;
}

.scfw-required-error input, .scfw-required-error textarea {
    color: red;
    border: red 1.5px solid !important;
    border-radius: 5px;
    background: #FFF7F7;
}

.scfw-required-error label {
    color: red;
}

.scfw-required-error label abbr {
    font-weight: 900;
}

.scfw-response {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.85);
    justify-content: center;
    border: 2px solid white;
    color: white;
    text-align: center;
}

.scfw-response h3, .scfw-response p {
    max-width: 100% !important;
}

.scfw-form:has(.scfw-response) .scfw-container {
    padding: 20px;
}

.scfw-form:has(.scfw-response) .scfw-submit {
    margin: 20px auto 30px auto;
}

span.scfw-fe-labelend {
    position: static;
    font-size: unset;
    color: black;
}

.scfw-inputs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px;
}

.scfw-fullwidth {
    width: 100%;
}

.scfw-img-container input {
    min-width: 75px;
}

.scfw-response h3 {
    font-size: 26px;
}

.scfw-field select {
    height: 47px;
    border: 1px solid #777;
    border-radius: 3px;
}

.scfw-field input[type="checkbox"] {
    min-width: 25px;
    height: 20px;
    width: 25%;
    margin: auto auto auto 0 !important;
}

.scfw-fe-checkbox p {
    font-size: 16px;
    line-height: 1.5;
    padding-left: 10px;
}

.scfw-fe-uploadcontainer {
    padding: 5px;
    border: solid 1px #CCC;
    border-radius: 3px;
}

.scfw-fe-uploadbutton {
    padding: 3px 10px;
    border: 1px solid #ce3333;
    border-radius: 4px;
    color: #ce3333;
    width: 75px;
    cursor: pointer;
}

#visitor_uploadfiles {
    display: none;
}

.scfw-fe-uploadcontainer span {
    color: #555;
    margin: auto auto auto 10px;
    position: relative;
    top: -1px;
}

.scfw-dragover {
    border-color: #ce3333;
}

.scfw-fe-uploadlist:has(ul) {
    margin: 10px 0;
}

.scfw-fe-uploadlist ul {
    margin: 0;
}

.scfw-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.scfw-delete-btn {
    background: none;
    border: none;
    color: red;
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
    position: relative;
    top: -3px;
    padding-right: 10px;
}

.scfw-fe-uploadlist:has(.scfw-file-item) {
    margin-top: 5px;
    border-top: 1px solid #DDD;
    padding-top: 10px;
}

.scfw-file-name {
    font-size: 16px !important;
    color: #333 !important;
}

.flex-order-0 {
    order: 0;
} .flex-order-1 {
    order: 1;
} .flex-order-2 {
    order: 2;
} .flex-order-3 {
    order: 3;
} .flex-order-4 {
    order: 4;
} .flex-order-5 {
    order: 5;
} .flex-order-6 {
    order: 6;
} .flex-order-7 {
    order: 7;
} .flex-order-8 {
    order: 8;
} .flex-order-9 {
    order: 9;
} .flex-order-10 {
    order: 10;
} .flex-order-11 {
    order: 11;
} .flex-order-12 {
    order: 12;
} .flex-order-13 {
    order: 13;
} .flex-order-14 {
    order: 14;
} .flex-order-15 {
    order: 15;
} .flex-order-16 {
    order: 16;
} .flex-order-17 {
    order: 17;
} .flex-order-18 {
    order: 18;
} .flex-order-19 {
    order: 19;
} .flex-order-20 {
    order: 20;
} .flex-order-21 {
    order: 21;
} .flex-order-22 {
    order: 22;
} .flex-order-23 {
    order: 23;
} .flex-order-24 {
    order: 24;
} .flex-order-25 {
    order: 25;
} .flex-order-26 {
    order: 26;
} .flex-order-27 {
    order: 27;
} .flex-order-28 {
    order: 28;
} .flex-order-29 {
    order: 29;
} .flex-order-30 {
    order: 30;
} .flex-order-31 {
    order: 31;
} .flex-order-32 {
    order: 32;
} .flex-order-33 {
    order: 33;
} .flex-order-34 {
    order: 34;
} .flex-order-35 {
    order: 35;
} .flex-order-36 {
    order: 36;
} .flex-order-37 {
    order: 37;
} .flex-order-38 {
    order: 38;
} .flex-order-39 {
    order: 39;
} .flex-order-40 {
    order: 40;
} .flex-order-41 {
    order: 41;
} .flex-order-42 {
    order: 42;
} .flex-order-43 {
    order: 43;
} .flex-order-44 {
    order: 44;
} .flex-order-45 {
    order: 45;
} .flex-order-46 {
    order: 46;
} .flex-order-47 {
    order: 47;
} .flex-order-48 {
    order: 48;
} .flex-order-49 {
    order: 49;
} .flex-order-50 {
    order: 50;
} .flex-order-51 {
    order: 51;
} .flex-order-52 {
    order: 52;
} .flex-order-53 {
    order: 53;
} .flex-order-54 {
    order: 54;
} .flex-order-55 {
    order: 55;
} .flex-order-56 {
    order: 56;
} .flex-order-57 {
    order: 57;
} .flex-order-58 {
    order: 58;
} .flex-order-59 {
    order: 59;
} .flex-order-60 {
    order: 60;
} .flex-order-61 {
    order: 61;
} .flex-order-62 {
    order: 62;
} .flex-order-63 {
    order: 63;
} .flex-order-64 {
    order: 64;
} .flex-order-65 {
    order: 65;
} .flex-order-66 {
    order: 66;
} .flex-order-67 {
    order: 67;
} .flex-order-68 {
    order: 68;
} .flex-order-69 {
    order: 69;
} .flex-order-70 {
    order: 70;
} .flex-order-71 {
    order: 71;
} .flex-order-72 {
    order: 72;
} .flex-order-73 {
    order: 73;
} .flex-order-74 {
    order: 74;
} .flex-order-75 {
    order: 75;
} .flex-order-76 {
    order: 76;
} .flex-order-77 {
    order: 77;
} .flex-order-78 {
    order: 78;
} .flex-order-79 {
    order: 79;
} .flex-order-80 {
    order: 80;
} .flex-order-81 {
    order: 81;
} .flex-order-82 {
    order: 82;
} .flex-order-83 {
    order: 83;
} .flex-order-84 {
    order: 84;
} .flex-order-85 {
    order: 85;
} .flex-order-86 {
    order: 86;
} .flex-order-87 {
    order: 87;
} .flex-order-88 {
    order: 88;
} .flex-order-89 {
    order: 89;
} .flex-order-90 {
    order: 90;
} .flex-order-91 {
    order: 91;
} .flex-order-92 {
    order: 92;
} .flex-order-93 {
    order: 93;
} .flex-order-94 {
    order: 94;
} .flex-order-95 {
    order: 95;
} .flex-order-96 {
    order: 96;
} .flex-order-97 {
    order: 97;
} .flex-order-98 {
    order: 98;
} .flex-order-99 {
    order: 99;
}


@media only screen and (max-width: 768px) { 
    .scfw-field {
        width: 100%;
    }
}