Mobile code by kie0412

/*==UserStyle==
@name      Mobile code
@version   2024.02.26.1
@namespace ?
==/UserStyle==*/

@-moz-document url-prefix("https://www.horsereality.com"), url-prefix("https://v2.horsereality.com")
  {
    :root
    {
      --balken:#4b0c1c;
      --schwarz:#000000;
      --weis:#ffffff;
      --header:#ca9f82;
      --background:#d7d18c70;
      --sidebar:#ca9f82;
      --text:#6d4d45;
      --text2:#adff2f;
      --title:#551a8b;
      --progress:#7fff00;
      --progress2:#ff7f00;
      --center:#ff1493;
      --bgleft:#ca9f82;
      --border:#ffff00;
      --tab:#e066ff;
      --tab2:#ff0000;
      --button:#ffd700;
      --button2:#66cdaa;
      --tabelle:#f08080;
      --tabelle2:#8b5742;
      --tabelle-top:#ffa07a;
      --tabelle-divider:#8b7765;
      --icon:#ff7f50;
      --font: "Cursive";
      --font2: "Cursive";
      --bg-main: url(https://i.imgur.com/rUWSsyT.png);
      --mini-map: url(https://i.imgur.com/AJiZEKR.png);
      --bg-horse: url(https://i.imgur.com/WbUZWBH.png);
      --bg-pedigree: url(https://i.imgur.com/OQ5qSp8.jpg);
      --bg-genetic: url(https://i.imgur.com/AJiZEKR.png);
    }
    
    nav.row
    {
      background: var(--balken);
      margin: 0xp-15xp;
      padding:8xp 0xp 6xp;
    }
    div.bluebar.user
    {
      background: var(--balken);
      height: 50px;
      width: 1130px;
      padding: 0px;
    }
    .gamestats a:link, .gamestats a:visited, .gamestats a:active, div#clock
    {
      color: var(--text2);
      text-decoration: none;
      font-family: var(--font);
      font-size: 100%;
    }
    .toplinks ul li a:hover
  {
    color: var(--text);
  }
  ul li a:active, ul li a:link, ul li a:visited, #bbmenu.user ul.slidedown li a:hover
  {
    font-family: var(--font);
    color: var(--text2);
    font-weight: normal;
    font-size: 14px;
  } 
   ul.slidedown li a:hover
    {
      color: var(--balken)
    }
    .container-fluid
    {
      margin-left: auto;
      margin-right: auto;
      padding-left: 15px;
      padding-right: 15px;
      width:100%;
    }
    .header-menu
    {
      height: 50px;
      margin-top: -50px;
      position: fixed;
      z-index: 10;
      background: var(--balken);
    }
    
    body.background.south-america, body.background.africa, body.background.asia, body.background.australia, body.background.europe, body.background.north-america
    {
    background-image:var(--bg-main);
    } 
    
    .center
    {
    background: var(--background);
    opacity: 90%;
    margin: 0;
    padding-bottom: 25px;
    float: right;
    min-height: 650px;
    }
    .center
    {
      background: var(--center);
      float: right;
      margin: 0px;
      min-height: 650px;
      padding-bottom: 25px;
    }
    .main-content
    {
      background: var(--center);
      padding: 15px;
    }
    
    .container
    {
      background: var(--bgleft);
      margin-left: auto;
      margin-right: auto;
      padding-top: -50px;
      width: 1130px;
    }
    
    .footer
    {
      background: var(--balken);
      margin-bottom: 50px;
      padding-bottom: 10px;
      padding-top: 10px;
      width: 100%;
      vertical-align: middle;
    } 
    .footer h6
    {
      color: var(--text2);
      font-family: var(--font);
      font-size: 12px;
      font-weight: 400;
      line-height: 16px;
    }
    .footer ul li a:active, .footer ul li a:visited, .footer ul li a:link
    {
      color: var(--text2)
    }
    
    .leftnav
    {
      float: left;
      background: var(--sidebar);
      border: 2px solid var(--sidebar);
      border-radius: 0px 0px 0px 80px;
      padding: 10xp;
      width: 145px;
      z-index: 900;
      font-family: var(--font);
    }
    .leftnav>ul>li
    {
      width: 140px;
      text-transform: uppercase;
      color: var(--text2);
    }
    .leftnav>ul>li>ul>li a:active, .leftnav>ul>li>ul>li a:link, .leftnav>ul>li>ul>li a:visited
    {
      font-size: 13px;
      font-family: var(--font);
      font-weight: normal;
      text-transform: capitalize;
      color: var(--text);
      padding: 0;
    }
    .leftnav>ul>li>ul>li a:active:hover, .leftnav>ul>li>ul>li a:link:hover, .leftnav>ul>li>ul>li a:visited:hover
    {
      color: var(--text2);
      text-decoration: none;
    }
    
    .subtitle
    {
      font-family:var(--font);
      font-size: 14px;
      color: var(--text2);
      margin-bottom: 5px;
    }
   .container-fluid
    {
      margin-left: auto;
      margin-right: auto;
      padding-left: 15px;
      padding-right: 15px;
      width: 100%;
    }
    .mobile-menu-container
    {
      background: var(--sidebar);
      font-family: var(--font);
      max-height: 100%;
      min-height: calc(100% - 49px);
      overflow-y: scroll;
      padding: 15px;
      position: fixed;
      z-index: 999;
    }
    .mobile-menu-container .ava img
    {
      border-color: var(--border);
      border-width: 1px;
      border-style: solid;
      border-radius: 20px 20px 20px 20px;
      height:auto;
      width: 100%;
    }
    .mobile-menu-container .level p, .mobile-menu-container a, .mobile-menu-container ul li a
    {
      color: var(--text);
      font-family: var(--font);
      font-size: 13px;
      font-weight:400;
      line-height: 18px;
    }
    .mobile-menu-container ul li .subtitle
    {
      color: var(--text2);
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 5px;
      text-align: center;
    }
    div.progess
    {
      background: var(--progress);
      border-radius: 0.25rem;
      display: flex;
      font-size: 0.75rem;
      height: 1rem;
      overflow-x: hidden;
      overflow-y: hidden;
    }
    .progress-bar
    {
      background: var(--progress2);
      display:flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
    }
    .minimap.africa, .minimap.asia, .minimap.australia, .minimap.europe, .minimap.north-amerika, .minimap.south-amerika
    {
      background-image: var(--mini-map)
    } 
  
    #bbmenu.user ul.slidedown li ul.slidedownmenu
    {
      background: var(--sidebar);
      display: none;
      margin-top: 50px;
      padding-bottom: 10px;
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 10px;
      position: absolute;
      border: 2px solid var(--sidebar); 
      border-radius: 0px 0px 10px 10px;
      width: 130px;
      z-index: 9999;
    }
    #bbmenu.user ul.slidedown li ul.slidedownmenu li .level p
    {
      color: var(--text2);
      font-family: var(--font);
      font-size: 13px;
      line-height: 16px;
      text-align: left;
      text-transform: capitalize; 
    }
    .statusbar, div.progess
    {
      background: var(--progress);
      border: 2px solid var(--border);
      color: var(--text2);
      float: left;
      font-size:12px;
      font-weight: 400;
      height: 16px;
      line-height: 16px;
      margin-bottom: 10px;
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 5px;
      text-align: center;
      width: 125px;
    }
    
    .tabs .tab
    {
      background: var(--tab);
      border-radius: 8px 8px 0px 0px;
      margin-right: 3px;
      position: relative;
      transition-delay: 0s;
      transition-duration: 0.2s;
      transition-property: all;
      transition-timing-function: ease;
      z-index: 2;
    }
    .tabs .tab.active
    {
      background: var(--tab2);
    }
    .tabs .tab>span, .tabs .tab a, .tabs .tab button
    {
      color: var(--text);
      font-family: var(--font);
      display: block;
      font-size: 13px;
      font-weight: 700;
      line-height: 20px;
      padding-bottom: 6px;
      padding-left: 16px;
      padding-right: 16px;
      padding-top: 6px;
      white-space: nowrap;
    }
    .current-capacity
    {
      background: var(--tabelle);
      align-items: center;
      color: var(--text2);
      font-family: var(--font);
      cursor:pointer;
      display: inline-flex;
      font-weight: 700;
      line-height:18px;
      padding-bottom: 3px;
      padding-left: 6px;
      padding-right: 6px;
      padding-top: 3px;
      text-align: center;
      -webkit-box-align: center;
    }
    .page-link
    {
     color: var(--tab);
    }
    .page-link:hover: var(--tab2);
    }
    nav.pagination .page-item:not(.disabled).page-link
    {
     colour: var(--tab2);
    }
    .fa-solid, .fas
    {
      font-family: var(--font);
      font-weight: 900;
    }
    .button
    {
      align-items: center;
      border: 0px;
      border-radius: 10px 10px 10px 10px;
      color: var(--text2);
      font-family: var(--font);
      display: inline-flex;
      font-size: 13px;
      font-weight: 700;
      line-height: 18px;
      padding-bottom: 9px;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 9px;
      text-align: center;
      transition-delay: 0s;
      transition-duration: 0.2s;
      transition-property: all;
      transition-timing-function: ease;
      -webkit-box-align: center;
    }
    .button.primary
    {
      background: var(--button2)
    }
    .button.primary:hover
    {
      background: var(--button);
      color: var(text);
    }
    h1.horse-title-mobile, h1.horse-title-desktop, h1
    {
      color: var(--title);
      font-family: var(--font2);
      font-size: 26px;
      font-weight: 400;
      line-height:30px;
      margin-bottom: 15px;
    }
    h2
    {
      font-family: var(--font);
      font-size: 18px;
      font-weight: 400;
      line-height: 21px;
      margin-bottom: 5px;
      margin-top: 5px;
    } 
    .horse-item h2
    {
      color: var(--t...