/*
Primary Color: #669933 (Publix Green) 		- NEW ADA Compliant color: #2f880f
#476b24 (Darker / Selected)
#84B751 (Brighter)
*/

/* Debug Styles */
#debug-menu {
    position: fixed;
    bottom: 0;
    right: 0;
}

    #debug-menu button:focus {
        border: 1px solid red;
    }
/* */


/* A few things from publix-scaffolding.css */
/* START RARE-04-19-2016 : A couple of updates for the "sticky footer" */
html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0;
    margin-bottom: 90px; /* Set the margin-bottom of body here....and it MUST match .footer-bg 'height' */
    width: 100%;
    font-size: 16px;
    line-height: 24px;
    font-family: mrGeorge, arial, helvetica, sans-serif;
    color: #565656;
    /*background-color: #f6f7f7;*/
    background-color: white;
}
/* END RARE-04-19-2016 : A couple of updates for the "sticky footer" */

/*.col-md-4.form-group {
width: 100%;
}*/
select {
    border: 1px solid #ccc;
    width: 100%;
    height: 40px;
    border-radius: 4px;
    padding-left: 10px;
}

:-ms-input-placeholder {
    color: gray;
}

::-moz-placeholder { /* Firefox 19+ */
    color: gray;
}

:-moz-placeholder { /* Firefox 18- */
    color: gray;
}

#page-title {
    position: relative;
}

    #page-title > img {
        float: left;
        margin-top: 0;
    }

    #page-title h1 {
        margin-top: 24px;
        padding-right: 200px;
    }

        #page-title h1.wrap {
            font-size: 24px;
        }

        #page-title h1.empty {
            border: none;
        }

img.block {
    margin: 12px 0;
}

img.full {
    margin-bottom: 24px;
}

hr {
    margin: 24px 0;
    border: 0;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #fff;
}

iframe {
    margin-bottom: 24px;
}
/* END publix-scaffolding.css */


/* A few things from publix-typography.css */
p {
    margin: 0 0 24px;
    padding: 0 18px;
}

    p.no-indent {
        padding: 0;
    }

    p img {
        padding: 0 14px 7px 0;
    }

        p img.pull-right {
            padding: 0 0 7px 14px;
        }

.text-small,
small {
    font-size: 12.012px;
}

    .text-small a,
    small a {
        font-size: 12.012px;
    }

strong {
    font-weight: 700;
}

em {
    font-style: italic;
}

cite {
    font-style: normal;
}

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

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

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

.caps {
    text-transform: uppercase;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    margin: 14px 0;
    line-height: 24px;
    color: inherit;
    cursor: default;
    text-rendering: optimizelegibility;
    color: #004a2e;
}

    h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
        font-weight: 400;
        line-height: 1;
        color: #999;
    }

    h1 .indent, h2 .indent, h3 .indent, h4 .indent, h5 .indent, h6 .indent {
        margin-left: 18px;
    }

    h1 .borderless, h2 .borderless, h3 .borderless, h4 .borderless, h5 .borderless, h6 .borderless {
        margin-bottom: 7px;
        border-bottom: none;
        line-height: 28px;
    }

    h1.marginless, h2.marginless, h3.marginless, h4.marginless, h5.marginless, h6.marginless {
        margin-bottom: 3px;
    }

    h1.no-left-padding, .h1.no-left-padding {
        padding: 0 18px 0 0;
    }

h1, .h1 {
    margin: 0 0 24px;
    padding: 0 18px 8px;
    border-bottom: 1px solid #e5e5e5;
    font-family: mrGeorge, arial, helvetica, sans-serif;
    font-weight: 400;
    line-height: normal;
}

h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6 .h6 {
    font-family: mrGeorge, arial, helvetica, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

h1, .h1 {
    font-size: 24px;
}

h2, .h2 {
    font-size: 16px;
    line-height: 24px;
}

h3, .h3 {
    font-size: 14px;
    line-height: normal;
}

    h3.lg, .h3.lg {
        font-size: 18px;
    }

h4, .h4 {
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
    text-transform: none;
}

h5, .h5 {
    border-bottom: 1px solid #e5e5e5;
    font-size: 12px;
}

h6, .h6 {
    font-size: 12px;
}

h1 small {
    font-size: 20px;
}

h2 small {
    font-size: 14px;
}

h3 small {
    font-size: 12px;
}

h4 small {
    font-size: 12px;
}

a {
    font-family: mrGeorge, arial, helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #2f880f;
    text-decoration: none;
}

    a:link,
    a:visited {
        /*color: #2f880f; --xmch9 made one shade darker to meet contrast requirements on gray background WCAG*/
        color: #266d0c;
    }

    a:active,
    a:hover,
    a:focus {
        color: #57822B;
    }

    a [class^="icon-"],
    a [class*=" icon-"] {
        margin-right: 10px;
        color: #ccc;
    }

    a .icnbtn {
        color: inherit;
    }

    a .icon-circle-p {
        margin-right: 0;
    }

    a.language {
        margin-top: -56px;
        margin-right: 18px;
        display: block;
        float: right;
    }

    a[href] h1, a[href] h2, a[href] h3, a[href] h4, a[href] h5, a[href] h6 {
        cursor: pointer;
    }

legend {
    padding: 0;
    border-bottom: none;
}

fieldset {
    padding: 0 0 30px;
    border-bottom: none;
}

/* Header */
.header-bg {
    background: #ffffff;
    box-shadow: 0 4px 5px -2px #CCC;
    padding-bottom: 20px;
}

.navbar {
    position: relative;
    min-height: 0;
    margin: 15px 0 0 0;
    border: none;
}

.navbar-default {
    background-color: #fff;
    border: none;
}

.navbar-default {
    background-image: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar-toggle {
    position: relative;
    float: right;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.navbar-default .navbar-toggle .icon-dot {
    background-color: #2f880f;
}

.navbar-toggle .icon-dot + .icon-dot {
    margin-top: 4px;
}

.navbar-toggle .icon-dot {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.navbar-default .navbar-toggle {
    border-color: #fff;
}

    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
        background-color: #fff;
        border-color: #eee;
    }

        .navbar-default .navbar-toggle:hover .icon-dot,
        .navbar-default .navbar-toggle:focus .icon-dot {
            background-color: #9c6;
        }

#header-branding {
    float: left;
}

    #header-branding #publix-brand {
        display: inline-block;
        width: 176px;
        height: 37px;
        background: url('images/logo-main.png') no-repeat;
    }

    #header-branding #publix-tagline {
        display: inline-block;
        width: 260px;
        height: 37px;
        background: url('images/tagline-main.png') no-repeat;
    }

