:root {
    --primary: #141414;
    --secondary: #FFFFFF;
    --headerText: #141414;
    --defaultText: #656363;
    --disabled: #D3D2D2;
    --button: #4B93C9;
    --buttonHover: #053B64;
}

[v-cloak] {
    display: none !important;
}

span {
    display: inline-block;
}

iframe {
    width: 100% !important;
    min-height: 100%;
    position: inherit !important;
}

.v-btn {
    text-transform: capitalize !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
}

.v-btn--outlined {
    border: 2px solid #141414 !important;
}

.v-card__title {
    word-break: break-word !important;
}

.snackbarNoBanner {
    top: 110px !important;
}

.snackPosition {
    top: 100px !important;
}

.normalSnackPosition {
    top: 230px !important;
}

table {
    width: 100%;
}

.ellipsis {
    cursor: pointer;
}

.v-application.theme--light {
    background: #eeeeee !important;
}

legend {
    max-width: 15% !important;
}

.cke_dialog, .cke_panel {
    z-index: 200010 !important;
}

#group-dropdown .v-select__selections {
    color: var(--secondary) !important;
    font-size: 14px;
}

.bannerBar #group-dropdown .v-input__control {
    height: 50px !important;
    margin: -16px -25px !important;
}

#group-dropdown .v-input__control {
    background-color: #505050 !important;
    height: 52px;
    margin: -18px -25px;
    border-radius: 0px;
}

.v-dialog:not(.v-dialog--fullscreen) {
    max-height: 80% !important;
}

#group-dropdown .v-input__control>.v-input__slot:before {
    border-style: none !important;
}

#group-dropdown .v-input__control>.v-input__slot:after {
    border-style: none !important;
}

#group-dropdown .v-select__selections input {
    display: none;
}

#group-dropdown .v-select__selection--comma {
    overflow: visible !important;
    font-size: 14px !important;
    margin-top: 12px !important;
}

#group-dropdown .v-select__slot {
    margin-top: 4px !important;
}

#group-dropdown i {
    color: white !important;
}

.text-white input {
    color: white !important;
}

.groupMenu .v-list {
    background-color: #141414 !important;
}

.groupMenu .v-list-item u {
    color: white !important;
}

.groupMenu .v-list-item__title {
    color: white !important;
}

.appBar {
    background-color: var(--primary) !important;
    width: 225px;
}

.appBar .v-list-item {
    min-height: 30px !important;
    color: var(--secondary) !important;
}

.headerTitle {
    color: var(--secondary);
    font-size: 18px;
    font-weight: 600
}

#districtName {
    margin-bottom: 5px;
    font-size: 24px;
    margin-left: 16px;
}

#districtName-mobile {
    margin-bottom: 5px;
    font-size: 24px;
    margin-left: 16px;
    display: none;
}

.headline {
    font-size: 24px !important;
    font-weight: bold !important;
    padding-bottom: 30px !important;
}

#currentPageText {
    display: none;
    border: none !important;
    font-weight: 700 !important;
    font-size: 20px;
}

.labelText {
    font-size: 18px;
    color: var(--component1) !important;
    margin-left: -24px;
}

.modalCard {
    border-top: 10px solid black !important;
    border-radius: 6px !important;
}

.printAndDownload {
    padding: 16px;
    display: inline-flex !important;
}

.downloadBtn i {
    height: 14px !important;
    width: 14px !important;
}

.downloadBtn {
    margin-right: 56px !important
}

.printBtn {
    margin-right: 36px !important;
}

.printBtn i {
    height: 14px !important;
    width: 14px !important;
}

.show-newline {
    white-space: pre-wrap;
}

.buildingValidation {
    display: none;
    color: red;
}

#whitebar {
    height: 60px;
}

.appBarZIndex {
    z-index: 1001 !important;
}

#whitebarNoImg {
    position: fixed;
    top: 60px;
    z-index: 1000;
    width: -webkit-fill-available !important;
}

