@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* Global Settings */
*,
::after,
::before {
    box-sizing: border-box;
}

html {
    background: transparent;
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    color: #262d26; /* Light color for contrast */
    padding: 20px;
    background-color: #fafafa;
}

/* KPBS Branded Colors */
.primary-color {
    color: #2E0C44;
}
.secondary-color {
    color: #262d26;
}
.highlight-color {
    color: #3e5163;
}

/* Hide or show seperater */
.emf-section-separator {
    border-bottom: 1px solid #cecece;
}
/* Page wrapper */
#emf-container-outer {
    padding: 0;
    margin:0;
    max-width: 100%;
    margin: 0 20px;
}
#emf-container-outer #emf-container, #emf-container-outer #emf-form-shadows {
    max-width: 100% !important;
}

/* Form wrapper */
#emf-container {
    border-radius: 6px;
    border: none;
}

#emf-container-outer #emf-container, #emf-container-outer #emf-form-shadows {
    max-width: 1248px;
    width: 100%;
}

/* Form image shadow */
#emf-form-shadows {display: none;}

/* Form container */
#emf-container #emf-form {
    padding: 16px 16px 32px;
}

/* Form node element */
#emf-form > ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

/* Form logo container */
#emf-container #emf-logo {
    margin: 0;
    padding: 0;
    background: transparent;
    /* box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1); */
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

input[type="file"] {
    height: 60px;
}
/* Form Upload Button */
.emf-upload-button {
    position: relative;
    overflow: hidden;
    text-align: left;
    width: auto;
    border-radius: 6px;
    border:4px dotted #8798A4;
    background-color: #F2F5F7;
    padding: 20px 40px 20px 60px;  /* Space on the left for the icon */
    display: inline-block;
    cursor: pointer;             /* Hand pointer on hover */
    color: white;                /* Text color */
    font-size: 16px;             /* Text size */
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+U2hhcGU8L3RpdGxlPgogICAgPGcgaWQ9IkRPVEQtdjEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJBcnRib2FyZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM0MiwgLTI0MikiIGZpbGw9IiMwMDAwMDAiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxnIGlkPSJub3VuLXVwbG9hZC02MTY0NDA5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDIsIDI0MikiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE2LDExIEwxNiwxNiBDMTAuNjY2NjY2NywxNiA1LjMzMzMzMzMzLDE2IDAsMTYgTDAsMTEgTDAuODEwMTEwNTg1LDExIEwwLjgxMDExMDU4NSwxNS4yNTcwNyBMMTUuMTkwMDcsMTUuMjU3MDcgTDE1LjE5MDA3LDExIEwxNiwxMSBMMTYsMTEgWiBNNCw0LjE5ODY0MzMxIEw4LDAgTDEyLDQuMTk4NjQzMzEgTDExLjQzODkwMzYsNC43ODc2MDQyIEw4LjM5NjY0MDE0LDEuNTk0MjU5MzkgTDguMzk2NjQwMTQsMTEgTDcuNjAzMTgzMDIsMTEgTDcuNjAzMTgzMDIsMS41OTQyNTkzOSBMNC41NjEwOTYzNyw0Ljc4NzQxODU4IEw0LDQuMTk4NjQzMzEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==');  /* SVG icon */
    background-repeat: no-repeat;   /* Ensure the icon doesn't repeat */
    background-position: 20px center;  /* Position of the icon */
    transition: background-color 0.3s, transform 0.3s; /* Smooth transition */
}

.emf-upload-button:hover {
    background-color: rgb(121, 121, 121)  /* Darkens the button a bit on hover */
    transform: scale(1.05);       /* Makes the button slightly larger on hover */
}

/* Ensure you replace [encoded_svg] with the base64 encoded SVG. */


/* Form logo */
#emf-container #emf-logo a {
    background-image: url("https://files.emailmeform.com/2016175/elwCcjap/GoogleNewsstand-KPBS_FullColor.png");
    height: 100px;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Form title container */
#emf-container .emf-head-widget {
    padding: 0 0 8px;
    margin-bottom: 18px;;
    /* border-bottom: 1px solid #CED4DA; */
}

/* Form title */
#emf-form-title {
    font-size: 18px;;
    line-height: 1.33;
}

#emf-container ul li.emf-li-half-width {
    display: block;
    width: 100%;
    clear: none;
}

#emf-form-instruction {
    padding-left: 0;
    border: 0;
}

#emf-form-description {
    font-size: 16px;
    color: #262d26;
}

#emf-container li.emf-field-section_break .emf-section-text {
    margin-top: 8px;
    color: #262d26;
}

#emf-container ul li .emf-section-text {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 16px;
    color: #262d26;
}

#emf-container ul li label.emf-label-desc {
    margin: 0 0 5px;
    padding: 0;
    line-height: 1.4;
    font-size: 18px;
    font-weight: 700;
}

/* Form widget / component section */
#emf-container .emf-li-field {
    margin: 0 0 18px;;
    padding: 0;
    overflow-x: initial;
}

.emf-div-field > span[style^="width"] {
    padding: 0;
    width: 100% !important;
}