#header-aux {
    /*position: absolute;*/
    /*right: 0;*/
    text-align: right;
    z-index: 100;
    width: inherit;
    float: right;
    padding-top: 15px;
}

    #header-aux #view-help {
/*        position: absolute;
        top: 0;
        right: 0;*/
    }

    #header-aux #login {
        /*margin-top: 10px;*/
        /*font-style: italic;*/
    }

        #header-aux #login a {
            font-style: normal;
            white-space: nowrap;
            margin-bottom: 10px;
        }

    #header-aux #language {
        position: absolute;
        top: 100px;
        right: 55px;
    }

#culture {
    font-size: 11px;
    position: absolute;
    top: 40px;
    right: 18px;
}

/* END Header */


/* Main Content Helpers */
#maincontent {
    outline: none !important; /* START RARE-05-26-2016 : Focus Highlight Updates */
}

.main-content-bg {
    background: #fff;
}

.lowlight {
    background: #eee;
}

.swap-language {
    background: orange;
    margin-right: 40px;
}

.main-panel {
    margin: 30px 20px;
}

.side-panel {
    margin: 30px 3px;
}

    .side-panel p {
        padding: 0;
    }

.vertical-divider {
    border-right: 1px solid #dfe5e6;
    border-left: 1px solid #dfe5e6;
    margin-left: -1px;
}

    .vertical-divider:first-child {
        border-left: none;
    }

    .vertical-divider:last-child {
        border-right: none;
    }

.wizard .content {
    min-height: 100px;
}

    .wizard .content > .body {
        width: 100%;
        height: auto;
        padding: 15px;
        position: absolute;
    }

    .wizard .content .body.current {
        position: relative;
    }

/* Legal */
.pre-scrollable {
    max-height: 235px;
}

/* End Main Content */


/* Buttons */
.actions {
    margin-bottom: 0;
    background: #fff;
    padding: 20px 20px 40px 20px;
}

/*.btn {
    margin: 7px 0 0;
    padding: 1px 12px 0;
    display: inline-block;
    border: 1px solid #608f30;
    line-height: 21px;
    font-size: 14px;
    height: 24px;
    background: #2f880f;
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.5),0 0 1px rgba(0,0,0,.25),inset 0 1px 2px rgba(255,255,255,.4);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.5),0 0 1px rgba(0,0,0,.25),inset 0 1px 2px rgba(255,255,255,.4);
    box-shadow: 0 1px 1px rgba(0,0,0,.5),0 0 1px rgba(0,0,0,.25),inset 0 1px 2px rgba(255,255,255,.4);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
    filter: 0 1px 0 rgba(0,0,0,.25);
}*/


.btn {
    background: #2d810e;
    border-radius: 10px;
    border: none;
    padding: 12px;
    text-transform: none;
    height: revert;
    font-weight: 600;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    color: white;
    font-size: 16px;
}

a.btn {
    color: #fff;
}

.btn:hover,
.btn:active,
.btn.focus {
    color: #9c6;
    text-decoration: none;
}

.btn:active, .btn:hover, .btn:focus {
    background: #9c3;
    border-color: #8fbf30;
    color: #fff;
    text-decoration: none;
}

.btn-link :active, .btn-link:focus {
    background: #fff;
    border-color: #8fbf30;
    color: #9c3;
    text-decoration: none;
}

.btn-lg {
    /*    padding: 0 14px;
    height: 40px;
    line-height: 40px;*/
    background: #2d810e;
    border-radius: 10px;
    border: none;
    padding: 12px;
    text-transform: none;
    height: revert;
    font-weight: 600;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    color: white;
    font-size: 16px;
}

.btn-lg, .btn-group-lg > .btn {
    /*font-size: 16px;*/
}

.btn-lg-wotc {
    padding: 0 14px;
    height: 40px;
}

.btn-lg-wotc, .btn-group-lg-wotc > .btn {
    font-size: 16px;
}
.btn [class^="fa-"], .btn [class*=" fa-"] {
    margin: -4px -3px 0 -11px;
    height: 25px;
    width: 25px;
    display: inline-block;
    line-height: 27px;
    color: #fff;
    vertical-align: text-top;
}

.btn-lg [class^="fa-"], .btn-lg [class*=" fa-"] {
    margin: -3px -3px 0 -11px;
    line-height: 25px;
}

a .fa {
    color: #693; /* Publix would like to use the BRAND color on icons where possible. We do not have to use the ADA compliant green (that we use for text links). */
}


/*.btn-primary {
    background-color: #eff0f0;
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #eff0f0 100%);
    background-image: -o-linear-gradient(top, #ffffff 0%, #eff0f0 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eff0f0));
    background-image: linear-gradient(to bottom, #ffffff 0%, #eff0f0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffeff0f0', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-image: linear-gradient(to bottom, #ffffff 0%, #eff0f0 100%);
    background-repeat: repeat-x;
    border-color: #dfe5e6;
    border-radius: 0;
    color: #2f880f;
    padding: 10px 14px 10px 14px;
    height: auto;
    line-height: normal;
    font-size: 20px;
    text-transform: none;
    webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
}*/