.noImageBodyContent {
    position: absolute;
    top: 120px;
}

.mobileNavCloseBtn {
    justify-content: end;
    width: 100%;
    margin-top: 4px !important;
    max-height: 40px;
}

#vertical-spacer {
    height: 55px;
}

.v-text-field .v-label {
    width: 100%;
}

.va-top {
    vertical-align: top;
}

.menu-button > div {
    justify-content: flex-start !important;
    padding-left: 8px !important;
}

.ellipse-menu {
    justify-content: flex-start !important;
    padding-left: 8px !important;
}

.theme--light.v-btn.v-btn--disabled{
    background-color: var(--disabled) !important;
}

#changeBanner {
    height: 365px;
    width: 680px;
    border-radius: 6px;
}

#changeBanner > .modal-dialog > .modal-content {
    padding-left: 20px;
    padding-right: 20px;
}

.uploadBannerCard {
    border-radius: 6px !important; 
    border-top: 10px solid black !important;
}

.bannerModalFileText{
    color: #656363 !important;
    font-size: 16px !important;
    padding: 10px 0px 10px 0px;
}

#drop_zone {
    width: 100%;
    border: 1px solid #141414;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    font-weight: bold;
}

.cardTitle{
    color: var(--headerText) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
}

img[data-dz-thumbnail] {
    width: 100%;
    padding-bottom: calc((200 / 1920) * 20%);
}

.dz-error-message {
    color: red;
}

.dz-details {
    border: 1px solid black;
    padding: 10px;
}

.select-photo-btn {
    cursor: default;
    background-color: #465A65;
    color: white;
    padding: 10px 70px 10px;
    margin-top: 5px;
    margin-bottom: 10px;
}

#banner {
    height: auto !important;
    width: 100%;
    padding-top: calc((200 / 1920) * 100%);
    background-size: 100% 100% !important;
}

.banner-wrapper {
    position: relative;
    margin-top: 56px !important;
}

.v-snack:not(.v-snack--absolute) {
    z-index: 100099 !important;
}

.v-dialog__content--active {
    z-index: 100099 !important;
}

footer {
    position: absolute;
    left: 10px;
    color: #95989a;
    bottom: -12px;
}

#whitebar.fixed {
    position: fixed;
    top: 56px;
    z-index: 1000;
    width: -webkit-fill-available !important;
}

footer u {
    font-size: 12px !important;
    color: var(--defaultText) !important;
}

footer p {
    font-size: 12px !important;
    color: var(--defaultText) !important;
}

#ecragroupLink {
    color: #0d4d84;
}
/*feedback tracker*/
.fbTitle {
    font-size: x-large;
}
/*menu btns at top right of blue bar*/
.menu_item {
    font-size: xx-large;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 5px;
}

#login_display {
    float: right;
    margin-top: 8px;
}

.navbar-fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    top: 0;
    border-width: 0 0 1px;
    border-radius: 0;
}

.navbar-header {
    float: left;
}

#defaultPanel a {
    color: #337ab7 !important;
    text-decoration: underline !important;
}

a {
    text-decoration: none;
}

a:focus, a:hover {
    color: #23527c;
    text-decoration: none;
}

a:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.btn-success {
    color: #fff !important;
    background-color: #5cb85c !important;
    border-color: #4cae4c;
}

.Ecriss_DistrictName {
    position: absolute;
    border: 1px solid #0d4d84;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 2px;
    top: 55px;
    right: 20px;
    z-index: 1;
}

#Label_LastBuilt {
    font-size: xx-small;
}

.tutorialModalBody {
    text-align: center;
}

#openTutorialNewWindowBtn {
    background-color: var(--button);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
}

@media print {
    @page {
        size: A4 landscape;
        /* you can also specify margins here: */
        margin: 25mm;
        margin-right: 45mm; /* for compatibility with both A4 and Letter */
    }

    a [href]:after {
        content: none !important;
    }

    .ellipsis {
        display: none;
    }

    a:link:after,
    a:visited:after {
        content: "" !important;
    }
}

