@font-face{
	font-family:'Roboto';
	font-style:normal;
	font-weight:900;
    src:url(../fonts/Roboto-Black.ttf);
}

@font-face{
	font-family:'Roboto';
	font-style:normal;
	font-weight:400;
    src:url(../fonts/Roboto-Regular.ttf);
}

@font-face{
	font-family:'Roboto';
	font-style:normal;
	font-weight:300;
    src:url(../fonts/Roboto-Light.ttf);
}

@font-face{
	font-family:'Roboto';
	font-style:normal;
	font-weight:100;
    src:url(../fonts/Roboto-Thin.ttf);
}

:root{
	--hue:0;
	--text-color:hsl(var(--hue), 100%, 10%);
}

*,
::after,
::before{
	margin:0;
	padding:0;
	outline:0;
	box-sizing:inherit;
	text-decoration:none
}

html{
	box-sizing:border-box;
	font-family:Roboto;
	/* min-height:100%; */
	color:var(--text-color);
	/* height:calc(100vh - 56px); */
	/* min-height: -webkit-fill-available; */
}

body{
	display:flex;
	flex-direction:column;
	height:100dvh;
	/* gap:1rem; */
	/* height:100vmin; */
	/* height:100%; */
	/* min-height: -webkit-fill-available; */
}

main{
	display:flex;
	flex-direction:column;
	height:100%;
	
	/* display:grid; */
	/* grid-template-rows:min-content 1fr 1fr; */
}

content{
	overflow:auto;
	/* padding-block:1rem; */
}

.table-row:nth-child(even){
	background-color:rgb(240,240,240);
}

.table-row{
	padding-inline:0.5rem;
	padding-block:4px;
	display:grid;
	grid-template-columns:min-content 1fr;
	gap:0.25rem;
	color:var(--text-color);
}

/* .table-row *{ */
	/* pointer-events:none; */
/* } */

.buttons{
	display:flex;
	flex-direction:column;
	gap:0.5rem;
}

.button{
	background-color:rgb(255,240,240);
	display:flex;
	gap:0.5em;
	justify-content:center;
	font-size:1rem;
	color:var(--text-color);
	border:1px solid rgb(128,0,0);
}

.button-full{
	margin-inline:1rem;
	padding:0.5rem;
}

.button-large{
	margin-inline:1rem;
	margin-bottom:1rem;
	padding-block:1rem;
	font-size:1.25rem;
}

/* .button + .button{ */
	/* margin-top:1rem; */
/* } */

.new-item{
	position:absolute;
	bottom:calc(70px + 1rem);
	right:1rem;
	color:var(--text-color);
	/* background-color:red; */
	/* width:50px; */
	/* height:50px; */
	/* border-radius:25px; */
}

.new-item > i{
	/* position:absolute; */
	/* bottom:86px; */
	/* right:1rem; */
	/* background-color:red; */
	width:60px;
	height:60px;
	border-radius:30px;
	display:grid;
	place-items:center;
	background-color:rgb(255,255,255);
	border:1px solid rgb(240, 240,240);
	font-size:1.25rem;
}

.barcode-input{
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	font-family:courier;
	border:none;
	background-color:transparent;
	width:100%;
	text-align:center;
}

nav{
	/* display:grid; */
	/* grid-template-columns:1fr 1fr 1fr; */
	margin-top:auto;
	display:flex;
	min-height:70px;
	/* background-color:rgb(255,240,240); */
	/* background-color:rgb(240,240,240); */
	border-top:1px solid rgb(240, 240,240);
}

nav > a{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:0.25rem;
	width:100%;
	color:black;
}

nav > a > i{
	font-size:1.75rem;
}

nav > a > span{
	font-size:0.75rem;
}

header,
.header-link{
	display:flex;
	align-items:center;
	height:80px;
	border-bottom:1px solid rgb(240, 240, 240);
	padding:0.5rem;
	gap:0.5rem;
	color:var(--text-color);
	background-color:rgb(255, 255, 255);
}

header > img,
.header-link > img{
	height:100%;
	aspect-ratio:1;
	border-radius:100%;
}

header > div,
.header-link > div{
	display:flex;
	flex-direction:column;
}

header > div > span:first-child,
.header-link > div > span:first-child{
	font-size:1.5rem;
	font-weight:300;
}