.btn-primary {
    background: #2d810e;
    border-radius: 10px;
    border: none;
    padding: 12px;
    text-transform: none;
    height: revert;
    font-weight: 600;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    color: white;
    font-size: 16px;
}

    .btn-primary:hover {
/*        color: #9c6;
        background-color: #ffffff;
        border-color: #dfe5e6;*/
    }

    .btn-primary:active,
    .btn-primary.active {
/*        background-color: #2f880f;
        border-color: #2f880f;
        color: #ffffff;*/
    }

        .btn-primary:active:hover,
        .btn-primary.active:hover,
        .open > .dropdown-toggle.btn-primary:hover,
        .btn-primary:active:focus,
        .btn-primary.active:focus,
        .open > .dropdown-toggle.btn-primary:focus,
        .btn-primary:active.focus,
        .btn-primary.active.focus,
        .open > .dropdown-toggle.btn-primary.focus {
            background-color: #2f880f;
            border-color: #2f880f;
            color: #ffffff;
        }

    .btn-primary:hover {
        background-position: 0 15px;
        border-color: #2f880f;
    }

    .btn-primary:focus {
        background-position: 0 -15px;
        border-color: #2f880f;
        background-color: #eff0f0;
        color: #2f880f;
        /*        background-image: -webkit-linear-gradient(top, #ffffff 0%, #eff0f0 100%);
        background-image: -o-linear-gradient(top, #ffffff 0%, #eff0f0 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eff0f0));
        background-image: linear-gradient(to bottom, #ffffff 0%, #eff0f0 100%);*/
    }

.btn-secondary {
    background: #D5E6CF;
    color: #1B4D08 !important;
    border-radius: 10px;
    border: none;
    padding: 12px;
    text-transform: none;
    height: revert;
    font-weight: 600;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
}

.btn-block + .btn-block {
    margin-top: 18px;
}

.btn-block {
    display: inline;
}

.btn-link {
    background-color: transparent;
    border: none;
    color: #2f880f;
    webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
}

.btn.btn-link:hover,
.btn.btn-link:active,
.btn.btn-link.focus {
    background-color: transparent;
    border: none;
    color: #9c6;
    text-decoration: none;
}

a.btn.btn-link {
    color: #2f880f;
}

.btn-disabled {
    background-color: transparent;
    color: #545454;
    cursor: default;
}

    .btn-disabled:hover {
        border-color: #A90000;
        background-color: transparent;
        color: #545454;
    }

    .btn-disabled:active,
    .btn-disabled:active:hover,
    .btn-disabled.active:hover,
    .btn-disabled:focus {
        background-color: #f6f7f7;
        border-color: #A90000;
        color: #545454;
    }

.wizard > .actions .disabled a,
.wizard > .actions .disabled a:hover,
.wizard > .actions .disabled a:active {
    background: #565656;
    border-color: #8f8f8f;
    color: #ccc;
    cursor: default;
}

.btn-white {
    background: #fff;
    border: 1px solid #eee;
    color: #2f880f;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.58);
    -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,.58);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.58);
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #eff0f0 100%);
    background-image: -o-linear-gradient(top, #ffffff 0%, #eff0f0 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eff0f0));
    background-image: linear-gradient(to bottom, #ffffff 0%, #eff0f0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffeff0f0', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-image: linear-gradient(to bottom, #ffffff 0%, #eff0f0 100%);
    background-repeat: repeat-x;
    border-color: #dfe5e6;
    text-shadow: none;
    filter: none;
}

    .btn-white:active, .btn-white:hover, .btn-white:focus {
        background: #fafafa;
        border-color: #eee;
        color: #9c6;
        -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.35);
        -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,.35);
        box-shadow: 0 1px 1px 0 rgba(0,0,0,.35);
    }

        .btn-white:active [class^="fa-"],
        .btn-white:hover [class^="fa-"],
        .btn-white:focus [class^="fa-"],
        .btn-white:active [class*=" fa-"],
        .btn-white:hover [class*=" fa-"],
        .btn-white:focus [class*=" fa-"] {
            color: #9c3;
        }

    .btn-white [class^="fa-"],
    .btn-white [class*=" fa-"] {
        color: #2f880f;
    }

/* END Buttons */


/* jQuery STEPS - Overrides of jquery.steps.css and additional styling for the JAC look-and-feel */
.wizard > .steps {
    position: relative;
    display: block;
    width: 100%;
    height: 78px;
}
/* Add more as needed for other numbers of steps ( steps-{number of steps} = 100/{number of steps} ) */
#steps-container.steps-4 .wizard > .steps > ul > li {
    width: 25%; /* 100/{number of steps} (in this case 4 steps) */
}

#steps-container.steps-7 .wizard > .steps > ul > li {
    width: 14.25%; /* 100/{number of steps} (in this case 7 steps) */
}

