/* -------------------- Body --------------------------------------------------------------------------------------- */
/* Globally sets all margins to 0. */
* {
    margin: 0;
}

html, body {
    /* Sets the height of the html element and the body to 100%. */
    height: 100%;
}

/* Sets the style for the html body. */
body {
    /* Sets the default background color to dark blue and the background image to a blue gradient that
        repeats horizontally across the top of the page. */
    background: #003366 url('themes/base/images/ncad_background_blue_gradient.png') repeat-x;
    /* Sets the background image's top left corner at 0,0 (top left) in the browser window. */
    background-position: left top;
}

@media only screen and (max-width: 850px) {
    body {
        /* Sets the default background color to dark blue and the background image to a blue gradient that
            repeats horizontally across the top of the page. */
        background: #003366 url('themes/base/images/ncad_background_blue_gradient_small_width.png') repeat-x;
    }
}

a, a:hover, a:active, a:visited {
    color: #003366;
    font-style: normal !Important;
}

h3 {
    font-weight: bold;
    font-size: 16px;
}

/* -------------------- Header ------------------------------------------------------------------------------------- */
/* Sets the style for the <header> at the top of the page */
#header {
    /* Sets the background color of the header to white. */
    background: #fff;
}

/* -------------------- Navigation --------------------------------------------------------------------------------- */

/* Sets the styles for the <nav> section which contains the menus */
.menuContainer {
    /* Sets the <nav> element's height at 29 pixels. */
    height: 29px;
    /* Sets the background color of the <nav> to dark gray. */
    background-color: #333333;
    /* Gives the <nav> a dark gray drop shadow below it. */
    box-shadow: 0 1px 3px #333333;
    z-index: 100;
}

/* -------------------- Content Wrapper Style ---------------------------------------------------------------------- */
/* Sets the style for the content wrapper. */
.wrapper {
    /* The wrapper element can not be smaller than 100%. */
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Top margin is 0, right and left margins are auto (this centers the content), bottom margin is -121 pixels
        (this allows for the height of the footer plus its one pixel border). */
    margin: 0 auto -41px;
}

/* -------------------- Main Content ------------------------------------------------------------------------------- */
/* Sets the style for the main page content. */
#content {
    /* Places a 48 pixel tall spacer at the bottom of the content. */
    margin-bottom: 48px;
}

/* -------------------- Help Center -------------------------------------------------------------------------------- */

/* Sets the style for the help center. */
#helpCenter {
    height: 20px;
    border: 1px solid #333333;
    background-color: #ccc;
    padding-left: 5px;
}

#helpContent {
    padding: 5px;
}

#assessment-help-center {
    overflow: auto;
    border: 1px solid #333333;
    background-color: #ccc;
}

#helpBarButtonContainer {
    padding-left: 10px;
    position: relative;
    top: 14px;
    left: 80%;
    right: auto;
    height: 28px;
    width: 74px;
    background: #ccc;
    border-bottom: solid 1px #333333;
    border-left: solid 1px #333333;
    border-right: solid 1px #333333;
}

/* Sets the style for the contents of the helpcenter. */
#helpcenterContent {
    /* All text elements in the helpcenter content are center aligned. */
    background-position: center;
    /* Sets the text color of the helpcenter content to black. */
    color: #000000;
    /* Adds padding to all four sides of the content. This pulls the content away from the inside edges of the
        helpcenter.  */
    padding: 10px 10px 5px 10px;
    border: 1px solid #333333;
    background-color: #ccc;
}

/* Sets the style for all <h6> tags in the helpcenter. */
#helpCenter h6 {
    /* Sets the text color to dark blue. */
    color: #003366;
    /* Removes all margins from around the <h6> tag(s) in the helpcenter. */
    margin: 0;
    /* Places a blank space 5 pixels tall below the helpcenter <h6>. */
    padding-bottom: 5px;
}

/* Sets the sytle for all elements with the homeTitle css class. */
.helpTitle {
    /* Gives the homeTitle a solid, 1 pixel wide, dark gray border. */
    border-bottom: 1px solid #333333;
    /* Sets the background color to dark gray with diagonal stripes. */
    background: #333333 url('themes/base/images/dark_background_stripes.gif') repeat top left;
    /* Sets the homeTitle height at 28 pixels. */
    height: 24px;
    /* Sets the font's line height at 27 pixels. */
    line-height: 23px;
}

    /* Sets the style for all <h2> tags nestled inside a homeTitle. This is used for homeLinkBlock header text. */
    .helpTitle > h2, h3 {
        /* Sets the title's text color to white. */
        color: #fff;
        /* Places a blank space 8 pixels wide to the left of the text in the <h2>. */
        padding-left: 10px;
        /* Sets the font size of the <h2> at 21 pixels tall. */
        font-size: 12px;
    }

.about-nccad img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 1126px) {
    .about-nccad img {
        width: 100%;
        height: 100%;
    }
}

@media only screen and (max-width: 850px) {
    .about-nccad img {
        width: 480px;
        height: 446px;
    }
}

@media only screen and (max-width: 556px) {
    .about-nccad img {
        width: 100%;
        height: 100%;
    }
}

/* -------------------- Footer ------------------------------------------------------------------------------------- */
/* Sets the style for the footer and the push div. */
footer, .push {
    /* The height of both elements is set at 120 pixels. */
    height: 40px;
    /* Any content that is float left or float right does not affect either of these elements. */
    clear: both;
}

/* Sets the style for the <footer> element. */
footer {
    /* Sets the footer's background color to light gray. */
    background-color: #333333;
    /* Aligns all text (and images) in the center of the element. */
    text-align: center;
    /* Places a 2 pixel wide border at the top of the footer. */
    border-top: 1px solid #ccc;
    /* Footer height is 120 pixels. */
    height: 40px;
    /* Footer width is 100% of the browser window's width. */
    width: 100%;
}

