/* Style Sheet for the Clover Custom Reports web App */

/* Sets the text for everything*/
*{
	font-family: verdana;
}

*::selection{
	background-color: #fac80d;
	
}
body {
	height: 100%;
	margin: 0px;
	background: whitesmoke;
}
input[type="radio"], input[type="checkbox"]{
	margin-bottom: 5px;
	margin-right: 2px;
	vertical-align: middle;
	cursor: pointer;
}
input[type="checkbox"]{
	margin-left: -18px;
}
input[type="text"]{
	padding-left: 5px;
	padding-bottom: 2px;
	font-size: 12px;
	border: none;
	background: linear-gradient(#d3d3d3, #d3d3d3), linear-gradient(#d3d3d3, #d3d3d3), linear-gradient(#d3d3d3, #d3d3d3);
	background-size: 2px 20%, 100% 2px, 2px 20%;
	background-position: bottom left, bottom center;
	background-repeat: no-repeat;
}
input[type=datetime-local] {
	padding-left: 5px;
	padding-bottom: 2px;
	font-size: 11px;
	border: none;
	background: linear-gradient(#d3d3d3, #d3d3d3), linear-gradient(#d3d3d3, #d3d3d3), linear-gradient(#d3d3d3, #d3d3d3);
	background-size: 2px 20%, 100% 2px, 2px 20%;
	background-position: bottom left, bottom center;
	background-repeat: no-repeat;
}
input[type="text"]:focus, input[type="checkbox"]:focus, input[type="radio"]:focus, input[type="datetime-local"]:focus, textarea:focus{
	outline: none;
	-webkit-box-shadow: 0px 0px 5px #fac80d;
	box-shadow: 0px 0px 5px #fac80d;
}
#tb_access_token{
	font-size: 7.5px;
	padding-top: 4px;
	padding-bottom: 4Px;
}
#div_lbl_access, #div_lbl_mid{
	padding-left: 15px;
	padding-right: 0px;
	font-size: 13px;
}

#div_lbl_mid{ /* MID is a big bigger than the Access Token to appear more consistent*/
	font-size: 13.5px;
}

#div_lbl_start_date{
	padding-right: 0px;
}
#tb_merchant_id, #tb_access_token{
	width: 100%;
	padding-left: 2%;
}
#tb_start_date, #tb_end_date{
	width:100%;
}
#tb_merchant_id, #tb_start_date{
	background-position: bottom right, bottom center, bottom left;
}
label{
	font-weight: normal;
}
asp:textbox{
	font-size: 5px;
}
#div_tb_mid, #div_tb_access, #div_tb_start_date, #div_tb_end_date{
	margin-top: 2px;
}
#btn_save_profiles, #btn_load_profile, .group-box{
	width: 100%;
}
#pnl_report_builder{
	background-color: white;
	border-style: solid;
	border-color: lightgray;
	padding-top: 5px;
	padding-bottom: 5px;
}
#btn_run_report, #btn_run_csv {
    width: 100%;
}
#btn_run_csv {
    margin-top: 5px;
    width: 100%;
}
#div_btn_save, #div_btn_load{
	margin-top: 5px;
	margin-bottom: 5px;
	padding-right:0px;
}
#div_btn_run_report {
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 0px;
    padding-right: 0px;
}
#div_cb_employee_lock{
	margin-top: 5px;
	text-align: center;
}
#pnl_report_content{
	height: 570px;
	position: relative;
	z-index: 9;
	padding: 0px;
}
#tb_report{
	height: 100%;
	width: 100%;
	max-width: 273.5%;
	border: 3px solid lightgray;
	font-family: monospace;
	z-index: 9;
}
#div_profile_header{
	border-bottom: solid;
	border-color: lightgray;
}
#btn_save_profiles, #btn_help_save, #btn_run_report, #btn_run_csv, #btn_confirm, #delete_confirm, #update_new {
    background: darkseagreen;
    border: 1px solid darkgreen;
    border-radius: 3px;
}

    #btn_save_profiles:hover, #btn_help_save:hover, #btn_run_csv:hover, #btn_run_report:hover, #delete_confirm:hover, #update_new:hover {
        background: #a0d6a0;
        border: 1px solid #333;
        border-radius: 3px;
        transition: 0.3s;
        -webkit-transition: 0.3s;
    }

