/*.................................................................
 * COPYRIGHT OBS LOGISTICS LIMITED 2015
 * 140 BUCKINGHAM PALACE ROAD
 *.................................................................
 * System           : Calidus TMS
 *.................................................................
 * Module           : Styling TMS Pages
 *.................................................................
 * Program          : Site.css
 *.................................................................
 * Author(s)        : Neil Appadu (NAR)  
 *                    
 * Date             : 25-11-15
 *.................................................................
 * Called From      : All Pages
 *.................................................................
 * Functionality    : CSS styling
 *.................................................................
 * NOTES            : Increment Version Number where ever the file 
 *                    referenced to avoid Caching issues
 *   
 *.................................................................
 *                  : History of Amendments :
 *
 * Date       Name        Brief description                
 * ---------  ----        ----------------------------------------
 * 25-11-2015 NAR         v1.0 - Created
 * 07-09-2017 SR          Set the alphanumeric column (class name alpha-col) to be left align
 * 18-09-2017 AM          Removed height in consignment_table class.
 * 18-09-2017 SR          Removed textarea as it was forcing driver instruction textbox smaller 
 * 04-10-2017 SR          Added css style for consignment_table_header_row class 
 * 10-10-2017 SR          Added style for class customer_gateway_gv_row to add multiline in gridview and added font size. 
 * 15-03-2018 RAJ         Changed rotating of Load icon to be visually more appealing
 * 30-05-2018 RAJ         Added User Settings css classes
 * 12/08/2019 OM          Added file note to increment version number on references.
 * 14/05/2020 JJB         Added styles for code description lookup inputs on separate lines
 * 29/04/2020 JJB         Added styles for inputs with non-blocking issues / warnings
 *20 MAY 2020 RAJ         Added fw-200px
 *31 AUG 2020 GHV         81513 - Added table-layout property to table.radioButton_LatLongParams
 *.................................................................*/

body {
  position: relative;
  overflow-x: hidden;
}

td {
    padding: 0;
    vertical-align: top;
}

.fw-200px {
    width: 200px;
}
.checkbox-col {
    text-align: center;
}
.numeric-col {
    text-align: right;
}

.alpha-col {
    text-align:left;
}

.rowselected {
    background-color: #bdd8d8 !important;
}

.loginbutton {
    background: url('../Images/btn-login.png') no-repeat 5px 5px #484B4F;
    width: 80px;
    cursor: pointer;
    border-radius: 50px;
    padding: 10px 20px 10px 0;
    color: White;
    font-size: 14px;
    text-align: left;
    text-indent: 40px;
    display: block;
    margin: 0 auto;
}

.customer_gateway_gv_row{
    font: 70% arial;
    white-space:normal;
}


#btnFooterFirst{
display: none;
}


.hidden {
    display:none;
}


/*.input-group-addon
{
    background-color: transparent;
}*/

body, html {
  height: 100%;
  background-color:darkgrey;
  overflow: hidden;
}



/*-------------------------------*/
/*          Dark Overlay         */
/*-------------------------------*/

.overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

/* SOME DEMO STYLES - NOT REQUIRED */



body h1, body h2, body h3, body h4 { color: rgba(255, 255, 255, 0.9); }

body p, body blockquote { color: rgba(255, 255, 255, 0.7); }

body a {
  /*color: rgba(255, 255, 255, 0.8);*/
  color: rgba(25, 12, 12, 0.8);
  text-decoration: underline;
}

body a:hover { color: #999999; }
/* Move down content because we have a fixed navbar that is 50px tall */
html, body
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}


a:link {
    text-decoration: none;
}


body {
    /*padding-top: 50px;
    padding-bottom: 20px;*/
    height: 100%;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 5px;
    padding-right: 5px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select
 {
    max-width: 280px;
}


/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}

.theme_change_select{
	-webkit-appearance: none;  /*Removes default chrome and safari style*/
	-moz-appearance: none; /* Removes Default Firefox style*/

	width: 250px; /*Width of select dropdown to give space for arrow image*/
	text-indent: 0.01px; /* Removes default arrow from firefox*/
	text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
	padding: 5px;
    border:0 !important;
    border-radius: 5px;
	box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
}

.hideoption {
    display:none;
    visibility:hidden;
    height:0px;
    font-size:0;
    background-color: white;
}

.loading_screen {
    width: 100%;
    height: 100%;

    position: absolute;
    overflow:hidden;

    z-index: 1000 !important;
}

