/* Minification failed. Returning unminified contents.
(2187,22): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-color-f75f55'
(2243,16): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(2243,56): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-weight-normal'
(2243,90): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-size-14'
(2243,118): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-line-spacing-18'
(2243,149): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-family-dm-sans'
(2244,26): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(2245,17): run-time error CSS1039: Token not allowed after unary operator: '-grey_-656565'
(2262,16): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(2262,61): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-size-20'
(2262,94): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-family-dm-sans'
(2263,26): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(2264,17): run-time error CSS1039: Token not allowed after unary operator: '-black_-222222'
(2310,16): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(2310,56): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-weight-normal'
(2310,90): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-size-16'
(2310,118): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-line-spacing-21'
(2310,149): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-family-dm-sans'
(2311,26): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(2312,17): run-time error CSS1039: Token not allowed after unary operator: '-black_-222222'
(2323,16): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(2323,56): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-weight-normal'
(2323,90): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-size-16'
(2323,118): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-line-spacing-21'
(2323,149): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-family-dm-sans'
(2324,26): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(2325,17): run-time error CSS1039: Token not allowed after unary operator: '-black_-222222'
(3753,10): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
 */
body {
    margin: 0px;
    padding: 0px;
    background: #e2e2e2;
    position: relative;
}

html {
    color: #333;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'PT Sans', Verdana, Sans-Serif;
    font-size: 10.5pt;
    font-weight: normal;
    line-height: 14pt;
}

h1 {
    margin: 0;
    padding: 5px;
    font-size: 14pt;
    font-weight: normal;
}

h2 {
    margin: 0;
    padding: 5px;
    font-size: 18px;
    font-weight: normal;
}

h3 {
    margin: 0;
    padding: 5px;
    font-size: 12pt;
    font-weight: normal;
}

h4 {
    margin: 0;
    padding: 5px;
    font-size: 10pt;
    font-weight: normal;
}

p {
    margin: 0;
    padding: 5px;
    font-size: 14px;
    font-weight: normal;
    line-height: 14pt;
}

a {
    cursor: pointer;
    outline: none;
}

    a img {
        border: 0px;
    }

form {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

fieldset {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

table {
    border-spacing: 0px;
}

td {
    border-spacing: 0px;
}

textarea {
    resize: none;
    overflow: auto;
    margin: 0px;
    padding: 0px;
}

input[type='date']::-webkit-outer-spin-button,
input[type='date']::-webkit-inner-spin-button,
input[type='time']::-webkit-outer-spin-button,
input[type='time']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0px;
    padding: 0px;
}

input[type='radio'] {
    border: none !important;
    background-color: transparent !important;
}

input[type='submit']:focus {
    -webkit-appearance: none;
    background-color: #ccc;
}

input[type='checkbox'] {
    border: none !important;
    background-color: transparent !important;
}

label {
    display: inline-block;
    padding: 1px;
}

.left {
    float: left;
    clear: none !important;
}

.right {
    float: right;
    clear: none !important;
}

.clear {
    clear: both;
}

.hidden {
    display: none !important;
}

.hide {
    display: none;
}

.content-fourth {
    width: 25%;
}

.content-third {
    width: 33%;
}

.content-half {
    width: 50%;
}

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

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.note {
    font-size: 0.75em;
    line-height: 1.2em;
}

.allow-hover:hover {
}

.no-hover {
    cursor: default !important;
}

.low-res {
    display: none !important;
}
/*Change display when defining responsive design styles*/
.hv-center {
    left: 50%;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                       BUTTONS                                                    */
/*-----------------------------------------------------------------------------------------------------*/
.button {
    background: #f8f8f8;
    border: 1px solid #c0c0c0;
    color: #706666;
    cursor: pointer;
    display: block;
    font-size: 10.5pt;
    margin: 10px 0px;
    padding: 6px 10px;
    text-align: center;
    text-decoration: none;
}

    .button.green {
        color: #fff;
        background: #9cd16f;
        border: 1px solid #7ab348;
        text-shadow: 1px 1px 1px rgba(110, 146, 77, 1);
    }

        .button.green:hover {
            color: #fff;
            background: #a6d77d;
            border: 1px solid #86bc57;
            text-shadow: 1px 1px 1px rgba(112,155,61, 1);
        }

a.disabled {
    pointer-events: none;
    cursor: default;
    background: #BBBBBB !important;
    border: 1px solid #757575 !important;
}

    a.disabled.colorLink {
        background: none !important;
        border-style: none !important;
        color: #777 !important;
    }

.custom-checkbox.disabled {
    pointer-events: none !important;
    cursor: default !important;
}

    .custom-checkbox.disabled .box {
        background: #BBB !important;
    }

    .custom-checkbox.disabled .tick {
        border-bottom-color: #333 !important;
        border-left-color: #333 !important;
    }

/*-----------------------------------------------------------------------------------------------------*/
/*                                       CHECKBOXES                                                    */
/*-----------------------------------------------------------------------------------------------------*/

.custom-checkbox {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

    .custom-checkbox > .box {
        position: relative;
        display: block;
        width: 14px;
        height: 14px;
        border: 1px solid #ccc;
        background-color: #fdfdfd;
        border-radius: 1px;
    }

        .custom-checkbox > .box > .tick {
            position: absolute;
            left: 2px;
            top: -2px;
            width: 14px;
            height: 6px;
            border-bottom: 2px solid #666;
            border-left: 2px solid #666;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
            display: none;
        }

    .custom-checkbox > input:checked + .box > .tick {
        display: block;
    }

    .custom-checkbox input {
        position: absolute;
        outline: none;
        left: 0;
        top: 0;
        padding: 0;
        width: 16px;
        height: 16px;
        border: none;
        margin: 0;
        opacity: 0;
        z-index: 9999;
    }

    .custom-checkbox > input:active + .box {
        border-color: #aaa;
        background-color: #ddd;
    }

    .custom-checkbox.checked > .box > .tick {
        display: block;
    }

.oldie .custom-checkbox > .box > .tick {
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
}

.oldie .custom-checkbox > input {
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

.oldie .custom-checkbox {
    zoom: 1;
}

    .oldie .custom-checkbox > .box > .tick {
        left: 1px;
        top: -5px;
        zoom: 1;
    }

.custom-checkbox.dark > .box {
    border: 1px solid #ccc;
    background-color: #333;
}

    .custom-checkbox.dark > .box > .tick {
        border-bottom: 2px solid #fff;
        border-left: 2px solid #fff;
    }

.custom-checkbox.dark > input:active + .box {
    border-color: #ccc;
    background-color: #555;
}


/*-----------------------------------------------------------------------------------------------------*/
/*                                             PRINTING                                                */
/*-----------------------------------------------------------------------------------------------------*/
.printOnly {
    display: none;
}

@media print {
    .printOnly {
        display: inherit;
    }
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                           LOGIN IMAGES                                              */
/*-----------------------------------------------------------------------------------------------------*/

body._saloniris {
    background-image: url('/Content/images_shared/DS_Salon_Login.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

body._solid_saloniris {
    background-image: url('/Content/images_shared/DS_Salon_Login.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

body._solid_123pet {
    background-image: url('/Content/images_shared/bg_123pet.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

body._123pet {
    background-image: url('/Content/images_shared/bg_123pet.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

body._solid_orchid {
    background-image: url('/Content/images_shared/bg_orchid.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

body._orchid {
    background-image: url('/Content/images_shared/bg_orchid.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

body._solid_inkbook {
    background-image: url('/Content/images_shared/DS_Body_Art_Login.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

body._inkbook {
    background-image: url('/Content/images_shared/DS_Body_Art_Login.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.button {
    border:1px solid #c5c5c5; 
    color:#706666;
    cursor:pointer; 
    display:inline-block;
    font-size:10.5pt; 
    margin: 10px 0;
    padding:6px 10px; 
    text-align:center; 
    text-decoration:none;    
    text-shadow: 1px 1px 1px rgba(0, 0,0, 0.1);
    background: #f3f3f3;
}

.button:hover {
    background-color:#f8f8f8; 
    border:1px solid #bbbbbb; 
    color:#333333; 
    text-decoration:none;
    text-shadow: 1px 1px 1px rgba(0, 0,0, 0.15);
}

.button.green {
    color:#fff; background:#9cd16f; border: 1px solid #7ab348;  text-shadow: 1px 1px 1px rgba(110, 146, 77, 1);
}

.button.green:hover {
    color:#fff; background:#a6d77d; border:1px solid #86bc57; text-shadow:1px 1px 1px rgba(112,155,61, 1);
}

.button.red {
    color:#fff; text-shadow: 0px 1px 1px #AF4F4F; background:#db4a4a; border:1px solid #DF7575;
}

.button.red:hover {
    color:#fff; text-shadow: 0px 1px 1px #AF4F4F; background: #e16565 !important; border:1px solid #AF4F4F;
}


.button.edit-info {
    width: 78px;
}

/*-------Main Page Styles------*/
.applicationBody {
    color: #333;
    background-repeat: repeat, repeat-y;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'PT Sans', Verdana, Sans-Serif;
}

.applicationFooter {
    bottom: 0;
    font-family: Verdana, Sans-Serif;
    display: none;
    min-height: 10px;
    position: absolute;
}

#top-area {
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #272828;
    width: 100%;
    height: 335px;
}

#top-outline {
    border-bottom: 1px solid #000;
}

#divLogin {
    background-color: #222;
    height: 180px;
    width: 240px;
    padding: 10px 20px;
    border: 1px solid #444;
    position: absolute;
    right: 0px;
    margin: 0 30px 0 0;
    z-index: 3;
    box-shadow: 0 0 7px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 7px rgba(0,0,0,0.4);
}

.home-remember-user {
    margin: 0px;
    color: #ccc;
    font-size: 0.9em;
    width: 200px;
}

#divHeaderContent {
    display: flex;
    border-left: none;
    min-height: 60px;
}

#footerForPrint {
    display: none;
}

#footer-main, #buildNumber.login-build-number {
    color: #222222;
}

#footer-outline {
    width: 100%;
    position: absolute;
    bottom: 20px
}

#buildNumber.login-build-number {
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.createNewAccBuildNumber {
    margin: 0 !important;
    position: absolute;
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.coppyRight {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    bottom: 20px;
}

.daysmartSoftwareSpan {
    display: flex;
    justify-content: center;
    font-family: 'DM Sans';
}

#footer-main a {
    display: inline-block;
}

#footer-main #salonFooter {
    text-align: center;
    display: block;
    font-family: 'DM Sans';
}

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.grabbable {
    cursor: move !important; /* fallback if grab cursor is unsupported */
    cursor: -moz-grab !important;
    cursor: -webkit-grab !important;
    cursor: grab !important;
}

    .grabbable:active {
        cursor: -moz-grabbing !important;
        cursor: -webkit-grabbing !important;
        cursor: grabbing !important;
    }

.switch-container {
    display: inline-block;
    margin: 0 15px;
    vertical-align: middle;
}

.ui-sortable-disabled li {
    background-image: linear-gradient(0deg, rgba(204,204,204,.7) 0%, rgba(204,204,204,.7) 100%) !important;
}

.none-specified {
    color: #999;
}

.horizontal-divider {
    border-top: 1px solid #ccc;
    margin: 10px 20px;
}

.asyncLoading {
    color: #838383;
    padding: 0;
}

/*-----Application Main Layout-----*/
#divCenterContent {
    height: 100%;
    width: 100%;
    position: absolute;
}

#divSecondaryNavigation, #OptionsNavigation {
    background: url('images/divSidebarBackground.png') repeat-y;
}

/* --------------------------------------*/
/*           Loading Dialogs             */
/* --------------------------------------*/
.loading-message {
    background: none;
}

    .loading-message p {
        color: #616763;
        font-size: 17pt;
        font-family: "PT Sans", Arial, sans-serif;
        text-align: center;
    }

    .loading-message img {
    }

/*------------------------ Account Pages------------------------*/
#frmCreateAccount {
    height: 700px
}

.divNewAccountTable {
    width: 350px;
    margin: 20px auto;
    padding: 0 0 10px 30px;
}

#divProgressIndicator {
    background-image: url(images/loadProgress.gif);
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    margin: 20px auto;
    display: block;
}

#divStatus {
    color: #eee;
    background-color: #222;
    height: 100%;
    text-align: center;
}

    #divStatus h2 {
        margin: 15px 0 0 0;
    }

.signup-form {
    color: #ddd;
    background-color: #222;
    width: 500px;
    margin: 75px auto;
    border: 1px solid #aaa;
    border-top: 0px;
    position: relative;
    box-shadow: 0 0 7px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 7px rgba(0,0,0,0.4);
}

.signup-form-full-input {
    width: 342px;
}

.signup-form-half-input {
    width: 150px;
}

#signup-intro {
    height: 280px;
}

#signup-cloud {
    min-height: 300px;
}

.step-section {
    padding: 0 20px;
}

.signup-step-header, .login-header {
    width: 100%;
    height: 50px;
    background-color: #303030;
    padding: 10px 0;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #444;
}

    .signup-step-header h2, .login-header h2 {
        color: #888;
        text-align: center;
        margin: 10px 0;
        font-family: "Bitter", "Times New Roman", serif;
        font-size: 16pt;
    }

.login-header {
}

.create-account-button {
    position: absolute;
    bottom: 20px;
    width: 50%;
    left: 25%;
}

#signup-choose-industry div {
    margin: 40px auto;
    width: 190px;
}

#signup-choose-industry h3 {
    text-align: center;
}

#industry-list {
    width: 200px;
}

.field-label {
    color: #656565;
    font-size: 12px;
    margin: 0;
    padding: 0 0 5px 0;
    font-family: 'DM Sans';
}

.field-heading {
    color: #ddd;
    margin: 0;
    padding: 30px 0 5px 0;
    font-family: "Bitter", "Times New Roman", serif;
    font-size: 15pt;
}

#button-signup-cloud {
    width: 150px;
    margin: 0 3px;
}

.button-back {
    color: #bbb;
    padding: 6px 0;
    margin: 0 20px;
}

    .button-back:hover {
        text-decoration: underline;
    }

/*-----Form Fields-----*/
input,
textarea {
    background-color: #fdfdfd;
    padding: 3px;
    border: 1px solid #ccc;
    font-size: 12.5px;
    letter-spacing: 1px;
}

    input:hover,
    textarea:hover {
        background-color: #fff;
        border: 1px solid #aaa;
    }

    input:focus,
    textarea:focus {
        background-color: #fff;
        border: 1px solid #aaa;
    }


.focusField {
    color: #444;
    background-color: #fff;
    border: 1px solid #c05454 !important;
    outline: none;
}

.idleField {
    color: #666;
    background-color: #eee;
    border: 1px solid #ccc !important;
    outline: none;
}

.enteredField {
    color: #444;
    background-color: #eee;
    border: 1px solid #aaa;
    outline: none;
}

.formItemLabel {
    color: #ddd;
    font-size: 13pt;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                         COMBO BOXES                                                 */
/*-----------------------------------------------------------------------------------------------------*/
.divFormItem .ui-button {
    margin-left: -24px !important;
    border-color: #CCCCCC !important;
    border-style: none none none solid !important;
    border-width: medium medium medium 1px !important;
}

.ticketSection .ui-button {
}

.divFormItem .ui-button .ui-button-text {
    line-height: 18px;
}

.divFormItem button.ui-button-icon-only {
    width: 23px !important;
}

.divFormItem .ui-button-icon-only .ui-button-text {
    padding: 0.17em 0 !important;
}

.divFormItem .k-dropdown,
.divFormItem .k-combobox {
    padding: 0;
    width: 163px !important;
    font-size: 13.5px;
    text-align: left;
    letter-spacing: 1px;
}

    .divFormItem .k-dropdown.wide,
    .divFormItem .k-combobox.wide {
        width: 208px !important;
    }

    .divFormItem .k-dropdown.birthday {
        width: 75px !important;
        margin-right: 2px;
    }
/*.divFormItem .k-dropdown.birthday.year            { width: 135px !important;}*/
.wideList input.ui-autocomplete-input {
    width: 178px !important;
    line-height: 12pt;
    margin: 4px 0 0 0 !important;
}

.divFormItem .ui-widget-content {
    background: none repeat scroll 0 0 #FDFDFD;
}

.ui-state-default {
    border: 1px solid #ccc;
}

ul.ui-widget-content {
    border: 1px solid #ccc;
    max-height: 200px;
    overflow: auto;
    z-index: 9999 !important;
}

ul.ui-state-default:hover {
    border: 1px solid #aaa;
}

.wideList .ui-button, .narrowList .ui-button, .veryNarrowList .ui-button {
    margin-top: 0px;
}

.narrowList {
    margin: 10px 0 !important;
}

.veryNarrowList .k-dropdown {
    width: 75px !important;
}

.veryNarrowList {
    margin: 5px 0px !important;
    padding: 0 5px;
}

.k-popup .k-list .k-item {
    min-height: 1.8em;
}

.k-today {
    background-color: #FFF9E4;
    border: 1px solid #FBF1CF;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                        MODIFY FORMS                                                 */
/*-----------------------------------------------------------------------------------------------------*/

textarea {
    color: #444;
    font-family: 'Arial', Sans-Serif;
    width: 773px;
    height: 180px;
}

.divFormFieldSet {
}

.divFormItem {
    clear: left;
    margin: 5px;
    display: block;
}

.pFormLabel {
    color: #222;
    width: 110px !important;
    float: left;
    text-align: right !important;
    font-size: 10.5pt !important;
    display: inline-block !important;
}

.nonEditableValue {
    color: #333;
    display: inline-block;
    float: left;
    font-size: 10.5pt !important;
    overflow: hidden;
    padding: 5px 0;
    width: 121px;
}

.divFormEditable input {
    color: #444;
    width: 200px;
    margin: 2px 0; /* float:left; */
    display: inline-block;
}

.pFormInfo {
    color: #666;
    width: 200px;
    padding: 5px 0 0 0;
    font-size: 11pt;
    display: inline-block;
    cursor: pointer;
}

.pFormInfoStatic {
    color: #555;
    width: 200px;
    padding: 5px 0 0 3px;
    font-size: 11pt;
    display: inline-block;
    cursor: pointer;
}

.changeButton {
    width: 70px;
    float: left;
    font-size: 14px;
    margin: 0 !important;
}

.divFormValidationMessage {
}

.divModifyFormSection {
    background-color: #f2f2f2;
    width: 375px;
    margin: 6px 15px 15px 15px;
    padding: 0px 10px 10px 10px;
    border: 1px solid #e0e0e0;
    position: relative;
    float: left;
    box-shadow: 1px 1px 20px 0px #e8e8e8 inset;
}

.modify-form-half {
    width: 50%;
    float: left;
}

.divModifyFormSection.Narrow {
    width: 360px !important;
}

.divModifyFormSection.wide {
    width: 803px;
}

.wideModifyFormSectionHalf {
    width: 50%;
    float: left;
}

.adjacentFormItem {
    float: left !important;
    width: 45%;
    clear: none !important;
}

.hModifyFormHeader {
    color: #555;
    position: relative;
    font-family: "Museo 300";
    font-size: 20px;
    margin: -17px 0 0 -10px;
    text-shadow: 1px 1px 2px rgba(0,0,0, 0.2);
}

.divButtonStrip, #divButtonStrip {
    background-color: #eee;
    width: 100%;
    height: 55px;
    border-top: 1px solid #ccc;
    position: absolute;
    bottom: 0;
    clear: both;
}

    .divButtonStrip.tab3Buttons a {
        margin-right: 35px;
    }

.divButtonStrip_Dark {
    color: #ddd;
    background-color: #111;
    width: 100%;
    height: 55px;
    border-top: 1px solid #333;
    position: absolute;
    bottom: 0;
}

.tblHistory {
    background-color: #fff;
    width: 838px;
    margin: 0;
    border-right: 1px solid #bbb;
}

    .tblHistory th {
        color: #444;
        background-color: #e9e9e9;
        padding: 10px 5px;
        border-bottom: 1px solid #ccc;
        text-align: left;
        font-weight: normal;
        font-size: 16px;
    }

    .tblHistory td {
        padding: 5px;
        border-bottom: 1px solid #ccc;
    }
    /*.tblHistory.PetHistoryTable { width:610px !important; }*/
    .tblHistory .align-right {
        text-align: right;
    }

.divHistoryBox {
    background-color: #f8f8f8 !important;
    height: 295px;
    border: 1px solid #e0e0e0 !important;
    border-top: 1px solid #ddd !important;
    overflow: auto;
    padding: 0 !important;
}

    .divHistoryBox table tr td:last-child span {
        margin-right: 7px;
    }

        .divHistoryBox table tr th:last-child span.formatted, .divHistoryBox table tr th.align-right:last-child span,
        .divHistoryBox table tr td:last-child span.formatted, .divHistoryBox table tr td.align-right:last-child span {
            margin-right: 13px;
        }

    .divHistoryBox .smallButton {
        margin: 0 15px;
        padding: 5px;
    }

.pet .divHistoryBox {
    height: 330px;
}

.purchaseHistoryEmpty {
    color: #777;
    padding: 120px 0 0 0;
    font-size: 18px;
    font-style: italic;
    text-align: center;
}

.divFormItem textarea {
    width: 250px;
    height: 100px;
}

#divPurchaseHistory .ui-tabs .ui-tabs-nav {
    border-bottom: medium none;
}

.generic-buttonpane {
    background-color: #f2f2f2;
    border-top: 1px solid #c8c8c8;
    display: inline-block;
    margin-top: 0;
    width: 100%;
}

    .generic-buttonpane .delete.button {
        margin-left: 15px;
    }

    .generic-buttonpane .save.button {
        margin-right: 15px;
        width: 60px;
    }

    .generic-buttonpane .cancel.button {
        border-color: #bbbbbb;
        margin-right: 15px;
        width: 60px;
    }

#divHistory .loginInfoButton {
    display: inline-block;
    margin: 0px;
    margin-left: 20px;
}

#divHistory #onlineAccountStatus {
    padding: 5px;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                         INLINE-EDIT                                                 */
/*-----------------------------------------------------------------------------------------------------*/
h3.inline-hover {
    border: 1px dotted #aaa;
    background-color: #fcfcfc;
    padding: 4px;
    margin: 0px;
}

h3 .inline-input {
    font-size: 17px;
    width: 130px;
    margin: -5px 0 10px -5px;
    float: left;
}

span.inline-hover {
    border: 1px dotted #aaa;
    display: inline-block;
    background-color: #fcfcfc;
    margin-left: -1px;
    padding: 3px 5px 3px 2px !important;
    width: 200px;
}

span.inline-input {
    float: left;
    width: 125px;
    margin-right: 5px;
}

input.inline-input {
    width: 200px;
}

.inline-save, .inline-cancel {
    color: #706666;
    background-color: #f4f4f4;
    padding: 3px 5px;
    border: 1px solid #c0c0c0;
    display: block;
    margin: 3px 10px 0 0;
    font-size: 8pt;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    float: left;
}

    .inline-save:hover, .inline-cancel:hover, .delete-item:hover {
        color: #333333;
        background-color: #fafafa;
        border: 1px solid #aaa;
    }

    .inline-save:focus, .inline-cancel:focus {
        background-color: #f4f4f4 !important;
        border: 1px solid #d8d8d8 !important;
        color: #706666 !important;
    }

.delete-item {
    background: #f4f4f4 url(/Content/images_shared/x-icon.png) no-repeat center center;
    border: 1px solid #c0c0c0;
    float: right;
    margin: 0 5px;
    display: block;
    width: 16px;
    height: 16px;
}

input.error, input.error:hover {
    border: 1px solid #ba3939;
    background-color: #eacfcf;
}

.no-button {
    float: right;
    margin: 10px 70px 10px 20px;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                             LAYOUT                                                  */
/*-----------------------------------------------------------------------------------------------------*/
#logoContainer {
    width: 90px;
}

#logo-wrapper {
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: center;
    width: 90px;
}

#logo-img {
    width: auto;
    height: 43px;
}


#logo {
    position: absolute;
    left: 24px;
    top: 0;
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: center;
    width: auto;
}

