/* main */
.MainTeamPage {
    margin: 14vh auto 0 auto;
    width: max-content;
    display: flex;
    flex-direction: column;
    gap: 7vmin;
    overflow-x: hidden;
    min-height: 77.3vh;
}

/* Team Img */
.teamImgDiv {
    width: 80vw;
    display: flex;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px 10px 10px 10px;
    box-sizing: border-box;
}
.teamImg {
    width: 100%;
}

/* All under Img */
.teamDesBoxAllin {
    display: flex;
    flex-direction: column;
    gap: 3vmin;
}
/* Team Description */
.teamDesAll {
    display: flex;
    justify-content: space-between;
}
.teamDesDiv {
    width: 38vw;
    height: max-content;
    border: 2px solid var(--ac);
    border-top: none;
    box-sizing: border-box;
    border-radius: 0px 0 0px 0px;
}
/* header */
.teamDesHeaderDiv {
    display: flex;
    align-items: center;
    margin-top: -1.7vh;
}
.hrTeamHeaderFront {
    height: 0;
    width: 10%;
    border-top: 2px solid var(--ac);
    box-sizing: border-box;
}
.hrTeamHeaderEnd {
    height: 0;
    width: 100%;
    border-top: 2px solid var(--ac);
    box-sizing: border-box;
}
.teamHeaderPara{
    margin: 0 2vmin;
    font-family: var(--Head2);
    font-size: 3vh;
}
/* header [end] */
/* Player */
.teamPlayerBox {
    padding: 3vmin 0vmin 3vmin 10%;
    display: flex;
    flex-direction: column;
    gap: 2vmin;
}
.teamPlayerPara {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2vmin;
}
/* under Team Description */
.underTeamDesAll {
    display: flex;
    justify-content: space-between;
}
.underTeamDesBox {
    width: 38vw;
    height: max-content;
    border: 2px solid var(--ac);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}
.trainerBox{border-radius: 0 0 0 10px;}
.teamTableBox{border-radius: 0 0 10px 0;}
.teamTrainerPara {
    font-family: var(--Head2);
    font-size: 2vmin;
    margin: 0;
    padding: 2vmin;
}

/* Calendar */
.teamCalendar {
    width: 100%;
    display: flex;
    justify-content: center;

}
.iframeCalendar {
    height: 600px;
    width: 70%;
}

/* Team Gamereport */
.TeamGamereport {
    width: 80vw;
    overflow-x: hidden;
}
.GRHeadline {
    display: flex;
    align-items: center;
}
.GRHeadlineline {
    border: 1px solid var(--bg);
    height: 0;
}
.GRHeadlinelineLeft {
    width: 15%;
}
.GRHeadlinePara {
    margin: 0 2vmin;
    white-space: nowrap;
    font-size: 2vmin;
    font-family: var(--Head2);
}
.GRHeadlinelineRight {
    width: 100%;
}
.GRContentDiv {
    margin: 3vmin 0;
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}
.GRConHead {
    background-color: var(--fg);
    border-radius: 10px;
    padding: 2vmin;
    min-width: 55%;
    max-width: 100%;
    height: max-content;
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-direction: column;
}
.GRConHeadParas {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2vmin;
    margin: 0;
}
.romanFontSpan {
    font-family: 'Times New Roman', Times, serif;
    font-size: 2.2vmin;
}
.GRConHeadParaTeams {
    color: var(--ac);
}
.GRConHeadParaVs {
    margin: 0 2.5vmin;
}
.GrTdFlex {
    margin: 0 0.5vmin;
}
.GRConDivforDes {
    width: 55%;
    display: flex;
    flex-direction: column;
    margin: 1vmin 0 0 0;
}
.GRReportHr {
    width: 100%;
    color: var(--ac);
}
.GRConPreTags {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    height: auto;

    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
.GRConTitle {
    margin: 1vmin 0 0 0;
    font-size: 2.2vmin;
}
.GRConText {
    margin: 1vmin 0;
    font-size: 1.8vmin;
}

/* player team page */
.player-teamAll {
    margin: 18vh 5vmin 5vmin 5vmin; 
}
/* nav */
.playerTeamNav {
    display: flex;
    position: fixed;
    inset: 7vh 0 auto auto;
    gap: 2vmin;
    background-color: var(--fg);
    padding: 3vh 5vmin 1vmin 1vmin;
}
.ptnavAttachment {
    position: fixed;
    display: flex;
    inset: 8vh 37vmin auto auto;
    border-left: 55px solid transparent;
    border-top: 5vh solid var(--fg);
}
.ptnavPara {
    transition: 250ms;
    margin: 0;
    font-size: 1.8vh;
    font-family: Arial, Helvetica, sans-serif;
}
.ptnavParaA:hover {
    color: var(--ac);
    text-decoration: underline;
}

/* player */
.playerAllBorder {
    width: max-content;
    position: relative;
}
.playerHeadline {
    margin: 0 0 1vmin 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.playerHeadlinePara {
    margin: 0;
    font-family: var(--Head2);
    font-size: 2.2vmin;
    color: var(--ac);
    display: flex;
    gap: 2vmin;
}
.playerHeadlinePara i{
    transition: 250ms;
    font-size: 3vmin;
}
.pAddA:hover .iconAddnotFilled,
.pAddA .iconAddFilled {
    display: none;
}
.pAddA:hover .iconAddFilled {
    display: inline;
}
/* player nav */
.ptfnav {
    transition: 250ms;
    display: flex;
    gap: 0.7vmin;
    cursor: pointer;
    user-select: none;
}
.ptfnav:hover {
    color: var(--ac);
}
.ptfnPata {
    display: inline-block;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.8vmin;
}
.ptfnArrow {
    transition: 250ms;
    margin-right: 1vmin;
    font-size: 1.8vmin;
}
#dropdownFilter-div {
    padding: 1.2vmin 4vmin 1.2vmin 1.2vmin;
    display: none;
    flex-direction: column;
    gap: 0.6vmin;
    position: absolute;
    inset: 4.1vmin 0 auto auto;
    background-color: var(--fgd);
    border: 2px solid var(--bg);
    border-top: none;
    border-right: none;
}
.visibleFilters {
    display: flex !important;
}
.filterArrowA {
    transform: rotate(90deg);
}
#dropdownFilter-div a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.6vmin;
}
#dropdownFilter-div a:hover{
    color: var(--ac);
}

