/** 
 * ======================================================================
 * CSS OVERRIDES
 * ======================================================================
 */

body {
    /* background-color: #eee; */
}
 
.navbar {
    padding-top: 0px; 
    padding-bottom: 0px;
}

h1, .h1 {
    font-size: 1.3rem;
    font-family: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    text-transform: uppercase;
}

.page-title {
    background-color: #28443a; /* green; */ 
    color: #fff; 
    padding-top: 8px; 
    padding-bottom: 2px;
}

/**
 * ======================================================================
 * Hack for <a> tags with no hrefs
 * Hack for <a class="btn">
 * ======================================================================
 */

a:not([href]):not([tabindex]) {
    color: #007bff;
}

a:not([href]):not([tabindex]):hover {
    text-decoration: underline;
}


a.btn {
    color: #fff !important;
}

a.btn-warning, a.btn-light {
    color: #000 !important;
}

.text-muted {
    color: #ddd !important;
    /* font-size: 0.7rem !important; */
}

/**
 * ======================================================================
 * Dropdown menu for Navbar
 * ======================================================================
 */

nav .dropdown-menu {
    margin-top: -5px;
    padding-top: 2px;
    padding-bottom: 1px;
}

nav .dropdown-item {
    padding-left: 0.5rem;
    padding-top: 0.1rem;
    font-size: 0.8rem;
}

nav .dropdown-divider {
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
}

/**
 * Multi-level dropdown 
 * https://codepen.io/svnt/pen/beEgre
 * https://github.com/twbs/bootstrap/issues/21026
 * HTML example is in layouts/nav/manager.blade.php
 */

/*
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}
*/


/** 
 * ======================================================================
 * Main container after the page title
 * These are additional container classes that should be
 * passed when extending the layout to 
 * @extends('layouts.app', ['class' => '...'])
 * ======================================================================
 */
 
#div-content.default {
    padding-top: 12px;
}
#div-content.list {
    background-color: #fff;
}
#div-content.view .row:first-child  {
    background-color:#fff; 
    margin-left:-15px; 
    margin-right:-15px;
    padding-top: 12px;
}
#div-content.dashboard {
    background-color: #fff;
}

/** 
 * ======================================================================
 * Table sorter
 * ======================================================================
 */
.tablesorter-header-inner {
    /* font-size: 0.85em; */
    font-weight: 600;
    padding-left: 0px;
}
.tablesorter-bootstrap .tablesorter-header-inner {
    padding-left: 0px;
}
.tablesorter-bootstrap .tablesorter-header i.tablesorter-icon {
    font-size: 9px;
}

/** 
 * ======================================================================
 * Add an even smaller table table-xs (in table-sm) 
 * ======================================================================
 */
.table-xs > thead > tr > th, 
.table-xs > tbody > tr > th, 
.table-xs > tfoot > tr > th,
.table-xs > thead > tr > td, 
.table-xs > tbody > tr > td, 
.table-xs > tfoot > tr > td {
    font-size: 0.85em;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 3px;
    padding-right: 2px;
    /* border-top: 1; */
}
.table-xs > thead > tr > th {
    padding-bottom: 2px;
    border-bottom: 1px solid #ddd;
    font-weight: 500;
}
.table-xs > tfoot > tr.total > th, 
.table-xs > tfoot > tr.total > td,
.table-xs > tbody > tr.total > td {
    border-top: 1px solid #5E5E5E;
}
.table-xs > tfoot > tr.gray > td, 
.table-xs > tbody > tr.gray > td {
    background-color: #F9F9F9;
}
.table-xs .table-title {
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
}
.table-xs .table-title:before, .table-xs .table-title:after {
    position: absolute;
    top: 40%;
    overflow: hidden;
    width: 50%;
    height: 4px;
    content: '\a0';
    border-bottom: 1px solid #cccccc;
    box-sizing: content-box; /* + vendor specific versions here */
}
.table-xs .table-title:before {
    margin-left: -52%;
    text-align: right;
}
.table-xs .table-title:after {
    margin-left: 2%;
    text-align: left;
}