.wizard > .content {
    background: #fff;
    display: block;
    margin: 0 0 0 0;
    min-height: 15em;
    overflow: hidden;
    height: auto;
    position: relative;
    width: auto;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

    .wizard > .content > .body {
        padding: 20px;
    }

.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active,
.wizard > .steps .disabled a,
.wizard > .steps .disabled a:hover,
.wizard > .steps .disabled a:active,
.wizard > .steps .parent-active a,
.wizard > .steps .parent-active a:hover,
.wizard > .steps .parent-active a:active,
.wizard > .steps .done a,
.wizard > .steps .done a:hover,
.wizard > .steps .done a:active {
    background: transparent;
    color: #000;
    cursor: default;
}

    .wizard > .steps .done a,
    .wizard > .steps .done a:hover,
    .wizard > .steps .done a:active {
        background: transparent;
        color: #000;
        cursor: pointer;
    }
/* DEFAULT OUTLINE (green) */
.primarystep-outline {
    display: block;
    width: 36px;
    height: 36px;
    text-decoration: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin: 0 auto;
    padding: 0 0 0 0;
    text-align: center;
    background: #693;
    z-index: 10;
}
/* DISABLED (Future Step) OUTLINE (gray) */
li.primarystep.disabled a span.primarystep-outline {
    background: #eee;
}
/* Progress Bar (DEFAULT - gray) */
.primarystep-outline:before,
.primarystep-outline:after {
    content: "";
    position: absolute;
    top: 16px;
    left: 0;
    width: 50%;
    display: block;
    border-top: 4px solid #eee;
    margin: 0 0 0 0;
    z-index: -1;
}

.primarystep-outline:before {
    margin: 0 0 0 0;
}

.primarystep-outline:after {
    margin: 0 0 0 50%;
}
/* Progress Bar (DEFAULT - gray) */
li.primarystep.current a span.primarystep-outline:before {
    border-top: 4px solid #693;
}
/* Progress Bar (Remaining Scenarios) */
li.primarystep.current a span.primarystep-outline:after {
    border-top: 4px solid #eee;
}

li.primarystep.done a span.primarystep-outline:before,
li.primarystep.done a span.primarystep-outline:after {
    border-top: 4px solid #693;
}

li.primarystep.parent-active a span.primarystep-outline:after {
    border-top: 4px solid #693;
}
/* Progress Bar (FIRST & LAST Steps) */
li.primarystep.first a span.primarystep-outline:before,
li.primarystep.last a span.primarystep-outline:after {
    border-top: none !important;
}
/* Step Number (Circle) DEFAULT */
.primarystep-number {
    position: relative;
    top: 3px;
    display: block;
    width: 30px;
    height: 30px;
    text-decoration: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin: 0 auto;
    padding: 3px 0 0 0;
    text-align: center;
    background: #fff;
    z-index: 10;
}
/* Step Number (Circle) Remaining Scenarios */
li.primarystep.parent-active.done a span.primarystep-number {
    background: #fff;
    color: #000;
}

li.primarystep.done a span.primarystep-number {
    background: #693;
    color: #fff;
}

li.primarystep.current a span.primarystep-number {
    background: #fff !important;
    color: #000;
}
/* Step NAME Label */
a .spanish-header {
    font-size: 13px;
}

.primarystep-label {
    display: block;
    color: #565656;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-weight: 400;
}

/* Suppress the ERROR styling for the step itself because it is only working on the Primary Steps and it is confusing when 
there is an error on a SUBSTEP, since they are currently being hidden. This can be reworked if there is a need or desire to 
display the actual STEP indicator as an error but it will take some effort. */
.wizard > .steps .error a,
.wizard > .steps .error a:hover,
.wizard > .steps .error a:active {
    background: transparent;
}
/* Hide all sub steps */
.innerSteps ul[role="tablist"] {
    display: none;
}

.substep {
    display: none !important;
}

.wizard ul > li:focus, .tabcontrol ul > li:focus {
    background: orange;
}

/* Actions Panel at bottom of Steps that contains pagination, buttons, etc. */
.wizard > .actions {
    margin-bottom: 0;
    background: #fff;
    padding: 20px 20px 40px 20px;
}

section legend {
    padding: 0;
    margin-bottom: 4px;
    color: #565656;
    border-bottom: none;
}

    section legend h2 {
        text-transform: none;
        font-size: 18px;
    }

section fieldset {
    padding: 0 0 20px;
    border-bottom: 1px solid #dfe5e6;
}

.question-panel {
    margin: 30px 20px 0;
}


/* Bootstrap Theme - Other Custom Overrides for JAC */
.page-header {
    padding-bottom: 9px;
    margin: 40px 0 5px;
    border-bottom: none;
}

/* Jumbotron */
.jumbotron h1, .jumbotron .h1 {
    color: #333;
    font-size: 30px;
}

.jumbotron p {
    color: #333;
    font-size: 21px;
    line-height: normal;
}

/* Table */
.table {
    background: #fff;
}

    .table > thead > tr > th {
        padding: 10px 18px 10px;
        background: #eeefef;
        vertical-align: bottom;
        border-bottom: 1px solid #dfe5e6;
        text-transform: uppercase;
        font-size: 14px;
    }

    .table > tbody > tr > td, .table > tfoot > tr > td {
        padding: 20px 18px 20px;
        line-height: normal;
        vertical-align: top;
        border-bottom: 1px solid #dfe5e6;
        border-top: none;
    }

tr.clickable {
    cursor: pointer
}

.storelistlink {
    font-size: medium;
    text-decoration: underline
}

.floating-panel {
    position: absolute;
    top: 10px;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: 'Roboto','sans-serif';
    line-height: 30px;
    padding-left: 10px;
    height: 500px;
}

#btnScrollTop {
    display: block;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: lightgray;
    color: black;
    cursor: pointer;
    padding: 2px;
    border-radius: 2px;
    float: right;
}

/* Thumbnails */
.img-thumbnail {
    border-radius: 0;
}

/* List Group */
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    text-shadow: none;
    background-image: none;
    background-image: -o-linear-gradient(top, #337ab7 0%, #2b669a 100%);
    background-image: none;
    background-image: none;
    background-repeat: no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
    border-color: transparent;
}

    .list-group-item.active,
    .list-group-item.active:hover,
    .list-group-item.active:focus {
        z-index: 2;
        color: #565656;
        background-color: #eeefef;
        border-color: #dfe5e6;
    }

.list-group-item h4, .list-group-item .h4 {
    font-size: 16px;
    line-height: 28px;
}

.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
    color: #565656;
}

/* Alerts */
.alert-success {
    border-color: #608f30;
}

