/*Table of Contents*/
/*
    Backgrounds
    Badges
    Breadcrumb
    Bullets
    Buttons
    Carousels
    Checkboxes
    Container
    Dates
    Description Lists
    Fonts
    Footers
    jQuery References - see Ignore.css file
    Navigation
    Panels
    Placement
    Radio Buttons
    Rows
    Selection
    Steps
    Tables
    Tooltips
    Validation

    Notes: "Helvetica Neue", Helvetica, Arial, sans-serif;
    Helvetica Neue is a sans-serif font. It goes well with Proxima Nova, Lucida Grande, Helvetica, Georgia, DIN, Avenir, Open Sans, Adelle, Trade Gothic and Museo Sans. If you're thinking about using Helvetica Neue then try 50px for headers.
    www.1001fonts.com/sans-serif-fonts.html

    Media Queries

*/



/***********************************************************/
/*Backgrounds*/
/***********************************************************/
.link-background {
    background-color: darkseagreen;
}

.contact-panel {
    display: block;
}

    .contact-panel h4 {
        font-size: 2em;
        margin-top: 1em;
        color: white;
    }

.contact-info-main {
    padding: 1.25em;
    color: black;
    background-color: whitesmoke;
    -ms-opacity: 0.70;
    opacity: 0.70;
    height: auto;
}

    .contact-info-main .row {
        height: auto;
    }

    .contact-info-main a {
        color: white;
        text-decoration-line: underline;
    }

    .contact-info-main h3 {
        margin-top: 1.5em;
        padding-bottom: .5em;
    }

    .contact-info-main p {
        margin-bottom: 2em;
    }

.contact-info-card1 {
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 2em;
    background-color: #D6E7E7;
    font-weight: bolder;
    height: auto;
}

.contact-info-card2 {
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 2em;
    background-color: #F3C7B9;
    font-weight: bolder;
    height: auto;
}

.contact-info-card3 {
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 2em;
    background-color: #BCD2F7;
    font-weight: bolder;
    height: auto;
}

.contact-info-card4 {
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 2em;
    background-color: thistle;
    font-weight: bolder;
    height: auto;
}

.contact-card1 {
    background-color: cadetblue;
    color: white;
    font-weight: bolder;
    height: 10em;
    vertical-align: middle;
}

.contact-card2 {
    background-color: darksalmon;
    color: white;
    font-weight: bolder;
    height: 10em;
    vertical-align: middle;
}

.contact-card3 {
    background-color: cornflowerblue;
    color: white;
    font-weight: bolder;
    height: 10em;
    vertical-align: middle;
}

.contact-card4 {
    background-color: thistle;
    color: white;
    font-weight: bolder;
    height: 10em;
    vertical-align: middle;
}

.contact-div-text {
    padding: 0;
    display: inline-block;
}

.contact-textbox {
    border: .75em;
    border-style: solid;
    margin: .25em;
    display: inline-block;
}




/*stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block*/
/*developer.mozilla.org/en-US/docs/Web/CSS/margin*/
.contact-checkbox input[type="checkbox"] {
    width: 4em;
    height: 3em;
    font-size: 2em;
    vertical-align: middle;
    display: inline-block;
    margin: 0 .25em 0 .25em;
}

.contact-button {
    border: darkgray;
    border-style: solid;
    border-width: .25em;
    font-weight: bolder;
}


/***********************************************************/
/*Badges*/
/***********************************************************/

.badge-disabled {
    background-color: lightgray;
}


/***********************************************************/
/*Breadcrumb*/
/***********************************************************/



/***********************************************************/
/*Bullets*/
/***********************************************************/

/*better to use class as list-unstyled*/
.no-bullet {
    list-style-type: none;
}


/***********************************************************/
/*Buttons*/
/***********************************************************/

/*stackoverflow.com/questions/862010/how-to-wrap-text-of-html-button-with-fixed-width
This should stay in to keep the text from overflowing and allow normal breaking so the button retains its expected width*/
.btn {
    white-space: normal !important;
    word-wrap: break-word;
    height: 100%;
    margin-bottom: .5em;
}

/*Custom buttons charliepark.org/bootstrap_buttons/*/

