:root {
    --blue-main: rgb(54, 62, 130);
    --off-white: rgb(210, 210, 210);
    --off-off-white: rgb(170, 170, 170);
    --warm: #e97325;
    --grey-light: rgb(123, 132, 143);
    --grey-dark: rgb(22, 23, 26);
    --grey-medium-dark: rgb(38, 42, 49);
    --grey-medium-dark-dark: rgb(15, 16, 17);
    --twitch: #a970ff;
    --warm2: #cc815e;
    --green: #5d925d;
    --cyan: rgb(50, 153, 177);
    --off-yellow: rgb(204, 199, 178);
    --gold: rgb(199, 140, 29);
    --silver: rgb(223, 219, 219);
    --bronze: rgb(155, 76, 45);
}

/* ------------- */
/* General stuff */
/* ------------- */

/* cotrol horizontal overflow */
html, body {
    width: auto !important;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: var(--off-white);
}

body{
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--off-white)
}

a, a:hover {
    text-decoration: none;
}

button {
    border: none;
    background: none;
}


#wrapper {
    background: url("head_back2.1e09cea9db97.png") no-repeat;
    background-attachment: scroll;
    background-size: 100% auto;
    background-color: var(--blue-main);
    min-height: 100vh;
}

.section-title {
    background: linear-gradient(130deg, rgba(174, 43, 11, 0) 5%, rgba(99, 86, 67, 0.2) 10%, rgba(42,44,58,0) 50%);
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    font-style: italic;
    color: var(--off-white)
}
.section-title a {
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    font-style: italic;
    color: var(--off-white)
}


/* -------------- */
/* Forms          */
/* -------------- */
.form1 input{
    background-color: var(--grey-medium-dark-dark);
    border: none;
    padding: 0.5rem;
    color: var(--off-white);
    border-radius: 1px;
}
.form1 input:focus{
    outline: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}
.form1 .errorlist {
    margin-bottom: 0;
}
.form1 ::placeholder {
    color: var(--grey-light);
}
.form1 input[type="submit"] {
    color: var(--off-white)
}
.form1 input[type="submit"]:hover {
    color: var(--warm)
}
.form1 input[type="date"] {
    width: auto !important;
    color: var(--off-off-white);
}
.form1 input[type="date"]:focus {
    background-color: var(--grey-medium-dark-dark);
    color: var(--off-white);
}
.form1 textarea {
    background-color: var(--grey-medium-dark-dark);
    padding: 0.5rem;
    border: none;
    color: var(--off-off-white);
}
.form1 textarea:focus {
    outline: 1px solid var(--border-color) !important;
    color: var(--off-white);
}
.form1 span {
    color: var(--off-off-white)
}
/* -------------- */
/* Arrow          */
/* -------------- */
.arrow {
    border: solid var(--warm);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 2px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

a[aria-expanded="false"] .arrow {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -webkit-transition: transform 0.25s ease;
    -o-transition: transform 0.25s ease;
    transition: transform 0.25s ease;
}

a[aria-expanded="true"] .arrow {
    transform: rotate(-135deg) translate(-0.1rem, -0.2rem);
    -webkit-transform: rotate(-135deg) translate(-0.1rem, -0.2rem);

    -webkit-transition: transform 0.25s ease;
    -o-transition: transform 0.25s ease;
    transition: transform 0.25s ease;
}

.arrow-title {
    border-color: var(--off-off-white);
    border-width: 0 2px 2px 0;
    padding: 0.2rem;
    margin: 0.125rem;
    margin-left: 0.5rem;
}


/* -------------- */
/* Download button*/
/* -------------- */
.button-download {
    height: 20px;
    width: 20px;
    display: inline-flex;
    vertical-align: middle;
    fill: var(--grey-light);
}

.button-download svg {
    fill: var(--grey-light);
    height: 20px;
    width: 20px;
}

.button-download svg:hover {
    fill: var(--warm);
    height: 20px;
    width: 20px;
}

@media (max-width: 576px) {
    .button-download svg, .button-download svg:hover, .button-download {
        height: 20px;
        width: 17px;;
    }
}
/* -------------- */
/* Header Section */
/* -------------- */

.WA-logo {
	font: 3vw/1 'Impact', sans-serif;
    color: var(--warm);
}

.kaos-league-logo {
    display: inline-block;
	white-space: nowrap;
	filter: url(#filter);
	outline: none;
	color: var(--off-white);
	font: 6vw/1 'Impact', sans-serif;
}


.head svg {
	position: absolute;
	width: 0;
	height: 0;
}

#top-bar{
    padding: 0;
    background-color: var(--grey-dark);
    border-bottom: 1px solid var(--grey-medium-dark);
}
#top-bar a {
    color: var(--off-white);
    padding: 0rem;
    text-decoration: none;
}
#top-bar a:hover {
    color: var(--warm);
}
#discordMenu {
    border: none;
    padding: 0;
    background: none;
}
#discordMenu .dropdown-item {
    background: none;
    padding: 0;
}
#profileMenu {
    background-color: var(--grey-medium-dark-dark);
    border-radius: 1px;
    padding: 0.5rem 0rem;
}
#profileMenu .dropdown-item {
    padding: 0.25rem 0.5rem;
}
#profileMenu .dropdown-item:hover {
    background-color: var(--grey-medium-dark-dark);
    color: var(--warm)
}

