/*
Common styles

There are two different configurations: Default one for desktop pc screens and another for mobile screens.

Main Structure

Desktop structure:
fixed width of about 1200px
header: (flex) It contains page name and the icons for login and checkout.
navigation menu
slogan
menus (flex wrap)
column left and main content (<main>) (as flexbox).
footer

Note: We somethimes have to set height and width to 100% for avoiding the efect of block contraction when loading some content in a block element
*/

/* new stuff
 ------------------- */




/* Main Structure
 ------------------------------ */

html, body {
  min-width: fit-content;
  min-height: 100%;
  margin: 0;
  padding: 0;
}
.backgroundimage {
  min-height: 100%;
}
.backgroundspace {
  width: 100%;
  padding: 5px 0;
  display: flex;
	justify-content: center;
}
.mainblock {
  max-width: 1200px;
  min-width: 1200px;
}
@media screen and (max-width: 400px){
  .mainblock {
    min-width: unset;
  }
}
header {
  margin-left: 1em;
  margin-right: 1em;
}
.pgsubtitle {
  margin-left: 1em;
}
.maincolumns {
  display: flex;
}
.leftsidebox {
  margin-left: 1em;
  margin-right: 0.5em;
}
.maincolumns main {
  flex-grow: 1;
}
.centercolumn {
  margin-left: 0.5em;
  margin-right: 1em;
  position: relative;/*??????? maybe for absolute positioning*/
}
#centralcontent {
  padding: 1em 2em 2em 2em;
  min-height: 21em;
}
.toHide{
  opacity: 0;
}
.toVisible{
  transition: opacity 4s;
  opacity: 1;
}
footer {
  margin: 0em 1em;
}

/* General, distributed */
/* ------------------------------------------- */

/* Very generic */

/* This is because after clicking it gets outline */
button, [type="button"] {
	outline: none;
}
input{
	outline-color: #2196F3;
}

:root {
	--mainbackground: white;
}
html {
  scroll-behavior: smooth;
}
/* For edition elements inline display is not nice, better this */
span, a {
  display: inline-block; /*??????????????????*/
}
html, select, button{
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
}
a {
  text-decoration: none;
  color: black;
	cursor: pointer;
}
button, [type="button"] {
	cursor: pointer;
}
[data-placeholder]:empty::before{content: attr(data-placeholder); color:grey}
a:hover[data-placeholder]:empty::before{color:hsl(0, 0%, 10%)}
a.selected[data-placeholder]:empty::before{color:hsl(0, 0%, 10%)}
.selected a[data-placeholder]:empty::before{color:hsl(0, 0%, 10%)}
[contenteditable=true]:focus{outline: 2px dashed lightgrey;}
table{border-collapse:collapse;} /* It is needed for the table border to be 0 width */
td,th{padding:0;vertical-align:top;} /* Padding 0 because this tables are used as boxes to locate the content. vertical-align:top because the content in the table should be as appear in the dom that is positioning from top to down */
.edit-wrapper {
  position: relative;
}
.space {
	width: 100%;
  height: 2em;
}
.btn{
  /*display: inline-block;*/
  padding: 0.5em 1.5em;
  border: 1px solid rgb(4 66 137 / 0.2);
  border-radius: 4px;
  cursor: pointer;
  font: unset;
  font-weight: bold;
}
.btn:hover{
	border-color: #2196F3;
}
.minibtn{
  padding: 0 0.3em;
}
.transp{
  background: transparent;
  border: transparent;
}
.transp:hover{
  color: #3705D2 !important;
}

.form-group {
    display: block;
}
.form-label {
    display: block;
    margin-bottom: .375rem;
    font-weight: 600;
    font-size: 0.875rem;
}
.form-control:hover{
	border-color: #2196F3;
}
.form-control {
    padding: 0.375rem 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 40, 100, 0.12);
    border-radius: 3px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-field {
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 5px;
}
.formtable {
  background-color: #e5e6f5;
  border: 1px solid #AAA;
  border-radius: 3px;
  /* box-shadow: 0px 3px 6px rgb(136, 136, 136); */
}
.formtable {
  margin: 0 auto 2rem auto;
  border-collapse: separate;
}
.formtable a {
  color: #3D3E3D !important;
    font-weight: normal !important;
}
.formtable a:hover {
  color: #D2853C !important;
}
.formtable th {
    background-color: #ededed;
    border-bottom: 1px solid #AAA;
}
.formtable th {
    padding: 4px;
}
.formtable td {
    padding: 0.2rem 0.5rem;
}
.formtable > div {
    padding: 0.2rem 0.5rem;
}
.formtable td.label{
  text-align: right;
}
.formtable td.hr {
    height: 5px;
}
.formtable td.centertext {
  text-align: center;
}
.boxframe {
  border: 1px solid #AAA;
  border-radius: 3px;
  padding: 0.5em;
  display: inline-block;
}
.flexbox{
  display: flex;
  align-items: center;
}
.flexbox > div{
	margin: 4px;
}
.flexjoin {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
}

/* Less generic */

.dialogbox .btn{
	background-color: lightskyblue;
}