.btn-customgold {
    background-color: darkslategray;
    background-color: hsl(46, 24%, 30%);
    -ms-background-repeat: repeat-x;
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9e8f60", endColorstr="#5e563a");
    background-image: -moz-linear-gradient(top, #9e8f60, #5e563a);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, #9e8f60), color-stop(100%, #5e563a));
    background-image: -webkit-linear-gradient(top, #9e8f60, #5e563a);
    background-image: -o-linear-gradient(top, #9e8f60, #5e563a);
    background-image: linear-gradient(#9e8f60, #5e563a);
    border-color: darkslategrey;
    border-color: #5e563a #5e563a hsl(46, 24%, 25%);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
    -webkit-font-smoothing: antialiased;
    padding-left: 1em;
}


.btn-customsilver {
    background-color: grey;
    background-color: hsl(54, 14%, 56%);
    -ms-background-repeat: repeat-x;
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fafaf9", endColorstr="#9e9b7f");
    background-image: linear-gradient(#fafaf9, #9e9b7f);
    border-color: darkslategrey;
    border-color: #5e563a #5e563a hsl(46, 24%, 25%);
    color: white;
    font-weight: 600;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
    -webkit-font-smoothing: antialiased;
}

btn-customsilver-round {
    -ms-border-radius: 50%;
    border-radius: 50%;
}


/*Circular Button with Bootstrap on Codepen by John Noel Bruno
  To make a circle the border-radius is 1/2 of the width/height
  The width and height have to be equal*/

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    -ms-border-radius: 15px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

.btn-circle-signup {
    width: 3em;
    height: 3em;
    -ms-border-radius: 1.5em;
    border-radius: 1.5em;
    margin: .5em;
    font-size: 2em;
    font-weight: 700;
    line-height: 1em;
}

.btn-circle.btn-xl {
    width: 5em;
    height: 5em;
    padding: 10px 16px;
    -ms-border-radius: 2.5em;
    border-radius: 2.5em;
    font-size: 24px;
    line-height: 1.33;
}

.btn-rounded {
    width: 5em;
    height: 3.5em;
    padding: 10px 16px;
    -ms-border-radius: .175em;
    border-radius: .175em;
    font-size: 24px;
    line-height: 1.33;
}

.stationarySaveButton {
    background-color: #757486;
    color: white;
    padding: 10px 20px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    border-color: #837977;
}

.btn-view {
    width: 150px;
    height: 150px;
}

btn .btn-tscLeftBlockButton {
    text-align: left;
}

#CtrlSaveTop {
    font-size: 1.5em;
    font-weight: 600;
}

/*blog.codepen.io/legal/licensing/
  codepen.io/davidelvar/pen/dYMgrR  Rounded Bootstrap buttons by David Elmar Masson
  These are used on the buttons for the Participant side of the project because they are easier to use on mobile for older people or people with visual or dexterity challenges.
*/
.btn-default-rounded {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 14px;
    color: rgba(108, 88, 179, 0.75);
    letter-spacing: 1px;
    line-height: 15px;
    border: 2px solid rgba(108, 89, 179, 0.75);
    -ms-border-radius: 40px;
    border-radius: 40px;
    background: transparent;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

    .btn-default-rounded:hover {
        color: #FFF;
        background: rgba(108, 88, 179, 0.75);
        border: 2px solid rgba(108, 89, 179, 0.75);
    }

.btn-primary-rounded {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 14px;
    color: rgba(58, 133, 191, 0.75);
    letter-spacing: 1px;
    line-height: 15px;
    border: 2px solid rgba(58, 133, 191, 0.75);
    -ms-border-radius: 40px;
    border-radius: 40px;
    background: transparent;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.btn-circle {
    -ms-border-radius: 40px;
    border-radius: 40px;
}

.btn-primary-rounded:hover {
    color: #FFF;
    background: #3a85bf;
    background: rgba(58, 133, 191, 0.75);
    border: 2px solid rgba(58, 133, 191, 0.75);
}

.btn-success-rounded {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 14px;
    color: #67c067;
    color: rgba(103, 192, 103, 0.75);
    letter-spacing: 1px;
    line-height: 15px;
    border: 2px solid rgba(103, 192, 103, 0.75);
    -ms-border-radius: 40px;
    border-radius: 40px;
    background: transparent;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

    .btn-success-rounded:hover {
        color: #FFF;
        background: rgba(103, 192, 103, 0.75);
        border: 2px solid rgba(103, 192, 103, 0.75);
    }

.btn-info-rounded {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 14px;
    color: rgba(91, 192, 222, 0.75);
    letter-spacing: 1px;
    line-height: 15px;
    border: 2px solid rgba(91, 192, 222, 0.75);
    -ms-border-radius: 40px;
    border-radius: 40px;
    background: transparent;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

    .btn-info-rounded:hover {
        color: #FFF;
        background: rgba(91, 192, 222, 0.75);
        border: 2px solid rgba(91, 192, 222, 0.75);
    }

.btn-warning-rounded {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 14px;
    color: rgba(240, 173, 78, 0.75);
    letter-spacing: 1px;
    line-height: 15px;
    border: 2px solid rgba(240, 173, 78, 0.75);
    -ms-border-radius: 40px;
    border-radius: 40px;
    background: transparent;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

    .btn-warning-rounded:hover {
        color: #FFF;
        background: rgba(240, 173, 78, 0.75);
        border: 2px solid rgba(240, 173, 78, 0.75);
    }

.btn-danger-rounded {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 14px;
    color: rgba(217, 83, 78, 0.75);
    letter-spacing: 1px;
    line-height: 15px;
    border: 2px solid rgba(217, 83, 78, 0.75);
    -ms-border-radius: 40px;
    border-radius: 40px;
    background: transparent;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

    .btn-danger-rounded:hover {
        color: #FFF;
        background: rgba(217, 83, 78, 0.75);
        border: 2px solid rgba(217, 83, 78, 0.75);
    }


.btn-participant-rounded {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 14px;
    color: black;
    letter-spacing: 1px;
    line-height: 15px;
    border: 2px solid black;
    -ms-border-radius: 40px;
    border-radius: 40px;
    background: transparent;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

    .btn-participant-rounded:hover {
        color: #FFF;
        background: black;
        border: 2px solid black;
    }


    /*Modern Button used for signup and contact*/

.btn-modernBlck {
    padding: .25em .5em .25em .5em;
    background-color: #000000;
    color: #fff;
    border-color: #000000;
    height: 42px;
    line-height: 2em;
    font-weight: 600;
    border-radius: .75em;
    display: inline-block;
    transition-duration: 0.4s; /* Animation duration */
}

    .btn-modernBlck:hover, .btn-modernBlck:focus {
        border: .5em;
        border-color: #fff;
        background-color: #000000;
        color: #fff;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); /* Add shadow on hover */
    }

.btn-modernBlckSquare {
    padding: .25em .5em .25em .5em;
    margin-top: .25em;
    background-color: #000000;
    color: #fff;
    border-color: #000000;
    height: 2.5em;
    line-height: 2.5em;
    font-weight: 600;
    border-radius: 0;
    display: inline-block;
    transition-duration: 0.4s; /* Animation duration */
}

    .btn-modernBlckSquare:hover, .btn-modernBlckSquare:focus {
        border: .5em;
        border-color: #fff;
        background-color: #000000;
        color: #fff;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); /* Add shadow on hover */
    }


/***********************************************************/
/*Carousels*/
/***********************************************************/
/* Override the carousel so that the image doesn't leave a ghost */
#divCarousel-inner carousel-inner > .item > img, .carousel-inner > .item > a > img {
    width: 100%;
}

.carousel-caption {
    color: white;
}

    /*https://www.w3schools.com/css/css_image_transparency.asp*/

    .carousel-caption.transbox {
        padding: 1.25em;
        color: black;
        background-color: whitesmoke;
        -ms-opacity: 0.90;
        opacity: 0.90;
    }

    .carousel-caption.transbox-translucent {
        padding: 1.25em;
        color: black;
        background-color: whitesmoke;
        -ms-opacity: 0.70;
        opacity: 0.70;
    }

.carousel-control.transbox-dark {
    padding: .25em;
    background-color: #080808;
    -ms-opacity: 0.40;
    opacity: 0.40;
}

    /*This is required to keep the carousel controls from spreading too far out to either side of the picture*/
    /*stackoverflow.com/questions/35294520/bootstrap-carousel-controls-outside-of-carousel*/
    .carousel-control.transbox-dark.left {
        margin-left: -25px;
    }

    .carousel-control.transbox-dark.right {
        margin-right: -25px;
    }


#carousel-signUp-login .carousel-control.high-contrast {
    position: absolute;
    top: 0;
    bottom: 0;
    /*  left: auto;
    right: 0;*/
    width: 10%;
    font-size: 24px;
    color: black;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    background-image: none; /*removes the gradiant background from handles.*/
    filter: alpha(opacity=75);
    -ms-opacity: .75;
    opacity: .75;
    /*  margin-left: -.25em;  This brings the margin to the outside right of the inner picture
    margin-right: -.25em;     This brings the margin to the outside left of the inner picture*/
}

#carousel-signUp-login .glyphicon glyphicon-chevron-left {
    font-size: 1em;
}

#carousel-signUp-login .carousel-indicators li {
    background-color: #999;
    background-color: rgba(70, 70, 70, 0.25);
    /*margin-top: 1em;*/
    height: .5em;
    width: .75em;
}

#carousel-signUp-login .carousel-indicators .active {
    background-color: #444;
    height: .5em;
    /*margin-top: 1em;*/
    width: .75em;
}


/*Overview applies a carousel without background gradient, and moves the controls farther to the containing wall.Allows for light and dark backgrounds.*/

.overview .carousel-indicators li {
    background-color: #E6EBEE;
    height: .5em;
    width: .75em;
}

.overview .carousel-indicators .active {
    background-color: #5C5C5B;
    height: .5em;
    width: .75em;
}

.overview .carousel-control.left {
    background-image: none;
    color: #E6EBEE;
}

.overview .carousel-control.right {
    background-image: none;
    color: #E6EBEE;
}

.overview .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
    left: 25%;
}

.overview .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
    right: 25%;
}

.overview .carousel-indicators {
    bottom: 1em; /* lower the indicators using em */
    width: 100%; /* full width for proper centering */
    margin-left: 0; /* remove Bootstrap’s negative centering */
    left: 0; /* align container to the viewport */
    text-align: center;
}
    /* Extra-small (default) overrides using em */
.overview .carousel-indicators li {
        width: 0.40em; /* small dot */
        height: 0.40em;
        margin: 0.25em; /* spacing between dots */
    }

.overview .carousel-indicators .active {
        width: 0.5em; /* slightly larger active dot */
        height: 0.5em;
    }    


/***********************************************************/
/*Checkboxes*/
/***********************************************************/


.check-button {
    padding: 1em;
    margin: .5em;
}

.myCheckbox input[type="checkbox"] {
    margin-right: 1em; /*Space between the checkbox and the Checkbox Title*/
    width: 1em; /*width of the checkbox */
    height: 1em; /*height of the checkbox */
}

.myCheckboxLeftyLabel input[type="checkbox"] {
    margin-left: 2em; /*Space to the left of the checkbox*/
    width: 1.1em;
    height: 1.1em;
    font-size: 1.2em;
    vertical-align: middle;
    border: red;
    border-style: solid;
    border-width: .5em;
    font-weight: bolder;
}

.myCheckboxLeftyLabelPrograms input[type="checkbox"] {
    margin-left: 1.85em; /*Space to the left of the checkbox*/
    width: 1.5em;
    height: 1.5em;
    font-size: 1.15em;
    vertical-align: middle;
    border: #130269;
    border-style: solid;
    font-weight: 900;
}

.myHeftyCheckbox input[type="checkbox"] {
    margin-right: 1em; /*Space between the checkbox and the Checkbox Title*/
    width: 1.3em; /*width of the checkbox */
    height: 1.3em; /*height of the checkbox */
    font-size: 1.2em; /*The size of the Checkbox Check font*/
    vertical-align: middle;
}



/*This will style the asp.net checkbox. The display: flex is critical to keep the box and descriptive label on the same line through bootstrap*/
.checkboxlabel-med-flex {
    font-size: 1.5em;
    display: flex;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    max-width: 100%;
}

.checkbox-med-flex input[type="checkbox"] {
    margin-right: 1.3em; /*Space between the checkbox and the Checkbox Title*/
    width: 2.25em; /*width of the checkbox */
    height: 2.25em; /* height of the checkbox */
    font-size: 1em; /*The size of the Checkbox Check font*/
    border: black;
    border-style: solid;
    border-width: .15em;
}

.checkboxlabel-sm-flex {
    font-size: 1em;
    display: flex;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    max-width: 100%;
}

.checkbox-sm-flex input[type="checkbox"] {
    margin-right: 1em; /*Space between the checkbox and the Checkbox Title*/
    width: 1.75em; /*width of the checkbox */
    height: 1.75em; /* height of the checkbox */
    font-size: 1em; /*The size of the Checkbox Check font*/
    border: black;
    border-style: solid;
    border-width: .15em;
}

/*jQuery Referenced: Tells the Master checkbox that it wants to be included in the group check.*/
.myGroupCheckbox input[type="checkbox"] {
    width: 1.5em; /*width of the checkbox */
    height: 1.5em; /*height of the checkbox */
    font-size: 1em; /*The size of the Checkbox Check font*/
    vertical-align: middle;
}

.myCheckBoxSpace input[type="checkbox"] {
    margin-right: 1em; /*Space between the checkbox and the Checkbox Title*/
}

/*jQuery Referenced: Tells the Master checkbox that it doesn't want to be included.*/
.myLonerCheckbox input[type="checkbox"] {
    margin-right: 1em; /*Space between the checkbox and the Checkbox Title*/
    width: 1.5em; /*width of the checkbox */
    height: 1.5em; /*height of the checkbox */
    font-size: 1em; /*The size of the Checkbox Check font*/
    vertical-align: middle;
}

.myHeadingCheckbox input[type="checkbox}"] {
    font-size: 1em; /*The size of the Checkbox Check font*/
}

.myHeadingLargeCheckbox input[type="checkbox"] {
    margin-right: 1em; /*Space between the checkbox and the Checkbox Title*/
    width: 1.5em; /*width of the checkbox */
    height: 1.5em; /*height of the checkbox */
    font-size: 1em; /*The size of the Checkbox Check font*/
    vertical-align: middle;
}


.chkboxlist td {
    font-size: 1em;
}

input[type="checkbox"].myHeftyCheckbox + label {
    color: #ffffff;
    font-weight: 100;
    font-size: 1em;
    font-style: normal;
    display: flex;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
}
/*tipue.com/blog/radio-checkbox/*/


/***********************************************************/
/*Container */
/***********************************************************/
.container {
    width: 95%;
}


/**********************************************************/
/*Dates*/
/**********************************************************/

.myGroupDate {
    font-style: normal
}

.iti__flag-container {
    z-index: 4;
}

/***********************************************************/
/*Description Lists*/
/***********************************************************/

dd .dd-space {
    margin: 1em;
}

/* Controlling whitespace will override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    float: left;
    width: auto;
    clear: left;
    white-space: normal;
    font-size: 1em;
    margin-right: 1em;
}

/*.dl-horizontal dd {
    margin-left: 2em;
}*/

dt .dt-space {
    margin: .5em;
}

dt .dt-strong {
    font-weight: 600;
}

/*geeksforgeeks.org/how-to-write-dt-and-dd-element-on-the-same-line-using-css/*/





.column-header {
    font-weight: normal;
    text-decoration: underline dashed;
}

.info-list {
    list-style: none;
}

    .info-list li {
        padding-left: 45px;
        padding-bottom: 15px;
        font-size: 1.5em;
    }

        .info-list li:nth-child(odd) {
            font-weight: bold;
        }

.terms .list-group-item {
    display: list-item;
}
/***********************************************************/
/*Fonts*/
/***********************************************************/
.bolded-normal {
    font-weight: bold;
}

.bolded-emphasized {
    font-weight: bold;
    font-size: 1.5em;
}

.home {
    color: #4182B6;
}

/*Good for outlines using using header and li combinations*/

.title-light {
    color: ghostwhite;
}

.title-strong {
    font-weight: bold;
    font-size: 1.25em;
}

.title-sub {
    color: #4182B6;
}

.sub-li {
    color: #969696;
    font-size: .9em;
}

.caption-light {
    font-size: 1em;
    color: ghostwhite;
}

.message-response-area {
    font-weight: 700;
    font-size: 1.75em;
    color: #008080;
    text-align: right;
}

.strong-infoLink {
    text-decoration: underline;
    font-weight: bolder;
}

.text-message {
    font-size: 1.15em;
}

.weak-infoLink {
    text-decoration: underline;
}

.moveTextCenter {
    vertical-align: middle;
}

.moveTextTop {
    vertical-align: text-top;
}

.moveTextBottom {
    vertical-align: text-bottom;
}

.adText {
    color: #337ab7;
    background-color: whitesmoke;
    border: black;
    border-style: double;
    border-color: black;
}

.adTextReverse {
    color: black;
    background-color: whitesmoke;
}

.adCopy {
    color: black;
    font-size: 1.5em;
}

.adLink {
    color: #337ab7;
    font-size: 1.25em;
}

.adList {
    font-size: 1em;
}

.adPrice {
    font-size: 1em;
    text-align: center;
}

.directions {
    font-size: 1.25em;
    color: lightslategrey;
}

/*Adjust typeset for the narrow selection boxes*/
.collapse .summary {
    font-size: 1em;
    font-kerning: normal;
}

.collapse .instructions {
    font-size: 1.2em;
    font-kerning: normal;
}

/*Adjust typeset for a smoother full address*/
.address-full {
    font-size: .9em;
    font-kerning: inherit;
}

.address-title {
    font-kerning: normal;
    color: navy;
    font-weight: 600;
}

.address-heading {
    font-kerning: normal;
    color: navy;
    font-weight: 400;
}

.status {
    font-kerning: normal;
    color: navy;
    font-weight: 600;
}


.text-outline {
    text-shadow: -.5px -.5px 0 #53531F, .5px -.5px 0 #53531F, -.5px .5px 0 #53531F, .5px .5px 0 #53531F;
    color: white;
}

.jumbotron .videobox-detail-md {
    font-size: 1.3em;
    font-kerning: normal;
    color: #130269;
    font-weight: 300;
}

/***********************************************************/
/*Footers*/
/***********************************************************/
.stationaryFooter {
    position: fixed;
    bottom: +35px;
    left: 800px;
}

.clear-background {
    background: none;
}

.hr-xs {
    border-color: darkolivegreen;
}

.hr-sm {
    border-color: whitesmoke;
}

.hr-md {
    border-color: black;
}

.hr-lg {
    border-color: darkkhaki;
}

.header-links {
    font-size: 1.5em;
}

.footer-links {
    font-size: 1.75em;
}

.side-links {
    font-size: 1.5em;
}
/***********************************************************/
/*Groups*/
/***********************************************************/

.group-margin {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.group-margin-bottom {
    margin-bottom: 1em;
}

.group-padding {
    padding: 1em;
}

.items-group-margin {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.group-links {
    font-size: 1.35em;
}

#leftNav {
    vertical-align: middle;
}

.navbar-inverse .navbar-nav > li > a {
    color: #f5f5f5;
}

    .navbar-inverse .navbar-nav > li > a:hover {
        color: #cecece;
    }


.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    -ms-transform: none;
    -webkit-transform: none;
    transform: none;
}

.link-header {
    font-weight: normal;
    color: #337ab7;
    text-decoration: none;
    -ms-border-radius: 0;
    border-radius: 0;
}

/************************************************************/
/*Labels*/
/************************************************************/

.counter-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 1.5em;
    font-weight: 300;
}

.label-flexalign {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 1.5em;
    font-weight: 300;
}

.label-counter {
    background-color: #f8f8ed;
    color: #ff6a00;
    font-size: medium;
    font-weight: 400;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/************************************************************/
/*Navigation*/
/************************************************************/

.url-terms {
    font-weight: normal;
    font-size: .75em;
    color: #337ab7;
    text-decoration: none;
    -ms-border-radius: 0;
    border-radius: 0;
    word-wrap: break-word;
}

.url-pattern {
    font-weight: 400;
    font-size: 1.25rem;
    color: #78909C;
    text-decoration: none;
    -ms-border-radius: 0;
    border-radius: 0;
    word-wrap: break-word;
}


.contact-info-main a:link, .contact-info-main a:active {
    color: blue;
}

.contact-info-main a:visited {
    color: brown;
}

.contact-info-main a:hover {
    color: black;
}

#nav-img-logo {
    width: 3em;
    margin: .2em 1em .5em .5em;
}

#menuToggle {
    margin-top: 0;
}

#menu-title {
    color: white;
    margin-bottom: 0;
}


/***********************************************************/
/*Panels*/
/***********************************************************/
.panel-footer {
    -ms-opacity: 0.95;
    opacity: 0.95;
    filter: alpha(opacity=95); /* For IE8 and earlier */
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
}

.form-control {
    background-color: aliceblue;
    color: black;
    font-weight: 600;
}

/*.panel-footer:hover {
        opacity: 1.5;
        filter: alpha(opacity=100);
        } /* filter is for IE8 and earlier */


.panel-main-solid {
    -ms-opacity: 1.0;
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
}

.panel-main-data {
    background-color: #ECECEC;
}

    .panel-main-data .control-label {
        color: black;
    }

.panel-high-opaque {
    -ms-opacity: 0.90;
    opacity: 0.90;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}

.panel-med-high-opaque {
    -ms-opacity: 0.80;
    opacity: 0.80;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}

/***********************************************************/
/*Placement*/
/***********************************************************/

/*For the tsc main form content*/

body {
    margin-top: 6.5em;
}

.category-panel {
    padding-top: 3em;
}

.centerForm {
    top: 1em;
}

.center-text {
    text-align: center;
}


.center-spaced {
    margin-top: 2em;
    margin-bottom: 2em;
    text-align: center;
}

.flushToLeftWall {
    margin-left: 0;
}

.flush-to-bottom {
    display: inline-block;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.no-left {
    margin-left: 0;
    padding-left: 0;
}

.no-right {
    margin-right: 0;
    padding-right: 0;
}

.indent {
    margin-left: .75em;
}

.nopad {
    padding: 0;
}

.padding-horizontal {
    padding-left: .25em;
    padding-right: .25em;
}

.padding-vertical {
    padding-top: .75em;
    padding-bottom: .75em;
}

.spread-normal {
    font-kerning: normal;
}

/*sitepoint.com/watch-create-elegant-and-responsive-bootstrap-buttons/
    This makes a responsive bootstrap button and overcomes whitespace issues*/

.text-break {
    white-space: normal;
}


.long-email-address {
    word-wrap: break-word;
}

.long-label {
    word-wrap: break-word;
}

/*Provide padding to move the carousel, picture or buttons down from top margin.*/

.lefty-full {
    padding-top: 1em;
}

.lefty-partial {
    padding-top: 4em;
}

.righty {
    padding-top: 6em;
}

.righty-full {
    padding-top: 1em;
}

.righty-partial {
    padding-top: 4em;
}

/*style and margin for tsc label presentation*/

.fieldset-spacer {
    padding: 1.5em;
}

.section-spacer {
    padding: 1em;
}

.heading-spacer {
    padding: 2em;
}

.heading-spacer-sm {
    padding: .75em;
}

.phone-spacer {
    margin-left: 1em;
}

.sidelink-spacer {
    padding: 1.25em;
}

.textbox-spacer {
    padding: .5em;
}

.top-spacer {
    padding-top: 1em;
}

.top-spacer-lg {
    padding-top: 3em;
}

.bottom-spacer {
    padding-bottom: 1.5em;
    margin-bottom: 1.5em;
}


.tscLftMargin {
    margin-left: 15px;
    padding: 9px;
    -ms-border-radius: 3px;
    border-radius: 3px;
}

.timeinputboxlabel {
    margin-left: 15px;
    margin-right: 15px;
}

.titleLftMargin {
    margin-left: 10px;
    padding: 9px;
    -ms-border-radius: 3px;
    border-radius: 3px;
}

.table-placement {
    margin-bottom: 1em;
}

.tscTop-buffer {
    margin-top: 4em;
}

.tscBottom-buffer {
    margin-bottom: 2em;
}

.tscTop-smallBuffer {
    margin-top: 2em;
}

/*gedd.ski/post/position-sticky
tipue.com/blog/css-sticky */

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 5em;
    color: #fff;
    text-align: center;
    -ms-border-radius: 2px;
    border-radius: 2px;
}

.sticky-div {
    position: sticky;
    position: -webkit-sticky;
    top: 5em;
    border-radius: 2px;
}

.tightPara {
    margin: 0;
}


/***********************************************************/
/*Radio Buttons*/
/***********************************************************/

/*tipue.com/blog/radio-checkbox/*/

.form-radio {
    /*-webkit-appearance: none;
    -moz-appearance: none;
    display: inline-block;
    position: relative;
    background-color: #f1f1f1;
    color: #666;
    top: 10px;
    height: 30px;
    width: 30px;
    border: 0;
    border-radius: 50px;
    cursor: pointer;
    margin-right: 7px;
    outline: none;*/
    background-color: #f1f1f1;
    color: #666;
    top: 10px;
    height: 30px;
    width: 30px;
    border: 0;
    -ms-border-radius: 50px;
    border-radius: 50px;
    cursor: pointer;
    margin-right: 7px;
    outline: none;
}

    .form-radio:checked::before {
        position: absolute;
        font: 13px/1 'Open Sans', sans-serif;
        left: 11px;
        top: 7px;
        content: '\02143';
        -ms-transform: rotate(40deg);
        -webkit-transform: rotate(40deg);
        transform: rotate(40deg);
    }

    .form-radio:hover {
        background-color: #f7f7f7;
    }

    .form-radio:checked {
        background-color: #f1f1f1;
    }

/*This is for the square radio button and will not work side-by-side with the btn-default.*/
.btn-radiobox-lt {
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 1px #000000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
    background-color: #fff;
    border-color: #ccc;
    color: black;
    font-weight: 600;
}

    .btn-radiobox-lt:active, .btn-radiobox-lt.active {
        background-color: lightsteelblue;
        border-color: #adadad;
    }

/*This is for the square radio button and will not work side-by-side with the btn-default.*/
.btn-radiobox-neut {
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 1px #000000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
    background-color: #fff;
    border-color: #ccc;
    color: black;
    font-weight: 600;
}

    .btn-radiobox-neut:active, .btn-radiobox-neut.active {
        background-color: lightgrey;
        border-color: #adadad;
    }

/*This is for the square radio button and will not work side-by-side with the btn-default.*/
.btn-radio-lt {
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 1px #000000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
    background-color: #fff;
    border-color: #ccc;
}

    .btn-radio-lt:active, .btn-radio-lt.active {
        background-color: lavender;
        border-color: #adadad;
    }

.btn-radio-dk {
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 1px #000000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
    background-color: #fff;
    border-color: #ccc;
}

    .btn-radio-dk:active, .btn-radio-dk.active {
        background-color: lightslategray;
        border-color: #adadad;
    }

.label-radio {
    margin-left: 10px;
    padding: .25rem;
    -ms-border-radius: 3px;
    border-radius: 3px;
    display: flex;
    font-weight: 400;
}

.label-radio-description {
    font-weight: 500;
    color: #130269;
    font-size: 1.75rem;
    margin-bottom: 1.5em;
}

span.mr-2 input[type="radio"] {
    margin-right: 5px;
}

span.ml-2 input[type="radio"] {
    margin-left: .5em;
}


/*Used for list items selection*/
.inline-itemlist input[type="radio"] {
    width: auto;
    margin-left: 1em;
}

.inline-itemlist label {
    display: inline;
    margin-left: .5em;
}

.label-pick-claims {
    font-weight: 700;
    font-size: 1em;
    color: black;
    margin-bottom: .25em;
}


.collapse-window-sm {
    margin: 0;
}

    .collapse-window-sm .radio-selection {
        margin-bottom: .5rem;
        margin-top: .5rem;
    }

    .collapse-window-sm .label-radio {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 1.5rem;
    }

    .collapse-window-sm .label-radio-description {
        margin-bottom: 1.75rem;
    }

.list_block-radio {
    border: 1px solid #dce4ea;
    padding: 8px 8px 0 0;
    border-top: #000000;
    margin: 0 0 10px;
}

/*For styling the vertical radio button layout: adapted from Royal Multipurpose*/
.rel_thumb {
    width: auto;
    float: left;
    height: auto;
    margin: 5px 10px 0 0;
}


.rel_right {
    font-size: 24px;
    line-height: 24px;
    font-weight: 400;
    margin-top: .5em;
    margin-bottom: 1em;
    vertical-align: bottom;
}


.list_block {
    border: 1px solid #dce4ea;
    padding: 15px 12px 25px;
    border-top: #000000;
    margin: 0 0 20px;
}


.related_post_sec ul li {
    padding: 0 0 6px;
    margin: 0 0 18px;
    border-bottom: 1px solid #dce4ea;
    display: block;
    clear: both;
    width: 100%;
    float: left;
}


/***********************************************************/
/*Rows*/
/***********************************************************/

.row-margin-bottom {
    margin-bottom: 2em;
}

.row-margin-top {
    margin-top: 2em;
}


.row-BgColor {
    padding: 35px;
    background-color: white;
    border: 1px solid #A6CFD1;
}

.row-bg-hicontrast {
    padding: 35px;
    background-color: black;
}

.row-fg-hicontrast {
    color: ghostwhite;
}

/***********************************************************/
/*Sections*/
/***********************************************************/
.intro-section {
    margin-top: 2em;
    margin-bottom: 2em;
}

.login-div {
    margin-left: 1em;
}

#churchInfo h3 {
    margin-top: 1em;
    margin-bottom: .25em;
}