.head .navbar-collapse { 
    background: none; 
} 
.head .navbar-dark {
    background-color: none;
}
.head .navbar-dark .navbar-nav .nav-link {
    background-color: rgba(5,10,15,.75);
    color: var(--off-white);
    padding: .25rem 2rem;
    border: 1px solid var(--grey-medium-dark);
    border-radius: 1px; 
    overflow: hidden;
    position: relative;
}

.head .navbar-dark .navbar-nav .nav-link:after {
    background: #fff;
    content: "";
    height: 155px;
    left: -75px;
    opacity: .2;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    width: 2rem;
    z-index: 0;
}

.head .navbar-dark .navbar-nav .nav-link:hover{
    color: var(--warm);
}

.head .navbar-dark .navbar-nav .nav-link:hover:after{
    left: 120%;
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

/* MOBILE NAV */
@media (max-width: 767px) {
    .head .navbar-dark {
        background-color: var(--grey-medium-dark-dark);
        border-bottom: 1px solid var(--grey-medium-dark);
    }
    .head .navbar-dark .navbar-nav .nav-link {
        border:none;
        background-color: var(--grey-dark);
        padding: 0.5rem;
        border-top: 1px solid var(--grey-medium-dark);
    }
}
.navbar-toggler {
    margin: 0.5rem; 
}


/* -------------- */
/* Main Section   */
/* -------------- */
.container-main {
    border: 1px solid var(--grey-medium-dark);
    border-radius: .125rem;
    background-color: var(--grey-dark);
    min-height: 300px;
    box-shadow: 0 0.25rem 0.5rem -0.125rem rgba(0, 0, 0, .16);
}
@media (max-width: 767px) {
    .container-main {
        border: none;
    }
}
.announcement-box {
    border-radius: 1px;
    background-color: var(--grey-medium-dark-dark);
    font-size: 0.9rem;
}
.announcement-box-date {
    color: var(--twitch);
    font-style: italic;
    font-size: 0.8rem;
}
/* -------------- */
/* Schedule       */
/* -------------- */
.schedule-row {
    border-radius: 1px;
    background-color: var(--grey-medium-dark-dark);
}

.schedule-row-middle {
    font-size: 0.9rem;
}

.schedule-row-middle span {
    color: var(--off-off-white);
    font-size: 0.9rem;
}
.schedule-row-middle b {
    color: var(--green);
    font-size: 1rem;
}
.backlog-btn a {
    color: var(--off-off-white);
}
.backlog-btn a:hover {
    color: var(--warm);
}
.user-schedule-league {
    -webkit-box-shadow: 0 0 2px 0px var(--warm);
    box-shadow: 0 0 2px 0px var(--warm);
}
.user-schedule-cup {
    -webkit-box-shadow: 0 0 2px 0px var(--cyan);
    box-shadow: 0 0 2px 0px var(--cyan);
}
.user-schedule-title {
    font-size: 0.8rem;
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
}
.schedule-playoff-q  {
    color : var(--off-white);
    text-decoration: underline;
}
.schedule-playoff-s  {
    color: var(--silver);
    text-decoration: underline;
}
.schedule-playoff-b  {
    color: var(--bronze);
    text-decoration: underline;
}
.schedule-playoff-f  {
    color: var(--gold);
    text-decoration: underline;
}
/* -------------- */
/* Display Game   */
/* -------------- */
.game-row {
    background-color: var(--grey-medium-dark);
    border-bottom: 1px solid var(--grey-dark);
}
.game-score-row {
    background-color: var(--grey-medium-dark);
    border-bottom: 1px solid var(--grey-dark);
    border-radius: 1px;
}
.game-score {
    font-family: 'Prompt', sans-serif;
    font-size: 0.8rem;
}
.game-rounds {
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.5); 
    box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.5);
    font-size: 0.8rem;
}
.details-row {
    font-size: 0.8rem;
}
.details-row .game-points {
    font-size: 1rem;
    font-family: 'Prompt', sans-serif;
    color: var(--green);
}
.game-comment {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--off-off-white);
}