.v-application--light a {
    color: #0d4d84 !important;
}

a {
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500 !important;
    line-height: 1.1 !important;
    margin-bottom: 10px !important;
}

.text-align-middle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-align-middle-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

select {
    -webkit-appearance: menulist !important;
    border-style: inherit !important;
    -moz-appearance: menulist;
}

.modal-footer .btn + .btn {
    margin: 6px 8px !important;
}

body {
    padding-bottom: 20px;
    line-height: normal !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

html {
    overflow-y: scroll;
}
/* Set padding to keep content from hitting the edges */
.body-content {
    margin: 0 auto;
    width: 100%;
    background-color: #E9EAEC !important;
}

#printme {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists
   will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
    white-space: normal;
}

/*landing page*/
body {
    background-color: #eeeeee;
    font-family: 'Roboto', sans-serif;
}

.printAndDownload i {
    font-size: 36px !important;
}

.printAndDownloadText {
    font-size: 14px;
    position: absolute;
}

.printIcon {
    color: #0d4d84;
}

.downloadIcon {
    color: #00796b;
}

.printAndDownload {
    float: right;
}
/*home page*/
/*breadcrumb*/
.breadcrumb {
    background-color: #eeeeee;
    color: #0d4d84 !important;
    font-size: 16px;
    padding: 0px;
    padding-left: 10px;
}

#breadcrumb {
    padding-left: 15px;
}
/*drop down in banner*/
#dropDown, #buildingTextbox {
    position: absolute;
    bottom: calc(((100vw - 200px) / 9.6 - 1px) * 0.25);
    left: 30px;
    min-width: 500px;
    max-width: 920px;
    padding: 2px;
    height: 60px;
    background-color: #455a64;
    color: white;
    font-size: 30px;
    text-align: center;
    opacity: .75;
    text-align-last: center;
    z-index: 1;
}

#buildingTextbox {
    padding-top: 8px;
}

#dropDown > option {
    font-size: 16px;
}

#blueBanner {
    width: 100%;
    height: 200px;
}
/*navigation bar*/
#navBtnContainer {
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !important;
    background-color: #ffffff;
    height: 50px;
}

a:focus, a:hover {
    text-decoration: none;
}

.navbar-fixed-top {
    background-color: #141414;
    color: #ffffff;
}

.navBtn > a {
    color: #333 !important;
    height: 50px;
    vertical-align: -webkit-baseline-middle;
}

.navBtn {
    list-style: none;
    margin-right: 25px;
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    height: 50px;
}

.adminModeBtn {
    display: inline-block;
    font-size: 18px;
    color: #333;
    float: right;
    padding-top: 15px;
    padding-right: 10px;
}

.adminModeBtn a {
    color: #333 !important;
}

.adminModeBtn a[disabled] {
    color: #ccc !important;
    cursor: not-allowed;
}

.navbar-brand {
    color: white;
    font-family: 'Roboto', sans-serif;
    padding: 15px;
}

.navbar-brand:hover {
    color: white;
}

.ecrissHome {
    font-size: 40px;
}

.appName {
    font-size: 25px;
}

/*.navBtn > a:hover {
    border-bottom: 3px solid #337ab7;
}*/
/*tiles*/
.ecraTile {
    padding: 10px;
}

.ecraPanel {
    background-color: white;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12) !important;
    overflow-x: hidden;
}

.blueTitle {
    color: #337ab7;
}

.welcomeText {
    word-break: break-word;
    vertical-align: middle;
    font-size: 16px;
}

.ecraLogo {
    float: left;
}

.clearfix {
    clear: both;
}

.welcomeParagraph {
    margin: 0 auto;
}

.greenBox {
    background-color: #00796b;
    color: white;
    font-size: 25px;
    text-align: center;
    width: 90%;
    border-radius: 4px;
    margin: 0 auto;
}

#cke_ckEditor {
    width: 90%;
    margin: 0 auto;
}

