/*
    CSS rules for the Dashboard and Manager

    There are UI css files at:

        Alamo.css
        dashboard.css
        login.css
        manager-forms.css
        manager-tasks.css


    Code conventions

    Indent is 4 spaces. Spaces rather than tabs.
    One line rules based on the box model, columnized at column 53
    Multi-line rules columnized at column 25
    Line width is approximately 140 chars.
    zzz... 'sleeps' a rule that may be reinstated.


    Color spec. Refer to AuditMatic-color_palette-01.jpg

    blue1               003869      main background (rgb(0,56,105))
    blue2               035a8f      secondary backgrounds, form header
    blue3               007cb6      tertiary background, form question text
    blue4               0896d8      menu hover
    grey1               707372
    grey2               8d8f8e      text in menubar (user, company)
    grey3               b0b2b2      application page toolbar
    grey4               d4d5d4
    grey5               f0f0f0      title text in forms
    yellow              fbf6a0      input background, hovered row, hightlights
    green               0f9b05      'OK' marks
    red                 c90d22      badge backgrounds, hover on X's, form validation messages

*/


/* global rules */

html {
    background: #d4dde5 url(img/AuditMatic-page-backgr.jpg) center 70px no-repeat;
}

body {
    background: transparent;
    padding-top: 70px;
    padding-bottom: 20px;
}


/* 70px allows for the main menu so there will be an issue with pages that do not use the main menu */

html.usedAsDialog {
    background: white;
}


/* when a document is used in an iframe as a dialog. Must remove the above settings. */

body.usedAsDialog {
    background: white;
}

body.alamoModalBody {
    padding-top: 0;
}


/* global override of some bootstrap styles */


/* global app button classing is: class="btn btn-default btn-sm"  */

.btn {
    margin-right: 5px;
    /* there will be an issue with right aligned buttons. Fix it when it shows up... */
    border-radius: 4px;
    padding-right: 20px;
    padding-left: 20px;
}

.btn-default {
    border-color: #707372;
    background: #707372;
    transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}

.btn-default:hover {
    border-color: #007cb6;
    background: #007cb6;
}


/* because of the shorthand (background;) this overrides ALL bootstrap background settings */

.btn-sm {
    font-size: 14px;
    line-height: 1.3;
}

input[type=text].form-control {
    height: 30px;
    padding: 0 12px;
}

div.panel {
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.panel-default>.panel-heading {
    background-color: #ebebeb;
    padding-top: 6px;
    padding-bottom: 7px;
}

.panel-title {
    font-size: 14px;
}

.panel-body {
    padding: 20px;
}

div.well {
    padding: 0;
    margin-bottom: 20px;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.table-striped>tbody>tr:last-child>td {
    border-bottom: 1px solid #ddd;
}

.breadcrumb>.active {
    color: #0896d8;
}

.fullWidth {
    width: 100%;
}


/* Global override of some fancy box properties */

.fancybox-skin {
    border-radius: 0;
}


/* main nav bar */

.navbar {
    border: 0;
    background-color: #003869;
    box-shadow: 0 1px 3px rgba(0, 56, 105, 0.75);
}

.navbar .container-fluid {
    background-color: #003869;
}

#mainNav {
    border: 0;
    background-color: #003869;
}


/* !!! Be sure to remove navbar-inverse from all the Manager pages. */


/* note - the anchor element controls the height of the navbar */

.navbar-default .navbar-nav>li {
    text-align: center;
}

.navbar-default .navbar-nav>li>a {
    padding: 12px 20px 5px 20px;
    font-size: 16px;
    line-height: 26px;
    font-weight: normal;
    color: white;
    text-transform: uppercase;
    transition: background-color 0.25s, color 0.25s;
}

.navbar-default .navbar-nav>li>a:hover {
    color: white;
}


/* disable the default hover effect */

.navbar-default .navbar-nav i {
    vertical-align: -2px;
    font-size: 28px;
    line-height: 26px;
    color: #2496DA;
}

.navbar-default .navbar-nav>li.minor>a {
    padding: 20px 18px 22px 18px;
    font-size: 16px;
    line-height: 26px;
    color: #0896d8;
    text-transform: none;
}

.navbar-default .navbar-nav>li.minor i {
    vertical-align: 0;
    padding-right: 4px;
    font-size: 18px;
    line-height: 26px;
}

.navbar-default .navbar-nav>li.minor {
    background: transparent url(img/sprite-ui-desktop.png) center -23px no-repeat;
}

.navbar-default .navbar-nav>li.minor.help {
    background-position: center -23px;
}

.navbar-default .navbar-nav>li.minor.user {
    background-position: center -223px;
}

.navbar-default .navbar-nav>li.minor.logout {
    background-position: center -423px;
}

.navbar-default .navbar-nav>li.minor.help:hover {
    background-position: center -123px;
}

.navbar-default .navbar-nav>li.minor.user:hover {
    background-position: center -323px;
}

.navbar-default .navbar-nav>li.minor.logout:hover {
    background-position: center -523px;
}

.navbar-default .navbar-nav>li {
    transition: background-color 0.35s;
}

.navbar-default .navbar-nav>li:hover {
    background-color: #2496DA;
}

.navbar-default .navbar-nav>li:hover i {
    color: white;
}

.navbar-default .navbar-nav>li.open:hover>a {
    color: white;
}

.navbar-default .navbar-nav>li.minor:hover>a {
    color: white;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.minor.active>a,
.navbar-default .navbar-nav>.minor.active>a:hover,
.navbar-default .navbar-nav>.minor.active>a:focus {
    background-color: #2496DA;
    color: white;
}

.navbar-default .navbar-nav>.active i {
    color: white;
}


/* Navbar info */

li#info {
    width: unset;
    padding: 22px 20px 0 0;
    font-size: 12px;
    line-height: 1.0;
    text-align: right;
    color: #8d8f8e;
}

li#info .userInfo {
    padding-top: 9px;
}