.round-row {
    border-top: 1px solid var(--grey-medium-dark-dark);
}

.round-row-middle span {
    color: var(--off-off-white);
    padding-bottom: 0.1rem;
}
.round-row-middle .round-draw {
    font-weight: 500;
    background-color: var(--grey-light);
    color: black;
}
.round-row-middle .game-winner {
    background: linear-gradient(0deg, rgba(77, 126, 65, 0.5) 30%, rgba(0, 0, 0, 0.15) 60%);
}
.round-row-middle .game-loser {
    background: linear-gradient(0deg, rgba(170, 88, 67, 0.4) 30%, rgba(0, 0, 0, 0.15) 60%);
}
.round-row-sides {
    color: var(--off-off-white);
}
.round-row-sides span {
    font-weight: 500;
    color: var(--warm2);
}
.duration{
    font-family: 'Seven Segment', sans-serif;
    color: var(--off-yellow);
    font-size: 1rem;
    margin-top: 0.25rem;
}

.round_counter {
    color: black;
}

.cave {
    background-color: rgba(12, 0, 0, 0.4);
    background-image: url("cave_back.b3a0f7a182dd.png");
    background-size: auto 100%;
}
.island {
    background-color: rgba(2, 3, 35, 0.3);
    background-image: url("island_back.5d85d77df32e.png");
    background-size: auto 100%;
}

.round-events {
    color: var(--warm);
}

.profile-link {
    color: var(--off-off-white);
    text-decoration: none;
}
.profile-link-bright {
    color: var(--off-white);
    text-decoration: none;
}
.profile-link:hover, .profile-link-bright:hover {
    color: var(--warm);
}
.flag-hidden {
    opacity: 0;
}

.stream-link, .stream-link svg {
    text-decoration: none;
    color: var(--twitch);
    fill: var(--twitch);
}
.stream-link:hover, .stream-link:hover svg{
    color: var(--warm);
    fill: var(--warm);
}


/* -------------- */
/* Table          */
/* -------------- */
.table-overflow {
    overflow-x: auto;
}
@media (max-width: 768px) {
    .table-overflow {
        padding-bottom: 1rem;
    }
}

