/*.................................................................
 * COPYRIGHT OBS LOGISTICS LIMITED 2018
 * 140 BUCKINGHAM PALACE ROAD
 * LONDON, SW1W 9SA
 *.................................................................
 * System           : Terminal Container Management
 *.................................................................
 * Module           : Content/Css
 *.................................................................
 * Author/          : System
 * Date             : 24-07-2018
 *.................................................................
 * Functionality    : Site.css   
 *.................................................................
 * Special Comments :
 *.................................................................
 *                  : History of Amendments :
 *
 *   Date        Name        Brief description                
 *   ----        ----        ----------------------------------------
 *   24-07-2018  MA          Initial Creation
 *   27-07-2018  RAJ         Added btn-fifth-width
 *   08-08-2018  AM          Footer style
 *   09-08-2018  AM          Added error-msg
 *   14-08-2018  AM          Added footer-table, footer-copyright and footer-version
 *   15-08-2018  AM          Menu styling
 *   16-08-2018  AM          Changed the width of imgHeaderLogo
 *   17-08-2018  RAJ         Changed Message styling
 *   20-08-2018  RAJ         Removed collapse styling
 *   21-08-2018  OM          removed position absolute from autocomplete div
 *   22-08-2018  RAJ         Added LocationAdmin Screen
 *   31-08-2018  AM          Added autocomplete-custom and altered the autocomplete-items   
 *   03-09-2018  RAJ         Added bootstrap style fix
 *   03-09-2018  RAJ         Changed Header styling
 *   04-09-2018  OM          Adjusted the footer z-index to stop page items going on top when scrolling.      
 *   06-09-2018  OM          Autocomplete styling to fit content and added scroll. Fixed styling issue with UN Number autocomplete
 *   06-09-2018  AM          Added enquiry-cursor class.   
 *   10-09-2018  MA          Added form-checkbox class.   
 *   13-09-2018  RAJ         Altered navbar styling
 *   14-09-2018  MA          Changed .overlay  background colour. Menu animation is quicker.
 *   21-09-2018  AM          Added fixed-back-btn.
 *   21-09-2018  MA          Added top-align class.
     25-09-2018  OM          Added datatable-container class
 *   25-09-2018  AM          Added home-icon class
 *   26-09-2018  AM          Added fixed-back-btn, btn-PDAMenu, btn-back and fixed-btn-height class
 *   28-09-2018  RAJ         Added w-0, h-0, fw-60px, pointer, position-absolute-center and position-absolute-center-transform
 *   28-09-2018  AM          Changed the height and bottom value in fixed-back-btn
 *   22-10-2018  AM          Added datatable-footer
     19-11-2018  MA          Added device styling for less than 1300px
     26-11-2018  MA          Added .col-container-detail and .btn-wip classes
     28-11-2018  OM          Adjusted the css of the message display div to always position itself below the navbar.
     11-01-2019  OM          Added active effect on PDA cards. Reduce padding on body to remove white space, remove pda vh font size.
 *   07-02-2019  RAJ         Added New Loader styles
 *   27-02-2019  AM          356071 - Amended imgHeaderLogo class.
     04-02-2019  OM          Added styling for PDA icons.   
 *   26/04/2019  LR          Added overflow-auto class.   
 *   10/07/2019  RE          355962 - Added OWNER_CODE.   
 *.................................................................*/

body {
    padding-top: 55px;
    padding-bottom: 20px;
}
/*
/* Set padding to keep content from hitting the edges */
/*.body-content {
    padding-left: 15px;
    padding-right: 15px;
}*/

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Bootstrap Error Styling Correction */
.form-control.input-validation-error {
    border-color: #FF0039;
}

.form-control.valid {
    border-color: #3FB618;
}

.form-control.input-validation-error ~ .invalid-feedback {
    display: block;
}
/* Set width on the form input elements since they're 100% wide by default */
/*input,
select,
textarea {
    max-width: 280px;
}*/
img.ObsLogo {
    background: url(../Images/OBS_Logistics_Logo.jpg) no-repeat top left;
    display: block;
    width: 10.5vh;
    height: 4.5vh;
    text-indent: -9999px; /* hides the link text */
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 54px;
    left: 0;
    background-color: #ffffff;
    overflow-x: hidden;
    transition: 0.25s;
    margin-top:unset;
}
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 1em;
    color: #818181;
    display: block;
    transition: 0.25s;
    }

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 25px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
.sidenav {
    padding-top: 15px;
    }

.sidenav a {
    font-size: 18px;
    }
}

