/* --GENERAL STYLES-- */

body {
  font-family: 'Roboto', sans-serif;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

/* --COLORS-- */

body {
  background-color: #9B9B9B; /* medium grey */
  color: #393939; /* very dark grey */
}

header {
  background-color: #393939; /* very dark grey */
  color: #9B9B9B; /* medium grey */
  border-bottom: 0.25rem solid #D0011B; /* dark red */
}

#signupButton a:hover,
#authButton a:hover{
  color: #9B9B9B; /* medium grey */
}

#signuplink:hover {
  color: #0971B2; /* dark blue */
}

nav .selected,
nav li:hover {
  color: #D8D8D8; /* very light grey */
  border-bottom: 0.25rem solid #D8D8D8; /* very light grey */
}

#signupButton a,
#authButton a {
  background-color: #393939; /* very dark grey */
  color: #D8D8D8; /* very light grey */
  border-left: 0.25rem solid #D0011B; /* dark red */
  border-right: 0.25rem solid #D0011B; /* dark red */
}

#config,
#raffleStatus,
#viewerStatus,
#currentViewers,
#raffle,
#partnerConfig {
  background-color: #D8D8D8; /* very light grey */
}

.statusHeader {
  background-color: #393939; /* very dark grey */
  color: #D8D8D8; /* very light grey */
}

.statusHeader .fa,
.statusHeader .svg-inline--fa {
  color: #D0011B; /* dark red */
}

#set1Add { /* fa-plus icon, custom command header */
  color: #D8D8D8; /* very light grey */
}

#set1Add:hover,
table .iconSave:hover {
  color: #0971B2; /* dark blue */
}

table .iconDelete:hover {
  color: #D0011B; /* dark red */
}

.statusHeader .fa-redo,
.statusHeader .fa-save {
  color: #9B9B9B; /* medium grey */
}

.statusHeader .fa-redo:hover,
.statusHeader .fa-save:hover {
  color: #D8D8D8; /* very light grey */
}

#authorize:hover,
#obsOverlay a:hover {
  color: #D0011B; /* dark red */
}

tr:nth-child(even) {
  background-color: #F9F9F9; /* extra-light grey */
}

#config input {
  border: 0.15rem solid #D8D8D8; /* very light grey */
}

#config input:focus {
  border: 0.15rem solid #D0011B; /* dark red */
}

#partnerConfig .partner,
#platformIcons .platform {
  border: 0.15rem solid #9B9B9B; /* medium grey */
  color: #9B9B9B; /* medium grey */
}

#partnerConfig .checked,
#platformIcons .selected {
  border-color: #D0011B; /* dark red */
  background-color: #393939; /* very dark grey */
  color: #D8D8D8; /* very light grey */
}

/* Select Styles */

#config #partnerSelect select {
  background-color: #393939; /* very dark grey */
  color: #F9F9F9; /* extra-light grey */
  border: 0.15rem solid #D8D8D8; /* very light grey */
}

#config #partnerSelect select:focus {
  border: 0.15rem solid #D0011B; /* dark red */
}

#config #partnerSelect option:focus {
  background-color: #D0011B; /* dark red */
}

/* Text Styles */

#config input[type=text] {
  background-color: #9B9B9B; /* medium grey */
  color: #F9F9F9; /* extra-light grey */
}

#config input[type=text]:focus {
  background-color: #393939; /* very dark grey */
  border-color: #D0011B; /* dark red */
}

/* --HEADER STYLES-- */

header {
  padding: 0.25rem 0.5rem;
}

#authWrapper h3 {
  margin: 0.5rem auto;
  text-align: center;
  font-size: 1.25rem;
}

/* --AUTHENTICATION PAGE-- */

/* Splash Header on Authentication Page */
header #splash {
  display: block;
  margin: 0.5rem auto;
}

#authWrapper {
  margin: 1.75rem 5%;
  text-align: center;
  font-size: 1.15rem;
}

/* Authentication, Signup Button and Link */
#authButton,
#signupButton {
  margin: 1.75rem auto;
  text-align: center;
}

#authButton a,
#signupButton a {
  padding: 0.5rem;
  font-size: 1.15rem;
  font-weight: 500;
}

/* --SIGNUP PAGE-- */

#newusername {
  font-weight: 500;
}

#signupWrapper {
  margin: 1.75rem 5%;
  text-align: center;
  font-size: 1.15rem;
}

#signupWrapper p {
  line-height: 1.5rem;
}

em {
  font-weight: 500;
}

#signuplink {
  margin: 1.25rem auto;
}

#signuplink:hover {
  cursor: pointer;
  cursor: hand;
}

/* --DASHBOARD PAGE-- */

/* Topbar Header */
header #logo {
  float: left;
  margin: 0.5rem;
  height: 2.25rem;
}

