
*, *:before, *:after {
  box-sizing:border-box;
}

body {
  padding:24px;
  font-family:'Source Sans Pro', sans-serif;
  margin:0;
  color: #FF10F0;
}

h1,h2,h3,h4,h5,h6 {
  margin:0;
}

.container {
  max-width: 95%;
  margin-right:auto;
  margin-left:auto;
  display:flex;
  justify-content:start;
  align-items:start;
  min-height:100vh;
}

.table {
  width: 95%;
  border:1px solid #EEEEEE;
}

.table-header {
  display:flex;
  width:100%;
  background:#000;
  padding:18px 0;
}

.table-row {
  margin-top: 10px;
  background: #FF10F0;
  color: black;
  display:flex;
  width:100%;
  padding:18px 0;
}

.table-data, .header__item {
  flex: 1 1 20%;
  text-align:center;
}

.header__item {
  text-transform:uppercase;
}
.inp {
  writing-mode: horizontal-tb !important;
  text-rendering: auto;
  cursor: text;
  height: 3em;
  margin-left: 1px;
  width: 80%;
}

.filter__link {
  color: white;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-left: 12px;
  padding-right: 12px;
}

.filter__link::after {
   content:'';
   position:absolute;
   right:-18px;
   color:white;
   font-size:6px;
   top: 50%;
   transform: translateY(-50%);
 }

.filter__link.desc::after {
   content: '(desc)';
 }

.filter__link.asc::after {
   content: '(asc)';
 }



.btn {
  background: greenyellow;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  color: #FF10F0;
  font: 600 1.05rem/1 "Nunito", sans-serif;
  letter-spacing: .05em;
  overflow: hidden;
  padding: 1em;
  font-size: small;
  min-height: 1em;
}
--yellow {
   --hue: 46;
 }

--green {
   --hue: 163;
 }

--purple {
   --hue: 244;
 }

--red {
   --hue: 0;
 }

--blue {
   --hue: 210;
 }

.filter__link:active,
.filter__link:focus {

 }


.filter__link__txt {
   position: relative;
   z-index: 2;
 }

.filter__link__bg {
   border-radius: 50%;
   display: block;
   height: 0;
   left: 50%;
   margin: -50% 0 0 -50%;
   padding-top: 100%;
   position: absolute;
   top: 50%;
   width: 100%;
   transform: scale(0);
   transform-origin: 50% 50%;
   transition: transform 0.175s cubic-bezier(0.5, 1, 0.89, 1);
   z-index: 1;
}
