@charset "utf-8";

/****** This makes the Scrollbar always shown *******/
/* scrollbar always shown can prevent the website from slightly shifting to the left when scrollbar appears */
html {
    overflow-y: scroll;
}
/*********************** END ************************/ 

html, body {
	height: 100%;
}

/*** This defines the font for the entire website ***/
body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: white;  /* #f2f2f2 */
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
	min-height: 100vh;	/* A fallback if browser doesn't support the 'svh' unit below */
	min-height: 100svh; 
	display: flex;
	flex-direction: column;
	justify-content: space-between;	
}
/************************ END ***********************/ 

img {
	max-width: 100%;
	display: block;
}

.no-select {
	-webkit-user-select: none; 	 /* Safari */
	-ms-user-select: none;		 /* IE 10 and IE 11 */
	user-select: none; 			 /* Standard syntax */
}

/******** Style for Page Loader START ********/
#page_loader {
	position:fixed;
	top:0;
	left:0;
	opacity:0.9; 
	width:100%;
	height:100%;
	background:white; 
	display:flex;
	justify-content:center;
	align-items:center;
	z-index: 99;
}

#page_loader > img{
	width:280px;
}
/******************** END *********************/

/******* Style for Spinner Loader START *******/
.spinner-loader { 
	display: inline-block;
    width: 48px;
    height: 48px;
    border: 5px solid #444;
    border-bottom-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    animation: spinner-rotation 1s linear infinite;
}

@keyframes spinner-rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.spinner-container {
	display: none;
	margin-left: 1em;
	text-align: center;
	font-weight: 700;
}

.spinner-container.show {
	display: inline-block;
}
/******************** END *********************/

header {
	background-color: #f2f2f2;
	padding: 1.5em 0;
}

.center-window {
	flex-grow: 1;
	background-color: white;
}


footer {
	background-color: #2c262d;
}

.header-container, 
.top-divider-container, 
.center-window-container, 
.footer-container, 
.footer-container-index {
	width: 90%;
	max-width: 1180px;		/* Original 1063px */
	margin: 0 auto;
}

.company-logo-container {
	width: fit-content;
	cursor: pointer;
}

.netgear-logo {
	width: 180px;
	padding-left: 0.1em;
}

.dms-title {
	color: #2b262c;
	font-size: 1.05rem;
	font-weight: 600;
	margin-top: 0.35em;
	
} 

.center-window-container {
	/* height: 100%; */
	display: flex;
	flex-direction: row;
	margin: 2em auto;
}

main {
	flex-grow: 1;
	max-width: 100%;
	height: 100%;
	margin-left: 5em;
	min-width: 0;
}

.heading-title {
	font-size: 1.6rem;
	font-weight: 700;
	margin-bottom: 1.15em;
}

.input-field-array {
	display: flex;
	flex-direction: row;
	justify-content: left;
}

.input-field-element-with-ref, 
.input-field-container-with-ref {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.input-field-element {
	margin-right: 2em;
}

.input-field-element-h {
	display: flex;
	flex-direction: row;
	margin-top: 1em;
}

.input-field-element-h:first-child {
	margin-top: 0;
}

.input-field-element-dc-ooba {
	margin-right: 1.5em;
}

.input-field-element-dc-ooba:last-child {
	margin-right: 0;
}

.input-field-title {
	margin-bottom: 1em;
	white-space: nowrap;
}

.input-field-title-with-info-icon {
	display: flex;
	flex-direction: row;
	margin-bottom: 1em;
	white-space: nowrap;
}

.input-field-title-rma-check {
	width: 120px;
}

.submit-button {
	font-size: 0.9rem;
	padding: 0.5em 2em;
	border-style: none;
	color: white;
	background-color: #2b262c;
	cursor: pointer;
	margin-top: 2em;
	margin-bottom: 1.5em;
}

.button-fixed-size-small {
	width: 76px;
	height: 25px;
	font-size: 0.825rem;
	padding: 0.3em 0;
	border-style: none;
	color: white;
	background-color: #2b262c;
	cursor: pointer;
	margin-bottom: 0.4em;
	border-radius: 2px;
}

.button-fixed-size-medium {
	width: 95px;
	font-size: 0.825rem;
	padding: 0.35em 0;
	border-style: none;
	color: white;
	background-color: #2b262c;
	cursor: pointer;
	margin-bottom: 0.4em;
	border-radius: 2px;
}

.width-140px {
	width: 140px;
}

.no-data-cell {
	background-color:#ececec;
}

.button-flex-size-large {
	font-size: 0.825rem;
	padding: 0.6em;
	border-style: none;
	color: white;
	background-color: #2b262c;
	cursor: pointer;
	margin-bottom: 0.4em;
	border-radius: 2px;
}


.footer-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	color: white;
	font-size: 1rem;
	padding: 2em 0;
}


/*****************************************************
******************** Top Divider *********************
*****************************************************/
.top-divider {
	padding: 0.105em 0.25em;
	background-color: #2b262c;
}

.greeting-container {
	color: white;
	display: flex;
	flex-direction: row;
	justify-content: right;
	align-items: center;
	cursor: pointer;
	position: relative;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;		/* Disable text selection */
}

#menu-icon {
	display: none;
	margin-left: -5px;
}

#menu-icon-svg {
	width: 32px;
	color: white;
	cursor: pointer;
	vertical-align: middle;
}

.profile-logo svg {
	width: 20px;
	color: white;
	vertical-align: middle;
}

.greeting {
	padding-left: 0.2em;
}

/*********** User Menu Option 2 **********/
.user-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 5%;
	background-color: #f1f1f1;
	min-width: 168px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
  }
  
.user-menu a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
  }
  
.user-menu a:hover {
	background-color: #ddd;
}
  
.greeting-container:hover .user-menu {
	display: block;
}
/****************** END *******************/
/*****************************************************
************************ END *************************
*****************************************************/


/*****************************************************
*************** Top Divider Expansion ****************
*****************************************************/
.top-divider-expansion {
	display: none;
	padding: 0.125em 0.25em;
	background-color: #3b3b3b;		/* Original: 3b3b3b */
}

.top-divider-expansion.active {
	display: block;
}

.top-divider-expansion-container {
	width: 90%;
	max-width: 1180px;
	margin: 0 auto;
}

.expansion-arrow {
	padding-left: 0.5em;
	transition: 0.5s;
}

.expansion-arrow svg {
	width: 20px;
	color: white;
	vertical-align: middle;
}

.expansion-arrow.active {
	transform: rotateX(180deg);
}

.user-nav {
	display: flex;
	flex-direction: row;
	float: right;
}