.alert-danger {
    background-image: -webkit-linear-gradient(top, #fde9e9 0%, #fad3d3 100%);
    background-image: -o-linear-gradient(top, #fde9e9 0%, #fad3d3 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fde9e9), to(#fad3d3));
    background-image: linear-gradient(to bottom, #fde9e9 0%, #fad3d3 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffde9e9', endColorstr='#fffad3d3', GradientType=0);
    border-color: #993333;
    color: #993333;
}

/* Panel */
.panel {
    margin-bottom: 20px;
    background-color: #ffffff;
    border: 1px solid #dfe5e6;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.panel-default {
    border-color: #dfe5e6;
}

    .panel-default > .panel-heading {
        background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
        background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
        background-image: linear-gradient(to bottom, #f5f5f5 0%, #eeefef 100%);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
    }

.panel-primary > .panel-heading {
    background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
    background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
    background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
}

.panel-success > .panel-heading {
    background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
    background-image: -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#d0e9c6));
    background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
}

.panel-danger > .panel-heading {
    background-image: -webkit-linear-gradient(top, #fde9e9 0%, #fad3d3 100%);
    background-image: -o-linear-gradient(top, #fde9e9 0%, #fad3d3 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fde9e9), to(#fad3d3));
    background-image: linear-gradient(to bottom, #fde9e9 0%, #fad3d3 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffde9e9', endColorstr='#fffad3d3', GradientType=0);
    color: #993333;
}

/* Wells */
/* Wells - START RARE-05-05-2016 */
.well {
    background-color: #ffffff; /* was: #f6f7f7 but the new Publix GREEN font does not meet color contrast guidelines for ADA (AA) */
    border: 3px solid #f6f7f7;
    border-radius: 10px;
    background-image: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

    .well.highlight {
        background-color: #f6f7f7;
    }
/* Wells - END RARE-05-05-2016 */

/* Modals/Light-box - START RARE-04-19-2016 */
.modal-backdrop.in {
    opacity: 0.3;
    filter: alpha(opacity=30);
    z-index: -1;
}

textarea#modalID {
    min-height: 50px;
    width: 100%;
    max-height: 480px;
    border: 0;
    border-radius: 4px;
    border-color: #ccc;
    resize: none;
}

.modal-header {
    padding: 16px 16px 12px 16px;
}

h4.modal-title {
    margin: 0;
    line-height: normal;
    border-bottom: none;
    font-size: 18px;
}

.modal .close {
    font-size: 30px;
    font-weight: bold;
    color: #000000;
    opacity: 0.2;
    filter: alpha(opacity=20);
}

.modal-footer {
    padding: 16px 16px 24px 16px;
    text-align: center;
    border-top: none;
}
/* Modals/Light-box - END RARE-04-19-2016 */
/* End Overrides */


/* Footer */
/* START RARE-04-19-2016 : A couple of updates for the "sticky footer" */
.footer-bg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90px; /* Set the fixed height of the footer here...must be fixed height, and that height must match body 'margin-bottom' */
    margin-top: 2%;
    background: #CCC;
    display: table;
}

#publix-footer {
    color: #565656;
    text-align: center;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-weight: 550;
}
    /* END RARE-04-19-2016 : A couple of updates for the "sticky footer" */
    #publix-footer a {
        color: #565656;
        text-decoration: underline;
    }
/* END Footer */


/* Check boxes and Radios */
.radio, .checkbox,
.radio + .radio, .checkbox + .checkbox {
    position: relative;
    display: block;
    margin-top: 8px;
    margin-bottom: 8px;
}

input[type='checkbox'] + label,
input[type='checkbox'] + input[type="hidden"] + label,
input[type='radio'] + label {
    display: block;
    font-weight: 700;
}

input[type='checkbox']:checked + label,
input[type='checkbox']:checked + input[type="hidden"] + label,
input[type='radio']:checked + label {
    color: #2f880f;
}
/* Move the original check-box out of the way, but leave it in the flow for ADA */
.fancy input[type="checkbox"],
.fancy input[type="radio"] {
    position: absolute;
    left: -9999px;
}
    /* The label will contain the icon and the text will grab the focus */
    .fancy input[type="checkbox"] + label,
    .fancy input[type="checkbox"] + input[type="hidden"] + label,
    .fancy input[type="radio"] + label {
        padding: 0 5px 3px 0px;
        border: 1px solid transparent;
        cursor: pointer;
    }
        /* The icon container: set it to fixed size and font size */
        .fancy input[type="checkbox"] + label:before,
        .fancy input[type="checkbox"] + input[type="hidden"] + label:before,
        .fancy input[type="radio"] + label:before {
            display: inline-block;
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            font-size: 24px;
            line-height: 1em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            padding: 0 30px 0 0;
            width: 24px;
            position: relative;
            top: 4px;
        }
    /* CHECKBOX: toggle font awesome icon*/
    .fancy input[type="checkbox"]:checked + label:before,
    .fancy input[type="checkbox"]:active + label:before,
    .fancy input[type="checkbox"]:hover:active + label:before,
    .fancy input[type="checkbox"]:checked:hover + label:before,
    .fancy input[type="checkbox"]:checked + input[type="hidden"] + label:before,
    .fancy input[type="checkbox"]:active + input[type="hidden"] + label:before,
    .fancy input[type="checkbox"]:hover:active + input[type="hidden"] + label:before,
    .fancy input[type="checkbox"]:checked:hover + input[type="hidden"] + label:before {
        content: ''; /* Check-box Checked */
        color: #693; /* Publix would like to use the BRAND color on icons where possible. We do not have to use the ADA compliant green (that we use for text links). */
        width: 22px;
        height: 22px;
        background: url('images/checkbox-on-alt2.png') no-repeat;
        background-size: 22px 22px;
        background-position: 0% 0%;
    }

    .fancy input[type="checkbox"]:not(:checked) + label:before,
    .fancy input[type="checkbox"]:not(:checked) + input[type="hidden"] + label:before {
        content: ''; /* Check-box Unchecked */
        color: #ccc;
        width: 22px;
        height: 22px;
        background: url('images/checkbox-empty-alt2.png') no-repeat;
        background-size: 22px 22px;
        background-position: 0% 0%;
    }
    /*Do something on hover, in this case change the image color*/
    .fancy input[type="checkbox"]:hover + label:before,
    .fancy input[type="checkbox"]:hover + input[type="hidden"] + label:before {
        content: ''; /* Check-box Checked */
        color: #ccc;
        width: 22px;
        height: 22px;
        background: url('images/checkbox-hover-alt2.png') no-repeat;
        background-size: 22px 22px;
        background-position: 0% 0%;
    }

    /* RADIO: toggle font awesome icon*/
    .fancy input[type="radio"]:checked + label:before,
    .fancy input[type="radio"]:active + label:before,
    .fancy input[type="radio"]:hover:active + label:before,
    .fancy input[type="radio"]:checked:hover + label:before {
        content: '\f192'; /* Radio Checked */
        color: #693; /* Publix would like to use the BRAND color on icons where possible. We do not have to use the ADA compliant green (that we use for text links). */
    }

    .fancy input[type="radio"]:not(:checked) + label:before {
        content: '\f1db'; /* Radio Unchecked */
        color: #ccc;
    }
    /*Do something on hover, in this case change the image color*/
    .fancy input[type="radio"]:hover + label:before {
        content: '\f192'; /* Radio Checked */
        color: #ccc;
    }

/* START RARE-05-26-2016 : REMOVE 
.fancy input[type="checkbox"]:focus + label,
.fancy input[type="radio"]:focus + label {
outline-width: 2px;
outline-style: solid;
outline-color: Highlight;
}
END RARE-05-26-2016 : REMOVE */

.radio label,
.checkbox label {
    padding-left: 0;
}
/* START RARE-05-26-2016 : REMOVE 
@media (-webkit-min-device-pixel-ratio:0) {
:focus {
outline-width: 2px;
outline-style: solid;
outline-color: Highlight;
}
}
END RARE-05-26-2016 : REMOVE */

/* Forms */
.steps-label-description {
    font-size: 13px;
    font-style: italic;
}

ol.legal-steps {
    margin: 0;
    padding: 0;
}

    ol.legal-steps li {
        margin: 0;
        padding: 0;
    }

#setCulture {
    color: red;
    position: relative;
    right: 150px;
}

/* Additional Media Queries for responsive breakpoints */
@media only screen and (max-width : 767px) {   
    /* Typography Mobile Adjustments */
    #page-title h1 {
        margin-top: 6px;
        margin-bottom: 12px;
        padding-right: 0;
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        border: none;
    }

    #faqAndAppTitle {        
        margin-bottom: 0px;
    }
    
    /* Main Mobile Adjustments */
    .header-bg {
        -webkit-box-shadow: 0 0 20px 0 #999;
        -moz-box-shadow: 0 0 20px 0 #999;
        box-shadow: 0 0 20px 0 #999;
    }

    #header-branding {
        width: 100%;
    }

        #header-branding #publix-brand {
            display: block;
            margin: 0 auto;
            background-size: 75%;
            background-position: 50% 50%;
        }

        #header-branding #publix-tagline {
            display: block;
            margin: -8px auto;
            background-size: 85%;
            background-position: 50% 50%;
        }

    #header-aux {
        position: relative;
        width: 100%;
    }

        #header-aux #language {
            position: relative;
            top: 0;
            right: 0;
        }

        #header-aux #view-help {
            position: relative;
            top: 0;
            right: 0;
        }

    #culture {
        font-size: 11px;
        position: absolute;
        top: 65px;
    }

    .navbar {
        margin: 10px 0 10px 0;
    }

    .navbar-toggle {
        position: absolute;
        float: none;
        right: 0;
    }

    .navbar-collapse {
        margin-top: 10px;
    }

    /* jQuery STEPS - Mobile */
    .wizard > .steps > ul > li {
        width: 100% !important;
    }

    li.primarystep {
        display: none !important;
    }

        li.primarystep.current,
        li.primarystep.parent-active {
            display: block !important;
        }

    .primarystep-outline:before,
    .primarystep-outline:after {
        display: none;
    }

    .wizard > .steps a,
    .wizard > .steps a:hover,
    .wizard > .steps a:active {
        margin: 0 auto;
        text-align: center;
    }

    .primarystep-outline {
        display: inline-block;
        text-align: center;
    }

    .primarystep-label {
        display: inline-block;
        width: auto;
        margin: 0 auto;
        padding: 0 0 0 6px;
        text-align: center;
        vertical-align: middle;
    }

    .wizard > .steps > ul > li,
    .wizard > .actions > ul > li {
        float: none;
    }

        .wizard > .actions > ul > li.pull-left,
        .wizard > .actions > ul > li.pull-right {
            float: none !important;
        }

    .wizard > .actions {
        position: relative;
    }

        .wizard > .actions > ul {
            margin-top: 40px;
        }

            .wizard > .actions > ul > li.pull-right {
                position: absolute;
                top: 0;
                left: 20px;
                right: 20px;
            }

    /*
Turns specific TABLES into responsive block elements for viewing on smaller screens.
This query will take effect for any screen smaller than 768px
*/
    /* Force table to not be like tables anymore */
    table.table.respond, .table.respond thead, .table.respond tbody, .table.respond th, .table.respond td, .table.respond tr {
        display: block;
    }
        /* Hide table headers (but not display: none;, for accessibility) */
        .table.respond thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    .table {
        background: transparent;
    }

        .table.respond tr {
            margin: 20px;
            padding: 20px;
            background: #fff;
            -webkit-box-shadow: 0 0 12px 0 #ccc;
            -moz-box-shadow: 0 0 12px 0 #ccc;
            box-shadow: 0 0 12px 0 #ccc;
        }

        .table.respond td {
            /* Behave  like a "row" */
            padding: 0 0 20px 0;
            border: none;
            position: relative;
        }

            .table.respond td:before {
                position: relative;
                display: block;
                top: 0px;
                left: 0px;
                white-space: nowrap;
                font-size: 16px;
                font-weight: 700;
                text-transform: uppercase;
            }

            .table.respond td .btn {
                /* Behave  like a "row" */
                width: 100%;
            }

    /* START RARE-04-29-2016 : Allow Primary button text to wrap when necessary */
    .btn.btn-primary {
        white-space: normal;
    }
    /* END RARE-04-29-2016 : Allow Primary button text to wrap when necessary */
    .btn-block{
        display: block;
    }

    .btn-block {
        display: block;
        white-space: normal;
    }
}

