/*New style*/
html
{
    min-height: 100%;
    min-width: 100%;
    -ms-text-size-adjust: none;
    
}
body,div,dl,dt,dd,ul,ol,li,nav,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,option,button,textarea,p,blockquote,th,td,a
{
    margin: 0;
    padding: 0;
    border-width: 0;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
    color: #7F7F7F;
}

body
{
    font-family: Open Sans;
    text-align: left;
    font-size: 12px; 
    /*line-height: 17px;*/
    word-wrap: break-word;
    text-rendering: optimizeLegibility; /* kerning, primarily */
    -moz-font-feature-settings: 'liga';
    -ms-font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    /*background-image: url('images/freeway.png');*/
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 500px;
    /*padding-top: 160px;*/

}
/* bootstrap 4 label within form changed by adding color */
form label{
  font-weight:bold;
}
/* bootstrap 4 card-header changed by adding color */
.card-header{
    color: black;
}

/* bootstrap 4 card-col-form-label changed by adding color */
.col-form-label{
    text-align: right;
}

.form-check-label{
    text-align: right;
    
}

input[type="checkbox"] {
            width: 2em;
            height: 2em;
            margin-left: 0.4em;
            
        }

.col-form-labelLEFT{
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
}

/* 
table.dataTable.table-striped tbody tr.odd.selected td,
table.dataTable.table-striped tbody tr.even.selected td {
  background-color: transparent !important;
  box-shadow: inset 0 0 0 9999px rgba(216, 2, 35, 0.95) !important;
  color: #fff !important;
} */



h1,h2,h3,h4,h5,h6
{
    font-size: 100%;
    font-weight: bold;
}

label
{
    padding-right: 10px;
    padding-left: 10px;
}
input,select
{
    border-width: 1px;
    border-style: solid;
    border-color: #C4C4C4;
    background-color: #FFFFFF;
    padding-top: 2px;
    padding-bottom: 2px;
}

input:empty,select:empty
{
    border-color: #6B6B6B;
    /* background-color: #F2F2F2; */
}

input:hover,select:hover
{
    border-color: #6B6B6B;
    background-color: #FFFFFF;
}

input:focus,select:focus
{
    border-color: #6B6B6B;
    background-color: #FFFFFF;
}

.input-groupx {
    display: inline-table;
    vertical-align: middle;
    .input-group-addon,
    .input-group-btn,
    .form-control {
        width: auto !important;
    }
}

.round{
      border-bottom-right-radius:15px;
      border-bottom-left-radius:15px;
     -moz-border-radius-bottomright:15px;
     -moz-border-radius-bottomleft:15px;
     -webkit-border-bottom-right-radius:15px;
     -webkit-border-bottom-left-radius:15px;

      -moz-border-radius-topright:15px;
      -moz-border-radius-topleft:15px;
      -webkit-border-top-right-radius:15px;
      -webkit-border-top-left-radius:15px;
      border-top-right-radius:15px;
      border-top-left-radius:15px;
       }



/*table
{
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 10px;
    font-size: 12px;
}*/

/*caption,th
{
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 0 5px 0;
    background-color: #F2F2F2;    
    background-color: #C7D5D8;
}

th,td {
    padding: 5px 5px 5px 5px;
}*/

fieldset,img
{
    border: 0;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
}

address,caption,cite,code,dfn,em,strong,th,var,optgroup
{
/*    font-style: inherit;
    font-weight: inherit;*/
}

del,ins
{
	text-decoration: none;
}

li
{
	list-style: none;
}

input,button,textarea,select,optgroup,option
{
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

a:link
{
	color: #7F7F7F;
	text-decoration: underline;
}

a:visited
{
	color: #800080;
	text-decoration: underline;
}

a:hover
{
	color: #80d4ff;
	text-decoration: underline;
}

a:active
{
	color: #EE0000;
	text-decoration: underline;
}

a.nontext  
/*used to override default properties of 'a' tag*/ 
{
	/*color: black;*/
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
}

input:focus,textarea:focus,select:focus
/*remove default focussed input styling*/ 
{
	outline: none;
}

textarea
{
	resize: none;
	overflow: auto;
        
}

p,h1,h2,h3,h4,h5,h6,ol,ul,span.actAsPara  /*disable Android font boosting */
{
	max-height: 1000000px;
}

/*th {
    background-color: #F2F2F2;
    background-color: #C7D5D8;
}*/

/*ID Based*/
#CancelBtn {
   height: 40px;
   /*width: 60px;*/
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent url(../images/Documents.png) no-repeat top left;
   background-size: 26px;
   text-indent: -1000em;
   vertical-align: middle;
   text-align: center;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }

#square
{
    /*z-index: 1;*/
    width: 100%;
    min-height: 500px;
    /*background-image: none;*/
    border-style: none;
    border-color: #000000;
    background-color: transparent;
    margin-left: auto;
    margin-right: auto;
    /*padding-top: 170px;*/
    /*margin: 160px auto;*/
}

#squareOn
{
    /*z-index: 1;*/
    width: 100%;
    min-height: 500px;
    /*background-image: none;*/
    border-style: none;
    border-color: #000000;
    background-color: transparent;
    margin-left: auto;
    margin-right: auto;
    padding-top: 130px;
    /*margin: 160px auto;*/
}

#squareOff
{
    /*z-index: 1;*/
    width: 100%;
    min-height: 500px;
    /*background-image: none;*/
    border-style: none;
    border-color: #000000;
    background-color: transparent;
    margin-left: auto;
    margin-right: auto;
    padding-top: 130px;
    /*margin: 160px auto;*/
}

#squarewithright
{
    /*z-index: 1;*/
    width: 1024px;
    min-height: 500px;
    /*background-image: none;*/
    border-style: none;
    border-color: #000000;
    background-color: transparent;
    margin-left: auto;
    margin-right: auto;
    /*margin: 160px auto;*/
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;
}

#navigation {
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
/*    border-bottom: 2px solid; 
    border-bottom-color: #3EC7F4;*/
    /*width: 80%;*/
}

#Shopping {
   height: 46px;
   /*width: 36px;*/
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent url(../images/shopping-cart.png) no-repeat top left;
   background-size: 46px;
   text-indent: -1000em;
   vertical-align: middle;
   text-align: center;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }

#Tool {
   height: 46px;
   /*width: 36px;*/
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent url(../images/Tool.png) no-repeat top left;
   background-size: 46px;
   text-indent: -1000em;
   vertical-align: middle;
   text-align: center;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }

#LoginBtn {
   height: 26px;
   width: 30px;
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent url(../images/OK.png) no-repeat top left;
   background-size: 26px;
   text-indent: -1000em;
   vertical-align: top;
   text-align: center;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }

#OKBtn {
   height: 26px;
   width: 30px;
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent url(../images/OK.png) no-repeat top left;
   background-size: 26px;
   text-indent: -1000em;
   vertical-align: top;
   text-align: center;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }

