﻿#myInput {
	cursor: help !important; cursor: default !important;
	}
.container-inner-room { 
	WIDTH: 100% !IMPORTANT; 
	HEIGHT: 100% !IMPORTANT; 
	MARGIN-TOP: 0 !IMPORTANT; 
	TOP: 0 !IMPORTANT; 
	LEFT: 0;
  	background: linear-gradient(100deg, #402, #006);
  	padding: 0em; 
  	display: flex; 	
	POSITION: ABSOLUTE; 
  	justify-content: center;
  	align-items: center;
  	background-color: #ffffff;
 	background-position: 50% 50%;
  	animation: background-move 10s linear infinite;
  	background-size: 100vw auto, 100% 100%;
  	background-size: max(100vw, 30em) auto, 100% 100%;   
  	border-radius: 5%; border-radius: 50px;
	}

@keyframes background-move {
  	0% {
    		background-position: 0 0, 0 0;
  		}

  	100% {
    		background-position: 100vw 0, 0 0;
    		background-position: max(100vw, 40em) 0, 0 0;
  		}
	}

.input-group {
  	width: 100%;
  	max-width: 20em;
  	display: flex;
  	flex-direction: column;
  	z-index: 2; 
	}

@supports (mix-blend-mode: darken) {
  	.input-group {
   		 position: relative;
   	 	mix-blend-mode: lighten;
  		}

  	.input-group__label {
    		position: absolute;
    		left: 3em;
    		top: -0.28em;
    		background: #000;
  		}

  	.input-group-FOOTER__label {
    		position: absolute;
    		left: 3em;
    		bottom: -0.75em;
    		background: #000;
  		}
	}

.input-group__label, .input-group-FOOTER__label {
  	padding: 0 0.5em;
  	margin-bottom: 0.5em;
  	text-transform: uppercase;
  	font-size: 0.875em;
  	letter-spacing: 0.1em;
  	color: #ccd;
  	color: rgba(255, 220, 255, 0.6);
  	cursor: pointer;
	}

.input-group__input {
  	color: #fff; 
  	line-height: 1;
  	border-style: none;
  	outline: none;
  	height: calc(1em + 1.6em + 0.5em);
  	width: 100%;
  	padding: 0.8em 1em;
  	border: 0.25em solid transparent;
  	background-image: linear-gradient(#000, #000), linear-gradient(120deg, #f09 0%, #0ff 50%, #9f0 100%);
  	background-origin: border-box;
  	background-clip: padding-box, border-box;
  	border-radius: 1.8em;
  	background-size: 200% 100%;
  	transition: background-position 0.8s ease-out;
	}










/***************************************************************************************************************************/

/* SMALLER TABLET screens -----------*/   /*--- SMALLER TABLET ---*/
@media screen and (max-width: 480px) {
  	.input-group__input {
  		font-size: 1.04em;     
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/
  	.input-group__input {
  		font-size: 1.04rem;
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/
  	.input-group__input {
  		font-size: 1.05rem;   
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/
  	.input-group__input {
  		font-size: 1.08rem;  
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 690px) and (max-width : 769px) {/*--- Tablet portrait ---*/
  	.input-group__input {
  		font-size: 1.09rem; 
  		}
	}




/*********************************************************************************************************/
/* SMALLER TABLET screens -----------*/   /*--- (location for ID picture) --- SMALLER TABLET ---*/
@media only screen and (min-width : 769px) and (max-width : 800px) {/*--- Small tablet landscape ---*/
	.input-group__input {
  		font-size: 1.10rem;  
  		}
	}




/*********************************************************************************************************/
/* SMALLER TABLET screens -----------*/   /*--- (location for ID picture --- SMALLER TABLET ---*/
@media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/
  	.input-group__input {
  		font-size: 1.15rem; 
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape ---*/
  	.input-group__input {
  		font-size: 1.20rem; 
  		}
	}





/*********************************************************************************************************/
/* Desktops and laptops ----------- */  /*--- SMALL DESKTOP ---*/
@media only screen 
and (min-width : 1224px) {
  	.input-group__input {
  		font-size: 1.25rem; 
		} 
	}
/*********************************************************************************************************/








.input-group__input:hover {
  	background-position: 100% 0;
	}

.input-group__input:focus {
  	outline: 2px dashed #ad2b89;
  	outline-offset: 0.5em;
	}

66.recorded-time-and-date {
	WIDTH: AUTO; 
	HEIGHT: 25PX; 
	FONT-SIZE: 12PX; 
	COLOR: #9A73B0; 
	z-index: 1; 
	top: 0; 
	margin-top: 3px; 
	right: 0 !important; 
	margin-right: 8px !important; 
	float: right !importnat; 
	position: absolute; 
	BORDER: 0px;
	}