.app { /* APP */
    display: flex;
    flex-direction: column;
    padding: 0px;
    height: 100vh;

    /* iPhone */
    /*
    background: linear-gradient(180deg, #D61317 50%, #EDEDED 50%);
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    */

    position: relative;
}

.main { /* APP CONTENT */
    /*background: #AAAAAA;*/
    flex: 1;
    overflow: auto;
    /*background: #FAFAFA;*/
}

a {
    cursor: pointer;
}

#AppHeader_Global_Back, #AppHeader_Global_Back_Welcome {
    display: block;
    width: 28px;
    height: 28px;
    position: absolute;
    /*
    top: 0;
    left: 0;
    margin-top: 25px;
    margin-left: 25px;
    */
    top: env(safe-area-inset-top, 0px);
    left: env(safe-area-inset-left, 0px);
    margin-top: 25px;
    margin-left: 25px;
    /*z-index: 20;*/
    background-image: url("../_img/back.svg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
}

#AppHeader_Global_Back.white, #AppHeader_Global_Back_Welcome.white {
    background-image: url("../_img/back-white.svg");
}

.page {
    /*display: none;*/
    /*height: 100%;
    width: 100%;*/
    /*overflow: auto;*/
    /*height: 400px;*/
    background: #FFFFFF;
    /*overflow: hidden;*/
    /*visibility: hidden;*/ /* iPhone */
    /*position: relative;*/
    min-height: 100%;
    overflow-x: hidden;
    /*z-index: 10;*/
}

.page.modal {
    background: #F6F6F6;
}
/*
.page.active {
    display: block;
    visibility: visible;
}
*/

.loading {
    width: 100%;
    height: 100%;
    line-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.2);
    display: none;
    z-index: 1000000;
}

.loading.visible {
    display: block;
}


.subpage {
    flex: 1;
    height: 100%;
}

h1 {
    font-weight: 500;
    font-size: 20px;    
    margin-top: 30px;
    margin-bottom: 30px;
    letter-spacing: 2px;
}

h1.red {
    color: #D61317;
}

label {
    display: block;
    font-weight: 300;
    margin-top: 30px;
    margin-bottom: 5px;
    font-size: 12px;
}

header {
    height: 80px;
    line-height: 80px;
    padding: 0px 10px;
    background: #D61317;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    display: flex;
    /*z-index: 10;*/
    overflow: hidden;
}

header .label {
    flex: 1;
}

header .menu {
    position: absolute;
    right: 0px;
    background: #D61317;
    line-height: initial;
    z-index: 200;
}
header .menu > * {
    padding: 20px 40px;
    display: block;
    white-space: nowrap;
}

.filters, .content {
    padding: 20px;
}

.filters2, .content2 {
    padding: 10px;
}

/*.scroll.gray, .page.gray {*/
.scroll, .page, .tabs {
    /*background: #FAFAFA;*/
}

.content.top {
    padding-top: 0px;
}

.filter_items {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;
    justify-items: stretch;*/
    margin-top: 10px;
    margin-left: -5px;
    margin-right: -5px;
}

.filter_items > * {
    /*flex: 1;*/
    white-space: nowrap;
}

#AppPageCommunityEventEdit .label, #AppPageProfileEdit .label, #AppPageGeoEdit .label {
    margin-bottom: 4px;
    margin-left: 10px;
    opacity: 0.8;
    font-size: 12px;
}

#AppPageSelect {
    display: flex;
    flex-direction: column;
}

#AppPageSelect .select {
    flex: 1;
}

#AppPageSelect .select.notfound {
    display: flex;
}

#AppPageSelect .select.notfound div {
    flex: 1;
    text-align: center;
    align-content: center;
}

#AppGuide .text a {
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: underline;
}

.text_link {
    word-wrap: break-word;
    font-weight: bold !important; /* nefunguje na android */
}

.disabled {
    opacity: 0.5;
}

#AppPanelLeftProfile {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 50px;
}

#AppPanelLeftProfile .image {
    width: 180px;
    height: 180px;
    border-radius: 100%;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    margin-bottom: 10px;
}

#AppPanelLeftProfile .name {
    display: block;
    font-weight: 600;
    font-size: 18px;
    margin-top: 5px;
    letter-spacing: 2px;   
}

#AppPanelLeftProfile .usergroup_names {
    font-weight: normal;
    font-style: italic;
    margin-top: 5px;
}

.filters .button.whitegray, .filters input {
    border-color: #A8A8A8;
    color: #A8A8A8;
}


/* BROWSER OR SIMPLE CSS for different VW? */
body.platform_browser, .tabs {
    background: #ededed;
}

body.platform_browser .main {
    margin-left: 300px;
    background: #ededed;
}