/* -------------------- Home Pages --------------------------------------------------------------------------------- */
/* Sets the style for all elements with a css class of homeBlock. This wraps all pages that use _Layout.cshtml. */
.homeBlock {
    /* Sets the color of all text contained inside a home block to white (unless otherwise specified). */
    color: #000000;
    overflow: auto;
}

/* Sets the style for all elements with a css class of homeLinkBlock. homeLinkBlocks contain the unit links such
    as links to reports and unit management pages. */
.homeLink {
    /* Adds a 4 pixel wide spacer between the bottom of the link and the top of the next link. */
    padding-bottom: 4px;
    padding-left: 20px;
}

/* Sets the sytle for all elements with the homeTitle css class. */
.homeTitle {
    /* Gives the homeTitle a solid, 1 pixel wide, dark gray border. */
    border: 1px solid #333333;
    /* Sets the background color to dark gray with diagonal stripes. */
    background: #333333 url('themes/base/images/dark_background_stripes.gif') repeat top left;
    /* Sets the homeTitle height at 28 pixels. */
    height: 30px;
    /* Sets the font's line height at 27 pixels. */
    line-height: 29px;
    position: relative;
    top: 0;
    z-index: -999;
}

    /* Sets the style for all <h2> tags nestled inside a homeTitle. This is used for homeLinkBlock header text. */
    .homeTitle > h2 {
        /* Sets the title's text color to white. */
        color: #fff;
        /* Places a blank space 8 pixels wide to the left of the text in the <h2>. */
        padding-left: 10px;
        /* Sets the font size of the <h2> at 21 pixels tall. */
        font-size: 16px;
    }

/* Sets the style for all elements with the homeSection css class. */
.homeSection {
    /* homeSection automatically expands to hold all child elements. */
    overflow: auto;
    background-color: #fff;
    border: 1px solid #333333;
    margin: 0 10px 20px 10px;
    padding: 5px 5px;
}

/* Sets the style for all elements with the cellSection css class. */
.cellSection {
    /* cellSection automatically expands to hold all child elements. */
    overflow: auto;
    margin: 0 10px 20px 10px;
}

.homeSectionHeader {
    /* Sets the height at 34 pixels. */
    height: 34px;
    /* Sets the font line height at 33 pixels. */
    line-height: 33px;
    /* Text color is light gray. */
    color: #222;
    /* Background color is set to dark gray. */
    background: #6699cc url('themes/base/images/light_background_stripes.gif') repeat top left;
    border-bottom: 1px solid #333333;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    padding-left: 2px;
}

.unitPageSection {
    margin-top: 6px;
    overflow: auto;
}

#content > .unitPageSection:last-of-kind {
    margin-bottom: 10px;
}

/* Sets the corner style for all homeSections, homeCells, and any element with the css class */
.homeCell {
}

/* Sets the style for all unitPageCells. */
.unitCell {
    border: 1px solid #333333;
    background-color: #fff;
    overflow: auto;
    margin-bottom: 8px;
}

/* Sets the style for all homeCells. */
.homeCell {
    border: 1px solid #333333;
    overflow: auto;
    background-color: #fff;
    margin-bottom: 10px;
}

.buttonCell {
    border: 1px solid #333333;
    overflow: auto;
    background: #6699cc url('themes/base/images/light_background_stripes.gif') repeat top left;
    padding: 5px 5px 5px 5px;
}

/* "Pushes" the cell 18 pixels to the right. */
.pushCell {
    margin: 10px 10px 0 10px;
}

/* Sets the style for all unitCellHeaders. */
.unitCellHeader {
    /* Sets the height at 34 pixels. */
    height: 27px;
    /* Sets the font line height at 33 pixels. */
    line-height: 26px;
    /* Text color is light gray. */
    color: #222;
    /* Background color is set to dark gray. */
    background: #6699cc url('themes/base/images/light_background_stripes.gif') repeat top left;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #333333;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    padding-left: 2px;
    width: 100%;
}

/* Sets the style for all homeCellHeaders. */
.homeCellHeader {
    /* Sets the height at 34 pixels. */
    height: 34px;
    /* Sets the font line height at 33 pixels. */
    line-height: 33px;
    /* Text color is light gray. */
    color: #222;
    /* Background color is set to dark gray. */
    background: #6699cc url('themes/base/images/light_background_stripes.gif') repeat top left;
    border-bottom: 1px solid #333333;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    padding-left: 2px;
}

.homeCellHeader2 {
    /* Sets the height at 34 pixels. */
    height: 34px;
    /* Sets the font line height at 33 pixels. */
    line-height: 33px;
    /* Text color is light gray. */
    color: #222;
    /* Background color is set to dark gray. */
    background: silver url('themes/base/images/light_background_stripes.gif') repeat top left;
    border-bottom: 1px solid #333333;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    padding-left: 2px;
}

#questionColumn .homeCellHeader, #questionControlColumn .homeCellHeader {
    border: 1px solid #333333;
}

.homeSubHeader {
    /* Sets the height at 34 pixels. */
    height: 34px;
    /* Sets the font line height at 33 pixels. */
    line-height: 33px;
    /* Text color is light gray. */
    color: #222;
    /* Background color is set to dark gray. */
    background: #6699cc url('themes/base/images/light_background_stripes.gif') repeat top left;
    border: 1px solid #333333;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    padding-left: 2px;
}

.homeCellContent, .homeSectionContent {
    padding: 5px;
    color: #000000;
}

.homeCellContent2, .homeSectionContent2 {
    padding: 5px;
    color: #000000;
    height: 100%;
}
/*  */
.contentHeader {
    background-color: #333333;
    height: 22px;
    line-height: 21px;
    color: #fff;
    font-weight: bold;
    padding-left: 10px;
}

.doc-div-header {
    /* Sets the height at 34 pixels. */
    height: 38px;
    /* Sets the font line height at 37 pixels. */
    line-height: 37px;
    /* Text color is light gray. */
    color: #222;
    /* Background color is set to dark gray. */
    background: #6699cc url('themes/base/images/light_background_stripes.gif') repeat top left;
    border: 1px solid #333333;
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
    width: 95%;
}