#btn_save_profiles{
	padding-bottom: 3px;
	padding-top: 3px;
}
#btn_help_cancel{
	border: 1px solid darkred;
	background: indianred;
	border-radius: 3px;
}
#btn_help_cancel:hover{
	border: 1px solid #333;
	background: #ed6a6a;
	border-radius: 3px;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}
#btn_help_clear, #btn_print_report{
	background: #fac80d;
	border: 1px solid darkgoldenrod;
	border-radius: 3px;
}
#btn_help_clear:hover, #btn_print_report:hover{
	background: #ffcb0f;
	border: 1px solid #333;
	border-radius: 3px;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}
#cb_employee_lock{
	display: none;
}

#alert_employee_lock{
	visibility: hidden;
	position: absolute;
	left: 105%;
	bottom: -80%;
	background: gray;
	color: white;
	border-radius: 3px;
	padding: 5px;
}
#cb_employee_lock:checked ~ #alert_employee_lock{
	visibility: visible;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}
.lbl_profile_radio{
	vertical-align: top;
}

label[for="cb_employee_lock"]{
	-webkit-appearance: button;
	background: whitesmoke;
	width: 100%;
	height: 100%;
	padding-top: 3px;
	padding-bottom: 3px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	cursor: pointer;
	border: 1px solid gray;
}

#cb_employee_lock:checked + label{
	background: #fac80d;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}

.checkProfileButton{
	vertical-align: middle;
}

.active{
	background: darkseagreen;
}
.deleteProfileButton{
	background: none;
	border-style: none;
	color: indianred;
	font-weight: bold;
	margin-right: 15px;
}

.deleteProfileButton:hover{
	color: red;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}
/****************************************************
 Help Box                                          */

#help_box { /* This makes sure that the help box stays within the confines of the report builder, and that the background covers up everything within the builder, whilst also staying above it*/
position: absolute;
background-color: white;
z-index: 5;
height: 99%;
}
#tb_substitute_text{
	width: 100%;
	background-position: bottom left, bottom center, bottom right;
}
#div_btn_help_divide{
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
}
.help_area, .help_area_t, .help_area_start, .help_area_end{
	border-color: lightgray;
	padding-top: 2px;
	padding-bottom: 2px;
}
.help_area, .help_area_start{
	background: white;
}
.help_area_t, .help_area_end{ 	/* Makes sure the titles have a background */
	background: whitesmoke;
	border-top: solid 2px;
	border-color: lightgray;

}
.help_area{
	padding-top: 5px;
	padding-bottom: 5px;
}
.help_area_t{
	text-align: center;
}
.help_area_end{
	border-bottom: solid 2px;
	border-color: lightgray;
}

/*Gives vertical spacing to the buttons within the help box */
.div_help_btn{
	padding: 0px;
	margin-top: 2px;
	margin-bottom: 2px;
}
/* Makes the actual help button fit the div, with spacing on the sides */
.help_btn{
	width: 95%;
	margin-left: 2.5%;
	border: 1px solid gray;
	border-radius: 3px;
}

.help_btn:hover{
	background: lightgray;
	border-color: #333;
	transition: 0.3s;
	-webkit-transition: 0.3s;
	}

.profile_guide{
	background: white;
	margin-left: 0px;
	margin-right: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
}
/****************************************************
 This changes background of the profiles / options */ 
#cl_special_text, #tbl_profiles{
	 width: 100%;
 }
tr:nth-child(even){
	background: whitesmoke;
}
/****************************************************
 This is for the main page in large desktop format */ 

 @media only screen and (min-width: 1091px){
	.gaps{
		margin-top: 2px;
		margin-bottom: 2px;
	}
	
	#div_lbl_access, #div_lbl_end_date{
		padding-left: 0px;
		padding-right: 0px;
	}
	
	#div_lbl_end_date{
		padding-right: 15px;
	}
	#div_rbl_profiles{
		padding-right: 0px;
	}
 }
/***************************************************/

@media only screen and (min-width: 1200px){
	.lbl_profile_radio{
	max-width: 233px;
	}
}
/****************************************************
 This is for the main page in large mobile format  */ 
