:root {
    --bg_odd: #fff;
    --bg_even: rgb(235, 235, 235);
    --gg-blue: #003184;
    --gg-red: #D32020;
}

#top .main_color, #top .main_color a {
    color: #4c4c4c;
}

#top .main_color a:hover {
    color: #000000;
}

.pika-label {
    text-decoration: underline;
}

.chart .legend {
    position: relative;
    height: 333px;
    overflow: auto;
}

.legend table {

    width: auto

}

.legendColorBox, .legendLabel {

    padding: 2px;

}

/* TABS */

#top .tabs_block {

    border-radius: 7px;

    font-size: 15px;

    font-weight: 700;

    text-transform: uppercase;

    float: left;

    margin: 0 0 2px 0;

    width: 100%;

}

#top .tabs_block .tab {

    padding: 1px 12px;

    margin: 0 1px;

    position: initial;

    border: 2px solid #727272;

    border-radius: 4px;

    font-size: 12px;

    width: 100px;

    text-align: center;

    display: inline-block;

}

#top .tabs_block .tab:hover {

     background: #ccc;

}

#top .tabs_block .tab.selected, #top .tabs_block .tab.selected:hover {

    color: #fff;

    background: var(--gg-blue);

}

#top .panel {

    display: none;

    clear: both;

    float: left;

    width: 100%;

}



#top .filter_cols_options_wrapper {

    height: 651px;

    overflow: auto;

}



#top .quick_date {

    padding: 0 3px;

    background: var(--gg-blue);

    float: left;

    width: 100%;

    margin-top: 2px;

    border: 0px solid black;

    border-radius: 3px;

    color: white;

}

#top .quick_date:hover {

    cursor: pointer;

    background: #d32020

}

#top .quick_date.selected {

    background: #d32020

}



/* form inputs */

.content, .sidebar {

    padding-top: 0;

}

#top .system_builder {

   min-width: 212px;

}

#top .system_builder, #top input[type='number'], #top input[type='text'],  #top input[type='checkbox'],  #top input[type='radio'], #top input[type='submit'],  #top select, #top button {

    font-family: 'Open Sans'; margin-bottom: 0; vertical-align: middle;

}

#top input[type='submit'], #reset {

    background-color: #D32020;

    color: #fff;

    font-weight: 700;

    margin: 0px 0% 0;

    width: 100%;

    border-radius: 3px;

    padding: 6px 0;

    border: none;

}

#reset {

    position: absolute;

    bottom: 5px;

    left: 5px;

    width: 194px;

}

#top input[type='submit']:hover, #reset:hover {

    background-color: var(--gg-blue);

    cursor: pointer

}

#top input[type='submit'].selected {

    background-color: var(--gg-blue);;

    cursor: default

}

#top input[type='submit'].selected:hover {

    background-color: var(--gg-blue);

}



#settings_form {

    position: relative;

    padding-bottom: 45px;

}

#top input[type='number'], #top input[type='text'] {width: 130px}

#top .main_color input[type='number'], #top .main_color input[type='text'] {

    border: 2px solid #8f8f8f;

    border-radius: 3px;

}

#top .main_color select {

    float: right;

    padding: 4px;

    color: #000;

    width: 130px;

    border: 2px solid #8f8f8f;

    border-radius: 3px;

}

#top .top_settings_row label {

    vertical-align: middle;

}

#top .top_settings_row label.cr_label {

    line-height: inherit;

}

#top .top_settings_row input[type='number'], 

#top .top_settings_row input[type='text'] {

    float: right;

    padding: 4px;

    color: #000;

}



#top .list input[type='checkbox']{

    margin: 1px 5px;

    clear: both;

    float: left; 

}    

#top .list label {

    vertical-align: middle;

    line-height: 15px;

    float: left;

}

#top .list div label {

    clear: left

}

#top .list label span {

    letter-spacing: -0.5px;

}



#top .system_builder .content, #top .system_builder .sidebar {

     padding-top: 0;

}



#top .system_builder .msg {position: absolute; top: 0; right: 0; border: 1px solid #ccc}



#top .system_builder .inline { display: inline-block; }



#top .system_builder .title_block {

    padding: 2px 5px 2px 4px;

    background: #fff;

    border: 3px solid #727272;

    border-bottom-left-radius: 7px;

    border-bottom-right-radius: 7px;

    border-top: 0px solid;

    font-size: 15px;

    font-weight: 700;

    text-transform: uppercase;

}