/* Topbar Navigation */
nav {
  float: right;
  margin: 0.25rem;
}

nav ul {
  text-align: center;
}

nav ul li {
  display: inline-block;
  margin: 0.25rem;
  padding-bottom: 0.5rem;
}

nav ul li:hover {
  cursor: pointer;
  cursor: hand;
}

nav ul li:last-child {
  margin-right: 0;
}

nav .fa,
nav .svg-inline--fa {
  font-size: 1.75rem;
}

/* Dashboard Wrapper */

#wrapper {
  margin: 0.5rem 2.5%;
}

/* Partners Options Pane */

#partnerConfig .partner {
  display: inline-block;
  margin: 0.5rem;
  padding: 0.45rem;
}

#partnerConfig .partner:hover {
  cursor: pointer;
  cursor: hand;
}

/* Config and Status Panes */

#config {
  float: left;
  width: 47.5%;
}

#status {
  float: right;
  width: 47.5%;
}

#config,
#status {
  margin: 1.25rem 0;
}

/* Config Options Area */

#config form {
  padding: 0.5rem 0.5rem;
}

#config p,
#config h3,
#config form div {
  margin: 0.5rem 0;
}

#config h3 {
  margin-top: 1.25rem;
  font-weight: 700;
}

#config #partnerSelect select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  outline: none;
  
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0;
}

#config input {
  display: inline-block;
  
  font-size: 0.75rem;
  font-weight: 500;
  
  padding: 0.25rem 0.5rem;
}

#config input {
  outline: none;
  border-radius: 0.15rem;
}

#config input[type=text] {
  margin-right: 0.25rem;
}

#config input[type=submit] {
  display: none;
}

#authorize,
#obsOverlay a {
  font-weight: 500;
}

/* Raffle and Viewer Windows */

#raffle,
#currentViewers {
  min-height: 4.0rem;
}

#raffleStatus {
  margin-bottom: 1.5rem;
}

.statusHeader {
  padding: 0.5rem 0.25rem;
  font-size: 1.25rem;
}

.statusHeader * {
  display: inline-block;
}

.statusHeader .fa-redo,
.statusHeader .fa-plus,
.statusHeader .fa-save {
  float: right;
}

.statusHeader .fa-redo:hover,
.statusHeader .fa-save:hover,
#autoCardToggle span {
  cursor: pointer;
  cursor: hand;
}

.response {
  margin-top: 2.5rem;
  text-align: center;
  font-weight: 500;
}

table {
  width: 100%;
}

td {
  padding: 0.5rem;
}

td.viewerFollowDate,
td.entries {
  text-align: right;
}

/* CHECKBOX STYLES */

#config .checkboxWrapper {
  display: block;
}

/* #config .checkboxWrapper, */
#config .checkbox,
#config .alternateLabel {
  margin: 0;
}

#config .alternateLabel {
  display: inline-block;
  position: relative;
  top: 0.4375rem;
  left: 0.25rem;
}

#config input[type=checkbox] {
	visibility: hidden;
}

.checkbox {
  display: inline-block;
  
	width: 5.625rem;
	height: 1.875rem;
	background: #393939; /* very dark grey */
	margin: 0.9375rem 2.8125rem;

	border-radius: 0.25rem;
	position: relative;
}

.checkbox:before {
	content: 'ON';
	position: absolute;
	top: 0.5625rem;
	left: 0.8594rem;
	height: 2px;
	color: #D0011B; /* dark red */
	font-size: 0.75rem;
}

.checkbox:after {
	content: 'OFF';
	position: absolute;
	top: 0.5625rem;
	left: 3.5975rem;
	height: 2px;
	color: #D8D8D8; /* very light grey */
	font-size: 0.75rem;
}

.checkbox label {
	display: block;
	width: 2.4375rem;
	height: 1.0rem;
	border-radius: 0.25rem;

	transition: all .5s ease;
	cursor: pointer;
	position: absolute;
	top: 0.421rem;
	z-index: 1;
	left: 0.5625rem;
	background: #D8D8D8; /* very light grey */
}

.checkbox input[type=checkbox]:checked + label {
	left: 2.8125rem;
	background: #D0011B; /* dark red */
}

/* --PLATFORM STYLES-- */

#platformIcons {
  margin: 0.5rem 0.25rem 0 0.25rem;
}

#platformIcons .platform {
  display: inline-block;
  margin: 0.25rem;
  padding: 0.5rem;
  font-size: 1.75rem;
}

#platformIcons .platform:hover {
  cursor: pointer;
  cursor: hand;
}

#platformSelector {
  display: none;
}

/* --COMMANDS PAGE-- */

#set1Add:hover,
table .fa:hover {
  cursor: pointer;
  cursor: hand;
}