.emf-div-field > span[style^="width"] + span[style^="width"] {
    margin-top: 16px;
}

#emf-container li.emf-field-section_break div.emf-div-field-section h3 {
    margin-top: 16px;
    font-weight: 700;
    font-size: 22px;
    color: #000;
}

/* Field Grid */
#emf-container .emf-field-grid {
    border-color: #CED4DA;
    border: none;
    border-style: hidden;
    box-shadow: 0 0 0 1px #CED4DA;
    border-radius: 6px;
}

#emf-container .emf-field-grid th {
    padding: 12px 16px;
    border-color: #CED4DA;
    color: #262d26;
}

#emf-container .emf-field-grid td {
    padding: 10px 16px;
    border-color: #CED4DA;
}

#emf-container .emf-field-grid td:last-of-type {
    border-bottom: none;
}

#emf-container .emf-field-grid tbody tr:hover {
    background: none;
}

#emf-container .emf-field-grid td:hover {
    background: #CED4DA;
    transition: background-color .15s ease-in-out;
}

#emf-container .emf-field-grid input[type="radio"] {
    padding: 0;
    margin-right: 12px;
    width: 18px;;
    height: 18px;;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 50%;
    border: #B5BDC5 solid 2px;
    background: #fff;
    box-sizing: border-box;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    vertical-align: middle;
}

#emf-container .emf-field-grid input[type="radio"]:checked {
    background-color: #fff;
    border: 7px solid #262d26;
}

#emf-container .emf-field-grid input[type="radio"]:not(:checked):hover {
    border-color: #97A3AE;
    background-color: #F5F6F7;
}

#emf-container .emf-field-grid input[type="radio"]:checked,
#emf-container .emf-field-grid input[type="radio"]:focus {
    outline: none;
}

/* Field List */
.emf-field-list {
    border-radius: 6px;
    border-style: hidden;
}

#emf-form .emf-field-list th {
    padding: 10px 10px 8px 10px;
    border: none;
    font-size: 14px;
    color: #262d26;
}

#emf-form .emf-field-list td {
    padding: 0 0 16px;
    border: none;
    border-bottom: 1px solid #ebedf0;
}

.emf-banding-odd,
.emf-banding-even {
    background: none;
}

#emf-container .emf-field-list tbody tr:hover {
    background: none;
}

#emf-form .emf-field-list tr:last-of-type td {
    border-bottom: none;
}

#emf-form .emf-field-list input[type="text"],
#emf-form .emf-field-list input[type="email"],
#emf-form .emf-field-list input[type="password"],
#emf-form .emf-field-list textarea {
    width: 100%;
}

#emf-container,
#emf-form-title,
label.emf-label-desc,
#emf-container li.emf-field-section_break div.emf-div-field-section h3,
div.emf-div-field label,
#emf-form input,
#emf-form textarea,
#emf-form select,
#emf-form optgroup,
#emf-form option,
#emf-container li .emf-div-instruction,
#emf-container li .emf-div-field label.emf-bottom-label,
.emf-field-new_checkbox div[class$="_column"] > label,
#emf-container li.emf-field-section_break .emf-section-text,
#emf-form-description {
    font-family: Arial;
}

#emf-container,
#emf-form input,
#emf-form textarea,
#emf-form select,
#emf-form optgroup,
#emf-form option {
    font-size: 16px;
}

#emf-form input[type='text'],
#emf-form input[type='password'],
#emf-form input[type='email'],
#emf-form textarea,
#emf-form select,
#emf-form .fake--input {
    padding: 10px;
    line-height: 1.5;
    color: #000;
    font-weight: 400;
    letter-spacing: .009375em;
    transition: all .15s cubic-bezier(.4,0,.2,1);
    border: none;
    background: #fff;
    box-shadow: 0px 2px 2px rgba(51, 51, 51, 0.04), 0px 2px 10px rgba(51, 51, 51, 0.08);
    border-radius: 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#emf-form input[type='text']:hover,
#emf-form input[type='password']:hover,
#emf-form input[type='email']:hover,
#emf-form textarea:hover,
#emf-form select:hover,
#emf-form .fake--input:hover,
.ui-datepicker-trigger:hover {
    outline: none;
    box-shadow: 0px 2px 2px rgba(51, 51, 51, 0.04), 0px 2px 16px rgba(51, 51, 51, 0.16);
}

#emf-form input[type='text']:focus,
#emf-form input[type='password']:focus,
#emf-form input[type='email']:focus,
#emf-form textarea:focus,
#emf-form select:focus,
#emf-form .fake--input:focus,
.ui-datepicker-trigger:focus {
    outline: none;
    box-shadow: 0px 2px 2px rgba(51, 51, 51, 0.04), 0px 2px 16px rgba(51, 51, 51, 0.24);
}

#emf-form textarea {
    width: 100% !important;
}

