/*-------------------------
    Styles for Rural GaDOE District Map
    SVG / HTML (c) GaDOE.org
    -------------------------
@import url('https://fonts.googleapis.com/css2?family=Oswald&family=Tinos&display=swap');*/

@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');/*Mockup ONLY! In PROD, font is "Oswald Regular". OMIT*/
body{font-family:Helvetica, Roboto, Arial, sans-serif; font-size:14px}
.GradAlliance_mustard{background:#ffc236}
.GradAlliance_orange{background:#f36522}
.Gadoe_Greenmd{background:#4a8d29}
.Gadoe_Magenta{background:#e20177}
.Gadoe_Orange{background:#ef6400}
#RESA_borders .resa{fill:transparent; fill:#000000; fill-opacity:0; stroke-width:2px; stroke:#555; stroke-opacity:.7; pointer-events:none}
#RESA_borders .resa.show-border{stroke-width:5px; stroke:#fc5; stroke-opacity:1; fill-opacity:.37; fill:rgb(255,204,85);}
.resa.show-border{stroke-width:5px; stroke:#fc5; stroke-opacity:1; fill:rgba(255,204,85,0.37); }
#RESA_Labels text, #RESA_Labels text tspan.legend-resa:hover{fill:#0C7C8E;}
/*Bio page*/
body{font-family:Helvetica, Roboto, Arial, sans-serif; font-size:14px}

.ga-avatar{max-width:240px !important; /*width:33% !important*/; margin-left: auto !important; margin-right:auto !important; border-radius: 50% !important;}
.rural h3, .rural h3 a, .rural a, .rural h3 a:visited{color: #346834 !important}
.rural h2{font-family: 'Oswald' !important; font-size: 25px !important;color: #877867 !important; font-weight:bold; text-align:center}      
/*Please change ^ to "Oswald Regular" 'Oswald' is Mockup ONLY! In PROD, font is "Oswald Regular" */
.rural img{margin:auto !important}
.rural p{max-width:1430px !important; margin-left:auto !important; margin-right:auto !important}
/*Mockup ONLY! In PROD, font is "Oswald Regular". OMIT*/

.rural h2{font-family: 'Oswald' !important; font-size: 25px !important;color: #877867 !important; font-weight:bold; }      
/*Please change ^ to "Oswald Regular" 'Oswald' is Mockup ONLY! In PROD, font is "Oswald Regular" */
.rural img{margin:auto}
.rural p{max-width:1430px; margin-left:auto; margin-right:auto}

.letter{display:block;padding:2em 1em 1em; margin:1em auto;width:96%; font-family: 'Tinos', Georgia, 'Times New Roman', Times, serif; font-size:16px; color:#000; 
        background-color:#f6eee6; box-shadow:3px 5px 3px rgba(0,0,0,0.1); border:solid 1px #eae3e0}

.header.rural{padding-top:0; background: #fff;
background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 56px, rgba(48,139,194,1) 56px, rgba(48,139,194,1) 98px, rgba(1,73,123,1) 98px, rgba(1,73,123,1) 100%)}
/*.header.rural{  background-image: linear-gradient(90deg #ffffff 0%, #ffffff 55%, #308bc2 56%, #308bc2 97%, #01497b 98%)}*/
.header.rural img{float:right; max-width:100%; height:auto}

.bgDrkBlue{background:linear-gradient(0deg, #023061 0%, #014691 100%)}
.bgDrkBlue h3{color:#eefcff; font-size:16px}
.bgDrkBlue a{color:#b1ceeb !important; display:block !important}
.bgDrkBlue a:hover{color:#fff !important}

.rural .quickLinks{position:absolute !important; z-index:0 !important; top:80px !important; left:0px !important; height:114px !important; content:"" !important; padding:0 1em !important}

hr {border-top:4px solid #696563; margin:20px 0; height:2px}
h1{font-family:'Oswald', Helvetica, Arial, sans-serif; font-size:30px; color:#0C7C8E}
h2, .infoTxt{font-family:'Oswald', Helvetica, Arial, sans-serif; font-size:22px; }/*555*/

#SSIP_SVG{margin-top:-30px; overflow:visible;} 

.p-accent{font-family:'Oswald', Helvetica, Arial, sans-serif; font-size:18px; line-height:22px; color:#264145/*07525e*/}
.title2 + p{margin:0 1em;}
.sp_content p{margin:0 1em; font-size:1.3em; line-height:1.9em; position:relative; z-index:2; }
.title2, .sp_content1 h2{margin:1em; font-size:2.2em; font-weight: bold;}

/*'Oswald', Helvetica, Arial, sans-serif;*/
.logo-title{line-height:24px; font-family:Verdana, Arial, sans-serif; margin:2em; text-align:center;
            font-weight:bold; color:rgb(103, 103, 103); font-size:17px;
}

.scoreText {font-family:'Oswald', Helvetica, Arial, sans-serif; font-size:18px; fill:#0C7C8E; fill-opacity:0;
          transition:fill-opacity 500ms ease-out}
.scoreText.fill-opac-1{fill-opacity:1; transition:fill-opacity 200ms ease-in}

.logo-img{position:relative; margin:0 auto 10px auto; box-shadow:0 10px 20px rgba(0,0,0,0.3); cursor:pointer;}       
    .logo-img:hover{opacity:.7; transition:opacity 200ms ease-in}

.iconPng {
    height: 18px;
    width: 18px;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    background-repeat: no-repeat;
    background-image: url(/SiteAssets/Map/Images/downloadIcons-18rural.png);
    
    vertical-align: bottom;
}
.iconPng:not(.no-hover):hover{transform:scale(1.3); transition:transform 200ms ease-in}
.iconPng.pdf{background-position:0 0;}
.iconPng.docx{background-position:-18px 0;}
.iconPng.video{background-position:-36px 0;}
.iconPng.excel{background-position:-54px 0;}
.iconPng.email{background-position:-72px 0;}
.iconPng.link{background-position:-90px 0;}
.no-hover{cursor:text}
.outline{fill:none;stroke:#464A51;stroke-width:2;stroke-linecap:square;stroke-miterlimit:10;}

#disrtictBorders polygon{fill:#f5fafa; stroke:#231F20;stroke-width:1;/*ecf5f6  e9f0f3*/
    stroke-linecap:square; stroke-miterlimit:10}

#other circle{fill:#ecf5f6; stroke-miterlimit:10; stroke:#111; stroke-width:1px}

/*Active State for polygons & circles*/
#other circle.svg-selected:not(.show-poly){fill:#e20177; stroke:#111; stroke-width:1px}
/*B2D3D9*/
#disrtictBorders polygon.svg-selected{fill:#d6f9d1; stroke:#111; stroke-width:1px}

/*Hover State for polygons & circles #e2419 b1ec8f ef6400 95cc9e 99cea2 d6f9d1 ee9e66 fill-opacity:.333;convolve2 #ef6400 #66c437 afd623*/
.svg-selected:hover, .show-poly{cursor:pointer; fill:#f88e41 !important; filter:url(#BevelZ); transition:all 300ms ease-out}

#DistrictsText text, #DistrictsText tspan{fill:#231F20; 
    font-family:'Open Sans', sans-serif; font-size:8px;  -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none;
                             -ms-user-select:none; user-select:none; pointer-events:none} 

#otherText text, #otherText tspan{fill:#182c3b; font-family:'Open Sans', 'Arial Narrow', sans-serif; font-size:5.5px; 
    -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none;
                             -ms-user-select:none; user-select:none; pointer-events:none}
#map_numbers text, #map_numbers text tspan, #RESA_Labels .svg-title{fill:#1a4a0a; font-size:18px; font-weight:bold; pointer-events:none}
#RESA_Labels text, #RESA_Labels text tspan{font-size:11px; fill:#384932; font-weight:bold; cursor:pointer}
#RESA_Labels.legend-number, #RESA_Labels.legend-number tspan{fill:#004900; fill-opacity:.8; font-weight:bold; stroke:#fff; stroke-width:2px; stroke-opacity:.1}
#RESA_Labels.legend-number, #RESA_Labels.legend-number tspan:first-letter{font-size:18px}
.scaling-svg-container{position:relative; height:0; width:100%;}

.scaling-svg-container svg{position:absolute;display:block; height:100%; width:100%; left:0; top:0}

.PBperc{padding-bottom:120%}
.bgF0{background-color:#f0f0f0;border-radius:5px;border:solid 3px #ddd; border-width:1px 1px 3px 1px}

/*Table*/
#sp_table{max-height:700px; margin-top:40px; overflow-y:auto}
.sm-table{margin-left:2%; width:95%; box-sizing:border-box}
.sm-table .col1{width:70%}
.sm-table .col2{width:30%;}
/*.sm-table .col3{width:20%}*/

.sm-table td, .sm-table th{text-align:left; padding:0 .3em;line-height:18px;
    box-sizing:border-box;  overflow:visible; border-bottom:solid 1px #e5e5e5; vertical-align:middle;color:#27292a}

.sm-table td a.lea-name{cursor:pointer;font-size:14px; color:#27292a !important; position:relative; white-space: nowrap; /*padding-left:60px*/ }
    .lea-name:hover{color:#0092aa; }

    .lea-name:focus, .iconPng:focus, a:focus > img{outline:solid 3px #f97963;}
.sm-table th{ color:#fff; background-color:#215c66;font-size:1em;}/*rgba(0,0,0,0.75)*/

.sm-table .tooltip{font-size:1em;line-height:2em}

.sm-table .badge{float:left; margin-right:14px; color: #555; background: #fff; text-shadow: none; width: 5rem;
                 text-align: right; box-shadow: 0 0 3px rgba(0,0,0,0.1)}

/*Utility*/
.posR{position:relative}
.text-center{text-align:center}
.mt-1{margin-top: 1em}
.mt-2{margin-top:2em}
.mx-1{margin:0 1em}
.mx-auto{margin:0 auto}
.mt-0{margin-top: 0}
.m-1{margin:1em}
.p-2{padding:2em}
.mb-0{margin-bottom:0; }
.phone-only{display:none}
.large-only{display:inline}
.clr{clear:both}
.title-right-h2{ font-size:19px; line-height:28px; text-align:center;font-weight: bold;}


@media (max-width:1400px) {
    .title-right-h2{font-size:16px !important;line-height:18px !important}
    .PBperc {
        padding-bottom: 100% !important
    }
}
@media (max-width:1280px) {
    .title-right-h2 {
        font-size: 1em !important;
        line-height: 1em !important
    }
    .sp_content p {
        font-size: 1em !important;
        line-height: 1.8em !important
    }
    .sm-table .col1{width:85%}
    .sm-table .col2{width:15%;}
    #sp_table{max-height:680px} 
    .PBperc {padding-bottom: 120%}
 }
@media (max-width:920px) {
    .sp_content p {
        font-size: 1em !important;
        line-height: 1.8em !important
    }
    .scoreText {
        font-size: 24px !important
    }
    .sm-table .col1 {
        width: 70% !important
    }
    .sm-table .col2 {
        width: 30% !important;
    }
    #sp_table {
        margin-top: 0 !important;
        max-height: 500px !important;
    }
    .PBperc {
        padding-bottom: 120% !important
    }
    .rural .quickLinks{position:relative !important; z-index:1 !important; top:0 !important; left:0 !important; width:100% !important; height:40px !important}
    .rural .quickLinks h3,  .rural .quickLinks a{display:inline-block !important; float:left !important; margin:5px 27px !important; line-height:24px !important}
    .rural .quickLinks a{margin-top:.5em !important}
    .header.rural{background:#fff}
 }
@media (max-width:768px) {
    .rural .quickLinks{max-width:100% !important; z-index:1 !important; position:relative !important; height:70px !important}
    .scoreText {
        font-size: 22px !important
    }
    .sm-table {
        margin: 1em auto !important;
        width: 96% !important;
    }
    #SSIP_Map svg {
        margin-top: -10px !important
    }
    .title-right-h2 {
        font-size: 18px !important;
        line-height: 20px !important;
    }
    h2.title2 {
        font-size: 1.6em !important;
        line-height: 1.8em !important;
        margin: .5em !important
    }
    .sm-table .col1 {
        width: 80% !important
    }
    .sm-table .col2 {
        width: 20% !important;
    }
    .title2, .sp_content {
        text-align: center !important
    }
    .PBperc {
        padding-bottom: 140% !important
    }
    .rural .quickLinks h3{width:100% !important; display:block !important; margin-left:0 !important}
    .rural .quickLinks a{margin:.25em auto !important; width:32% !important  }
    
 }
@media (max-width:480px) {
    .title-right-h2 {
        font-size: 16px !important;
        line-height: 18px !important
    }
    .phone-only {
        display: inline !important
    }
    .large-only {
        display: none !important
    }
    .sm-table .col1 {
        width: 75% !important
    }
    .sm-table .col2 {
        width: 25% !important;
    }
}