/***********************************************************/
/*Selections*/
/***********************************************************/
/*Styles for setting up selectable jumbotrons (Ex: picking pictures)*/

.unselected-content {
    border: 4px solid white;
}

/*Pictue selection*/

.selectable-images {
    border: .5em solid white;
}

.selected-image {
    border: 4px solid dodgerblue
}

/***********************************************************/
/*Steps*/
/***********************************************************/


.btn-stepsContinue {
    color: #ffffff;
    background-color: #965F31;
    border-color: #130269;
    fill-opacity: 60;
}


.btn-stepsWizard {
    color: #ffffff;
    background-color: #965F31;
    border-color: #130269;
    margin-bottom: .5em;
}

    .btn-stepsWizard:hover,
    .btn-stepsWizard:focus,
    .btn-stepsWizard:active,
    .btn-stepsWizard.active,
    .open .dropdown-toggle.btn-stepsWizard {
        color: #ffffff;
        background-color: #593227;
        border-color: #130269;
    }

    .btn-stepsWizard:active,
    .btn-stepsWizard.active,
    .open .dropdown-toggle.btn-stepsWizard {
        background-image: none;
    }

    .btn-stepsWizard.disabled,
    .btn-stepsWizard[disabled],
    fieldset[disabled] .btn-stepsWizard,
    .btn-stepsWizard.disabled:hover,
    .btn-stepsWizard[disabled]:hover,
    fieldset[disabled] .btn-stepsWizard:hover,
    .btn-stepsWizard.disabled:focus,
    .btn-stepsWizard[disabled]:focus,
    fieldset[disabled] .btn-stepsWizard:focus,
    .btn-stepsWizard.disabled:active,
    .btn-stepsWizard[disabled]:active,
    fieldset[disabled] .btn-stepsWizard:active,
    .btn-stepsWizard.disabled.active,
    .btn-stepsWizard[disabled].active,
    fieldset[disabled] .btn-stepsWizard.active {
        background-color: #965F31;
        border-color: #130269;
    }

    .btn-stepsWizard .badge {
        color: #965F31;
        background-color: #ffffff;
    }