.homeBody {
    color: #333;
    background: url('/Content/images_shared/background-footer.png');
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-repeat: repeat;
    font-family: 'PT Sans', Verdana, Sans-Serif;
}

#divHeader {
    background: #FFFFFF;
    left: 0;
    right: 0;
    top: 0;
    min-width: 880px;
    width: 100%;
    height: 60px;
    position: fixed;
    z-index: 5;
    box-shadow: 0px 3px 6px #00000029;
}

#divBody {
    width: 100%;
    height: 100%;
    position: relative;
}

#wrapper {
    width: 100%;
    display: block;
    position: absolute;
}

.small-font {
    font-size: 0.8em;
}

.button-modify-save {
    margin: 10px 40px 10px 20px !important;
}

.button-modify-narrow-save {
    margin: 10px 30px 10px 20px !important;
}

.delete-yes-button {
    float: right;
    margin: 10px 20px 10px 0 !important;
    width: 30px;
}

.delete-no-button {
    float: right;
    margin: 10px 20px 10px 0 !important;
    width: 30px
}

h2.loader-text .icon-image {
    font-size: 30px !important;
}

h1.loader-text {
    font-size: 23px;
    margin: 10px 0;
}

.enable-overflow {
    overflow: auto !important
}

.thSmall {
    width: 40px;
    min-width: 20px !important;
}

.thMedium {
    width: 100px;
    min-width: 60px !important;
}

.thLarge {
    min-width: 120px !important;
}

.floating-title-section {
    border-bottom: #c0c0c0 1px solid;
    margin: 30px 0 15px;
}

    .floating-title-section h2 {
        font-size: 28px;
        font-family: "Museo 300", Verdana, san-serif;
        padding: 0 0 20px 10px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
        line-height: 20pt;
    }

.pos-absolute {
    position: absolute !important;
}

.full-height {
    height: 100%;
}


/*-----------------------------------------------------------------------------------------------------*/
/*                                  NO ITEMS MESSAGES                                                  */
/*-----------------------------------------------------------------------------------------------------*/
.noItemsInList {
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background-color: #f5f5f5;
    border: 1px solid #bbb;
    margin: 50px auto;
    padding: 30px;
    width: 480px;
}

    .noItemsInList h2 {
        color: #555;
        font-family: "Museo 300";
        font-size: 22px !important;
        line-height: 27px;
        margin: 0 0 10px 0 !important;
        text-shadow: none !important;
    }

    .noItemsInList p {
        float: none !important;
    }

    .noItemsInList .icon-image {
        color: #555;
        float: left;
        font-size: 51px;
        margin: 15px 5px;
        width: 50px;
    }

    .noItemsInList .content {
        float: left;
        width: 380px;
    }

    .noItemsInList.small {
        width: 435px; /*box-shadow: none;*/
    }

    .noItemsInList.search-small {
        width: 350px;
        box-shadow: none;
        background: none;
        border: none;
        padding: 0;
    }

        .noItemsInList.search-small .content {
            float: none;
        }

            .noItemsInList.search-small .content p {
                margin: 0 15px;
            }

        .noItemsInList.search-small .icon-image {
            height: 50px;
            font-size: 47px;
        }

#ticketItemsBox.minimized .noItemsInList {
    display: none;
}


/*-----------------------------------------------------------------------------------------------------*/
/*                                      SEARCH BAR                                                     */
/*-----------------------------------------------------------------------------------------------------*/
.searchBar {
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
    height: 100px;
    left: 0px;
    margin: 0 0 10px 0 !important;
    min-width: 975px;
    position: relative;
    top: 0px;
    width: 100%;
    z-index: 2;
    background-color: #f9f9f9;
    border: 1px solid #adadad;
}

    .searchBar.tall {
        height: 130px;
    }

    .searchBar .search-container {
        width: 300px;
    }

    .searchBar .txtSearch {
        margin: 2px 10px 0 10px;
        padding: 7px 5px;
        width: 258px;
    }

        .searchBar .txtSearch.id-only-search {
            width: 125px;
        }

    .searchBar .searchButton {
        margin: 0px;
        width: 108px;
    }

    .searchBar .searchFieldDescription {
        color: #777;
        font-size: 12px;
        margin: 2px 0 0 5px;
        width: initial;
        float: none;
    }

div.searchBar h2 {
    color: #393939;
    font-family: "Museo 300";
    font-size: 15pt;
    margin: 8px 0 0 5px;
    padding: 5px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.searchFilters {
    margin: 0px 10px 5px 0;
}

    .searchFilters input.ui-autocomplete-input {
        margin-left: 10px !important;
        width: 100px !important;
    }

.searchForm {
    float: left;
    width: 300px;
}

    .searchForm.wide {
        width: 400px;
    }

.searchFormButtons {
    float: left;
    width: 250px;
}

    .searchFormButtons a {
        float: left;
        margin: 2px 10px 0px 0px;
        width: 90px;
    }

.date-search {
    margin: 10px 0 0 10px;
}

    .date-search input {
        padding: 5px 8px !important;
        width: 150px !important;
    }

.date-jump-buttons {
    margin: 10px 5px 5px 5px;
}

    .date-jump-buttons a {
        margin-right: 20px;
    }

.searchBar .vertical-divider {
    border-right: 1px solid #ccc;
    float: left;
    height: 85px;
    margin: 15px 10px 15px 30px;
    width: 5px;
}

.searchBar.tall .vertical-divider {
    height: 100px;
}

.searchBar .padded {
    margin-left: 20px;
}

    .searchBar .padded h2 {
        margin-left: 0px;
        padding-left: 0px;
    }

.searchFilters .date-range {
    display: inline-block;
    padding: 10px;
    font-family: "Museo 300", san-serif;
    font-size: 22px;
    background: none repeat scroll 0px 0px rgb(241, 241, 241);
    border: 1px solid #c5c5c5;
    margin: 5px 0 0;
    cursor: pointer;
}

    .searchFilters .date-range.has-arrows {
        margin: 5px 0 0;
    }

    .searchFilters .date-range.selected {
        border-bottom: medium none !important;
    }

    .searchFilters .date-range .icon-image {
        padding-left: 10px;
    }

    .searchFilters .date-range:hover {
        border: 1px solid #ccc;
    }

.searchFilters .date-range-expanded {
    display: block;
    height: 130px;
    margin: 0 10px;
    padding: 10px;
    position: absolute;
    border: 1px solid #ccc;
    background: -moz-linear-gradient(center top, #F1F1F1, #F7F7F7) repeat scroll 0 0 transparent;
    background-image: -ms-linear-gradient(top, #F1F1F1, #F7F7F7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F1F1F1', endColorstr='#F7F7F7');
    background: -webkit-gradient(linear, left top, left bottom, from(#F1F1F1), to(#F7F7F7));
    background-image: -o-linear-gradient(#F1F1F1,#F7F7F7);
    z-index: 99999;
    white-space: nowrap;
}

    .searchFilters .date-range-expanded.has-arrows {
        margin: 0 33px;
        height: 85px;
    }

.searchFilters .date-range-arrows {
    cursor: pointer;
    padding: 0 3px;
    position: relative;
    display: inline-block;
}

    .searchFilters .date-range-arrows .icon-image {
        color: #666666;
        font-size: 17px;
    }

    .searchFilters .date-range-arrows:hover .icon-image {
        color: #333333;
        font-size: 17px;
    }

.searchFilters input.wide {
    width: 125px !important;
    margin-bottom: 15px;
    margin-left: 0 !important;
}

.date-range-expanded .dropdown {
    margin: 10px 0;
}

.date-range-expanded input.ui-autocomplete-input {
    width: 150px !important;
    margin: 0 !important;
}

.date-range-expanded .cancel-button {
    float: right;
    font-size: 15px;
    margin: 25px 15px;
}

    .date-range-expanded .cancel-button:hover {
        text-decoration: underline;
    }

.date-range-expanded .search-button {
    float: right;
    margin-top: 16px;
    width: 90px;
}

.listDisplayCount {
    margin-left: 40px;
}

.searchBar .show-inactive {
    margin: 15px 0px 15px 40px;
}

    .searchBar .show-inactive.clients, .searchBar .show-inactive.pets, .searchBar .show-inactive.products, .searchBar .show-inactive.services {
        margin: 0px 0px 0 15px;
    }

.searchBar .right-section {
    position: absolute;
    right: 10px;
}

.TableTileViewToggle {
    background: -moz-linear-gradient(center top, #484848, #303030) repeat scroll 0 0 transparent !important;
    background-image: -ms-linear-gradient(top, #484848, #303030) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#484848', endColorstr='#303030') !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#484848), to(#303030)) !important;
    background-image: -o-linear-gradient(#484848,#303030) !important;
    border: 1px solid #555;
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 6px rgba(0,0,0,0.2);
    color: #d5d5d5;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 5px;
    z-index: 3;
}

    .TableTileViewToggle ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

        .TableTileViewToggle ul li {
            border-right: 1px solid #555;
            border-left: 1px solid #111;
            display: block;
            float: left;
            height: 20px;
            margin: 0;
            padding: 8px 3px;
            position: relative;
            width: 33px;
            text-align: center
        }

            .TableTileViewToggle ul li:first-child {
                border-left: 0px;
            }

            .TableTileViewToggle ul li:last-child {
                border-right: 0px;
            }

            .TableTileViewToggle ul li:hover {
                color: #ffffff;
            }

            .TableTileViewToggle ul li .icon-image {
                font-size: 21px;
                width: 100%;
            }

            .TableTileViewToggle ul li p {
                bottom: 10px;
                font-size: 12px;
                left: 0px;
                padding: 0px;
                position: absolute;
                text-align: center;
                width: 100%;
            }

            .TableTileViewToggle ul li.active {
                background: -moz-linear-gradient(center top, #353535, #1b1b1b) repeat scroll 0 0 transparent !important;
                background-image: -ms-linear-gradient(top,#353535, #1b1b1b);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#353535', endColorstr='#1b1b1b') !important;
                background: -webkit-gradient(linear, left top, left bottom, from(#353535), to(#1b1b1b)) !important;
                background-image: -o-linear-gradient(#353535,#1b1b1b) !important;
            }

.searchBar .itemCount {
    top: 105px;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                     HELP AND TIPS                                                   */
/*-----------------------------------------------------------------------------------------------------*/
.help-info-box {
    background-color: #fafafa;
    border: 1px solid #ddd;
    clear: both;
    margin: 20px 0 20px 0;
    padding: 13px;
    position: relative;
}

    .help-info-box.small {
        margin: 5px auto;
        padding: 0px;
        width: 150px;
    }

    .help-info-box p {
        font-size: 16px;
        margin: 0 !important
    }

    .help-info-box .icon-image {
        color: #666;
        float: left;
        font-size: 18px;
        margin: 4px 10px 0;
    }

.helpItem.icon-image {
    color: #666;
    float: left;
    font-weight: normal !important;
    margin: 0;
}

.helpItem {
    cursor: pointer;
}

.helpItemTitle {
    font-family: "Museo 500";
    font-size: 18px;
    margin: 10px 0;
}

.embedded-video {
    height: 490px;
    text-align: center;
}

#employeeAccessSetup {
    float: left;
    width: 350px;
}

#employeeAccessHelp {
    float: left;
    width: 300px;
}

.title-training-video {
    color: #444444;
    float: right;
    font-family: 'PT Sans', Verdana, Sans-Serif;
    margin: -10px 15px 0 0 !important;
}

#Help_CreditCardVideo {
    float: right;
    margin: 0px;
}

.tip-content-container {
    display: none;
}
/*-----------------------------------------------------------------------------------------------------*/
/*                                  PAGE CONTAINERS                                                   */
/*-----------------------------------------------------------------------------------------------------*/
.ModalItemsTableContainer,
.page-content-container {
    padding: 0px 15px 0 70px;
    margin-top: 74px;
}

.tblModalItemsTable th.align-right,
.tblModalItemsTable td.align-right {
    text-align: right;
    padding-right: 20px;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                       TILES                                                         */
/*-----------------------------------------------------------------------------------------------------*/
.tile-block {
    background: #f3f3f3;
    background: -moz-linear-gradient(center top, #f8f8f8, #f3f3f3) repeat scroll 0 0 transparent;
    background-image: -ms-linear-gradient(top, #f8f8f8, #f3f3f3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f3f3f3');
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f3f3f3));
    background-image: -o-linear-gradient(#f8f8f8,#f3f3f3);
    border: 1px solid #c0c0c0;
    cursor: pointer;
    height: 80px;
    float: left;
    margin: 10px;
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-shadow: 1px 1px 1px rgba(0, 0,0, 0.1);
    width: 180px;
}

    .tile-block:hover {
        color: #333333;
        background-color: #f8f8f8;
        border: 1px solid #aaa;
        text-shadow: 1px 1px 1px rgba(0, 0,0, 0.15);
        box-shadow: 0 0 6px rgba(0,0,0,0.1);
        -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.1);
        -moz-box-shadow: 0 0 6px rgba(0,0,0,0.1);
    }

    .tile-block h2 {
        color: #393939;
        font-family: "Museo 500";
        font-size: 14pt;
        max-height: 14px;
        max-width: 180px;
        margin: 0 0 2px 0;
        overflow: hidden;
        padding: 5px 5px 5px 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
    }

    .tile-block.appointment-rejected h2,
    .tile-block.appointment-rejected:hover {
        color: #ddd
    }

    .tile-block h3 {
        padding: 0px 5px 6px 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
    }

    .tile-block p {
        max-height: 15px;
        max-width: 180px;
        overflow: hidden;
        padding: 3px 5px 2px 5px;
        white-space: nowrap;
        word-break: break-all;
    }

    .tile-block .favorite {
        bottom: 10px;
        color: #F8F0C8;
        font-size: 35px;
        opacity: 0.9;
        position: absolute;
        right: 0px;
        text-shadow: 0px 0px 1px rgba(180, 95, 3, 1);
    }

    .tile-block p.phone {
        max-height: 30px;
    }

    .tile-block.with-photo .basic-info {
        display: inline-block;
        width: 155px;
    }

    .tile-block .primary-photo {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: inline-block;
        height: 63px;
        width: 63px;
    }


/*-----------------------------------------------------------------------------------------------------*/
/*                                    HOME/LOGIN PAGE                                                  */
/*-----------------------------------------------------------------------------------------------------*/
.login-page-box {
    height: 320px;
    color: #222222;
    background-color: #FFFFFF;
    border: 1px solid transparent;
    border-radius: 5px;
    margin: 50px 0;
    padding: 5px;
    box-shadow: 0px 3px 6px #00000029;
    margin-left: -20px;
}

.login-page-box-wide {
    width: 400px;
    padding: 20px;
    padding-bottom: 100px;
}

.login-page-box-wide-content {
    padding: 20px 70px;
}

    .login-page-box-wide-content input {
        margin: 0 0 10px 0;
        width: 250px;
        border-radius: 4px;
    }

        .login-page-box-wide-content input[type='password'] {
            margin: 0px;
        }

#login-page-center {
    min-height: 350px;
    max-height: 800px;
    margin: 0 auto;
    padding: 50px 0;
    position: relative;
    width: 400px;
}

.test-environment-warning {
    background-color: #ff0000;
    color: white;
    text-align: center;
    margin: 20px;
    padding: 20px;
}

    .test-environment-warning h1 {
        font-size: 22px;
    }

    .test-environment-warning p {
        font-size: 18px;
    }


.new-acc-logo {
    display: block;
    margin: 0 auto;
    width: 240px !important;
    height: 58px;
    margin-top: 40px !important;
    padding: 0 !important;
}

.login-page-logo {
    display: block;
    margin: 0 auto;
    max-width: 372px;
    padding-top: 10px;
    width: 100%;
}

    .login-page-logo._saloniris {
        /*padding: 10px 25px 0 0;*/
    }

    .login-page-logo._inkbook {
        padding: 10px 0 0 20px;
    }

    .login-page-logo._123pet {
        padding: 10px 0 0 5px;
    }

    .login-page-logo._orchid {
        padding: 10px 20px 0 0;
    }

.login-button {
    width: 92%;
    font-family: 'DM Sans';
    border-radius: 4px;
}

.login-remember-user {
    margin: 11px 10px 0 0;
    vertical-align: inherit;
    display: initial;
    font-family: 'DM Sans';
}

#loggedin-button-section {
    margin: 40px auto;
    width: 180px;
    text-align: center;
}

    #loggedin-button-section a {
        width: 120px;
        margin: 20px;
    }

.account-button-section {
    height: 60px;
    margin: 20px 0 0 11px;
    width: 237px;
    text-align: center;
    font-family: 'DM Sans';
}

    .account-button-section a {
        color: #ddd;
        text-decoration: none;
    }

        .account-button-section a:hover {
            color: #f0f0f0;
        }



.login-page-box.app-store {
    margin-top: 80px;
}

.app-store-alert-tip {
    max-width: 320px !important;
}

.app-store-alert {
    font-size: 18px;
    line-height: 20px;
    padding: 0 5px;
}

    .app-store-alert a {
        color: #333;
        text-decoration: none;
    }

    .app-store-alert .icon {
        font-size: 32px;
        color: #444;
        float: left;
        padding: 5px 5px 5px 0;
    }

#remember-user {
    z-index: 1;
}
/*-----------------------------------------------------------------------------------------------------*/
/*                                     NEW ACCOUNT                                                     */
/*-----------------------------------------------------------------------------------------------------*/

#ChooseCloud {
    /*background: url("/Content/images_shared/Promo/Cloud.svg") no-repeat scroll 35px 100px transparent;*/
    /*float: right;*/
    height: 430px;
    margin: 0;
    /*position: relative;*/
    width: 45%;
}

.create-new-acc-buttons {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.choose-cloud-desktop-background {
    margin-top: 21px;
    display: flex;
    justify-content: center;
}

.clud-desktop-img {
    width: 158px;
    height: 126px;
}


#ChooseCloud #CloudSoftware {
    /* float: right;
    padding-right: 0;
    padding-top: 25px;
    width: 185px;*/
    margin-top: 17px;
    display: flex;
    justify-content: center;
}

.using-desktop-remote-div {
    display: flex !important;
    justify-content: center;
    width: 207px;
    height: 48px;
    background: var(--unnamed-color-f75f55) 0% 0% no-repeat padding-box;
    background: #F75F55 0% 0% no-repeat padding-box;
    border-radius: 4px;
    opacity: 1;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 0px !important;
    border-radius: 4px !important;
}

.create-new-acc-window-content {
    display: flex;
    justify-content: space-between;
}

.ChooseRemoteNewAcc {
    /* background: url("/Content/images_shared/Promo/Desktop.svg") no-repeat scroll 0 100px transparent;*/
    /*float: left;*/
    height: 430px;
    /*position: relative;*/
    width: 45%;
    background: none !important;
}

#ChooseRemote {
    background: url("/Content/images_shared/Promo/Desktop.png") no-repeat scroll 0 100px transparent;
    float: left;
    height: 430px;
    position: relative;
    width: 45%;
}

.title-div {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.subtitle-div {
    margin-top: 8px;
    display: flex;
    justify-content: center;
}

.smallButtonNewAcc {
    margin: 0px !important;
    padding: 0px !important;
    font-size: 9pt !important;
    border: 0px !important;
    font-family: 'DM Sans';
}

.DesktopCloudSoftware-p {
    width: 364px;
    height: 56px;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) var(--unnamed-font-size-14)/var(--unnamed-line-spacing-18) var(--unnamed-font-family-dm-sans);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--grey_-656565);
    text-align: center;
    font: normal normal normal 14px/18px 'DM Sans';
    letter-spacing: 0px;
    color: #656565 !important;
    opacity: 1;
    padding: 0;
}

.chooseCloudDesktopNewAccTitle {
    margin: 0px 0px 0px 0px !important;
    padding: 0px !important;
    width: 150px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    font: var(--unnamed-font-style-normal) normal bold var(--unnamed-font-size-20)/24px var(--unnamed-font-family-dm-sans);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--black_-222222);
    text-align: left;
    font: normal normal bold 20px/24px 'DM Sans' !important;
    letter-spacing: 0px;
    color: #222222;
    opacity: 1;
}

#ChooseCloud .title,
#ChooseRemote .title {
    font-size: 17pt;
    margin-bottom: 20px;
    margin-top: 10px;
    padding-top: 20px;
    text-align: center;
}

#ChooseRemote .subtitle,
#ChooseCloud .subtitle {
    font-size: 12pt;
    margin: 0;
    padding: 0;
}

#ChooseCloud .subtitle {
    margin-left: 35px;
}

#ChooseRemote #DesktopSoftware {
    float: right;
    padding-top: 35px;
    width: 185px;
}

.chooseRemoteOrDesktopSoftware {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin-top: 17px;
    display: flex;
    justify-content: center;
}

.subtitle-desktop-new-acc {
    width: 254px;
    height: 42px;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-21) var(--unnamed-font-family-dm-sans);
    letter-spacing: var(--unnamed-character-spacing-0) !important;
    color: var(--black_-222222) !important;
    text-align: center;
    font: normal normal normal 16px/21px 'DM Sans';
    letter-spacing: 0px !important;
    color: #222222 !important;
    opacity: 1;
}

.subtitle-cloud-new-acc {
    width: 335px;
    height: 42px;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-21) var(--unnamed-font-family-dm-sans);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--black_-222222);
    text-align: left;
    font: normal normal normal 16px/21px 'DM Sans';
    letter-spacing: 0px;
    color: #222222;
    opacity: 1;
}


.message-content-box.wide {
    height: 542px;
    width: 976px;
}

#SelectEdition {
    background: url("/Content/images_shared/Promo/Select_Edition.png") no-repeat scroll 0 0 transparent;
    height: 60px;
    position: absolute;
    right: -40px;
    top: 208px;
    width: 60px;
}

.selectEditionNewAcc {
    background: none !important;
    height: 48px !important;
    width: 48px !important;
    position: inherit !important;
    margin-top: 148px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.selectEditionNewAcc-h2 {
    margin: 0px !important;
    font-size: 16px !important;
    padding: 0px !IMPORTANT;
    height: 26px !important;
    width: 28px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font: normal normal normal 20px/26px 'DM Sans' !important;
}

.orButtonMargin {
    margin-top: 5px;
    background-color: white;
}

#SelectEdition h2 {
    font-size: 17pt;
    margin: 18px 8px;
}

#NotUsingDesktopVersion.large {
    float: none;
    width: 165px;
    margin: 0 auto;
}

#UsingDesktopVersion,
#NotUsingDesktopVersion {
    /* bottom: 0;
    float: left;
    left: 35%;
    position: absolute;
    width: 185px;*/
    width: 175px;
    height: 36px;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                     LOGIN AREA                                                      */
/*-----------------------------------------------------------------------------------------------------*/
.home-login-box-links {
    width: 100px;
    margin: 5px 0;
}

    .home-login-box-links a {
        color: #ddd;
        text-decoration: none;
    }

        .home-login-box-links a:hover {
            text-decoration: underline;
        }

#aLogOutAccount {
    font-size: 9pt;
    position: relative;
    display: inline-block;
    float: right;
    top: 35px;
    right: 45px;
}

.aLoginButton {
    width: 120px;
    padding: 7px 0px;
    float: right;
}

.aContinueLoggedInButton {
    width: 100px;
    position: relative;
    right: 20px;
    top: 20px;
    float: right;
}

#loggedin-label {
    color: #656565;
    text-align: center;
    margin: 45px 0 0 0;
}

#username-label {
    color: #222222;
    text-align: center;
    margin: 5px 0 0 0;
    font-size: 18px;
    word-wrap: break-word;
}

#divPageContent {
    width: 1024px;
    padding: 20px 50px;
    margin: 0 auto;
}


#PasswordResetRequestForm {
    padding: 20px 30px;
}

    #PasswordResetRequestForm p {
        font-size: 16px;
    }

    #PasswordResetRequestForm input {
        width: 100%;
        margin: 15px 0;
    }

/*-----------------------------------------------------------------------------------------------------*/
/*                                    MAIN AREA                                                        */
/*-----------------------------------------------------------------------------------------------------*/
#content-background {
    width: 100%;
    position: relative;
}

