/************************ 
 1. GLOBAL STYLES
************************/
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {
    box-sizing: border-box;
}

body {
    font-size: 16px;
    font-family: 'Open Sans', Helvetica, sans-serif;
    color: #333333;
    background-color: #91caba;
    background-position: center top;
    background-repeat: no-repeat;
    min-width: 320px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', Helvetica, sans-serif;
    margin: 0;
    padding: 0px;
    color: #009eaa;
}

h1 {
    margin: 0 -25px 30px -25px;
    padding: 0 0 30px 0;
    font-size: 32px;
    text-align: center;
    
}

h2 {padding: 10px 0;}

.pagetitle {
    font-size: 30px;
    font-weight: bold;
    text-align: left;
    margin: 20px 0 10px 0;
    padding: 10px 0 0 0;
}

h3
{
    font-size: 15px; 
    font-weight: bold;
    margin-bottom: 10px;
}

a {
    color: rgb(21, 142, 199);
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

@media (min-width: 1500px) {
    .container {
        width: 1450px !important;
    }
}

/************************ 
 2. GENERAL APPLIED STYLES
************************/
.content{
    padding: 30px 30px 10px 30px;
    margin: auto;
    background-color: #fff;
    overflow: hidden;
}

/* layout */
.overflow-auto {overflow: auto;}
.overflow-x-auto {overflow-x: auto;}
.vertical-align-bottom {vertical-align: bottom;}
.margin-0 {margin: 0;}
.margin-top-5 {margin-top: 5px;}
.margin-top-10 {margin-top: 10px;}
.margin-bottom-10 {margin-bottom: 10px;}
.margin-top-40 {margin-top: 40px;}
.margin-top-negative-40 {margin-top: -40px;}
.margin-right-15 {margin-right: 15px !important;}
.margin-left-15 {margin-left: 15px !important;}
.padding-bottom-10 {padding-bottom: 10px !important;}
.padding-top-15 {padding-top: 15px;}
.border-bottom {border-bottom: 1px solid #009eaa;}
.border-top {border-top: 1px solid #009eaa;}
.border-left {border-left: 1px solid #009eaa;}
.leftMarginOffset {margin-left: 15px;}
.width-100-percent {width: 100% !important;}
.width-75-percent {width: 75% !important;}
.width-25-percent {width: 25% !important;}
.width-field-respond {width: 150px !important;}
.width-auto {width: auto !important;}
.same-line{display:inline-block !important;}
.under {margin-top: -7px;}

/* text styles */
.bold {font-weight: bold;}
.underline {text-decoration: underline;}
.italic {font-style: italic;}
.noUnderline {text-decoration: none !important;}

/* text colors */
.tealText {color: #007787 !important;}
.blueText {color:rgb(21, 142, 199);}
.grayText {color: #888888;}
.blackText {color: black !important;}
.whiteText {color: white !important;} 
.lightBlueText {color: rgb(197, 233, 233) !important;}
.redText {color: #f00 !important;}

/* text positioning */
.text-respond {float: left;} /* float is removed for centerinf of text on smaller breakpoints */

.no-border {
    border: none !important;
    box-shadow: none !important;
}

.close {
    color: white !important;
    text-shadow: 1px 1px #000000 !important;
}

.same-line-align-right
{
    display: inline-block;
    width:180px;
    text-align:right;
    margin-right:30px;
    padding-bottom:3%;
}


/************************ 
 3. GRIDS & WELLS
************************/
.table {background-color: #FFFFFF;}
th {background-color: #dddddd;}

.result-list .result-item
{
    display: block; 
}

.well label
{
    display: inline-block;   
}

.well select, .well .form-input
{
    display: block;
    margin-top: 6px;
}

.well div.form-row
{
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.well div > label:first-child
{
    font-weight: bold;
}

.well div > label:last-child
{
    font-weight: normal;
}


/************************ 
 4. HEADER, FOOTER, LOGIN, & NAV
************************/

/* header + footer */
.logo-container {
    background-color: white;
}

.logo {
    margin: 26px auto 20px auto;
    display: block;
    width: 100%;
    max-width: 794px;
}

.welcome {
    margin: -40px -40px 0 -40px;
}

.footer{
    margin-top: 10px;
    padding: 20px;
    border-top: 6px solid #01767f;
    font-size: 14px;
    font-weight: normal;
    text-align: right;    
}

.footer a {
    color: #4A6C56;
    text-decoration:underline;
}

.footer-branding {
    display: block;
    margin: 20px auto auto auto;
}

.city-name {
    font-size: 20px;
}

/* navigation */
.navbar {
    margin-bottom: 0px;
    border-radius: 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 2px 5px 0px;
    background-color: #01767f
}

.navbar-custom {
    background-image: none;
    border: none;
    font-size: 1.3em;
    color: white;
    -ms-filter: "none";
    filter: "none";
    margin: 0 auto;
}

.navHeader {
    padding-left: 15px;
}

.nav > li:hover {
    background-color: #945927;
}

.nav > li > a:hover, .nav > li > a:focus {
    background-color:inherit;
    color: inherit;
}

.selectedNav {
    color: white !important;
}

.shrinkNav {
    padding: 3px 0 !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
}

@media (min-width:768px) {
    .navLiOverride {
        display: inline-block !important;
        float: none !important;
    }
}

.navUlOverride {
    text-align: center;
    float: none;
}

.clickable:hover{
    text-decoration: underline;
    cursor:pointer;
    background-color:inherit !important;
    color: rgba(62, 138, 164, 1) !important;
}

.panel
{
    background-color:rgb(255,255,255);
    margin-right:15px;
    margin-left:15px;
    /*border-color: rgb(12, 84, 122);*/
    margin-bottom:14px;
}

.panel-heading, .modal-header
{
    /*background-color:rgb(230, 230, 230) !important;*/
    background-image:none !important;
    /*color:white;*/
    font-size:1.0em;
}

.modal-footer
{
    padding: 0 10px;
    margin-top: 0;
}

.modal-button{
    margin: 5px;
}

.panel-footer
{
    border: 1px solid #dddddd;
}

.pageHeading
{
    display:block;
    font-weight:bold;
    padding-bottom:10px;
}

/************************ 
 5. FORM ELEMENTS
************************/

/* general */
label {font-weight: bold;}
.form-group {margin-bottom: 0px;}
.form-control {border-color: #007787;}

.form-control, .datepicker-1, .datepicker-2 {
    display: inline-block;
    padding-top: 4px;
    font-size: 16px;
    transition-delay: 0.2s;
    transition-property: all;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 1.425;
}

.form-control {
    width: auto;
}

.data {
    display: inline-block;
    margin-bottom: 5px;
}

.form-caption {
    color: #888888;
    font-style: italic;
}

/* date picker */
#date-picker {
    width: 200px !important;
    margin-bottom: 10px;
}

#date-picker input {width: 150px !important; min-width: 0;}

textarea.form-control {
    width: 100%;
    height: 100px
}

/* buttons */
a.buttonStyle, input.buttonStyle {
    text-decoration: none;
    line-height: 2;
}

.dropdown-width {
    min-width: 205px !important;
}

.street-margin {
    margin-bottom: 25px !important;
}

.bolditem{
    font-weight: bold;
    margin: auto;
}

.buttonStyle {
    width: auto;
    border: none;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    background-color: #d35400;
    cursor: pointer;
    transition-delay: 0.05s;
    transition-property: all;
    display: inline-block;
    padding: 0 15px;
    margin: 0 15px 15px 15px;
    height: auto;
}

.button-container {
    text-align: center;
    margin: 20px -40px 0px;
    padding-top: 20px;
    border-top: 1px solid #009eaa;
}

.button-bar
{
    width: 100%;
    text-align: right;
    float: right;
    padding-right: 10px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: dotted 1px #D5D5D5;
}

.button-bar > a, .button-bar > input
{   
    margin-left: 10px;
}

.action-button-space
{
    display: inline-block;
    margin-right: 10px;
}

.btn-default
{
    border-color:rgb(12, 84, 122);
    transition-delay: 0.2s;
    transition-property: all;
    display: inline-block;
    min-width: 100px;
    font-size: 1.0em;
    margin: 10px 0;
}

.btn-group > .btn {
    float: none;
}

#InspectionTime
{
    border: 1px solid;
    height: 34px;
    font-size: 16px;
    margin-bottom: 0px;
    border-color: #007787;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 0px;
    border-radius: 4px;
}

.input-group-addon {
    width: 25%;
}

.input-group .date-1 {
    width: 75%;
}

.dropdown-menu.datepicker {
    background-color: rgb(246, 245, 229);
    margin-right: 15px;
    margin-left: 15px;
}

/* browser default overwrites */
.form-control:-moz-placeholder,
.form-control::-moz-placeholder,
.form-control:-ms-input-placeholder,
.form-control::-webkit-input-placeholder
 {color: #c6c6c6;}

/* Styles for validation helpers */
.field-validation-error {
    color: #f00;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
}

.validation-summary-valid {
    display: none;
}

.column-align-center {
    text-align: center;
}

.pickPaymentTypeMini
{
    display:none;
}

.help_popup
{
    display: inline-block; 
    height: 34px; 
    width: 20px; 
    cursor: pointer; 
    z-index: 10; 
    position: relative; 
    line-height: 1; 
    padding-left: 4px;
}

.selected, selected:hover
{
    background-color:rgb(102,175,233) !important;
    background-image:none;
    color:white !important;
    /*text-shadow: 1px 1px #000000 !important;*/
}

/************************ 
 6. SPECIFIC CONTENT
************************/
.InspectionType {width: 15%;}
.DateOfInspection {width: 10%;}
.InspectionStatus{width: 15%;}
.Actions {width: 20%;}

#permit-header {margin-bottom: 30px;}

.makePaymentLabel
{
    vertical-align:top; 
    padding-top:6px;
}
@media (max-width:767px) {
    .makePaymentLabel
    {
        text-align:left;
    }
}

#SelectronLogo
{
    max-height: 60px;
}

.customerLogo
{
    max-height: 120px; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    width:auto; 
    display:inline-block; 
    position:relative;
}

.logout
{
    text-align:right;
    position: relative;
    top: 80px;
    margin-bottom: 80px;
}
@media (max-width:767px) {
    .logout
    {
        top: 10px;
        margin-bottom: 10px;
    }
}

.btn-logout {
    width: auto;
    font-size: 13px;
    padding: 0 7px;
}
.small-button{
    font-size: 12px;
    margin: 5px 0 0 0;
}

.login-margin {
    margin-left: -30px;
}
@media (max-width: 767px){
    .login-margin {
        margin-left: inherit;
        /*margin-right: 0;*/
    }
}

.arn-button {
    font-size: 12px;
    margin: 0;
}

.headerPadding {
    padding: 0;
}

@media (min-width: 992px) {
    .headerPadding {
        padding: 0 110px;
    }
}

/************************ 
 7. MEDIA QUERIES
************************/
@media (max-width: 992px) {
    .col-md-center {
        margin: auto;
    }
}
@media (min-width: 900px) {
    .capPanelWidth
    {
        min-width: inherit !important;
    }
}

@media (min-width: 768px) {
    .navbar-header {
        display: none;
    }
}

/* "Small" Bootstrap breakpoint */
@media (max-width: 767px)
{
    .text-respond {
        text-align: center !important;
        float: none;
        clear: both;
    }
    .hideTooltip
    {
        display:none !important;
    }

    #SelectronLogo
    {
        max-height: 40px;
    }
    .customerLogo
    {
        max-height: 50px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .logo > img {
        width: 200px;
    }

    #sectionLogo {
        border-bottom: 5px solid #893837;
    }

    #date-picker {
        margin: 0 auto 10px auto;
    }

    .navbar {
        margin-bottom: 5px !important;
    }

    .navbar-toggle {
        border: none;
        border-radius: 0px 0px;
        background-color: transparent;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .navHeader {
        font-size: 1.5em;
        height: 100%;
        vertical-align: middle;
        line-height: 50px;
    }

    .selectedNav {
        box-shadow: none;
    }

    .data {margin-bottom: 15px;}

    .panel
    {
        margin:0;
    }

    .pageHeading
    {
        display:none;
    }

    .pickPaymentTypeMini
    {
        display:block;
    }

    /*.pickPaymentTypeNormal
    {
        display:none;
    }*/

    .dropdown-menu
    {
        margin: -11px 0 0 0;
        min-width: 0 !important;
    }
}

@media (max-width: 500px){
    #login-button {
        font-size: 15px;
    }
}

@media (max-width: 440px) 
{
    .width-field-respond {width: 100% !important;}

    .navHeader {
        font-size: 1.2em;
        height: 100%;
        vertical-align: middle;
        line-height: 50px;
    }
}

/************************ 
 8. PRINT SETTINGS
************************/
@media print
{
    body
    {
        background-image: none !important;
        margin: 0;
        padding: 0 !important;
        min-width: 810px;
        width: 1024px;
    }
    .container, .container-fluid
    {
        width: auto;
        min-width:800px;
    }
    a[href]:after {
        content: none !important;
    }
    * 
    {
        -webkit-print-color-adjust: exact !important; /* Chrome, Safari */
        color-adjust: exact !important; /*Firefox*/
    }
    #EmailResult {display: none;}

    .noPrint {display: none;}

    .customerLogo{
        max-height: 120px;
    }
}