.center_load_text {
    position: absolute;
    text-align: center;

    top: 50%;
    left: 50%;

    -webkit-transform:  translate(-50%, -50%);
    -moz-transform:  translate(-50%, -50%); 
    -ms-transform:  translate(-50%, -50%);
    -o-transform:  translate(-50%, -50%); 

    transform: translate(-50%, -50%);

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 27px;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotate_load_icon {
    -webkit-animation: rotating 1s steps(8) infinite normal;
    -moz-animation: rotating 1s steps(8) infinite normal;
    -ms-animation: rotating 1s steps(8) infinite normal;
    -o-animation: rotating 1s steps(8) infinite normal;
    animation: rotating 1s steps(8) infinite normal;
}

.form_hide {
    opacity: 0;
    visibility: hidden;
}

.accessible_hide {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

/* Css Classes for icons and icons that appear on buttons */
.icon_container
{
    vertical-align: top;
    border-collapse: collapse;
    border-spacing: 0;
    background:#BBBBBB;
    text-decoration: none;
    padding: 0px;
    margin: 0px auto;
    border: 1px solid #1a1a1a;
}

.icon_container th, td { vertical-align: top; }

.icon_button
{
    cursor: pointer;

    text-decoration: none;
    padding:4px;
    display:inline-block;
    margin-right: -5px;
    border-right: 0px solid #1a1a1a;
    border-left: 0px solid #1a1a1a;
    background-color:transparent;
    text-shadow:0px 1px 0px #1a1a1a;
}

.icon_button:active, .icon_button:hover 
{
    background:#4c4c4c;
}

.icon_text
{
    text-align: center;
    vertical-align: top;

    font-size: 90%;
}


.mainContent {
    /*height: 100%;*/
    /*height: calc(100% - 50px);*/
    overflow: auto;
    position: fixed;
    left:0px;
    font-size: 1em;
}

@media (max-width: 300px) {
    .mainContent {
        font-size: 70%;
    }
}

@media (min-width: 500px) {
    .mainContent {
        font-size: 80%;
    }
}

@media (min-width: 700px) {
    .mainContent {
        font-size: 90%;
    }
}

@media (min-width: 900px) {
    .mainContent {
        font-size: 100%;
    }
}

@media (min-width: 1200px) {
    .mainContent {
        font-size: 100%;
    }
}

.map_canvas {
    position: absolute;
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0;
}

.search {
  position: relative;
  color: #aaa;
  font-size: 16px;
}

.search input {
  width: 250px;
  height: 32px;

  background: #fcfcfc;
  border: 1px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}

.search input { text-indent: 32px;}
.search .fa-search { 
  position: absolute;
  top: 10px;
  left: 10px;
}

ul,
ol {
  padding-left: 25px  
}


/***************** Checkboxes ************************/
/* TODO Define something for checkbox_normal */

/* 11-11-2015 RJames       v5.0 - BI361 - Start */
.checkbox_standard input[type=checkbox]
{
    margin: 0px;
    
}

.checkbox_standard, .checkbox_normal
{
    vertical-align: middle;
}

.checkbox_standard_error input[type=checkbox]
{
    margin: 0px;
}

.checkbox_standard_error, .checkbox_error
{
       background-color: red;
       vertical-align: middle;
}

.checkbox_standard_readonly input[type=checkbox]
{
    margin: 0px;
}

.checkbox_standard_readonly, .checkbox_readonly
{
       background-color: silver;
       vertical-align: middle;
}

.checkbox_colored_squared {
    width: 28px;
    height: 28px;
    background: #fcfff4;
    padding: 0px;

    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    position: relative;
}

.checkbox_colored_squared  input[type=checkbox] {
    visibility: hidden;
}

.checkbox_colored_squared label
{
    cursor: pointer;
    position: absolute;
    width: 20px;
   height: 20px;
    left: 4px;
    top: 4px;

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

    background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
    background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
    background: -o-linear-gradient(top, #222 0%, #45484d 100%);
    background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
    background: linear-gradient(top, #222 0%, #45484d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.checkbox_colored_squared label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #00bf00;

    background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: linear-gradient(top, #00bf00 0%, #009400 100%);

    top: 2px;
    left: 2px;

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}

.checkbox_colored_squared label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
}

.checkbox_colored_squared input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

.checkbox_colored_squared_readonly  input[type=checkbox] {
    visibility: hidden;
}

.checkbox_colored_squared_readonly {
    width: 28px;
    height: 28px;
    background: #fcfff4;
    padding: 0px;
    
    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
    
    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    position: relative;
}

.checkbox_colored_squared_readonly label
{
    position: absolute;
    width: 20px;
    height: 20px;
    left: 4px;
    top: 4px;

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.checkbox_colored_squared_readonly label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #00bf00;

    top: 2px;
    left: 2px;

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}

.checkbox_colored_squared_readonly input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

.checkbox_colored_squared_error input[type=checkbox] {
    visibility: hidden;
}

.checkbox_colored_squared_error {
   width: 28px;
    height: 28px;
    background: #fcfff4;
    padding: 0px;
    
    background: -webkit-linear-gradient(top, #F36060 0%, #C13636 40%, #B32B2B 100%);
    background: -moz-linear-gradient(top, #F36060 0%, #C13636 40%, #B32B2B 100%);
    background: -o-linear-gradient(top, #F36060 0%, #C13636 40%, #B32B2B 100%);
    background: -ms-linear-gradient(top, #F36060 0%, #C13636 40%, #B32B2B 100%);
    background: linear-gradient(top, #F36060 0%, #C13636 40%, #B32B2B 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F36060', endColorstr='#B32B2B',GradientType=0 );
    
    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    position: relative;
}

.checkbox_colored_squared_error label
{
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
    left: 4px;
    top: 4px;

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

    background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
    background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
    background: -o-linear-gradient(top, #222 0%, #45484d 100%);
    background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
    background: linear-gradient(top, #222 0%, #45484d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.checkbox_colored_squared_error label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #00bf00;

    background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: linear-gradient(top, #00bf00 0%, #009400 100%);

    top: 2px;
    left: 2px;

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}

.checkbox_colored_squared_error label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
}

.checkbox_colored_squared_error input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}


.checkbox_animated input[type=checkbox] {
    visibility: hidden;  
    position: relative;
    padding: 0px;
}

.checkbox_animated {   
    position: relative;
    padding: 0px;
}

.checkbox_animated label {
    cursor: pointer;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    left: 0;
    border-radius: 4px;

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    background: #fcfff4;

    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}

.checkbox_animated label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 6px;
    height: 3px;
    background: transparent;
    top: 3.5px;
    left: 3px;
    border: 3px solid #333;
    border-top: none;
    border-right: none;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.checkbox_animated label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.5;
}

.checkbox_animated input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

.checkbox_animated_readonly input[type=checkbox] {
    visibility: hidden;
    width: 15px;    
    position: relative;
    padding: 0px;
}

.checkbox_animated_readonly {
    width: 15px;    
    position: relative;
    padding: 0px;
}

.checkbox_animated_readonly label {
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    left: 0;
    border-radius: 4px;
    

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);

    background: -webkit-linear-gradient(top, #C5C5C5 0%, #828282 100%);
    background: -moz-linear-gradient(top, #C5C5C5 0%, #828282 100%);
    background: -o-linear-gradient(top, #C5C5C5 0%, #828282 100%);
    background: -ms-linear-gradient(top, #C5C5C5 0%, #828282 100%);
    background: linear-gradient(top, #C5C5C5 0%, #828282 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C5C5C5', endColorstr='#828282',GradientType=0 );
}

.checkbox_animated_readonly label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 6px;
    height: 3px;
    background: transparent;
    top: 3.5px;
    left: 3px;
    border: 3px solid #fcfff4;
    border-top: none;
    border-right: none;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.checkbox_animated_readonly input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}


.checkbox_animated_error input[type=checkbox] {
    visibility: hidden;
    width: 15px;    
    position: relative;
    padding: 0px;
}

.checkbox_animated_error {
    width: 15px;    
    position: relative;
    padding: 0px;
}

.checkbox_animated_error label {
    cursor: pointer;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    left: 0;
    border-radius: 4px;

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    background: #fcfff4;

    background: -webkit-linear-gradient(top, #FBA5A5 0%, #D45B5B 40%, #9A0909 100%);
    background: -moz-linear-gradient(top, #FBA5A5 0%, #D45B5B 40%, #9A0909 100%);
    background: -o-linear-gradient(top, #FBA5A5 0%, #D45B5B 40%, #9A0909 100%);
    background: -ms-linear-gradient(top, #FBA5A5 0%, #D45B5B 40%, #9A0909 100%);
    background: linear-gradient(top, #FBA5A5 0%, #D45B5B 40%, #9A0909 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBA5A5', endColorstr='#9A0909',GradientType=0 );
}



.checkbox_animated_error label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 6px;
    height: 3px;
    background: transparent;
    top: 3.5px;
    left: 3px;
    border: 3px solid #333;
    border-top: none;
    border-right: none;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.checkbox_animated_error label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.5;
}

.checkbox_animated_error input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}
/* 11-11-2015 RJames       v5.0 - BI361 - End */

display_none{
    display: none;
}

#collectFrom{
    border: 1px solid #808080;
    border-color:none;
}
td {border: 0;}

#deliverTo{
    border: 1px solid #808080;}
td {border: 0;}

#collectFrom , #deliverTo, #contactLoc, #instruction{
    width: 40%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

#collectFrom, #deliverTo, #contactLoc, #instruction {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

.titleCF, .titleDT, .titleTransport { vertical-align: bottom; font-weight: bold; font-size: large; }

.datatable-floating-content
{
    /*top: 67px;*/
    left: 0;
    right: 0;
    position: absolute;
}

.datatable-floating-header
{
    left: 0;
    right: 0;
    position: absolute;
    z-index: 990;
}


/*Header Sticky*/
.stick{
    position:fixed;top:0;opacity:0.7;}

/*set color transport unit tab <hr>*/
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 2px solid;
    /*margin: 1em 0;*/
    margin: 5px 0px;
    padding: 0; 
    border-color:black;
}

.headerOOL {
    vertical-align:bottom;
    text-align:left;
}

.transport_unit_action_col, .order_line_item_action_col, .order_line_product_action_col {
    min-width: 180px;
    white-space: nowrap;
   /* width: auto;*/
    padding-left:3px !important;
    padding-right:1px !important;
}

.transport_unit_action_col button, .order_line_item_action_col button, .order_line_product_action_col button {
    margin-right: 0px !important;
    padding: 0px;
}

.order_line_item_action_col, .order_line_product_action_col {
    min-width: 150px;
}

.hide_column {
    display: none;
    position: absolute;
    top: 1px;
    left: 1px;
    /*visibility: hidden;*/
}


/*Styles for Lat/Long parameters in Country Maintenance screen*/
table.radioButton_LatLongParams { table-layout: fixed; width: 100%; }
table.radioButton_LatLongParams input { margin-right: 5px; }
table.radioButton_LatLongParams td { padding-right: 10px; } 
table.radioButton_LatLongParams label { font-weight: normal !important; }

.fixed_dialog { position: fixed; }

/*-------------------------------*/
/*           TRIPS               */
/*-------------------------------*/

.div_trip_control {
    width: 100%; 
    height: auto; 
    margin: 0px; 
    display: -webkit-inline-box; 
    background: transparent;
}

.div_trip_section {
    width: 200px; 
    border-width: 0px 1px 1px 0px; 
    background: transparent;
}

.div_trip_header {
    border-width: 0px 0px 1px 0px; 
    text-align: center; 
    padding: 5px;
}

.div_trip_resource,
.div_trip_resource_blank {
    overflow-x: hidden; 
    margin: 0px 4px 4px 4px; 
    padding: 5px; 
    text-align: center;
}

.div_trip_resource_blank {
    border: 1px dashed rgb(175,175,175); 
    background: transparent; 
    color: rgb(205,205,205); 
    font-weight: 700; 
}

.date-range-selected > .ui-state-active,
.date-range-selected > .ui-state-default {
   background: none;
   background-color: #328686
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.trip_right_click_menu {
    cursor: default;
    background: white; 
    border: 1px solid darkgrey;
    box-shadow: 4px 4px 5px -3px #4b4b4b;

    width: 330px;
    position: absolute; 
    z-index: 81;
}

.trip_right_click_menu > table {
    width: 100%;
}

.trip_right_click_menu > table > tbody > tr> td {
    padding: 5px 30px;
}

.selected_expand,
.selected_menu_option
{
    background: #e8e8e8;
}

.rcm_available {
    color: black;
}

.rcm_unavailable {
    color: grey;
}


/****************************************************************/
/*                   End Customer Gateway                       */
/****************************************************************/
.consignment_dialog, 
.consignment_dialog_find, 
.consignment_dialog_details {
    min-width: 320px;
    width: 80%;
    max-width: 900px;
    min-height: 320px;
    height: 50%;
    max-height: 800px;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: hidden;
    background: white;
    color: black;
    border: 1px solid black;
    border-radius: 10px;
}

.consignment_dialog_find {
    height: 50%;
}
.consignment_dialog_details {
    height: 90%;
}

.consignment_table {
    width: 100%;
    /*height: 100%;*/
    font: bold 20px arial;
}

.customer_gateway_gv {
    border-width: 0px 0px 1px 0px; 
    font: bold 24px arial;
}

.consignment_table_header_row {   
    padding: 0px 0px 0px 8px;
    font-weight: normal;
    font-size: small;
}

.consignment_table_header_cell {
    padding: 20px;
    text-align: center;
}

.consignment_table_body_cell_left {
    padding: 0px 0px 0px 20px;
    vertical-align: middle;

}

.consignment_table_body_cell_right {
    padding: 0px 20px 0px 0px;
    vertical-align: middle;
}

.txt_consignment_reference, 
.txt_consignment_postcode {
    min-width: 116px;
    width: 80%;
    max-width: 100%;
    height: 50px;
    background: whitesmoke;
}

.btn_find_consignment {
    min-width: 200px;
    width: 75%;
    max-width: 75%;
    height: 40px;
    font: bold 20px arial;
}


.consignment_address_details_table {
    width: 100%;
    height: 100%;
    font: 16px arial;
}

.consignment_address_details_table label {
    float:right;
    text-align: right;
    font-weight: 100;
    margin: 0px;
}

.multi_select_details {
    width: 200px;
    height: auto;
    padding: 5px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    background-color: white;
    border: 1px solid black;
}

/************************************************************************/
/*                              TRIP SCREEN                             */
/************************************************************************/
.new_load_container, .no_select {
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.new_load_container {
    border: 1px dashed rgb(175,175,175);
    padding: 8px;
    border-radius: 20px;
    color: rgb(205,205,205);
    font-size: xx-large;
    font-weight: 700;
    text-align: center;
}

.record_indicator {
    width: 3px;
    height: 145px;
    background-color: blue;
    position: absolute;
    left: 3px;
}

.load_container_hover, .trip_container_hover {
    background-color: rgba(195,215,255,0.5);
    color: rgb(145,195,235);
}

.load_record {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.panel_loads {
    /*padding: 15px;*/
    padding-top: 0px;
}

.load_header,
.trip_load_header {
    padding: 4px;
    font-size: large;
    text-align: center;
    vertical-align: middle;
}

.load_close_button,
.load_settings_button,
.shipment_close_button,
.load_map_button,
.trip_map_button,
.trip_summary_button,
.shipment_minimize_button {
    width: 30px;
    height: 20px;
    line-height: 0px;
    text-align: center;
    float: right;
}

.shipment_close_button,
.shipment_minimize_button {
    margin: 0px 3px;
}

.marker_hide {
    display: none;
}

.load_side_panel {
    text-align: center;
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
    -moz-transform: translate(-50%, -50%) rotate(-90deg);
    -ms-transform: translate(-50%, -50%) rotate(-90deg);
    -o-transform: translate(-50%, -50%) rotate(-90deg);
    transform: translate(-50%, -50%) rotate(-90deg);
}

.button_reorient {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.div_shipment_control {
    width: 275px;
    min-width: 275px;
    margin: 2px;
    margin-bottom: 3px;
    text-align: center;
}

.div_stop_control,
.div_start_stop_control,
.div_end_stop_control {
    padding: 2px 0px;
    margin: 2px 5px;
    width: 168px;
    min-width: 158px;
    text-align: center;
    border: 1px solid black;
    color: black;
    background-color: whitesmoke;
    font-weight: normal;
}

.top_collapse,
.left_collapse,
.right_collapse,
.middle_collapse {
    cursor: pointer;
}

/* This is the style for the ui-datepicker trigger icon*/
.ui-datepicker-trigger {
    padding-left:5px;
}


/* User Settings */
a.info-popup-link {
    color: #428bca;
    text-decoration: none;
}

a.info-popup-link:hover {
    color: #2a6496;
    text-decoration: underline;
}

body div.settings-info-popup p {
    color: #333333;
}

.ui-widget-header button.close {
    color: black;
}

/* Textbox Casing */
.input-uppercase {
    text-transform: uppercase;
}

.input-lowercase {
    text-transform: lowercase;
}

::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none;
}
/* Textbox Casing End */

input[data-description-mode='Block'] ~ span.reference_data {
    position: initial !important;
    display: block;
    width: 280px;
    height: 34px;
    border: solid 1px #bfbfbf;
    border-top: none;
    background: #dfdfdf;
    opacity: 0.75;
    cursor: not-allowed;
}

div.input-issues-container {
    border: solid 1px orange;
    border-radius: 3px;
}

    div.input-issues-container .input-group-addon {
        color: orange;
    }


div.cssFixLookup {
    padding-right: 40px;
}


/* Status Related Coloring */

.complete {
    background-color: #C6EFCE !important;
    color: Black !important;
}

.inprogress {
    background-color: #FFEB9C !important;
}

.unscheduled {
    background-color: #FFC7CE !important;
    color: Black !important;
}

.unavailable {
    background-color: #d3d3d3 !important;
    color: Black !important;
}

.csHover {
    background-color: #9bbaba !important;
    color: Black !important;
}