@import url('https://fonts.googleapis.com/css?family=Exo+2:300,300i,500,500i');

:root {
  --main-color: #fff;
  --hover: rgba(200,200,200,1);
  --hover-controls: rgba(255,255,255,0.1);
  --green-color: #3b7538;
  --orange-color: #f26522;
  --blue-color: #0054a6;
}

body {
  height: 100%;
}

#app {
  font-family: 'Exo 2', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: var(--main-color);
  margin: 0;
  background-image: url(../imgs/arenas/DFHStadium.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-height: 100%;
}

::-webkit-scrollbar {
  display: none;
}

.control-bar {
  background-color: var(--green-color);
  height: 2.5rem;
  filter: drop-shadow(0 0 0.5rem rgba(0,0,0,1.0));
  margin-bottom: 30px;
}

.logo {
  width: 4rem;
  height: 4rem;
  padding: 0.5rem;
  filter: drop-shadow(0 0 0.5rem rgba(0,0,0,0.6));
}

.title {
  font-size: 1.5rem;
  position: absolute;
  top: 0.5rem;
  left: 5rem;
}

.team-entries {
  min-height: 220px;
  padding: 5px;
}

.team-card {
  position: relative;
}

.team-label {
  position: absolute;
  bottom: 10px;
  color: white;
  opacity: 0.4;
}

.bot-card {
  margin: 5px;
  cursor: move;
}

.center-flex {
  display: flex;
  align-items: center;
}

.bot-name {
  flex-grow: 1;
}

.bot-name:last-child {
  padding-right: 10px;
}

.secret-button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: inherit;
  outline: none;
}

.secret-button:focus {
  background-color: rgba(0, 0, 0, 0.07);
}

#teamSwitcher .md-switch-thumb {
  background-color: var(--blue-color);
}

#teamSwitcher .md-switch-container {
  background-color: rgba(0, 84, 166, 0.5);
}

#teamSwitcher .orange .md-switch-thumb {
  background-color: var(--orange-color);
}

#teamSwitcher .orange .md-switch-container {
  background-color: rgba(242, 101, 34, 0.5);
}

#teamSwitcher .md-switch-container:focus-within {
  background-color: var(--hover)
}

.md-card.bot-pool, .md-card.team-card, .md-card.settings-card {
  margin: 10px;
}

#app .md-card .md-card-header {
  padding: 5px;
}

#app .bot-pool, #app .settings-card {
  background-color: #eee;
}

.bot-pool .bot-card {
  display: inline-flex;
}

.bot-pool .bot-filter {
  margin-top: -10px;
  margin-bottom: -20px;
  min-width: 150px;
  margin-left: 20px;
}

.bot-card img {
  height: 1.5rem;
  margin: 3px;
}

.filtered {
  opacity: 0.2;
}

.bot-card img.darkened {
  filter: brightness(50%);
}

.org .bot-card img.darkened {
  filter: brightness(0%) invert(50%) sepia(25%) saturate(7482%) hue-rotate(350deg) brightness(102%) contrast(90%);
}

.blu .bot-card img.darkened {
  filter: brightness(0%) invert(17%) sepia(78%) saturate(3372%) hue-rotate(198deg) brightness(96%) contrast(101%);
}

.org .bot-card {
  color: var(--orange-color);
}

.blu .bot-card {
  color: var(--blue-color);
}

#app .org {
  color: var(--orange-color);
  background-color: var(--orange-color);
}

#app .blu {
  color: var(--blue-color);
  background-color: var(--blue-color);
}

.md-menu-content {
  z-index: 10;
}

.bot-card .bot-hover-reveal {
  filter: opacity(20%);
}

.bot-card:hover .bot-hover-reveal {
  filter: opacity(100%);
}

.bot-info-key {
  font-weight: bold;
}

#app .warning-icon, #app .warning-icon .md-icon {
  color: #f5b700;
}

#rlbotgui a {
  color: #4691af;
}

#rlbotgui .bot-pool-adder {
  vertical-align: top;
  margin-left: 20px;
  margin-top: 5px;
}