.step {
    border-style: none;
    padding-right: 0;
    margin-right: 1.5em;
}

.step-button {
    font-kerning: normal;
    margin-bottom: .5em;
}

.step-group {
    margin-top: 1em;
    margin-left: 3em;
    margin-bottom: 1em;
}

.step-label {
    color: #965F31;
}

.stepsDropDown-panel {
    color: #965F31;
    background-color: lightgrey;
    border-color: #8a6d3b;
}

.stepsPlacard-panel {
    color: black;
    background-color: lightsteelblue;
    border-color: #8a6d3b;
}


.selectedStep {
    background-color: rgb(255, 200, 0);
    background-color: rgba(255, 100, 0, 0.3);
    color: #8a6d3b;
}

.steps-submit {
    border-color: #8a6d3b;
    border-width: thin;
}

.steps-churchAddress {
    color: black;
}


/***********************************************************/
/*Tables*/
/***********************************************************/

.table-scroll {
    overflow-x: scroll;
}

/*Control the style of the table header with no link*/
.header-AllChurches-table {
    color: white;
    text-decoration: none;
    background-color: #000000;
}

    .header-AllChurches-table:hover {
        color: black;
    }

.header-MyChurch-table {
    color: white;
    text-decoration: none;
    background-color: #5bc0de;
}

    .header-MyChurch-table:hover {
        color: black;
    }

