/* READ ME!! : This file contains the default styles consistent with Valero branding and styling. This file SHOULD NOT
    be changed on your local project. Modifications to this file should be made, and approved, on the main template.

    To override these styles, please use the "CustomStyles.css" file.
*/

/*#region Globals */
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    /*line-height: 120%;*/
    line-height: 1.1;
}
/*#endregion*/


/*#region Typography */
h1 {
    font-weight: 100;
    font-size: 32px;
    margin-bottom: 20px;
    margin-top: 0;
}

h3 {
    margin: 0 0 20px;
    font-weight: 700;
    font-size: 14px;
}

h4 {
    font-size: 13px;
}

a {
    color: #0070AB;
    line-height: 222%;
}

    a:hover, a:focus {
        color: #0070AB;
    }

p {
    margin-bottom: 20px;
}
/*#endregion*/


/*#region Bootstrap Overrides */
.well {
    border-radius: 0;
}

    .well h3 {
        margin-bottom: 10px;
    }

    .well p:last-child {
        margin-bottom: 0;
    }

.btn {
    border-radius: 0;
    padding: 6px 35px;
}


.btn-primary {
    background-color: #0070AB;
}

    .btn-primary:hover {
        background-color: #0070AB;
        border-color: #0070AB;
    }

.form-control {
    border-radius: 0;
}
.jumbotron {
    background-color: #177bac;
    border-color: #e7e7e7;
}
/*#endregion*/


/*#region Date Picker Overrides */
.datetimepicker table tr td.active,
.datetimepicker table tr td.active.active,
.datetimepicker table tr td span.active.active {
    background-image: none;
    background-color: #0070AB;
}
/*#endregion*/


