//we use this for only view mode on the form

.mode-edit{

	& .fab-to-edit      { display: none;      }
	& .fab-to-update    { display: absolute;  }
	& .fab-to-add       { display: none;      }
	//& .hideOn-mode-edit { display: none;      }
}

.mode-add{

	& .fab-to-edit       { display: none;     }
	& .fab-to-update     { display: none;     }
	& .fab-to-add        { display: absolute; }
	& .appbar .primary  .fileTab { display: none;     }
	//& .hideOn-mode-add           { display: none;     }

}

.mode-view{

	border: 0.2px solid red;               //←←←←←←←←←←←←←←←←←←←← 

	& .fab-to-edit      { display: absolute; }
	& .fab-to-update    { display: none;     }
	& .fab-to-add       { display: none;     }
	& .hideOn-mode-view { display: none !important;       }
	
	& .page .textfield{

		//border: 0.2px solid red;               //←←←←←←←←←←←←←←←←←←←← 
		cursor: pointer;

		& .trailing { display: none;}		
		& .helper   { display: none;}
		& .counter  { display: none;}
		& .indicador{ display: none;}
		& .elem     { 
			border-bottom: none; 
			background: none;
			top: 12px;
			padding-top: 4px;
			padding-left: 0px;
			height: 24px;
			font-family: roboto;
			@include font(subtitle2, $c-b);
			pointer-events: none;

		
			&::placeholder {
			  opacity: 0;
			}

			//border: 0.2px solid green;               //←←←←←←←←←←←←←←←←←←←← 
		}	

		& .label { 
			top: 2px;
			left: 0px;
			opacity: 0.87;
			@include font(caption, $c-b);
			pointer-events: none;
			//border: 0.2px solid green;               //←←←←←←←←←←←←←←←←←←←← 
		}

		height: 36px;
		margin-top: 2px;
		//border: 0.2px solid green;               //←←←←←←←←←←←←←←←←←←←← 
	}


	& .page .radio{
		padding: 0px;

		& > div{ 
			margin-top: 0px;
			padding: 0px !important;
			min-height: 8px;
			//padding-right: 8px;
			//border: 0.2px solid red;               //←←←←←←←←←←←←←←←←←←←← 
		& label{  
			margin-left: 2px;  
			top: 0px;
			display: none;
		}

			& input{
				width: 16px;
				height: 16px;	
				border-radius: 0%;	
				display: none;

				&::before{
					top: 2px;
					left: 2px;

					border-radius: 0%;	
					width: 8px;
					height: 8px;
				}
				
				&:checked{
					& + label{ display: inline;}
					//display: inline-block;
				}

			}/**/
		}
		margin-top: 2px;
		//border: 0.2px solid green;               //←←←←←←←←←←←←←←←←←←←← 
	}/*radio*/


	& .page .checkbox{

		min-height: 20px;
		padding: 0px;
		& input{
			left: 0px;
			top: 4px;
			width: 18px;
			height: 18px;	

			border-radius: 0px;
			border: 2px solid $c-b;
			 opacity: 1;


			&:checked{
				background: $c-b url(svg/check.svg) no-repeat;


				&::before{
					display: none;
				}					
			}

			&::before{
			   opacity:0;
			   transform: scale(0);
			}
			

		}
		& label{
			top: 0px !important;
			margin-left: 4px;

		}
		margin-top: 2px;
		//border: 0.2px solid red;               //←←←←←←←←←←←←←←←←←←←← 
	}/*checkbox*/


	& .page .signature-line{
			//border: 2px solid red;               //←←←←←←←←←←←←←←←←←←←← 

		    &  label {
		    	display: none;
		    } 
		    &  span {
		    	visibility: visible;
		    } 

		    &::after{
		    	position: absolute;
		    	display: inline-block;
		    	content: '';
		    	top: 0px;
		    	left: 0px;

		    	width: 100%;
		    	height: 100%;
		        background-color: transparent;
		        background-image: url("./svg/view.svg");
		        background-repeat: no-repeat;
		        background-size: auto;
		        background-position: center;
		        border: 0.2px solid green;               //←←←←←←←←←←←←←←←←←←←← 

		    }



	}/*checkbox*/




	& .page .multitable{

		min-height: 36px;
		padding: 8px;
		background: $c-w;
		@include bs-1;

		& > .cont > .line{

			padding: 0px;
			padding-left:  4px;
			padding-right: 4px;
			min-height: 36px;
			margin-top: 8px;

			& > .remove { display: none; }
		}

		& > .btn { display: none; }


		//border: 0.2px solid red;               //←←←←←←←←←←←←←←←←←←←← 
	}/*checkbox*/





}