.tichannel__input {
    border-radius: .33rem;
    appearance: none;
    border: 1px solid #949494;
    flex-grow: 1;
    margin-left: 0;
    margin-right: 0;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
    text-decoration: unset!important;
}

.tichannel__input:focus:not(:disabled) {
    outline: 3px solid #3858e9;
}

.tichannel__select {
    color: #272727;
    border-radius: .33rem;
    appearance: none;
    border: 1px solid #949494;
    flex-grow: 1;
    margin-left: 0;
    margin-right: 0;
    min-width: 3rem;
    padding: 8px;
    padding-right: 24px;
    text-decoration: unset!important;
    background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
}

.tichannel__select:focus:not(:disabled) {
    outline: 3px solid #3858e9;
}

.tichannel__button {
    color: #272727;
    border-radius: .33rem;
    appearance: none;
    border: 1px solid #949494;
    min-width: 3rem;
    padding: 8px;
}

.tichannel__button:focus:not(:disabled) {
    outline: 3px solid #3858e9;
}

.tichannel__button.on {
    outline: 3px solid #3858e9;
}

.tichannel {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.tichannel .container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    align-items: flex-end;
    justify-content: space-between;
}

.tichannel .container.nowrap {
    flex-wrap: nowrap;
}

.tichannel .column {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: calc( 50% - 10px );
    gap: 10px;
}

.tichannel .item {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.tichannel .pokemon-name-result {
    position: relative;
    color: #272727;
}

.tichannel .pokemon-name-list {
    border-radius: .33rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 0;
    top: 4px;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
}

.tichannel .pokemon-name-list div {
    padding: 0.5rem;
    background: #fff;
    border-bottom: 1px solid #949494;
}

.tichannel .pokemon-name-list div:hover,
.tichannel .pokemon-name-list .active {
    background: #eee;
}

.tichannel .pokemon-name-list div:first-child {
    border-top-left-radius: .33rem;
    border-top-right-radius: .33rem;
}

.tichannel .pokemon-name-list div:last-child {
    border-bottom-left-radius: .33rem;
    border-bottom-right-radius: .33rem;
}

.tichannel .iv-bar {
    display: flex;
    justify-content: space-around;
    background-color: #e2e2e2;
    border-radius: 20px;
}

.tichannel .iv-bar div {
    flex-grow: 1;
    height: 20px;
    border-right: 1px solid #fff;
}

.tichannel .iv-bar div:nth-child(5n+1) {
    border-left: 1px solid #fff;
}

.tichannel .iv-bar div:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-left: none;
}

.tichannel .iv-bar div:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-right: none;
}

.tichannel .iv-bar .active {
    background-color: #e1953c;
}

.tichannel .iv-bar .active-end {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.tichannel .iv-max .active {
    background-color: #d6837b;
}

.tichannel .iv-result {
    margin-block-start: 2rem;
}

.tichannel .iv-result .container {
    margin-block-end: 1rem;
    display: block;
}

.tichannel .iv-result header {
    padding: .66rem;
    position: relative;
    overflow: hidden;
    border-top-left-radius: .33rem;
    border-top-right-radius: .33rem;
}

.tichannel .iv-result .sl {
    background: linear-gradient( #60a5fa, #3b82f6 );
}

.tichannel .iv-result .hl {
    background: linear-gradient( #374151, #1f2937 );
}

.tichannel .iv-result .ml {
    background: linear-gradient( #a855f7, #9333ea );
}

.tichannel .iv-result .line {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
    width: .66rem;
    height: 5rem;
    rotate: 45deg;
    translate: -1rem -.66rem;
}

.tichannel .iv-result .sl .line {
    background: linear-gradient( #ef4444, #dc2626 );
}

.tichannel .iv-result .hl .line {
    background: linear-gradient( #eab308, #ca8a04 );
}

.tichannel .iv-result .ml .line {
    background: linear-gradient( #ec4899, #db2777 );
}

.tichannel .iv-result table {
    width: 100%;
    border-collapse: collapse;
    color: #272727;
}

.tichannel .iv-result th {
    background-color: #f9f9f9;
    padding: .33rem;
}

.tichannel .iv-result td {
    background-color: #fff;
    text-align: center;
    padding: .66rem;
    border-top: 1px solid #ddd;
}

.tichannel .iv-result td:first-child {
    border-bottom-left-radius: .33rem;
}

.tichannel .iv-result td:last-child {
    border-bottom-right-radius: .33rem;
}

.tichannel .ivs-result {
    position: relative;
    color: #272727;
}

.tichannel .ivs-list {
    border-radius: .33rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 0;
    top: 4px;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
}

.tichannel .ivs-list div {
    padding: 0.5rem;
    background: #fff;
    border-bottom: 1px solid #949494;
}

.tichannel .ivs-list div:hover,
.tichannel .ivs-list .active {
    background: #eee;
}

.tichannel .ivs-list div:first-child {
    border-top-left-radius: .33rem;
    border-top-right-radius: .33rem;
}

.tichannel .ivs-list div:last-child {
    border-bottom-left-radius: .33rem;
    border-bottom-right-radius: .33rem;
}

.tichannel .battle {
    margin-block: 1rem;
}

.tichannel .combat-result .column {
    color: #272727;
    background-color: #fff;
    gap: 4px;
    border-radius: .33rem;
    padding: 8px;
    box-sizing: border-box;
}

.tichannel .combat-result .self-type,
.tichannel .combat-result .opponent-type {
    display: flex;
    gap: 4px;
}

.tichannel .combat-result .self-shields,
.tichannel .combat-result .opponent-shields {
    display: flex;
    gap: 2px;
    justify-content: flex-end;
}

.tichannel .combat-result .self-cp,
.tichannel .combat-result .opponent-cp {
    text-align: right;
}

.tichannel .combat-result .self-action,
.tichannel .combat-result .opponent-action {
    text-align: center;
    height: 24px;
}

.tichannel .combat-result .hp-container {
    position: relative;
    background-color: #272727;
    height: 24px;
    border: 2px solid #949494;
    display: flex;
    flex-direction: row;
    padding: 2px;
}

.tichannel .combat-result .self-hp,
.tichannel .combat-result .opponent-hp {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #fff;
    font-weight: 700;
    text-shadow: 1px 1px 1px #272727;
}

.tichannel .combat-result .self-energy,
.tichannel .combat-result .opponent-energy {
    text-align: center;
}

.tichannel .combat-result .attack-container,
.tichannel .combat-result .defense-container {
    flex-grow: 0;
    text-align: center;
}

.tichannel .combat-result .buff {
    color: #00ffcc;
}

.tichannel .combat-result .debuff {
    color: #ff6666;
}

.tichannel .combat-result .timeline-container {
    width: 100%;
    text-align: center;
    margin-block: 1rem;
}

.tichannel .combat-result .combat-turn {
    width: 100%;
}