/*@keyframes slowfadein {
  from {opacity: 0%;}
  to {opacity: 100%;}
}

@keyframes resetfade{
  from {opacity: 100%;}
  to {opacity: 0%;}
}
*/

.make_tabs_disapear {
display: none !important;
}

.make_all_metatopics_visible .topic,.make_all_metatopics_visible .OutputTab{
  display: block !important;
  background-color: white ;
  border-radius: 20px;
  margin: 10px;   
}

.make_all_metatopics_visible .topic label, .topic label, .make_all_metatopics_visible .topic p , .topic p{
  		font-size: 20px;
      line-height: 180%;  
      animation-name: slowfadein;
  	animation-duration: 2s;
  	padding: 10px;
  	margin-left: 10px;
  	width: 95%;
}

.make_all_metatopics_visible .topic  label a, .make_all_metatopics_visible .topic p a ,.topic  label a, .topic p a {
  color: blue;
}


.topic label p, #Tool .make_all_metatopics_visible .topic label p{
  color: #1f928b;
  width: 40%;
  font-size: small;  
}

.topic label p p , #Tool .make_all_metatopics_visible .topic label p p{
  visibility: hidden;
  /*display: inline-block;*/
  position: fixed;
  top: 40%;
  left: 10%;
  width: 500%;
  height: auto;
  vertical-align: middle;
  border: 10px;
  border-color: #545454;
  border-radius: 10px;
  border-style:solid;
  max-width: 750px;
  background-color:white;
  color:black;
  font-size: large;
}

#Tool .make_all_metatopics_visible .topic label p:hover p ,#Tool .make_all_metatopics_visible .topic label p:hover p {
  visibility: visible;
    z-index: 100;
}

#plg_system_topofthepage_position{
height: 50px;
}
#plg_system_topofthepage{
display: block;
height: 50px;
padding: 3px;
border: 5px solid;
border-radius: 5px;
border-color:#1f928b;
background-color:#1f928b;
color:#000;
} 
#plg_system_topofthepage:hover{
border-color:#545454;
}

#Tool .metatopic #output {
  background-color: white ;
    border-radius: 20px;
  margin-bottom: 30px;
    	padding: 10px;
}

div#outputBox, div#TopicsDiv{
  width: 90%;
  left: 5%;
  margin: auto;
  }




#ColumnsDiv{

  background-color: #1f928b;
  border-style:solid;
  border-radius:10px;
  border-color:  #1f928b;

}

#Tool #TopicsDiv{
  width: 90%;
  left: 5%;
}

#Tool .metatopic{
  margin-top: 30px;  
} 

#Tool #ColumnsDiv #TopicsDiv #MetaTopics .metatopic .topic, #Tool #ColumnsDiv #TopicsDiv #MetaTopics .metatopic .ButtonsDiv{
  background-color: white;
    border-radius: 20px;
  margin-bottom: 30px;
  line-height: 200%;

}


#dummy{
  display: none;
}

#app-status{
  text-align: center;
}

#app-status h3{
  color: blue;
  animation-name: slowfadein;
  animation-duration: 2s; 
}
#app-status h4{
  color: green;
  animation-name: slowfadein;
  animation-duration: 2s;
}

#app-status h5 {
  color: red;
  animation-name: slowfadein;
  animation-duration: 2s;
}


.metatopic .topic body,.topic body  {
    font-size: 30px;
    word-spacing: 2px;
    letter-spacing: 1.5px;

}

.metatopic .topic select ,.topic select{
    min-height: 50px;
	width:90%;
    font-size: 25px;
    word-spacing: 2px;
    letter-spacing: 1.5px;
      line-height: 180%;
  	border-style: solid;
      animation-name: slowfadein;
  	animation-duration: 2s;
  margin: 15px;
}

.metatopic .topic input,.topic input, .metatopic .topic textarea, .topic textarea{
  	width: 60%;
      min-height: 50px;
    font-size: 30px;
    word-spacing: 2px;
    letter-spacing: 1.5px;
      line-height: 180%;
  	border-style: solid;
      animation-name: slowfadein;
  	animation-duration: 2s;
    margin: 15px;
}

.metatopic .topic textarea, .topic textarea{
  	width: 90%;
      min-height: 50px;
    font-size: 30px;
    word-spacing: 2px;
    letter-spacing: 1.5px;
      line-height: 180%;
  	border-style: solid;
      animation-name: slowfadein;
  	animation-duration: 2s;
    margin: 15px;
}



.metatopic .topic label, .topic label, .metatopic .topic p , .topic p{
  		font-size: 20px;
      line-height: 180%;  
      animation-name: slowfadein;
  	animation-duration: 2s;
  	padding: 10px;
  	margin-left: 10px;
  	width: 95%;
}

.metatopic .topic  label a, .metatopic .topic p a ,.topic  label a, .topic p a {
  color: blue;
}


.topic label p, #Tool .metatopic .topic label p{
  color: #1f928b;
  width: 40%;
  font-size: small;  
}

.topic label p p , #Tool .metatopic .topic label p p{
  visibility: hidden;
  /*display: inline-block;*/
  position: fixed;
  top: 40%;
  left: 10%;
  width: 500%;
  height: auto;
  vertical-align: middle;
  border: 10px;
  border-color: #545454;
  border-radius: 10px;
  border-style:solid;
  max-width: 750px;
  background-color:white;
  color:black;
  font-size: large;
}

