/*   
Template Name: MA Template Common
Version: 1.0.0
-------------------------------------------
::  1.0 General 
::  2.0 Header
::  3.0 Top Menu
::  4.0 Sidebar
::  5.0 Content
-------------------------------------------
    5.1 Content - AutoComplete
    5.2 Content - Panel
    5.3 Content - Alert/Warning/Error
    5.4 Content - Validation
------------------------------------------
::  6.0 Footer
::  7.0 Media Queries
::  8.0 Accessibility
-------------------------------------------
    8.1 Accessibility - Color 
    8.2 Accessibility - Focus/Hover
    8.3 Accessibility - Links
*/

/*@import url('../style-responsive.min.css');*/

/*TODO: use LESS*/

/* -------------------------------
   1.0 General
------------------------------- */

/* added these so background gradient will stretch up to the end*/
html {
    height: 100%;
}

.form-control[readonly] {
    background-color: #ffffff;
    border: none;
    color: #000000;
    opacity: 1;
}
/* so background image is not truncated */
body {
    font-family: Lato, Verdana, Arial, Helvetica, "Sans-Serif";
    /*font-family: Verdana,'Trebuchet MS', Arial, Helvetica, "Sans-Serif";*/
    /*font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;*/
    /*font-family: Calibri, Verdana,'Trebuchet MS', Arial, Helvetica, "Sans-Serif";*/
    height: 100%;
    margin: 0;
    background-attachment: fixed;
    background-color: #e6e6e6;
    color: #595959;
}

    body a {
        color: #2c5787;
    }
/* make container background gray */
.boxed-layout .page-container {
    background-color: #e0e6eb;
}
/* for page background */
.boxed-layout {
    background-repeat: repeat-y repeat-x;
    /*background-image: url("../../img/pattern-cover.png") !important;*/
    background-color: #3e86c1;
    background: -webkit-linear-gradient(#6babe7, #2e5381);
    background: -o-linear-gradient(#6babe7, #2e5381);
    background: -moz-linear-gradient(#6babe7, #2e5381);
    background: linear-gradient(#6babe7, #2e5381);
}
/*h2 {
    font-size: 20px; 
}*/
/* Override bootstrap.  Make h2 smaller than h1 (page title) */
.ma-h2, h2 {
    font-size: 20px;
}

.ma-h3, h3 {
    font-size: 18px;
}

.ma-h4, h4 {
    font-size: 16px;
}


div .hide {
    display: none;
}
/* used for partial views */
.ma-div-partial {
    margin-left: -15px;
    margin-right: -15px;
}
/* use to remove extra padding in the panel body when formgroup (which has padding as well) is in it */
.ma-no-padding {
    padding: 0 !important;
}

.ma-alert-info {
    background-color: #ffffe6;
}

.ma-disable-click {
    pointer-events: none;
}

/* -------------------------------
   2.0 Header
------------------------------- */
/* See also header styles in 7.0 Media Queries */
#ma-header-text {
    /*font-family: 'Trebuchet MS', 'Arial Black', Arial, Verdana; */
    /*font-family: "Open Sans Condensed", "Sans-Serif";*/
    /*font-family: "Roboto Slab", Lato, Verdana, Arial, Helvetica, "Sans-Serif";*/
    font-family: Karla, Lato, Verdana, Arial, Helvetica, "Sans-Serif";
    /* text-shadow: 1px 1px 2px #333333;*/ /*TODO: To shadow or not to shadow?  This is just a very subtle shadow. */
}

#ma-main-header-text {
    margin-bottom: 0 !important;
    margin-left: 10px;
    font-size: 34px;
    color: #fff;
    text-align: left;
    margin-top: 4px;
}

    #ma-main-header-text.scrollup {
        margin-top: 4px;
    }

.ma-top-header.scrollup {
    height: 85px;
}

#header.scrollup {
    height: 80px;
}

