/*-----------------------------------------------------------------------------------------------------*/
/*                                       DEFAULT BASIC STYLES                                          */
/*-----------------------------------------------------------------------------------------------------*/


html {
    --site-background-color: #e2e2e2;
    background-color: var(--site-background-color);
    margin: 0;
    min-height: 100%;
    padding: 0;
}

body 
{ font-family: "PT Sans", Helvetica, Sans-Serif; height:100%; margin: 0; min-height:100%; padding: 0; }

    div, img, .button, table, input,
    body .cleanslate div, body .cleanslate img, body .cleanslate table, body .cleanslate input {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

header, footer, hgroup,
nav, section 
{ display: block; position:relative; }

.ui-widget-content li a {
     color: #333 !important;   
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    color: #333;
}

.k-list-container {
    color: #333 !important;
}

.main-wrapper iframe#client-auth-iframe {
    position: absolute;
    top: -1000px;
    left: -1000px;
    display: none;
    height: 0;
    width: 0;
}

img, iframe
{ max-width:100%; }

*:focus:not(input)
{ outline: none;  }

html body .left {
    float: left;
}
html body .right {
    float: right;
}

html body .half {
    width: 49%;
}

html body .clear-fix:after, html body .clear {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
.bold
{ font-weight:bold; }

h1, h2, h3,
h4, h5, h6, p,
.cleanslate h1, .cleanslate h2, .cleanslate h3,
.cleanslate h4, .cleanslate h5, .cleanslate h6, .cleanslate p {
    line-height: 1.3em;
    margin: 0;
    padding: 0;
    font-family: "PT Sans",Arial,Sans-Serif;
    color: #333;
}

a, .cleanslate a {
    display: inline-block;
}

.button
{ border-style:solid; cursor:pointer; display:inline-block; padding:4px; text-decoration:none; }

.button:hover, a:hover
{ opacity: 0.85; }

.button.cancel
{ color:#c44a2b; }
.button.cancel:hover
{ color:#cb2d05; }

.button.save
{ color:#93c354; }
.button.save:hover
{ color:#73c607; }

.hidden
{ display: none; }

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
    *zoom: 1;  
}

input:not([type=checkbox]),
body .cleanslate input:not([type=checkbox]),
body .cleanslate input[type=text],
textarea,
.cleanslate textarea {
    background-color: #fefefe;
    border: none;
    color: #333;
    font-family: "PT Sans", "Arial", sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    outline: 1px solid #cccccc;
    padding: 9px 8px;
    resize: none
}
    input:hover:not([type=checkbox]),
    body .cleanslate input:hover:not([type=checkbox]),
    body .cleanslate input[type=text]:hover,
    textarea:hover,
    body .cleanslate textarea:hover {
        background-color: #fff;
        outline: 1px solid #bbbbbb;
    }

    input:focus,
    body .cleanslate input:focus,
    body .cleanslate input[type=text]:focus,
    textarea:focus,
    body .cleanslate textarea:focus {
        background-color: #fff;
        outline: 1px solid #A2A2A2;
    }

.notification-setting-container input:hover                { outline:none;  }
.notification-setting-container input:focus                { outline:none;  }

.social-media.icon                  { font-size: 25px; }
.social-media.icon.google,
.social-media.icon.googleplus       { color:#dd4c39; }
.social-media.icon.facebook         { color:#4c66a4; }
.social-media.icon.pinterest        { color:#cb2128; }
.social-media.icon.twitter          { color:#33c6f4; }
.social-media.icon.youtube          { color:#cc181e; }
.social-media.icon.linkedin         { color:#2188bd; }
.social-media.icon.instagram        { color:#125688; }

.social-media.icon:hover            { opacity: 0.85; }

/*input box placeholder text*/
::-webkit-input-placeholder { color:#999999; }
::-moz-placeholder          { color:#999999; opacity:1; } /* firefox 19+ */
:-ms-input-placeholder      { color:#999999; } /* ie */
:-moz-placeholder      { color:#999999; opacity:1;}

.info-card-section p { -ms-word-wrap: break-word;   word-wrap: break-word;}

.icon2-spinner, .icon2-spinner2 {
    animation: rotation 2s infinite linear;
    -webkit-animation: rotation 2s infinite linear;
    -moz-animation: rotation 2s infinite linear;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*-----------------------------------------------------------------------------------------------------*/
/*                                  ui-design CORE STYLES                                             */
/*-----------------------------------------------------------------------------------------------------*/
.hideShowPassword-wrapper button.hideShowPassword-toggle {
    /*Important is needed because of cleanslate button styles so that we can use this anywhere.*/
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #555555 !important;
    cursor: pointer;
    font: 18px 'icomoon' !important;
    margin-right: 4px !important;
}
 
/*use this class with the p class to extract the font color*/
.p.theme-font-color {
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: left;
    text-decoration: none;
    text-transform: none;
}

.no-margin {
    margin: 0 !important;
}

.no-left-margin {
    margin-left: 0 !important;
}

/* override otherwise user-customized text styles*/
.ui-product p, .ui-product h1, .ui-product h2, .ui-product h3, .ui-product h4, .ui-product h5, .ui-product label, ui-product a 
{ color:#787878; font-family:"PT Sans", "Arial", Sans-Serif; font-weight:normal; text-transform:none; text-align:left; text-decoration:none; }

.ui-product h1
{ font-family:"Museo 300", "Georgia", Serif; font-size: 22px; }

.ui-product p
{ font-size:14px; }

.ui-product a
{ cursor:pointer; text-decoration:underline; }

.ui-product .button, .ui-design .button:visited
{ background:#f3f3f3; border:1px solid #c5c5c5; color:#707070; font-family:"PT Sans", "Arial", sans-serif; font-size:14px; padding:9px; text-align:center; text-decoration:none; }

.ui-product .button:hover
{ background:#f8f8f8; border:1px solid #aaaaaa; color:#606060;  }

.ui-product input[type="text"]:not(.k-input)
{ background:#fdfdfd; border:none; font-size:12.5px; letter-spacing:1px; padding:3px; }

.ui-product input[type="text"]:hover:not(.k-input), .ui-design input[type="text"]:focus:not(.k-input), textarea:hover:not(.k-input), textarea:focus:not(.k-input)
{ background:#ffffff; border:none; }

.ui-product input[type="text"].large
{ font-size:16px; }

.ui-product .content-wrapper
{ margin:0 auto; padding:20px; width:960px;  }

.generic-page.ui-product .content-wrapper
{ width:85%;  }

.generic-page.ui-product .content-wrapper.half
{ width:50%;  }

.ui-product.generic-page .header-strip 
{ width:auto; }

.ui-product .content-section
{ background:#f1f1f1; border:1px solid #e5e5e5; padding:30px; }

.custom-domain-note 
{margin: 15px auto;width: 572px;padding: 10px;background: #fbf7ce;border: 1px solid #e7d363;color: #8f7b0e; font-size:10pt;}


/* ----------- Overrides for Dialogs to match Product style ----------------- */
.ui-dialog.ui-product
{ background-image:none; background:#ffffff; border:1px solid #999999; padding:0px; margin:0px; }

.ui-dialog.ui-product .ui-dialog-titlebar
{ background-color:#303030; background-image:none; border-color:#222222; border-style:solid; border-width:1px; color: #eeeeee; margin:0px; padding:8px;  }

.ui-dialog.ui-product .ui-dialog-titlebar a
{ color: #222222 /*{fcHeader}*/; }

.ui-dialog.ui-product .ui-dialog-titlebar .ui-button:hover
{ background:#404040; }

.ui-dialog.ui-product .ui-dialog-title
{ color:#ffffff; font-family:"Museo 100", Georgia, Serif; text-decoration:none; text-transform:none; font-style:normal; font-weight:normal; font-size:0.9em; margin:0; text-align: left; } 

.ui-dialog.ui-product .ui-dialog-titlebar .ui-button.ui-dialog-titlebar-close  { padding:0px; font-size:12px; width:18px; height:18px; margin-top:-3px; position:relative; margin-top:inherit; float:right; left:0; border-style:none; background-color:transparent; }

.ui-dialog.ui-product .ui-dialog-titlebar .ui-button.ui-dialog-titlebar-close .ui-icon
{ background:#333; color:#ffffff; font-size:12px; margin-left:-8px; margin-top:-8px; position:absolute; line-height:17px; width:16px; height:16px; }

.ui-dialog.ui-product .ui-dialog-titlebar-close.ui-state-hover
{ background-color:#777777; }

.ui-dialog.ui-product .ui-dialog-content
{ color:#222222; font-size:15px; font-family:"PT Sans", Arial, sans-serif; padding:20px 20px 10px 20px; margin:0; text-align:left; text-decoration:none; text-transform:none; font-style:normal; font-weight:normal; }

.ui-dialog .ui-dialog-titlebar .ui-button.ui-dialog-titlebar-close
{ background-image:none; }

.ui-dialog.ui-product .ui-dialog-buttonpane button
{ padding:0px; }

.ui-dialog.ui-product .ui-dialog-buttonpane .ui-button-text-only
{ font-size:21px; font-weight:normal; }

/*.ui-dialog.ui-product .ui-dialog-buttonpane button.ui-state-hover
{ color:#ffffff;  border-width:1px; }*/

.ui-dialog.ui-product .ui-dialog-titlebar .ui-icon-closethick
{ font-size:12px; }





/*-----------------------------------------------------------------------------------------------------*/
/*                                  FLEXIBLE PRODUCT PAGES                                             */
/*-----------------------------------------------------------------------------------------------------*/
.ui-product.flexible .content-wrapper
{ margin:0 auto; padding:0px; width:100%; max-width:960px;  }

.ui-product.flexible .header-strip .content-wrapper
{ text-align:center; }

.ui-product.flexible .header-strip .content-wrapper #productLogo
{ float:none; }

/*-----------------------------------------------------------------------------------------------------*/
/*                                     PAGE ELEMENTS                                                   */
/*-----------------------------------------------------------------------------------------------------*/
.content-edit-menu, .section-edit-menu, .content-edit-mini-menu, .content-edit-style-menu, .icon-container, .logo-placeholder  
{ display:none; }

.blockUI h1
{ color:#787878; font-family:"PT Sans", Arial, Sans-Serif; font-weight:normal; text-transform:none; text-align: center; text-decoration:none; font-size: 28px; line-height: 40px;}

.blockUI-progress
{ background-color: #333; border-radius: 1px; height: 2px; left: -6px; position: fixed;  top: 0;  transition: width 500ms ease-out 0s, opacity 500ms linear 0s; 
  width: 0; z-index: 9999; }

.blockUI-progress.show
{ width:100%; }

#footer 
{  display: block !important; font-size: 100% !important; margin: 20px 0 5px 0 !important; padding: 5px !important; text-align: center !important;}

#footer .copyright, #footer a
{ font-size:12px; font-family:'Arial', sans-serif; color:#010101; margin: 0; padding: 0;  text-decoration: underline;  text-transform: none;   font-style: normal;font-weight: normal;}

#footer .copyright, #footer 
{ text-decoration: none;  font-size:12px; font-family:'Arial', sans-serif; color:#010101; margin: 0; padding: 0;  text-transform: none; font-style: normal;font-weight: normal; }

#footer a:hover
{ color:#050505; }

.button.red,
body .cleanslate input.button.red {
    background: #c44a2b;
    border: 1px solid #C44A2B;
    color: #ffffff;
}

    .button.red:hover,
    body .cleanslate input.button.red:hover {
        background: #cb2d05;
        color: #ffffff;
    }

.button.green,
body .cleanslate input.button.green,
.button.green:visited,
body .cleanslate input.button.green:visited {
    background: #7BB160;
    border: 1px solid #87bd6c;
    color: #ffffff;
    text-decoration: none;
}
    .button.green:active,
    .button.green:hover,
    body .cleanslate input.button.green:active,
    body .cleanslate input.button.green:hover {
        background: #99cd7f;
        color: #ffffff !important;
        text-decoration: none;
    }

a.green:not(.button),
a.green:not(.button):visited {
    color: #7BB160;
}
    a.green:not(.button):hover {
        color: #99cd7f;
    }

/* --------------------------------------*/
/*           Loading Dialogs             */
/* --------------------------------------*/

.loading-message		{ background:none; }
.loading-message p		{ color:#616763; font-size:17pt; font-family:"PT Sans", Arial, sans-serif; text-align:center; font-style: normal; font-weight: normal; text-decoration: none; text-transform: none;}
.loading-message img	{ border: medium none; }

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

.custom-checkbox, .cleanslate .custom-checkbox {
    position: relative;
    display: inline-block;
}
    .custom-checkbox > .box, .cleanslate .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, .cleanslate .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, .cleanslate .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, .cleanslate .custom-checkbox > input:active + .box {
        border-color: #aaa;
        background-color: #ddd;
    }
    ​ .custom-checkbox.checked > .box > .tick, .cleanslate .custom-checkbox.checked > .box > .tick {
        display: block;
    }
.oldie .custom-checkbox > .box > .tick, .cleanslate .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, .cleanslate .oldie .custom-checkbox > input {
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
.oldie .custom-checkbox, .cleanslate .oldie .custom-checkbox {
    zoom: 1;
}
    .oldie .custom-checkbox > .box > .tick, .cleanslate .oldie .custom-checkbox > .box > .tick {
        left: 1px;
        top: -5px;
        zoom: 1;
    }

.custom-checkbox.dark > .box, .cleanslate .custom-checkbox.dark > .box {
    border: 1px solid #ccc;
    background-color: #333;
}
    .custom-checkbox.dark > .box > .tick, .cleanslate .custom-checkbox.dark > .box > .tick {
        border-bottom: 2px solid #fff;
        border-left: 2px solid #fff;
    }
.custom-checkbox.dark > input:active + .box, .cleanslate .custom-checkbox.dark > input:active + .box {
    border-color: #ccc;
    background-color: #333;
}​

/*-----------------------------------------------------------------------------------------------------*/
/*                                      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; 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: 6px; width: 90px;}                                  
.listDisplayCount                       { margin-left: 40px;}                       
.searchBar .show-inactive               { margin: 15px 0px 15px 40px;}           
.searchBar .show-inactive.clients, .searchBar .show-inactive.pets
                                        { margin: 0px 0px 0 15px;} 

/*----------------------------------------------------------------------------------------------*/
/*                                     MISC                                                     */
/*----------------------------------------------------------------------------------------------*/
P.note           { font-size:0.7em; line-height:1.2em; }
.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; }
.truncate        { -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
ul.ui-autocomplete {
    border: #dadada 1px solid;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.298039);
}