﻿/*Custom Fonts */

 

 
@font-face {
    font-family: 'OpenSansBold';
    src: url('../fonts/opensans-bold-webfont.woff');
    font-weight: bold;
}
@font-face {
    font-family: 'OpenSansLight';
    src: url('../fonts/opensans-light-webfont.woff');
    font-weight: lighter;
}
@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/opensans-regular-webfont.woff');
    font-weight: normal;
}
@font-face {
    font-family: 'OpenSansSemiBold';
    src: url('../fonts/opensans-semibold-webfont.woff');
    font-weight: bold;
}

/*************************************** HTML TAGS - BEGIN *******************************************/
/*Default Font-size of the page*/
html {
    font-size: 100%;
    }

/* Default body styling */
body {
    font-family: OpenSans, sans-serif;
    font-size: 1rem;
    text-align: left !important; /* Nces header is setting all text center align  */
    /*overflow-x:hidden; Commented to show the scrollbar based on the Grids*/ 
    }

/* Default header styling */
h1 {
    font-size: 2.4rem;
    padding:0;
    margin:0;
}

h3 {
    font-size: 2.25rem; /*27 pt*/
    color: #001871;
    font-family: OpenSansBold, sans-serif; 
    padding:0;
    margin:0;
}

h4 {
    font-size: 1.2rem; /*14 pt*/
    color: #4a4a4a;
    font-family: OpenSans, sans-serif;
    font-weight: normal;
}


/*************************************** HTML TAGS - END *******************************************/

/*************************************** COMMON CLASSES - BEGIN *******************************************/

.navbar a {
    font-size: 1.2rem;
}
/*Background for radio button list area */
.element-background {
    background-color: #F5F4F3;
    margin-right: 0px;
    margin-left: 0px;
    /*padding-bottom: 1rem;*/
    position: relative;
    margin-bottom: 1rem;
}


.white {
    background-color: #fff;
}

.bottom-column {
    float: none;
    display: inline-block;
    vertical-align: bottom;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.vertical-align {
    display: flex;
    align-items: center;
}

.fntorange {
    color: #F79627;
}

.fntwhite {
    color: #fff;
}

.fntgray {
    color: #656565;
}

a#skip-to-main-content {
 position:absolute;
    left:-10000px;
    top:auto; 
    width:1px;
    height:1px; 
    overflow:hidden;
}
a#skip-to-main-content:focus {
 position:absolute;
    left:0;
    top:0; 
    width:auto;
    height:auto; 
    overflow:visible;
    border: 1px dotted #000;
}
.aria-describedby {
     position:absolute;
    left:-10000px;
    top:auto; 
    width:1px;
    height:1px; 
    overflow:hidden;
}
/*************************************** COMMON CLASSES - END   *******************************************/

span.nde_icon_arrow_down {
    display: block;
    background-image: url(images/NDE_ICON_arrow_lowerUPD25_fill.jpg);
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: right center;
    height: 25px;
}

span.nde_icon_arrow_nochange {
    display: block;
    background-image: url(images/NDE_ICON_arrow_nochangeUPD25_fill.jpg);
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: right center;
    height: 25px;
}

span.nde_icon_arrow_up {
    display: block;
    background-image: url(images/NDE_ICON_arrow_higherUPD25_fill.jpg);
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: right center;
    height: 25px;
}
 
.legend-container {
    text-indent:-100000px; overflow:hidden;
}
.legend-container.high {
     background:#001b64 url(images/NDE_ICON_arrow_higherUPD25_fill.jpg) no-repeat center center;
}
.legend-container.med {
         background:#41639e url(images/NDE_ICON_arrow_nochangeUPD25_fill.jpg) no-repeat center center;
}
.legend-container.low {
         background:#becbdc url(images/NDE_ICON_arrow_lowerUPD25_fill.jpg) no-repeat center center;
}


.k-item.k-state-disabled:after,
.k-button.k-state-disabled::after {
    display: flexbox;
    font-family: FontAwesome !important;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f05e";
    float: right;
    align-content: center;
}

#tabstripTabs >li.k-item.k-state-disabled:after,#ddlCompareJurisdiction_listbox>.k-item.k-state-disabled:after, 
.k-button.k-state-disabled::after,#ddlJurisdiction_listbox >.k-item.k-state-disabled:after, .k-button.k-state-disabled::after {
    content: "" !important;
}

.k-state-disabled2::after{
    content: "" !important;
}

