/****
	Stylesheet for Staffing Calculator Plugin
	Maurice Hason, maurice.hason@gmail.com
***/

/** IMPORT GOOGLE FONTS **/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,800');

/** STYLES **/
.ssc-wrapper { 
	border: 2px solid #125694;
	border-radius: 12px;
	padding: 20px 50px;
	background-color: #fff;
	width: 500px;
	overflow: auto;
}

form#staffcalc-form input[type="text"] {
	width: 100px;
	border: 1px solid #828282;
	border-radius: 5px;
	margin-bottom: 0;
}

form#staffcalc-form input[type="text"]#tlr_show {
	background-color: transparent;
	border: none;
	font-family: "Open Sans", sans-serif;
	font-weight: 800;
	color: #000;
	box-shadow: none;
	text-align: right;
	padding: 0;
	display: inline-block
}

form#staffcalc-form input[type="text"]#service_level {
	background-color: transparent;
	border: none;
	font-family: "Open Sans", sans-serif;
	font-weight: 800;
	color: #e81c45;
	box-shadow: none;
	text-align: right;
	padding: 0;
	display: inline-block;
	font-size: 48px;
	width: 180px;
	height: 60px;
	overflow: auto;
}

form#staffcalc-form span.tlr_show_symbol:after,
form#staffcalc-form span.sl_show_symbol:after { content: "\0025"; }

.ssc-row {
	display: table;
	clear: both;
	width: 400px;
}

.ssc-row.padded { padding: 15px 0 0; }

.ssc-row.title, .ssc-row.range-slider { border-bottom: 1px solid #d4d1c9; }

.ssc-row.range-slider { padding-bottom: 20px; margin-bottom: 20px; }

.ssc-row.title h2 {
	text-align: left;
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
	color: #125694;
}

.ssc-column {
	display: table-cell;
	vertical-align: middle;
}

.ssc-column.left {
	width: 200px;
	text-align: left;
}

.ssc-column.left.sl { width: 180px; }

.ssc-column.middle {
	width: 100px;
	text-align: left;
}

.ssc-column.right {
	text-align: left;
	padding-left: 10px;
	width: 100px;
}

/*** EVERYTHING BELOW IS TO STYLE THE RANGE INPUT SLIDER ***/
input[type=range] 						{ -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]::-webkit-slider-thumb	{ -webkit-appearance: none; }
input[type=range]:focus					{ outline: none; }
input[type=range]::-ms-track			{ width: 100%; cursor: pointer;
										  /* Hides the slider so custom styles can be added */
										  background: transparent; 
										  border-color: transparent;
										  color: transparent; }

/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb	{ -webkit-appearance: none;
										  border: 2px solid #125964;
										  height: 24px;
										  width: 24px;
										  border-radius: 50%;
										  background: #E81C45;
										  cursor: pointer;
										  margin-top: -8px; } /* Need to specify a margin in Chrome */

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb		{ border: 2px solid #125964;
										  height: 24px;
										  width: 24px;
										  border-radius: 50%;
										  background: #E81C45;
										  cursor: pointer; }

/* All the same stuff for IE */
input[type=range]::-ms-thumb			{ border: 2px solid #125964;
										  height: 24px;
										  width: 24px;
										  border-radius: 50%;
										  background: #E81C45;
										  cursor: pointer; }


input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 7px;
  cursor: pointer;
  background: #bcbec0;
  border-radius: 4px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #bcbec0;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 7px;
  cursor: pointer;
  background: #bcbec0;
  border-radius: 4px;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 7px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #bcbec0;
  border-radius: 4px;
}

input[type=range]:focus::-ms-fill-lower {
  background: #bcbec0;
}
input[type=range]::-ms-fill-upper {
  background: #bcbec0;
  border-radius: 4px;
}

input[type=range]:focus::-ms-fill-upper {
  background: #bcbec0;
}