.pricing {
    text-align: right;
}

/***********************************************************/
/*Tooltips*/
/***********************************************************/


/*jsfiddle.net/cSSUA/209/*/
.tooltip-wrapper .btn[disabled] {
    /* don't let button block mouse events from reaching wrapper */
    pointer-events: none;
}
/*@JohnLehmann stackoverflow.com/questions/13311574/how-to-enable-bootstrap-tooltip-on-disabled-button*/
.tooltip-wrapper.disabled {
    /* OPTIONAL pointer-events setting above blocks cursor setting, so set it here */
    cursor: not-allowed;
}

/***********************************************************/
/*Validation*/
/***********************************************************/

/*change the alert to show up in a kind way.  Must be used inside a div of class pull-right to rest on bottom right-hand side of textbox*/
.alert {
    padding: 7px;
    margin-bottom: 1.5em;
    border: 1px solid transparent;
    -ms-border-radius: 1px;
    border-radius: 1px;
    text-align: left;
    position: relative;
    display: inline-block;
}

.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger-aligned {
    color: black;
    font-weight: 600;
    background-color: #f2dede;
    border-color: red;
    padding: .5em 1.25em;
    margin: 1em;
    -ms-border-radius: 1em;
    border-radius: 1em;
    white-space: normal !important;
    word-wrap: break-word;
    height: 100%;
    text-align: left;
    vertical-align: middle;
}