#LogoutBtn {
   height: 26px;
   width: 30px;
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent url(../images/cross.png) no-repeat top left;
   background-size: 26px;
   text-indent: -1000em;
   vertical-align: top;
   text-align: center;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }

#NotOKBtn {
   height: 26px;
   width: 30px;
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent url(../images/cross.png) no-repeat top left;
   background-size: 26px;
   text-indent: -1000em;
   vertical-align: top;
   text-align: center;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }

#SaveBtn {
   height: 40px;
   /*width: 60px;*/
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent url(../images/Documents.png) no-repeat top left;
   background-size: 26px;
   text-indent: -1000em;
   vertical-align: middle;
   text-align: center;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }

#DeleteBtn {
   height: 40px;
   /*width: 60px;*/
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent url(../images/Delete.png) no-repeat top left;
   background-size: 26px;
   text-indent: -1000em;
   vertical-align: middle;
   text-align: center;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }
 
 
#SearchBtn {
   height: 40px;
   /*width: 60px;*/
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent url(../images/search.png) no-repeat top left;
   background-size: 26px;
   text-indent: -1000em;
   vertical-align: middle;
   text-align: center;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }

.SearchBtn {
   height: 40px;
   /*width: 60px;*/
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent url(../images/search.png) no-repeat top left;
   background-size: 26px;
   text-indent: -1000em;
   vertical-align: middle;
   text-align: center;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }

#PDFExport {
   height: 30px;
   /*width: 60px;*/
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent url(../images/PDF.png) no-repeat top left;
   background-size: 30px;
   text-indent: 0em;
   line-height: 1;
   vertical-align: top;
   text-align: center;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }
 #PDFExportsmall {
   height: 20px;
   /*width: 60px;*/
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent url(../images/PDF.png) no-repeat top left;
   background-size: 20px;
   text-indent: 0em;
   line-height: 1;
   vertical-align: top;
   text-align: center;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }

#ExcelExport {
   height: 30px;
   /*width: 60px;*/
   margin: 0;
   padding: 0;
   /*margin-bottom: 35px;*/
   border: 0;
   background: transparent url(../images/excel.png) no-repeat top left;
   background-size: 30px;
   text-indent: 0em;
   line-height: 1;
   vertical-align: top;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }
 
 .ExcelExport {
   height: 30px;
   /*width: 60px;*/
   margin: 0;
   padding: 0;
   /*margin-bottom: 35px;*/
   border: 0;
   background: transparent url(../images/excel.png) no-repeat top left;
   background-size: 30px;
   text-indent: 0em;
   line-height: 1;
   vertical-align: top;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }
 
#AlertButton {
   height: 35px;
   margin: 0;
   padding: 0;
   /*margin-bottom: 40px;*/
   border: 0;
   background: transparent url(../images/alert.png) no-repeat top left;
   background-size: 36px;
   /*text-indent: -1000em;*/
   vertical-align: top;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
   color: white;
 }
.modal-footer {
    background-color: #f9f9f9;
}

.select_join select {background: #F2F2F2;}

.small {
    font-size: small;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

#rightsidebar {
    width: 80%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    /*border: 2px solid;*/ 
    /*border-color: #3EC7F4;*/
    /*float:left;*/
    /*clear: none;*/
/*    background-color: white;
    min-height: 874px; */
    /*right: 10%;*/
    /*position: fixed;*/
    z-index: 10; 
    overflow: auto;
    overflow-x: auto;
}

/* Datatable Overrides */
table.dataTable thead tr {
  background: linear-gradient(#0B2732,#266883) !important;
}


table.dataTable.table-striped tbody tr.odd.selected td,
table.dataTable.table-striped tbody tr.even.selected td {
  background-color: transparent !important;
  box-shadow: inset 0 0 0 9999px rgba(149, 205, 254) !important;
  color: #000000 !important;
}

/* BS4 used a new one table-nostripe. This wont stripe the rows but will use the same highlighter colour whne row clicked*/
table.dataTable.table-nostripe tbody tr.odd.selected td,
table.dataTable.table-nostripe tbody tr.even.selected td {
  background-color: transparent !important;
  box-shadow: inset 0 0 0 9999px rgba(149, 205, 254) !important;
  color: #000000 !important;
}


table.dataTable thead td {
  color: white;
  font-weight: normal;
}


/* this colours the column header text white */
table.dataTable thead th {
  background-color: transparent !important;
  color: #ffffff;
  font-weight: normal;
}

table.dataTable tbody td {
    border-color: black;
    color: black;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}


.dataTables_wrapper {
    font-family: Open Sans;
}

/* HMMM HERE stolen from bs3. This give next/prev.. buttons on datatable a nice look */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  margin: 0 0.25rem;  /* Add horizontal spacing */
  padding: 0.25rem 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  background-color: #f8f9fa;
  color: #212529;
  font-size: 0.875rem;
  cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: #e2e6ea;
}


/* Add horizontal space between pagination buttons */
.dataTables_wrapper .dataTables_paginate .pagination .page-item {
    margin-right: 5px; /* Adjust the value as needed */
}
/* Change background and text color on hover */
.dataTables_wrapper .dataTables_paginate .pagination .page-link:hover {
    background-color: rgb(51, 122, 183); /* Bootstrap primary color */
    color: #fff;               /* White text */
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
    background-color: rgb(51, 122, 183); /* Change to your desired color */
    color: #fff;               /* Text color */
    border-color: rgb(51, 122, 183);     /* Optional: match border to background */
}



/* this sets the column labels to bold. Labels were bold in bs3 by default not in bs 4. So reintroduced */
table.dataTable thead th, table.dataTable tfoot th {
    font-weight: bold;
}




/* following 3 statements makes sure datatable concerned stays within parent div 
This will sort out any table class table
*/
.noOverFlowDT {
  table-layout: fixed;
  width: 100% !important;
}
.noOverFlowDT td{
  width: auto !important;
  text-overflow: ellipsis;
  overflow: hidden;
}
.noOverFlowDT th{
  width: auto !important;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}


/* The following two setting removed the sorting up and down arrows from datatable column */
 .dataTable > thead > tr > th[class*="sort"]:after{
    /* content: "" !important; */
    display: none !important;
}

.dataTable > thead > tr > th[class*="sort"]:before{
    /* content: "" !important; */
    display: none !important;
}

/*#MSSTable tbody th { font-size: 20px !important;}
#MSSTable tbody tr { font-size: 10px !important;}*/
/* td { font-size: 11px; } */


  
/* This right aligns any datatable column. See POHeader.js "ClassName" */
table td.dt-numcol {
  text-align : right;
}

.table-compressed{
    font-size: 10px !important;
}
/*JSGrid*/
/*.jsgrid {
    position: relative;
    overflow: hidden;
    font-size: 1em;
}

.jsgrid, .jsgrid *, .jsgrid *:before, .jsgrid *:after {
    box-sizing: border-box;
}

.jsgrid input,
.jsgrid textarea,
.jsgrid select {
    font-size: 1em;
}

.jsgrid-grid-header {
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.jsgrid-grid-body {
    overflow-x: auto;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.jsgrid-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

.jsgrid-cell {
    padding: 0.5em 0.5em;
}

.jsgrid-сell,
.jsgrid-header-cell {
    box-sizing: border-box;
}

.jsgrid-align-left {
    text-align: left;
}

.jsgrid-align-center,
.jsgrid-align-center input,
.jsgrid-align-center textarea,
.jsgrid-align-center select {
    text-align: center;
}

.jsgrid-align-right,
.jsgrid-align-right input,
.jsgrid-align-right textarea,
.jsgrid-align-right select {
    text-align: right;
}

.jsgrid-header-cell {
    padding: .5em .5em;
}

.jsgrid-filter-row input,
.jsgrid-filter-row textarea,
.jsgrid-filter-row select,
.jsgrid-edit-row input,
.jsgrid-edit-row textarea,
.jsgrid-edit-row select,
.jsgrid-insert-row input,
.jsgrid-insert-row textarea,
.jsgrid-insert-row select {
    width: 100%;
    padding: .3em .5em;
}

.jsgrid-filter-row input[type='checkbox'],
.jsgrid-edit-row input[type='checkbox'],
.jsgrid-insert-row input[type='checkbox'] {
    width: auto;
}


.jsgrid-selected-row .jsgrid-cell {
    background: #F7B64B;
    cursor: pointer;
}

.jsgrid-nodata-row .jsgrid-cell {
    padding: .5em 0;
    text-align: center;
}

.jsgrid-header-sort {
    cursor: pointer;
}

.jsgrid-pager {
    padding: .5em 0;
}

.jsgrid-pager-nav-button {
    padding: .2em .6em;
}

.jsgrid-pager-nav-inactive-button {
    display: none;
    pointer-events: none;
}

.jsgrid-pager-page {
    padding: .2em .6em;
}

tr.highlight td.jsgrid-cell {
  background: #F7B64B;
}*/

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #e6e6e6;
}
/* media will only work for static menus. MyFreeway menu gets created on the fly and hence there will not be a 
   static breakpoint. The hiding/showing of menu must be calculated. See nav.php and header.php
   Also the replacement CSS is MENU-CSS in this program
*/
/*@media (max-width: 1850px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}
*/