/*#region DataTables Overrides */
table.dataTable {
    border-collapse: collapse;
    margin-bottom: 20px;
}

    table.dataTable, table.dataTable th, table.dataTable td {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        table.dataTable thead th,
        table.dataTable.no-footer {
            border-bottom-color: #DDD;
        }

        table.dataTable thead .sorting,
        table.dataTable thead .sorting_asc,
        table.dataTable thead .sorting_desc,
        th {
            background-color: #ECECFB;
            border-bottom: 0;
        }

/* Row hover color */
.table-hover > tbody > tr:hover,
.table-striped > tbody > tr.odd:hover,
.table-striped > tbody > tr.even:hover {
    background-color: #FAFAFE;
}


.selected,
.table-hover > tbody > tr.selected:hover,
table.dataTable tbody tr.selected {
    background-color: #CACAD9;
}

/*#endregion*/


/*#region Forms */
.radio input[type="radio"],
.radio-inline input[type="radio"] {
    margin-top: 1px;
}

.input-group-addon {
    border-radius: 0;
}

    .input-group-addon:last-child {
        background: #ECECFB;
    }

.form-inline-search label,
.form-inline-search button {
    display: block;
}

.form-inline-search .form-group {
    margin: 0 10px 20px 0;
}
/*#endregion*/


/*#region Alert */
/* This region is used if you have implemented the default "Alert" system used in this template. If you use another form of 
   message display/notification, this section can be removed.
*/
/*.alert {
    margin-bottom: 0;
    padding: 14px;
    background-color: #D90000;
    color: #FFF;
    font-weight: 600;
    border: 0;
    border-radius: 0;
}*/

    .alert .close {
        opacity: 1;
        right: 0;
    }
/*#endregion*/


/*#region Info Bar */
.info-bar {
    border: 1px solid #c8c8c8;
}

    .info-bar a {
        color: #333;
        line-height: inherit;
    }

    .info-bar .nav-pills > li > a {
        border-radius: 0;
    }

.info-bar-contact {
    border-left: 1px solid #c8c8c8;
    border-right: 1px solid #c8c8c8;
}

    .info-bar-contact .dropdown-menu {
        padding: 20px;
        border-radius: 0;
        margin-top: -1px;
    }

    .info-bar-contact p {
        margin: 0 0 5px;
        font-size: 12px;
    }

    .info-bar-contact .dropdown-menu .divider {
        margin: 15px 0;
    }
/*#endregion*/


/*#region Top Navigation */
.navbar-top {
    background-color: #0070AB;
    border-color: #e7e7e7;
    min-height: 70px;
    margin-bottom: 30px;
    border-radius: 0;
    border: 0;
    font-size: 14px;
    font-weight: 600;
}


    .navbar-top .navbar-nav > li > a {
        color: #FFF;
        padding: 25px 15px;
    }

        .navbar-top .navbar-nav > li > a:hover {
            background: #FFF;
            color: #177bac;
        }

        .navbar-top .navbar-nav > li > a:focus {
            color: #FFF;
        }

            .navbar-top .navbar-nav > li > a:focus:hover {
                /*background-color: #177bac;*/
            }

.navbar-default {
    margin: 0px;
}

    .navbar-default .navbar-toggle {
        margin-top: 18px;
        color: #FFF;
        border: 0;
    }

        .navbar-default .navbar-toggle:hover,
        .navbar-default .navbar-toggle:focus {
            background-color: #FFF;
            color: #177bac;
        }

        .navbar-default .navbar-toggle .icon-bar {
            background-color: #FFF;
        }

        .navbar-default .navbar-toggle:hover .icon-bar,
        .navbar-default .navbar-toggle:focus .icon-bar {
            background-color: #177bac;
        }

.navbar-collapse {
    border-top: 0;
}

.navbar-brand img {
    margin-top: 2px;
}

a.navbar-brand {
    color: #FFF !important;
    font-size: 14px;
}

a.navbar-mobile-back {
    float: left;
    padding: 20px 20px 21px;
    color: #FFF;
    text-decoration: none;
}

    a.navbar-mobile-back:hover {
        color: #177bac;
        background: #FFF;
    }

i.navbar-mobile-icon {
    color: #FFF;
}

p.navbar-welcome {
    padding: 20px 20px 21px;
    color: #FFF;
    text-decoration: none;
    margin: 0px;
    line-height: 222%;
}

/*#endregion*/


/*#region Body */
section {
    padding: 10px;
}

hr {
    border-color: #CACAD9;
}
/*#endregion*/


/*#region Tables */
th {
    vertical-align: middle;
}

.navbar-table {
    background-color: #177bac;
    border-radius: 0;
    margin-bottom: 0;
    padding: 0 10px;
}

.navbar-table .navbar-text,
.navbar-table .navbar-nav > li > a {
    color: #FFF;
    font-weight: normal;
}

.navbar-table .navbar-text h4 {
    margin-top: 0;
}

.navbar-table .navbar-text p {
    font-size: 12px;
    margin-bottom: 5px;
}

.navbar-table .navbar-text p:last-child {
    margin-bottom: 0;
}

.navbar-table .navbar-right {
    margin-right: 0;
}

.navbar-top .navbar-table .navbar-right > li {
    font-weight: normal;
    padding: 25px 15px;
    color: #FFF;
}

.navbar-table .navbar-nav {
    margin: 0px;
}

.navbar-table .navbar-nav > .open > a,
.navbar-table .navbar-nav > .open > a:hover,
.navbar-table .navbar-nav > .open > a:focus,
.navbar-table .navbar-nav > li > a:hover,
.navbar-table .navbar-nav > li > a:focus {
    background-color: #115e82;
    color: #FFF;
}

.navbar-table .dropdown-menu > li > a {
    padding: 10px 20px;
    color: #FFF;
}

.navbar-table .navbar-text {
    margin-top: 18px;
}

.table {
    border: 1px solid #ddd;
    /*margin-bottom: 0;*/
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 14px;
    vertical-align: middle;
}

.table + .table {
    margin-bottom: 20px;
}

.control-label {
    font-size: 12px;
}

.form-inline .form-control-mini {
    width: 50px;
}

/* Row Colors */
.table-striped > tbody > tr.odd {
    background-color: #FFF;
}

.table-striped > tbody > tr.even {
    background-color: #F8F8FE;
}

.table-totals {
    background-color: #115e82 !important;
    color: #FFF !important;
}
/*#endregion*/


/*#region Tiles */
.tiles {
    padding-bottom: 0;
}

.tile-mobile {
    font-size: 25px;
    margin: 5px;
    padding: 5px;
}

.tile {
    display: block;
    border: 1px solid #ececfb;
    /*height: 254px;*/
    /*height: 180px;*/
    /*margin-bottom: 40px;*/
    margin-bottom: 25px;
    text-align: center;
    overflow: hidden;
}

.tile:before {
    content: '';
    /*height: 4px;*/
    background-color: #177bac;
    display: block;
    /*margin-bottom: 30px;*/
    margin-bottom: 0px;
}

.tile:hover {
    text-decoration: none;
}

.tile i {
    /*margin-bottom: 30px;*/
    margin-bottom: 0px;
    padding-top: 8px;
    /*font-size: 100px;*/
}

.tile h3 {
    color: #177bac; /*#000;*/
    font-size: 15px;
    /*font-weight: bold;*/
    font-weight: normal;
    margin-bottom: 5px;
    margin-top: 5px;
}

.tile p {
    color: #000;
    line-height: 146%;
    width: 80%;
    margin: 0 auto;
}
/*#endregion*/


/*#region Footer */
footer {
    background-color: #177bac;
    color: #FFF;
    padding: 10px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

    footer h3 {
        margin: 0 0 5px;
        font-size: 14px;
        font-weight: 600;
    }

    footer a, footer span {
        color: #dadaea;
        font-size: 11px;
        line-height: 166%;
    }

        footer a:hover, footer span:hover {
            color: #dadaea;
        }

    footer .logo {
        margin-top: 10px;
    }


/*#region Responsive Sticky Footer */
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
html {
    position: relative;
    min-height: 100%;
}

body {
    padding-bottom: 140px;
}

footer {
    height: 100px;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    body {
        padding-bottom: 160px;
    }

    footer {
        height: 100px;
    }
}
/*#endregion*/
/*#endregion*/


/*#region printing*/
/* All of these styles use !important to override normal styles.  This is
   required because we do not wrap the entire normal CSS in "@media screen{}"

   These classes may or may not be required, depending on project requirements. If printing data tables is not a requirement,
   try removing these classes.
*/
@media print {
    body {
        font-size: 8px !important;
    }

    .navbar {
        display: inherit;
        min-height: 10px !important;
        color: #FFF !important;
    }

    .navbar-brand {
        height: auto !important;
        padding: 2px !important;
    }

    .navbar-text strong {
        font-size: 11px !important;
    }

    .navbar-text p {
        font-size: 9px !important;
    }

    .navbar-table {
        padding-left: 0px !important;
        margin-left: 0px !important;
    }

    table.dataTable thead th, table.dataTable tbody td {
        padding: 1px !important;
        line-height: normal !important;
        width: auto !important;
    }

    table.dataTable thead td {
        background-color: #ECECFB !important;
    }

    .VLONoPrint {
        display: none !important;
        visibility: hidden !important;
    }

    nav {
        background-color: #ECECFB !important;
    }


    footer {
        display: none !important;
        visibility: hidden !important;
    }

    nav.navbar-top {
        display: none !important;
        visibility: hidden !important;
    }

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

    a.navbar-brand {
        color: #111111 !important;
    }

    .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
        margin-left: auto !important;
    }
}

/*#endregion printing*/


/*#region Loading Gif*/
#imgLoadingGif {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
}
/*#endregion Loading Gif*/