#main-grid {
    display: grid;
    grid-template-columns: 220px auto;
    height: 100%;
    width: 100%;
}

.left-panel {
    grid-column: 1 / 2;
    border-right: 2px lightgrey solid !important;
    padding: 15px 0px 15px 15px;
    height: 100%;
}

.right-panel {
    grid-column: 2 / 2;
    padding: 15px;
    height: 100%;
    min-width: 0
}
/*left panel for filtering*/
#leftPanel {
    display: table-cell;
    border-right: 2px solid lightgrey;
    min-width: 150px;
    height: 100vh;
}

.rightPanel {
    display: table-cell;
}

.modal-open {
    padding-right: 0px !important;
}

.modal-open-button {
    cursor: pointer;
    color: #337ab7;
}
/*general portal wide stylings*/
.btn {
    cursor: pointer;
}

.btn__content {
    height: auto;
}

.draggable {
    cursor: -webkit-grab;
    cursor: -moz-grab;
}

.draggable:active {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.justifyLeft {
    text-align: left;
}

.orangeLink {
    color: #F16522;
    font-style: italic;
    cursor: pointer;
}

.orangeLink:hover {
    font-weight: bold;
}

/*Vuetify Overrides*/
.btn--icon {
    margin: 0;
    padding: 0;
    width: 24px;
}

.snack {
    z-index: 10000;
}

.link {
    cursor: pointer;
}
/*feedback tracker modal*/
.MenuPanel {
    background-color: white;
    position: absolute;
    color: black;
    right: 15px;
    top: 55px;
    box-shadow: 0px 4px 6px;
    border-radius: 4px;
    min-width: 200px;
    max-width: 300px;
    display: none;
}

.MenuPanel a {
    color: black;
}

.Item {
    margin: 5px;
}

.fbSavedModal {
    width: 300px !important;
}

.feedbackHeader, .feedbackClose, .fbSavedHeader {
    background-color: #337ab7 !important;
    color: white !important;
}

.FBmodalContent {
    min-width: 350px;
}

.feedbackClassifiedContainer {
    margin-left: 10px
}

.GridPanel {
    background: white;
    padding: 30px;
    position: absolute;
    right: 80px;
    top: 50px;
    border-radius: 4px;
    box-shadow: 0px 4px 6px black;
    display: none;
}

.GridPanel span {
    margin-right: 10px;
}

.fbSavedBody {
    height: 60px !important;
    overflow-y: hidden !important;
    text-align: left !important;
}

.feedbackType {
    font-weight: bold;
    margin-bottom: 5px;
}

.fbTitle {
    color: white !important;
}

.feedbackPanelbody {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    padding: 15px;
}

.fbType {
    width: 100%;
    color: black !important;
    text-align: left !important;
}

.feedbackBody {
    color: black !important;
    text-align: left !important;
}

.feedbackSaved {
    text-align: left !important;
}

/*display building modal*/
#displayBuildingBody {
    padding: 15px;
}

#buildingVisibilityModal {
    color: #95989a;
}

#errorInfo {
    font-size: 26px;
}

#header {
    background-color: #455a64;
    color: #ffffff;
    position: fixed;
    right: 0;
    left: 0;
    z-index: 999;
    top: 0;
    border-width: 0 0 1px;
    border-radius: 0;
    min-height: 55px;
}

#header-table {
    width: 100%;
    display: block;
}

#header-table td {
    white-space: nowrap;
}

#appnameColumn {
    width: 100%;
    vertical-align: bottom;
    white-space: normal !important;
}

#nav_menu_mobile, #mobile_menu, #mobile_overlay {
    display: none;
}

#Label_AppName {
    color: white;
    font-size: 26px;
    text-decoration: none;
    margin: 4px 4px 4px 9px;
    font-style: italic;
    vertical-align: bottom;
    display: inline-block;
}

#ecriss {
    color: white;
    font-size: 36px;
    margin-left: 5px;
    margin-right: 5px;
    text-decoration: none;
    display: inline-block;
}

