/*  COLORS:
    -Red:#CF102D;
    -Gray:#C1C6C8;
    -Black:#2C2A29;
    -White:#FFF;

    BOOTSTRAP 4 SIZING CUTOFFS:
    .col- (extra small devices - screen width less than 576px)
    .col-sm- (small devices - screen width equal to or greater than 576px)
    .col-md- (medium devices - screen width equal to or greater than 768px)
    .col-lg- (large devices - screen width equal to or greater than 992px)
    .col-xl- (xlarge devices - screen width equal to or greater than 1200px)

    STYLESHEET LAYOUT:
    -Body as it affects everything
    -Navbar,Main,Footer as they affect everything
    -More Niche attributes, like A, Table, Button, Etc.
    -Page Exclusive Styles (ex. Work Orders/Claims)
    -Media Queries
    
    PLEASE NOTE: 
    -Spacing is px
    -Font-size is rem
    -The standard is 1rem = 16px
*/


/*----------------------------------------------- PAGE */ 

body{
    color:#2C2A29;
    font-family: 'Montserrat', sans-serif;
}
i{
    color:gray;
}
h5{
    color: #CF102D;   
}

/*----------------------------------------------- NAVBAR */

/* Base for Navbar */
#jht-nav{
    font-size:1rem;
    background:#fff;
    border-bottom: 1px solid #C1C6C8;
}
#jht-nav a{
    color: #2C2A29;
    text-decoration: none;
}

/* Used for 'Online Remedy' */
#nav-header{
    margin-top:5px;
    margin-bottom:-5px;
    margin-left:7px;
    font-weight:normal !important;
    color:#2C2A29; 
}
/* 'Online Remedy' after collapse */
#nav-header-hidden{
    margin-left:7px;
    color:#2C2A29; 
    display:inline;
    font-weight:bold;
}

/* Searchbar before collapse */
.nav-searchbar{
    margin-top:4px;
    font-size: 1rem;
    height:30px;
    width: 150px;
    margin-left:5px;
    border-radius: 3px;
    border: 1px solid #C1C6C8;
    outline:none;
    display:inline-block;
}

.nav-link.active{
    color: #2C2A29 !important;
    text-decoration: underline !important;
    text-decoration-color: #CF102D !important;
}
/* Logout before the collapse */
#logout{
    color:#CF102D !important;
}

/* Logout after the collapse */
#hidden-logout{
    color:#CF102D !important;
    display:none;
}

.dropdown-item{
    font-size:1rem;
}

/* Used to hide collapse image and search bar */
.navdrop{
    display:none;
}

/* Used to later hide non-collapsed logo */
#navlogo{
    display:inline;
}
/* Used to make collapse float right in media queries.
   Error with spacing prevents id being called and only used in query */
#dropdown-right{
    display:inline-block;
    width:100%;
}

/* Removes orange outline from drop-down button when clicked */
.navbar-toggler{
    outline:none!important;
}

/* Resolves dropdown item turning blue */
.dropdown-item.active, .dropdown-item:active {
    background-color: #FFFFFF;
}

#hidden-nav-search{
    display:inline;
    margin-right:15px;
    float:right;
}

.nav-right{
    float:right;
}

#hidden-title{
    display:inline-block;
    margin-top:8px;
}

#hidden-hamburger{
    float:right;
}

#main-title{
    display:block;
}

/*----------------------------------------------- MAIN */

/* Site standard uses main with BS4 container */
main{
    padding-top:100px;
    min-height: calc(100vh - 54px);
    margin-bottom:0px;
}

/* Used for Bootstrap pages */
.row{
    margin-left:50px;
    margin-right:50px;
}

main aside{
    display:inline-block;
}

.detail-row{
    margin-left:0px;
    margin-right:0px;
    padding-bottom: 6px;
    display:flex;
    flex-wrap:wrap;
}

.push{
    margin-left:20px;
}
.pull{
    margin-left:0px;
}


/*----------------------------------------------- FOOTER */
#jht-footer{
    width: 100%;
    height:54px;
    color: #FFF;
    background-color:#CF102D;
    font-size:.75rem;
}

#jht-footer a{
    font-size:.85rem;
    color:#FFF;
    text-decoration:none!important;
    margin:5px;
}

#jht-footer a:hover{
    color:lightgray!important;
}