#top .system_builder .animationStripes {

    background-image: repeating-linear-gradient(-45deg, #e1e1e1 , #e1e1e1 10px, #cbcbcb 10px, #cbcbcb 20px);

    -webkit-animation:progress 2s linear infinite;

    -moz-animation:progress 2s linear infinite;

    -ms-animation:progress 2s linear infinite;

    animation:progress 2s linear infinite;

    background-size: 150% 100%;

}

#top #summary_report_form {

    margin-bottom: 5px;

    float: left;

    width: 100%;

}

#top #summary_report_form label {

    margin-right: 4px;

    margin-top: 2px;

    padding: 0px 1px 2px 3px;

    font-family: 'Open Sans';

    font-size: 12.5px;

    font-weight: 700;

    color: #000;

    border: 1px solid;

    border-color: #A8A8A8;

    border-radius: 3px;

    display: inline-block;

}



#top #summary_report_form select {

    font-family: 'Open Sans';

    font-size: 12.5px;

    border: 1px solid #AEAEAE;

    border-radius: 3px;

    margin: 0 2px 3px 0;

    padding: 0px 2px 0 2px;

    width: 60px;

    float: left;

    clear: left;

}

#top .filter_selects{

    float: left;

    overflow-x: auto;

    overflow-y: auto;

    white-space: nowrap;

    width: calc(100% - 170px);

}

#top .filter_butttons {

    min-width: 170px;

    float: right;

    margin-bottom: 20px;

    margin-top: 2px;

}

#top #summary_report_form #update_settings, #top #summary_report_form #clear_settings {

    margin-top: 0px;

    margin-left: 4px;

    width: 79px;

    font-family: 'Open Sans';

    height: 44px;

    float: right;

    border-radius: 3px;

    border: 1px solid;

    border-color: #989898;

    cursor: pointer;

}



@keyframes progress{

    0% {

      background-position: 0 0;

    }

    100% {

      background-position: -75px 0px;

    }

  }

@-webkit-keyframes progress{

  0% {

    background-position: 0 0;

  }

  100% {

    background-position: -75px 0px;

  }

}

@-moz-keyframes progress{

  0% {

    background-position: 0 0;

  }

  100% {

    background-position: -75px 0px;

  }

} 



#top .system_builder .account_details {

    text-transform: capitalize;

    color: var(--gg-blue);

}



#top .system_builder .bordered {

    padding: 2px 4px 2px 4px;

    margin-top: 5px;

    background: #fff;

    border: 3px solid #727272;

    border-radius: 7px;

    font-size: 13px;

    text-transform: uppercase;

    margin-bottom: 0;

    min-width: 210px;

}



#top .all_on_off {

    float: left;

    clear: left;

    width: 100%;

}



#top .all_on_off_switch {

    float: right;

    padding: 1px 3px;

    line-height: 15px;

    margin-top: 4px;

    border: 1px solid #727272;

    background: #e1e1e1;

    border-radius: 2px;

    margin-left: 3px;

}

#top .all_on_off_switch:hover {

    cursor: pointer;

    background: #f7f4f4

}



#settings_form {

    width: 210px;

    overflow: auto;

}



#top .system_builder .main_settings_block {

    padding: 0 2px 2px 2px;

    border: 2px solid #d32020;

    border-radius: 4px;

    margin: 5px 3px 0 0;

    width: 100%;

    float: left;

    position: relative;

    

}

#top .system_builder .main_settings_block.up {

    height: 23px;

    overflow: hidden;

}

#top .main_settings_block_title {

    padding: 0px 2px;

    font-weight: 700;

    float: left;

    margin-top: -3px;

    margin-bottom: 0;

}



#top .system_builder .top_settings_block {

    padding: 0 2px 2px 2px;

    border: 2px solid var(--gg-blue);

    border-radius: 4px;

    margin: 5px 3px 0 0;

    width: 100%;

    float: left;

    position: relative;

}

#top .system_builder .top_settings_block.up {

    height: 23px;

    overflow: hidden;

}

#top .top_settings_block_title {

    padding: 0px 2px;

    font-weight: 700;

    float: left;

    margin-top: -3px;

    margin-bottom: 0;

}

