mycss.css

body {
	margin: 0;
	padding: 0;
	line-height: 1.5;
}

label {
	white-space: nowrap
}

.standBy {
	display: flex;
	flex-direction: column;
	background-color: #ddd;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	align-items: center;
	justify-content: center;
	font-size: 3vw;
	color: #aaa;
}

.spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
}
.spinner:after {
  content: " ";
  display: block;
  width: 34px;
  height: 34px;
  margin: 2px;
  margin-top: 15px;
  border-radius: 50%;
  border: 4px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: spinner 1.2s linear infinite;
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.serverInput {
	height: 17vh;
	width: 40vw;
	background-color: #ddd;
	color: black;
	border: 2px solid #ccc;
	padding: 10px;
	position: fixed;
	top: 40vh;
	left: 26vw;
	font-size: 1rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 10px;
	align-items: center;
}

.serverInput input {
	height: 40%;
	width: 90%;
}

.serverInput button {
	height: 60%;
	width: 60%;
}

.title {
	text-align: center;
}

.header .nav {
	display: flex;
}

.header .nav .navLink {
	color: #000;
	text-decoration: none;
	margin-left: 3vw;
	border: 1px solid #666;
	padding: 1vw;
	box-shadow: 5px 5px #666;
}

.prompt {
	position: fixed;
	width: 80vw;
	height: 80vh;
	top: 10vh;
	left: 10vw;
	background-color: #aaa;
	border: 3px solid #44a;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: auto;
}

.promptSm {
	position: fixed;
	width: 40vw;
	height: 40vh;
	top: 30vh;
	left: 30vw;
	background-color: #aaa;
	border: 3px solid #44a;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	overflow: auto;
	text-align: center;
}

.intro-grid {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 20px;
	margin-top: 10vh;
}

.intro-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 100%;
	background-color: gray;
}

.question-svg {
	position: relative;
	top: 3px;
	left: 3px;
}

.strikedText {
	text-decoration: line-through;
}

.prompt .p2 {
	margin-top: 20vh;
	border-bottom: 2px solid #666;
	padding: 1vw 5vw;
}

.prompt .estado {
	margin-right: 30vw;
}

.intro-flex {
	display: flex;
	justify-content: space-evenly;
	width: 100%;
}

.main .mainSelect {
	margin: 5vh 1vw;
}

.table, .table th, .table td {
	text-align: center;
	padding: 0.5rem;
	border-spacing: 3px;
	margin: 2vmin;
}

.contenteditable {
	background-color: #c1cfa9;
	border: 1px dashed black;
}

.taxes {
	background-color: darkgrey;
	border: 3px double black;
}

.noteditable {
	background-color: darkgrey;
	border: 1px solid black;
}

.mainBtnRow {
	width: 94vw;
	height: 8vh;
	margin-left: 1vw;
	padding: 10px;
	background-color: #ccc;
	display: flex;
	justify-content: center;
}

.mainBtn {
	margin-left: 3vw;
	padding: 5px;
}

.menu {
	width: 65vw;
	height: 45vh;
	padding: 15px;
	overflow: auto;
	background-color: #666;
	position: fixed;
	top: 15vh;
	left: 16vw;
}

/*for history log menu style */
#logMenu {
	width: 97vw;
	height: 97vh;
	top: 0vh;
	left: 0vw;
	background-color: #eee;
	padding: 1vmin;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* MAYBE
.tooltip {
	min-width: 30vw;
	max-width: auto;
	min-height: 8vh;
	max-height: auto;
	line-height: 10vh;
	background-color: rgba(5,5,5,0.4);
	color: #eee;
	text-align: center;
	vertical-align: middle;
	position: fixed;
	padding: 0vh 1vw;
}
*/

.btnsLastRow {
	display: flex;
	justify-content: flex-end;
}

.btnsMidRow {
	display: flex;
	width: 100%;
	justify-content: space-evenly;
}

.lastBtn {
	margin-right: 3vw;
}