.user-nav a {
	color: white;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin-left: 1.5em;
	text-decoration: none;
	display: block;
}
/*****************************************************
************************ END *************************
*****************************************************/


/*****************************************************
******************** Menu Section ********************
*****************************************************/
nav {
	width: 228px;   		/* This defines the size of the menu area. it was set to 20% */
	min-width: 228px;		/* This prevents the <main> pushes into menu area. it was set to 225px */
}  

nav a:link, 
nav a:visited, 
nav a:hover {
	text-decoration:none; 
	color:black;
} 

#menu-close-button {
	display: none;
}

.menu-subsection-holder {
	background-color: #eee;
	padding: 0.3em 0;
}

.menu-subsection-line {
	border: 1px solid #666;
	opacity: 0.35;
	width: 90%;		/* 65% */
	margin: 0 auto;
}

/*************** Menu Style ******************/
.vertical-menu {
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	position: relative;
}

.vertical-menu a {
    background-color: #eee;
    color: black;
    padding: 8px 10px;
    text-decoration: none;
	display: block;
}

.vertical-menu a:hover {
    background-color: #ccc;
}

.vertical-menu a.sectionHeader {
    background-color: #666;	/* #2b262c */
    color: white;
}

.menu-content {
	max-height: 0;
	overflow: hidden;
}

.menu-content.transition {
	transition: all 0.5s ease;
}

.menu-content.expanded {
	max-height: 500px;
}

/****************** END *********************/ 

/************ Plus and Minus Logo ***********/
.sectionHeader {
	position:relative;
	cursor: pointer;
	-webkit-user-select: none; 	/* Disable text selection in Safari */
	-ms-user-select: none; 		/* Disable text selection in IE 10 and IE 11 */
	user-select: none; 			/* Disable text selection (Standard syntax) */
}

.sectionHeader:before, .sectionHeader:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	margin-right: 10px;
	background: white;
	border-radius: 2px;
}

.sectionHeader:before {		/* Vertical stoke */
	right: 7px;				/* Original: 8px */
	width: 2px;				/* Original: 2px */
	height: 14px;			/* Original: 15px */
	margin-top: -7.5px;		/* Original: -7.5px */
	background: white;
	transition: all 0.5s;
}

.sectionHeader:after {		/* Horizontal stoke */
	right: 1px;				/* Original: 1px */
	width: 14px;			/* Original: 16px */
	height: 2px;			/* Original: 2px */
	margin-top: -1.5px;		/* Original: -1.5px */
	background: white;
}

.sectionHeader.expanded:before {
	height:0;
	margin-top:0;
}
/****************** END ********************/ 
/*****************************************************
************************* END ************************
*****************************************************/


/*****************************************************
********************* Index Page *********************
*****************************************************/
.center-window-index {
	flex-grow: 1;
	background-color: white;
	align-content: center;
}

.center-window-container-index {
	text-align: center;
	align-content: center;
	margin: 2em auto;
}

.top-divider-index {
	height: 3px;
	min-height: 3px;
	background: black;
}

.footer-container-index {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	color: white;
	font-size: 1rem;
	padding: 1.5em 0;
}

.user-login-window {
	width: 400px;
	height: 300px;
	background: white;
	padding: 1em;
	margin: 0 auto;
	text-align: center;
	box-shadow: 0px 0px 10px #999;
}

.user-login-title {
	font-size: 2rem;
}

.username-row {
	width: 60%;
	margin: 0 auto;
	margin-top: 2em;
	text-align: left;
}

.password-row {
	width: 60%;
	margin: 0 auto;
	margin-top: 1.5em;
	text-align: left;
}

.username-title, .password-title {
	font-size: 1rem;
}

#username-field, #password-field {
	width: 98%; 
	height: 20px;
	font-size: medium;
}

.forgot-password {
	width: 60%;
	float: right;
	font-size: 0.8rem;
	margin-top: 0.8em;
	padding-right: 0.5em;
	color: #828080;
	cursor: pointer;
	position: relative;
}

/*** Forgot Password Popup BEGIN ***/
/* Popup window */
.forgot-password-popup {
	display: none;
	visibility: hidden;
	width: 160px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 8px 0;
	position: absolute;
	z-index: 1;
	bottom: -25px;
	right: -120px;
	margin-left: -80px;
	padding: 1em;
  }
  
  /* Popup window arrow */
  .forgot-password-popup::after {
	content: "";
	position: absolute;
	top: 33px;
	left: -4px;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color:  transparent #555 transparent  transparent ;
  }

  /* Toggle this class - hide and show the popup */
  .show-forgot-password-popup {
	display: block;
	visibility: visible;
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;
  }
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
	from {opacity: 0;} 
	to {opacity: 1;}
  }
  
  @keyframes fadeIn {
	from {opacity: 0;}
	to {opacity:1 ;}
  }
/*** Forgot Password Popup END ***/

#login-button {
	width: 60.5%; 
	height: 40px;
	border-style: none;
	color: white;
	background-color: black;
	font-weight: 600;
	margin-top: 2.5em;
	letter-spacing: 1px;
	cursor: pointer;
}

.authentication-message {
	display: inline-block;	/* Make the div shrink to the size of the content */
	/* min-width: 400px; */
	padding: 0 1em;
	margin: 0 auto;
	margin-top: 1.2em;
	color: red;
}
/*****************************************************
************************* END ************************
*****************************************************/


/*****************************************************
********************* Main Page  *********************
*****************************************************/
.mainpage-image {
	margin: 3em auto;
	width: 100%;
	max-width: 467px;
	height: auto;
}

.mainpage-image-container {
	margin-right: 5em;
}
/*****************************************************
************************* END ************************
*****************************************************/


.table-container {	
	overflow-x: auto;
}


/********** Table Style for displaying query output ********/ 
table.table-style3 {
	width: 100%;
	border-width: 2px;
	border-style: inset;
	border-color: #CCC;
	border-collapse: collapse;
	font-size:small;	
	white-space:nowrap;	/* no wrapping with white space */
}
table.table-style3 th {
	border-width: 2px;
	border-style: inset;
	border-color: #CCC;
}
table.table-style3 td {
	border-width: 2px;
	border-style: inset;
	border-color: #CCC;
	padding-top: 3px;
	padding-bottom: 3px;
}

.table-style3a { 
	width: 100%;
	background: #FFF;
	border-collapse: collapse;
	font-size: small;	
	white-space:nowrap;	
}
.table-style3a td, 
.table-style3a th { 
	padding-top: 4px; 
	padding-bottom: 4px; 
	padding-left: 2px;
	padding-right: 2px;
	border: 1px solid #aaa;
	overflow: hidden;
	text-align: left;
	vertical-align: middle;
}
.table-style3a th { 
	font-weight: 500;
}
/************************* END ******************************/