/* Bootstrap Overrides */
.card-primary>.card-header{color:#fff !important;background:linear-gradient(#0B2732,#266883);border-color:#337ab7}
/* .panel-success>.panel-heading{color:#fff;background: linear-gradient(#28320B,#548326);border-color:#d6e9c6}
 .panel-info>.panel-heading{color:#fff;background:linear-gradient(#C8D6D9,#547691);border-color:#bce8f1}*/
 /*.panel-danger>.panel-heading{color:#fff;background:linear-gradient(#320B0B,#832626);border-color:#bce8f1}*/

 /* change the default padding of 15px to 5 px */
 .card-body {
    padding-top: 5px;
    padding-bottom: 5px;
}

.badge-success {
    background: linear-gradient(#28320B,#548326);border-color:#d6e9c6;
}

.badge-danger {
    background:linear-gradient(#320B0B,#832626);border-color:#bce8f1;
}

.searchColour {
  background-image: linear-gradient(#0B2732,#266883) !important;
  width: 100%; /* Full-width */
  color: #ffffff;  /* input colour to white */
}

/* Set the width of the search text fields to the width of the columns */
.tableHeader {
  width: 100%; /* Full-width */
} 

/* Set the width of the search text fields to the width of the columns */
.tableHeader2 {
  width: 100%; /* Full-width */
} 

.dtHeaderRow {
  background-color: #e6e6e6 !important;
    
}

/* see branch 25-poheader program  POHeader.js for positioning the icon */  
#loading {
    background: url('../images/loading.gif') no-repeat center center;
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 50%;
    z-index: 9999999;

} 

/* Placeholder Code */
::-webkit-input-placeholder 
{ /* Chrome/Opera/Safari */
  color: #ffffff;
  font-family: 'myFont', Arial, sans-serif;
}
::-moz-placeholder 
{ /* Firefox 19+ */
 color: pink;
}
:-ms-input-placeholder 
{ /* IE 10+ */
 color: pink;
}
:-moz-placeholder 
{ /* Firefox 18- */
 color: red;
}

/* Modal window */

.modal-header
{
    background-color: #bce8f1;
    color: red; 
    text-align: center;   

}

.modal-header.modal-colour
{
    background-color: #14468d !important;
    color: white !important; 
    text-align: center;   

}
.modal-body
{
    font-family:  open sans ;
    
     

}

/* change modal-dialog */
.modal-overflow{
    overflow-y: initial !important
}
/* change modal-body */
.modal-height{
    height: 500px;
    overflow-y: auto;
}

/* The following two are important for stacked modals.
When modal is opened the backdrop below the modal is darkened
The two classes below automatically darken anything below top-most modal
*/
.modal-backdrop {
    visibility: hidden !important;
}
.modal.in {
    background-color: rgba(0,0,0,0.5);
}

.alert-box {
	padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;  
}

.success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    
}

.failure {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    
}

/* The following is required so that width actually works correctly */
.textarea-width
{
	width: auto;
     
}

.modal-dialog.modal-500 {
    width: 500px;
    margin: 30px auto;
}
.modal-dialog.modal-1000 {
    width: 1000px;
    margin: 30px auto;
}
.modal-dialog.modal-750 {
    width: 750px;
    margin: 30px auto;
}

/*
input[name=datetype] {
    background-repeat:repeat-x;
    border: 0px solid;
    height:25px;
    width:10px;
}
*/

/* Document Images Start */
.fileicon
{
    background: url(../images/FileFormatSprite.png) no-repeat top left;
    display: inline-block;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    vertical-align: middle;
}

.icon-excel-16{ background-position: 0 0; width: 16px; height: 16px; } 
.icon-excel-24{ background-position: 0 -36px; width: 24px; height: 24px; } 
.icon-excel-32{ background-position: 0 -80px; width: 32px; height: 32px; } 
.icon-excel-48{ background-position: 0 -132px; width: 48px; height: 48px; } 
.icon-excel-64{ background-position: 0 -200px; width: 64px; height: 64px; } 
.icon-excel_2-16{ background-position: 0 -284px; width: 16px; height: 16px; } 
.icon-excel_2-24{ background-position: 0 -320px; width: 24px; height: 24px; } 
.icon-excel_2-32{ background-position: 0 -364px; width: 32px; height: 32px; } 
.icon-excel_2-48{ background-position: 0 -416px; width: 48px; height: 48px; } 
.icon-excel_2-64{ background-position: 0 -484px; width: 64px; height: 64px; } 
.icon-excel_3-16{ background-position: 0 -568px; width: 16px; height: 16px; } 
.icon-excel_3-24{ background-position: 0 -604px; width: 24px; height: 24px; } 
.icon-excel_3-32{ background-position: 0 -648px; width: 32px; height: 32px; } 
.icon-excel_3-48{ background-position: 0 -700px; width: 48px; height: 48px; } 
.icon-excel_3-64{ background-position: 0 -768px; width: 64px; height: 64px; } 
.icon-file_2-16{ background-position: 0 -852px; width: 16px; height: 15px; } 
.icon-file_2-24{ background-position: 0 -887px; width: 24px; height: 23px; } 
.icon-file_2-32{ background-position: 0 -930px; width: 32px; height: 31px; } 
.icon-file_2-48{ background-position: 0 -981px; width: 48px; height: 46px; } 
.icon-image-16{ background-position: 0 -1047px; width: 16px; height: 16px; } 
.icon-image-24{ background-position: 0 -1083px; width: 24px; height: 24px; } 
.icon-image-32{ background-position: 0 -1127px; width: 32px; height: 32px; } 
.icon-image-48{ background-position: 0 -1179px; width: 48px; height: 48px; } 
.icon-image-64{ background-position: 0 -1247px; width: 64px; height: 64px; } 
.icon-image_2-16{ background-position: 0 -1331px; width: 16px; height: 16px; } 
.icon-image_2-24{ background-position: 0 -1367px; width: 24px; height: 24px; } 
.icon-image_2-32{ background-position: 0 -1411px; width: 32px; height: 32px; } 
.icon-image_2-48{ background-position: 0 -1463px; width: 48px; height: 48px; } 
.icon-image_2-64{ background-position: 0 -1531px; width: 64px; height: 64px; } 
.icon-image_3-16{ background-position: 0 -1615px; width: 16px; height: 16px; } 
.icon-image_3-24{ background-position: 0 -1651px; width: 24px; height: 24px; } 
.icon-image_3-32{ background-position: 0 -1695px; width: 32px; height: 32px; } 
.icon-image_3-48{ background-position: 0 -1747px; width: 48px; height: 48px; } 
.icon-image_3-64{ background-position: 0 -1815px; width: 64px; height: 64px; } 
.icon-pdf-16{ background-position: 0 -1899px; width: 16px; height: 16px; } 
.icon-pdf-24{ background-position: 0 -1935px; width: 24px; height: 24px; } 
.icon-pdf-32{ background-position: 0 -1979px; width: 32px; height: 32px; } 
.icon-pdf-48{ background-position: -84px 0; width: 48px; height: 48px; } 
.icon-pdf-64{ background-position: -84px -68px; width: 64px; height: 64px; } 
.icon-pdf_2-16{ background-position: -84px -152px; width: 16px; height: 16px; } 
.icon-pdf_2-24{ background-position: -84px -188px; width: 24px; height: 24px; } 
.icon-pdf_2-32{ background-position: -84px -232px; width: 32px; height: 32px; } 
.icon-pdf_2-48{ background-position: -84px -284px; width: 48px; height: 48px; } 
.icon-pdf_2-64{ background-position: -84px -352px; width: 64px; height: 64px; } 
.icon-pdf_3-16{ background-position: -84px -436px; width: 16px; height: 16px; } 
.icon-pdf_3-24{ background-position: -84px -472px; width: 24px; height: 24px; } 
.icon-pdf_3-32{ background-position: -84px -516px; width: 32px; height: 32px; } 
.icon-pdf_3-48{ background-position: -84px -568px; width: 48px; height: 48px; } 
.icon-pdf_3-64{ background-position: -84px -636px; width: 64px; height: 64px; } 
.icon-powerpoint-16{ background-position: -84px -720px; width: 16px; height: 16px; } 
.icon-powerpoint-24{ background-position: -84px -756px; width: 24px; height: 24px; } 
.icon-powerpoint-32{ background-position: -84px -800px; width: 32px; height: 32px; } 
.icon-powerpoint-48{ background-position: -84px -852px; width: 48px; height: 48px; } 
.icon-powerpoint-64{ background-position: -84px -920px; width: 64px; height: 64px; } 
.icon-powerpoint_2-16{ background-position: -84px -1004px; width: 16px; height: 16px; } 
.icon-powerpoint_2-24{ background-position: -84px -1040px; width: 24px; height: 24px; } 
.icon-powerpoint_2-32{ background-position: -84px -1084px; width: 32px; height: 32px; } 
.icon-powerpoint_2-48{ background-position: -84px -1136px; width: 48px; height: 48px; } 
.icon-powerpoint_2-64{ background-position: -84px -1204px; width: 64px; height: 64px; } 
.icon-powerpoint_3-16{ background-position: -84px -1288px; width: 16px; height: 16px; } 
.icon-powerpoint_3-24{ background-position: -84px -1324px; width: 24px; height: 24px; } 
.icon-powerpoint_3-32{ background-position: -84px -1368px; width: 32px; height: 32px; } 
.icon-powerpoint_3-48{ background-position: -84px -1420px; width: 48px; height: 48px; } 
.icon-powerpoint_3-64{ background-position: -84px -1488px; width: 64px; height: 64px; } 
.icon-text-16{ background-position: -84px -1572px; width: 16px; height: 16px; } 
.icon-text-24{ background-position: -84px -1608px; width: 24px; height: 24px; } 
.icon-text-32{ background-position: -84px -1652px; width: 32px; height: 32px; } 
.icon-text-48{ background-position: -84px -1704px; width: 48px; height: 48px; } 
.icon-text-64{ background-position: -84px -1772px; width: 64px; height: 64px; } 
.icon-text_2-16{ background-position: -84px -1856px; width: 16px; height: 16px; } 
.icon-text_2-24{ background-position: -84px -1892px; width: 24px; height: 24px; } 
.icon-text_2-32{ background-position: -84px -1936px; width: 32px; height: 32px; } 
.icon-text_2-48{ background-position: -168px 0; width: 48px; height: 48px; } 
.icon-text_2-64{ background-position: -168px -68px; width: 64px; height: 64px; } 
.icon-text_3-16{ background-position: -168px -152px; width: 16px; height: 16px; } 
.icon-text_3-24{ background-position: -168px -188px; width: 24px; height: 24px; } 
.icon-text_3-32{ background-position: -168px -232px; width: 32px; height: 32px; } 
.icon-text_3-48{ background-position: -168px -284px; width: 48px; height: 48px; } 
.icon-text_3-64{ background-position: -168px -352px; width: 64px; height: 64px; } 
.icon-word-16{ background-position: -168px -436px; width: 16px; height: 16px; } 
.icon-word-24{ background-position: -168px -472px; width: 24px; height: 24px; } 
.icon-word-32{ background-position: -168px -516px; width: 32px; height: 32px; } 
.icon-word-48{ background-position: -168px -568px; width: 48px; height: 48px; } 
.icon-word-64{ background-position: -168px -636px; width: 64px; height: 64px; } 
.icon-word_2-16{ background-position: -168px -720px; width: 16px; height: 16px; } 
.icon-word_2-24{ background-position: -168px -756px; width: 24px; height: 24px; } 
.icon-word_2-32{ background-position: -168px -800px; width: 32px; height: 32px; } 
.icon-word_2-48{ background-position: -168px -852px; width: 48px; height: 48px; } 
.icon-word_2-64{ background-position: -168px -920px; width: 64px; height: 64px; } 
.icon-word_3-16{ background-position: -168px -1004px; width: 16px; height: 16px; } 
.icon-word_3-24{ background-position: -168px -1040px; width: 24px; height: 24px; } 
.icon-word_3-32{ background-position: -168px -1084px; width: 32px; height: 32px; } 
.icon-word_3-48{ background-position: -168px -1136px; width: 48px; height: 48px; } 
.icon-word_3-64{ background-position: -168px -1204px; width: 64px; height: 64px; } 
.icon-zip_2-16{ background-position: -168px -1288px; width: 16px; height: 15px; } 
.icon-zip_2-24{ background-position: -168px -1323px; width: 24px; height: 23px; } 
.icon-zip_2-32{ background-position: -168px -1366px; width: 32px; height: 31px; } 
.icon-zip_2-48{ background-position: -168px -1417px; width: 48px; height: 46px; } 

/* Document Images End */


td.details-control {

    background:  url('../images/details_open.png') no-repeat center center;
    cursor: pointer;

}


tr.shown td.details-control {

    background: transparent url(../images/details_close.png) no-repeat center center;

}

td.details-control2 {

    background: transparent url(../images/details_open.png) no-repeat center center;
    

    cursor: pointer;

}

tr.shown td.details-control2 {

    background: transparent url(../images/details_close.png) no-repeat center center;

}

td.details-control3 {

    background: transparent url(../images/details_open.png) no-repeat center center;
    

    cursor: pointer;

}

tr.shown td.details-control3 {

    background: transparent url(../images/details_close.png) no-repeat center center;

}

td.details-control4 {

    background: transparent url(../images/details_open.png) no-repeat center center;
    

    cursor: pointer;

}

tr.shown td.details-control4 {

    background: transparent url(../images/details_close.png) no-repeat center center;

}

td.details-control5 {

    background: transparent url(../images/details_open.png) no-repeat center center;
    

    cursor: pointer;

}

tr.shown td.details-control5 {

    background: transparent url(../images/details_close.png) no-repeat center center;

}

td.details-control6 {

    background: transparent url(../images/details_open.png) no-repeat center center;
    

    cursor: pointer;

}

tr.shown td.details-control6 {

    background: transparent url(../images/details_close.png) no-repeat center center;

}

td.details-control7 {

    background: transparent url(../images/details_open.png) no-repeat center center;
    

    cursor: pointer;

}

tr.shown td.details-control7 {

    background: transparent url(../images/details_close.png) no-repeat center center;

}

td.details-control8 {

    background: transparent url(../images/details_open.png) no-repeat center center;
    

    cursor: pointer;

}

tr.shown td.details-control8 {

    background: transparent url(../images/details_close.png) no-repeat center center;

}

td.details-control9 {

    background: transparent url(../images/details_open.png) no-repeat center center;
    

    cursor: pointer;

}

tr.shown td.details-control9 {

    background: transparent url(../images/details_close.png) no-repeat center center;

}

/* HOVER colour in datatable and selection
  #contdetail_id tbody tr:hover td {
        background: none repeat scroll 0 0 #FFCF8B;
        color: #000000;
    }
    
 #contdetail_id tbody tr.selected td {
        background: none repeat scroll 0 0 #FFCF8B;
        color: #000000;
    }    */

.DocButton {
   height: 30px;
   /*width: 60px;*/
   margin: 0;
   padding: 0;
   /*margin-bottom: 35px;*/
   border: 0;
   background: transparent url(../images/Documents.png) no-repeat top left;
   background-size: 30px;
   text-indent: 0em;
   line-height: 1;
   vertical-align: top;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }
.tick {
   height: 26px;
   width: 30px;
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent url(../images/OK.png) no-repeat top left;
   background-size: 26px;
   text-indent: -1000em;
   vertical-align: top;
   text-align: center;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }

.tick_lg {
   height: 32px;
   width: 36px;
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent url(../images/OK.png) no-repeat top left;
   background-size: 36px;
   text-indent: -1000em;
   vertical-align: top;
   text-align: center;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }



.titleFieldFormat {
  background-image: linear-gradient(#0B2732,#266883);
  width: 10%; 
  color: #ffffff;  /* input colour to white */
}

.tablesize {
  font-size: 10px;
}

.enableField {
  background-color: #ccffff;
  
 
}

.selectFormat{
    font-family: Open Sans;
    text-align: left;
    /* font-size: 14px; */
    border-color: #6B6B6B;
    /*background-color: #F2F2F2; */
    border-radius: 4px;
    /* padding: 5px 9px; */
    color: #555;
}

div.form-inline label.col-md-4 {
    justify-content: right !important; 
}

/* Tab formatting Start*/
.nav-tabs{
 
/*background-color:#C8D3DB;*/
background-color:#ffffff;
 
}
 
.nav-tabs > li > a{
 
border-radius: 5px;
 
}
 
/* .nav-tabs > li > a:hover{
 
background-color: #3D515F !important;
 
border-radius: 5px;
 
color:#fff;
 
border:1px solid black;
 
} */
 
/* BS4 On tabs this give the grey color (MSSReport) */
.nav-tabs .nav-link.active {
    background-color: #68889E !important;
    color:#fff;
    border:2px solid #3F515F;
}

/* BS4 On tabs this give the hover colour of dark grey  (MSSReport) */
.nav-tabs .nav-link:hover { 
    background-color: #3D515F;
    color: white;
    border:1px solid black;
}

/* .nav-tabs > li.active > a,
 
.nav-tabs > li.active > a:focus,
 
.nav-tabs > li.active > a:hover{
 
background-color: #68889E !important;
 
color:#fff;
 
border:2px solid #3F515F;
 
} */

.TabError{
    background-color: #FF0000 !important;
    color:#FFFFFF !important;
}

/* red*/
.FieldError_display{
    background-color: #FF0000 !important;   
    color:#FFFFFF !important;
}

/* pink */
.FieldError_edit{
    background-color: #ffc0cb !important;
    color:#000000 !important;
}
/* Tab formatting End*/

#mydiv {
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
    position:fixed;
}


.DTColour thead tr {
  background: linear-gradient(#0B2732,#266883);
}

.DTColour thead tr th {
  color: white;
  font-weight: normal !important;
  font-family: Open Sans !important;
  font-size: 12px;
  width: 5%;
}

#CustomsTable {table-layout:fixed; width:100%;}/*Setting the table width is important!*/
#CustomsTable thead tr {overflow:hidden;}/*Hide text outside the cell.*/
#CustomsTable thead tr th:nth-child(1) {width:5%;}/*Setting the width of column 1.*/
#CustomsTable thead tr th:nth-child(2) {width:5%;}/*Setting the width of column 2.*/
#CustomsTable thead tr th:nth-child(3) {width:5%;}/*Setting the width of column 3.*/
#CustomsTable thead tr th:nth-child(4) {width:5%;}/*Setting the width of column 4.*/
#CustomsTable thead tr th:nth-child(5) {width:5%;}/*Setting the width of column 5.*/
#CustomsTable thead tr th:nth-child(6) {width:15%;}/*Setting the width of column 6.*/
#CustomsTable thead tr th:nth-child(7) {width:5%;}/*Setting the width of column 7.*/
#CustomsTable thead tr th:nth-child(8) {width:5%;}/*Setting the width of column 8.*/
#CustomsTable thead tr th:nth-child(9) {width:5%;}/*Setting the width of column 9.*/
#CustomsTable thead tr th:nth-child(10) {width:5%;}/*Setting the width of column 10.*/
#CustomsTable thead tr th:nth-child(11) {width:5%;}/*Setting the width of column 11.*/
#CustomsTable thead tr th:nth-child(12) {width:5%;}/*Setting the width of column 12.*/
#CustomsTable thead tr th:nth-child(13) {width:5%;}/*Setting the width of column 13.*/

/* BS3 used for BS4. This pads out the datatable headers and rows nicely */
.table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td {
    padding: 5px;
}

#btnSearchRef {
   height: 30px;
   /*width: 60px;*/
   margin: 0;
   padding: 0;
   /*margin-bottom: 35px;*/
   border: 0;
   background: transparent url(../images/search.png) no-repeat top left;
   background-size: 30px;
   text-indent: 0em;
   line-height: 1;
   vertical-align: top;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }

.TextExport {
   height: 30px;
   /*width: 60px;*/
   margin: 0;
   padding: 0;
   /*margin-bottom: 35px;*/
   border: 0;
   background: transparent url(../images/text.png) no-repeat top left;
   background-size: 30px;
   text-indent: 0em;
   line-height: 1;
   vertical-align: top;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }

.selectedColour {
  background-color: #95cdfe !important;
}

.TableRowSettings {
    font-family: Open Sans;
}

.CommodityScroll {
border: none;
padding: 5px;
width: 650px;
height: 400px;
overflow: scroll;
}

.modal-dialog.modal-scroll {
    width: 750px;
    height:500px;
    margin: 30px auto;
}
 
 .parent_inline {
    white-space: nowrap;
    overflow-x: auto;
}

.children_inline {
   display: inline-block;
   
}

.invisible{
  display: none;
}
.visible {
  display: block;
}

.inline {
    display: inline-block;
    background-color: #55cc66;
}


#InvLinesTable {table-layout:fixed; width:100%;}/*Setting the table width is important!*/
#InvLinesTable thead tr {overflow:hidden;}/*Hide text outside the cell.*/
#InvLinesTable thead tr th:nth-child(1) {width:2%;}/*Line No*/
#InvLinesTable thead tr th:nth-child(2) {width:10%;}/*Product Ref.*/
#InvLinesTable thead tr th:nth-child(3) {width:21%;}/*Description.*/
#InvLinesTable thead tr th:nth-child(4) {width:8%;}/*Commodity*/
#InvLinesTable thead tr th:nth-child(5) {width:6%;}/*CPC*/
#InvLinesTable thead tr th:nth-child(6) {width:5%;}/* VAT*/
#InvLinesTable thead tr th:nth-child(7) {width:5%;}/* COO*/
#InvLinesTable thead tr th:nth-child(8) {width:5%;}/* TRID*/
#InvLinesTable thead tr th:nth-child(9) {width:7%;}/* Net Weight*/
#InvLinesTable thead tr th:nth-child(10) {width:7%;}/*Quantity*/
#InvLinesTable thead tr th:nth-child(11) {width:7%;}/*Unit Value*/
#InvLinesTable thead tr th:nth-child(12) {width:7%;}/*Line Value*/
#InvLinesTable thead tr th:nth-child(13) {width:7%;}/*Line Value*/
#InvLinesTable thead tr th:nth-child(14) {width:3%;}/*Edit*/

.RowSelect {
  background-color: #95cdfe !important;
}

.legendcircle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff; 
  line-height: 10px;
  text-align: center;
  background: #000;
  margin: 0 auto;
}

.legendpos {
    display: inline-block;
    
}

.chart_header {
  padding: 10px;
  text-align: center;
/*  background: #1abc9c; */
  color: black;
  font-size: 30px;
  font-weight: bold;
}

.chart_subheader {
  padding: 10px;
  /*text-align: center;*/
/*  background: #1abc9c; */
  color: black;
  font-size: 20px;
  font-weight: bold;
}

#EntryTable {table-layout:fixed; width:100%;}/*Setting the table width is important!*/
#EntryTable thead tr {overflow:hidden;}/*Hide text outside the cell.*/
#EntryTable thead tr th:nth-child(1) {width:10%;}/*Setting the width of column 1.*/
#EntryTable thead tr th:nth-child(2) {width:10%;}/*Setting the width of column 2.*/
#EntryTable thead tr th:nth-child(3) {width:30%;}/*Setting the width of column 3.*/
#EntryTable thead tr th:nth-child(4) {width:10%;}/*Setting the width of column 4.*/
#EntryTable thead tr th:nth-child(5) {width:6%;}/*Setting the width of column 5.*/
#EntryTable thead tr th:nth-child(6) {width:6%;}/*Setting the width of column 6.*/
#EntryTable thead tr th:nth-child(7) {width:6%;}/*Setting the width of column 7.*/
#EntryTable thead tr th:nth-child(8) {width:6%;}/*Setting the width of column 8.*/
#EntryTable thead tr th:nth-child(8) {width:6%;}/*Setting the width of column 9.*/



.imgsize{
    max-height:80px;
    max-width:80px;
    height:auto;
    width:auto;
}


/** Followng prevents input number field having up/down spinner. Just add class no-spinner to field ***/
/* Chrome, Safari, Edge, Opera */
input[type=number].no-spinner::-webkit-outer-spin-button,
input[type=number].no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number].no-spinner {
  -moz-appearance: textfield;
}