.ma-sub-header-text {
    margin-left: 15px;
    font-size: 18px;
    color: #fff;
    line-height: 35px;
    text-align: left;
}

#ma-logo {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 110px;
    width: 110px;
    margin-top: -4px;
}

.ma-login-header-text {
    font-size: 20px;
    padding-top: 30px;
}

#ma-primary-navigation.scrollup {
    margin-top: 30px;
}

.ma-top-header {
    padding-left: 0;
    padding-right: 0;
}

#ma-navbar-header {
    height: auto;
    width: 100%;
}

#ma-navbar-brand-container.scrollup {
    height: 40px;
}

#trHeaderSubText.scrollup {
    display: none;
}

.ma-top-navigation ul li a {
    padding-top: 5px;
}
/* override style.min.css navbar-brand settings */
/* remove the default cyan border */
#ma-header-logo {
    margin-top: 0;
    border: none;
    float: none;
}

    #ma-header-logo img {
        margin-top: -3px; /* raise logo a bit to save some space below */
        margin-left: 30px;
    }
/*TODO: Go back to the width.  101% not accurate. Cannot put 1090px because it messes up how bootstrap displays the burger menu*/
/* override style.min.css navbar-brand settings */
#ma-navbar-brand-container {
    padding: 5px 0 5px 5px;
    margin-left: -5px !important;
    height: 70px;
    width: 101%;
    text-align: center !important;
    -webkit-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5);
    /*box-shadow: 2px 2px 15px #000;*/
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    background: url('../img/txdps_logo_transparent_crop.png') no-repeat right top;
    background-color: hsl(204, 94%, 20%); /*#083678;*/ /*#062c60;*/
}
    /* to push the header text nearer the logo */
    #ma-navbar-brand-container #ma-header-text {
        text-align: left;
    }
/* for ma logo images on the top header */
#ma-logo {
    background-repeat: no-repeat;
    float: left;
    margin-left: 20px;
}

.ma-navbar {
    margin-right: 10px;
}

#ma-navbar-brand-container {
    background-color: hsl(204, 94%, 20%);
}

#ma-col-burger {
    margin-top: -50px; /*TODO: Go back to this later.  Find out why it is dropping. */
}

#btn-burger-menu.scrollup {
    margin-top: 5px;
}
/* override bootstrap */
.icon-bar {
    background-color: #fff !important;
}
/* remove extra margins on user/support/language area */
.ma-navbar > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
}
/* override bootstrap from making banner transparent */
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
    background-color: hsl(204, 94%, 20%) !important;
}
/* login area container */
.header.navbar .navbar-nav {
    height: 40px;
}
    /* login area links */
    .header.navbar .navbar-nav > li > a {
        height: 40px;
        padding-top: 10px !important;
        font-family: Lato, Verdana, Arial, Helvetica, "Sans-Serif";
        font-weight: 100;
    }

.ma-navbar .dropdown-menu {
    background-color: #fff !important;
}

/* -------------------------------
   3.0 Top Menu
------------------------------- */

.top-menu .nav > li.active > a,
.top-menu .nav > li.active > a:focus,
.top-menu .nav > li.active > a:hover {
    background: #29577d;
}

/* -------------------------------
   4.0 Sidebar
------------------------------- */

.sidebar-bg {
    margin-top: 110px; /* to allow site banner to be displayed. Go back to this later (site banner in progress) */
}

.ma-sidebar {
    margin-top: 55px;
    color: #2c5787; /* ma text color*/
    width: 225px;
}
/* navbar main menu icons */
.ma-menu-icon {
    padding-right: 10px;
}
/* change sidebar background  */
.sidebar, .sidebar-bg {
    background-color: #fff; /*#d9e0e7;*/ /* light gray*/
    box-shadow: 0 0 2px #caccce;
}
    /* sidebar box */
    .sidebar .active.has-sub > .sub-menu {
        background: #fff;
    }

    .sidebar .sub-menu {
        padding-left: 6px;
    }