.standard-table {
    border-radius: 1px;
    border: 1px solid var(--grey-medium-dark); 
    width: 100%;   
    background-color: var(--grey-medium-dark-dark);
    text-align: center;
}
.standard-table thead tr th {
    font-weight: 500;
    border-right: 1px solid var(--grey-medium-dark);  
    border-bottom: 1px solid var(--grey-medium-dark);  
    padding: 0.25rem;  
    color: var(--off-off-white)
}
.standard-table thead tr th nobr {
    color: var(--off-off-white);
}

.standard-table tbody tr td {
    border-right: 1px solid var(--grey-medium-dark);    
    font-weight: 400;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    color: var(--off-off-white)
}

.standard-table tbody tr .td-number {
    color: var(--warm);
    border-right: none;  
}

.standard-table thead tr .th-number {
    border-right: none;  
}
.tr-light {
    background-color: var(--grey-dark);
}


/* -------------- */
/* Profile        */
/* -------------- */

.profile-main {
    background-color: var(--grey-medium-dark-dark);
}
.profile-title {
    font-family: 'Prompt', sans-serif;
    font-weight: 400;
    font-size: 2rem;
}

.profile-bio p {
    color: var(--off-off-white);
}




/* -------------- */
/* League         */
/* -------------- */
#SeasonTable th, #SeasonTable td, #SeasonTable td > * {
    text-align: center;
    padding-top: 0.25rem;
    padding-top: 0.25rem;
    color: var(--off-off-white);
}
#SeasonTable th {
    background-color: var(--grey-medium-dark-dark);
}
#SeasonTable td {
    border-top: 1px solid var(--grey-medium-dark-dark)
}
#SeasonTable{
    border: 1px solid var(--grey-medium-dark)
}
.season-table-section {
    border-right: 1px solid var(--grey-medium-dark);
}
/* Datatables Colors */
#SeasonTable > tbody > tr.even > * {
    background-color: var(--grey-medium-dark-dark);
}
#SeasonTable > tbody > tr.odd > * {
    background-color: var(--grey-dark);
}
#SeasonTable > tbody > tr.odd > .sorting_1 {
    background-color: rgb(34, 35, 53);
}
#SeasonTable > tbody > tr.even > .sorting_1, #SeasonTable > thead > tr > th.sorting_asc, #SeasonTable > thead > tr > th.sorting_desc {
    background-color: rgb(23, 24, 30)
}
#SeasonTable > tbody > tr.odd:hover > * {
    box-shadow: inset 0 0 0 9999px rgba(75, 76, 87, 0.2);
}
#SeasonTable > tbody > tr.even:hover > * {
    box-shadow: inset 0 0 0 9999px rgba(101, 102, 116, 0.2);
}
#SeasonTable #ComboHead {
   background-color: rgb(36, 30, 53); 
}
#SeasonTable #FastWinHead {
    background-color: rgb(35, 40, 80); 
}
/* Datatables Pagination   */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: none;
    background-color: var(--grey-medium-dark);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: none;
    border: none;
    color: var(--warm)!important;
    background-color: var(--grey-medium-dark-dark);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    border: none;
    background: none;
    text-decoration: underline !important;
    cursor:default;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: none;
    border: none;
}
#SeasonTable_paginate .next, #SeasonTable_paginate .previous {
    background: none;
}
/* Matches Pagination   */
.pagination-number {
    display: inline-block;
    text-decoration: none;
    color: var(--off-white);
    border-radius: 1px;
    background-color: var(--grey-medium-dark);
}
.pagination-number:hover {
    color: var(--warm);
    background-color: var(--grey-medium-dark-dark);
}








/* -------------- */
/* INFO           */
/* -------------- */
.get-stiky {
    position: -webkit-sticky;
    position: sticky;
    top: 2.5rem;
}

.sidebar-nav {
    padding: 1.5rem;
    background-color: var(--grey-medium-dark);
    border-radius: var(--kaos-border-radius);
}