.ExcelButton {
   height: 30px;
   /*width: 60px;*/
   margin: 0;
   padding: 0;
   /*margin-bottom: 35px;*/
   border: 0;
   background: transparent url(../images/excel.png) no-repeat top left;
   background-size: 30px;
   text-indent: 0em;
   line-height: 1;
   vertical-align: top;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
}

.DelBtn {
   height: 30px;
   /*width: 60px;*/
   margin: 0;
   padding: 0;
   /*margin-bottom: 35px;*/
   border: 0;
   background: transparent url(../images/Delete.png) no-repeat top left;
   background-size: 30px;
   text-indent: 0em;
   line-height: 1;
   vertical-align: top;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
}

/* the following allows the screen to scroll in vertical direction   */
/* set the div element to have 100% height and width. System will then produce scroll id div expands abve screen size */

.scrollscreen {
    display: block;
    width: 100%;
    overflow: auto;
    height: 100%;
}

/* set scrollbar */
.scrollscreen::-webkit-scrollbar {
    width: 12px;
    background-color: #ffffff; /* or add it to the track */
}

/* Track */
.scrollscreen::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
.scrollscreen::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #b3b3b3; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}


#Progress_Modal{
    z-index: 999;
}

.autocomplete {
  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;
  max-height: 200px;
  display: flex;      /* used to make sure child stays within */
  flex-direction: column;  /* used to make sure child stays within */
}

