span.label, 
label.required, 
.form.row label, 
.form.row legend span.label
{
    margin-left:0;
    float:left;
}

span.label,
label {   
    display: inline;
    text-align: left;
    width: initial;
}

.button.button-primary, button.button-primary, input.button-primary[type="submit"], input.button-primary[type="reset"], input.button-primary[type="button"] {        
    max-width: 100%;
}

.back-button
{
    max-width: 100%;
    display:block;
    transform: translateY(300%);
}

span.error
{
    float:left;
    margin-top:0.55rem;
}

span.error::before {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;  
  border-bottom: 5px solid #FF0000;
  border-top: none;
  right: 50%;
  top: 5px;
  margin-top: -10px;
}

legend.columns {
    margin-bottom: 0;
}

legend .label-group,
span.required-field {
    padding: 0;
    position: relative;
    display: inline;
}

span.required-field {
    line-height: 50%;
    vertical-align: bottom;
}

.columns {
    padding: 0;
}

.help-tip,
.help-tip.anchor-left,
.help-tip.anchor-right  {
    float: right;	
    display:inline-block;
    right: 1px;
    left: initial;
    top: -2px;
    bottom: initial;
}

.help-tip span,
.help-tip.anchor-left span,
.help-tip.anchor-right span {	/* The tooltip */
    width:300px;
    float:left;
    right: -4px;
    left:  initial;
}

@media (max-width: 400px) {
    .help-tip span,
    .help-tip.anchor-left span,
    .help-tip.anchor-right span {
        width: 175px;
    }
}

.help-tip span:before,
.help-tip.anchor-left span:before,
.help-tip.anchor-left right:before  { /* The pointer of the tooltip */
	top:-12px;
    right: 10px;
    left: initial;
}

.control-row .help-tip.anchor-left,
.control-row .help-tip.anchor-right {
    top: 4px;
    right: 4px;
}

a[data-role="toggle-paf"] {
   margin-left:0px;
   cursor: pointer !important;
   float:left;
   text-align: left;
   left:0px;
   display:inline-block;
   padding:0;
}

.paf-toggle-disabled
{
    width:100%;
}

.questionnaire-group
{
    width:100%;
    float:left;
    clear:right;
}

div.questionnaire-group input
{
   float:left;
   margin-right:0.5rem;
}

#running-footer .columns {
    width: 100%;
}

#form-submit {
    float: left;
    margin-top: 0.75em;
}

#running-footer .back-button {
    width: 98%;
    position: relative;
    padding: 0 !important;
    margin-top: -3.5em;
    overflow: hidden;
    height: 2em;
    line-height: 2em;
    vertical-align: middle;
}

.form.row .six.columns:first-child {
    margin-bottom: 1em;
}

#header_title
{
    display:none;
}

.currency input, #oCard-sCVV {   
    max-width: 100%;
}

#test-mode-stamp
{
    font-size:4rem;
}

#wubs-countryCode
{
    width:100%;
}

.select-list label
{
    width:100%;
}

/* Flywire override control */
#flywire-overider {
	display: none;
}

/* Spinner dialog font styling - ensure consistency across all screen sizes */
#wpm-spinner-dialog .info_msg,
#wpm-spinner-dialog p.info_msg,
.roundedjs_inner .info_msg,
.roundedjs_inner p.info_msg {
	font-family: Rubik, sans-serif !important;
	font-weight: bold !important;
	color: #003E6E !important;
}

/* Additional fallback for any spinner text */
#wpm-spinner-dialog,
#wpm-spinner-dialog *,
#wpm-spinner-wrapper,
#wpm-spinner-wrapper * {
	font-family: Rubik, sans-serif;
}

