@charset "utf-8";
/* ************ Reset rules ***********************************/
* { margin: 0px; padding: 0px }



/*********  CSS Page Setup Definition for TYE LLC  ********** 
*************************************************************
***********  Main Body Setup Definition   - OLD background-color:#575c7a;********************/ 
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	background-color:#FEE7B3;
	background-repeat: repeat-y;
   	background-image: url(../images/png/main/site_bg_body.jpg);
	margin: 0px;
	padding: 0px;
	position: relative;
    z-index: -1; /* Put the site background behind all other elements */
}
.home { }
#home { }

/************* Rules for any page with "frameBframe" ID on body *************/
body#frameBframe {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	background-color:#FEE7B3;
	background-repeat: no-repeat;
  	background-image: url(../images/videos/background/MP4/mixture_bg_video_.mp4);
	margin: 0px;
	padding: 0px;
	position: relative;
    z-index: -1; /* Put the site background behind all other elements */
}



/*(1b)****************  Background Page Video Media Setup Definition  **********************/
video {
  background-color: black;
  background-image: url(../images/videos/background/MP4/mixture_bg_video_.mp4);
  background-position: center center;
  background-size: contain;
}
#myvid { position: fixed; top: 0; right: 0; width: 100%; height: 100%;
/*  bottom: 0; 
    left: 0;  
    object-fit: cover;  */
}
@media (min-aspect-ratio: 16/9) {
  #myvid {
    width: 100%;
    height: 300%; top: -100%;
    /* or height: 200%; top: -50%;
       or height: 400%; top: -150%;
    height: auto;  /* actually taller than viewport */
  }
}
@media (max-aspect-ratio: 16/9) {
  #myvid {
    width: 300%; left: -100%;
    height: 100%;
    /* or width: 200%; left: -50%;
       or width: 400%; left: -150%;
    width: auto; /* actually wider than viewport */
  }
}
#video-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;
  z-index: -1; /* Put the video behind all other elements except the body background element. */
}
#video-bg > video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* 1. No object-fit support: */
@media (min-aspect-ratio: 16/9) { #video-bg > video { height: 300%; top: -100%; } }
@media (max-aspect-ratio: 16/9) { #video-bg > video { width: 300%; left: -100%; } }
/* 2. If supporting object-fit, overriding (1): */
@supports (object-fit: cover) {
  #video-bg > video {
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
}



video::-webkit-media-controls-fullscreen-button
{
	display: none !important;
}




/************************  Slider One Definition  ********************/
#wrapper { display:block; margin:auto; height:757px; width:1140px; }
#container { overflow:auto; }
#prev {
	background-image:url(images/arrows/left_Arrow.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	display:block;
	float:left;
	height:757px;
	width:80px;
	position:relative;
	z-index:10;
    opacity:.3;
}
#next {
	background-image:url(images/arrows/right_Arrow.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	display:block;
	float:right;
	height:757px;
	width:80px;
	position:relative;
	z-index:10;
    opacity:.3;
}
#slider { display:block; margin:auto; float:left; height:757px; width:1140px; overflow:hidden; position:absolute; }




/******************  Login  Definition  *********************/ 
.login_textfield input { border: 0; width: 213px; height: 22px; }

.login_submit_btn input { border: 0;
	background-image:url(images/png/login_monitor_RT_prompts/sign_in_sl.png);
	width:102px; height:26px; font-size: 20px; color: #664C00; }

.login_monitor_RT_spacer { width: 30px; height:26px; margin-right: auto; position: relative; z-index: 20; float:left; }
.login_monitor { width: 300px; margin-right: auto; position: relative; z-index: 20; float:left; top:-15px }

.login_monitor_LT { width: 360px; margin-right: auto;  position: relative; z-index: 20; float:left; }

.error_click_me_msg_box_not_here input { cursor:none; }
.error_click_me_msg_box_not_here li{ list-style: none; background-color:white; border: 0; width: 280px;
							height:24px; top: 294px; left: 10px; color:red; text-align:center; font-weight: bold; }



/********************  Change Password  Definition  *******************/ 
.pwspace {font-weight: bold; font-size: 9pt; color: #993323; font-family: Arial; }
.errors {background-color:#DDFFDD; border:1px solid #009900; width:750px; color:red; font-weight: bold; }
.errors li{ list-style: none; }


.errors2 {color:red; font-weight: bold; }
.errors2 li{ list-style: none; }


/********************  Used in Portfolio creation  *******************/ 
.errorsimport {border:1px solid #009900; width:950px; color:red; font-weight: bold; }
.errorsimport li{ list-style: none; }



/***************** for display on invalid_token page ****************************/
.duplicate_displ li { list-style: none; }



/****************  View Service Requests page setup Definition  ******************/
/* .viewSR { border: 1px; cellpadding: 0px; cellspacing: 10px; width: 1130px; } */
/*.viewSR { width:1130px; border:1px solid red; border-spacing:1px; padding:0px; } */
/*.viewSR { width:1130px; } -- This one is set in the main program like above. There is a reason for doing this. Both works fine.*/
body,table.viewSR td { font-size: 12pt; }
table.viewSR { background-color: black; border: 1px black solid; cellspacing: 1px; border-collapse: collapse; }
table.viewSR th { border: 1px outset silver; background-color: #664C00; color: white; }
table.viewSR tr { background-color: white; margin: 1px; }
table.viewSR tr.striped { background-color: #FFFFBF; }
table.viewSR td { border: 1px outset silver; padding: 2px 8px; }


/***
	 This section set page display content to scroll if need be
     It is used on content table pages that display checkbox 
     list items and radio buttons list items
								<th class="srdesc">Description</th>


/* Scroll settings for THMB Nail setting list on images/pictures displaying time. **************** #bbf6fe ***********/
div.scroll_GridTHMBNail { width: 100%; height: 100%; overflow-y: scroll; margin-right:auto; margin-left: 0px; }



***/
div.scroll { width: 100%; height: 260px; overflow-y: scroll; }
div.scroll_TAC { width: 100%; height: 480px; overflow-y: scroll; }
div.scroll_OnePage { width: 100%; height: 680px; overflow-y: scroll; }
div.hidden { width: 100%; height: 260px; overflow-y: hidden; }

/*** th for table/List headers columns (width: 1130px) ***/
th.srid 		{ width: 120px; }       /* Service Request ID */
th.rstatus  	{ width: 240px; }       /* Request Status */
th.rstatusRFA  	{ width: 200px; }       /* Request Status */
th.rstatusRFA_Orig { width: 266px; }       /* Request Status */
th.customerId 	{ width: 140px; }       /* customer Id */
/* User th.customerId2 and NOT th.customerName2 below for alignment of display data. */
th.customerId2 	{ width: 240px; }       /* customer Id */
th.customerName2 { width: 284px; }       /* customer Id */

th.createdYear 	{ width: 70px;  }        /* Created Year */
th.srdesc	 	{ width: 000px; }       /* Description - DO NOT USE ON THE PAGE. Leave it blank */
th.runningYear 	{ width: 70px;  }        /* Running Year */
th.astatus  	{ width: 120px; }        /* Activation Status */
th.star		  	{ width: 40px;  }        /* Star Display */
th.starJ	  	{ width: 55px;  }        /* Star Display */

th.backgroundVIDescription { width: 190px;  }     /* Background Video/Image Description Display */
th.surroundBDescription  { width: 190px;  }     /* Surround Box Description Display */

th.viewCode		  { width: 240px;  }     /* View Code Display */



/*** td with radio button or check box on the first column ***/
td.sridR 		{ width: 104px; }       /* Service Request ID */
td.rstatusR  	{ width: 224px; }       /* Request Status */
td.rstatusRRFA 	{ width: 184px; }       /* Request Status */
td.rstatusRRFA_Orig	{ width: 250px; }       /* Request Status */
td.customerIdR 	{ width: 124px; }       /* customer Id */
/* User th.customerId2R and NOT th.customerName2R below for alignment of display data. */
td.customerId2R	{ width: 224px; }       /* customer Id */
td.customerName2R { width: 268px; }       /* customer Name */
td.createdYearR { width: 54px;  }        /* Created Year */
td.srdescR	 	{ width: 000px; }       /* Description - DO NOT USE ON THE PAGE. Leave it blank */
td.runningYearR { width: 54px;  }        /* Running Year */
td.astatusR  	{ width: 104px; }        /* Activation Status */
td.starR	  	{ width: 24px;  }        /* Star Display */
td.starJR	  	{ width: 39px;  }        /* Star Display */

td.backgroundVIDescriptionR { width: 174px;  }     /* Background Video/Image Description Display */
td.surroundBDescriptionR  { width: 174px;  }     /* Surround Box Description Display */

td.viewCodeR	  { width: 224px;  }     /* View Code Display */



/*** td with NO radio button and NO check box on the first column ***/
td.srid 		{ width: 120px; }       /* Service Request ID */
td.rstatus  	{ width: 240px; }       /* Request Status */
td.rstatusRFA  	{ width: 184px; }       /* Request Status */
td.rstatusRFA_Orig { width: 266px; }       /* Request Status */
td.customerId 	{ width: 140px; }       /* customer Id */
td.customerId2 	{ width: 240px; }       /* customer Id */
td.createdYear 	{ width: 70px;  }        /* Created Year */
td.srdesc	 	{ width: 000px; }       /* Description - DO NOT USE ON THE PAGE. Leave it blank  */
td.runningYear 	{ width: 70px;  }        /* Running Year */
td.astatus  	{ width: 120px; }        /* Activation Status */
td.star		  	{ width: 40px;  }        /* Star Display */
td.starJ	  	{ width: 55px;  }        /* Star Display */

td.backgroundVIDescription { width: 190px;  }     /* Background Video/Image Description Display */
td.surroundBDescription  { width: 190px;  }     /* Surround Box Description Display */

td.viewCode		  { width: 240px;  }     /* View Code Display */


/* ***************** I N V I T E E S List Settings  Continuation of th div settings ************ */
/*** th for table/List headers columns for Invitees definition (width: 1130px) ***/
th.host 		{ width: 120px; }       /* Host ID */
th.guest 		{ width: 135px; }       /* Guest ID */
th.invFName  	{ width: 255px; }       /* Invitee First Name */
th.invMName  	{ width: 255px; }       /* Invitee Middle Name */
th.invLName		{ width: 000px; }       /* Invitee Last Name */
th.creationDate	{ width: 120px; }       /* Invitee invitation Date */

/*** td for Invitees definition ***/
td.hostR 			{ width: 120px; }       /* Host ID */
td.guestR 			{ width: 120px; }       /* Guest ID */
td.invFNameR  		{ width: 240px; }       /* Invitee First Name */
td.invMNameR  		{ width: 240px; }       /* Invitee Middle Name */
td.invLNameR		{ width: 000px; }       /* Invitee Last Name */
td.creationDateR	{ width: 120px; }       /* Invitee invitation Date */




/**(5B)***************************  Spinner  Definition  **************************/
.spinnerB {
    position:     fixed;
    top:          19%;
    left:         86%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top:  -50px; /* half height of the spinner gif */
    text-align:   center;
    z-index:      1234;
    overflow:     auto;
    width:        100px; /* width of the spinner gif */
    height:       102px; /*hight of the spinner gif +2px to fix IE8 issue */
}

/* This spinner is "center of page" position base spinner */
.spinner2 {
    position:     fixed;
    top:          50%;
    left:         50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top:  -50px; /* half height of the spinner gif */
    text-align:   center;
    z-index:      1234;
    overflow:     auto;
    width:        100px; /* width of the spinner gif */
    height:       102px; /*hight of the spinner gif +2px to fix IE8 issue */
}



/**********************       Blink      ***********************/
@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}
.blink {
  animation: blink 1s step-start 0s infinite;
  -webkit-animation: blink 1s step-start 0s infinite;
}
/*  <span class="blink">Blink</span>    ***************************/



/***************   Audio frame setup   **************/
div.frame-2 {
	margin:0px auto 0px auto;
	text-align:center;
}
audio.frame-3 {
	height:60px;
	width:60px;
}




/***** Most browsers will display the <h1> to <h6> elements with the following default values: *****/
/***** But in here, they are set as class values with different names representing the headers *****/
/***** These are used for all pages on legend tag fields. ******************************************/
.rep_h1 { 
    display: block;
    font-size: 2em;
    margin-top: 0;			/* not 0.67em */
    margin-bottom: 0;		/* not 0.67em */
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

.rep_h2 {
    display: block;
    font-size: 1.5em;
    margin-top: 0;			/* not 0.83em */
    margin-bottom: 0;		/* not 0.83em */
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

.rep_h3 { 
    display: block;
    font-size: 1.17em;
    margin-top: 0;			/* not 1em */
    margin-bottom: 0;		/* not 1em */
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

.rep_h4 { 
    display: block;
    font-size: 1em;
    margin-top: 0;			/* not 1.33em */
    margin-bottom: 0;		/* not 1.33em */
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

.rep_h5 { 
    display: block;
    font-size: .83em;
    margin-top: 0;			/* not 1.67em */
    margin-bottom: 0;		/* not 1.67em */
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

.rep_h6 { 
    display: block;
    font-size: .67em;
    margin-top: 0;			/* not 2.33em */
    margin-bottom: 0;		/* not 2.33em */
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}


.rep_h1_legendBlue  { display: block; font-size: 2em; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; font-weight: bold; color:#003366; }
.rep_h1_legendBrown { display: block; font-size: 2em; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; font-weight: bold; color:brown; }

.rep_h2_legendBlue  { display: block; font-size: 1.5em; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; font-weight: bold; color:#003366; }
.rep_h2_legendBrown { display: block; font-size: 1.5em; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; font-weight: bold; color:brown; }

.rep_h3_legendBlue  { display: block; font-size: 1.17em; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; font-weight: bold; color:#003366; }
.rep_h3_legendBrown { display: block; font-size: 1.17em; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; font-weight: bold; color:brown; }

.rep_h4_legendBlue   { display: block; font-size: 1em; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; font-weight: bold; color:#003366; }
.rep_h4_legendBrown { display: block; font-size: 1em; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; font-weight: bold; color:brown; }

.rep_h5_legendBlue  { display: block; font-size: .83em; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; font-weight: bold; color:#003366; }
.rep_h5_legendBrown { display: block; font-size: .83em; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; font-weight: bold; color:brown; }

.rep_h6_legendBlue  { display: block; font-size: .67em; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; font-weight: bold; color:#003366; }
.rep_h6_legendBrown { display: block; font-size: .67em; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; font-weight: bold; color:brown; }





/*************  Vertical CheckboxList format Definition  *************/ 
label[for*=editPortfolioCheckboxListSelect-]:after { content:"\A"; white-space:pre; }



/***************   Some pages css setup   **************/
.glab {
font-weight:400;
font-size:12px;
color:#444;
font-family:Arial;
padding: 10px 0 0 113px;
}

.glab2 {
font-weight:400;
font-size:12px;
color:#444;
font-family:Arial;
padding: 0px;
}

.glab3 {
font-weight:400;
font-size:12px;
color:#444;
font-family:Arial;
padding: 0 0 0 10px;
}

.glab4 {
font-weight:400;
font-size:4px;
color:#444;
font-family:Arial;
padding: 0px;
}

.glab5 {
font-weight:400;
font-size:16px;
color:red;
font-family:Arial;
font-weight: bold;
padding: 0px;
}

.maino {
font-weight:bold;
font-size:13px;
color:#993323;
font-family:Arial;
}

.glabPolOnRef {
font-weight:bold;
font-size:16px;
align: left;
padding: 0px;
color:red;
}

.glabPolOnRef2 {
font-weight:400;
font-size:12px;
color:red;
font-family:Arial;
padding: 0px;
}

.glabChgPWText { font-weight: normal; font-size:16px; color: #003366; font-family:Arial; padding: 0px 0px 0px 20px; text-align: justify; }



/********************************** #74d3b7 ******* #d1d1d1 *****************************************/
/***************   Text, textarea, select and label background/color css setup   **************/
 /*   input[type="text"], textarea  --- Just for text input fields   */
 
input[type="password"] {
  font-family: caption;
  font-size: 16px;
  box-sizing: border-box;
  border-left: 2px solid grey;
  border-top: 2px solid grey;
  border-right: 1px solid lightgrey;
  border-bottom: 1px solid lightgrey;
  margin-bottom: 3px;
}
 
input, textarea { background-color : #DDFFEA; }

input[type=text] {
  color:#003366;
  box-sizing: border-box;
  border-left: 2px solid grey;
  border-top: 2px solid grey;
  border-right: 1px solid lightgrey;
  border-bottom: 1px solid lightgrey;
  margin-bottom: 3px;
}

   /* This code for radio button is now working */
input[type="radio"]:after {
    width: 7px;
    height: 7px;
    border-radius: 10px;
    top: -1px;
    left: 2px;
    position: relative;
    background-color: #ffffff;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 1px solid white;
}
input[type='radio']:checked:after {
    width: 7px;
    height: 7px;
    border-radius: 10px;
    top: -1px;
    left: 2px;
    position: relative;
    background-color: #000000;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 1px solid white;
}


     /**  Select, Label and stuff setup   **/
select {
	background: #DDFFEA;
	color: #003366;
  	box-sizing: border-box;
  	border-left: 1px solid lightgrey;
  	border-top: 1px solid lightgrey;
  	border-right: 2px solid grey;
  	border-bottom: 2px solid grey;
    margin-bottom: 3px;
}
label { color: #003366; }
label span { color: red; font-weight: bold; }
option, optgroup { -webkit-appearance: none; }



/* **********  radio button Definition  ********** */
.radioMarginLeft_YesNo{
margin-left: 10px !important;
}
label.radioMarginLeft_YesNo{
margin-left: 4px !important;
}

/* ******************************************************************************** */ 
/* ******************************* Different Colors Definition  ********************** 
*********************************************************************************** */
#colorCode_LightBlue    { background-color: lightblue;}
#colorCode_LightBlue1   { background-color: #74a3b7;}
#colorCode_LightBlue2   { background-color: #54879d;}
#colorCode_LightBlue3   { background-color: #366b82;}
#colorCode_LightBlue4   { background-color: #1f5065;}

#colorCode_LightGreen   { background-color: lightgreen;}
#colorCode_LightGreen1  { background-color: #74d3b7;}
#colorCode_Green   		{ background-color: green;}

#colorCode_Blue         { background-color: #003366;}
#colorCode_DarkBlue     { background-color: #202340;}
#colorCode_CryonBlue	{ background-color: #BFFFFF;}

#colorCode_Orange       { background-color: #D96D00;}

#colorCode_LightGold    { background-color: lightyellow;}
#colorCode_Gold 	    { background-color: yellow;}
#colorCode_DarkGold     { background-color: #664C00;}

#colorCode_deepGreen     	 { background-color: #444C00;}
#colorCode_lighterdeepGreen  { background-color: #444F00;}
#colorCode_GreenGold     	 { background-color: #554C00;}

#colorCode_Lightergrey 		 { background-color: lightgrey;}
#colorCode_Grey 			 { background-color: grey;}

#colorCode_CryonGreen		 { background-color: #DDFFDD;}
#colorCode_CryonGreenBlue	 { background-color: #DDFFEE;}
#colorCode_CryonGreen_BG	 { background-color: #DDFFFF;}



/*****************************  END of Definitions  ******************************* 
 **********************************************************************************
 **********************************************************************************/