body,div,p,h1,h2,h3,ul,li,form {margin:0px; padding: 0px;}
*{margin:0px;padding:0px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html,body{font-family: sans-serif; margin:0;height:100%;width:100%}
body {background-color: #fff6ec}
body.black {background-color: #171717;}
ul,ol,dl{list-style:none}
a,img,input,select,textarea,fieldset{border:0;outline:0; font-family: sans-serif;}
textarea{resize:none}
img{border:0;user-drag:none;-moz-user-drag:none;-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}
hr{margin:10px 0 0;border:1px solid #000}
thead {display: table-header-group;}
.hidden {
	display: none;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
input[type="date"],
input[type="time"],
input[type="number"],
select{margin:4px 10px 8px 0;padding:6px;font-size:15px; border: 1px solid black;}
.button,
input[type="submit"],
input[type="button"]{width:auto;border:0;padding:6px;background:#f0913f;font-size:15px;color:#fff;cursor:pointer;}
.button.orange,
input[type="submit"].orange,
input[type="button"].orange{border:1px solid #0B617D;background:#0B617D}
.button.violet,
input[type="submit"].violet,
input[type="button"].violet{border:1px solid #6b5faa;background:#6b5faa}
.button.blue,
input[type="submit"].blue,
input[type="button"].blue{border:0px solid #F6D44E;background:#F6D44E}
.button.green,
input[type="submit"].green,
input[type="button"].green{border:0px solid #52B846;background:#52B846}
.button.red,
input[type="submit"].red,
input[type="button"].red{border:0px solid #f64e4e;background:#f64e4e}
.button.black,
input[type="submit"].black,
input[type="button"].black{border:1px solid #2b2e31;background:#2b2e31}

input[type="button"]:disabled {border:1px solid  lightgray; background: darkgray; color: gray; cursor: default;}

.login{background:#332d26;}
.login #login_box,
.login #register_box{width:260px; background:#fff6ec; padding:20px; display: inline-block;}
.login #login_box img,
.login #register_box img{width:100%}
.login #login_box form,
.login #register_box form{margin:4px 0 0}
.login #login_box input,
.login #register_box form input{width:100%}
.login #login_box .small,
.login #register_box .small{margin:14px 0 0}

.login #error,
.error { width: 100%; color: red; font-size: 14px; text-align: center; }

.floating { display: table; width: 100%; height: 100%; z-index: 101; }
.floating .floater {display: table-cell; vertical-align: middle; text-align: center; width: 100%; height: 100%;}
.floating .floater iframe { width: 90%; height: 90%; background-color: white; border: 2px black solid; }


.login .role_selector { text-align: left; margin-bottom: 10px; }
form .role_selector input[type="radio"]{ width: 0%; display: none; }
form .role_selector label{
	cursor: pointer;
	text-align: center;
	display: inline-block;
	width: 48.7%;
	padding: 10px;
	background-color: #ffc695;
}
form .role_selector input[type="radio"]:checked+label { font-weight: bold; background-color: #de6700; color: white;}

.header { width: 100%; background-color: #ff8f22; height: 50px; overflow: hidden; box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.3); padding: 10px; position: fixed; z-index: 100;}
.header.black { background-color: black; color: white; }
.header .left { float: left; display: table; height: 100%;}
.header .left .logo img { height: 30px; width: auto; }
.header .right { float: right; display: table; height: 100%; vertical-align: middle; }
.header .left span,
.header .right span { display: table-cell; vertical-align: middle; padding-right: 10px; font-weight: bold; }
.header.black .left span,
.header.black .right span { color: white; }
.header .right img {height: 30px;}
.header .right a { height: 30px; display: table; text-decoration: none; color: black}
.header .right a img {height: 20px; margin: 5px;}
.header .right .logout {background-color: black; color: white; border: 0px; margin: 0px; padding: 0px; }

.header_content { width: 100%; height: 100%; padding-top: 50px; position: absolute; z-index: 1;}
.content_filled { width: 100%; height: 100%; position: absolute; z-index: 1;}
#activity_content { width: 100%; height: 100%; padding-top: 50px; position: absolute; z-index: 1;}
.underlay {position: absolute; top: 0px; left: 0px; z-index: 0; display: table; width: 100%; height: 100%; }
.underlay .centered {display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle;}

.menu { background-color: #332d26;color: white; width: 175px; height: 100%; position: fixed; top: 50px; padding: 10px;}
.menu ul {}
.menu li {width: 100%; border-bottom: 1px solid white; padding: 10px; cursor: pointer;}
.menu li a {display: table; color: white; text-decoration: none; padding: 0px; margin: 0px; border: 0px;}
.menu li span { display: table-cell; vertical-align: middle; text-align: left;}
.menu li span:first-child { width: 50px; }
.menu li img { width: 30px; height: auto; }

.content {
	padding: 60px 10px 10px 185px; 
}

.content .card { padding: 10px; background-color: white; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3); margin-bottom: 10px; margin-right: 5px; overflow: hidden; position: relative; }
.content .card.third { min-width: 370px; width: 32%; display: inline-block;}
.content .card .delete { float: right; position: absolute; top: 10px; right: 10px; }

.content .selectable { background-color: #c1c1c1; color: black; transition: all 0.2s;}

.selectable:hover { color: white; background-color: #909090; cursor: pointer; }

.content p { padding: 10px; }
.content ul { padding: 10px; list-style: square inside; }
.content li { padding: 10px; }

.content .floating_buttons {
	position: fixed;
	text-align: right;
	bottom: 20px;
	right: 20px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	white-space: nowrap;
}

.content .floating_buttons a {
	display: inline-block;
	width: 60px;
	height: 60px;
	background-color: #ff8f22;
	font-size: 55px;
	text-align: center;
	margin-left: 10px;
	cursor: pointer;
	border-radius: 30px;
	box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3);
}

.content .floating_buttons a.pdf {
	padding-top: 17px;
	color: white;
	font-weight: bold;
	background-color: red;
	font-size: 22px;
}

.content .floating_buttons a img {
	display: block;
	width: 60px;
	height: 60px;
	background-color: #ff8f22;
	font-size: 55px;
	text-align: center;
	cursor: pointer;
	border-radius: 30px;
	box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3);
}

.content .new_element.shown { display: table; }
.content .new_element {
	cursor: pointer;
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	transition: all 0.2s;
}
.content .new_element .form{
	cursor: default;
	display: inline-block;
	background-color: white;
	padding:20px;
	width: 330px;
	box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3);
}
.content .new_element form input{width:100%}
.content .new_element form select{width:100%}

.content .new_element .tabs { width: 100%; display: table;}
.content .new_element .tab { color: white; background-color: gray; width: auto; display: table-cell; padding: 10px; border: 1px solid white; cursor: pointer; }
.content .new_element .tab.selected { color: black; background-color: white; cursor: default; }
.content .new_element .subform {display: none;}
.content .new_element .subform.selected {display: block;}

.content .left {float: left; display: inline-block;}
.content .left .graybox { background-color: lightgray; padding: 10px; margin-right: 10px; width: 200px; margin-bottom: 10px; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3); }
.content .left .graybox h2 { text-align: center;}
.content .left .allocator { position: relative; }
.content .left .allocator .subtitle { text-align: center; font-size: 12px; padding-top: 0px; margin-top: 0px; }
.content .left .allocator .subtitle.italic { font-style: italic; }
.content .left .allocator .subtitle.justified { text-align: justify; padding: 0px 0px 10px 0px; }
.content .left .allocator .edit { position: absolute; top: 10px; right: 10px; cursor: pointer;}
.content .left .allocator .edit img { width: 20px; height: auto;}

#change_allocator_content .row { margin-top: 10px; }
#change_allocator_content input[type="radio"]{ width: 10%; height: 20px; margin-top: 5px; vertical-align: top;}
#change_allocator_content label{ display: inline-block; width: 89%; text-align: left;}
#change_allocator_content label .name { display: inline-block; font-size: 20px; font-weight: bold; width: 100%; }
#change_allocator_content label .description { display: inline-block; font-size: 16px; font-style: italic; width: 100%; }

.content .left .groups table,
.content .left .owners table,
.content .left .allocator.default .allocations {width: 100% }
.content .left .groups table td,
.content .left .lti_platforms table td,
.content .left .owners table td,
.content .left .allocator.default .allocations td { width: 50%; white-space: normal; word-wrap: break-word; word-break: break-all;}
.content .left .groups table td select,
.content .left .lti_platforms table td select,
.content .left .owners table td select,
.content .left .allocator.default .allocations td select {width: 100%}
.content .left .groups table td input[type="button"],
.content .left .lti_platforms table td input[type="button"],
.content .left .owners table td input[type="button"],
.content .left .allocator.default .allocations td input[type="button"] {width: 100%; margin-top: 0px; }
.content .left .groups input[type="button"], 
.content .left .lti_platforms input[type="button"], 
.content .left .owners input[type="button"], 
.content .left .allocator input[type="button"] { width: 100%; margin-top: 10px;} 



.content .top {overflow: hidden;}
.content .top h2,
.content .top h3,
.content .top h4 {float: left;}
.content .top input[type="button"] {float: right; margin-left: 10px;}

.content .participants table { width: 100% }
.content .participants table tr:nth-child(even) {background: #e8e8e8}
.content .participants table tr:nth-child(odd) {background: #f5f5f5}
.content .participants table td:first-child {width: 10%; text-align: center; }
.content .participants table td {width: 18%; text-align: center; }
.content .participants table input[type="button"] {width: 100%;}
.content .participants table img {width: 30px;}

.content #pdf_printable {display: none;}
.content #pdf_printable {padding:10px}
.content #pdf_printable table {width: 100%; position: relative; font-size: 26px; font-family: "DejaVu Sans Mono"; border: solid 2px black; border-collapse: collapse; }
.content #pdf_printable table td {border: solid 2px black; text-align: center;}


@page {
	size: A4;
	margin: 4mm 4mm 4mm 4mm;
}

@media print {
    .content #pdf_printable {display: block;}
    .content #group_view,
    .header,
    .menu {display: none;}
    body {background-color: white;}
    .content {
		padding: 0px;
		width: 210mm;
		height: 297mm;
	}
    .floating_buttons {display: none;}
	thead {display: table-header-group;}
}

.content .test { background-color: lightgray; padding: 10px; margin-top: 10px; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);}
.content .test .activities {overflow-x: auto; white-space: nowrap; padding-bottom: 10px; }
.content .test .activities table {display: table; overflow: hidden; }
.content .test .activities.collapsed table { display: none;}
.content .test .activities .activity { background-color: gray; width: 250px; padding: 10px; margin-top: 10px; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3); display: inline-block; margin-right: 10px;}

.content .test .activities .activity.tactivity { background-color: gray; }
.content .test .activities .activity.tlimesurvey { background-color: #3f8446; }
.content .test .activities .activity.trageanalytics {
	background-color: #c84949;
    background: -webkit-linear-gradient(left, #ff7d7d, #ffd17d , #ffff7b, #7bff7b, #84ffff, #8080ff, #ff7aff);
    background: -o-linear-gradient(right, #ff7d7d, #ffd17d, #ffff7b, #7bff7b, #84ffff, #8080ff, #ff7aff); 
    background: -moz-linear-gradient(right, #ff7d7d, #ffd17d, #ffff7b, #7bff7b, #84ffff, #8080ff, #ff7aff); 
    background: linear-gradient(to right, #ff7d7d, #ffd17d, #ffff7b, #7bff7b, #84ffff, #8080ff, #ff7aff); 
    width: 325px;
}
.content .test .activities .activity.tgameplay {
	background-color: black;
	color: white;
    width: 400px;
}

.content .test .activities .activity.tminiokafka { background-color: #30819a; }

.content .test .activities .activity.trageminio {
	background-color: #c84949;
    background: -webkit-linear-gradient(left, #ff7d7d 7%, #ffd17d 14%, #ffff7b 21%, #7bff7b 28%, #84ffff 35%, #8080ff 42%, #ff7aff 49%, white 49%, white 51%, #30819a 51%, #30819a 100%);
    background: -o-linear-gradient(right, #ff7d7d 7%, #ffd17d 14%, #ffff7b 21%, #7bff7b 28%, #84ffff 35%, #8080ff 42%, #ff7aff 49%, white 49%, white 51%, #30819a 51%, #30819a 100%); 
    background: -moz-linear-gradient(right, #ff7d7d 7%, #ffd17d 14%, #ffff7b 21%, #7bff7b 28%, #84ffff 35%, #8080ff 42%, #ff7aff 49%, white 49%, white 51%, #30819a 51%, #30819a 100%); 
    background: linear-gradient(to right, #ff7d7d 7%, #ffd17d 14%, #ffff7b 21%, #7bff7b 28%, #84ffff 35%, #8080ff 42%, #ff7aff 49%, white 49%, white 51%, #30819a 51%, #30819a 100%); 
    width: 400px;
}

.content .test .activities .activity.tltitool {
	background-color: #0f4d87;
	color: white;
}

.content .test .activities .activity table,
.content .test .activities .activity .progress {
	color: black;
}

.analysis div { padding-left: 20px; }
.analysis div { background-color: rgba(0,0,0,0.1); }

.content .test .activities .activity .top input[type="button"] {float: right; margin-left: 10px; height: 15px; width: 15px; font-size: 10px; padding: 0px; text-align: center;}
.content .test .activities .activity .subtitle { font-style: italic; font-size: 14px; width: 100%; white-space: normal; margin: 0px; padding: 0px;}

.content .test .activities .activity table { width: 100%; font-size: 14px; border-collapse: collapse; }
.content .test .activities .activity table tbody { width: 100%; }
.content .test .activities .activity table tbody tr:nth-child(even) {background: #c5c5c5}
.content .test .activities .activity table tbody tr:nth-child(odd) {background: #a5a5a5}
.content .test .activities .activity table tbody tr { width: 100%; }
.content .test .activities .activity table tbody tr td,
.content .test .activities .activity table tbody tr th { border: solid 2px black; }
.content .test .activities .activity table tbody tr th {padding: 5px; }
.content .test .activities .activity table tbody tr td {padding: 5px; width: 33.33%; text-align: center;}
.content .test .activities .activity table tbody tr td.red { background-color: #ff9696; }
.content .test .activities .activity table tbody tr td.green { background-color: #adffad; }
.content .test .activities .activity table tbody tr td.yellow { background-color: #fff688; }
.content .test .activities .activity table tbody tr td .red { color: #b70000; }
.content .test .activities .activity table tbody tr td .green { color: #008800; }
.content .test .activities .activity table tbody tr td .yellow { color: #fff145; }

.content .test .activities .activity table tbody tr td.progress,
.content .test .activities .activity table tbody tr td.progress div.done, 
.content .test .activities .activity table tbody tr td.progress div.partial {height: 28px;}

.content .test .activities .activity .progress { position: relative; width: 100%; background-color: #ff9696; height: 30px; border: 2px solid black; overflow: hidden; margin-bottom: 10px; z-index: 0; padding: 0px;}
.content .test .activities .activity .progress div.done {height: 30px; float: left; position: absolute; background-color: #adffad; top: 0px; left: 0px; }
.content .test .activities .activity .progress div.partial {height: 30px; float: left; position: absolute; background-color: #fff688; top: 0px; left: 0px; }
.content .test .activities .activity .progress span {float: left; width: 100%; position: absolute; top: 7px; left: 0px; text-align: center; font-size: 12px; font-weight: bold;}
.content .test .activities .activity a {font-weight: bold; cursor: pointer;}

.content .new_element form .gameplay_activity label {width: 50%; display: inline-block; text-align: left;}
.content .new_element form .gameplay_activity input[type="checkbox"] { width: 50%; }
.content .new_element form .gameplay_activity .info { font-size: 14px; font-style: italic; }
/*
.menu { background-color: #332d26;color: white; width: 200px; height: 100%; position: fixed; top: 50px; padding: 10px;}
.menu ul {}
.menu li {display: table; width: 100%; border-bottom: 1px solid white; padding: 10px; }
.menu li span { display: table-cell; vertical-align: middle; text-align: left;}
.menu li span:first-child { width: 60px; }
.menu li img { width: 50px; height: auto; }
 */

#language-dropdown {
  position: absolute; /* Make it absolute */
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 10px;
  display: none; /* hide the dropdown initially */
  top:0;
  z-index: 1000; /* Set the z-index to bring it on top */
}

#language-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#language-dropdown li {
  padding: 10px;
  cursor: pointer;
}

#language-dropdown img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}