#emf-form select {
    width: 100%;
    background: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.9706 16.5061C11.7741 16.5073 11.5793 16.4694 11.3974 16.3948C11.2155 16.3201 11.0501 16.2102 10.9106 16.0711L4.93905 10.0711C4.79985 9.93128 4.68944 9.76524 4.6141 9.58251C4.53877 9.39978 4.5 9.20393 4.5 9.00614C4.5 8.80835 4.53877 8.6125 4.6141 8.42976C4.68944 8.24703 4.79985 8.08099 4.93905 7.94114C5.07824 7.80128 5.24349 7.69034 5.42536 7.61465C5.60722 7.53896 5.80215 7.5 5.999 7.5C6.19585 7.5 6.39077 7.53896 6.57264 7.61465C6.75451 7.69034 6.91975 7.80128 7.05895 7.94114L11.9706 12.9061L16.8971 8.13614C17.0344 7.9827 17.2018 7.85939 17.3887 7.77391C17.5756 7.68843 17.7781 7.64263 17.9835 7.63936C18.1888 7.63609 18.3926 7.67542 18.5822 7.75491C18.7717 7.8344 18.9429 7.95232 19.085 8.10131C19.2271 8.2503 19.337 8.42714 19.408 8.62078C19.479 8.81442 19.5094 9.0207 19.4975 9.2267C19.4855 9.4327 19.4313 9.63401 19.3384 9.81802C19.2454 10.002 19.1157 10.1648 18.9573 10.2961L12.9857 16.0861C12.7127 16.3506 12.3497 16.5008 11.9706 16.5061Z' fill='%23455A6F'/%3e%3c/svg%3e") no-repeat right .75rem center;
}

#emf-form select:focus {
    outline: none;
}

#emf-container ul li .emf-div-instruction,
#emf-container li .emf-div-field label.emf-bottom-label {
    margin-top: 8px;
    font-size: 14px;
    color: #262d26;
    text-align: left;
}

#emf-form li.highlight-field {
    background: none;
}

span[class*="emf-field-new_address"] {
    margin-bottom: 16px;
}

.emf-div-field span {
    padding: 0;
}

.emf-div-field .emf-sep {
    margin: auto 8px;
    line-height: 44px;
}

#emf-form .emf-input-w20 {
    width: 48px;
}

#emf-form .emf-input-w30 {
    width: 56px;
}

#emf-form .emf-input-w40 {
    width: 64px;
}

#emf-form .emf-field-datetime-day .emf-input-w20,
#emf-form .emf-field-datetime-month .emf-input-w20 {
    width: 40px;
}

#emf-form .emf-field-datetime-year .emf-input-w40 {
    width: 56px;
}

.emf-div-field-section h3 {
    margin: 0;
    padding: 0;
}

.emf-section-separator {
    margin: 0;
    border-bottom: 1px solid #CED4DA;
}

.emf-div-field [class$="_column"] {
    float: none;
    width: 100%;
}

/* Datepicker */
.ui-datepicker-trigger {
    margin-left: 10px;
    padding: 22px !important;
    width: 0;
    height: 0;
    border-radius: 6px;
    border: 1px solid rgba(47, 117, 236, 0.15);
    box-shadow: 0px 2px 2px rgba(51, 51, 51, 0.04), 0px 2px 10px rgba(51, 51, 51, 0.08);
    cursor: pointer;
    background: #F6FDFE url("data:image/svg+xml,%3csvg viewBox='0 0 22 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.33333 9H10.2667V12H7.33333V9ZM11.7333 9H14.6667V12H11.7333V9ZM16.1333 9H19.0667V12H16.1333V9ZM2.93333 18H5.86667V21H2.93333V18ZM7.33333 18H10.2667V21H7.33333V18ZM11.7333 18H14.6667V21H11.7333V18ZM7.33333 13.5H10.2667V16.5H7.33333V13.5ZM11.7333 13.5H14.6667V16.5H11.7333V13.5ZM16.1333 13.5H19.0667V16.5H16.1333V13.5ZM2.93333 13.5H5.86667V16.5H2.93333V13.5ZM19.0667 0V1.5H16.1333V0H5.86667V1.5H2.93333V0H0V24H22V0H19.0667ZM20.5333 22.5H1.46667V6H20.5333V22.5Z' fill='%23455A6F'/%3e%3c/svg%3e") no-repeat center center / 18px; 18px;;
}

.emf-field-datetime-ampm {
    margin-left: 16px;
}

#emf-form .emf-field-datetime-ampm > select {
    min-width: 100px;
}

/* Custom Checkboxes */
#emf-container .emf-field-new_checkbox,
#emf-container .emf-field-radio {
    margin-bottom: 16px;
}

.emf-field-new_checkbox div[class$="_column"],
.emf-field-radio div[class$="_column"] {
    position: relative;
    padding: 0;
    margin-bottom: 16px;
}

.emf-field-new_checkbox div[class$="_column"] > input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 !important;
    z-index: 0;
    width: 18px;;
    height: 18px;;
    opacity: 0;
}

.emf-field-new_checkbox div[class$="_column"] > label,
.emf-field-radio div[class$="_column"] > label {
    position: relative;
    display: block;
    padding-left: 36px;
    margin-bottom: 0;
    font-size: 16px;
    font-style: normal;
}

