/********************************************* ApeiroSys Material Design v1.0 ****************************************************/
/*********************************************************************************************************************************/
/* basic stylings ------------------------------------------ */
/*
.container 		{ 
  font-family:'Roboto';
  width:600px; 
  margin:30px auto 0; 
  display:block; 
  background:#FFF;
  padding:10px 50px 50px;
}
*/

/* form starting stylings ------------------------------- */
.group 			  { 
  position:relative; 
  margin: 20px;
  color:#333;
}

.group:focus-within {
  color:#2196F3;
}

.input 				{
  font-size:1.4em; /* 18px;*/
  padding:0px 10px 5px 5px;
  display:block;
  width:100%;
  border:none;
  border-bottom:1px solid #757575;
  border-radius: 0px !important;
  color:#333;
}
.input:focus 		{ outline:none; border-bottom:none;}

/* LABEL ======================================= */
 .label_md 				 {
  color:#333; 
  font-size:1.4em; /*18px;*/
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:0px;
  transition:0.3s ease all; 
  -moz-transition:0.3s ease all; 
  -webkit-transition:0.3s ease all;
}

 .label_md_dark 				 {
  color:#fff; 
  font-size:1.4em; /*18px;*/
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:0px;
  transition:0.3s ease all; 
  -moz-transition:0.3s ease all; 
  -webkit-transition:0.3s ease all;
}

.rtl .label_md, .rtl .label_md_dark
{
	left:unset;
	right:5px;
}


.input:invalid{
  border-bottom:1px solid #f44336;
}

.input.has-error {
  border-bottom:2px solid #f44336;
}

/****************************** Prefix-Suffix Icons *********************************/
.input-prefix
{
	position: absolute;
	leftr:0px;
	top: 5px;
	font-size: 1.4em;
	/*color:#333;*/
}

.input-prefix ~ .input, .input-prefix ~ .label_md, .input-prefix ~ .label_md_dark, .input-prefix ~ .help-block
{
	left:0px;
	padding-left: 40px;
}

.input-suffix
{
	position: absolute;
	right:0px;
	top: 5px;
	font-size: 1.4em;
	/*color:#333*/
}

.input-suffix ~ .input, .input-suffix ~ .label_md, .input-suffix ~ .label_md_dark, .input-suffix ~ .help-block
{
	padding-right: 40px;
}

.rtl .input-prefix
{
	left:unset;
	right:0px;
}

.rtl .input-suffix
{
	right:unset;
	left:0px;
}

/*************************************************************************************/
.numeric-arrow-container
{
	position: absolute;
	right: 0px;
	color:#333;
	background-color: #eee;
	height: 28px;
	display: none;
	width: 18px;
	top:0px;
}
.numeric-arrow-up
{
	position: absolute;
    top: 0px;
    height: 14px;
    width: 100%;
    padding: 5px 0px 5px 5px;
}


.numeric-arrow-down
{
	top: 14px;
    position: absolute;
    height: 14px;
    width: 100%;
    padding: 0px 0px 0px 5px;
}

.numeric-arrow-up:hover, .numeric-arrow-down:hover
{
	background-color:#ccc;
}

.numeric-arrow-up:active, .numeric-arrow-down:active
{
	background-color:#666;
	color:#fff;
}

/* readonly */
.input:read-only {
  background-color: #eee;
}
.input:read-only ~ .label_md, .input:read-only ~ .label_md_Dark {
  top:-20px;
  font-size: 1em; 
  font-weight:normal;
  /*color:#333;*/
}


/* Placeholder (Sub-Label) ) */
.input:placeholder-shown ~ .label_md, .input:placeholder-shown ~ .label_md_dark
{
  top:-20px;
  font-size: 1em; 
  font-weight:normal;
  /*color:#333;*/
}

/* has data state */

.input:valid ~ .label_md, .input.hasvalue ~ .label_md, .input:valid ~ .label_md_dark, .input.hasvalue ~ .label_md_dark {
  top:-20px;
  font-size: 1em; 
  font-weight:normal;
  /*color:#333;*/
}

/* Empty string Input when it is not requried ) */
.input.empty:not(:focus):not(:placeholder-shown) ~ .label_md , .input.empty:not(:focus):not(:placeholder-shown) ~ .label_md_dark
{
  top:0px;
  font-size: 1.4em;
}

