:root {
    --maincolor: #0b304f;
    --loginInfo: #092740;
    --loginDrop: #0f426c;
    --toogleMenu: #0f426c;
    --toogleMenu-hover: #092740;
    /* --maincolor: #f9a332;
       --loginInfo: #D0831D;
       --loginDrop: #E09C41;
       --toogleMenu: #f9a332;
       --toogleMenu-hover: #D0831D;
    */
}


/*********************************
              HTML
*********************************/
html, body {
    background-color: #fff;
    margin: 0;
    padding: 0;
}

h2 {
    font-size: 14px;
    font-weight: bold;
    color: #292929;
    border-bottom: 1px solid var(--maincolor);
}

h6 {
    font-size: 20px;
    font-weight: bold;
    color: #292929;
    text-align: center;
}

/*********************************
              LAYOUT
*********************************/
.headerWrap {
    width: 100%;
    background-color: var(--maincolor);
    height: 100px;
    position: fixed;
    padding-top: 20px;
    z-index: 6;
}

.header {
    float: none;
    width: 1200px;
    margin: 0 auto;
    background-color: var(--maincolor);
}

#logo {
    background-image: none;
    float: left;
    margin-top: 0px;
}

#loginInfo {
    float: right;
    background-color: var(--loginInfo);
    margin-top: -20px;
    height: 120px;
    text-align: center;
    width: 280px;
    margin-right: 0px;
}

    #loginInfo .dropdowns {
        color: white;
        padding-top: 5px;
        padding-bottom: 10px;
        display: none;
        background-color: var(--loginDrop);
    }

        #loginInfo .dropdowns div {
            /*margin-bottom: 5px;*/
            margin-top: 10px;
        }

    #loginInfo .texts {
        cursor: pointer;
        height: 100%;
        -webkit-box-shadow: 0px -6px 4px -5px rgba(50, 50, 50, 0.95);
        -moz-box-shadow: 0px -6px 4px -5px rgba(50, 50, 50, 0.95);
        box-shadow: 0px -6px 4px -5px rgba(50, 50, 50, 0.95);
    }

        #loginInfo .texts .formTable {
            width: 100%;
            margin-left: 0px;
        }

        #loginInfo .texts label {
            color: #fff;
        }

        #loginInfo .texts div {
            padding-top: 15px;
        }

        #loginInfo .texts .formTable td {
            line-height: 15px !important;
        }

        #loginInfo .texts .divimg {
            background-image: url(/include/img/icons/icon_pencil_w_16x.png);
            background-repeat: no-repeat;
            background-position: left center;
            padding-left: 20px;
            display: inline-block;
            margin-top: 20px;
            margin-left: -10px;
            padding-top: 0px;
        }


.logout {
    width: 110px;
    /*text-align: center;*/
    float: right;
    font-weight: bold;
    margin-top: 5px;
}

    .logout img {
        vertical-align: -4px;
        margin-right: 5px;
    }

    .logout a {
        color: white;
    }

.headerText {
    width: 500px;
    margin: 0 auto;
    text-align: center;
    color: white;
}

@font-face {
    font-family: 'firmregular';
    src: url('/include/fonts/firm_book-webfont.eot');
    src: url('/include/fonts/firm_book-webfont.eot?#iefix') format('embedded-opentype'), url('/include/fonts/firm_book-webfont.woff2') format('woff2'), url('/include/fonts/firm_book-webfont.woff') format('woff'), url('/include/fonts/firm_book-webfont.ttf') format('truetype'), url('/include/fonts/firm_book-webfont.svg#firmregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


.sysName {
    font-family: "firmregular";
    font-size: 36px;
    font-weight: bold;
    text-transform: uppercase;
}

    .sysName span {
        color: #fff;
        font-weight: normal !important;
    }

.userName {
    margin-top: -5px;
}

    .userName a:first-child {
        font-size: 18px;
        color: white;
    }

    .userName a {
        color: white;
    }

.competitionName {
    margin-top: 10px;
}

    .competitionName img {
        width: 11px;
        vertical-align: -1px;
        margin-right: 6px;
    }

    .competitionName a {
        color: white;
    }

.navWrap {
    margin-top: 120px;
    position: fixed;
    width: 100%;
    height: 30px;
    background-color: #292929;
    z-index: 6;
}

#nav {
    float: none;
    width: 1200px;
    margin: 0 auto;
    border: 0;
}

#container {
    width: 1200px;
}