.alert-warning-aligned {
    color: #8a6d3b;
    font-weight: 600;
    font-size: 1em;
    background-color: #fcf8e3;
    border-color: burlywood;
    padding: .5em 1.25em;
    margin: 1em;
    -ms-border-radius: 1em;
    border-radius: 1em;
    border-style: solid;
    white-space: normal !important;
    word-wrap: break-word;
    height: 100%;
    text-align: left;
    vertical-align: middle;
}


.alert-basic {
    font-size: 15px;
    font-weight: 700;
}

.alert-block {
    display: block;
    width: 100%;
}

.messageLine {
    padding: .55em;
    margin: .5em;
}

.message-info {
    font-weight: normal;
    color: #337ab7;
    text-decoration: none;
    -ms-border-radius: 0;
    border-radius: 0;
}

.message-title {
    font-size: 1.75em;
    font-weight: 500;
}

.message-important {
    background-color: aliceblue;
    font-weight: 700;
}

.message-md-dark {
    color: #FF9872;
    font-size: 1.5em;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.message-sm-light {
    color: navy;
    font-size: 1em;
}

.message-text {
    font-size: 1em;
}

.message-text-med {
    font-size: 1.5em;
}

.message-text-lg {
    font-size: 2em;
}

.message-div-referral {
    margin: 0 1em 1em 1em;
}

.message-div-description {
    margin: 1em;
}

/*To place a line between error messages.*/
.pickprograms .custom-error::after {
    content: "\a";
    white-space: pre;
}

.tscfieldvalidation {
    color: ActiveCaption;
}


.tscfieldvalidationdark {
    color: #ff6a00;
    font-size: medium;
    font-weight: 400;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}


/***********************************************************/
/*Subscription Pages with default Theme with Styles_Informational.css*/
/***********************************************************/


.subscriptions #enroll a{
    color: black;
    background-color: #5cb85c;
    border-color: #4cae4c;
    color: #FFF;
    display: block;
}

