/* This file is ROOT MANAGER styles */
/* 100% width,height are needed for conatiners so they fill the browser screen,
	for sliedout.js functionality */
body, html {
	width: 100%;
	height: 100%;
	font-size: 14px;
	line-height: 1.25;
}

/* used for slideout */
#body_panel{
	width: 100%;
	height: 100%;
}

body,html,input,textarea,p,div,span,
th,td,table,table tr td, table tr th,
input[type=text],input[type=submit],input[type=email],input[type=url],input[type=tel] {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
input[type=text], input[type=password],input[type=email],input[type=tel] {
	padding-left:5px;padding-right:5px;
}
table.compact th,table.compact td {
	padding-bottom:0px;
}
td {
	vertical-align:top;
}
th {
	vertical-align:bottom;
}
th.group-th, tr.group-th {
	font-weight: bold;
	font-size: 18px;
}

.xlarge, th.xlarge, td.xlarge, .xlarge.xlarge {
	font-size:150%;
}
.large, th.large, td.large, .large.large {
	font-size:125%;
}
.medium, .medium.medium {
	font-size:medium;
}
.small, td.small, table.heavy tr td.small, th.small, .small.small {
	font-size:85%;
}
.xsmall, .xsmall.xsmall {
	font-size:75%;
}

.lightgray {
	color:#ddd;
}
.weak {
	color:#999;
}

a, a.blue, .blue {
    color:#0079b2;
}
a:hover {
	color:navy;
}

.notice {
	font-weight:bold;
	color:green;
}

#main_container {
    max-width:1024px;
    margin:0.75em 0.5em 3em 1.25em;
    padding-bottom:3em /* safari needs this since it ignores the bottom margin */
}
html.mh-mobile #main_container {
    margin-left: 1.0em;
    margin-right: 1.0em;
}
#main_container.ml0 {
    max-width:1024px;
    margin:0.75em 0.5em 3em 0em;
    padding-bottom:3em /* safari needs this since it ignores the bottom margin */
}

html.mh-mobile .mobile-expand {
	width:100%;
}

.widthmax-standard,
#main_container.widthmax-standard {
	/* decided by old look on ticket screen */
	max-width:800px;
}

.editable {
    cursor: pointer;
    text-decoration: underline;
    color:#0079b2;
}

.pageName {
    color: #000;
    font-weight: bold;
    font-size: 24px;
}

.section-header {
	font-weight:bold;
	margin-bottom:5px
}

fieldset {margin-bottom:1em}
legend {font-weight:600}
.clickable{cursor:pointer}

.medium_blue_background {
    background-color:#0079b2;
}
.light_blue_background {
    background-color:#dfeffc;
}
.pale_yellow_background {
    background-color:#fcf8e3;
}
.dark_blue {
    color:#063f60;
}
.medium_blue {
    color:#0079b2;
}
.light_blue {
    color:#dfeffc;
}
.pale_yellow {
    color:#fcf8e3;
}
.black {
    color:#000;
}
.orange-border {
	border:2px solid orange;
}
.red-border {
    border:2px solid red;
}

th,td {
    padding:2px 5px 2px 2px;
    text-align:left;
}

.errors, .error {
    color:red;
    font-weight:600;
}
.errors p {
    margin-left:10px;
}
.errors ul {
    list-style-type:none;
}

/* Override jQuery widget Font Settings */
.ui-widget {
	font-family: inherit;
	font-size: 1em; /* no need to make it 1.1em */
}
.ui-dialog .ui-dialog-content {
	padding-right: 1.1em;
	padding-left: 1.1em;
	/* NOTE: original is set to 1em.
		since we made font smaller, this ensures scrollbar fits into padding on most browsers
		which is helpful when dialog content is big enough to give
		content scrollbars */
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: inherit;
}

/* secondary button */
.ui-button-secondary {
	color: rgb(85,85,85);
	border-color: rgba(119,119,119,0.35);
	background-image: none;
	background-color: #eee;
}
.ui-button-secondary.ui-state-hover {
	color: rgb(65,65,65);
	border-color: rgb(119,119,119);
    background-color: #e9e9e9;
}
.ui-button-secondary.ui-state-active {
	border-color: rgb(119,119,119);
    background-color: #eee;
}