/*----------------------------------------------- A */
a {
    text-decoration:none!important;
}
a:hover {
    color: #CF102D !important; 
}

/*----------------------------------------------- ARTICLE */
article p {
    margin-left: 20px;
}

/*----------------------------------------------- TABLE */
.table-header th a{
    color:gray !important;
    text-decoration:none;
    font-weight:normal !important;
}
.table-header th{
    color:gray !important;
}
.table-header th a:hover{
    color: #CF102D !important;
}
.table-header th{
    font-weight:normal !important;
}
.table td{
    border-top:4px solid gray;
}

/* Used on most of tables on site */
.table-container{
    width:100%;
    background:#FFF;
    margin-bottom:0px !important;
    overflow-y:auto;
}
.table-container table{
    table-layout: fixed;
    width:100%;
}

.table-container .table td{
    padding:.5rem;
}

.table-container .table th{
    padding:.5rem;
}

.table-container table tbody tr:hover{
    background-color:lightgray;
}

.table-container table tbody td{
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.break{
    height:25px;
}

#orderview-table-container{
    font-size:.9rem;
    overflow-y:auto;
    height:400px;
    width:100%;
    text-align:left;
}

#orderview-table-container table{
    table-layout:fixed;
    width:100%;
}

#orderview-table-container table tbody tr{
    border-top: 3px solid gray;
}

#orderview-table-container table tbody tr:hover{
    background-color: lightgray;
}

#orderview-table-container thead th{
    position: sticky;
    top:0;
    background:#FFF;
}

/*--- table for Notes in work order detail/edit/claims */
.notes-container{
    width:100%;
    background:#FFF;
    margin-bottom:0px !important;
    overflow-y:auto;
    height:100%
}


.notes-container table{
    table-layout: fixed;
    width:100%;
}

.notes-container .table td{
    padding:.5rem;
}

.notes-container .table th{
    padding:.5rem;
} 

/*--- table for product detail */
.product-container{
    width:100%;
    background:#FFF;
    margin-bottom:0px !important;
    overflow-y:auto;
    height:100%
}


.product-container table{
    table-layout: fixed;
    width:100%;
}

.product-container .table td{
    padding:.5rem;
}

.product-container .table th{
    padding:.5rem;
} 

.product-container tr:nth-child(even){
    background-color:#00000013;
}

.product-container .table-active{
    background:#00000035!important;
}


/*--- Table for homepage */
.home-count{
    padding-left:20px!important;
}
.home-count td{
    font-size:.90rem !important;
    border-top: 2px solid lightgray;
}

/*-- Table for Auto Return Parts List */
#auto-return-container{
    width:100%;
    margin-bottom:0px !important;
    overflow-y:auto;
    overflow-x:scroll;

    font-size:.9rem;
}
#auto-return-container table thead tr th{
    padding-right:10px;
    font-weight:normal;
    color:gray;
}

#auto-return-container table thead tr th a{
    color:gray !important;
    text-decoration:none;
    font-weight:normal !important;
}

#auto-return-container table thead tr th a:hover{
    color: #CF102D !important;
}
#auto-return-container table{
    table-layout:fixed;
    width:100%
}



/*----------------------------------------------- BUTTON */
.btn{
    background:#FFF;
}
.btn:focus{
    box-shadow:none;
}

.btn-primary{
    height:38px;
    border-radius:3px;
    border: 1px solid #CF102D!important;
    background:#CF102D!important;
    box-shadow:none;
    color:#FFF;
    width:150px;
    display:block;
    outline:none!important;
    text-align:center!important;
    margin:5px;
}
.btn-login{
    height:38px;
    border-radius:3px;
    border: 1px solid #CF102D!important;
    background:#CF102D!important;
    box-shadow:none;
    color:#FFF;
    width:300px;
    display:block;
    outline:none!important;
    text-align:center!important;
    margin:5px;
}

.btn-primary:focus{
    outline: 0 !important;
    outline-offset: 0  !important;
    background-image: none  !important;
    -webkit-box-shadow: none !important;
    box-shadow: none  !important;
}

.btn-secondary{
    height:32px;
    border-radius:3px;
    border: 1px solid #CF102D!important;
    background:#CF102D!important;
    box-shadow:none;
    color:#FFF;
    display:block;
    outline:none!important;
    text-align:center!important;
    margin:5px;
    font-size:1rem;
    text-overflow:hidden;
    line-height: 3px;
}

