/* Container */
.container {
    z-index: 3;
	position: relative;
}
.container.small {
	max-width: 95%;
	width: 500px;
	margin: 0 auto;
}

/* borders */
.container .border {
	z-index: 6;
	opacity: 1;
	position: absolute;
	transition: all 250ms ease-in;
	border-style: solid;
	border-color: var(--darkViolet);
	box-shadow: 0 0 4px rgba(152,0,204,0.65);
}
.container .border.green{
	border-color: #00ff00;
	box-shadow: 0 0 4px rgba(0,255,0,0.65);
}
.container .border.violet{
	border-color: var(--violet);
	box-shadow: 0 0 4px rgba(242,34,242,0.65);
}
.container .border.red{
	border-color: #ff0000;
	box-shadow: 0 0 4px rgba(34,3,3,0.65)
}
.container .border.blue{
	border-color: #26dafd;
	box-shadow: 0 0 4px rgba(2,157,187,0.65);
}
.container .border-left {
	top: 50%;
	left: 0;
	height: 100%;
	transform: translate(0, -50%);
	border-width: 0 0 0 1px;
}
.container .border-right {
	top: 50%;
	right: 0;
	height: 100%;
	transform: translate(0, -50%);
	border-width: 0 0 0 1px;
}
.container .border-top {
	top: 0;
	left: 50%;
	width: 100%;
	transform: translate(-50%, 0);
	border-width: 1px 0 0 0;
}
.container .border-bottom {
	bottom: 0;
	left: 50%;
	width: 100%;
	transform: translate(-50%, 0);
	border-width: 1px 0 0 0;
}

/* borders angles*/
.container .border-angle {
	width: 24px;
	height: 24px;
	border-color: #f222ff;
	z-index: 7;
	opacity: 1;
	position: absolute;
	transition: all 250ms ease-in;
	border-style: solid;
}
.container .border-angle.small {
	width: 6px;
	height: 6px;
}

.container .border-angle.green {
	border-color: #00ff00;
}
.container .border-angle.violet {
	border-color: #f222f2;
}
.container .border-angle.blue {
	border-color: #acf9fb;
}
.container .border-angle.red {
	border-color: #ff0000;
}

.container .angle-top-left {
	left: -2px;
	top: -2px;
	border-width: 2px 0 0 2px;
}
.container .angle-top-right {
	right: -2px;
	top: -2px;
	border-width: 2px 2px 0 0;
}
.container .angle-bottom-left {
	left: -2px;
	bottom: -2px;
	border-width: 0 0 2px 2px;
}
.container .angle-bottom-right {
	right: -2px;
	bottom: -2px;
	border-width: 0 2px 2px 0;
}
/* small angles */
.container .angle-top-left.small {
	left: -1px;
	top: -1px;
	border-width: 1px 0 0 1px;
}
.container .angle-top-right.small {
	right: -1px;
	top: -1px;
	border-width: 1px 1px 0 0;
}
.container .angle-bottom-left.small {
	left: -1px;
	bottom: -1px;
	border-width: 0 0 1px 1px;
}
.container .angle-bottom-right.small {
	right: -1px;
	bottom: -1px;
	border-width: 0 1px 1px 0;
}


/* header */
.container .header {
    padding: 20px 60px 20px 20px;
    position: relative;
    background-color: var(--darkBlue);
}

.container .header h2 {
    color: var(--white);
    font-weight: bold;
    text-transform: uppercase;
	font-size: 18px;
	text-align: left;
    margin: 0;
}

.container.section .content {
	padding: 100px 25px;
	background-color: transparent;
}
.container .content {
    padding: 25px;
	height: 100%;
    background-color: var(--blue);
}

.container .content.modal {
	overflow-y: scroll;
}

.container .option {
    font-family: 'Electrolize';
}

/* table xl*/
.container .table-xl {
	display: inline-block;
	padding: 0 0 0 35px;
	text-align: left;
}
.container .table-xl li {
	display: block;
	list-style: none;
	padding-left: 50px;
}
.container .table-xl li:before {
	left: -10px;
	color: #8bebfe;
	display: inline-block;
	content: ">>";
	position: relative;
	margin-left: -20px;
}
/* table sm */
.container .table-sm {
	padding: 0 0 0 20px;
	text-align: left;
}
.container .table-sm li {
	display: block;
	list-style: none;
	padding-left: 20px;
}
.container .table-sm li:before {
	left: -10px;
	color: #8bebfe;
	display: inline-block;
	content: ">>";
	position: relative;
	margin-left: -20px;
}

/* table link */
.container .content li a {
	text-decoration: none;
	color: var(--white);
	transition: all .2s ease-in-out;
}
.container .content li a:hover {
	color: var(--black);
	text-shadow: 0 0 4px rgba(48, 53, 53, 0.65);
}

.container .content .label {
	font-size: 14px;
	border-bottom: 1px solid #26dafd;
	padding-bottom: 2px;
	margin-top: 0;
}

/* header square */
.container .header-square {
    position: relative;
    margin: 10px 8px;
    padding: 2px;
    border-radius: 3px;
    background-color: rgba(242,34,242,0.65);
}
.container .header-square p {
    color: var(--white);
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Electrolize';
    margin: 0;
    padding: 0;
    text-align: left;
    letter-spacing: 2px;
    text-indent: 15px;
}

/* section header square */
.container .header-square .square {
    top: 6px;
    left: 6px;
	width: 4px;
	height: 4px;
	background-color: var(--white);
	z-index: 7;
	opacity: 1;
	position: absolute;
	transition: all 250ms ease-in;
}

/* Select */
.select-container {
	position: relative;
}
.select {
	position: relative;
	font-size: 10px;
	letter-spacing: 1px;
    color: var(--white);
    padding: 10px 20px 10px 10px;
	max-width: 98%;
	border: none;
	border-radius: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}
.select::-ms-expand {
    display: none;
}
.select:hover {
    border-color: var(--lightWhite);
}
.select:focus {
	border-color: var(--lightWhite);
    outline: none;
}
.select option {
	font-weight: normal;
	text-transform: normal;
}
/* Select end */

/* animations */

/* hover animation full width/height */
.container .animate-border:hover .angle-top-left,
.container .animate-border:hover .angle-bottom-right {
	width: 100%;
	height: 100%;
	z-index: -1;
}

/* Credits: arwes.dev */
.orb1 {
	width: 1px;
	height: 1px;
	display: block;
	opacity: 0;
	position: absolute;
	animation: arwes-puff 1000ms ease-out 0ms 1;
	box-shadow: 0 0 4px 4px rgba(38,218,253,0.43333333333333335);
	border-radius: 50%;
	background-color: rgba(38,218,253,0.43333333333333335);
	z-index: 12;
}
.orb2 {
	animation: arwes-puff-1 1000ms ease-out 0ms 1;
	box-shadow: 0 0 8px 8px rgba(38,218,253,0.43333333333333335);
	z-index: 12;
}
@-webkit-keyframes arwes-puff {
	0% {
		opacity: 0.25;
		transform: scale(0.5, 0.5) translate(0, 30px);
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scale(1.5, 1.5) translate(0, -30px);
	}
}
@-webkit-keyframes arwes-puff-1 {
	0% {
		opacity: 0.25;
		transform: scale(0.5, 0.5) translate(0, 50px);
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scale(1.5, 1.5) translate(0, -50px);
	}
}
/* Credits: arwes.dev */

/* media queries */
@media screen and (min-width: 730px) {
    .container .header h2 {
        font-size: 24px;
    }
}