/* topicstextarea
--------------------------------------------------	*/
.topicstextarea{ width:99%; height:50px; margin-top:20px; background:#f3f9ff; border:2px solid #333333; }

/* 1
--------------------------------------------------	*/
.topics1{ padding:10px; border:2px solid #ee82ee; border-radius:10px; line-height:100%; }

/* 2
--------------------------------------------------	*/
.topics2{ padding:10px; background-color:#ee82ee; border-radius:10px; color:#ffffff; }

/* 3
--------------------------------------------------	*/
.topics3 {
  position: relative;
  padding: 0.6em;
  background: #e0edff;
}

.topics3:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
width: 0;
height: 0;
}

/* 4
--------------------------------------------------	*/
.topics4{
position: relative;
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #454545;
}

.topics4:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #a8d4ff;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

/* 5
--------------------------------------------------	*/
.topics5{
position: relative;
padding: 0.5em;
background: #a6d3c8;
color: white;
}

.topics5::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}

/* 6
--------------------------------------------------	*/
.topics6 {
border-bottom: solid 3px skyblue;
position: relative;
}

.topics6:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #ffc778;
bottom: -3px;
width: 30%;
}

/* 7
--------------------------------------------------	*/
.topics7 {
color: #010079;
padding-left:5px;
text-shadow: 0 0 5px white;
border-left: solid 7px #010079;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

/* 8
--------------------------------------------------	*/
.topics8{
position: relative;
display: inline-block;
padding: 0 45px;
}
.topics8:before, .topics8:after{
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 44px;
height: 2px;
background-color: black;
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.topics8:before {left:0;}
.topics8:after {right: 0;}

/* 9
--------------------------------------------------	*/
.topics9 {
position: relative;
color: #158b2b;
font-size: 20px;
padding: 10px 0;
text-align: center;
margin: 1.5em 0;
}
.topics9:before {
content: "";
position: absolute;
top: -8px;
left: 50%;
width: 150px;
height: 58px;
border-radius: 50%;
border: 5px solid #a6ddb0;
border-left-color: transparent;
border-right-color: transparent;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}

/* 10
--------------------------------------------------	*/
.topics10{
position: relative;
padding: 0.25em 0;
}
.topics10:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}

/* 11
--------------------------------------------------	*/
.topics11{
position: relative;
color: black;
background: #d0ecff;
line-height: 1.4;
padding: 0.25em 0.5em;
margin: 2em 0 0.5em;
border-radius: 0 5px 5px 5px;
}

.topics11:after {/*ƒ^ƒu*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  content: '\f00c Check';
  background: #2196F3;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 3px 7px 1px;
  font-size: 0.7em;
  line-height: 1;
  letter-spacing: 0.05em
  }

/* 12
--------------------------------------------------	*/
.topics12 {
position: relative;
padding: 0.1em 0.5em;
background: -moz-linear-gradient(to right, rgb(255, 186, 115), transparent);
background: -webkit-linear-gradient(to right, rgb(255, 186, 115), transparent);
background: linear-gradient(to right, rgb(255, 186, 115), transparent);
color: #545454;
}