/*===================================*/
/*========== TEAM SETTINGS ==========*/
/*===================================*/

.grid-team-settings input, select {
    display: block;
    width: 20ch;
    padding: 4px;
}
.grid-team-settings select {
    display: block;
    /*min-width: 200px;*/
    padding: 5px;
}

.grid-team-settings label, .badge-label {
    display: inline-block;
    padding-bottom: 0.2em;
}

.grid-team-settings {
 	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(24px, auto) minmax(24px, auto) minmax(0, auto);
	grid-gap: 2em;
	grid-template-areas:
		"ts-name ts-memb"
		"ts-lang ts-memb"
		"ts-badg ts-badg"
}
.team-settings-name {
	grid-area: ts-name;
}
.team-settings-members {
	grid-area: ts-memb;
	line-height: 1.5;
}
.team-settings-language {
	grid-area: ts-lang;
}
.team-settings-badge {
	grid-area: ts-badg;
}

.grid-badges {
  display: grid;
	grid-template-columns: repeat(auto-fit, 50px);
	grid-gap: 2em;
	grid-auto-rows: 50px;
	margin-bottom: 2em;
}

.grid-badges > div {
  background: grey;
}

.badge-available {
	cursor: pointer;
}

.badge-not-available {
	filter: grayscale(100%);
  opacity: 0.2;
}

.badge-selected {
	border: 2px solid var(--main-button-color);
}

#saveTeamSettings {
	border-radius: 4px;
	color: #fff;
	font-family: Arial;
	padding: 5px 20px 5px 20px;
	text-decoration: none;
	cursor: pointer;
	background: var(--main-button-color);
	border: 0;
}

/*==================================*/
/*========== TEAM MEMBERS ==========*/
/*==================================*/

.grid-team-members {
  display: grid;
  grid-template-columns: minmax(0, auto);
  grid-auto-rows: minmax(0, auto);
  grid-row-gap: 1em;
}