.history-back{
	display:flex;
	align-items:center;
	color:var(--text-color);
	font-size:1rem;
	gap:0.5rem;
	padding:1rem;
}

.history-back i{
	font-size:1.5rem;
}

h1{
	text-align:center;
	font-size:2rem;
	font-weight:100;
	padding-block:3rem;
}

h1 + h2{
	margin-top:-2.5rem;
	margin-bottom:3rem;
	text-align:center;
    font-weight:300;
    font-size:1.25rem;
}

h2{
	text-align:center;
	font-size:1.5rem;
	font-weight:100;
}

/* h3{ */
	/* text-align:center; */
	/* font-size:1.75rem; */
	/* font-weight:100; */
	/* padding-top:5rem; */
	/* padding-bottom:1rem; */
/* } */

.status-message{
	display:block;
	text-align:center;
}

.button-link{
	display:block;
	text-align:center;
	color:inherit;
	padding:1rem;
	font-size:1.25rem;
	width:100%;
	background-color:rgb(255,245,245);
	border:1px solid rgb(220,220,220);
	margin-top:1rem;
}

.button-link i{
	margin-right:0.5rem;
}

.image-link{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:0.5rem;
	font-size:1.25rem;
	height:50px;
	margin-top:1rem;
}

.image-link > img{
	height:100%;
}

.section-message{
	display:flex;
	flex-direction:column;
	align-items:center;
}

.section-message i{
	font-size:10rem;
}
.section-message span{
	font-size:1.5rem;
}

/* section{ */
	/* width:100%; */
	/* margin-left:auto; */
	/* margin-right:auto; */
	/* padding:1rem; */
/* } */

image, svg{
	display:block;
}

.image-full{
	width:100%;
	padding:1rem 1rem 0 1rem;
}

footer{
	background-color:hsl(var(--hue), 0%, 0%);
	display:flex;
	flex-direction:column;
	width:100%;
	padding:2rem;
	color:white;
	margin-top:auto;
}

.foot-head{
	font-weight:700;
}

.foot-head:not(:first-child){
	margin-top:1rem;
}

.foot-line{
	color:white;
}

a.foot-line{
	text-decoration:underline;
}












/*
 *    #######                      
 *    #        ####  #####  #    # 
 *    #       #    # #    # ##  ## 
 *    #####   #    # #    # # ## # 
 *    #       #    # #####  #    # 
 *    #       #    # #   #  #    # 
 *    #        ####  #    # #    # 
 *                                 
 *    
 *    Form
*/


.form-links{
	display:flex;
	justify-content:center;
	padding:0.5rem 0 0.5rem 0;
	margin:0.5rem 0 0.5rem 0;
	user-select:none;
}

.form-links > *{
	font-size:1.25rem;
	
}

.form-links > span{
	/* padding:0.5rem 0; */
}

.form-link{
	display:flex;
	gap:0.25em;
	justify-content:center;
	align-items:center;
	padding:1rem 1rem;
	background:none;
	border:none;
	/* text-align:center; */
	color:var(--text-color);
}


.forms-container{
	display:flex;
	overflow-x:auto;
	overflow-y:hidden;
	/* scroll-snap-type:x mandatory; */
	/* width:100%; */
}

/* .forms-container::-webkit-scrollbar{ */
	/* display:none; */
/* } */

.form{
	flex-shrink:0;
	width:100%;
	padding-inline:1rem;
	padding-bottom:1rem;
	/* scroll-snap-align:center; */
	display:flex;
	flex-direction:column;
	gap:2rem;
	/* margin-top:4rem; */
}

.forms-title{
	display:block;
	text-align:center;
	font-size:2.25rem;
	font-weight:400;
}

h3{
	text-align:center;
	font-size:2.25rem;
	font-weight:100;
}

.form-title{
	margin-bottom:-2rem;
}

.form-subtitle{
	font-size:1.0rem;
	font-weight:400;
	color:var(--text-color);
	text-align:center;
	/* display:block; */
}

.input-block-textarea{
	display:flex;
	flex-direction:column;
}

.form textarea{
	padding:8px;
	width:100%;
	background-color:hsl(var(--hue), 0%, 80%);
	border:2px solid hsl(0, 0%, 40%);
	font-size:1.0rem;
	height:96px;
}

