@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');

body {
	/*
	 * TMS-2681 override Bootstrap 4.6.1 styling causing white background on Google Map markers
	 */
	background-color: transparent !important;
}

/*
** By Gustavo FM-74 Style to be used at the left panel Nov 4 2016
*/
.left-panel-style {

	position: absolute !important; 
	width: 250px ; 
	background-color: #f1f1f1 !important; 
	left: -250px ; 
	border-right: 4px double #333 !important; 
	z-index: 2 !important;
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    
}


/* Icon Spin */

.standard-color-error-title {
	
	color: #333 !important;
}

.color-error-title {
	
	color: #ff0000 !important;
}

.color-warning-title {
	
	color: #ffbf00 !important;
}

.color-information-title {
	
	color: #00a0c6 !important;
}

[class^="gus-"] {

	width: 96%;
    padding: 5px 0px 5px 7px;
    margin: 0px;
    float: left;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    text-align: left;
    line-height: 1.4;

    border: none;
    cursor: pointer;
    background-color: #fff;
    transition: all .3s;
	
}

.gus-icon-spin {
	
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;

  
}

.gus-icon-spin:before {
	
  content: "\f021";
  position: absolute;
  /*right: 1em;*/
  font-family: FontAwesome;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  
}

.gus-icon-spin:hover {

	color: #fff;
	background-color: #ff0000;

}

.gus-icon-spin:hover:before, .gus-icon-spin:focus:before, .gus-icon-spin:active:before {

		color: #fff;
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  
}




#this-gear-sping:hover, #this-gear-sping:focus, #this-gear-sping:active {
/*	
	 fa-spin; 
	fa-fw;
*/	
}


.version-information-window {
	
	position: absolute;
    z-index: 99999;
    top: 40px;
    right: 0px;
    width: 250px;
    border: 1px solid #ccc;
    background-color: #fff;
    /*overflow: hidden;*/
    -webkit-border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    
    -webkit-border-top-right-radius: 0px;
    -moz-border-top-right-radius: 0px;
    border-top-right-radius: 0px;
    
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    
    -webkit-border-bottom-right-radius: 0px;
    -moz-border-bottom-right-radius: 0px;
    border-bottom-right-radius: 0px;
 
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    -webkit-animation: slide 0.1s ease-in-out both 0s 1;
    animation: slide 0.1s ease-in-out both 0s 1;
	
}

.version-information-window-icon-container {
	
	background: #ebebeb;
    background: -webkit-linear-gradient(#f1f1f1,#c0c0c0);
    background: -moz-linear-gradient(#f1f1f1,#c0c0c0);
    background: linear-gradient(#f1f1f1,#c0c0c0);
    
    -webkit-border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    
    -webkit-border-top-right-radius: 0px;
    -moz-border-top-right-radius: 0px;
    border-top-right-radius: 0px;
    
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-bottom-left-radius: 0px;
    border-bottom-left-radius: 0px;
    
    -webkit-border-bottom-right-radius: 0px;
    -moz-border-bottom-right-radius: 0px;
    border-bottom-right-radius: 0px;
	
}

.version-information-window-close-icon {
    width: 10px;
    height: 15px;
    background-image: url(../images/resourece-next-icon.png);
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: center;
    background-color: transparent;
    margin-top: 8px;
    margin-right: 0px;
    opacity: 1;
    border: none;
    cursor: pointer;
}

.version-information-window-open-icon {
	
    width: 10px;
    height: 15px;
    background-image: url(../images/resourece-previous-icon.png);
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: center;
    background-color: transparent;
    margin-top: 8px;
    margin-right: 0px;
    opacity: 1;
    border: none;
    cursor: pointer;
    
}



.fix-this-window {
	
	width: 300px;
	
}

.vertical_closable_openbody  {
	
	font-family: Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	min-height: 200px;
	/*font-size: 75%;*/
	font-size: 14px;
	background-color: black;

}


.transparent-frame {
    width: 100%;
    height: 100%;
    background: rgba(3, 3, 3, 0.5);
    padding: 10px;
    top: 0px;
    margin-left: -8px;
    text-align: center;
    float: left;
    z-index: 99;
    position: absolute;
    overflow: hidden;
}

/* By Gustavo | Home Tab Begin
************************************* */

#tab_list {
	/*
		vue
		Every CSS property has been removed. It was interferring with the flexbox items
		within the @tab_list's parent container.
	*/
}

/* By Gustavo | Home Tab End
************************************* */

/* By Gustavo | Top Frame Color Begin
************************************* */

.top-frame {
	display: flex;
}

/* By Gustavo | Company Logo Begin
*********************************** */

.company-logo {

	width: 92px;
    height: 30px;
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    background-size: 92px 30px;
    background-color: transparent;
    margin-right: 40px;
    margin-left: 5px;
    opacity: 1;
    border: none;
    cursor: pointer;
    float: left;
    display: block;  

}

/* By Gustavo | Company Logo End
*********************************** */


.toolbar {
	
	/*position: absolute;
	top: 12px;
	right: 35px;*/
	
}


ul li a {
	
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	
	
}

.myClass-tabs {
	
	width: 50px;
	height: 25px;
	background-color: #ff0000;
	cursor: pointer;

}

.myClass-tabs:hover {
	
	background-color: #333;

}

.myClass-tabs-2 {
	
	background-color: #fff;

}

 /* By Gustavo 
 ***************************** */

.myClass {
	
	
	
}

.myClass:hover {
	
	opacity: 0.5;
	cursor: pointer;
	
}

.myClass option {
	
	color: #333;

}

/* Top tabs for the menu by Gustavo
*********************************** */

ul#tab_list li {
	
	color: #333;
	background-color: transparent;
	border: 0;
	/*background-color: #fff;*/
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

}

ul#tab_list li:hover {
	
	background-color: #f1f1f1;
	
}

ul#tab_list li a {
	
	color: #333;
	border-right: 2px solid #f1f1f1;
	padding: 3px 35px 3px 35px;
    height: 25px;   
    
}
 
ul#tab_list li a:hover {
	
	color: #333;
	opacity: 1;
	height: 25px;

}

.top-menu-close-tab {
	
	position: absolute; 
	right: 8px; 
    
}


.home-tab-main-menu {
	
	font-size: 14px;
    border: 0;
    outline: 0;
    border-right: 2px solid #f1f1f1;
	
}

/* ************* Input of the login window begin By Gustavo **************** */
/* ************************************************************************* */

.login_user_password_input {

	width: 250px;
    padding: 8px 7px;
    color: #333;
    border: 2px solid #f1f1f1;
    background-color: #fff;

}

input:focus { 
	outline-width: 0;
    border: 1px solid #ff0000;	
}

/* ************* By Gustavo Icon Bar of Login and Language **************** */
/* ************************************************************************* */

.icon-bar {

	width:20px;  /* width:190px; */
    height:22px; 
  	background-image: url(../images/icon-bars-unibar.png);   /* url(../images/icon-bars.png); */
    background-repeat: no-repeat;
    background-size:20px 22px;   /* 114px 25px;  */ 
    background-color: transparent;
    color: #fff;
    opacity: 1;
 /* border: none; */
	cursor: pointer;
	outline: none;
	border: none;

}