/* bottom buttum in tab strip findings**/
#tabstripFindings {
    position: relative;
    padding-top: .25rem;
    /*padding-bottom: 1.75rem;*/
}

    #tabstripFindings > .k-tabstrip-items {
        position: absolute;
        bottom: 1rem;
        left: 40%;
        z-index:9999;
    }

        #tabstripFindings > .k-tabstrip-items .k-item {
            border-width: 0;
            border-radius: 0 0 .25rem .25rem;
        }

        #tabstripFindings > .k-tabstrip-items .k-state-active {
            margin-top: -.063rem;
            padding-top: .063rem;
            margin-bottom: 0;
            padding-bottom: 0;
            background-color: transparent;
            border-color: transparent;
        }

    #tabstripFindings > .k-content {
        min-height: 6.25rem;
        overflow: hidden;
        border: 0;
    }

    #tabstripFindings span.k-link:before {
        display: inline-block;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "\f111";
    }

    #tabstripFindings li.k-last > span.k-link:before {
        content: "" !important;
        word-break: keep-all;
        white-space: nowrap;
        opacity: .7;
    }


#gridScoreCompare {
    white-space: normal !important;
    font-family: OpenSans,Arial, Helvetica, sans-serif, sans-serif;
}

#tabstrip { /* tabstrip element */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
}



    #tabstrip k-tabstrip-items {
        height: 100%;
        margin: 0;
        padding: 0;
        border-width: 0;
        width: 100%;
    }

    #tabstrip .k-item, #tabstripTabs li {
        width: 20%;
        text-align: center;
    }

    /*.DistrictProfilesTab #tabstrip .k-item, .DistrictProfilesTab #tabstripTabs li {
        width: 25%;
        text-align: center;
    }*/

#loginbox {
    background-color: #231F20;
    border-radius: .625rem .625rem 0px 0px;
    height: 1.875rem;
    width: 13.75rem;
    float: right;
    padding: .125rem;
    padding-left: .938rem;
    font-size: .9rem;
}

.finding-view {
    float: left;
    width: 50%;
    min-height: 6.25rem;
    box-sizing: border-box;
    border-top: 0;
    position: relative;
}

    .finding-view:nth-child(even) {
        border-left-width: 0;
    }

.k-listview {
    border-width: .063rem .063rem .063rem 0;
    padding: 0;
    overflow: hidden;
    min-height: 18.625rem;
}

.refreshButton {
    float: right;
}

.fa.k-sprite,
.fa.k-sprite::before {
    font-size: .75rem;
    line-height: .75rem;
}

.mapStateText {
    fill: #fff;
    font-family: OpenSans,Arial, Helvetica, sans-serif, sans-serif;
    font-size: .875rem;
}

/* svg black backgrounf of map **/

path {
    fill: none;
    stroke: #E3DDD2;
    stroke-width: .031rem;
}

/*.statemap_legend_circle_small_triangle {
    fill: #e3f4f0;
    stroke: none;
    stroke-width: 0;
}*/

/*#stateprofilemap svg, #mapScoreCompare svg , #mapGapCompare svg{
min-width: 700px;
min-height:600px; 
}*/
 
.nde-state-profiles-title {
    font-size: large;
}

.ie9 img[src*=".svg"] {
    width: 100%;
}
/* 2 */
.scaling-svg-container {
    position: relative;
    height: 0;
    width: 100%;
    padding: 0;
    padding-bottom: 100%;
    /* override this inline for aspect ratio other than square */
}

.scaling-svg {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.scaling-svg2 {
    /*position: absolute;*/
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    padding-top: 7px; 
}

.charttext {
    font-size: 2.5rem;
    font-family: OpenSansBold,Arial,Helvetica,sans-serif !important;
    fill:#0C2268;
}
.charttextPercert {
    font-size: 1.5rem;
    font-family: OpenSansBold,Arial,Helvetica,sans-serif !important;
    fill:#0C2268;
}



.mapRightCol1 {
    vertical-align: top;
    margin-bottom: 20%;
}

.mapRightCol2 {
    vertical-align: top;
    margin-bottom: 40%;
}

.mapRightCol3 {
    margin-bottom: 40%;
    margin-top: 40%;
    vertical-align: bottom;
    display: inline-block;
}

.tableRightCol1 {
    vertical-align: middle;

    color: #b78300;
}

.tableRightCol2 {
    vertical-align: middle;
    float: right;
    margin: 10% 10%;
    
}


.circle {
    position: relative;
    display: inline-block;
    width: 18%;
    height: auto;
    padding: 3% 0;
    border-radius: 50%;
    text-shadow: 0 .25rem 0rgba(0, 0, 0, .1);
    background: #000;
    color: white;
    font-family: Helvetica, Arial Black, sans;
    font-size: 1.375rem;
    text-align: center;
    box-shadow: 0 4px 0 0 rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 4px 0 0 rgba(0, 0, 0, .1);
    -o-box-shadow: 0 4px 0 0 rgba(0, 0, 0, .1);
}


.km-scroll-container .k-selectable {
    background-color: rgb(255,255,255) !important;
}


#gridAvergeScore .k-grid-content {
    min-height: 18.75rem;
    /*overflow-y: hidden;*/
}

