* {box-sizing: border-box; -moz-box-sizing: border-box; font-family: 'Varela Round', sans-serif;}

body {font-size: 16px; background:#f2f2f2; color:#0e0d1b; margin: 0; height: 100%}

h1, h2, h3, h4 {font-weight: normal; margin: 0 0 20px 0;}

h1 {font-size: 30px;}

p {line-height: 1.5em;}

a {color:#116261;}

.clear-after:after {clear:both; display:block; content:'';}

.width-60 {width: 55%; float: right;}
.width-40 {width: 35%; float: left;}

.width-30 {width: 20%; float: left;}
.width-70 {width: 70%; float: right;}


.width-60-b {width: 60%; float: left;}
.width-40-b {width: 35%; float: right;}

.width-50 {width: 47.5%; margin-right: 5%; float: left;}
.width-50:last-child {margin-right: 0;}

.width-25 {width: 21.25%; margin-right: 5%; float: left;}
.width-25:last-child {margin-right: 0;}

.width-33 {
    width: 29%;
    margin-right: 5%;
    float: left;
}

    .width-33:last-child {
        margin-right: 0;
    }


    hr {margin: 30px; height: 10px; background:#f5f5f5; border: 0;}

#agencies-list a {display:block; float:left; width: 33.333%; padding: 4px 0;}
#agencies-list::after {clear:both; display:block; content:''; height: 70px;}

.form-item {margin-bottom: 20px;}
.form-item label {font-size: 1em; margin-bottom: 8px; display:block;}
input[type=text],input[type=number],input[type=email],input[type=password], select {font-size: 1em; padding: 10px; width: 100%;}
textarea {font-size: 1em; padding: 10px; width: 100%; height: 125px;}

.btn {background:#0e4c4b; color:#fff; padding: 10px 20px; font-size: 1em; display: inline-block; cursor: pointer;}

header {background: #fff; padding: 30px; position:relative;}
.logo {max-height: 65px; width: auto;}

nav { position: absolute; display:table; top: 35px; right: 30px;}
nav a {display: table-cell; text-align:right; padding: 20px 30px; text-decoration:none; }



.page-container {max-width: 1680px; margin: 0 auto; width: 96%;}

.top-header {background:#2e5e5f; font-size: .8em; text-align:right; color:#fff;}
.top-header a {color:#fff; display:inline-block; padding: 10px;}

.top-level-numbers {}
.top-level-numbers .col-container {display: table; width: 100%;}
.top-level-numbers .col {display: table-cell;  padding: 30px; background:#fff; width: 25%; color:#fff; position: relative;}
.top-level-numbers .col:hover {background: rgb(222,99,38); background: linear-gradient(135deg, rgba(222,99,38,1) 0%, rgba(219,138,37,1) 100%);}

.top-level-numbers .col-1 {background:#0e4c4b;}
.top-level-numbers .col-2 {background:#116261;}
.top-level-numbers .col-3 {background:#137978;}
.top-level-numbers .col-4 {background:#14918f;}

.top-level-numbers .tool-tip {background:#0000004a; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; padding-top: 5px; border-radius: 50px; text-align:center; display:block;cursor: pointer;}
.top-level-numbers .tool-tip span {position: absolute; right: 22px; top: -22px; width: 350px;    display: none; background:#000000; padding: 15px 7px; font-size: .8em; text-align:right;  border-radius: 7px;}
.top-level-numbers .tool-tip:hover {background:#000;}
.top-level-numbers .tool-tip:hover span {display:block; z-index:999}
    .top-level-numbers .tool-tip span b {color:#d39039;}

.top-level-numbers .big-number {font-size: 2em;}
.top-level-numbers .big-number label {display:block; font-size: 16px; margin-bottom: 10px;}


.top-level-title {}
.top-level-title .col-container {display: table; width: 100%;}
.top-level-title .col {display: table-cell;  padding: 30px; background:#fff; width: 25%; color:#fff;}
.top-level-title .col:hover {background: rgb(222,99,38); background: linear-gradient(135deg, rgba(222,99,38,1) 0%, rgba(219,138,37,1) 100%);}

.top-level-title .col-1 {background:rgb(222,99,38);background: linear-gradient(135deg, rgba(222,99,38,1) 0%, rgba(219,138,37,1) 100%);}

.top-level-title .big-number {font-size: 2em;}
.top-level-title .big-number label {display:block; font-size: 16px; margin-bottom: 10px;}



.map-container {position:relative; z-index:1; overflow:hidden; }
#map {width: 100%; display:block; height: 800px}
#mapPopUp {width: 100%; display: block; height: 300px;}

#map-popup {position:absolute; top: 30px; right: 30px; bottom: 30px; background:#fff; width: 600px; padding: 50px; z-index:999999; -webkit-box-shadow: 0 0 100px 0 rgba(0,0,0,.2); box-shadow: 0 0 100px 0 rgba(0,0,0,.2);}


.map .title-window {display:none;}

.map-control {background:#f2f2f2; padding: 30px;}
.map-control h3, .map-control p {margin: 0 0 10px 0;}

.currently-viewing {}

.title-window {background:#fff; position:absolute; width: 400px; bottom: 155px; left: 245px; padding: 20px; border-radius: 5px;}
.title-window-table {border-collapse: collapse; border: 1px solid #ccc; width: 100%;}
.title-window-table td {border-bottom: 1px solid #ccc; padding: 10px;}
.title-window-table td:last-child {text-align:right;}
.title-window-btn {display:block; width: 100%; padding: 10px; border: 3px solid #0e4c4b; margin-top: 30px; text-align:Center; text-decoration:none;}

#map-popup-table-container {max-height: 300px; overflow-y: auto;}

.pie-chart-table {width: 100%; border-collapse: collapse; margin-bottom: 50px;}

.pie-chart-table tr th {background:#f5f5f5; text-align: left; padding: 7px; font-size: .8em; text-transform: uppercase;}
.pie-chart-table tr th:last-child {text-align: right;}

.pie-chart-table tr td:last-child {text-align:right;}
.pie-chart-table tr td {border-bottom: 1px solid #ccc; padding: 7px;}




#agency-category-table {width: 100%; border-collapse: collapse; margin-bottom: 50px;}
#agency-category-table tr th {background:#f5f5f5; text-align: left; padding: 7px; font-size: .8em; text-transform: uppercase;}
#agency-category-table tr th:last-child {text-align: right;}
#agency-category-table tr td:last-child {text-align:right;}
#agency-category-table tr td {border-bottom: 1px solid #ccc; padding: 7px;}


.overflow-projects {background:#0e4c4b; color:#fff; padding: 30px; font-size: 1.15em; text-align:left;}
.overflow-projects a {color:#ffc107; text-decoration:none;}


.content-container {margin: 0 auto; padding: 50px;}

.content-section {background:#fff; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 50px; -webkit-box-shadow: 0 0 100px 0 rgba(0,0,0,.2);  box-shadow: 0 0 100px 0 rgba(0,0,0,.2); position:relative;}
.content-title {font-size: 24px; padding: 30px;  border-bottom: 1px solid #ccc;}
.content {padding: 30px;}

.big-number-filter { border-bottom: 1px solid #ccc;}
.big-number-filter .col-container {display: table; width: 100%;}
.big-number-filter .col {display: table-cell;  padding: 30px; background:#fff; width: 25%;  border-right: 1px solid #ccc;}
.big-number-filter .col:hover {background: rgb(222,99,38); background: linear-gradient(135deg, rgba(222,99,38,1) 0%, rgba(219,138,37,1) 100%); cursor: pointer; color:#fff;}



.big-number-filter .big-number {font-size: 2em;}
.big-number-filter .big-number label {display:block; font-size: 16px; margin-bottom: 10px;}

.filter-container {background:#f2f2f2; border-radius: 5px; padding: 20px; margin-bottom: 30px;}
.filter-container::after { clear:both; display: block; content:"";}
.filter-item {float:left; padding-right: 10px;}
.filter-item:last-child {margin-right:0;}
.filter-item label {display:block; margin-bottom: 7px;}

.clear-filters {font-size: .8em; margin-top: 20px; display:inline-block;}

.currently-viewing-container {background:#fff; padding: 0 30px 30px;}

.main-table {width: 100%; border-collapse: collapse;}
.main-table th {text-align: left; font-size: .8em; padding: 10px; border-bottom: 3px solid #0e0d1b;}

.main-table tbody tr:hover {background: rgb(222,99,38); background: linear-gradient(135deg, rgba(222,99,38,1) 0%, rgba(219,138,37,1) 100%); cursor: pointer;}
.main-table tbody tr:hover td, .main-table tbody tr:hover td a {color:#fff;}

.main-table.small td {padding: 10px 5px;}
.main-table td {padding: 20px 10px; border-bottom: 1px solid #ccc;}
.main-table td:nth-child(4),.main-table td:nth-child(5),.main-table td:nth-child(6) {text-align:right;}
.main-table td:nth-child(4) {background:#00000005;}
.main-table td:nth-child(5) {background:#00000010;}
.main-table td:nth-child(6) {background:#00000015;}
.main-table a {}

.filter-item {
    max-width: 400px;
}

.top-filter-items .filter-item {width: 20%;}
.top-filter-items .filter-item select {width: 100%;}

.mi-title-container {width: 80%;}

.modal-window {position:fixed; top: 0; left: 0; right: 0; bottom: 0; background:#0000007c; z-index: 9999; overflow:auto; display:block;}
.modal-window-content {margin: 50px auto; max-width: 1400px; background: #fff;}
.modal-window-content .content-title {position: relative;}
.modal-window-content .content-title a.close-modal {position:absolute; display:block; top: 15px; right:15px; background:#fff; border: 5px solid #0e4c4b; color:#0e4c4b; text-decoration: none; padding: 15px 20px; font-size: 16px;}

.funding-source-title {margin: 0; background: #fff; padding: 30px; border-top: 1px solid #ccc;}
.funding-source-title h1 span {display:block; font-size: .65em; margin-top: 10px; color:#116261;}
 .definitions {border: 0 solid #000; padding: 20px 30px; background: #f2f2f2; border-radius: 10px;}
 .definitions a {display: inline-block; padding: 10px 15px; color:#fff; text-decoration: none;  border: 3px solid #0e4c4b; border-radius: 3px;}
 /*.definitions a:hover {background-color: #fff;}*/

/* Login Styles */

.login-container {max-width: 700px; padding: 30px; background:#fff; margin: 50px auto; border: 1px solid #ccc;border-radius: 5px; -webkit-box-shadow: 0 0 100px 0 rgba(0,0,0,.2); box-shadow: 0 0 100px 0 rgba(0,0,0,.2);}
.login-masthead .login-logo {max-height: 65px;  width: auto; margin-bottom: 30px;}

#login-forgot-password, #anchBackToSignIn {float:right;}

/*MGMT Styles */
.filter-container-admin {background:#f2f2f2; padding: 15px 30px; border-bottom: 1px solid #ccc;}
.filter-container-admin::after { clear:both; display: block; content:"";}

.tabs { padding: 0; margin: 15px 0; }
.tabs a {display:inline-block; padding: 15px 30px; color:#fff; text-decoration:none; background:#0e4c4b; -webkit-border-radius: 5px; border-radius: 5px;}
.tabs a.active {background:#d39039; color:#fff;}

.project-grid tr.incomplete td {background:#ff00001a;}
.project-grid tr.incomplete-alt td {background:#ff000045;}

.k-window-title {display:inline !important;}
.k-window-actions {float:right;}

.k-window * {box-sizing: border-box !important;}

.funding-table {border-collapse: collapse; width: 100%; margin-bottom: 50px;}
.funding-table td {padding: 10px; border-bottom: 1px solid #ccc; width: 50%;}
.funding-table td input {text-align: right;}

.k-grid .btn {display:inline-block;}

.incomplete-marker {height: 1.5em;}

.add-project {background:#fff; border: 3px solid #0e4c4b; color:#0e4c4b; text-decoration:none; font-weight: 900}

.incomplete-marker {background:red; color:#fff; display:inline; padding: 5px 7px; border-radius: 3px; font-size: .6em;}

.invalid {border: 2px solid red;}

.mobile-instructions {background:#0e4c4b; color:#fff; padding: 20px 10px; font-size: .8em; display:none;}

.agency-pie {padding: 30px; border-radius: 5px; -webkit-box-shadow: 0 0 100px 0 rgba(0,0,0,.2); box-shadow: 0 0 100px 0 rgba(0,0,0,.2);}

footer {text-align:center;}
footer a {}

.k-dialog-buttongroup {text-align: center;}
.k-dialog-buttongroup .k-button { margin: 8px}

.k-dropdownlist {padding:5px!important; background-color:white!important;background-image: none!important; color: black!important; border: 1px solid rgb(118, 118, 118)!important; border-radius: 2px!important;font-size:16px!important;}
@media only screen and (max-width: 1024px) 
 {
    header {padding: 20px 10px;} 
    header nav, .top-header {display:none;}
     
     .top-level-numbers .col-container {display: block; width: 100%;}
     .top-level-numbers .col {display:block; width: 100%;}

     .width-60, .width-40, .width-30, .width-70, .width-60-b, .width-40-b,
     .width-50, .width-50:last-child, .width-25, .width-25:last-child, .width-33, .width-33:last-child {width: 100%; margin: 0; display:block; float:none;}

     .map-control {padding: 20px;}
     .top-filter-items .filter-item {width: 100%; float:none; margin-bottom: 10px;}

     .currently-viewing-container {background:#fff; padding: 15px 10px 30px 10px;}

     .funding-source-title {padding: 10px;}
     .clear-filters {margin-top: 0;}

      #map-popup {position: static; background: #fff; width: 100%; padding: 20px; z-index: 999999; -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,.2); box-shadow: 0 0 0 0 rgba(0,0,0,.2);}

      .grid-container {width: 100%; overflow:auto;}
      #grid {min-width: 1200px;}

      .mobile-instructions {display:block;}

      .content-section {margin-bottom: 10px;}
      .content {padding:10px;}

      .stacked-graph-container {display:none;}
      #agencies-list a {        display: block;        float: none;        width: 100%;        padding: 4px 0;    }

      .agency-pie {margin-bottom: 30px;}

.content-title {border-bottom: 0;}

      .big-number-filter { border: 0 !important; padding:10px;}
      .big-number-filter .col-container { display: block; width: 100%; border: 1px solid #ccc;}   
      .big-number-filter .col {
        display: block;
        padding: 10px;
        background: #fff;
        width: 100%;
        border-right: 0 solid #ccc;
        border-bottom: 1px solid #ccc;
    }  

    .modal-window {background:#fff;}
    .modal-window .content-title { padding: 30px 10px 10px;}
    .modal-window-content {margin-bottom: 0;}
    .mi-title-container {width: 100%;}

    .modal-window-content .content-title a.close-modal {top:0; position:fixed; left: 0; right: 0; text-align:center;}

    .modal-window-content .width-33 { margin-bottom: 50px;}

     }



@media print {
    * {font-size: 11px !important;}
    header nav {display:none;}
    header {padding: 20px 0;}
    header .logo {max-height: 45px;}
    header .masthead::after {content:'New Mexico Federal Funding Dashboard'; display:block; position:absolute; right:30px; font-size: 20px; top: 50%; margin-top: -10px;}

    .funding-source-title {padding:0 !important;}
    .funding-source-title-content, .map-control{display:none;}
    #currently-viewing {margin: 30px 0 !important; font-size: 15px !important;}
    #currently-viewing b {font-size: 15px !important;}
    
    .top-level-numbers {padding: 10px 0; margin-bottom: 30px;}
    .top-level-numbers .col {background:#fff; color:#000; padding: 0 15px !important; border-right: 1px solid #ccc;}
    .top-level-numbers .col:last-child {border-right: 0;}
    .top-level-numbers .tool-tip {display:none;}

    .top-level-numbers .big-number span {font-size: 16px !important;}

    .map-container, .overflow-projects {display:none;}

    .map-control {position:static !important; padding: 0; margin: 20px 0;}
    .map-control select {font-size: .8em !important;}
    .map-control select::-ms-expand {display: none; }

    #map-popup {right: 20px !important; top: 100px !important; bottom: 20px !important; border: 1px solid #e5e5e5;}
    #map {page-break-after: always;}

    .k-grid-table tbody tr
    
    .k-grid-table thead tr th.k-table-th span {font-size: 10px !important; font-weight: bold;}    

    .content-section { page-break-after: always;       background: #fff;        border: 0 solid #ccc;        border-radius: 0;        margin-bottom: 50px;        -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,.2);        box-shadow: 0 0 0 0 rgba(0,0,0,.2);        position: relative;    }

    #section-02 {display:none;}
 }