.sidenav-active {
    width: 17em;
    /*top: 7%;*/
    top: 54px; /* fixed with and padding of Headerbar */
}

.navSideMenu {
    font-size: 2em;
    cursor: pointer;
}

.menu-seperator {
    background-color: #007bff;
    margin-top:unset;
}
.sideMenuCategory {
    color: #818181;
    padding-left: 1em;
    font-size: 1.25em;
    font-weight: 500;
}

#sideMenuContent > a.nav-link::before {
    content: "\f0db";
    font-family: FontAwesome;
    padding-right: 1em;
}
#sideMenuContent > a.nav-link:hover {
    background-color: #4b4b4b;
}


.collapse > a.sub-link:hover {
    background-color: #4b4b4b !important;
}

.collapse > a.sub-link::before {
    content: "\f0db";
    font-family: FontAwesome;
    padding-right: 1em;
}

.nav-container:hover {
    background-color: none !important;
    font-weight: bold;
}

.nav-container {
    color: #818181 !important;
    padding-left: 1em !important;
    font-size: 1.25em !important;
    font-weight: 500 !important;
}

.down-menu::before {
    content: "\f0ab";
    font-family: FontAwesome;
    padding-right: 1em;
}

.up-menu::before {
    content: "\f0aa";
    font-family: FontAwesome;
    padding-right: 1em;
}

.overlay {
    position: fixed;
    display: none;
    /* color with alpha channel */
    background-color: rgba(0, 0, 0, 0.5); /* 0.5 = 50% opacity */
    /* stretch to screen edges */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
}
#MenuSideNav {
    overflow-y:scroll
}
#MenuSideNav::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

#MenuSideNav.sidenav-active > #MenuHeader {
    position: fixed;
    width: inherit;
    background-color: #ffffff;
}

#MenuHeaderSeperator {
    margin-bottom:unset;
}

#sideMenuContent {
    /*padding-top: 4em;*/
    padding-bottom: 10vh;
    overflow-x: hidden;
}

#MenuSideNav.sidenav-active > #SideMenuFooter {
    position: fixed;
    max-height: 10vh;
    width: inherit;
    background-color: #007bff;
    bottom: 0;
}
.navbar-light .navbar-brand {
padding-left:1em;
}

.whitespace-nowrap {
    white-space:nowrap;
}

.toolbar {
    float: left;
}

.col-three-quaters-width {
    width: 75%;
}

.col-top-margin {
    margin-top: 0.75rem;
}

.col-no-margin {
    margin: 0;
}

.table-marginless {
    margin: 0;
}

.btn-fifth-width {
    width: 20%;
}

.btn-quater-width {
    width: 25%;
}

.btn-half-width {
    width: 50%;
}

.btn-shared-space {
    width: 33%;
}

.selected-li {
    opacity: 0.75;
}

.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
}

.autocomplete-items {
    /*position: absolute;*/
    /*border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;*/
    /*position the autocomplete items to be the same width as the container:*/
    /*top: 100%;
    left: 0;
    right: 0;*/
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    left: 15px;
    right: 0;
    min-width:fit-content;
    overflow-y:scroll;
    max-height:300px;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

 .autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9;
}

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
}

#navTitleBar > #MessageDisplay {
   position:absolute;
   top:100%;
    }

.popper[x-placement^="right"], .tooltip[x-placement^="right"] {
    margin-left: 5px;
}

.popper, .tooltip {
    position: absolute;
    background: #FFC107;
    color: black;
    width: 150px;
    border-radius: 3px;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    padding: 10px;
    text-align: center;
}

.blurdiv {
    background: inherit;    
    position: absolute;
    overflow: hidden;
    
}
.blurdiv:before
{
    content: " ";
    background: inherit;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
    filter: blur(10px);
}

#doneFAIcon {
    display: none;
}


#donePopperbtn:hover #doneFAIcon {
    display:inline-block;
}

.title-width {
    width: 87%;
}

.footer {
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index:9;
}

.error-msg {
    padding: 0 !important;
}

/*.loader {
    display: none;
    width: 100%;
    height: 100%;
    top: 0pt;
    left: 0pt;
}

.loading-screen {
    filter: alpha(opacity = 65);
    z-index: 9999;
    border: medium none;
    margin: 0pt;
    padding: 0pt;
    width: 100%;
    height: 100%;
    top: 0pt;
    left: 0pt;
    background-color: rgb(0, 0, 0);
    opacity: 0.2;
    cursor: wait;
    position: fixed;
}

.img-loader {
    z-index: 10000;
    position: fixed;
    padding: 0px;
    margin: 0px;
    width: 30%;
    top: 40%;
    left: 35%;
    text-align: center;
    cursor: wait;
}*/