/* red button */
.ui-button-red {
    color: white !important;
    border-color: red !important;
    background-color: red !important;
    background-image: none !important;
}
.ui-button-red.ui-state-hover {
    color: red !important;
    border-color: red !important;
    background-color: #fff !important;
}
.ui-button-red.ui-state-active {
    color: red !important;
	border-color: red !important;
    background-color: #fff !important;
}

/* green button */
.ui-button-green {
	color: white !important;
	border-color: green !important;
	background-color: green !important;
	background-image: none !important;
}
.ui-button-green.ui-state-hover {
	color: green !important;
	border-color: green !important;
	background-color: #fff !important;
}
.ui-button-green.ui-state-active {
	color: green !important;
	border-color: green !important;
	background-color: #fff !important;
}

/* pink button */
.ui-button-pink {
	color: white !important;
	border-color: #EE1675 !important;
	background-color: #EE1675 !important;
	background-image: none !important;
}
.ui-button-pink.ui-state-hover {
	color: #EE1675 !important;
	border-color: #EE1675 !important;
	background-color: #fff !important;
}
.ui-button-pink.ui-state-active {
	color: #EE1675 !important;
	border-color: #EE1675 !important;
	background-color: #fff !important;
}

/* Override jQuery active color to Red: */
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	color: #d73939;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited,
.ui-button-secondary.ui-state-active {
	color: #d73939;
}

.ui-button-secondary.ui-state-active {
	color: #d73939;
}

.ui-buttonset.ui-buttonset-tabs .ui-button {
    margin-right: 0.3em;
    border-bottom: 0 none;
}

.ui-icon{
    cursor:pointer;
}
.ui-dialog,
.ui-dialog table,
.ui-autocomplete {
    text-align:left;
}

.ui-label-new {
	color: white !important;
	border-color: #0079b2 !important;
	background-color: #0079b2 !important;
	background-image: none !important;
	border-radius: 15%;
	font-size: 0.75rem;
	padding: 2px 4px
}

#dialog-overlay {
	display: flex;
	justify-content: center;
	align-items: center;
  }

.dialog-overlay-mesg {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	background-color: rgba(185,185,185, 0.4);
	overflow-x: hidden;
	transition: 0.5s;
}

.burnt-toast {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 500px;
  border: 1px solid grey;
  background-color: #FFF;
  color: grey;
  border-radius: .5rem;
}

.burnt-toast-title {
	font-weight: bold;
	font-size: 1.25rem;
	color: rgb(128, 128, 128);
}

.burnt-toast-body {
	padding: 10px;
}

.burnt-toast-footer {
	display: flex;
	justify-content: flex-end;
	padding: 20px 20px;
	gap: 40px;
}

.help-text {
	font-size: 0.875rem;
	color: #0079b2;
	margin-top: 4px;
}

/*
 * SOME RESPONSIVE STYLES:
 */

html.min-width-desk .nowrap-desk{
	white-space: nowrap;
}

/*
 * OTHER COMMON CSS
 */

/* leave me AFTER the global select styling! */
select.multiple {
	height:5em;
	overflow:auto;
	min-width:20em;
	padding:4px;
	/* sorry, this breaks Chrome on a multiple select 2015-07-29 clottes:
	-moz-appearance: menulist;
    -webkit-appearance: menulist;
    appearance: menulist;
    */
}
select.multiple_tall {
	height:10em;
	overflow:auto;
	min-width:20em;
	padding:4px;
	/* sorry, this breaks Chrome on a multiple select 2015-07-29 clottes:
	-moz-appearance: menulist;
    -webkit-appearance: menulist;
    appearance: menulist;
    */
}

#appointment_dialog_button_container .ui-button-text-only .ui-button-text {
    padding: 0.4em;
}

/* --- FORMS --- */

.button {
	text-align: center;
}

input.disabled-invisible {
	background-color: lightgray;
	color: lightgray;
}