/**** Table Style for displaying output message in query ****/  
table.table-style4, table.table-style5 {
	border-collapse: collapse;
	border-width: 0px;
}
/**************************** END ***************************/


/**************** Reference view size *******************/
/*For ReferenceFG.php, ReferenceSN.php, ReferenceMAC.php, ReferencePASN.php, etc */
.reference-view-size {
	width: 100%; 
	height: 90%;
	border: #2b262c;
	border-width: 2px;
	border-style: solid;
}
/**************************** END ***************************/


select:disabled {
   background-color: #EBEBE4; 
}

input:disabled {
   background-color: #EBEBE4;
}


/************** Reference Hyperlink style *********************/
.reference-hyperlink {margin-right: 8em;}
.reference-hyperlink a:link{text-decoration:underline; color:black;} 
.reference-hyperlink a:visited{text-decoration:underline; color:black;} 
.reference-hyperlink a:hover{text-decoration:underline; color:black;}
/*************************** END ******************************/


/********** Hyperlink style for OOBA report number ************/
.auto-style8 a:link{text-decoration:none; color:black;} 
.auto-style8 a:visited{text-decoration:none; color:black;} 
.auto-style8 a:hover{text-decoration:none; color:red;}
/*************************** END ******************************/


/***** Used in OOBA Report Status page for heading title *****/
.auto-style5 {
	font-size: large;
	font-weight: bold;
}

.auto-style9 {
	font-size: x-large;
	font-weight: bold;
}
/*************************** END *****************************/

/******* Used in die() or exit() function styling only *******/
.exit-title {
	font-size: large;
	font-weight: bold;
	color: red;
	margin-bottom: 1em;
}

.exit-content {
	color: red;
}
/*************************** END *****************************/


/***************** E-Learning Greeting Style *****************/
.e-learning-greeting-style {text-align: right; height: 15px;} 
.e-learning-greeting-style a:link{text-decoration:none; color: blue;} 
.e-learning-greeting-style a:visited{text-decoration:none; color: blue;} 
.e-learning-greeting-style a:hover{text-decoration:none; color:red;}  
/*************************** END *****************************/


/********************* Link Style Button *********************/
/* Use in all Reference pages to make the button looks like a hyperlink */
.link-style-button {
     background:none;
     color:inherit;
     border:none; 
     padding:0;
     font: inherit;
	 font-weight: bold;
     border-bottom:2px solid #444; 
     cursor: pointer;
}
/*************************** END *****************************/


/*****************************************************
**************** Lessons Learnt Page *****************
*****************************************************/
/***** Tab Menu used in Lessons Learnt Page ****/
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu {
  width: auto;
  border-bottom: 3px solid #666;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu ul {
  background: #ffffff;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu.align-right > ul > li > a {
  margin-right: 0;
  margin-left: -4px;
}
#cssmenu > ul > li > a {
  z-index: 2;
  padding: 18px 25px 12px 25px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  color: #444444;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  margin-right: -4px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  color: #ffffff;
}
#cssmenu > ul > li > a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 120%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  content: "";
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform: perspective(5px) rotateX(2deg);
  -webkit-transform-origin: bottom;
  -moz-transform: perspective(5px) rotateX(2deg);
  -moz-transform-origin: bottom;
  transform: perspective(5px) rotateX(2deg);
  transform-origin: bottom;
}
#cssmenu > ul > li.active > a:after,
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li > a:hover:after {
  background: #666; /* original color: #47c9af */
}
/******************** END *********************/

/** Table Style used in "Lessons Learnt" page **/  
table.table-style6 {
	border-width: 2px;
	border-style: inset;
	border-color: #CCC;
	border-collapse: collapse;
	border-right:hidden;
	border-left:hidden;
/*	font-size:small; */
	width: 100%;
}

table.table-style6 th {
	border-width: 2px;
	border-style: inset;
	border-color: #CCC;
	border-left:hidden;
	border-right:hidden;
	padding-top: 8px;
	padding-bottom: 8px;
}

table.table-style6 td {
	border-width: 2px;
	border-style: inset;
	border-color: #CCC;
	border-left:hidden;
	border-right:hidden;
	padding-top: 8px;
	padding-bottom: 8px;
}

table.table-style7 {
	border-collapse: collapse;
	border-width: 0px;
	width: 100%;
}
/********************* END *********************/

/************ Up Down Arrow Style **************/
.up-down-arrow {
    font-size: 20px;
    color: #666;
    padding: 0; 
    margin: 0; 
    display: inline-block;
}
/******************** END **********************/

.lessons-learnt-entry-link-lg {
	display: block;
}
.lessons-learnt-entry-link-sm {
	display: none;
}
/*****************************************************
************************** END ***********************
*****************************************************/


/*****************************************************
************* Lessons Learnt Upload Page *************
*****************************************************/
.input-field-title-lessons-learnt-upload {
	font-weight: bold;
	width: 120px;
}

#doc_number_field {
	margin-right: 0.5em;
}
/*****************************************************
************************* END ************************
*****************************************************/


/*****************************************************
*************** E-Learning Center Page ***************
*****************************************************/
table.table-style15 {
	border-width: 0px;
	border-style: inset;
	border-color: #CCC;
	border-collapse: collapse;
	border-right:hidden;
	border-left:hidden;
/*	font-size:small; */
	width: 100%;	
}

table.table-style15 th {
	border-width: 0px;
	border-style: inset;
	border-color: #CCC;
	border-left:hidden;
	border-right:hidden;
	padding-top: 8px;
	padding-bottom: 8px;
}

table.table-style15 td {
	border-width: 0px;
	border-style: inset;
	border-color: #CCC;
	border-left:hidden;
	border-right:hidden;
	padding-top: 8px;
	padding-bottom: 8px;
}

table.table-style15 tr:nth-child(even) {
	background: #FFF
}

table.table-style15 tr:nth-child(odd) {
	background: #F0F0F0
}

.elearning-center-add-delete-button {
	float: right;
}

#delete_submit_button {
	margin: 0.2em 0;
}

.add-submit-button {
	margin-top: 1em;
	margin-bottom: 1em;
}

.input-field-title-add-training-course {
	width: 180px;
}
/*****************************************************
************************* END ************************
*****************************************************/


/*****************************************************
**************** Change Password Page ****************
*****************************************************/
.input-field-title-change-password {
	width: 180px;
}
/*****************************************************
************************* END ************************
*****************************************************/


/*****************************************************
********************* Profile Page *******************
*****************************************************/
.profile-container {
	width: 55%;
}

.profile-element {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0.5em 0;
	border-bottom: 2px solid rgb(66, 66, 66);
}

