/*---------------------------------------------------
    GESTION LIGAS 2015
    Version: 1.0
    Autor: Marcos Torregrosa Munumer
  -----------------------------------------------------

    1. General
    2. Errores y mensajes
    3. Menú responsive
    4. Contenido
    5. Formularios
    6. Paginador
    7. Botones
    8. Responsive

  -----------------------------------------------------
  1. General
  ---------------------------------------------------*/
  :root { --color-text: #333; --color-primary: #d11e00; --color-primary-dark: #a00000; --color-surface-dark: #333; --color-surface-muted: #777; }
  *,body, html { margin: 0px; padding: 0px; -webkit-text-size-adjust: none;}
  body, html {width: 100%;    font-family: 'Open Sans', Arial, sans-serif; color: var(--color-text); font-size: 13px }
  button, input, select, textarea, table, fieldset,
  .button, .btn-volver, .btn-paginador, .btn-editar-reg, .btn-borrar,
  .submit-button, .btn-grabar, .btn-editar, .btn-listas, .btn-fases,
  .nav-collapse li, .nav-collapse li a, .nav-toggle,
  #contenedor-principal h2, #buscador, #form, #selector-informes,
  #mensaje-error, #mensaje-ok, #mensaje-aviso, #noform-mensaje-error,
  #noform-mensaje-ok, #noform-mensaje-aviso { border-radius: 3px; }
  h1 { font-size: 1.5em; float: left; margin: 15px 0px 0px 20px}
  h2 { font-size: 1.2em; margin-bottom: 10px }
  h3 { font-size: 1.1em;  margin: 0px 0px 20px 0px}
  h1 a, h1 a:link, h1 a:visited {color: var(--color-text); text-decoration: none; }
  h1 a:hover { color: var(--color-primary);}
  h2, .h2-gerente, .h2-admin  {font-family: 'Oswald', sans-serif !important;  font-weight: 400; color:#FFF; text-decoration: none; font-size: 1.0em; background: var(--color-surface-dark); width:100% !important; display: block; padding:5px 10px; box-sizing: border-box; float:left;}
  .h2-gerente {background: #198eb0 !important;}
  .h2-admin {background: #79a70e !important;}
  h3 a, h3 a:link, h3 a:visited{color: #d33d2e; text-decoration: none; margin-top: 10px;  font-family: Georgia; font-size: 1.3em}
  h3 a:hover{ color: #333; text-decoration: underline;}
  p {margin: 1em 0em;}
  .display-block {display:block !important;}
  .display-none, .mostrar-mobile {display:none;}
  .right img {display: block; float:right; padding-left: 10px;}
  .align-right { text-align: right; }
  .align-center { text-align: center; }
  .align-left { text-align: left !important; }
  .no-border {border: 0px !important;}

  /*---------------------------------------------------
  2. Errores y mensajes
  ---------------------------------------------------*/
  #login #box-error, #login .form-error, #contenedor-principal .form-error  { width: 280px; background: #f27a6d; border: 1px solid #d33d2e; color: #FFF; padding: 15px 10px; margin: 10px 0px; display: block; }
  #login #box-error {width: 280px;}
  #login .form-error, #contenedor-principal .form-error { text-align: left; padding-left: 10px; }
  #login .form-error ul, #contenedor-principal .form-error ul {list-style: none;}
  #contenedor-principal .form-error { width: 96% !important} 
  #noform-mensaje-aviso a {text-decoration: none; font-weight: bold; color: #333;}
  #noform-mensaje-aviso a:hover {color: #999;}
  form #mensaje-error,form #mensaje-ok,form #mensaje-aviso {width: 96%; margin-top:20px;}
  #noform-mensaje-ok a {text-decoration: none; font-weight: bold; color: #FFF;}
  #noform-mensaje-ok a:hover {color: #333;}
  #mensaje-error,#mensaje-ok,#mensaje-aviso, .aviso-admin-simulacion-empresa   {width: 98%;  border: 1px solid #d33d2e; color: #FFF; padding: 15px 10px;  display: block; } 
  #agenda-error {width: 98%;  border: 1px solid #d33d2e; color: #FFF; padding: 15px 10px; margin: 10px 0px;  display: none;}
  #noform-mensaje-error,#noform-mensaje-ok,#noform-mensaje-aviso {width: 94%;  border: 1px solid #d33d2e; color: #FFF; padding: 15px 10px; margin: 30px auto 0px auto; display: block; } 
  #noform-mensaje-aviso form {padding: 15px 10px!important;}
  #noform-mensaje-ok form {padding: 0px 10px!important;}
  .div-aviso-stock { padding: 0px 10px!important; }
  #mensaje-error, #noform-mensaje-error, #agenda-error { background: #f27a6d; clear: both !important}
  #mensaje-ok, #noform-mensaje-ok {background: #85af49; }
  #mensaje-aviso, #mensaje-aviso-stock, #noform-mensaje-aviso {background: #fad850; color:#333;}
  #mensaje-error a  { text-decoration: none; color: white; font-weight: bold }
  #mensaje-error a:hover { text-decoration: underline }

  @media screen and (max-width:450px) {
    /*h1, h2, h3 {font-family: arial !important}*/
    h3 {float:left;}
    #mensaje-error, #mensaje-ok, #mensaje-aviso {width: 100% !important;  margin: 0px; text-align: center; border-radius: 3px; padding: 0px; padding: 15px 0px;}
    #contenedor-principal .form-error  { clear: both;  margin: 0px; padding: 15px 0px; text-align: center;}
  }

  /*---------------------------------------------------
  3. Menu responsive
  ---------------------------------------------------*/
  .nav-collapse .home{padding:2px 0px;}
  .nav-collapse .logout {background: grey !important; float:right; margin-right:0px;}
  .nav-collapse .logout:hover {float:right; margin-right:0px;}
  .nav-collapse,
  .nav-collapse * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .nav-collapse,
  .nav-collapse ul {
    list-style: none;
    width: 100%;
    float: left;
  }
  .nav-collapse li {
    float: left;
    height:34px;
    font-size: 0.85em;
    background: var(--color-primary);
    margin-right:3px;
  }
  .nav-collapse li a:hover{
    background: var(--color-surface-dark);
  }
  .nav-collapse a.btn-admin {
    background: var(--color-primary);
  }
  .nav-collapse a.btn-admin:hover {
    background: var(--color-surface-dark);
  }
  .nav-collapse li.menu-activo > a,
  .nav-collapse li.menu-activo > a:hover {
    background: var(--color-primary-dark);
  }
  @media screen and (max-width: 830px) {
    .nav-collapse li {
      width:100% !important;
      text-align: center;
    }
  }
  .nav-collapse a {
    color: #fff;
    text-decoration: none;
    width: 100%;
    padding:9px 13px;
    float: left;
  }
  @media screen and (min-width: 40em) {
    .nav-collapse a {
      margin: 0;
      float: left;
      text-align: center;
    }
  }
  .nav-collapse ul ul a {
    background: #ca3716;
    padding-left: 2em;
  }
  @media screen and (min-width: 40em) {
    .nav-collapse ul ul a {
      display: none;
    }
  }
  .nav-toggle {
    width: 100%;
    height: 42px;
    float: right;
   /* margin-bottom:20px;*/
  }
  .nav-toggle:before {
    color: #fff;
    background:#d11e00;
    font-size: 40px;
    position: absolute;
    content: '\2261';
    text-indent: 0;
    text-align: center;
    line-height: 42px;
    speak: none;
    width: 100%;
    left: 0;
  }
  #contenedor-principal .nav-toggle:hover:before {
      background: var(--color-surface-dark) !important;
  }
  .nav-toggle.active::before {
    font-size: 24px;
    content:"x";
  }
  .nav-collapse ul {
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
    list-style: none;
  }
  .js .nav-collapse {
    clip: rect(0 0 0 0);
    max-height: 0;
    position: absolute;
    display: block;
    overflow: hidden;
    zoom: 1;
  }
  .nav-collapse.opened {
    max-height: 9999px;
  }
  @media screen and (min-width: 830px) {
    .js .nav-collapse {
      position: relative;
    }
    .js .nav-collapse.closed {
      max-height: none;
      margin-bottom:20px;
    }
    .nav-toggle {
      display: none;
    }
  }


  /*---------------------------------------------------
  4. Contenido
  ---------------------------------------------------*/
  #contenedor-principal  {position:relative;  max-width:960px; min-width:320px; margin: 0 auto; margin-top: 20px; display: block; clear: both; padding-bottom:60px;}
  #contenedor-principal h2 { font-family: 'Oswald', sans-serif; font-size: 1.4em; color:#EEE;}
  #contenedor-principal table {width: 100%; font-size: 0.9em}
  #contenedor-principal table th { background: #f3f1f1;}
  #contenedor-principal .button { min-width: 100px; max-width: 200px; text-align: center; float: right; margin-top: 0px;}
  #btn-alta { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 10px 0; }
  #btn-alta form { margin: 0; }
  #btn-alta .button { float: none; }
  #contenedor-principal .button img { float: left ;  width: 16px; margin-right: 10px;}
  .table-3 td, .table-3 th { width: 46.2%;  padding: 5px; }
  .table-5 td, .table-5 th { width: 22.5%;  padding: 5px; }
  .table-6 td, .table-6 th { padding: 5px; }
  .table-7 td, .table-7 th { width: 15.5%;  padding: 5px; }
  .table-8 td, .table-8 th { width: 13.2%;  padding: 5px; }
  .td-acciones { width: 90px }
  .p-home { padding-top: 10px; }
  .config-logo {width: 312px;   display: table-cell;  text-align: center;}
  .btn-gestionar-compras { margin-bottom: 50px; display: block; clear: both;}
  .btn-gestionar-compras a { width: 240px !important; max-width: 400px !important}
  #div-volver {height: 20px; margin: 10px 0px !important;}
  .ocultar-mobile span {display: inline-block;padding: 10px 0px 0px 0px}
  .loading-select {text-align: center; width: 290px; }
  #img-cabecera { width: 100%; margin-bottom: 20px;}
  #img-cabecera img{ width: 100%}
  .contenedor-estrellas {display: block; clear:both; width: 100%;}
  .resultados-izq { float: left !important; left: 160px !important;  width: 300px !important}
  .resultados-dec { float: left !important; width: 300px !important; margin-left: 25px !important }
  .resultados-izq p, .resultados-dec  p { text-align: center; font-size: 1.3em; color:#FFF; margin: 0 0 5px 0 !important;}
  .resultados {clear:both; height: 100px}
  .p-misiones {margin-left: 150px;margin-bottom: 40px;}
  @media screen and (max-width:450px) {
    .resultados-dec { float: left !important; width: 300px !important;  margin: 0px !important;}
    .resultados-izq { float: left !important;  width: 300px !important; margin: 0px !important}
    .p-misiones {margin-left: 0px}
  }
  .ui-slider-handle {cursor: pointer !important;}
  #btnAltaJugador, #btnAltaCliente, #btnAltaLista {margin: 10px 0px !important;}
  .div-ranking-izq { width:49%; float: left; display: block; margin-right:2%;}
  .div-ranking-dch { width:49%; float: left; display: block;}
  .div-ranking-izq table, .div-ranking-dch table { width:100%;   border-collapse: collapse; border-spacing: 0; }
  .div-ranking-izq h2, .div-ranking-dch h2 {padding: 5px 0px !important; width: 100% !important; text-align: center}
  .div-ranking-izq table td, .div-ranking-dch table td { padding: 10px 0px; border-top: 1px solid #eee; padding: 10px 24px; text-align: center}
  .div-ranking-izq table th, .div-ranking-dch table th { padding: 10px 0px; background: white !important; font-weight: bold}
  .bg-0 {background: #fddd85 }
  .bg-1 {background: #dfdcd5 }
  .bg-2 {background: #edcba4 }

  #boxlogomodelbrush{
    padding-top:20px;
    text-align:center;
    width:100%;
  }
  #altaResultado{
    padding-top:40px !important;
  }


  /*---------------------------------------------------
  5. Formularios
  ---------------------------------------------------*/
  #buscador, #form, #selector-informes { background: var(--color-surface-muted);min-height: 30px; color: white; }
  .input-resultado {  background: #777 !important; color:#FFF; font-size: 3.3em; font-weight: bold; border: 0px !important;  text-align: center; }
  #buscador {clear:both; }
  #form { min-height: 280px; margin-top: 55px;}
  #buscador form { padding: 20px 0px 20px 10px;  }
  #form form {padding: 5px 0px 5px 30px}
  #buscador input { margin-right: 10px;  max-width: 150px !important;}
  #form input , #form select, #form textarea { margin-right: 10px;  max-width: 400px !important;}
  #buscador select{ margin-right: 10px;  max-width: 158px !important;}
  #form  label {width: 150px; display: block; float: left; text-align: right; padding-top: 5px; margin-right: 10px; }
  #buscador input, #buscador select, #form input, #form select, #form-simulacion-empresa select, #form textarea {padding: 5px; border: 1px solid #888; background:#ccc;  }
  #form input {width: 300px;}
  #form textarea {width: 60%;}
  #buscador .input-corto-70 {width: 70px !important;}
  #buscador .input-corto-140 {width: 140px !important;}
  #buscador .input-corto-200 {width: 200px !important;}
  #form select {width: 300px !important;}
  #buscador .submit-button, #form .submit-button, .btn-grabar, .btn-editar  { background: #333; color:#FFF;  border: 0px; padding: 7px 10px ; cursor: pointer;  text-decoration: none; }
  .btn-grabar {background: var(--color-primary); float:right !important; margin-right: 10px}
  #form .submit-button {margin-left: 150px; width: 310px !important;}
  #buscador-mobile { display: none;}
  .form-btn-acciones {display: inline;}
  .form-btn-acciones img {cursor: pointer;}
  .form-btn-acciones img:hover, .img-link:hover, .btn-validar-resultado:hover  {opacity: 0.5}
  .btn-validar-resultado {cursor: pointer}
  #mensaje-ok a {color: #FFF; font-weight: bold; text-decoration: none}
  #mensaje-ok a:hover {color:#333;}
  #form h3 { padding:20px 0px 0px 20px !important; margin-bottom: -15px;  }
  .input-fecha  {width: 70px !important; margin-right: 5px !important; cursor: pointer ;}
  .ui-datepicker-trigger {cursor: pointer !important; margin-bottom: -4px; margin-right: 10px; }
  .input-peq{width: 80px !important}
  .p-hora {height: 25px;}
  .span-hora {  float: left; margin-right: 8px; margin-top: 5px; display: inline-block;}
  .input-hora, .input-hora-buscador {  width: 50px !important; clear: none !important; cursor: pointer;}
  .input-hora {float: left; }
  .cb-hora{width: 20px !important; display: inline-block; margin-top: 7px; cursor: pointer;}
  .label-hora { cursor: pointer; width: 120px !important; }
  .btn-img-horario, .btn-img-horario-buscador {cursor: pointer; }
  .btn-img-horario { float: left; margin: 3px 10px 0px -5px; }
  .btn-img-horario-buscador  { margin: 0px 10px -5px -7px; display: inline-block;}
   .btn-horario-2 { margin: 0px 10px -5px -7px !important;  }
  .btn-img-horario:hover, .ui-datepicker-trigger:hover, .btn-img-horario-buscador:hover {opacity: 0.5 !important;}
  form input[type="text"]:disabled { color: #888 !important; background: #ddd!important}
  /*form select:disabled { color: #888 !important; background: #ddd!important}*/
  .radio-button {width: auto !important;  display: inline-block !important; float:inherit !important;}
  .label-radio-button {width: auto !important;  display: inline-block !important; float:inherit !important; cursor: pointer; margin-left: -5px; }
  .span-radio-button{width: 150px; display: block; float: left; margin-top: 5px; text-align: right; padding-right: 15px; }
  .spinner{margin-right: 0px !Important;}
  #login{display: block; margin:35px auto 0 auto; width: 300px; text-align: center}
  #login fieldset { padding: 20px; border: 1px solid #CCC; }
  #login fieldset legend { padding: 5px 20px; background: #999; color: #FFFFFF; font-weight: bold}
  #login input {padding: 5px; margin-top: 10px; display: block; float: left}
  #login label{width: 105px; display: block; float: left; margin-top: 15px; text-align: right; padding-right: 10px; margin-left: 0px}
  #login .button {float: inside !important; clear: both; width: 170px; margin: 10px 0px 10px 42px; height:35px;}
  .bottom-login {font-size: 10px; color: #999}
  #fNumFase{width:50px;}
  .checkbox-form {width: 15px !important;  margin-top: 5px; cursor: pointer}

  /*---------------------------------------------------
  6. Paginador
  ---------------------------------------------------*/
  #paginador { text-align: center; margin-top: 20px;}
  #paginador span, .link-grid{  padding: 5px 10px; color: #333; background: #CCC; margin:0px 5px;  cursor: pointer; text-decoration: none}
  .btn-volver{  padding: 5px 10px; color: #fff; background: #333; margin:0px 5px;  cursor: pointer; text-decoration: none}
  #paginador span:hover, .link-grid:hover {background: #333; color: #FFF; }
  .btn-volver {float: right;}
  #paginador .btn-activo {background: #d11e00 !important; color: #FFF; cursor: default !important; }

  /*---------------------------------------------------
  7. Botones
  ---------------------------------------------------*/
  /* Transición para todos los botones */
  .button, .btn-volver, .btn-paginador, .btn-editar-reg, .btn-borrar, .submit-button, #menu-principal li, .btn-grabar, .btn-editar, .btn-listas, .btn-fases, .nav-collapse li a{
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
  .button{
    background:#333;
    color:#FFF;
    border:0px;
    padding:10px;
    cursor:pointer;
    text-decoration:none;
    display:block;
    margin-top:10px;
  }
  .button:hover{
    background:#d11e00;
    color:#fff;
    border:0px;
    cursor:pointer;
  }
  /* Background para todos los botones grises oscuros */
  #buscador .submit-button:hover, #form .submit-button:hover, .btn-grabar:hover, .btn-editar:hover, .btn-volver:hover {
    background: #d11e00;
  }

  /*---------------------------------------------------
  8. Responsive
  ---------------------------------------------------*/
  @media screen and (max-width:450px) {
    #form { margin: 0px 0px; padding-top: 50px !important;}
    #form form { padding: 5px 0px 10px 15px !important }
    .ocultar-mobile {display: none !important;}
    .mostrar-mobile {display: block !important;}  
    #buscador label, #buscador input, #buscador select, #form input, #form label {clear:both; display: block; margin-top: 5px; width: 95%;
      max-width: 95% !important; }
    #form select {width: 300px !important;  margin-top: 5px;}
    #form h3 {padding: 0px !important; margin-left: 5px;}
    #form textarea {width: 90%; clear:both; display: block; }
    #form  label {width: 96%; display: block; float: none; text-align: left; padding-top: 5px;  }
    #form .submit-button {margin-left: 0px; width: 96% !important; height: 30px;}
    #buscador input, #form input,  #form select { padding: 5px 0px;}
    #buscador .submit-button {margin-top: 10px;}
    #buscador {width: 100% !important; clear: both; margin: 0px !important; border-radius: 3px}
    #buscador-mobile {display: block;}
    .btn-volver {
      float:none;
      margin:0 auto;
      width:120px;
      padding:10px 15px;
    }
    #validadorClave label{
      margin-top: 20px;
      font-size:14px;
    }
    #buscador form{
      /*padding-left:50px;*/
    }
    #buscador select{
      width: 95%;
      max-width: 95% !important;
    }
    #buscador .submit-button{
      margin:30px 0px 20px !important;
    }
    #cabecera-empresa-mobile span {color :#FFF; font-size: 1.2em;}
    .button img {display:  none}
    #btn-alta {margin: 8px 0px;}
    .cb-hora{  float: left;}
    .label-hora-buscado {   float: left;   margin: 0px 10px -5px -7px;}
    .input-hora-buscador {   float: left; margin: 0px 10px 20px 0px;}
    .btn-img-horario-buscador { margin: 0px 10px -14px -7px; }
    p {padding: 5px 10px}    
    #img-cabecera {margin-bottom: 0px !Important}
    .resultados-radio label {float: left !important; clear: none !important; width: 70px !important }    
    .resultados {    margin-bottom: 40px;}
    .resultados-radio input {display: none !important}

    #logo img, #logo {width: 90% !important;}
    #logo { margin-bottom: 10px !important;}
    #contenedor-principal  { clear:both;  margin-top: 0px !important; }
    #contenedor-principal h2 { width: 100% !important; margin:0px; padding: 0px !important; border-radius: 3px; }
    #contenedor-principal h2 span { display: block; padding: 5px} 
    /*#contenedor-principal table {font-size: 0.8em;  }*/
    #contenedor-principal table th { border-radius: 3px; width: 10%;}
    #contenedor-principal .table-informe-6 td {width: 10%;}
    #contenedor-principal table td img {width: 25px; height: 25px; margin-bottom:10px; clear:both;}
    .p-home {margin-top: 20px !important; display: block; clear: both; height: 50px; padding-top: 20px !important; margin-left: 10px; width: 95% !important;}
    .table-6 td, .table-6 th { width: 13%;  padding: 5px 0px; }
    .td-acciones { width: 40px }
    #div-volver {height: 40px; text-align:center;}
    .btn-gestionar-compras  { height: 1px; right: 10px;}
    #contenedor-principal .button {
      display:block;
      clear:both;
      margin:0 auto;
      float:none;
      max-width: 95%;
      width: 95%;
      width: 90%;
        margin: 0 auto !important;
    }
    .table-3 tr, .table-4 tr, .table-5 tr, .table-6 tr, .table-7 tr, .table-8 tr { display: inline-block; padding-bottom: 5px; border-bottom: #CCC 1px solid; height:auto; width:100%;}
    .table-3 td, .table-3 th { min-width: 100px !important;  }
    .table-5 td, .table-5 th { min-width: 22.5% !important;  }
    .table-6 td, .table-6 th { min-width: 18.5% !important;  }
    .table-7 td, .table-7 th { min-width: 15.5% !important;  }
    .table-8 td, .table-8 th { min-width: 13.2% !important;  }
    .btn-gestionar-compras {margin-top: 8px;}
    .primerafilatabla{
      height:40px !important;
    }
    .contenedor-estrellas {    width: 90%;}


  }
  @media screen and (max-width:960px) {
    #buscador label, #buscador input  {clear:both; display: block; }
    #buscador .submit-button {margin-top: 10px;}
  }
  @media screen and (max-width:450px) {
    #resumen-prod-compra {float: none !important; margin: 0 auto !important;}
    h3 {margin-bottom: 10px !Important; text-align: center; }
    .radio-button {width: auto !important;  display: inline-block !important; }
    .label-radio-button {width: auto !important;  display: inline-block !important; margin-left: -5px; }
    #div-productos  { overflow:auto;}
    .div-producto{ width: 49%; }
  }
  @media screen and (max-width:500px) {
    .div-ranking-izq { width:100%;}
    .div-ranking-dch { width:100%;}
  }

  .jugadorSeleccionado {color: #d11e00; font-weight: bold}
  .form-deportividad a {color: #d11e00; text-decoration: none}
  .form-deportividad a:hover {color: #333}

  .select-index {    width: 90%;
      height: 30px;
      font-size: 15px;
      padding-left: 10px;
      margin-left: 6px;
      color: #777;
      font-family: "Trebuchet MS";
      margin-bottom: 15px;
      background: #fff;
      border: 0px;
    }

  .span-index { font-size: 15px; font-weight: bold}
  .center {text-align: center}

  #p-sectores {display: none;}  
  .barra-horizontal {background: #CCC; padding: 01px !Important}
  #logo {margin: 0 auto;  max-width:960px; min-width:320px; margin-top: 5px;  text-align: center; margin-bottom: 15px !important;}
  #logo img {width: 485px; }  

  .barra-horizontal {background: #CCC; padding: 01px !Important}
  .ui-draggable .ui-dialog-titlebar { background: #AC3333 !Important;} 
  #selectLiga {background: #EEE; margin: 10px 0px;     padding-top: 18px;}

   .resultados-radio  label {width: 70px !important;}

    
    .resultados-radio label > input{ /* HIDE RADIO */
      visibility: hidden; /* Makes input not-clickable */
      position: absolute; /* Remove input from document flow */
    }
    .resultados-radio label > input + img{ /* IMAGE STYLES */
      cursor:pointer;
      border:2px solid transparent;
    }
    .resultados-radio label img:hover { /* IMAGE STYLES */
      background: #888;
    }
    .resultados-radio label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
      border:2px solid #000; background: #333;
    }