#page-content {
    background-color: #f3f3f3;
    width: 900px;
    min-height: 580px;
    margin: 0 auto -60px auto;
    padding: 50px 25px 0 25px;
    position: relative;
    top: -60px;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

    #page-content div h2 {
        color: #444;
        font-family: "Bitter", Verdana, san-serif;
        font-size: 18px;
        text-align: center;
        margin: 30px 0 0 0;
        padding: 0 20px;
    }

    #page-content div h3 {
        color: #444;
        font-size: 13px;
        margin: 0 0 20px 0;
        padding: 0 20px;
        text-align: center;
    }

    #page-content div p {
        color: #777;
        text-align: justify;
        padding: 0 20px;
    }

    #page-content div img {
        margin: 0 auto;
        display: block;
        height: 200px;
    }

.more-info {
    display: inline-block;
    background-color: #333;
    color: #ddd;
    border: 1px solid #000;
    text-decoration: none;
    padding: 7px 25px;
    margin: 35px 20px;
    text-align: center;
}

    .more-info:hover {
        background-color: #3e3e3e;
    }

#current-user-note a {
    display: inline-block;
    color: #999;
    font-size: 11px;
    text-align: right;
    line-height: 13px;
    margin: 20px 50px 0 0;
    text-decoration: none;
}

    #current-user-note a:hover {
        color: #aaa
    }

#top-area-links {
    margin: 10px 0 0 85px;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                       CALENDAR                                                      */
/*-----------------------------------------------------------------------------------------------------*/
.ui-input-date {
    width: 127px;
    margin: 4px 0px 0px 0px;
}

#txtStartDate.ui-input-date,
#txtApptStartDate.ui-input-date {
    width: 124px;
}

.k-footer .k-nav-today {
    color: #787878 !important;
}


/*-----------------------------------------------------------------------------------------------------*/
/*                                      NAVIGATION                                                     */
/*-----------------------------------------------------------------------------------------------------*/
/*-- Main Navigation --*/
/*.navigation-container               { height: 100% }*/
#navigationItemsContainer {
    display: flex;
}

ul.main-navigation {
    display: flex;
    height: 60px;
    margin: 0px;
    padding: 0px;
}

    ul.main-navigation li {
        display: inline-block;
        list-style: none;
        vertical-align: top;
    }

        ul.main-navigation li a {
            box-sizing: border-box;
            display: inline-block;
            height: 60px;
            text-decoration: none;
            position: relative;
            width: 75px !important;
            border-radius: 4px;
            margin: 0px 2px 0px 2px;
        }

            ul.main-navigation li a .text {
                color: #2F195B;
                display: block;
                font-family: 'DM Sans';
                font-size: 9pt;
                text-align: center;
                text-transform: capitalize;
                white-space: nowrap;
            }

#divHeader ul.main-navigation li .Membership {
    width: 90px;
}

/* Navigation Icons */
.navigation-container .icon {
    color: #2F195B;
    display: block;
    font-family: "icomoon";
    font-size: 32px;
    font-variant: normal;
    font-weight: lighter;
    line-height: 1;
    margin: 3px auto 5px;
    text-align: center;
    text-transform: none;
}

/*.main-navigation .icon-appointmentbook:before,
#moreDropdownMenu .icon-appointmentbook:before { content: "\5a";   }
.main-navigation .icon-onlinebooking:before,
#moreDropdownMenu .icon-onlinebooking:before    { content: "\5b";   }
.main-navigation .icon-pet:before,
#moreDropdownMenu .icon-pet:before              { content: "\67";   }
.main-navigation .icon-client:before,
#moreDropdownMenu .icon-client:before           { content: "\e186"; }
.main-navigation .icon-product:before,
#moreDropdownMenu .icon-product:before          { content: "\50";   }
.main-navigation .icon-service:before,
#moreDropdownMenu .icon-service:before          { content: "\e1a4";	}
.main-navigation .icon-employee:before,
#moreDropdownMenu .icon-employee:before         { content: "\5e";	}
.main-navigation .icon-schedule:before,
#moreDropdownMenu .icon-schedule:before         { content: "\58";	}
.main-navigation .icon-report:before,
#moreDropdownMenu .icon-report:before           { content: "\65";	}
.main-navigation .icon-setting:before,
#moreDropdownMenu .icon-setting:before          { content: "\62";	}
.main-navigation .icon-setting:before,
#moreDropdownMenu .icon-setting:before          { content: "\62";	}*/


/* Hover and Active Colors */
#divHeader ul.main-navigation li a:hover {
    background-color: rgba(34, 34, 34, 0.06);
}

    #divHeader ul.main-navigation li a:hover .text,
    #divHeader ul.main-navigation li a.active .text {
        color: #2F195B;
    }

    #divHeader ul.main-navigation li a.active .icon,
    #divHeader ul.main-navigation li a:hover .icon {
        color: #2F195B;
    }

/* More Menu */
#moreMenuContainer {
    display: inline-block;
    vertical-align: top;
}

    #moreMenuContainer a:hover {
        background-color: rgba(34, 34, 34, 0.06);
    }

#moreMenuItem {
    display: block;
    height: 60px;
    padding-right: 10px;
    text-align: center;
    width: 50px;
    border-radius: 5px;
}

    #moreMenuItem.hide {
        display: none;
    }

    #moreMenuItem span.icon {
        display: inline-block;
        font-size: 20px;
        height: auto;
        letter-spacing: -6px;
        line-height: 39px;
        padding: 0px !important;
        text-align: center;
    }

    #moreMenuItem span.text {
        padding: 1px 0px 0px 6px;
        text-align: center;
        font-family: 'DM Sans';
        font-size: 9pt;
    }

#moreDropdownMenu {
    margin-top: 0px;
    right: auto;
}

    #moreDropdownMenu ul {
        display: grid;
        grid-template-columns: repeat(3, minmax(100px, 1fr));
    }

    #moreDropdownMenu .text {
        margin: 0;
        padding: 0;
        display: block;
        font-size: 10.5pt;
        text-align: center;
        text-transform: capitalize;
        font-family: 'DM Sans';
    }

    #moreDropdownMenu #pendingCountBadge {
        float: right;
        height: 11px;
        line-height: 4px;
        margin-top: 6px;
        position: relative;
        right: inherit;
        top: inherit;
        width: 11px;
    }

    #moreDropdownMenu li {
        display: none;
    }

        #moreDropdownMenu li a:hover {
            background-color: rgba(34, 34, 34, 0.06);
        }

    #moreDropdownMenu ul li .icon {
        display: block;
        vertical-align: top;
        padding: 2px 0px 0 0;
        font-size: 20px;
        margin: 3px auto 5px;
        padding: 0px;
        color: #2F195B
    }

    #moreDropdownMenu ul li .text {
        color: #2F195B
    }

    #moreDropdownMenu ul li a {
        display: block;
        padding: 10px;
    }



/* Hide anything after the 9th item in the main navigation and show it on the "more" drop down menu */
#divHeader ul.main-navigation.with-more-menu li:nth-child(n+9):nth-child(-n+99) {
    display: none;
}

#moreDropdownMenu li:nth-child(n+9):nth-child(-n+99) {
    display: list-item;
}


/* User Navigation / Notices */
#navigationRightDocked {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navigationRightDockedWrapper {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.navigation-toggle {
    display: inline-block;
    height: 45px;
    margin: 0px 7px;
}

    .navigation-toggle .icon {
        display: inline-block;
        font-size: 20px;
        margin: 0px;
    }

    .navigation-toggle span {
        color: #2F195B;
        display: inline-block;
        height: 100%;
        margin: 0px auto;
        padding: 14px 15px 0 0;
        vertical-align: bottom;
    }

        .navigation-toggle span.hide {
            display: none;
        }

        .navigation-toggle span:first-child {
            /* padding: 7px 3px 0 5px; */
        }

        .navigation-toggle span:last-child {
            /* padding-right: 10px; */
        }

.notification {
    top: 0px;
    right: 20px;
    background-color: #B00020;
    font-size: 12px;
    height: 22px !important;
    width: 22px;
    line-height: 22px;
    overflow: visible;
    position: absolute;
    text-align: center;
    white-space: nowrap;
    border-radius: 50%;
    padding: 0 !important;
    color: white !important;
    font-family: 'Lato', Arial, sans-serif;
    position: relative;
}

.navigation-toggle span.name {
    text-transform: capitalize;
    vertical-align: middle;
    font-family: 'DM Sans';
    white-space: nowrap;
}

.navigation-toggle span.icon.arrow {
    vertical-align: super;
}

.navigation-toggle span.none {
    padding-right: 0;
}

.navigation-toggle a {
    display: inline-block;
    margin: 0px;
    padding: 0px 5px;
}

    .navigation-toggle a:hover {
        background-color: rgba(34, 34, 34, 0.06);
    }

        .navigation-toggle a:hover span {
            color: #2F195B;
        }

        .navigation-toggle a:hover span {
            color: #2F195B;
        }

.user-notice {
    margin-left: 5px;
    vertical-align: top;
}

    .user-notice .icon {
        font-size: 15px;
    }

#toggleUserNotice {
    display: flex;
    height: 100%;
    border-radius: 5px;
}

#toggleUserNavigation {
    display: flex;
    height: 100%;
    border-radius: 5px;
}

.user-message-inbox {
    margin-left: 5px;
    vertical-align: top;
}

    .user-message-inbox .icon {
        font-size: 15px;
    }

#toggleMessageInbox {
    display: block;
    height: 100%;
    position: relative;
}

    #toggleMessageInbox span {
        padding-top: 9px;
        font-size: 20px;
        padding-right: 5px;
    }

        #toggleMessageInbox span.count {
            top: -5px;
            right: -3px;
            background-color: #ff4336;
            font-size: 12px;
            height: 22px;
            width: 22px;
            line-height: 22px;
            overflow: visible;
            position: absolute;
            text-align: center;
            white-space: nowrap;
            border-radius: 50%;
            padding: 0;
            color: white;
            font-family: "Lato", Arial, sans-serif;
        }

.navigation-menu .user-nav-separator {
    border-top: 1px solid #cccccc;
    height: 0;
}

/* Navigation Pop-up Menu */
.navigation-menu {
    background-color: #fff;
    border: 1px solid #c0c0c0;
    display: none;
    margin: 0px 0 0 0;
    min-width: 160px;
    right: 4px;
    padding: 0px 0;
    position: absolute;
    z-index: 5;
}

    .navigation-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        .navigation-menu ul a {
            border: 1px none #fff;
            color: #393939;
            display: block;
            padding: 8px 9px 6px 16px;
            text-decoration: none;
            font-family: 'DM Sans';
        }

            .navigation-menu ul a:hover {
                background-color: #eeeeee;
            }

.divNavigationBar {
    position: relative;
    top: -30px;
    z-index: 99
}

/* Overrides for drop down menus with dark backgrounds to match nav bar*/
.navigation-menu.dark {
    background-color: #FFFFFF;
}

    .navigation-menu.dark ul a {
        border-style: none;
        color: #ccc;
        border-radius: 4px;
    }

        .navigation-menu.dark ul a:hover {
            background-color: #444444;
        }

/* popup notice menu*/
.user-notice-menu {
    max-height: 500px;
    min-height: 35px;
    overflow-y: auto;
    width: 370px;
}

    .user-notice-menu ul li {
        border-bottom: 1px solid #cccccc;
    }

        .user-notice-menu ul li:last-child {
            border-bottom: none
        }

    .user-notice-menu ul a {
        cursor: pointer
    }

.user-notice .user-notice-menu span {
    color: #393939 !important;
}

.navigation-menu span.dismiss-icon {
    border-style: solid;
    border-width: thin;
    box-sizing: border-box;
    border-color: #fff;
    color: #AAAAAA !important;
    float: right;
    font-size: 8px;
    height: 16px;
    padding: 0px 0px 0 0 !important;
    text-align: center;
    vertical-align: middle;
    width: 15px;
}

.navigation-menu .feature span.dismiss-icon {
    border-color: #F4F9EE;
}

.navigation-menu ul a:hover span.dismiss-icon {
    border-color: #eeeeee;
}

.navigation-menu span.dismiss-icon:hover {
    background: #fff;
    border-style: solid;
    border-width: thin;
    box-sizing: border-box;
}

.navigation-menu span.new-icon {
    color: #76B540 !important;
    font-size: 25px;
    padding: 0 10px 0 0 !important;
    vertical-align: middle;
}

.user-notice .button {
    display: block;
    margin: 10px auto;
    padding: 6px 10px;
    text-align: center;
    width: 80px;
}

.user-notice .feature, .user-notice .update {
    background: #E9FAD6;
}

    .user-notice .feature span {
        color: #509434;
    }

.user-notice li span.description {
    font-size: 13px;
    padding: 7px 0px 7px 0;
    text-align: justify;
}

.user-notice span.description {
    padding: 10px 10px 0 15px;
}

.user-notice span.text {
    display: block;
    font-size: 16px;
    padding: 10px 0px 0 0;
    vertical-align: middle;
    width: 100%;
}

.user-notice span.description .url {
    padding: 0;
    color: #345794 !important;
    text-decoration: none;
}

    .user-notice span.description .url:visited {
        color: #345794;
        text-decoration: none;
    }

    .user-notice span.description .url:hover {
        text-decoration: underline;
        cursor: pointer !important;
    }

.notification-title-bar {
    background: #F5F5F5;
    border-bottom: #ccc 1px solid;
    padding: 3px 12px 1px;
}

    .notification-title-bar p {
        font-size: 11pt;
        font-weight: bold;
    }

.not-clickable {
    cursor: default !important;
}

    .not-clickable:hover {
        background-color: inherit !important;
    }

#pendingCountBadge {
    color: #DDDDDD;
    font-family: "Museo 300";
    font-size: 9pt;
    background-color: #B00020;
    border: 1px solid #A61A27;
    border-radius: 9px;
    height: 18px;
    width: 18px;
    line-height: 18px;
    position: absolute;
    text-align: center;
    right: 15px;
}




/*Sidebar Navigation*/
#divSecondaryNavigation {
    background: #FFFFFF;
    cursor: default;
    height: 100%;
    padding-top: 15px;
    position: fixed;
    top: 60px;
    width: 55px;
    z-index: 10;
}

.optionsButton {
    box-sizing: border-box;
    clear: both;
    color: #c0c0c0;
    display: block;
    height: 50px;
}

    .optionsButton .icon-image {
        padding: 15px 0;
        position: absolute;
        width: 100%;
        text-align: center;
        font-size: 21px;
        vertical-align: middle;
    }

    .optionsButton:hover {
        /*background: #2d2d2d;*/
        border-right-color: #2d2d2d;
    }

        .optionsButton:hover .icon-image {
            color: #f0f0f0;
            margin-left: -4px;
        }

    .optionsButton .option-description {
        background: #2d2d2d;
        display: block;
        font-size: 11pt;
        height: 21px;
        left: 55px;
        overflow: hidden;
        position: absolute;
        text-decoration: none;
        width: 0px;
        font-family: 'DM SANS';
    }

        .optionsButton .option-description.expanded {
            min-width: 120px;
            padding: 18px 10px 15px 5px;
            white-space: nowrap;
            width: auto;
            z-index: 10;
        }

        .optionsButton .option-description.large.expanded {
            min-width: 150px;
        }


/*Sidebar Navigation for Screens with SubViews*/
#SelectedSubView {
    font-size: 22px;
    height: 30px;
    padding: 10px 5px;
    width: 50px;
}

    #SelectedSubView:hover {
        color: #fff;
        box-shadow: 0px 0px 3px rgba(0,0,0,0.4);
        -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.4);
        -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.4);
    }

    #SelectedSubView .icon-image {
        margin: 0px;
        font-size: 25px;
        text-align: center;
        vertical-align: middle;
        display: inline-block
    }

#btnSelectSubViewDropdown {
    position: absolute;
    right: 0px;
    top: 30px;
}

#SubViewsList {
    background-color: white;
    position: absolute;
    width: 150px;
    z-index: 10;
}

    #SubViewsList a {
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        /*color: #ddd;*/
        display: block;
        height: 20px;
        padding: 15px 0px 15px 0;
        text-indent: 3px;
        width: 100%;
        text-decoration: none;
        font-family: 'DM Sans';
        font-size: 12px;
    }

        #SubViewsList a:hover {
            background-color: white;
            border-top: 1px solid white;
            border-bottom: 1px solid white;
        }

    #SubViewsList .icon-image {
        font-size: 23px;
        text-align: center;
        vertical-align: middle;
        margin: 0 0.2em;
    }


.region-option {
    display: block;
    float: left;
    height: 40px;
    margin: 10px;
    padding: 10px;
    text-align: center;
    width: 75px;
}



/*-----------------------------------------------------------------------------------------------------*/
/*                                     CONTEXT MENUS                                                   */
/*-----------------------------------------------------------------------------------------------------*/
.contextmenu {
    color: #d5d5d5;
    display: none;
    position: absolute;
    z-index: 3;
}

    .contextmenu ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

        .contextmenu ul li {
            background: #303030;
            border-style: none;
            cursor: pointer;
            display: block;
            height: 16px;
            margin: 0;
            min-width: 100px;
            padding: 10px 0 10px 15px;
            position: relative;
            white-space: nowrap;
        }

            .contextmenu ul li:hover {
                background-color: #383838;
                color: #ffffff;
            }

            .contextmenu ul li .icon-image,
            .contextmenu ul li .icon {
                display: inline-block;
                font-size: 18px;
                vertical-align: middle;
            }

            .contextmenu ul li p {
                display: inline-block;
                float: none;
                font-size: 13px;
                padding: 0 17px 0 14px;
                vertical-align: top;
            }

/*-----------------------------------------------------------------------------------------------------*/
/*                                     OPTION BUTTONS                                                  */
/*-----------------------------------------------------------------------------------------------------*/
#display-option-container {
    color: #9a9a9a;
    font-size: 10px;
    text-align: center;
    position: fixed;
    bottom: 2px;
    right: 2px;
    z-index: 3
}

.button-display-setting {
    height: 45px;
    width: 45px;
    margin: 2px;
    background-color: #303030;
    border: #222 1px solid;
    float: left;
    cursor: pointer;
}

    .button-display-setting:hover {
        background-color: #444;
    }

.quickForm {
    color: #666;
    width: 127px;
    margin: 7px 0;
    padding: 3px;
    font-size: 12.5px;
}

    .quickForm:hover {
        color: #777;
    }

select.quickForm {
    color: #666;
    width: 135px;
    margin: 7px 0;
    padding: 3px;
    font-size: 12.5px;
}

    select.quickForm:hover {
        color: #777;
    }

.sidebarSubmitSearch {
    margin: 20px 0 10px 0 !important;
}

.icon-o {
    display: inline-block;
    font-size: 23px !important;
    margin-top: -2px;
    padding-right: 5px;
    width: 15px;
}

.expand-menu {
    background: #222;
    border-bottom: 1px solid #444;
    border-top: 1px solid #444;
    color: #ddd;
    font-size: 36px;
    height: 28px;
    padding: 10px 20px;
    text-align: right;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                            EDIT LISTS                                               */
/*-----------------------------------------------------------------------------------------------------*/
.settings-item {
    max-width: 500px;
    padding: 0 0 10px 0;
    clear: both;
}

.settings-item-button {
    width: 105px;
    padding: 0 0 0 15px;
    float: left;
}

.settings-item-content {
    width: 350px;
    float: left;
    margin: 2px 0;
}

.editable-list {
    width: 285px;
    height: 300px;
    margin: 0 0 0 40px;
    padding: 0 5px;
    background-color: #fcfcfc;
    border: 1px solid #eee;
    overflow: auto;
    list-style: none;
    float: left;
}

    .editable-list li {
        background-color: #f5f5f5;
        border: 1px solid #ddd;
        padding: 10px;
        margin: 5px 0;
        display: block;
    }

        .editable-list li:hover {
            background-color: #fafafa;
            border: 1px solid #d3d3d3;
        }

        .editable-list li.selected {
            background-color: #faf9d4;
            border: 1px solid #e7e6ad;
        }

        .editable-list li.sortable-list-placeholder {
            background-color: #fffee4;
            border: 1px dotted #eeeda4;
            height: 15px;
            padding: 10px;
            margin: 5px 0;
            display: block;
        }

        .editable-list li .editable {
            display: inline-block;
            overflow: hidden;
            padding: 4px 5px 4px 2px;
            width: 205px;
        }

.short-editable-list {
    height: 242px !important;
}

.select-pet-type-section {
    height: 80px;
    width: 100%;
    background-color: #eee;
    border-bottom: 1px solid #ccc;
    margin: 0px;
    padding: 0px;
}

    .select-pet-type-section div {
        padding: 10px 40px;
    }

    .select-pet-type-section input.ui-autocomplete-input {
        width: 260px !important;
        padding: 4px 25px 4px 10px;
    }

.no-list-items {
    color: #888;
    font-style: italic;
}

    .no-list-items.selected {
        background-color: #f5f5f5 !important;
        border: 1px solid #ddd !important;
    }

#add-new-item {
    margin: 20px 0 0 0;
}

    #add-new-item.short {
        margin: 10px 0 0 0;
    }

    #add-new-item input {
        color: #BEBEBE;
        font-style: italic;
        font-size: 16px;
        padding: 8px 15px 8px 10px;
        width: 269px;
        margin: 5px 30px 10px 40px;
    }

        #add-new-item input:focus {
            color: #444444;
        }

    #add-new-item #clearSearch {
        background: url('/Content/images_shared/close.png') no-repeat scroll center center transparent;
        cursor: default;
        height: 7px;
        padding: 10px;
        position: absolute;
        right: 25px;
        top: 44px;
        width: 7px;
    }

#cmdAddBlank {
    margin-left: 25px;
}

#list-arrows-section {
    width: 50px;
    height: 250px;
    padding: 25px 0 0 38px;
    float: left;
}

    #list-arrows-section a {
        width: 25px;
        height: 25px;
        background-color: #f4f4f4;
        background-image: url("/Content/images_shared/up-down-arrows.png");
        background-repeat: no-repeat;
        padding: 5px;
        border: 1px solid #c0c0c0;
        cursor: pointer;
        display: block;
    }

    #list-arrows-section #up {
        background-position: 0px center;
    }

    #list-arrows-section #down {
        background-position: -45px center;
    }

    #list-arrows-section a:hover {
        background-color: #fbfbfb;
        border: 1px solid #b5b5b5;
    }