.autocomplete-items-inner {
  overflow-y: auto;    /* keep this inside parent */
  
}
.autocomplete-items-inner::-webkit-scrollbar {
    width: 12px;
    background-color: #ffffff;
}

.autocomplete-items-inner::-webkit-scrollbar-thumb {
    background: #006bb3;
}

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

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

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

.scrolldiv {
  height:150px;
  overflow-y: scroll;
}

.ExcelBtn {
   height: 30px;
   /*width: 60px;*/
   margin: 0;
   padding: 0;
   /*margin-bottom: 35px;*/
   border: 0;
   background: transparent url(../images/excel.png) no-repeat top left;
   background-size: 30px;
   text-indent: 0em;
   line-height: 1;
   vertical-align: top;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* IE 5.x */
 }
 
 
 /* START MENU-CSS the following is used as a replacement for using @media to hide/show menu */ 
 
/* In order to work out if menu has gone on two lines it was important to use a copy and hide it
   Copy used as main one has log-off and the hamburger which makes it diffiuclt to calculate actual height of the menu
   Its important to use the values it has as it retains its size profile which is essential but is hidden away top/left outside visible screen
*/
#navcopy {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}


/* HM DONT USE THIS. IT STOPS THE MANU WITH SUB-MENUS FROM OPENING

  .navbar-collapse {
    max-height: 100vh;
    overflow-y: auto;
  }
 */   

 /* HM 
 .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    background-color: #68889E !important; 
    color: #fff; 
    border: 2px solid #3F515F;
}
    */