.doc-div-content {
    width: 95%;
}

.unitCellContent {
    width: 73%;
    margin: 0 5px;
}

.unitCellDescription {
    height: 18px;
}

.unitCellImg {
    margin: 2px;
}

    .unitCellImg img {
        width: 48px;
        height: 48px;
    }

.unitCellButton {
    margin: 2px 2px 2px 0;
    bottom: 0px;
    width: 14%;
}

.whatsnew {
    color: #fff;
    background-color: #003366;
    margin: 0;
}

#passwordSetTable {
    /* Gives the home section a gap 18 pixels tall below it. */
    margin-bottom: 10px;
}

/* -------------------- Login/Profile styles ----------------------------------------------------------------------- */

/* Logoff/Profile links ---------- */
.profileLinks a {
    text-decoration: none;
    color: #fff;
    font-size: 13px;
    display: block;
    line-height: 27px;
}

.profileLinks li {
    width: 90px;
    margin-top: 1px;
}

/* This is the base style for all login and password reminder views. */
#login, #profile {
    /* All text in login and profile views is white. */
    color: #000000;
}

/* Sets the style for the Login div. */
#login {
    margin-bottom: 18px;
}

    /* Sets the style for all legends in the login. The legend is the header for forms. */
    #login legend {
        /* Sets the background color to light gray. */
        background: #333333;
        /* Sets the text color to dark gray. */
        color: #fff;
        /* Sets the height to 22 pixels. Combined with the top padding of 6 pixels it gives the
        legend a total height of 28 pixels. */
        height: 28px;
        line-height: 27px;
        /* Forces all text to center itself in the legend. */
        text-align: center;
        /* Places a blank space 10 pixels tall below the legend. */
        margin-bottom: 10px;
        width: 100%;
    }

/* Sets the style for the forgotPassword div (contains the "Forgot Your Password" link). */
#forgotPasswordLink {
    /* Set the width of the element at 180 pixels. */
    width: 50%;
    /* Give the forgotPassword element a top border that is 1 pixel thick and light gray. */
    border-top: 1px solid #ccc;
    /* Set the top and bottom margins to 0 pixels. Set the left and right margins to auto (centers content). */
    margin: 0 auto;
    text-align: center;
    padding: 10px 0;
    clear: both;
}

.loginLink {
    width: 80%;
    border-top: 1px solid #ccc;
    margin: 0 auto;
    text-align: center;
    padding: 10px 0;
}

/* Sets the style for username, password, email, and confirm password input fields (textboxes)
    in the login. */
#login input#UserName, #login input#Password, #login input#Email, #login input#ConfirmPassword, #login input#EmailAddress {
    width: 90%;
    /* Places a blank space 20 pixels wide to the left of the textboxes. */
    margin-left: 20px;
}

/* Set style for the forgotPassword form input element(s). */
#forgotPassword input#EmailAddress {
    /* Set the left margin to 20 pixels. */
    margin-left: 20px;
    /* Set the width of the forgotPassword form element(s) to 440 pixels. */
    width: 90%;
}

.loginForm {
    background: #fff;
}

/* -------------------- Form Styles -------------------------------------------------------------------------------- */
/* Sets the styles for the specified form <legend> elements. */
legend {
    /* Set the text color to black. */
    color: #000000;
    /* Set the background color to light gray. */
    background-color: #ccc;
    /* Set the font size to 14 px tall. */
    font-size: 14px;
    /* Align all text in the center. */
    text-align: center;
    /* Set the legends' heights at 19 pixels. */
    height: 19px;
    /* Set the line height for the text at 18 pixels. */
    line-height: 18px;
    /* Sets the legends' widths to 90% of their parent forms' widths. */
    width: 90%;
}

/* Sets the styles for text input, password, and textarea focus and hover. */
input[type=text]:hover, input[type=password]:hover, input[type=text]:focus, input[type=password]:focus, textarea:hover, textarea:focus {
    /* Set the background color to web-safe yellow. */
    background-color: #ff6 !important;
    /* Set the border color to dark gray (web-safe). */
    border-color: #333333 !important;
}

.passwordEditor {
    background: #fff;
}

/* Sets the style for several editor forms. */
#profileEditor, #analystEditor {
    /* Set the top and bottom padding at 5 pixels and the left and right padding at 0 pixels. */
    padding: 5px 5px;
}

/* Sets the style for the unitname, unittitle, unitaltname, unit external number, unit 24 hour contact, and the unitdescription.
    this is a global setting since no parent element is specified. */
input[id$="_UnitName"], input[id$="_UnitTitle"], input[id$="_UnitAltName"], input[id$="_ExternalNbr"], input[id$="_Contact24Hour"], input[id$="_UnitDesc"] {
    /* Set the width of input elements at 90%. */
    width: 90%;
}

input[id$="_NewPassword"], .password {
    width: 120px;
}

input[id$="__JurisdictionDesc"] {
    width: 100%;
}

/*-------------------- Person Form Fields -------------------------------------------------------------------------- */

.personNameFirst, .personNameLast, .personNameMiddle, .personTitle, .personPrefix, .personPhone, .personCell, .personEmail, .confirmEmail {
    margin-right: 1%;
}

#ProfileModel_PersonPrefix, #ProfileModel_PersonNameFirst, #ProfileModel_PersonNameMiddle, #ProfileModel_PersonNameLast,
#ProfileModel_PersonJobTitle, #ProfileModel_PersonPhone, #ProfileModel_PersonEmail, #ProfileModel_ConfirmEmail, #ProfileModel_PersonCell {
    width: 100%;
}

#profile input {
    width: 100%;
}

.profile-checkbox {
    margin-top: 20px;
    float: right;
}

#profile input[type="checkbox"] {
    width: 30px;
}

