.bordered {
    border: solid #ccc 1px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 10px 10px 0px 0px;
    -webkit-box-shadow: 0 1px 1px #ccc; 
    -moz-box-shadow: 0 1px 1px #ccc; 
    box-shadow: 0 1px 1px #ccc;    
	cursor:pointer;
	background:var(--bg-stronger);	
	width: 100%;
}
.bordered th {
	background:var(--bg-strongest);
	margin-left:30px;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset,0 1px 0 rgba(255,255,255,.8),
				1px 0px 0 rgba(255,255,255,.8) inset,-1px 0px 0 rgba(255,255,255,.8) inset;
	background:var(--bg-strongest);
    border-top: none;
    color:var(--font-color);
	  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */

}
.bordered tr:hover {
    background:var(--bg-strongest);
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;     
}    
    
.bordered td, .bordered th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;    
}

.bordered td {
    padding: 5px;
}

.bordered td:first-child, .bordered th:first-child {
    border-left: none;
}

.bordered th:first-child {
    -moz-border-radius: 10px 0 0 0;
    -webkit-border-radius: 10px 0 0 0;
    border-radius: 10px 0 0 0;
}


.bordered th:last-child {
    -moz-border-radius: 0 10px 0 0;
    -webkit-border-radius: 0 10px 0 0;
    border-radius: 0 10px 0 0;
}

.bordered th:only-child{
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}

.bordered tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 0px;
    -webkit-border-radius: 0 0 0 0px;
    border-radius: 0 0 0 0px;
}






/* MAKE IT CUTE ----- */
.tabs,.tabs2 {
  position: relative;
  display: flex;
  
  border-radius: 15px;
  border : 1px solid var(--bg-weak);
  overflow: hidden;
  box-shadow:2px 2px 1px var(--bg-strongest);
}

.tabby-tab,.tabby-tab2 {
  flex: 1;
}

.tabby-tab label,.tabby-tab2 label {
  display: block;
  box-sizing: border-box;
  /* tab content must clear this */
    height: 40px;
  
  
  padding: 10px;
  text-align: center;
  
  background:var(--bg-stronger);
  cursor: pointer;
  transition: background 0.5s ease;
  color:var(--font-color);
  border:2px solid var(--bg-weak);
  text-shadow:var(--text-shadow);
}

.tabby-tab label:hover,.tabby-tab2 label:hover {
	background	: var(--menu-bg);
	text-shadow	: var(--menu-text-shadow);
	color		: var(--menu-font-color);
}

.tabby-content,.tabby-content2 {
  position: absolute;
  
  left: 0; bottom: 0; right: 0;
  /* clear the tab labels */
    top: 40px;
  
  padding: 0px;
  border-radius: 0 0 8px 8px;
  background: var(--bg-strongest);
  
  transition: opacity 0.7s ease,transform 0.7s ease   ;
  
  /* show/hide */
    opacity: 0;
    transform: scale(0.1);
    transform-origin: top left;
  overflow:auto;
  padding:10px;
  
}

.tabby-content img {
  float: left;
  margin-right: 20px;
  border-radius: 8px;
}


/* MAKE IT WORK ----- */

.tabby-tab [type=radio],.tabby-tab2 [type=radio] {
	display: none;
}

.tabby-tab [type=radio]:checked ~ label,.tabby-tab2 [type=radio]:checked ~ label {
  background: var(--bg-strongest);
  z-index: 2;
  color:var(--font-color);
  border:none;
  text-shadow:var(--text-shadow);
}

.tabby-tab [type=radio]:checked ~ label ~ .tabby-content,.tabby-tab2 [type=radio]:checked ~ label ~ .tabby-content2 {
  /* show/hide */
    opacity: 1;
    transform: scale(1);
	display:block;
}

/* BREAKPOINTS ----- */
@media screen and (max-width: 767px) {
  .tabs { min-height: 400px;}
}

@media screen and (max-width: 480px) {
  .tabs { min-height: 580px; }
  .tabby-tab label { 
    height: 60px;
  }
  .tabby-content { top: 60px; }
  .tabby-content img {
    float: none;
    margin-right: 0;
    margin-bottom: 20px;
  }
}
.table2 {
	display:table;
	border-collapse:collapse;
	width:100%;
	border-radius:0px solid red;
}
.table2 thead {
	 display:block;
	 border:none;
}
.table2 td,th {
	 border: 1px solid var(--bg-weak);
	 padding:5px;
	 
}
.table2 th {
	 border:none;
	 border:none;
	 background:transparent;
}

 
.table2 tbody {
	height:470px;
	overflow:auto;
	display:block;
	background:var(--bg-stronger);
}
.table2 tbody::-webkit-scrollbar {
    width	: 15px;
    height	: 15px; 
}
.table2 tbody::-webkit-scrollbar:hover {
    height: 50px; 
}
.table2 tbody::-webkit-scrollbar-button:start:decrement,.table2 tbody::-webkit-scrollbar-button:end:increment {
    height: 15px;
    width: 13px;
    display: block;
    background: #101211;
    background-repeat: no-repeat; 
}
.table2 tbody::-webkit-scrollbar-button:horizontal:decrement {
    background: url(images/Arrows-L.png);
    background-position: 0px 0px; 
	background-size: 15px 15px;
}
.table2 tbody::-webkit-scrollbar-button:horizontal:increment {
    background: url(images/Arrows-R.png);
    background-position: 0px 0px; 
	background-size: 15px 15px;
}

