/***********************************************************************
/ pairing settings
/ Copyright (C) Logic Lovers Inc.
/ Released under the MIT License, https://opensource.org/licenses/MIT
/***********************************************************************/

/***********************************************************************
/ all
/***********************************************************************/
#loIdDivSwissTourney {
    --iDivMainPaddingUD: 24px;
    --iDivMainPaddingLR: calc( 4px + 20px * var(--bWideDevice) );
    margin: 1em auto;
    padding: 0;
    font-family: 'Noto Sans JP',sans-serif;
    background-color: #fbffff;
}
#loIdDivSwissTourney .maincontainer {
    magin: 0;
    padding: var(--iDivMainPaddingUD) var(--iDivMainPaddingLR);
}

/***********************************************************************
/ match grid
/***********************************************************************/
#loIdDivSwissTourney .matchgrid {
    border: 4px double #8f7f33;
    margin-top: 0.5em;
    padding: 1px;
}

/***********************************************************************
/ ranking
/***********************************************************************/
#loIdDivSwissTourney .rankinglastround {
    font-size: 135%;
    font-weight: bold;
    text-decoration: underline;
}
#loIdDivSwissTourney .rankingcontainer {
    margin-top: 2em;
}
#loIdDivSwissTourney .rankingcontainer .gridhead,
#loIdDivSwissTourney .rankingcontainer .griditem {
    padding: 0.2em calc( 0.2em + 0.7em * var(--bWideDevice) );
}
#loIdDivSwissTourney .rank1,
#loIdDivSwissTourney .rank2,
#loIdDivSwissTourney .rank3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    color: white;
}
#loIdDivSwissTourney .rank1 {
    width: 1.3em;
    height: 1.3em;
    font-size: 120%;
    padding-bottom: 0.1em;
    /*background: linear-gradient(135deg, #ffd700, #ffa500);*/
    background: linear-gradient(135deg, #ffffff, #efb500);
}
#loIdDivSwissTourney .rank2 {
    width: 1.2em;
    height: 1.2em;
    font-size: 110%;
    padding-bottom: 0.07em;
    /*background: linear-gradient(135deg, #c0c0c0, #a8a8a8);*/
    background: linear-gradient(135deg, #ffffff, #989898);
}
#loIdDivSwissTourney .rank3 {
    width: 1.15em;
    height: 1.15em;
    font-size: 105%;
    padding-bottom: 0.05em;
    /*background: linear-gradient(135deg, #cd7f32, #8b4513);*/
    background: linear-gradient(135deg, #ffffff, #7b3503);
}

/***********************************************************************
/ round result
/***********************************************************************/
#loIdDivSwissTourney .roundresultcontainer {
    margin-top: 2.5em;
    font-size: 95%;
}
#loIdDivSwissTourney .roundresulttitle {
    font-size: 110%;
    font-weight: bold;
}
#loIdDivSwissTourney .roundresultgrid {
    border: 2px solid #333300;
    margin-top: 0.2em;
}

/***********************************************************************
/ option bar
/***********************************************************************/
#loIdPairingOptionBar {
    color: white;
    background-color: #99eeff;
    margin-top: 3em;
}
#loIdPairingOptionBar:hover {
    background-color: #88ddff;
    cursor: pointer;
    margin-bottom: 0;
}
#loIdPairingOptionBar.optionopen::after {
    content: "▲";
}
#loIdPairingOptionBar.optionclose::after {
    content: "▼";
}
#loIdPairingOptionContent {
    overflow: hidden;
    background-color: #e0ffff;
    --sBgColorOptionSubContent: #f3ffff;
    margin: 0;
    padding: 0;
}
#loIdPairingOptionContent.optionopen {
    height: auto;
    padding-bottom: 1.2em;
}
#loIdPairingOptionContent.optionclose {
    height: 0px;
}

/***********************************************************************
/ manual pairing and player add/sub
/***********************************************************************/
#loIdDivSwissTourney .manualpairingcontainer,
#loIdDivSwissTourney .playeraddcontainer,
#loIdDivSwissTourney .playersubcontainer {
    margin: 1.0em 0.2em;
    padding: 0.8em 0.2em;
    background-color: var(--sBgColorOptionSubContent);
}
#loIdDivSwissTourney .manualpairingtitle,
#loIdDivSwissTourney .playeraddtitle,
#loIdDivSwissTourney .playersubtitle {
    font-size: 115%;
    font-weight: bold;
    margin: 0.5em 0em;
}
#loIdDivSwissTourney .manualpairingcontainer input[type="button"],
#loIdDivSwissTourney .playeraddcontainer input[type="button"],
#loIdDivSwissTourney .playersubcontainer input[type="button"] {
    -webkit-appearance: none;
    margin: 0.3em 0.2em;
    padding: 0.2em 0.5em;
}
#loIdDivSwissTourney .manualpairingcontainer .grid {
    margin-bottom: 0;
}
#loIdDivSwissTourney .playeraddtextcontainer {
    margin: 0.3em 0.2em;
}
#loIdDivSwissTourney .playeraddbuttoncontainer {
    margin: 0.3em 0.2em;
}