.icon-bar:active {

	outline: none;
	border: none;
	
}

/* **************** Input of the login window begin ************************ */
/* ************************************************************************* */

#container > div {
	
		display: inline-flex;
		
}

#top_container {
		
		width: 100%;
		height: 60px;
		margin: 0px auto;
		background-color: #000000;
	
}

/* ************* Home page grey frame | Links | Copyright ******************* */
/* ************************************************************************** */

.grey_frame { 
	
	position: absolute;
	width: 100%;
	margin-top: 300px;
/*	background-color: #D3D3D1; */
	background-color: #000;
	display: block;
	text-align: center;
/*	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);  
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);  
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); */ 
	-webkit-transition: all 0.3s ease; 
	-moz-transition: all 0.3s ease; 
	-o-transition: all 0.3s ease; 
	transition: all 0.3s ease;
	
}

/* By Gustavo don't change this please
************************************** */

#grey_container{
    display: block;
}

@media (max-width: 615px) 
{
    #grey_container
    {
      /* margin-top: 440px; */
      display: none;
    }
}

@media (max-width: 415px) 
{
    #grey_container
    {
       display: none;
    }
}

/* By Gustavo | Home Page Images Begin
*************************************** */

.home-image1 {
	
	width:298px;
    height:220px;
  /*  background-image: url(../images/fortigo1.png);  */
  	background-image: url(../images/tech-image-left.jpg);
    background-repeat: no-repeat;
    background-size: 298px 220px;
    background-color: transparent;
    opacity: 1;
    margin-right: -4px;
    border: none;
	cursor: default;
	
}

.home-image2 {
	
	width:298px;
    height:220px;
  /*  background-image: url(../images/fortigo2.png); */
  	background-image: url(../images/tech-image.jpg);
    background-repeat: no-repeat;
    background-size: 298px 220px;
    background-color: transparent;
    opacity: 1;
    margin-right: -4px;
    border: none;
	cursor: default;  
	
}

.home-image3 {
	
	width:298px;
    height:220px;
   /* background-image: url(../images/fortigo3.png); */
   	background-image: url(../images/tech-image-right.jpg);
    background-repeat: no-repeat;
    background-size: 298px 220px;
    background-color: transparent;
    opacity: 1;
    border: none;
	cursor: default;  
	
}

/* By Gustavo | Home Page Images End
*************************************** */
/* ************************************* */

.home_bottom_links {
	
	width: 100%; 
	text-align: center; 
	margin-top: 570px; 
	position: absolute; 
	
}

#bottom_links{
	
    display: block;
    
}

@media (max-width: 900px) 
{
    #bottom_links
    {
       display: none;
    }
}

/* ************************************* */

.copy_right {
	
	width: 100%; 
	text-align: center; 
	margin-top: 670px; 
	position: absolute; 
		
}

#copyright{
	
    display: block;
    
}

@media (max-width: 900px) 
{
    #copyright
    {
       display: none;
    }
}


/* ************************************************************************* */
/* ************ Home page grey frame | Links | Copyright end *************** */
/* ************************************************************************** */

p.footer_text {
	
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: normal; 
	color: #ffffff;  
	color: rgba(f, f, f, 0.6);  
	text-shadow: 0 1px 1px #fff;  
	
}
	
.image_container {
	
	margin-left: 10px;
	background-color: #000000;
	
}

/* ******************************  Home tab content ********************************* */
/* ******************  Buttons that link app on the shell begin  ******************** */
/* ********************************************************************************** */
.app-link {
	color: white;
	text-align: center;
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	padding:20px;
	/* margin-top: 80px;
	margin-left: 1%;
	width:200px;
	height:110px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #333;
	text-shadow: 0 0 3px #fff;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	background:  #f1f1f1; 
	display: inline-block;
	-webkit-box-shadow: 0px 1px 5px #666666;
	-moz-box-shadow: 0px 1px 5px #666666;
	box-shadow: 0px 1px 5px #666666;
	-webkit-border-radius: 100px;  
	-moz-border-radius: 100px;  
	-o-border-radius: 100px;  
	border-radius: 100px; 
	-webkit-transition: all 0.3s ease; 
	-moz-transition: all 0.3s ease; 
	-o-transition: all 0.3s ease; 
	transition: all 0.3s ease;
	
	
	padding: 8px;
	background: #ebebeb;
    background: -webkit-linear-gradient(#f1f1f1,#c0c0c0);
    background: -moz-linear-gradient(#f1f1f1,#c0c0c0);
    background: linear-gradient(#f1f1f1,#c0c0c0); */
	
}

.app-link:hover {
	
	/*background:  #e2e2e2;*/ 
	/* text-decoration: none;
	-webkit-box-shadow: 0px 1px 10px #666666;
	-moz-box-shadow: 0px 1px 10px #666666;
	box-shadow: 0px 1px 10px #666666; */
	
}

/* ******************  Buttons that link app on the shell End  ******************** */
/* ******************************************************************************** */

.dialog_text {
	
	text-align: center;
	display: inline-block;
	
}

/* jQuery UI additions + overrides */

.ui-menu {
	
	width: 250px;
	
}

.ui-icon-close {
	
	float: left;
	margin:4px !important;
	cursor: pointer;	
	width: 8px;	
	height: 8px;		
	
}

.ui-tabs { 
	
	position: absolute;
	padding: 0px;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	
}

.ui-tabs .ui-tabs-panel {
	
    /* background: none repeat scroll 0 0 rgba(254, 254, 254, 1); */
    /* none repeat scroll 0 0 rgba(0, 0, 0, 0); */
    border-width: 0;
    display: block;
    padding: 0em 0em;
    margin-top: 7px;
 
}

/* CREDIT: https://jqueryui.com/autocomplete/#maxheight */
.ui-autocomplete {
	max-height: 100px;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;
}

/* Utils */
.vertical_align {
	
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	
}

.horizontal_align {
	
	position: relative;
	margin: auto auto;
	
}

/* **************************************************************************** */
/* ************************  Menu bar buttons begin *************************** */

#nav_menu_bar {
	
	position: absolute;
	top: 28px;
	left: 0px;
	z-index: 5;
	width: 100%;
	background-color: #d3d3d1; /*#505145*/;
	box-shadow: 0px 5px 5px #888888;
	-moz-user-select: none;
	cursor: default;
	
}

#menu_bar {
	
	margin: 0px 0px 0px 0px;
	padding: 0px;  /* It was 0px */
	font-family: Helvetica, Arial, sans-serif;
	display: inlineblock;
    color: #333;
    background-color: #333;
}

 ul, li {
	
	list-style:none !important;
    list-style-type: none !important;
    list-style-position:inside !important;
	
}

#menu_bar>li {
	
	display: inline-block;
	line-height: 20px; /* By Gustavo was 30px */
	margin: 0;
	border-right: 2px solid #464545;
	padding: 5px 30px 5px 30px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #fff;
	list-style:none !important;
    list-style-type: none !important;
    list-style-position:inside !important;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
	
}