@media (min-width:768px) and (max-width: 991px) {
    .wizard > .steps {
        height: auto;
    }

    #general {
        margin-top: 40px !important;
    }

    #faqAndAppTitle {        
        margin-bottom: 0px;        
    }
}

@media (max-width: 991px) {
    .vertical-divider {
        border: none;
    }
    ol.legal-steps {
        margin: 0 0 0 45px;
    }

    .side-panel {
        margin: 0;
        padding: 10px 0;
    }

    .returning-applicant {
        display: block;
        margin-top: -20px;
        margin-bottom: 20px;
    }
}

@media (max-width: 270px) {
    .btn-lg-wotc {
        height: 6.5em;
    }
}
@media (min-width: 271px) and (max-width: 280px) {
    .btn-lg-wotc {
        height: 5em;
    }
}
@media (min-width: 280px) and (max-width: 294px) {
    .btn-lg-wotc {
        height: 5em;
    }
}
@media (min-width: 295px) and (max-width: 300px) {
    .btn-lg-wotc {
        height: 4em;
    }
}
@media (min-width: 295px) and (max-width: 390px) {
    .btn-lg-wotc {
        height: 4em;
    }
}
@media (min-width: 391px) and (max-width: 575px) {
    .btn-lg-wotc {
        height: 3em;
    }
}
@media (min-width: 575px) {
    .btn-lg-wotc {
        height: 1.5em;
    }
}