.profile-element:first-child {
	padding-top: 0;
}
/*****************************************************
************************* END ************************
*****************************************************/


/*****************************************************
********************* Loading Bar  *******************
*****************************************************/
/* Used in Lesson Learnt Upload page, E-Learning Center page */
#loadingBar {
	width: 60%;
	height: 15px;
	border: 1px solid #ACB1B5;
	border-radius: 3px;
	background-image: 
	  repeating-linear-gradient(
		-45deg,
		#ACB1B5,
		#ACB1B5 11px,
		#eee 10px,
		#eee 20px /* determines size */
	  );
	background-size: 28px 28px;
	animation: move .8s linear infinite;
  }
  
  @keyframes move {
	0% { background-position: 0 0; }
	100% { background-position: 28px 0; }
  }
/*****************************************************
************************ END *************************
*****************************************************/


/*****************************************************
************** E-Learning Center Page ****************
*****************************************************/
#doc_number_field {
	width: 100px;
}

#course_name_field {
	width: 400px;
}
/*****************************************************
************************ END *************************
*****************************************************/


/*****************************************************
******************* PTM Tool Page ********************
*****************************************************/
.ptm-table-style1 {
	border-collapse: collapse;
	border-width: 0px;
	width: 92%;
}
/*****************************************************
************************ END *************************
*****************************************************/


/*****************************************************
******************* RMA FA Section *******************
*****************************************************/
.select-upload-header-with-template {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.template-hyperlink {margin-right: 0; font-size: 0.95rem;}
.template-hyperlink a:link{text-decoration:underline; color:#555;} 
.template-hyperlink a:visited{text-decoration:underline; color:#555;} 
.template-hyperlink a:hover{text-decoration:underline; color:#555;}

.supplier-field-for-admin {
	padding: 0.3em 0.5em;
	width: fit-content;
	border: dashed;
	border-color: blue;
}

/********* RMA FA Detail Report Upload Page *********/
.divider-line {			/* Solid border separator line */
	width: 60%;
	margin-left: 0;		/* This makes it align to left */
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	border-top: 1px solid #000000;
}


.hyperlink-style1:link{text-decoration:underline; color:black;} 
.hyperlink-style1:visited{text-decoration:underline; color:black;} 
.hyperlink-style1:hover{text-decoration:underline; color:black;}
/*************************** END ******************************/

.inputWrapper {
	height: 25px;
	display: flex;
	flex-direction: row;
	margin-bottom: 0.8em;
}

#add-more-field-button {
	padding: 0.2em 0.5em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.rma-fa-upload-button, 
.rma-rgm-upload-button,
.rma-fa-return-upload-button {
	margin-top: 0.5em;
}

.sn-field-delete-button {
	width: 20px;
	margin-left: 0.5em;	
	cursor: pointer;
}

.sn-field-label {
	margin-right: 0.35em;
	align-content: center;
}

.sn-validation-field {
	color: red;
	align-content: center;
	margin-left: 1em;
}

.table-style21 { 
	width: 300px;
	background: #FFF;
	border-collapse: collapse;
	font-size: 0.85rem;	
	white-space:nowrap;	
}

.table-style21 td {
	border: 1px solid #aaa;
	padding: 4px;
}
/******************* END *********************/

/*********** RMA FA Query Page ***************/ 
.select-option-bold {
	font-weight: bold;
}

.input-field-element-rma-fa {
	margin-right: 1.5em;
}

.input-field-element-rma-fa:last-child {
	margin-right: 0;
}

.year-element-rma-fa {
	margin-left: -5px;
}

.info-icon {
	margin-top: 3px;
	cursor: pointer;
	position: relative;
}

.input-field-title-two-lines {
	margin-top: -18px;
}

/*** Time Range Info Popup BEGIN ***/
/* Popup window */
.time-range-info-popup,  
.table-format-info-popup,
.month-info-popup, 
.year-info-popup, 
.time-frame-info-popup {
	display: none;
	visibility: hidden;
	width: 140px;
	background-color: #555;
	color: #fff;
	border-radius: 6px;
	padding: 8px 0;
	position: absolute;
	z-index: 1;
	bottom: -22px;
	right: -170px;
	margin-left: -80px;
	padding: 1em;
	font-size: small;
	white-space: normal;
}
  
/* Popup window arrow */
.time-range-info-popup::after, 
.table-format-info-popup::after, 
.month-info-popup::after,
.year-info-popup::after, 
.time-frame-info-popup::after {
	content: "";
	position: absolute;
	top: 22px;
	left: -4px;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color:  transparent #555 transparent  transparent ;
}

/* Toggle this class - hide and show the popup */
.show-time-range-info-popup, 
.show-table-format-info-popup,
.show-month-info-popup, 
.show-year-info-popup, 
.show-time-frame-info-popup {
	display: block;
	visibility: visible;
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
	from {opacity: 0;} 
	to {opacity: 1;}
}

@keyframes fadeIn {
	from {opacity: 0;}
	to {opacity:1 ;}
}
/*** Time Range Info Popup END ***/


/*********** Toggle Switch START **********/
.toggle-switch-container {
	text-align: left;
}

.toggle-switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 20px;
}
  
.toggle-switch input { 
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.toggle-slider:before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 3px;
	bottom: 2px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .toggle-slider {
	background-color: #2196F3;		/* original:  */
}

input:focus + .toggle-slider {
	box-shadow: 0 0 1px #2196F3;	/* original: #2196F3 */
}

input:checked + .toggle-slider:before {
	-webkit-transform: translateX(28px);
	-ms-transform: translateX(28px);
	transform: translateX(28px);
}

/* Rounded sliders */
.toggle-slider.round {
	border-radius: 22px;
}

.toggle-slider.round:before {
	border-radius: 50%;
}
/*********** Toggle Switch END ***********/

.rma-fa-query-time-range {
	display: none;
	flex-direction: row;
	justify-content: left;
	margin-top: 1.5em;
}

.rma-fa-query-time-range-fieldset {
	border:#444;
	border-style: solid;
	border-width: 1px;
	border-radius: 2px;
	padding: 0.5em;
	margin-right: 1.5em;
}

.date-group-fieldset {
	border:#d3d3d3;
	border-style: solid;
	border-width: 1px;
	border-radius: 2px;
	padding: 0.25em 0.5em;
	margin-top: -1.25em;
}

.date-group-fieldset2 {
	border:#d3d3d3; 
	border-style: solid;
	border-width: 1px;
	border-radius: 2px;
	padding-top: 0.5em;
	padding-bottom: 0.25em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	margin-top: -1.4em;
	margin-right: 1em;
}

.date-group-fieldset2.change-color {
	border: #2196F3;
	border-style: solid;
	border-width: 1px;
	border-radius: 2px;
}

.date-group-legend {
    margin: 0 auto;
	font-size: 0.75rem;
	color: #6d6d6d;
	font-weight: bold;
	padding: 0 0.8em;
}

.date-group-legend.change-color {
	color: #2196F3;
}

.date-group-elements {
	display: flex;
	flex-direction: row;
	justify-content: left;
}

.rma-fa-query-time-range-from {
	display: flex;
	flex-direction: row;
	justify-content: left;
}

.rma-fa-query-time-range-legend {
    margin: 0 auto;
	font-size: small;
	font-weight: bold;
	padding: 0 0.8em;
}

.ram-fa-query-time-range-year {
	margin: 0;
}

.rma-fa-query-table-format {
	display: none;
	margin-top: 1.5em;
	margin-right: 0.3em;
	max-width: 760px;
}

.rma-fa-query-table-format-legend {
    margin: 0 auto;
	font-weight: bold;
	padding: 0 0.8em;
}

.rma-fa-query-table-format-heading {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-left: 0.2em;
	margin-bottom: 0.5em;
}

.rma-fa-query-table-format-select-clear-all {
	display: flex;
	flex-direction: row;
	font-size: small;
	cursor: pointer;
}

.rma-fa-query-table-format-field {
	display: flex;
	flex-wrap: wrap;
}

.rma-fa-query-table-format-item {
	margin-right: 1em;
	accent-color: #34495e;
}

.export-button-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.table-action-section {
	display: flex;
	flex-direction: row;
}

.table-expand-button {
	font-size: small;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
	margin: auto 2em;
}

.export-button {
	font-size: small;
	font-weight: 700;
	cursor: pointer;
	margin: auto 0.1em;
	text-decoration:underline;
}

.export-button a:link{text-decoration:underline; color:black;} 
.export-button a:visited{text-decoration:underline; color:black;} 
.export-button a:hover{text-decoration:underline; color:black;}

.table-container-rma {	
	overflow-x: auto;
}

.table-container-rma-fa {	
	overflow: auto;
	max-height: 350px;
	border: 2px solid #2b262c;
}

.table-container-rma-fa2 {	
	overflow: auto;
	max-width: 100%;		/* 760px */
	max-height: 350px;
	border: 2px solid #2b262c;
}

#table-rma-fa {
	width: fit-content;
}

thead th {
	background-color:#ddd;
	z-index: 20;
	top: 0;
	position: sticky;
}

tbody td {
	background-color: white;
}

/*
.supplier_col, 
.sku_col,
.sn_col {
	left: 0;
	position: sticky;
}
*/

.supplier_col {
	min-width: 62px;
}

.fixed-header {
	z-index: 50;
}

.odm_confirmed_fail_symptom_col {
	white-space: normal;
	min-width: 180px;
}

.root_cause_col {
	white-space: normal;
	min-width: 180px;
}

.action_col {
	white-space: normal;
	min-width: 250px;
}

.download-col {
	white-space: normal;
	min-width: 75px;
	text-align: center;
}

.click-link-wording {
	font-size: small;
}


table.table-style-rma {
	width: 100%;
	border-width: 2px;
	border-style: inset;
	border-color: #CCC;
	border-collapse: collapse;
	font-size: 0.8rem;	
	white-space: nowrap;
	overflow: scroll;
}
table.table-style-rma th {
	border-width: 2px;
	border-style: inset;
	border-color: #CCC;
}
table.table-style-rma td {
	border-width: 2px;
	border-style: inset;
	border-color: #CCC;
	padding: 3px;
}

.rma-fa-query-table-note {
	margin-top: 15px;
	font-size: 0.9rem;
}
/****************** END **********************/

#fa-da-options {
	display: none;
}

#fa-da-options.show {
	display: block;
}

.fa-da-options-item {
	font-size: 1rem;
}

.fa-da-options-item2 {
	font-size: 0.85rem;
	margin-right: 2em;
}

.fa-da-options-container {
	display: flex;
	flex-direction: row;
}

#option_rgm_time_checkbox {
	display: none;
}

