div.swap-player {
    height: 100%;
    width: 100%;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

div.swap-player .ttimes {
    height: 100%;
    width: 38%;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    margin-block: 1rem;
}

div.swap-header {
    display: grid;
    place-items: center;
    background-color: navy;
    color: whitesmoke;
    height: 4vh;
    min-height: 34px;
}

div.swap-body {
    height: 86vh;
    background-color: transparent;
    overflow: auto;

}

td.swap-hidden {
    display: none;
}


div.swap-player .memberlist {
    height: 99%;
    width: 15%;
    background-color: transparent;
    margin-block: 1rem;

}

table.swap-members {
    width: 99%;
}

table.swap-ttimes {
    width: 99%;

}

p.swap {
    margin: .2vh;
    color: whitesmoke;

}

p.note{
    margin:0;
    margin-top:1rem;
}

p.source,
p.dest {
    font-size: 2vw;
    padding: .3rem;
    background: #ddd;
    border: 1px solid navy;
    color: navy;
    margin-left: 2%;
    width: 28vw;
    border-radius: .5rem;
}

/*top right bottom left*/
div.replace-dialog {

    margin-left: 5vw;
    margin-top: 4vh;
    height: 26vh;
    width: 30vw;
    background-color:  var(--tr_even);
    display: flex;
    flex-direction: column;
    gap: 1rem;

}

div.replace-note {

    margin-left: 5vw;
    margin-top: 4vh;
    height: 26vh;
    width: 30vw;
    background-color: silver;
    display: flex;
    flex-direction: column;
    gap: 1rem;

}

.replace-row {
    display: flex;
    flex-direction: row;
    width: 98%;
    background-color: transparent;
    height: 8vh;
    margin-inline: 1%;
}

.replace-column {
    /* display: flex;
     flex-direction: column;
     background-color: #3c763d;*/
}

button.swap-replace {
    height: 6vh;
    min-height: 32px;
    margin-inline: 5%;
    margin-bottom: 1rem;
    border-radius: .4rem;
}