.panel_wrapper {margin-top:10px}
.panel_wrapper div.current {
position:relative;
}

#search_panel {
height: 550px;
}

#ytid {width:100%;}
#width {width:50px}
#height {width:50px}

#query {
	width: 300px;
}

label[for=ytid] {white-space:nowrap}

#channels {
	max-width: 220px;
	border:none;
}

#search_btn {
	position: relative;
	display:inline-block;
	margin-left: 0px;
	border: 1px solid #c5c5c5;
	border-left: none;
	width: 30px;
	height: 29px;
	overflow: hidden;
	cursor: pointer !important;
    background: #e3e3e3 url(../img/magnifier.png) no-repeat center center;
	opacity:0.8;
	vertical-align: middle;
}

#output {
position:relative;
height:427px;
overflow-x:hidden;
overflow-y:auto;
border:1px solid #c5c5c5;
padding:4px;
text-align:center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

#logo {
margin-top:40%;
opacity:0.7;
}

#noResults, #loading {
padding:8px;
text-align:left;
}

.videoItem {
position:relative;
border:1px solid #ccc;
background:#eee;
border-radius:4px;
padding:4px;
margin:0px 0px 8px 0px;
text-align:left;
cursor:pointer;
}

.selected {
border:1px solid #3399ff !important;
box-shadow: 0px 0px 0px 2px inset #3399ff;
}

.videoItem h1 {
font-size:14px;
font-weight: normal;
max-height:36px;
overflow:hidden;
margin: 0px 0px 10px 0px;
}

.videoItem img {
float: left;
margin-right:5px;
border-radius:4px;
}

.videoItem .channel {
font-size:13px;
}

.videoItem .date {
position:absolute;
bottom:5px;
right:5px;
font-size:0.85em;
color:#666;
}

.videoItem .type {
position:absolute;
bottom:5px;
left:130px;
font-size:0.85em;
}

.videoItem .type-video {
color:#ff6600;
}

.videoItem .type-playlist {
color:#009900;
}

div.close {
clear: both;
}

#moreBtn {
display:inline-block;
padding:5px;
color:#666;
text-decoration:none;
}

#moreBtn:hover {
text-decoration:underline;
}

#preview {
width:300px;
overflow:hidden;
border:1px solid #000;
text-align:center;
background: #000;
}

#options {
margin-top:9px;
width:300px;
padding:4px;
border:1px solid #c5c5c5;
box-sizing:border-box;
}

#helpBtn {
display: inline-block;
color:#666;
margin-left:20px;
padding: 8px;
}

.alert {
position:absolute;
top:30%;
left:150px;
width:500px;
padding:15px 25px 15px 15px;
box-shadow: 0px 0px 8px #999;
z-index:10;
}

#alertClose {
position:absolute;
display:inline-block;
right:0px;
top:0px;
padding:2px 8px;
font-weight:400;
color: #858585;
text-decoration:none;
font-size:24px;
}

.alert-info {
border:1px solid #9e9e9e;
color: #666;
background:#fff;
}

.alert-error {
border:1px solid #ebccd1;
color: #b64c42;
background:#f2dede;
}


/*  INPUT GROUP */

/*QuickReset*/
.input-group * {margin:0;box-sizing:border-box;}

.input-group {
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  margin:0;
  box-sizing:border-box;
}

.input-group > div {
  display: table-cell;
  border: 1px inset #c5c5c5;
  vertical-align: middle;  /* needed for Safari */
}

.input-group-icon {
  background:#eee;
  color: #666;
  padding: 0 12px;
  width:1px;
}

.input-group-icon i {
  font-size:16px;
}

.input-group-icon[data-role="submit"] {
	cursor:pointer;
}

.input-group-area {
}

.input-group input {
  border: 0;
  display: block;
  padding: 8px;
}

.input-group-area:focus-within {
  border: 1px solid #0099ff;
}




/* SELECT */

select {

  /* styling */
  background-color: white;
  border: thin solid #c5c5c5;
  border-radius: 2px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 2.5em 0.5em 0.5em;

  /* reset */
  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}


/* arrows */
select.minimal {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    0px 1.5em;
  background-repeat: no-repeat;
}

select.minimal:focus {
  background-image:
    linear-gradient(45deg, green 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, gray 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    0px 1.5em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0;
}

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}




/* TOGGLE SWITCH */
.toggle-check-input {
width: 1px;
height: 1px;
position: absolute;
}
.toggle-check-text {
display: inline-block;
position: relative;
text-transform: uppercase;
background: #CCC;
padding: 0.25em 0.5em 0.25em 2em;
border-radius: 1em;
min-width: 1.5em;
color: #FFF;
cursor: pointer;
transition: background-color 0.15s;
}
.toggle-check-text:after {
content: ' ';
display: block;
background: #FFF;
width: 1.1em;
height: 1.1em;
border-radius: 1em;
position: absolute;
left: 0.3em;
top: 0.25em;
transition: left 0.15s, margin-left 0.15s;
}
.toggle-check-text:before {
content: 'No';
font-size:12px;
font-weight:600;
}
.toggle-check-input:checked ~ .toggle-check-text {
background: #3399ff;
padding-left: 0.5em;
padding-right: 2em;
}
.toggle-check-input:checked ~ .toggle-check-text:before {
content: 'Yes';
font-size:12px;
font-weight:600;
}

.toggle-check-input:checked ~ .toggle-check-text:after {
left: 100%;
margin-left: -1.4em;
}