@media only screen and (max-width: 1100px){
	input[type="checkbox"]{
		 margin-left: 0px;
	 }
	.lbl_profile_radio{
	max-width: 210px;
	}
	#btn_toggle_report{
		width: 100%;
		background: #fac80d;
		border: 1px solid goldenrod;
		border-radius: 3px;
		-webkit-appearance: button;
		margin-bottom: 15px;
	}
	
	#btn_toggle_report:hover{
		border-color: #333;
		background: gold;
		transition: 0.3s;
		-webkit-transition: 0.3s;
	}
	/*.hideReport{
	display: none;
}*/
}

/****************************************************
 This is for the main page in a small mobile format*/
 @media only screen and (max-width: 767px){
	 #div_lbl_profile_merchant, #div_lbl_profile_access_token, #div_lbl_profile_name, #div_lbl_group_1, #div_lbl_group_2a, #div_lbl_group_2b, #div_lbl_group_special{
		text-align: center;
	}

	#cb_toggle_report{
		display: none;
	}
	
	#cb_toggle_report + #pnl_report_content{
		left: 0px;
		top: 70%;
		position: absolute;
		transition: 1s;
		-webkit-transition: 1s;
	}
	#div_toggle_report{
		z-index: 10;
	}
	#cb_toggle_report:checked + #pnl_report_content{
		left: 0px;
		position: absolute;
		top: -900px;
		transition: 1.5s;
		-webkit-transition: 1.5s;
	}
	#lbl_toggle_report{
		width: 100%;
		background: #fac80d;
		border: 1px solid goldenrod;
		border-radius: 3px;
		-webkit-appearance: button;
		margin-top: 4px;
		margin-bottom: 15px;
		text-align: center;
		padding-top: 3px;
		padding-bottom: 3px;
	}
	
	#lbl_toggle_report:hover{
		border-color: #333;
		background: gold;
		transition: 0.3s;
		-webkit-transition: 0.3s;
	}
	
	#pnl_report_content{
		position: absolute;
		background: white;
		top: 70%;
		width: 99.5%;
		height: 580px;
		margin-bottom: 10px;
		margin-left: 2px;
	}
	
	#pnl_report_builder{
		margin-left: 2px;
	}
	.div_rbl_profiles{
		padding-right: 15px;
	}
	.deleteProfileButton{
		margin-right: 0px;
	}
	#group_help_title{
		font-size: 12px;
	}
	#help_btn{
		font-size: 80%;
	}
	.lbl_profile_radio{
		max-width: 235px;
	}
	input[type="text"]{
		background-position: bottom left, bottom center, bottom right;
	}
 }

/*****************************************************
 This is for everything that's not the mobile page  */
  @media only screen and (min-width: 768px){	
  
	#div_cl_special_text{
		padding-left: 0px;
	}
	
	#cb_toggle_report, #lbl_toggle_report{
		display: none;
	}

  }
/****************************************************
 Header                                            */
@media only screen and (max-width: 1090px){
	#div_lbl_report_header{
		display: none;
	}
}
@media only screen and (min-width: 1091px){
	#div_lbl_report_header{
		position: absolute;
		top: 0px;
		width: 100%;
		background: whitesmoke;
		color: lightgrey;
		text-align: center;
		margin-bottom: 10px;
	}
	#btn_toggle_report{
		display: none;
	}
	#div_popup{
		margin-left: 20%;
		margin-right: 20%;
	}
}
/****************************************************
 Footer                                            */

/* Everything other than on a normal sized desktop */
#footer {
    height: 70px;
    position: fixed;
    bottom: 0px;
    padding-top: 20px; /* previous 30px */
    padding-bottom: 20px; /* previous 30px */
    color: #fff;
    background: #2e2e2e;
    width: 100%; 
    font-size: 14px;
    -webkit-text-size-adjust: none;
    text-align: middle;
}
/* Style for content within the footer */
#footer a {
  color: #fff;
  text-decoration: none;
}
#footer a:hover {
  color: #fac80d;
}
#footer ul {
  list-style: none;
  margin: 0px;
  padding-right: 20px;
  float: right;	
}
#footer ul > li {
  display: inline-block;
  margin-left: 5px;
}
#foot_logout{
	background: none;
	border: none;
	-webkit-appearance: none;
	color: white;
}
#foot_logout:hover{
	color: #fac80d;
}
#foot_copyright{
	float:left;
	padding-left: 20px;
}


