body {
    font-family:ms ui gothic;
    font-size:15px;
    width:1060px;
    margin:auto;
    background:url(https://file.garden/aA-GqMXzgguGJDg8/photoblog/tumblr_inline_n25ec2EUqU1qhwjx8.jpg);
    background-size:cover;
    background-attachment: fixed;
    cursor: url(https://ani.cursors-4u.net/food/foo-7/foo653.cur), auto;
    zoom: 90%;
}

:root {
        --font: "ms ui gothic";
      }

      [data-theme="BGirl"] body {
        --font: "BGirl";
      }

      [data-theme="Sugar"] body {
        --font: "Sugar";
      }

      [data-theme="Handmade"] body {
        --font: "Handmade";    
      }

[data-theme="Wednesday"] body {
        --font: "Wednesday";    
      }

@font-face {
	font-family: "hibiya";
	src: url("https://file.garden/ZAkEYVkUN2HXHCu3/fonts/hibiya.ttf") format('truetype');
}

@font-face {
    font-family: BGirl;
    src: url(https://file.garden/aBMHISKj5T3zDZol/Fonts/212%20Baby%20Girl.otf);
}

@font-face {
    font-family: Sugar;
    src: url(https://file.garden/aBMHISKj5T3zDZol/Fonts/Sugar%20Crush.otf);
}

@font-face {
    font-family: Handmade;
    src: url(https://file.garden/aBMHISKj5T3zDZol/Fonts/Handmade.otf);
}

@font-face {
    font-family: Wednesday;
    src: url(https://file.garden/aBMHISKj5T3zDZol/Fonts/Random%20Wednesday.ttf);
}

:root {
--h2bg: linear-gradient(180deg, #F5DEB3 27%, #5C4033 65%);
--h2border: 1px solid #5C4033;
--h2color: #F5F5DC;

--hrbg: linear-gradient(to left, #F5F5DC, #5C4033, #F5F5DC);

--structurebgimg: repeating-linear-gradient(0deg, #F5DEB3, #F5DEB3 1px, transparent 1px, transparent);
--structurebgcolor: #5C4033;
--structurebgsize: 2px 2px;

--mainborder: 1px solid #5C4033;
--main-innerbg: url(https://file.garden/aA-GqMXzgguGJDg8/pwnb/9), #F5F5DC;
--main-innershadow: inset -5px -5px 4px rgb(0 0 0 / 15%);

--liningborder: 1px dashed #F5DEB3;
--titlebg: #F5F5DC;
--titlecolor: #5C4033;
--title2shadow: inset 0 0 5px 0 #F5DEB3;
--title2color: #5C4033;
--title2bg: #F5F5DC;

--mainselect: 1px solid #5C4033;
--mainselectshadow: 0 0 0 1px #F5F5DC inset, inset 0 -5px 5px 0 #F5DEB3;
--main-headerbutton: radial-gradient(circle, #F5DEB3 0%, #5C4033 72%, #3D2D23 100%);

--asideleftborder: 1px dashed #F5DEB3;

--contentborder: 1px solid #5C4033;
--contentbg: url(https://file.garden/ZAkEYVkUN2HXHCu3/web/images/s007-5.gif);

--inputsummaryborder: 1px outset #5C4033;
--inputsummarybg: #5C4033;
--inputsummarycolor: #F5F5DC;
--textcol: rgba(92, 64, 51, 0.7);
--inputsummaryact: 1px inset #F5DEB3;

--messageborder: 1px solid #5C4033;
--messagebg: #F5F5DC;
--messagecolor: #5C4033;

--formbg: #F5F5DC;
--formborder: 1px solid #5C4033;
--formcolor: #5C4033;
--smilieshov: 1px dashed #5C4033;

--usercontbg: #5C4033;
--usercontborder: 1px solid #5C4033;
--userinnerbg: #F5DEB3;
--userinnerborder: 1px dashed #F5F5DC;

--userheaderimg: url(https://file.garden/aA-GqMXzgguGJDg8/pwnb/7);
--userheaderborder: 1px solid #5C4033;
--pfpborder: 1px solid #5C4033;
--pfpimg: url(https://file.garden/aA-GqMXzgguGJDg8/pwnb/6);
--userdescborder: 1px solid #5C4033;
--userdescbg: #F5F5DC;

--bioborder: 1px solid #5C4033;
--biobg: #F5F5DC;

--entryborder: 1px solid #5C4033;
--entrybg: #F5F5DC;
--entrycolor: #5C4033;
--entrybuttonborder: 1px solid #F5DEB3;
--entrybuttonbg: linear-gradient(180deg, #5C4033 15%, #F5DEB3 73%, #F5F5DC 100%);
--entrybuttonshadow: 0 0 0 1px #F5F5DC inset;
--entrybuttoncolor: #5C4033;

--usernamecolor: #5C4033;

--userdetailsbg: url(https://file.garden/aA-GqMXzgguGJDg8/pwnb/8);
--userdetailsinnerbg: #F5F5DC;
--userdetailscolor: #5C4033;
}

a {
    color:var(--usernamecolor);
    font-weight: bold;
    text-decoration: dotted underline;
}

a:hover {
    text-transform: uppercase;
}

mark {
    color:var(--usernamecolor);
    background:none;
}

#s-m-t-tooltip{
	/* basic */
	max-width: 300px;
	z-index: 10;
	margin: 24px 14px 7px 12px;
	/* style and design */
	padding:8px;
	border-radius:3px;
    background: black;
border: 1px solid var(--usernamecolor);
	color: white;
font-family: ms ui gothic;
font-size:13px;
}

::selection {
    color:var(--usernamecolor);
    background:transparent;
    text-decoration: underline;
}

h1,h2,h3 {
    margin:0;
}

h1 {
     font-family: 'Genos', sans-serif;
    color: white;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0 3px #000;
    font-size: 4.5em;
    webkit-background-clip: text;
    transition: all 0.5s;
    margin-left:151px;
    margin-top:1.3vh;
}

h1:hover {
    webkit-filter: blur(0.5px);
filter: blur(2px);
}

h2 {
    font-size:20px;
    border: var(--h2border);
    padding:2px;
    border-radius:5px 5px 0 0;
    border-bottom:none;
   background: var(--h2bg);
    box-shadow:0 0 2px white inset;
    padding-left:5px;
    text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
    color:var(--h2color);
}

h3 {
   color:black; 
}

hr {
    background:var(--hrbg);
    border:none;
    height:1px;
}

.structure {
    margin-left:auto;
    margin-right:auto;
    width:fit-content;
    background-image: var(--structurebgimg);
background-size: var(--structurebgsize);
background-color: var(--structurebgcolor);
    box-shadow:inset 0 0 0 1px white, inset 0 0 5px 0 #ffffff8f, 0 0 4px white;
    border:2px solid black;
    border-radius:10px;
    padding:15px;
    position: relative;
   
}

main {
    border:var(--mainborder);
    padding:7px;
    margin:auto;
    font-family: var(--font);
    border-radius:5px;
    font-size:15px;
    width:745px; 
    background:#DCD8D8;
    outline:1px solid white;
}

.main-inner {
    padding:2px;
    background:var(--main-innerbg);
    border-radius:3px;
    box-shadow: var(--main-innershadow);
}

.lining {
    border:var(--liningborder);
    padding:5px;
    border-radius:3px;
}

.title {
    background:var(--titlebg);
    border-radius:3px;
    padding:2px;
    width:100px;
    margin-left:3px;
    margin-bottom:-5px;
    position: relative;
    z-index: 11;
    font-weight: bold;
    color:var(--titlecolor);
    text-shadow:1px 1px black;
    font-size:14px;
}

.title hr {
  margin:0;
    border:none;
    background:var(--hrbg);
    height:1px;
    margin-top:2px;
    
}

.main-header {
    display:flex;
    gap:5px;
    justify-content: space-between
}

.main-header select {
    border:var(--mainselect);
    border-radius:5px;
    margin-bottom:5px;
    box-shadow:var(--mainselectshadow);
    background:white;
}

.main-header button {
    border-radius:100px;
    border:1px solid black;
    background: var(--main-headerbutton);
    background-position: 0 98px;
    font-family: var(--font);
    text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
    color:white;
}

.flex {
    display: flex;
    gap:5px;
}

#asideleft {
    border-right: var(--asideleftborder);
}

.content {
    border:var(--contentborder);
    padding:5px;
    box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.46);
    overflow-y:scroll;
    border-radius:0 0 5px 5px;
    background:var(--contentbg);
}

.title2 {
    border:1px solid black;
    padding:3px;
    border-radius:5px;
    background:var(--title2bg);
    margin-right:5px;
    font-size: 12px;
    text-shadow: none;
    box-shadow:var(--title2shadow);
    color:var(--title2color);
    font-weight: bold;
    outline:1px solid white;
}

.input-header {
    font-size:20px;
    border:var(--h2border);
    padding:1px;
    border-radius:5px 5px 0 0;
    border-bottom:none;
   background: var(--h2bg);
    box-shadow:0 0 2px white inset;
    padding-left:5px;
    display: flex;
    gap:5px;
    padding-top:3px;
}

.input-header summary {
    border:var(--inputsummaryborder);
    list-style: none;
    width: 20px;
    text-align: center;
    background:var(--inputsummarybg);
    text-shadow: none;
    color:var(--inputsummarycolor);
    position: relative;
    font-family: ms ui gothic;
}

#textcol {
    color:var(--textcol)
}

#message-area {
    border:var(--messageborder);
    width: 100%;
   box-sizing: border-box;
    resize: none;
    box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.46);
    border-radius:0 0 5px 5px;
    background:var(--messagebg);
    color:var(--messagecolor);
    font-family: var(--font);
}

form {
    position: absolute;
    z-index: 10;
    border:var(--formborder);
    padding:5px;
    background:var(--formbg);
    width:200px;
    text-shadow: none;
    color:var(--formcolor);
    font-family: none;
}

#smilies img:hover {
    border:var(--smilieshov);
}

.input-header summary:active {
    border:var(--inputsummaryact);
}

.input-header select {
    box-shadow:var(--mainselectshadow);
    border:var(--mainselect);
    border-radius:5px;
}

.user-content {
    border:var(--usercontborder);
    border-radius:5px;
    padding:2px;
    background:var(--usercontbg);
}

.inner {
    border:var(--userinnerborder);
    padding:5px;
    border-radius:3px;
    background:var(--userinnerbg);
}

.user-header {
    height:70px;
    border:var(--userheaderborder);
    border-radius:5px 5px 0 0; 
    background:var(--userheaderimg);
    background-size:cover;
    background-position: 0px -112px;
}

.pfp {
    border:var(--pfpborder);
    height: 4.5rem;
    width: 4.5rem;
    background-image: var(--pfpimg);
    border-radius: 5px;
    background-size: cover;
}

.desc {
    border:var(--userdescborder);
    border-top:none;
    border-radius: 0 0 5px 5px;
    background:var(--userdescbg);
    padding-bottom:5px;
}

.bio {
    margin-top:5px;
    border:var(--bioborder);
    padding:5px;
    border-radius:5px;
    background:var(--biobg);
    font-size:13px;
    box-shadow:0 0 2px white;
}

.entry-wrapper {
    border:var(--usercontborder);
    padding:2px;
    border-radius:5px;
    margin-bottom:5px;
    background:var(--usercontbg);
}

.pfp2 {
    border:var(--pfpborder);
    height: 3rem;
    width: 3rem;
    background-image: var(--pfpimg);
    border-radius: 5px;
    background-size: cover;
    margin-top:auto;
}

.entry {
    border:var(--entryborder);
    margin-left:3px;
    position: relative;
    box-shadow: 0 1px 2px white;
    background:var(--entrybg);
    border-radius:5px;
    color:var(--entrycolor);
    overflow: hidden;
}

.entryarrow {
    content: "";
    display: block;
    width: 20px;
    height: 15px;
    border: var(--entryborder);
    background: var(--entrybg);
    position: absolute;
    left: 0;
    bottom: 10px;
    transform: skew(-50deg);
    z-index: 10;
}

.entry-cover {
    content: "";
    display: block;
    width: 23px;
    height: 18px;
    background: var(--entrybg);
    position: absolute;
    transform: skew(-50deg);
    z-index: 15;
}

.entry-details {
    width: 100%;
    margin-top:5px;
}

.entry-inner {
    border:var(--userinnerborder);
    padding:5px;
    border-radius:5px;
    background:var(--userinnerbg);
}

.entry img {
    position: relative;
    z-index: 50;
    cursor: pointer;
}

/* 9 grids */

.grid9 {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 5px; 
}

.grid9 img {
  width: 100%; 
  height: 100%;
  object-fit: cover;
  border: 2px dashed #FFA500;
}

/* Grid 3 */
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 5px;
  justify-content: center;
  align-items: center;         
}

.img3 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px dashed #FFA500;
}

/* Grid 6 */
.grid6 {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 5px;
  
  justify-content: center;
  align-items: center;   
}

.img6 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px dashed #FFA500;
}

/* Grid 2 */
.grid2 {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  gap: 5px;
  justify-content: center;
  align-items: center;    
}

.img2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px dashed #FFA500;
}

/* Grid 4 */
.grid4 {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  gap: 5px;
    justify-content: center;
  align-items: center;    
}

.img4 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px dashed #FFA500;
}

/* Solo pic */
.solo {
  width: 100%;              
  max-width: 600px;         
  aspect-ratio: 1 / 1;      
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px dashed #FFA500;
}

.imgsolo {
  width: 100%;
  height: 100%;
  object-fit: cover;        
  display: block;
}

/* Expandable image */

.expandable {
  cursor: pointer;
  transition: transform 0.3s ease, z-index 0.3s;
  position: relative;
  z-index: 1;
}

.expanded {
  position: fixed !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  z-index: 9999;
  border: 4px dashed #FFA500;
}

/* Optional: dim all other images when one is expanded */
.dimmed {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}


.entryname {
    font-weight: bold;
    display: inline-block;
    margin-left:10px;
    border:var(--entryborder);
    border-bottom:none;
    background:var(--entrybg);
    padding:2px;
    border-radius: 3px 3px 0 0;
    color:var(--usernamecolor);
}

article {
    position: relative;
    z-index: 50;
    font-size:13px;
    background:white;
    padding:5px;
}

.entry-details button {
    border-radius:5px;
    border:var(--entrybuttonborder);
    box-shadow:var(--entrybuttonshadow);
   background: var(--entrybuttonbg);
    color:var(--entrybuttoncolor);
    position: relative;
    font-family: ms ui gothic;
    cursor: pointer;
}

#like:after {
   content:"";
    width:28px;
    height:5px;
    background: linear-gradient(white, transparent);
    position: absolute;
    top:1px;
    left:3px;
    border-radius:10px;
    
}

#comment:after {
   content:"";
    width:59px;
    height:5px;
    background: linear-gradient(white, transparent);
    position: absolute;
    top:1px;
    left:3px;
    border-radius:10px;
}

.user-details {
    border:var(--usercontborder);
    margin-top:5px;
    padding: 10px;
    border-radius:5px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 3px rgba(0, 0, 0, 0.511), inset 2px 2px 3px white;
    background:var(--userdetailsbg);
    position: relative;
}

.details-inner {
    box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.444);
    padding: 5px;
    margin: 2px;
    background:var(--userdetailsinnerbg);
    color:var(--userdetailscolor);
    border-radius:5px;
    font-size:12px; 
}

.clip {
    background: url(https://file.garden/ZAkEYVkUN2HXHCu3/web/graphics/paperclip.png);
    width: 27px;
    height: 62px;
    position: absolute;
    top: -14px;
    right: 10px;
    filter: drop-shadow(3px 3px 1px #363636);
}


.tab {
    border:1px solid black;
    padding:5px;
    width:100px;
    background-image: var(--structurebgimg);
background-size: var(--structurebgsize);
background-color: var(--structurebgcolor);
    box-shadow:inset 0 0 0 1px white;
    border-radius:5px;
    padding-right:25px;
    z-index: 5;
    position: absolute;
    left:-76px;
    top:33%;
}

.tablinks {
    width:100%;
    margin-bottom:5px;
    cursor: pointer;
    background:white;
    border:none;
    border-radius:3px;
    padding:2px;
    font-family: var(--font);
    position: relative;
    z-index: 15;
    border:1px solid
}

.tablinks:hover {
    font-style: italic;
}

.tablinks span {
  border:var(--liningborder);
    display: block;
    border-radius:3px;
}

.tablinks:nth-child(3) {
    margin:0;
}

.user-details img {
    cursor: pointer;
}

#blink {
    animation: blink  1s linear infinite both;
}

@keyframes blink {
    
0%, 50% {
    opacity: 100%;
}

51%, 100% {
    opacity: 0%;
}
       
}

  .home {
    color: white;
    z-index: 10;
    position: fixed;
    font-weight: bold;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    top: 4px;
    left: 5px;
      font-family: "ms ui gothic"
}
    
    .home a {
        text-decoration: none;
        color:black;
        font-size: 15px;
}
    
    .home a:hover {
        font-style:italic;
        text-transform: none;
}

.entry-details a {
    color:black;
}

#musicplayer{
    padding:3px;
    color:white;
    font-family: ms ui gothic;
    font-size:13px;
    width: fit-content;
    position: fixed;
    bottom:5px;
    left:4px;
    z-index:100;
  }

  .player {
  height: fit-content;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  }

  /* Changing the font sizes to suitable ones */
  .now-playing {
  font-size: 15px;
  line-height:18px;
      width:277px;
  }

  .playersettings{
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    align-items:center;
    width:100%;
      border:1px solid silver;
      border-radius:5px;
      background:black;
  }
  
  /* Using flex with the row direction to
  align items in a horizontal direction */
  .buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  }
  
  .playpause-track,
  .prev-track,
  .next-track {
  padding: 5px;
  opacity: 0.8;
  
  /* Smoothly transition the opacity */
  transition: opacity .2s;
  }
  
  /* Change the opacity when mouse is hovered */
  .playpause-track:hover,
  .prev-track:hover,
  .next-track:hover {
  opacity: 1.0;
  }
  
  /* Define the slider width so that it scales properly */
  .slider_container {
  width: fit-content;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
      margin-right:5px;
  }

  .vol-icon{
    float:left;
    margin:0;
    padding:0;
    font-size:12px;
  }
  
  /* Modify the appearance of the slider */
  .seek_slider, .volume_slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 5px;
  background: black;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  }
  
  /* Modify the appearance of the slider thumb */
  .seek_slider::-webkit-slider-thumb,
  .volume_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 2px;
  height:5px;
  background: white;
  cursor: pointer;
  border-radius: 50%;
  }
  
  /* Change the opacity when mouse is hovered */
  .seek_slider:hover,
  .volume_slider:hover {
  opacity: 1.0;
  }
  
  .seek_slider {
  width:80px;
  min-width:80px;
  }
  
  .volume_slider {
  width: 70px;
  max-width:70px;
  float:right;
  }
  
  .current-time,
  .total-duration {
  padding: 0;
      padding-left:5px;
  }

  
  i.fa-volume-up {
  padding: 10px;
  }
  
  /* Change the mouse cursor to a pointer
  when hovered over */
  i.fa-play-circle,
  i.fa-pause-circle,
  i.fa-step-forward,
  i.fa-step-backward {
  cursor: pointer;
  }