.labelColor {
	color:#0079b2;
}

.inputForm caption {
	padding-top: 5px;
	padding-bottom: 5px;
}

/* for use when the label is next to a text box that has the calendar icon next to it as well */
.dateLabel, td.dateLabel {
  padding-top:10px !important;
}

.label, td.label, .inputForm td.label,
.inputForm td.labelLeft, td.labelLeft,
.inputForm label.label,
.inputForm label.labelYear {
    text-align: left;
	font-weight: 500;
	color:#0079b2;
	padding-right: 5px;
	padding-top:4px;
}

td.value, .inputForm td.value, .td-value {
 	padding-top:4px;
 	text-align: left;
}

.inputForm td.labelRed {
	color: red;
	font-weight: 500;
	text-align: left;
	padding-right: 5px;
	padding-top:4px;
}

.inputForm td.valueRed {
	color: red;
	padding-top:4px
}


.inputForm td.labelCenter {
	font-weight: 500;
	text-align: center;
	color:#0079b2;
}

.inputForm td.labelCenterLarge {
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	color:#0079b2;
}

.inputForm td.labelRight, td.labelRight {
	color:#0079b2;
	font-weight: 500;
	text-align: right;
	padding-right: 5px;
	padding-top:4px;
}

.inputForm td.required {
    font-weight: 500;
	text-align: left;
	color: red;
	padding-right:5px;
	padding-top:4px;
}

.inputForm input {
    text-align: left; /* shouldn't need this */
}

.inputForm input.button {
	text-align: center;
}

.inputForm select {
    text-align: left; /* shouldn't need this */
}

.error {
	color:red;
}

/* --- END FORMS --- */

/* listTickets.jsp */
html.desk-mode td.listTickets-empty-cell{
	padding: 5em;
}
html.mobile-mode td.listTickets-empty-cell{
	padding: 1em;
}

/* END listTickets.jsp */
.paginationjs-blue .paginationjs .paginationjs-pages li.active>a {
    background: #0079b2;
}
/* ------ CASH DRAWER ------ */

input.cashDrawerInput{
	max-width: 4em;
	padding-right: .5em;
	text-align: right;
}

/* --- END: CASH DRAWER --- */


table.ticket thead tr {
	color: #0079b2;
	font-weight: bold;
	font-size: 14px;
}

table.ticket caption {
	text-align: center;
	font-weight: bold;
}

table.ticket tr.even {
	background-color: #FFFFDD;
}

table.ticket {
    border: 1px solid #ccc;
	border-collapse: separate;
	width:100%;
	margin-top:10px
}

table.ticket #button_cell .jqbutton{
	margin-bottom: 1em;
}

table.ticket td.bleft,table.ticket th.bleft {
	border-left: 1px solid #ccc;
}
table.ticket td.bright,table.ticket th.bright {
    border-right: 1px solid #ccc;
}
table.ticket td.bbot,table.ticket th.bbot {
    border-bottom: 1px solid #ccc;
}
table.ticket td,table.ticket th {
	padding: 2px 4px 2px 4px;
}
table.ticket th {
	white-space: nowrap;
}
table.ticket td.large,table.ticket th.large {
	font-size:16px;
}
table.ticket input {
	text-align: right;
    margin-top:6px;
}

table.ticket .tktTotals {
	font-weight: bold;
	text-align: right;
	padding-right: 8px;
	background-color: #fcf8e3;
    padding-top:8px;
    border-left: 1px solid #ccc;
}

table.ticket .tktTotalsLabels {
	font-weight: bold;
	text-align: right;
	height: 2em;
    padding-top:8px;
}

table.ticket .tktPreTotals {
	font-weight: bold;
	text-align: right;
	padding-right: 8px;
	/* background-color: #fcf8e3; */
	/* font-size: 12px; */
	/* border-top: thin solid black; */
    padding-top:9px;
}

table.ticket .tktPreTotalsLabels {
	font-weight: bold;
	text-align: right;
	height: 2em;
	/* font-size: 12px; */
	padding-top:9px;
}

