/**
**
*
  sorry, not sorry
*/



/*
 * General reusable definitions
 */
.pschorr-red {
	color: #c74aed;
}

.center {
	text-align: center;
}

.ta-right {
	text-align: right;
}

.mt-20 {
	margin-top: 20px;
}

.mt-30 {
	margin-top: 30px;
}

.mt-40 {
	margin-top: 40px;
}




/*
 * Object specific definitions
 */

html, body {
	height: 100%;
}

.ch-solved {
	background-color: #EEEF20 !important;
}

#challnges_table {
	table-layout: fixed;
	border: none;
}

#challnges_table th {
	border: none;
}

#challnges_table th img {
	display: block;
	margin: auto;
	max-width: 65%;
}

#challnges_table tr td {
	border: 1px solid #c74aed;
}

#challnges_table td p.categoryLineup {
	margin: 10px 0;
}

#challnges_table td p.solvCount {
	margin: 0;
}

#challnges_table td a {
	word-wrap: break-word;
}

#main_container {
	min-height: 100%;
	padding: 0 0 50px 0;
}

#container_content {
	margin-top: 20px;
}

.post {
	/*font-family: 'Open Sans', sans-serif;*/
	font-family: sans-serif;
	font-size: 16px;	
}

.announce-box {
	background-color: rgba(255,255,255,0.6);
	border-radius: 0.4rem;
	border: 2px solid #c74aed;
	margin: 10px 0;
	min-height: 11em;
}

.announce-box h2 {
	border-bottom: 2px solid #c74aed;
	margin: 0;
	padding: 10px 0;
}

.announce-box p {
	margin: 10px 15px 3px 15px;
}

.centered-pills { text-align:center; }
.centered-pills ul.nav-pills { display:inline-block; }
.centered-pills li { display:inline; }
.centered-pills a { float:left; }

.progress-bar-skittles {
	background-color: #007CB2;
	background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
	background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
	background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
	-webkit-background-size: 40px 40px;
	background-size: 40px 40px;
}

/*
 * Element specific definitions
 */

html {
	/*background: url(../img/bg/1.png) no-repeat center center fixed; */
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

footer {
	color: #aaa;
	font-size: 12px;}

nav ul {
	text-align: center;
}

nav ul li a {
	border: 2px solid #14213D;
	border-radius: 0.4rem;
	margin-right: 8px;
	margin-top: 6px;
	margin-bottom: 6px;
	color: #fff;
}

.highlight {

}

h2.profile  {
	font-size: 1.5em;
	color: #c74aed;
	border-bottom: 1px solid #c74aed;
}

.challenge-heading {
	margin-top: 2.5em;
}

.challenge-heading h1 {
	font-size: 2.5em;
	color: #c74aed;
}

.challenge-heading img {
	height: 4em;
}

.challenge-description {
	/*background-color: #f5f5f5;*/
/*	border: 1px solid #c74aed;
	border-top-width: 4px;*/

	border-left: 4px solid #c74aed;
	padding-left: 24px;

	border-radius: 0px;
	/*color: #333;*/
	padding: 15px;
	margin: 20px 0;
}



.challenge-description h1 {
	font-weight: 500;
	font-size: 1.4em;
}

.challenge-description h2 {
	font-weight: 500;
	font-size: 1.4em;
}

.challenge-description h3 {
	font-weight: 500;
	font-size: 1.4em;
}

.challenge-description p:last-child {
	margin-bottom: 0;
}

.submission {
	border-left: 4px solid #c74aed;
	padding-left: 24px;
}

.team-description {
	margin: 20px 0;
	font-weight: bold;
}

.advertisement {
	font-size: 1.3em;
	margin-top: 10px;
	margin-bottom: 60px;
	color: #c74aed;
	font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}


.btn:hover, nav a:hover {
	box-shadow: 3px 6px 0px 0px #EEEF20;
}


.border-hxp {
	border-color: #c74aed;
	border-width: 3px;	
}

.btn-hxp, .form-control-file {
	background-color: #c74aed;
	border-color: #c74aed;
	color: white;
	border-radius: 0.4rem;
	font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.btn-hxp:hover, .form-control-file:hover {
	background-color: #439EDD;
	color: black;
}

.btn-hxp-red {
	background-color: #14213D;
	border-color: #14213D;
	color: #white;
	font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.btn-hxp-red:hover {
	background-color: #439EDD;
	color: #fff;
}

#hxp-navbar, #footer {
	background-color: #c74aed;
	color: black;
	border-radius: 0.4rem;
}

#hxp-navbar {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

#footer {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	margin-top: 40px;
}

#footer p {
	margin: 0;
	padding: 0;
	line-height: 2em;
	padding-top: 24px;
	padding-bottom: 24px;
	font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

}