i.fas:hover{
  /* cursor:var(); */
}

i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward{
  color:white; /* color of controls */
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background-color:inherit;
}

input[type=range]:focus {
  outline: none;
}

/* settings for chrome browsers */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px; /* thickness of seeking track */
  cursor: pointer;
  background: silver; /* color of seeking track */
}

input[type=range]::-webkit-slider-thumb {
  height: 5px; /* height of seeking circle */
  width: 2px; /* width of seeking circle */
  background: white; /* color of seeker circle */
  /* cursor: help; */
  -webkit-appearance: none;
  margin-top: 0px;
}

/* settings for firefox browsers */
input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px; /* thickness of seeking track */
  /* cursor: help; */
  background: white; /* color of seeking track */
}

input[type=range]::-moz-range-thumb {
  height: 5px; /* height of seeking circle */
  width: 2px; /* width of seeking circle */
  background:white; /* color of seeker circle */
  /* cursor: help; */
  border:none;
}

.musicdetails {
    display: flex;
    margin-bottom:3px;
    gap:5px;
    width:178px;
    margin-right:auto;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    font-weight: bold;
    color:black;
}

.fa-volume-low {
    color:white;
}

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=") !important;
  image-rendering: pixelated;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}
::-webkit-scrollbar-track:active {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==") !important;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

::-webkit-scrollbar-thumb {
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
  width: 16px;
  height: 16px;
  background-color: #cccccc;
  z-index: 1;
  background-image: none !important;
}

::-webkit-scrollbar-corner {
  background-color: #cccccc;
}
::-webkit-resizer {
  width: 16px;
  height: 16px;
  background-color: #cccccc;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
  background-position: bottom right;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

::-webkit-scrollbar-button,
::-webkit-scrollbar-button {
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
  display: block;
  width: 16px;
  height: 16px;
  background-color: #cccccc;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-position: center center;
}
::-webkit-scrollbar-button:active,
::-webkit-scrollbar-button:active {
  background-position: 2px 2px;
}
::-webkit-scrollbar-button:horizontal:decrement,
::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
}
::-webkit-scrollbar-button:horizontal:increment,
::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
}
::-webkit-scrollbar-button:vertical:decrement,
::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
}
::-webkit-scrollbar-button:vertical:increment,
::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
}
::-webkit-scrollbar-button:horizontal:increment:start,
::-webkit-scrollbar-button:horizontal:increment:start {
  display: none;
}
::-webkit-scrollbar-button:horizontal:decrement:end,
::-webkit-scrollbar-button:horizontal:decrement:end {
  display: none;
}
::-webkit-scrollbar-button:vertical:increment:start,
::-webkit-scrollbar-button:vertical:increment:start {
  display: none;
}
::-webkit-scrollbar-button:vertical:decrement:end,
::-webkit-scrollbar-button:vertical:decrement:end {
  display: none;
}
::-webkit-scrollbar-button:active,
::-webkit-scrollbar-button:active {
  border-top: 1px solid #868a8e;
  border-left: 1px solid #868a8e;
  border-bottom: 1px solid #868a8e;
  border-right: 1px solid #868a8e;
  box-shadow: none;
}