#debug{
	display: none;
	border: 1px solid white;
	min-height: 100px;
	text-align:left;
}

#alertTemplate{
	width: 100%;
	margin: auto;
	display: none;
	position: fixed;
    z-index: 100000000;
    top: 0;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

#alertTemplate > span{
	font-weight: bolder;
	font-size: larger;
}

body{
	background-color: black;
	color: white;
}

a{
	color: slategray;
	text-decoration: none;
}

a:visited{
	color: lightslategrey;
}

a:focus{
	color: lightslategrey;
}

a:hover{
	color: lightslategrey;
	text-decoration: none;
}

hr { color: black; }

h1{
	text-align: center;
	display: inline-block;
	vertical-align: bottom;
}

h3{
	display: block;
	text-align: center;
}

.main{
	padding: 20px 0px;
	margin-bottom: 100px;
    text-align: center;
}


#submit_id, #queue_container, #no_streamer{
  	display: none;
}

#admin_container .admin_container_header{
	cursor: pointer;
	background-color: #3D3D3D;
	font-weight: bolder;
}

#admin_controls{
	overflow: hidden;
	padding: 0.5em;
}

#admin_controls > .row{
	margin-bottom: 2em;
}

#admin_controls > .row > .col-6{
	white-space: nowrap;
}

#admin_controls #completion_commands,
#admin_controls #last_command{
	margin-left: 0px;
	margin-right: 0px;
}

#admin_container .admin_controls_wrapper .card-body{
	padding: 2px;
}

#admin_container .admin_controls_wrapper{
	padding: 0.5em 1em;
}

#admin_container .admin_controls_wrapper > .row > .col-6{
	padding: 0.5em;
}

#admin_container .admin_controls_wrapper > .row > .col-6:first-child{
	padding-right: 0;
}

#admin_container .admin_controls_wrapper > .row > .col-6 > .card{
	margin-bottom: 0!important;
}

#admin_container .admin_controls_wrapper .card .card-body{
	overflow: hidden;
}


#admin_container .twitch_chat_wrapper{
	padding: 0px;
	overflow-x: hidden;
}
#admin_container #twitch_chat{
	margin-bottom: -10%;
}


#admin_container #twitch_chat iframe{
	margin-top: 2%;
	width: 126%;
	height: 400px;
	-ms-zoom: 0.75;
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.75);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0 0;
}

#admin_container .completionCmd{
	display: block;
	margin-bottom: 10px;
}

#admin_container .progress_button_row{
	margin: 0px 2em;
}

#admin_container .progress_button_row > div{
	padding: 0px;
}

#admin_container .progress_button_row button{
	text-align: left;
}

#admin_container button.completionCmd{
	box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s;
}

#admin_container .progress_button_row button.lastCmd{
	margin: 0px 10px;
}

#admin_container .progress_button_row button .word{
	margin-left: -0.7em;
	text-transform: uppercase;
	color: black;
	padding: .6em;
	border: 1px solid black;
	box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s;
}

#admin_container .progress_button_row button:hover .word{
	color: white;
    border: 1px solid white;
}

#admin_container .progress_button_row button .word:nth-child(2),
#admin_container .progress_button_row button .word:nth-child(3){
	border-radius: 0 .25rem .25rem 0;
}

#admin_container .progress_button_row button .word:nth-child(2){
	border-left: none;
}

#admin_container .progress_button_row button .word:nth-child(3){
	border-left: none;
}

#admin_container .progress_button_row button .word.word-next{}
#admin_container .progress_button_row button .word.word-rand{}
#admin_container .progress_button_row button .word.word-sub{}
#admin_container .progress_button_row button .word.word-here{}

#admin_container .progress_button_row button .word.word-sub.badge-twitch{
	background-color: #6441A4;
}

#admin_popout i, #queue_popout i{
	font-size: 14px;
}


.queue_status.closed .badge-success{
	display: inline;
}

.queue_status.closed .badge-success{
	display: none;
}

.queue_status .badge-danger{
	display: none;
}

.queue_status.closed .badge-danger{
	display: inline;
}

.queue_status{
	cursor: pointer;
	display: inline;
	position: absolute;
	top: 10px;
	left: 10px;
	line-height: 2;
	z-index: 1;
}

#inactive{
    font-size: x-small;
	display: inline;
	position: absolute;
	top: 10px;
	right: 10px;
	line-height: 2;
	z-index: 1;
	color: grey;
}

