/* correcting the font-family for the entire body */
body, input, .ui-button {
    font-family: sans-serif;
}


/* Adding padding around the entire page */
.ui-page.ui-page-theme-a.ui-page-active > div {
    padding: 16px;
}
/* Adds padding to bottom of WorldPay logo */
div.footer > div.elementBottomLogo {
    padding-bottom: 16px;
}


/* Fieldset container surrounding the submit and cancel transactions */
#submitCancelButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 13px; 
}
#submitCancelButtons input.ui-btn.ui-button {
    width: auto;
}


/* surrounding container around submit and cancel button, serves as a positioning context for child element position */
.buttonContainer {
    position: relative;
}

/* 3 Layers for the submit transaction button: SolidBlueSpan > Button > Checkmark Image. Button is occluded so that only a certain amount of blue will appear */
/* Blue background mask behind the Submit button */
#submitCancelButtons span.blueBackground {
    position: absolute;
    top: 9px;
    left: 1px;
    width: 98%;
    height: 43px;
    border-radius: 4px;
    border-color: #ddd;
    background-color: #38c;
    opacity: 1.0;
}

/* Submit button styling */
input[value="Submit"]{
    margin-right: 0px;
    background-color: rgba(0,0,0,.3);
    font-weight: 700;
    padding-left: 40px;
}
/* Checkmark image left of the Submit button */
#submitCancelButtons span.check {
    background-image: url(images/icons-png/check-white.png);
}
/* submit button formatting */
input[value="Submit"].ui-btn.ui-btn-active {
    color: #000000;
    opacity: 0.9;
}
/* Allows blue background to be visible*/
.ui-input-btn input {
    opacity: 0.1;
}


/* Cancel Button */
input[value="Cancel"] {
    background-color: rgba(0,0,0,.3);
    padding-left: 40px;
}
/* Delete Logo left of Cancel Button */
#submitCancelButtons span.delete {
    background-image: url(images/icons-png/delete-white.png);
}
/* Styling for the delete / check logo, allows them to be positioned in their containers as well as be surrounded by grey rounded background. */
#submitCancelButtons span.delete, #submitCancelButtons span.check {
    position: absolute;
    top: 20px;
    left: 12px;
    background-color: rgba(0,0,0,.3);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    border-radius: 1em;
    width: 1.4em;
    height: 1.4em;
}

/* Adds gap, rounds all corners, and adds top and left border to the year dropdown */
#ctl00_mainPage_ddl_ExpirationYear-button {
    border-top-width: 0.8px;
    border-left-width: 0.8px;
    border-radius: 5px; /* top left top right bottom right bottom left*/
    margin-left: 5px;
}

/* Rounds out all four corners of the expiration month */
#ctl00_mainPage_ddl_ExpirationMonth-button {
    border-radius: 5px;
}

/* Firefox specific styling */
@-moz-document url-prefix() {
    /* Need to add rule for delete icon positioning */
    #submitCancelButtons span.delete {
        left: 12px;
    }

    /* Adds in the border that gets clipped from the top of the year dropdown in firefox */
    #ctl00_mainPage_ddl_ExpirationYear-button {
        border-top-width: 0.8px;
    }

    @media screen and (max-width: 240px)
    {
        /* Clear the left margin when items are stacked margin when */
        #ctl00_mainPage_ddl_ExpirationYear-button {
            margin-left: 0px;
        }
    }
}

@media screen and (max-width: 240px)
{
    /* Clears the left gap from cancel and submit buttons when they are stacked*/
    #submitCancelButtons {
        gap: 0px;
    }
}



/* Adding above the monthly and daily expiration field input */
fieldset.inputFieldset.ui-controlgroup.ui-controlgroup-horizontal.ui-helper-clearfix.ui-group-theme-inherit {
    padding-top: 8px; 
}

/* remove the errant border above the 'What's this? text below the Cvv field*/
#fldSetCvv .ui-textinput {
    border-style: none;
}

/* fixes layout of card number input
    applies only to div with class of ui-textinput provided that
    1. it is an immediate sibling of div with class label
    2. both are direct children of div with class inputSection
*/
div.inputSection > div.label + div.ui-textinput {
    display: inline-block;
    min-width: 208px;
}

/* lays out the expiration month and year select menus horizontally for firefox */
.ui-selectmenu {
    display: inline-block;
}

/* sets the correct padding on rh side of month/year buttons */
div.ui-selectmenu > div.ui-selectmenu-button {
    padding-right: 10px;
}

/* sets the correct margin-left on the exp month/year caret */
span.ui-selectmenu-button-icon.ui-icon-caret-d.ui-icon.ui-widget-icon-floatend {
    margin-left: 9px;
}

/* sets max width of the cvv input field and lays the 'What's this?' link to the rh of input */
#fldSetCvv .ui-textinput {
    max-width: 100px;
    display: inline-block;
}

/* Adds the white + (plus) button at the RH side of a expandable/collapsible panel when the panel is collapsed */
.ui-icon-plus {
    background-image: url("images/icons-svg/plus-white.svg");
}

/* Adds the white - (minus) button at the RH side of a expandable/collapsible panel when the panel is expanded*/
.ui-icon-minus {
    background-image: url("images/icons-svg/minus-white.svg");
    float:right;
}

/* adds the white down carat to a drop-down list, used for Expiration Month dropdown and  Expiration Year dropdown. */
.ui-icon-caret-d {
    background-image: url("images/icons-svg/carat-d-white.svg");
}

.ui-icon.ui-icon-plus {
    float: right;
}

.ui-icon.ui-icon-minus {
    float: right;
}