@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');

html {
  overflow: scroll;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

body {
    height: 100%;
    background-color: #fff;
    font-family: 'Roboto', sans-serif;   
    margin: 0;
    padding: 0;
    color: #333; 
    font-size: .9em !important;
    table-layout: fixed !important;
    overflow: visible;
}

h1 {
    text-align: center;
    margin-top: 15px;
    font-weight: 900;
    text-decoration: none;
}

a {
    text-decoration: none;
}

.logoRow {
    display: flex;
    justify-content: center; 
}

.mainLogo {
    height: 100%;
    width: 5.75em;
    display: flex;
}

.container {
    background-color: #f6f6f6;
    padding: 5px 15px;
    margin: 0 15px 15px 15px;
    table-layout: fixed !important;
}

.ppWelcome {
    font-size: 35px;
    outline: none;
    border: none;
    background: none;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    margin: .55em .5em;
    -webkit-filter:hue-rotate(165deg) brightness(125%);
    filter: hue-rotate(165deg) brightness(125%);
}

.ppStats {
    height: 30px;
    border-radius: 10px;
    cursor: pointer;
}

span.dtr-data {
    font-size: .9em !important;
}

.videoYT {
     font-size: 25px;
     line-height: 20px;
     outline: none;
     border: none;
     background: none;
     cursor: pointer;
}

.teamLogo {
    height: 100%;
    max-height: 45px;
    filter: drop-shadow(0px 0px 6px #fff);
}

td.detailsControl {
    background: url('../images/details_open.png') no-repeat center center;
    cursor: pointer;
}

tr.shown td.detailsControl {
    background: url('../images/details_close.png') no-repeat center center;
} 

table.dataTable.nowrap th {
    white-space: initial !important;
}

table.dataTable thead td {
    padding: 10px 10px !important;
}

thead input {
    width: 100%;
}

table.dataTable tbody th, table.dataTable tbody td {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-right:8px !important;
}

td ul li:last-child .dtr-data{
    white-space: initial;
}

table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th.dtr-control:before {
    line-height: 1em !important;
    transition: .25s;
    font-weight: bold;
    font-family: "FontAwesome" !important;
    content: '\f107' !important;
    transform: rotateZ(-180deg);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
    background-color: #888888 !important;
    transform: rotateZ(360deg);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody, table.dataTable thead th, table.dataTable thead td {
    border: none !important;
}

table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
    border-top: 1px solid #333 !important;
}

.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length {
    font-weight: bold;
}

.dataTables_wrapper .dataTables_length select {
    background-color: #f6f6f6 !important;
    border: none;
    text-decoration: none;
    font-family: "Roboto";
    font-weight: bold;
    font-size: 1em;
}

.dataTables_wrapper .dataTables_length option {
    background-color: #f6f6f6 !important;
    font-weight: bold;
}

/* Fix for Select and Add style to pagination
.dataTables_wrapper .dataTables_length > option:hover {
    outline: none;
    background-color: yellow !important;
}

.dataTables_wrapper .dataTables_length > option:active {
    outline-color: blue !important;
    background-color: red !important;
}*/

/*
#dkMain > thead::before {
    z-index: 2;
    content: "";
}

#dkMain > thead {
    height: 14px;
    background-color: purple;
    z-index: 2;
    position: sticky;
    display: table-caption;
    width: 100%;
    -moz-box-shadow: 5px 5px 12px rgba(0,0,0,.5);
    -webkit-box-shadow: 5px 5px 12px rgba(0,0,0,.5);
    box-shadow: 5px 5px 12px rgba(0,0,0,.5);   
}
*/
.fixMe {
    margin-top: 10px;
}

.colorRB {
    background-color: rgba(255,204,204) !important;
}

.colorWR {
    background-color: rgba(255,229,204) !important;
}

.colorTE {
    background-color: rgba(204,255,204) !important;
}

.colorQB {
    background-color: rgba(204,229,255) !important;
}

.colorDST {
    background-color: rgba(204,204,255) !important;
}

.colorPK {
    background-color: rgba(229,204,255) !important;
}

.textRB{
    color: red;
}

.dtr-control.textRB::before {
    background-color: red !important;
}

.textWR {
    color: rgb(255, 115, 0);
}

.dtr-control.textWR::before {
    background-color: rgb(255, 115, 0) !important;
}

.textTE {
    color: green;
}

.dtr-control.textTE::before {
    background-color: green !important;
}

.textQB {
    color: blue;
}

.dtr-control.textQB::before {
    background-color: blue !important;
}

.textDST {
    color: purple;
}
.dtr-control.textDST::before {
    background-color: purple !important;
}

.textPK {
    color: hotpink;
}

.dtr-control.textPK:before {
    background-color: hotpink !important;
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 80em) {  

}

/*Large devices (desktops, 1024px and up)*/
@media (min-width: 64em) and (max-width : 79em){  

}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 48em) and (max-width : 63em){  

}

/*Small devices (landscape phones, 640px and up)*/
@media (min-width: 40em)and (max-width : 47em) {
    span.dtr-data {
        font-size: .6em !important;
    }
}

/*Small devices (portrait phones, 480px and up)*/
@media (max-width : 39em) {
    
    span.dtr-data {
        font-size: 1.1em !important;
    }
    .ppWelcome {
        top: 0;
        left: 0;
        margin: 2.75em .75em;
    }

}