.emf-field-new_checkbox div[class$="_column"] > label::after {
    position: absolute;
    top: 1px;
    left: 1px;
    display: block;
    width: 22px;
    height: 22px;
    content: "";
    background-color: #fff;
    border-radius: 6px;
    box-sizing: border-box;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease-in-out,;
}

.emf-field-new_checkbox div[class$="_column"] > input[type="checkbox"]:checked ~ label::after {
    border-radius: 2px;
    background: #262d26 url("data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.71996 8.00006C4.5323 7.8313 4.28778 7.73973 4.03543 7.74373C3.78308 7.74773 3.54158 7.84699 3.35936 8.02162C3.17715 8.19624 3.0677 8.4333 3.05297 8.68525C3.03825 8.9372 3.11933 9.1854 3.27996 9.38006L5.49996 11.7101C5.5929 11.8076 5.70459 11.8853 5.82832 11.9386C5.95204 11.9918 6.08525 12.0195 6.21996 12.0201C6.35395 12.0208 6.48673 11.9947 6.61041 11.9432C6.7341 11.8916 6.84616 11.8158 6.93996 11.7201L13.72 4.72006C13.8119 4.62551 13.8843 4.51378 13.933 4.39124C13.9818 4.26871 14.0059 4.13778 14.004 4.00592C14.0022 3.87406 13.9744 3.74386 13.9222 3.62275C13.87 3.50163 13.7945 3.39199 13.7 3.30006C13.6054 3.20814 13.4937 3.13573 13.3711 3.08699C13.2486 3.03824 13.1177 3.01411 12.9858 3.01597C12.854 3.01783 12.7238 3.04564 12.6026 3.09781C12.4815 3.14999 12.3719 3.22551 12.28 3.32006L6.22996 9.58006L4.71996 8.00006Z' fill='%23fff'/%3e%3c/svg%3e") no-repeat center center / 16px 16px;
}

.emf-field-new_checkbox div[class$="_column"] > label::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 18px;;
    height: 18px;;
    pointer-events: none;
    content: "";
    border: #CED4DA solid 1px;
    color: #fff;
    background-color: #fff;
    border-radius: 6px;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-sizing: border-box;
}

.emf-field-new_checkbox div[class$="_column"] > input[type="checkbox"]:not(:checked):hover ~ label::before {
    border-color: #262d26;
}

.emf-field-new_checkbox div[class$="_column"] > input[type="checkbox"]:not(:checked):hover ~ label::after {
    background-color: #006cb4;
}

.emf-field-new_checkbox div[class$="_column"] > input[type="checkbox"]:checked ~ label::before {
    border-color: #262d26;
}

.emf-field-new_checkbox div[class$="_column"] > input[type="checkbox"]:checked:hover ~ label::before {
    border-color: #2F75EC;
}


.emf-field-new_checkbox div[class$="_column"] > label {
    position: relative;
    padding-left: 28px; /* Space for the custom checkbox */
    cursor: pointer;
}

.emf-field-new_checkbox div[class$="_column"] > label::before {
    /* The custom checkbox box */
    content: "";
    position: absolute;
    top: 2px; /* Adjust as necessary */
    left: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #757575; /* Color of the checkbox border */
    border-radius: 3px; /* Optional: For rounded corners */
    background-color: #FFF;
    transition: background-color 0.3s;
}

.emf-field-new_checkbox div[class$="_column"] > input[type="checkbox"]:checked + label::before {

}

.emf-field-new_checkbox div[class$="_column"] > label::after {
    /* The custom checkmark */
    content: "";
    position: absolute;
    top: 2px;
    left: 0px;
    width: 20px;
    height: 20px;
    background: url('path-to-your-checkmark-icon.png') no-repeat;
    background-size: cover;
    opacity: 0;
    transition: opacity 0.3s;
}

.emf-field-new_checkbox div[class$="_column"] > input[type="checkbox"]:checked + label::after {
    opacity: 1;
}

/* Custom Radio buttons */

.emf-field-radio div[class$="_column"] > input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 !important;
    z-index: 0;
    width: 18px;;
    height: 18px;;
    opacity: 0;
}

.emf-field-radio div[class$="_column"] > label::after {
    position: absolute;
    top: 2px;
    left: 2px;
    display: block;
    width: 20px;
    height: 20px;
    content: "";
    background-color: #fff;
    border-radius: 50%;
    box-sizing: border-box;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease-in-out,;
}

.emf-field-radio div[class$="_column"] > input[type="radio"]:checked ~ label::after {
    top: 7px;
    left: 7px;
    width: 10px;
    height: 10px;
    background: #fff;
}

.emf-field-radio div[class$="_column"] > label::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 18px;;
    height: 18px;;
    pointer-events: none;
    content: "";
    border: #B5BDC5 solid 2px;
    color: #fff;
    background-color: #FAFBFC;
    border-radius: 50%;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-sizing: border-box;
}

.emf-field-radio div[class$="_column"] > input[type="radio"]:not(:checked):hover ~ label::before {
    border-color: #97A3AE;
}

.emf-field-radio div[class$="_column"] > input[type="radio"]:not(:checked):hover ~ label::after {
    background-color: #F5F6F7;
}