li#info.active>a {
    background-color: transparent;
}

li#info:hover {
    background-color: transparent;
}

li#info.active:hover {
    background-color: transparent;
}


/* the hamburger button */

button.navbar-toggle {
    border: 0;
    padding: 0;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.25s;
}

.navbar-default .navbar-toggle .icon-bar {
    width: 24px;
    height: 4px;
    border-radius: 0;
    background-color: white;
}

.navbar-default button.navbar-toggle:hover,
.navbar-default button.navbar-toggle:focus {
    background-color: #1c97d5;
}

.navbar-default button.navbar-toggle {
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 18px;
    color: white;
}


/* end of main navbar */


/*  top level pages (Forms, Form Tools, Assets etc)
    div#main is the wrapper for the page content. div#sidebar is its sibling. */

#main {
    overflow: auto;
    height: 100%;
    background-color: white;
}

#main>.row {
    margin: 0;
    /* this margin reset fixes the horizontal jog that was showing on all pages. */
    padding: 0 20px;
    /* this controls the page padding of all pages that use manage.master. */
}

#main>.row>.col-xs-12 {
    padding: 0;
    /* this controls the bottom page padding of all pages that use manage.master. All content is inside .col-xs-12. */
}

.alamoModalBody {
    background-color: #fff;
}

.alamoPanelBody {
    margin-top: .5em;
    margin-bottom: 20px;
    border-radius: 0;
    padding: 5px 5px 5px 5px;
    padding: 0;
    box-shadow: none;
}

ul.breadcrumb {
    margin: 0;
    padding: 0;
    background-color: white;
}

.top-buffer {
    margin-top: 20px;
}


/* this is used on bootstrap rows... */


/* page/dialog tabs - application wide.
   Used at the top of main pages and in dialogs that have tabs. */

.nav-tabs {
    border-bottom: 1px solid #0896d8;
    margin-bottom: 20px;
}

.nav-tabs>li {
    margin-right: 5px;
}

.nav-tabs>li>a {
    border: 1px solid #c8e9f6;
    border-bottom-color: #0896d8;
    background-color: white;
    padding: 4px 20px;
    color: #1c97d5;
    transition: border-color 0.25s, background-color 0.25s, color 0.25s;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.nav-tabs>li>a.disabled {
    background-color: #c5c5c5;
    border-color: #c5c5c5;
}
.nav-tabs>li>a:not(.disabled):hover,
.nav-tabs>li>a:not(.disabled):focus {
    background-color: #1c97d5;
    border-color: #1c97d5 #1c97d5 #0896d8 #1c97d5;
    color: white;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    border: 1px solid #0896d8;
    border-bottom-color: #0896d8;
    background-color: #0896d8;
    color: #fff;
    cursor: pointer;
}


/* specific tabs */

#myTabNav {
    margin-bottom: 20px;
}


/*  Page toolbar search html. Structure is:
    div.toolbarSearch > div.RadSearchBox > span.rsbInner (converted to display:block) > input, span and button (3 inline-block elements)
    Not done here. The RadSearchBox is too tall and it does not display correctly when it contains a drop down menu...
*/

