/* used to disable the current screen while transitioning to a different screen */
.app--blocked {
    pointer-events: none;
    user-select: none;
    /* https://stackoverflow.com/questions/33264310/in-html-can-i-disable-user-interaction-with-an-entire-dom-sub-tree */
}

.c_select {
    transition: all 0.2s;

    margin: 2vw 0vw 0.15vw 0vw;
    background: transparent;
    color: var(--fg-a);
    background-color: var(--bg2-a);
    border-color: var(--bg2-b);
    font-size: 100%;
    padding: 0.5rem;
    width: 100%;
    border-radius: 0.75rem;
}

.c_select:focus {
    border-color: var(--bg2-a);
}

input[type='checkbox'] {
    transition: all 0.2s;

    -webkit-appearance:none;

    margin-right: 1em;
    background: transparent;
    color: var(--fg-a);
    background-color: var(--bg2-a);
    border-color: var(--accent);
    font-size: 100%;
    border-radius: 1.2em;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
}

input:checked {
    border-color: var(--bg2-a);
    background-color: var(--accent);
}

textarea:focus {
    outline-color: var(--bg-d);
    outline-width: 0.3em;
}

.monthnavscroll {
    margin: 1rem 0rem 0.5rem 0rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#monthname {
    display: inline-block;
    font-size: 125%;
    width: 60%;
    max-width: 20rem;
    text-align: center;
}

.monthbutton {
    transition: filter 0.15s, transform 0.15s;
    height: 2em;
    margin: auto;
    vertical-align: middle;
}

#nextmonth .monthbutton:active, #nextday .monthbutton:active {
    filter: opacity(0.5);
    transform: scale(-1.5,1.5);
}

#prevmonth .monthbutton:active, #prevday .monthbutton:active {
    filter: opacity(0.5);
    transform: scale(1.5,1.5);
}

.c_inputfield {
    transition: all 0.2s;

    background-color: var(--clear);
    padding: 0.5rem 1rem 0.2rem 1rem;
    border: none;
    border-bottom: 0.09em solid var(--bg-c);
    border-radius: 0.25vh;
    border-color: var(--fg-a);
    text-align: center;
    color: var(--fg-a);
    outline: none;
    box-shadow: 0 0 0vh 0vh var(--shadow);
}

.c_inputfield:focus {
    background-color: #4e95c6;
    padding: 0.5rem 1.5rem 0.2rem 1.5rem;
    border: none;
    border-bottom: 0.09em solid var(--accent);
    border-radius: 1vh;
    text-align: center;
    color:var(--fg-a);
    box-shadow: 0 0 0vh 0.15vh var(--fg-a);
}


.c_inputfield_simple {
    transition: all 0.2s;

    background-color: var(--clear);
    padding: 0.5rem 1rem 0.2rem 1rem;
    border: none;
    border-bottom: 0.09em solid var(--bg-c);
    border-color: var(--fg-a);
    text-align: center;
    color: var(--fg-a);
    outline: none;

    z-index: 2;
}

.c_inputfield_simple:focus {
    text-align: center;
    padding: 0.5rem 1.5rem 0.2rem 1.5rem;
    color:var(--fg-a);
    border-bottom: 0.09em solid var(--accent);
}

::-webkit-input-placeholder{
    color: var(--fg-b);
}

.c_textinputfield{
    transition: all 0.2s;
    width: 85%;
    height: 5em;
    background-color: var(--bg-b);
    padding: 3% 0.5vw 2% 0.5vw;
    margin: 0.5em auto;
    border: none;
    border-radius: 0.25vh;
    border-color: var(--fg-a);
    text-align: center;
    color: var(--fg-a);
    font-size: 100%;
    resize: vertical;
    box-shadow: 0em 0em 0.2em 0.1em var(--shadow);
}

.c_priceinput {
    display: inline-flex;
    margin-top: .5em;
}

.c_priceinput__input {
    width: auto;
    transition: all 0.2s;
    background-color: var(--clear);
    border: none;
    border-bottom: solid 0.09em var(--fg-a);
    text-align: center;
    margin: 0em 0.4em;
    color: var(--fg-a);
    outline: none;
    font-size: 100%;
}

.c_priceinput__input:focus{
    border-bottom: solid 0.09em var(--accent);
}

.c_priceinput__select {
    margin: 0.5em 0 .5em 0;
    font-size: 70%;
    width: 25%;
    text-align: center;
}