#Tool .metatopic .topic label p:hover p ,#Tool .metatopic .topic label p:hover p {
  visibility: visible;
    z-index: 100;
}

@media (max-width: 800px) {
  .topic label p p{
    max-width: 300px;
  }
}

#Tool div button , div a .custom-button{
  display: block;
  border-width:10px;
  border-radius: 10px;
  border-style:solid ;
  min-height: 50px;
  width: 90%;
    font-size: 40px;
    word-spacing: 0.5px;
    letter-spacing: 0.4px;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 180%;
  color: black;
  border-color:#1f928b;

}
#Tool div button:hover, div a .custom-button:hover{
    border-color:#545454;
  
}

#Tool {
  padding: 3%;
  border-radius: 10px;

}

#Tool #output a, #Tool #output p, #Tool #output h2{
      animation: slowfadein;
  animation-duration: 2s;
    		font-size: 20px;
      line-height: 180%; 
}


#Tool #output a{
  color: blue;

  
  
}
#Tool #output p{

}

#Tool #output h1{
  	 color: black;
      animation: slowfadein;
  animation-duration: 2s;

}
#Tool #output h2{
  	 color: red;

}



.ButtonsDiv p{
  text-align: center;
}

#tabset > input[type="radio"] {
  position: absolute;
  left: -200vw;
}

.metatopic .topic, .metatopic .OutputTab{
  display: none;
}

#Tool #Topicsdiv .MetaTopics .metatopic .topic{

}

#tabset > input:first-child:checked ~ .MetaTopics > .metatopic:first-child .topic,
#tabset > input:nth-child(3):checked ~ .MetaTopics > .metatopic:nth-child(2) .topic,
#tabset > input:nth-child(5):checked ~ .MetaTopics > .metatopic:nth-child(3) .topic,
#tabset > input:nth-child(7):checked ~ .MetaTopics > .metatopic:nth-child(4) .topic,
#tabset > input:nth-child(9):checked ~ .MetaTopics > .metatopic:nth-child(5) .topic,
#tabset > input:nth-child(11):checked ~ .MetaTopics > .metatopic:nth-child(6) .topic,
#tabset > input:nth-child(13):checked ~ .MetaTopics > .metatopic:nth-child(7) .topic,
#tabset > input:nth-child(15):checked ~ .MetaTopics > .metatopic:nth-child(8) .topic,
#tabset > input:nth-child(17):checked ~ .MetaTopics > .metatopic:nth-child(9) .topic,
#tabset > input:nth-child(19):checked ~ .MetaTopics > .metatopic:nth-child(10) .topic,
#tabset > input:nth-child(21):checked ~ .MetaTopics > .metatopic:nth-child(11) .topic,
#tabset > input:nth-child(23):checked ~ .MetaTopics > .metatopic:nth-child(12) .topic,
#tabset > input:nth-child(25):checked ~ .MetaTopics > .metatopic:nth-child(13) .topic,
#tabset > input:nth-child(27):checked ~ .MetaTopics > .metatopic:nth-child(14) .topic{
  display: block;
}
#tabset > input:first-child:checked ~ .MetaTopics > .metatopic:first-child .OutputTab,
#tabset > input:nth-child(3):checked ~ .MetaTopics > .metatopic:nth-child(2) .OutputTab,
#tabset > input:nth-child(5):checked ~ .MetaTopics > .metatopic:nth-child(3) .OutputTab,
#tabset > input:nth-child(7):checked ~ .MetaTopics > .metatopic:nth-child(4) .OutputTab,
#tabset > input:nth-child(9):checked ~ .MetaTopics > .metatopic:nth-child(5) .OutputTab,
#tabset > input:nth-child(11):checked ~ .MetaTopics > .metatopic:nth-child(6) .OutputTab,
#tabset > input:nth-child(13):checked ~ .MetaTopics > .metatopic:nth-child(7) .OutputTab,
#tabset > input:nth-child(15):checked ~ .MetaTopics > .metatopic:nth-child(8) .OutputTab,
#tabset > input:nth-child(17):checked ~ .MetaTopics > .metatopic:nth-child(9) .OutputTab,
#tabset > input:nth-child(19):checked ~ .MetaTopics > .metatopic:nth-child(10) .OutputTab,
#tabset > input:nth-child(21):checked ~ .MetaTopics > .metatopic:nth-child(11) .OutputTab,
#tabset > input:nth-child(23):checked ~ .MetaTopics > .metatopic:nth-child(12) .OutputTab,
#tabset > input:nth-child(25):checked ~ .MetaTopics > .metatopic:nth-child(13) .OutputTab,
#tabset > input:nth-child(27):checked ~ .MetaTopics > .metatopic:nth-child(14) .OutputTab{
  display: block;
}
#tabset > label {
  background-color: white;
  position: relative;
  display: inline-block;
  padding: 15px 15px 30px;
  border: 3px solid;
  border-color: black;
  border-radius: 15px;
  cursor: pointer;
  font-weight: 600;
}
#tabset > label::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 10px;
  width: 22px;
  height: 4px;
  background: #8d8d8d;
}
input:focus-visible + label {
  outline: 2px solid rgba(0,102,204,1);
  border-radius: 3px;
}

#tabset > label:hover,
#tabset > input:focus + label,
#tabset > input:checked + label {
  color: #1f928b;
}

#tabset > input:checked + label {
  border-color: blue;
  border-bottom: 1px solid blue;
  margin-bottom: -1px;
}