.bot-file-path {
  color: #939393;
  font-size: 9pt;
  font-weight: normal;
}

.bot-logo {
  float:right;
  margin-left: 10px;
  margin-top: 15px;
  margin-bottom: 10px;
  max-width: 250px;
}

.md-dialog{
  width:80%;
}


#appearance-editor-dialog {
  z-index: 5;
  position: fixed;
  height: 100%;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: scroll;
}

.appearance-editor-table .md-field {
  margin: 4px 0 -9px;
}

.appearance-editor-table {
  width: 100%;
  border-spacing: 10px;
}

.appearance-editor-table td {
  width: 50%;
}

.appearance-editor-table .md-field {
  padding-left: 15px;
  border-radius: 3px 3px 0 0;
}

.paint-color.black input.md-input {-webkit-text-fill-color: #dddddd !important;}
.paint-color.burntsienna input.md-input {-webkit-text-fill-color: #882104 !important;}
.paint-color.cobalt input.md-input {-webkit-text-fill-color: #3f51b5 !important;}
.paint-color.crimson input.md-input {-webkit-text-fill-color: #d50000 !important;}
.paint-color.forestgreen input.md-input {-webkit-text-fill-color: #199e1e !important;}
.paint-color.grey input.md-input {-webkit-text-fill-color: #3d3d3d !important;}
.paint-color.lime input.md-input {-webkit-text-fill-color: #5ebd00 !important;}
.paint-color.orange input.md-input {-webkit-text-fill-color: #ff9d00 !important;}
.paint-color.pink input.md-input {-webkit-text-fill-color: #ff4081 !important;}
.paint-color.purple input.md-input {-webkit-text-fill-color: #9c27b0 !important;}
.paint-color.saffron input.md-input {-webkit-text-fill-color: #ffd000 !important;}
.paint-color.skyblue input.md-input {-webkit-text-fill-color: #03a9f4 !important;}
.paint-color.titaniumwhite input.md-input {-webkit-text-fill-color: #929292 !important;}

.paint-color.black {background-color: #111;}
.paint-color.black span {color: #dddddd; font-weight: bold;}
.paint-color.burntsienna {background-color: #ffc2b1;}
.paint-color.burntsienna span {color: #882104; font-weight: bold;}
.paint-color.cobalt {background-color: #ccd3ff;}
.paint-color.cobalt span {color: #3f51b5; font-weight: bold;}
.paint-color.crimson {background-color: #ffcece;}
.paint-color.crimson span {color: #d50000; font-weight: bold;}
.paint-color.forestgreen {background-color: #aae7ac;}
.paint-color.forestgreen span {color: #199e1e; font-weight: bold;}
.paint-color.grey {background-color: #cacaca;}
.paint-color.grey span {color: #3d3d3d; font-weight: bold;}
.paint-color.lime {background-color: #f3ffd2;}
.paint-color.lime span {color: #5ebd00; font-weight: bold;}
.paint-color.orange {background-color: #fff3d3;}
.paint-color.orange span {color: #ff9d00; font-weight: bold;}
.paint-color.pink {background-color: #ffcdde;}
.paint-color.pink span {color: #ff4081; font-weight: bold;}
.paint-color.purple {background-color: #e2b4eb;}
.paint-color.purple span {color: #9c27b0; font-weight: bold;}
.paint-color.saffron {background-color: #fffce2;}
.paint-color.saffron span {color: #ffd000; font-weight: bold;}
.paint-color.skyblue {background-color: #c4ecff;}
.paint-color.skyblue span {color: #03a9f4; font-weight: bold;}
.paint-color.titaniumwhite {background-color: #fff;}
.paint-color.titaniumwhite span {color: #929292; font-weight: bold;}

.colorpicker-menu {
  max-width: 1000px;
}

.colorpicker-menu .md-list {
  padding: 5px;
}

.colorpicker-menu td {
  padding: 0;
}

.colorpicker-color {
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.colorpicker-color:hover {
  border: 2px solid rgba(255, 255, 255, 0.74);
}

.selected-color {
  border: 2px dashed rgba(255, 255, 255, 0.897);
}