#option_rgm_time_checkbox.show {
	display: block;
}


.table-chart-title {
	width: 88%;
	font-size: 1.1rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 0.8em;
	margin-top: 1em;
}

.table-chart-title.width-100pc {
	width: 100%;
}

.table-style20 { 
	width: 88%;
	background: #FFF;
	border-collapse: collapse;
	font-size: 0.79rem;	
	white-space:nowrap;	
}

.table-style20 td, 
.table-style20 th { 
	padding: 4px; 
	padding-right: 1px;
	border: 1px solid #aaa;
	overflow: hidden;
	text-align: left;
	vertical-align: middle;
}
.table-style20 th { 
	cursor: pointer;
	font-weight: 500;
}
.table-header-content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.table-style20 tr:hover {
	transition: all 0.5;
}

/******** Table Sorting Icon (JS) *********/
.sorting-icon-container {
	position: relative;
  	top: 0;
  	left: 0;
	min-width: 15px;
	align-content: center;
	margin-left: 2px;
}
.sorting-icon {
	position: relative;
	top: 0;
	left: 0;
}
.sorting-icon.hide {
	visibility: hidden;
}
.sorting-arrow-up {
	position: absolute;
	top: 0px;
	left: 0px;
	visibility: hidden;
	margin: auto, 0;
	align-content: center;
}
.sorting-arrow-up.show {
	visibility: visible;
	margin: auto, 0;
	align-content: center;
}
.sorting-arrow-down {
	position: absolute;
	top: 0px;
	left: 0px;
	visibility: hidden;
}
.sorting-arrow-down.show {
	visibility: visible;
}
/****************** END ******************/

/******* Table Sorting Icon (PHP) ********/
/* .sorting-icon-container2 {
	min-width: 15px;
	align-content: center;
	margin-left: 2px;
} */
/****************** END ******************/

.chart-container {
	padding: 2em;
	max-width: 500px;
	margin-top: 1.2em;
	border: 1px solid #2c262d;
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
	max-height: 380px;
	overflow-y: hidden;
	overflow-x: auto;
}

.chart-container.width-600 {
	max-width: 600px;
}
.chart-container.width-700 {
	max-width: 100%;		/* Original: 765px */
}
.chart-container.width-100pc {
	max-width: 100%;
}

.chart-container-box {
	max-height: 350px;
}

.chart-container-box.padding-bottom {
	padding-bottom: 27px;
}

.mainpage-main .chart-container {
	margin: 0.5em auto;
	margin-bottom: 2.5em;
	margin-left: 3.5em;
}

.chart-title {
	color: #666;
	text-align: center;
	margin-bottom: 1em;
}
/*****************************************************
************************ END *************************
*****************************************************/