/* sidebar minify box */
.sidebar-minify {
}
/* sidebar text main menu */
.sidebar .nav > li.active > a,
.sidebar .nav > li.active > a:focus,
.sidebar .nav > li.active > a:hover {
    color: #fff;
    background-color: #29577d; /* dark slate blue */ /*#04367f, #2771bc -- other dark blues from dps logo header*/
}
/* sidebar text sub menu */
.sidebar .sub-menu > li > a {
    color: #2C5787; /* dps text color */
}
    /* sidebar text sub menu hover */
    .sidebar .sub-menu > li.active > a,
    .sidebar .sub-menu > li.active > a:focus,
    .sidebar .sub-menu > li.active > a:hover,
    .sidebar .sub-menu > li > a:focus,
    .sidebar .sub-menu > li > a:hover {
        background-color: #d8e7f3;
        color: #13283a; /*#2C5787;*/ /* dps text color */
        /*font-weight: 600; TODO: This causes text to wrap*/
        /*background-image: url("../../img/ma/dps/PageMenuHover1.png");*/ /* For browsers that do not support gradients */
        /*background-image: -webkit-linear-gradient(right, #fff, #808080);*/ /* For Safari 5.1 to 6.0 */
        /*background-image: -o-linear-gradient(left, #fff, #808080);*/ /* For Opera 11.1 to 12.0 */
        /*background-image: -moz-linear-gradient(left, #fff, #808080);*/ /* For Firefox 3.6 to 15 */
        /*background-image: linear-gradient(left, #fff, #808080);*/ /* Standard syntax */
    }
    /* remove sidebar bullet */
    .sidebar .sub-menu > li > a::before {
        content: none;
    }
/* remove sidebar line on left */
.sidebar .sub-menu::before {
    content: none !important;
}
/* change font color in minimized sidebar */
.page-sidebar-minified .sub-menu > li > a {
    color: #fff;
}

.navbar.navbar-inverse .navbar-brand,
.sidebar .nav > li.active > a,
.page-sidebar-minified .sidebar .nav > li.has-sub.active > a,
.label.label-theme,
.btn.btn-scroll-to-top {
    background-color: #29577d; /* dark slate blue */ /* #04367f - dark blue */
}
    /* override the style.min */
    .sidebar .nav > li.active > a:focus,
    .sidebar .nav > li.active > a:hover .page-sidebar-minified .sidebar .nav > li.has-sub.active:focus > a,
    .page-sidebar-minified .sidebar .nav > li.has-sub.active:hover > a {
        background-color: #29577d; /* dark slate blue */ /* #2771bc - dark blue */
    }
/* set to important so it will not be overriden */
/* for main menu level hover */
.sidebar .nav > li > a:focus,
.sidebar .nav > li > a:hover {
    background-color: #3879ad; /* important */
}

/* -------------------------------
   5.0 Content
------------------------------- */

.breadcrumb-container {
    padding-bottom: 5px;
    margin-left: 5px;
}

.breadcrumb {
    font-size: 0.9em;
}

#ma-main-content-body {
    background-color: #fff;
    margin-left: 1px;
    margin-right: 1px;
}

#ma-main-content {
    margin-left: 2px;
    margin-right: 2px;
}

.ma-content {
    margin-top: 40px;
}
/* Currently used form phone extension label */
.ma-label-inline {
    display: inline-block !important;
    margin-top: 10px !important;
    width: 20px;
    overflow-wrap: break-word;
}

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

.ma-table {
    margin-bottom: 10px;
}

    .ma-table thead tr th {
        border-right: 1px solid #fff;
        border-left: 1px solid #fff;
    }

    .ma-table thead tr {
        font-weight: 700;
        background-color: #edf5f8;
        border-left: 2px solid #e2e7eb;
        border-right: 2px solid #e2e7eb;
    }

