/* Empty. Add your own CSS if you like */

.jvbutton {
  float: left;
  display: block;
  background: #387EF5;
  color: white;
  box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10),
  0 3px 6px 0 rgba(0,0,0,0.08);
  border-radius: 4px;
  border: 0;
  margin-top: 5px;
  font-size: 15px;
  font-weight: 400;
  width: 100%;
  height: 40px;
  line-height: 38px;
  outline: none;
}

.jvbutton .red-jvbutton {
  background: red;
}

.jvbutton button:focus {
  background: #555ABF;
}

.jvbutton button:active {
  background: #43458B;
}

.jvbutton-no-border-radius {
  border-radius: 0px;
}

.nav-icon {
  vertical-align: middle;
  font-size: 25px;
  width: 35px;
  display: inline-block;
  text-align: center;
  color: #F1F1F1;
}

.nav-text {
  vertical-align: middle;
}

.light-text {
  color: #F1F1F1;
}

.popup-head {
  color: #F1F1F1 !important;
}

.popup-body {
  color: #F1F1F1 !important;
}

.form-control::-moz-placeholder{
  color: white !important;
  opacity: 1 !important;
}
.form-control:-ms-input-placeholder{
  color: white !important;
}
.form-control::-webkit-input-placeholder{
  color: white !important;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}

.glyphicon-refresh-animate {
  -animation: spin .7s infinite linear;
  -webkit-animation: spin2 .7s infinite linear;
}

.glyphicon-repeat-animate {
  -animation: spin .7s infinite linear;
  -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
  from { -webkit-transform: rotate(0deg);}
  to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
  from { transform: scale(1) rotate(0deg);}
  to { transform: scale(1) rotate(360deg);}
}


@font-face {
  font-family: "Roboto Regular";
  src: url('../lib/ionic/fonts/Roboto-Regular.ttf');/* relative path from the css file */
}

@font-face {
  font-family: "Roboto Bold";
  src: url('../lib/ionic/fonts/Roboto-Bold.ttf');/* relative path from the css file */
}

@font-face {
  font-family: "Roboto Bold Italic";
  src: url('../lib/ionic/fonts/Roboto-BoldItalic.ttf');/* relative path from the css file */
}

@font-face {
  font-family: "Roboto Italic";
  src: url('../lib/ionic/fonts/Roboto-Italic.ttf');/* relative path from the css file */
}

h1, h2, h3, h4, h5, h6, p {
  line-height: normal !important;
}

.whitespace-normal {
  white-space: normal !important;
}

.line-height-fix {
  line-height: 44px !important;
}

input::-ms-clear {
  display: none;
}

/*-------------------------------------------
	CSS Ionic overrides
--------------------------------------------*/


/*
	Dark Theme overrides
*/

/*html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, i, u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, fieldset,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	background-color: green;
}

.ionic-body {
	background-color: green;
}

.scroll-content {
	background-color: green;
}

.pane,
.view {
	background-color: green;
}

.bar-header {
	background-color: green;
}

.item {
	background-color: green;
}

.panel-heading {
	background-image: linear-gradient(to bottom, #FFF 0, #FFF 100%) !important;
}*/

/*
	End Dark Theme overrides
*/


.no-radius img {
  border-radius: 0% !important;
}

.customized-color {
  color: #ffc900 !important;
}

.inherit-color {
  color: inherit !important;
}

.item.item-trns {
  border-color: rgba(240, 240, 240, .002);
  background-color: rgba(240, 240, 240, .1);
  color: white !important;
}

.ng-hide-add,
.ng-hide-remove {
  display: none !important;
}

label {
  font-weight: normal !important;
}

/* Color overrides */

.action-sheet-title {
  border-top: 1px solid white !important;
  color: white !important;
  background-color: #444444 !important;
}

.action-sheet .button {
  background-color: #323232 !important;
  color: white !important;
}

.modal {
  background-color: #323232 !important;
  margin-top: 45px !important;
}

.pane, .view {
  background-color: #323232 !important;
}

.well {
  background-image: none !important;
  background-color: #444444 !important;
}

.popup-container .popup {
  background-color: #323232 !important;
  border: 1px solid !important;
  border-color: #717171 !important;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.item-radio .item-content {
  background-color: #444444 !important;
}

.nav-bar-block .bar-header .title {
  color: #FFF !important;
}

.title {
  color: #444444 !important;
}

ion-content {
  background-color: #323232 !important;
}

