/*******************************
CSS OF			: 	TIMETRACKER
DATE CREATED	:	07-05-2020
DATE-EDITED		:	06-08-2020
VERSION			:	4.0

COMMENTS		:	TIMETRACKER CSS 
					navigation sub menu
					menu color change
	
BASE (MOBILE) SIZE
==================
********************************/


/*VARIABLE DEFINITION START
=========================*/
:root {
   	
	
	--main-tt-color:#ff9b00;
	--main-ttdark-color:#f28f2c; 
	--main-ttdarker-color:#e58422;
	--main-ttdarkest-color:#e58422;
	--main-ttlight-color:#ff9933;
	--main-ttlighter-color:#ffa953;
	--main-ttlightest-color:#FFDC97; 
	--main-ttlightest2-color:#ffeecc; 
	
	
	/* --main-ttlightest-color:#b5d19f; 	 */
	/* #646f4b */
	
/* 	--main-tt-color:#ff9b00;
	--main-ttdark-color:#e58b00; 
	--main-ttdarker-color:#cc7c00;
	--main-ttdarkest-color:#b26c00;
	--main-ttlight-color:#ffa519;
	--main-ttlighter-color:#ffaf32;
	--main-ttlightest-color:#ffe1b2; */
	
	
/* 	--main-tt-color:#ef8823;
	--main-ttdark-color:#f26827; 
	--main-ttdarker-color:#f05328;
	--main-ttdarkest-color:#c95629;
	--main-ttlight-color:#f79c43;
	--main-ttlighter-color:#f6b561;
	--main-ttlightest-color:#f6d18b;  */
	
	
}



/*VARIABLE DEFINITION END
=========================*/





/*HERO STYLE START
==================*/

#hero
{

	/* background:#ffffff; */
	/* margin-top:0em; */
	/* margin-bottom:2em;	 */
	
	
	background:var(--main-tt-color);
	margin : auto;

}




/*HERO STYLE END
==================*/


/*NAVBAR START
=============*/
.navbar {
  /* overflow: hidden; */
  background:var(--main-ttlightest-color);
  text-align:center;
  padding:1em 0;
  
}

.navbar a {

  display: inline-block;
  text-align: center;
  padding: 0.5em 0.8em;
  text-decoration: none;
  font-size:0.9em;
  color:var(--main-graydarker-color); 
}

.navbar a:hover {
  color:var(--main-ttdarkest-color); 
   text-decoration: underline;
}
.navbar a.active {
font-weight:bold;
}

.navbar a.trial{
	background:var(--main-ttdarkest-color);
	/* color:var(--main-graydarker-color); 	  */
	color:#ffffff;
	margin-left:3em;
}

.navbar a.trial.active{
	background:var(--main-ttlightest-color);
	color:var(--main-graydarker-color); 
	margin-left:3em;
}

/*NAVBAR END
=============*/


/*DROPDOWN START
===============*/
.dropbtn {
  background-color: transparent;
  font-size:1em;
  color:var(--main-graydarker-color); 
  /* padding: 0.1em; */
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;  
  /* z-index: 10; */
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--main-ttlightest-color);
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  font-size:0.8em; 
}

.dropdown-content a {
  color:var(--main-graydarker-color); 
  /* padding: 0.5em 0.8em; */
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color:var(--main-ttlighter-color);var(--main-ttdarkest-color);}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn
 {
	background-color::var(--main-ttdark-color);
}



/*DROPDOWN END
===============*/



/*TOOLTIP STYLE START
====================*/

.tooltip .tooltiptext {
  background-color: var(--main-ttdark-color);
  color: #fff;  
}

/*TOOLTIP STYLE END
====================*/



/*TABLE START
=============*/

  table th
  {
	 
	  font-size:1em;

	 
  }

th, td {
/*    border-bottom: 1px solid #ddd; */
   border-left: 1px solid var(--main-graylighter-color);

}


  th:first-child, td:first-child {

  	 border-left: 1px solid var(--main-graylighter-color);

		  
	}

table tr:hover {background-color:var(--main-graylightest-color);}

td.bestseller
{
	
	border-left:3px solid var(--main-tt-color);
	border-right:3px solid var(--main-tt-color);
	border-left-style:outset;
	border-right-style:outset;

	 
}



/*TABLE END
===========*/





/*BUTTON STYLE START
===================*/

a.buttonlink{ 
	background:var(--main-ttdarker-color); 
	color:#fff;	

}

a.outlinebutton {
  border: 2px solid var(--main-ttdarker-color); 
  color: var(--main-ttdarker-color); 
}



/*BUTTON STYLE END
==================*/








/*tt COLOR FORMAT START
=====================*/


/* TEXT COLOR
===========*/
.text-color.t-tt
{
	color:var(--main-tt-color);
}


.text-color.t-ttdarkest
{
	color:var(--main-ttdarkest-color);
}


.text-color.t-ttdarker
{
	color:var(--main-ttdarker-color);
}


.text-color.t-ttdark
{
	color:var(--main-ttdark-color);
}


.text-color.t-ttlight
{
	color:var(--main-ttlight-color);
}

.text-color.t-ttlighter
{
	color:var(--main-ttlighter-color);
}

.text-color.t-ttlightest
{
	color:var(--main-ttlightest-color);
}






/* BACKGROUND
==============*/

.background.b-tt
{
	background:var(--main-tt-color);
}

.background.b-ttdarkest
{
	background:var(--main-ttdarkest-color);
}


.background.b-ttdarker
{
	background:var(--main-ttdarker-color);
}


.background.b-ttdark
{
	background:var(--main-ttdark-color);
}

.background.b-ttlight
{
	background:var(--main-ttlight-color);
}

.background.b-ttlighter
{
	background:var(--main-ttlighter-color);
}

.background.b-ttlightest
{
	background:var(--main-ttlightest-color);
}

.background.b-ttlightest2
{
	background:var(--main-ttlightest2-color);
}



.background.b-ttgradientlight{
  background-color:  #ffffff; /*FALLBACK FOR OLD BROWSER */
  background-image:
  linear-gradient(-90deg,white,var(--main-ttlightest-color)); 
  /*   
  linear-gradient(-90deg,white,var(--main-ttlightest-color));  */
}

.background.b-ttgradientdark{
  background-color:  #ffffff; /*FALLBACK FOR OLD BROWSER */
  background-image: linear-gradient(90deg,var(--main-ttdarkest-color),var(--main-ttdarker-color),var(--main-ttdark-color),var(--main-ttlight-color)); 
}









/*******END OF SECTION TO BE DELETED LATER**********/


/*tt PRICE TAB START
=====================*/

div[class*="tt-price"] {
background-color: var(--main-ttdarker-color);
} 


.tt-price.b-lite{
background-color:var(--main-ttlightest-color); 
}

.tt-price.b-basic{
background-color:var(--main-ttlighter-color);
}

.tt-price.b-standard{
background-color:var(--main-ttlight-color);
}

.tt-price.b-professional{
background-color:var(--main-ttdark-color);
}

/* .tt-price.b-premium{
background-color:var(--main-ttdarker-color);
} */

.tt-price.b-enterprise{
background-color:var(--main-ttdarker-color);
}