.emf-field-radio div[class$="_column"] > input[type="radio"]:checked ~ label::before {
    border-color: #262d26;
    background-color: #262d26;
}

.emf-field-radio div[class$="_column"] > input[type="radio"]:checked:hover ~ label::before {
    border-color: #2F75EC;
}

/* Form captcha */
#emf-container #emf-li-recaptcha {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    clear: none;
}

#rc-imageselect, .g-recaptcha {
    transform: scale(0.77);
    -webkit-transform: scale(0.77);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}

/* Form Submit button */

#emf-container #emf-li-post-button {
    padding: 0;
    margin: 16px 0 0;
}




/* Media queries & other styles */
/* @media only screen and (min-width: 768px) {
    #emf-li-post-button {
        margin-top: 40px;
    }
}
@media only screen and (min-width: 576px) {
    #emf-li-post-button {
        padding-left: 16px;
        padding-right: 16px;
        margin-top: 24px;
    }
} */

#emf-li-post-button.left {
    padding-left: 5px;
    text-align: left;
}

#emf-container ul li {
    margin: 5px 0;
    padding: 5px 0;
    width: 100%;
    vertical-align: top;
    clear: both;
}
#emf-li-post-button input[type="submit"]:hover,
#emf-li-post-button input[type="submit"]:focus {
    color: #000;
    background-color: #3d9a7f;
    border-color: none;
}

/* Responsive and other settings */
@media only screen and (max-width: 575px) {
    .emf-field-list table, .emf-field-list thead, .emf-field-list tbody, .emf-field-list th, .emf-field-list td, .emf-field-list tr {
        display: block;
    }
    #emf-container #emf-logo a {
        display: none;
    }
    #emf-li-0 > div.emf-div-field-section > div {
        display: none;
    }
}

@media only screen and (min-width: 392px) {
    /* Form captcha */
    #rc-imageselect, .g-recaptcha {
        transform: none;
        -webkit-transform: none;
        transform-origin: initial;
        -webkit-transform-origin: initial;
    }
}

@media only screen and (min-width: 401px) {
    /* Field Grid */
    #emf-container .emf-field-grid thead th,
    #emf-container .emf-field-grid thead td  {
        padding: 12px 16px;
    }

    #emf-container .emf-field-grid tbody th,
    #emf-container .emf-field-grid tbody td  {
        padding: 10px 16px;
    }

    #emf-container .emf-field-grid th {
        border-color: #CED4DA;
        color: #000;
        font-weight: 400;
    }

    #emf-container .emf-field-grid td:last-of-type {
        border-bottom: 1px solid #CED4DA;
    }

    #emf-container .emf-field-grid tbody tr:hover {
        background: #CED4DA;
        transition: background-color .15s ease-in-out;
    }

    #emf-container .emf-field-grid td:hover {
        background: none;
        transition: none;
    }

    #emf-container .emf-field-grid input[type="radio"] {
        margin-right: 0;
    }

    .emf-banding-head {
        background: #ebedf0;
    }

    .emf-field-grid thead td, .emf-field-grid thead th {
        color: #262d26;
        font-weight: 700;
    }

    .emf-field-grid td {
        border-left: none;
    }
}