/***********************************************************************
/ config
/***********************************************************************/
#loIdDivSwissTourney .configcontainer {
    background-color: var(--sBgColorOptionSubContent);
    margin: 0.8em 0.2em;
    padding: 0.5em 0.2em;
}
#loIdDivSwissTourney .configmaintitle {
    font-weight: bold;
    font-size: 115%;
    margin: 0.5em 0em;
}
#loIdDivSwissTourney .configsubtitle {
    font-weight: bold;
    margin: 0.2em 0em 0em 0.2em;
}
#loIdDivSwissTourney .configsubcontainer {
    margin: 0.5em 0.2em;
    padding: 0.5em 0.7em;
    --sBgColorGridItem: #f9ffff;
    background-color: var(--sBgColorGridItem);
}
#loIdDivSwissTourney .configsubcontainer .grid {
    margin: 0.2em 0em 1.2em 0.5em;
}
#loIdDivSwissTourney .configcontainer .griditem {
    padding: 0.2em 0.1em;
}
#loIdDivSwissTourney #loIdDivPairingConfigPointOnly {
    padding-left: 1.0em;
}
#loIdDivSwissTourney .configsubcontainer ul {
    margin: 0.3em 0.2em;
}
#loIdDivSwissTourney .configsubcontainer select {
}
#loIdDivSwissTourney .configsubcontainer input[type="button"] {
    -webkit-appearance: none;
    margin: 0.3em 0.2em;
    padding: 0.2em 1.0em;
    font-size: 85%;
}

/***********************************************************************
/ csv
/***********************************************************************/

#loIdDivSwissTourney .csvuploadcontainer {
    margin: 3.5em auto 0.7em auto;
    --iFileSelectorMaxWitdh: calc( 100vw - ( var(--iDivMainPaddingLR) + var(--iMainArticlePaddingLR) + 4px + 2px + 4px + 0.9em + 0.3em ) * 2 );
}
#loIdDivSwissTourney .filetitle {
    max-width: var(--iFileSelectorMaxWitdh);
}
#loIdDivSwissTourney .fileselector {
    border: 2px solid #333300;
    margin-top: 0.2em;
}
#loIdDivSwissTourney .filednd {
    max-width: var(--iFileSelectorMaxWitdh);
    padding: 0.3em;
}
input[type="file"] {
    max-width: var(--iFileSelectorMaxWitdh);
}


/***********************************************************************
/ time
/***********************************************************************/
#loIdDivSwissTourney .timegrid {  
    --sBgColorGridItem:#eff7ff;
    margin: 0px auto;
    padding: 0px;
}
#loIdDivSwissTourney .alerm {
    margin-top: 0px;
    color: #557799;
    font-size: 95%;
}
#loIdDivSwissTourney .alerm.played {
    color: #dd5555;
}

/***********************************************************************
/ classes
/***********************************************************************/
#loIdDivSwissTourney .roundcount {
    font-size: 135%;
    font-weight: bold;
    text-decoration: underline;
}
#loIdDivSwissTourney .notice {
    font-weight: bold;
    color: red;
    line-height: 1.2em;
}

/***********************************************************************
/ player entry
/***********************************************************************/
#loIdDivSwissTourney textarea {
    max-width: calc( 100% - var(--iDivMainPaddingLR) * 2 - 4px * 2 );
    min-height: 8em; /* 15em; */
    overflow: auto;
}
#loIdDivSwissTourney .playerentrycontainer .explanation {
    color: #555;
    white-space: pre;
    line-height: 1.2em;
}

/***********************************************************************
/ input
/***********************************************************************/
/* buttons */
#loIdDivSwissTourney input[type="button"] {
    -webkit-appearance: none;
    padding: 0.5em 5em;
}
#loIdDivSwissTourney input[type="button"].mainstep {
    border: 3px groove #333300;
    font-weight: bold;
}
#loIdDivSwissTourney input[type="button"].mainstep:disabled {
    border: 3px groove #999999;
    font-weight: bold;
}
#loIdDivSwissTourney input[type="button"].confirmbutton {
    -webkit-appearance: none;
    padding: 0.5em 3.5em;
}
#loIdDivSwissTourney .griditem input[type="text"] {
    -webkit-appearance: none;
    margin: 0;
    padding: 0.2em 0.5em;
    width: 3em;
}

/***********************************************************************
/ sortable list
/***********************************************************************/
#loIdDivSwissTourney #loIdUlPairingScoreDisable {
    color: #999999;
    background-color: #dfdfdf;
}
#loIdDivSwissTourney #loIdUlPairingScoreDisable .grab {
    color: black;
}