@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap');

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body::-webkit-scrollbar {
    display: none;
    max-width: 100%;
    overflow-x: hidden;
}

/* --------------------------------------------------------------------- */
/* Content */
.accordion {
	margin: auto;
	width: 60%;
    border-radius: 20px;
    padding-bottom: 50px;
}

.accordion input {
	display: none;
}

.box {
	position: relative;
	background: white;
    height: 64px;
    transition: all .15s ease-in-out;
}

.accordion-title, .accordion-title::before{
    border-radius: 10px 10px 0px 0px;
    animation: flipdown 0.5s ease both;
}

.box::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
}

header.box {
	background: #00BCD4;
	z-index: 100;
	cursor: initial;
	box-shadow: 0 -1px 0 #e5e5e5,0 0 2px -2px rgba(0,0,0,.12),0 2px 4px -4px rgba(0,0,0,.24);
}

header .box-title {
	margin: 0;
	font-weight: normal;
	font-size: 16pt;
	color: white;
	cursor: initial;
}

.box-title {
	/* width: calc(100% - 40px); */
    width: 100%;
	height: 64px;
	/* line-height: 64px; */
	padding: 23px 30px;
    text-align: left;
	display: inline-block;
	cursor: pointer;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.box-content {
	padding: 20px 44px;
    width: 100%;
	font-size: 11pt;
	color: rgba(0,0,0,.54);
	display: none;
    border-top: 0.5px solid;
    border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}
.box-close {
	position: absolute;
	height: 64px;
	width: 100%;
	top: 0;
	left: 0;
	cursor: pointer;
	display: none;
}

input:checked + .box {
	height: auto;
	margin: 16px 0;
    box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);
}

input:checked + .box .box-content,
input:checked + .box .box-close {
	display: inline-block;
}
input:checked + .accordion-item, input:checked + .accordion-item::before, #item12, #item12::before{
    border-radius: 0px 0px 10px 10px;
}
input:checked + section.box .box-title:before {
	transform: rotate(90deg);
}

.arrows section .box-title {
	padding-left: 44px;
	/* width: calc(100% - 64px); */
}
.arrows section .box-title:before {
	position: absolute;
	display: block;
	content: '\203a';
	font-size: 18pt;
	left: 20px;
	top: 16px;
	transition: transform .15s ease-in-out;
	color: rgba(0,0,0,.54);
}

#item1{
    animation: flipdown 0.5s ease both;
    animation-delay: 0.1s
}

#item2{
    animation: flipdown 0.5s ease both;
    animation-delay: 0.2s
}

#item3{
    animation: flipdown 0.5s ease both;
    animation-delay: 0.3s
}

#item4{
    animation: flipdown 0.5s ease both;
    animation-delay: 0.4s
}

#item5{
    animation: flipdown 0.5s ease both;
    animation-delay: 0.55s
}

#item6{
    animation: flipdown 0.5s ease both;
    animation-delay: 0.7s;
}

#item7{
    animation: flipdown 0.5s ease both;
    animation-delay: 0.85s;
}

#item8{
    animation: flipdown 0.5s ease both;
    animation-delay: 1s;
}

#item9{
    animation: flipdown 0.5s ease both;
    animation-delay: 1.2s
}

#item10{
    animation: flipdown 0.5s ease both;
    animation-delay: 1.4s
}

#item11{
    animation: flipdown 0.5s ease both;
    animation-delay: 1.6s;
}

#item12{
    animation: flipdown 0.5s ease both;
    animation-delay: 1.8s;
}


@keyframes flipdown {
    0% {
      opacity: 0;
      transform-origin: top center;
      transform: rotateX(-90deg); }
    5% {
      opacity: 1; }
    80% {
      transform: rotateX(8deg); }
    83% {
      transform: rotateX(6deg); }
    92% {
      transform: rotateX(-3deg); }
    100% {
      transform-origin: top center;
      transform: rotateX(0deg); } }

.box-content ul { 
    text-decoration: dotted;
}

/* Tables */
.all-tables {
    width: 100%;
}

.all-tables td, th {
    border: 1px solid #ddd;
    padding: 8px;
}

.all-tables tr:nth-child(even) { 
    background-color: #f2f2f2;
}

.all-tables tr:hover {
    background-color: #ddd;
}

.all-tables th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #b5d1cfdb;
    color: white;
}

.box-content ol li { 
    text-decoration-style: decimal;
    padding-left: 2%;
}

.box-content ul li { 
    text-decoration-style: circle;
    padding-left: 2%;
}