#top .top_settings_group_by {

    float: left;

    padding: 0;

    margin: -6px -2px 0 -4px;

}

#top .activate {

    line-height: 0.75em;

    font-weight: 700;

    font-size: 20px;

    cursor: pointer;

    float: right;

    top: 1px;

    right: 4px;

    left: 18px;

    position: absolute;

    text-align: right;

}

#top .top_settings_block .activate {

    right: 11px;

}



#top .activate.off:after {

    content: "\f140";

    font-family: dashicons;

}

#top .activate.on:after {

    content: "\f142";

    font-family: dashicons;

}



#top .showhide {

    line-height: 0.75em;

    font-weight: 700;

    font-size: 13px;

    cursor: pointer;

    float: right;

    top: 5px;

    right: 0px;

    width: 15px;

    position: absolute;

    text-align: right;

}

#top .showhide.off:after {

    content: "\f132";

    font-family: dashicons;

}

#top .showhide.on:after {

    content: "\f460";

    font-family: dashicons;

}



#top .top_settings_row {

    width: 100%;

    margin-top: 2px;

    max-height: 200px;

    overflow: auto;

    overflow-x: hidden;

    padding: 2px 0;

}



#top .settings_blocks {

    max-height: 620px;

    height: 620px;

    overflow: auto;

}



#top .top_settings_row_top_first { margin-top: -10px;}

.check {

    line-height: 14px;

}

#top .system_builder .wrapper {

    display: flex;

    height: calc(100% - 40px);

    margin-left: 0;

    margin-right: 0;

    margin-bottom: 10px;

    height: 700px;

}



#top .system_builder .data_block {

    flex-grow: 1;

    margin-left: 5px;

    padding: 2px;

}



#submit_report {

    width: 100%;

    border-radius: 3px;

    margin-top: 8px;

}



/* STATS */

#summary { 

    margin: 0 auto;

    text-align: center;

    clear: both;

}

#summary .summary_block {

    display: inline-block;

    margin: 2px 0 3px 0;

    border: 2px solid #727272;

    border-radius: 4px;

    width: 60px;

    text-align: center;

    text-transform: uppercase;

    line-height: 18px;

}



#summary .summary_block .summary_value {font-weight: 700;}



/* Options */

#top .filter_cols_options_wrapper {

    border: 2px solid #727272;

    padding: 0 0 3px 0;

    border-radius: 4px;

}

#top .filter_cols_options_wrapper label {

    font-weight: bold;

    font-size: 1em;

    vertical-align: middle;

    margin-right: 5px;

}

#top .filter_cols_show_hide {

    height: 28px;

    border: 2px solid #727272;

    border-radius: 3px;

    margin: 3px 6px 5px 0;

    padding: 0px 0 0px 6px;

    float: right;

    cursor: pointer;

}

#top .ifilter_cols_show_hide:hover {

    background: #f7f4f4;

}



#top .filter_cols_options_wrapper .filter_cols_show_hide:after {

    right: 2px;

    content: "\f142";

    font: 400 20px/1 dashicons;

    display: inline-block;

    padding: 0 0px 0 0;

    bottom: 3px;

    position: relative;

    vertical-align: bottom;

    color: #72777c;

}

#top .filter_cols_options_wrapper.up {

    border: none;

}

#top .filter_cols_options_wrapper.up .filter_cols {

    display: none

}

#top .filter_cols_options_wrapper.up .inc_cols_show_hide:after {

    content: "\f140";

}

.filter_json {

    text-transform: lowercase;

    font-weight: 700;

    padding: 2px 5px;

    line-height: 17px;

}

.filter_info {

    display: table;

    border-collapse: separate;

    border-spacing: 4px;

}

.info_block {

    display: table-cell;

    padding: 2px;

    border: 2px solid #727272;

    margin: 2px;

    min-width: 150px;

    border-radius: 4px;

}

.info_settings {

    margin-top: 3px;

    padding: 2px;

}

.info_block_title {

    margin-bottom: 3px;

    font-size: 14px;

    line-height: 1em;

    font-weight: 700;

}

.info_setting_title {

    font-size: 13px;

    letter-spacing: -0.5px;

    line-height: 1em;

    float: left;

    clear: left;

    margin: 7px 0 2px 0;

    font-weight: 700;

}

.filter_value {

    width: 100%

}