table.light {
 	border: 1px solid #ccc;
	border-collapse: collapse;
}
table.light thead,table.light tbody {
 	border: 1px solid #ccc;
}

table.light thead th {
	border: 1px solid #ccc;
	background-color:#dfeffc;
}
table.light td {
 	border: 1px solid #ccc;
}
table.light td,table.light th {
	font-size: 12px;
}

table.padded td, table.padded th {
	padding:4px;
}

table.heavy, table.heavysmall, .table-border {
    border: 1px solid #0079b2;
    border-collapse: separate;
}

table.border-none {
	border-collapse: collapse;
	border: none;
}

/* just table.heavy */
table.heavy tbody tr:nth-child(even) {
	background-color:#f5f5f5;
}
table.heavy tbody tr.massUpdateRowHighlight {
    background-color:#ccffcc !important;
    background-color:rgba(26,255,26,.2) !important;
}
/*
table.heavy thead, table.heavy tbody {
	border-left: 1px solid red;
	border-right: 1px solid red;
}
*/
table.heavy thead tr, table.heavy tbody tr.group-th {
	background-color: #dfeffc;
	color: #0079b2;
	font-weight: bold;
	font-size: 14px;
}
table.heavy caption {
	font-weight: bold;
}
table.heavy td {
	padding:4px 10px 4px 3px;
}
table.heavy th {
	padding:4px 10px 4px 3px;
}

table.heavysmall thead tr {
	background-color: #dfeffc;
	color: #0079b2;
	font-weight: bold;
	font-size: 12px;
}

table.heavysmall caption {
	font-weight: bold;
	font-size: 12px;
}

table.heavysmall tbody tr:nth-child(even) {
	background-color:#dfeffc;
}

table.heavysmall td,
table.heavysmall th {
	border: 1px solid #0079b2;
	padding: 2px 4px 2px 4px;
	font-size: 12px;
}


table.paleyellow td, table.paleyellow th {
	padding:4px;
	border-spacing: 4px;
}
table.paleyellow th {
	background-color:#fcf8e3;
	border-top:2px solid tan;
}
table.paleyellow tbody tr {
	border-bottom:1px solid #eee
}
table.paleyellow tbody tr th {
	font-weight:bold
}

table.lightblue td, table.lightblue th {
	padding:4px;
	border-spacing: 4px;
}
table.lightblue th {
	background-color:#dfeffc;
	border-top:2px solid #0079b2;
}
table.lightblue tbody tr {
	border-bottom:1px solid #eee
}
table.lightblue tbody tr th {
	font-weight:bold
}


table.waitList thead tr {
	background-color: #dfeffc;
	color: #000;
	font-weight: bold;
	font-size: 14px;
}

table.schedApptSvc caption {
	text-align: center;
	font-weight: bold;
	font-size: 14px;
}

table.schedApptSvc tr.even {
	background-color: #dfeffc;
}

table.schedApptSvc {
	border: 1px solid #0079b2;
	width: 100%;
	height: 200;
	text-align: center;
	border-collapse: collapse;
	margin: 5px 5px 5px 5px;
}

table.schedApptSvc td,table.schedApptSvc th {
	border: none;
	padding: 2px 4px 2px 4px;
	vertical-align: middle;
	font-size: 9pt;
	color: #000;
}

table.schedApptBldSvc caption {
	text-align: center;
	font-weight: bold;
	font-size: 10pt;
}

table.schedApptBldSvc tr.even {
	background-color: #dfeffc;
}

table.schedApptBldSvc {
	text-align: center;
	border-collapse: collapse;
	margin: 5px 5px 5px 5px;
}

table.schedApptBldSvc td,table.schedApptBldSvc th {
	border: none;
	font-weight: bold;
	padding: 2px 4px 2px 4px;
	vertical-align: middle;
	font-size: 9pt;
	color: #000;
}

/* adjust only if in jQuery Tooltip */
div.ui-tooltip .no-tooltip-border{
	border:none;
}

.addSvc {
	height: 320;
	overflow: auto;
}

.addSvcGrp {
	font-weight: bold;
	padding-top:5px
}