.ma-table-account-access thead tr th {
    vertical-align: top;
}
/* align checkbox/radiobutton and each corresponding label */
div.ma-checkbox-option div label {
    position: relative;
    top: -2px;
}
/* align checkbox/radiobutton and main label     */
.ma-checkbox-option {
    padding-top: 5px !important;
}

.ma-left-checkbox {
    width: 30px;
}

div.ma-radiobutton-option div label {
    position: relative;
    top: -2px;
}

.ma-radiobutton-option {
    padding-top: 5px !important;
    padding-left: 20px;
}
/* override bootstrap green button*/
.btn-success {
    background: #29577d !important;
    border-color: #29577d !important;
    color: #fff;
}
/* then provide a green button for specific use */
.btn-go {
    background: green !important;
    border-color: green !important;
    color: #fff;
}

.btn-action-pull-right {
    padding-right: 5px;
}

#ma-sysmsgdetail-body a {
    display: block;
    word-break: break-all;
}

.ma-readonly input {
    border: none;
    background: none !important;
    opacity: 1;
    padding-bottom: 15px;
}

div .ma-readonly {
    margin-bottom: 0;
}

.ma-col-non-input {
    padding-top: 8px;
    padding-left: 25px;
    padding-bottom: 10px;
}
/* Adding id scrollable and class typeahead will not work if not more than 5 records are still returned */
#scrollable-dropdown-menu .tt-dropdown-menu {
    max-height: 150px;
    overflow-y: auto;
}

/* 5.1 Content - AutoComplete */

.ma-autocomplete-selected-text {
    font-size: 90%;
}

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
    border: 1px solid rgba(0,0,0,2);
    border-radius: 8px;
    box-shadow: 0px 5px 10px rgba(0,0,0,2);
}

.ma-autocomplete-highlight {
    font-weight: bolder !important;
}


/* 5.2 Content - Panel */

.ma-panel-left {
    padding-left: 0;
}

.ma-panel-right {
    padding-right: 0;
}

.panel-body .panel {
    border: 1px solid #edf5f8;
    /*border: 1px solid #29577d;*/
}

.ma-panel .panel-heading {
    background-color: #edf5f8; /* important */
    /* background: lightgray !important; */
    /* background-color: #e6e6e6 !important;*/
    /* background-color: #ecf3f9 !important; */
}

.ma-panel .panel-title {
    font-size: 14px;
    color: #242a30;
}
/* for headers in panel.  if container (outside panel body) is not white, we do not want the gray headers.  */
.panel-body h1, h2, h3, h4, h5 {
    color: #666;
}

.ma-panel .panel-heading .panel-title {
    font-weight: 600;
}

.ma-panel-height-6 { /* approximately 6 lines */
    height: 170px;
    overflow-y: scroll;
}

/* 5.3 Content - Alert/Warning/Error */

.error {
    color: red;
}

.ma-alert-header {
    padding-bottom: 20px;
    text-align: center;
    font-weight: 600;
    font-size: 1.5em;
}
/* make the font colors of alerts more accessible */
.alert {
    color: #000;
}

.alert-info.alert {
    background-color: #d6edf5;
}

.alert-danger.alert {
    background-color: #fbd0d0;
}
/* no effect even if with important. style.min.css overrides it with border none. */
/*alert.alert-warning {
    border: 1px dashed red;         
}*/
.alert-warning.alert {
    background-color: #ffffcc;
}

/* 5.4 Content - Validation */

/* hide message if there is nothing to display */
#divResponseMessage:empty {
    display: none;
}

/*TODO? these are available in bootstrap but have to be hookedup to jquery validation */
/*      but keep this for now and code that later. this works. */
.field-validation-error {
    color: #b94a48;
}

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

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

select.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

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