#menu_bar>li:hover {
	
	display: inline-block;
	line-height: 20px; /* By Gustavo was 30px */
	margin: 0;
	padding: 5px 30px 5px 30px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #fff;
	background-color: #464545;
	list-style:none !important;
    list-style-type: none !important;
    list-style-position:inside !important;

}

/* GUSTAVO MAIN MENU FM-72 OCT 28 2016 */
/*
@-webkit-keyframes menu { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes menu { from { opacity:0; } to { opacity:1; } }
@keyframes menu { from { opacity:0; } to { opacity:1; } }
*/
.menu {
	
	width: 260px !important;
	/*
	-webkit-animation:menu ease-in 1;
	-moz-animation:menu ease-in 1;
	animation:menu ease-in 1;
	
	-webkit-animation-duration:0.3s;
	-moz-animation-duration:0.3s;
	animation-duration:0.3s;
	*/
	position: absolute;
	margin: 0;

	z-index: 10

}

/* ************************  Menu bar buttons end *************************** */
/* ************************************************************************** */

/* ********************** Tabs configuration begin  ************************* */
/* ************************************************************************** */

#tabs {
	
	
	display: inline-block;
	border: 0;
	right: 0px;
	bottom: 0px;
	left: 0px;
	 width: 100%;
    height: 100%;
   
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  
	
}

.tab_content {

	margin-top: 0px;
	position: absolute;
	text-align: center;
	top: 20px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	color: #ffffff;
	z-index: 2; 
	
}

/* By Gustavo This make the gray frame 
of the central window big enough to avoid it to be cut
****************************************************** */
.outer_tabs {
	
	box-shadow: 0px 5px 5px #888888;
	background: #ebebeb;
    background: -webkit-linear-gradient(#f1f1f1,#c0c0c0);
    background: -moz-linear-gradient(#f1f1f1,#c0c0c0);
    background: linear-gradient(#f1f1f1,#c0c0c0);
	/*padding: 5px 0px 5px 0px;*/
	border-style: solid;
    border-bottom-color: #333;
    padding-bottom: 1px;
 
}


.inner_tabs {
	
	position: relative;
	
}

/* ************************** Tabs configuration end *************************** */
/* ***************************************************************************** */

/* ******************************* Split pane ********************************* */
/* **************************************************************************** */

.split_pane_body {
	
	position: relative;
	/* margin-top: 45px; */
	/* padding-top: 45px; */
	height: 100%;
	width: 100%;
	
}

.left_split_pane {
	
	right: 85%;
	margin-right: 5px;
	
}

.top_left_pane {
	
	bottom: 30%;
	margin-bottom: 5px;
	
}

.left_horizontal_divider {
	
	bottom: 30%;
	height: 5px;
	
}

.bottom_left_pane {
	
	height: 30%;
	
}

.main_vertical_divider {
	
	right: 85%;
	width: 5px;

}

.right_split_pane {
	
	width: 85%;
	
}

.center_split_pane {
	
	bottom: 25%;
	margin-bottom: 5px;
	
}

.center_pane {
	
	right: 10%;
	margin-right: 5px;
	
}

.right_vertical_divider {
	
	right: 10%;
	width: 5px;
	
}

.right_pane {
	
	width: 10%;
	
}

.right_horizontal_divider {
	
	bottom: 25%;
	height: 5px;
	
}

.bottom_pane {
	
	height: 25%;
	
}
	
/* ************************* Split-pane extras begin ************************** */
/* ************************************************************************** */

.split-pane-divider:hover {
	
	background-color: #f2f2f2;

}

div.vertical_closable {

	background-color: #555555;
	width: 5px;
	height: 50px;

	right: 90%;
	
}


.left-panel-close {
	
	right: 98.65
	
}

.central-panel-open {
	
	width: 90%;
	
}

.central-panel-open {
	
	width: 98.65
	
}

.vertical_closable {
	
	width:15px;
    height:15px;
    background-image: url(../images/vertical-closable-close-icon.png);
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-color: transparent;
    margin-top: 18px;
    opacity: 1;
    border: none;
    outline:0;
	cursor: pointer;
	float: left;
	position: absolute;
    top: -38px;
    right: 360px;

}

.vertical_closable_open {

	width: 15px;
    height: 15px;
    background-image: url(../images/vertical-closable-open-icon.png);
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-color: transparent;
    margin-top: 18px;
    opacity: 1;
    border: none;
    outline: 0;
    cursor: pointer;
    /* float: right; */
    position: absolute;
    top: -38px;
    right: 360px;
    
}

div.horizontal_closable {
	
	background-color: #555555;
	width: 50px;
	height: 5px;
	
}


div.horizontal_closable:hover, div.vertical_closable:hover {
	
	background-color: #ff0000;	/* *******        This is the color          ******* */ 

	cursor: pointer;        	/* ******* of the small handle of the border ******* */ 
							    /* *******        of the split-pane          ******* */
}								/* *******           By Gustavo              ******* */

.abs_div {
	
	position: absolute;
	top: 120px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	overflow: auto;
	
}

/* Filter menu begin
******************** */

.filter-menu {
	
	width: 320px;
    /*height: 130px;*/
    padding: 8px 8px 15px 8px;
	z-index: 200;
	margin-top: 25px;
	display: none; 
	font-family: Helvetica, Arial, sans-serif;
  	font-size: 14px;
  	font-weight: bold;
	position: absolute; 
	background-color: #ffffff;
    color: white;
    border: solid 1px #c0c0c0;
    opacity: 0.98;
    -webkit-border-radius: 10px;  
	-moz-border-radius: 10px;  
	border-radius: 10px; 
	-webkit-box-shadow: 1px 1px 5px #999;
	-moz-box-shadow: 1px 1px 5px #999;
	box-shadow: 1px 1px 5px #999; 
    
}

.filter-menu button {
	
	padding: 5px 15px; 
	width: 100px; 
	height: 25px;
	color: #333;  
	font-weight: bold;
	line-height: 1; 
	border: none; 
	cursor: pointer;
	margin-top: 13px;
	margin-left: 42px;
	positio: inline-block; 
	background-color: #c0c0c0;
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px; 
	border-radius: 10px;  
	-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); 
	-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); 
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    
}

.filter-menu button:hover {
	
	background-color: #b1b1b1;
	
}

.filter-menu button:disabled {
	
	background-color: #c0c0c0;
	opacity: 0.3;
	cursor: auto;
	
}

.filter-menu input {
	
	width: 120px;
    padding: 5px 8px;
    font-size: 14px;
    color: #333;
    margin-left: 10px;
    border: 2px solid #c0c0c0;
    background-color: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
	
} 

.filter-menu select {
	
	width: 150px;
    font-size: 14px;
    color: #333;
    margin-left: 10px;
    margin-top:10px;
    border: 2px solid #c0c0c0;
    background-color: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
	
}

.filter-option {
	
	color: #333;
	
}

.filter-option:hover {
	
	background: #ff0080;
	
}

/* Filter menu end
******************** */

.filter-menu div {
	
	padding: 5px;
	
}

/* ************************* Split-pane extras end ************************** */
/* ************************************************************************** */

/* ************************* login top button begin ************************* */ 
/* ************************************************************************** */
#login_form_button, #logout_button {
	
	color: #333;
	
}