.form textarea:active{
	border:2px solid hsl(var(--hue), 100%, 40%);
}

.form textarea:focus{
	border:2px solid hsl(var(--hue), 100%, 40%);
	background-color:hsl(var(--hue), 100%, 80%);
}

.input-block-checkbox{
	display:grid;
	grid-template-columns:min-content 1fr min-content;
	align-items:center;
	gap:0.5rem;
}

.input-block-checkbox > div{
	width:32px;
	height:32px;
	background-color:hsl(var(--hue), 0%, 80%);
	border:2px solid hsl(0, 0%, 40%);
	
	display:grid;
	place-items:center;
}

.input-block-checkbox > div > i{
	opacity:0;
	transition:opacity 250ms;
}

.input-block-checkbox.active > div > i{
	opacity:1;
}

.input-block-checkbox > span{
	white-space:nowrap;
}

.form-subtitle a{
	color:var(--text-color);
}

.form label{
	font-size:1.2rem;
	user-select:none;
}

.form input[type="text"],
.form input[type="password"],
.form input[type="tel"],
.form input[type="number"]{
	width:100%;
	height:48px;
	font-size:1.25rem;
	padding:0 0.5rem;
	background-color:hsl(var(--hue), 0%, 80%);
	border:2px solid hsl(0, 0%, 40%);
	/* border:none; */
}

.form input:active{
	border:2px solid hsl(var(--hue), 100%, 40%);
}

.form input:focus{
	border:2px solid hsl(var(--hue), 100%, 40%);
	background-color:hsl(var(--hue), 100%, 80%);
}

.submit{
	width:100%;
	display:flex;
	align-items:center;
	height:48px;
	font-size:1.3rem;
	gap:0.25rem;
	justify-content:center;
	background-color:hsl(var(--hue), 100%, 40%);
	border:2px solid hsl(var(--hue), 100%, 80%);
	color:white;
}

.submit svg{
	height:44px;
	padding:8px;
	fill:white;
}

.check-radio-label{
	margin-top:1rem;
	margin-bottom:-1rem;
}

.check-radio-container{
	display:block;
	display:flex;
	align-items:center;
	position:relative;
	padding-left:calc(26px + 0.25em);
	cursor:pointer;
	user-select:none;
	height:26px;
}

.check-radio-container input{
	position:absolute;
	opacity:0;
	cursor:pointer;
	height:0;
	width:0;
}

.checkmark{
	position:absolute;
	top:0;
	left:0;
	height:26px;
	width:26px;
	display:grid;
	place-items:center;
	color:rgb(240,240,240);
	background-color:rgb(240,240,240);
	border:1px solid rgb(255,128,128);
}

.checkmark-square{
	border-radius:2px;
}

.checkmark-round{
	border-radius:13px;
}

.check-radio-container input:checked ~ .checkmark{
	color:rgb(255,255,255);
	background-color:rgb(255,0,0);
	border:1px solid rgb(255,128,128);
}

/*
 *    #     #                                                  
 *    ##   ## ######  ####   ####    ##    ####  ######  ####  
 *    # # # # #      #      #       #  #  #    # #      #      
 *    #  #  # #####   ####   ####  #    # #      #####   ####  
 *    #     # #           #      # ###### #  ### #           # 
 *    #     # #      #    # #    # #    # #    # #      #    # 
 *    #     # ######  ####   ####  #    #  ####  ######  ####  
 *                                                             
 *    
 *    Messages
*/

#messages{
	display:flex;
	flex-direction:column;
	/* align-items:flex-end; */
	/* width:50%; */
	gap:2rem;
}

.message-container{
	display:flex;
	flex-direction:column;
	padding-right:1rem;
	/* width:50%; */
	gap:0.5rem;
	align-items:flex-end;
}

.message-name-container{
	display:flex;
	align-items:center;
	gap:0.5rem;
	/* font-size:0.75rem; */
}

.message-name-container img{
	width:24px;
	height:24px;
	border-radius:12px;
	background-color:rgb(0, 0, 0, 0.1);
}

.message-message{
	background-color:rgb(0,128,0);
	border:1px solid rgb(0,64,0);
	padding:0.5rem 1rem;
	border-radius:0.5rem;
	width:max-content;
	color:white;
}

.message-date{
	font-size:0.75rem;
}