/*****************************************************
******************* RMA RGM Section ******************
*****************************************************/
.margin-top--20px {
	margin-top: -16px;
}

.chart-container-fcd, 
.chart-container-f-attr {
	padding: 2em;
	max-width: 600px;
	margin-top: 1.2em;
	border: 1px solid #2c262d;
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
}

.hyperlink-style2 {cursor: pointer;}
.hyperlink-style2:link{text-decoration:none; color:black;} 
.hyperlink-style2:visited{text-decoration:none; color:black;} 
.hyperlink-style2:hover{text-decoration:none; color:red;}

#rgm-da-options-monthly-test-qty {
	display: none;
}

#rgm-da-options-monthly-test-qty.show {
	display: block;
}

#rgm-da-options-failure-rate {
	display: none;
}

#rgm-da-options-failure-rate.show {
	display: block;
}

.rgm-da-options-item {
	font-size: 0.85rem;
}

.rgm-da-options-checkbox {
	width: 14px;
    height: 14px;
	accent-color: #34495e;
}

.rgm-da-options-checkbox, 
.rgm-da-options-item-label, 
#option_qty_field {
	vertical-align: middle;
}

.rgm-da-table-options-note {
	margin-top: 8px;
	font-size: 0.85rem;
}

#rgm-da-tester {
	display: none;
}
#rgm-da-tester.show {
	display: block;
}

#rgm-da-model {
	display: none;
}
#rgm-da-model.show {
	display: block;
}

#rgm-da-failure-attr {
	display: none;
}
#rgm-da-failure-attr.show {
	display: block;
}

.rgm-da-fcd-margin-right {
	margin-right: 1.4em;
}

button {
	background: none;
	appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	-moz-appearance: none;
	border: none;
	cursor: pointer;
}

.page-btn {
	background: #ddd;
	color: #2c303a;
	height: 35px;
	border-radius: 2px;
	padding: 0 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	transition: background 0.3s ease;
	margin: 0 2px
	
}
  
.page-btn:first-of-type {
	margin-left: 0;
}
  
.page-btn:last-of-type {
	margin-right: 0;
}

.page-btn:not([class$="-page"]) {
	width: 35px;
}

.pagination-buttons {
	display: flex;
	align-items: center;
}

.page-btn[class*="-page"] {
	background: #ccc;
	font-size: 0.6em;
	font-weight: 700;
}

.page-btn.active {
	background: #717790;
	color: #fff;
}

.page-btn[disabled] {
	opacity: 0.3;
}

/************** Loader Spinner Modal ****************/
/* Modal (background) - Full window size */
.spinner-loader-modal, 
.popup-message-modal {
	display: none; 							 /* Hidden by default */
	position: fixed; 						 /* Stay in place */
	z-index: 999; 							 /* Always on top */
	left: 0;								 /* Position */
	top: 0;
	width: 100%; 							 /* Full width */
	height: 100%; 							 /* Full height */
	overflow: auto; 						 /* Enable scroll if needed */
	background-color: rgb(0,0,0); 			/* Fallback color */
	background-color: rgba(0,0,0,0.4); 	/* Black w/ opacity */
	align-content: center;
  }
  
/* Modal Content */
.spinner-loader-modal-content {
	background-color: #fefefe;
	margin: auto;
	padding: 50px;
	max-width: 200px;
	text-align: center;
	border: 1px solid #888;
	border-radius: 5px;
}

#progress-status-sub-text {
	white-space: nowrap;
	margin-left: -25px;
}
/************************ END ***********************/ 


/*************** Popup Message Modal ****************/
.popup-message-center-window {
	background-color: #fefefe;
	margin: auto;
	
	max-width: 350px;
	text-align: center;
	border: 1px solid #888;
	border-radius: 5px;
}

.popup-message-x-button {
	color: #2b262c;
	font-size: 3rem;
	width: 35px;
	height: 35px;
	line-height: 35px;	/* without this, text won't be vertically centered*/
	text-align: center;
	margin-left: auto;	/* this makes the div align to right */
	cursor: pointer;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;	/* Disable text selection */
}

.popup-message-title {
	font-size: 1.4rem;
	font-weight: 700;
}

.popup-message-content {
	margin: 1em 2em;
	margin-bottom: 2em;
}
/************************ END ***********************/ 


/************ Popup Chart Display Modal *************/
/* Modal (background) - Full window size */
.chart-modal {
	display: none; 							 /* Hidden by default */
	position: fixed; 						 /* Stay in place */
	z-index: 999; 							 /* Always on top */
	left: 0;								 /* Position */
	top: 0;
	width: 100%; 							 /* Full width */
	height: 100%; 							 /* Full height */
	overflow: auto; 						 /* Enable scroll if needed */
	background-color: rgb(0,0,0); 			/* Fallback color */
	background-color: rgba(0,0,0,0.4); 	/* Black w/ opacity */
	align-content: center;
}
  
/* Modal Content */
.chart-modal-content {
	background-color: #fefefe;
	margin: auto;
	padding: 5px;
	max-width: 650px;
	height: 470px;
	text-align: center;
	border: 1px solid #888;
	border-radius: 5px;
	overflow-y: auto;
}
/************************ END ***********************/  

.fail-code-chart-container {
	max-width: 600px;
	height: 420px;
	margin: auto;
}

.fail-code-chart2-container {
	max-width: 580px;
	margin: auto;
}

#modal-x-button {
	color: #2b262c;
	font-size: 3rem;
	width: 35px;
	height: 35px;
	line-height: 35px;	/* without this, text won't be vertically centered*/
	text-align: center;
	margin-left: auto;	/* this makes the div align to right */
	cursor: pointer;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;	/* Disable text selection */
}

.fail-code-distribution-col {
	width: 140px;
}

.last-col-center th:last-child, 
.last-col-center td:last-child {
	text-align: center;
}

.table-no-border1 {
	width: 380px;
}

#fail-code-table-subtitle {
	font-size: 0.85rem;
	margin-top: 0.5em;
	margin-bottom: 1.5em;
}

#fail-code-table-container {
	width: 400px;
	border: 2px solid #444;
	max-height: 340px;
	overflow-y: scroll;
	margin: 0 auto;
}

.table-style22 { 
	width: 100%;
	background: #FFF;
	border-collapse: collapse;
	font-size: 0.79rem;	
	white-space:nowrap;	
	margin: 0 auto;
}

.table-style22 td, 
.table-style22 th { 
	padding: 4px; 
	padding-right: 1px;
	border: 1px solid #aaa;
	overflow: hidden;
	text-align: left;
	vertical-align: middle;
}
.table-style22 th {
	cursor: pointer;
	font-weight: 700;
}