.smallButtonColor.disabled {
    cursor: default !important;
    background: -moz-linear-gradient(center top, #E0E0E0, #DDDDDD) repeat scroll 0 0 transparent;
    background-image: -ms-linear-gradient(top, #E0E0E0, #DDDDDD);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E0E0E0', endColorstr='#DDDDDD');
    background: -webkit-gradient(linear, left top, left bottom, from(#E0E0E0), to(#DDDDDD));
    background-image: -o-linear-gradient(#E0E0E0,#DDDDDD);
    border: 1px solid #CCCCCC;
    text-shadow: none;
    color: #444444;
}

    .smallButtonColor.disabled:hover {
        background: -moz-linear-gradient(center top, #E0E0E0, #DDDDDD) repeat scroll 0 0 transparent;
        background-image: -ms-linear-gradient(top, #E0E0E0, #DDDDDD);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E0E0E0', endColorstr='#DDDDDD');
        background: -webkit-gradient(linear, left top, left bottom, from(#E0E0E0), to(#DDDDDD));
        background-image: -o-linear-gradient(#AEC3D4,#DDDDDD);
        border: 1px solid #CCCCCC;
        text-shadow: none;
        color: #444444;
    }

    .smallButtonColor.disabled:focus {
        background: -moz-linear-gradient(center top, #E0E0E0, #DDDDDD) repeat scroll 0 0 transparent;
        background-image: -ms-linear-gradient(top, #E0E0E0, #DDDDDD);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E0E0E0', endColorstr='#DDDDDD');
        background: -webkit-gradient(linear, left top, left bottom, from(#E0E0E0), to(#DDDDDD));
        background-image: -o-linear-gradient(#E0E0E0,#DDDDDD);
        border: 1px solid #CCCCCC;
        text-shadow: none;
        color: #444444;
    }

/*-----------------------------------------------------------------------------------------------------*/
/*                              APPLICATION WINDOW STYLES                                              */
/*-----------------------------------------------------------------------------------------------------*/
#divMain {
    border: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
}

.draggable {
    top: 0px;
    left: 0px;
}

.resizable {
}

.ui-tabs-nav .icon-image {
    color: #666;
    font-size: 18px;
    margin-top: -2px;
    padding-right: 5px;
}


/*-----------------------------------------------------------------------------------------------------*/
/*                                          PRODUCTS                                                   */
/*-----------------------------------------------------------------------------------------------------*/
.editProductModifyForm {
    margin: 20px 0 0 30px;
}

.editProductSection1, .editProductSection2 {
    height: 200px;
}

.editProductSection3 {
    width: 802px;
    height: 120px;
    margin-top: 20px;
}

.productTaxes {
    width: 375px;
    float: left;
}

.noTaxesEntered {
    width: 340px;
    padding: 15px 0 0 50px;
}

    .noTaxesEntered .icon_alert {
        margin: 15px 0 0 0;
    }

    .noTaxesEntered h3 {
        color: #666;
        font-size: 14px;
        padding: 5px 0 5px 10px;
    }

    .noTaxesEntered p {
        color: #888;
        font-size: 12px;
        line-height: 13px;
        padding: 0 0 10px 10px;
        width: 250px
    }

.out-of-stock {
    color: #c93636;
}

#ProductTiles .tile-block {
    height: 125px;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                          EMPLOYEES                                                  */
/*-----------------------------------------------------------------------------------------------------*/
.employeeTile {
    height: 100px;
}

    .employeeTile.has-account {
        background: -moz-linear-gradient(center top, #e1f4c6, #bae592) repeat scroll 0 0 transparent;
        background-image: -ms-linear-gradient(top, #e1f4c6, #bae592);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e1f4c6', endColorstr='#bae592');
        background: -webkit-gradient(linear, left top, left bottom, from(#e1f4c6), to(#bae592));
        background-image: -o-linear-gradient(#e1f4c6,#bae592);
    }

    .employeeTile.inactive-account {
        background: #f0f0f0 url(/Content/images_shared/inactive.png);
    }

    .employeeTile.inactive-employee {
        background: -moz-linear-gradient(center top, #e0e0e0, #d5d5d5) repeat scroll 0 0 transparent;
        background-image: -ms-linear-gradient(top, #e0e0e0, #d5d5d5);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#d5d5d5');
        background: -webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#d5d5d5));
        background-image: -o-linear-gradient(#e0e0e0,#d5d5d5);
    }

    .employeeTile.nopassword {
        background: #f0f0f0 url(/Content/images_shared/green-stripes.png);
    }

    .employeeTile.warning {
        background: -moz-linear-gradient(center top, #F0CBCB, #F58888) repeat scroll 0 0 transparent;
        background-image: -ms-linear-gradient(top,#F0CBCB, #F58888);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0CBCB', endColorstr='#F58888');
        background: -webkit-gradient(linear, left top, left bottom, from(#F0CBCB), to(#F58888)) !important;
        background-image: -o-linear-gradient(#F0CBCB,#F58888);
    }

    .employeeTile .icon-image.admin {
        bottom: 10px;
        color: #fff;
        font-size: 30px;
        opacity: 0.5;
        position: absolute;
        right: 0px;
        text-shadow: 0px 0px 3px rgba(24,83, 19, 0.7);
        margin-right: .2em;
        text-align: center;
        vertical-align: middle;
    }

    .employeeTile .icon-image.warning {
        bottom: 10px;
        color: #fff;
        font-size: 30px;
        opacity: 0.3;
        position: absolute;
        right: 0px;
        text-shadow: 0px 0px 3px rgba(83, 19, 19, 0.7);
        margin-right: .2em;
        * text-align: center;
        vertical-align: middle;
    }


    .employeeTile p, .employeeTile h2 {
        max-width: 180px;
        overflow: hidden;
    }

.divModifyFormSection.left2 {
    height: 170px
}

.divModifyFormSection.left1 {
    height: 150px
}

.HideOrShowInactiveEmployees {
    float: right;
    width: 170px;
    margin: -5px 100px 0px 25px !important;
}

.independent-contractor .pFormLabel {
    margin: 5px 0;
}

.independent-contractor h4 {
    font-size: 15px;
    margin: 30px 0px 10px 0px;
}

.independent-tab {
    height: 280px;
    margin-top: 50px;
}

    .independent-tab .card-connect p {
        margin: 30px 0px 40px 0px;
    }

    .independent-tab .card-connect .pFormLabel {
        margin: 0;
    }

    .independent-tab .card-connect .divFormItem {
        margin: 5px 5px 25px;
    }

.updateEmail {
    width: 45px;
    float: left;
    margin: 0px 5px 0px 5px !important;
    font-size: 0.9em;
}

.independent-tab .creditcardsetup {
    margin: 30px 0 75px 0;
}

.online-account-intro-text {
    font-size: 15px;
    margin: 10px 10px;
}

.online-account-info-table {
    width: 70%;
    margin: 20px 15%;
}

    .online-account-info-table td {
        height: 40px;
    }

    .online-account-info-table .title {
        font-weight: bold;
        padding-right: 20px;
        text-align: right;
        width: 130px;
    }

    .online-account-info-table .description {
    }

    .online-account-info-table .button-container {
        border: none;
        width: 120px;
    }

        .online-account-info-table .button-container.inactive:hover {
            cursor: default;
            background-color: #F2F2F2;
        }

        .online-account-info-table .button-container a {
            margin: 3px 0;
        }

    .online-account-info-table .bold-green {
        color: green;
        font-weight: bold;
    }

.ui-tabs-nav li.new-account {
    background: -moz-linear-gradient(center top, #e1f4c6, #CBEEAA) repeat scroll 0 0 transparent;
    background-image: -ms-linear-gradient(top, #e1f4c6, #CBEEAA);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e1f4c6', endColorstr='#CBEEAA');
    background: -webkit-gradient(linear, left top, left bottom, from(#e1f4c6), to(#CBEEAA));
    background-image: -o-linear-gradient(#e1f4c6,#CBEEAA);
}

    .ui-tabs-nav li.new-account.ui-state-active {
        background: #fff;
    }

div.new-user-password input {
    margin-left: 5px;
    width: 200px;
}

div.new-user-password {
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
    margin: 10px;
    padding: 15px 25px;
}

    div.new-user-password p {
        margin: 10px 0;
    }
/*-----------------------------------------------------------------------------------------------------*/
/*                                               TIPS                                                  */
/*-----------------------------------------------------------------------------------------------------*/
#cmdTipDetailsSearch {
    margin: 58px 0 0 30px;
}

.tipModifyDialog {
    margin: 0px;
}

.tipDialogHeader {
    color: #555;
    margin: 10px 20px 5px 20px;
    font-size: 24px;
}

.light-value {
    color: #777;
    font-size: 14px;
    margin: 0px 0px 10px 20px;
    width: 120px;
}

    .light-value.long {
        width: 160px;
    }

.tip-data {
    clear: both;
    border-top: 1px solid #ddd;
    height: 40px;
    margin: 0px 10px;
    padding: 10px 0 0 0;
    padding-bottom: 15px;
}

    .tip-data .divFormItem {
        width: 230px;
    }

.withheld-type {
    margin: 0px 0 0 20px;
    width: 220px;
}

.tipvalue-label {
    color: #222;
    float: left;
    text-align: right !important;
    font-size: 10.5pt !important;
    display: inline-block !important;
    width: 90px;
}

#settleSingleTip {
    margin: 15px 20px;
    width: 150px;
}

.settlement-info {
    margin: 5px 0 0 0;
    display: inline-flex;
    width: 330px;
}

    .settlement-info p {
        color: #777;
        font-size: 14px;
        margin: 0px;
        padding: 5px 5px 0px 5px;
        padding-right: 30px;
    }

.tipvalue-value {
    float: left;
    margin: 0 0 10px 0
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                          CLIENTS                                                    */
/*-----------------------------------------------------------------------------------------------------*/
#divClientListView_Search .searchBar {
    min-width: 1075px;
}

#ClientTiles .tile-block {
    height: 100px;
    padding: 5px 5px 15px 5px;
    width: 220px
}

#newNoteText {
    height: 255px;
    width: 190px;
}

#addNewNote {
    width: 175px;
}

#newClientNote {
    width: 215px;
    float: left;
}

.tblClientNotes {
    border: 0px;
    width: 490px !important;
}

    .tblClientNotes th {
        border-top: 0px !important;
    }

.notetext {
    max-width: 360px;
    word-wrap: break-word
}

#clientNoteControls {
    width: 110px;
    position: absolute;
    right: 30px;
}

#petNoteControls {
    float: left;
    margin: 20px 0 0 5px;
    width: 110px;
}

#clientNotesTableContainer {
    background: #FCFCFC;
    border: 1px solid #d0d0d0;
    float: left;
    height: 330px;
    margin-top: 10px;
}

#saveModifiedNote {
    margin-left: 20px;
}

#cancelModifyChanges {
    width: 57px;
}

#QuickAdd {
    position: absolute;
    top: 0px;
    left: 535px;
    width: 550px;
}

    #QuickAdd input {
        margin: 0px 5px;
        float: left;
        padding: 6px 10px;
    }

        #QuickAdd input.quickForm {
            padding-top: 8px;
            padding-bottom: 8px;
        }

    #QuickAdd h2 {
        margin: 5px 0;
    }

    #QuickAdd p {
        margin: 7px 0;
    }

#SearchFields {
    width: 560px;
}
    /*.address-section            { height:170px; }*/
    #SearchFields .listDisplayCount {
        float: right;
        margin: -5px 102px 0 0;
    }

.client-history-section {
    margin-top: 30px;
}

#clientGeneralLeftSection {
    width: 50%;
    float: left;
}

#clientGeneralRightSection {
    width: 50%;
    float: right;
}

#marketingEmailsCheckBox {
    float: left;
}

#marketingEmailsLabel {
    width: auto;
}

#marketingEmailsDiv {
    margin-left: 80px;
    margin-top: 10px;
}

#notificationCheckBoxes, #marketingCheckBoxes {
    display: inline-flex;
    width: 100%;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 12px;
}

#marketingCheckbox.disabled {
    cursor: default;
}

#marketingCheckBoxes .smallButton {
    font-size: 13px;
    margin: 0 5px;
}

#marketingCheckBoxes .help-icon {
    margin: 5px 5px 0 0;
}

#notificationCheckBoxes .pFormInfoStatic, #marketingCheckBoxes .pFormInfoStatic {
    width: 120px;
}

#notificationCheckBoxes .custom-checkbox, #marketingCheckBoxes .custom-checkbox {
    vertical-align: middle;
    margin-right: 4px;
}

p.text-marketing {
    font-size: 11px;
}

#appointmentNotificationsSection {
    padding-bottom: 18px;
}

    #appointmentNotificationsSection.text-marketing {
        padding-bottom: 6px;
    }

#cbMarketingSMS.disabled {
    cursor: default;
}

.notifications-not-available span {
    cursor: pointer;
    cursor: hand;
    text-decoration: underline;
}

.notifications-not-available p {
    margin-top: 10px;
}

#clientCategorySection {
    padding-bottom: 30px;
}

#clientCategoryDiv {
    margin-top: 18px;
}

#clientGeneralLeftSection .no-primary-photo,
#clientGeneralLeftSection .primary-photo {
    height: 105px;
    margin: 15px 0px;
    position: relative;
    width: 105px;
}

#cloudGeneralSection .pFormInfo {
    width: 90px !important;
}

#cloudGeneralSection .pFormLabel {
    width: 70px !important;
}

#cloudGeneralSection .divFormItem {
    clear: none;
    display: inline-block;
    margin: 3px 0;
    width: 260px
}

#cloudGeneralSection input {
    float: none;
    width: 165px
}

#cloudGeneralSection #btnChangeID {
    padding: 6px 6px
}

#cloudGeneralSection #btnUpdateID,
#cloudGeneralSection #btnCancelUpdateID {
    padding: 6px 3px;
}
/*-----------------------------------------------------------------------------------------------------*/
/*                                    CLIENT READ-ONLY                                                 */
/*-----------------------------------------------------------------------------------------------------*/
#clientInfoDetailBox .smallButton {
    padding: 6px 40px;
    margin: 10px;
}

#divClientInfoTabs h3 {
    font-family: "Museo 300", Arial, Sans-Serif;
    font-size: 13pt;
    text-decoration: underline;
}

#divClientInfoTabs .name {
    display: block;
    font-family: "Museo 100", Arial, Sans-Serif;
    font-size: 20pt;
    margin: 0px 0px 15px 5px;
}

#divClientInfoTabs .section {
    float: left;
    width: 220px;
    padding-top: 10px;
}

#divClientInfoTabs .section-divider {
    border-bottom: 1px solid #ccc;
    height: 15px;
    opacity: 0.75;
}

#divClientInfoTabs .section.first {
    padding-right: 20px;
    width: 270px;
}

#divClientInfoTabs .tool-tip .icon-image {
    color: #666;
    padding: 0 5px;
    font-size: 16px;
}

#divClientInfoTabs .tab-section.ui-tabs-panel {
    padding: 5px 10px;
}

#divClientInfoTabs .tab-section .section {
    padding: 20px 0 0 20px;
}

    #divClientInfoTabs .tab-section .section.text-box {
        padding-top: 0;
        width: 46%;
    }

#divClientInfoTabs .tab-section .divHistoryBox {
    height: 200px;
}

#divClientInfoTabs .trItemsTableRow {
    cursor: default;
}

#divClientInfoTabs .noItemsInList {
    margin: 25px auto 0;
}

#divClientInfoTabs #divNotes {
    margin: 0 auto;
}

    #divClientInfoTabs #divNotes .tblClientNotes {
        width: 535px !important;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }

#divClientInfoTabs #mcs_FullClientNotes {
    height: 235px;
    width: 557px;
    margin: 0;
}

    #divClientInfoTabs #mcs_FullClientNotes .mCustomScrollBox .container {
        width: 100%;
    }

#divClientInfoTabs .tab-section #divPetTabs .divHistoryBox {
    height: 180px;
}

#divClientInfoTabs #divPetTabs .ui-tabs-nav {
    border-bottom: none;
}

    #divClientInfoTabs #divPetTabs .ui-tabs-nav li {
        margin: 0;
    }

#divClientInfoTabs #divPetTabs textarea {
    height: 85px;
    width: 95%;
    letter-spacing: normal;
}

#divClientInfoTabs #divPetTabs .mCustomScrollBox:not(.mCSB_horizontal) .mCSB_container {
    min-height: 160px;
}

.cloud-user #divClientInfoTabs .tab-section #divPetTabs .divHistoryBox,
.cloud-user #divClientInfoTabs .tab-section .divHistoryBox {
    height: 235px
}

.cloud-user #divClientInfoTabs #divNotes .tblClientNotes {
    width: 595px !important;
}

.cloud-user #divClientInfoTabs #mcs_FullClientNotes {
    height: 270px;
    width: 617px;
}

#divPetTabs .primary-photo-container {
    float: left;
    margin: 10px;
    width: 105px;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                               PETS                                                  */
/*-----------------------------------------------------------------------------------------------------*/
#divPets .divModifyFormSection {
    width: 80%;
    padding: 0;
    background-color: rgba(242, 242, 242, 0.4);
}

#divPets .hModifyFormHeader {
    margin: 0 0 0 15px;
}

#divPets .divFormItem {
    margin: 0;
    height: 300px;
}

    #divPets .divFormItem.scroll {
        overflow: auto;
    }

#divPets .smallButton {
    float: left;
    padding: 8px 15px;
    width: 100px;
    margin: 6px 0 10px;
}

#divPets .tblClientPets th {
    border-top: none;
}

.pet-inactive {
    margin: 10px 50px 0 0
}

#divViewEditPet .divModifyFormSection {
    float: none;
    margin: 15px auto 25px;
    width: 665px
}

#divViewEditPet .divFormItem {
    clear: none;
}

    #divViewEditPet .divFormItem.row {
        clear: both;
        margin: 0 auto;
        padding: 10px 0 0;
        width: 61%
    }

        #divViewEditPet .divFormItem.row label {
            margin-right: 10px;
        }

#divViewEditPet .divModifyForm input {
    width: 155px;
}

    #divViewEditPet .divModifyForm input.full {
        width: 300px;
    }

    #divViewEditPet .divModifyForm input[type="checkbox"] {
        width: 15px;
    }

#divViewEditPet textarea {
    height: 75px;
    margin: 10px 0;
    padding: 10px 10px 15px;
    width: 95%;
}

#divViewEditPet label {
    font-size: 15px;
    padding-left: 3px;
}

    #divViewEditPet label.sm {
        font-size: 14.3px;
    }

#divViewEditPet .divGeneralShift {
    margin: 3px 0;
}

#divViewEditPet .divGeneralHalf {
    float: left;
    text-align: right;
    width: 40%
}

#divViewEditPet .divGeneralFull {
    text-align: right;
    margin: 0 auto;
    width: 58%
}

#divViewEditPet select {
    background-color: #FDFDFD;
    width: 155px;
    border: 1px solid #CCCCCC;
    font-size: 12.5px;
    letter-spacing: 1px;
    padding: 3px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

#PetTiles .tile-block {
    padding: 5px;
    width: 210px;
}

/*#divViewEditPet.cloud-user .divModifyFormSection {width:665px}
#divViewEditPet.cloud-user .divFormItem.row  {width:61%}
#divViewEditPet.cloud-user .divGeneralHalf  {width:40%}
#divViewEditPet.cloud-user .divGeneralFull  {margin: 0 auto; width: 58%}*/
#divViewEditPet #divPersonality .divGeneralHalf,
#divViewEditPet #divMedical .divGeneralHalf {
    width: 50%
}

#divViewEditPet #divMedical.cloud-user .divGeneralHalf {
    width: 42%
}

#divViewEditPet #divMedical.cloud-user #vaccinations.divGeneralHalf {
    width: 58%;
}

#divMedical.cloud-user .divGeneralShift .divGeneralHalf:nth-child(1) {
    width: 55%;
}

#divMedical.cloud-user .divGeneralShift .divGeneralHalf:nth-child(2) {
    width: 45%;
}

#divMedical.cloud-user .form-inputs {
    float: left;
}

#divPetVaccinations {
    background-color: #f8f8f8 !important;
    height: 295px;
    border: 1px solid #e0e0e0 !important;
    border-top: 1px solid #ddd !important;
    overflow: auto;
    padding: 0 !important;
}

    #divPetVaccinations .expiration-date-column .k-datepicker {
        width: 115px !important;
    }

#divPetVaccinations {
    height: 190px;
}

    #divPetVaccinations .trItemsTableRow.selected {
        background: inherit;
        color: inherit;
    }

#vaccinations .noItemsInList.small {
    width: 217px;
    margin: 25px auto;
}

/*#divViewEditPet .tblHistory.PetHistoryTable     {width:699px !important}*/

#divViewEditPet .no-primary-photo,
#divViewEditPet .primary-photo {
    height: 125px;
    margin: 10px 0;
    width: 125px
}

#divViewEditPet .icon-photo {
    font-size: 95pt
}

#divViewEditPet #addPhoto {
    right: 35px;
    top: 27px
}
/*-----------------------------------------------------------------------------------------------------*/
/*                                          TIME BLOCKS                                                */
/*-----------------------------------------------------------------------------------------------------*/
#divViewEditTimeBlock .divModifyFormSection {
    width: 350px;
    margin: 15px;
    padding: 10px;
}

#divViewEditTimeBlock .button-modify-save {
    margin-right: 15px !important;
}

#divViewEditTimeBlock .dayCheckboxes {
    text-align: left;
}

#divViewEditTimeBlock #divButtonStrip {
    position: relative;
}

#divViewEditTimeBlock input.ui-autocomplete-input {
    width: 167px !important;
}

.tblFormItem {
    margin: 0;
}

    .tblFormItem th {
        text-align: right;
        font-size: 15px;
        font-weight: normal;
    }

    .tblFormItem label, .tblFormItem span.form-text {
        padding: 0 10px;
    }

        .tblFormItem label.checkLabel {
            padding: 0 0 3px;
            width: 55px;
        }

    .tblFormItem td {
        padding: 5px 0 10px;
    }

#btnTimeBlockRecurring {
    display: inline-block;
    letter-spacing: 0px;
    margin: 0 0 0 16px;
    padding: 3px 18px !important;
}

#cmdDeleteThisTimeBlock {
    margin-left: 15px;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                          OLB REQUESTS SCREEN                                        */
/*-----------------------------------------------------------------------------------------------------*/
#OnlineBookingRequestsSearchBar .searchBar {
    min-width: 1091px
}

#AppointmentRequestListContainer {
    padding: 0px;
}

#AppointmentRequestTiles .tile-block {
    height: 90px;
    padding-bottom: 15px;
}

#OnlineBookingRequestsSearchBar .vertical-divider {
    margin: 15px 5px;
}

#OnlineBookingRequestsSearchBar .searchFormButtons {
    width: 185px;
}

    #OnlineBookingRequestsSearchBar .searchFormButtons a {
        width: 60px;
    }
/*-----------------------------------------------------------------------------------------------------*/
/*                          TICKET AND OLB REQUESTS TILE COLOR KEYS                                    */
/*-----------------------------------------------------------------------------------------------------*/
#TicketColorKey {
    left: 615px;
    position: absolute;
    top: 0;
    width: 550px;
}

#onlineBookingColorKey {
    float: left;
    width: 330px;
}

    #TicketColorKey .divColorKey,
    #onlineBookingColorKey .divColorKey {
        width: 100px;
        font-size: 16px;
    }

        #TicketColorKey .divColorKey.small,
        #onlineBookingColorKey .divColorKey.small {
            font-size: 14px;
        }

        #TicketColorKey .divColorKey.top-row,
        #onlineBookingColorKey .divColorKey.top-row {
            margin-top: 0 !important;
        }

/*-----------------------------------------------------------------------------------------------------*/
/*                                          TICKETS SCREEN                                             */
/*-----------------------------------------------------------------------------------------------------*/
#DateRangeSearch .searchForm {
    width: auto;
}

#TicketDisplay .vertical-divider {
    margin: 15px 20px 15px 10px;
}

#TicketDisplay {
    left: 430px;
    position: absolute;
    top: 0;
    width: 550px;
}

#divTicketListView_Container #ticket-items p {
    font-size: 15px;
    line-height: 23px;
}

.ticket-tile-block {
    height: 115px;
    width: 230px;
    border: 1px solid #c0c0c0;
    cursor: pointer;
    float: left;
    margin: 10px;
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-shadow: 1px 1px 1px rgba(0, 0,0, 0.1);
    outline: none;
}

    .ticket-tile-block div {
        max-width: 180px;
    }

#TicketResults {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 5px;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                          ACTION DIALOGS                                             */
/*-----------------------------------------------------------------------------------------------------*/
.divErrorMessage {
    padding: 30px 40px;
}

    .divErrorMessage h2 {
        padding: 0 0 20px 0;
    }

    .divErrorMessage p {
        padding: 5px 5px 15px 0;
    }

.actionDialog {
    width: 100%;
    min-height: 250px;
    background-color: #222;
    border-top: 2px solid #999;
    position: absolute;
    bottom: 0px; /*z-index:6;*/
}

.actionDialogAlert .ui-dialog-titlebar,
.actionDialogAlert .ui-dialog-buttonpane {
    display: none;
}

.actionDialogAlert .alert-dialog {
    margin: 0;
}

.actionDialogAlert .divErrorMessage {
    padding: 20px;
}

.actionDialogAlert .divButtonStrip_Dark {
    position: relative;
}

#divAlert {
    font-family: 'PT Sans', Arial;
    max-height: 250px;
}

    #divAlert #alertMessage {
        font-size: 16px;
        padding: 20px;
    }

#divActionDialogDateRange {
    margin: 0 25px;
}

    #divActionDialogDateRange input {
        margin: 0;
    }

    #divActionDialogDateRange label {
        margin: 0 20px 0 3px;
    }

.dialog-icon, .ui-dialog .icon-image {
    padding-right: 5px;
    font-size: 18px;
    line-height: 12px;
}