.sidebar-nav ul {    
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav ul li {    
    margin: 0;
}

.sidebar-nav > ul > li > a {    
    display: block;
    padding: .5rem 1rem;
    border-radius: var(--kaos-border-radius);
    color: var(--off-off-white);
    transition: all .2s;
}

.sidebar-nav > ul > li > a:hover {    
    background-color: var(--grey-dark);
    color: var(--off-white);
}

.sidebar-nav > ul > li > ul {    
    margin-left: 1.5rem;
    padding-left: 1.5rem;
    list-style: disc;
}

.sidebar-nav > ul > li > ul > li a {    
    display: block;
    padding: 0rem 1rem;
    border-radius: var(--kaos-border-radius);
    color: var(--off-off-white);
    transition: all .2s;
}

.sidebar-nav > ul > li > ul > li > a:hover {    
    color: var(--off-white);
}


/* CUP */

.PO-chart {
    background: radial-gradient(rgba(0, 0, 0, 0) 50%, rgba(12, 13, 14, 0.9) 100%);
}

.PO-table {
    border-collapse: separate;
    border-spacing: 1rem 0rem;
    width: 100%;
    margin-right: -1rem;
}
.PO-table tbody tr td {
    height: 2.25rem;
}
.PO-table .PO-slot {
    min-width: 12rem;
    background-color: var(--grey-medium-dark-dark);
    border: 1px solid var(--grey-medium-dark);   
    background-color: var(--grey-medium-dark-dark);
}
.PO-table .border-none {
    border: none;
}
.PO-table .PO-final-title {
    border: none;
    vertical-align: bottom;
    text-align: center;
}
.podium-table tr td {
    border: none;
    height: 2rem;
    padding: 0.25rem 1rem;
    text-align: center;
}
@media (min-width: 769px) {
    .podium-table tr td {
        min-width: 8rem;
    }
}
.podium-1 {
    color: var(--gold);
    font-family: 'Prompt', sans-serif;
}
.podium-2 {
    color: var(--silver);
    font-family: 'Prompt', sans-serif;
}
.podium-3 {
    color: var(--bronze);
    font-family: 'Prompt', sans-serif;    
}
.podium-bridge {
    background-image: url("bridge.81a9ca0980f8.png");
    background-repeat: repeat-x;
}
.cup-title {
    font-family: 'Prompt', sans-serif;
    font-style: italic;
    font-size: 2.5rem;
    color: var(--warm)
}
.cup-date {
    font-size: 1rem;
    font-style: italic;
    color: var(--off-off-white)
}
.dropdown-button {
    background-color: var(--grey-medium-dark);
    padding: 0.25rem 0.5rem;
    border-radius: 1px;
}
.dropdown-button:hover {
    color: var(--warm);
    background-color: var(--grey-medium-dark-dark);
}
#dropdown-menu {
    background-color: var(--grey-medium-dark-dark);
    border-radius: 1px;
    padding: 0.5rem 0rem;
}
#dropdown-menu .dropdown-item {
    padding: 0.25rem 0.5rem;
    color: var(--off-off-white)
}
#dropdown-menu .dropdown-item:hover {
    color: var(--warm);
    background-color: var(--grey-medium-dark-dark);
}



.button-general {
    background-color: var(--grey-medium-dark-dark);
    border: 1px solid var(--grey-medium-dark);
    padding: 0.5rem;
    color: var(--off-white);
    border-radius: 1px;
}
.button-general:hover {
    background: none;
    border: 1px solid var(--grey-medium-dark);
    color: var(--warm)!important;
    background-color: var(--grey-medium-dark-dark);
}


.terrain-card {
    align-items: center;
    padding: 8px;
    cursor: pointer;
    border-radius: 1px;
    background-color: var(--grey-medium-dark-dark);
    text-align: center;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05);
}

.terrain-card.disabled {
    opacity: 0.3;
    cursor: pointer;
}

.terrain-img {
    height: 32px;
    width: 32px;
    margin-right: 12px;
    object-fit: cover;
}

.terrain-text {
    text-overflow: ellipsis;
    overflow: hidden;
}