/*** Export Options Popup BEGIN ***/
.export-options-section {
	margin-top: 2px;
	position: relative;
}

/* Popup window */  
.export-options-popup {
	display: none;
	visibility: hidden;
	width: 125px;
	background-color: #555;
	color: #fff;
	border-radius: 2px;
	padding: 8px 0;
	position: absolute;
	z-index: 1;
	bottom: 25px;
	right: 0px;
	margin-left: -80px;
	padding: 0.5em 1em;
	font-size: small;
	white-space: normal;
}
  
/* Popup window arrow */
.export-options-popup::after {
	content: "";
	position: absolute;
	top: 74px;
	left: 123px;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color:  transparent #555 transparent  transparent;
	transform: rotate(270deg);
}

/* Toggle this class - hide and show the popup */
.show-export-options-popup {
	display: block;
	visibility: visible;
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
	from {opacity: 0;} 
	to {opacity: 1;}
}

@keyframes fadeIn {
	from {opacity: 0;}
	to {opacity:1 ;}
}
/*** Export Options Popup END ***/

.export-options-item {
	font-size: small;
	width:fit-content;
	cursor: pointer;
	padding: 0.2em 0;
}

.export-options-item-header {
	font-size: small;
	font-weight: 700;
	padding: 0.2em 0;
}

.table-container-box.x-scrollable {
	max-width: 755px;
	overflow-x: auto;
	border: 1px solid #2c262d;
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
}
/*****************************************************
************************ END *************************
*****************************************************/


/*****************************************************
************* RMA FA Return Data Section *************
*****************************************************/
.input-field-element-rma-rd {
	margin-right: 1.5em;
}

.input-field-element-rma-rd:last-child {
	margin-right: 0;
}

.duplicate-upload-display-table {
	font-size: 0.9rem;
}

.tracking-card {
	background-color: #e6e6e681;
	padding: 1em;
	border-radius: 8px;
}

.tracking-card-items-holder {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.tracking-card-item {
	display: flex;
	flex-direction: column;
	
}

.tracking-card-tracking-no {
	width: 115px;
	overflow-wrap: break-word;
}

.tracking-card-from-dc {
	width: 75px;
}

.tracking-card-to-odm {
	width: 70px;
}

.tracking-card-ship-date {
	width: 90px;
}

.tracking-card-receive-date {
	width: 90px;
	white-space: nowrap;
}

.tracking-card-receive-date-pending {
	cursor: pointer;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}



.tracking-card-receive-date-pending:hover span:last-child {
	color: red;
}

/************** Receive Date Modal ****************/
.receive-date-modal {
	display: none;
	position: fixed;
	z-index: 999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.4);
	align-content: center;
}

.receive-date-modal-content {
	background-color: #fefefe;
	margin: auto;
	padding: 35px 35px 20px;
	max-width: 650px;
	width: 90%;
	border: 1px solid #888;
	border-radius: 5px;
	position: relative;
}

.receive-date-modal-close-btn {
	position: absolute;
	top: 8px;
	right: 12px;
	font-size: 1rem;
	cursor: pointer;
	color: #555;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.receive-date-modal-close-btn:hover {
	color: #000;
}

.receive-date-modal-section {
	margin-bottom: 0.5em;
}

.receive-date-modal-section-title {
	margin-bottom: 0.8em;
	font-size: 0.95rem;
}

.receive-date-modal-info-row {
	display: flex;
	align-items: flex-start;
	margin-bottom: 0.45em;
	font-size: 0.9rem;
}

.receive-date-modal-info-label {
	min-width: 95px;
	white-space: nowrap;
}

.receive-date-modal-sn-table-wrapper {
	max-height: 180px;
	overflow-y: auto;
	border: 1px solid #ddd;
	border-radius: 3px;
	margin-top: 0.4em;
}

.receive-date-modal-sn-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
}

.receive-date-modal-sn-table thead th {
	position: sticky;
	top: 0;
	background-color: #f0f0f0;
	padding: 4px 10px;
	text-align: left;
	border-bottom: 1px solid #ccc;
	white-space: nowrap;
}

.receive-date-modal-sn-table tbody td {
	padding: 3px 10px;
	border-bottom: 1px solid #eee;
	white-space: nowrap;
}

.receive-date-modal-sn-table tbody tr:last-child td {
	border-bottom: none;
}

.receive-date-modal-divider {
	border: none;
	border-top: 1px solid #ddd;
	margin: 1em 0;
}

.receive-date-modal-body {
	text-align: center;
	margin-bottom: 1.2em;
}

.receive-date-input {
	padding: 5px;
	font-size: 0.9rem;
	text-align: center;
}

.receive-date-modal-footer {
	text-align: center;
}

.receive-date-modal-msg {
	margin-top: 8px;
	font-size: 0.85rem;
	color: red;
	min-height: 1.2em;
}

.receive-date-modal-confirm-btn {
	background-color: #2b262c;
	color: white;
	border: none;
	padding: 0.5em 2em;
	border-radius: 2px;
	cursor: pointer;
	font-size: 0.9rem;
}

.receive-date-modal-confirm-btn:hover {
	background-color: #48404a;
}
/************************ END ***********************/

.tracking-card-circle-progress {
	max-height: 40px;
	margin-top: -18px;
	margin-left: -10px;
	margin-right: -10px;
}

.tracking-card-overall-status {
	width: 110px;
	white-space: nowrap;
}

.tracking-card-overall-status2 {
	width: 85px;
	padding: 0.05em 0.5em;
	border-radius: 20px;
	white-space: nowrap;
	
	&.bgColorAmber {
			background-color: goldenrod;
	}

	&.bgColorGreen {
		background-color: green;
	}
}

.tracking-card-view-detail-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: fit-content;
	cursor: pointer;
	position: relative;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	white-space: nowrap;
}

.tracking-card-timeline-section {
	display: none;
}

.tracking-card-timeline-section.active {
	display: block;
}

.tracking-card-spacer {
	height: 1.5em;
}

.tracking-card-header-sn-search {
	margin-bottom: -0.65em;
}

.timeline-section {
	padding-top: 1.5em;
	padding-bottom: 2.5em;
	border-radius: 8px;
}

.timeline-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-right: 1em;
	font-size: small;
	margin-bottom: 0.5em;
}

.timeline-title {
	margin-bottom: 0.5em;
	font-size: small;
	margin: auto 0;
}

.timeline-title-sku {
	margin-left: 1.5em;
}

.timeline-status {
	padding: 0.25em 0.5em;
	border-radius: 20px;
	white-space: nowrap;

	&.bgColorAmber {
		background-color: #FBE9BF;		/* #FBE9BF */
	}

	&.bgColorGreen {
		background-color: #CDEBC5;		/* #CDEBC5 */
	}
}