#content th.k-header {
    white-space: normal !important;
    text-overflow: unset;
}

/*************************************** RADIO BUTTON CLASSES - BEGIN *************************************/

.state-profile label 
{
    font-weight: normal;
}

label .input-radio {
    width: 1.6rem;
    height: 1.6rem;
    display: inline-block;
    position: relative;
    border: 1px solid #C69214;
    border-radius: 50%;
    vertical-align: middle;
    background: #F2EDE2;
    margin-left: 1rem;
    cursor:pointer;
    
 }

    label .input-radio:hover:before {
        content: "";
        width: .8rem;
        height: .8rem;
        background-color: #C69214;
            margin-top: .30rem;
    margin-left: .35rem;
        border-radius: 100%;
        position: absolute;
    }


 
label input[type=radio]:checked + span:before {
    content: "";
    width: .8rem;
    height: .8rem;
    background-color: #007367;
    border-radius: 100%;
       margin-top: .30rem;
    margin-left: .35rem;
    position: absolute;        
}

label input[type=radio]:checked + span.input-radio {
    border: 1px solid #C69214;
    background-color: #F2EDE2;
}

label input[type=radio]:focus + span.input-radio
{
    outline-style:solid;
    outline-color: #CFDCEE;

}

label input[type=radio] {
    position:relative;
    left:-40000px;
    -webkit-appearance:none;
    height:1px;
    width:1px;
}



/*************************************** RADIO BUTTON CLASSES - END *************************************/


/*************************************** CHECKBOX BUTTON CLASSES - BEGIN *************************************/

label .input-checkbox, #xop-treeview span.input-checkbox {
    width: 1.4rem;
    height: 1.4rem;
    display: inline-block;
    position: relative;
    border: .13rem solid #C69214; 
    vertical-align: middle;
    background: #fff;
    margin-left: 1rem; 
 }
label .input-checkbox:hover, #xop-treeview span.input-checkbox:hover {
    border: .13rem solid #007367; 
}
label .input-checkbox:before, #xop-treeview span.input-checkbox:before{
        content: "";
}

label .input-checkbox {
    float:left;
}
 

 
label input[type=checkbox]:checked + span,  #xop-treeview input[type=checkbox]:checked + span {
    /*background:#fff url(images/checkbox-checked.png) no-repeat center center;*/
        border: .13rem solid #007367;
        background-color: #007367;
}

label input[type=checkbox]:checked + span:before,  #xop-treeview input[type=checkbox]:checked + span:before{
        content: "\f00c";
           color: white;
        font-size: 1.4rem;
}

label input[type=checkbox]:checked + span.input-checkbox {
        border: .13rem solid #007367;
    background-color: #007367;
}

label input[type=checkbox]:focus + span.input-checkbox {
    outline-style:solid;
    outline-color: #CFDCEE;

} 

label input[type=checkbox] {
 position:relative;
    left:-40000px;
    -webkit-appearance:none;
    height:1px;
    width:1px; 
}

 #xop-treeview input[type=checkbox] {
 position:relative;
    left:-400px;
    height:1px;
    width:1px; 
}

 #xopForm legend {
    font-size: 1rem;
    color: #6e695e;
    margin: 0;
    text-transform: uppercase;
 }

 #kendoWindowTableOptions legend {
   font-size: 1rem;
    color: #6e695e;
    margin: 0;
    text-transform: uppercase;
 }
  #xopForm label input[type=radio]:checked + span + span  {
    border: .13rem solid #007367;
}
/*************************************** CHECKBOX BUTTON CLASSES - END *************************************/

/*************************************** MEDIA QUERIES - BEGIN *******************************************/
@media only screen and (max-width : 620px) {

    .finding-view {
        width: 100%;
    }

        .finding-view:nth-child(even) {
            border-left-width: .013rem;
        }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    img[src*=".svg"] {
        width: 100%;
    }

    #stateprofilemap,#mapScoreCompare{
        position:relative;
        padding:0;
        padding-bottom:65%;
        width:100%;
    }
 
    #stateprofilemap .svg-content-responsive, #mapScoreCompare .svg-content-responsive{
        position: absolute; 
        height: 100%; 
        width: 100%; 
        left: 0; 
        top: 0;
    }

}

@media only screen and (max-width : 1025px) {

   .stateprofile #content.container {
        padding:0 15px;
    }
     
}
/*************************************** MEDIA QUERIES - END *******************************************/


/*****************kendo overrides*/

.k-tabstrip>.k-content {
    overflow:visible !important; /* Added to enable the browser level scrollbar */ 
    border:none;
}

.dummycanvas{
    display: block;
    width: 100%;
    visibility: hidden;
}
.chart180{
     position:relative;
     width:100%;
}

.chart180 svg{
     position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 1rem;
    font-family: OpenSans, sans-serif;
}