#inactive input, #inactive label{
	cursor: pointer;
}

#queue_container{

}

button#myLevelsButton{
	margin-top: 10px;
}

#queue_container > div.row > div{
	text-align: left;
	text-indent: 10px;
}

#queue_container > div.row > div.col-4{
	text-align: right;
}

#queue_container > h1{
	text-align: left;
	display: block;
}
#queue_container > h1 > span{
	text-align: left;
	display: inline;
}

.list-group-item-template{
	display: none;
}

.column-titles{
	background-color: #3D3D3D;
	line-height: 2;
	font-weight: bolder;
	padding-top: 4em;
	font-size: small;
}


.column-titles .here,
.column-titles .subscriber,
.column-titles .order{
}

.column-titles .here #here_text,
.column-titles .subscriber #subscriber_text,
.column-titles .order #order_text{
	transform: rotate(-90deg);
	text-align: left;
}

.column-titles .submitter #submitter_text,
.column-titles .levelcode #levelcode_text{
	padding-top: 2em;
}

.column-titles .order #order_badge,
.column-titles .here #here_badge,
.column-titles .subscriber #subscriber_badge{

}

#bot_page_info_link{
	float: right;
}
#bot_page_info_link i{
	font-size: 14px;
}

.material-icons{
	font-weight: bolder;
}

div.here i.material-icons{
	color: green;
}

div.subscriber i.material-icons{
	color: green;
}

div.playlist_add{
	white-space: nowrap;
}

div.playlist_add i.material-icons{
	color: grey;
	cursor: pointer;
}

div.playlist_add i.material-icons:hover{
	color: green;
}

div.playlist_add i.material-icons.remove:hover{
	color: red;
}


div.submitter{
	text-align: left;
}

#no_streamer h1{
	display: block;
}


.break { height: 30px; }
.break::after{
  content: "";
  clear: both;
  display: table;
}

.help-text{
	color: grey;
	font-size:small;
}



/*HEADER & NAV*/
.header{
	text-align: center;
	padding: 10px;
}
.navbar{
	background-color: #3D3D3D;
}

.navbar-default{
	border-radius: 0px;
	border-top: none;
	border-right: none;
	border-left: none;
}

.nav{
	width: 100%;
}

.nav .nav-item .navbar-brand{
	padding-top: 0px;
    padding-bottom: 0px;
    margin-right: 0.4rem;
}

.nav-item{
	border-radius: 10px;
    padding-right: 10px;
    padding-left: 10px;
    text-align: left;
}

.nav-link{
	margin-top: 4px;
}

.nav-item.nav-item-button{
	padding-top: 4px;
}

.nav-item a{
	margin-top: 0px;
}

#twitch{
    text-align: left;
}

.nav-item #linkTwitch{
	background-color: #6441A4;
	color: white;
	display: none;
}

.nav-item #user{
	display: none;
	z-index: 1000;
	margin-top: -10px;
}

.header #profile_image_url{
	max-height: 40px;
	border-radius: 50%;
}

.header #display_name{
	font-weight: bolder;
}

#linkTwitch div{
	display: inline-block;
	font-weight: bold;
}

#linkTwitch img{
	height: 30px;
	margin-top: -16px;
}

#linkTwitch:hover{
	background-color: #3b2064;
	color: #b9a3e3;
}

.popover{

}

.popover #login-popover-body.popover-body{
	border: 1px solid white;
	font-weight: bold;
	text-transform: uppercase;
	text-align: left;
	border-radius: 4%;
	padding-top: 1.5em;
}

.popover #login-popover-body.popover-body li{
	text-transform: none;
	font-weight: normal;
}

.header span{
	color: grey;
	font-style: italic;
}

.header span.image.twitch{
	position: relative;
}

.header span.image.super-mario-maker{
	position: relative;
}

.header span.image{}

.header span.image img{
	max-height: 40px;
}




.footer{
	background: black;
	padding: 16px 20px;
	background-color: #3D3D3D;
}

.footer_left{
	display: inline-block;
	float: left;
	font-style: italic;
	color: grey;
}

.footer_right{
	display: inline-block;
	float: right;
}

.footer_right span{
	color: grey;
}

.footer_right img{
	max-height: 20px;
}

.footer_right a{
	display: inline;
}