.panel {
  background-color: #323232 !important;
  border: 0px !important;
}

.panel-body {
  background-color: #323232 !important;
}

.panel-heading {
  background-image: none !important;
  background-color: #323232 !important;
}

.panel-default {
  background-color: #323232 !important;
}

.list {
  background-color: #323232 !important;
}

.select-text {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.item {
  background-color: #323232 !important;
  color: white !important;
  border: 0px !important;
}

.item-content {
  background-color: #323232 !important;
}

.thumbnail .caption {
  color: white !important;
  padding: 2px !important;
}

.bar.bar-stable {
  background-color: #e1e1e1 !important;
}

.item p {
  color: #969696 !important;
}

.alert {
  -webkit-box-shadow: unset !important;
  box-shadow: unset !important;
}

.card {
  background-color: #323232 !important;
}

.content-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.range {
  padding: 0px 1px 0px 1px;
  color: white !important;
}

.help-block {
  color: white !important;
}

/* End color overrides */

ion-infinite-scroll {
  display: none !important;
}

input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea {
  padding-left: 12px !important;
  padding-top: 6px !important;
  border: 1px solid #6c6c6c !important;
  background-color: #7b7b7b !important;
  color: white !important;
}

.tab-item {
  opacity: 0.6 !important;
  color: lightcyan !important;
}

.tab-item.tab-item-active, .tab-item.active, .tab-item.activated {
  opacity: 1 !important;
  color: #ffc900 !important;
}

.recent-tabs-ticket-badge {
  font-size: 12px !important;
  margin-right: -20px !important;
  right: 24px !important;
  top: 8px !important;
}

.recent-tabs-total-badge {
  font-size: 12px !important;
  margin-right: -20px !important;
  right: 24px !important;
  top: 30px !important;
}

.request-queue-ago {
  font-size: 11px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.request-queue-likes-badge {
  font-size: 20px !important;
  margin-right: -20px !important;
  right: 24px !important;
  top: 4px !important;
}

.request-queue-dislikes-badge {
  font-size: 20px !important;
  margin-right: -20px !important;
  right: 24px !important;
  top: 34px !important;
  opacity: .8;
}

.item-song-queue {
  padding-top: 9px !important;
  padding-bottom: 10px !important;
}

.item-song-queue-btns {
  white-space: nowrap !important;
  right: 3px !important;
  top: 2px !important;
  position: absolute !important;
}

.credit-badge {
  font-size: 20px !important;
  right: 10px !important;
}

.request-credit-badge {
  font-size: 20px !important;
  margin-right: 0px !important;
  top: 5px !important;
  right: 0px !important;
}

.radio-item-content {
  height: 33px !important;
  padding-top: 8px !important;
}

.item-radio .item-content {
  padding-right: 45px;
}

.item-radio .item-content {
  padding-left: 6px;
}

.item .badge {
  /*right: 10px !important;*/
}

.credit-history-badge {
  right: 10px !important;
  top: 10px !important;
}

/* Overwrites-fixes ionic header for ios6 */
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader){
  height: 44px;
}
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
  margin-top: 0px;
}
.platform-ios.platform-cordova:not(.fullscreen) .has-header,
.platform-ios.platform-cordova:not(.fullscreen) .bar-subheader {
  top: 44px;
}

.juke-item p {
  overflow: visible !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}
/*------------------------------------------
	Responsive Grid System
--------------------------------------------*/

/*------------------
	SECTIONS
--------------------*/
.section {
  clear: both;
  padding: 0px;
  margin: 0 auto;
  max-width: 800px;
}

/*------------------
	COLUMN SETUP
--------------------*/
.coll {
  display: block;
  float:left;
  margin: 0px 0px 0px 0px !important;
  padding: 2px 0px 0px 0px !important;
}

.col-artists {
  display: block;
  border-bottom: 1px solid #dddddd !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  -webkit-flex: 1;
}

.col:first-child {
  margin-left: 0 !important;
}

/*------------------
	  GROUPING
--------------------*/

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

/*------------------
	 GRID OF THREE
--------------------*/
.span_2_of_2 {width: 49%;}
.span_1_of_2 {width: 49%;}

/*------------------
	 GO FULL WIDTH AT LESS THAN 600 PIXELS
--------------------*/

@media only screen and (max-width: 600px) {
  .col { margin: 1% 0 1% 0%;}
}

