.desktop body {
    font-family: sans-serif;
    font-size: 80%;
}

.mobile body {
    font-family: sans-serif;
    font-size: 90%;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

label {
    margin-top: 5px;
}

img {
    border: 0;
}

select:disabled, input:disabled, textarea:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/** Used by JQueryUI dialogs - set a dialogClass of dialog-no-title to hide the titlebar */
.dialog-no-title .ui-dialog-titlebar { display: none }

/** JQuery UI buttons can wrap in Chrome 22 onwards, we don't want that! */
.ui-button { white-space: nowrap }

/** JQuery UI themes can set their own fonts - stop that */
.ui-widget {
    font-family: sans-serif;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: sans-serif;
}

/** code editors */
.CodeMirror { 
    border: 1px solid #aaa; 
    font-family: monospace !important;
}

.hidden {
    display: none;
}

.dialogshadow, .menushadow, .thumbnailshadow {
    box-shadow: 3px 3px 5px #888;
}

.centered {
    text-align: center;
}

.rightalign {
    text-align: right;
}

.nowrap {
    white-space: nowrap;
}

.transparent {
    zoom: 1;
    opacity: 0.5;
}

.bottomborder {
    border-bottom: 1px solid #999;
    padding-bottom: 5px;
}

.strong {
    font-weight: bold;
}

/** LOGIN SCREEN ============= */
#asm-login-window {
    padding: 0px;
    width: 100%;
    max-width: 400px;
    background-color: #fff;
    background-repeat: no-repeat;
    border: 1px solid #555;
}

#asm-login-window a {
    color: #000 !important;
}

#asm-login-splash {
    width: 100%;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
}

#asm-login-nav {
    text-align: right;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

#asm-login-nav img {
    vertical-align: middle;
    border: 0px;
}

/** MENU BAR ====================== */
#asm-menu {
    /*
    padding: 5px;
    margin: 5px;
    float: left;
    */
}

.asm-menu-icon {
    display: inline-block;
    cursor: pointer;
    padding: 6px;
    zoom: 1;
    overflow: visible;
    white-space: nowrap;
}

.asm-menu-columns {
    display: block;
}

.asm-menu-column {
    vertical-align: top;
    display: inline-block;
    width: auto;
}

.asm-menu-list {
    list-style-type: none;
    padding: 5px;
    margin-left: 0px;
}

.asm-menu-item {
    border: 1px solid transparent;
}
.asm-menu-item a {
    padding-left: 15px;
    display: block;
    width: 100%;
}

.asm-disabled-menu-item img, .asm-menu-item img, .asm-menu-category img {
    vertical-align: middle;
    padding-right: 5px;
}

.asm-disabled-menu-item {
    color: #ccc;
    padding-left: 15px;
}

.asm-hotkey {
    margin-right: 20px;
    float: right;
    font-size: 60%;
    padding-left: 5px;
    padding-top: 4px;
}

.asm-menu-category {
    padding: 4px;
    margin: 5px;
    font-weight: bold;
    border-bottom: 1px solid #999;
}

.asm-menu-body {
    position: absolute;
    padding: 2px;
    z-index: 9999 !important;
    display: none;
    text-align: left;
}

/** TOPLINE ====================+ */
#topline-q {
    width: 150px;
    padding: 4px;
    color: #000;
    vertical-align: middle;
}

#asm-topline {
    text-align: left;
    width: 100%;
    margin-bottom: 5px;
}

#asm-topline .topline-element {
    display: inline-block;
    vertical-align: middle;
}

#asm-topline input, #asm-topline a, #asm-topline img, #asm-topline .asm-menu-icon {
    vertical-align: middle;
}

#asm-topline-logo {
    cursor: pointer;
}

#asm-topline-logo img {
    height: 32px;
}

#asm-topline-user {
    font-weight: bold;
}

/** MAIN =========================== */
.asm-main-columns {
    display: block;
    width: 100%;
}

.asm-main-column {
    display: inline-block;
    vertical-align: top;
    width: 49%;
    min-width: 330px;
}