.btn-secondary:focus{
    outline: 0 !important;
    outline-offset: 0  !important;
    background-image: none  !important;
    -webkit-box-shadow: none !important;
    box-shadow: none  !important;
}

#hidden-search-button{
    display:none;
}

.btn-prod
{
    color:#CF102D;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color:#FFF!important;
    background-color:#CF102D;
}

/*--- Carousel is for previous and next buttons on product detail */

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 3rem;
  color: #CF102D;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 3rem;
  color: #CF102D;
}


.carousel-control-prev-icon{
    background-image:none!important;
}

.carousel-control-next-icon{
    background-image:none!important;
}

/*----------------------------------------------- IFRAME */
.iframe-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    margin-left:15px;
  }
  
.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/*----------------------------------------------- PAGINATION */

/* Used for the current page in pagination */
.page-item.active .page-link {
    font-size:.75rem;
    color: #fff !important;
    background-color: #CF102D !important; /* red */
    border-color: #CF102D !important; /* red */
    
}

/* Used for non-selected pages in pagination */
.page-link {
    font-size:.75rem;
    color:gray !important; /* red */
    background-color: #FFF !important; /* light gray */
}
.pag-spacing{
    text-align:center;
}
.pag{
    display:inline-block;
}
.pag-small{
    display:none;
}

/*----------------------------------------------- MODALS */
.modal-title{
    color:#CF102D!important;
}
/*----------------------------------------------- ACCORDION */
.card-header{
    background:transparent!important;
    text-decoration:none!important;
    padding:0px;
}
.card-body{
    padding:10px;
}

/*----------------------------------------------- DATA ENTRY */
.removeHighlight{
    border:1px solid #ced4da!important;
    box-shadow:none!important;
}
.detail-entry{
    color:#495057;
    outline:none;
    width:100%;
}

.required {
    color: #CF102D;
}

.required:after {
    content: '*';
}

/*----------------------------------------------- TOOLTIP */
  
.btn-prod {
    position: relative;
    display: inline-block;
  }
  
  .btn-prod .tooltiptext {
    font-size:.75rem;
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    
    right: 110%;
    overflow-wrap: break-word;
    
  }
  
  .btn-prod .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
  }
  .btn-prod:hover .tooltiptext {
    visibility: visible;
  }

/*----------------------------------------------- HOME EXCLUSIVE */


/* Unique Styling for 'Welcome, _____' */
#welcome{
    color:#2C2A29;
    margin-bottom:40px;
}
/*----------------------------------------------- ORDERS/CLAIMS EXCLUSIVE */

/* Header */
#oc-head{
    font-weight:normal;
    color: #2C2A29;
    margin-bottom:20px;
}

/* Unique row should media queries need to be used */
.oc-container{
    margin-left:50px;
    margin-right:50px;
}

/* Used to space the table container */
.oc-table-placement{
    width:75%;
    display:inline-block;
}

/* Unique variant of table-container */
.oc-table-container{
    width:100%;
    background:#FFF;
    margin-bottom:0px !important;
    overflow-y:auto;
    height:75vh;
    font-size:.9rem;
}
.oc-table-container table{
    table-layout: fixed;
    width: 100%;
}

.oc-table-container thead th{
    position: sticky;
    top:0;
    background:#FFF;
}

.oc-table-container .table td{
    padding:6px;
}

.oc-table-container .table th{
    padding:6px;
}

.oc-table-container table tbody tr:hover{
    background-color:lightgray!important;
}

/* Used to highlight rows with Unit Down */
.unit-down-row {
    background-color: rgba(248, 220, 220, 0.8) !important;
}

/* ID for Search */
#search{
    width:80%;
    display:block;
}

/* ID for Filter */
#filter{
    width:80%;
    display:block;
}

.oc-row{
    border:5px;
}

/*----------------------------------------------- LISTS EXCLUSIVE */

#list-head{
    font-weight:normal;
    color: #2C2A29;
}


/*----------------------------------------------- MEDIA QUERIES */  
@media(max-width:290px){
    h5{
        font-size:1rem;
    }
}

@media(max-width:315px){
    .rate-arrangement{
        font-size:.8rem;
    }
}