.shell_btn { 
	
 	margin-left: 10px;
  	float: left;
  	font-family: Helvetica, Arial, sans-serif;
  	font-size: 14px;
  	text-decoration: none;
  	text-align: right;
  	cursor: pointer;
	line-height: 1.4;
	color: #fff;
  
}

.shell_btn:hover {

	opacity: 0.8;
  	text-decoration: none !important;
 
}

.shell-menu-btn { 
	
    width: 100%;
    padding: 5px 0px 5px 0px;
    margin: 0px;
    float: left;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    line-height: 1.4;
    background-color: #fff;
    transition: all .3s;
  
}

.shell-menu-btn > span {
	
	margin-left: 5px;
	
}

.shell-menu-btn:hover {

	background-color: #ff0000;
	color: #fff !important;
 
}

.shell-menu-btn:hover > i {
	
	color: #fff !important;
	
}


/* ************************* Language top button begin ************************* */ 
/* ************************************************************************** */

.language_btn { 
	
	width: 90%;
 	display: inline-block;
  	font-family: Helvetica, Arial, sans-serif;
  	font-size: 14px;
  	text-decoration: none;
  	cursor: pointer;
	line-height: 1.4;
	color: #333;
  	padding-left: 5px;
  	padding-right: 5px;  
  
}

.language_btn:hover {

  	background-color: #c0c0c0;

 
}

/* ******* Align logo and tab begin
************************************ */

#login_logout_div
{
    position:absolute;
    width:92%;
    margin-right: 20px;
    height:30px;
    text-align: center; /*handles the horizontal centering*/
}
/* handles the vertical centering */

.centerer
{
    display: inline-block; height: 100%; vertical-align: middle;
}
.centered
{
    display: inline-block;
    vertical-align: middle;
}

.myClass_login_logout {  

	width:auto;
	height:auto;
} 

/* ******* Align login and logout end   
************************************* */

/* Bottom Links
*********************************** */
.bottom-links {
	
	opacity: 0.5;
	margin-right: 30px;
	
}

.bottom-links:hover {
	
	opacity: 1;
	
}

#copy-right {
	
	font-family: Helvetica, Arial, sans-serif;
  	font-size: 14px;
	color: #333;
	margin-top: 20px;
	
}

/* ************************* login top button begin ************************* */ 
/* ************************************************************************** */

.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt {
	float: left;
	clear:left;
	padding: 0 0 0 5px;
	font-weight: normal; /* TMS-960 override BootstrapVue bolding <dt> */
}
.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }

/* Shortened version style */
.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time, 
.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd, 
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0;}
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }

/* Hide jQuery UI dialog, e.g. $dialog.dialog({ dialogClass: 'no-close' }), TOM-476, CREDIT: http://stackoverflow.com/a/15499494 */
.no-close .ui-dialog-titlebar-close {
    display: none;
}

/***********************************************************************************************
	START Progress indicators
	See TMS-284 where it was introduced. Also see TMS-320 where it will be applied everywhere.
*/

/* line with 3 dots */