/* div.pageToolbar {
    zzzdisplay: inline-block;
    zzzwidth: 100%;
} */

div.toolbarSearch {
    float: right;
    width: 300px;
}

div.pageToolbar .RadSearchBox {
    width: 100%;
}

div.toolbarSearch span.rsbInner input:focus {
    background-color: #FBF8C1;
    transition: background-color 0.25s;
}

div.toolbarSearch .rsbInner {
    /* this is a span with display set to block */
    overflow: hidden;
    height: auto;
    border-radius: 3px;
    text-align: right;
}

div.toolbarSearch input.rsbInput {
    float: left;
    width: 79% !important;
    /* width is calculated by telerik and stuck directly on the element. Using !important to override their effort.
       The input's width will track with div.toolbarSearch's width. */
    font-size: 16px;
}

div.toolbarSearch .rsbButtonSearch {
    background-color: #707372;
    color: white;
    /* zzzheight: 30px; */
    /* sleep it (zzz) until the height of the search html gets sorted out */
}


/* search with the context button and menu: <div class="toolbarSearch withContext" ><telerik:RadSearchBox... */

div.toolbarSearch .RadSearchBox .rsbSearchContext {
    float: left;
    border: 0;
}

div.toolbarSearch.withContext input.rsbInput {
    width: 65% !important;
}


/* RadGrid table content (main page content) */

#myTabContent .RadGrid {
    border: 0;
    -webkit-overflow-scrolling: touch;
}

#myTabContent .RadGrid.limitedHeightContainer {
    max-height: 600px;
}


/* this could work to eliminate the extra white space at the bottom of short pages
       - if I could get radGrid to not add a fixed height to its second container ... rl */

#myTabContent .RadGrid:focus {
    outline: 0;
}

#myTabContent .RadGrid .rgHeader.rgSorted {
    background-color: #1c97d5;
}

#myTabContent .rgMasterTable {
    border-collapse: collapse;
    /* zzzmargin-bottom: 20px; */
    /* current way to identify where to put the 20px bottom spacing.  There are more than one .rgMasterTable in a page section */
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.2;
    color: #393939;
}

#myTabContent .rgMasterTable thead th {
    border: 0;
    padding: 7px 3px 7px 10px;
}

#myTabContent .rgMasterTable tbody td {
    border: 0;
    padding: 8px 3px 8px 10px;
}

#myTabContent .rgMasterTable thead th input[type=submit] {
    margin: 0;
    margin-top: 3px;
    margin-right: 2px;
}


/* normal links in radGrid rows */

#myTabContent .rgMasterTable tbody td>a {
    color: #1c97d5;
}


/* bootstrap buttons (anchors) used in radGrid rows.  Assumes .btn .btn-sm.  Assumes and 'edit' or 'delete' type button. */

#myTabContent .rgMasterTable tbody td>a.btn {
    margin: 0;
    padding: 5px 12px;
    color: white;
}

#myTabContent .rgMasterTable .rgAltRow {
    border-bottom: 1px solid #CBCBCB;
    background-color: transparent;
    transition: background-color 0.35s;
}

#myTabContent .rgMasterTable .rgRow {
    border-bottom: 1px solid #CBCBCB;
    background-color: transparent;
    transition: background-color 0.35s;
}

#myTabContent .rgMasterTable .rgAltRow:hover {
    background-color: #FCFBD7;
    color: black;
}

#myTabContent .rgMasterTable .rgRow:hover {
    background-color: #FCFBD7;
    color: black;
}

#myTabContent .rgMasterTable .rgSelectedRow {
    background-color: #FCFBD7;
    color: black;
}

#myTabContent .rgMasterTable .rgSelectedRow:hover td {
    color: black;
}

#myTabContent .rgMasterTable .rgSelectedRow td {
    background-color: #FCFBD7;
    transition: background-color 0.35s;
}

#myTabContent .rgMasterTable .rgSorted {
    color: black;
}

#myTabContent .rgMasterTable td.rgSorted {
    background-color: #EEF9FD;
}

#myTabContent .rgMasterTable .rgSelectedRow td.rgSorted {
    background-color: #EFF7E7;
}

#myTabContent .rgMasterTable .btn.trashcan {
    padding: 0;
    padding: 2px 8px 2px 8px;
    font-size: 18px;
}

tr.rgNoRecords td>div {
    padding-top: 10px;
    text-align: center;
}


/* slide-in sidebar */