#content {
    width: 1200px;
}

#mainContent {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    border: 0;
    margin-top: 150px;
}

.footer {
}


.areaWrap {
    width: 100%;
    display: inline-block;
}

.region {
    margin-bottom: 25px;
}

.regionHeader {
    height: 30px;
    width: 100%;
    background-color: var(--maincolor);
    -webkit-box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.14);
    -moz-box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.14);
    box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.14);
    border-radius: 4px 4px 0 0;
    margin-bottom: 20px;
}

    .regionHeader h3 {
        color: white;
    }

.half {
    width: 580px;
}

    .half:nth-child(odd) {
        margin-right: 40px;
    }


.full {
    width: 1200px !important;
}

.OneThird {
    width: 380px;
}

.TwoThird {
    width: 780px;
    margin-right: 40px;
}

.UCWrapForm {
    width: 400px;
}

/*********************************
              FORMS
*********************************/

.headlineIcon {
    margin-right: 10px;
    vertical-align: -10px;
    height: 32px;
    width: 32px;
}

.hideArea {
    height: 24px;
    width: 24px;
    background-image: url("/include/img/chevron_up.png");
    background-repeat: no-repeat;
    float: right;
    cursor: pointer;
}

    .hideArea.hidden {
        background-image: url("/include/img/chevron_down.png");
    }


.panel {
    display: none;
    width: 220px;
    padding: 20px;
    background-color: #292929;
    color: #fff;
    box-shadow: inset 0 0 5px 5px #222;
}

form .formTable {
    margin-left: 15px;
}

    form .formTable left {
        float: left;
    }

    form .formTable td {
        line-height: 30px;
        padding: 0 2px;
    }

        form .formTable td:nth-child(1) {
            width: 150px;
            font-weight: bold;
        }

        form .formTable td:nth-child(2) {
            width: 350px;
        }

form .searchTable {
    margin-left: 15px;
}

    form .searchTable td {
        line-height: 30px;
        padding: 0 2px;
    }

        form .searchTable td:nth-child(1) {
            width: 150px;
        }

        form .searchTable td:nth-child(2) {
            width: 250px;
        }

form .infoTable {
    margin-left: 15px;
    float: left;
}

    form .infoTable td {
        line-height: 30px;
        padding: 0 2px;
    }

        form .infoTable td:nth-child(1) {
            width: 100px;
            font-weight: bold;
        }

form .formSingleTable {
    margin-left: 15px;
    float: left;
}

    form .formSingleTable td {
        line-height: 30px;
        padding: 0 2px;
    }

        form .formSingleTable td:nth-child(1) {
            width: 150px;
            font-weight: bold;
        }

form .averageresultTable {
    margin-left: 15px;
}

    form .averageresultTable td {
        line-height: 30px;
        padding: 0 2px;
    }


form .extractchoice {
    margin-left: 15px;
    max-width: 600px;
}

    form .extractchoice table {
        border-collapse: collapse !important;
    }

    form .extractchoice td {
        line-height: 25px;
        padding: 10px 20px 10px 15px;
        border: 1px solid;
    }

        form .extractchoice td:nth-child(1) {
            width: 475px;
        }

        form .extractchoice td:nth-child(2) {
            width: 50px;
            text-align: center;
        }


/**************************************
            SIDEBAR
***********************************/
#sidebar {
    position: fixed;
    left: 0px;
    top: 150px;
    height: 100%;
    width: 48px;
    background-color: #e8e8e8;
}

.toggleMenu {
    height: 32px;
    width: 48px;
    cursor: pointer;
    background-color: var(--toogleMenu);
    background-image: url(/include/img/icons/icon_menuOpen.png);
    background-position: 8px center;
    background-position-y: center;
    background-position-x: 8px;
    background-repeat: no-repeat;
}

    .toggleMenu:hover {
        background-color: var(--toogleMenu-hover);
    }

    .toggleMenu.open {
        background-image: url(/include/img/icons/icon_menuClose.png);
    }

.sidebarButton {
    padding: 0;
    border: 0;
    cursor: pointer;
    display: block;
    font-size: 12px;
}

