/* button 
http://webdesignerwall.com/tutorials/css3-gradient-buttons
---------------------------------------------- */
.z-button-os-disd {
	background: #eeeeee !important;
	border: solid 1px #AAAAAA !important;
	color: #AAAAAA !important;
	text-shadow: none !important;
}

.button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 1 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.button:hover {
	text-decoration: none;
}

.button:active {
	position: relative;
	top: 1px;
}

.bigrounded {
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}

.large {
	font-size: 18px;
	padding: .4em 1.5em .42em;
}

.medium {
	font-size: 14px;
	padding: .4em 1.5em .42em;
}

.small {
	font-size: 11px;
	padding: .2em 1em .275em;
}

/* color styles 
---------------------------------------------- */

/* black */
.black {
	color: #d7d7d7;
	border: solid 1px #333;
	background: #333;
	background: -webkit-gradient(linear, left top, left bottom, from(#666),
		to(#000));
	background: -moz-linear-gradient(top, #666, #000);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666',
		endColorstr='#000000');
}

.black:hover {
	background: #000;
	background: -webkit-gradient(linear, left top, left bottom, from(#444),
		to(#000));
	background: -moz-linear-gradient(top, #444, #000);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',
		endColorstr='#000000');
}

.black:active {
	color: #666;
	background: -webkit-gradient(linear, left top, left bottom, from(#000),
		to(#444));
	background: -moz-linear-gradient(top, #000, #444);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',
		endColorstr='#666666');
}

/* gray */
.gray {
	color: #e9e9e9;
	border: solid 1px #555;
	background: #6e6e6e;
	background: -webkit-gradient(linear, left top, left bottom, from(#888),
		to(#575757));
	background: -moz-linear-gradient(top, #888, #575757);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888',
		endColorstr='#575757');
}

.gray:hover {
	background: #616161;
	background: -webkit-gradient(linear, left top, left bottom, from(#757575),
		to(#4b4b4b));
	background: -moz-linear-gradient(top, #757575, #4b4b4b);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575',
		endColorstr='#4b4b4b');
}

.gray:active {
	color: #afafaf;
	background: -webkit-gradient(linear, left top, left bottom, from(#575757),
		to(#888));
	background: -moz-linear-gradient(top, #575757, #888);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757',
		endColorstr='#888888');
}

/* white */
.white {
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff),
		to(#ededed));
	background: -moz-linear-gradient(top, #fff, #ededed);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
		endColorstr='#ededed');
}

.white:hover {
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff),
		to(#dcdcdc));
	background: -moz-linear-gradient(top, #fff, #dcdcdc);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
		endColorstr='#dcdcdc');
}

.white:active {
	color: #999;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed),
		to(#fff));
	background: -moz-linear-gradient(top, #ededed, #fff);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',
		endColorstr='#ffffff');
}

/* orange */
.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a),
		to(#f47a20));
	background: -moz-linear-gradient(top, #faa51a, #f47a20);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a',
		endColorstr='#f47a20');
}

.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11),
		to(#f06015));
	background: -moz-linear-gradient(top, #f88e11, #f06015);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11',
		endColorstr='#f06015');
}

.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20),
		to(#faa51a));
	background: -moz-linear-gradient(top, #f47a20, #faa51a);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',
		endColorstr='#faa51a');
}

/* red */
.red {
	color: #faddde;
	border: solid 1px #980c10;
	background: #d81b21;
	background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24),
		to(#aa1317));
	background: -moz-linear-gradient(top, #ed1c24, #aa1317);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24',
		endColorstr='#aa1317');
}

.red:hover {
	background: #b61318;
	background: -webkit-gradient(linear, left top, left bottom, from(#c9151b),
		to(#a11115));
	background: -moz-linear-gradient(top, #c9151b, #a11115);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b',
		endColorstr='#a11115');
}

.red:active {
	color: #de898c;
	background: -webkit-gradient(linear, left top, left bottom, from(#aa1317),
		to(#ed1c24));
	background: -moz-linear-gradient(top, #aa1317, #ed1c24);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317',
		endColorstr='#ed1c24');
}

/* blue */
.blue {
	color: #d9eef7;
	border: solid 1px #0076a3;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee),
		to(#0078a5));
	background: -moz-linear-gradient(top, #00adee, #0078a5);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee',
		endColorstr='#0078a5');
}

.blue:hover {
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc),
		to(#00678e));
	background: -moz-linear-gradient(top, #0095cc, #00678e);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc',
		endColorstr='#00678e');
}

.blue:active {
	color: #80bed6;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5),
		to(#00adee));
	background: -moz-linear-gradient(top, #0078a5, #00adee);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5',
		endColorstr='#00adee');
}

/* rosy */
.rosy {
	color: #fae7e9;
	border: solid 1px #b73948;
	background: #da5867;
	background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c),
		to(#bf404f));
	background: -moz-linear-gradient(top, #f16c7c, #bf404f);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c',
		endColorstr='#bf404f');
}

.rosy:hover {
	background: #ba4b58;
	background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a),
		to(#a53845));
	background: -moz-linear-gradient(top, #cf5d6a, #a53845);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a',
		endColorstr='#a53845');
}

.rosy:active {
	color: #dca4ab;
	background: -webkit-gradient(linear, left top, left bottom, from(#bf404f),
		to(#f16c7c));
	background: -moz-linear-gradient(top, #bf404f, #f16c7c);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f',
		endColorstr='#f16c7c');
}

/* green */
.green {
	color: #FFFFFF;
	border: solid 1px #003396;
	background: #003396;
	background: -webkit-gradient(linear, left top, left bottom, from(#1846A0),
		to(#003396));
	background: -moz-linear-gradient(top, #1846A0, #003396);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1846A0',
		endColorstr='#003396');
}

.green:hover {
	color: white;
	background: #1846A0;
	background: -webkit-gradient(linear, left top, left bottom, from(#1846A0),
		to(#003396));
	background: -moz-linear-gradient(top, #1846A0, #003396);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1846A0',
		endColorstr='#003396');
}

.green:active {
	color: #A9BADA;
	background: -webkit-gradient(linear, left top, left bottom, from(#003396),
		to(#1846A0));
	background: -moz-linear-gradient(top, #003396, #1846A0);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003396',
		endColorstr='#1846A0');
}

/* pink */
.pink {
	color: #feeef5;
	border: solid 1px #d2729e;
	background: #f895c2;
	background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3),
		to(#f171ab));
	background: -moz-linear-gradient(top, #feb1d3, #f171ab);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3',
		endColorstr='#f171ab');
}

.pink:hover {
	background: #d57ea5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb),
		to(#e86ca4));
	background: -moz-linear-gradient(top, #f4aacb, #e86ca4);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb',
		endColorstr='#e86ca4');
}

.pink:active {
	color: #f3c3d9;
	background: -webkit-gradient(linear, left top, left bottom, from(#f171ab),
		to(#feb1d3));
	background: -moz-linear-gradient(top, #f171ab, #feb1d3);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab',
		endColorstr='#feb1d3');
}

.highlighted {
	color: #fff;
	border-color: white;
	background: #ff6b6b; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background:
		url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNmI2YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iI2Q4MGYxMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5YjAwMDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, #ff6b6b 0%, #d80f12 44%, #9b0002 100%);
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff6b6b),
		color-stop(44%, #d80f12), color-stop(100%, #9b0002));
	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ff6b6b 0%, #d80f12 44%, #9b0002 100%);
	/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ff6b6b 0%, #d80f12 44%, #9b0002 100%);
	/* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ff6b6b 0%, #d80f12 44%, #9b0002 100%);
	/* IE10+ */
	background: linear-gradient(to bottom, #ff6b6b 0%, #d80f12 44%, #9b0002 100%);
	/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6b6b',
		endColorstr='#9b0002', GradientType=0); /* IE6-8 */
}

.timerbox-button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 3px 7px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: 1em 2em 1em;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	min-width: 80px;
}

.timerbox-button:hover {
	text-decoration: none;
}

.timerbox-button:active {
	position: relative;
	top: 1px;
}

.pin-button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 3px 7px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 20px/100% Arial, Helvetica, sans-serif;
	padding: 1em 2em 1em;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	min-width: 80px;
}

.pin-button:hover {
	text-decoration: none;
}

.pin-button:active {
	position: relative;
	top: 1px;
}

/*  Menu item cards -> invoker-core "Card" surface (HD Design Library):
    flat white, 8px radius, soft two-layer shadow (no gradient/hard border).
    Hover = light-blue lift; selected/active = light-blue fill + blue ring. */
.displayMenuItem {
	text-align: left;
	overflow: hidden;
	float: left;
	position: relative;                   /* anchor for the "+" add affordance */
	cursor: pointer;
	border-radius: 8px;
	margin: 6px 5px;
	background: #F7F8F9;                   /* white90 — HD light-grey surface */
	border: 1px solid #E6E8EC;            /* crisp hairline + the soft shadow below */
	box-shadow: 0 1px 2px 0 rgba(40,46,56,.06), 0 1px 3px 0 #D7DAE0;
	transition: box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
/* "+" add affordance, top-right (the whole card is the click target) */
.displayMenuItem::after {
	content: "+";
	position: absolute;
	top: 9px;
	right: 10px;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	background: #EAF0FB;                   /* light brand surface */
	color: #003396;                       /* HD blue */
	font: 700 17px/21px 'DM Sans', 'Segoe UI', sans-serif;
	text-align: center;
	pointer-events: none;
	transition: background-color .15s ease, color .15s ease;
}
.displayMenuItem:hover::after { background: #003396; color: #FFFFFF; }

/* in-order state: brand border + ring, and the "+" becomes a green "✓" */
.displayMenuItem.added {
	border-color: #003396 !important;
	box-shadow: 0 0 0 1px #003396, 0 1px 3px 0 #D7DAE0 !important;
	background: #F1F7FF;                   /* faint brand tint */
}
.displayMenuItem.added::after {
	content: "✓";
	background: #1B8A5F;                   /* HD green */
	color: #FFFFFF;
	font-size: 13px;
	line-height: 22px;
}
.displayMenuItem.added:hover::after { background: #14724E; }

.displayMenuItem:active,
.displayMenuItem.selected {
	background: #F1F7FF;                       /* lightBlue5 */
	box-shadow: inset 0 0 0 2px #0C76D8;       /* lightBlue100 ring */
}

.displayMenuItem:hover {
	background: #F1F7FF;                        /* lightBlue5 */
	box-shadow: 0 0 1px 0 #9A9CA0, 0 3px 10px 0 #B7C4D8;
}

.displayMenuItem:focus { outline: none; }

.disabledDisplayMenuItem {
	text-align: left;
	cursor: default;
	overflow: hidden;
	float: left;
	background: #F7F8F9;                        /* white90 */
	border-radius: 8px;
	color: #B3B3B3;
	margin: 6px 4px;
	border: 1px solid #ECEEF1;
	box-shadow: none;
}

.width32 {
	width: 32.5%;
}

.width99 {
	width: 99%;
}

.width49 {
	width: 49%;
}

.btn {
  border-radius: .4em;
}

.mm-btn-green {
	color: #FFFFFF;
	border: solid 1px #003396;
	background: #003396;
	background: -webkit-gradient(linear, left top, left bottom, from(#91A6D0),
		to(#486DB3));
	background: -moz-linear-gradient(top, #91A6D0, #486DB3);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#91A6D0',
		endColorstr='#486DB3');

}

.mm-btn-green:hover {
	
	background: #1846A0;
	background: -webkit-gradient(linear, left top, left bottom, from(#91A6D0),
		to(#486DB3));
	background: -moz-linear-gradient(top, #91A6D0, #486DB3);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#91A6D0',
		endColorstr='#486DB3');
	border: solid 1px #486DB3;
		
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn{
	background: rgb(218, 207, 207);
	color: #514A4A;
	border-color: #AAAAAA;
	opacity: .8;
}

.mm-btn-green:active {
	color: #A9BADA;
	background: -webkit-gradient(linear, left top, left bottom, from(#003396),
		to(#1846A0));
	background: -moz-linear-gradient(top, #003396, #1846A0);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003396',
		endColorstr='#1846A0');
}

.mm-btn-red {
	color: #faddde;
	border: solid 1px #980c10;
	background: #d81b21;
	background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24),
		to(#aa1317));
	background: -moz-linear-gradient(top, #ed1c24, #aa1317);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24',
		endColorstr='#aa1317');
}

.mm-btn-red:hover {
	background: #b61318;
	background: -webkit-gradient(linear, left top, left bottom, from(#c9151b),
		to(#a11115));
	background: -moz-linear-gradient(top, #c9151b, #a11115);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b',
		endColorstr='#a11115');
}

.mm-btn-red:active {
	color: #de898c;
	background: -webkit-gradient(linear, left top, left bottom, from(#aa1317),
		to(#ed1c24));
	background: -moz-linear-gradient(top, #aa1317, #ed1c24);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317',
		endColorstr='#ed1c24');
}

.mm-btn-orange {
	background: -webkit-gradient(linear, left top, left bottom, from(#e68029),
  		to(#de6611)) !important;
}

.mm-btn-yellow {
        color: black;
        background-color: #FFD685;
}

.mm-btn-yellow:hover {
        color: white;
        background-color: #E6B85C;
        CA352
}

.mm-btn-yellow:active {
        color: #332914;
        background-color: #CCA352;
        border-color: #665229;
}

.mm-btn-gray {
	color: #e9e9e9;
	border: solid 1px #555;
	background: #6e6e6e;
	background: -webkit-gradient(linear, left top, left bottom, from(#888),
		to(#575757));
	background: -moz-linear-gradient(top, #888, #575757);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888',
		endColorstr='#575757');
}

.mm-btn-gray:hover {
	background: #616161;
	background: -webkit-gradient(linear, left top, left bottom, from(#757575),
		to(#4b4b4b));
	background: -moz-linear-gradient(top, #757575, #4b4b4b);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575',
		endColorstr='#4b4b4b');
}

.mm-btn-gray:active {
	color: #afafaf;
	background: -webkit-gradient(linear, left top, left bottom, from(#575757),
		to(#888));
	background: -moz-linear-gradient(top, #575757, #888);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757',
		endColorstr='#888888');
}

.mm-btn-smallest{
    padding: 1px 5px;
    font-size: 12px;
    border-radius: 3px;
    line-height: 1.2;
}

.mm-btn-smaller {
	padding: 2px 10px;
	font-size: 12px;
	margin: 1px;
}

.mm-btn-small {
	padding: 2px 12px;
	font-size: 14px;
	margin: 1px;
}

.mm-btn-medium {
	padding: 3px 16px;
	font-size: 14px;
	line-height: 1.5em;
}

.mm-btn-large {
	font-size: 16px;
	line-height: 2em;
}

.mm-btn-larger {
	font-size: 18px;
	line-height: 2em;
	padding: 5px 20px;
}

.mm-btn-admin {
	font-size: 16px;
	line-height: 1.5em;
	width: 195px;
	padding: 6px 12px;
}

.mm-btn-wrap-admin {
	white-space: normal;
}

.mm-btn-large-250 {
	font-size: 16px;
	line-height: 2.0em;
	width: 250px;
}

.mm-btn-large-320 {
	font-size: 16px;
	line-height: 2.0em;
	width: 320px;
}

.mm-btn-large-350 {
	font-size: 16px;
    line-height: 1.5em;
    width: 350px;
    padding: 6px 12px;
}

.mm-btn-small-22px{
    height: 22px;
}
             
.mm-btn-white {
   color: #FFFFFF;
   border: 1px solid #C5C8C3;
   background: transparent -moz-linear-gradient(center top , #D5D5D5, #F2F3F1) repeat scroll 0% 0%;
 }
     
.wizard-button {
	margin: 10px 5px 10px 5px;
	line-height: 2em;
}

/*    Next 4 classes are defined for courses used in callcentre, resident_order    */
/*  Menu-course chips (callcentre/resident_order) -> invoker-core "Tag" style
    (HD Design Library). Each course keeps its data-driven background:${course.color};
    we only restyle the shape: a flat HD tag with content-first padding (4px 10px),
    6px radius, DM Sans 600, no button bevel/gradient, no border or fixed min-width
    (size dictated by content, per the design spec). Selected = dark inset ring +
    bold, so it never shifts the layout. */
.course-name-padding,
.selected-course-bar .btn,
.notselected-course-bar .btn,
.subcourse-bar .btn {
	display: inline-block;
	margin: 2px 4px;
	padding: 4px 10px !important;
	min-width: 0 !important;
	height: auto !important;
	border: none !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	background-image: none !important;
	background-color: #F7F8F9;            /* fallback only; inline course colour wins */
	font-family: 'DM Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: #282E38 !important;            /* blackBlue100 */
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.course-name-padding:hover,
.selected-course-bar .btn:hover,
.notselected-course-bar .btn:hover,
.subcourse-bar .btn:hover { filter: brightness(0.95); }

/* Selected course / sub-course: clean dark inset ring + heavier weight */
.selected-course-bar .btn,
.selected-course-bar .course-name-padding,
.selected-course-bar .z-a,
.course-name-padding.selected-subcourse-bar,
.selected-subcourse-bar .btn {
	box-shadow: inset 0 0 0 2px #282E38 !important;
	font-weight: 700 !important;
	border: none !important;
	border-radius: 6px !important;
}

/* ── Soft-tint course chips (callcentre/resident_order only) ──────────────────
   Each chip is washed with a PALE version of its own course colour, carried in
   on the inline custom property --cc (set in the .zul as style="--cc:#xxxxxx").
   The dot (::before) shows the full colour; the chip body is a ~14% wash with a
   subtle same-hue border; text stays dark. Selected = a stronger ~48% wash of
   the same hue + bold (no dark inset ring). color-mix derives every shade from
   the single --cc value, so it works for any data-driven course colour.        */
.course-chip.course-name-padding {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	padding: 5px 13px !important;
	border-radius: 999px !important;                                       /* full pill, per design */
	background-color: #F4F5F7 !important;                                   /* fallback if color-mix unsupported */
	background: color-mix(in srgb, var(--cc, #C9CED6) 9%, #ffffff) !important;   /* very subtle wash */
	border: 1.5px solid var(--cc, #C9CED6) !important;                      /* full-colour edge — the colour "pop" */
	box-shadow: none !important;
	color: #2A3442 !important;
}
.course-chip.course-name-padding::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--cc, #C9CED6);
	flex: 0 0 auto;
}
.course-chip.course-name-padding:hover {
	filter: none;
	background: color-mix(in srgb, var(--cc, #C9CED6) 16%, #ffffff) !important;
}
/* Selected top-level chip, selected breadcrumb pill, and selected sub-course */
.selected-course-bar .course-chip.course-name-padding,
.course-chip.course-name-padding.selected-subcourse-bar {
	background: color-mix(in srgb, var(--cc, #8BC34A) 45%, #ffffff) !important;
	border: 1.5px solid color-mix(in srgb, var(--cc, #8BC34A) 80%, #000000) !important;
	box-shadow: none !important;
	font-weight: 700 !important;
	color: #1F2D24 !important;
}
.selected-course-bar .course-chip.course-name-padding::before,
.course-chip.course-name-padding.selected-subcourse-bar::before {
	background: color-mix(in srgb, var(--cc, #8BC34A) 80%, #000000);
}

.selected-day {
	font-weight: bold;
	color: white !important;
	background-image: url(images/day-button-sel.png) !important;
}

.selected-everyday {
	font-weight: bold;
	color: white !important;
	background-image: url(images/everyday-button-sel.png) !important;
}

.day-bar .z-a {
	width: 56px;
	height: 26px;
	display: inline-block;
	line-height: 27px;
	background-image: url(images/day-button.png);
	color: black;
	text-align: center;
	text-decoration: none
}

.day-bar .z-a:hover {
	background-image: url(images/day-button-sel.png);
}

.everyday-bar .z-a {
	width: 100px;
	height: 26px;
	display: inline-block;
	line-height: 27px;
	background-image: url(images/everyday-button.png);
	color: black;
	text-align: center;
	text-decoration: none
}

.everyday-bar .z-a:hover {
	background-image: url(images/everyday-button-sel.png);
}

.mm-btn-nf-medium {
    /*float: left;*/
    background-color: #FFFFFF;
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    border: 2px solid #64748B;
    cursor: pointer;
    margin-right: 5px;
    outline: none !important;
    width: 100%;
    padding: 3px 16px;
    line-height: 1.5em;
}
.mm-btn-nf-medium:hover{
	opacity: 0.9;
}
.mm-edit-btn-nf-medium{
    background-color: #FFFFFF;
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-weight: 750;
    font-size: 14px;
    border: 1px solid silver;
    cursor: pointer;
    margin-right: 5px;
    outline: none !important;
    padding-top: 6px;
    padding-bottom: 6px;
}
.mm-edit-btn-nf-medium:hover{
	opacity: 0.9;
}
.mm-no-pop-btn-nf-medium{
	float: right;
    background-color: #FFFFFF;
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #64748B;
    cursor: pointer;
    margin-right: 5px;
    margin-top: 5px;
    outline: none !important; 
    padding: 6px 16px;
}
.mm-no-pop-btn-nf-medium:hover{
	background-color: rgb(248, 248, 248);
}
.mm-yes-pop-btn-nf-medium{
	background-color: #7993C6;
    font-weight: bold;
    font-size: 14px;
    color: #FFFFFF;
    border: none;
    font-family: 'Inter', sans-serif;
    text-align: center;
    cursor: pointer;
    outline: none !important; 
    margin-top: 5px;
    padding: 7px 22px;
}
.mm-back-nf-btn-medium{
    background-color: #FFFFFF;
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #64748B;
    cursor: pointer;
    margin-right: 5px;
    outline: none !important;
    padding: 5px;
}
.mm-primary-nf-btn{
	float: right !important;
    background-color: #FFFFFF;
    color: rgb(255, 255, 255);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #64748B;
    cursor: pointer;
    margin-right: 5px;
    outline: none !important;
    padding: 6px 16px;
    margin-left: 5px;
}

.mm-edit-btn-sml{
	background-color: #FFFFFF;
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid silver;
    cursor: pointer;
    margin-right: 5px;
    outline: none !important;
    padding-left: 8px;
    padding-right: 8px;
}
.mm-sec-btn-nf-medium{
	width: 100%;
    background-color: #FFFFFF;
    color: #6080BD;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #7993C6;
    cursor: pointer;
    outline: none !important;
	padding: 6px 16px;
}
.mm-btn-sot{
	padding-left: 1px;
    padding-right: 1px;
}