#divActionDialogChoice {
    padding: 5px
}

.terms-dialog .alert-dialog {
    margin: 0 !important;
    max-height: 600px !important;
    overflow-y: scroll !important;
    padding: 15px !important;
}

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

#ActionDialogEmailAlreadyInUsePasswordEntry {
    padding: 12px 0 8px 0;
}

    #ActionDialogEmailAlreadyInUsePasswordEntry p {
        width: 400px;
    }

    #ActionDialogEmailAlreadyInUsePasswordEntry .adInputContainer {
        text-align: left;
    }

        #ActionDialogEmailAlreadyInUsePasswordEntry .adInputContainer label {
            padding-right: 15px;
            word-wrap: break-word;
        }

        #ActionDialogEmailAlreadyInUsePasswordEntry .adInputContainer input {
            width: 185px;
        }

.ui-dialog .ui-dialog-buttonpane button.left {
    float: left;
    margin-left: 1em;
    margin-right: 0;
}


/*-----------------------------------------------------------------------------------------------------*/
/*                                          SCHEDULING                                                 */
/*-----------------------------------------------------------------------------------------------------*/
.tblScheduleTable {
    margin: 0;
    position: relative;
    top: 0;
    left: 0;
    font-family: Verdana, Sans-Serif;
    font-size: 0.8em;
    z-index: 0;
}

.dataTables_scrollBody .tblScheduleTable thead tr,
.DTFC_LeftBodyLiner .tblScheduleTable thead tr {
    display: none
}

.tblWorkingTimes {
    width: 175px;
    background-color: #f5f5f5;
    padding: 0 15px;
    margin: 0 5px 0 0;
    border: 1px solid #ddd;
    font-size: 9pt;
    float: left;
}

    .tblWorkingTimes td {
        padding: 1px
    }

        .tblWorkingTimes td.startTime {
            text-align: right;
        }

        .tblWorkingTimes td.endTime {
            text-align: left;
        }

        .tblWorkingTimes td.dash {
            text-align: center;
            width: 5px
        }

    .tblWorkingTimes span.icon-image {
        color: #888888;
        font-size: 16px;
        height: 20px;
        margin: 0;
        padding: 3px 2px 0px;
        width: 20px;
        cursor: pointer;
        border: 1px solid #F5F5F5;
    }

        .tblWorkingTimes span.icon-image:hover {
            border: 1px solid #ccc;
            color: #919191;
            background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.85), rgba(247, 247, 247, 0.85)) repeat scroll 0 0 transparent;
            background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.85), rgba(247, 247, 247, 0.85));
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D8FFFFFF', endColorstr='#D8F7F7F7');
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.85)), to(rgba(247, 247, 247, 0.85)));
            background-image: -o-linear-gradient(rgba(255, 255, 255, 0.85),rgba(247, 247, 247, 0.85));
        }

        .tblWorkingTimes span.icon-image.delete {
            color: #B86969;
        }

            .tblWorkingTimes span.icon-image.delete:hover {
                color: #BD5656;
            }

.tdScheduleEntry {
    min-width: 85px;
    height: 45px;
    border-left: 1px solid #f0f0f0;
    border-bottom: 1px solid #fff;
    padding: 3px;
    cursor: default;
}

    .tdScheduleEntry:hover {
        cursor: pointer;
    }

    .tdScheduleEntry.non-remote {
        background-color: #f8f8f8;
    }

.tdScheduleNameColumn {
    background-color: #f0f0f0;
    width: 110px;
    text-align: right;
    cursor: default;
}

.deleteWorkingHours {
    color: Red
}

#pSelectAllNone {
    float: left;
    padding: 15px 0 0 0;
}

#divColorKeyDisplay {
    margin-left: 10px;
}


.pScheduleTime {
    font-size: 7pt;
    text-align: center;
}

.pScheduleStatus {
    font-size: 8pt;
    text-align: center;
}

.pScheduleComment {
    width: 90%;
    max-width: 100px;
    color: #444;
    font-size: 8pt;
    font-style: italic;
    text-align: center;
    display: block;
    margin: 0 auto;
    overflow: hidden;
}

.pNoTimesEntered {
    width: 132px;
    font-style: italic;
    color: #777;
    font-size: 0.9em;
}

.divColorKey {
    width: 110px;
    padding: 5px 7px;
    margin: 5px 2px;
    border: #ccc 1px solid;
    font-size: 14px;
}

.tdScheduleEntry.selected p {
    color: inherit;
}

.scheduleDateStartLabel {
    width: 50px;
    font-size: 14px;
}

.scheduleDateEndLabel {
    width: 40px;
    margin: 0 0 0 10px;
    font-size: 14px;
}

.calendarNarrow {
    width: 100px !important;
}

.dayCheckboxes {
    padding: 7px 0 0 0;
    font-size: 12px;
    text-align: center;
}

.offReasons1 {
    width: 150px;
    margin: 20px 0 0 10px;
}

.offReasons2 {
    width: 150px;
    margin: 20px 0 0 20px;
}

.scheduleCommentSection {
    padding: 20px;
    margin-top: 20px;
    height: 170px
}

.commentTextArea {
    width: 350px;
    height: 45px;
    margin: 20px 0px 0px 0px;
    padding: 5px;
    left: 0px;
}

.checkLabel {
    padding: 0px;
}

#divBasicScheduleInfo {
    padding: 20px;
    height: 80px;
    margin: 20px 0 0 40px;
    float: left;
}

#divRecurringDates {
    padding: 10px 20px;
    margin-top: 20px;
    height: 100px;
    float: left;
}

#divSingleDate {
    padding: 20px;
    margin-top: 20px;
    height: 80px;
    float: left;
}

#divOff {
    height: 170px;
    padding: 20px;
    margin: 20px 0 0 40px;
}

.button-add-times {
    width: 100px;
    margin: 16px 0 0 8px;
}

#btnCancelRecurring {
    margin: 5px 0;
    padding: 5px 10px;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                           TIME CLOCK                                                */
/*-----------------------------------------------------------------------------------------------------*/
/*Summary Screen*/
.time-clock-summary-dialog .ui-dialog-buttonpane {
    background-color: #eeeeee;
}

    .time-clock-summary-dialog .ui-dialog-buttonpane .button.color {
        margin-left: 10px;
        width: 76px;
    }

.time-clock-summary-dialog #summaryName {
    background-color: #eeeeee;
    border-bottom: 1px solid #cccccc;
    margin-right: 5px;
    height: 60px;
    width: 100%;
}

    .time-clock-summary-dialog #summaryName * {
        line-height: 3.5em;
        height: 100%;
    }

    .time-clock-summary-dialog #summaryName .left {
        margin-left: 15px;
        max-width: 255px;
        overflow: hidden;
        padding-top: 0;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .time-clock-summary-dialog #summaryName .right {
        margin-right: 15px;
        padding-right: 8px;
        padding-top: 3px;
    }

.time-clock-summary-dialog .form {
    margin: 20px 25px 10px;
}

    .time-clock-summary-dialog .form > div {
        margin: 28px 5px 15px 5px;
    }

.time-clock-summary-dialog #clockedIn {
    margin-right: 40px;
}

.time-clock-summary-dialog #timeWorked {
    color: rgb(158, 158, 158);
    font-size: 12px;
    margin: 5px 0 25px 0;
}

.time-clock-summary-dialog #commentContainer label {
    vertical-align: top;
}

.time-clock-summary-dialog #comment {
    margin-left: 13px;
    height: 40px;
    width: 238px;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                          REPORTS SCREEN                                             */
/*-----------------------------------------------------------------------------------------------------*/
.report-section-container {
    margin: 0 auto;
}

.report-section {
    float: left;
    min-width: 380px;
    padding: 0 30px 0 0;
    position: relative;
    width: 40%;
}

    .report-section.wide {
        width: 82%;
    }

    .report-section.small {
        width: 35%;
    }

.report-table {
    padding: 0;
    margin: 20px;
    width: 100%;
    border: 2px solid #bbb;
    background-color: #eee;
    position: relative;
}

.two-columnn-table {
    margin: 0 50px;
}

    .two-columnn-table td {
        background: none repeat scroll 0 0 #F8F8F8;
        border-top: 1px solid #ccc;
        padding: 10px 40px 10px 15px;
    }

    .two-columnn-table tr.last td {
        border-bottom: 1px solid #ccc;
    }

    .two-columnn-table .key {
        font-family: "Museo 300",Verdana,san-serif;
        font-size: 20px;
        text-align: left;
        border-left: 1px solid #ccc;
    }

        .two-columnn-table .key .icon-image {
            padding-right: 5px;
            width: 25px;
            color: #444;
        }

    .two-columnn-table .value {
        font-size: 16px;
        border-right: 1px solid #ccc;
    }

    .two-columnn-table .divider td {
        background: inherit;
    }

.report-table-container {
    clear: both;
    width: 100%;
    position: relative;
}

    .report-table-container .tblModalItemsTable th {
        border: none;
    }

    .report-table-container tr {
        cursor: default;
    }

        .report-table-container tr.selected {
            background-color: inherit;
        }

.report-header {
    background-color: #eee;
}

    .report-header h2 {
        float: left;
        font-family: "Museo 300",Verdana,san-serif;
        font-size: 23px;
    }

    .report-header .icons {
        float: right;
        margin: 0;
    }

        .report-header .icons .switch-view {
            color: #555;
            cursor: pointer;
            float: left;
            margin: 0 0 0 5px;
            padding: 5px;
        }

            .report-header .icons .switch-view.selected {
                color: #dfc164;
            }

    .report-header .icon-image {
        float: left;
        margin: 5px;
    }

.table-container {
}

.chart-container {
    width: 80%;
    margin: 0 auto;
    overflow: visible !important;
    color: #FFF;
}

    .chart-container svg {
        overflow: visible !important;
    }

.stacked-bar {
    width: 100%;
}

.narrow-table {
    max-width: 500px;
}

.print-report {
    width: 100px;
    float: right;
    margin-top: -10px;
    position: relative;
    top: -35px;
}
/*-----------------------------------------------------------------------------------------------------*/
/*                                          LOOKUP SCREEN                                              */
/*-----------------------------------------------------------------------------------------------------*/
.itemLookup {
    margin: 0;
    padding: 0;
    font-family: 'PT Sans',Georgia;
    overflow: hidden;
}

    .itemLookup .searchBox {
        font-size: 17px;
        color: #777;
        text-shadow: 1px 1px #ddd;
        padding: 10px 10px 3px;
        position: relative;
        z-index: 9999;
    }

        .itemLookup .searchBox input {
            width: 300px;
            margin-top: 10px;
            padding: 7px 5px;
            color: #BEBEBE;
        }

            .itemLookup .searchBox input:focus {
                color: #444444;
            }

        .itemLookup .searchBox #clearSearch {
            background: url('/Content/images_shared/close.png') no-repeat scroll center center transparent;
            cursor: pointer;
            height: 13px;
            padding: 7px;
            position: absolute;
            right: 130px;
            top: 22px;
            width: 13px;
        }

.searchSection.container {
    background-color: #F2F2F2;
}

.searchSection .searchItem {
    color: #606060;
    background: -moz-linear-gradient(center top, #fff, #FAFAFB) repeat scroll 0 0 transparent;
    background-image: -ms-linear-gradient(top, #fff, #FAFAFB);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#FAFAFB');
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#FAFAFB));
    background-image: -o-linear-gradient(#fff,#FAFAFB);
    cursor: default;
    height: 45px;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    overflow: hidden;
}

    .searchSection .searchItem.purchaseHistory {
        height: 60px;
    }

    .searchSection .searchItem.first {
        border-top: none;
    }

    .searchSection .searchItem.last {
        border-bottom: 1px solid #DDDDDD;
    }

    .searchSection .searchItem.hide {
        display: none;
    }

    .searchSection .searchItem.no-scroll {
        border-right: medium none !important;
        width: 447px !important;
    }

.searchSection .container.no-scroll {
    width: 348px !important;
}

    .searchSection .container.no-scroll .searchItem {
        border-right: none;
    }

.searchSection .searchItem h1 {
    font-size: 17px;
    height: 20px;
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*max-width:270px;*/
.searchSection .searchItem h2 {
    color: #808080;
    font-size: 12px;
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchSection .searchItem .info {
    max-width: 60%;
    padding: 5px 15px;
    height: 75px;
}

.searchSection .searchItem .detail {
    bottom: 80px;
    float: right;
    max-width: 35%;
    padding-right: 5px;
    position: relative;
    text-align: right;
}

    .searchSection .searchItem .detail h2 {
        height: 20px;
    }

.searchSection .searchFormButtons {
    width: auto;
    float: right;
}

    .searchSection .searchFormButtons a {
        width: 60px;
        margin: 10px 0 0 0;
        padding: 5px 20px;
    }

.searchSection .searchFieldDescription {
    padding: 5px 3px;
}

#divClientLookup #resultBox {
    height: 270px;
    overflow: auto;
}

#petSearchSection #divClientSearchButtons {
    padding: 0px 10px;
}

#divModifyPetClientLookup {
    height: auto
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                      ALERT DIALOGS                                                  */
/*-----------------------------------------------------------------------------------------------------*/
.alert-dialog {
    font-size: 16px;
    line-height: 22px;
    margin: 15px 20px;
    width: 400px;
    overflow: hidden;
}

.search-dialog {
    margin: 0;
}

.report-dialog {
    font-size: 16px;
    line-height: 22px;
    width: 400px;
}

.action-dialog-summary {
    background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.85), rgba(247, 247, 247, 0.85)) repeat scroll 0 0 transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    margin: 0;
    padding: 10px 15px;
}

.action-dialog-summary-expanded {
    cursor: default !important;
}

.action-dialog-summary .title {
    padding-right: 15px;
}

.action-dialog-summary .value {
}

.action-dialog-summary .header {
    float: none;
    padding-right: 15px;
    margin-top: -5px;
    color: #444;
}

.icon-o.complete {
    color: #0bb26d;
    float: right;
    font-size: 28px !important;
    margin-top: 1px;
}

.icon-o.incomplete {
    color: #B20B0B;
    float: right;
    font-size: 28px !important;
    margin-top: 1px;
}

.action-dialog-section {
    margin: 0 25px;
}

.action-dialog-detail p {
    padding: 10px 0 0;
    font-size: 16px;
}

.action-dialog-detail span.comboBox {
    color: #eee;
}

.alert-dialog.short {
    max-height: 400px !important;
}

.alert-dialog.no-margin {
    margin: 0;
}

.ui-dialog .ui-dialog-title [data-icon] {
    font-size: 22px;
    line-height: 19px;
    margin: 0px;
    vertical-align: middle;
}
/*-----------------------------------------------------------------------------------------------------*/
/*                               RESET PASSWORD AND OTHER ACCOUNT MESSAGES                             */
/*-----------------------------------------------------------------------------------------------------*/
.dark-content-box {
    color: #ddd;
    background-color: #222;
    border: 1px solid #aaa;
    margin: 50px 0;
    box-shadow: 0 0 7px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 7px rgba(0,0,0,0.4);
    margin: 50px auto;
    padding: 30px;
    width: 450px;
}

    .dark-content-box.wide {
        width: 500px;
        padding-top: 15px;
        margin-top: 0;
    }

    .dark-content-box.extra-wide {
        width: 600px;
        padding: 15px 60px 40px 60px;
        margin-top: 0;
    }

    .dark-content-box h1 {
        font-family: "Museo 300";
        font-size: 22px;
        margin: 15px 0;
    }

        .dark-content-box h1.center {
            text-align: center;
        }

    .dark-content-box.password-reset p {
        margin: 15px 0;
    }

.password-reset label:not(.policy-text ), .password-reset span {
    display: inline-block;
    text-align: right;
    width: 37%;
}

    .password-reset span.custom-checkbox {
        width: auto;
        float: left;
    }

.password-reset input {
    margin: 5px;
    width: 50%;
}

.password-reset #ForgotPassword {
    margin: 40px auto;
    width: 250px;
}

.password-reset #SaveNewPassword {
    margin-top: 25px !important;
    width: 250px;
}

.password-reset .checkbox-container {
    margin: 5px 10px;
}

.checkbox-container {
    font-size: 13px;
}

.dark-content-inner-box {
    background: #333;
    border: #292929 1px solid;
    margin: 30px auto;
    padding: 20px 60px;
    width: 75%;
}

#update-billing-options-box a {
    float: left;
    margin: 15px 25px;
    width: 150px;
}

#update-billing-options-box h3 {
    text-align: center;
}

#NewPasswordForm .password-note {
    margin: 0 auto 10px;
}

.password-reset .policy-text {
    width: 85%;
    margin-left: 5px;
}

.password-reset .ds-request-error * {
    text-align: center;
    width: 100%;
}

#NewDaySmartAcccountRequestCodeForm {
    padding: 8px 12px 0 12px;
}

    #NewDaySmartAcccountRequestCodeForm p {
        font-size: 16px;
    }

    #NewDaySmartAcccountRequestCodeForm input {
        width: 100%;
        margin: 15px 0 5px 0;
    }

#RegisterUserAccount #RequestCodeButton {
    float: right;
    font-size: 12px;
    margin-top: 1px;
}

#RegisterUserAccount .password-reset #CodeForm input {
    margin: 5px 5px;
    width: 25%;
    font-size: 18px;
    padding: 5px;
}

#RegisterUserAccount .password-reset #CodeForm label:not(.policy-text) {
    font-size: 18px;
    width: 45%;
}

#RegisterUserAccount #CodeForm .icon-image {
    font-size: 15px;
    width: initial
}

    #RegisterUserAccount #CodeForm .icon-image:hover {
        cursor: pointer;
    }

#RegisterUserAccount .password-reset span.bold {
    width: initial;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                              BASIC ACCOUNT MESSAGES (NEW APPEARANCE)                                */
/*-----------------------------------------------------------------------------------------------------*/
.message-content-box {
    position: relative;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #cccccc;
    box-sizing: border-box;
    color: #444444;
    top: 100px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 4px;
    opacity: 1;
    /*margin: 20px auto;
    max-width: 600px;
    padding: 50px;
    width: 90%;*/
}

.message-content-box-no-bg {
    position: relative;
    top: 100px;
    left: 50%;
    transform: translate(-50%);
}

.message-content-box h1 {
    color: #444;
    font-family: "Museo 300", "Georgia", serif;
    font-size: 22px;
    line-height: 1.1em;
    margin: 15px 0;
}

.message-content-box h2 {
    margin: 17px 0 4px;
}

    .message-content-box h2.center {
        text-align: center;
    }

.message-content-box h1.center {
    text-align: center;
}

.message-content-box p {
    color: #444444;
}

.message-content-box.wide-box {
    max-width: 850px;
    min-width: 620px;
}


/*-----------------------------------------------------------------------------------------------------*/
/*									   TRIAL EXPIRED PAGE				                               */
/*-----------------------------------------------------------------------------------------------------*/
.ccExpiration span {
    font-size: 10.5pt;
}

.trial-expired-divider {
    height: 20px;
}

.button-rounded {
    border-radius: 4px;
}

.go-back-to-login-link {
    font-size: 14px;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
}

.go-back-to-login-link-parent {
    margin: 33px 0 40px 0;
    text-align: left;
}

.winform-go-back-to-login-link {
    display: inline-block;
}

.winform-go-back-to-login-link-parent {
    margin: 33px 10px 40px 10px;
    text-align: center;
    width: 100%;
}

.trial-expired-client-financial-profit {
    font-size: 24px;
}

.trial-expired-client-financial-stats-header {
    font-size: 20px;
    font-family: "DM Sans", sans-serif;
    font-weight: bold;
    margin: 24px 0 0 0 !important;
}

.trial-expired-client-financial-stats-title {
    font-size: 16px;
    font-family: "DM Sans", sans-serif;
    font-weight: normal;
}

.trial-expired-list-container-header {
    font-family: "DM Sans", sans-serif;
    font-style: normal;
    font-size: 16px;
    margin: 0px;
    padding: 0px;
}

.large-two-line-button {
    display: block;
    font-family: "Museo 300";
    padding: 10px !important;
    font-size: 23px !important;
    line-height: 28px;
    margin: 10px auto !important;
    text-decoration: none;
    text-align: center;
    width: 40%;
    min-width: 260px;
}

    .large-two-line-button span {
        font-size: 15px !important;
        line-height: 15px;
    }

.trialExpired-step-wrapper {
    display: flex;
    display: table;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding-top: 0px;
    align-items: center;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 4px;
    opacity: 1;
}

.trial-expired-list-container {
    width: 360px;
}

#trialExpiredListContainer {
    float: left;
    margin: 20px 10px 20px 0;
    padding: 20px 20px 20px 64px;
}

    #trialExpiredListContainer h2 {
        text-align: left;
        margin-top: 40px;
    }

#trialExpiredActivityContainer h2 {
    margin: 5px 0 40px 0;
    text-align: left;
}

#trialExpiredActivityContainer {
    float: left;
    padding: 20px 20px 20px 64px;
}


#WinformTrialExpiredActivityContainer h2 {
    margin: 5px 0 40px 57px;
    text-align: left;
}

.winform-trial-expired-list-container {
    font-size: 16px;
    font-family: "DM Sans", sans-serif;
    font-style: normal;
    color: #222222;
    margin: 16px 0 8px 0;
    padding: 0;
}

#trialExpiredContainer ul {
    margin: 10px 0 33px 0;
    padding: 0px;
}

    #trialExpiredContainer ul li {
        padding: 3px 0 3px;
        font-size: 14px;
        font-family: "DM Sans", sans-serif;
        font-style: normal;
        list-style-type: none;
        color: #222222;
    }


#creditCardFormOuterContainer {
    margin-left: 10px;
}

    #creditCardFormOuterContainer p {
        font-size: 14px;
        font-family: "DM Sans", sans-serif;
        font-style: normal;
    }

.winform-trial-expired-header {
    text-align: center;
    font-size: 20px;
    font-family: "DM Sans", sans-serif;
    color: #222222;
    margin: 40px 0 24px 0;
}

#trialExpiredActivityContainer p,
#WinformTrialExpiredActivityContainer p {
    font-family: "DM Sans", sans-serif;
    margin: 4px 0;
    padding: 0;
    text-align: center;
}

#trialExpiredActivityContainer .profit,
#WinformTrialExpiredActivityContainer .profit {
    font-family: "DM Sans", sans-serif;
    color: #008000;
    padding: 4px;
}

#trialExpiredActivityContainer span,
#WinformTrialExpiredActivityContainer span {
    font-family: "DM Sans", sans-serif;
}

#trialExpiredClosing {
    font-family: "Museo 300";
    font-size: 24px;
    line-height: 26px;
    margin: 25px 10px;
}

#trialExpiredOpening {
    font-size: 11pt;
    line-height: 18pt;
    margin: 15px auto;
    text-align: left;
    width: 100%;
    padding: 0px;
}

#winFormTrialExpiredOpening {
    font-size: 11pt;
    line-height: 18pt;
    margin: 24px 80px;
    text-align: left;
    width: 640px;
    padding: 0px;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    color: #222222;
}

#trialExpiredLongSignupButton {
    display: block;
    font-size: 18px;
    margin: 15px auto 0 auto;
    padding: 10px;
    width: 70%;
}

#WinformTrialExpiredListContainer {
    margin: 0 80px 33px 80px;
    padding: 0;
    width: 640px;
}

#WinformTrialExpiredActivityContainer {
    margin: 20px auto;
    padding: 20px;
    width: 95%;
}

#WinformTrialExpiredListContainer ul {
    margin: 10px 0 0 0;
    width: 47%;
}

#WinformTrialPurchaseButton {
    display: block;
    font-size: 24px;
    margin: 15px auto 15px auto;
    padding: 12px;
    width: 40%;
}




/*--------------------Credit Card form ------------------------*/
.form-section {
    background: #f8f8f8;
    border: 1px solid #ddd;
    float: right;
    margin: 20px 0 10px;
    padding: 20px;
    width: 43%;
    position: relative
}

.form-section-no-bg {
    float: right;
    padding: 20px;
    width: 43%;
    position: relative
}