.progress-indicator-line,
.progress-indicator-line:before,
.progress-indicator-line:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: progress-indicator-line-frames 1.8s infinite ease-in-out;
  animation: progress-indicator-line-frames 1.8s infinite ease-in-out;
}
.progress-indicator-line {
  color: #ff0000;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.progress-indicator-line:before,
.progress-indicator-line:after {
  content: '';
  position: absolute;
  top: 0;
}
.progress-indicator-line:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.progress-indicator-line:after {
  left: 3.5em;
}
@-webkit-keyframes progress-indicator-line-frames {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes progress-indicator-line-frames {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

/* dot snake with circular movement */

.progress-indicator-circle {
  color: #ff0000;
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: progress-indicator-circle-frames 1.7s infinite ease, progress-indicator-circle-round-frames 1.7s infinite ease;
  animation: progress-indicator-circle-frames 1.7s infinite ease, progress-indicator-circle-round-frames 1.7s infinite ease;
}
@-webkit-keyframes progress-indicator-circle-frames {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes progress-indicator-circle-frames {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@-webkit-keyframes progress-indicator-circle-round-frames {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes progress-indicator-circle-round-frames {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/************************************** END Progress indicators *********************************************/

a.blue-link {
	color: blue;
	cursor: pointer;
	text-decoration: underline;
}
a.blue-link:visited {
	color: purple
}

/* ************************* BEGIN TWM-148 and TMS-748 Login Page - New Look ************************* */

body,
.FP1Section *,
.FP1Section *::after,
.FP1Section *::before,
.HP1Cont *,
.HP1Cont *::after,
.HP1Cont *::before
{
  margin: 0;
  padding: 0;
}

/*
	vue
	Used to be the "body" tag selector. With BootstrapVue, it is overriding this so
	now it uses ".shell-body" class selector. I decided that I will not refactor
	existing HTML to be backwards compatible as it will take a very long time.
*/
/* body, */
.shell-body {
  color: #000;
  font-family: 'Montserrat', sans-serif;
}

/*
	vue
	the "shellweb-lineheight" suffix is used so that it doesn't affect BootstrapVue
*/
h1.shellweb-lineheight,
h2.shellweb-lineheight,
h3.shellweb-lineheight,
h4.shellweb-lineheight,
h5.shellweb-lineheight,
h6.shellweb-lineheight,
p.shellweb-lineheight {
  line-height: 1.2em;
}


.HP1Cont {
  background-color: black;
  height: 100vh;
  width: 100%;
  position: relative;
  color: #000;
  font-family: 'Montserrat', sans-serif;
   }
  .HP1Cont .footer-logo {
    position: absolute;
    bottom: 5%;
    right: 12%;
    width: 10%; }
  .HP1Cont .HP1Row1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1200px;
    width: 100%; }
    .HP1Cont .HP1Row1 .HP1Col1 {
      position: relative; }
      .HP1Cont .HP1Row1 .HP1Col1 .inner-row1 {
        margin-bottom: 8%; }
        .HP1Cont .HP1Row1 .HP1Col1 .inner-row1 h1 {
          color: white;
    	  font-size: 2.7rem;
    	  font-weight: 600;
    	  letter-spacing: 0.75px;    	  
    	  font-family: 'Montserrat', sans-serif;}
.HP1Row1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1200px;
    width: 100%; }
.app-link-imgs {
	width:200px; 
	height:206px;
	border-style: none;
}

.app-link-imgs-order-mgmt {
	width: 138px;
    height: 138px;
    border-style: none;
    margin-top: 23%;
    margin-bottom: 17%;
    margin-right: 2rem;
}    	 

.app-link-imgs-scan-ctdi {
	width: 120px;
    height: 120px;
    border-style: none;
    margin-top: 50px;
    vertical-align: middle;
    margin-bottom: 56px;
}  

.app-link-imgs-shell-tms {
	width: 138px;
    height: 138px;
    border-style: none;
    margin-top: 24%;
    margin-bottom: 24%;
}   

/* front-page.scss */
.FP1Cont {
  background-image: url(../images/LoginPageBG2.jpg);
  background-color: black;
  height: 100vh;
  width: 100%;
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover; }
  .FP1Cont .FP1Row1 {
    height: 100%; }
    .FP1Cont .FP1Row1 .FP1Col1 {
      height: 100%;
      position: relative; }
      .FP1Cont .FP1Row1 .FP1Col1 form {
        position: absolute;
        top: 48%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 300px; }
        .FP1Cont .FP1Row1 .FP1Col1 form .form-group {
          width: 100%; 
          margin-top: 12px;
          color: #000;
  		  font-family: 'Montserrat', sans-serif;}
          .FP1Cont .FP1Row1 .FP1Col1 form .form-group input {
            border-radius: 0;
            border: solid 1px white;
            background-color: transparent;
            color: white;
            width: 93%;
            padding: 3%;
            font-size: 14px;
            font-style: italic; 
            font-family: 'Montserrat', sans-serif;}
           .FP1Cont .FP1Row1 .FP1Col1 form .form-group input::placeholder {
 			font-family: 'Montserrat', sans-serif;
 			color: white; }
          .FP1Cont .FP1Row1 .FP1Col1 form .form-group button {
            border: 0;
    		cursor: pointer;
    		background: transparent;
            color: #e00034;
            font-size: 14px;
            text-decoration: none; }
            .FP1Cont .FP1Row1 .FP1Col1 form .form-group button:hover {
              text-decoration: none; }
          .FP1Cont .FP1Row1 .FP1Col1 form .form-group input[type="button"] {
            width: 30%;
            border: solid 1px #e00034;
            background-color: #e00034;
            border-radius: 0;
            color: white;
            font-style: normal;
            padding: .4rem 1rem;
		    font-size: 0.81rem;
		    cursor: pointer;
    		font-family: 'Montserrat', sans-serif;}
        .FP1Cont .FP1Row1 .FP1Col1 form .container {
          background-color: transparent;
          width: 100%;
          padding: 3%;
          padding-left: 0;
          padding-top: 12%;
          display: block;
  		  position: relative;
  		  margin-bottom: 12px;
  		  cursor: pointer;
  		  color: white;
  		  -webkit-user-select: none;
  		  -moz-user-select: none;
  		  -ms-user-select: none;
  		  user-select: none;
  		  font-size: 14px;
  		  font-family: 'Montserrat', sans-serif;
          }
          .styled-checkbox {
  			position: absolute;
  			opacity: 0; 
          }

  .styled-checkbox + label {
    position: relative;
    cursor: pointer;
    padding: 0;
  }

  
  .styled-checkbox + label:before {
    content: '';
    margin-right: 10px;
    display: inline-block;
    vertical-align: text-top;
    width: 14px;
    height: 14px;
    border: solid 1px white;;
  }

  .styled-checkbox:checked + label:after {
    content: '';
    position: absolute;
    left: 4px;
    top: 7px;
    background: white;
    width: 2px;
    height: 2px;
    box-shadow: 
      2px 0 0 white,
      4px 0 0 white,
      4px -2px 0 white,
      4px -4px 0 white,
      4px -6px 0 white,
      4px -8px 0 white;
    transform: rotate(45deg);
  }

				

/* ************************* END TWM-148 and TMS-748 Login Page - New Look *************************** */

.ui-dialog {
	/* how to increase z-index for jQuery UI dialog: https://stackoverflow.com/a/16918323 */
	z-index: 10000 !important; /* TMS-871 increase z-index */
}

/* ****************************** START BoostrapVue ****************************** */

/*
	vue
	Need to override `.ui-widget .ui-widget` inherited font-size which is 13, to 16.
	Note that this overrides CSS specificity since BootstrapVue elements are closest
	to the `.vue-container` parent than the `.ui-widget .ui-widget` parent, in the
	DOM hierarchy.
	With the font-family, the BootstrapVue's basic example:
	https://bootstrap-vue.org/docs/reference/starter-templates
	is now exactly the same as if it was just standalone (i.e. not in ShellWeb).
*/
.vue-container {
	font-size: 16px;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	line-height: 1.5; /* super-search: use the same value as in reboot.scss line-height */
}

/*
	vue
	`.ui-widget-content a` is overriding the color from BootstrapVue's `.btn-primary`.
	So override it with a more specific selector.
*/
.vue-container .btn-primary {
    color: #fff;
}

.shell-override.vue-container, /* TMS-1043 */
.fortigo-font, /* TMS-1292 */
.shell-override.fortigo-font
{
	font-size: 14px;
	font-family: Lato;
}

/* TMS-1043 Use Lato font, overriding jQuery UI */
.ui-widget select.shell-override,
.ui-widget textarea.shell-override,
.ui-widget button.shell-override
{
	font-family: Lato
}

/*
	vue
	Add the following class to every <label> to override BootstrapVue's label override
	similar to what I did in filemtc.css with `.filemtc-fieldset` but for <fieldset>.
*/
label.shell-label {
	display: inline;
	margin-bottom: initial;
	font-size:13px;
}

/*
	vue
	BootstrapVue sets everything to `box-sizing: border-box` which messes up ShellWeb stuff.
*/
.shell-box-sizing,
.shell-box-sizing::after,
.shell-box-sizing::before {
	box-sizing: content-box;
}

/*
	super-search
	BootstrapVue's <b-input> is too bulky, so add .shell-override class.
*/
.shell-override.form-control {
	padding: 0 0.25em;
	height: unset;
	font-size: 14px; /* align with other stuff in Shell */
}

/*
	super-search
	BootstrapVue's <b-form-datepicker> is too high, so add .shell-override class.
*/
.shell-override.b-form-datepicker.b-form-btn-label-control.form-control {
	width: 17em;
}
.shell-override.b-form-datepicker.b-form-btn-label-control.form-control > .btn {
	padding: 0 0.25em;
}
.shell-override.b-form-datepicker.b-form-btn-label-control.form-control > .form-control {
	min-height: 0;
	padding: 0 0.25em;
}

/*
	TMS-960
	BootstrapVue's <b-select> is too high, so add .shell-override class.
*/
.shell-override.custom-select {
	height: unset;
	padding: 0 0.25em;
	padding-right: 2em; /* TMS-1058 padding on right to ensure long text doesn't flow underneath dropdown arrows */
}

/*
	TMS-960
	Reset back to user agent style from BootstrapVue
*/
.shell-checkbox {
	margin: 3px 3px 3px 4px;
}

hr.shell-hr {
	margin-top: revert;
    margin-bottom: revert;
    border: revert;
    border-top: revert;
}
input[type="radio"].shell-radio {
	margin: 3px 3px 0px 5px;
}

.fortigo.btn {
	/*
	 * Original comments in planning-board.jsp:
	 * ```
	 * The auto-plan buttons in the .planning-board-heading increases the height of the
	 * heading. The auto-plan buttons show up when a dispatch plan was selected.
	 * Compared to no selected dispatch plan, with just the "Tripsheets" heading, the
	 * height is smaller. The solution to making it consistent is to remove all padding
	 * from all buttons in this page.
	 * ```
	 */
	
	padding-top: 0;
	padding-bottom: 0;
	font-size: 12px;
}
.fortigo.btn-secondary {
	color: #fff;
	background-color: #343a40;
	border-color: #343a40;
	font-size: 14px;
}
.fortigo.btn-secondary:hover {
	color: #fff;
	background-color: #23272b;
	border-color: #23272b;
}
.fortigo.btn-secondary.delete-red-color2 {
	background-color: #FF0000;
	border-color: #FF0000;
}
.fortigo.btn-secondary.delete-red-color2:hover {
	background-color: #900;
	border-color: #900;
}
.fortigo.btn-secondary.green-color {
	background-color: #63A103;
	border-color: #63A103;
}
.fortigo.btn-secondary.green-color:hover {
	background-color: #75BA0D;
	border-color: #75BA0D;
}

/*
release-2024-07-13 General CSS class for headings introduced for TMS-1981. Based on headings of
collapsible panels but could be used for any kind of heading or label.
*/
.heading {
	font-weight: bold;
	font-size: 16px;
	font-family: "Lato Bold", "Lato", sans-serif;
}

/* ****************************** END BoostrapVue ****************************** */

/* ****************************** START PrimeVue ****************************** */

.shell-override.p-autocomplete .p-inputtext {
	padding: 0 0.25em;
	font-size: 14px;
	font-family: Lato;
}
.shell-override.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container {
	padding: 0 0.25em;
}
.shell-override.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token {
	padding: 0;
}
.shell-override.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input {
	font-size: 14px;
	font-family: Lato;
}
.shell-override.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token {
	padding: 0 0.5em;
	line-height: normal; /* reset from a chain of cascaded values */
}

.shell-override.p-calendar .p-inputtext {
	font-size: 14px;
	font-family: Lato;
	padding: 0 0.25em;
	width: 9em;
}
.shell-override.p-calendar .p-datepicker {
	font-size: 14px;
	font-family: Lato;
}
.shell-override.p-calendar .p-datepicker,
.shell-override.p-calendar .p-datepicker .p-datepicker-header,
.shell-override.p-calendar .p-datepicker table th,
.shell-override.p-calendar .p-datepicker table td,
.shell-override.p-calendar .p-datepicker .p-timepicker {
	padding: 0;
}
.shell-override.p-calendar .p-datepicker table th {
	text-align: center;
}

.shell-override.p-datatable {
	font-size: 13px; /* 14px - 1px to fit more columns within viewport width */
	font-family: Lato;
}
.shell-override.p-datatable .p-datatable-thead > tr > th {
	padding: 0;
	padding-left: 0.5em;
/*     background-color: #0066A4; */
/*     color: white; */
	background-color: white;
	color: #333;
    white-space: nowrap;
}
.shell-override.p-datatable .p-datatable-tbody > tr:nth-child(even) {
	/* based on background color as `div[id$="-container-view"] tr:nth-child(even)` in filemtc.css */
	background-color: #f8f8f8;
}
.shell-override.p-datatable .p-datatable-tbody > tr.p-highlight {
	/* same background color as DatasetContainerView.DEFAULT_SELECTED_ROW_COLOUR in filemtc.js */
	background-color: #b8cfe5;
}
.shell-override.p-datatable .p-datatable-tbody > tr > td {
	padding: 0;
	padding-left: 0.5em;
}
.shell-override.p-datatable .p-paginator .p-paginator-current {
	font-size: 14px;
	font-family: Lato;
}
.shell-override.p-datatable .p-paginator .pi-angle-double-left:before,
.shell-override.p-datatable .p-paginator .pi-angle-left:before,
.shell-override.p-datatable .p-paginator .pi-angle-double-right:before,
.shell-override.p-datatable .p-paginator .pi-angle-right:before {
	font-size: 14px;
	/*font-family: Lato; TMS-1043 Lato doesn't need to be set here. These selectors use Prime icons. */
}
.shell-override.p-datatable .p-paginator .ui-widget button {
	font-size: 14px;
	font-family: Lato;
}
.shell-override.p-datatable .p-paginator .p-inputtext,
.shell-override.p-datatable .p-paginator .p-component {
	font-size: 14px;
	font-family: Lato;
}

.shell-override.p-datatable .pi-sort-alt {
	display: none;
}
.shell-override.p-datatable .pi-sort-alt:before {
	content: '';
}

.shell-override.p-multiselect {
	font-size: 14px;
	font-family: Lato;
}
.shell-override.p-multiselect .p-multiselect-label {
	padding: 0 0.25em;
}
.shell-override.p-multiselect .p-multiselect-item {
	font-size: 14px;
	font-family: Lato;
}
.shell-override.p-multiselect .p-multiselect-close {
	display: none;
}

.shell-override.vdpComponent.vdpWithInput,
.shell-override.vdpComponent.vdpWithInput > input {
	width: 100%; /* TMS-1258 good default */
}
.shell-override.vdpComponent.vdpWithInput > input { /* TMS-1258 */
	padding-right: 0;
	height: 23px;
	
	/* START emulate Bootstrap input */
	line-height: 1.5;
    color: #495057;
    font-size: 12px;
    border: 1px solid #ced4da;
	border-radius: 0.25rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	/* END emulate Bootstrap input */
}
.shell-override.vdpComponent.vdpWithInput > input:focus { /* TMS-1258 emulate Bootstrap input */
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}
.shell-override.vdpComponent.vdpWithInput > input[readonly] { /* TMS-1292 emulate Bootstrap disabled */
	background-color: #e9ecef;
}
.shell-override.vdpComponent.fortigo-font {
	font-size: 10px;
}
.shell-override.vdpComponent.vdpWithInput > .vdpClearInput { /* TMS-1258 */
	width: 2em;
}

@media screen and (max-width: 800px) {
  #menu_bar li:not(:first-child) {display: none;}
  #menu_bar li.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 800px) {
  #menu_bar.responsive {position: relative;}
  #menu_bar.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  #menu_bar.responsive li {
    float: none;
    display: block;
    text-align: left;
  }
  #loginMenuDt {
  	display: none;
  }
}
@media screen and (min-width: 801px) {
  #loginMenuDt {
  	display: block;
  }
}
/* Override styles for screens with a minimum width of 1200px */
@media (min-width: 1200px) {
  .container {
    max-width: 2000px; /* Set a maximum width for the container */
    
  }
}
/* Override styles for screens with a minimum width of 1200px */
@media screen and (min-width: 992px) {
  .container {
    max-width: 1700px; /* Set a maximum width for the container */
    
  }
}
/* Override styles for screens with a minimum width of 1200px */
@media screen and (min-width: 768px) {
  .container {
    max-width: 1500px; /* Set a maximum width for the container */
   
  }
}
#menu_bar .icon {
  display: none;
}
.main_tabs_application{
	background-color: black;
	padding:10px;
}
.main_tab_ul{
	padding:10px;
}
.nav_menu_bar_top{

  background-color: black;
  
}
#user_button{
	 width: 32px;
    height: 32px;
    border-radius: 50%; 
    background-color: #D10000; 
    color: white; 
    text-align: center;
    line-height: 32px; 
    font-family: "Lato", sans-serif;
    font-weight: bold;
    font-size:18px;
    margin-left:8px;
    margin-top:10px;
}
#user_button_image{
	 width: 45px;
	 height: 45px;
	 border-radius: 50%;
	 background-color: #D10000;
	 color: white;
	 text-align: center;
	 line-height: 45px;
	 font-family: "Lato", sans-serif;
	 FONT-WEIGHT: 500;
	 font-size: 24px;
	 margin-left: -16px;
	 margin-top: 34px;
}
/* Style scrollbar for Webkit browsers */
#nav_menu_bar3::-webkit-scrollbar {
  width: 24px;
}