.asm-main-table { border-collapse: separate; }
.asm-main-table td { font-weight: normal !important; padding: .4em; border-top-width: 0px !important; }
.asm-main-table a { font-weight: bold; }
.asm-main-table a:hover { text-decoration: underline !important; }

.asm-main-about-version {
    text-align: center;
    font-weight: bold;
    font-size: 120%;
}

.asm-main-about-version img {
    border: 0;
    vertical-align: middle;
    height: 64px;
}

.asm-main-about-browser {
    text-align: center;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #cc00ff;
    background-color: #cb6bd6;
    color: #fff;
}

/** FOOTER ========================= */
#footer {
    width: 100%;
    font-size: 80%;
    border-top: 1px solid #aaa;
}
.asm-footer-users {
    display: inline-block;
    width: 50%;
    text-align: left;
}
.asm-footer-version {
    display: inline-block;
    width: 50%;
    text-align: right;
}

/** ANIMAL/PERSON CHOOSERS ========= */
.asm-animalchoosermulti-result {
    display: inline-block;
    text-align: center;
    opacity: 0.5; 
    zoom: 1;
}
.asm-animalchoosermulti-selected {
    opacity: 1.0; 
    zoom: 1;
}

/** SEARCH SCREENS ================= */
.asm-search-selector {
    font-size: 80%;
}

/** ONLINE FORMS =================== */
#dialog-viewer-content td {
    border-bottom: 1px dotted #aaa;
}

.asm-animal-emblems {
    white-space: nowrap;
}

.asm-animal-emblems .asm-icon {
    margin-left: 1px;
}

.asm-animal-emblems .custom {
    margin-left: 1px;
    cursor: default;
	border-radius: 3px;
    color: #fff;
    background-color: #cc00ff;
    border: 1px solid black;
    padding: 2px;
    white-space: nowrap;
}

.asm-search-name {
    font-size: 150%;
    font-weight: bold;
}

.asm-search-detail {
    font-size: 80%;
    font-style: italic;
}

.asm-search-locationunit {
    color: #366575;
    background-color: #fffaed;
    border: 1px solid black;
    padding: 2px;
    white-space: nowrap;
}

.asm-search-deceased {
    color: red;
}

.asm-search-nonshelter {
    color: #cb6bd6;
    font-weight: bold;
}

.asm-search-adoptable {
    color: green;
}

.asm-search-notforadoption {
    color: red;
    font-weight: bold;
}

.asm-search-finepaid {
    color: green;
    font-weight: bold;
}

.asm-search-fineunpaid {
    color: red;
    font-weight: bold;
}

.asm-search-result {
    padding: 5px;
    border-bottom: 1px solid #999;
    min-height: 85px;
}

.asm-search-result .asm-thumbnail {
    float: right;
}

.asm-search-personflags {
    font-weight: normal;
    font-style: italic;
}

.asm-search-numbertime {
    font-size: 80%;
    font-style: italic;
    border-bottom: 1px solid #999;
}

.asm-search-result a { 
    font-weight: bold; 
}