.ma-msglist-options {
    padding: 5px !important;
}

    .ma-msglist-options .email-btn {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

/* -------------------------------
   6.0 Footer
------------------------------- */

.ma-footer {
    border-top: none;
    text-align: center;
}
/* set opacity to make it more gray */
.ma-footer-border {
    padding-bottom: 10px;
    padding-top: 10px;
    opacity: 0.3;
}
/*.ma-footer-text {
    font-size: 0.9em;
}*/
.ma-footer-links {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.5em;
    /*font-size: 0.8em;*/
}

/* -------------------------------
   7.0 Media Queries
------------------------------- */

/*TODO: update top header expand/remove radius on small devices */

@media (max-width: 992px) {
    #ma-main-header-text {
        margin-bottom: 0 !important;
        font-size: 30px;
        text-align: left;
        margin-top: 12px;
        padding-left: 5px;
        font: 800;
        font-family: "Arial Black", Karla, Lato, Verdana, Arial, Helvetica, "Sans-Serif";
    }

        #ma-main-header-text::after {
            content: "TxDPS";
        }

    .ma-sub-header-text {
        display: none;
    }

    #ma-main-header-text {
        margin-bottom: 0 !important;
        font-size: 30px;
        text-align: left;
        margin-top: 12px;
        padding-left: 5px;
        font: 800;
        font-family: "Arial Black", Karla, Lato, Verdana, Arial, Helvetica, "Sans-Serif";
    }

        #ma-main-header-text::after {
            content: "TxDPS";
        }

    .ma-sub-header-text {
        display: none;
    }

    #ma-logo {
        margin-left: 30px;
        width: 80px;
    }

    .ma-panel-right {
        padding-left: 0 !important;
    }

    .ma-panel-left {
        padding-right: 0 !important;
    }
}

@media (max-width: 767px) {
    .ma-navbar,
    .ma-sidebar,
    .ma-content {
        margin-top: 0;
    }

    #ma-navbar-brand-container {
        background: none;
        background-color: hsl(204, 94%, 20%); /*#083678;*/
    }
}

@media (min-width: 480px) {
    #ma-main-content-body {
        min-height: 600px;
    }
    /*TODO: Go back to this later.  Align footer with body */
    /*.ma-footer {*/
    /* to align with the body */
    /*margin-left: 250px !important;
        margin-right: 30px !important;
    }*/
}
/* remove the top margins when using smaller devices */
@media (max-width: 480px) {
    .ma-main-panel-body {
        padding-left: 0;
        padding-right: 0;
    }

    .ma-msgctr-main .ma-msglist-panel-body {
        padding-left: 0;
        padding-right: 0;
    }

    #ma-msglist-table tr th {
        padding: 2px;
    }

    #ma-msglist-table tr td {
        padding: 2px;
        word-break: break-all;
        word-wrap: break-word;
    }
}

/* -------------------------------
   8.0 Accessibility
------------------------------- */

/* 8.1 Accessibility - Color */

/* override style.css */

/* change the light gray font of tabs */
.nav.nav-tabs.nav-tabs-inverse > li > a {
    color: #e6e6e6;
}

.ma-nav-tabs {
    background-color: #e6e6e6;
}

.tab-overflow .nav-tabs > li.prev-button + li.active > a {
    color: #000;
}

.btn.btn-default {
    background: #165b9c; /* #79b4ec; */
    border-color: #165b9c;
}

/* 8.2 Accessibility - Focus/Hover */

.navbar-header .ma-col-logo img:focus {
    border: 2px dotted #fff;
}
/* override bootstrap to pass accessibility */
.text-danger {
    color: #e00 !important;
}

.breadcrumb > .active {
    color: #505050; /* important */
}