.dialogbox .btn:hover{
	border-color: darkslateblue;
}
.page-indexes{
	display: flex;
	margin: 1em 0;
	justify-content: center;
}
.page-indexes a{
	border: 1px solid #aaa;
	padding: 0.5em 0.6em;
	margin: 0.3em;
	color: #666;
}
.page-indexes a.selected, .page-indexes a.selected:hover{
	background-color: lightgrey;
	border-color: lightgrey;
}
.page-indexes a:hover{
	background-color: grey;
}
.page-content {
	min-height: 16em;
}
/* Table for formating. Transparent. */
table.list {
  margin:auto;
  border: 1px #666 solid;
}
/* **** esto podria dar problemas si hay thead , tbody */
table.list > tr > td {
  border: 1px #666 solid;
  padding:0.5em;
  vertical-align: middle;
}
table.list > tr > th {
  background-color: #F0F0F0;
  padding:5px;
  vertical-align: middle;
}
table.list > tr > td.containerbuttons{
  text-align: center;
}
details {
	cursor: pointer;
}
details summary:hover{
	color: #555;
}
details .explanation{
	max-width: 15em;
	width: max-content;
	padding: 0.5em;
	border: 1px solid;
	border-radius: 3px;
}
.content-editable-active {
}
.singlefield{
	padding-right: 2.2em;
}

.msgbox {
    border: 1px solid hsl(0, 0%, 70%);
    padding: 1em 2em;
    text-align: center;
    margin: 1.5em;
    border-radius: 3px;
    display: inline-block; /*????????*/
		align-self: center;
}


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Elements */
/* --------------------------------- */

/* Colors
	Dark: hsl(0, 0%, 10%);
	Light dark 20%, grey 30%, light grey: 40%
*/

header .headertop{
  display: flex;
}
@media screen and (max-width: 400px){
  header div.headertop {
    display: block;
  }
}
header .pgtitle{
  flex-grow: 1;
}
.pgtitle h1 {
  font-size: 2.5em;
  margin: 0;
  color: hsl(0, 0%, 30%);
}
.pgsubtitle h2 {
  font-size: 1.2em;
  margin: 0.3em 0 0.3em 0.3em;
  color: color: hsl(0, 0%, 30%);
  font-weight: normal;
}
header .toolbar{
  display: flex;
  padding-left: 4em;
	position: relative; /* important for cart positioning*/
	margin-top: 0.3em;
}
header .toolbar a.toolbaricon{
  margin-left: 0.5em;
  margin-right: 0.5em;
  text-align: center;
  font-size: 14px;
}
.toolbaricon .icon-caption {
  min-width: 4em;
}
@media screen and (max-width: 400px){
	.pgsubtitle{
		display: none;
	}
	.pgtitle h1 {
		font-size: 1.5em;
		margin-bottom: 0.6em;
	}
	header {
		margin-bottom: 1em;
	}
	header div.toolbar {
		padding-left: 5px;
		align-items: center;
		gap: 0.5em;
	}
}
/* icons bar */

.centerelements{
	display: flex;
	flex-flow: column;
	align-items: center; /* justify-content gives a diferent result in this case */
}

nav ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebox {
  min-width: 10em;
}
.sidebox .boxtitle{
  padding: 0.4em 0;
  text-align: center;
	color: hsl(0, 0%, 20%);
}
.sidebox .boxtitle, .sidebox .boxtitle a{
  font-weight: bold;
}
.sidebox .boxbody{
  padding: 0.5em 0;
  display: flex;
  flex-flow: column;
}
.sidebox .boxbody a{
  color: rgb(80,80,80);
}
.sidebox .boxbody a:hover{
	color: hsl(0, 0%, 10%);
}
.sidebox .boxbody a.selected{
  font-weight: bold;
	color: hsl(0, 0%, 10%);
}
.sidebox .boxlist{
  padding: 3px 8px 3px 8px;
}

@media screen and (max-width: 400px){
	div.maincolumns {
	  display: block;
	  width: 100%;
	}
	div.centercolumn {
		margin: 1em;
		margin-left: 1.5em;
	}
	#centralcontent {
		padding: 1em;
	}
	div.space {
		height: 1em;
	}
	header div.toolbar a.toolbaricon {
		font-size: 0.9em;
	}
}


/* Unchecked zone */
/* ------------------------ */

/* Loaders */
/* This is not used but I save it in case we could use it */
/*<span class="spinner-loader"></span>*/
.spinner-loader,.spinner-loader:after{
    width: 64px;
    height: 64px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -32px;
    margin-left: -32px;
    border-radius: 50%;
    z-index: 2
 }
.spinner-loader {
    background-color: transparent;
    border-top: 10px solid rgb(66,139,202);
    border-right: 10px solid rgb(66,139,202);
    border-bottom: 10px solid rgb(66,139,202);
    border-left: 10px solid rgba(66,139,202,.2);
    transform: translateZ(0);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: .9s;
    animation-name: spinner-loader-loading
 }
@keyframes spinner-loader-loading{
  0% {
      transform: rotate(0deg)
  } to {
      transform: rotate(1turn)
  }
}


/* old */
/*
.flexrows{
  display: flex;
  flex-flow: column;
}
.orderrows > div{
	margin: 6px 4px;
}
.separator {
	width: 100%;
}
.closeXfont {
	font-size:1.4em;
	font-weight: bold
}
table.order .product {
  width: 65%;
}
table.order .quantity {
  width: 11%;
}
table.order .price {
  width: 14%;
}
table.order .total {
  width: 10%;
}
table.order tr.total {
  font-weight: bold;
  text-align: right;
}
*/