html, body {height: 100%;}
body {background: #ffffff; font-family: OpenSans, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #3d3d3d; font-size: 14px;}
body.no-scroll {overflow: hidden;}
h1 {text-transform: uppercase; color: #00b0ec; font-size: 2em;}
h2 {font-size: 1.65em;}
h3 {font-size: 1.35em;}
a {color: #747474;}
a:hover, a:focus, a:active {text-decoration: underline;}
input, select, textarea, button, .button {box-sizing: border-box; display: block; background: #ffffff; color: #929292; width: 100%; border: solid 1px #eaeaea; padding: 12px; font-size: 12px; font-family: OpenSans, "Helvetica Neue", Helvetica, Arial, sans-serif; height: 44px;}
select {appearance: none; -moz-appearance: none; -webkit-appearance: none; background: #ffffff url('/css/img/icons/dropdown.svg') no-repeat; background-position: center right 12px; background-size: 8px 12px; border-radius: 0;}
select[disabled], select.disabled, textarea[disabled] {background: #fafafa;}
select::-ms-expand {display: none;}
option {padding: 12px;}
input[type=submit], input[type=button], button, .button {background: #00b0ec; color: #ffffff; border: none; cursor: pointer; width: auto; text-align: center;}
.button {display: inline-block;}
a.button {text-decoration: none;}
.blue-link {color: #00b0ec;}
input[type=checkbox], input[type=radio] {display: none;}
textarea {width: 100%; height: auto;}
label {font-size: 0.8em; display: block; margin: 12px 0 4px 0; cursor: pointer;}
.sub-label {color: #929292; font-size: 0.9em;}
input[type=checkbox] + label, input[type=radio] + label {min-height: 22px; display: inline-block; line-height: 22px; margin: 0 16px 0 0; padding-left: 30px; background: transparent url('/css/img/checkbox.png') no-repeat 0 -22px;}
input[type=checkbox]:checked + label, input[type=radio]:checked + label {background-position: 0 0;}
input.alt-checkbox + label, label.alt-checkbox {background-image: url('/css/img/alt-checkbox.png');}
legend {margin-bottom: 1em;}
.checkbox-group {margin-top: 12px;}
.input-error-message {color: #dd4f43; list-style-type: none; margin-bottom: 1em; font-size: 0.9em;}
select.input-error, input[type=text].input-error, input[type=email].input-error, input[type=password].input-error, textarea.input-error {border-color: #dd4f43;}
.page-container {background: linear-gradient(120deg, #fcfafb 0%, #dde0e5 100%);}
#main-section:after {display: block; content: ""; clear: both;}
table {border-collapse: collapse;}
table, .table {display: table; width: 100%;}
.table > * {display: table-cell; vertical-align: middle;}
.flash-message {padding: 12px; background: #ffffff;}
body .flash-message p {margin: 0; text-align: center;}
.flash-message.success, .green {background: #4dcb8e !important; color: #ffffff !important;}
.flash-message.info, .blue {background: #4a8df8 !important; color: #ffffff !important;}
.flash-message.warning, .yellow {background: #f5ad3f !important; color: #ffffff !important;}
.flash-message.danger, .red {background: #dd4f43 !important; color: #ffffff !important;}
.flash-message + h2 {margin-top: 1em;}
.cancel, .unavailability, .gray {background: #e0e0e0; color: #333333;}
.hidden {display: none !important;}
hr {margin: 24px 0; border: none; border-top: solid 1px #eaeaea;}
.bold {font-weight: bold;}
pre {width: 100%; overflow: scroll; background: #ffffff; color: #333333; border: solid 1px #929292; text-align: left;}
.cols {margin-top: 12px;}
.cols:after {display: block; content: ""; clear: both;}
.col {width: 50%; float: left; padding-right: 12px;}
.col + .col {padding-right: 0; padding-left: 12px; float: right;}
.col.right {text-align: right;}
.title-icon {width: 30px; margin-right: 10px; display: inline; vertical-align: middle;}
.title-icon + span {vertical-align: middle;}
.clear-after:after {display: block; content: ""; clear: both;}

/* Header */
#main-header {background: #e0e0e0; padding: 28px 0; color: #747474;}
#main-header:after {clear: both; display: block; content: "";}
#main-header > * {float: left; padding: 0 28px;}
#main-header .logo {width: 18%;}
#main-header .logo.centered {text-align: center;}
#main-header .logo .table {width: auto;}
#main-header .logo a {display: block;}
#main-header .logo * + a {margin-top: 8px;}
#main-header .logo img {width: 125px; height: auto;}
#main-header .logo .table p {margin-left: 24px; font-size: 0.85em;}
#main-header .logo strong {text-transform: uppercase;}
#main-header .logo .button {height: auto;}
#main-header .table > * {padding-right: 4px;}
#main-header .calendar-nav a {display: block; text-align: center; background: #ffffff; padding: 12px; box-sizing: border-box; height: 44px;}
#main-header .calendar-nav .today {background: #00b0ec; color: #ffffff; padding: 12px 24px;}
#main-header .calendar-nav .sibling {width: 44px; padding-top: 11px;}
#main-header .calendar-nav .sibling img {width: 12px;}
#main-header .calendar-nav .date-range {padding-left: 12px;}
#main-header .action-nav {float: right; position: relative;}
#main-header .action-nav .table > * {padding-right: 0; padding-left: 16px;}
#main-header .action-nav li > a {width: 44px; height: 44px; border-radius: 50%; background: #525252; display: block; transition: background 0.2s; text-align: center;}
#main-header .action-nav li > a:hover, #main-header .action-nav li.active > a {background: #00b0ec;}
#main-header .action-nav li img {width: 60%; color: #ffffff; padding-top: 20%;}
#menu-chat-item {position: relative;}
#menu-chat-item span {position: absolute; top: -2px; right: -2px; width: auto; padding: 0 4px; height: 18px; text-align: center; color: #ffffff; background: #ff0000; border-radius: 9px;}
#main-header .search {float: right;}
.search:after {display: block; content: ""; clear: both;}
.search {position: relative;}
#search-form-query, #search-form-submit {float: left;}
#search-form-query {width: calc(100% - 55px); height: 44px; border: none; padding-left: 24px; color: #333333; font-weight: bold; border-left: solid 1px #f0f0f0;}
#search-result-widget {position: absolute; top: 100%; left: 28px; width: calc(100% - 56px); z-index: 10;}
#search-result-widget > * {background: #ffffff;}
#search-result-widget ul {list-style-type: none;}
#search-result-widget .item {border-left: solid 1px #f0f0f0; border-right: solid 1px #f0f0f0;}
#search-result-widget .item, #search-result-widget p {display: block; padding: 12px 24px; color: #a8a8a8; font-size: 12px; font-weight: bold;}
#search-result-widget .item:hover {text-decoration: underline;}
#search-result-widget li:first-child .item {border-top: solid 1px #f0f0f0;}
#search-result-widget li:last-child .item {border-bottom: solid 1px #f0f0f0;}
#search-result-widget .item .term-highlight {color: #333333;}
#main-header #search-form-query {width: 245px;}
#search-form-submit {background: #ffffff; color: #333333; width: 55px; overflow: hidden; padding: 8px; border-right: solid 1px #f0f0f0;}
#search-form-submit img {display: block; height: 80%; width: auto;}
#search-form-submit img + img {display: none;}
#search-form-submit:hover img, #search-form-submit:focus img, #search-form-submit:active img, #search-form-query:focus + #search-form-submit img {display: none;}
#search-form-submit:hover img + img, #search-form-submit:focus img + img, #search-form-submit:active img + img, #search-form-query:focus + #search-form-submit img + img {display: block;}
#account-tooltip {position: absolute; top: 100%; right: 28px; width: 350px; padding-top: 16px; z-index: 50; color: #929292;}
#account-tooltip .tooltip-caret {width: 12px; height: 12px; border-bottom: solid 12px #ffffff; border-right: solid 12px transparent; border-left: solid 12px transparent; float: right; margin-right: 10px;}
#account-tooltip .tooltip-content {clear: both; background: #ffffff; padding: 24px; box-shadow: 0px 0px 4px 2px #d5d5d5;}
#account-tooltip .tooltip-close {font-size: 2em; text-align: right; cursor: pointer;}
#account-tooltip .icon-profile {float: left;}
#account-tooltip .profile-summary {margin-left: 60px;}
#account-tooltip .profile-summary h3 {font-weight: bold; text-transform: uppercase; color: #3d3d3d; font-size: 1.1em; margin-bottom: 3px;}
#account-tooltip .profile-summary p {margin-bottom: 1em; line-height: 1.4em; font-size: 0.9em;}
#tooltip-change-password-container {margin-bottom: 2em !important;}
#tooltip-change-password {font-size: 0.8em; text-decoration: underline; color: #a8a8a8;}
#account-password-change-form {display: none;}
#account-password-change-form input[type=submit] {width: 100%; margin: 1em 0;}
#account-tooltip .tooltip-logout {border-top: solid 1px #dddddd; padding-top: 1.4em; text-transform: uppercase; font-size: 1.2em;}
#account-tooltip .icon-logout, #account-tooltip .tooltip-logout span {vertical-align: middle;}
#account-tooltip .icon-logout {height: 1em; margin-right: 6px;}
#account-tooltip .tooltip-logout span {font-size: 0.8em;}

/* Alternative layout */
body.alt-layout {overflow: hidden; color: #747474;}
body.alt-layout .page-container {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.alt-layout .circle {position: absolute; top: 0; left: 50%; border: solid 1px #dadada; border-radius: 100%; box-shadow: 0px 0px 12px 1px #dadada; width: 160vmin; height: 160vmin; transform: translateX(-50%) translateY(-12%); z-index: 2;}
.alt-layout .page {position: absolute; z-index: 2; top: 0; left: 50%; text-align: center; width: 60%; min-width: 320px; max-width: 720px; height: 100%; padding: 80px 0; margin: 0 auto; z-index: 3; transform: translateX(-50%);}
.alt-header .logo {width: auto; height: 65px;}
.alt-section h1 {margin: 50px 0 10px 0; font-size: 2.5em;}
.alt-section h2 {font-size: 1.25em;}
.alt-section p {text-align: left; margin-bottom: 0.5em;}
.alt-section form {margin: 50px auto 20px auto; max-width: 480px;}
.alt-section form label {text-align: left;}
.alt-section form input {margin: 0 auto; max-width: 320px;}
.alt-section form input[type=submit] {max-width: 180px; width: 100%; margin: 30px auto 12px auto;}
.alt-footer {position: absolute; bottom: 50px; left: 0; width: 100%; z-index: 1; text-align: center;}
.alt-footer .copyright {font-size: 0.9em; color: #a8a8a8;}

/* Grid 2-1 pages */
.grid-2-1 {background: #f9f9f9;}
.grid-2-1:after {display: block; content: ""; clear: both;}
.grid-2-1 .left-column {background: #ffffff; float: left; width: 65%;}
.grid-2-1 .content {padding: 56px;}
.grid-2-1 .copyright {padding: 56px; font-style: italic; text-align: center; background: #f0f0f0;}
.grid-2-1 .right-column {float: left; width: 35%; padding: 56px;}
.grid-2-1 h2 {margin-bottom: 1em;}
.grid-2-1 h3 {text-transform: uppercase; margin: 2em 0 1.5em 0; font-weight: bold;}
.grid-2-1 p {line-height: 1.5em;}
/* Narrow pages */
.narrow-page {width: 64%; margin: 0 auto; padding: 28px;}
.narrow-page h2 {margin: 36px 0;}
/* Help */
#contact-form input {width: 100%; margin: 0.5em 0;}
#contact-form input[type=submit] {width: auto; padding: 12px 36px; margin: 2em 0 5em 0;}
#contact-info-title {margin-bottom: 1em;}
#contact-info-container:after {display: block; content: ""; clear: both;}
#contact-info {padding: 24px; background: #ffffff; border: solid 1px #eaeaea; float: left;}
#contact-info .contact-company {text-transform: uppercase; margin-bottom: 0.5em;}
#contact-info .contact-phone {font-size: 1.1em; font-weight: bold;}
.video-group {margin-top: 24px;}
.video-group-title {background: #f9f9f9; padding: 16px 28px;}
.videos:after {display: block; content: ""; clear: both;}
.video {margin: 16px 4% 16px 0; cursor: pointer; float: left; width: 48%;}
.video:nth-child(2n) {margin-right: 0;}
.video-image-container {position: relative; background: #000000;}
.video-image {display: block; width: 100%; opacity: 0.75;}
.play-link {position: absolute; top: 50%; left: 50%; width: 70px; transform: translate(-50%, -50%);}
.video-title {color: #00b0ec; padding: 8px 0;}
#video-player {width: 100%; display: block;}
#video-player-modal {position: fixed; width: auto; max-width: none;}
/* Account */
#account-section h3 > * {vertical-align: middle;}
#account-section p {line-height: 1.5em; margin-bottom: 1.5em;}
/* Print schedule */
#print-schedule-form .date-picker input[type="button"] {border: solid 1px #00b0ec;}
#print-schedule-form fieldset {margin: 24px 0; border-bottom: solid 1px #f3f3f3; padding-bottom: 24px}
#print-schedule-form legend {padding-top: 24px; border-top: solid 1px #f3f3f3; display: block; width: 100%;}
#print-schedule-form fieldset label {display: inline-block; margin-right: 16px;}
/* Search */
.search-results:after {display: block; content: ""; clear: both;}
.search-results .item {margin-right: 32px; padding: 16px 0; border-top: solid 1px #eaeaea; width: calc(50% - 16px); float: left;}
.search-results .item:nth-child(2n) {margin: 0;}
.search-results .item-title {font-size: 1.2em; font-weight: bold;}
.search-results .item p {margin: 8px 0;}
.search-results .item p + p {margin-top: 0;}
.search-results .item-date em {font-size: 0.8em;}
.search-results .item-time img {width: 20px; height: 20px;}
.search-results .item-time > * {vertical-align: middle;}
/* Store */
#city-form input {width: 300px; margin-top: 1em;}
.store-search-output {margin: 2em 0; padding-top: 2em; border-top: solid 1px #eaeaea;}
#store-search-list:after {display: block; clear: both; content: "";}
.store-search-list-item {float: left; width: calc(50% - 16px); margin-left: 32px; max-width: 360px;}
.store-search-list-item:nth-child(2n+1) {margin: 0; clear: left;}
.store-search-list-item:hover {background: #00b0ec; color: #ffffff; text-decoration: none;}
.store-search-list-item > div {display: table; width: 100%;}
.store-search-list-item > div > * {display: table-cell; vertical-align: middle; padding: 12px;}
.store-search-list-item > div > * + * {text-align: right;}
#city-list-container {position: relative;}
#city-list {position: absolute; top: 0; left: 0; list-style-type: none; width: 300px;}
#city-list li {padding: 8px; background: #ffffff; border: solid 1px #eaeaea;}
#city-list li + li {border-top: none;}
#city-list li[data-id] {color: #00b0ec; cursor: pointer;}
#city-list li[data-id]:hover {text-decoration: underline;}

/* Calendar page */
/* Side bar */
#calendar-sidebar {opacity: 0; float: left; padding: 28px 0 56px 0; width: 0; transition: width 0.3s linear 0.2s, padding 0.3s linear 0.2s, opacity 0.2s linear;}
#calendar-sidebar.open {opacity: 1; width: 18%; padding: 28px 28px 56px 28px; transition: width 0.3s linear, padding 0.3s linear, opacity 0.2s linear 0.3s;}
.sidebar-block {margin-top: 2.5em;}
.sidebar-block .title {margin-bottom: 1em;}
.sidebar-block .title:after {display: block; content: ""; clear: both;}
.sidebar-block .title h4 {text-transform: uppercase; font-size: 1.1em;}
.sidebar-block .dropdown {float: right; padding-top: 0.4em; height: 0;}
.sidebar-block .dropdown .caret {display: block; width: 0; height: 0; border-top: 6px solid #525252; border-left: 6px solid transparent; border-right: solid 6px transparent; transform: rotateZ(-90deg); transition: transform 0.3s; cursor: pointer;}
.sidebar-block .dropdown.open .caret {transform: none;}
.calendar-view-buttons:after {display: block; content: ""; clear: both;}
.calendar-view-buttons a {display: block; box-sizing: border-box; float: left; width: 49%; padding: 10px; text-align: center; border: solid 1px #f0f0f0;}
.calendar-view-buttons a + a {margin-left: 2%;}
.calendar-view-buttons a.active {border-color: #00b0ec; color: #00b0ec;}
.mini-calendar-block .title a {float: right; padding: 3px 6px 0 6px;}
.mini-calendar-block .title a img {width: 8px; height: 15px;}
.mini-calendar {table-layout: fixed; background: #ffffff; color: #3d3d3d;}
.mini-calendar th {text-align: center; padding: 5px 0;}
.mini-calendar td {text-align: center; padding-top: 14.25%; position: relative; height: 0;}
.mini-calendar div {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.mini-calendar td:first-child div {border-radius: 100% 0 0 100%;}
.mini-calendar td:last-child div {border-radius: 0 100% 100% 0;}
.mini-calendar .current-week div {background: #f0f0f0;}
.mini-calendar a, .mini-calendar span {display: block; height: 100%; padding-top: 28%; box-sizing: border-box;}
.mini-calendar .today a {border-radius: 100% !important; background: #00b0ec; color: #ffffff;}
.mini-calendar .off {color: #dddddd;}
.mini-calendar .current-day {font-weight: bold;}
#calendar-list label {display: block; margin-top : 0.5em;}
#sidebar-legend .table {margin-top: 0.5em; font-size: 0.8em;}
#sidebar-legend .table > :first-child {text-align: center; width: 40px;}
#sidebar-legend .table > * + * {padding-left: 10px;}
#sidebar-legend .color {display: inline-block; width: 30px; height: 6px; border-radius: 3px;}
#sidebar-open-button {background: #f0f0f0; position: fixed; bottom: 14px; left: 14px; width: 28px; height: 28px; transform: none; cursor: pointer; transition: left 0.3s linear 0.2s, transform 0.3s linear 0.2s;}
#sidebar-open-button img {display: block; width: 12px; margin: 8px;}
#sidebar-open-button.open {left: calc(18% - 42px); transform: rotate(-90deg); transition: left 0.3s linear, transform 0.3s linear;}
/* Content */
#calendar-content {float: left; width: 100%; padding: 28px; border-left: solid 1px #f0f0f0; transition: width 0.3s linear 0.2s;}
#calendar-sidebar.open ~ #calendar-content {width: 82%; padding: 28px; transition: width 0.3s linear;}
#calendar-sticky-header {position: fixed; top: 0; left: 0; z-index: 49; background: #ffffff;}
#calendar, #calendar-sticky-header {font-size: 0.85em;}
#calendar, #event-table, #calendar-sticky-header, #calendar-sticky-header table {table-layout: fixed;}
#calendar th, #calendar td, #calendar-sticky-header th, #calendar-sticky-header td {box-sizing: border-box;}
#calendar th, #calendar-sticky-header th {font-weight: normal; vertical-align: middle;}
#calendar-sticky-header th {padding-bottom: 8px;}
.hour-grid {width: 36px; vertical-align: top;}
.hour-grid:first-child {text-align: right;}
.hour-grid div {height: 80px; padding: 0 6px;}
.hour-grid div:last-child {height: auto;}
#event-table {position: relative;}
#event-table th, #calendar-sticky-header table td {background: #363636; color: #ffffff; height: 19px; padding: 5px; text-align: center;}
#event-table th.spacer {border-left: solid 4px #ffffff;}
#event-table th + th, #calendar-sticky-header table td + td {border-left: solid 1px #ffffff;}
#event-table .grid-row td {height: 20px; border-bottom: solid 1px #f0f0f0;}
#event-table .grid-row:nth-child(4n+4) td {border-bottom: solid 1px #dddddd;}
#event-table .grid-row td + td {border-left: dashed 1px #dddddd;}
#event-table .grid-row .spacer {border-left: solid 4px #dddddd;}
#event-table .grid-row .first {border-left: solid 1px #dddddd;}
#event-table .grid-row .last {border-right: solid 1px #dddddd;}
#event-row {position: absolute; top: 0; left: 0; width: 100%; display: table;}
#event-row td {position: relative;}
.event {cursor: pointer;}
.event, .event-disabled {position: absolute; background: #e0e0e0; border-radius: 6px; overflow: hidden;}
.event.unavailability {box-shadow: 0 0 4px 0 #c8c8c8;}
.event.past, .event-disabled.past {opacity: 0.8;}
.event-web-status {background: rgba(255, 255, 255, 0.35); padding: 2px 12px;}
.event-content {padding: 4px 12px;}
.event-time > * {vertical-align: middle;}
.event-time img {width: 10px; margin-right: 2px;}
.event-disabled .cancel-unavailability {display: none;}
.event .cancel-unavailability {float: right; background: #333333; color: #ffffff; width: 16px; text-align: center; cursor: pointer; opacity: 0;}
.event:hover .cancel-unavailability {opacity: 1;}
.event-resize-handle {position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; cursor: row-resize; background: #3d3d3d; opacity: 0.5;}
#calendar-add-events {position: fixed; right: 70px; bottom: 28px; z-index: 50;}
#calendar-add-events:after {display: block; content: ""; clear: both;}
#calendar-add-events .button {outline: none; width: 50px; height: 50px; display: block; float: right; clear: right; border-radius: 25px; margin-top: 14px; transition: width 0.2s, padding 0.2s; white-space: nowrap; position: relative; font-size: 0.75em; box-shadow: 0px 0px 6px 2px #dadada;; padding: 7px; text-align: right; overflow: hidden;}
#calendar-add-events .button:hover {width: 140px; padding: 7px 50px 7px 15px;}
#calendar-add-events .button .icon {font-size: 3.5em; padding: 15px 0 0 0; width: 50px; height: 50px; display: block; position: absolute; top: 0; right: 0; text-align: center; background: inherit;}
#create-phone-call {background: #ffffff; border: solid 1px #d5d5d5; color: #3d3d3d;}
#create-phone-call.button .icon {font-size: 4em; padding-top: 13px;}

/* Event form */
#event-form {opacity: 0.1;}
#event-form {position: relative; z-index: 60; transition: opacity 0.3s ease-out;}
#event-form.hover {opacity: 1;}
.event-form.event-form-modal .modal-header {height: 200px;}
.event-form.event-form-modal .modal-body {top: calc(10% + 200px); max-height: calc(80% - 200px);}
.event-form.event-form-page .modal-header {height: auto;}
.event-form.event-form-page .modal-body {height: auto;}
#event-deletion-form .modal-header {height: 64px;}
#event-deletion-form .modal-body {top: calc(10% + 64px); max-height: calc(80% - 64px);}
.event-form .modal-header h2 em {font-size: 0.5em;}
.event-form.event-form-page .modal-header h2 {margin: 0;}
.event-form .web-status {margin-bottom: 5px; font-size: 0.75em;}
.event-form .web-status span {display: inline-block; padding: 0 3px; background: #ffffff; color: #3d3d3d;}
.event-form .status input[type=button] {display: inline-block; margin-right: 3px; text-transform: uppercase; background: #f3f3f3; color: #3d3d3d;}
.event-form .form-actions {padding-bottom: 24px;}
.event-form .form-actions .button, .event-form .form-actions input[type=button], .event-form .form-actions input[type=submit] {display: inline-block; min-width: 150px; vertical-align: middle;}
.event-form .form-actions p + p {margin-top: 12px;}
.event-form .rule-by-day label {width: 15%; min-width: 30px; margin-top: 8px;}
.event-form .cancel-origin label {margin: 1em 32px 0 0;}
.event-form .edit-event-rule legend, .event-form .cancel-origin legend {font-size: 0.8em; display: block; margin: 12px 0 4px 0;}
.event-form .rule-until-checkbox legend {font-size: 0.8em; margin: 12px 0 1.5em 0;}
.event-form .cancel-origin legend {font-weight: bold;}
.event-form .rule-until-date {margin-top: 1.5em;}
.event-form .rule-until .date-picker input[type=button] {border: solid 1px #00b0ec;}
#recurrence-output-text {font-size: 0.8em; font-weight: bold;}
.event-form .print-event-button {font-size: 0.85em;}
.event-form .print-event-button .title-icon {width: 20px;}
.edit-event-option input {display: none;}
.edit-event-option div {border: solid 1px #d5d5d5; padding: 16px;}
.edit-event-option input:checked + div {border: solid 1px #00b0ec;}
.edit-event-option div > * {display: inline; vertical-align: middle;}
.edit-event-icon {width: 70px; margin-right: 10px;}
#event-product-list {list-style-type: none; font-size: 0.9em;}
#event-product-list a {color: #00b0ec;}

/* Search result modal */
#search-result-modal {z-index: 55;}
#search-result-modal .search-result-body {overflow: visible;}
#search-result-modal .search-result-summary {padding: 24px 16px; background: #f3f3f3; border: solid 1px #d5d5d5; border-bottom: none;}
#search-result-modal .item {padding: 16px; border: solid 1px #d5d5d5; position: relative;}
#search-result-modal .item + .item {border-top: none;}
#search-result-modal .item:after {display: block; content: ""; clear: both;}
#search-result-modal .item .status {position: absolute; top: 0; left: calc(100% - 16px); width: 116px;}
#search-result-modal .item .status:after {display: block; content: ""; clear: both;}
#search-result-modal .item .status .caret {float: left; width: 16px; height: 16px; border-width: 8px; border-style: solid;}
#search-result-modal .item .status .text {float: left; width: 100px; padding: 4px; display: none;}
#search-result-modal .item:hover .status .text {display: block;}
#search-result-modal .item .status .caret.green {border-color: #4dcb8e #4dcb8e #ffffff #ffffff;}
#search-result-modal .item .status .caret.blue {border-color: #4a8df8 #4a8df8 #ffffff #ffffff;}
#search-result-modal .item .status .caret.yellow {border-color: #f5ad3f #f5ad3f #ffffff #ffffff;}
#search-result-modal .item .status .caret.red {border-color: #dd4f43 #dd4f43 #ffffff #ffffff;}
#search-result-modal .item .status .caret.gray {border-color: #e0e0e0 #e0e0e0 #ffffff #ffffff;}
#search-result-modal .item .summary {float: left;}
#search-result-modal .item .summary-from-website {color: #929292; text-transform: uppercase;}
#search-result-modal .item .action {float: right; padding-top: 1em;}
#search-result-modal .item .action a {color: #00b0ec;}

/* Date-time picker */
/* Date picker */
.date-picker {position: relative; max-width: 250px;}
.date-picker input[type=button] {width: 100%; background: #ffffff url('/css/img/icons/calendar.svg') no-repeat; background-position: center right 24px; background-size: 20px 20px; color: #3d3d3d; padding: 12px 24px; text-align: left; border-left: solid 1px #00b0ec; border-right: solid 1px #00b0ec;}
.date-picker-mini-calendar {background: #ffffff; color: #3d3d3d; position: absolute; top: 100%; left: 0; z-index: 20; width: 100%; border: solid 1px #00b0ec; border-top-color: #f3f3f3; display: none; padding: 12px;}
.date-picker-mini-calendar .title {padding: 12px;}
.date-picker-mini-calendar .title a {float: right; padding: 3px 6px 0 6px;}
.date-picker-mini-calendar .title a img {width: 8px; height: 15px;}
.date-picker-mini-calendar .title h4 {text-transform: uppercase; font-size: 1.2em;}
.date-picker-mini-calendar td {height: auto; padding: 5px 0;}
.date-picker-mini-calendar td div {position: static;}
.date-picker-mini-calendar td span {padding: 0;}
.date-picker-mini-calendar .regular {cursor: pointer;}
.date-picker-mini-calendar .regular:hover {font-weight: bold;}
/* Time picker */
.time-picker-label {width: 32px; float: left; padding-top: 13px;}
.time-picker-label + .time-picker {width: calc(100% - 32px); float: left;}
.time-picker:after {display: block; content: ""; clear: both;}
.time-picker select {float: left; width: 50%; max-width: 100px; padding: 12px 18px; font-weight: bold;}
.time-picker select + select {border-left: none;}

/* Chat */
#chat-section {max-width: 1200px; margin: 0 auto; padding: 0 24px;}
#chat-section .content {padding-top: 56px;}
#chat-section .date-separator {padding: 56px 0 24px 0; text-align: center; color: #c9c9c9; clear: both;}
#chat-section .message {width: 75%; margin: 1em 0; clear: both;}
#chat-section .message.ours {float: right;}
#chat-section .message.theirs {float: left;}
#chat-section .message:after {display: block; content: ""; clear: both;}
#chat-section .message-author {margin-bottom: 0.75em; color: #d5d5d5;}
#chat-section .message.ours .message-author {display: none;}
#chat-section .message.theirs .message-author {width: 48px; height: 48px; text-transform: uppercase; font-size: 16px; background: #00b0ec; border-radius: 24px; color: #ffffff; text-align: center; padding-top: 15px; margin-right: 24px; float: left;}
#chat-section .message.ours .message-author + div {float: right; max-width: 100%;}
#chat-section .message.theirs .message-author + div {float: left; max-width: calc(100% - 72px);}
#chat-section .message-content {padding: 24px; line-height: 1.5em}
#chat-section .message.ours .message-content {background: #e0e0e0; color: #333333; border-radius: 12px 12px 0 12px;}
#chat-section .message.theirs .message-content {background: #d5effd; color: #333333; border-radius: 12px 12px 12px 0;}
#chat-section .message-time {margin-top :4px; color: #c9c9c9; font-size: 0.75em;}
#chat-section .message.ours .message-time {text-align: right;}
#message-list {overflow-y: scroll; padding-right: 24px;}
#message-form {padding: 56px 0; position: relative;}
#message-form:after {display: block; content: ""; clear: both;}
#message-form-content {height: 96px; border-radius: 12px; padding: 24px 96px 24px 24px; font-size: 14px;}
#message-form-submit {width: 48px; height: 48px; border-radius: 50%; position: absolute; top: 80px; right: 24px;}
#message-form-submit img {width: 100%;}
.login-msg {max-width: 720px; margin: 60px auto 0;}
.login-msg-title {color: #E30613; font-size: 15px; font-weight: 600; line-height: 20px; margin-bottom: 16px; text-align: left;}
.login-msg-content {padding: 16px 24px; background: #E0F6FF; border-radius: 10px; border-left: 5px solid #009EE0;}
.login-msg-content p {color: #2D2D2D; font-size: 14px; line-height: 20px; }
.login-msg-content-grey {color: #747474; font-size: 14px; font-weight:700; }
.login-msg-content-blue {color: #06457E; font-size: 14px; font-weight:700; }