.c_footerspace {
    padding: 16vw 0 0 0;
}

.c_wrapper {
    text-align: center;
}

.c_horzflipped {
    transform: scaleX(-1);
}

.c_hideXoverflow {
    overflow-x: hidden;
}

.c_disabled {
    filter: grayscale(1) brightness(0.35);
}

.c_hint {
    position: fixed;
    top: 25vh;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 80vw;
    background-color: var(--bg-a);
    padding: 3vw;
    border-radius: 0.2em;
    border: 0.09em solid var(--accent);
    box-shadow: 0 0 4vh 0.5vh var(--shadow);
    font-size: 110%;
    z-index: 6;
}

@media (orientation: landscape) {
    .c_hint {
        width: 50vw;
    }
}

.c_hintX {
    position: absolute;
    background-color: var(--bg-a);
    right: -1em;
    top: -1em;
    border: 0.09em solid var(--accent);
    transform: rotate(45deg);
    border-radius: 1em;
}

.c_hintX img {
    height: 2em;
    width: 2em;
}

.c_hint_bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 5;
}

.c_hintChoice {
    background-color: var(--bg-b);
    padding: 0.5em;
    border: 0.09em solid var(--bg-c);
}

#c_hintChoiceDiv {
    display: flex;
    justify-content: space-evenly;
    margin-top: 1em;
}

#c_hintChoiceDiv .c_button {
    padding: 1rem 1rem;
    width: 25%;
}

.c_friendbutton img {
    height: 7vw;
    display: inline-block;
    vertical-align: middle;
}

.c_friendbutton {
    padding: 2vw 1vw 3vw 1vw;
}

#c_topnavbuttons {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

.c_topnavbutton {
    margin: 0em 0.2em;
    background-color: var(--bg2-b);
    font-size: 110%;
    padding: 0em 0.5em;
    display: flex;
    align-items: center;
    height: 2.5em;
}

.c_topnavbutton img {
    height: 1.6em;
}

.c_topnavbutton div {
    width: 100%;
    margin: 0em 0.3em;
}


.c_externallink {
    height: 2em;
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
}

.c_title {
    padding: 0.2em 0em 0.2em 0.5em;
    font-size: 125%;
    text-align: left;
    background-color: var(--bg-c);
    box-shadow: 0em 0em 0.2em 0.1em var(--shadow);
    border-top: 0.09em solid var(--bg-c);
    width: 100%;
    margin-bottom: 1rem;
}

.c_topicon {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    padding: 0vh 0vh;
    height: 2em;
}

.c_topicon img {
    max-height: 100%;
}

.c_topiconbig {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    padding: 0vh 0vh;
    height: 3em;
    margin: 2vw 0vw;
}

.c_topiconsmall {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    padding: 0vh 0vh;
    height: 1em;
    margin: 2vw 0vw;
}

.c_topiconsmall img,
.c_topiconbig img
{
    max-height: 100%;
}

.c_toptext {
    display: inline-block;
    position: relative;
    margin: auto 0.5rem auto 0.5rem;
    vertical-align: middle;
    font-weight: bold;
    white-space: initial;
    max-width: 30vw;
    text-align: center;
}

.c_topspace {
    width: 1em;
}

.detailexpand {
    background-color: var(--bg2-a);
    border-left: solid 0.3em var(--accent);
}

.expandcontent {
    transition: all 0.35s;

    overflow: hidden;
    background-color: var(--bg-a);
    height: 0vh;

    padding: 0em 1.5em 0em 1.5em;
}

.expanded .expandcontent {
    height: auto;
    padding: 0.5em 1.5em 0.5em 1.5em;
}

.detailexpand .expandicon {
    transition: all 0.25s;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    height: 1.5rem; 
    padding: 0 0 0 0.5rem; 
}

.expanded .detailexpand .expandicon {
    transform: rotateZ(-90deg);
}

.c_hinttext {
    font-size: 0.9rem;;
    font-style: italic;
    color: var(--fg-c);
}

.c_eventlinkbutton {
    font-size: 1rem;
}

.c_eventlinkbutton img {
    height: 7vw;
    vertical-align: middle;
}

.c_hidden {
    display: none;
}

.c_hidden_imp {
    display: none !important; /* flagged important so that we can use it on things which have other classes that set 'display'. another way to do this would be to put it in a higher layer than page-specific stuff */
}

.c_maxwidth {
    width: 100%;
}