@media only screen and (max-width: 767px) {
    * {
        font-size: 14px;
    }

    #text_error {
        text-align: center;
    }
}


#div_popup{
	position: absolute;
	z-index: 1000;
	background: white;
	border-radius: 3px;
	border: 2px solid lightgray;
	text-align: center;
	padding: 30px;
}
.vanished{
	display: none;
}

@media print {
	#pnl_report_content{
		color: black;
		font-size: 14px;
		width: 100%;
		height: 100%;
	}
	
	#tb_report{
		color: black;
		font-family: monospace;
		border: none;
		width: 100%;
		height: 100%;
	}
}


.container {
    margin-bottom: 70px;
}










/****************************************************
 Tooltips                                          *
 
 .tooltip-l{
	 background: #333;
	 border-radius: 3px;
	 opacity: 0;
	 position: absolute;
	 right: 100%;
	 top: -15px;
	 width: 200px;
	 height: 75px;
	 color: white;
	 padding: 5px 3px 3px 3px;
	 text-align: center;
	 z-index: 5;
 }
 
 .tooltip-r{
	 background: #333;
	 border-radius: 3px;
	 opacity: 0;
	 position: absolute;
	 left: 100%;
	 top: -15px;
	 width: 200px;
	 height: 75px;
	 color: white;
	 padding: 5px 3px 3px 3px;
	 text-align: center;
	 z-index: 5;
 }
 
 .tooltip-t{
	 background: #333;
	 border-radius: 3px;
	 opacity: 0;
	 position: absolute;
	 left: 0%;
	 top: -100%;
	 width: 200px;
	 height: 75px;
	 color: white;
	 padding: 5px 3px 3px 3px;
	 text-align: center;
	 z-index: 5;
 }
 
 #tb_start_date:hover  + #tt_start_date{
	 opacity: 1;
	 transition: 0.5s;
	 -webkit-transition: 0.5s;
	 right: 150%;
 }
 
  #tb_end_date:hover + #tt_end_date{
	 opacity: 1;
	 transition: 0.5s;
	 -webkit-transition: 0.5s;
	 left: 100%
 }
 
  #btn_save_profiles:hover + #tt_save_profiles{
	 opacity: 1;
	 transition: 0.5s;
	 -webkit-transition: 0.5s;
	 right: 100%;
 }
 
  label[for="cb_employee_lock"]:hover + #tt_employee_lock{
	 opacity: 1;
	 transition: 0.5s;
	 -webkit-transition: 0.5s;
	 left: 100%;
 }
 
  #tb_profile_name:hover + #tt_profile_name{
	 opacity: 1;
	 transition: 0.5s;
	 -webkit-transition: 0.5s;
	 left: 100%;
 }
 
  #tb_profile_merchant:hover + #tt_profile_merchant{
	 opacity: 1;
	 transition: 0.5s;
	 -webkit-transition: 0.5s;
	 left: 100%;
 }
 
  #tb_profile_access_token:hover + #tt_profile_access_token{
	 opacity: 1;
	 transition: 0.5s;
	 -webkit-transition: 0.5s;
	 left: 100%;
 }
 
  #tb_group_1:hover + #tt_group_1{
	 opacity: 1;
	 transition: 0.5s;
	 -webkit-transition: 0.5s;
	 left: 100%;
 }
 
  #tb_group_2a:hover + #tt_group_2a{
	 opacity: 1;
	 transition: 0.5s;
	 -webkit-transition: 0.5s;
	 left: 100%;
 }
 
  #tb_group_2b:hover + #tt_group_2b{
	 opacity: 1;
	 transition: 0.5s;
	 -webkit-transition: 0.5s;
	 left: 100%;
 }
 
  #tb_special:hover + #tt_special{
	 opacity: 1;
	 transition: 0.5s;
	 -webkit-transition: 0.5s;
	 left: 100%;
 }
 
  #btn_run_report:hover + #tt_run_report{
	 opacity: 1;
	 transition: 0.5s;
	 -webkit-transition: 0.5s;
	 left: 103%;
 }
 
  /*(help box) + (tooltip){ 
	  opacity: 1;
	  transition: 0.5s;
	  -webkit-transition: 0.5s;
	  top: -100%;
  }
 */