/*-------------------- Address Form Fields ------------------------------------------------------------------------- */
input#AddressModelSet_0__Address1, input#AddressModelSet_0__Address2, input#AddressModelSet_0__CityName, input#AddressModelSet_0__StateCode,
input#AddressModelSet_1__Address1, input#AddressModelSet_1__Address2, input#AddressModelSet_1__CityName, input#AddressModelSet_1__StateCode {
    width: 90%;
}

input#AddressModelSet_0__ZipCode, input#AddressModelSet_1__ZipCode {
    width: 90px;
}

/* Sets the style for the addresslatitude and addresslongitude input elements. 
    This a global setting since no parent element is specified. */
input#AddressModelSet_0__AddressLatitude, input#AddressModelSet_0__AddressLongitude,
input#AddressModelSet_1__AddressLatitude, input#AddressModelSet_1__AddressLongitude {
    /* Set the width at 140 pixels. */
    width: 140px;
}

/* Sets the style for the isSameAddress checkbox on the unit_entry page. */
#isSameAddress {
    /* Give it a top and left margins at 20 pixels. */
    margin-top: 10px;
    margin-left: 10px;
}

.geocodeCell {
    margin-bottom: 10px;
}

/* Set styles for the changePassword form input elements. */
#changePasswordForm input#OldPassword, #changePasswordForm input#NewPassword, #changePasswordForm input#ConfirmPassword {
    width: 90%;
    /* Set the left margin to 20 pixels. */
    margin-left: 20px;
}

/* Set styles for the resetPassword form input elements. */
#resetPassword input#EmailAddress, #resetPassword input#NewPassword, #resetPassword input#ConfirmPassword {
    /* Set the left margin to 20 pixels. */
    margin-left: 20px;
    /* Sets the width of the changepassword form inputs to 236 pixels. */
    width: 90%;
}

.passwordPolicy {
    margin-left: 20px;
    width: 90%;
}

/* Sets the style for all labels with a class of editor-label in the login. */
#login .editor-label label {
    /* Places a blank space 20 pixels wide to the left of the label. This makes it line up
        nicely with the textbox inputs above. */
    margin-left: 20px;
}

/* Sets the style for the changePassword form labels. */
#changePasswordForm .editor-label label {
    /* Set the left margin to 20 pixels. */
    margin-left: 20px;
}

.loginWrapper {
    background-color: #fff;
    border: 1px solid #333333;
    overflow: auto;
}

/* Sets the style for the forgot password link on the login form. */
.forgotPassword {
    /* Gives the element a single pixel wide, light gray top border. */
    border-top: 1px solid #ccc;
    /* Pushes the element down 26 pixels from the element above it. */
    margin-top: 26px;
    /* Places a 13 pixel tall space between the element's content and the element's top border. */
    padding: 13px;
    /* Center all text in the forgotPassword form. */
    text-align: center;
}

/* Sets the style for the password length text that sits below the password textbox on the
    login form and change profile form. */
.passwordLengthReminder {
    /* Sets the text to 10 pixels tall. */
    font-size: 10px;
    /* Sets the text color to light gray. */
    color: #333333;
    /* Places a 22 pixel wide space to the left of the text. This places the text directly
        below the password textbox. */
    margin-left: 22px;
}

/* Sets the style for all elements with a css class of "warning". */
.warning {
    /* Sets the background color to white. */
    background-color: #fff;
    /* Sets the text color to black. */
    color: #000000;
    /* Places a blank space 10 pixels wide on the top, right, and left. Places a blank
        space 18px tall on the bottom. */
    padding: 10px 10px 18px 10px;
    /* Places a 2 pixel wide, dark gray border around the outside of the element. */
    border: 1px solid #333333;
}

/* -------------------- Table styles ------------------------------------------------------------------------------- */

/* Sets the style for all <table> elements. */
table {
    /* Gives the table a single pixel wide, dark gray border. */
    border: 1px solid #333333;
    /* Sets the table background color to white. */
    background-color: #fff;
    /* Sets the table text color to black. */
    color: #000000;
    /* Sets the table's width to 100% of its parent's width. */
    width: 100%;
}

    /* Sets the style for the last table row. */
    table tr:last-child {
        /* Gives the element a one pixel wide, dark gray bottom border. */
        border-bottom: 1px solid #333333;
    }

/* Sets the style for all table cell (data) elements. */
td {
    /* Set a padding of 5 pixels for all sides. */
    padding: 5px;
    text-align: left;
}

/* Sets the style for all table header elements. */
th {
    /* Center all text in the <th>. */
    text-align: left;
    padding-left: 5px;
    /* Set the background color to a medium gray. */
    background: #aaa;
    /* Set a single pixel, dark gray border on the bottom of the <th>. */
    border-bottom: 1px solid #333333;
}

/* Sets the style for all table data elements in table rows with a class of "total". */
tr.total td {
    /* Set the text to bold. */
    font-weight: bold;
}

/* Sets the style for all <td> elements with a "total" css class. */
tr.total {
    /* Set a single pixel, dark gray bottom border. */
    border-bottom: 1px solid #333333;
}

#PasswordSetTable {
    width: 481px;
}

#PersonPasswordList {
    width: 100%;
}

/* Sets the style for the headers on unit_assign_jurisdiction view */
.smallSubHeader, .jurisdictionHeader, .assignmentHeader, .passwordHeader {
    /* Set the background color to light blue */
    background-color: #3366cc;
    /* Text is bold */
    font-weight: bold;
    /* Text color is white */
    color: #fff;
    /* Add a single pixel, dark gray border */
    border: 1px solid #333333;
    /* Align all text with the left-hand side of the element */
    text-align: left;
}

/* -------------------- Assessment Grid Styles --------------------------------------------------------------------- */
/* Sets the style for the alternating row(s) in a the assessment webgrid. */
.webgrid-alternating-row {
    /* Sets the height at 30 pixels. */
    height: 30px;
    /* Sets the background color to light gray. */
    background-color: #ccc;
    /* Sets a single pixel wide, gray bottom border. */
    border-bottom: 1px solid #a0a0a0;
}