#nav_menu_bar3::-webkit-scrollbar-thumb {
  background: #D10000;
  border-radius: 4px;
}

#nav_menu_bar3::-webkit-scrollbar-thumb:hover {
  background: #D10000;
}

#nav_menu_bar3::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.close-icon-container {
 	display: inline-flex;
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    padding: 10px;
    margin-top: 15px;
    align-items: center;
    justify-content: center;
}
@keyframes repaint {
  from { opacity: 1; }
  to { opacity: 1; }
}

.close-icon-container {
  animation: repaint 0.1s linear;
}

.close-icon-container:hover {
  background-color: #FF7F7F; 
}

#tabview_subtab .p-tabview-nav-container{
	margin-bottom:10px
}

.vue-date-picker-fixed-popup {
	font-size: 12px;
}
.hide-nav .nav-tabs {
  display: none !important;
  height: 100%;
}
.tab-pane.mainTab .tabs {
	height: calc(100%);	
}
.tabs .tab-pane.subtab{
	height: 100%;
}

.hide-nav.tabs .tab-content > div,
.tabs .tab-content > div {
	height: 100%;
}

.hide-nav.tabs .tab-content {
	height: 100%;
}
/*.tabs .tab-content { TMS-2171-2 not needed
	height: calc(100% - 2rem);
}*/
.tab-container .nav-tabs .nav-link {
	color: #6c757d;
	font-family: "Lato Bold", "Lato", sans-serif;
	font-weight: 700;
	font-size: 13px;
	height: 100%;
}