#sidebar {
    width: inherit;
    min-width: 200px;
    max-width: 220px;

    height: 100%;
    position: relative;
    display: inline-block;
    overflow-y: auto;
    overflow-x: visible;
    margin-left: -300px;
    width: 300px;
    height: 300px;
}


/*  Modal dialogs and some of Telerik's elements inside them.
    Example is the New form dialog. */

.modal-backdrop {
    background-color: #003869;
}

.modal-backdrop.in {
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.modal-content input[type=text],
.modal-content textarea {
    background-color: #FBF8C1;
}

.modal-content .btn {
    min-width: 80px;
    color: white;
    text-shadow: none;
}

.modal-header {
    position: relative;
    background-color: #007cb6;
    color: white;
}

.modal-header h4 {
    color: white;
}

.closeModal {
    position: absolute;
    top: 0;
    right: 0;
    float: right;
    width: 54px;
    font-size: 22px;
    line-height: 54px;
    text-align: center;
    cursor: pointer;
    transition: color 0.25s;
}

.closeModal:hover {
    color: red;
}

.modal-content {
    border-radius: 0;
}

.modal-content .RadAjaxPanel {
    padding: 0 20px;
}

.modal-content .RadAjaxPanel .row {
    margin-bottom: 20px;
}

.modal-content .RadAjaxPanel .row:last-child {
    margin-bottom: 0;
}


/* Alertify top right*/

.alertify-logs {
    top: 40px;
    right: 30px;
}


/*  dialogToolbars - these are the toolbars than appear on non-top level pages. Usually with text on the left
    and feature links on the right.  The model for these can be found in AddAssetModal.aspx.
    Notes
    - the line-height sets the height of the toolbar.  If we ever need multi-line toolbars we will need to manage
      height some other way. */

.dialogToolbar {
    position: fixed;
    top: 0;
    right: 0;
    height: 55px;
    left: 0;
    z-index: 10000;
    overflow: auto;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding: 0 3px 0 20px;
    background-color: #007cb6;
    font-size: 16px;
    line-height: 55px;
    color: white;
}

.dialogToolbar .toolbar-left {
    float: left;
}

.dialogToolbar .toolbar-right {
    float: right;
}

.dialogToolbar .toolbarElement {
    width: 50px;
    float: right;
    font-size: 22px;
    line-height: inherit;
    text-align: center;
    color: white;
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s;
}

.dialogToolbar .toolbarElement:hover {
    color: black;
}

.dialogToolbar .toolbarElement:active {
    color: #0896d8;
    transition: color 0.10s;
}

.dialogToolbar .toolbarElement a {
    color: white;
}

.dialogToolbar .toolbarElement a:hover {
    color: black;
}

.dialogToolbar .toolbarElement a:active {
    color: #0896d8;
    transition: color 0.10s;
}

.dialogToolbar .elementName {
    font-weight: bold;
}


/* Sticking some Asset model styles in here. Will put them in a proper place later. rl*/

#addAssetsContainer {
    padding-top: 40px
}

.assetPicture #previewImage,
.assetPicture #currentImage {
    width: auto;
    height: auto;
    margin-bottom: 20px;
    text-align: center;
}

#assetInfoState .col-xs-4,
#assetInfoState .col-xs-8 {
    padding-top: 10px;
}


/* an experiment, just in AddassetModal, to test implementing Laura's padding spec... */


/* this works well.  Consider making it global by modifying bootstraps default column layout mechanism - carefully... rl */

div#assetQRPicture>.col-xs-6 {
    padding-left: 20px;
    padding-right: 10px;
}

div#assetQRPicture>.col-xs-3 {
    padding-left: 10px;
    padding-right: 10px;
}

div#assetQRPicture>.col-xs-3:last-child {
    padding-right: 20px;
}

div#attributesForms>.col-xs-6:nth-child(1) {
    padding-left: 20px;
    padding-right: 10px;
}

div#attributesForms>.col-xs-6:nth-child(2) {
    padding-left: 10px;
    padding-right: 20px;
}

.pageLoadingDialog {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    /* half width of the spinner gif */
    margin-top: -50px;
    /* half height of the spinner gif */
    text-align: center;
    z-index: 1235;
    overflow: auto;
    width: 200px;
    /* width of the spinner gif */
    height: 202px;
    /*hight of the spinner gif +2px to fix IE8 issue */
}

#pageLoadingMessage {
    position: fixed;
    top: 0;
    left: 0;
    /*background-image:url('/assets/img/fancybox_overlay.png');*/
    background-color: #00335F;
    z-index: 1234;
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0.3;
}