.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active .nav-link {
    color: #000000 !important;             /* Text color */
    background-color: #e7e7e7 !important;  /* Background color */
    border-radius: 0.25rem;                /* Optional: rounded corners */
  } 

/* following classes are used to simulate what @media was doing. Used in nav.php and header.php 
.navbar-header-float {
    float: none;
}

.navbar-toggle-display {
    display: block;
}
.navbar-collapse-border {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.navbar-collapse.collapse.hide {
    display: none!important;
}

.navbar-nav-float {
    float: none!important;
    margin: 7.5px -15px;

}
.navbar-nav.navbar-nav-float>li {
    float: none;
}
.navbar-nav.navbar-nav-float>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
.navbar-text-float {
    float: none;
    margin: 15px 0;
}
.navbar-collapse.collapse.in { 
    display: block!important;
}
.collapsing-overflow {
    overflow: hidden!important;
}
*/
/* END MENU-CSS *************************/

/* the following two are for menu scrolling when hambuger clicked */
 .scrollable-menux{
    height: auto;
    max-height: 400px;
    overflow-x: hidden;
    overflow-y: scroll;
    margin-bottom: 20px !important;
    
    
}

.scrollable-menu::-webkit-scrollbar {
    width: 12px;
    background-color: #ffffff;
}

.scrollable-menu::-webkit-scrollbar-thumb {
    background: #006bb3;
}