.addSvcSvc {
	padding-left:3px;
	white-space:nowrap;
}

#customerTable{
	margin-top:15px;
}
#clientTypePanelDiv {
	text-align: center;
}
#mainTable{
	text-align: left;
}

.colorKeyDiv{
	text-align:center;
	float:left;
	padding:20px;
}
.colorKeyDiv td{
	white-space:nowrap;
}

.contentDiv {
	width: 800px;
	overflow: hidden;
}

.clearfix:after,
.clear:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clear {clear:both;}
.clearfix {display:inline-block;clear:both;}

.disabled,
th.disabled.disabled,
td.disabled.disabled,
.disabled td {
	/* color:#aaa; */
	color:grey;
}

table.finishTkt caption {
	font-weight: bold;
}

table.finishTkt {
	border: 1px solid #ccc;
	border-collapse: collapse;
	margin: 10px 0 10px 0;
}

table.finishTkt td,
table.finishTkt th {
	border: 1px solid #ccc;
}

#collect-payment {
	overflow: auto;
	padding:0;
	max-width:500px;
}

#collect-payment .addTips {
	background-color:#E28937;
	color:#FFF;
	text-decoration:none;
	padding:5px;
	padding-right:25px;
	padding-left:25px;
	border-top:20px;
	font-weight:bold;
	font-size:12px;
}
#collect-payment .finishTkt{
	max-width:510px;
	padding:0 2px;
}
#collect-payment table td.rowLabel {
	text-align:left;
	font-weight:bold;

}
#collect-payment table td span.rowLabel {
	font-weight: bold;
	padding-right:10px;
}
#collect-payment table td input.notes {
	/*font-size: 8pt;*/
}
#collect-payment table td #gcNumRm {
	position:relative;
	display:inline;
	left:20px;
	bottom:5px;
}

td.finishInput, .finishInput input {
	text-align: right;
}

#collect-payment .finishLabel {
	font-weight:bold;
	line-height:1.5em;
	vertical-align: middle;
}
#collect-payment .finishTotal {
	text-align: right;
	line-height:1.5em;
	vertical-align: middle;
}

.discount-section{
	color:green;
	float:right;
	margin:5px;
	font-size:12px;
	padding-top:5px;
}
.discount-section a.applied-discount, .discount-section .applied-discount {
	color:green;
}

.logout {
	text-decoration: none;
	border: thin solid black;
	color: blue;
	border-color: blue;
	padding: 3px;
}

.logout:hover {
	text-decoration: underline;
}

a.menuListing {
	color: #000;
	font-size: 10pt;
	text-decoration: none;
}

ul.menuListing {
	color: #000;
	font-size: 10pt;
	text-decoration: none;
/* 	width: 500px; */
}
a.menuListing:hover {
	color: gray;
	font-weight: bold;
}

#timeClockContainer {
	border:none;
}

#clientLogTabs ul li a {font-size:13px}


.onoff-container {
	clear:both;margin:4px 0px;height:28px;
}
.onoff-switch {
	float:left;
	position: relative;
	width:50px;
	-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
	margin-bottom:8px;
}
.onoff-label {
	float:left;margin:3px 0px 2px 6px
}

.onoffswitch {
    position: relative; width: 50px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    height: 20px; padding: 0; line-height: 20px;
    border: 2px solid #CCCCCC; border-radius: 20px;
    background-color: #FFFFFF;
    transition: background-color 0.3s ease-in;
	max-width:80px;
}
.onoffswitch-label:before {
    content: "";
    display: block; width: 20px; margin: 0px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 28px;
    border: 2px solid #CCCCCC; border-radius: 20px;
    transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
    background-color: #22BA22;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
   border-color: #22BA22;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
    right: 0px;
}

.onoffswitch-checkbox.disabled + .onoffswitch-label {
    background-color: gray;
}
.onoffswitch-checkbox.disabled + .onoffswitch-label, .onoffswitch-checkbox.disabled + .onoffswitch-label:before {
   border-color: gray;
}