/* Sets the style for the regular row(s) in a the assessment webgrid. */
.webgrid-row {
    /* Sets the height at 30 pixels. */
    height: 30px;
    /* Sets a single pixel wide, gray bottom border. */
    border-bottom: 1px solid #a0a0a0;
}

/* Sets the style for the viewUnitState <td> element. */
.viewUnitState {
    /* Sets the width to 40 pixels. */
    width: 40px;
}

/* -------------------- User Management Page styles ---------------------------------------------------------------- */
/* Sets the style for the managerListCell element. */
.managerListCell {
    /* Sets the background color of the element to white. */
    background-color: #fff;
    /* Sets a single pixel wide, dark gray border. */
    border: 1px solid #333333;
    /* Sets padding for the element. */
    padding: 10px 10px 18px 10px;
}

/* Sets the style for the managerList element. */
.managerList {
}

/* -------------------- Button styles ------------------------------------------------------------------------------ */
/* Sets the style for any element with a css class of button. Ideally this is a <button> or <a> element. */
button, .button, .logoff a {
    /* Sets the background color of the button to dark gray. */
    background: #cfcfcf;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(#dadada,0),color-stop(#c1c1c1,1));
    background: -webkit-linear-gradient(top, #dadada 0%, #c1c1c1 100%);
    background: -moz-linear-gradient(top, #dadada 0%, #c1c1c1 100%);
    background: -o-linear-gradient(top, #dadada 0%, #c1c1c1 100%);
    background: linear-gradient(top, #dadada 0%, #c1c1c1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dadada', endColorstr='#c1c1c1',GradientType=0 );
    border: 1px solid #bdbdbd;
    border-color: #bdbdbd #adadad #9e9e9e;
    -webkit-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #e3e3e3;
    -moz-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #e3e3e3;
    box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #e3e3e3;
    padding: 0 54px 0 10px;
    height: 28px;
    display: inline-block;
    position: relative;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    float: left;
    margin: 5px;
    overflow: hidden;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    /* Mouse cursor is changed to the pointer finger. */
    cursor: pointer;
    /* Sets the element's z-index to 1. This is to clear up an overlap bug with menu items. */
    z-index: 0;
    line-height: 27px !important;
}

.button-text {
    font-size: 14px;
    white-space: nowrap;
    color: #003366;
    text-shadow: 0 1px 0 #dfdfdf;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.button-icon-right {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 42px;
    border-left: 1px solid #bdbdbd;
    -webkit-box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
    -moz-box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
    box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
}

    .button-icon-right span {
        width: 18px;
        height: 18px;
        opacity: 0.7;
        position: absolute;
        left: 25%;
        top: 25%;
        margin: -20px 0px 0px -20px;
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
    }

button:hover, .button:hover {
    -webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}

    button:hover button-text, .button:hover button-text {
        text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
        color: #fff;
    }

    button:hover button-icon-right span, .button:hover button-icon-right span {
        opacity: 1;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

button:active, .button:active {
    position: relative;
    top: 1px;
    background: #c8c8c8;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(#c8c8c8,0),color-stop(#d0d0d0,1));
    background: -webkit-linear-gradient(top, #c8c8c8 0%, #d0d0d0 100%);
    background: -moz-linear-gradient(top, #c8c8c8 0%, #d0d0d0 100%);
    background: -o-linear-gradient(top, #c8c8c8 0%, #d0d0d0 100%);
    background: linear-gradient(top, #c8c8c8 0%, #d0d0d0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8c8c8', endColorstr='#d0d0d0',GradientType=0 );
    border-color: #9f9f9f #999999 #969696;
    text-shadow: 0 1px 0 #e2e2e2;
    -webkit-box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #d5d5d5;
    -moz-box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #d5d5d5;
    box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #d5d5d5;
}

a.button {
    text-decoration: none;
}

.menu-icon {
    padding-top: 5px;
}

.menu-text {
    margin-top: -5px;
}

.image-popup a.button {
    padding: 0 10px 0 10px;
}

/* -------------------- Button Text Styles ------------------------------------------------------------------------- */
/* Sets the style for small button text. */
.buttonTextWithIconSmall {
    /* Floats the text to the left of anything else (such as icons) included in the button. */
    float: left;
    /* Adds 2 pixels of padding to the top of the text. Makes text vertically level with icon(s). */
    padding-top: 3px;
    /* Puts a 2 pixel spacer between the right of the text and the icon. */
    margin-right: 2px;
}

/* -------------------- Button Size Styles ------------------------------------------------------------------------- */
/* Overrides several parameters as set by the .button style to create a small button. */
.small.button {
    font-size: 11px;
    /* Sets padding for the small button. */
    padding: 2px 5px 3px;
    /* Removes the bold font weight. */
    font-weight: normal;
}

/* Overrides several parameters as set by the .button style to create a medium button. */
.medium.button {
    /* Medium buttons have a slightly larger font size. */
    font-size: 13px;
}

/* Overrides several parameters as set by the .button style to create a large button. */
.large.button {
    /* Slightly larger font size than medium button. */
    font-size: 14px;
    /* Sets padding for the large button. */
    padding: 8px 14px 9px;
}

.tall.button {
    padding: 6px 10px 6px;
    height: 24px;
}

.wide.button {
    width: 60%;
}

.disabled.button {
    background: #ccc;
    color: #999;
    border: 1px solid #fff;
}

.buttonGap {
    margin-left: 5px;
}

/* -------------------- One-off buttons ---------------------------------------------------------------------------- */
.logonButton, .changePasswordButton, .passwordPolicyButton {
    margin: 10px 0 18px 20px;
}

.logonButton {
    height: 32px;
    float: right;
}

.saveProfileButton {
    margin: 5px 20px 0 0;
}

.editorButtons {
    margin: 10px 20px 18px 20px;
    float: right;
}

.forgotPasswordButton {
    margin: 10px 0 0 20px;
}

.personPasswordSaveButton {
    width: 70px;
}

.calcButton {
    width: 70%;
}

/* -------------------- Modal Dialog styles ------------------------------------------------------------------------ */
.ui-widget-header {
    border: 1px solid #aaaaaa /*{borderColorHeader}*/ !Important;
    background: #333333 /*{bgColorHeader}*/ 50% /*{bgHeaderXPos}*/ 50% /*{bgHeaderYPos}*/ repeat-x /*{bgHeaderRepeat}*/ !Important;
    color: #fff /*{fcHeader}*/ !Important;
    font-weight: bold;
}

.ui-widget-header-navbar {
    background: #333333 /*{bgColorHeader}*/ 50% /*{bgHeaderXPos}*/ 50% /*{bgHeaderYPos}*/ repeat-x /*{bgHeaderRepeat}*/ !Important;
    color: #fff /*{fcHeader}*/ !Important;
    font-weight: bold;
}
/* -------------------- Checkbox List styles ----------------------------------------------------------------------- */
.checkboxList {
    border: 1px solid #333333;
}

/* Sets the style for all legends in the login. The legend is the header for forms. */
.checkboxListHeader {
    /* Sets the background color to light gray. */
    background: #333333;
    /* Sets the text color to dark gray. */
    color: #fff;
    /* Sets the height to 22 pixels. Combined with the top padding of 6 pixels it gives the
        legend a total height of 28 pixels. */
    height: 28px;
    line-height: 27px;
    /* Forces all text to center itself in the legend. */
    text-align: center;
    /* Places a blank space 10 pixels tall below the legend. */
    margin-bottom: 10px;
    padding: 0 10px 0 10px;
}

.checkboxListContent {
    height: 240px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.checkboxListContentNoScroll {
    height: 240px;
    overflow-x: hidden;
}

/* KB v4.03 addded for EmailNotification.cshtml*/
.checkboxListContentScroll {
    height: 240px;
    overflow-x: scroll;
    overflow-y: scroll;
}

.checkboxListContent.small {
    overflow-y: hidden;
}

/* -------------------- Miscellaneous styles ----------------------------------------------------------------------- */

/* Sets the style for hiding a div that has the class of "hidden" */
div.hidden, tr.hidden, table.hidden, th.hidden, td.hidden {
    /* Makes the element invisible and removes any space that the element would have taken up. */
    display: none;
}

/* Sets the style for the overlay behind the modal dialog boxes. */
.ui-widget-overlay {
    /* Sets the opacity of the overlay. */
    opacity: .60 !important;
    /* Sets the opacity of the overlay for IE. */
    filter: Alpha(Opacity=60) !important;
    /* Sets the color of the overlay. */
    background: #000000 !important;
}

.end {
    float: right !important;
}

.begin {
    float: left !important;
}

.clear {
    clear: both;
}

.center {
    text-align: center;
}

.shadow {
    box-shadow: 3px 3px 2px #3366cc;
}

.insetShadowLightBackground {
    box-shadow: inset 0 6px 12px #333333, 0 1px 6px #333333;
}

.error {
    margin-left: 20px;
}

.validators {
    color: #cc0033;
    margin-left: 20px;
}

.logoff {
    margin-top: 20px;
    text-align: center;
}

#expireTime {
    width: 240px;
    height: 45px;
}

.statesDropDown {
    position: absolute;
    margin-top: 20px;
    /* z-index: 102; */ /* James Kim */
    z-index: 0;
    background: #fff;
    border: 1px solid #333333;
    height: 118px;
    overflow-y: scroll;
}

.UsersOnline {
    width: 200px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    background-color: #ffff66;
    border: 1px solid #333333;
    padding: 3px;
}

#calcResults {
    text-align: center;
    font-size: 14px;
}

#calcButtonContainer {
    width: 50%;
}

#calcButtonContainerNew {
    width: 50%;
}

#calcResultContainer {
    width: 50%;
}

#calcResultContainerNew {
    width: 50%;
}

/* -------------------- Fading Message after Saves ----------------------------------------------------------------- */
.fadingMessage {
    height: 16px;
    line-height: 15px;
}

.message {
    margin-left: 3px;
}

.success {
    color: #339900;
    font-size: 1.1em;
    /*text-shadow: 0px 1px 1px 0px #000000;*/
}

.failure {
    color: #cc0033;
    /*font-size: 1em;*/
    /*font-weight: bold;*/
}

/* -------------------- Pager Html Helper -------------------------------------------------------------------------- */
.selected {
    background-color: #aaa;
    color: #333333 !Important;
}

/* -------------------- Icon styles -------------------------------------------------------------------------------- */

.icon-collection {
    margin: 0;
    padding: 0;
}

    .icon-collection > span {
        padding: 0;
        position: relative;
    }

        .icon-collection > span.border {
            margin: 2px;
            position: relative;
            padding: 2px 0;
            float: left;
            list-style: none;
        }

span.ui-icon {
    float: left;
    margin: 0 2px;
}

/* Sets the icon's color to dark blue. */
.darkblue {
    background-image: url('themes/base/images/ui-icons_162f67_256x240.png') !Important;
}

/* Sets the icon's color to light blue. */
.lightblue {
    background-image: url('themes/base/images/ui-icons_3775c2_256x240.png') !Important;
}

/* Sets the icon's color to red. */
.red {
    background-image: url('themes/base/images/ui-icons_cc0033_256x240.png') !Important;
}

/* Sets the icon's color to green. */
.green {
    background-image: url('themes/base/images/ui-icons_339900_256x240.png') !Important;
}

/* Sets the icon's color to medium gray. */
.mediumgray {
    background-image: url('themes/base/images/ui-icons_454545_256x240.png') !Important;
}

/* Sets the icon's color to dark gray. */
.darkgray {
    background-image: url('themes/base/images/ui-icons_303030_256x240.png') !Important;
}

/* Sets the icon's color to light gray. */
.lightgray {
    background-image: url('themes/base/images/ui-icons_cccccc_256x240.png') !Important;
}

.wordwrap {
    word-wrap: break-word;
}

.normal {
    font-weight: normal !important;
}

#unitUnitGroupsList {
    list-style: none;
}

.fivepixelmarginright {
    margin-right: 5px;
}

.contactButtons {
    padding-top: 5px !important;
}

.tenpixelmarginright {
    margin-right: 10px;
}

/* -------------------- Fingertip Styles --------------------------------------------------------------------------- */
.fingertipCategory {
    font-weight: bold;
    font-size: 16px;
    color: #3366cc;
    text-align: left;
    border-top: solid 1px #333333;
}

.fingertipSubCategory {
    font-weight: bold;
    font-size: 12px;
    color: #333333;
    background-color: #ddd;
    text-align: left;
}

.fingertipTitle {
    width: 200px;
    text-align: left;
}

/* -------------------- Validation Error Style --------------------------------------------------------------------- */
.validation-summary-errors {
    color: #FF0000;
}

/* -------------------- Copyright and Version Styles --------------------------------------------------------------- */
.version {
    padding-top: 6px;
    text-align: center;
    color: #fff;
    font-weight: bold;
}


/* -------------------- Individual Unit Pages Links and Buttons ----------------------------------------------------- */

.linkbtns {
    width: 90px;
    font-weight: bold;
}

.DocUnitImage {
    margin-left: 20px;
    width: 200px;
    height: 200px;
}

/* -------------------- Text --------------------------------------------------------------------------------------- */
.bold {
    font-weight: bold;
}

#invite-users-form {
    background: #3366cc;
    border: solid 1px #333333;
    color: #fff;
    margin: 0 10px;
}

#invite-users-send-button {
    margin-top: 20px;
}

#invite-users-custom-text {
    padding-bottom: 5px;
    font-size: 16px;
    line-height: 15px;
}