body.platform_browser.not_logged_in .main {
    margin-left: 0px;
}

body.platform_browser section {
    padding-top: 0px;
    /*border-radius: 0px;*/
}


#AppPanelLeft {
    position: fixed;
    margin-left: -300px;
    width: 300px;
    padding-right: 20px;
}

.panel {
    margin-bottom: 40px;
}

.panel .container {
    /*margin-bottom: 60px;*/
}

.panel .label {
    overflow: hidden;
    /*text-align: center;*/    

    white-space: nowrap;
    color: #29282b;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/*section .label::before, */ .panel .label::after {
    background-color: #29282b;
    content: "";
    display: inline-block;
    height: 2px;
    position: relative;
    vertical-align: middle;
    /*width: 50%;*/

    width: 100%;
}

/*
section .label::before {
    right: 0.5em;
    margin-left: -50%;
}*/

.panel .label::after {
    /*left: 0.5em;*/
    left: 20px;
    /*margin-right: -50%;*/
}

.container_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.container_list {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
}

.container_right {
    text-align: right;
    margin-top: 40px;
}

#AppPanelLeftMenu #AppFooter_Global_All #AppFooter_Global_ForClubMembers {
    background: #104592;
    color: #FFFFFF;
}

#AppPanelLeftMenu a .arrow .stroke {
    stroke: #FFFFFF;    
}

.main {
    overflow: hidden;
}

.article_list {
    display: flex;
}

.article_list .right {
    flex: 1;
    margin-left: 30px;
}

.article_list .right .text {
    padding-left: 8px;    
    text-align: justify;
}

.article_list .left {
    max-width: 50%;
}

/*
.panel.reverse .left {
    order: 2;
    padding-left: 0px;    
    margin-right: 30px;
}

.panel.reverse .right {
    padding-left: 0px;    
    margin-left: 0px;
    margin-right: 30px;
}
*/

.panel .right {
    margin-top: 40px;
}

.InAppBrowser {
    z-index: 1000;
    border: 50px solid transparent !important;
    background: rgba(0,0,0,0.5);
}

.InAppBrowser iframe {
    width: 700px !important;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 10px;
    max-height: 100vh;
    max-width: 100%;
}
.app {
    height: 100%;
}

body {
    /*padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);*/
    width: 100%;
    height: 100%;
}

/*
body.platform_browser {
    margin-bottom: 50px;
}*/

body.platform_browser.not_logged_in {
    background: #FFFFFF;
}

body.platform_browser.not_logged_in .main {
    background: #FFFFFF;
    padding-left: 0px;
}

body.platform_browser.not_logged_in #AppPanelLeft, body.platform_browser.not_logged_in #AppTabs_Global {
    display: none;
}

header .label {
    margin-left: 300px;
}


.heading_about {
    display: flex;
    border-radius: 10px;
    background: #EBEBEB;
    margin-bottom: 40px;
}

.heading_about .left {
    background: #D61317;
    border-radius: 10px;
    display: flex;
    padding: 20px 50px;
}

.heading_about .right {
    padding: 20px;
    flex: 1;
}

.heading_about .left svg {
    width: 90px;
}

.heading_about svg .fill {
    fill: #FFFFFF;
}

.heading_about .title {
    color: #D61317;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.heading_about .text {
    font-size: 14px;
}

.dialogbuttons {
    /*margin-top: 40px;
    margin-bottom: 40px;*/
    padding: 10px;
    text-align: center;
}

.AppPageModalBg {
    background: #FFFFFF;
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0.8;
    /*-index: 100;*/
}

.AppPageModalContainer {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    /*z-index: 100;*/
    align-items: center;
    justify-content: center;
}

.page.AppPageModal {
    width: 550px;
    /*position: absolute;*/
    /*border: 1px solid #CCCCCC;*/
    border: 1px solid #D61317;
    border-radius: 10px;
    height: auto;
    max-height: 80%;
    /*
    margin-top: 5%;
    left: 50%;
    margin-left: -275px;*/
    overflow: hidden;
    min-height: initial;
    box-shadow: rgba(100, 100, 111, 0.9) 0px 7px 29px 0px;
    /*z-index: 100;*/
    display: inline-flex;
    flex-direction: column;
}

.AppPageModalBg.active, .AppPageModalContainer.active {
    display: flex;
}

.AppPageModalHeader {
    /*position: relative;*/
    background: #D61317;
    width: 100%;
    height: 50px;
    line-height: 50px;
    display: none;
}

.AppPageModal .content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.AppPageModal .AppPageModalHeader {
    display: flex;
}