.btn1 {
	border-radius: 50%;
	background-color: #acf;
	font-size: 0.9rem;
}

.grid1 {
	display: grid;
	grid-template-columns: repeat(2, 24% 25%);
	gap: 10px;
}

#datosNewMenu {
	font-size: 18px;
}

.invisible {
	display: none;
}

.cobrarBG {
	margin: 2vmin;
	background-color: rgb(179, 179, 179);
	width: 95vw;
	min-height: 78vh;
	max-height: auto;
}

.cobrarINPUT {
	background-image: linear-gradient(to right, rgba(170, 204, 255, 1), rgba(170, 204, 255, 0.1));
	width: 96%;
	height: 15vh;
	position: relative;
	top: 5vmin;
	left: 2%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	
}

@media screen and (max-width: 768px) {

	.serverInput {
		height: 70vh;
		width: 70vw;
		top: 15vh;
		left: 15vw;
		grid-template-rows: repeat(3, 1fr);
		place-items: center;
		padding: 0px;
	}

	.serverInput label {
		grid-column-start: 1;
		grid-column-end: 3;
	}
	
	.serverInput input {
		grid-column-start: 1;
		grid-column-end: 3;
		height: 30%;
		width: 90%;
	}
	
	.serverInput button {
		height: 40%;
		width: 70%;
	}

	.prompt {
		width: 99vw;
		height: 99vh;
		top: 0vh;
		left: 0vw;
	}

	.header .nav {
		display: grid;
		grid-template-columns: repeat(3, auto);
		gap: 25px;
		margin-top: 5vh;
		margin-right: 3vw;
	}

	.menu {
		width: 100vw;
		height: 100vh;
		padding: 5px;
		top: 0vh;
		left: 0vw;
	}
	
	.grid1 {
	  display: grid;
	  grid-template-columns: repeat(2, 20% 25%);
	  gap: 10px;
  }
	
	.promptSm {
		position: fixed;
		width: 70vw;
		height: 50vh;
		top: 20vh;
		left: 14vw;
		background-color: #aaa;
		border: 3px solid #44a;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		overflow: auto;
		text-align: center;
	}

	#histSendGrid {
		display: flex;
	}
}

@media screen and (max-width: 480px) {

	.serverInput {
		height: 100vh;
		width: 100vw;
		top: 0vh;
		left: 0vw;
		grid-template-rows: repeat(3, 1fr);
		place-items: center;
		padding: 0px;
	}

	.serverInput label {
		grid-column-start: 1;
		grid-column-end: 3;
	}
	
	.serverInput input {
		grid-column-start: 1;
		grid-column-end: 3;
		height: 40%;
		width: 90%;
	}
	
	.serverInput button {
		height: 50%;
		width: 80%;
	}
	
	.prompt {
		width: 98vw;
		height: 99vh;
		top: 0vh;
		left: 0vw;
	}

	.intro-grid {
		display: grid;
		grid-template-columns: repeat(3, auto);
		gap: 10px;
		margin-top: 5vh;
	}

	.intro-flex {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		height: 20%;
		margin-top: 4vh;
	}

	.header .nav {
		display: grid;
		grid-template-columns: repeat(3, auto);
		gap: 25px;
		margin-top: 5vh;
		margin-right: 3vw;
	}

	#datosBtnRow .mainBtn:not(:last-child) {
		display: none;
	}

	#responsive {
		display: block;
	}

	.mainBtnResp {
		display: block !important; 
		margin-bottom: 2vh;
	}

	#datosBtnRow {
		width: auto;
		height: auto;
		flex-direction: column;
		align-items: flex-start;
	}

	.promptSm {
		position: fixed;
		width: 80vw;
		height: 80vh;
		top: 10vh;
		left: 10vw;
		background-color: #aaa;
		border: 3px solid #44a;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		overflow: auto;
		text-align: center;
	}

	#histSendMenu {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		padding: 0;
	}

	#histSendGrid {
		display: flex;
	}

}