.dataTables_wrapper {
    padding: 0px;
}

.footer-table {
    width:100%
}

.footer-copyright {
    width:50%;
    text-align:left;
}

.footer-version {
    width: 50%;
    text-align: right;
}

#imgHeaderLogo {
    /*width: 54px;
    height: 30px;*/
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.menu-icon-container {
    width: 30px;
    height: 26px;
}

.menu-icon {
    width: 30px;
    height: 25px;
    position: relative;
    margin: 0px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

.menu-icon span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.menu-icon span {
    background: #fff;
}

.menu-icon span:nth-child(1) {
    top: 0px;
}

.menu-icon span:nth-child(2) {
    top: 10px;
}

.menu-icon span:nth-child(3) {
    top: 20px;
}

.menu-icon.open span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

.menu-icon.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
}

.menu-icon.open span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.list-page-height {
    height: 30em;
    overflow-y: scroll;
}

.collapse {
    padding-left: 1em !important;
}

/*.autocomplete-items {
    max-height: 90px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}*/

.autocomplete-custom {
    /*vertical-align: top !important;*/
    white-space: nowrap !important;
}

.divAutoComplete {
    position: relative;
}

.divAutoComplete > div.autocomplete-items {
    left: 0px;
}

.divAutoComplete .autocomplete-data {
    font-size: 0.9em;
}

/*
#UnNumbDiv {
    position: relative;
}

#UnNumbDiv #unNumberTxtboxautocomplete-list {
    left: 0px;
}

#unNumberTxtboxautocomplete-list .autocomplete-data {
    font-size:0.9em;
}
*/

.enquiry-cursor {
    cursor: pointer
}

.form-checkbox {
    width: 100%;
    height: 1.2rem;
}

.fixed-back-btn {
    position: fixed;
    bottom: 60px;
    /*height: 13vh;*/
    padding-left: 0;
}

.btn-back {
    width: calc(100% - 15px);
}

.fixed-btn-height {
    height: 10vh;
}

.top-align {
    vertical-align: top;
}
.datatable-container {
    right: 0px;
    width: 100%;
    margin: 0 !important;
    position: absolute;
    left: 0px;
    padding-bottom: 6em !important;
    vertical-align: middle;
}

.home-icon {
    cursor:pointer;
}

.btn-PDAMenu {
    float: left;
    background: white;
    color: #2780E3;
    /*font-size: 4vh;*/
    
}

.w-0 {
    width: 0 !important;
}

.h-0 {
    height: 0 !important;
}

.position-absolute-center {
    position: absolute;
    left: 50%;
    top: 50%;
}

.position-absolute-center-transform {
    transform: translate(-50%, -50%);
}

.fw-60px {
    width:60px;
}

.pointer {
    cursor: pointer;
}

.datatable-footer {
    display: table-row-group !important;
}


.device-w-50 {
    width:50% !important;
}

.obs-card {
    min-height:155px;
}

.obs-card:active {
    background-color: #1967be;
}
.float-device {
    float: right;
}

.btn-wip-1 {
    width: 100%;
}

.btn-wip-2 {
    width: 50%;
}

.btn-wip-3 {
    width: 33.3333%;
}

.btn-wip-4 {
    width: 25%;
}

.col-container-detail {
    width: 33.333%;
    vertical-align: top;
}




@media only screen and (max-width: 1300px) {
    body {
        padding-top: 35px;
        padding-bottom: 20px;
    }
    .hide-on-device {
        display: none;
    }

    .device-w-50 {
        padding-left: 10px;
    }

    .obs-card {
        min-height: 150px;
    }

    .card-footer {
        padding: 0.75rem 1.25rem;
    }

    .footer {
        display: none;
    }

    .fixed-back-btn {
        bottom: 0px;        
    }

    .fixed-btn-height {
        height: 0px;
    }

    .btn-back {
        height: 30px;
        line-height: 0px;
    }

    .float-device {
        float: left;
    }

    .container {
        max-width: 100%;
    }

}
/*
    Loader Icon
*/
.loader-container {
    background-color: rgba(255, 255, 255, 0.5);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1090;
}

.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    margin: -75px 0 0 -75px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    border-right: 16px solid lightgrey;
    border-bottom: 16px solid lightgrey;
    border-left: 16px solid lightgrey;
    width: 90px;
    height: 90px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.obs-card > .card-header > span[class*='fa'] {
font-size:1.5em;
}

.overflow-auto {
    overflow: auto !important;
}