:root {
    --color-bg: #DBF1F6;
    --color-font: #000;
    --color-font2: #373E5F;
    --color-main1: #B7E4ED;
    --color-main2: #424A6E;
    --color-main3: #38A798;
    --color-bg-header: #b7e4edcc;
    --radius: 2rem;
    --radius-small: 1rem;
    --max-content-width: 50rem;
    --logo-image: url('logo.svg');
    --shadow: 0 0 1em #424A6E44;
    --color-success: #31A76A;
    --color-danger: #F00;
}

@font-face {
    font-family: 'regular';
    src: url('CeraProRegular.ttf');
}
@font-face {
    font-family: 'bold';
    src: url('CeraProMedium.ttf');
}
@font-face {
    font-family: 'caption';
    src: url('CeraProBold.ttf');
}

.gameNotStarted_content, .gameOpened_content, .gameEnded_content, .captionFont{
    font-family: 'bold';
    text-transform: uppercase;
}

html,
body {
    height: 100%;
    font-size: 18px;
}
body {
    display: flex;
    background: url('bgGreen.svg') center center, var(--color-main1);
    background-size: 25rem;
    font-family: 'regular';
    color: var(--color-font);
    overflow: hidden;
}
#app{
    overflow: hidden;
}

a{
    color: var(--color-font)!important;
}

b{
    font-weight: normal;
    font-family: 'bold';
}
.topSpace {
    flex: 1 1 auto;
}
.bottomSpace {
    flex: 2 1 auto;
}
.observer_block{
    flex: 0 0 auto;
    font-size: 18px;
    text-align: center;
}
.observer_block select{
    padding: 5px;
    width: auto;
    font-size: 16px;
}

input,
#new_team_name_input,
select,
textarea,
.login_input {
    border: 0;
    box-sizing: border-box;
    outline: none;
    padding: 0.5em;
    width: 90%;
    background: var(--color-bg);
    font-family: 'regular';
    box-shadow: inset var(--shadow);
    border-radius: var(--radius);
    text-align: center;
    font-size: 1.3em;
}
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('select_arrow.svg');
    background-repeat: no-repeat;
    background-position: right 1em center;
    background-size: 0.7em auto;
    padding-right: 2.2em;
    cursor: pointer;
}
input[type="checkbox"], .dishDiagnosticContent select {
    width: auto;
    flex: 0 0 auto;
}
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.2em;
    height: 1.2em;
    border-radius: 3px;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    transition: box-shadow 0.2s;
}
input[type="checkbox"]:checked {
    background: url('checkbox_checked.svg') center center/contain no-repeat;
}
input[type="checkbox"]:not(:checked) {
    background: url('checkbox_unchecked.svg') center center/contain no-repeat;
}

textarea{
    min-height: 7em;
}

.mainButton,
.login_button,
#loginSubmit {
    background: var(--color-main2);
    color: var(--color-bg);
    border: 0;
    box-sizing: border-box;
    width: 90%;
    margin: 0 auto;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    border-radius: var(--radius);
    padding: 1em;
    text-transform: uppercase;
    font-family: 'bold';
}
.mainButtonDisabled{
    opacity: 0.8;
    color: #0006;
    box-shadow: inset var(--shadow);
    cursor: default;
}
.smallButton{
    width: fit-content;
    padding: 0.5em 1em ;
}

.buttonsRoot{
    width: 100%;
    max-width: var(--max-content-width);
    gap: 0.5em;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
}
.buttonsRoot .mainButton{
    margin: 0.5em auto;
}