.sidebarItem {
    width: 48px;
    background-color: #e8e8e8;
    height: 48px;
    /*border-bottom: 1px solid #d1d1d1;*/
    overflow: hidden;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    /*-moz-border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;*/
    text-align: left;
    padding: 0;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: 8px center;
    background-position-y: center;
    background-position-x: 8px;
    border-bottom: 1px solid #cecece;
}

    .sidebarItem:hover {
        width: 200px;
        background-color: var(--maincolor);
        border-bottom: 1px solid var(--maincolor);
        color: white;
        -moz-border-radius: 0 4px 4px 0;
        -webkit-border-radius: 0 4px 4px 0;
        border-radius: 0 4px 4px 0;
        -webkit-box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.14);
        -moz-box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.14);
        box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.14);
        /*overflow:visible;*/
    }


.slideOut {
    width: 200px;
    color: #292929;
    -moz-border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
    -webkit-box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.14);
    -moz-box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.14);
    box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.14);
    /*overflow:visible;*/
}

.sbi_end {
    width: 48px;
    height: 20px;
    background-color: #e8e8e8;
    display: inline-block;
}

.sbi_add {
    /*background-size: 28px;*/
    background-image: url(/include/img/icons/icon_add.png);
}

    .sbi_add:hover {
        /*background-size: 28px;*/
        background-image: url(/include/img/icons/icon_add_w.png);
    }

.sbi_import {
    /*background-size: 28px;*/
    background-image: url(/include/img/icons/icon_import.png);
}

    .sbi_import:hover {
        /*background-size: 28px;*/
        background-image: url(/include/img/icons/icon_import_w.png);
    }

.sbi_search {
    background-image: url(/include/img/icons/icon_search.png);
}

    .sbi_search:hover {
        background-image: url(/include/img/icons/icon_search_w.png);
    }

.sbi_plan {
    background-image: url(/include/img/icons/icon_plan.png);
}

    .sbi_plan:hover {
        background-image: url(/include/img/icons/icon_plan_w.png);
    }

.sbi_match {
    background-image: url(/include/img/icons/icon_match.png);
}

    .sbi_match:hover {
        background-image: url(/include/img/icons/icon_match_w.png);
    }

.sbi_referee {
    background-image: url(/include/img/icons/icon_referee.png);
}

    .sbi_referee:hover {
        background-image: url(/include/img/icons/icon_referee_w.png);
    }


.sbi_matchReport {
    background-image: url(/include/img/icons/icon_matchReport.png);
}

    .sbi_matchReport:hover {
        background-image: url(/include/img/icons/icon_matchReport_w.png);
    }

.sbi_result {
    background-image: url(/include/img/icons/icon_result.png);
}

    .sbi_result:hover {
        background-image: url(/include/img/icons/icon_result_w.png);
    }

.sbi_comm {
    background-image: url(/include/img/icons/icon_comm.png);
}

    .sbi_comm:hover {
        background-image: url(/include/img/icons/icon_comm_w.png);
    }

.sbi_field {
    background-image: url(/include/img/icons/icon_field.png);
}

    .sbi_field:hover {
        background-image: url(/include/img/icons/icon_field_w.png);
    }

.sbi_pdf {
    background-image: url(/include/img/icons/icon_pdf.png);
}

    .sbi_pdf:hover {
        background-image: url(/include/img/icons/icon_pdf_w.png);
    }

.sbi_district {
    background-image: url(/include/img/icons/icon_club_32.png);
}

    .sbi_district:hover {
        background-image: url(/include/img/icons/icon_club_w_32.png);
    }

.sbi_districtclassrow {
    background-image: url(/include/img/icons/icon_teampool.png);
}

    .sbi_districtclassrow:hover {
        background-image: url(/include/img/icons/icon_teampool_w.png);
    }

.sbi_table {
    background-image: url(/include/img/icons/icon_table.png);
}

    .sbi_table:hover {
        background-image: url(/include/img/icons/icon_table_w.png);
    }

.sbi_team {
    background-image: url(/include/img/icons/icon_team.png);
}

    .sbi_team:hover {
        background-image: url(/include/img/icons/icon_team_w.png);
    }

.sbi_green {
    background-color: #549B3C;
}

.sbi_red {
    background-color: #dc0000;
}

.sbi_blue {
    background-color: #3D6D9C;
}