.footer_bottom{
	text-align: center;
	font-size: smaller;
	font-style: italic;
	color: grey;
	margin-top: 10px;
}



/*LOADING*/

#refreshing{
	font-size: 8px;
    color: grey;
    font-weight: bold;
    display: none;
    position: absolute;
    top: 1em;
    width: 100%;
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 14px;
  height: 14px;
}
.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    margin: 2px;
    border: 2px solid grey;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: grey transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* COUNTDOWN (for alert) */

#countdown {
	position: relative;
	margin: auto;
	height: 40px;
	width: 40px;
	text-align: center;
	position: absolute;
	right: 0;
	top: 0;
	margin-top: 6px;
	margin-right: 10px;
	color: green;
}

#countdown-number {
  color: white;
  display: inline-block;
  line-height: 40px;
}

svg {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  transform: rotateY(-180deg) rotateZ(-90deg);
}

svg circle {
  stroke-dasharray: 113px;
  stroke-dashoffset: 0px;
  stroke-linecap: round;
  stroke-width: 2px;
  stroke: white;
  fill: none;
  animation: countdown 11s linear infinite forwards;
}

@keyframes countdown {
  from {
    stroke-dashoffset: 0px;
  }
  to {
    stroke-dashoffset: 113px;
  }
}


/*SCREEN SIZE ADJUSTMENTS*?


/* Small devices (landscape phones, 576px and up)*/

@media (max-width: 575px) { 

	body{
		font-size: small;
	}

	.h1, h1 {
	    font-size: 1.5rem;
	}

	.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{
		padding-right: 5px;
		padding-left: 5px;
	}

	.header span.image img {
	    max-height: 30px;
	}

	.header h1{
		font-size: 22px;
	    margin-bottom: 0px;
	    line-height: 1;
	}

	#refreshing {
	}

	#admin_container button{
		font-size: 8px;
    	padding: 2px;
	}

	.container{
		max-width: 750px;
	}

	button#myLevelsButton{
		margin-top: 0px;
	}

	#queue_container > *
	{
		padding-right: 20px;
		padding-left: 20px;
		margin: 0px;
	}

	#queue{
		font-size: 10px;
	}

	#streamer_title{
		font-size: 14px;
	}

	.column-titles{
		line-height: 2;
	    padding-top: 5em;
	    font-size: 12px;
	}

	.material-icons{
		font-size: 12px;
	}

	.column-titles .levelcode #levelcode_text{
		padding-top: 1em;
	}

	.column-titles .submitter #submitter_text{
		padding-top: 1em;
	}

	#admin_container .admin_controls_wrapper .card-body{
		font-size: 10px;
	}
}


@media (min-width: 576px) { 
	body{
		
	}

	.header h1{
		font-size: 22px;
	    margin-bottom: 0px;
	    line-height: 1;
	}

	#refreshing {
	}

	.container{
		max-width: 750px;
	}

	#streamer_title{
		font-size: 16px;
	}

	#admin_container button{
		font-size: 10px;
    	padding: 2px;
	}

	.column-titles{
		line-height: 2;
	    padding-top: 4em;
	    font-size: 10px;
	}

	.modal-dialog {
    	max-width: 700px;
    }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
	body{

	}

	.container{
		max-width: 980px;
	}

	#streamer_title{
		font-size: smaller;
	}

	#admin_container button{
		font-size: 14px;
    	padding: 8px;
	}

	.column-titles{
		line-height: 2.3;
	    padding-top: 4em;
	    font-size: 12px;
	}

	.modal-dialog {
    	max-width: 900px;
    }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
	body{

	}

	.container{
		max-width: 1190px;
	}

	#admin_container button{
		font-size: 14px;
    	padding: 8px;
	}

	.column-titles{
		line-height: 3.4;
		padding-top: 2.5em;
		font-size: 12px;
	}

	.modal-dialog {
    	max-width: 900px;
    }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
	body{

	}

	.container{
		max-width: 1700px;
	}

	#admin_container button{
		font-size: 14px;
    	padding: 8px;
	}

	.column-titles .here #here_text,
	.column-titles .subscriber #subscriber_text,
	.column-titles .order #order_text{
	    margin-bottom: 20px;
	}
	.column-titles{
		line-height: 4;
		padding-top: 1em;
		font-size: 12px;
	}

	.modal-dialog {
    	max-width: 900px;
    }
}