.navBtnLink {
    color: var(--secondary) !important;
    font-size: 24px;
    font-weight: bold;
}

#navBtnContainerMobile {
    display: none;
}

.font-16 {
    font-size: 16px !important;
}
.font-20 {
    font-size: 20px !important;
    font-weight: 600;
}

.noDataMessage {
    padding-bottom: 190px;
    padding-top: 20px;
}

/*#region Mobile Breakpoint */
@media only screen and (max-width: 960px){
    #whitebarNoImg {
        top: 56px !important;
    }
    .headerTitle {
        font-size: 16px;
    }
}
@media only screen and (max-width : 807px) {
    .headerTitle {
        font-size: 12px;
    }
    #group-dropdown .v-select__selection--comma {
        font-size: 12px !important;
    }
    #group-dropdown span {
        font-size: 14px !important;
    }
    .printAndDownload, #crystalReportForm {
        padding: 0 !important;
        padding-bottom: 32px !important;
        padding-top: 8px !important;
    }
    .hideMobile {
        display: none !important;
    }
    #navBtnContainerMobile {
        display: block !important;
    }
    #navBtnContainer {
        display: none;
    }
    .navBtn {
        justify-content: center !important;
    }
    .mobileMenuFooter .v-list-item a{
        color: var(--secondary) !important;
    }
    .mobileMenuFooter .v-list-item {
        color: var(--secondary) !important;
    }
    .v-navigation-drawer--is-mobile {
        height: -webkit-fill-available !important;
    }
    .v-navigation-drawer__append {
        height: 85% !important;
        background-color: var(--primary) !important;
    }
    .v-navigation-drawer--is-mobile .v-list {
        display: inline-grid !important;
    }
    .v-navigation-drawer__append, .v-navigation-drawer__content {
        display: flex;
        flex-direction: column !important;
        align-items: center !important;
    }
    #banner {
        min-height: 60px !important;
    }
    /*#header {
        min-width: 300px;
        height: 95px;
    }

    #ecriss {
    }

    #districtName-mobile {
        display: block;
    }

    #districtName {
        display: none;
    }

    #Label_AppName {
        font-size: 18px;
    }

    #nav_menu_desktop {
        display: none;
    }

    .mobile_menu_open {
        width: 80% !important;
    }

    #nav_menu_mobile, #mobile_menu, #mobile_overlay {
        display: block;
    }

    #mobile_menu_icon {
        font-size: 40px;
        color: white;
        width: 40px !important;
    }

    #mobile_menu {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 2000;
        top: 0;
        right: 0;
        background-color: white;
        border-left: 1px solid black;
        overflow-x: hidden;
        transition: 0.5s;
        font-size: 18px;
        max-width: 400px;
    }

    #mobile_menu_container {
        padding: 20px 8px 8px 8px;
        min-width: 250px;
        overflow-y: scroll;
    }

    #mobile_menu_container h4 {
        font-weight: bold !important;
        font-size: 20px;
        display: block;
    }

    #mobile_menu_container .link {
        color: black;
    }

    #mobile_overlay {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 1999;
        background-color: black;
        opacity: 0.5;
        left: 0px;
        top: 0px;
    }

    #mobile_menu_container .glyphicon {
        margin-right: 4px;
    }

    #mobile_menu_container .inner_container {
        margin-bottom: 10px;
        margin-right: 14px;
    }

    #dropDown, #buildingTextbox {
        min-width: 250px !important;
        max-width: 250px !important;
        overflow-x: scroll;
        bottom: 0px;
        height: 50px;
    }

    .navBtn, .adminModeBtn {
        font-size: 15px !important;
    }

    .breadcrumb {
        font-size: 12px !important;
        display: inline-block;
    }

    .printAndDownload i {
        font-size: 30px !important;
    }

    #navBtnContainer {
        padding-left: 0px !important;
    }*/
}

/*#endregion */