html { overflow: overlay; top: 0 !important; }

body, html { width: 100%; color: #305071 }
h1, h2, h3, h4, h5, h6 { color: #305071; sans-serif }
h1 { font-size: 1.7em; margin-bottom: 30px; font-weight: 300 }
h2 { font-size: 1.7em; line-height: 1.2em }
h3 { font-size: 1.2em; font-weight: 500 }
h4 { font-size: 1.1em; font-weight: 600; }
h5 { font-size: 1.2rem; font-weight: 500; margin-bottom: 2px }
p.large { font-size: 1.1em }
.column, .columns { height: inherit; }
.cover-container { overflow: hidden; height: inherit; width: 100%; }
.img-cover { height: inherit; width: inherit; object-fit: cover; }
a { color: #305071; }
a:hover, a:active, a:visited, a:focus { color: #305071; }
body.listing-detail #main a:hover { text-decoration: underline }
a.no-event:hover { cursor: default; }
.submit-row { margin-top: 30px }
button, .button, a.button { border-radius: 6px !important; color: white; padding: 5px 10px; background: #607ab2; font-size: 1em; margin-bottom: 0; font-weight: 600 }
button.large, .button.large, a.button.large { padding: 7px 12px; background: #607ab2; font-size: 1.2em }
button.quiet, .button.quiet, a.button.quiet { border: thin solid #607ab2; color: #607ab2; background: transparent }
button:disabled:hover { cursor: not-allowed }
a.button.new { margin-top: -6px }
button:hover, .button:hover, .button:focus, a.button:hover { cursor: pointer; background: #305071; color: white; text-decoration: none !important }
button.quiet:hover, .button.quiet:hover, a.button.quiet:hover { background: #607ab2; color: white }
a.button.cancel, a.button.cancel.large { color: #607ab2; background: transparent; border: 1px solid transparent }
a.button.cancel:hover, a.button.cancel.large:hover { border: 1px solid #607ab2 }
.scroller { overflow-y: auto; }
ul { list-style: none }
.house i { color: #aaa; border: thin solid #aaa; border-radius: 50%; padding: 3px; }
 body { height: 100vh; background: #f5f4f8/* url(/assets/img/bh-logo-blue.png) no-repeat right 45px bottom 20px; background-size: 140px*/ }
.row { max-width: 90em }
.row.narrow { max-width: 75em }
header { background: white; border-bottom: 1px solid rgba(140,139,137,.25); margin-bottom: 30px; color: #305071; padding-right: 10px; left: 0; right: 0; z-index: 9; position: fixed }
.dash header { margin-bottom: 60px }
.login .footer { display: none }
.dash h1 { display: inline-block; margin-right: 20px }
header .company-logo img { height: 40px; margin: 10px 20px }
.user-photo img { border-radius: 50%; height: 50px; width: 50px; margin: 10px 0 }
body.listing-detail #main .user-photo img { border-radius: 50%; height: 50px; width: 50px; margin: 0 0 10px 0 }
.user-photo.large img { border-radius: 50%; height: 150px; width: 150px; margin: 10px 0 }
.user-photo.tiny img { height: 25px; width: 25px; margin: 0 }
div.inits { background: #A0AABE; height: 50px; width: 50px; border-radius: 50%; line-height: 50px; text-align: center; font-size: 1.4em; font-weight: 700; color: white }
header i { color: #FFFFFF75; font-size: 1.2em }
header a.active i { color: #FFF; }
header .fas.fa-pencil { margin-left: 7px }
header .columns.border { border-right: 1px solid #607ab220; padding: 23px 0; }
header .columns.border.first { border-left: 1px solid #607ab220; padding: 23px 30px; }
.footer { display: none }

@media print, screen and (min-width: 64.0625em) {
	header i { color: #607ab275; font-size: 1.2em }
	header a.active i, header a:hover i { color: #607ab2 }
	header .columns.border a { padding: 23px 30px; }
	.footer { padding: 0 40px 20px; height: 80px; display: block }
	::-webkit-scrollbar { width: 6px }
	::-webkit-scrollbar-track { background: #EFEFEF }
	::-webkit-scrollbar-thumb { background: #a0afd1 }
	::-webkit-scrollbar-thumb:hover { background: #607ab2 }
	.reveal::-webkit-scrollbar-track, .reveal::-webkit-scrollbar-thumb, .reveal::-webkit-scrollbar-thumb:hover { background: none }
}

.clickable:hover { cursor: pointer; }
.relative-position { position: relative; }
[type='file'] { width: auto; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-right-button { float: right; }
i.fa-trash-alt, i.fa-circle-minus { color: #e63946; opacity: .6 }
i.fa-trash-alt:hover, i.fa-circle-minus:hover { opacity: 1 }
.large-icon { font-size: 2em; padding: 0 10px; }
#main { padding-bottom: 20px; padding-top: 100px; min-height: calc(100vh - 80px) }
#main > .row { padding-right: 10px; }
.dash #main > .row { padding-right: 0; }
button.bare { border: 0; background: transparent; padding: 0; margin: 0; }

.reveal { padding: 80px 30px 50px; border: 0; background: #FFF; border-radius: 25px }
.reveal.details { background: white }
.hidden { display: none; }
.date-picker[readonly], .mini-picker[readonly] { cursor: pointer; background-color: #f9f9fb; }
.mini-picker[readonly], .mini-picker[type="date"] { display: inline; background-color: transparent; border: 0 !important; box-shadow: none !important; margin: 0; width: 85px; }
.time-picker-box.mini { position: absolute; right: 10px; background: white; padding: 10px 10px 0; border: thin solid #efefef; }
.time-picker-box input { display: inline; }
input#title-event-main { margin-bottom: 15px }
body.date-open .reveal-overlay { position: absolute; }

/* login */
body.login { display: flex; height: 100vh }
.login .logo { max-width: 300px; margin-bottom: 30px; }
.login .button { width: 100%; border: thin solid #305071; color: #305071; background: transparent; margin-top: 50px; padding: 15px; font-weight: 600 }
.login .button:hover { color: white; border-color: #305071; background: #305071 }
.blurry-bg { position: absolute; background-size: cover; z-index: -1; height: 100%; width: 100%; filter: blur(8px); opacity: .6 }
.login-form { background: white; padding: 30px; border-radius: 40px }
label { color: #305071 }
.login-form a { color: #305071 }
.login-form a:hover { text-decoration: underline; color: #e63946 }

.user-photo { position: relative }
header .user-photo:after { content: " \f107"; font: 15px/1 "Font Awesome\ 5 Pro"; opacity: .7; color: #5C5B59; margin-left: 5px }
.dropdown { clip: rect(auto, auto, 0, auto); position: absolute; right: 0; top: 70px; transition: clip 0.25s ease-in-out; background: white; z-index: 3; min-width: 190px }
.hover-activate:hover>.dropdown, .activated>.dropdown { clip: rect(auto, auto, 10rem, auto) }
.delete { display: inline-block; position: relative; }
.reveal .delete>.dropdown { display: inline-block; top: 0 }
.delete.activated >.dropdown { clip: auto; position: relative !important }
.delete.activated >.dropdown>div { display: inline-block; border-bottom: 0; padding: 0 10px }
.dropdown>div { padding: 8px 20px; border-bottom: 2px solid #f5f3f2; }
.dropdown>div a { color: #305071; white-space: nowrap; display: block }
.dropdown>div a:hover { color: #e63946; }
.reveal .dropdown { top: 50px; }
.schedule .dropdown, .documents .dropdown { top: 20px; }

.grid-box>.columns { margin-bottom: 20px; }
.listing-add { padding-top: 66%; border: thin solid #607ab2; position: relative; }
.listing-add:hover { color: #305071; border-color: #305071; }
.listing-add:hover i { color: #305071; }
.listing-add i { position: absolute; font-size: 50px; top: calc(50% - 25px); left: calc(50% - 25px); color: #607ab2; }
.list-box, .grid-box { display: none; }
body.list-view .grid-box { display: none; }
.list-icon, .grid-icon { padding: 10px; }
body.list-view .list-icon, body.grid-view .grid-icon { background-color: #607ab2; color: white; }
body.grid-view .grid-box { display: flex; }
body.list-view .list-box { display: flex; }
body.list-view .list-box .row { padding: 10px 0; }
.list-box>.columns>a:hover .row { background: white; }
.photo-row input[type="checkbox"] { margin: 10px auto; }
.photo-row img { padding: 2px; }

/* home */
#dashboard-header { margin-bottom: 40px }
h6.listing-status { padding: 1px 7px 0 7px; border-radius: 5px; color: white; margin: 10px 0 0; display: inline-block; text-transform: uppercase;
	font-weight: 600;	font-size: .8em }
h6.listing-status.pending { background: lightgray; }
h6.listing-status.active { background: #607ab2; }
h6.listing-status.presale { background: #f3c118; }
h6.listing-status.sold { background: #13b413; }
.dash.hide-view .sold { display: none; }

/* new listing wizard */

.underlined { border-bottom: 5px solid #607ab2 }
span.underlined { display: block; padding-bottom: 12px }
.listing-form { border-top: 1px solid #607ab250; margin-top: -3px; padding-top: 40px }
.progress-bar ul { width: 100% }
.progress-bar ul li { padding: 12px 20px 0; font-size: 1.2em; width: 100% }
.fas.fa-pencil { color: #607ab275 }
.fas.fa-pencil:hover { color: #607ab2 }

@media print, screen and (min-width: 40.0625em) {
	.progress-bar ul li { width: 33% }
}

body.new-listing.page-two input:hover { cursor: text; }
body.new-listing.page-two input:active, body.new-listing.page-two input:focus { outline: none; }
body.new-listing.page-three .schedule { padding: 20px; }
body.new-listing.page-three .schedule .scroller { padding: 0; }
body.new-listing.page-three .schedule .scroller>.row { padding: 8px 0; border-bottom: thin solid #607ab230; }
.add-people {  }
/* .reveal .add-people input { width: 100%; padding-left: 20px; border: 0; outline: none; box-shadow: none; height: 23px; margin: 0;} */
.reveal .person-section .column { display: contents }
.add-people input:focus { box-shadow: none; }
/* .add-people select { width: auto; padding: 0 25px 0 15px; margin-left: 20px; margin-bottom: 0; height: 25px; } */
.add-people .row { padding: 10px 0px; border-bottom: thin solid #607ab230; }
.person-section { margin-bottom: 20px }
.add-people .person-section { margin-bottom: 0; padding: 20px }


/* listing detail */

body.listing-detail aside { background-color: white; }
body.listing-detail>.row.expanded { height: 100%; }
body.listing-detail #main h3 { margin-bottom: 25px; border-bottom:1px solid #607ab275; padding-bottom: 8px }
body.listing-detail #main .cal-top h3 { margin-bottom: 0; padding-bottom: 0 }
body.listing-detail #main h1 { display: inline-block; margin-right: 20px; margin-bottom: 30px }
aside .company-logo { width: 100px; margin: 20px auto; }
ul#listing-nav { margin: 0 }
ul#listing-nav li { text-align: center; background-color: white; border-bottom: thin solid #ccc; }
ul#listing-nav li a { color: #305071; display: block; width: 100%; padding: 20px; font-size: 1.2em; }
ul#listing-nav li.active { background-color: #607ab2; }
ul#listing-nav li.active a { color: white; }
.dd { display: none; position: absolute; background: white; padding: 10px 20px; margin: 0; border: thin solid #eee; z-index: 9 }
.dd a { color: black; }
.dd ul a:hover { color: gray; cursor: pointer; }
.dd span { color: #305071; font-size: 1.2em; font-style: italic; }
.filter-input:hover { cursor: default; }
.template-picker.filter-input { background-image: url(../img/arrow.png); background-position: 100% 4px; background-repeat: no-repeat; background-size: 30px; border: thin solid rgb(202,202,202); border-radius: 3px; height: 39px; padding: 15px; width: 100%; background: #f9f9fb }

.person-section .filter-input { border: thin solid rgb(202,202,202); border-radius: 3px; height: 39px; padding: 15px; width: 100%; /*background: #f9f9fb;*/ margin: 0 0 1rem }

[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea, .date-picker, select, .filter-input { background-color: white; color: #305071; border: 1px solid #607ab250 !important; box-shadow: none !important }
.reveal label { color: #305071; font-weight: 500 }

.past-list { display: none; }
.current-list { display: block; }
body.past-view .past-list { display: block; }
body.past-view .current-list { display: none; }

i.message-light { visibility: hidden; position: relative; color: #27c727 !important; font-size: 0.7em; }
body.message-on i.message-light { visibility: visible; }
.refresh-link { visibility: hidden; }
.refresh-needed .refresh-link { visibility: visible; }

.cal-top { background-color: #607ab2; padding: 14px 15px 7px; margin: auto; justify-content: space-between; border-top-left-radius: 10px; border-top-right-radius: 10px }
.cal-top h3 { color: white; font-weight: 600; font-size: 1.8em }
.increment { font-size: 2em; padding: 0 10px; }
.increment i { color: white; }
.header .columns { text-align: center; }
.circle { height: 14px; width: 14px; border-radius: 50%; margin-bottom: 1px; /*margin: 0 auto*/ display: inline-block }
.circle i { color: white; font-size: 10px; position: relative; bottom: 6px; left: 2px; }
.circle.purple { background-color: #607ab2; }
.circle.green { background-color: #7f9938; }
.circle.red { background-color: #d14b4b; }
.circle.empty { border: thin solid #607ab2; height: 18px; width: 18px; background-color: #fcfbfa }
.cal-day { height: 135px; border-right: 1px solid #607AB225; border-bottom: 1px solid #607AB225 }
.cal-day:nth-of-type(36), .cal-day:nth-of-type(37), .cal-day:nth-of-type(38), .cal-day:nth-of-type(39), .cal-day:nth-of-type(40), .cal-day:nth-of-type(41), .cal-day:nth-of-type(42) { border-bottom: 0 }
.cal-day:nth-of-type(7), .cal-day:nth-of-type(14), .cal-day:nth-of-type(21), .cal-day:nth-of-type(28), .cal-day:nth-of-type(35), .cal-day:nth-of-type(42) { border-right: 0 }
.cal-day .row:first-child { color: #305071; margin-top: 10px }
.calendar { box-shadow: 1.8px 1.8px 4.5px rgba(0, 0, 0, 0.01),
	4.9px 4.9px 12.5px rgba(0, 0, 0, 0.015),
	11.8px 11.8px 30.1px rgba(0, 0, 0, 0.02),
	40px 40px 100px rgba(0, 0, 0, 0.03); border-radius: 10px }
.calendar .days { background: white; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px }
.calendar .header { background: white; color: #607ab2; border-bottom: 1px solid #607AB225; border-top: 1px solid #607AB225; font-weight: 500; font-size: .9em; padding: 5px 0 }
.cal-day.columns { padding-left: 4px; padding-right: 4px }
.cal-day .item { position: relative }
.cal-day .item span { color: #305071; font-size: .8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1em; padding: 3px 6px; border-radius: 6px; display: block }
.cal-day.past .item span { color: #a0afd1 }
.cal-day.past .item, .event-item.past { color: #a0afd1; text-decoration: line-through }
.cal-day.columns .row .columns { padding: 0 4px }
.cal-day .item:hover { color: #305071; background: rgba(96, 122, 178, 0.1) }
.cal-day span.day { width: 24px; height: 24px; text-align: center; line-height: 24px; border-radius: 50%; margin-bottom: 4px }
.cal-day.today span.day { border: 1px solid #d14b4b; font-weight: 600; color: white; background: #d14b4b }
.realtor-task-item, .client-task-item { border: 1px solid rgba(96, 122, 178, 0.25); display: none }
.docs { padding: 10px 0; }
.docs span a { color: #607ab2 }
.docs span a:hover { text-decoration: underline }

/* MODALS */
.cal-page { text-align: center; border: 1px solid #607ab2; width: 85px; margin-bottom: 20px }
.cal-page .month { display: block; background: #607ab2; text-transform: uppercase; color: white; font-size: 1.4em; font-weight: 600 }
.cal-page .day { font-size: 3em; font-weight: 400; color: #607ab2 }
button.modal-edit { width: 85px; padding: 8px 10px 7px }
button.modal-edit i { font-size: .9em }
.reveal h3 { font-size: 1.7em; margin-bottom: 10px; line-height: 1.1em; font-weight: 600 }
.reveal h4 { font-weight: 400; font-size: .9em; margin-bottom: 20px }
.reveal h5 { border-bottom: 1px solid rgba(96, 122, 178, 0.25); padding-bottom: 5px; margin-top: 25px; margin-bottom: 15px }
.reveal p { color: #4a5461; line-height: 1.3 }
.reveal#normal p, .reveal#different p, .reveal#noeffect p { font-size: 1.2rem }
.reveal#normal li, .reveal#different li, .reveal#noeffect li { font-size: 1.1rem }
button.close-button { border-radius: 50% !important; border: 2px solid #607ab2; width: 40px; height: 40px; position: absolute;
	top: 25px; right: 25px; background: transparent }
button.close-button span { position: absolute; top: 0; left: 10px; font-size: 1.1em; color: #607ab2 }
button.close-button:hover span { color: white }
button.close-button:hover { background: #607ab2 }
.delete button, .button.delete { border: thin solid #e63946; color: #e63946 !important; margin-right: 10px; background: transparent }
.delete button:hover, .button.delete:hover { border: thin solid #e63946; background: #e63946; color: white !important }
.delete button:hover i { color: white }
.reveal .fa-thin.fa-clipboard-list-check { font-size: 6em; color: #607ab2; display: block; margin-bottom: 20px }
.taskNotifyBox { margin-bottom: 15px }

@media print, screen and (min-width: 40em) {
.reveal.large {
		width: 85%;
}
@media print, screen and (min-width: 64em) {
.reveal.large {
		width: 65%;

}
@media print, screen and (min-width: 86.25em) {
.reveal.large {
		width: 50%;
		max-width: 75rem;
}

@media print, screen and (min-width: 1500px) {
	.cal-day { height: 150px }
}
@media print, screen and (min-width: 2000px) {
	.cal-day { height: 160px }
}

/* Schedule and Task List */
.schedule, .tasks { margin-bottom: 20px; padding-top: 30px; background: white; border-radius: 10px; position: relative; box-shadow: 1.8px 1.8px 4.5px rgba(0, 0, 0, 0.01),
	4.9px 4.9px 12.5px rgba(0, 0, 0, 0.015),
	11.8px 11.8px 30.1px rgba(0, 0, 0, 0.02),
	40px 40px 100px rgba(0, 0, 0, 0.03)
 }
.tasks { padding: 0 }
.schedule { padding: 0 0 10px }
.schedule .scroller, .tasks .scroller { padding-left: 35px }
.schedule .scroller, .tasks .scroller { height: 300px; padding: 20px 35px 0; background-repeat: repeat-y; background-position: 8% 0; background-size: 1px }
.listing-form .schedule .scroller { height: auto }
.schedule h4, .tasks h4 { margin-bottom: 0; }
.due { color: rgba(96, 122, 178, 0.6); }
.sched-row { margin-bottom: 20px; }
.sched-row h5 { font-size: 1em; font-weight: 600 }

.list-header { position: relative; padding: 20px 35px; background: #92a1bd50; border-top-left-radius: 10px; border-top-right-radius: 10px }
.list-header h4, .list-header button { display: inline-block }
.list-header h4 { font-size: 1.3em; margin-bottom: 0 }
.list-header button { position: absolute; right: 25px }

.sched-row .columns .row { border-bottom: 1px solid rgba(96, 122, 178, 0.25); }
.scroller .event-item { padding: 5px 0 }
.scroller .event-item.checked span { color: #a0afd1; text-decoration: line-through }
.show-link { display: none; }
body.hide-view .show-link, body.show-view .hide-link { display:inline; }
body.hide-view .event-item.checked, body.hide-view .hide-link, body.show-view .show-link { display:none; }
.event-title { text-overflow: ellipsis; overflow: hidden; white-space: nowrap }
.dash .event-title { line-height: 1.2 }
a.quiet-link { color: rgba(96, 122, 178, 0.6); font-size: .8em }
a.quiet-link:hover { color: #305071 }


input[type='checkbox'] { margin: 0 6px 0 0; width: 20px; height: 20px; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; border-radius: 50%; border: 1px solid #607AB2; position: relative; top: 3px }
input[type='checkbox']:checked { background-color: #607ab2; border: 1px solid #607ab2 }
input[type='checkbox']:checked:after { content: '\f00c'; font-family: "Font Awesome 5 Pro"; color: white; position: absolute; line-height: 1rem; font-size: 0.9em; padding-left: 3px; margin-top: 2px; font-weight: 600 }
input[type='checkbox']:hover { cursor: pointer; }
.control-link { font-size: 0.8em; position: relative; top: -15px; display: block !important; }
.hour-picker .columns, .minute-picker .columns { border: thin solid #efefef; }
.hour-picker .columns div, .minute-picker .columns div { height: 100%; width: 100%; padding: 20% 0; text-align: center; }
.hour-picker .columns:hover, .minute-picker .columns:hover {	cursor: pointer;	background: #efefef; }
.hour-picker .columns:hover span, .minute-picker .columns:hover span {	font-weight: bold; }

/* TOOLTIPS */
.item:hover .task__detail { display: block }
.cal-day:nth-of-type(6) .task__detail,
.cal-day:nth-of-type(7) .task__detail,
.cal-day:nth-of-type(14) .task__detail,
.cal-day:nth-of-type(13) .task__detail,
.cal-day:nth-of-type(21) .task__detail,
.cal-day:nth-of-type(20) .task__detail,
.cal-day:nth-of-type(28) .task__detail,
.cal-day:nth-of-type(27) .task__detail,
.cal-day:nth-of-type(35) .task__detail,
.cal-day:nth-of-type(34) .task__detail { left: inherit; right: 0 }

.cal-day:nth-of-type(6) .task__detail:after, .cal-day:nth-of-type(6) .task__detail:before,
.cal-day:nth-of-type(7) .task__detail:after, .cal-day:nth-of-type(7) .task__detail:before,
.cal-day:nth-of-type(13) .task__detail:after, .cal-day:nth-of-type(13) .task__detail:before,
.cal-day:nth-of-type(14) .task__detail:after, .cal-day:nth-of-type(14) .task__detail:before,
.cal-day:nth-of-type(20) .task__detail:after, .cal-day:nth-of-type(20) .task__detail:before,
.cal-day:nth-of-type(21) .task__detail:after, .cal-day:nth-of-type(21) .task__detail:before,
.cal-day:nth-of-type(27) .task__detail:after, .cal-day:nth-of-type(27) .task__detail:before,
.cal-day:nth-of-type(28) .task__detail:after, .cal-day:nth-of-type(28) .task__detail:before,
.cal-day:nth-of-type(34) .task__detail:after, .cal-day:nth-of-type(34) .task__detail:before,
.cal-day:nth-of-type(35) .task__detail:after, .cal-day:nth-of-type(35) .task__detail:before { left: inherit; right: 20% !important }

.task__detail{ width: 300px; display: none; position: absolute; left: 0; top: calc(100% + 10px); background: #fff; border: 1px solid rgba(166,168,179,0.2); color: #000; padding: 20px;box-sizing: border-box; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); z-index: 2 }
.task__detail:after,.task__detail:before { bottom: 100%; left: 20%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none }
.task__detail:before { border-bottom-color: rgba(166,168,179,0.2); border-width: 8px; margin-left: -8px }
.task__detail:after { border-bottom-color: #fff; border-width: 6px; margin-left: -6px }
.task__detail h2 { font-size: 15px; margin: 0; color: #305071 }
.task__detail p { margin-top: 4px; font-size: 12px; margin-bottom: 0; color: rgba(81,86,93,0.7) }
.task__detail p.time { color: #607AB2 }

/* Gallery */
.add-btn:hover { cursor: pointer; }
.grid-box>.columns { position: relative }
.grid-box>.columns div.item { position: relative; background: white; padding: 20px; height: 100%; box-shadow: 1.8px 1.8px 4.5px rgb(0 0 0 / 1%), 4.9px 4.9px 12.5px rgb(0 0 0 / 2%), 11.8px 11.8px 30.1px rgb(0 0 0 / 2%), 40px 40px 100px rgb(0 0 0 / 3%); transition: all .1s; border: 1px solid white; border-radius: 10px }

@media print, screen and (min-width: 64.0625em) {
	.grid-box>.columns div.item:hover { transform: scale(1.03) }
}
.grid-box>.columns div.item p { color: #305071; line-height: 1.3em; font-size: .9em }
.grid-box>.columns div.item .listing-status { margin-bottom: 10px }
.photo-controls { opacity: 0; position: absolute; top: 50%; right: calc(50% - 50px); transition: all 0.2s; }
.photo-controls i { color: white; text-shadow: 1px 1px 1px black; font-size: 2em; padding: 0 5px; margin: 0 5px; }
.grid-box>.columns:hover .photo-controls { opacity: 1; transition: all 0.2s; }
body.listing-detail .grid-box>.columns:first-child:before { content: 'Cover Image'; position: absolute; left: 21px; text-shadow: 1px 1px 1px black; color: white; }

/* Clients */
.listing.people img { border-radius: 50%; }
.listing.people h4 { text-align: center; }
.add-client { padding-top: 85%; margin-top: 20px; }
#main.people h4 { margin-bottom: 0; font-size: 1em }

/* Messages */
div.messages { border: 1px solid #CCC; background: #f1f6f9 }
div.messages .columns { padding: 0; background: white }
.tabs-content.vertical { margin: 0; }
.tabs-title a { display: block; }
ul.vertical.tabs { margin: 0 }
ul.vertical.tabs .tabs-title { padding: 2px 0 }
ul.vertical.tabs .tabs-title > a { padding: 3px 10px; color: #607ab2; border-radius: 5px }
ul.vertical.tabs .tabs-title > a span { font-size: .7em; display: inline-block; margin-bottom: 4px }
ul.vertical.tabs .tabs-title.is-active > a span {  }
ul.vertical.tabs .tabs-title > a:hover { text-decoration: none !important; color: #305071 }
ul.vertical.tabs .tabs-title > a:focus {  }
ul.vertical.tabs .tabs-title > a[aria-selected='true'] { background: #607ab230; color: #305071 }
.vertical .tabs-panel { min-height: 300px; padding: 0px 30px 40px; background: white; border-radius: 10px }

.cc-w .cc-i { border-top: 0 !important; margin-top: 0 !important; padding-top: 0 !important }
.cc-i-reply { display: none }
.cc-ll-i:last-of-type:after, .cc-ll-i:first-of-type:after { display: none }
.cc-w .cc-ll-i::before { content: none !important }
.cc-w .cc-ll-i::after { content: '|' !important; font-size: 0.875em; padding: 0 5px }
.cc-i-content { margin-bottom: 25px; border-bottom: 1px solid #607ab275 }
.cc-f-btn { background-color: #2ba6cb !important; font-size: 16px !important; color: #fefefe !important; border: 0 !important; margin-bottom: 0 !important; text-transform: none !important; border-radius: 4px !important; font-weight: 600 !important; padding: 0.5rem 1rem }
.cc-f-btn:hover { cursor: pointer }
.cc-i-header { margin-bottom: 2px; font-size: 1em !important; padding-bottom: 2px; border-bottom: 0px solid #DDD }
.cc-i-comment p { margin-bottom: 0 }
.cc-i-comment { padding-bottom: 30px; padding-left: 12px }
.cc-f-textarea { margin-top: 30px }
.cc-w a, .cc-w .cc-a { color: #2ba6cb !important }
.cc-ll-i { color: #607ab2 }
.message-scroll { max-height: 500px; overflow-y: scroll; display: flex; flex-direction: column-reverse }

.mail-icon { visibility: hidden; position: absolute; right: 30px; top: 30px; transition: all .15s; }
.mail-icon span { position: absolute; top: 3px; right: 8px; font-size: 0.7em; color: #305071; }
.fa-envelope { font-size: 2.5em; color: white; text-shadow: 0px 0px 8px #305071; }
.mail-icon:hover { transform: scale(1.1); transition: all .15s;}

.message-view .fa-circle { visibility: hidden; }

/* Profile page */
#preview-box .columns { height: 350px; margin-bottom: 15px; }
.img-preview { max-width: 200px; margin: 10px }

/* Settings page */
#success-notif { transition: opacity 0.3s; background: #305071; padding: 10px 20px; border-radius: 5px; color: white; position: absolute; font-size: 1.5em; top: 81px; left: 43%; }
.tabs-content { border-top: 1px solid #607ab250; margin-top: -3px; padding-top: 40px }
.tabs-content.vertical { border-top: 0; padding-top: 0 }
.settings .tabs { margin-bottom: 0 }
.settings .tabs li { display: inline-block }
.settings .tabs li a { color: #607ab2; padding: 12px 20px; font-size: 1.2em }
.settings .tabs li.is-active { border-bottom: 5px solid #607ab2 }
.settings .tabs li.is-active a { color: #305071; font-weight: 500 }
.pre-defined .table-row { height: 20px }
.pre-defined input[type="checkbox"] { vertical-align: middle; }