/**
 * ======================================================================
 * Rotated table headers
 * https://css-tricks.com/rotated-table-column-headers/
 * ======================================================================
 */
 
/* th.rotate {
    Something you can count on
    height: 140px;
    white-space: nowrap;
} */

/* th.rotate > div {
    transform: Magic Numbers
               translate(25px, 51px)
               45 is really 360 - 45
               rotate(315deg);
    width: 30px;
} */

/* th.rotate > div > span {
    border-bottom: 1px solid #ccc;
    padding: 5px 10px;
} */


/**
 * ======================================================================
 * Rotated table headers
 * https://www.jimmybonney.com/articles/column_header_rotation_css/
 * ======================================================================
 */

.table-header-rotated th.row-header {
    width: auto;
}

/*
.table-header-rotated td {
    width: 40px;
    border-top: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    vertical-align: middle;
    text-align: center;
}
*/

.table-header-rotated th {
    border-top: 0px;
}

.table-header-rotated th.rotate-45 {
    height: 80px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    position: relative;
    vertical-align: bottom;
    padding: 0;
    font-size: 12px;
    line-height: 0.8;
}

.table-header-rotated th.rotate-45 > div {
    position: relative;
    top: 0px;
    left: 40px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
    height: 100%;
    -ms-transform:skew(-45deg,0deg);
    -moz-transform:skew(-45deg,0deg);
    -webkit-transform:skew(-45deg,0deg);
    -o-transform:skew(-45deg,0deg);
    transform:skew(-45deg,0deg);
    overflow: hidden;
    /* border-left: 1px solid #dddddd; */
    border-right: 1px solid #dddddd;
    /* border-top: 1px solid #dddddd; */
}

.table-header-rotated th.rotate-45 span {
    -ms-transform:skew(45deg,0deg) rotate(315deg);
    -moz-transform:skew(45deg,0deg) rotate(315deg);
    -webkit-transform:skew(45deg,0deg) rotate(315deg);
    -o-transform:skew(45deg,0deg) rotate(315deg);
    transform:skew(45deg,0deg) rotate(315deg);
    position: absolute;
    bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
    left: -20px; /*Because it looked good, but there is probably a mathematical link here as well*/
    display: inline-block;
    // width: 100%;
    width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
    text-align: left;
    // white-space: nowrap; /*whether to display in one line or not*/
}

/** 
 * ======================================================================
 * Bootstrap notify progress bar
 * ======================================================================
 */
[data-notify="container"] > .alert {
    /*
    background-color: rgb(255, 255, 238);
    border-width: 0px;
    border-left: 15px solid rgb(255, 240, 106);
    border-radius: 0px;
    box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.3);
    font-family: 'Old Standard TT', serif;
    letter-spacing: 1px;
    */
    font-size: 0.85rem;
    padding: 0.4rem;
    border-radius: 0px;
    border: 0px;
}
[data-notify="progressbar"] {
    margin-bottom: 0px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    border-radius: 0px;
}

/** 
 * ======================================================================
 * Table Detail
 * ======================================================================
 */
table.table-detail > tbody > tr > td {
    /* vertical-align: top; */
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    border: 0px !important;
}
table.table-detail > tbody > tr > td:first-child {
    color: #808080;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.7rem;
    white-space: nowrap;
    padding-top: 4px !important;
    padding-right: 8px;
}
table.table-detail > tbody > tr > td:last-child {
    min-width: 80%;
    font-weight: 600;
}
table.table-detail input[type=text] {
    height: 22px;
    border-radius: 2px;
}
table.table-detail th, 
table.table-detail td {
    padding: 0.1rem;
}

/** 
 * ======================================================================
 * TABS (JQuery UI)
 * ======================================================================
 */

#div-panel-tabs {
    background-color: transparent;
}

