.team-selection--options {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
}

.team-selection--section {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
}

.team-selection--label {
    font-weight: 600;
    margin-right: 10px;
}

.team-selection--icon {
    height: 35px;
    width: 35px;
    background-size: contain;
    margin-right: 5px;
    border: 1px solid #939393;
    border-radius: 4px;
}

.team-selection--icon:hover, .team-selection--icon:focus {
    border: 1px solid #232e3c;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 1px 3px 0 rgb(45 50 56 / 15%), 0 0 0 1px rgb(45 50 56 / 5%);
}

.team-selection--field-position {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    border: 1px solid #ccc;
    min-height: 2.5rem;
    margin-bottom: 5px;
    align-items: center;
    padding: 5px;
    border-radius: 6px;
}

.team-selection--bench-position {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    border: 1px solid #ccc;
    min-height: 2.5rem;
    margin-bottom: 5px;
    align-items: center;
    padding: 5px;
    border-radius: 6px;
    background: rgb(236, 236, 236);
}

.selection-player--controls {
    width: 50px;
}

.selection-player--details-section {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: center;
}

.selection-player--injury-section {
    /* width: 100%; */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    padding: 3px 10px 3px 5px;
    background: #dceb00;
    border: 1px solid #41bd95;
    border-radius: 13px;
    margin-left: 1rem;
    font-size: 0.875rem;
}

.selection-player--injury-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm0-8h2v6h-2V7z'/%3E%3C/svg%3E");
    background-size: contain;
    content: '';
    height: 16px;
    width: 16px;
    margin-right: 10px;
}

.selection-player--injury-duration {
    margin-left: 1rem;
}

.selection-player--name {
    font-weight: 600;
    margin-right: 1rem;
}

.selection-player--position {
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #85edcb;
    border-radius: 4px;
}

.team-selection--bench-position .selection-player--position {
    background: #971737;
    color: white;
}

.selection-player--name {
    min-width: 20%;
}

.selection-player--score {
    min-width: 20%;
}

.team-selection--field-position .selection-player--position-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-.997-6l7.07-7.071-1.414-1.414-5.656 5.657-2.829-2.829-1.414 1.414L11.003 16z' fill='rgba(47,204,113,1)'/%3E%3C/svg%3E");
    height: 16px;
    width: 16px;
    background-size: contain;
}

.team-selection--bench-position .selection-player--position-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z' fill='rgba(231,76,60,1)'/%3E%3C/svg%3E");
    height: 16px;
    width: 16px;
    background-size: contain;
}

.dragging * {
    pointer-events: none;
}

/* ----------------------------- SINGLE PAGE CHOOSER */

div#team-chooser {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /* margin-bottom: 2rem; */
}

#team-chooser .ui-text-option {
    font-size: 12px;
    margin-left: 0;
    margin-right: 10px;
    margin-bottom: 10px;
}

div#team-chooser.selection-made div {
    opacity: 0.3;
}

div#team-chooser.selection-made div.selection-active-team {
    opacity: 1;
    border: 1px solid #000;
}

div#teamselection {
    min-height: 400px;
    background: rgb(235,235,235);
}

.selection-player {
    -webkit-user-drag: element;
    user-select: none;
    display: flex;
    border-bottom: 1px solid #ccc;
    min-height: 39px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    /* background: rgb(235 235 235); */
}

.selection-player:first-child {
    border-top: 1px solid #ccc;
}

.selection-player {
    background: rgb(255, 255, 255);
}

.selection-player:nth-child(n+8) {
    background: rgb(235,235,235);
}

.selection-player:first-child {
    border-top: 1px solid #ccc;
}

.selection-player * {
    pointer-events: none;
}

.selection-player.move-before {
    min-height: 37px;
    border-top: 2px solid #232e3c;
}

.selection-player.move-after {
    min-height: 37px;
    border-bottom: 2px solid #232e3c;
}

.on-the-move {
    background: #ccc;
    /* border: 1px solid rgb(59, 59, 59); */
}

.pulse {
    animation: pulse .25s infinite ease-in-out alternate;
    background-color: #41bd95;
  }
  @keyframes pulse {
    from { transform: scale(0.95); background-color: #8dfad7; }
    to { transform: scale(1.05); }
  }


  div#current-team-heading {
    margin-bottom: 1.5rem;
    font-weight: 600;
    font-size: 1.1rem;
}

.selection-player--position-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M6.455 19L2 22.5V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6.455zm-.692-2H20V5H4v13.385L5.763 17zm5.53-4.879l4.243-4.242 1.414 1.414-5.657 5.657-3.89-3.89 1.415-1.414 2.475 2.475z' fill='rgba(47,204,113,1)'/%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    background-size: contain;
    margin: 0 5px
}

div#current-team-heading {
    margin-bottom: 1.5rem;
    font-weight: 600;
    font-size: 1.1rem;
}

.selection-player--position-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-.997-6l7.07-7.071-1.414-1.414-5.656 5.657-2.829-2.829-1.414 1.414L11.003 16z' fill='rgba(47,204,113,1)'/%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    background-size: contain;
    margin: 0 5px
}

.selection-player:nth-child(n+8) .selection-player--position-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z' fill='rgba(149,164,166,1)'/%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    background-size: contain;
    margin: 0 5px
}

.selection-player.on-the-move .selection-player--position-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM7 9h2v4h2V9h2l-3-3.5L7 9zm10 6h-2v-4h-2v4h-2l3 3.5 3-3.5z'/%3E%3C/svg%3E");
}

/* SUBMIT BUTTON */

#submission-controls button {
    padding: 10px 15px;
    border: 1px solid #0cc55d;
    border-radius: 6px;
    margin-top: 1rem;
    background: #0cc55d;
    color: white;
    font-weight: 600;
    font-family: 'Saira Semi Condensed', sans-serif;
}

#submission-controls button:hover {
    border: 1px solid rgba(24, 133, 66, 0.87);
    cursor: pointer;
}

.success {
    background: #00e3b9;
    margin-top: 15px;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #008e79;
}

.failure {
    background: #b9002e;
    margin-top: 15px;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #520000;
    color: white;
}

button.team-submitting {
    background: #ccc;
    cursor: not-allowed !important;
    color: #666;
    animation: loading 2s infinite;
}

@keyframes loading {
  0%{
      border: 1px solid #000;
      background-color: #c7c7c7;
  }
  100%{
    background-color: #e2e2e2;
  }
}