@media screen {

	/**
	* @section Buttons
	*
	* inspired from: Catalin Rosu (http://www.red-team-design.com/just-another-awesome-css3-buttons)
	*/

	.ym-button,
	button,
	input[type="button"],
	input[type="reset"],
	input[type="submit"] {
		display: inline-block;
		white-space: nowrap;
		background-color: #ccc;
		background-image: -webkit-linear-gradient(top, #eee, #ccc);
		background-image: -moz-linear-gradient(top, #eee, #ccc);
		background-image: -ms-linear-gradient(top, #eee, #ccc);
		background-image: -o-linear-gradient(top, #eee, #ccc);
		background-image: linear-gradient(top, #eee, #ccc);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
		border: 1px solid #777;
		-webkit-border-radius: .4em;
		-moz-border-radius: .4em;
		border-radius: .4em;		
		color: #333;
		cursor: pointer;
		font: normal 0.9em/1.8em Arial, Helvetica; /* 1em/2em */
		margin: 0 0.75em 0 0;
		padding: 0 1.5em;
		line-height:2.7em;
		overflow: visible; /* removes extra side spacing in IE */
		text-decoration: none !important;
		/* text-shadow: 0 1px 0 rgba(255,255,255,.8); */
		height: 2rem;		
	}

	.ym-button.inline,
	button.inline,
	input[type="button"].inline,
	input[type="reset"].inline,
	input[type="submit"].inline {
		display: inline-flex;
		transform: translateY(-1px);
	}
	
	.ym-right,
	button.ym-right,
	input[type="button"].ym-right,
	input[type="reset"].ym-right,
	input[type="submit"].ym-right {
		float: right;
		margin: 0 0 0 0.75em;
	}
	
	input[type="image"] {
		background-color: #ccc;
		background-image: -webkit-linear-gradient(top, #eee, #ccc);
		background-image: -moz-linear-gradient(top, #eee, #ccc);
		background-image: -ms-linear-gradient(top, #eee, #ccc);
		background-image: -o-linear-gradient(top, #eee, #ccc);
		background-image: linear-gradient(top, #eee, #ccc);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
		border: 1px solid #777;
		-webkit-border-radius: .4em;
		-moz-border-radius: .4em;
		border-radius: .4em;
		-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.15);
		-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.15);
		box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.15);
		color: #333;
		cursor: pointer;
		margin: 0;
		padding: 2px;
		overflow: visible; /* removes extra side spacing in IE */
		text-decoration: none !important;
		/* text-shadow: 0 1px 0 rgba(255,255,255,.8); */
	}
	
	.ym-inline {
		margin:0;
	}

	button:hover,
	input[type="button"]:hover,
	input[type="reset"]:hover,
	input[type="submit"]:hover,
	.ym-button:hover {
		/* background-color: #ddd;
		background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
		background-image: -moz-linear-gradient(top, #fafafa, #ddd);
		background-image: -ms-linear-gradient(top, #fafafa, #ddd);
		background-image: -o-linear-gradient(top, #fafafa, #ddd);
		background-image: linear-gradient(top, #fafafa, #ddd);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd'); */
		filter: brightness(1.1);
	}
	
	input[type="image"]:hover {
		background-color: #ddd;
		background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
		background-image: -moz-linear-gradient(top, #fafafa, #ddd);
		background-image: -ms-linear-gradient(top, #fafafa, #ddd);
		background-image: -o-linear-gradient(top, #fafafa, #ddd);
		background-image: linear-gradient(top, #fafafa, #ddd);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
	}

	button:active,
	input[type="button"]:active,
	input[type="reset"]:active,
	input[type="submit"]:active,
	.ym-button:active {
		background-color: #bbb;
		background-image: -webkit-linear-gradient(top, rgb(250, 250, 250), rgb(238, 238, 238));
		background-image: -moz-linear-gradient(top, rgb(250, 250, 250), rgb(238, 238, 238));
		background-image: -ms-linear-gradient(top,  rgb(250, 250, 250), rgb(238, 238, 238));
		background-image: -o-linear-gradient(top,  rgb(250, 250, 250), rgb(238, 238, 238));
		background-image: linear-gradient(top,  rgb(250, 250, 250), rgb(238, 238, 238));
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#bbbbbb');
		/*box-shadow: 2px 2px 3px rgba(0,0,0,.2) inset;*/
		position: relative;
		top: 1px;
	}


	/* pseudo elements don't work on input */
	button:before,
	.ym-button:before {
		background: #ccc;
		background: rgba(0,0,0,.1);
		float: left;
		width: 1em;
		text-align: center;
		font-size: 1.5em;
		margin: 0 1em 0 -1em;
		padding: 0 .2em;
		-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
		-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
		box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
		-moz-border-radius: .15em 0 0 .15em;
		-webkit-border-radius: .15em 0 0 .15em;
		border-radius: .15em 0 0 .15em;
		pointer-events: none;
	}
	
	/* only ICON */
	.ym-button-icon {
		display: inline-block;
		white-space: nowrap;
		background-color: #ccc;
		background: rgba(0,0,0,.1);
		background-image: -webkit-linear-gradient(top, #eee, #ccc);
		background-image: -moz-linear-gradient(top, #eee, #ccc);
		background-image: -ms-linear-gradient(top, #eee, #ccc);
		background-image: -o-linear-gradient(top, #eee, #ccc);
		background-image: linear-gradient(top, #eee, #ccc);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
		border: 1px solid #777;
		-webkit-border-radius: .2em;
		-moz-border-radius: .2em;
		border-radius: .2em;
		-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.15);
		-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.15);
		box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.15);
		color: #333;
		cursor: pointer;
		margin: 1.5em 0.75em 0 0;
		padding: 2px 2px 0px 2px;
		overflow: visible; /* removes extra side spacing in IE */
		text-decoration: none !important;
	}
	
	.ym-button-icon {
		margin: 0;
		background-color: #ccc;
	}

	.buttonIconOnlyFA {
		display: grid; 
		place-items: center;
	}

	.ym-active::before { content: url("../../images/icons/yes.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-accept::before { content: url("../../images/icons/yes.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-add::before { content: url("../../images/icons/plus-button.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-back::before { content: url("../../images/icons/arrow-left.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-cancel::before { content: url("../../images/icons/n.png"); padding-top:2px; margin-bottom:-1px; }
  .ym-confirm::before { content: url("../../images/icons/yes.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-deactive::before { content: url("../../images/icons/no.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-delete::before { content: url("../../images/icons/trash.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-complete::before { content: url("../../images/icons/yes.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-edit::before { content: url("../../images/icons/edit.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-email::before { content: "\2709"; }
	.ym-eye::before { content: url("../../images/icons/eye.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-google-maps::before { content: url("../../images/icons/logo-google-maps.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-history::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f1da"; }
	.ym-imageresize::before { content: url("../../images/icons/image-resize.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-like::before { content: "\2764"; }
	.ym-mail::before { content: url("../../images/icons/mail.png"); padding-top:2px; margin-bottom:-1px; }	
	.ym-msg::before { content: url("../../images/icons/mail.png"); padding-top:2px; margin-bottom:-1px; }	
	.ym-msg-hide::before { content: url("../../images/icons/eye-hide.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-msg-new::before { content: url("../../images/icons/mail_new.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-msgs::before { content: url("../../images/icons/mails.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-news-add::before { content: url("../../images/icons/news_add.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-next::before { content: url("../../images/icons/forward.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-open::before { content: url("../../images/icons/open.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-open-image::before { content: url("../../images/icons/image-open.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-performance::before { content: url("../../images/icons/graph-point.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-play::before { content: url("../../images/icons/control_play.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-prev::before { content: url("../../images/icons/back.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-print::before { content: url("../../images/icons/printer.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-rotate-left::before { content: url("../../images/icons/rotate-ccw.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-rotate-right::before { content: url("../../images/icons/rotate-cw.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-save::before { content: url("../../images/icons/save.png"); padding-top:2px; margin-bottom:-1px; }
	.ym-spark::before { content: "\2737"; }
	.ym-star::before { content: "\2605"; }
	.ym-upload::before { content: url("../../images/icons/upload.png"); padding-top:2px; margin-bottom:-1px; }
  

	/* removes extra inner spacing in Firefox */
	button::-moz-focus-inner {
		border: 0;
		padding: 0;
	}

	/* If line-height can't be modified, then fix Firefox spacing with padding */
	input[type=button]::-moz-focus-inner,
	input[type=reset]::-moz-focus-inner,
	input[type=submit]::-moz-focus-inner {
		padding: .4em;
	}

	/* The disabled styles */
	button[disabled],
	button[disabled]:hover,
	input[type=button][disabled],
	input[type=button][disabled]:hover,
	input[type=reset][disabled],
	input[type=reset][disabled]:hover,
	input[type=submit][disabled],
	input[type=submit][disabled]:hover,
	.ym-button.ym-disabled,
	.ym-button.ym-disabled:hover {
		background: #ccc;
		color: #333;
		border-color: #777;
		cursor: default;
		text-shadow: none;
		position: static;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		opacity:0.4;
	}
	
	

	/* ie6 support styles - redefined buttons, because of missing support for attribute selectors */
	* html .ym-button,
	* html button {
		display: inline-block;
		white-space: nowrap;
		background-color: #ccc;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
		border: 1px solid #777;
		color: #333;
		cursor: pointer;
		font: normal 1em/2em Arial, Helvetica;
		margin: 1.5em 0.75em 0 0;
		padding: 0 1.5em;
		overflow: visible; /* removes extra side spacing in IE */
		text-decoration: none !important;
	}

	* html button:focus,
	* html .ym-button:focus {
		outline: 0;
		background: #fafafa;
	}

	* html button:hover,
	* html .ym-button:hover {
		filter: brightness(1.1);
		/* background-color: #ddd;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd'); */
	}

	* html button:active,
	* html .ym-button:active {
		background-color: #bbb;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#bbbbbb');
		position: relative;
		top: 1px;
	}

	* html .ym-button.ym-disabled,
	* html .ym-button.ym-disabled:hover {
		background: #eee;
		color: #aaa;
		border-color: #aaa;
		cursor: default;
		text-shadow: none;
		position: static;
	}
	
	
	/* POSITION */
	.ym-button-right, .button-right {
		float: right;
		margin-right: 0px;
		margin-left: 10px;
	}


	/* Button Text Only (no background) */
	button.textOnly {
		background-color: transparent;
		border: 0;
		background-image: none;
		padding: 0.2em 0;
		height: auto;
		font-size: 1em;
		line-height: 1em;
	}

	button.textOnly:disabled:hover {
		background-color: transparent;
	}

	/* FONT-AWESOME */
	button i {
		margin-right: 0.7em;
	}

	/* ICON ONLY */
	button.iconOnly {
		margin: 0;
		display: grid;
		place-items: center;
	}

	button.iconOnly i {
		margin: 0;
		scale: 1.5;
	}


	/* COLORS */
	.button-red {
		border-color: rgb(99, 0, 0);
		background-color: rgb(217, 83, 79);
		background-image: none;
		color: #fff;	
		
		i {
			color: #fff;
		}
	}	

	.button-green {
		border-color: rgb(0, 99, 0);
		background-color: rgb(92, 184, 92);
		background-image: none;
		color: #fff;

		i {
			color: #fff;
		}
	}
	
	/* RATE BUTTONS FOR SUPERVISION RECORD ##################################################################### */
	
	.ratingButtons {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-gap: 5px;
	}

	#divBtnRateSvItem div {
		text-align: center;
		padding: 10px 0;
		box-sizing: border-box;	
		cursor: pointer;	
		border-radius: 20px;	
	}
	
	#divBtnRateSvItem div.bg-orange {
		background-color: #fff2cd;
		border: 3px solid #ffe9aa;				
	}

	#divBtnRateSvItem div span {
		display: block;
		font-size: 0.8em;
	}

	#divBtnRateSvItem div span.number {
		opacity: 0.3;
		margin: 0 auto;
		font-size: 2em;
		font-weight: bold;
	}

	#divBtnRateSvItem div.bg-orange span {
		color: #ddbf68;	
	}

	#divBtnRateSvItem div.bg-orange:hover span {
		color: #836200;	
	}

	#divBtnRateSvItem div.bg-green span {
		color: #9fc328;	
	}

	#divBtnRateSvItem div.bg-green:hover span {
		color: #4a5f00;
	}
	
	#divBtnRateSvItem div.bg-orange:hover {
		background-color: #ffcc34;
		border: 3px solid #f1b400;		
	}
	#divBtnRateSvItem div.bg-orange:hover img {
		opacity: 1.0;
	}
	
	
	#divBtnRateSvItem div.bg-green {
		background-color: #e7f2c2;
		border: 3px solid #d9eb98;		
	}
	
	#divBtnRateSvItem div.bg-green:hover {
		background-color: #b7d54e;
		border: 3px solid #a1ce00;		
	}
	#divBtnRateSvItem div.bg-green:hover img {
		opacity: 1.0;
	}
}