/* HTML5 Input - Style to match template size. */
input[type=text], input[type=url], input[type=email], input[type=password], input[type=tel] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    margin-bottom: 0.5em;
    height: 40px !important;
    line-height: inherit;
    font-size: 16px;
    border: 1px solid #ccc; /* START RARE-05-26-2016 : Update border color to match Kendo */
    padding: 1%;
    padding-left: 1.0em;
    border-radius: 4px;
}

/* Bootstrap Shadow - Style the Shadow to match Publix colors. */
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
    border-color: #ccc; /* START RARE-05-26-2016 : Update border color to match Kendo */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
    outline: 0 none;
}

/* Kendo Grid - Format tables to match Publix colors. */
.inline-field input,
.inline-field label {
    display: inline-block;
    margin-bottom: 0; /* I added this after I posted my reply */
    vertical-align: middle; /* Fixes any weird issues in Firefox and IE */
}

.k-today /*don't highlight the current day or we cant see all the separators*/ {
    background: transparent !important;
}

.k-scheduler-times-all-day,
.k-scheduler-header-all-day {
    /* make them invisible */
    display: none;
    height: 0;
    padding: 0;
    overflow: hidden;
}

.k-scheduler-toolbar,
.k-scheduler-footer {
    /* make them invisible */
    display: none;
    /*prevent height and paddings from influencing the size calculations */
    height: 0;
    padding: 0;
    overflow: hidden;
}

.k-scheduler-layout {
    color: #565656;
}

.k-widget {
    border: none;
}

.k-header {
    border: none;
    /* Commenting out to fix the 
background-color: rgb(217, 217, 217);
*/
    font-size: 14px;
    line-height: 24px;
    color: rgb(102, 102, 102);
}

.k-grid tr {
    background-color: white;
}

    .k-grid tr td {
        border: none;
        border-bottom: solid 1px rgb(229, 229, 229);
    }
/* Kendo Shadow - Style the Shadow to match Publix colors. */
.k-textbox:focus,
.k-autocomplete.k-state-focused,
.k-picker-wrap.k-state-focused,
.k-numeric-wrap.k-status-focused,
.k-dropdown-wrap.k-state-focused,
.k-multiselect.k-header.k-state-focused {
    border-color: #2f880f;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
    outline-width: 0px; /* START RARE-05-26-2016 : Add outline-width */
}
/* Kendo Drop-down - Style to match template size. */
.k-dropdown .k-dropdown-wrap, input.k-textbox, textarea.k-textbox {
    height: 40px;
    border-radius: 4px;
}

.k-textbox > input, .k-autocomplete .k-input, .k-picker-wrap .k-input, .k-numeric-wrap .k-input, .k-dropdown-wrap .k-input, .k-selectbox .k-input {
    font-size: 16px;
}

.k-dropdown .k-input {
    margin-top: 2px;
}

.k-dropdown .k-input {
    margin-top: 2px;
}

.k-dropdown .k-select {
    margin-top: 2px;
}

.k-textbox > input, .k-autocomplete .k-input, .k-picker-wrap .k-input, .k-numeric-wrap .k-input, .k-dropdown-wrap .k-input, .k-selectbox .k-input {
    text-indent: 1.0em !important;
}

.k-popup .k-list .k-item {
    line-height: 2.5em !important;
    min-height: 2.5em !important;
}

.k-list-container {
    overflow-y: auto;
}
/*.k-list-scroller {
overflow-y: scroll;
}*/
/* Kendo Text-box - Style to match template size. */
.k-textbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    margin-bottom: 0.5em;
    height: 40px !important;
    line-height: 40px;
    font-size: 16px;
    border: 1px solid #ccc; /* START RARE-05-26-2016 : Update border color to match Kendo */
    padding: 1%;
    padding-left: 1%;
}
/* Kendo DatePicker - Style to match template size. */

.k-datepicker .k-i-calendar {
    margin-top: 8px !important;
}

.k-state-selected {
    background-color: #84B751 !important;
    border-color: #84B751 !important;
    box-shadow: none !important;
}

.k-calendar .k-content .k-link {
    /*padding: 0.85em !important;*/
    padding: 0em !important;
    text-align: center;
}

.k-event, .k-task-complete {
    border-color: #f4fbf6;
    background: #f4fbf6 0 -257px none repeat-x;
    color: #565656;
}

/* Kendo Validation - Place validation on top of control */
.k-tooltip-validation {
    background-color: rgba(217,83,79,.8) !important;
    border: none !important;
    color: white !important;
    position: absolute !important;
    left: 15% !important;
    top: -65% !important;
}

