/* No selection */

::selection {
  background: transparent; /* WebKit/Blink Browsers */
}

::-moz-selection {
  background: transparent; /* Gecko Browsers */
}

textarea::selection, input::selection {
	background: rgba(150, 200, 255, 0.9);
}

/* Buttons */

buttons {
	display: flex;
	justify-content: flex-start;
	margin: 10px -2px 15px -2px;
}

buttons:last-child {
	margin: 10px -2px 0px -2px;
}

button, select {
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4), inset 1px 1px 1px rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(0, 0, 0, 0.3);
	color: rgba(0, 0, 0, 0.9);
	-webkit-font-smoothing: antialiased;
	border-radius: 1pt;
	padding: 10px;
	font-family: 'Open Sans', sans-serif;
	font-size: 10pt;	
	background-color: #ABCDEF;
	margin: 2px;
	outline: none;
	cursor: pointer;
}

button:not(.disabled):active, select:not(.disabled):active {
	box-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
}

button.disabled, select.disabled {
	opacity: 0.5;
	-moz-opacity: 0.5;
}

select {
	padding: 9px 10px 9px 10px;
	background-image: url('/images/interface/select.png');
	background-position: 100% 50%;
	background-repeat: no-repeat;
}

xbutton, xselect {
	box-sizing: border-box;
	padding: 6px;

	margin: 2px;
	
	border: none;
	cursor: pointer;
	
	font-family: 'Open Sans', sans-serif;
	font-size: 9pt;
	
	color: rgba(50, 50, 50, 1);
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
	
	background-color: rgba(200, 210, 220, 0.9);
	box-shadow:  0px 1px 1px rgba(0, 0, 0, 0.5);

	border-radius: 1pt;
	border: 1px solid rgba(100, 100, 100, 1);
	
	display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
	
	outline: none;

	transition: background-color 0.2s ease;
}


button.warning {
	background-color: rgba(255, 100, 110, 1);
}

button.selected {
	background-color: rgba(100, 255, 110, 1);
}



/* Paginator */

paginator {
	display: flex;
	justify-content: flex-end;
	margin: 15px 0px 5px 0px;
}

paginator > button {
	background-color: transparent;
	font-size: 11pt;
	font-weight: 600;
	margin-left: 5px;
	box-shadow: none;
}

paginator > button_separator {
	background-color: transparent;
	padding: 10px;
	font-family: 'Open Sans', sans-serif;
	margin: 2px;
	font-size: 11pt;
	font-weight: 600;
	margin-left: 5px;
	box-shadow: none;
	border: none;	
}

paginator > button.selected {
	background-color: rgba(50, 100, 150, 0.5);
}



/* Tidying up line */

input[type=checkbox], input[type=radio] {
	margin: 0px 3px 0px 0px;
	position: relative;
	top: 1px;
}



/*input[type=button], input[type=submit],select {

	box-sizing: border-box;
	margin: 5px 0px 5px 0px;
	padding: 6px;
	
	border: none;
	cursor: pointer;
	
	font-family: 'Open Sans', sans-serif;
	font-size: 9pt;
	
	color: rgba(50, 50, 50, 1);
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
	
	background-color: rgba(200, 210, 220, 0.9);
	box-shadow:  0px 1px 1px rgba(0, 0, 0, 0.5);

	border-radius: 1pt;
	border: 1px solid rgba(100, 100, 100, 1);
	
	display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
	
	outline: none;
}*/



video::-internal-media-controls-download-button {
	display:none;	
}
video::-webkit-media-controls-enclosure {
	overflow:hidden;
}
video::-webkit-media-controls-panel {
	width: calc(100% + 30px);
}

/* Mode selector */

input[type=button].selected {
	#outline: 2px #70F070 solid;
	background-color: rgba(150,190,150,1);
}

/* Spectrum color picker */

.sp-replacer {
	display: inline-block;
	border: none !important;
	background-color: rgba(150, 170, 190, 1) !important;
	color: white !important;
	height: 20px;
	padding: 9px !important;
	box-shadow:  1px 1px 0px rgba(0, 0, 0, 0.2);
	vertical-align: -14 !important;
}

.sp-container {

	box-sizing: border-box;
	padding: 6px;

	margin: 2px;
	
	border: none;
	cursor: pointer;
	
	font-family: 'Open Sans', sans-serif;
	font-size: 9pt;
	
	color: rgba(50, 50, 50, 1);
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
	
	background-color: rgba(200, 210, 220, 0.9);
	box-shadow:  0px 1px 1px rgba(0, 0, 0, 0.5);

	border-radius: 1pt;
	border: 1px solid rgba(100, 100, 100, 1);
	
	display: inline-block;
	
	outline: none;

	transition: background-color 0.2s ease;
}

.sp-color, .sp-hue, .sp-preview {
	border: none !important;
	box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.5);	
}

.sp-dd {
	display: none;
}


.sp-picker-container {
	border: none !important;
}

.sp-replacer:hover {
	border: none;
}

/*select {
	border: none;
	padding: 9px 9px 9px 9px;
}*/

label {
	display: block;
	font-family: 'Open Sans', sans-serif;
	font-size: 11pt;
	color: #505050;
	margin: 15px 0px 5px 0px;
}