.filter_value_label {

    float: left;

    clear: both;

    line-height: 1em;

}

.filter_value_value {

    float: right;

    line-height: 1em;

}



/* TABLES */

.dataTables_wrapper .dataTables_paginate .paginate_button {

    padding: 0px 12px;

    margin-left: 1px;

}

.data_table_block {display: block}

table.dataTable tbody td {

    padding: 2px 2px;

    color: #000;

    font-family: 'Open Sans';

}

table.dataTable tbody tr.odd {

    background: #f3f3f3;

}

table.dataTable thead th {

    padding: 6px 3px;

    color: #000;

    text-align: left;

}

#top table.dataTable thead tr {

    background: var(--gg-blue);

}

#top table.dataTable thead tr th {

    border-top-style: solid;

    border-top-width: 1px;

    border-color: #fff;

    height: 20px;

    color: #fff;

    font-weight: 500;

    text-transform: capitalize;

    padding: 0 0 0 3px;

    letter-spacing: 0.5px;

    white-space: nowrap;

}

#top table.dataTable thead .th_right {

    border-top-right-radius: 4px;

}

#top table.dataTable thead .th_left {

    border-top-left-radius: 6px; /* due to padding of 2px */

}

#top table.dataTable tbody th, #top table.dataTable tbody td {

    padding: 1px 3px;

    text-transform: capitalize;

    white-space: nowrap;

    -webkit-box-sizing: content-box;

  -moz-box-sizing: content-box;

  box-sizing: content-box;

}

#top table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child, table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child {

    position: relative;

    padding-left: 30px;

    cursor: pointer;

}

#top .dataTables_scrollBody {

    height: 500px

}

#top input[type='text'].finder {

    margin: 0 2% 8px 0;

    width: 96%

}

#top .dataTables_wrapper.no-footer .dataTables_scrollBody {

    border-bottom: none;

}

#top table.dataTable tfoot th, #top  table.dataTable tfoot td {

    padding: 2px;

    border-top: 1px solid #111;

    color: #000;

    border-bottom: 1px solid #111;

}



#top  a.dt-button {

    padding: 0 11px;

}

#top div.dt-buttons {

    float: right;

    position: absolute;

    top: -28px;

    right: -4px;

    width: 230px;

    text-align: right;

}

#top td.neg {

    color: red !important;

    border-color: #e1e1e1;

}

#top .tooltip-tbl {

    margin: 0;

}

#top .tooltip-tbl td {

    border-color: #e1e1e1;

    padding: 4px 10px;

    font-family: 'Open Sans';

}



/* data tabkles overrides */

.dataTables_wrapper .dataTables_paginate .paginate_button {

    padding: 0px 4px;

    margin-left: 1px;

}



/* CHART */

#chart {

    width: 100%;

    height: 333px;

}

.flot-x-axis .flot-tick-label {

    white-space: nowrap;

    transform: translate(-9px, 0) rotate(-60deg);

    text-indent: -100%;

    transform-origin: top right;

    text-align: right !important;



}

#overview {

    width: 90%;

    height: 90px;

    margin-top: 30px;

    margin: 10px 5%;

    background: #f4f4f4;

    border: 1px solid;

}

#overview .flot-text {display: none}



.group_clickable {

    text-decoration: underline;

    cursor: pointer;

}



.add:after {

    content: "\f132";

    font-family: "dashicons";

    float: left;

    margin-right: 5px;

    cursor: pointer;

}

.remove:after {

    content: "\f460";

    font-family: "dashicons";

    float: left;

    margin-right: 5px;

    cursor: pointer;

}



#top table td.sp_link a, #top table td.sp_link a:visited {

    color: #de1600 !important;

    font-weight: bold;

    text-align: center;

}



/* mobile */

@media all and (max-width: 567px) {

    #top .tabs_block .tab {

        width: 24%;

        padding: 2px 0px;

        letter-spacing: -1px;

        font-size: 11px;

    }

    body {

        padding: 0;

    }

}

@media all and (max-width: 811px) {

    

    #top .system_builder .wrapper {

        margin-left: -214px;

    }

    

    #top #todays_bets thead tr th {

        font-weight: 400;

        letter-spacing: 0px;

        padding: 0 0 0 1px;

    }

    

    #top input[type='number'], #top input[type='text'] {

        width: 130px;

    }

}