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

#search_panel {height: 520px}

#user {border:none;max-width: 300px;}
#query {width: 300px;padding-right:20px}
#size {width:200px; border:none}
#title {width:100%}
#url {width:100%;}

#user option:disabled {
    color: #aaa;
}

#clearQuery {
position:absolute;
right:2px;
top: 2px;
padding:5px;
color:#999;
font-size: 16px;
cursor:pointer;
}

#clearQuery:hover {
color:#666;
}


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

#logo {
display:inline-block;
width:100px;
height:100px;
margin-left:45%;
margin-top:100px;
opacity:0.5;
}

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

#more {
text-align: center;
padding:5px;
}

#more a {
color:#666;
text-decoration:none;
}

#more a:hover {text-decoration:underline}

.thumb {
width: 75px;
height: 75px;
border:1px solid #ccc;
border-radius:4px;
margin:7px;
cursor:pointer;
}

.thumb:hover {
border:1px solid #3399ff !important;
box-shadow: 0px 0px 8px #3399ff;
}

.album {
position:relative;
display:inline-block;
text-align:center;
width: 75px;
height: 75px;
border:1px solid transparent;
border-radius:4px;
margin:7px;
cursor:pointer;
opacity:0.8;
}

.album:hover {
opacity:1.0;
}

.album i {
font-size:48px;
color:#0066ff;
}

.album span {
display:inline-block;
position:absolute;
bottom:4px;
left:0px;
right:0px;
text-align:center;
font-size: 11px;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

#albumTitle {
position:relative;
background:#eee;
font-size: 16px;
color:#0066ff;
font-weight:normal;
padding: 5px 30px 5px 40px;
width: 660px;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin:4px;
}

#albumTitle i:nth-child(1) {
position:absolute;
left: 8px;
top: 4px;
font-size: 22px;
font-weight:normal;
}

#albumTitle i:nth-child(2) {
position:absolute;
right: 8px;
top: 4px;
font-size: 14px;
font-weight:normal;
color: #888;
padding:4px;
cursor:pointer;
opacity:0.7;
}

#albumTitle i:nth-child(2):hover {
opacity:1.0;
}

.selected, .selected:hover {
border:1px solid #3399ff !important;
box-shadow: 0px 0px 0px 3px #3399ff !important;
}

#info {font-size:0.9em}
#info a {color:#666;text-decoration:none}
#info a:hover {text-decoration:underline}
#info > span {
	margin-right: 20px;
}

.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;
}

#statusbar {
float:left;
left:20px;
top:0px;
width:500px;
padding:10px;
text-align:left;
color:#888;
font-size:0.9em;
}


#menu a {
display:block;
padding: 12px 8px;
font-size: 14px;
color:#ddd;
}

#menu a:hover {
background: #3399ff;
color: #fff;
}

#menu i {
float:right;
padding: 2px;
font-size:16px;
}


/*  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 {
position:relative;
}

.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, gray 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;
}


/** BUTTON SWITCHES ***/
.switch-field {
    overflow: hidden;
}

.switch-title {
  display:none;
  margin-bottom: 6px;
}

.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label {
  float: left;
}

.switch-field label {
  display: inline-block;
  width: 65px;
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  text-shadow: none;
  padding: 6px 14px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition:    all 0.2s ease-in-out;
  -ms-transition:     all 0.2s ease-in-out;
  -o-transition:      all 0.2s ease-in-out;
  transition:         all 0.2s ease-in-out;
}

.switch-field label:hover {
    cursor: pointer;
}

.switch-field input:checked + label {
  background-color: #3399ff;
  color:#fff;
}

.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}


/* POPUP MENU */

.popup {
    position: relative;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 220px;
    background-color: #555;
    color: #666;
    border-radius: 4px;
    padding: 10px 0px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 0;
	box-shadow: 0px 0px 6px #999;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 25%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */

.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 0.5s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}