*::-webkit-input-placeholder {
	color: rgba(150, 150, 150, 0.5) !important;
}

*::-moz-placeholder {
	color: rgba(150, 150, 150, 0.5) !important;
}

*:-moz-placeholder {
	color: rgba(150, 150, 150, 0.5) !important;
}

*:-ms-input-placeholder {
	color: rgba(150, 150, 150, 0.5) !important;
}

input {
	box-sizing: border-box;	
	margin: 0px;
	padding: 8px;
	outline: none;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 1pt;
	font-family: 'Open Sans', sans-serif;
	font-size: 10pt;
	color: #505050;
	background-color: rgba(0, 50, 100, 0.1);
	box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}

input[type=checkbox], input[type=radio] {
	background-color: transparent;
	box-shadow: none;
}

select option {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
}

input[type=button].warning {
	background-color: rgba(255, 100, 110, 1);
}

input.disabled {
	/*display: none;*/
	/*#opacity: 0.1;*/
	opacity: 0.5;
	-moz-opacity: 0.5;
}

textarea {
	box-sizing: border-box;	
	margin: 0px;
	padding: 8px;
	outline: none;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 1pt;
	font-family: 'Open Sans', sans-serif;
	font-size: 10pt;
	color: #505050;
	background-color: rgba(0, 50, 100, 0.1);
	box-shadow: inset 1px 1px 5px 0px rgba(0, 0, 0, 0.05);
}



progressbar {
	display: inline-block;
	position: relative;
	height: 50px !important;
	
	border-top: 1px rgba(0, 0, 0, 0.1);
	border-left: 1px rgba(0, 0, 0, 0.1);
	border-right: 1px rgba(255, 255, 255, 0.8) solid;
	border-bottom: 1px rgba(255, 255, 255, 0.8) solid;
	
	overflow: hidden;
		
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	border-radius: 2px;
	margin: 2px;
}

progressbar > label {
	position: absolute;
	left: 8px;
	top: 5px;
	margin: 0px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 800;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.1);
}

progressbar > value {
	position: absolute;
	left: 8px;
	bottom: 5px;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.1);	
}

progressbar > fill {
	display: block;
	position: absolute;
	height: 100%;
	background-color: rgba(180, 200, 255, 0.9);
	box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.2);
}
progressbar > fill.warning {
	background-color: rgba(255, 215, 100, 0.9);
}
progressbar > fill.full {
	background-color: rgba(255, 100, 100, 0.9);
}

/* Tabs */

tabs {
	border-bottom: 1px rgba(0, 0, 0, 0.3) solid;
	display: flex;
	margin-bottom: 20px;
	padding-left: 15px;
	white-space: wrap;
}

tabs > tab {
	position: relative;
	top: 1px;
	border-left: 1px rgba(0, 0, 0, 0.3) solid;
	border-top: 1px rgba(0, 0, 0, 0.3) solid;
	border-right: 1px rgba(0, 0, 0, 0.3) solid;
	border-bottom: 1px rgba(0, 0, 0, 0.3) solid;
	background-color: white;
	margin-left: 5px;
	padding: 5px 15px 5px 15px;
	cursor: pointer;

	font-family: 'Open Sans', sans-serif;
	font-size: 14px;

	border-top-left-radius: 2pt;
	border-top-right-radius: 2pt;
	box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);

	white-space: nowrap;
	
}

tabs > tab.selected {
	border-bottom: none;
}





/*Datepicker*/

.ui-datepicker {
	margin: auto;

	background-color: white;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);

}

.ui-datepicker-header {
	margin: 10px;
}

.ui-datepicker-prev, .ui-datepicker-next {
	box-sizing: border-box;
	margin: 5px 0px 5px 0px;
	padding: 10px;
	
	border: none;
	cursor: pointer;
	
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	
	color: rgba(50, 50, 50, 1);
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
	
	background-color: rgba(150, 170, 190, 1);
	box-shadow:  0px 1px 1px rgba(0, 0, 0, 0.5);

	border-radius: 1pt;
	border: 1px solid rgba(100, 100, 100, 1);
	
	display: inline-block;
}

.ui-datepicker-prev:hover, .ui-datepicker-next:hover {
	color: rgba(50, 50, 50, 1);
}

.ui-datepicker-prev {
	float: left;
}

.ui-datepicker-next {
	float: right;
}

.ui-datepicker-title {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 100;
	text-align: center;
	height: 50px;
	line-height: 50px;
}

.ui-datepicker-calendar {
	margin: 10px;
	border-collapse: separate;
	border-spacing: 1px;
}

.ui-datepicker-calendar > * > * > * {

	padding: 8px;

	text-align: right;

	font-family: 'Open Sans', sans-serif;
	font-size: 11pt;

	color: rgba(50, 50, 50, 1);
}

.ui-datepicker-calendar > tbody > * > * {
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

.ui-datepicker-calendar > tbody > * > *:hover {
	background-color: rgba(50, 100, 150, 0.5);
}

.ui-datepicker-calendar > tbody > * > * > a, .ui-datepicker-calendar > tbody > * > * > a:hover {
	color: rgba(50, 50, 50, 1);
}

.ui-datepicker-current-day {
	background-color: rgba(100, 100, 100, 0.5);
}