@media only screen and (max-width: 600px) {
  .span_2_of_2 {width: 100%;}
  .span_1_of_2 {width: 100%;}
}

@media only screen and (max-width: 540px) {

  .request-queue-title {
    width: 65%;
  }

}

/*---------------------------
	SPINNER
----------------------------*/

.load-spinner {
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 50%; /* Rounds out the halo */
  opacity: .7; /* Some subtle opacity to help blend with variable background colors */
  float: left;
  margin-left: 3px;
  margin-top: 2px;
}
.load-spinner.small {
  height: 20px; width: 20px; /* Pixel size of the GIF you download */
  background: url("../img/loader-20x20.gif");
}
.load-spinner.medium {
  height: 30px; width: 30px;
  background: url("../img/loader-30x30.gif");
}
.load-spinner.large {
  height: 66px;
  width: 66px;
  background: url("../img/loader-66x66.gif");
}

.load-spinner-search {
  position: absolute;
  right: 75px;
  height: 14px;
  margin: 12px;
  color: #000;
  z-index: 2;
  float: left;
  top: -5px;
}

/*---------------------------
	JukeVision
----------------------------*/

.welcome-content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background: url('../img/welcome-background.jpg') no-repeat top center;
  height: 800px;
  margin-top: -10px;
}

.welcome-content {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 0;
  margin-left: 0px;
  margin-right: 0px;
  background-color: #000 !important;
}

/*---------------------------
Bootstrap CSS overrides
-----------------------------*/

/* Overrides header links padding to fit more on mobile devices*/
.nav > li > a {
  padding-right: 6px !important;
  padding-left: 6px !important;
}

/* Overrides now-playing thumbnail box on home page*/
.now-playing.thumbnail {
  margin-bottom: 0px !important;
  border: none !important;
  border-radius: 0px !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  padding: 0px !important;
  background-color: #323232 !important;
}

/* Brings down the main content for the fixed hover navbar */
body {
  color: black !important;

  -webkit-touch-callout: none !important;
  font-family: Roboto, 'Roboto Regular',"Helvetica Neue",Helvetica,Arial,sans-serif !important;
  font-size: 10pt !important;
  cursor: url('../img/ionic-finger.png'), auto !important;

  padding-top: constant(safe-area-inset-top) !important; /* iOS 11.0 */
  padding-top: env(safe-area-inset-top) !important; /* iOS 11.2+ */
  /*padding-top: 30px !important;*/
}

.tab-nav {
  margin-bottom: calc(constant(safe-area-inset-bottom) + 10px); /* iOS 11.0 */
  margin-bottom: calc(env(safe-area-inset-bottom) + 10px); /* iOS 11.2+ */
  height: 75px;
}

.view-container {
  /* iOS 11.0 */
  /* margin-bottom: constant(safe-area-inset-bottom) !important;  */
  /* iOS 11.2 */
  /* margin-bottom: env(safe-area-inset-bottom) !important;  */

  /*height: -webkit-calc(100% - -webkit-calc(constant(safe-area-inset-top)) / 2) !important;*/
  /*height: -moz-calc(100% - -moz-calc(constant(safe-area-inset-top)) / 2) !important;*/
  /*height: calc(100% - calc(constant(safe-area-inset-top)) / 2) !important;*/

  /*height: -webkit-calc(100% - -webkit-calc(env(safe-area-inset-top)) / 2) !important;*/
  /*height: -moz-calc(100% - -moz-calc(env(safe-area-inset-top)) / 2) !important;*/
  /*height: calc(100% - calc(env(safe-area-inset-top)) / 2) !important;*/

  /*height: calc(100% - 30px) !important;*/
}

footer {
  /*margin-bottom: constant(safe-area-inset-bottom) !important; !* iOS 11.0 *!*/
  /*margin-bottom: env(safe-area-inset-bottom) !important; !* iOS 11.2 *!*/
}

a { -webkit-user-select: none !important; text-decoration: none !important; }

/* Custom dialog/modal headers */