.sbi_print {
    /*background-size: 28px;*/
    background-image: url(/include/img/icons/icon_print.png);
}

    .sbi_print:hover {
        /*background-size: 28px;*/
        background-image: url(/include/img/icons/icon_print_w.png);
    }



.sidebarItemName {
    display: inline-block;
    vertical-align: middle;
    line-height: 48px;
    margin-left: 55px;
    color: white;
    font-weight: bold;
}

.slideOut .sidebarItemName {
    color: #292929;
}

.slideOut:hover .sidebarItemName {
    color: white;
}

.sidebarItemName a {
}

.newsWrap {
    width: 70%;
    padding-left: 5px;
    margin-left: 5px;
    /*background-color: rgba(153,148,149,0.09);*/ /* #F19280*/
    color: #292929;
    padding: 10px 10px 20px 10px;
    border-bottom: 1px solid #EAEAEA;
}

    .newsWrap.unionNews {
        background-image: url(/include/img/logo_dfif_h48p.png);
        background-repeat: no-repeat;
        background-position: right 5px;
        background-size: 120px;
    }

.newsDateAuthor {
    color: #292929;
    font-size: 11px;
    line-height: 16px;
    margin-bottom: -2px;
}

.newsHeader {
    font-weight: bold;
    font-size: 14px;
    width: 290px;
    /*border-bottom: 1px solid #292929;*/
}

.newsText {
    padding-top: 10px;
    /*margin-left: 15px;*/
    /*margin-right: 15px;*/
    line-height: 15px;
    word-wrap: break-word;
    height: auto;
    /*text-align: justify;*/
    font-size: 12px;
}

    .newsText .hideContent {
        overflow: hidden;
        height: 45px;
        margin-bottom: 15px;
    }

    .newsText .showContent {
        height: auto;
    }

    .newsText .show-more {
        /*padding: 5px 0 0 0;*/
        text-align: center;
        /*width: 25%;*/
        margin-top: 15px;
        text-align: left;
        padding-left: 20px;
    }

.show-more {
    background-image: url('/include/img/chevron_down.png');
    background-size: 16px;
    background-position: left center;
    background-repeat: no-repeat;
}

.show-moreUp {
    background-image: url('/include/img/chevron_up.png');
}

.show-more a {
    color: #292929;
    font-weight: bold;
}

/**************************************
            MatchDistribution
***********************************/

.FieldStatusBox {
    /*background-color: #EFEFEF;*/
    padding: 10px;
    /*margin-left: -65px;*/
}

.FieldStatusImg {
    display: inline-block;
    vertical-align: middle;
}

.FieldStatusImgText {
    display: inline-block;
    margin-left: 15px;
    text-align: left;
    vertical-align: middle;
}

    .FieldStatusImgText.HeaderText {
        font-size: 14px;
        font-weight: bold;
        width: 300px;
    }

.SpanClick {
    text-decoration: underline;
    cursor: pointer;
    color: red;
}

.FieldIconDiv {
    padding: 0px 10px;
    margin-bottom: 20px;
    height: 20px;
}

    .FieldIconDiv .alignleft {
        float: left;
        text-align: left;
        width: 33.33%;
    }

    .FieldIconDiv .aligncenter {
        float: left;
        text-align: center;
        width: 33.33%;
    }

    .FieldIconDiv .alignright {
        float: left;
        text-align: right;
        width: 33.33%;
    }

    .FieldIconDiv .alignText {
        vertical-align: middle;
        font-weight: bold;
    }

    .FieldIconDiv .alignImg {
        vertical-align: middle;
    }

.FieldStatusHeaderText {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
}

/****** RadToolTip ChangePass style *******/

.ToolTipPassword {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 2px solid #B8B8B8;
    background-color: white;
    min-height: 100px;
}

.ToolTipPasswordHeader {
    width: 99%;
    line-height: 21px;
    background-color: var(--maincolor);
    color: white;
    cursor: default;
    text-align: center;
    margin: 1px;
    padding-top: 5px;
    padding-left: 2px;
    font-weight: bold;
}

form .ToolTipPasswordFormTable {
    margin: 0px 10px;
    padding-top: 10px;
    margin-left: 15px;
    float: left;
}

    form .ToolTipPasswordFormTable td {
        line-height: 30px;
        padding: 0 2px;
        font-weight: bold;
    }