#invite-users-subheader {
    width: 80%;
}

.disclaimer {
    padding: 0 8px;
}

/* -------------------- Screen Sizes ------------------------------------------------------------------------------- */
@media only screen and (max-width: 1025px) {
    .unitCellContent {
        width: 68%;
    }
}

@media only screen and (max-width: 1570px) {
    .button-icon-right {
        width: 40%;
        max-width: 42px;
    }
}

@media only screen and (max-width: 999px) {
    .unitCellButton {
        width: 15%;
    }
}

@media only screen and (max-width: 1512px) {
    .unitCellDescription {
        height: 48px;
    }
}

@media only screen and (max-width: 934px) {
    .unitCellButton {
        width: 16%;
    }
}

@media only screen and (max-width: 877px) {
    .unitCellButton {
        width: 17%;
    }

    .unitCellContent {
        width: 66%;
    }
}

/* -------------------- Table Grid    ------------------------------------------------------------------------------- */
table.gridtable {
    width: 100%;
    font-family: verdana,arial,sans-serif;
    font-size: 11px;
    color: #333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}

    table.gridtable th {
        border-width: 1px;
        padding: 4px;
        border-style: solid;
        border-color: #666666;
        /*background-color: #dedede;*/
        background-color: #55708F;
        font-weight: bold;
        color: #FFF;
    }

    table.gridtable td {
        border-width: 1px;
        padding: 5px;
        border-style: solid;
        border-color: #666666;
    }


table.gridtableSimple {
    width: 100%;
    font-family: verdana,arial,sans-serif;
    font-size: 11px;
    color: #333333;
    border-width: 0px;
    border-color: silver;
    border-collapse: collapse;
}

    table.gridtableSimple th {
        border-width: 1px;
        padding: 4px;
        border-style: dotted;
        border-color: silver;
        /*background-color: #dedede;*/
        background-color: #55708F;
        font-weight: bold;
        color: #FFF;
        margin-top: 20px;
    }

    table.gridtableSimple td {
        border-width: 1px;
        padding: 5px;
        border-style: dotted;
        border-color: silver;
    }

        table.gridtableSimple td.mid_header {
            color: White;
            font-weight: bold;
            background-color: #5D7B9D;
            text-align: left;
            padding: 5px 0px 5px 3px;
            vertical-align: middle;
            margin: 10px 0px 0px 0x;
        }



/* -------------------- Selected Box ------------------------------------------------------------------------------- */
.selectedUnitBox {
    /* Sets the background color of the button to dark gray. */
    background-color: #ccc;
    /* Sets the elements display as both inline and block. */
    display: inline-block;
    /* Set the element's padding. */
    padding: 5px 10px 6px;
    /* Sets the text color to black. */
    color: #000000 !Important;
    /* Removes all text decoration (i.e., underline). */
    text-decoration: none;
    /* All text is bolded. */
    font-weight: bold;
    /* Text line height is set to 1. */
    line-height: 1;
    /* Removes any default border that may exist. */
    border: 0;
    /* Sets a drop shadow for the button. */
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    /* Sets a drop shadow for the text on the button. */
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    /* Sets a single pixel wide border on the bottom of the button. */
    border-bottom: 1px solid rgba(0,0,0,0.25);
    /* Sets the element's position relative to its natural/default position. */
    position: relative;
    /* Mouse cursor is changed to the pointer finger. */
    cursor: pointer;
    /* Sets the element's z-index to 1. This is to clear up an overlap bug with menu items. */
    z-index: 101;
    /* Set a one pixel, light blue border around the object. */
    border: solid 1px #3366cc;
    margin-right: 5px;
}

/* --------------------- Styles for Unit Planner Views ------------------------------------------------------------- */

#uplan table.legend {
    font-family: verdana,arial,sans-serif;
    font-size: 11px;
    color: #333333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}

    #uplan table.legend td {
        height: 30px;
        border-width: 1px;
        padding: 0px 5px 0px 5px;
        border-style: solid;
        border-color: #666666;
        vertical-align: middle;
    }