.dialog-header-error { background-color: #d2322d; }
.dialog-header-wait { background-color: #428bca; }
.dialog-header-notify { background-color: #eeeeee; }
.dialog-header-confirm { background-color: #333333; }
.dialog-header-error span, .dialog-header-error h4,
.dialog-header-wait span, .dialog-header-wait h4,
.dialog-header-confirm span, .dialog-header-confirm h4 { color: #ffffff; }

.row {
  margin-left: 0px !important;
  margin-right: 0px !important;
  padding: 1px !important;
  padding-top: 2px !important;
  padding-bottom: 4px !important;
}

.dropdown-backdrop {
  position: static !important;
}

.artist-image {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  height: auto !important;
  width: 100%;
  /*border: 1px solid #F8E1E1;*/
}

.user-checkin-img {
  height: auto;
  max-height: 250px;
  max-width: 375px;
  width: 100%;
}

.panel {
  border-radius: 0px !important;
  margin-bottom: 0px !important;
}

.panel-body {
  padding: 0px !important;
}

.panel-body-larger {
  padding: 10px !important;
}

.item-small-text {
  font-size: 10pt;
}

.bar.bar-dark .title {
  text-align: center !important;
}

.modal-body {
  padding-top: 5px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.modal-announce {
  max-width: 375px;
  margin: 0 auto;
}

.modal-announce-body {
  padding-top: 1px !important;
  padding-left: 1px !important;
  padding-right: 1px !important;
}

.inline-announce {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
}

.inline-announce-header {
  font-size: 7pt;
}

.background-lightgray {
  background-color: #4e4e4e !important;
}

.inline-announce-group {
  padding: 3px 0px;
  border-radius: 5px;
  border: 1px dashed rgba(79, 75, 255, 0.5);
}

.item-compact {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.item-super-compact {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
  margin: 0px !important;
}

.item-nav {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  padding-left: 10px !important;
  padding-right: 0px !important;
  margin: 0px !important;
  border-bottom: 1px darkslategray solid !important;
}

.credits-badge-header {
  font-size: 15px !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.credits-badge-nav {
  font-size: 20px !important;
  top: 6px !important;
  right: 10px !important;
}

.credits-badge-color {
  background-color: #FFD863 !important;
  color: black !important;
}

.panel-heading {
  padding: 3px 0px !important;
  border-radius: 5px !important;
  /* border-bottom-left-radius: 0px !important; */
  /* border-bottom-right-radius: 0px !important; */
  /*background-image: linear-gradient(to bottom, #FFF 0, #FFF 100%) !important;*/
  color: white !important;
  font-weight: bold;
  font-size: 13pt;
  border: 1px dashed rgb(248, 152, 30) !important;
  /* border-bottom-color: rgb(213, 239, 255) !important; */
  margin-left: 2px;
  margin-right: 2px;
  text-transform: uppercase;
}

/*.panel-default {*/
  /*border-color: #F9F9F9 !important;*/
/*}*/

.list-group {
  margin-bottom: 0px !important;
}

.list-group-item {
  padding-top: 7px !important;
  padding-bottom: 20px !important;
  padding-left: 6px !important;
  border: 0px !important;
  border-top: 1px solid #dddddd !important;
}

.list-group-item:first-child {
  border-top-right-radius: 0px !important;
  border-top-left-radius: 0px !important;
  border-top: 0px !important;
}
.list-group-item:last-child {
  margin-bottom: 0 !important;
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

p {
  margin-bottom: 2px !important;
}

.col-xs-12 {
  width: 100% !important;
}

.alert {
  margin-bottom: 2px !important;
}

.navbar-btn {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}



/*----------------------------
 Navbar
------------------------------*/

.jh-navbar-uncollapsed {
  margin-left: 10px;
}

.collapse-menu-items {
  display: normal;
}

.collapse-menu-items ul {
  list-style-position: outside;
}

@media only screen and (min-width: 390px) {
  .collapse-menu-items {
    display: none;
  }
}

/*---------------------------
 Alphabet selector
-------------------------*/

.alphabet {
  list-style-type: none;
  margin: 10px auto 0;
  padding:0;
  width:100%;
  text-align:center;
}

.alphabet li {
  float:left;
  margin:0;
  padding:0;
  border-right:1px solid darkgrey;
  font-size: 13px;
  -moz-box-sizing:border-box;
  color:black;
  display:inline-block;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  width:3.70%;
}

.alphabet li:last-child {
  border-right: none;
}

.alphabet li:hover {
  color:green;
  background-color: lightgrey;
}

#wlogo-cnt img {
  height: auto;
  width: 100%;
  max-width: 400px;
}
#wlogo-cnt {
  margin-bottom: 30px;
  margin-top: 40px;
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
}

#wlogo-connect {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

.wlogo-login img {
  height: auto;
  width: 100%;
  max-width: 302px;
}

#wlogo-connect div {
  padding: 3px;
}

.ellipsed {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.now-playing-album {
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border-radius: 7px 7px 7px 7px;
  border: 1px outset rgba(0,0,0,0.19);
  padding: 10px;
  display: inline-flex;
  white-space: nowrap;
  vertical-align: top;
}

.title-thumbnail-left, .title-thumbnail-left item-content {
  padding-top: 11px !important;
  padding-left: 71px !important;
  min-height: 70px !important;
  padding-bottom: 3px !important;
}

img.circle-artist {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50%;
  /*position: absolute;*/
  bottom: 10px;
  float: left;
}

img.circle-artist.inline {
  float: left;
}

img.media-type-overlay {
  position: absolute;
  left: 5px;
  top: 45px;
}

img.download-required-overlay {
  position: absolute;
  left: 5px;
  top: 10px;
}

.location-online-status {
  position: absolute;
  top: 9px;
  left: 104px;
  width: 16px;
}

img.request-queue-media-type {
  position: absolute;
  left: 17px;
  top: 65px;
}

i.request-queue-fast-forward {
  position: absolute;
  left: 42px;
  top: 63px;
}

img.circle-artist-large {
  width: 100px;
  height: auto;
  border-radius: 50%;
  /*position: absolute;*/
  bottom: 10px;
  float: left;
}

.item {
  margin: 0px !important;
}

.cloud-search-result {
  background-color: #171717 !important;
  border: 1px dashed rgb(248, 152, 30) !important;
  border-radius: 5px !important;
  min-height: 60px !important;
}

.cloud-search-result img {
  display: none !important;
}

.navigation-player-control {
  padding-bottom: 10px !important;
  max-height: 95px;
  height: 95px;
}

.navigation-player-control-no-volume {
  padding-bottom: 10px !important;
  max-height: 42px;
  height: 42px;
}

.jukebox-brand-image {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  float: left;
  height: auto;
  max-width: 75px;
  border: 1px solid #F8E1E1;
  margin-right: 9px;
}

.header-logo img {
  height: 28px;
  width: auto;
  /* max-width: 34px; */

  margin-top: 4px;

  margin-left: -17px;

  margin-right: 0px;
}

.center-image {
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

#searchclear {
  position: absolute;
  right: 52px;
  height: 14px;
  margin: 7px;
  font-size: 18px;
  color: #000;
  z-index: 2;
  float: right;
}

.ms-no-clear::-ms-clear {
  display: none;
}

.request-info {
  position: absolute;
}

.request-vote {
  position: absolute;
}

.menu {
  list-style: none;
  margin-bottom: 2em;
  padding: 0 0 0.5em;
}

.menu:before {
  content: "[";
}

.menu:after {
  content: "]";
}

.menu > li {
  display: inline;
}

.menu > li:before {
  content: "|";
  padding-right: 0.3em;
}

.menu > li:nth-child(1):before {
  content: "";
  padding: 0;
}


/*---------------------
	Title Info Module
-----------------------*/

.title-info .title {
  text-align: center;
}

.title-info .container {
  padding-top:20px;
  width:95%;
  margin:0 auto;
}

.title-info {
  border-collapse: collapse;
  border-spacing: 0;
  width:100%;
  margin: 0 auto;
  max-width: 400px;
}

.title-info img {
  height: auto;
  max-width: 140px;
}

.title-info td {
  padding: 2px;
  text-align: center;
}

.tr-divider {
  /*border-top: 1px solid #555555;*/
}

/*.title-info tr {
	background:#404040;
	color:#fff;
}*/

.title-info .voting {
  margin: 0 auto;
  width: 100%;
}

.no-margin-top-bottom {
  margin-bottom: 0px !important;
  margin-top: 0px !important;
}

.list-slim-margin {
  margin-bottom: 5px !important;
}

.form-group-slim-margin {
  margin-bottom: 5px !important;
}

.button-slim-margin {
  margin-top: 1px !important;
  margin-bottom: 3px !important;
}

.center-400-max-width {
  margin: 0 auto;
  /*margin-top: 10px;*/
  max-width: 410px;
  width: 100%;
}

.card-no-margin {
  margin: 0px !important;
  padding: 0px !important;
  overflow: hidden;
  min-height: 75px;
}

.camera-overlay-account {
  position: absolute;
  left: 55px;
  top: 92px;
  height: auto;
  width: 21px;
}