/* Fix for spinner dialog on small screens (550px or smaller) */
@media (max-width: 550px) {
    /* Main spinner dialog positioning and sizing */
    #wpm-spinner-dialog {
        width: 90% !important;
        max-width: 350px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
        top: 30% !important; /* Move higher on page (was 40%) */
        transform: translate(-50%, -50%) !important;
        border-radius: 8px !important; /* Add rounded corners */
        /* Remove border from here to prevent double border */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow */
    }
    
    /* Ensure the root container (.t_info) adapts to small screens */
    #wpm-spinner-dialog.t_info,
    #wpm-spinner-dialog .t_info {
        width: 100% !important;
        min-width: 250px !important;
        max-width: 350px !important;
        border-radius: 8px !important; /* Add rounded corners */
        /* Remove border from here to prevent double border */
    }
    
    /* Ensure spinner wrapper is responsive */
    #wpm-spinner-wrapper {
        width: 95% !important;
        max-width: 320px !important;
        min-width: 250px !important;
        height: auto !important;
        min-height: 180px !important;
        border-radius: 8px !important; /* Add rounded corners */
    }
    
    /* Ensure the spinner dialog content is properly contained */
    #wpm-spinner-dialog .roundedjs_inner {
        padding: 15px 10px !important;
        word-wrap: break-word !important;
        border-radius: 6px !important; /* Add slightly smaller rounded corners for inner content */
    }
    
    #wpm-spinner-dialog .info_msg {
        font-size: 14px !important;
        line-height: 1.4 !important;
        text-align: center !important;
        padding: 10px !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
        /* Remove background image on small screens as it covers the text */
        background-image: none !important;
        background-color: #F1F9FC !important; /* Match the dialog background color */
        /* Remove padding-left override to allow proper centering */
        margin: 0 auto !important; /* Center the element itself */
        display: block !important; /* Ensure block display for proper centering */
        /* Ensure font styling on small screens */
        font-family: Rubik, sans-serif !important;
        font-weight: bold !important;
    }
    
    /* Remove background images from all child classes of t_info on small screens */
    #wpm-spinner-dialog .bl_info,
    #wpm-spinner-dialog .br_info,
    #wpm-spinner-dialog .tl_info,
    #wpm-spinner-dialog .tr_info,
    #wpm-spinner-dialog .b_info,
    #wpm-spinner-dialog .l_info,
    #wpm-spinner-dialog .r_info {
        background-image: none !important;
        background-color: #F1F9FC !important;
    }
    
    /* Add border specifically to the outermost visible container */
    #wpm-spinner-dialog .tr_info {
        border: 1px solid #D1E7F0 !important;
        border-radius: 8px !important;
    }
    
    /* Ensure tl_info doesn't have a border to prevent double border */
    #wpm-spinner-dialog .tl_info {
        border: none !important;
    }
}

/* Additional fix for very small screens (400px or smaller) */
@media (max-width: 400px) {
    #wpm-spinner-dialog {
        width: 95% !important;
        max-width: 300px !important;
        border-radius: 8px !important; /* Maintain rounded corners */
        top: 30% !important; /* Move higher on page, consistent with larger small screens */
        /* Remove border from here to prevent double border */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow */
    }
    
    #wpm-spinner-dialog.t_info,
    #wpm-spinner-dialog .t_info {
        max-width: 300px !important;
        border-radius: 8px !important; /* Maintain rounded corners */
        /* Remove border from here to prevent double border */
    }
    
    #wpm-spinner-wrapper {
        max-width: 270px !important;
        border-radius: 8px !important; /* Maintain rounded corners */
    }
    
    #wpm-spinner-dialog .info_msg {
        font-size: 13px !important;
        padding: 8px !important;
        /* Remove background image on very small screens */
        background-image: none !important;
        background-color: #F1F9FC !important; /* Match the dialog background color */
        /* Ensure proper text centering */
        text-align: center !important;
        margin: 0 auto !important; /* Center the element itself */
        display: block !important; /* Ensure block display for proper centering */
        /* Ensure font styling on very small screens */
        font-family: Rubik, sans-serif !important;
        font-weight: bold !important;
    }
    
    /* Remove background images from all child classes of t_info on very small screens */
    #wpm-spinner-dialog .bl_info,
    #wpm-spinner-dialog .br_info,
    #wpm-spinner-dialog .tl_info,
    #wpm-spinner_dialog .tr_info,
    #wpm-spinner-dialog .b_info,
    #wpm-spinner-dialog .l_info,
    #wpm-spinner-dialog .r_info {
        background-image: none !important;
        background-color: #F1F9FC !important;
    }
    
    /* Add border specifically to the outermost visible container */
    #wpm-spinner-dialog .tr_info {
        border: 1px solid #D1E7F0 !important;
        border-radius: 8px !important;
    }
    
    /* Ensure tl_info doesn't have a border to prevent double border */
    #wpm-spinner-dialog .tl_info {
        border: none !important;
    }
}