.timeline-holder {
	width: 90%;
	margin-left: -0.15em;
	font-size: small;
}

.horizontal.timeline {
	display: flex;
	position: relative;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	
	&:before {
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: .2em;
		background-color: #dcdcdc;
	}
	
	.timeline-line {
		display: block;
		position: absolute;
		width: 0%;
		height: .2em;
		background-color: #8897ec;

		&.first-step {width: 0%;}
		&.second-step {width: 33%;}
		&.third-step {width: 66%;}
		&.fourth-step {width: 99%;}
	}
	
	.timeline-steps {
		display: flex;
		position: relative;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		
		.timeline-step {
			display: block;
			position: relative;
			bottom: calc(100% + 1em);
			padding: .33em;
			margin: 0 2em;
		
			box-sizing: content-box;
			color: #dcdcdc;
			background-color: currentColor;
			border: .25em solid white;
			border-radius: 50%;
			z-index: 500;

			&:first-child {
				margin-left: 0;
			}

			&:last-child {
				margin-right: 0;
			}

			span, .timeline-date {
				position: absolute;
				top: calc(100% + 0.5em);
				left: 50%;
				transform: translateX(-50%);
				white-space: nowrap;
				color: #000;
				opacity: .4;
			}

			.timeline-date {
				top: calc(100% + 1.75em);
			}

			&:first-child {
				span {
					transform: translateX(-4%);
				}
			}

			&.active {
				color: #8897ec;
				span {
					opacity: 1;
				}
			}

			&.current {
				&:before {
					content: '';
					display: block;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);

					padding: 1em;
					background-color: currentColor;
					border-radius: 50%;
					opacity: 0;
					z-index: -1;

					animation-name: animation-timeline-current;
					animation-duration: 2s;
					animation-iteration-count: infinite;
					animation-timing-function: ease-out;
				}

				span {
					opacity: 1;
				}
			}

			&.complete {
				color: #71CB35;
			}
		}	
	}
}

@keyframes animation-timeline-current {
	from {
		transform: translate(-50%, -50%) scale(0);
		opacity: 1;
	}
	to {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0;
	}
}


#rma-fa-return-da-std-fields {
	display: none;
	margin-top: 1em;
}

#rma-fa-return-da-std-fields.show {
	display: block;
}
/*****************************************************
************************ END *************************
*****************************************************/


/*****************************************************
************************ END *************************
*****************************************************/
.table-style30 { 
	width: 88%;
	background: #FFF;
	border-collapse: collapse;
	font-size: 0.79rem;	
	white-space:nowrap;	
}

.table-style30 th { 
	top: 0;
	position: sticky;
	background-color:#ddd;
	padding: 4px; 
	border: 1px solid #aaa;
	overflow: hidden;
	text-align: left;
	vertical-align: middle;
}

.table-style30 td { 
	padding: 4px; 
	border: 1px solid #aaa;
	overflow: hidden;
	text-align: left;
	vertical-align: middle;
}

.table-style30 tr:last-child {
	font-weight: 700;
}

.first-col-header-sticky {
	left: 0;
	position: sticky;
	z-index: 50;
	box-shadow: 1px 0px 0px 0px black;
}

.first-col-sticky {
	left: 0;
	position: sticky;
	box-shadow: 1px 0px 0px 0px black;
}

.table-cell-bg-grey {
	background-color: #eee; 
}
/*****************************************************
************************ END *************************
*****************************************************/


.input-field-element-last-child {
	margin-right: 0;
}

.coming-soon {
	margin-top:	3em;
	font-size: x-large;
	text-align: center;
}


/*****************************************************
********************* Media Query ********************
*****************************************************/
@media (max-width: 500px) {
	#doc_number_field {
		width: 35%;
	}
	
	#course_name_field {
		width: 100%;
	}
}


@media (max-width: 675px) {

	.input-field-array {
		flex-direction: column;
	}
	
	.input-field-array .input-field-title, 
	.input-field-array .input-field-title-with-info-icon {
		margin-top: 1em;
		margin-bottom: 0.2em;
	}

	.input-field-array .input-field-title-1st-child {
		margin-top: 0;
	}

	.input-field-element-h {
		flex-direction: column;
	}

	/************ Index Page *************/
	.footer-container-index {
		flex-direction: column;
	}

	.user-login-window {
		width: 300px;
	}
	/*************** END *****************/

	.mainpage-main img {
		width: 75%;
	}

	.footer-container {
		flex-direction: column;
	}

	.reference-hyperlink 
	{
		margin: 0;
	}

	.profile-container {
		width: 100%;
	}

	#description_field {
		width: 80%;
	}

	.coming-soon {
		font-size: large;
	}

	.lessons-learnt-entry-link-lg {
		display: none;
	}
	.lessons-learnt-entry-link-sm {
		display: block;
	}

	/*********** RMA FA Query Page ***********/
	.toggle-switch-container {
		text-align: left;
	}
	/****************** END ******************/
}


@media (max-width: 875px) {
	
	main {
		margin-left: auto;
		margin-right: auto;
	}

	.top-divider-container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	#menu-icon {
		display: block;
	}

	nav {
		position: absolute; 
		top: 0px;
		left: -225px;
		z-index: 99;
		width: 225px;
		height: 100vh;
		overflow: hidden;
		background: rgba(255, 255, 255, 0.95);
		transition: left 0.5s; 
		box-sizing: border-box;		/* This excludes padding width */
		padding-bottom: 2em;
	}
	
	nav.active {
		left: 0px;
		height: auto;
		min-height: 100vh;
		overflow: visible;
	}
	
	#menu-close-button {
		display: block;
		color: #2b262c;
		font-size: 3rem;
		width: 35px;
		height: 35px;
		line-height: 35px;	/* without this, text won't be vertically centered*/
		text-align: center;
		margin-left: auto;	/* this makes the div align to right */
		margin-right: 8px;
		margin-top: 16px;
		margin-bottom: 83px;
		cursor: pointer;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;	/* Disable text selection */
	}

	.mainpage-main .chart-container {
		margin: 0.5em auto;
		margin-bottom: 2.5em;
	}
	
	.mainpage-image-container {
		margin: 0;
	}
}

/*****************************************************
************************* END ************************
*****************************************************/


/*****************************************************
************** For Firefox Browser Only **************
************ Other Browsers Not Affected *************
*****************************************************/
/* Use in RMA FA Return Data Query and Tracking pages */
@-moz-document url-prefix() {
	.input-field-element-rma-rd {
		margin-right: 1.35em;
	}
}
/*****************************************************
************************* END ************************
*****************************************************/