/* active state */
.input:focus ~ .label_md, .input:focus ~ .label_md_dark /*, .input:valid ~ .label_md*/ 	{
  top:-20px;
  font-size: 1em; /*12px;*/
  font-weight:normal;
  color:#2196F3;
}

.input.numeric:focus ~ .numeric-arrow-container, .input.numeric:hover ~ .numeric-arrow-container, .numeric-arrow-container:hover
{
  display:block;
}



/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:100%; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:0px; 
  position:absolute;
  background:#2196F3; 
  transition:0.3s ease all; 
  -moz-transition:0.3s ease all; 
  -webkit-transition:0.3s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
.input:focus ~ .bar:before, .input:focus ~ .bar:after {
  width:50%;
}

.input:focus:invalid ~ .bar:before, .input:focus:invalid ~ .bar:after {
  background: #f44336;
}


/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
.input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#2196F3; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#2196F3; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#2196F3; }
  to 	{ width:0; background:transparent; }
}



#-error
{
	position: absolute;
	bottom:-35px;
	padding:0px 5px 10px 5px!important;
}

.help-block
{
	bottom: 0px;
    position: relative;
	padding: 0px 5px 0px 5px;
	color: #333;
}

.input.has-error ~ .help-block {
  color: #f44336;
}

/*********************************************************************************************************************************/
/*********************************** End of ApeiroSys Material Design ************************************************************/

/********************************* Approval Nav ****************************************/
/***************************************************************************************/
.approvalnav {
  height: 100%;
  width: 400px;
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 0px!important;
}
.approvalnav a {
  padding: 8px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
.approvalnav a:hover {
  color: #f1f1f1;
}
.approvalnav .closebtn {
  top: 0;
  left: 0px;
  font-size: 28px;
  padding: 8px;
}
@media screen and (max-height: 450px) {
  .approvalnav {padding-top: 0px;}
  .approvalnav a {font-size: 18px;}
}
.carditemactionnote
{
  display: none;
  border-top: 1px dashed #444;
}
.carditem:hover .carditemactionnote, .carditem.hover .carditemactionnote 
{
	display: block;
}

.approvalnav.title
{
	padding-bottom: 15px;
}
.approvalnav > .approvalnavheader > .title > h3
{
	color: #fff!important;
	text-align: center!important;
}
.carditem
{
	color: #fff;
	padding: 15px;
	border-bottom: 1px solid #666;
	background-color: #222;
}

.carditemsubject > a
{
	margin: 0px;
	line-height: normal;
	font-size: 15px;
	font-family: "Open Sans", "OpenSans2";
	color: #fff;
	padding: 0px;
}
.carditemsubject > p
{
	margin: 0px;
	font-size: 11px;
}
.carditembody
{
	margin: 10px 0px 10px 0px;
	display: inline-block;
}
.carditembody > p
{
	margin: 0px;
}
.carditembody > div
{
	margin: 0px;
	padding: 0px;
}

.carditemactionnote > .form-group > .group
{
	margin: 30px 0px 0px 0px;
}
.carditemactionnote  > .form-group > .group > textarea, .carditemactionnote > .form-group > .group > input
{
	padding: 10px;
	font-size: 14px;
	background-color: #333;
	color:#fff;
}
.carditemactionnote > .form-group > .group > label
{
	padding-left: 10px;
	font-size: 14px;
}
.carditemaction
{
	text-align: right;
	padding-top:10px;
}

.carditemaction > .btnApprove, .carditemaction > .btnConsult
{
	margin-right: 10px;
}



.TFAction{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	left:40px;
	background-color:#333;
	color:#FFF;
	border-radius:50px!important;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
	cursor: pointer!important;
	z-index: 1000;
}

.TFActionButtonIcon{
	margin-top:18px;
	font-size: 26px!important;
	color: white;
	line-height: normal!important;
}




/********** Scroll bar **********/
.approvalnav::-webkit-scrollbar {
  width: 10px;
}
/* Track */
.approvalnav::-webkit-scrollbar-track {
  background: #666; 
}
/* Handle */
.approvalnav::-webkit-scrollbar-thumb {
  background: #333; 
  border-radius: 5px;
}
/* Handle on hover */
.approvalnav::-webkit-scrollbar-thumb:hover {
  background: #111; 
}

/***************************************************************************************/
/***************************************************************************************/