#footer p a {
	color: #14213D;
	font-weight: bold;
	font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#hxp-navbar a, .navbar-light .navbar-text, .navbar-light .navbar-toggler {
	color: #14213D;
	font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#hxp-navbar a:hover {
	background: #439EDD;
}


#hxp-navbar a.active {
	background: #DCF763;
}


.navbar-light .navbar-toggler {
	border-color: #14213D;
}

.navbar-light .navbar-toggler-icon {
	background-image: url("/assets/img/toggler-icon.svg");
}

.ct-label { color: white; }



.ct-series-a .ct-bar {
	stroke: #EEEF20;	
}

.ct-series-b .ct-bar {
	stroke: #c74aed;
}

.col.center img {
	margin-top: 50px;
	margin-bottom: 30px;
}

img.mx-auto {
	margin-bottom: 20px;
}

.alert {
	background: transparent !important;
	color: #fff !important;
	font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* https://stackoverflow.com/questions/51580279/bootstrap-4-modal-pop-up-header-login-stretch-to-the-right-when-click, https://github.com/twbs/bootstrap/issues/14040#progressive-timeline-item-container */
.modal-open {
	overflow-y: auto !important;
	padding-right: 0 !important;
}
	
.modal-scrollbar-measure {
	overflow: hidden;
}

#newsbox {
	text-overflow: ellipsis;
	overflow: hidden;
	margin-bottom: 40px;
}

.progress-bar {
	transition: width 0.05s linear;
}

.hidden {
	display: none;
}

.chall-card:hover,.chall-card:active { 
	border-color: #EEEF20 !important;
	background: rgba(238, 239, 32, 0.3);
}

.chall-card:hover a,.chall-card:active a{
	color: #EEEF20 !important;
}

.chall-card {
	border-bottom-width: 7px !important;
	border-radius: 0.4rem;
	border-color: #fff !important;
}

/* stolen from https://framagit.org/dab/catapulse/commit/de41f3570c70b52b447baa088e6ee805b610eed6*/
.table-header-rotated th.row-header{
  width: auto;
}

.table-header-rotated td{
  width: 45px;
	border-top: 1px solid #c74aed;
  border-left: 1px solid #c74aed;
	border-right: 1px solid #c74aed;
	border-bottom: 1px solid #c74aed;
  vertical-align: middle;
  text-align: center;
}

.table-header-rotated th.rotate-45{
  height: 175px; /*tune here*/
  width: 45px;
  min-width: 45px;
  max-width: 45px;
  vertical-align: bottom;
  padding: 0;
  font-size: 1rem;
	line-height: 0.8;
}

.table-header-rotated th {
	border:0;
}

.table-header-rotated th.rotate-45 > div{
  position: relative;
  height: 100%;
  width: 100%;
  -ms-transform:skew(-45deg,0deg);
  -moz-transform:skew(-45deg,0deg);
  -webkit-transform:skew(-45deg,0deg);
  -o-transform:skew(-45deg,0deg);
  transform:skew(-45deg,0deg);
  overflow: hidden;
  border-right: 1px solid #B14AED;
  left: 88px /*tune here**/
}

.table-header-rotated th.rotate-45 a {
  -ms-transform:skew(45deg,0deg) rotate(315deg);
  -moz-transform:skew(45deg,0deg) rotate(315deg);
  -webkit-transform:skew(45deg,0deg) rotate(315deg);
  -o-transform:skew(45deg,0deg) rotate(315deg);
  transform:skew(45deg,0deg) rotate(315deg);
  position: relative;
  display: inline-block;
  text-align: left;
  width: 80px;
  left: -10px;
  bottom: -120px; /*tune here*/
  white-space: nowrap; /*whether to display in one line or not*/
  font-size: 95%;
}
/*
th.rotate {
	height: 200px;
	white-space: nowrap;
	padding-bottom: 0 !important;
	border: 1px solid #ccc;
}

th.rotate > div {
	transform: 
	rotate(270deg);
	width: 15px;
}
th.rotate > div > span {
	padding: 5px 10px 0;
}
*/
td {
  white-space: nowrap;
}

td.rotate-td {
	width: 50px;
	border: 1px solid #B14AED;
}

#scoreboard_max_table {
	width: auto !important;
}

td.bg-solved {
	background-color: #EEEF20 !important;
}

td.bg-down {
	background-color: #FF3333 !important;
}

td.bg-na {
	background-color: #444 !important;
}

td.td-highlight {
	font-weight: bold;
	text-align: center;
}