#uplan .rating, #answers .rating {
    color: #FFFFFF;
    width: 35px;
    text-align: center;
    font-size: 1.3em;
    font-weight: 700;
    white-space: nowrap;
    text-shadow: 1px 1px 1px #000000;
}

#uplan .full, #answers .full {
    background-color: #507933;
}

#uplan .adeq, #answers .adeq {
    background-color: #107896;
}

#uplan .marg, #answers .marg {
    background-color: #C1561A;
}

#uplan .none, #answers .none {
    background-color: #AD2A1A;
}

#uplan .not, #answers .not {
    background-color: #6D6D6D;
}

#uplan .inc, #answers .inc {
    background-color: #000000;
}

#uplan .tasktext {
    font-weight: bold;
}

#uplan .link {
    width: 30px;
}

#uplan .desc, #answers .desc {
    font-size: .9em;
}

#uplan .largedesc, .lblrate, .valrate {
    font-size: 1.3em;
    font-weight: 700;
}

#answers #task {
    font-size: 1.3em;
    font-weight: 700;
}

#answers .lblrate {
    text-align: right;
}

#answers .valrate {
    text-align: center;
    border: 1px solid #666666;
}

#answers .answerrow {
    border: 1px solid #666666;
    padding-right: 10px;
    margin-bottom: 15px;
    padding-left: 5px;
    background-color: #FFFFF0;
}