/* Add Service To Ticket - dialog */
/*
div.addSvcSvc select {
	width: 14em;
}
option.performs-service {
	font-weight: bold;
}*/
option.not-performs-service {
	color: gray;
}

/* iOS no-zoom on inputs (won't do if font big enough)
	We don't want to override buttons, etc. here, that's why the long list
*/
body.iphone input[type=text],
body.iphone input[type=submit],
body.iphone input[type=email],
body.iphone input[type=url],
body.iphone input[type=tel],
body.iphone input[type=password],
body.iphone input[type=number],
body.iphone input[type=search],
body.iphone input[type=range],
body.iphone input[type=color],
body.iphone input[type=date],
body.iphone input[type=datetime-local],
body.iphone input[type=time],
body.iphone input[type=week],
body.iphone input[type=month],
body.iphone input[type=file]
{
	font-size: 16px;
}

.hide-overflow-x {
	overflow-x: hidden;
}


.fw-panel-burnt {
	border:1px solid #CC5500;
	border-radius:4px;
	margin-bottom:1.5em;
	margin-right:1em;
}
.fw-panel-burnt .fw-panel-title {
	background-color:#CC5500;
	/*color:#0079b2;*/
	color:white;
	font-size:115%;
	font-weight:bold;
	border-radius: 4px 4px 0px 0px;
	padding:6px;
	border-bottom:1px solid #CC5500;
}

.fw-panel-green {
	border:1px solid lightseagreen;
	border-radius:4px;
	margin-bottom:1.5em;
	margin-right:1em;
}
.fw-panel-green .fw-panel-title {
	background-color:lightseagreen;
	/*color:#0079b2;*/
	color:white;
	font-size:115%;
	font-weight:bold;
	border-radius: 4px 4px 0px 0px;
	padding:6px;
	border-bottom:1px solid lightseagreen;
}

.fw-panel {
    border:1px solid #0079b2;
    border-radius:4px;
	margin-bottom:1.5em;
	margin-right:1em;
}
.fw-panel .fw-panel-title {
  background-color:#dfeffc;
  color:#0079b2;
  font-size:115%;
  font-weight:bold;
  border-radius: 4px 4px 0px 0px;
  padding:6px;
  border-bottom:1px solid #0079b2;
}
.fw-panel .fw-panel-content,
.fw-panel-green .fw-panel-content,
.fw-panel-burnt .fw-panel-content {
    padding:0.5em;
    padding-right:2em
}

.fw-panel-content ul {
	list-style: none;
	margin: 4px;
	padding: 0px
}

.fw-panel-content ul li {
	padding-bottom: 8px
}

.fw-accordion {
  border:1px solid #c5dbec;
  border-radius: 4px;
  margin-bottom:4px;
  overflow:auto
}
.fw-accordion-inactive, .fw-accordion-hover-out {
  border:1px solid #c5dbec;
  border-radius: 4px;
  margin-bottom:4px;
}
.fw-accordion-active, .fw-accordion-hover-in {
  border:1px solid #0079b2;
  border-radius: 4px;
  margin-bottom:4px;
}
.fw-accordion .fw-accordion-title {
  font-size:11pt;
  font-weight:bold;
  padding:8px;
  padding-left:1em;
  color:#0079b2;
  cursor:pointer;
  margin:0px;
  background: #dfeffc url(https://code.jquery.com/ui/1.12.1/themes/redmond/images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
  border-radius:4px;
}
.fw-accordion-body {
  margin-bottom:0px;
  padding:8px 5px 2em 1em;
}

.membership-svc-product-container {
	display: flex; 
	justify-content: space-between; 
	flex-wrap: wrap; 
	gap:10px;
}

.ui-widget-subtext {
	padding: 2px 15px 5px 0px;
    font-size: 0.875em;
}

@media screen and (max-width: 500px){
	#main_container {
		margin-left:5px !important;
	}
    #main_container.ml0 {
        margin-left:0px !important;
    }
    #main_container .mobile-hide {
        display:none
    }

	.burnt-toast {
        width: calc(500px * .65);
    }
}

.form-item {
}
.form-item div:first-child {
	font-weight:bold;margin-bottom:3px
}