/*
 *    #     #                                                                    
 *    ##    #  ####  ##### # ###### #  ####    ##   ##### #  ####  #    #  ####  
 *    # #   # #    #   #   # #      # #    #  #  #    #   # #    # ##   # #      
 *    #  #  # #    #   #   # #####  # #      #    #   #   # #    # # #  #  ####  
 *    #   # # #    #   #   # #      # #      ######   #   # #    # #  # #      # 
 *    #    ## #    #   #   # #      # #    # #    #   #   # #    # #   ## #    # 
 *    #     #  ####    #   # #      #  ####  #    #   #   #  ####  #    #  ####  
 *                                                                               
 *    
 *    Notifications
*/

.notifications{
	position:fixed;
	top:0;
	left:0;
	right:0;
	
	display:flex;
	flex-direction:column;
	gap:4px;
}

.notification{
	/* position:absolute; */
	display:grid;
	grid-template-columns:1fr 40px;
	grid-template-rows:32px 1fr;
	background-color:hsl(var(--hue), 100%, 20%, 0.9);
	/* border-top:2px solid hsl(var(--hue), 100%, 50%, 0.9); */
	width:100%;
}

.notification-date{
	grid-column:1/2;
	grid-row:1/2;
	display:flex;
	gap:0.5em;
	padding:0.5rem;
	align-items:center;
	color:hsl(var(--hue), 100%, 100%, 0.5);
	font-size:0.75rem;
	border-right:1px solid hsl(var(--hue), 100%, 10%, 0.2);
}

.notification-close{
	grid-column:2/3;
	grid-row:1/3;
	width:20px;
	place-self:center;
	fill:white;
}

.notification-body{
	grid-column:1/2;
	grid-row:2/3;
	border-right:1px solid hsl(var(--hue), 100%, 10%, 0.2);
	padding:0.5rem;
	color:white;
}

.notification-date > svg{
	height:10px;
	fill:hsl(var(--hue), 100%, 100%, 0.5);
}

















p.deal-name{
	padding-inline:1rem;
	font-size:1.25rem;
}

p.bulletin-body,
p.deal-description{
	padding-inline:1rem;
	padding-bottom:1rem;
	padding-top:0.25rem;
}

.dealer-deal-description{
	padding-inline:1rem;
}










/* .gdpr{ */
	
/* } */

.gdpr h3{
	text-align:left;
	font-size:2rem;
	font-weight:100;
	padding-top:0;
	padding-bottom:1rem;
}

.gdpr h4{
	font-size:1rem;
	font-weight:700;
	padding-block:0.25rem;
}

.gdpr p{
	padding-bottom:1rem;
}

.gdpr ul{
	padding-left:1rem;
	padding-bottom:1rem;
}



/* h1{ */
	/* text-align:center; */
	/* font-size:2rem; */
	/* font-weight:100; */
	/* padding-block:3rem; */
/* } */

/* h1 + h2{ */
	/* margin-top:-2.5rem; */
	/* margin-bottom:3rem; */
	/* text-align:center; */
    /* font-weight:300; */
    /* font-size:1.25rem; */
/* } */

/* h2{ */
	/* text-align:center; */
	/* font-size:1.5rem; */
	/* font-weight:100; */
/* } */






















@media screen and (min-width:600px){
	section{
		width:60%;
		margin-left:20%;
	}
	
	footer{
		padding-left:20%;
	}
}

@media screen and (min-width:800px){
	section{
		width:50%;
		margin-left:25%;
	}
	
	footer{
		padding-left:25%;
	}
}

@media screen and (min-width:1000px){
	section{
		width:40%;
		margin-left:30%;
	}
	
	footer{
		padding-left:30%;
	}
}

@media screen and (min-width:1200px){
	section{
		width:35%;
		margin-left:32.5%;
	}
	
	footer{
		padding-left:32.5%;
	}
}

@media screen and (min-width:1400px){
	section{
		width:30%;
		margin-left:35%;
	}
	
	footer{
		padding-left:35%;
	}
}

@media screen and (min-width:1600px){
	section{
		width:25%;
		margin-left:37.5%;
	}
	
	footer{
		padding-left:37.5%;
	}
}

@media screen and (min-width:1800px){
	section{
		width:20%;
		margin-left:40%;
	}
	
	footer{
		padding-left:40%;
	}
}