.c_socialicon{
    width: 5vw;
}

.c_rotate45 {
    transform: rotate(45deg);
}

@-webkit-keyframes c_rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

.c_rotating {
    -webkit-animation: c_rotating 3s linear infinite;
}

@-webkit-keyframes c_rotatingreverse {
    from{
        -webkit-transform: rotate(360deg);
    }
    to{
        -webkit-transform: rotate(0deg);
    }
}

.c_rotatingreverse {
    -webkit-animation: c_rotatingreverse 3s linear infinite;
}

.c_loadingindicator_parent {
    position: relative;
}

.c_loadingindicator_img {
    position: absolute;
}

@-webkit-keyframes c_bluranim {
    0%{
        filter: blur(0px);
    }
    50%{
        filter: blur(3px);
    }
    100%{
        filter: blur(0px);
    }
}

@-webkit-keyframes c_scaleanim {
    0%{
        transform: scale(1.15);
    }
    50%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.15);
    }
}

.c_divloadinganim {
    -webkit-animation: c_scaleanim 1.5s linear infinite;
}

.c_divider {
    border-bottom: solid 0.09em var(--bg-d);
    box-shadow: 0 0.2em 0.4em 0.2em var(--shadow);
    width: 80%;
    margin: 2em auto;
}

.c_thindivider {
    background-color: var(--bg-c);
    box-shadow: 0em 0em 0.2em 0.1em var(--shadow);
    height: 0.09em;
    width: 100%;
}

.c_thindivider_subtle {
    display: inline-flex;
    width: 80%;
    margin: 0.5em;
    background-color: var(--bg-c);
    box-shadow: 0em 0em 0.2em 0.1em var(--shadow);
    height: 0.09em;
}

.c_fixed {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
}

.clickable {
    cursor: pointer;  /* required for iOS to recognize clicks for some elements */
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 0.75em;
  border-radius: 2em;
  background: var(--bg-c);
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 1.5em;
  width: 1.5em;
  border-radius: 50%;
  border-left: solid 0.2em var(--accent);
  background: var(--bg2-a);
  box-shadow: 0em 0em 0.2em 0.1em var(--shadow);
}

#sponsorlogolink {
    display: flex;
    width: 100%;
    margin: auto 2vw;
    justify-content: center;
}

#sponsorlogolink img {
    height: 3.5em;
}

#sponsorlogolink div {
    display: flex;
    align-items: center;
    text-align: center;
}

/* personal events popup */

#pepopup {
}

#pepopup_header {
    text-align: center;
}

#pepopup_header img {
    max-width: 1.5em;
    max-height: 1.5em;
}

#pepopup_reason { /* textarea */
    height: 4em;
    width: 100%;
}

/* end personal events */

.editBox {
    background-color: var(--bg-a);
    padding: 0.5em 0em;
}

.editTitle {
}

.editField {
    font-size: 100%;
    width: 80%;
    margin: 1vw;
}

.c_suggestionbox {
    background-color: var(--bg2-a);
    border: 0.1em solid var(--accent);
    border-radius: 0.3em;
    margin: 0.5em;
    padding: 0.5em;
    width: 90%;
}


/*
  trainer list item
  - used by Screen.trainers, Screen.modtrainers
*/

#trainerlist {
    padding: 2vw 0vw 5vw 2vw;
    box-shadow: 0 0 2vh 0.2vh var(--shadow);
}

#trainerlist .imagesmall {
    float: right;
    margin-left: 1em;
}

#trainerlist .imagesmall img {
    max-height: 4em;
    max-width: 5em;
}

#trainerlist .imagecontainer {
    display: flex;
    flex-direction: column;
    margin: .5em;
}

#trainerlist .imagecontainer img {
    max-height: 50vh;
    object-fit: contain;
}

#trainerlist .textblock {
    margin-top: 1em;
}


/* a common expander style, used by Screen.event and Screen.editevent for the tools menu */

.linkbuttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: .5em 0;
}

.linkbuttons .c_roundbutton {
    background-color: var(--bg-b);
    width: 3.5em;
    margin-top: 0.3em;
    height: 3.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.linktext {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: .5em;
    width: 4.5rem;
}

.linkbuttons .darkened {
    color: var(--bg-c);
}
.linkbuttons .darkened img {
    filter: opacity(0.333);
}

.linkbuttons img {
    height: 3.5em;
    width: 3.5em;
}