@media(max-width:330px){
    #hidden-title{
        float: left;
        display: block;
        width: 100%!important;
        margin-top:0px;
    }
    #nav-header-hidden{
        margin-left:0px;
    }
}


@media(max-width:350px){
    .btn-primary{
        width:100px;
        font-size:.9rem;
    }
}

@media(max-width:360px){
    .row{
        margin:0px;
    }
}

@media(max-width:370px){
    .table-search{
        font-size:.75rem;
    }
    .table-drop{
        font-size:.75rem;
    }
}

@media(max-width:430px){
    .pag{
        display:none;
    }
    .pag-small{
        display:inline-block;
    }
}


@media(max-width:460px)
{
    main{
        padding-top:140px;
    }
    #ResourceDocumentRow{
        display:block;
    }
    .notes-container table{
        width:470px;
    }
    #auto-return-container{
        font-size:.75rem;
    }
    
}

@media(max-width:490px){
    #hidden-nav-search{
        display:block;
        width:100%;
        float:left;
        margin-top:-5px;
    }
    .nav-searchbar{
        width:175px!important;
        margin-left:0px;
    }
}

@media(max-width:505px){
    .product-container table{
        width:450px;
        font-size:.75rem;
    }
}

@media(max-width:576px){
    .iframe-container{
        margin-left:0px;
    }
}

@media(max-width: 767px){
    .table-container table{
        width:930px;
    }
    #search{
        text-align:center;
        display:inline-block;
        width:100%;
    }
    #filter{
        text-align:center;
        display:inline-block;
        width:100%;
    }
    .oc-table-container table{
        width:668px;
    }
}
@media(max-width:810px){
    .oc-table-container table{
        font-size:.6rem;
    }
}

@media(max-width:900px){
    #orderview-table-container table{
        width:900px;
    }
}

@media(max-width:910px) and(min-width:811px){
    .oc-table-container table{
        font-size:.65rem;
    }

}

@media(max-width:991px){
    .row{
        margin:0px;
    }
}

@media(max-width:1199px) and (min-width:768px){
    #search{
        text-align:center;
        display:inline-block;
        width:45%;
    }
    #filter{
        text-align:center;
        display:inline-block;
        width:45%;
    }
}


@media(max-width: 1199px){
    #oc-detail{
        max-width:100%!important;
    }
    #search-button{
        display:none;
    }
    #hidden-search-button{
        display:inline-block;
    }
    .oc-table-container{
        height:100%;
    }
    .table-search{
        display:inline-block;
        width:45%;
    }

    .table-drop{
        display:inline-block;
        width:45%;
    }

    .collapse.show{  
        margin-top:10px;
        margin-left:4px;
    }
    .collapsing{
        margin-top:10px;
        margin-left:4px;
    }
    #nav-header{
        margin-left:0px;
        margin-bottom: 0px;
        margin-top:20px;
        padding-bottom:5px;
    }
    .collapse.show{
        margin-top:10px;
        margin-left:4px;
    }
    .collapsing{
        margin-top:10px;
        margin-left:4px;
    }
    main aside{
        width:100%;
        display:block;
        text-align:center;
    }
    .oc-table-placement{
        width:100%;
        display:block;
    }
    .navdrop{
        display:inline;
    }
    #main-title{
        display:none;
    }
    #navlogo{
        display:none;
    }
    #nav-right{
        display:none;
    }
    #dropdown-right{
        float:right;
        text-align:justify;
        width:auto;
    }
    #hidden-logout{
        display:inline-block;
    }
    #logout{
        display:none;
    }
}

@media(max-width:1275px) and (min-width:911px){
    .oc-table-container table{
        font-size:.75rem;
    }
}

@media(max-width:1318px) and (min-width:1200px){
    #jht-nav a{
        font-size:.8rem;
    }
}

@media(max-width:1400px) and (min-width:1275px){
    .oc-table-container table{
        font-size:.8rem;
    }
}

@media(max-width:1570px){
    #auto-return-container table{
        width:1485px;
    }
}

/* Used for shorter Screens to see all drop-down items */
@media(max-height:700px) and (max-width:1199px){
    /*.nav-link{
        padding:0px;
    }*/
    .dropdown-item{
        padding:0px 0px 0px 24px;
    }
}