/*
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Libre+Barcode+39);
@import url(https://fonts.googleapis.com/css?family=Angkor:300,400,700);
*/ 
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Livvic:300,400,700);


.btn.btn-account {
    --bs-btn-color: #084298;
    --bs-btn-bg: var(--bs-primary-bg-subtle, #cfe2ff);
    --bs-btn-border-color: var(--bs-primary-border-subtle, #9ec5fe);

    --bs-btn-hover-color: #084298;
    --bs-btn-hover-bg: var(--bs-primary-border-subtle, #9ec5fe);
    --bs-btn-hover-border-color: #6ea8fe;

    --bs-btn-active-color: #084298;
    --bs-btn-active-bg: #9ec5fe;
    --bs-btn-active-border-color: #6ea8fe;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
}


/*============  popup help balloon  =============*/
.balloon{position:relative;}
.balloon span{display:none;}
.balloon:hover span{display:block;position:absolute;left:25px;top:-35px;width:315px;height:350px; z-index:15;}
.balloon:hover span{padding-left:65px;padding-top:12px;padding-right:20px;background-image:url(../images/balloon.png);background-repeat:no-repeat;color:#000000;border:0px;font-size:12px;text-align:left;}

.balloon2{position:relative;}
.balloon2 span{display:none;}
.balloon2:hover span{display:block;position:absolute;left:280px;top:-205px;width:215px;height:350px; z-index:5;}
.balloon2:hover span{padding-left:70px;padding-top:10px;padding-right:50px;background-image:url(../images/balloon.png);background-repeat:no-repeat;color:#000000;border:0px;font-size:14px;text-align:left;}

.balloon3{position:relative;}
.balloon3 span{display:none;}
.balloon3:hover span{display:block;position:absolute;left:-300px;top:-25px;width:215px;height:350px; z-index:10;}
.balloon3:hover span{padding-left:40px;padding-top:10px;padding-right:80px;background-image:url(../images/balloonLeft.png);background-repeat:no-repeat;color:#000000;border:0px;font-size:14px;text-align:left;}


/*========================================================
                    Main layout styles
=========================================================*/

body {
  padding-top: 110px;  /* 135 PMT 11/18/22 to make sure menu does not interfere with top of page at wide heights.*/
}


/* MUST start from large max-width and work your way smaller  or smaller rules will be ignored */

@media (max-width: 979px) {
	/* 11/18/22 Narrow screens need more top padding on bootstrap fixed-top top navbar max-height: 125px; overflow-y: scroll; */ 
	body {
		padding-top: 115px; 
	}
	/* 121/22 allow menu to scroll on mobile in LS mode.  Shorter menu, more scrolling in Landscape mode. */ 
	.dropdown-menu{
		max-height: 100px; 
		overflow-y: auto;
	}
	
	
}



@media (max-width: 450px) {
	/* 11/18/22 Narrow screens need more top padding on bootstrap fixed-top top navbar */ 
	body {
		padding-top: 150px; 
	}
	/* 121/22 allow menu to scroll on mobile in Portrait mode.  Larger taller scrollable than in LS mode  max-height: 200px */ 
	.dropdown-menu{
		max-height: 95vh;
		overflow-y: auto;
	}

}

/* PMT 2/22/24. Works but does not look great. For narrow screens define a btn-fixed-bottom class which makes submit buttons stick to bottom */ 
@media (max-width: 979px) {
  .btn-fixed-bottom {
      position: fixed;
      left: 25px; /* Margin on the left */
      right: 60px; /* Margin on the right */
      bottom: 10px; /* Adjusted bottom margin for spacing below */
      width: auto; /* Adjust width to auto to accommodate left and right margins */
      text-align: center;
      z-index: 99; /* High z-index to keep the button on top */


  }
}


/* 10/24/22 Have dropdowns open on hover menu navbar 
Bootstrap 5 menu on hover not click. 
source: https://stackoverflow.com/questions/16214326/bootstrap-dropdown-with-hover
Also, if you turn this on, the right justify no longer works when the menus pop down.
<ul class="dropdown-menu dropdown-menu-end"> the right justify 
*/
.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove the gap so it doesn't close */ 
}


/* 11/18/22 */
.minWidth100 {
	min-width: 100px;
}

/* 11/18/22 */
.minWidth25 {
	min-width: 25px;
}

/* 11/18/22 */
.minWidth50 {
	min-width: 50px;
}


/*Core variables and mixins*/
/* PMTNEW added put-top */ 
.put-top {
	vertical-align: top;
}
.put-left {
  float: left;
  /* top | right | bottom | left */
  padding: 1px 15px 5px 1px;
}
.put-right {
  float: right;
  padding: 5px 5px 5px 5px;
}
.last-child {
  margin-bottom: 0!important;
  padding-bottom: 0!important;
}


/*=============================================================
	Tables. 
===============================================================*/


/* 12/2/22 Helps center tables within rows/cols   */
table {
    
	border-collapse: collapse;  
	border: 0px solid #C0C0C0;
	margin-left: auto;
	margin-right: auto;
}


/* PMT 6/1/16 */
th, td {
    padding: 2px;
	vertical-align: top;
	
}

/* PMT 12/29/16 Used to show customer invoice special text on submode showInvoice */
.td_ShortLine {
	line-height:8px;
}


/* PMT 6/1/16 the . makes this a class.  You can do class=td_2 for example*/
.td_2 {
    padding: 2px;
	vertical-align: top;
	border: 1px solid #C0C0C0;
}

/* PMT 12/9/16 the . makes this a class.  You can do class=td_2 for example*/
.td_5 {
    padding: 5px;
	border: 1px solid #C0C0C0;
	vertical-align: top;
}

/* PMT 12/10/16 the . makes this a class.  You can do class=td_2 for example*/
.td_6 {
    padding: 10px;
	border: 1px solid #C0C0C0;
	vertical-align: top;
}


/* PMT 6/1/16 the . makes this a class.  You can do class=td_2 for example*/
.tr_2 {
    padding: 2px;
	border: 1px solid #C0C0C0;
}


/* PMT 12/30/16*/
.td_noPad {
    padding: 0px;
	border-collapse: collapse;
}

/* PMT 6/6/16 the . makes this a class selector */
.table_2 {
	
    border: 1px solid #C0C0C0;
	/* PMTNEW This font size is important to admin and other tables  */ 
	/* 12/2/22 font: normal 13px/15px 'Lato', sans-serif;  */ 
	font-size: 13px; 
	margin-left: auto;
	margin-right: auto;
}


/* PMT 11/3/22 Use this for certain admin areas. */
.table_5 {
    border: 0px solid #C0C0C0;
	/* border-collapse: collapse; */ 
	/* 12/1/22 font: normal 13px/17px 'Lato', sans-serif; */
	font-size: 14px; 
	margin-left: auto;
	margin-right: auto;
}





/* PMT list-style was none for both ol,ul.  I separated */
ol {
	list-style-type: disc;
	list-style-position: outside;
	/* font: normal 14px/17px 'Lato', sans-serif; 
	PMTNEW 10/24/22 Like standard font and size for OL not old way
	*/ 
	
	margin-left: 2em;
	
}

/* PMT 12/21/16.  Added padding for list items.  Make sure this does not cause problems. */
li {
	padding: 3px;	
}

/* PMT list-style was none for both ol,ul.  I separated */
ul {
  list-style: none;
}

/* PMT create ul.a so we can use ul's? */
ul.aaa {
    list-style-type: disc;
	list-style-position: inside;
	font: normal 14px/19px 'Lato', sans-serif;
}

/*============  large text  =============*/
.text_huge {
  font: bold 65px/65px 'Livvic', sans-serif;
  text-shadow: 3px 3px 5px;
}
.text_hugeborder {
  font: bold 65px/65px 'Livvic', sans-serif;
  color: white;
  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black, 3px 3px 5px black;
}


.text_large {
  font: bold 50px/50px 'Livvic', sans-serif;
  text-shadow: 3px 3px 5px;
}
.text_largeborder {
  font: bold 50px/50px 'Livvic';
  font-size: calc(2.5vw);
  color: white;
  /* https://www.w3schools.com/css/css3_shadows.asp */
  /* Ways to do borders and drop shadows.  */
  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black, 3px 3px 5px black;
}

.text_large_scale_border {
  font-family: 'Livvic';
  font-weight: bold;
  font-size: calc(4.5vw - 7px);
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 3px 3px 5px black;
}

.text_medium {
  font: bold 35px/35px 'Lato', sans-serif;
  text-shadow: 3px 3px 5px;
}
.text_mediumborder {
  font: bold 35px/35px 'Lato', sans-serif;
  color: white;
  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black, 3px 3px 5px black;
}

.text_medium_scale_border {
  font-family: "Lato";
  font-weight: bold;
  /* calc(9px + 0.5vw); */
  font-size: calc(5px + 2.5vw);
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 3px 3px 5px black;
}

.text_medium2_scale_border {
  font-family: 'Lato';
  font-weight: bold;
  /* calc(9px + 0.5vw); */
  font-size: calc(5px + 1.7vw);
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 2px 2px 2px black;
}



/*============  Colors  =============*/
.color_1 {
  color: #0687ec;
}
.color_1 a {
  color: #0687ec;
}
.color_1 a:hover {
  color: #44aafa;
}
.color_2 {
  color: #59c01a;
}
.color_2 a {
  color: #59c01a;
}
.color_2 a:hover {
  color: #7fe541;
}
.color_3 {
  color: #e2e1e1;
}
.color_3 a {
  color: #e2e1e1;
}
.color_3 a:hover {
  color: #ffffff;
}
.color_4 {
  color: #0893ff;
}
.color_4 a {
  color: #0893ff;
}
.color_4 a:hover {
  color: #55b4ff;
}
.color_5 {
  color: #cf4022;
}
.color_5 a {
  color: #cf4022;
}
.color_5 a:hover {
  color: #e4725a;
}
.color_6 {
  color: #333333;
}
.color_6 a {
  color: #333333;
}
.color_6 a:hover {
  color: #595959;
}
.color_7 {
  color: #2797ef;
}
.color_7 a {
  color: #2797ef;
}
.color_7 a:hover {
  color: #6eb9f4;
}
.color_8 {
  color: #ffffff;
}
.color_8 a {
  color: #ffffff;
}
.color_8 a:hover {
  color: #e6e6e6;
}
.color_9 {
  color: #888888;
}
.color_9 a {
  color: #888888;
}
.color_9 a:hover {
  color: #aeaeae;
}
.color_10 {
  color: #777777;
}
.color_10 a {
  color: #777777;
}
.color_10 a:hover {
  color: #9d9d9d;
}
.color_11 {
  color: #a2a2a2;
}
.color_11 a {
  color: #a2a2a2;
}
.color_11 a:hover {
  color: #e6e6e6;
}
/*============  Backgrounds  =============*/
.bg_1 {
  background-color: #ffffff;
}
.bg_2 {
  background-color: #0070ba;
}
.bg_3 {
  background-color: #cf4022;
}
.bg_4 {
  background-color: #59c01a;
}
.bg_5 {
  background-color: #f3f3f3;
}
.bg_6 {
  background-color: #333333;
}
.bg_7 {
  background-color: #FFD801;
}
.bg_8 {
  background-color: #F3F557;
}
.bg_9 {
  background-color: #FFA913;
}

.bg_10 {
  background-color: #BF13FF;
}

.bg_11 {
  background-color: #DDDDDD;
}

.bg_12 {
  background-color: #008000;
}

.bg_13 {
  background-color: #C0C0FF;
}

.bg_14 {
  background-color: #FFC0C0;
}



.bg_image_tsoffice {
  background: url("../i/trepstar-logo-office-glass-door-1000.jpg") no-repeat 190px 44px;
}

.bg_image_1 {
  background: url("../images/index_img02.png") no-repeat 190px 44px;
}

.bg_image_USB5 {
  background: url("../images/5-usb-samples.jpg") no-repeat 190px 44px;
}


/*
PMT 11/18/22
Button that will bring user back to top of page.  This is displayed when they scroll down. 
source: https://mdbootstrap.com/snippets/standard/mdbootstrap/2964350
NOTE: bottom: 50%; will put the bottom of the button at 50% of the viewport height.
*/
#btn-back-to-top {
  position: fixed;
  bottom: 10px; 
  right: 10px;
  display: none;
  z-index: 99; /* Make sure it stays on top and does not overlap */
}

#btn-to-bottom {
  position: fixed;
  top: 150px;
  right: 10px;
  display: none;
  z-index: 99; /* Make sure it stays on top and does not overlap */
}

/* PMT 2/25/24. btn_flex are the black buttons but they don't have max width or min width */
.btn_flex {
  display: inline-block;
  width: 100%;
  min-height: 55px;
  padding: 15px 15px 15px 15px;
  color: #ffffff !important;
  background: #333333;
  font: normal 19px/24px 'Lato', sans-serif;
  text-align: center;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.btn_flex:hover {
  background: #0687ec;
  text-decoration: none;
}
.btn_flex .fa {
  font-size: 29px;
  line-height: 28px;
  margin-left: 12px;
}


/* PMTNEW 10/19/22 btn classes are used on home page etc */ 
.btn_1 {
  display: inline-block;
  min-width: 225px;
  min-height: 55px;
  padding: 15px 15px 15px 15px;
  color: #ffffff !important;
  background: #333333;
  font: normal 19px/24px 'Lato', sans-serif;
  text-align: center;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.btn_1:hover {
  background: #0687ec;
  text-decoration: none;
}
.btn_1 .fa {
  font-size: 29px;
  line-height: 28px;
  margin-left: 12px;
}
.btn_2 {
  display: inline-block;
  padding-bottom: 1px;
}
.btn_2.color_1 {
  border-bottom: 1px solid #0687ec;
}
.btn_2.color_1:hover {
  color: #04518e;
  border-color: #04518e;
}
.btn_2.color_2 {
  border-bottom: 1px solid #59c01a;
}
.btn_2.color_2:hover {
  color: #316b0e;
  border-color: #316b0e;
}
.btn_2.color_3 {
  border-bottom: 1px solid #e2e1e1;
}
.btn_2.color_3:hover {
  color: #b2b0b0;
  border-color: #b2b0b0;
}
.btn_2.color_4 {
  border-bottom: 1px solid #0893ff;
}
.btn_2.color_4:hover {
  color: #005da6;
  border-color: #005da6;
}
.btn_2.color_5 {
  border-bottom: 1px solid #cf4022;
}
.btn_2.color_5:hover {
  color: #7c2614;
  border-color: #7c2614;
}
.btn_2.color_6 {
  border-bottom: 1px solid #333333;
}
.btn_2.color_6:hover {
  color: #030303;
  border-color: #030303;
}
.btn_2.color_7 {
  border-bottom: 1px solid #2797ef;
}
.btn_2.color_7:hover {
  color: #0c64a9;
  border-color: #0c64a9;
}
.btn_2.color_8 {
  border-bottom: 1px solid #ffffff;
}
.btn_2.color_8:hover {
  color: #cfcfcf;
  border-color: #cfcfcf;
}
.btn_2.color_9 {
  border-bottom: 1px solid #888888;
}
.btn_2.color_9:hover {
  color: #585858;
  border-color: #585858;
}
.btn_2.color_10 {
  border-bottom: 1px solid #777777;
}
.btn_2.color_10:hover {
  color: #474747;
  border-color: #474747;
}
.btn_2.color_11 {
  border-bottom: 1px solid #a2a2a2;
}
.btn_2.color_11:hover {
  color: #727272;
  border-color: #727272;
}


/* 	============  Icons  ============= 
	Used for font awesome circular highlight areas 
	================================== */
.iconSmallest {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 15px;
  border-radius: 25px;
}


.iconSmall {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 20px;
  border-radius: 40px;
  /* PMTNEW 10/26/22 new font awesome icons upgrade helps with centering. Used on project.asp left buttons*/ 
  /* top | right | bottom | left */
  padding: 6px 0px 0px 1px;
}


.iconMedium {
  display: inline-block;
  width: 45px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  font-size: 28px;
  border-radius: 50px;
  /* PMTNEW 10/26/22 new font awesome icons upgrade helps with centering */ 
  /* top | right | bottom | left */
  padding: 9px 0px 0px 1px;
}


.icon {
  display: inline-block;
  width: 83px;
  height: 83px;
  text-align: center;
  line-height: 83px;
  font-size: 51px;
  border-radius: 100px;
  /* PMTNEW 10/26/22 new font awesome icons upgrade helps with centering */ 
  /* top | right | bottom | left */
  padding: 15px 0px 0px 0px;
}



/*============  Boxes  =============*/

/*==== pmt 12/29/16 box20 Used within admin area black info boxes but is now obsolete =====*/ 
.box_20 {
  margin-bottom: 5px;
  padding-right: 5px;
  padding-left: 5px;
  
}

.box_20 .icon {
  margin-top: 0px;
  margin-right: 15px;
}

.box_20 .iconMedium {
  margin-top: 0px;
  margin-right: 15px;
}


.box_20 h3 {
  padding-top: 5px;
  padding-right: 15px;
}


/*========================================================
                    FOOTER styles
=========================================================*/

/* PMTNEW 10/19/22 Getting rid of things we don't need  */
#footer ul.social-list {
  padding-top: 11px;
  
}

/*
@media (max-width: 767px) {
  #footer {
    text-align: center;
  }
}
*/ 


/*============  List  =============*/
/* PMTNEW 10/19/22 Getting rid of things we don't need  */

ul.list li,
ul.list li a {
  font: normal 15px/32px 'Lato', sans-serif;
  color: #0893ff;
}
ul.list li a:hover {
  color: #59c01a;
}

/*
@media (max-width: 767px) {
  ul.list {
    padding-bottom: 36px;
  }
}
*/


/*============  Social List  =============*/

/* PMTNEW 10/19/22 This is used at footer of page */
ul.social-list {
  display: inline-block;
}

ul.social-list li {
  float: left;
  margin-left: 17px;
}
ul.social-list li:first-child {
  margin-left: 0;
}
ul.social-list .fa {
  display: inline-block;
  width: 40px;
  height: 40px;
  font-size: 39px;
  line-height: 39px;
  text-align: center;
  text-decoration: none;
}
ul.social-list a {
  color: #e2e1e1;
}
ul.social-list a:hover {
  color: #0687ec;
}



.text_red
{
    
    COLOR: red;
    FONT-WEIGHT: bold;
	/* font: normal 15px/17px 'Roboto', sans-serif; */ 

}





/* PMTNEW OBSOLETE accordian like what's in bootstrap 5 */
.collapsibleTStar {
  /* orange background-color: #CF4022; */
  background-color: #777;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font: normal 19px/19px 'Lato', sans-serif;
}

/* PMTNEW obsolete accordian like what's in bootstrap 5 */
.activeTStar, .collapsibleTStar:hover {
  background-color: #CF4022;
  font: normal 19px/19px 'Lato', sans-serif;
}

/* PMTNEW obsolete accordian like what's in bootstrap 5 */
.contentCollapsible {
  padding: 0 18px;
  display: none;
  border-radius: 3px;
  overflow: hidden;
  background-color: #ffffff;
  font: normal 19px/19px 'Lato', sans-serif;
}