@media only screen and (min-width: 576px) {

    /* Page wrapper */
    #emf-container-outer {
        padding: 0;
    }

    /* Form wrapper */
    #emf-container {
        border-radius: 18px;;
    }

    /* Form container */
    #emf-container #emf-form {
        padding: 18px; 18px 40px;
    }

    /* Form node element */
    #emf-form > ul {
        flex-direction: row;
        margin-left: -16px;
        margin-right: -16px;
    }

    /* Form logo container */
    #emf-container #emf-logo {
        height: 70px;
        /* box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); */
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border-top: 5px solid #006cb4;
    }

    /* Form logo */
    #emf-container #emf-logo a {
        height: 100px;
        background-size: 200px auto;
        background-position: 18px 22px;
    }

    /* Form title container */
    #emf-container .emf-head-widget {
        padding-bottom: 10px;
        margin-bottom: 18px;;
    }

    /* Form title */
    #emf-form-title {
        font-size: 32px;
    }

    #emf-container ul li.emf-li-half-width {
        width: 50%;
    }

    #emf-container ul li .emf-section-text,
    #emf-form-description {
        font-size: 18px;
    }

    #emf-container ul li label.emf-label-desc {
        line-height: 1.3;
        font-size: 20px;
    }

    /* Form widget / component section */
    #emf-container .emf-li-field {
        padding-left: 16px;
        padding-right: 16px;
    }

    #emf-container li.emf-field-section_break div.emf-div-field-section h3 {
        font-size: 20px;
    }


    /* Field List */
    #emf-form .emf-field-list th {
        padding: 8px 0;
        vertical-align: middle;
    }

    #emf-form .emf-field-list td {
        padding: 8px 0;
        border-bottom: none;
    }

    #emf-form input[type='text'],
    #emf-form input[type='password'],
    #emf-form input[type='email'],
    #emf-form textarea,
    #emf-form select,
    #emf-form .fake--input {
        padding: 12px;
        box-shadow: 0px 3px 3px rgba(51, 51, 51, 0.04), 0px 3px 12px rgba(51, 51, 51, 0.08);
    }

    #emf-form input[type='text']:hover,
    #emf-form input[type='password']:hover,
    #emf-form input[type='email']:hover,
    #emf-form textarea:hover,
    #emf-form select:hover,
    #emf-form .fake--input:hover,
    .ui-datepicker-trigger:hover {
        /* box-shadow: 0px 3px 3px rgba(51, 51, 51, 0.04), 0px 3px 18px; rgba(51, 51, 51, 0.16); */
    }

    #emf-form input[type='text']:focus,
    #emf-form input[type='password']:focus,
    #emf-form input[type='email']:focus,
    #emf-form textarea:focus,
    #emf-form select:focus,
    #emf-form .fake--input:focus,
    .ui-datepicker-trigger:focus {
        box-shadow: 0px 3px 3px rgba(51, 51, 51, 0.04), 0px 3px 16px rgba(51, 51, 51, 0.24);
    }

    .emf-div-field .emf-sep {
        line-height: 48px;
    }

    #emf-form .emf-field-datetime-day .emf-input-w20,
    #emf-form .emf-field-datetime-month .emf-input-w20,
    #emf-form .emf-input-w20 {
        width: 50px;
    }

    #emf-form .emf-input-w30 {
        width: 58px;
    }

    #emf-form .emf-field-datetime-year .emf-input-w40,
    #emf-form .emf-input-w40 {
        width: 64px;
    }

    .emf-div-field [class$="_column"] {
        float: left;
    }

    .emf-div-field .four_column,
    .emf-div-field .three_column,
    .emf-div-field .two_column {
        width: 50%;
    }

    /* Datepicker */
    .ui-datepicker-trigger {
        margin: 16px 0 0;
        width: 206px;
        padding: 18px; !important;
        box-shadow: 0px 3px 3px rgba(51, 51, 51, 0.04), 0px 3px 12px rgba(51, 51, 51, 0.08);
    }

    #emf-form .emf-field-datetime-ampm > select {
        min-width: 86px;
    }

    /* Custom Checkboxes and Radio */
    .emf-field-new_checkbox div[class$="_column"],
    .emf-field-radio div[class$="_column"] {
        margin-bottom: 20px;
    }

    /* Form captcha */
    #emf-container #emf-li-recaptcha {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Form Submit button */
    #emf-container #emf-li-post-button {
        padding-left: 16px;
        padding-right: 16px;
        margin-top: 18px;;
    }

    #emf-li-post-button input[type="submit"] {
        margin-right: 5px;
        padding-top: 15px;
        padding-bottom: 15px;
        width: auto;
    }
}

@media only screen and (min-width: 670px){
    /* Datepicker */
    .ui-datepicker-trigger {
        margin: 0 0 0 16px;
        width: auto;
    }

    .emf-field-datetime-ampm {
        margin-left: 20px;
    }

    #emf-form .emf-field-datetime-ampm > select {
        min-width: 126px;
    }
}