.badTimer{
  /*  color:#F55;*/
    font-family: 'bold';
}
.contentRoot, .tabMainRoot{
    flex: 1 1 auto;
    margin: auto;
    width: 98%;
    max-width: var(--max-content-width);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.bodyMonitor .contentRoot {
    max-width: 100%;
}

.tabMainRoot, .gameTabContentRoot{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0.25em auto;
    background: linear-gradient(to left top, var(--color-bg), #FFF);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 5px solid #FFF;

}

.bodyLoginInner, .gameNotStartesRoot, .gameResultRoot, .gameEndedRoot, .gameLoginRoot, .gameRulesRoot, .blockContentRoot, .gameResult_content{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.gameNotStartesRoot, .gameEndedRoot{
    font-size: 1.75em;
    justify-content: center;
    text-transform: uppercase;
    text-align: center;
    font-family: 'bold';
    text-transform: uppercase;
    margin: 0 auto;
    padding: 1em;
}
.loginContent, .gameLogin_content, .gameTeamSelect_content, .createGameModalContentRoot, .selectToolsRoot .modal .modal-content, .user-name-modal .modal-content, .editCustomCompanyContent{
    background: linear-gradient(to top, var(--color-bg), #FFF);
    border-radius: var(--radius);
    border: 7px solid #FFF;
    margin: 1em auto;
    box-shadow: var(--shadow);
    max-width: 100%;
    width: var(--max-content-width);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.loginContent {
    flex: 1 1 auto;
    padding-bottom: 1em;
}

.createGameSection #createGameSubmit {
    margin-top: 1em;
}
.gameMain_stageOpened, .gameMain_stageNotOpened{
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    text-align: center;
    font-family: 'bold';
    text-transform: uppercase;
}
.gameMain_stageRulesRoot{
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
    box-sizing: border-box;
}
.scrollable_content{
    flex:1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 1em;
    min-height: 10em;
    box-sizing: border-box;
    overflow-wrap: break-word;
}
.loginContent, .gameTeamSelect_content, .createGameModalContentRoot{
    gap: 1em;
    padding: 1em;
    width: 98%;
    max-width: 30em;
    text-align: center;
    box-sizing: border-box;
}
.gameTeamSelect_contentInner_items, .createGameModalFooter, .createGameModalContent, .user-name-modal .modal-content  {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.gameTeamSelect_contentInner_item_users {
    font-family: 'regular';
    font-size: 0.7em;
    margin-top: 0.5em;
}
.createGameModalContentRoot input, .createGameModalContentRoot select{
    width: 100%;
}
.scrollable_top_bottom_space{
    flex: 1 1 auto;
}
.headerRoot, .footerMenuRoot{
    max-width: 100%;
    background: linear-gradient(to bottom, var(--color-bg-header) 90%, transparent);
    width: var(--max-content-width);
    margin: 0 auto;
    overflow: auto;
    flex: 0 0 auto;
}
.footerMenuRoot{
    background: linear-gradient(to top, var(--color-bg-header) 90%, transparent);
}

.headerRow{
    display: flex;
    gap: 0.5em;
    align-items: center;
}
.headerMetricsRoot{
    display: flex;
    gap: 0em;
    margin: 0 auto;
    text-align: center;
}
.headerMetricsRoot .headerColumn {
    height: 100%;
}
.headerColumnDisabled {
    opacity: 0.5;
    filter: blur(1px);
}
.headerRowRecalcWarning {
    font-size: 0.8em;
    color: #c0392b;
    text-align: center;
    margin-top: -0.5em;
    justify-content: center;
}
.headerMetricsItemCaption{
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    overflow-wrap: anywhere;
    font-size: 0.85em;
}

.headerMetricsItemValue {
    background-color: var(--color-main3);
    color: #FFF;
    padding: 0.25em 0.5em;
    border-radius: var(--radius);
    font-family: 'caption';
    font-size: 1.2em;
    text-transform: uppercase;
    text-align: center;
}

.timerDiv {
    font-size: 1.2em;
    text-align: center;
    color: var(--color-bg);
}
.timerNotActive{
    display: none;
}

div.swiper {
    flex: 1 1 auto;
    overflow: hidden;
    margin: 0 0 0.5em;
}
.swiper-horizontal div.swiper-button-prev, .swiper-horizontal  div.swiper-button-next {
    width: 1em;
}

.swiperNavWrap {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.swiperNavWrap .swiper {
    margin: 0;
}
.swiperNavBtn {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    width: 2em;
    height: 10em;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-main3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swiperNavBtn::before {
    content: '';
    width: 1.5em;
    height: 5em;
    background-color: currentColor;
    -webkit-mask: url(swiper_nav_arrow.svg) center / contain no-repeat;
    mask: url(swiper_nav_arrow.svg) center / contain no-repeat;
}
.swiperNavPrev {
    left: 0.15em;
}
.swiperNavNext {
    right: 0.15em;
}
.swiperNavNext::before {
    transform: scaleX(-1);
}
.swiperNavBtn.swiper-button-disabled {
    opacity: 0.25;
    cursor: default;
}
.swiperNavBtn:not(.swiper-button-disabled):active {
    transform: translateY(-50%) scale(0.92);
}

div.swiper-slide{
}

.headerRoot{
    display: flex;
    flex-direction: column;
    color: var(--color-font2);
    font-family: 'caption';
}
.headerColumn{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.5em;
    box-sizing: border-box;
    gap:0.25em;
}
.headerColumnTimer{
    flex: 0 0 auto;
    min-width: 7em;
    display: none;
}
.headerTeamCaption{
    font-size: 2em;
    margin: 0.25em;
    text-transform: uppercase;
}
.headerCapRoot{
    text-align: center;
}
.headerCapRoot .mainButton{
    font-size: 0.8em;
    margin-top: 0.5em;
}

.headerTimerRoot{
    display: flex;
    gap:0.5em
}

.headerTimerRoot .timerDiv{
    flex: 1 1 auto;
    border: 1px solid var(--color-bg);
    border-radius: 0.4rem;
    font-size: 1.4em;
}
.headerTimerRoot .timerNotActive{
    display: block;
}
.headerTimerRoot .timerNotActive .timerDivInner{
    visibility: hidden;
}

.gameOpened_content_inner{
    text-align: center;
}
.gameOpened_content_inner .gameCode, .gameTeamSelectRoot .gameCode {
    font-family: 'bold';
    font-size: 2em;
    text-transform: uppercase;
    margin: 0.5em 0;
}
.headerColumnCap{
    flex: 1 1 auto;
}
div.headerCapButton{
    width:fit-content;
    border-radius: var(--radius);
    border: 2px solid var(--color-font2);
    font-size: 1.5em;
    padding: 0.25em 0.5em;
    margin: 0 0 0 auto;
}
div.headerCapButtonInner{
    background-image: url(icon_cap.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    padding-left: 1.5em;
    margin: 0 auto;
    width: fit-content;
}
.headerCapYou{
    background-image: url(icon_cap.svg);
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: left center;
    padding-left: 1.5em;
    width: fit-content;
    font-size: 1.2em;
    white-space: nowrap;
}

.footerMenuRoot{
    display: flex;
}
.footerMenuItem{
    flex: 1 1;
    border: 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    border-radius: var(--radius-small);
    margin: 0.25em 0;
    padding: 0.25em;
    color: var(--color-font2);
    display: flex;
    flex-direction: column;
}
.footerMenuIcon {
    flex: 0 0 auto;
    height: 3.5em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80% 80%;
}
.footerMenuText {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1em;
}
.footerMenuIconControl{ background-image: url(icon_control.svg); }
.footerMenuIconMain{ background-image: url(icon_main.svg); }
.footerMenuIconActions{ background-image: url(icon_actions.svg); background-size: 85% 85%; }
.footerMenuIconEvents{ background-image: url(icon_events.svg); }
.footerMenuIconRisks{ background-image: url(icon_risks.svg); background-size: 90% 90%; }
.footerMenuIconCompany{ background-image: url(icon_company.svg); background-size: 90% 90%; }
.footerMenuIconHelp{ background-image: url(icon_help.svg); }
.footerMenuItemActive{
    background-color: var(--color-main3);
    color: #FFF;
    cursor: default;
    box-shadow: var(--shadow);
}
.gameMainRoot{
    flex: 1 1 auto;
    display: flex;
    height: 100%;
    position: relative;
}
.gameMain_content{
    display: flex;
    flex: 1 1 auto;
    height: 100%;
    position: relative;
}

@keyframes pulse {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
    }
    100% {
      opacity: 1;
    }
}

* {
    scrollbar-color: var(--color-main2) transparent;
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 5px;
    background-color: transparent;
   /* border-radius: 10px;*/
}

*::-webkit-scrollbar-thumb {
    background-color: var(--color-main2);
 /*   border-radius: 10px;*/
}

.loginContent {
    flex: 1 1 auto;
    padding-bottom: 2em;
    font-size: 1.2em;
}
.createGameModalContentRoot, .gameTeamSelect_content {
    font-size: 1.2em;
}
.loginLogoOuter{
    background: var(--logo-image)  center center;
    background-size: 90%;
    background-repeat: no-repeat;
    width: 12em;
    max-width: 100%;
    height: 12em;
    margin: 1em auto 0;
    flex: 0 0 auto;
    border-radius: 100%;
}
.loginLabel{
    font-family: 'bold';
}

hr {
    border: 2px solid var(--color-main1);
    width: 70%;
    margin: 1em auto;
}
.loginContent hr {
    margin: 2em auto 1em;
}

.flexHiddenBlock, .teamSelectCompanyRoot, .teamSelectCompany_companyContent, .teamSelectCompany_companyContent, .editCustomCompanyContent, .editCustomCompanyRoot  {
    overflow: hidden;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}
.editCustomCompanyRoot {
    padding: 0.5em;
}
.swiper-slide.teamSelectCompany_companyRoot {
    overflow: hidden;
}

.modalRoot {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: color-mix(in srgb, var(--color-main1) 85%, transparent);
    backdrop-filter: blur(2px);
    z-index: 1000;
}

.createGameModalContentRoot{
    height: auto;
    flex: 0 0 auto;
    max-height: 90%;
}

.editCustomCompanyContent input:not([type="checkbox"]), .editCustomCompanyContent textarea {
    width: 100%;
}
.editCustomCompanyContent .mainButton {
    margin: 0 auto;
}
.editCustomCompanyContent .buttonsRoot {
    margin-bottom: 0.5em;
}
.editCustomCompanyStrategy label, .editCustomCompanyChallenge label {
    display: flex;
    gap: 0.5em;
    align-items: center;
}
.companyContentRoot{
    display: flex;
    gap: 0.5em;
    flex-direction: column;
}
.mainUserControl_content_inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.userConnectInfoCollapsibleContent{
    padding-bottom: 1em;
    border-bottom: 2px solid var(--color-main1);
    margin-bottom: 1em;
    font-size: 0.8em;
}
.mainUserControl {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mainUserControlQR_contentInner{
    width: 15em;
    height: 15em;
    max-width: 80%;
    margin: 0 auto;
}

.mainUserControlQR_contentInner svg{
    width: 100%;
    height: 100%;
}

.alertText{
    color: red;
}
.teamSelectTown_townBusy{
    opacity: 0.5;
}

.teamSelectTown_townSelected, .teamSelectCompany_companySelected, .stepTeamCaptionSelected{
    border-radius: var(--radius);
}


.teamActionApprovedStatus, .teamActionRejectedStatus, .teamActionOnApproveStatus, .createGameModalContentTitle, .gameTeamSelect_contentInner_title , .stepTeamTitle, .bestToolsListTitle, .toolsFoulListTitle, .toolsSuccessListTitle {
    font-family: 'bold';
    font-size: 1.5em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.5em;
}

.companyStatusCaption, .townStatusCaption {
    font-family: 'caption';
    font-size: 1.3em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.5em 1em;
    margin: 0.5em auto;
    background: url(checkmark.svg) no-repeat right center var(--color-success);
    background-size: 2em;
    color: #FFF;
    width: fit-content;
    padding-right: 2.5em;
    border-radius: var(--radius);
}
.selectToolCardCaption, .selectRiskCardCaption, .selectOpportunityCardCaption {
    font-family: 'bold';
    text-align: center;
    padding: 0.5em;
    font-size: 1.2em;
}
.toolItemCodeRoot input:disabled, .selectToolCodeRoot input:disabled, .selectRiskOpportunityCodeRoot input:disabled {
    background: transparent;
    box-shadow: none;
    border: 1px solid var(--color-main2);
}

.userConnectInfoCollapsibleHeader{
    font-size: 0.8em;
    font-family: 'bold';
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.userConnectInfoCollapsibleHeader::before{
    content: '';
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    background-color: currentColor;
    -webkit-mask: url(collapse_arrow.svg) center / contain no-repeat;
    mask: url(collapse_arrow.svg) center / contain no-repeat;
    transform: rotate(-90deg);
}
.userConnectInfoCollapsibleHeader.collapsed::before{
    transform: rotate(180deg);
}

.bottomButtonsRoot {
    display: flex;
    gap: 0.5em;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em;
}
.bottomButtonsRoot .mainButton{
    height: fit-content;
}
.mainButtonBack {
    background: red;
    font-size: 2em;
    width: 1.65em;
    padding: 0.15em;
    font-family: 'caption';
    margin: 0;
}

.needApproveText{
    font-size: 0.8em;
    color: red;
    padding: 0.5em;
    text-align: center;
}
.teamToolNotApproved, .teamRiskOpportunityNotApproved{
    opacity: 0.5;
}
.teamRiskOpportunityNeutralized .riskCardCaptionText{
    text-decoration: line-through;
}
.teamToolFoul{
    text-decoration: line-through;
}
.teamActionHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em;
}
.teamActionAction {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5em;
}
.mainUserControl .teamActionAction {
    flex-direction: column;
}
.teamActionAction .mainButton {
    width: auto;
    min-width: 0;
    margin: 0;
}

.teamSelectCompanyRoot .statusText,
.teamSelectTownRoot .statusText,
.selectToolsRoot .statusText,
.selectToolsResultsRoot .statusText,
.teamToolsRoot .statusText,
.teamRisksOpportunitiesRoot .statusText,
.teamGenerateActionsRoot .statusText {
    margin: 1em;
}
.selectToolsRoot .statusText {
    margin: 1em 0;
}

.teamToolsRoot .emptyListText,
.teamRisksOpportunitiesRoot .emptyListText,
.teamActionAIAnalysisResult .emptyListText {
    opacity: 0.45;
    text-align: center;
    margin: 1.5em 1em;
    padding: 1em;
}
.companyCaption, .townCaption, .teamActionCaption, .controlTeamActionCaption, .teamActionAIAnalysisResultCaption, .toolsListCaption, .gameResultsCaption {
    font-family: 'bold';
    font-size: 1.2em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 0.5em;
}
.teamActionCaption {
    margin: 0 auto 1em;
    position: relative;
}
.teamActionAIAnalysisResultCaption {
    margin-top: 1em;
}
.gameResults {
    margin: 1em 0;
}
.gameResultsMetrics {
    display: flex;
    gap: 0.75em;
    justify-content: center;
    flex-wrap: wrap;
    margin: 1em 0;
}
.gameResultsMetric {
    flex: 1 1 7em;
    max-width: 10em;
    text-align: center;
}
.gameResultsMetricCaption {
    font-size: 0.85em;
    margin-bottom: 0.35em;
}
.gameResultsMetricValue {
    background-color: var(--color-main3);
    color: #FFF;
    padding: 0.35em 0.5em;
    border-radius: var(--radius);
    font-family: 'caption';
    font-size: 1.4em;
    text-transform: uppercase;
}
.gameResultsMetricDelta,
.gameResultsMetricTarget {
    margin-top: 0.35em;
    font-size: 0.9em;
    color: var(--color-font2);
}
.gameResultsMetricDeltaPositive {
    color: var(--color-success);
}
.gameResultsMetricDeltaNegative {
    color: var(--color-danger);
}
.gameResultsTargetStatus {
    font-family: 'bold';
    font-size: 1.1em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.6em 1em;
    border-radius: var(--radius);
    color: #FFF;
    margin: 0.5em auto 0;
    width: fit-content;
    max-width: 100%;
}
.gameResultsTargetReached {
    background-color: var(--color-success);
}
.gameResultsTargetMissed {
    background-color: var(--color-danger);
}
.companyCaption, .townCaption {
    color: var(--color-main3);
    font-size: 1.75em;
    margin: 0.25em 0;
}
.controlSelectedCompanyCaption {
    text-align: center;
    font-size: 2em;
    font-family: 'bold';
    text-transform: uppercase;
    margin: 0.5em 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.toolsListCaption{
    margin-top: 0em;
}
.selectToolStepsRoot {
    margin-bottom: 1em;
}
.selectToolStepRoot{
    position: relative;
    padding-left: 1.6em;
}
.selectToolStepRoot::before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.1em;
    height: 1.1em;
    background-color: var(--color-main3);
    -webkit-mask: url(wait.svg) center / contain no-repeat;
    mask: url(wait.svg) center / contain no-repeat;
}
.selectToolStepRootCurrent{
    font-family: 'bold';
}
.selectToolStepRootCurrent::before{
    -webkit-mask-image: url(arrow-right.svg);
    mask-image: url(arrow-right.svg);
}
.selectToolStepRootEnd::before{
    -webkit-mask-image: url(done.svg);
    mask-image: url(done.svg);
}
.teamSelectCompany_companyContent .scrollable_content, .gameCompanyRoot .scrollable_content, .teamTownRoot .scrollable_content {
    gap: 0.5em;
    padding: 0 0.5em;
}
.teamSelectTown_townContent{
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.townContentRoot {
    text-align: center;
}
.companyTargetsCaption, .companyProblemsCaption {
    font-family: 'bold';
    text-transform: uppercase;
    font-size: 1.2em;
    margin: 0.5em 0;
}

.companyStrategyItem, .companyProblemItem, .selectToolsResultsItemCaption {
    margin-left: 1em;
    margin-top: 0.5em;
}
.teamSelectCompany_companyContent .companyStrategyItem,
.teamSelectCompany_companyContent .companyProblemItem {
    margin-left: 0;
    opacity: 0.55;
}
.teamSelectCompany_companyContent .companyStrategyItem.companyTargetItemSelected,
.teamSelectCompany_companyContent .companyProblemItem.companyTargetItemSelected {
    opacity: 1;
}
.teamSelectCompany_companyContent .companyStrategyItem label,
.teamSelectCompany_companyContent .companyProblemItem label {
    display: flex;
    gap: 0.5em;
    align-items: flex-start;
}
.selectToolsResultsItemCaption {
    position: relative;
    padding-left: 1.75em;
    margin-left: 0;
}
.selectToolsResultsItemCaption::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.1em;
    height: 1.1em;
    background-color: var(--color-success);
    -webkit-mask: url(done.svg) center / contain no-repeat;
    mask: url(done.svg) center / contain no-repeat;
}
.toolsFoulList .selectToolsResultsItemCaption::before {
    background-color: var(--color-danger);
    -webkit-mask: url(cross.svg) center / contain no-repeat;
    mask: url(cross.svg) center / contain no-repeat;
}

.townIdea1, .townIdea2, .townIdea3 {
    margin: 0.5em 0;
}
.townIdeaCaption{
    margin-bottom: 1em;
    font-size: 1.2em;
}
.townIdeaContentRoot{
    display: flex;
    gap: 0.5em;
    margin: 0.5em 0;
}
.townIdeaContent{
    align-items: center;
    font-family: 'bold';
    text-transform: uppercase;
    font-size: 1.2em;
}
.townIdeaIcon{
    flex: 0 0 auto;
    width: 3em;
    height: 3em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto 1em;
}
.gameCompanyRoot, .teamTownRoot {
    padding-top: 0.5em;
}
.toolItemDopInfo{
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    justify-content: space-between;
    font-style: italic;
    align-items: center;
    color: var(--color-main3);
}
.toolItemCategoriesRoot{
    flex: 0 0 auto;
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
    font-size: 0.8em;
}
.toolItemCostValue{
    font-family: 'caption';
}
.toolItemCategory {
    border-radius: var(--radius);
    border: 1px solid var(--color-main3);
    padding: 0.25em 0.5em;
    margin-top: 0.25em;
}
.toolItem{
    margin: 0.5em 0;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--color-main1);
}

.preText {
    white-space: pre-wrap;
}
.stepTeamCaption {
    padding: 0.25em;
}
.selectToolCodeRoot, .selectRiskOpportunityCodeRoot, .selectToolCardRoot, .selectRiskCardRoot, .selectOpportunityAnswerCardRoot {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    align-items: center;
    margin-bottom: 0.5em;
}
.selectToolCodeRoot input, .selectRiskOpportunityCodeRoot input {
    width: 6em;
}

.toolItemCodeRoot{
    display: flex;
    gap: 0.5em;
    align-items: center;
}
.toolItemCodeRoot .mainButton{
    padding: 0.8em 1em;
}
.toolItemCodeRootSelected{
    font-size: 0.6em;
}
.selectToolCardCost{
    font-style: italic;
    margin: 0.5em;
}
.editCustomCompanyLabel {
    margin: 0.5em;
    font-family: 'bold';
    font-size: 1.2em;
    text-transform: uppercase;
    text-align: center;
}
.editCustomCompanyStrategy,
.editCustomCompanyChallenge {
    margin-top: 1em;
}
.editCustomCompanyStrategy, .editCustomCompanyChallenge {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}
.riskCardRoot, .opportunityCardRoot{
    margin: 0.5em 0;
}
.riskCardDescrRoot, .opportunityCardDescrRoot{
    margin-top: 0.5em;
    margin-left: 1em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.opportunityCardBudgetValue {
    font-family: 'caption';
}
.opportunityCardAnswerCaption {
    font-family: 'bold';
}
.opportunityCardBudget {
    font-family: 'bold';
}
.riskCardCaption, .opportunityCardCaption{
    font-family: 'bold';
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
}
.riskCardCaption::before, .opportunityCardCaption::before{
    content: '';
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    background-color: currentColor;
    -webkit-mask: url(collapse_arrow.svg) center / contain no-repeat;
    mask: url(collapse_arrow.svg) center / contain no-repeat;
    transform: rotate(180deg);
}
.riskCardCaptionText, .opportunityCardCaptionText{
    flex: 1 1 auto;
}
.riskCardCaptionSelected::before, .opportunityCardCaptionSelected::before{
    transform: rotate(-90deg);
}
.riskCardCaptionTypeRisk, .opportunityCardCaptionTypeOpportunity {
    border-radius: var(--radius);
    border: 1px solid var(--color-success);
    padding: 0.25em 0.5em;
    font-size: 0.8em;
    color: var(--color-success);
}
.riskCardCaptionTypeRisk {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.teamRiskOpportunityNeutralized .riskCardCaptionTypeRisk{
    border-color: var(--color-success);
    color: var(--color-success);
}

.selectRiskOpportunityVariationUsedRoot{
  /*  margin: 1em 0;
    padding: 1em 0;
    border-top: 1px solid #0002;
    border-bottom: 1px solid #0002;*/
}

.selectRiskOpportunityVariationUsedRoot label{
    display: flex;
    gap: 0.5em;
    align-items: center;
}
.selectRiskOpportunityCodeCaption, .selectToolCodeCaption{
    font-family: 'bold';
}

.bestToolItem {
    position: relative;
    padding: 0.25em 0.5em 0.25em 1.9em;
    border-radius: var(--radius);
}
.bestToolItem::before {
    content: '';
    position: absolute;
    left: 0.65em;
    top: 50%;
    transform: translateY(-50%);
    width: 0.7em;
    height: 0.7em;
    background-color: var(--color-main2);
    -webkit-mask: url(circle.svg) center / contain no-repeat;
    mask: url(circle.svg) center / contain no-repeat;
}
.bestToolItemActive::before {
    left: 0.4em;
    width: 1.1em;
    height: 1.1em;
    background-color: var(--color-success);
    -webkit-mask-image: url(done.svg);
    mask-image: url(done.svg);
}
.bestToolItemFoul::before {
    left: 0.4em;
    width: 1.1em;
    height: 1.1em;
    background-color: var(--color-danger);
    -webkit-mask-image: url(cross.svg);
    mask-image: url(cross.svg);
}


.teamActionAIAdviceLoading{
    font-style: italic;
    font-size: 1.5em;
    text-align: center;
    margin: 2em 0;
}
.actionItemRoot{
    border-radius: var(--radius);
    margin-bottom: 0.5em;
}
.teamActionApproved,
.teamActionRejected,
.teamActionOnApprove,
.teamActionEditing {
    position: relative;
}
.teamActionCaption, .actionItemTeam, .controlTeamActionCaption {
    padding-left: 1.5em;
}
.teamActionApproved .teamActionCaption::before,
.teamActionRejected .teamActionCaption::before,
.teamActionOnApprove .teamActionCaption::before,
.teamActionEditing .teamActionCaption::before,
.teamActionApproved .controlTeamActionCaption::before,
.teamActionRejected .controlTeamActionCaption::before,
.teamActionOnApprove .controlTeamActionCaption::before,
.teamActionEditing .controlTeamActionCaption::before,
.teamActionApproved .actionItemTeam::before,
.teamActionRejected .actionItemTeam::before,
.teamActionOnApprove .actionItemTeam::before,
.teamActionEditing .actionItemTeam::before,
.teamActionFilterIcon::before {
    content: '';
    position: absolute;
    left: 0em;
    width: 1.1em;
    height: 1.3em;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.teamActionOnApprove .teamActionCaption::before,
.teamActionOnApprove .controlTeamActionCaption::before,
.teamActionOnApprove .actionItemTeam::before,
.teamActionFilterIcon.teamActionOnApprove::before {
    background-color: var(--color-main3);
    -webkit-mask-image: url(wait.svg);
    mask-image: url(wait.svg);
}
.teamActionApproved .teamActionCaption::before,
.teamActionApproved .controlTeamActionCaption::before,
.teamActionApproved .actionItemTeam::before,
.teamActionFilterIcon.teamActionApproved::before {
    background-color: var(--color-success);
    -webkit-mask-image: url(done.svg);
    mask-image: url(done.svg);
}
.teamActionEditing .teamActionCaption::before,
.teamActionEditing .controlTeamActionCaption::before,
.teamActionEditing .actionItemTeam::before,
.teamActionFilterIcon.teamActionEditing::before {
    background-color: var(--color-main3);
    -webkit-mask-image: url(edit.svg);
    mask-image: url(edit.svg);
}
.teamActionEditing {
    opacity: 0.5;
}
.teamActionRejected {
    opacity: 0.5;
}
.teamActionRejected .teamActionCaption::before,
.teamActionRejected .controlTeamActionCaption::before,
.teamActionRejected .actionItemTeam::before,
.teamActionFilterIcon.teamActionRejected::before {
    background-color: var(--color-danger);
    -webkit-mask-image: url(cross.svg);
    mask-image: url(cross.svg);
}
.teamActionFilterRoot {
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: center;
    margin: 0.5em;
}
.teamActionFilterItem {
    display: flex;
    align-items: center;
    gap: 0.35em;
    cursor: pointer;
    margin: 0;
}
.teamActionFilterIcon {
    position: relative;
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    padding: 0;
    opacity: 1;
}
.teamActionFilterIcon.teamActionApproved,
.teamActionFilterIcon.teamActionRejected,
.teamActionFilterIcon.teamActionOnApprove,
.teamActionFilterIcon.teamActionEditing {
    padding-left: 0;
    opacity: 1;
}
.teamActionFilterIcon::before {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.actionItemTeam{
    font-family: 'bold';
    text-transform: uppercase;
    margin-bottom: 0.5em;
}

.actionItemText{
    margin-bottom: 0.5em;
}
.actionItemAreasRoot{
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
    font-size: 0.8em;
}

/*МОНИТОР */

.bodyMonitor .contentRoot, .monitorLogo_content, .monitorQR_content{
    flex:1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.monitorLogoRoot, .monitorQRRoot {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.monitorLogo_contentInner{
    background-image: var(--logo-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 20vh 20vw;
    flex: 1 1 auto;
}
.monitorQR_content{
    margin: 20vh 10vw;
    box-sizing: border-box;
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    gap: 10vw;
    height: 100%;
    overflow: hidden;
}
.monitorQR_contentInner{
    flex: 1 1;
    margin: 0 auto;
    box-sizing: border-box;
    max-height: 100%;
    display: flex;
}
.monitorQR_logo{
    flex: 1 1;
    background-image: var(--logo-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.monitorQR_contentInner svg{
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
}


.monitorGameResults_content, .monitorQuizResults_content{
    overflow: auto;
}
.monitorGameResults_contentInner{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.monitorGameResultsRoot .gameResults {
    margin: auto;
    padding: 2em;
    background-color: var(--color-bg);
    border-radius: var(--radius);
    border: 5px solid #FFF;
}
.monitorGameResultsRoot .gameResultsCaption {
    font-size: 2em;
}
.monitorGameResultsRoot .gameResultsMetrics {
    gap: 1.5em;
    margin: 2em 0;
}
.monitorGameResultsRoot .gameResultsMetric {
    flex: 1 1 12em;
    max-width: 16em;
}
.monitorGameResultsRoot .gameResultsMetricCaption {
    font-size: 1.2em;
}
.monitorGameResultsRoot .gameResultsMetricValue {
    font-size: 2.5em;
    padding: 0.4em 0.6em;
}
.monitorGameResultsRoot .gameResultsMetricDelta,
.monitorGameResultsRoot .gameResultsMetricTarget {
    font-size: 1.3em;
}
.monitorGameResultsRoot .gameResultsTargetStatus {
    font-size: 1.6em;
    padding: 0.8em 1.5em;
}

.monitorGamesComparison_content {
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gamesComparison {
    margin: auto;
    padding: 2em;
    background-color: var(--color-bg);
    border-radius: var(--radius);
    border: 5px solid #FFF;
    width: fit-content;
    max-width: 100%;
}
.gamesComparisonCaption {
    font-family: 'bold';
    font-size: 2em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1em;
}
.gamesComparisonTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 2em;
}
.gamesComparisonTable th,
.gamesComparisonTable td {
    padding: 0.3em 1em;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.gamesComparisonTable th {
    font-family: 'bold';
    text-transform: uppercase;
    font-size: 0.85em;
    color: var(--color-font2);
}
.gamesComparisonTable td.gamesComparisonGameCaption {
    text-align: left;
    font-family: 'bold';
    white-space: nowrap;
}
.gamesComparisonTable td.gamesComparisonKpd {
    font-family: 'caption';
    font-size: 1.5em;
    color: var(--color-main3);
}
.gamesComparisonRowLeader td {
    background-color: rgba(0, 0, 0, 0.04);
}
.gamesComparisonEmpty {
    text-align: center;
    font-size: 1.4em;
    padding: 1em;
}



@media screen and (max-width: 1200px) {
    body {
        font-size: 17px;
    }
}
@media screen and (max-width: 1000px) {
    body {
        font-size: 16px;
    }
}
@media screen and (max-width: 800px) {
    body {
        font-size: 15px;
    }
}
@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
}
@media screen and (max-width: 500px) {
    body {
        font-size: 13px;
    }
}


@media screen and (min-width: 801px) {
    .gameMain_queueButtonRoot {
        display: none;
    }
    .gameMain_queueRoot{
        display: flex!important;
    }
}

@media screen and (max-width: 800px) {
    .gameMain_content {
        flex-direction: column;
    }
}
@media screen and (max-width: 500px) {
    .headerMetricsItemCaption{
        font-size: 0.75em;
    }
}
@media screen and (max-width: 450px) {
    .footerMenuText {
        font-size: 0.9em;
    }
}
@media screen and (max-width: 400px) {
    .footerMenuText {
        display: none;
    }
}
@media screen and (max-width: 370px) {
    .headerMetricsItemCaption{
        font-size: 0.7em;
    }
}

/*КАРТОЧКИ QR коды*/

.qrcodeItemsRoot {
    background: #E8378B;
}

.qrcodeItem {
    width: 7.5cm;
    border: 1px solid #EEE;
    padding: 0.3cm;
    margin: 0.2cm;
    text-align: center;
    float: left;
    page-break-inside: avoid;
  /*  border-radius: 15px;*/
    background: #fff;
}

.qrcodeItem_team_caption {
    font-size: 2em;
    font-family: 'bold';
    margin-bottom: 10px;
}

.qrcodeItem_group_caption {
    font-size: 1.5em;
    color: #000 !important;
    margin-top: -5px;
}

.qrcodeItem_game_logo {
    float: left;
    width: 2cm;
    height: 1.8cm;
    background-image: url('qrcodeLogo.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    line-height: 0;
    margin-bottom: -10px;
}

.qrcodeItem_login_url {
    display: none;
}

.qrcodeItem_password_caption {
    font-size: 1.2em;
}

.qrcodeItem_password {
    font-size: 2em;
}

.teamGenerateAction_actionContent .scrollable_content {
    padding: 0em;
}

.teamActionAreasSelector {
    font-size: 0.8em;
    display: flex;
    gap: 0.25em;
    flex-wrap: wrap;
    justify-content: space-around;
}
.teamActionAreasSelector label {
    flex: 1 1 auto;
    width: 20em;
}
.teamActionDescriptionCaption {
    font-family: 'bold';
    margin-bottom: 0.5em;
}
.teamActionDescription, .teamActionActionAreas {
    margin-bottom: 1em;
}
.actionAreaItem {
    border-radius: var(--radius);
    border: 1px solid var(--color-main3);
    color: var(--color-main3);
    padding: 0.25em;
}

.teamActionTextInput {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-top: 0.5em;
}
.teamActionTextInput textarea {
    width: 100%;
    min-height: 10em;
    box-sizing: border-box;
}
.teamActionVoiceButton {
    width: auto;
    min-width: 0;
    margin: 0 auto 1em;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.teamActionVoiceButton::before {
    content: '';
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
    background-color: currentColor;
    -webkit-mask: url(microphone.svg) center / contain no-repeat;
    mask: url(microphone.svg) center / contain no-repeat;
}
.teamActionVoiceButton.recording {
    background: var(--color-danger);
}
.teamActionVoiceButton.recording::before {
    -webkit-mask-image: url(square.svg);
    mask-image: url(square.svg);
}

.teamActionVoiceButton.mainButtonDisabled::before {
    -webkit-mask-image: url(wait.svg);
    mask-image: url(wait.svg);
}
.teamActionFooter {
    display: flex;
    gap: 0.5em;
    flex-direction: column;
}
.teamActionValidationWarning {
    color: #c0392b;
    font-size: 0.9em;
    text-align: center;
    line-height: 1.3;
}


.qr-scan-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    padding: 1em;
    text-align: center;
}
.qr-scan-modal {
    width: min(42rem, 100%);
}
.scanner-viewport {
    position: relative;
    width: min(15rem, 100%);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #000;
}
.scanner-viewport > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.scanner-help {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
    width: 100%;
}

.selectToolsRoot .modal .modal-content, .user-name-modal .modal-content {
    max-height: 95%;
    max-width: 95%;
    overflow: auto;
    min-width: 0;
}
.user-name-modal{
    text-align: center;
}
.admin-wrapper input,
.admin-wrapper select,
.admin-wrapper textarea {
    padding: 0.3em;
    width: 15em;
    text-align: left;
    font-size: 1em;
    max-width: 100%;
    min-width: auto;
}

.admin-wrapper input[type="submit"] {
    text-align: center;
}