.table2 tbody::-webkit-scrollbar-button:vertical:decrement {
	background: url(images/Arrows-U.png);
    background-position: 0px 0px; 
	background-size: 15px 15px;	
}
.table2 tbody::-webkit-scrollbar-button:vertical:increment {
    background: url(images/Arrows-D.png);    
	background-position: 0px 0px; 
	background-size: 15px 15px;
}
.table2 tbody::-webkit-scrollbar-button:horizontal:decrement:active { background-image: url(images/Arrows-R.png); }
.table2 tbody::-webkit-scrollbar-button:horizontal:increment:active { background-image: url(images/Arrows-L.png); }
.table2 tbody::-webkit-scrollbar-button:vertical:decrement:active { background-image: url(images/Arrows-D.png); }
.table2 tbody::-webkit-scrollbar-button:vertical:increment:active { background-image: url(images/Arrows-U.png); }
.table2 tbody::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);     
}
.table2 tbody::-webkit-scrollbar-track-piece {
    background-color: grey;
	border-radius: 50px;
}
.table2 tbody::-webkit-scrollbar-thumb:vertical {
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #4d4d4d), color-stop(100%, #333333));
    border: 1px solid #0d0d0d;
    border-top: 1px solid #666666;
    border-left: 1px solid #666666; 
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.table2 tbody::-webkit-scrollbar-thumb:horizontal {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4d4d4d), color-stop(100%, #333333));
    border: 1px solid #1f1f1f;
    border-top: 1px solid #666666;
    border-left: 1px solid #666666; 
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.table2 tbody::-webkit-scrollbar-corner {
	background: #ecf0f3;
}

.table3 {
	box-shadow:-3px -3px 1px red,-3px -3px 1px red,;
	border-collapse:collapse;	
}
.table3 td {
	 border: 1px solid var(--bg-weak);
	 padding:3px;	 
}

.table3 th {
	 background:var(--bg-strongest);
	 box-shadow:-0.75px -0.75px 0px var(--bg-weak);
	 padding:10px;
	 border: 1px solid white;
}
.table3 th:first-child {
	border-radius:15px 0 0 0 ;
	border-top: 3px solid transparent;
	border-left: 3px solid transparent;
	box-shadow:-1px -1px 0px var(--bg-weak);
}
.table3 th:last-child {
	border-radius:0 15px 0 0 ;
	border-top: 3px solid transparent;
	border-right: 3px solid transparent;
	
	box-shadow:1px -1px 0px var(--bg-weak);
}
 
.table3 tbody {
	height:20px;
	overflow:auto;
	background-color:var(--bg-stronger)
}
.table3 tbody::-webkit-scrollbar {
    width	: 15px;
    height	: 15px; 
}
.table3 tbody::-webkit-scrollbar:hover {
    height: 50px; 
}
.table3 tbody::-webkit-scrollbar-button:start:decrement,.table3 tbody::-webkit-scrollbar-button:end:increment {
    height: 15px;
    width: 13px;
    background: #101211;
    background-repeat: no-repeat; 
}
.table3 tbody::-webkit-scrollbar-button:horizontal:decrement {
    background: url(images/Arrows-L.png);
    background-position: 0px 0px; 
	background-size: 15px 15px;
}
.table3 tbody::-webkit-scrollbar-button:horizontal:increment {
    background: url(images/Arrows-R.png);
    background-position: 0px 0px; 
	background-size: 15px 15px;
}

.table3 tbody::-webkit-scrollbar-button:vertical:decrement {
	background: url(images/Arrows-U.png);
    background-position: 0px 0px; 
	background-size: 15px 15px;	
}
.table3 tbody::-webkit-scrollbar-button:vertical:increment {
    background: url(images/Arrows-D.png);    
	background-position: 0px 0px; 
	background-size: 15px 15px;
}
.table3 tbody::-webkit-scrollbar-button:horizontal:decrement:active { background-image: url(images/Arrows-R.png); }
.table3 tbody::-webkit-scrollbar-button:horizontal:increment:active { background-image: url(images/Arrows-L.png); }
.table3 tbody::-webkit-scrollbar-button:vertical:decrement:active { background-image: url(images/Arrows-D.png); }
.table3 tbody::-webkit-scrollbar-button:vertical:increment:active { background-image: url(images/Arrows-U.png); }
.table3 tbody::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);     
}
.table3 tbody::-webkit-scrollbar-track-piece {
    background-color: grey;
	border-radius: 50px;
}
.table3 tbody::-webkit-scrollbar-thumb:vertical {
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #4d4d4d), color-stop(100%, #333333));
    border: 1px solid #0d0d0d;
    border-top: 1px solid #666666;
    border-left: 1px solid #666666; 
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.table3 tbody::-webkit-scrollbar-thumb:horizontal {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4d4d4d), color-stop(100%, #333333));
    border: 1px solid #1f1f1f;
    border-top: 1px solid #666666;
    border-left: 1px solid #666666; 
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.table3 tbody::-webkit-scrollbar-corner {
	background: #ecf0f3;
}