@media only screen and (min-width: 768px){

    /* Page wrapper */
    #emf-container-outer {
        padding: 0;
        padding-bottom:0;
    }

    /* Form wrapper */
    #emf-container {
        border-radius: 6px;
    }

    /* Form container */
    #emf-container #emf-form {
        padding: 20px;
    }

    /* Form logo container */
    #emf-container #emf-logo {
        /* box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1); */
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

    /* Form logo */
    #emf-container #emf-logo a {
        height: 86px;
        background-size: 235px auto;
        background-position: 32px 22px;
    }

    /* Form title container */
    #emf-container .emf-head-widget {
        padding-bottom: 12px;
        margin-bottom: 32px;
    }

    /* Form title */
    #emf-form-title {
        font-size: 36px;
    }

    #emf-container ul li.emf-li-half-width {
        width: 50%;
    }

    #emf-container ul li .emf-section-text,
    #emf-form-description {
        font-size: 20px;
    }

    #emf-container ul li label.emf-label-desc {
        line-height: 1.16;
        font-size: 16px;;
    }

    /* Form widget / component section */
    #emf-container .emf-li-field {
        margin-bottom: 25px;
    }

    .emf-div-field > span[style^="width"] {
        max-width: 300px;
    }

    #emf-container li.emf-field-section_break div.emf-div-field-section h3 {
        font-size: 18px;;
    }

    /* Field Grid */
    #emf-container .emf-field-grid thead th,
    #emf-container .emf-field-grid thead td  {
        padding: 16px;
    }

    #emf-container .emf-field-grid tbody th,
    #emf-container .emf-field-grid tbody td  {
        padding: 14px 16px;
    }

    /* Field List */
    #emf-form .emf-field-list th,
    #emf-form .emf-field-list td {
        padding: 16px 0;
    }

    #emf-form input[type='text'],
    #emf-form input[type='password'],
    #emf-form input[type='email'],
    #emf-form textarea,
    #emf-form select,
    #emf-form .fake--input {
        padding: 10px;
        /* box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.04), 0px 4px 16px rgba(51, 51, 51, 0.08); */
        box-shadow: none;
        border: 1px solid #cecece;
    }

    #emf-form input[type='text']:hover,
    #emf-form input[type='password']:hover,
    #emf-form input[type='email']:hover,
    #emf-form textarea:hover,
    #emf-form select:hover,
    #emf-form .fake--input:hover,
    .ui-datepicker-trigger:hover {
        border-color: #50c4a7;
        /* box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.04), 0px 4px 56px rgba(51, 51, 51, 0.16); */
    }

    #emf-form input[type='text']:focus,
    #emf-form input[type='password']:focus,
    #emf-form input[type='email']:focus,
    #emf-form textarea:focus,
    #emf-form select:focus,
    #emf-form .fake--input:focus
    .ui-datepicker-trigger:focus {
        border-color: #50c4a7;
        /* box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.04), 0px 4px 18px; rgba(51, 51, 51, 0.24); */
    }

    #emf-form select {
        min-width: 220px;
        width: auto;
    }

    .emf-div-field .emf-sep {
        line-height: 56px;
    }

    #emf-form .emf-field-datetime-day .emf-input-w20,
    #emf-form .emf-field-datetime-month .emf-input-w20,
    #emf-form .emf-input-w20 {
        width: 56px;
    }

    #emf-form .emf-input-w30 {
        width: 64px;
    }

    #emf-form .emf-field-datetime-year .emf-input-w40,
    #emf-form .emf-input-w40 {
        width: 72px;
    }

    .emf-div-field .two_column {
        width: 50%;
    }

    .emf-div-field .three_column {
        width: 33%;
    }

    .emf-div-field .four_column {
        width: 25%;
    }

    /* Datepicker */
    .ui-datepicker-trigger {
        padding: 28px !important;
        /* box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.04), 0px 4px 16px rgba(51, 51, 51, 0.08); */
    }

    /* Custom Checkboxes and Radio */
    .emf-field-new_checkbox div[class$="_column"],
    .emf-field-radio div[class$="_column"] {
        margin-bottom: 18px;;
    }

    /* Form Submit button */

    #emf-container #emf-li-post-button {
        margin-top: 10px;
    }

    #emf-li-post-button input[type="submit"] {

    }

}
#emf-li-post-button input[type="submit"] {
    /* Dimension and Box Model */
    padding: 20px 60px 20px 20px;  /* Padding values: Top, Right (space for SVG), Bottom, Left */
    border-radius: 6px;
    box-sizing: border-box;  /* Ensure padding & border are inside the element's total width & height */

    /* Positioning and Display */
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;  /* Align inline with other inline elements */

    /* Aesthetics */
    /* background-color: #F2F5F7; */
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTlweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTkgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+YXJyb3c8L3RpdGxlPgogICAgPGcgaWQ9IkRPVEQtdjEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJBcnRib2FyZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIyOSwgLTExOSkiIGZpbGw9IiMwMDAwMDAiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNDcuNDAzNTMzLDEyNC45MDA1ODggQzI0Ny43MzQ3MTgsMTI1LjIzMTUzIDI0Ny43MzQ3MTgsMTI1Ljc2ODUxOCAyNDcuNDAzNTMzLDEyNi4wOTk0NzIgTDI0MS43NTE0NTQsMTMxLjc1MTc5MyBDMjQxLjQyMDI3LDEzMi4wODI3MzYgMjQwLjg4MzUyNSwxMzIuMDgyNzM2IDI0MC41NTIzMjgsMTMxLjc1MTc5MyBDMjQwLjIyMTM4NiwxMzEuNDIwNjA5IDI0MC4yMjEzODYsMTMwLjg4Mzg2NCAyNDAuNTUyMzI4LDEzMC41NTI2NjggTDI0NC43NTc0MTQsMTI2LjM0NzgyNCBMMjI5Ljg0NzgyNCwxMjYuMzQ3ODI0IEMyMjkuMzc5Njc0LDEyNi4zNDc4MjQgMjI5LDEyNS45NjgxNSAyMjksMTI1LjUgQzIyOSwxMjUuMDMxODUgMjI5LjM3OTY3NCwxMjQuNjUyMTc2IDIyOS44NDc4MjQsMTI0LjY1MjE3NiBMMjQ0Ljc1NzQxNCwxMjQuNjUyMTc2IEwyNDAuNTUyMzI4LDEyMC40NDczMzIgQzI0MC4yMjEzODYsMTIwLjExNjE0OCAyNDAuMjIxMzg2LDExOS41Nzk0MDMgMjQwLjU1MjMyOCwxMTkuMjQ4MjA3IEMyNDAuODgzNTEzLDExOC45MTcyNjQgMjQxLjQyMDI1OCwxMTguOTE3MjY0IDI0MS43NTE0NTQsMTE5LjI0ODIwNyBMMjQ3LjQwMzUzMywxMjQuOTAwNTg4IFoiIGlkPSJhcnJvdyI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+');    background-repeat: no-repeat;
    background-position: right 20px center;  /* Move SVG to the right with 20px spacing from the right edge */
    color: #000;
    background-color: #FFA500;
    border: none;

    /* Text Properties */
    text-align: left;
    font-size: 16px;
    font-weight: bold;  /* Making the text bold as per the previous code */

    /* Interaction and Transition */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;

    /* Misc */
    margin-right: 5px;

}