.ribbon:nth-child(even) {
  margin-right: 4%;
}
@media (max-width: 500px) {
  .ribbon {
    width: 100%;
  }
  .ribbon:nth-child(even) {
    margin-right: 0%;
  }
}
.wrap {
  width: 100%;
  height: 188px;
  position: absolute;
  top: -8px;
  left: 8px;
  overflow: hidden;
}
.wrap:before, .wrap:after {
  content: ""; 
  position: absolute;
}
.wrap:before {
  width: 40px;
  height: 8px;
  right: 100px;
  background: #4D6530;
  border-radius: 8px 8px 0px 0px;
}
.wrap:after {
  width: 8px;
  height: 40px;
  right: 0px;
  top: 100px;
  background: #4D6530;
  border-radius: 0px 8px 8px 0px;
}
.ribbon6 {
  width: 120px;
  height: 24px;
  line-height: 24px;
  position: absolute;
  top: 20px;
  right: -26px;
  z-index: 2;
  overflow: hidden;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border: 1px dashed;
  box-shadow:0 0 0 3px #EEEF20,  0px 21px 5px -18px rgba(0,0,0,0.6);
  background: #EEEF20;
  text-align: center;
  color: black;
}

code {
	color: #ffc107 !important;
}

.close {
	color: #ffc107;	
	text-shadow: none;
	opacity: 1;
}

.close:hover {
	color: #ff5000;	
}

.modal-body {
	padding: 24px;
}

.modal-body b {
	font-weight: normal;
}

/* GLITCHING */

.glitch {
  color: white;
  font-size: 40px;
  position: relative;
  width: 120px;
  margin: 0 auto;
}

@keyframes noise-anim {
  0% {
    clip: rect(3px, 9999px, 90px, 0);
  }
  5% {
    clip: rect(13px, 9999px, 11px, 0);
  }
  10% {
    clip: rect(99px, 9999px, 85px, 0);
  }
  15% {
    clip: rect(48px, 9999px, 53px, 0);
  }
  20% {
    clip: rect(64px, 9999px, 81px, 0);
  }
  25% {
    clip: rect(56px, 9999px, 88px, 0);
  }
  30% {
    clip: rect(90px, 9999px, 68px, 0);
  }
  35% {
    clip: rect(48px, 9999px, 85px, 0);
  }
  40% {
    clip: rect(47px, 9999px, 36px, 0);
  }
  45% {
    clip: rect(59px, 9999px, 76px, 0);
  }
  50% {
    clip: rect(61px, 9999px, 30px, 0);
  }
  55% {
    clip: rect(28px, 9999px, 89px, 0);
  }
  60% {
    clip: rect(87px, 9999px, 93px, 0);
  }
  65% {
    clip: rect(48px, 9999px, 51px, 0);
  }
  70% {
    clip: rect(54px, 9999px, 15px, 0);
  }
  75% {
    clip: rect(34px, 9999px, 56px, 0);
  }
  80% {
    clip: rect(13px, 9999px, 59px, 0);
  }
  85% {
    clip: rect(91px, 9999px, 45px, 0);
  }
  90% {
    clip: rect(74px, 9999px, 35px, 0);
  }
  95% {
    clip: rect(65px, 9999px, 57px, 0);
  }
  100% {
    clip: rect(78px, 9999px, 11px, 0);
  }
}
.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: #14213D;
  background: #EEEF20;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(56px, 9999px, 75px, 0);
  }
  5% {
    clip: rect(34px, 9999px, 42px, 0);
  }
  10% {
    clip: rect(97px, 9999px, 25px, 0);
  }
  15% {
    clip: rect(10px, 9999px, 6px, 0);
  }
  20% {
    clip: rect(13px, 9999px, 68px, 0);
  }
  25% {
    clip: rect(44px, 9999px, 85px, 0);
  }
  30% {
    clip: rect(93px, 9999px, 4px, 0);
  }
  35% {
    clip: rect(85px, 9999px, 86px, 0);
  }
  40% {
    clip: rect(2px, 9999px, 43px, 0);
  }
  45% {
    clip: rect(98px, 9999px, 43px, 0);
  }
  50% {
    clip: rect(18px, 9999px, 44px, 0);
  }
  55% {
    clip: rect(41px, 9999px, 73px, 0);
  }
  60% {
    clip: rect(12px, 9999px, 40px, 0);
  }
  65% {
    clip: rect(25px, 9999px, 38px, 0);
  }
  70% {
    clip: rect(82px, 9999px, 85px, 0);
  }
  75% {
    clip: rect(68px, 9999px, 50px, 0);
  }
  80% {
    clip: rect(7px, 9999px, 72px, 0);
  }
  85% {
    clip: rect(63px, 9999px, 12px, 0);
  }
  90% {
    clip: rect(91px, 9999px, 48px, 0);
  }
  95% {
    clip: rect(59px, 9999px, 59px, 0);
  }
  100% {
    clip: rect(76px, 9999px, 92px, 0);
  }
}
.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: #B14AED;
  background: #213766;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}