.form-section p {
    font-size: 10pt;
    margin: 10px 0 0 0 !important;
    padding: 0px;
}

.form-section h2 {
    margin: 5px 0 4px;
}

.form-section input {
    width: 98%;
    margin: 0 0 5px;
    padding: 7px 5px;
    font-size: 13px;
}

.form-section-inline.half {
    display: inline-block;
    width: 45%;
    margin: 0 5px 0 0;
}

.form-section-inline.half {
    display: inline-block;
    width: 45%;
    margin: 0 5px 0 0;
}

    .form-section-inline.half .k-dropdown {
        width: 100%;
    }

#policiesAgreement {
    margin: 25px 0px 0px 0px;
    padding: 0px;
    width: 100%;
    font-family: "DM Sans", sans-serif;
    font-style: normal;
    font-size: 14px;
}

    #policiesAgreement input {
        width: 6%
    }

    #policiesAgreement span {
        width: 90%;
        color: #222222;
    }
/*.form-section .input-read-only {font-size: 16px;}
.form-section .read-only-label        {font-size:17px}*/
.input-read-only {
    background: #f2f2f2;
    background: -moz-linear-gradient(center top, #fefefe, #f2f2f2) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#f2f2f2');
    background-image: -ms-linear-gradient(top left, #fefefe, #f2f2f2);
    background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f2f2f2));
    background-image: -o-linear-gradient(#fefefe,#f2f2f2);
    border: 1px solid #ccc;
    color: #333333;
    font-size: 16px;
    letter-spacing: 1px;
    margin-right: 10px;
    padding: 5px 20px 5px 7px;
    text-shadow: 0 1px #f1f1f1;
}

    .input-read-only.left {
        margin-right: 10px;
    }

p.read-only-label {
    color: #666666;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.form-section #creditCardInfo {
    margin: 15px auto;
    padding: 20px 15px;
    display: inline-block;
    width: 90%;
    background: #fdfdfd;
    border: #ddd 1px solid;
}

.form-section #creditCard {
    display: inline-block;
    margin: 13px 6px;
    width: 100%;
}

.form-section .use-card {
    position: absolute;
    top: 2px;
    right: 10px;
}


#subscriptionBillingNote {
    padding: 0 0 0 3px;
}

    #subscriptionBillingNote span {
        font-family: 'DM Sans', sans-serif;
        font-style: normal;
        color: #222222;
        font-size: 14px !important;
    }

/*-----------------------------------------------------------------------------------------------------*/
/*                                         REGISTER USER                                               */
/*-----------------------------------------------------------------------------------------------------*/
.dark-content-box.register-user p {
    margin: 15px 0;
}

.register-user span {
    display: inline-block;
    text-align: right;
    width: 180px;
}

.register-user input {
    margin: 5px;
    width: 180px;
}

#NewPasswordForm #SaveNewPassword {
    margin: 50px auto;
    width: 80%;
}


/*-----------------------------------------------------------------------------------------------------*/
/*                                        HELP                                               */
/*-----------------------------------------------------------------------------------------------------*/
.help-centered {
    margin: 10px auto 0;
    width: 600px;
}

#LiveAccessRedirect {
    float: right;
    font-size: 13px;
}

.remote-access-help-steps p {
    font-size: 15px;
}

.remote-access-help-steps ul {
    padding-left: 10px;
}

.remote-access-help-steps ol li {
    font-size: 16px;
    line-height: 13pt;
    margin-bottom: 6px;
    margin-top: 30px
}

.remote-access-help-steps ul li {
    color: #777777;
    font-size: 14px;
    line-height: 13pt;
    margin: 5px 5px 5px 10px;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                 Upgrade Software Edition                                            */
/*-----------------------------------------------------------------------------------------------------*/

.upgrade-software-editions-intro {
    background-color: #f0f0f0;
    border: 1px solid #d0d0d0;
    margin: 20px 20px 0 20px;
    padding: 15px 20px 20px 20px;
}

    .upgrade-software-editions-intro h2 {
        font-family: "Museo 300", Arial, Sans-Serif;
        font-size: 19pt;
        margin: 5px 0;
    }

    .upgrade-software-editions-intro h3 {
        font-family: "Museo 300", Arial, Sans-Serif;
        font-size: 12pt;
        margin: 0px 0;
    }

    .upgrade-software-editions-intro p {
        font-size: 10pt;
        margin: 20px 0;
    }

#upgradeSoftwareEdition h2 {
    width: 200px;
    font-size: 24px;
    display: inline;
    float: left;
    margin: 0 50px 0 70px;
}


.ui-dialog #upgradeSoftwareEdition {
    margin-left: 20px;
    margin-top: 10px
}

.ui-dialog #softwareEditionInfo {
    float: left;
    font-size: 13pt;
    margin: 0px 15px 0 35px;
    padding: 15px;
    width: 180px;
    display: inline;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                       Generic Advertisement                                         */
/*-----------------------------------------------------------------------------------------------------*/

.promo-header {
    font-family: "Museo 300", Serif;
}

h1.promo-header {
    font-size: 17pt;
    margin: 0;
    padding-bottom: 0;
}

h2.promo-header {
    font-size: 14pt;
    margin: 0 0 0 1px;
    padding-top: 0;
}

.promo {
    float: left;
    width: 388px;
    position: relative;
}

    .promo ul {
        float: left;
        font-size: 10pt;
        margin: 10px 0 6px 0;
        padding: 0 0 0 19px;
        text-indent: 0px;
        width: 170px;
    }

    .promo .promo-paragraph {
        font-size: 15px;
        margin: 0 0 5px 0;
    }

.promo-inner-container {
    position: relative;
}

.promo-image {
    position: absolute;
    right: 7px;
    top: 42px;
}

.promo-buttons {
    display: table-cell;
    height: 65px;
    text-align: center;
    vertical-align: bottom;
    width: 369px;
}

    .promo-buttons a {
        display: inline-block;
        font-size: 11pt;
        margin-left: 11px;
        margin-right: 11px;
        vertical-align: middle;
    }

        .promo-buttons a.upgrade-button-promo {
            padding: 5px;
            width: 120px;
        }

        .promo-buttons a.exit-promo {
            padding: 5px 0;
            width: 120px;
        }

/*-----------------------------------------------------------------------------------------------------*/
/*                                Online Booking Advertisement                                         */
/*-----------------------------------------------------------------------------------------------------*/

#OnlineBookingAd {
    float: left;
    width: 400px;
    position: relative;
}

    #OnlineBookingAd h1 {
        font-family: "Museo 300", Serif;
        font-size: 17pt;
        margin: 0 0 10px 0;
    }

    #OnlineBookingAd h2 {
        font-family: "Museo 300", Serif;
        font-size: 14pt;
    }

    #OnlineBookingAd ul {
        float: left;
        font-size: 10pt;
        margin: 10px 0 6px 0;
        padding: 0 0 0 19px;
        text-indent: 0px;
        width: 170px;
    }

    #OnlineBookingAd p {
        font-size: 15px;
        margin: 0 0 40px 0;
    }

    #OnlineBookingAd .promo-paragraph {
        font-size: 15px;
        margin: 0 0 5px 0;
    }

#OnlineBookingAdInnerContainer {
    position: relative;
}

#OnlineBookingPromoImage {
    position: absolute;
    right: 0px;
    top: 40px;
}

#OLBAdButtons {
    display: table-cell;
    height: 65px;
    text-align: center;
    vertical-align: bottom;
    width: 369px;
}

    #OLBAdButtons a {
        display: inline-block;
        font-size: 11pt;
        margin-left: 11px;
        margin-right: 11px;
        vertical-align: middle;
    }

        #OLBAdButtons a.initializeOLBCreation {
            padding: 5px;
            width: 120px;
        }

#exitOnlineBookingPromo {
    padding: 5px 0;
    width: 120px;
}

#OnlineBookingSignupComplete {
    margin-top: 5px;
    width: 165px;
}

#Main-Navigation-Online-Booking-Site .text {
    margin: 10px 0;
}

#onlineBookingDashboardButton {
    font-size: 11pt;
    margin: 5px auto;
    padding: 5px;
    width: 190px;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                Cloud E-mail Reminders Advertisement                                 */
/*-----------------------------------------------------------------------------------------------------*/
#RemindersPromoImage.marketing-promo {
    width: 98%;
}

#CloudNotificationsAd h1 {
    font-family: "Museo 300", Serif;
    font-size: 17pt;
    margin: 0 0 10px 0;
}

#CloudNotificationsAd h2 {
    font-family: "Museo 300", Serif;
    font-size: 14pt;
}

#CloudNotificationsAd ul {
    font-size: 10pt;
    margin: 10px 0 10px 0;
    padding: 0 0 0 35px;
    text-indent: 0px;
}

#CloudNotificationsAd p {
    font-size: 15px;
    margin: 0 0 40px 0;
}

#CloudNotificationsAd .promo-paragraph {
    float: none;
    font-size: 15px;
    margin: 0 0 3px 0;
}

#CloudNotificationsAd .promo-note {
    margin: 9px 0 0 0;
    padding-bottom: 0;
}

#CloudEmailNotificationsInnerContainer {
    position: relative;
}

#CloudNotificationsAd img {
    position: absolute;
    right: 0px;
    top: 40px;
}

#CloudNotificationsAd .promo-note.special-note {
    font-size: 12px;
    text-align: right;
}

#CloudEmailNotificationsInnerContainer #subscriptionBillingNote {
    padding: 10px 0 0 0px;
}

    #CloudEmailNotificationsInnerContainer #subscriptionBillingNote .note {
        border: none;
        background-color: inherit;
        padding: 5px;
        text-align: left;
        width: auto;
        color: #222222;
        margin: auto;
        position: inherit;
        display: inline-block;
    }

#subscriptionBillingNote .note span {
    display: inline-block;
}


/*-----------------------------------------------------------------------------------------------------*/
/*                                          Promotional Messages                                       */
/*-----------------------------------------------------------------------------------------------------*/

.upgrade-to-cloud-premium-form-intro {
    background-color: #f0f0f0;
    border: 1px solid #d0d0d0;
    margin: 20px 20px 0 20px;
    padding: 20px 20px 30px 20px;
    width: 716px
}

    .upgrade-to-cloud-premium-form-intro h2 {
        font-family: "Museo 300", Arial, Sans-Serif;
        font-size: 22pt;
        margin: 10px 0;
    }

    .upgrade-to-cloud-premium-form-intro h3 {
        font-family: "Museo 300", Arial, Sans-Serif;
        font-size: 14pt;
        margin: 10px 0;
    }

    .upgrade-to-cloud-premium-form-intro p {
        font-size: 10pt;
        margin: 20px 0;
    }

.upgrade-feature-list {
    color: #555;
    font-size: 11pt;
}

.upgrade-after-30 {
    color: #444;
    font-family: "Museo 300", Arial, Sans-Serif;
    font-size: 16pt;
    margin: 30px 0 0 25px !important;
}

.upgrade-to-cloud-premium-features {
    margin: 0px 20px 20px 20px;
    padding: 10px;
}

/* Appointment Reminders Promo Popup for Trial Users*/
.complete-your-signup-form-intro {
    padding: 20px 30px 10px;
}

    .complete-your-signup-form-intro .right-section {
        width: 480px;
        float: right;
    }

    .complete-your-signup-form-intro h2 {
        font-family: "Museo 300", Arial, Sans-Serif;
        font-size: 22pt;
        margin: 10px 0;
    }

    .complete-your-signup-form-intro h3 {
        font-size: 1.1em;
    }

    .complete-your-signup-form-intro p {
        font-size: 11pt;
        line-height: 16pt;
        margin: 20px 0;
        text-align: center;
    }

    .complete-your-signup-form-intro ul {
        font-size: 11pt;
        margin-top: 18px;
        width: 410px;
    }

    .complete-your-signup-form-intro img {
        display: block;
        margin: 10px auto;
        width: 90%;
    }

    .complete-your-signup-form-intro .center {
        text-align: center;
    }

.upgrade-feature-title {
    color: #444;
    font-family: "Museo 500", "Georgia", Serif !important;
    font-size: 12pt !important;
    margin: 0px 0 20px 0 !important;
    padding: 0px;
    text-align: center;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                     CREDIT CARD PROCESSING                                          */
/*-----------------------------------------------------------------------------------------------------*/
#CreditCardAdvertisement .promo-buttons {
    width: 384px;
}

    #CreditCardAdvertisement .promo-buttons a {
        min-width: 120px;
        padding: 10px;
    }

.credit-card-form-input {
    height: 30px;
    width: 100%;
    border-radius: 4px;
    border-color: #656565;
}

.credit-card-billing-info-section {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

    .credit-card-billing-info-section .form-label {
        font-size: 14px;
        font-family: "DM Sans", sans-serif;
        font-style: normal;
        letter-spacing: 0.5px;
        margin: 25px 0 0;
        padding: 0;
        color: #656565;
    }

    .credit-card-billing-info-section .credit-card-form-input {
        font-size: 12px;
        letter-spacing: 0.5px;
        color: #656565;
        font-family: "DM Sans", sans-serif;
        font-style: normal;
    }

.credit-card-settings-dialog {
    width: 445px;
    max-width: 650px;
}

#credit-card-settings {
    padding: 20px;
}

#credit-card-ad-half {
    float: left;
    width: 340px;
}

    #credit-card-ad-half h1 {
        font-family: "Museo 300", Serif;
        font-size: 17pt;
    }

    #credit-card-ad-half h2 {
        font-family: "Museo 300", Serif;
        font-size: 14pt;
    }

    #credit-card-ad-half ul {
        float: left;
        font-size: 10pt;
        margin: 15px 0 19px 19px;
        padding: 0;
        text-indent: 0px;
        width: 151px;
    }

#credit-card-ad-image {
    position: absolute;
    right: 0px;
    top: 90px;
    width: 310px;
}

#divCreditCardOptions #credit-card-ad-image-cardconnect {
    position: absolute;
    right: 0px;
    top: 70px;
    left: initial;
    width: 310px;
    padding: 18px;
}

#credit-card-ad-image-cardconnect {
    position: absolute;
    left: 325px;
    top: 70px;
    width: 310px;
    padding: 18px;
}

.credit-card-phone-number {
    margin: 20px 0 0 0 !important;
}

#credit-card-options {
    position: relative;
}

.credit-card-text {
    height: 50px !important;
    width: 184px !important;
}

#credit-card-settings-form {
    float: left;
    width: 250px;
}

    #credit-card-settings-form p {
        margin: 0;
    }

    #credit-card-settings-form .divFormItem .k-dropdown {
        width: 191px !important;
    }

#remote-access-credit-card-note {
    float: right;
    background: #fefefe;
    border: 1px solid #ccc;
    width: 217px;
    padding: 10px;
}

    #remote-access-credit-card-note p {
        font-size: 9pt;
        margin: 0px;
    }

#credit-card-settings-form .pFormLabel {
    width: 110px;
}

#credit-card-settings-form input {
    width: 184px;
}

#disable-credit-card-processing {
    float: left;
    margin-right: 20px;
}

#save-credit-card-settings {
    float: left;
}

#exit-credit-card-promo {
    display: none;
}

#XwebMerchantPortalButton,
#CardConnectMerchantPortalButton {
    margin: -10px 0 20px 0;
    font-family: 'PT Sans', Arial, sans-serif;
}

#credit-card-settings .switch-container {
    padding: 4px 0 9px 50px;
    white-space: nowrap;
}

    #credit-card-settings .switch-container .icon-image {
        font-size: 14px;
        padding-left: 3px;
    }

#credit-card-settings-form .divFormItem label {
    vertical-align: middle;
}

/*Overrides for when it's displayed in the dialog */
.ui-dialog #credit-card-ad-image {
    top: 55px;
}

.ui-dialog #enter-credit-card-settings {
    display: none;
}

.ui-dialog #exit-credit-card-promo {
    display: inline-block;
}

.ui-dialog #CreditCardAdvertisement ul {
    margin-top: 20px;
    margin-bottom: 28px;
}

.ui-dialog #CreditCardAdvertisement .promo-buttons {
    width: 565px;
}

    .ui-dialog #CreditCardAdvertisement .promo-buttons a {
        padding-top: 5px;
        padding-bottom: 5px;
    }

.ui-dialog #CreditCardAdvertisement.card-connect-ad .promo-buttons {
    width: 370px;
}
/*Settings for the cloud lite ad*/
.ui-dialog #credit-card-ad-image.cloud-lite {
    top: 40px;
    width: 360px;
}

h1.credit-card-ad-lite {
    font-family: "Museo 300", Serif;
    font-size: 17pt;
}

h2.credit-card-ad-lite {
    font-family: "Museo 300", Serif;
    font-size: 15pt;
    padding: 0px 5px;
    margin-bottom: 20px;
}

#credit-card-signup.cloud-lite {
    width: 160px
}




/*-----------------------------------------------------------------------------------------------------*/
/*                                            MESSAGE BANNER                                           */
/*-----------------------------------------------------------------------------------------------------*/
.applicationBody.warning-banner #divHeader {
    height: 97px;
    padding-bottom: 1px
}

.applicationBody.warning-banner #divSecondaryNavigation {
    top: 98px;
}

.applicationBody.warning-banner #OptionsNavigation {
    top: 60px;
}

.applicationBody.warning-banner .ModalItemsTableContainer {
    margin-top: 113px;
}

.applicationBody.warning-banner #divAppointmentBook {
    margin-top: 113px;
}

.applicationBody.warning-banner .main-settings-section {
    margin-top: 33px;
}

.applicationBody.warning-banner #divDashboard {
    margin-top: 113px
}

#OutageBanner {
    text-align: center;
    display: inline-block;
    font-family: "DM Sans", Arial, sans-serif;
    z-index: 6;
    top: 0;
    width: 100%;
    font-size: 14px;
    background-color: #F5B9B9;
    border-color: #BD3939;
    border-style: solid;
    border-width: 0px 0px 4px 0;
    height: 30px;
}

    #OutageBanner p {
        display: inline-block;
        margin-left: 17px;
        color: #5D0F0F;
    }

    #OutageBanner a {
        display: inline-block;
        height: 15px;
        margin: 4px 0 0 0;
        padding: 4px;
        text-decoration: underline;
        font-weight: bold;
        color: #540303;
    }

    #OutageBanner a:hover {
        text-decoration: none;
    }

#MessageBanner {
    text-align: center;
    display: inline-block;
    z-index: 6;
    top: 0;
    width: 100%;
}

    #MessageBanner p {
        display: inline-block;
        padding: 8px 0;
    }

    #MessageBanner a {
        display: inline-block;
        height: 15px;
        margin: 4px 0 0 10px;
        padding: 4px;
        width: 75px;
    }

#cloud-signup-banner {
    cursor: pointer;
    cursor: pointer;
    text-decoration: underline;
}

/* Message Banner Colors */
#MessageBanner.light-green {
    background-color: #D6F5B9;
    border-color: #7cbd39;
    border-style: solid;
    border-width: 0px 0px 4px 0;
    height: 34px;
}

    #MessageBanner.light-green p {
        color: #365D0F;
    }

    #MessageBanner.light-green a {
        font-weight: bolder;
        color: #2C5403;
    }

#MessageBanner.light-blue {
    background-color: #D1F2FA;
    border-color: #7DB2C0;
    border-style: solid;
    border-width: 0px 0px 4px 0;
    height: 34px;
}

    #MessageBanner.light-blue .button {
        background: #73BFD3;
        border: 1px solid #7DB2C0;
        color: #ffffff;
    }

        #MessageBanner.light-blue .button:hover {
            background: #6AC5DD;
            border: 1px solid #6DA4B3;
        }


/*NPS Survey*/
#MessageBanner .surveyCloseButton {
    background: #73BFD3;
    border: 1px solid #7DB2C0;
    color: #ffffff;
    float: right;
    height: auto;
    margin: 7px 20px 0 0;
    width: auto;
}

#MessageBanner .button.not-clickable {
    padding: 0px;
}

#MessageBanner .dismiss-icon {
    font-size: 8px;
    padding: 5px;
    text-align: center;
    vertical-align: bottom;
}

    #MessageBanner .dismiss-icon:hover {
        cursor: pointer;
    }

#MessageBanner #surveyFeedback {
    display: inline-block;
    font-size: 11.5px;
    height: 24px;
    margin-left: 10px;
    vertical-align: middle;
    width: 400px;
}

.rating {
    overflow: hidden;
    display: inline-block;
    font-size: 0;
    position: relative;
    cursor: pointer;
    margin-left: 8px;
    vertical-align: middle;
    margin-bottom: 4px;
}

.rating-input {
    float: right;
    height: 16px;
    padding: 0;
    margin: 0 0 0 -16px;
    opacity: 0;
    width: 16px;
}

    .rating:hover .rating-star:hover,
    .rating:hover .rating-star:hover ~ .rating-star,
    .rating-input:checked ~ .rating-star {
        color: #37ABCA;
    }

.rating-star,
.rating:hover .rating-star {
    color: #b0b0b0;
    cursor: pointer;
    display: block;
    float: right;
    font-size: 16px;
    height: 16px;
    position: relative;
    width: 16px;
}

#MessageBanner .k-notification {
    display: inline !important;
    margin: -32px 0 0 240px;
    padding: 5px;
    position: absolute;
    z-index: 1000;
}

#MessageBanner.comment .k-notification {
    margin: -32px 0 0 320px;
}

#MessageBanner .k-notification.k-notification-error {
    background-color: #FFFEC4;
    color: #6E6E6E;
    border-color: #C7C8A7;
}

/*winform banner*/
#MessageBanner #winform-signup-banner {
    width: initial;
    text-decoration: underline;
    cursor: pointer
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                            Messaging                                                */
/*-----------------------------------------------------------------------------------------------------*/
#avpw_controls {
    z-index: 10010 !important;
}

.divModifyFormSection .modify-header {
    color: #555;
    position: relative;
    font-family: "Museo 300";
    font-size: 20px;
    text-shadow: 1px 1px 2px rgba(0,0,0, 0.2);
}

#messageModifyForm .divModifyFormSection {
    width: 610px
}

    #messageModifyForm .divModifyFormSection.text-preview-section {
        width: 450px;
        margin: 10px auto 20px;
        float: none;
    }

#messageModifyForm {
    margin: 5px 0 0 0;
}

    #messageModifyForm .message-subject {
        width: 99%;
    }

    #messageModifyForm .k-editor {
        height: 340px;
    }

    #messageModifyForm .k-editor-toolbar li.k-tool-group:last-child {
        background: #e5e5e5;
        border-color: #d0d0d0;
        border-width: 1px 0;
        border-style: solid;
        text-align: right;
        width: 100%;
        display: inline-block;
    }

        #messageModifyForm .k-editor-toolbar li.k-tool-group:last-child .k-widget {
            text-align: left;
        }

a.dialog-placeholder-button {
    font-size: 10pt;
    text-decoration: none;
}

a.help-icon, a.help-icon.icon {
    color: #787878;
    margin: 0 5px 0 0;
    text-decoration: none;
    cursor: pointer;
}

#messageModifyForm .k-editor-toolbar a span.icon {
    display: inline-block;
    margin-top: 5px;
    vertical-align: middle;
}

#messageModifyForm table.k-editor {
    width: 100%;
    height: 340px;
    table-layout: fixed;
    border-style: solid;
    border-width: 1px;
    border-collapse: separate;
    border-spacing: 4px;
    font-size: 100%;
    vertical-align: top;
    background-color: #FFFFFF;
}

#messageModifyForm.sms-reply table.k-editor {
    border-style: none;
    border-spacing: 0;
}

#messageModifyForm.insertItemsDisabled #toNumberLabel {
    padding-top: 1px;
}

#messageModifyForm.insertItemsDisabled .modify-header {
    font-size: 14px;
}

#messageModifyForm.insertItemsDisabled .text-modify-section {
    margin-top: 7px;
}

    #messageModifyForm.insertItemsDisabled .text-modify-section td.k-editable-area {
        border-style: none;
        padding: 3px 6px;
    }

    #messageModifyForm.insertItemsDisabled .text-modify-section .modify-header {
        padding-left: 0;
    }

#messageModifyForm:not(.insertItemsDisabled) .text-modify-section h3 {
    display: none;
}

