.theme{
    height:100%;
    width:100%;
}
.bracket{
    display:flex;
    flex-direction:row;
    position:relative;
}
.column{
    display:flex;
    flex-direction:column;
    min-height:100%;
    justify-content:space-around;
    align-content:center;
}
.match{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:350px;
    max-width:350px;
    height:62px;
    margin:12px 24px 12px 0;
}
@media(min-width:768px){
    .bracket{
        display:flex;
        width:100%;
        padding:0 15px 0 15px;
    }
}
@media(max-width:767px){
    .bracket{
        padding:0 30px 0 30px;
    }
}
.match .match-top{
    border-radius:2px 2px 0 0;
}
.match .match-bottom{
    border-radius:0 0 2px 2px;
}
.match .team{
    display:flex;
    align-items:center;
    width:100%;
    height:100%;
    border:1px solid black;
    position:relative;
}
.match .team span{
    padding-left:8px;
}
.match .team span:last-child{
    padding-right:8px;
}
.match .team .score{
    margin-left:auto;
}
.match .team:first-child{
    margin-bottom:-1px;
}
.match-lines{
    display:block;
    position:absolute;
    top:50%;
    bottom:0;
    margin-top:0px;
    right:-1px;
}
.match-lines .line{
    background:red;
    position:absolute;
}
.match-lines .line.one{
    height:1px;
    width:12px;
}
.match-lines .line.two{
    height:44px;
    width:1px;
    left:11px;
}
.match-lines.alt{
    left:-12px;
}
.match:nth-child(even) .match-lines .line.two{
    transform:translate(0, -100%);
}
.column:first-child .match-lines.alt{
    display:none;
}
.column:last-child .match-lines{
    display:none;
}
.column:last-child .match-lines.alt{
    display:block;
}
.column:nth-child(2) .match-lines .line.two{
    height:88px;
}
.column:nth-child(3) .match-lines .line.two{
    height:175px;
}
.column:nth-child(4) .match-lines .line.two{
    height:346px;
}
.column:nth-child(5) .match-lines .line.two{
    height:690px;
}
.column:nth-child(6) .match-lines .line.two{
    height:1378px;
}
.theme-dark-trendy .match-lines .line{
    background:#36404e;
}
.theme-dark-trendy .team{
    background:#ffffff;
    color:#6a6d6f;
    border:2px solid transparent;
}
.theme-dark-trendy .team:first-child{
    margin-bottom:2px;
}
.theme-dark-trendy .team:last-child{
    margin-top:2px;
}
.theme-dark-trendy .winner-top .match-top,
.theme-dark-trendy .winner-bottom .match-bottom{
    background:#2f4050;
    color:#ffffff;
    z-index:1;
}
.theme-dark-trendy .winner-top .match-top .score,
.theme-dark-trendy .winner-bottom .match-bottom .score{
    color:#ffffff;
}
.theme-dark-trendy .match{
    margin-right:48px;
}
@media(min-width:768px){
    .theme-dark-trendy .last-match{
        margin-right:0;
    }
}
@media(max-width:767px){
    .theme-dark-trendy .last-match{
        margin-right:30px;
    }
}
.theme-dark-trendy .match .team .name{
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:0.5px;
}
.theme-dark-trendy .match .seed{
    font-size:10px;
    min-width:8px;
}
.theme-dark-trendy .match .match-top{
    border-radius:0;
}
.theme-dark-trendy .match .match-bottom{
    border-radius:0;
}
.theme-dark-trendy .match-lines{
    opacity:0.75;
    right:-12px;
}
.theme-dark-trendy .match-lines .line{
    background:#2f4050;
}
.theme-dark-trendy .match-lines.alt{
    left:-24px;
}
.theme-dark-trendy .team{
    overflow:hidden;
}
.theme-dark-trendy .winner-top .match-top .score:before,
.theme-dark-trendy .winner-bottom .match-bottom .score:before{
    background:#ffffff;
}
.theme-dark-trendy .score:before{
    opacity:0.15;
    position:absolute;
    z-index:1;
    content:"";
    display:block;
    background:#000000;
    min-height:50px;
    min-width:70px;
    transform:translate(-12px, 0) rotate(25deg);
}
.disable-image .image,
.disable-seed .seed,
.disable-name .name,
.disable-score .score{
    display:none !important;
}
.disable-borders{
    border-width:0px !important;
}
.disable-borders .team{
    border-width:0px !important;
}
.disable-seperator .match-top{
    border-bottom:0px !important;
}
.disable-seperator .match-bottom{
    border-top:0px !important;
}
.disable-seperator .team:first-child{
    margin-bottom:0px;
}
.drag-hint{
    position:relative;
    top:15px;
    left:55%;
    transform:translateX(-50%);
    font-size:4rem;
    color:#6a6d6f;
    pointer-events:none;
    display:flex;
    align-items:center;
    justify-content:center;
}
.drag-hint i{
    position:relative;
    z-index:2;
    animation:hand-move 1.5s infinite ease-in-out;
}
@keyframes hand-move{
    0%{
        transform:translateX(0) scale(1);
    }
    50%{
        transform:translateX(-30px) scale(1.1);
    }
    100%{
        transform:translateX(0) scale(1);
    }
}
.drag-trail{
    position:relative;
    width:60px;
    height:60px;
    background:repeating-linear-gradient(0deg, rgb(204, 204, 204), rgba(185, 185, 185, 0.1) 2px, #0000 4px);
    border-radius:100%;
    top:30px;
    right:30px;
    transform:translate(-50%, -50%) scaleX(0.5);
    z-index:1;
    animation:trail-move 1.5s infinite ease-in-out;
    opacity:0.3;
}
@keyframes trail-move{
    0%{
        transform:translate(-10px, -50%) scaleX(0.5);
        opacity:0.3;
    }
    50%{
        transform:translate(-50%, -50%) scaleX(1.2);
        opacity:0.5;
    }
    100%{
        transform:translate(-10px, -50%) scaleX(0.5);
        opacity:0;
    }
}