/* Shadowrun css created by the Rogues Ventures */





.accordion {
  background: linear-gradient(#1c4a2d, #eee);
  border-radius:0 50%;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 80%;
  text-align: center;
  border: none;
  outline: none;
  transition: 0.4s;
}

 .accordion.active {border-radius: 0 50% 0 0;width: 100%;} 
 
 .active , .accordion:hover {  background: linear-gradient(#eee, #1c4a2d);}
  
 .accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: black;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

.panel {
	padding: 18px;  background: linear-gradient(#1c4a2d, #eee);
  color: black;   display: none;  overflow: hidden;  text-align: right;  border-radius: 0 0 15% 15%;}
  
 .tier2 { width: 80%; margin-bottom:2%; margin-top: 2%;}
 
 .tier2.active {margin-bottom: 0;}
 
 .tier3 { width: 96.7%; position: relative; }
 
.first {margin-top: 7em; }

.gogo { z-index:-1;position:absolute; margin-top:-4.5em; padding-bottom:4.5em; display:block;  }

.content details p {color: black;}

.light-dark {margin: 0;  padding:0; height: .5em; }

.block {display: grid; 	grid-template-columns: 35% 15% 35% 15%;}

.block-plus {display: grid; grid-template-columns: 25% 5% 60%;}

.block li, .block-plus li {display: block; float: left;text-align: left;}

#vis-mod, #aud-mod, #sniff-mod, #edge-left {width: 75%; }

#ATTRIBUTES thead th {border-bottom-style: dashed;}

#QUALITIES .thing {text-align: center; border-bottom-style: solid;}

.thing:hover, .thing:hover + li, .thing:hover + td, .spell-desc:hover p {background-color: black; color: white;}

table {width: 100%;}

tbody td {text-align: center;}

.gun-range td {border-bottom-style: solid; margin-bottom: 1%;}

.thing {font-weight: bold; text-align: right;}

.thing-l {font-weight: bold;}

.long2 {text-align: center;
				clear: inherit;
				padding-top: 5px; 
				min-width: 100%;}


.nav-2{
	padding: 1%;
	z-index: 20;
	direction: rtl;
	width: 43%;
	height: auto;
	position: fixed;
	margin: -2em 0 0 55%;
}
.nav-2 > * {direction: rtl;}

#CONDITION .accordion {background: linear-gradient(#ffa500, #F00); border-radius: 50% 0;}	

#CONDITION .active {border-radius:0 50% 0 0; }

#CONDITION .panel {background: linear-gradient(#F00, #ffa500); }


.nav-2 table {float: left; width: 50%;direction: ltr;}

.nav-2 tr {width: 100%; }

.nav-2 tbody td { width: 15%; margin: 1%;}

/***********************************checkbox*************************/
.dmg-box {
 display: block;
  position: relative;
	margin-left: 5px;
  margin-bottom: 2em;
  width: 100%;
  max-width: 100%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.dmg-box input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;

}


.checkmark {
  position: absolute;
  top: 0;
  left: 0;
	height: 30px;
 	min-width: 100%;
  border: 1px solid;
  background-color: transparent;
 
}


.dmg-box:hover input ~ .checkmark {
  background-color: rgba(0,0,0,0.2);
}


.dmg-box input:checked ~ .checkmark {
  background-color: rgba(0,0,0,0.4);
}


.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


.dmg-box input:checked ~ .checkmark:after {
  display: block;
}


.dmg-box .checkmark:after {
 right: 35px;
  top: 0px;
  width: 100%;
  content: "";
}


#CALCULATED input[type=text], #CALCULATED input[type=number] {max-width: 75%;width: auto;}



@media all and (max-width : 800px) {
	.gogo { margin-top:-3em; padding-bottom:3em;}

aside, .nav-2 {display: block; margin: 0;}

.nav-2{	padding: 1%;	z-index: 20;	direction: ltr;	width: 100%;	height: auto;	
position: relative;	margin: 1.5em 0 0 0;}

.nav-2 > * {direction: ltr;}

.nav-2 table {display: block; width: 100%;}

.nav-2 thead {display: block;}

.nav-2 tbody tr {width: 100%;height:auto; }

.nav-2 tbody td { min-width: 30%; margin: 1%; float: left;}

.dmg-box { display: block;  position: relative;	margin-left: 3em;  margin-bottom: 2em;}

.block,.block-plus {display: block;}

.block li {width: 50%;float: left;padding-bottom: 1%; text-align:center;}

.block .thing, .can2 .thing {width: 50%;float: left;}

thead  {display: none;}

tbody td {float: left; text-align: center;}

.can2 td {width: 45%;}
.can3 td {width: 29%;}
.can4 td {width: 21%}
.can5 td {width: 16%;}
.can6 td {width: 16%;}
.can7 td {width: 16%;}
.can8 td {width: 16%;}

tr .thing  { clear: left; width: 100%; text-align: left;  }

.spell-desc td {width: 90%;}

.no-mobile {display: none;}

.gun-range td {width:45%;margin:2%;}

.tier3 { width: 86.7%; position: relative; }

}/*****end of mobile***/