#messageModifyForm .text-modify-section {
    margin: 15px 5px 5px;
}

    #messageModifyForm .text-modify-section td.k-editable-area {
        padding: 10px 8px;
    }

    #messageModifyForm .text-modify-section table.k-editor {
        height: auto;
    }

        #messageModifyForm .text-modify-section table.k-editor iframe {
            height: 120px;
        }

#messageModifyForm .k-button-group .k-tool {
    border-style: solid;
    border-width: 1px;
    margin-right: -1px;
    padding: 2px;
}

#messageModifyForm .k-editor-toolbar-wrap .k-editor-widget {
    max-width: 140px;
}

#messageModifyForm .note {
    font-size: 14px;
    margin: 6px 0 0 15px;
    padding: 0 10px;
    text-align: right;
    line-height: 18px;
}

.k-imagebrowser .icon {
    color: #444;
    margin: 0 5px 0 0;
    font-size: 100%;
}

.k-imagebrowser .icon2-search {
    font-size: 16px;
}

.k-imagebrowser .k-breadcrumbs {
    display: none;
}

.k-edit-form-container .k-edit-buttons {
    border-style: none !important;
}

.k-imagebrowser .k-tile .k-thumb .k-image {
    width: 80px;
    height: auto;
}

.k-imagebrowser input:hover {
    border: 0 solid #aaa
}

.k-window-titlebar .k-window-actions .k-window-action .k-icon {
    background-image: none;
    font-size: 10px;
    letter-spacing: 5px;
    opacity: 1;
    text-indent: 0px;
    padding: 3px;
}

.k-imagebrowser .k-link:link, .k-link:visited {
    font-size: 100%;
    line-height: 2em;
}

.k-window-titlebar .k-window-actions .k-window-action {
    border: 1px solid #D3D3D3 /*{borderColorDefault}*/;
    background: #F7F7F7;
    overflow: hidden;
    font-weight: normal /*{fwDefault}*/;
    color: #555 /*{fcDefault}*/;
    opacity: 1;
    padding: 0px;
    margin: 0;
}

.k-window-titlebar .k-window-actions {
    padding-top: 0.5em !important;
}

.k-window-title {
    color: #ffffff;
    font-weight: normal;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Museo 300", Georgia, Serif;
    font-size: 19px;
    overflow: visible;
    height: 100%;
}

.k-window .k-window-titlebar, .k-window-titlebar {
    background: url("/Content/images_jqueryui/ui-bg_highlight-soft_75_404040_1x100.png") repeat-x scroll 50% 50% #222;
    border: none;
    padding: 0.6em 1px;
    margin-left: -1px;
    margin-top: -40px !important;
}

.k-imagebrowser .k-search {
    text-decoration: none;
}

.emailPlaceholderDropDown span {
    font-size: 90% !important;
}

#emailBody {
    width: 100%;
    height: 500px;
    border-color: #d0d0d0;
    border-width: 1px;
    border-style: solid;
    background: white;
    margin-top: 8px;
}

#textPreviewBody {
    width: auto;
    height: 130px;
    background-color: #fcfcfc;
    border-color: #c9c9c9;
    border-width: 1px;
    border-style: solid;
    margin-top: 14px;
    margin-bottom: 16px;
    padding: 5px;
    overflow-y: auto;
}

#testEmailSettings {
    height: 70px
}

    #testEmailSettings p {
        font-size: 16px;
        padding-left: 0px;
    }

.dialog-placeholding-text {
    color: #323232;
    font-size: 10pt;
    margin-right: 4px;
}

.dialog-button-left {
    float: left !important;
}

#enableTextReminders h2 {
    font-family: "Museo 300", Verdana, san-serif;
    font-size: 24px;
    padding: 10px 0 14px 0;
}

#enableTextReminders p {
    font-size: 15px;
    margin: 0 0 5px 0;
}

.confirm-note {
    padding: 15px 0 0 10px;
}

.reminder-section.vertical-divider {
    height: 200px !important;
}

.reminder-message-settings {
    float: left;
    width: 39%;
    text-align: center;
    padding: 5px 50px;
}

    .reminder-message-settings .target-section {
        width: 100%;
        padding: 0;
    }


/* --------------------------------------------------------------*/
/*                  Business Hours                               */
/* --------------------------------------------------------------*/
#divBusinessHours #BusinessHoursContainer,
#divBusinessHours .description {
    width: 45%;
}

#BusinessHours tr {
    height: 50px;
}

#BusinessHoursContainer .k-grid-content {
    overflow: auto;
}

#BusinessHoursContainer .settings-table {
    padding: 0px;
    margin: 0px;
}

    #BusinessHoursContainer .settings-table td {
        padding: .4em .6em;
    }

#BusinessHoursContainer .k-timepicker {
    width: 100%;
}

#saveBusinessHours {
    margin: -10px 15px 0 0 !important;
}

#BusinessHoursContainer {
    border: 1px solid #E2E2E2;
    margin: 10px 0 0 0;
}

    #BusinessHoursContainer .settings-table {
        height: 350px;
    }

    #BusinessHoursContainer .k-timepicker {
        background-color: transparent;
    }


/*-----------------------------------------------------------------------------------------------------*/
/*                                          Color Palette                                              */
/*-----------------------------------------------------------------------------------------------------*/
#colorPalette {
    background-color: transparent;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                     Subscription Activated                                          */
/*-----------------------------------------------------------------------------------------------------*/
#subscriptionActivated {
    max-width: 500px;
    min-width: 300px;
    padding: 20px;
    text-align: center;
}

    #subscriptionActivated span {
        display: inline-block;
        vertical-align: middle;
    }

    #subscriptionActivated .icon-image:before {
        color: #97D449;
        font-size: 48px;
        margin-right: 5px;
        vertical-align: middle;
    }

    #subscriptionActivated span.note {
        font-size: 16px;
    }

/* Setup Wizard */
.setup-wizard {
    margin: 0;
}

    .setup-wizard h1 {
        font-size: 18px;
        text-align: center;
    }

    .setup-wizard h2 {
        text-decoration: underline;
    }

    .setup-wizard #welcome,
    .setup-wizard #complete {
        margin: 20px;
    }

        .setup-wizard #welcome p,
        .setup-wizard #complete p {
            padding: 0px;
        }

        .setup-wizard #welcome .buttons,
        .setup-wizard #complete .buttons {
            width: 45%;
            font-size: 16px;
            margin: 25px auto;
            text-align: center;
        }

        .setup-wizard #welcome .colorLink {
            font-size: 14px;
        }

    .setup-wizard .divButtonStrip {
        position: relative;
    }

        .setup-wizard .divButtonStrip a {
            margin: 10px;
        }

        .setup-wizard .divButtonStrip #cmdSkipStep {
            margin: 15px 10px;
        }

    .setup-wizard .horizontal-divider {
        margin: 10px 20px;
    }

    .setup-wizard #employeeSetup .horizontal-divider {
        margin: 10px 0;
    }

    .setup-wizard #stepView {
        margin: 20px;
    }

#stepNumbers {
    text-align: center;
}

    #stepNumbers ul {
        padding: 0;
    }

    #stepNumbers li {
        display: inline-block;
        list-style: none;
    }

    #stepNumbers .step-number {
        background-color: #F5F5F5;
        border: solid 1px #787878;
        margin: 5px;
        opacity: 1;
        border-radius: 50%;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        height: 35px;
        width: 35px;
        cursor: default;
    }

        #stepNumbers .step-number span {
            color: #787878;
            font-size: 16px;
            font-style: normal;
            font-weight: normal;
            text-align: center;
            display: block;
            line-height: 39px;
        }

    #stepNumbers .divider {
        color: #787878;
        font-size: 7px;
        cursor: default;
    }

/* Default Services Wizard */
#DefaultServices {
    border-color: #ccc;
    border-style: solid;
    border-width: 0 1px 1px;
    height: 414px;
    margin-top: -20px;
    overflow-y: auto;
}

    #DefaultServices > div:not(:last-of-type) {
        border-bottom: 1px solid #ccc;
    }

    #DefaultServices .defaultServiceCategory {
        cursor: pointer;
        padding: 0 10px;
    }

    #DefaultServices .defaultServiceCategory-InnerContainer {
        font-size: 16px;
        height: 56px;
    }

        #DefaultServices .defaultServiceCategory-InnerContainer > span,
        #DefaultServices .defaultServiceCategory-InnerContainer > span:before {
            height: 100%;
        }

            #DefaultServices .defaultServiceCategory-InnerContainer > span:before {
                content: "";
            }

            #DefaultServices .defaultServiceCategory-InnerContainer > span:before,
            #DefaultServices .defaultServiceCategory-InnerContainer > span > * {
                display: inline-block;
                vertical-align: middle;
            }

        #DefaultServices .defaultServiceCategory-InnerContainer .custom-checkbox {
            padding-right: 8px;
        }

        #DefaultServices .defaultServiceCategory-InnerContainer label {
            padding-top: 4px;
        }

        #DefaultServices .defaultServiceCategory-InnerContainer .icon-image::before {
            font-size: 24px;
            font-weight: bold;
        }

    #DefaultServices .defaultService * {
        cursor: default;
    }

    #DefaultServices .defaultService .left {
        padding-right: 12px;
    }

    #DefaultServices .defaultService .custom-checkbox-container {
        height: 56px;
        padding-left: 24px;
    }

    #DefaultServices .custom-checkbox-container, #DefaultServices .displayName {
        padding-top: 10px;
    }

    #DefaultServices .custom-checkbox-container {
        padding-top: 0;
    }

        #DefaultServices .custom-checkbox-container:before {
            content: "";
            height: 100%;
        }

        #DefaultServices .custom-checkbox-container:before,
        #DefaultServices .defaultService .custom-checkbox {
            display: inline-block;
            vertical-align: middle;
        }

/* Taxes Wizard */
#TaxesWizard h2 {
    padding-bottom: 0;
}

#TaxesWizard .taxTypeOption label span span {
    display: block;
}

#TaxesWizard .taxTypeOption > div {
    width: 58px;
}

#TaxesWizard .taxTypeOption {
    padding-top: 8px;
}

#TaxesWizard .divFormItem {
    width: 285px;
}

    #TaxesWizard .divFormItem * {
        float: left;
    }

    #TaxesWizard .divFormItem input:not(.custom-checkbox) {
        width: 120px;
    }

    #TaxesWizard .divFormItem .custom-checkbox {
        float: right;
    }

#TaxesWizard #TaxRatesOuterContainer {
    margin-top: 20px;
}

#TaxesWizard #TaxRates {
    border: 1px solid #ccc;
    overflow-y: auto;
    margin: 10px auto;
    background-color: #f7f7f7;
}

    #TaxesWizard #TaxRates > div {
        border-bottom: 1px solid #ccc;
        padding: 7px 0 13px 0;
    }

        #TaxesWizard #TaxRates > div:last-child {
            border-bottom-style: none;
        }

#TaxesWizard .percent {
    padding-top: 6px;
}

#TaxesWizard #addAnotherTax {
    text-align: center;
    width: 100%;
}

    #TaxesWizard #addAnotherTax .button {
        margin-bottom: 0;
        margin-top: 16px;
        width: 50%;
    }

#TaxesWizard .removeTax {
    margin-top: 20px;
    width: 55px;
}

#TaxesWizard .pFormInfoStatic {
    width: auto;
}

/* Employees Wizard */
#employeeSetup .divFormItem {
    display: inline-block;
    margin: 0;
}

    #employeeSetup .divFormItem .divFormEditable {
        margin: 0 5px;
    }

    #employeeSetup .divFormItem .half input {
        width: 136px;
    }

#employeeSetup #eEmailAddress input {
    width: 290px;
}

#employeeSetup .pFormInfoStatic {
    padding: 7px 0 0 3px;
}

#employeeSetup .new-employee {
    margin: 5px;
}

#employeeSetup .smallButtonColor {
    width: 50%;
    margin: 10px auto;
}

#employeeSetup .info {
    display: inline-block;
    width: 93%;
}

#employeeSetup .delete {
    cursor: pointer;
    color: #B86969;
    vertical-align: middle;
    display: inline-block;
    position: absolute;
    top: 20px;
    padding: 3px 2px 3px 4px;
    border: 1px solid #f9f9f9;
    border-radius: 3px 3px 3px 3px;
    height: 18px;
    width: 18px;
}

    #employeeSetup .delete:hover {
        border: 1px solid #ccc;
        background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.85), rgba(247, 247, 247, 0.85)) repeat scroll 0 0 transparent;
        background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.85), rgba(247, 247, 247, 0.85));
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D8FFFFFF', endColorstr='#D8F7F7F7');
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.85)), to(rgba(247, 247, 247, 0.85)));
        background-image: -o-linear-gradient(rgba(255, 255, 255, 0.85),rgba(247, 247, 247, 0.85));
    }

#employeeSetup #currentUsers .new-employee {
    background-color: #f9f9f9;
    border: 1px solid #c6c6c6;
    position: relative;
    padding: 5px;
}

#employeeSetup #employeeList {
    max-height: 90px;
    overflow-y: auto;
}

#employeeSetup .admin-icon {
    margin: 0 5px;
}

.setup-wizard #complete .icon-image {
    color: #97D449;
    text-align: center;
    display: block;
    font-size: 40px;
    margin: 10px;
}

/*-----------------------------------------------------*/
/*         Responsive  Rules for Navigation            */
/*-----------------------------------------------------*/
@media (max-width: 1100px) {
    #divHeader ul.main-navigation li a .text,
    #moreMenuItem span.text {
        font-size: 9pt;
        text-transform: lowercase;
    }

    #divHeader ul.main-navigation li a {
        width: 55px;
    }

    #divHeader .navigation-container li a .icon {
        font-size: 31px;
    }

    #divHeader .navigation-toggle {
        margin: 0px;
    }
}

@media (max-width: 910px) {
    #divHeader ul.main-navigation li a .text,
    #moreMenuItem span.text {
        display: none;
    }

    #moreMenuItem span.icon {
        font-size: 16px;
        line-height: 58px;
    }

    #divHeader ul.main-navigation li a {
        width: 45px;
    }

    #divHeader ul.main-navigation li .Membership {
        width: 45px;
    }

    #divHeader .navigation-container li a .icon {
        font-size: 27px;
        margin-top: 15px;
    }

    #divHeader #pendingCountBadge {
        font-size: 8pt;
        border-radius: 7px;
        height: 14px;
        width: 14px;
        line-height: 14px;
        top: 8px;
        right: 22px;
    }
}

@media (max-device-width: 480px) {

    /*login form*/
    #content-background {
        display: -webkit-inline-box;
    }

    #login-page-center {
        padding: 33px 0;
        display: block;
        height: auto;
        min-height: 350px;
        max-height: 800px;
        width: 100%
    }

    #footer-outline {
        width: 100%;
        display: block;
    }

    .login-page-box {
        width: 100%;
        border: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        -moz-box-shadow: nonw;
        background-color: #e2e2e2;
        color: #333 !important;
    }

    .login-page-logo {
        width: 70%;
    }

    .login-page-box-wide-content {
        padding: 20px 15px;
    }

        .login-page-box-wide-content .field-label {
            font-size: 14px;
            color: #333;
        }

        .login-page-box-wide-content input {
            width: 98%;
            font-size: 16px;
            border-radius: 4px;
        }

    .login-button {
        width: 93%;
        padding: 10px !important;
    }

    .account-button-section {
        display: block;
        margin: 20px auto;
        width: 59%;
    }

    .custom-checkbox.dark > input:active + .box {
        border-color: #aaa;
        background-color: #ddd;
    }

    .custom-checkbox.dark > .box {
        border: 1px solid #ccc;
        background-color: #fdfdfd;
    }

        .custom-checkbox.dark > .box > .tick {
            border-bottom: 2px solid #666;
            border-left: 2px solid #666;
        }

    .account-button-section a,
    .account-button-section a:active,
    #username-label,
    #loggedin-label {
        color: #333
    }
}

.email-input-font {
    font-family: 'DM Sans';
}

div.blockUI.blockMsg {
    background-color: #555556;
    border-radius: 5px;
    border: 1px solid #444445;
    color: #dddddd;
    /*left: 45%;*/
    margin: 0;
    /*Dev added*/
    opacity: 0.8 !important;
     /*Dev added*/
    padding: 30px;
    text-align: center;
    /*top: 35%;*/
     top: 50%; 
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);   /* IE 9 */
    -webkit-transform: translate(-50%, -50%);   /* Chrome, Safari, Opera */
}

div.blockUI.blockMsg h2 {
    color: #dddddd;
    font-family:"PT Sans", Verdana, sans-serif;
    font-size:19px; 
    font-style: normal;
    font-weight: normal;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top:10px;
    opacity: 0.7;
    text-align: center;
    text-decoration: none;
    text-transform: none;
}

div.blockUI.blockMsg h3 {
      width: 215px;
}

div.blockUI .spinner {
    animation: rotation 2s infinite linear;
    -webkit-animation: rotation 2s infinite linear;
    -moz-animation: rotation 2s infinite linear;
    font-size: 42px !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 42px;
    width: 71px;
    margin: 0 auto;
}