.grid-label {
  display: grid;
  grid-template-columns: 50px 1fr;
  grid-template-rows: 40px;
  padding: 0px;
  border-radius: 4px;
  border: 2px solid grey;
  /*width: 350px;*/
}
.grid-label > div:nth-child(1) {
  background-color: grey;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.grid-label > div:nth-child(2) {
	margin-top: auto;
	margin-bottom: auto;
	padding: 0 10px;
	width: 95%;
}

/*==========================*/
/*========== HOME ==========*/
/*==========================*/

.grid-home {
	display: grid;
	grid-column-gap: 1em;
	grid-template-columns: 2fr 2fr 2fr;
	grid-auto-rows: auto;
	width: 100%;
}

.grid-home > div:nth-child(1) {
	padding: 1em;
	font-size: 0.8rem;
}
.grid-home > div:nth-child(2) {
	padding: 1em;
}
.grid-home > div:nth-child(3) {
	padding: 1em;
	font-size: 0.8rem;
}

.grid-home-left {
	display: grid;
	grid-row-gap: 4em;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
}

.home-title {
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
    font-weight: 500;
}

.team-name {
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0.5rem 0;
    font-weight: 700;
	text-align: center;
}
.team-edit-btn {
	text-align: right;
	margin-bottom: 0.5rem;
}

.grid-home-right {
	display: grid;
	grid-row-gap: 2em;
	grid-template-columns: 1fr;
	grid-auto-rows: minmax(0, auto);
}

.mark-completed {
	color: white !important;
	padding: 2px 5px 2px 5px;
	margin-left: 10px;
	font-size: 50%;
	background: #004d33 !important;
	letter-spacing: 0.1em;
	font-weight: 300;
}

.round-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.round-left {
  flex-shrink: 0;
}
.round-right {
  flex-shrink: 0;
  font-size: 80%;
}

.ends-in {
	font-size: 90%;
	padding-bottom: 1em;
}

.update-ts {
	font-size: 80%;
}

.countdown-txt {
	font-size: 80%;	
}

/*========================================*/
/*========== TEAM LOGO AND NAME ==========*/
/*========================================*/

.grid-logo-area {
	display: grid;
	grid-template-columns: 40px minmax(0, 300px);
	grid-gap: 1em;
	grid-template-rows: 40px;
}
.grid-logo-area>div:nth-child(2) {
	color: #000;
	letter-spacing: 0.1em;
	line-height: 1em;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 500;
	margin-top: auto;
	margin-bottom: auto;
}

/*=====================================*/
/*========== OVERVIEW BUTTON ==========*/
/*=====================================*/

.seasonButton {
	background-color: #3d6fe4;
	border: none;
	color: white;
	padding: 5px 10px;
	cursor: pointer;
	font-size: 90%;
	transition: all 0.2s ease-in-out;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.seasonButton i {
  margin-left: 20px;
}
.seasonButton:hover {
	transform: scale(1.05);
}

/*==================================*/
/*========== SELECT ROLES ==========*/
/*==================================*/

.role-container {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: minmax(24px, auto);
	grid-row-gap: 1em;
}
.role {
	display: grid;
	grid-template-columns: 60px minmax(0, 300px);
	grid-template-rows: auto;
	padding: 5px;
	border-radius: 4px;
}
.role-occupied {
	background-color: #e8e8e8;
	border: 1px solid #EAEAEA;
}
.role-vacant {
	border: 1px solid #59AAEF;
	cursor: pointer;
}
.role-selected {
	border: 1px solid #59AAEF;
	background-color: #E7F4FF;
}
.team-member-name {
	font-size: 1.1em;
	font-weight: 700;
	padding-bottom: 2px;
	height: 20px;
}
.role-number {
	margin: auto;
	font-size: 1.5em;
}
.prepare-info {
	max-width: 300px;
	margin-bottom: 2em;
}

#startButton {
	margin-top: 2em;
}

/*==============================*/
/*========== CALENDAR ==========*/
/*==============================*/

.wrapper-outer {
	width:100%;
	display: flex;
	justify-content: center;
}
.wrapper {
	width: 450px;
}
.wrapper header {
	display: flex;
	align-items: center;
	padding-bottom: 10px;
	justify-content: space-between;
}

header .icons {
	display: flex;
}
header .icons span {
	height: 38px;
	width: 38px;
	margin: 0 1px;
	cursor: pointer;
	color: #878787;
	text-align: center;
	line-height: 38px;
	user-select: none;
	border-radius: 50%;
}
.icons span:last-child {
	margin-right: -10px;
}
header .icons span:hover {
	/*background: #f2f2f2;*/
}
header .current-date{
	letter-spacing: 0.2em;
	font-size: 1.05rem;
	font-weight: 500;
}
.calendar{
	padding-bottom: 20px;
}
.calendar ul{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	text-align: center;
}
.calendar .days{
	margin-bottom: 20px;
}
.calendar li{
	color: #333;
	width: calc(100% / 7);
	font-size: 0.9rem;
}
.calendar .weeks li {
	font-weight: 500;
	cursor: default;
}
.calendar .days li {
	z-index: 1;
	position: relative;
	margin-top: 30px;
}
.days li.inactive {
	color: #DCDCDC;
}
.days li.active {
	color: #fff;
}
.days li::before {
	position: absolute;
	content: "";
	left: 50%;
	top: 50%;
	height: 30px;
	width: 30px;
	z-index: -1;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
.days li.active::before {
	background: #9B59B6;
}
.days li.timeslot1::before {
	background: #FFCCCC;
}
.days li.timeslot2::before {
	background: #FFE5CC;
}
.days li.timeslot3::before {
	background: #FFFFCC;
}
.days li.timeslot4::before {
	background: #CCFFCC;
}
.days li.timeslot5::before {
	background: #CCE5FF;
}
.days li.timeslot6::before {
	background: #E5CCFF;
}
.days li.mark-today::before {
	border: 2px solid #000;
}

.slot1-icon { color: #FFCCCC; }
.slot2-icon { color: #FFE5CC; }
.slot3-icon { color: #FFFFCC; }
.slot4-icon { color: #CCFFCC; }
.slot5-icon { color: #CCE5FF; }
.slot6-icon { color: #E5CCFF; }

/*=====================================*/
/*========== COACH OVERVCIEW ==========*/
/*=====================================*/

.grid-league-dashboard {
	display					: grid;
	grid-template-columns	: minmax(0, auto) minmax(30px, 50px) repeat( 6, minmax(50px, 1fr)) minmax(30px, 50px);
	grid-template-rows		: minmax(0px, 50px) repeat( var(--teams), minmax(0px, 50px));
	grid-gap				: 10px;
	overflow-x				: auto;
}

.league-icon-center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.league-name-center {
    display: grid;
    align-items: center;
}

.league-dashboard-std {
    position: relative;
    /*border: 1px solid grey;*/
    border-radius: 2px;
    cursor: pointer;
	background: #007bff;
	color: #fff;
}

.league-dashboard-info {
    position: relative;
}

.league-exercise-other {
    padding: 5px 10px;
    border-radius: 2px;
}

.league-exercise-completed {
    background: #4CAF50;
    color: #fff;
}

.league-exercise-noshow {
    background: #FF4C4C;
    color: #fff;
	user-select: none;
}

.league-exercise-inprogress {
    background: #FFC107;
    color: #fff;
	user-select: none;
}