@font-face {
    font-family: 'regular';
    src: url('ProximaNova-Regular.ttf');
}
@font-face {
    font-family: 'bold';
    src: url('ProximaNova-Bold.ttf');
}

:root {
    --bg-color: #FFF;
    --font-color: #000;
    --main-color: #F00;
    --main-color-10: #F002;
    --main-radius: 0.5em;
}

html,
body {
	margin: 0;
	padding: 0;
    height: 100%;
	font-size: 17px;
}

body {
    display: flex;
	flex-direction: column;
    background-color: var(--bg-color);
    color: var(--font-color);
    font-family: 'regular';
    text-align: center;
}


.contentRoot{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.gameSelectTeam_teams, .teamSelectRacers_racers, .gameSelectTeam_teamRoot, .gameResult_table{
    width:max-content;
    margin: 0 auto;
}
.gameSelectTeam_team, .teamSelectRacers_racer{
    display: flex;
    flex: 1 1 auto;
    margin: 1em 0;
    text-decoration: none;
    color: var(--font-color);
    border-radius: var(--main-radius);
    overflow: hidden;
}
.gameSelectTeam_teamLogo, .teamSelectRacers_racerPhoto{
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 5em;
    height: 5em;
    flex: 0 0 auto;
}
.gameSelectTeam_teamCaption, .teamSelectRacers_racerCaption{
    flex: 1 1;
    border-style: solid;
    border-width: 0 0 1em 0;
    display: flex;
    align-items: center;
    padding: 0 1em;
    font-family: 'bold';
}

.teamSelectRacers_racer{
    cursor: pointer;
}
.teamSelectRacers_racerSelected{
    background: #0F0;
}
.teamSelectRacers_racerDisabled, .teamSelectRacers_racersLimit .teamSelectRacers_racer:not(.teamSelectRacers_racerSelected) {
    opacity: 0.5;
    cursor: default;
}

.topSettingsButton {
    position: fixed;
    top: 1em;
    left: 1em;
    width: 1em;
    height: 1em;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.3s ease;

    -webkit-mask-image: url('icon_settings.svg');
    mask-image: url('icon_settings.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    background-color: var(--main-color);
}
.topSettingsButton:hover {
    opacity: 1;
}

.stageStatusSettings_engineSelectRoot, .stageStatusSettings_transmissionSelectRoot, .stageStatusSettings_downforceSelectRoot, .stageStatusQualificationResults_downforceSelectRoot {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    justify-content: center;
}
.stageStatusSettings_engineSelectItem, .stageStatusSettings_transmissionSelectItem, .stageStatusSettings_downforceSelectItem, .stageStatusQualificationResults_downforceSelectItem {
    flex: 0 0 auto;
    cursor: pointer;
    opacity: 0.5;
    padding: 0.5em;
}
.stageStatusSettings_engineSelectItem.selected, .stageStatusSettings_transmissionSelectItem.selected, .stageStatusSettings_downforceSelectItem.selected, .stageStatusQualificationResults_downforceSelectItem.selected {
    background-color: var(--main-color);
    opacity: 1;
    cursor: default;
}

.stageStatusSettings_engineSelectCaption, .stageStatusSettings_transmissionSelectCaption, .stageStatusSettings_downforceSelectCaption, .stageStatusQualificationResultss_downforceSelectCaption{
    margin-top:1em;
    font-family: 'bold';
    margin-bottom:0.5em;
}
.stageStatusSettings_racerCaption, .stageStatusQualification_racerCaption, .stageStatusQualificationResults_racerCaption{
    font-size: 1.2em;
    font-family: 'bold';
}

.stageStatusQualification_blocksRoot{
    width: max-content;
    margin: 0 auto;
}
.stageStatusQualification_block{
    margin: 0.5em;
    padding: 0.5em;
    border: 1px solid var(--main-color);
}
.stageStatusQualification_blockCaption{
    font-family: 'bold';
}

.stageStatusQualification_racerRoot, .stageStatusSettings_racerRoot, .stageStatusQualificationResults_racerRoot, .stageStatusMain_racerRoot{
    margin: 0 auto;
    width: fit-content;
    margin-top: 2em;
    margin-bottom: 2em;
}
.stageStatusQualification_engineSelectedRoot, .stageStatusQualification_transmissionSelectedRoot, .stageStatusQualification_downforceSelectedRoot,
.stageStatusQualificationResults_engineSelectedRoot, .stageStatusQualificationResults_transmissionSelectedRoot, .stageStatusQualificationResults_downforceSelectedRoot
.stageStatusMain_engineSelectedRoot, .stageStatusMain_transmissionSelectedRoot, .stageStatusMain_downforceSelectedRoot {
    display: flex;
    justify-content: space-between;
}
.stageStatusQualification_engineSelectedCaption, .stageStatusQualification_transmissionSelectedCaption, .stageStatusQualification_downforceSelectedCaption,
.stageStatusQualificationResults_engineSelectedCaption, .stageStatusQualificationResults_transmissionSelectedCaption, .stageStatusQualificationResults_downforceSelectedCaption,
.stageStatusMain_engineSelectedCaption, .stageStatusMain_transmissionSelectedCaption, .stageStatusMain_downforceSelectedCaption{
    margin-right: 1em;
    font-family: 'bold';
}

.stageStatusQualificationResults_table{
    margin: 0 auto;
}
.stageStatusQualificationResults_timeValue{
    margin: 0.1em;
    font-family: 'bold';
    font-size: 2.5em;
}
.stageStatusQualificationResults_downforceFoul{
    color:#F00;
    font-size: 0.8em;
}

.stageStatusMain_movesRoot{
    display: flex;
}
.stageStatusMain_moveItem{
    flex:1 1;
    font-size: 3em;
    padding: 0.3em;
    cursor: pointer;
}
.moveItemDisabled{
    cursor: default;
    opacity: 0.3;
}




.bodyMonitor{
    overflow: hidden;
}
.monitorStageMapRoot, .monitorStageMap_content, .monitorStageMap_contentInner, .monitorStageMap_mapRoot, .bodyMonitor #app{
    height: 100%;
    overflow: hidden;
}
#monitorStageMap_map{
    width:100%;
    height: 100%;
}