#emf-li-post-button input[type="submit"]:hover {
    background-color: #E89400;
}
#emf-li-post-button input[type="submit"]:hover:after {
    opacity: 1;
}
#emf-li-post-button input[type="submit"]:after {
    content: "";
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTlweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTkgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+YXJyb3c8L3RpdGxlPgogICAgPGcgaWQ9IkRPVEQtdjEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJBcnRib2FyZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIyOSwgLTExOSkiIGZpbGw9IiMwMDAwMDAiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNDcuNDAzNTMzLDEyNC45MDA1ODggQzI0Ny43MzQ3MTgsMTI1LjIzMTUzIDI0Ny43MzQ3MTgsMTI1Ljc2ODUxOCAyNDcuNDAzNTMzLDEyNi4wOTk0NzIgTDI0MS43NTE0NTQsMTMxLjc1MTc5MyBDMjQxLjQyMDI3LDEzMi4wODI3MzYgMjQwLjg4MzUyNSwxMzIuMDgyNzM2IDI0MC41NTIzMjgsMTMxLjc1MTc5MyBDMjQwLjIyMTM4NiwxMzEuNDIwNjA5IDI0MC4yMjEzODYsMTMwLjg4Mzg2NCAyNDAuNTUyMzI4LDEzMC41NTI2NjggTDI0NC43NTc0MTQsMTI2LjM0NzgyNCBMMjI5Ljg0NzgyNCwxMjYuMzQ3ODI0IEMyMjkuMzc5Njc0LDEyNi4zNDc4MjQgMjI5LDEyNS45NjgxNSAyMjksMTI1LjUgQzIyOSwxMjUuMDMxODUgMjI5LjM3OTY3NCwxMjQuNjUyMTc2IDIyOS44NDc4MjQsMTI0LjY1MjE3NiBMMjQ0Ljc1NzQxNCwxMjQuNjUyMTc2IEwyNDAuNTUyMzI4LDEyMC40NDczMzIgQzI0MC4yMjEzODYsMTIwLjExNjE0OCAyNDAuMjIxMzg2LDExOS41Nzk0MDMgMjQwLjU1MjMyOCwxMTkuMjQ4MjA3IEMyNDAuODgzNTEzLDExOC45MTcyNjQgMjQxLjQyMDI1OCwxMTguOTE3MjY0IDI0MS43NTE0NTQsMTE5LjI0ODIwNyBMMjQ3LjQwMzUzMywxMjQuOTAwNTg4IFoiIGlkPSJhcnJvdyI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #FFC272; /* A lighter, more pastel shade of the initial orange */

    height: 20px; /* Adjust based on SVG size */
    width: 20px;  /* Adjust based on SVG size */
    position: absolute;
    right: 10px; /* Space from the right side */
    top: 50%;
    transform: translateY(-50%); /* Vertically center the SVG */
    transition: opacity 0.3s;
    content: "";
    /* ... any other styles for positioning, size, etc. ... */
    background-color: #FFC272; /* A lighter, more pastel shade of the initial orange */
    /* If you're using an icon, specify its properties here */
    opacity: 0;
    transition: opacity 0.3s;

}

@media only screen and (min-width: 992px){

    /* Page wrapper */
    #emf-container-outer {
        padding-bottom: 20px;
    }

    /* Form container */
    #emf-container #emf-form {
        padding: 20px;
    }

    /* Form logo */
    #emf-container #emf-logo a {
        background-position: 20px;
    }

    /* Form title container */
    #emf-container .emf-head-widget {
        margin: 0 0 10px 0;
    }

    .emf-div-field > span[style^="width"] {
        max-width: none;
        width: 45% !important;
    }

    .emf-div-field > span[style^="width"] + span[style^="width"] {
        margin-top: 0;
        margin-left: 18px;;
    }

    #emf-container ul li .emf-section-text,
    #emf-form-description {
        font-size: 18px;
    }

    .emf-field-datetime-ampm {
        margin-left: 18px;;
    }

    #emf-form .emf-field-datetime-ampm > select {
        min-width: 220px;
    }
}

@media only screen and (min-width: 1248px){
    .emf-div-field > span[style^="width"] {
        max-width: 220px;
        width: 100% !important;
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 767px),
only screen and ( min--moz-device-pixel-ratio: 1.25) and (max-width: 767px),
only screen and ( -o-min-device-pixel-ratio: 1.25/1) and (max-width: 767px),
only screen and ( min-device-pixel-ratio: 1.25) and (max-width: 767px),
only screen and ( min-resolution: 200dpi) and (max-width: 767px),
only screen and ( min-resolution: 1.25dppx) and (max-width: 767px) {
    html {
        /* background-image: url(https://files.emailmeform.com/1369088/zVBo9UGm/bg-graduation-student-survey.jpg); */
    }
}