@keyframes rotation {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotation {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

.ball-pulse-sync>div,.ball-pulse>div{width:10px;height:10px;margin:2px;display:inline-block}.ball-pulse-sync>div,.ball-pulse>div,.ball-scale>div{background-color:#fff;border-radius:100%}@-webkit-keyframes scale{0%,80%{-webkit-transform:scale(1);transform:scale(1);opacity:1}45%{-webkit-transform:scale(.1);transform:scale(.1);opacity:.7}}@keyframes scale{0%,80%{-webkit-transform:scale(1);transform:scale(1);opacity:1}45%{-webkit-transform:scale(.1);transform:scale(.1);opacity:.7}}.ball-pulse>div:nth-child(1){-webkit-animation:scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08);animation:scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08)}.ball-pulse>div:nth-child(2){-webkit-animation:scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08);animation:scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08)}.ball-pulse>div:nth-child(3){-webkit-animation:scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08);animation:scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08)}.ball-pulse>div{-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes ball-pulse-sync{33%{-webkit-transform:translateY(10px);transform:translateY(10px)}66%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes ball-pulse-sync{33%{-webkit-transform:translateY(10px);transform:translateY(10px)}66%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.ball-pulse-sync>div:nth-child(1){-webkit-animation:ball-pulse-sync .6s -.14s infinite ease-in-out;animation:ball-pulse-sync .6s -.14s infinite ease-in-out}.ball-pulse-sync>div:nth-child(2){-webkit-animation:ball-pulse-sync .6s -.07s infinite ease-in-out;animation:ball-pulse-sync .6s -.07s infinite ease-in-out}.ball-pulse-sync>div:nth-child(3){-webkit-animation:ball-pulse-sync .6s 0s infinite ease-in-out;animation:ball-pulse-sync .6s 0s infinite ease-in-out}.ball-pulse-sync>div{-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes ball-scale{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@keyframes ball-scale{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.ball-scale>div{height:60px;width:60px;animation:ball-scale 1s 0s ease-in-out infinite}.ball-scale-random>div,.ball-scale>div{display:inline-block;margin:2px;-webkit-animation:ball-scale 1s 0s ease-in-out infinite}.ball-scale-random{width:37px;height:40px}.ball-scale-random>div{background-color:#fff;border-radius:100%;position:absolute;height:30px;width:30px;animation:ball-scale 1s 0s ease-in-out infinite}.ball-rotate>div,.ball-rotate>div:after,.ball-rotate>div:before{background-color:#fff;width:15px;height:15px;border-radius:100%}.ball-rotate,.ball-rotate>div{position:relative}.ball-scale-random>div:nth-child(1){margin-left:-7px;-webkit-animation:ball-scale 1s .2s ease-in-out infinite;animation:ball-scale 1s .2s ease-in-out infinite}.ball-scale-random>div:nth-child(3){margin-left:-2px;margin-top:9px;-webkit-animation:ball-scale 1s .5s ease-in-out infinite;animation:ball-scale 1s .5s ease-in-out infinite}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ball-rotate>div{margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both}.ball-rotate>div:first-child{-webkit-animation:rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite;animation:rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite}.ball-rotate>div:after,.ball-rotate>div:before{margin:2px;content:"";position:absolute;opacity:.8}.ball-rotate>div:before{top:0;left:-28px}.ball-rotate>div:after{top:0;left:25px}.ball-clip-rotate>div{border-radius:100%;margin:2px;border:2px solid #fff;border-bottom-color:transparent;height:25px;width:25px;background:0 0!important;display:inline-block;-webkit-animation:rotate .75s 0s linear infinite;animation:rotate .75s 0s linear infinite}@keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes scale{30%{-webkit-transform:scale(.3);transform:scale(.3)}100%{-webkit-transform:scale(1);transform:scale(1)}}.ball-clip-rotate-pulse{position:relative;-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}.ball-clip-rotate-pulse>div{-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;top:0;left:0;border-radius:100%}.ball-clip-rotate-pulse>div:first-child{background:#fff;height:16px;width:16px;top:7px;left:-7px;-webkit-animation:scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite}.ball-clip-rotate-pulse>div:last-child{position:absolute;width:30px;height:30px;left:-16px;top:-2px;background:0 0;border:2px solid;border-color:#fff transparent;-webkit-animation:rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;-webkit-animation-duration:1s;animation-duration:1s}@keyframes rotate{0%{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}50%{-webkit-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6)}100%{-webkit-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}}.ball-clip-rotate-multiple{position:relative}.ball-clip-rotate-multiple>div{position:absolute;left:-20px;top:-20px;border:2px solid #fff;border-bottom-color:transparent;border-top-color:transparent;border-radius:100%;height:35px;width:35px;-webkit-animation:rotate 1s 0s ease-in-out infinite;animation:rotate 1s 0s ease-in-out infinite}.ball-clip-rotate-multiple>div:last-child{display:inline-block;top:-10px;left:-10px;width:15px;height:15px;-webkit-animation-duration:.5s;animation-duration:.5s;border-color:#fff transparent;-webkit-animation-direction:reverse;animation-direction:reverse}@-webkit-keyframes ball-scale-ripple{0%{-webkit-transform:scale(.1);transform:scale(.1);opacity:1}70%{-webkit-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}@keyframes ball-scale-ripple{0%{-webkit-transform:scale(.1);transform:scale(.1);opacity:1}70%{-webkit-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}.ball-scale-ripple>div{height:50px;width:50px;border-radius:100%;border:2px solid #fff;-webkit-animation:ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);animation:ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8)}@-webkit-keyframes ball-scale-ripple-multiple{0%{-webkit-transform:scale(.1);transform:scale(.1);opacity:1}70%{-webkit-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}@keyframes ball-scale-ripple-multiple{0%{-webkit-transform:scale(.1);transform:scale(.1);opacity:1}70%{-webkit-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}.ball-scale-ripple-multiple{position:relative;-webkit-transform:translateY(-25px);-ms-transform:translateY(-25px);transform:translateY(-25px)}.ball-scale-ripple-multiple>div:nth-child(0){-webkit-animation-delay:-.8s;animation-delay:-.8s}.ball-scale-ripple-multiple>div:nth-child(1){-webkit-animation-delay:-.6s;animation-delay:-.6s}.ball-scale-ripple-multiple>div:nth-child(2){-webkit-animation-delay:-.4s;animation-delay:-.4s}.ball-scale-ripple-multiple>div:nth-child(3){-webkit-animation-delay:-.2s;animation-delay:-.2s}.ball-scale-ripple-multiple>div{position:absolute;top:-2px;left:-26px;width:50px;height:50px;border-radius:100%;border:2px solid #fff;-webkit-animation:ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8);animation:ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8)}@-webkit-keyframes ball-beat{50%{opacity:.2;-webkit-transform:scale(.75);transform:scale(.75)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes ball-beat{50%{opacity:.2;-webkit-transform:scale(.75);transform:scale(.75)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.ball-beat>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;display:inline-block;-webkit-animation:ball-beat .7s 0s infinite linear;animation:ball-beat .7s 0s infinite linear}.ball-beat>div:nth-child(2n-1){-webkit-animation-delay:-.35s!important;animation-delay:-.35s!important}@-webkit-keyframes ball-scale-multiple{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}5%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@keyframes ball-scale-multiple{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}5%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.ball-scale-multiple{position:relative;-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}.ball-scale-multiple>div:nth-child(2){-webkit-animation-delay:-.4s;animation-delay:-.4s}.ball-scale-multiple>div:nth-child(3){-webkit-animation-delay:-.2s;animation-delay:-.2s}.ball-scale-multiple>div{background-color:#fff;border-radius:100%;position:absolute;left:-30px;top:0;opacity:0;margin:0;width:60px;height:60px;-webkit-animation:ball-scale-multiple 1s 0s linear infinite;animation:ball-scale-multiple 1s 0s linear infinite}@-webkit-keyframes ball-triangle-path-1{33%{-webkit-transform:translate(25px,-50px);transform:translate(25px,-50px)}66%{-webkit-transform:translate(50px,0);transform:translate(50px,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ball-triangle-path-1{33%{-webkit-transform:translate(25px,-50px);transform:translate(25px,-50px)}66%{-webkit-transform:translate(50px,0);transform:translate(50px,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ball-triangle-path-2{33%{-webkit-transform:translate(25px,50px);transform:translate(25px,50px)}66%{-webkit-transform:translate(-25px,50px);transform:translate(-25px,50px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ball-triangle-path-2{33%{-webkit-transform:translate(25px,50px);transform:translate(25px,50px)}66%{-webkit-transform:translate(-25px,50px);transform:translate(-25px,50px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ball-triangle-path-3{33%{-webkit-transform:translate(-50px,0);transform:translate(-50px,0)}66%{-webkit-transform:translate(-25px,-50px);transform:translate(-25px,-50px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ball-triangle-path-3{33%{-webkit-transform:translate(-50px,0);transform:translate(-50px,0)}66%{-webkit-transform:translate(-25px,-50px);transform:translate(-25px,-50px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}.ball-triangle-path{position:relative;-webkit-transform:translate(-29.99px,-37.51px);-ms-transform:translate(-29.99px,-37.51px);transform:translate(-29.99px,-37.51px)}.ball-triangle-path>div:nth-child(1){-webkit-animation-name:ball-triangle-path-1;animation-name:ball-triangle-path-1;-webkit-animation-delay:0;animation-delay:0;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.ball-triangle-path>div:nth-child(2){-webkit-animation-name:ball-triangle-path-2;animation-name:ball-triangle-path-2;-webkit-animation-delay:0;animation-delay:0;animation-duration:2s;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.ball-triangle-path>div:nth-child(2),.ball-triangle-path>div:nth-child(3){-webkit-animation-duration:2s;-webkit-animation-timing-function:ease-in-out}.ball-triangle-path>div:nth-child(3){-webkit-animation-name:ball-triangle-path-3;animation-name:ball-triangle-path-3;animation-delay:0;animation-duration:2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.ball-pulse-rise>div,.ball-triangle-path>div:nth-child(3){-webkit-animation-delay:0;-webkit-animation-iteration-count:infinite}.ball-triangle-path>div{-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;width:10px;height:10px;border-radius:100%;border:1px solid #fff}.ball-grid-beat>div,.ball-pulse-rise>div{background-color:#fff;height:15px;border-radius:100%;margin:2px}.ball-triangle-path>div:nth-of-type(1){top:50px}.ball-triangle-path>div:nth-of-type(2){left:25px}.ball-triangle-path>div:nth-of-type(3){top:50px;left:50px}@-webkit-keyframes ball-pulse-rise-even{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}25%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}50%{-webkit-transform:scale(.4);transform:scale(.4)}75%{-webkit-transform:translateY(30px);transform:translateY(30px)}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:scale(1);transform:scale(1)}}@keyframes ball-pulse-rise-even{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}25%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}50%{-webkit-transform:scale(.4);transform:scale(.4)}75%{-webkit-transform:translateY(30px);transform:translateY(30px)}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes ball-pulse-rise-odd{0%{-webkit-transform:scale(.4);transform:scale(.4)}25%{-webkit-transform:translateY(30px);transform:translateY(30px)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:scale(.75);transform:scale(.75)}}@keyframes ball-pulse-rise-odd{0%{-webkit-transform:scale(.4);transform:scale(.4)}25%{-webkit-transform:translateY(30px);transform:translateY(30px)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:scale(.75);transform:scale(.75)}}.ball-pulse-rise>div{width:15px;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:cubic-bezier(.15,.46,.9,.6);animation-timing-function:cubic-bezier(.15,.46,.9,.6);animation-iteration-count:infinite;animation-delay:0}.ball-pulse-rise>div:nth-child(2n){-webkit-animation-name:ball-pulse-rise-even;animation-name:ball-pulse-rise-even}.ball-pulse-rise>div:nth-child(2n-1){-webkit-animation-name:ball-pulse-rise-odd;animation-name:ball-pulse-rise-odd}@-webkit-keyframes ball-grid-beat{50%{opacity:.7}100%{opacity:1}}@keyframes ball-grid-beat{50%{opacity:.7}100%{opacity:1}}.ball-grid-beat{width:57px}.ball-grid-beat>div:nth-child(1){-webkit-animation-delay:.21s;animation-delay:.21s;-webkit-animation-duration:.63s;animation-duration:.63s}.ball-grid-beat>div:nth-child(2){-webkit-animation-delay:-.08s;animation-delay:-.08s;-webkit-animation-duration:.94s;animation-duration:.94s}.ball-grid-beat>div:nth-child(3){-webkit-animation-delay:.59s;animation-delay:.59s;-webkit-animation-duration:1.37s;animation-duration:1.37s}.ball-grid-beat>div:nth-child(4){-webkit-animation-delay:.06s;animation-delay:.06s;-webkit-animation-duration:1.05s;animation-duration:1.05s}.ball-grid-beat>div:nth-child(5){-webkit-animation-delay:.65s;animation-delay:.65s;-webkit-animation-duration:1.59s;animation-duration:1.59s}.ball-grid-beat>div:nth-child(6){-webkit-animation-delay:.74s;animation-delay:.74s;-webkit-animation-duration:.75s;animation-duration:.75s}.ball-grid-beat>div:nth-child(7){-webkit-animation-delay:-.16s;animation-delay:-.16s;-webkit-animation-duration:1.45s;animation-duration:1.45s}.ball-grid-beat>div:nth-child(8){-webkit-animation-delay:.26s;animation-delay:.26s;-webkit-animation-duration:.73s;animation-duration:.73s}.ball-grid-beat>div:nth-child(9){-webkit-animation-delay:.38s;animation-delay:.38s;-webkit-animation-duration:.97s;animation-duration:.97s}.ball-grid-beat>div{width:15px;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:ball-grid-beat;animation-name:ball-grid-beat;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0}.ball-grid-beat>div,.ball-grid-pulse>div{display:inline-block;float:left;-webkit-animation-iteration-count:infinite}@-webkit-keyframes ball-grid-pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(.5);transform:scale(.5);opacity:.7}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes ball-grid-pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(.5);transform:scale(.5);opacity:.7}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.ball-grid-pulse{width:57px}.ball-grid-pulse>div,.ball-spin-fade-loader>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px}.ball-grid-pulse>div:nth-child(1){-webkit-animation-delay:-.16s;animation-delay:-.16s;-webkit-animation-duration:.71s;animation-duration:.71s}.ball-grid-pulse>div:nth-child(2){-webkit-animation-delay:-.13s;animation-delay:-.13s;-webkit-animation-duration:1.23s;animation-duration:1.23s}.ball-grid-pulse>div:nth-child(3){-webkit-animation-delay:.53s;animation-delay:.53s;-webkit-animation-duration:1.36s;animation-duration:1.36s}.ball-grid-pulse>div:nth-child(4){-webkit-animation-delay:.38s;animation-delay:.38s;-webkit-animation-duration:.79s;animation-duration:.79s}.ball-grid-pulse>div:nth-child(5){-webkit-animation-delay:.45s;animation-delay:.45s;-webkit-animation-duration:1.4s;animation-duration:1.4s}.ball-grid-pulse>div:nth-child(6){-webkit-animation-delay:.46s;animation-delay:.46s;-webkit-animation-duration:1.56s;animation-duration:1.56s}.ball-grid-pulse>div:nth-child(7){-webkit-animation-delay:-.07s;animation-delay:-.07s;-webkit-animation-duration:1.17s;animation-duration:1.17s}.ball-grid-pulse>div:nth-child(8){-webkit-animation-delay:.31s;animation-delay:.31s;-webkit-animation-duration:1.45s;animation-duration:1.45s}.ball-grid-pulse>div:nth-child(9){-webkit-animation-delay:.15s;animation-delay:.15s;-webkit-animation-duration:1.13s;animation-duration:1.13s}.ball-grid-pulse>div{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:ball-grid-pulse;animation-name:ball-grid-pulse;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0}@-webkit-keyframes ball-spin-fade-loader{50%{opacity:.3;-webkit-transform:scale(.4);transform:scale(.4)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes ball-spin-fade-loader{50%{opacity:.3;-webkit-transform:scale(.4);transform:scale(.4)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.ball-spin-fade-loader{position:relative;top:-10px;left:-10px}.ball-spin-fade-loader>div:nth-child(1){top:25px;left:0;-webkit-animation:ball-spin-fade-loader 1s -.96s infinite linear;animation:ball-spin-fade-loader 1s -.96s infinite linear}.ball-spin-fade-loader>div:nth-child(2){top:17.05px;left:17.05px;-webkit-animation:ball-spin-fade-loader 1s -.84s infinite linear;animation:ball-spin-fade-loader 1s -.84s infinite linear}.ball-spin-fade-loader>div:nth-child(3){top:0;left:25px;-webkit-animation:ball-spin-fade-loader 1s -.72s infinite linear;animation:ball-spin-fade-loader 1s -.72s infinite linear}.ball-spin-fade-loader>div:nth-child(4){top:-17.05px;left:17.05px;-webkit-animation:ball-spin-fade-loader 1s -.6s infinite linear;animation:ball-spin-fade-loader 1s -.6s infinite linear}.ball-spin-fade-loader>div:nth-child(5){top:-25px;left:0;-webkit-animation:ball-spin-fade-loader 1s -.48s infinite linear;animation:ball-spin-fade-loader 1s -.48s infinite linear}.ball-spin-fade-loader>div:nth-child(6){top:-17.05px;left:-17.05px;-webkit-animation:ball-spin-fade-loader 1s -.36s infinite linear;animation:ball-spin-fade-loader 1s -.36s infinite linear}.ball-spin-fade-loader>div:nth-child(7){top:0;left:-25px;-webkit-animation:ball-spin-fade-loader 1s -.24s infinite linear;animation:ball-spin-fade-loader 1s -.24s infinite linear}.ball-spin-fade-loader>div:nth-child(8){top:17.05px;left:-17.05px;-webkit-animation:ball-spin-fade-loader 1s -.12s infinite linear;animation:ball-spin-fade-loader 1s -.12s infinite linear}.ball-spin-fade-loader>div{-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute}@-webkit-keyframes ball-spin-loader{75%{opacity:.2}100%{opacity:1}}@keyframes ball-spin-loader{75%{opacity:.2}100%{opacity:1}}.ball-spin-loader{position:relative}.ball-spin-loader>span:nth-child(1){top:45px;left:0;-webkit-animation:ball-spin-loader 2s .9s infinite linear;animation:ball-spin-loader 2s .9s infinite linear}.ball-spin-loader>span:nth-child(2){top:30.68px;left:30.68px;-webkit-animation:ball-spin-loader 2s 1.8s infinite linear;animation:ball-spin-loader 2s 1.8s infinite linear}.ball-spin-loader>span:nth-child(3){top:0;left:45px;-webkit-animation:ball-spin-loader 2s 2.7s infinite linear;animation:ball-spin-loader 2s 2.7s infinite linear}.ball-spin-loader>span:nth-child(4){top:-30.68px;left:30.68px;-webkit-animation:ball-spin-loader 2s 3.6s infinite linear;animation:ball-spin-loader 2s 3.6s infinite linear}.ball-spin-loader>span:nth-child(5){top:-45px;left:0;-webkit-animation:ball-spin-loader 2s 4.5s infinite linear;animation:ball-spin-loader 2s 4.5s infinite linear}.ball-spin-loader>span:nth-child(6){top:-30.68px;left:-30.68px;-webkit-animation:ball-spin-loader 2s 5.4s infinite linear;animation:ball-spin-loader 2s 5.4s infinite linear}.ball-spin-loader>span:nth-child(7){top:0;left:-45px;-webkit-animation:ball-spin-loader 2s 6.3s infinite linear;animation:ball-spin-loader 2s 6.3s infinite linear}.ball-spin-loader>span:nth-child(8){top:30.68px;left:-30.68px;-webkit-animation:ball-spin-loader 2s 7.2s infinite linear;animation:ball-spin-loader 2s 7.2s infinite linear}.ball-spin-loader>div{-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;width:15px;height:15px;border-radius:100%;background:green}.ball-zig-zag-deflect>div,.ball-zig-zag>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px 2px 2px 15px;top:4px;left:-7px}@-webkit-keyframes ball-zig{33%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}66%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ball-zig{33%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}66%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ball-zag{33%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}66%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ball-zag{33%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}66%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}.ball-zig-zag{position:relative;-webkit-transform:translate(-15px,-15px);-ms-transform:translate(-15px,-15px);transform:translate(-15px,-15px)}.ball-zig-zag>div{-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute}.ball-zig-zag>div:first-child{-webkit-animation:ball-zig .7s 0s infinite linear;animation:ball-zig .7s 0s infinite linear}.ball-zig-zag>div:last-child{-webkit-animation:ball-zag .7s 0s infinite linear;animation:ball-zag .7s 0s infinite linear}@-webkit-keyframes ball-zig-deflect{17%,84%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}34%,67%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}100%,50%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ball-zig-deflect{17%,84%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}34%,67%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}100%,50%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ball-zag-deflect{17%,84%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}34%,67%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}100%,50%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ball-zag-deflect{17%,84%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}34%,67%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}100%,50%{-webkit-transform:translate(0,0);transform:translate(0,0)}}.ball-zig-zag-deflect{position:relative;-webkit-transform:translate(-15px,-15px);-ms-transform:translate(-15px,-15px);transform:translate(-15px,-15px)}.ball-zig-zag-deflect>div{-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute}.ball-zig-zag-deflect>div:first-child{-webkit-animation:ball-zig-deflect 1.5s 0s infinite linear;animation:ball-zig-deflect 1.5s 0s infinite linear}.ball-zig-zag-deflect>div:last-child{-webkit-animation:ball-zag-deflect 1.5s 0s infinite linear;animation:ball-zag-deflect 1.5s 0s infinite linear}@-webkit-keyframes line-scale{0%,100%{-webkit-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(.4);transform:scaley(.4)}}@keyframes line-scale{0%,100%{-webkit-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(.4);transform:scaley(.4)}}.line-scale>div:nth-child(1){-webkit-animation:line-scale 1s -.4s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s -.4s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(2){-webkit-animation:line-scale 1s -.3s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s -.3s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(3){-webkit-animation:line-scale 1s -.2s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s -.2s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(4){-webkit-animation:line-scale 1s -.1s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s -.1s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(5){-webkit-animation:line-scale 1s 0s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s 0s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div{animation-fill-mode:both;display:inline-block}.line-scale-party>div,.line-scale>div{background-color:#fff;border-radius:2px;margin:2px;width:4px;height:35px;-webkit-animation-fill-mode:both}@-webkit-keyframes line-scale-party{0%,100%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(.5);transform:scale(.5)}}@keyframes line-scale-party{0%,100%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(.5);transform:scale(.5)}}.line-scale-party>div:nth-child(1){-webkit-animation-delay:.8s;animation-delay:.8s;-webkit-animation-duration:.35s;animation-duration:.35s}.line-scale-party>div:nth-child(2){-webkit-animation-delay:.68s;animation-delay:.68s;-webkit-animation-duration:1.25s;animation-duration:1.25s}.line-scale-party>div:nth-child(3){-webkit-animation-delay:.44s;animation-delay:.44s;-webkit-animation-duration:.39s;animation-duration:.39s}.line-scale-party>div:nth-child(4){-webkit-animation-delay:.17s;animation-delay:.17s;-webkit-animation-duration:.8s;animation-duration:.8s}.line-scale-party>div{animation-fill-mode:both;display:inline-block;-webkit-animation-name:line-scale-party;animation-name:line-scale-party;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0}@-webkit-keyframes line-scale-pulse-out{0%,100%{-webkit-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(.4);transform:scaley(.4)}}@keyframes line-scale-pulse-out{0%,100%{-webkit-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(.4);transform:scaley(.4)}}.line-scale-pulse-out>div{background-color:#fff;width:4px;height:35px;border-radius:2px;margin:2px;display:inline-block;-webkit-animation:line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85,.25,.37,.85);animation:line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85,.25,.37,.85)}.line-scale-pulse-out>div:nth-child(2),.line-scale-pulse-out>div:nth-child(4){-webkit-animation-delay:-.4s!important;animation-delay:-.4s!important}.line-scale-pulse-out>div:nth-child(1),.line-scale-pulse-out>div:nth-child(5){-webkit-animation-delay:-.2s!important;animation-delay:-.2s!important}@-webkit-keyframes line-scale-pulse-out-rapid{0%,90%{-webkit-transform:scaley(1);transform:scaley(1)}80%{-webkit-transform:scaley(.3);transform:scaley(.3)}}@keyframes line-scale-pulse-out-rapid{0%,90%{-webkit-transform:scaley(1);transform:scaley(1)}80%{-webkit-transform:scaley(.3);transform:scaley(.3)}}.line-scale-pulse-out-rapid>div{background-color:#fff;width:4px;height:35px;border-radius:2px;margin:2px;display:inline-block;vertical-align:middle;-webkit-animation:line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78);animation:line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78)}.line-scale-pulse-out-rapid>div:nth-child(2),.line-scale-pulse-out-rapid>div:nth-child(4){-webkit-animation-delay:-.25s!important;animation-delay:-.25s!important}.line-scale-pulse-out-rapid>div:nth-child(1),.line-scale-pulse-out-rapid>div:nth-child(5){-webkit-animation-delay:0s!important;animation-delay:0s!important}@-webkit-keyframes line-spin-fade-loader{50%{opacity:.3}100%{opacity:1}}@keyframes line-spin-fade-loader{50%{opacity:.3}100%{opacity:1}}.line-spin-fade-loader{position:relative;top:-10px;left:-4px}.line-spin-fade-loader>div:nth-child(1){top:20px;left:0;-webkit-animation:line-spin-fade-loader 1.2s -.84s infinite ease-in-out;animation:line-spin-fade-loader 1.2s -.84s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(2){top:13.64px;left:13.64px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:line-spin-fade-loader 1.2s -.72s infinite ease-in-out;animation:line-spin-fade-loader 1.2s -.72s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(3){top:0;left:20px;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-webkit-animation:line-spin-fade-loader 1.2s -.6s infinite ease-in-out;animation:line-spin-fade-loader 1.2s -.6s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(4){top:-13.64px;left:13.64px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation:line-spin-fade-loader 1.2s -.48s infinite ease-in-out;animation:line-spin-fade-loader 1.2s -.48s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(5){top:-20px;left:0;-webkit-animation:line-spin-fade-loader 1.2s -.36s infinite ease-in-out;animation:line-spin-fade-loader 1.2s -.36s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(6){top:-13.64px;left:-13.64px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:line-spin-fade-loader 1.2s -.24s infinite ease-in-out;animation:line-spin-fade-loader 1.2s -.24s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(7){top:0;left:-20px;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-webkit-animation:line-spin-fade-loader 1.2s -.12s infinite ease-in-out;animation:line-spin-fade-loader 1.2s -.12s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(8){top:13.64px;left:-13.64px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation:line-spin-fade-loader 1.2s 0s infinite ease-in-out;animation:line-spin-fade-loader 1.2s 0s infinite ease-in-out}.line-spin-fade-loader>div{background-color:#fff;border-radius:2px;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;width:5px;height:15px}@-webkit-keyframes triangle-skew-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}@keyframes triangle-skew-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}.triangle-skew-spin>div{width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:20px solid #fff;-webkit-animation:triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite}@-webkit-keyframes square-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}@keyframes square-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}.square-spin>div{width:50px;height:50px;background:#fff;-webkit-animation:square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite}.pacman>div:first-of-type,.pacman>div:nth-child(2){width:0;height:0;border-right:25px solid transparent;border-top:25px solid #fff;border-left:25px solid #fff;border-bottom:25px solid #fff;border-radius:25px;position:relative;left:-30px}@-webkit-keyframes rotate_pacman_half_up{0%,100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}50%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate_pacman_half_up{0%,100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}50%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes rotate_pacman_half_down{0%,100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}50%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes rotate_pacman_half_down{0%,100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}50%{-webkit-transform:rotate(0);transform:rotate(0)}}@-webkit-keyframes pacman-balls{75%{opacity:.7}100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px)}}@keyframes pacman-balls{75%{opacity:.7}100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px)}}.pacman{position:relative}.pacman>div:nth-child(3){-webkit-animation:pacman-balls 1s -.66s infinite linear;animation:pacman-balls 1s -.66s infinite linear}.pacman>div:nth-child(4){-webkit-animation:pacman-balls 1s -.33s infinite linear;animation:pacman-balls 1s -.33s infinite linear}.pacman>div:nth-child(5){-webkit-animation:pacman-balls 1s 0s infinite linear;animation:pacman-balls 1s 0s infinite linear}.pacman>div:first-of-type{-webkit-animation:rotate_pacman_half_up .5s 0s infinite;animation:rotate_pacman_half_up .5s 0s infinite}.pacman>div:nth-child(2){-webkit-animation:rotate_pacman_half_down .5s 0s infinite;animation:rotate_pacman_half_down .5s 0s infinite;margin-top:-50px}.pacman>div:nth-child(3),.pacman>div:nth-child(4),.pacman>div:nth-child(5),.pacman>div:nth-child(6){background-color:#fff;border-radius:100%;margin:2px;width:10px;height:10px;position:absolute;-webkit-transform:translate(0,-6.25px);-ms-transform:translate(0,-6.25px);transform:translate(0,-6.25px);top:25px;left:70px}@-webkit-keyframes cube-transition{25%{-webkit-transform:translateX(50px) scale(.5) rotate(-90deg);transform:translateX(50px) scale(.5) rotate(-90deg)}50%{-webkit-transform:translate(50px,50px) rotate(-180deg);transform:translate(50px,50px) rotate(-180deg)}75%{-webkit-transform:translateY(50px) scale(.5) rotate(-270deg);transform:translateY(50px) scale(.5) rotate(-270deg)}100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}@keyframes cube-transition{25%{-webkit-transform:translateX(50px) scale(.5) rotate(-90deg);transform:translateX(50px) scale(.5) rotate(-90deg)}50%{-webkit-transform:translate(50px,50px) rotate(-180deg);transform:translate(50px,50px) rotate(-180deg)}75%{-webkit-transform:translateY(50px) scale(.5) rotate(-270deg);transform:translateY(50px) scale(.5) rotate(-270deg)}100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}.cube-transition{position:relative;-webkit-transform:translate(-25px,-25px);-ms-transform:translate(-25px,-25px);transform:translate(-25px,-25px)}.cube-transition>div{width:10px;height:10px;position:absolute;top:-5px;left:-5px;background-color:#fff;-webkit-animation:cube-transition 1.6s 0s infinite ease-in-out;animation:cube-transition 1.6s 0s infinite ease-in-out}.cube-transition>div:last-child{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes spin-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.semi-circle-spin{position:relative;width:35px;height:35px;overflow:hidden}.semi-circle-spin>div{position:absolute;border-width:0;border-radius:100%;-webkit-animation:spin-rotate .6s 0s infinite linear;animation:spin-rotate .6s 0s infinite linear;background-image:-webkit-linear-gradient(transparent 0,transparent 70%,#fff 30%,#fff 100%);background-image:linear-gradient(transparent 0,transparent 70%,#fff 30%,#fff 100%);width:100%;height:100%}