table, th, td {
    border: 1px solid;
  }
.playerTabel_ {
    border-collapse: collapse;
}
.playerTabel_ th {
    font-family: var(--Head2);
    font-size: 1.8vmin;
    font-weight: normal;
}
.playerTabel_ td {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.7vmin;
}
.playerTabel_ th,td {
    text-align: left;
    padding: 1vmin;
}
.playerEditTdDiv {
    display: flex;
    justify-content: space-around;
}
/* edit icons */
.PlayerEditerIcons {
    transition: 250ms;
    font-size: 1.8vmin;
}
.playerEditIcon:hover {
    color: aqua;
}
.playerDeleteIcon:hover {
    color: var(--ac);
}
/* team */
.teamHeadlinePara {
    font-family: var(--Head2);
    font-size: 2.2vmin;
    margin: 5vmin 0 1vmin 0;
    color: var(--ac);
    display: flex;
    gap: 2vmin;
}
.teamHeadlinePara i{
    transition: 250ms;
    font-size: 3vmin;
}
.teamTabel {
    display: flex;
    flex-direction: column;
    gap: 4vmin;
}
.teamBox {
    width: max-content;
}
.teamTeamHeadline {
    padding: 1vmin;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.2vmin;
    margin: 0 0 0 0;
    color: var(--ac);
    border: 1px solid var(--bg);
    border-bottom: none;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}
.teamTabel_, th, td {
    border: 1px solid;
  }
.teamTabel_ {
    border-collapse: collapse;
}
.teamTabel_ th {
    font-family: var(--Head2);
    font-size: 1.8vmin;
    font-weight: normal;
}
.teamTabel_ td {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.7vmin;
}
.teamTabel_ th,td {
    text-align: left;
    padding: 1vmin;
}
.teamEditTdDiv {
    padding: 1.5vmin 0;
    display: flex;
    justify-content: space-around;
    border: 1px solid var(--bg);
    border-top: none;
}

/* media query *************************************** */

@media screen and (max-width: 850px) {

    /* under Img */
    .teamDesAll{
        flex-direction: column;
        gap: 5vmin;
    }
    .teamDesDiv {
        width: 100%;
    }
    /* header */
    .teamDesHeaderDiv {
        margin-top: -1.1vh;
    }
    .teamHeaderPara {
        font-size: 2vh;
    }
    /* header [end] */
    .teamPlayerPara {
        font-size: 2.7vmin;
    }

    /* under Des */
    .underTeamDesAll{
        flex-direction: column;
        gap: 2vmin;
    }
    .underTeamDesBox {
        width: 100%;
    }
    .trainerBox{border-radius: 0 0 0 0px;}
    .teamTableBox{border-radius: 0 0 10px 10px;}

    /* Calendar */
    .iframeCalendar {
        width: 100%;
        height: 500px
    }

    /* game report */
    .GRHeadlinePara {
        font-size: 3.2vmin;
    }
    .GRConHeadParas {
        font-size: 3vmin;
    }
    .romanFontSpan {
        font-size: 3.2vmin;
    }
    .GRConDivforDes {
        width: 90%;
    }
    .GRConTitle {
        font-size: 3.4vmin;
    }
    .GRConText {
        font-size: 3vmin;
    }
}