.text-nowrap {
    white-space: nowrap !important;
}

.dtInsideParent {
  table-layout: fixed;
  width: 100% !important;
}
.dtInsideParent td{
  width: auto !important;
  text-overflow: ellipsis;
  overflow: hidden;
}
.dtInsideParent th{
  width: auto !important;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/*following two used on displaying speedo with 2 needles*/
.canvasParent {
  position: relative;
/*  flex: 1 0 auto;
  margin: 10px 15px;
  padding: 10px;*/
}

.canvasParent .canvasChild {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  opacity:0.5;
}


.simplepointer {
    cursor: pointer;
}

.overlay {
    position: absolute; 
    bottom: 0; 
    background: rgba(0, 0, 0, 0); /* Black see-through */
    color: #ed0909; 
    width: 100%;
    transition: .5s ease;
    opacity:1;
    font-size: 12px;
    padding: 0px;
    text-align: left;
  }

  
  /* .googlemap-responsive {
    padding-bottom: 30%;
     
 } */
  
  #floating-panel {
    position: absolute;
    top: 10px;
    left: 25%;
    z-index: 500;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: "Roboto", "sans-serif";
    line-height: 30px;
    padding-left: 10px;
  }
  
  #floating-panel {
    background-color: #ee0c0c;
    border: 1px solid #999;
    left: 25%;
    padding: 5px;
    position: absolute;
    top: 10px;
    z-index: 5;
  }

  .boldme {
    
        font-weight: bold;
      
  }


  .emptytableFormat{
    background-color:red !important;
    color: white !important;
    font-size: 20px;
  }



  @media (min-width: 1200px) {
    .modal-xlg {
       width: 60%; 
    }
 }

 @media (max-width: 1200px) {
    .modal-xlg {
       width: 80%; 
    }
 }

 .modal-80 {
  max-width: 80vw; /* or 1200px, or whatever size you want */
}

.modalTOP{
    z-index: 999999;
}
 
/* this is equivalent of panel-heading inside panel-success */
.card-header.bg-success, .card.bg-success {
    color: #3c763d !important;
    background-color: #dff0d8 !important;
    border-color: #d6e9c6 !important;
}

/* this is equivalent of panel-heading inside panel-info. Changing default colour of bg-info to bs3 colours */
.card-header.bg-info, .card.bg-info {
    background-color: #bce8f1 !important;
    
}

/* this is equivalent of panel-heading inside panel-danger. Changing default colour of bg-danger if it is with card-header to bs3 colours */
.card-header.bg-danger {
    color: #a94442 !important;
    background-color: #f2dede !important;
    border-color: #ebccd1 !important;
}

.card-header{
    padding-top: 0.5rem !important;
    padding-right: 1rem  !important;
    padding-bottom: 0.5rem  !important;
    padding-left: 1rem  !important;
    margin-bottom: 0  !important;
}