#answers .ques {
    text-align: left;
    font-size: 1.1em;
    font-weight: 700;
    font-style: italic;
}

#answers .alt {
    color: Blue;
}

#answers .answerrow input[type=text] {
    width: 100%;
    font-size: 1.3em;
    font-weight: 700;
}

#answers .current {
    width: 50%;
    height: 45px;
}

#answers .best {
    text-align: center;
    width: 50%;
    font-size: 1.3em;
    font-weight: 700;
}

#answers .planned {
    height: 45px;
}



/* -------------------- Styles for Final Report View --------------------------------------------------------------- */
#final .pageHeader {
    font-size: 14px;
    font-weight: bold;
}

#final .tabHeading {
    font-size: 16px;
    padding: 5px 0px 20px 0px;
}

#final .message {
    color: Red;
    background-color: White;
    font-size: larger;
}

#final table.finalgridtable {
    width: 100%;
    font-family: verdana,arial,sans-serif;
    font-size: 11px;
    color: #333333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}

    #final table.finalgridtable th {
        font-size: 14px;
        font-weight: bold;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666666;
        color: White;
        background-color: Black;
        text-align: left;
    }

    #final table.finalgridtable td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
    }

#final .tabStyle {
    margin: 20px 20px 20px 0px;
}

#final .colspanWhite {
    border-left: 1px solid Black;
    border-top: 1px hidden white;
    border-bottom: 1px hidden white;
    border-right: 1px hidden white;
    width: 0px;
}

/* Activity Readiness Tab  */
#final .arGrayRow {
    background-color: #808080;
    color: Black;
    font-weight: bold;
    font-size: 1.2em;
    width: 100%;
    padding: 8px;
    border: 1px solid Black;
}

#final .arRow {
    background-color: White;
    color: Black;
    font-size: 1.1em;
    padding: 8px 8px 8px 20px;
    border: 1px solid Black;
}

#final .full {
    background-color: #00B050;
    color: Black;
    font-weight: bold;
    font-size: 1.2em;
    width: 30%;
    text-align: center;
    border: 1px solid Black;
}

#final .adeq {
    background-color: #00B0F0;
    color: Black;
    font-weight: bold;
    font-size: 1.2em;
    width: 30%;
    text-align: center;
    border: 1px solid Black;
}

#final .marg {
    background-color: #FFFF00;
    color: Black;
    font-weight: bold;
    font-size: 1.2em;
    width: 30%;
    text-align: center;
    border: 1px solid Black;
}

#final .none {
    background-color: #FF0000;
    color: Black;
    font-weight: bold;
    font-size: 1.2em;
    width: 30%;
    text-align: center;
    border: 1px solid Black;
}

#final .not {
    background-color: #d9d9d9;
    color: Black;
    font-weight: bold;
    font-size: 1.2em;
    width: 30%;
    text-align: center;
    border: 1px solid Black;
}

/* Recommendation Tab  */
#final .recRow {
    background-color: White;
    color: Black;
    font-size: 1.1em;
    padding: 8px 8px 8px 8px;
    border: 1px solid Black;
}

/* Questionnaire Tab  */
#final .qGrayRow {
    background-color: #d9d9d9;
    color: Black;
    font-weight: bold;
    font-size: 1.2em;
    border: 1px solid Black;
    padding: 8px 8px 8px 8px;
}

#final .qBoldRow {
    background-color: White;
    color: Black;
    font-weight: bold;
    font-size: 1.2em;
    border: 1px solid Black;
    padding: 8px 8px 8px 8px;
}

#final .qRow {
    background-color: White;
    color: Black;
    font-weight: normal;
    font-size: 1.1em;
    border: 1px solid Black;
    padding: 8px 8px 8px 8px;
}

/* Reference Tab  */
#final .refCell {
    width: 50%;
    border: 1px solid Black;
    padding: 8px 8px 8px 8px;
}

#final .refCellLeftPad {
    width: 50%;
    border: 1px solid Black;
    padding-left: 8px;
}

/* -------------------- Class for hiding content off-screen -------------------------------------------------------- */
.context {
    position: absolute;
    left: -999em;
    width: 1em;
    overflow: hidden;
}

.hoverTable tr:hover {
    background-color: #ffff99;
}

/** show data entry fields*/
.required:after {
    content: "*";
    font-weight: bold;
    color: #FF6B6B;
    font-size: 1.25em;
}

.spinner {
    position: fixed;
    left: 50%;
    top: 50%;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 80px;
    height: 80px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

.overlay {
    background: #e9e9e9;
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    z-index: 100;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}