.link-hidden-text {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

input:focus {
    background-color: #ffffe6;
}

select:focus {
    background-color: #ffffe6;
}

textarea:focus {
    background-color: #ffffe6;
}

.panel-heading-btn > a:focus {
    border: 2px dotted #fff !important;
    background-color: #3879AD !important;
}

button.btn:focus,
.btn.btn-scroll-to-top.active,
.btn.btn-scroll-to-top:focus,
.sidebar-minify a:focus,
button.btn:hover,
.btn.btn-scroll-to-top:hover,
.sidebar-minify a:hover {
    background-color: #3879AD; /* important */
}

button.btn:focus,
.btn.btn-scroll-to-top:focus,
.sidebar-minify a:focus {
    border: 2px dotted darkblue !important;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.nav a:focus,
.nav a:hover {
    background-color: #3879AD !important; /* if important is removed, hover does not change color*/
    color: #fff; /* important */
    -webkit-transition: all 0.2s ease-in-out;
}

.breadcrumb a:focus,
.breadcrumb a:hover {
    color: #fff !important;
    background-color: #3879AD; /* important */
    -webkit-transition: all 0.2s ease-in-out;
}

.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
    color: #fff !important;
    background-color: #3879AD !important;
    -webkit-transition: all 0.2s ease-in-out;
}

.breadcrumb a:focus,
.breadcrumb a:hover {
    padding: 2px 0 2px 0;
}

.breadcrumb a:focus,
.navbar-default .navbar-nav > li > a:focus {
    color: #fff; /*!important;*/
    background-color: #3879AD; /*!important;*/
    /*border: 2px dotted #fff !important;*/
    -webkit-transition: all 0.2s ease-in-out;
}

#footer a:focus,
#footer a:hover {
    color: #fff; /*!important;*/
    padding: 2px 0 2px 0;
    -webkit-transition: all 0.2s ease-in-out;
}

.panel-body .panel:focus {
    border: 1px dotted #29577d !important;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
/* Use outline instead of border to prevent 'jump' on focus */
ma-main-content:focus {
    outline: 1px dotted #29577d !important;
}

#ma-primary-navigation:focus {
    border: 1px dotted #29577d !important;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
/* Use outline instead of border to prevent 'jump' on focus */
ma-footer:focus {
    outline: 1px dotted #29577d !important;
}

/* add a red asterisk for required labels */
label.ma-required:after {
    content: " *";
    color: #e00;
    margin-right: -12px;
}

input.ma-required,
select.ma-required,
textarea.ma-required {
    border-left: 3px solid #e00 !important;
}

input[type="text"][disabled] {
    color: #4d4d4d;
}

.ma-text-disabled {
    color: #bfbfbf !important;
}
/* As per Robert, these are not needed. */
/* TODO: Make Chrome look better */
/*input[type="radio"].ma-required {
  box-shadow: -2px 0 0 #a65959; 
  width:12px;
  height:12px;
  border-radius: 999px;
  -webkit-appearance: inherit;
  border:1px solid #999;
  position:relative;
  box-sizing:border-box;
  background:#e6e6e6;
}*/
/*input[type="radio"].ma-required:checked:before {
  content:"";   
  position:absolute;
  border-radius: 999px;
  left:25%;
  top:25%;
  width:50%;
  height:50%;
  background:#999;   
}*/
/*input[type="checkbox"].ma-required {
    box-shadow: -2px 0 0 #a65959;
}*/
.theme-panel {
    border: 1px dotted gray;
}

.theme-collapse-btn:hover,
.theme-collapse-btn:focus {
    background-color: #000 !important;
    color: #fff;
    transition: all 0.2s linear 0s;
}

.theme-collapse-btn:focus {
    border: 2px dotted #fff !important;
}

/* 8.3 Accessibility - Links */

.ma-skip {
    float: left;
    top: 0;
    position: static;
}

    .ma-skip a {
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
        font-size: medium;
    }

        .ma-skip a:focus {
            left: 0px;
            width: auto;
            height: auto;
            background-color: #fff;
            color: #3879AD;
            border: 2px solid #3879AD;
            padding: 10px;
            float: left;
            z-index: 1000
        }