.ui-tabs .ui-tabs-panel {
    padding-left: 0px;
    padding-right: 0px;
}

.ui-tabs {
    padding: 0px;
}

.ui-tabs .ui-tabs-nav {
    padding: 0;
    background-color: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-size: 0.8rem;
    margin-left: -16px;
    margin-right: -16px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding-top: 0.7em;
    padding-right: 1em;
    padding-bottom: 0.6em;
    padding-left: 1em;
}

.ui-tabs.ui-widget.ui-widget-content {
    border: 0px;
}

.ui-tabs .ui-tabs-nav li {
    margin: 0px;
    float: inherit;
}

.ui-tabs .ui-state-default, 
.ui-tabs .ui-widget-content .ui-state-default, 
.ui-tabs .ui-widget-header .ui-state-default, 
.ui-tabs .ui-button {
    border: 0px;
    background-color: transparent;
}

.ui-tabs .ui-state-default a, 
.ui-tabs .ui-state-default a:link, 
.ui-tabs .ui-state-default a:visited {
    border-bottom: 4px solid transparent;
}

.ui-tabs .ui-state-active a, 
.ui-tabs .ui-state-active a:link, 
.ui-tabs .ui-state-active a:visited {
    color: #333333;
    border-bottom: 4px solid #9fc53b;
}

.ui-tabs .ui-state-hover a, 
.ui-tabs .ui-state-hover a:link, 
.ui-tabs .ui-state-hover a:visited {
    color: #333333;
    border-bottom: 4px solid #9fc53b;
}

/**
 * Parent/sibling selector
 * https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector
 * https://css-tricks.com/parent-selectors-in-css/
 * https://www.w3schools.com/css/css_combinators.asp
 */
ul.ui-tabs-nav:hover a,
ul.ui-tabs-nav:hover .ui-state-active a {
    color: #bbb;
    border-bottom: 4px solid transparent;
}

ul.ui-tabs-nav:hover .ui-state-hover a {
    color: #333333;
    border-bottom: 4px solid #9fc53b;
}

/** 
 * ======================================================================
 * TABS (Bootstrap)
 * ======================================================================
 */
 
.nav-tabs {
    padding: 0;
    background-color: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-size: 0.8rem;
    margin-left: -16px;
    margin-right: -16px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.nav-tabs .nav-link {
    padding-right: 1em;
    padding-left: 1em;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    border-bottom: 4px solid #9fc53b;
}

/*
 * This is the css to try to fix so that hovering on tab row
 * does not trigger the graying out 
 * https://stackoverflow.com/questions/37959686/on-child-hover-change-the-css-of-parent
 * https://webdesign.tutsplus.com/tutorials/selecting-parent-elements-with-css-and-jquery--cms-26423
 */
.nav-tabs:hover .nav-link {
    color: #bbb;
    border-bottom: 4px solid #fff;
}

.nav-tabs .nav-link:hover {
    color: #333333;
    border-bottom: 4px solid #9fc53b;
}

.nav-tabs .nav-link {
    color: #333333;
    border: 0px;
}

.nav-tabs .nav-link .active {
    border-bottom: 4px solid #9fc53b;
}

.nav-tabs .nav-item {
    margin-bottom: 0px;
}

/** 
 * ======================================================================
 * Trigger dropdown on Hover (with sub-menus)
 * https://bootsnipp.com/snippets/xr4GW
 * ======================================================================
 */
 
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu> a:after {
    content: ">";
    float: right;
}
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: 0px;
    margin-left: 0px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

/** 
 * ======================================================================
 * Loading panel
 * ======================================================================
 */
 
#div-loading {
    position: fixed;
    right: 0;
    top: 0;
    background-color: #808080;
    color: #fff;
    padding: 8px;
    white-space: nowrap;
    zoom: 1;
    filter: alpha(opacity = 80);
    opacity: 0.8;
    font-weight: 400;
}

.loading .progress {
    width: 50px;
    margin-bottom: 0px;
    display: inline-block;
}