.tab-container .nav-tabs .nav-link.active {
  color: red; 
}
.tab-container .b-tabs .nav-tabs {
	border-bottom: 2px solid #6c757d;
}
.tab-container  .nav-tabs .nav-link:hover {
	border-bottom: 2px solid red !important;
	color:red;
}

.tab-container .nav-tabs {
	box-shadow: inset 3px 0px 10px #fff, inset -1px -2px 0px #999;
	background-color: white
}

.tab-container  .nav-tabs .nav-link.active {
	border-bottom: 2px solid red !important;
}

.tab-container  .nav-tabs .nav-link {
	margin-bottom: 0 !important;
	border: 0 !important;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.tab-container .nav-tabs {
  display: flex;
  flex-wrap: nowrap; 
 box-shadow: inset 3px 0px 10px #fff, inset 0px -2px 0px #999;
}
.tab-container {
  display: flex;
  flex-direction: column;
}

.tab-navigation {
  display: flex;
  align-items: center;
}

.tab-content .tab-pane.mainTab {
    position: absolute;
    width: 100%;
    max-width: 100%;
    height: calc(100% - 65px);
    overflow-x: auto;
    overflow-y: auto;
    max-height: 100%;
    margin-top: 7px;
	z-index:20;
}

/* Set sizing for vue datepicker */
.vue-date-picker-fixed-popup .vdpTable * {
	font-size: 12px;
}
.vue-date-picker-fixed-popup .vdpTimeUnit>input, .vdpTimeUnit>pre {
	font-size: 16px;
}
.vue-date-picker-fixed-popup .vdpTimeControls {
	padding: 0.5em;
}
/* ****************************** END PrimeVue ****************************** */

html {
	height: 100%;
	margin: 0;
	padding: 0;
}

li:hover {
	cursor: pointer;
	/* Changes the cursor to the pointer when hovering over a link */
}

#user_button:hover {
	cursor: pointer;
}

#logout_button:hover {
	cursor: pointer;
}

.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -60px;
	opacity: 0;
	transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

#nav-search-container {
	padding: 10px;
	background-color: #000000;
	border-radius: 10px;
}

#nav-search {
	width: 90%;
	padding: 5px;
	font-size: 16px;
	border: none;
	border-radius: 10px;
}

.nav-item {
	font-size: 14px;
}

.nav-item-submenu {
	font-size: 14px;
}

.nav-item-home {
	font-size: 14px;
}

.nav-item-top {
	font-size: 13px;
	display: inline;
	flex-shrink: 0;
}

.main-tabs {
	font-size: 13px;
	margin-top: 30px;
}

#nav_menu_bar3 {
	overflow-y: auto;
	max-height: 80vh;
}

#nav_menu_bar3::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px white;
	border-radius: 6px;
}

#nav_menu_bar3:-webkit-scrollbar-thumb {
	background: red;
	border-radius: 6px;
}

#nav_menu_bar3::-webkit-scrollbar {
	width: 6px;
}

ul.submenu {
	display: none;
}

.navbar {
	background-color: #000000;
	width: fit-content;
	height: 100%;
	color: white;
	border-radius: 10px 10px 0px 0px;
	margin: 0px;
}

.navbar-main {
	background-color: #000000;
	width: fit-content;
	height: 100%;
	color: white;
	border-radius: 10px;
	margin: 0px;
}

.navbar ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.navbar li {
	padding: 8px;
	margin-top: 10px;
}

.navbar a {
	text-decoration: none;
	color: white;
	font-family: "Lato", sans-serif;
	font-style: normal;
	font-size: 14px;
}

.navbar a:hover {
	color: #d91616;
	font-weight: bold;
	font-family: "Lato Bold", "Lato", sans-serif;
}

.icon {
	width: 30px;
	height: 30px;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
}

#sidebar {
	width: 200px;
	height: 100vh;
	background-color: #333;
	color: #fff;
	margin-left: 10px;
	padding: 20px;
}

.sidebar-menu {
	list-style: none;
	padding: 0;
}

.sidebar-menu>li {
	margin-bottom: 10px;
}

.sidebar-menu a {
	color: #fff;
	text-decoration: none;
	font-family: "Lato", sans-serif;
}

.submenu {
	margin-left: 20px;
}

.submenu ul {
	display: none;
	list-style: none;
}

.submenu ul li {
	margin-bottom: 5px;
}

.nav-item-submenu:hover ul.submenu {
	display: block;
}

#hover-div {
	width: 50px;
	height: 50px;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	line-height: 50px;
	background-color: #000000
}

#nav_menu_bar2 {
	background-color: #000000;
	display: flex;
	flex-direction: column;
	height: 100vh; /* Adjust the height */
	color: white;
}

#nav-hover-side-menu {
	background-color: #000000;
	border-left: 2px solid #323544;
	border-radius: 10px;
	border-right: 2px solid #323544;
	z-index: 1000;
}

.vertical-align {
	display: flex;
	flex-direction: row;
}