.subscriptions #enroll a:hover {
    color: white;
    background-color: black;
}

.subscriptions div.informational .panel-heading a {
    color: black;
    text-decoration-line: underline;
    font-weight: 500;
}

.subscriptions .list_block {
    border: none;
    padding: 1em 1em 2em;
}

.subscriptions.container-fluid {
    padding-right: 5px;  
    padding-left: 5px;
}

.subscriptions table, th, td {
    text-align: right;
}

.subscriptions .decorated-list-circle {
    list-style-type: circle;
}


/***********************************************************/
/*Media Queries*/
/***********************************************************/
/*Change the breakpoint of the nav: stackoverflow.com/questions/28659556/change-navbar-breakpoint-in-bootstrap-3-3-2
  This is very important for seeing the entire view area on all device sizes.
*/

@media (max-width: 1080px) {
    .navbar-header {
        float: none;
    }

    .navbar-left, .navbar-right {
        float: none !important;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-nav {
        float: none !important;
        margin-top: 7.5px;
    }

        .navbar-nav > li {
            float: none;
        }

            .navbar-nav > li > a {
                padding-top: 10px;
                padding-bottom: 10px;
            }

    .collapse.in {
        display: block !important;
    }

    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: lightgoldenrodyellow;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .navbar-toggle {
        padding-top: 0;
    }
}
/*319px or smaller is even a little bigger than iPhone mini or Samsung Galaxy in portrait*/
@media only screen and (max-width: 319px ) {
    .infoTitle {
        font-size: 1.85rem;
    }
}
/*All x-small screens*/
@media only screen and (max-width: 768px) {
    #RightySignUp .righty-partial {
        padding-top: 2em;
    }

    .mobileTitle {
        text-align: center;
    }

    .detail dd {
        margin-left: 2.5em;
    }

    .about ul {
        padding-left: .1em;
        padding-right: .1em;
    }

    .contact-checkbox input[type="checkbox"] {
        width: 2em;
        height: 2em;
        font-size: 2em;
    }

    .contact-panel h4 {
        font-size: 1.5em;
        margin-top: 1.25em;
    }

    .informational ul {
        padding-left: 1em;
        padding-right: 1em;
    }

    .programs ol {
        padding-left: 0;
    }

    .programs .row {
        padding-left: .25em;
        padding-right: .25em;
    }

    .programs .padding-horizontal {
        padding-left: .1em;
        padding-right: .1em;
    }

    .programs .container {
        width: 100%;
    }

    .overlap .myCheckboxLeftyLabel {
        float: right;
    }

    .signup ol {
        padding-left: .4em;
    }

    body .terms {
        font-size: .8em;
    }

    .url-terms {
        font-size: .6em;
    }

    #ConfirmSuccess ul {
        padding-left: 0;
    }

    #labelPlacard {
        padding-left: 0;
    }

    #labelDropDown {
        padding-left: 0;
    }

    #searchPanels {
        padding-left: 0;
        padding-right: 0;
    }
}
/*All x-small and small screens*/
@media only screen and (max-width: 992px) {
    .table-scroll-xAxis {
        overflow-x: scroll;
    }
}
/*360px is the size of a Sony Xperia*/
/*Extra Small bootstrap xs*/
@media only screen and (min-width : 320px) and (max-width : 480px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .body-content {
        padding: .5em .25em .5em .25em;
    }

    .panel .centerform {
        padding: .1em;
        margin: .1em;
        border: .1em;
    }

    .infoTitle {
        font-size: 2rem;
    }
}
/*Extra Small bootstrap xs*/
@media only screen and (min-width: 480px) and (max-width: 600px) {
    h1 {
        font-size: 2.7rem;
    }

    h2 {
        font-size: 2.3rem;
    }

    .body-content {
        padding: 1.5em .25em .5em .25em;
    }

    .panel .centerform {
        padding: .1em;
        margin: .1em;
        border: .1em;
    }
}
/*Extra Small bootstrap xs*/
@media only screen and (min-width: 600px) and (max-width: 768px) {
    h1 {
        font-size: 3.2rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    .body-content {
        padding: 1.5em .25em .5em .25em;
    }

    .panel .centerform {
        padding: .1em;
        margin: .1em;
        border: .1em;
    }
}
/*Small bootstrap sm*/
@media only screen and (min-width: 768px) and (max-width: 992px) {
    h1 {
        font-size: 3.5rem;
    }

    h2 {
        font-size: 2.8rem;
    }
}
/*Medium bootstrap md*/
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    h1 {
        font-size: 3.7rem;
    }

    h2 {
        font-size: 3.0rem;
    }

    p {
        font-size: 1em;
    }

    .items-group-margin {
        margin-top: 0;
        margin-bottom: 1.5em;
    }

    .table-scroll-xAxis {
        overflow-x: scroll;
    }
}
/*Dell XPS 13 9635*/
/*Large bootstrap lg*/
@media only screen and (min-width: 1200px) and (max-width: 1366px) {
    h1 {
        font-size: 3.9rem;
    }

    h2 {
        font-size: 3.2rem;
    }

    h3 {
        font-size: 2.6rem;
    }

    p {
        font-size: 1.6rem;
    }

    li {
        font-size: 1.6rem;
    }

    .items-group-margin {
        margin-top: 0;
        margin-bottom: 1.5em;
    }

    .leftFormLgScreen {
        width: 1800px; /*Wider background image for TV screens*/
    }

    .modal-lg {
        width: 950px; /* New width for large modal */
    }

    .table-scroll-xAxis {
        overflow-x: scroll;
    }
}
/*Large TV Screens like Sony Bravia*/
@media only screen and (min-width: 1367px) and (max-width: 1920px) {
    h1 {
        font-size: 4rem;
    }

    h2 {
        font-size: 3.2rem;
    }

    h3 {
        font-size: 2.8rem;
    }

    p {
        font-size: 2rem;
    }

    li {
        font-size: 1.6rem;
    }

    .infoTitle {
        font-size: 3rem;
    }

    .items-group-margin {
        margin-top: 0;
        margin-bottom: 1.5em;
    }

    .leftFormLgScreen {
        width: 1800px; /*Wider background image for TV screens*/
    }

    .modal-lg {
        width: 950px; /* New width for large modal */
    }

    .table-scroll-xAxis {
        overflow: hidden;
    }
}
/*Hi-Res monitors like Omen*/
@media screen and (min-width: 1921px) {
    h1 {
        font-size: 5rem;
    }

    h2 {
        font-size: 4.2rem;
    }

    h3 {
        font-size: 3.8rem;
    }

    p {
        font-size: 2.8rem;
    }

    li {
        font-size: 1.6rem;
    }

    .infoTitle {
        font-size: 3.5rem;
    }

    .items-group-margin {
        margin-top: 0;
        margin-bottom: 1.5em;
    }

    .leftFormLgScreen {
        width: 2325px; /*Wider background image for TV screens*/
    }

    .modal-lg {
        width: 950px; /* New width for large modal */
    }

    .panel-footer {
        -ms-opacity: 0.75;
        opacity: 0.75;
        filter: alpha(opacity=75); /* For IE8 and earlier */
    }

    .table-scroll-xAxis {
        overflow: hidden;
    }

    .img-full {
        min-width: 100%;
    }
}

.PagerBar a, .PagerBar span {
    padding-left: 5px;
    padding-right: 5px;
}