.k-warning {
    display: none;
}

.error-msg {
    position: relative !important;
    background-color: #c00 !important;
    background-image: none;
    text-align: center !important;
    border: none !important;
    color: #fff !important;
    padding: 0px !important;
    margin: 0px !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
}

.k-autocomplete.k-state-default, .k-picker-wrap.k-state-default, .k-numeric-wrap.k-state-default, .k-dropdown-wrap.k-state-default {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    background-image: none;
    background-position: 50% 50%;
    background-color: #fff;
    border-color: #ccc;
}

/* START RARE-05-26-2016 : REMOVE 
.k-widget:focus {
border-color: #2f880f;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
outline: 0 none;
}
END START RARE-05-26-2016 : REMOVE */

/* Bootstrap Spinner */
.spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    position: relative;
    border: 2px solid rgba(0,0,0,0.5);
    border-top-color: transparent;
    border-radius: 100%;
    -webkit-animation: spin 1s infinite linear;
    -moz-animation: spin 1s infinite linear;
    -ms-animation: spin 1s infinite linear;
    -o-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}

    .spinner:after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        top: -5px;
        left: 0px;
        border: 4px solid transparent;
        border-bottom-color: rgba(0,0,0,0.5);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    to {
        -moz-transform: rotate(360deg);
    }
}

@-ms-keyframes spin {
    to {
        -ms-transform: rotate(360deg);
    }
}

@-o-keyframes spin {
    to {
        -o-transform: rotate(360deg);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

input.form-control {
    width: 100% !important;
}


/* This MAY be overkill for JAC and we can discuss removing it since there really IS NOT much navigation in the header to actually skip. */
/* For now however, since it is something that ADA compliance "desires", it is included. */
#skiptocontent a {
    padding: 6px;
    position: absolute;
    top: -40px;
    left: 0px;
    color: #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-bottom-right-radius: 4px;
    background: #c00;
    -webkit-transition: top 1s ease-out, background 1s linear;
    transition: top 1s ease-out, background 1s linear;
    z-index: 100;
}

    #skiptocontent a:focus {
        position: absolute;
        left: 0px;
        top: 0px;
        background: #c00;
        outline: 0;
        -webkit-transition: top .1s ease-in, background .5s linear;
        transition: top .1s ease-in, background .5s linear;
    }

a.scrollToTop {
    width: 40px;
    height: 40px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    padding-top: 8px;
    padding-left: 11px;
    display: none;
    background: #2f880f;
    text-decoration: none;
}

    a.scrollToTop:before {
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        font-size: 18px;
        content: '\f062';
        color: #fff !important;
    }


/* ==========================================================================
Helper classes
========================================================================== */

/*
* Hide visually and from screen readers
*/
.hidden {
    display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

    /*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }

/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
    visibility: hidden;
}

/*
* Clear-fix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `content editable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clear-fix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.center-contents {
    text-align: center;
    margin: 0 auto;
}

/*!
* IE10 view-port hack for Surface/desktop Windows 8 bug
* Copyright 2014-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/* See the Getting Started docs for more information: http://getbootstrap.com/getting-started/#support-ie10-width */
@-webkit-viewport {
    width: device-width;
}

@-moz-viewport {
    width: device-width;
}

@-ms-viewport {
    width: device-width;
}

@-o-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}


/* START RARE-05-26-2016 : RESET Default FOCUS "highlight" */
/* First, remove default FOCUS */
*:focus {
    outline: none !important;
    outline-offset: 0 !important;
}
/* Second, slight mod to the offset for the "steps" only for layout purposes */
.wizard > .steps .current a:focus,
.wizard > .steps .disabled a:focus,
.wizard > .steps .parent-active a:focus,
.wizard > .steps .done a:focus {
    outline-offset: -1px !important;
}
/* Third, Add back in a BASE focus highlight using the lime green. Add any selectors to this stack to force a "focus" highlight going forward. */
a:focus,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus,
.well:focus,
.fancy input[type="checkbox"]:focus + label,
.fancy input[type="checkbox"]:focus + input[type="hidden"] + label,
.fancy input[type="radio"]:focus + label {
    outline: rgba(126, 239, 104, 0.6) dotted 1px !important; /* Lime green focus highlight color */
}
/* Fourth, handle the form fields for Kendo and standard form fields so that they DO NOT get the new default focus highlight, but instead
get a custom "glow" green highlight. */
/* This may need further adjustments to add (or modify) css selectors to this style declaration. The only field I currently have to show that this
update is actually now working on is a Kendo select box as part of the Introduction step in BaseTemplate_05_BasicInfo_STEPS.html.
However, there may be other field types associated with Kendo that ".k-widget" does not cover that I am unaware of. This style shows what the basic 
technique is for adding the custom focus highlight and removing the default highlight. It can then be extended to other FOCUS elements as you need.*/
.k-widget:focus {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6) !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(126, 239, 104, 0.6) !important;
    outline: none !important;
}

.form-control:focus,
input:focus {
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(126, 239, 104, 0.6) !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6) !important;
    outline: none !important;
}
/* END RARE-05-26-2016 : RESET Default FOCUS "highlight" */

#btnLDisc {    
    margin-top: 50px;
}

div#wotcPanel {
    padding-bottom: 26px !important;
    padding-top: 20px !important;
}

#completeWotc {
    font-family: mrGeorge,arial,helvetica,sans-serif;
    margin-bottom: 20px;
}

#completedWotc {
    margin-bottom: 0px;
}

#changeInterviewBtn {
    color: white;
    text-decoration: none;
}

#changeInterviewBtn:hover {
    background-color: #9c3
}
    
#changeInterviewBtn:focus {
    background-color: #9c3
}

div#times > button {
    margin-bottom: 15px;
    margin-right: 10px;
}

div#preferenceArea {
    padding-top: 20px;
    padding-bottom: 20px;
}

div#mainArea {
    padding-bottom: 22px;
}

#general, #generalAside {
    margin-top: 6px;
}