/** ROTA ======================== */
.asm-staff-rota th { background-color: #fff; color: #666; padding: 8px; font-weight: normal; }
.asm-staff-rota-today { background-color: #f5f5dc !important; color: #000 !important; }
.asm-staff-rota { width: 100%; border-collapse: collapse; }
.asm-staff-rota td { border: 1px solid #dbdbdb; text-align: center; padding: 5px; }
.asm-staff-rota td:first-child { text-align: right !important; }
.asm-staff-rota-cell { background-color: #fff; cursor: pointer; }
.asm-staff-rota-cell:hover { background-color: #eee; }
.asm-staff-rota-shift { width: 80%; color: #000 !important; padding: 4px; display: inline-block; border: 1px solid transparent; }
.asm-staff-rota-shift-work { font-size: 80%; }
.asm-staff-rota-shift:hover { border: 1px dotted #555 !important; }
.asm-staff-rota-overtime { width: 80%; background-color: #ff9999; color: #000 !important; padding: 4px; display: inline-block; border: 1px solid transparent; }
.asm-staff-rota-overtime:hover { border: 1px dotted #555 !important; }
.asm-staff-rota-timeoff { width: 80%; background-color: #ffffcc; color: #000 !important; padding: 4px; display: inline-block; border: 1px solid transparent; }
.asm-staff-rota-timeoff:hover { border: 1px dotted #555 !important; }
.asm-staff-rota-staff-odd { background-color: #085278; color: #fff; }
.asm-staff-rota-staff-odd a { background-color: #085278; color: #fff; }
.asm-staff-rota-staff-even { background-color: #126894; color: #fff; }
.asm-staff-rota-staff-even a { background-color: #126894; color: #fff; }
.asm-staff-rota-volunteer-odd { background-color: #619a62; color: #fff; }
.asm-staff-rota-volunteer-odd a { background-color: #619a62; color: #fff; }
.asm-staff-rota-volunteer-even { background-color: #3d633e; color: #fff; }
.asm-staff-rota-volunteer-even a { background-color: #3d633e; color: #fff; }

/** SHELTERVIEW ================= */
.asm-shelterview-animal {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    border: 1px dotted #ccc;
    margin-top: 3px;
    padding: 2px;
}

.asm-shelterview-unit { 
    display: inline-block;
    min-width: 80px;
    min-height: 110px;
    text-align: center;
    vertical-align: top;
    border: 1px solid #333;
    padding: 5px;
    margin: 1px;
}

.asm-shelterview-unit-available {
    background-color: #b2ffb2;
}

.asm-shelterview-secondgroup {
    color: #222;
    background-color: #fff;
    border: 1px solid black;
    padding: 2px;
    white-space: nowrap;
    vertical-align: middle;
}

/** TIMELINE ==================== */
.asm-timeline-time { font-size: 80%; font-style: italic; opacity: 0.5; }
.asm-timeline-small-date { text-decoration: none; opacity: 0.5; }
.asm-timeline-large-date { font-weight: bold; font-size: 140%; border-bottom: 1px solid black; }
.asm-timeline-by { font-size: 80%; font-style: italic; opacity: 0.5; }
.asm-timeline-item { border-bottom: 1px dotted #555; padding: 10px; }

/** TABLES ========================== */
.asm-table { border-collapse: separate; }
.asm-table td { font-weight: normal !important; padding: .4em; border-top-width: 0px !important; }
.asm-table th { text-align: center; padding: .8em .4em; }
.asm-table td.first, .asm-table th.first { border-left-width: 0px !important; }
.asm-table a { font-weight: bold; }
.asm-table a:hover { text-decoration: underline !important; }
.asm-completerow { opacity: 0.5; zoom: 1;}
.asm-overduerow { font-style: italic !important; color: #ff0000 !important; }
.asm-warningrow { color: #ff0000; }
#header-fixed { left: 16px; border-collapse: collapse; }
#header-fixed th { padding: 8px; padding-right: 14px; }

/** WAITING LIST ==================== */
.asm-wl-highlight { color: #000; background-color: #fff284; }
.asm-wl-highlight a { color: #000; background-color: #fff284; }
.asm-wl-highlight1 { color: #fff; background-color: #0000ff; }
.asm-wl-highlight1 a { color: #fff !important; background-color: #0000ff; }
.asm-wl-highlight2 { color: #fff; background-color: #800080; }
.asm-wl-highlight2 a { color: #fff !important; background-color: #800080; }
.asm-wl-highlight3 { color: #fff; background-color: #008000; }
.asm-wl-highlight3 a { color: #fff !important; background-color: #008000; }
.asm-wl-highlight4 { color: #000; background-color: #ffff00; }
.asm-wl-highlight4 a { color: #000; background-color: #ffff00; }
.asm-wl-highlight5 { color: #000; background-color: #00ffff; }
.asm-wl-highlight5 a { color: #000; background-color: #00ffff; }
.asm-wl-lowest { color: #000; background-color: #ffcece; }
.asm-wl-lowest a { color: #000; background-color: #ffcece; }
.asm-wl-low { color: #000; background-color: #ffa5a5; }
.asm-wl-low a { color: #000; background-color: #ffa5a5; }
.asm-wl-medium { color: #000; background-color: #ff7373; }
.asm-wl-medium a { color: #000; background-color: #ff7373; }
.asm-wl-high { color: #fff; background-color: #ff4141; }
.asm-wl-high a { color: #fff !important; background-color: #ff4141; }
.asm-wl-urgent { color: #fff; background-color: #ff0000; }
.asm-wl-urgent a { color: #fff !important; background-color: #ff0000; }
.asm-waitinglist-number { color: red; }

/** LOST AND FOUND =================== */
.asm-lostfound-number { color: red; }

/** MEDIA ============================= */
.asm-media-thumb { 
    display: inline-block;
    vertical-align: middle; 
}
.asm-media-mods {
    display: inline-block;
    vertical-align: middle;
}
.asm-mediadroptarget {
    display: inline-block;
    min-width: 100px;
    text-align: center;
    vertical-align: middle;
    padding: 3px;
    color: #ccc;
    border: 4px dashed #ccc;
}
.asm-mediadroptarget-hover {
    color: #000;
    border: 4px dashed #000;
}

/** PERSON ============================ */
.asm-person-code { color: red; }
.personchooser-noperm { font-weight: bold; }

/** ACCOUNTS ========================== */
#table-trx { border-collapse: collapse; }
#table-trx a { color: #000; }
#table-trx .newrow { border-top: 1px solid #aaa; }
#table-trx .left { text-align: left; }
#table-trx .right { text-align: right; }
#table-trx td.head { border-bottom: 1px solid #aaa; font-weight: bold; }
#table-trx td.odd { background-color: #cce5d1; color: #000; }
#table-trx td.even { background-color: #e5e4cc; color: #000; }
#table-trx td.highlight { background-color: #fff0a5 !important; color: #000; }
#table-trx td.future { border-top: 1px solid #ff0000; }

/** QUICKLINKS ========================== */
.asm-quicklinks {
    font-weight: bold;
}

.asm-quicklinks a {
    display: inline-block;
    white-space: nowrap;
	border-radius: 3px;
    box-shadow: 0 1px 3px #ddd;
    border: 1px solid #555;
    padding: 5px;
    margin: 1px;
    font-weight: normal;
}

.asm-quicklinks span {
	vertical-align: middle;
}

/** CALENDAR =========================== */
.asm-calendar-legends {
}

.asm-calendar-legend {
    display: inline-block;
    white-space: nowrap;
	border-radius: 3px;
    box-shadow: 0 1px 3px #ddd;
    border: 1px solid #555;
    padding: 5px;
    margin: 1px;
    font-weight: normal;
}

/** GRIDS ============================= */
.asm-grid {
    display: block;
    width: 100%;
}

.asm-grid-col-2 {
    display: inline-block;
    vertical-align: middle;
    min-width: 300px;
    width: 50%;
}

.asm-grid-col-3 {
    display: inline-block;
    vertical-align: middle;
    min-width: 300px;
    width: 33%;
}

.asm-grid-col-4 {
    display: inline-block;
    vertical-align: middle;
    min-width: 300px;
    width: 25%;
}

.asm-grid-field {
    width: 100%;
}

.asm-grid-field label {
    display: inline;
    width: 150px;
    text-align: right;
}

/** FORMS =========================== */
#asm-content {
    display: none;
}

#asm-content table {
    margin-left: auto;
    margin-right: auto;
}

#asm-content label {
    text-align: right;
}

.asm-error-text {
    color: red !important;
}

.asm-header {
    text-align: center;
    font-weight: bold;
    padding: 5px;
    border-bottom: 1px solid #aaa;
}

.asm-additional-fields-container {
}

.asm-callout-popup {
    box-shadow: 3px 3px 5px #888;
}

.asm-textarea {
    width: 98%;
    border: 1px solid #555;
    background-color: #fff;
    color: #000;
}

.asm-richtextarea {
    border: 1px solid #555;
    background-color: #fff;
    color: #000;
    overflow: scroll;
}
/** in richtextarea, the tinymce toolbar is used, stop dialogs floating over it */
.tox-tinymce-inline { z-index: 101; }

.asm-htmleditor, .asm-sqleditor {
    display: none;
}

.controlshadow {
    box-shadow: 0 1px 2px #ddd;
}

.borderradius .controlborder {
    border-radius: 2px;
}

.asm-textareafixed {
    width: 190px;
    border: 1px solid #555;
    background-color: #fff;
    color: #000;
}

.asm-textareafixeddouble {
    width: 380px;
    border: 1px solid #555;
    background-color: #fff;
    color: #000;
}

.asm-textbox {
    width: 190px;
    background-color: #fff;
    color: #000;
    border: 1px solid #555;
}

.asm-halftextbox {
    width: 95px;
    background-color: #fff;
    color: #000;
    border: 1px solid #555;
}

.asm-doubletextbox {
    width: 380px;
    background-color: #fff;
    color: #000;
    border: 1px solid #555;
}

.asm-chosen {
    width: 197px;
}

.asmSelect {
    width: 197px;
    background-color: #ddd;
    color: #000;
    border: 1px solid #bbb;
    padding: 2px;
}

.asm-selectbox {
    width: 197px;
    background-color: #fff;
    color: #000;
    border: 1px solid #555;
}

.asm-halfselectbox {
    width: 95px;
    background-color: #fff;
    color: #000;
    border: 1px solid #555;
}

.asm-doubleselectbox {
    width: 387px;
    background-color: #fff;
    color: #000;
    border: 1px solid #555;
}

.asm-checkbox {
}

.asm-embed-name {
    font-weight: bold;
}

.asm-more-link {
    border: 1px solid #eee;
    padding: 2px;
}

.asm-more-link:hover {
    border: 1px solid #000;
    cursor: pointer;
}

.asm-table-layout {
    border-spacing: 5px 1px;
}

.asm-row {
}

.asm-thumbnail {
    vertical-align: middle;
    border: 1px solid #555;
    padding: 5px;
    margin: 5px;
    max-width: 85px;
    max-height: 85px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 3px 3px 5px #888;
}

.objectfit .asm-thumbnail {
    vertical-align: middle;
    border: 1px solid #555;
    padding: 5px;
    margin: 5px;
    width: 85px;
    height: 85px;
    object-fit: contain;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 3px 3px 5px #888;
}

.objectfit .asm-thumbnail-male, .asm-thumbnail-male {
    background-color: #99c2ff;
}

.objectfit .asm-thumbnail-female, .asm-thumbnail-female {
    background-color: #ffb3ff;
}

.asm-textbox, .asm-selectbox {
    border: 1px solid #555;
    padding: 2px;
}

.asm-left-table {
    margin-left: 0px !important;
}

.asm-banner {
    padding: 5px;
}

.asm-banner a {
    font-weight: bold;
}

.asm-redbutton {
    background: red !important;
    border: 1px solid red !important;
    color: #fff !important;
}

.asm-redbutton:hover {
    background: red !important;
    border: 1px solid red !important;
    color: #fff !important;
    opacity: 0.7;   
}

.asm-underlined-rows {
    border-collapse: collapse;
    width: 100%;
}
.asm-underlined-rows td {
    border-bottom: 1px dotted #bbb;
}

.asm-toolbar {
    padding: 5px;
}

.asm-toolbar button, .asm-toolbar .asm-menu-icon {
    vertical-align: middle;
}

.asm-toolbar table {
    border: 0;
    width: auto;
    margin-left: 0px !important;
}

.asm-link-disabled {
    color: #aaa !important;
    text-decoration: none;
    cursor: default;
}

.asm-link-disabled:hover {
    text-decoration: none;
}

/** Hide elements from printing by giving them the no-print class */
@media print
{
    .no-print, .no-print * { display: none !important; }
}