.AppPageModalHeaderClose > span {
    /*font-size: 26px;*/
    font-size: 22px;
    font-weight: bold;
    display: inline-block;
    color: #FFFFFF;
    /*right: 0;
    top: 0;*/
    /*width: 45px;
    height: 45px;
    border-radius: 45px;*/
    /*width: 30px;
    height: 30px;*/
    /*background: #FFFFFF;*/
    /*margin-top: 9px;*/
    /*line-height: 45px;*/
    /*line-height: 30px;
    text-align: center;*/
    /*opacity: 0.9;*/
    vertical-align: middle;
    margin-top: -5px;
    margin-right: 16px;
    margin-left: 16px;
    cursor: pointer;
}

.AppPageModalHeaderTitle {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    color: #FFFFFF;
    flex: 1;
    margin-left: 20px;
}

.page {
    position: absolute;
    width: 100%;
    height: 100%;
    /*z-index: 10;*/
}

.main {
    position: relative;
}

#AppPageConfirm {
    width: 400px;
}
#AppPageConfirm .icon {
    width: 100px;
    height: 100px;
    margin-bottom: 40px;
    margin-top: 20px;
}

#AppPageLogin .content, #AppPageSignup .content {
    width: 600px;
    max-width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.initializing .app {
    visibility: hidden;
}
.splash {
    display: none;
    position: fixed;
}
.initializing .splash {
    display: flex;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
}

.initializing .splash img {
    width: 40vw;
    max-width: 400px;
    max-height: 400px;
}
/*
.page.active {
    visibility: visible;
}
*/

#AppFooter_Global footer .buttons.wide .icon .svg {
    width: 30px;
    height: 30px;
}

.banner {
    text-align: center;
}
.footer {
    background: #F6F6F6;
}

/*#AppPageLogin, #AppPageAlert, #AppPageConfirm, #AppPageReservation, #AppPageReservationEdit, #AppPageUpdate {*/
#AppPageAlert .content, #AppPageConfirm .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#AppPanelLeftMenu #AppFooter_Global_All a:hover {
    outline: 1px solid #CCCCCC;    
}

.events_rect .item, .events_line .item, #AppPageCommunities_CommunitiesGrid .item, .item.next span, .item.history span, .events_rect .item, #AppPageCommunityInfo_Grid .item:not(.history), #AppPageCommunityInfo .members, #AppPageCommunityEventInfo .reservations, #AppPageProfileMenu .item, #AppPageSelect .option {
    cursor: pointer; 
}

.events_line .item:hover, #AppPageCommunities_CommunitiesGrid .item:hover, .item.next span:hover, .item.history span:hover, .events_rect .item:hover, #AppPageCommunityInfo_Grid .item:not(.history):hover, #AppPageProfileMenu .item:hover {
    outline: 1px solid #DDDDDD;    
}

.events_rect .item:hover, #AppPageSelect .option:hover {
    outline: 2px solid #CCCCCC;    
}

#AppPageCommunityInfo .members:hover {
    outline: 1px solid #DDDDDD;    
    outline-offset: 10px;
    border-radius: 5px;
}

#AppPageCommunityEventInfo .reservations:hover {
    outline: 1px solid #DDDDDD;    
    outline-offset: 5px;
    border-radius: 5px;
}

/*
.item {
    cursor: pointer; 
}

.item:hover {
    outline: 1px solid #DDDDDD;    
}
.item.rect:hover, .item.history span:hover {
    outline: 1px solid #CCCCCC;    
}

#AppPanelLeftMenu #AppFooter_Global_All a:hover {
    outline: 1px solid #CCCCCC;    
}

.item.history:hover {
    outline: 0px;
}
*/


/*#AppFooter_Global_Club {
    background: linear-gradient(0deg, #FFCE43 50%, #723604 20%, #E49119 30%) !important;
    background: linear-gradient(10deg, #FFCE43 10%, #E49119 70%) !important;
    background: linear-gradient(10deg, #FFCE43 10%, #EFBE33 70%) !important;
}*/

#AppPanelLeftMenu footer #AppFooter_Global_Club .imagebg {
    background: linear-gradient(0deg, #FFCE43 50%, #723604 20%, #E49119 30%);
    background: linear-gradient(10deg, #FFCE43 10%, #E49119 70%);
    background: linear-gradient(10deg, #FFCE43 10%, #EFBE33 70%);
    background: linear-gradient(165deg, #FFCE43 50%, #723604 20%, #E49119 30%);
    /*background: linear-gradient(165deg, #FFCE43 50%, #723604 20%, #F0B149 30%);*/
}

#AppPageIframe_ToolBar {
    position: relative;    
}

#AppPageIframe_ToolBar #AppPanelShare {
    left: 50%;
    width: 200px;
    margin-left: -100px;
    margin-top: -200px;
}