/*#region Custom Calendar Tweak*/
.calendar-span {
    width: auto;
    cursor: pointer;
}
/*#endregion Custom Calendar Tweak*/


/*#region Row hover color */
.table-hover > tbody > tr:hover,
.table-striped > tbody > tr.odd:hover {
    background-color: #EEEEEA;
}


.selected,
.table-hover > tbody > tr.selected:hover,
table.dataTable tbody tr.selected {
    background-color: #EEEEEA;
}
/*#endregion*/


/*#region Table Total Line Overrides*/
.table-totals, .table-striped > tbody > tr.table-totals.even, .table-striped > tbody > tr.table-totals.odd, .table-striped > tbody > tr:nth-child(odd).table-totals, .table-striped > tbody > tr:nth-child(even).table-totals {
    background-color: #115e82;
    color: #FFF;
}

.business-total, .table-striped > tbody > tr.business-total.even, .table-striped > tbody > tr.business-total.odd, .table-striped > tbody > tr:nth-child(odd).business-total, .table-striped > tbody > tr:nth-child(even).business-total {
    /*background-color: #ECECFB;*/
    background-color: #555;
    color: #FFF;
}

.settlement-total, .table-striped > tbody > tr.settlement-total.even, .table-striped > tbody > tr.settlement-total.odd, .table-striped > tbody > tr:nth-child(odd).settlement-total, .table-striped > tbody > tr:nth-child(even).settlement-total {
    background-color: #BAD2E8;
}
/*#endregion*/


/*#region Download Menu Options*/
.vlo-dlmenu > thead > tr > th, .vlo-dlmenu > tbody > tr > th, .vlo-dlmenu > tfoot > tr > th, .vlo-dlmenu > thead > tr > td, .vlo-dlmenu > tbody > tr > td, .vlo-dlmenu > tfoot > tr > td {
    border: none;
    margin: 0px;
    padding: 0px;
    vertical-align: middle;
}
/*#endregion*/


/*#region Google Map Styles */
.map-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}

    .map-container .map-canvas {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0;
        padding: 0;
    }

@media screen and (min-width: 768px) {
    #mapModalDialog {
        width: 90%; /* either % (e.g. 60%) or px (400px) */
    }
}

@media screen and (max-width: 700px) {
    .map-container {
        padding-bottom: 100%;
    }
}
/*#endregion*/