.align-items-start {
	align-items: flex-start !important;
}

dl.login-menu {
	-webkit-margin-before: 1px;
	-webkit-margin-after: 1px;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	margin: 1px;
	float: right;
}

dt.login-menu {
	border: 0;
	margin-top: 6px;
	padding: 3px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	float: right;
}

.tdActive {
	background-color: #f2f2f2;
}

.tdInactive {
	background-color: #fff;
}

@-webkit-keyframes dd-window {
	from { 
		height:0px;
	}

	to {
		height: 100px;
	}
}
@keyframes dd-window {
	from { 
		height:0px;
	}

	to {
		height: 100px;
	}
}
dd.login-menu {
	width: 168px;
	background-color: #fff;
	position: absolute;
	top: 36px;
	right: 5px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	border: 1px solid #c0c0c0;
	-webkit-box-shadow: 3px 3px 10px rgba(51, 51, 51, 0.5);
	-moz-box-shadow: 3px 3px 10px rgba(51, 51, 51, 0.5);
	box-shadow: 3px 3px 10px rgba(51, 51, 51, 0.5);
}

.password-has-expired-main-container {
	display: table;
	position: absolute;
	float: left;
	top: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	text-align: -webkit-center;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.3);
}

.password-has-expired-main-child {
	vertical-align: middle;
	margin-top: 20%;
	width: 500px;
	background-color: #ffffff;
	padding: 20px;
	border: 1px solid #c0c0c0;
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

.changePassword-button-x {
	width: 10px;
	height: 10px;
	background-image: url(images/close-x-icon.png);
	background-repeat: no-repeat;
	background-size: 10px 10px;
	background-position: center;
	background-color: transparent;
	padding: 8px;
	margin-right: 5px;
	opacity: 1;
	border: none;
	cursor: pointer;
}

#nav-header h3 {
	font-family: "Lato Bold", "Lato", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 14px;
	color: white;
	text-align: left;
	padding: 10px;
	margin-top: 10px;
	border-radius: 10px
}

#nav-header h4 {
	font-family: "Lato", sans-serif;
	font-style: normal;
	font-size: 16px;
	color: white;
	padding: 10px;
	margin-top: 40px;
	border-radius: 10px
}

.arrow {
	/*  display: none;   Initially hidden */
	cursor: pointer;
	flex-shrink: 0;
}

.scroll-container {
	white-space: nowrap;
	overflow-x: auto;
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

.scroll-container::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}

.scrollable-tabs-container, .scrollable-sub-tabs-container {
	margin: 0;
	border-radius: 0;
	overflow: hidden;
	position: relative;
	display: flex;
	overflow-x: auto;
	white-space: nowrap;
	box-shadow: inset 3px 0px 10px #fff, inset -1px -2px 0px #999;
	background-color: #ffffff;
}

.scrollable-tabs-container svg, .scrollable-sub-tabs-container svg {
	width: 24px;
	height: 24px;
	padding: 2px;
	cursor: pointer;
	color: #fff;
	border-radius: 50%;
	pointer-events: auto;
	margin-top: 18px;
}

.scrollable-tabs-container ul, .scrollable-sub-tabs-container ul {
	display: flex;
	gap: 6px;
	padding: 0;
	margin: 0;
	list-style: none;
	overflow-x: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.scrollable-tabs-container ul.dragging a, .scrollable-sub-tabs-container ul.dragging a
	{
	pointer-events: none;
}

.scrollable-tabs-container ul.dragging, .scrollable-sub-tabs-container ul.dragging
	{
	scroll-behavior: auto;
}

.scrollable-tabs-container ul::-webkit-scrollbar,
	.scrollable-sub-tabs-container ul::-webkit-scrollbar {
	display: none;
}

.scrollable-tabs-container .right-arrow, .scrollable-tabs-container .left-arrow,
	.scrollable-sub-tabs-container .sub-right-arrow,
	.scrollable-sub-tabs-container .sub-left-arrow {
	width: fit-content;
	top: 0;
	align-items: center;
	padding: 0 10px;
	pointer-events: none;
}

.scrollable-tabs-container .right-arrow.active,
	.scrollable-tabs-container .left-arrow.active,
	.scrollable-sub-tabs-container .sub-right-arrow.active,
	.scrollable-sub-tabs-container .sub-left-arrow.active {
	display: flex;
}

.scrollable-tabs-container .right-arrow, .scrollable-sub-tabs-container .sub-right-arrow
	{
	right: 0;
	background: linear-gradient(to left, #999 10%, #f8f9fa);
	justify-content: flex-end;
	height: auto;
}

.scrollable-tabs-container .left-arrow, .scrollable-sub-tabs-container .sub-left-arrow
	{
	background: linear-gradient(to right, #999 10%, #f8f9fa);
	z-index: 1;
}

.scrollable-tabs-container svg:hover, .scrollable-sub-tabs-container svg:hover
	{
	background: #333;
}

.search-box {
	background-image: url(../images/searchIcon.png);
	background-position: 10px center;
	background-repeat: no-repeat;
	padding-left: 40px; /* Adjust based on the size of your icon */
	background-size: 20px 20px;
}

.nav-item-top:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 10px; /* Set this to the length you want to remove */
	height: 2px; /* Match the border height */
	background-color: #c0c0c0; /* Match the background color */
}

.nav-item-logo {
	padding: 0;
}

#main-page-tabs {
	position: absolute;
	width: 100%;
	margin: 0 auto;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: #f4f4f4;
}

.tabHeader {
	font-family: "Lato Bold", "Lato", sans-serif;
	font-weight: 700;
	text-decoration: none;
	font-size: 13px;
}

.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
	border-color: red !important;
	color: red !important;
}

.p-tabview-nav-link:hover {
	/* Your hover styles here */
	color: red !important; /* Example: Change text color to red on hover */
	text-decoration: none !important;
	border-color: red !important;
}

.p-tabview-scrollable .p-tabview-nav-container {
	white-space: nowrap;
}

.tabcontent .tab-pane:first-of-type{
	height: calc(100% - 65px);
	overflow-x: auto;
	width: 100%;
	overflow-y: auto;
	max-height: 100%;
	max-width: 100%;
	margin-top: 7px;
	padding: 1px;
	position: absolute;
}
.fortigo-label-required::after {
  content: '*';
  color: red;
  margin-left: 3px;
}
.filemtc-input #shlusername{
	width:100%;
	color:black;
	background:white;
}
#login-mfa-dialog-form {
	 padding: 0.5rem;
	 border-radius: 4px;
	 box-shadow: 0 2px 4px rgba(0,0,0,.1);
	 max-width: 400px;
	 background: #fff;
	 
	 .form-control {
		display: block;
	
		margin-right: 0.2em;
		text-align: center;
		font-size: 14px;
		min-width: 0;
		padding: 0;
		width: fit-content;
	   
		&:last-child {
			margin-right: 0;
		}
	}
	button {
		height: 35px;		
	}
}
#login-mfa-dialog-form .ui-dialog-buttonpane button:hover {
	line-height: 1;
}
.tab-content-subtab {
	height: 100%;
}