.scrollscreenBS4 {
      max-height: 100vh;
      overflow-y: scroll;
  overflow-x: scroll;
      border: 1px solid #dee2e6;
      /* padding: 1rem; */
      background: #f8f9fa;
    }

.scrollscreenBS4::-webkit-scrollbar {
  width: 8px;
}

.scrollscreenBS4::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 4px;
}    

/* this is from bs3. It stripes odd colour to whitish */
/* .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #ffffff !important;
}
.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #ffffff !important;
} */


/* BS4 the following 2 are used because datatable.bootstrap4.min.css used a box shadow
and hid the + - (td.details-control) when row was selected. 
The default for all datatables is with table-striped. table-nostripe is used in ReckonerReview 
*/
table.dataTable.table-nostripe tbody tr.selected td.details-control,
table.dataTable.table-nostripe tbody tr.selected td.details-control2,
table.dataTable.table-striped tbody tr.selected td.details-control,
table.dataTable.table-striped tbody tr.selected td.details-control2 {
    box-shadow: none !important;
    background-color: rgb(149, 205, 254) !important;
    background-image: url('../images/details_open.png') !important;
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: 16px 16px; */
}

table.dataTable.table-nostripe tbody tr.selected.shown td.details-control,
table.dataTable.table-nostripe tbody tr.selected.shown td.details-control2,
table.dataTable.table-striped tbody tr.selected.shown td.details-control,
table.dataTable.table-striped tbody tr.selected.shown td.details-control2 {
    box-shadow: none !important;
    background-color: rgb(149, 205, 254) !important;
    background-image: url('../images/details_close.png') !important;
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: 16px 16px; */
}


table.dataTable.no-footer {
    border-bottom: 1px solid #000000 !important;
}

/* table td, table th {
        padding: 0 !important;
        vertical-align: top; * or middle, depending on desired look *
    } 
    */

.table td, .table th {
    padding: 8px 10px;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}    

/* following required to make white row white. Otherwise its off white */
table.dataTable.table-striped > tbody > tr.odd > * {
    /* background-color: white !important; */
    box-shadow: none !important;
}

/* for bs4 stole bs3 dialog. BUT it needs its own tile and not modal-title as setting modal-title on other modals will zap BootstrapDialog title so creating
** its own so it doesnt get zapped
*/
.BootstrapDialog-title {
    margin-bottom: 0;
    line-height: 1.5;
}

.badge.badge-custom-md {
  font-size: 1.1em;
}



/* Optional: Set a max-width or inline-block */
.flatpickr-calendar {
  max-width: 300px;
  width: auto !important;
}



.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7n + 1),
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n + 1) {
    color: red;
}
 
/* 土曜日：青 */
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7),
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n) {
    color: blue;
}

.flatpickr-current-month {
  display: flex;
  justify-content: center;
}

.cur-year {
  order : 1;
}

.cur-month:before  {
   content: '年　';
}

.cur-month {
  order: 2;
}

.flatpickr-current-month span.cur-month {
  font-weight : 300;
  padding-top : 4px;
}


table.tableborder tbody tr {
  border-bottom: 10px solid #fff;
}

/* following required for striping the datatable. The stripping lost due to bootstrap 5 */
.normalColourOdd {
    --bs-table-bg: #ffffff !important;
    background-color: var(--bs-table-bg) !important;
    
}
.normalColourEven {
    --bs-table-bg: #e6ffe6 !important;
    background-color: var(--bs-table-bg) !important;
    
}

/* overwite the datatable bg colour --bs-table-bg as it wins otherwise */
.unclassifiedColour {
--bs-table-bg: #ff8a8a !important;
background-color: var(--bs-table-bg) !important;
color: #000000 !important;
}

.rejectedColour {
    --bs-table-bg: #ff0000 !important;
    background-color: var(--bs-table-bg) !important;
    
}

/* the colours of the text in the rows is controlled by td. Need to override those when rejected */
table.table.dataTable tbody tr.rejectedColour,
table.table.dataTable tbody tr.rejectedColour > td {
    color: #ffffff !important;
}

/* in some cases the myfreeway gradient colour is being overridden by datatable colours. So in the thead just add the following class */
.mfgradientcolour {
    --bs-table-bg: linear-gradient(#0B2732,#266883) !important;
    background: var(--bs-table-bg) !important;
    
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: #eee;
    opacity: 1;
}

table.dataTable td {
  padding: 4px 10px 4px 10px !important; /* Adjust the padding value as needed */
}


.modal-outline {
    border: 5px solid black; /* thickness + color */
    border-radius: 0.5rem;   /* keep rounded corners */
  }


.modal-thick-border{
    border: 3px solid black;
}


.custom-select {
  background-color: #093549;
  border: 2px solid #b5b7b8;
  color: #f6f8fb;
  /* border-radius: 8px; */
  height: 22px;
  font-size: 10px;
  padding: 2px 1.5rem 2px 2px; /* extra right padding for arrow */
  width: 100%;
  font-family: Open Sans;
  
  /* remove native OS arrows */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* gradient OR solid background + arrow layered */
  background-image: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23f6f8fb' d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 1 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 0.8rem auto;
}

.custom-select:focus {
  border-color: #b5b7b8;
  background-color: #093549;
  color: #f6f8fb;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.custom-select:hover {
  border-color: #b5b7b8;
  background-color: #093549;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.custom-select option {
  background-color: #093549;
  color: #f6f8fb;
}







/* .custom-select {
  background-color: #0B2732;
  
  border: 2px solid #b5b7b8;
  color: #f6f8fb;
  border-radius: 8px;
  height: 22px;
  font-size: 10px;
  padding: 2px;
  width: 100%
  
}

.custom-select:focus {
  border-color: #b5b7b8;
  background-color: #0B2732;
  color: #f6f8fb;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.custom-select:hover {
  border-color: #b5b7b8;
  background-color: #0B2732;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
} */


.circle-btn {
  background-color: #007BFF;        /* Blue button background */
  border: none;
  border-radius: 50%;               /* Makes it circular */
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.circle-btn:hover {
  background-color: #0056b3;        /* Darker blue on hover */
  transform: scale(1.05);
}

.circle-btn i {
  color: #FFD700;                   /* Yellow arrow */
  font-size: 22px;
  transition: transform 0.3s ease;
}

.circle-btn:hover i {
  transform: translateX(3px);       /* Move arrow on hover */
}

.icon-btn {
  color: #064780;          /* normal color (gray) */
  transition: color 0.2s;  /* smooth fade */
}
.icon-btn:hover {
  color: #0d6efd;          /* Bootstrap primary blue */
}


/* following can be used to put cross across an icon. See TranmitBookings.php */
.icon-cross {
    position: relative;
    display: inline-block;
}

.icon-cross::before,
.icon-cross::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 4px;          /* thickness of cross line */
    background: red;      /* color of cross */
    transform-origin: center;
}

.icon-cross::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.icon-cross::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}