@charset "ISO-8859-1";
@import url(md/theme.css);

:root {
	
	/* Couleur FFRP, FFC et FFCT, FFE 
 	* rouge trafic RAL 3020 #BB1F11
	• jaune trafic RAL 1023
	• orange RAL 2004
	• blanc trafic RAL 9016	
	*/
	
	--blanc-trafic 	: #F1F1EA; /*GR bague de localisation*/
	--rouge-trafic 	: #BB1F11; /*GR GRP*/
	--jaune-trafic 	: #F7B500; /*PR GRP VTT*/
	--orange		: #F67829; /*Equitation */
	--vert-mousse   : #114232; /*bague de localisation*/
	
	--screen-height: 98vh;
	--screen-width: 98vw;
	--card-radius: 8px;

    --lame-directionnelle: #F9A900; /*RAL 1003*/
    --on-lame-directionnelle:#0E0E10; /*RAL 9005*/
    
    --bague-de-localisation: var(--vert-mousse);
    --on-bague-de-localisation: var(--blanc-trafic);
    
    --on-lame-directionnelle: ;
    
    --net-color: #008351;
    --on-net-color: #FFFFFF;
	--net-color-container: lightyellow ;   
	
    --fixme-color: rgb(238, 130, 238);
    --on-fixme-color: black;
    --fixme-color-container:rgba(238, 130, 238, 0.6);
	
    --hiking-color: orange;
    --error-color: red;
    --error-color-container: white;
}

body {
	background: antiquewhite;	
}

* {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

input {
	margin: auto;
	padding: 0.5em;
}
/* MD CARD CONTAINER */
.md-card {
	border-radius: var( --card-radius );    
	padding: 16px;
}

.md-card.filled {
	background-color: var(--md-sys-color-primary-container);
	color: var(--md-sys-color-on-primary-container);		
}

.md-card.elevated {
	background-color: var(--md-sys-color-surface-container);
	color: var(--md-sys-color-on-surface-container);
	box-shadow: 5px 5px 5px lightgray;	
	border: 1px solid var(--md-sys-color-on-surface-container);
}


.md-card.filled-error, .error {
	background-color: var(--md-sys-color-error);
	color: var(--md-sys-color-on-error);		
}

.md-card.filled-note, .note {
	background-color: var(--md-sys-color-tertiary-container);
	color: var(--md-sys-color-on-tertiary-container);		
}

.md-card.filled-fixme, .fixme {
	background-color: var( --fixme-color-container );
	color: var( --on-fixme-color );		
}

.md-card .icon {
	height: 48px;
	border-radius: 48px;    
}

.md-button {
	border-radius: 20px;    
	padding: 11px 24px;
	font-family: var(--md-sys-typescale-label-large-font-family-name);
   	font-style: var(--md-sys-typescale-label-large-font-family-style);
  	font-weight: var(--md-sys-typescale-label-large-font-weight);
  	font-size: var(--md-sys-typescale-label-large-font-size);
  	letter-spacing: var(--md-sys-typescale-label-large-tracking);
  	line-height: var(--md-sys-typescale-label-large-height);
  	text-transform: var(--md-sys-typescale-label-large-text-transform);
  	text-decoration: var(--md-sys-typescale-label-large-text-decoration);
}

.bague-de-localisation {
	background-color: var(--bague-de-localisation);	
	color: var(--on-bague-de-localisation);
	font-family: Arial;
	font-size: 15px;
	font-weight: 400;
}

.bague-de-localisation .operator {
	font-weight: 200;
}

.lame-directionnelle {
	background-color: var(--lame-directionnelle );	
	color: var(--on-lame-directionnelle);	
}

.lame-directionnelle .nom-direction {
	font-family: Arial;
	font-size: 15px;
	font-weight: 600;
}

.lame-directionnelle .temps-kilometre {
	font-weight: 400;	
}
.lame-directionnelle .balisage {
	font-weight: 300;	
}

.md-button.filled {
	background-color: var(--md-sys-color-primary);
	color: var(--md-sys-color-on-primary);		
}

.md-button.filled-tonal {
	background-color: var(--md-sys-color-secondary);
	color: var(--md-sys-color-on-secondary);		
}

.md-button.filled-error {
	background-color: var(--md-sys-color-error);
	color: var(--md-sys-color-on-error);		
}

.md-button.elevated {
	background-color: var(--md-sys-color-surface);
	color: var(--md-sys-color-on-surface);		
	box-shadow: 0px 1px var(--md-sys-color-shadow);
}

.md-button.right {
	margin-top: 8px;
	margin-left: 8px;
}

.md-button.center {
	width: fit-content;
	margin: auto;
	text-align: center;
	}

.outlined {
	border: 1px solid var(--md-sys-color-outline);
	background-color: var(--md-sys-color-surface);
	color: var(--md-sys-color-on-surface);	
}

.outlined-network{
	border: 1px solid var(--net-color);
	background-color: var(--net-color-container);
	color: var(--net-color);	
    border-width: 3px;
    background: lightyellow;
}

.outlined-error{
	border: 1px solid var(--error-color);
	background-color: var(--error-color-container);
    border-width: 3px;
	color: var(--error-color);	
	font-style: italic;
	font-weight: bold;
    
}

/* FLEX AND GRID */
.flex-column, .flex-row {
    display: flex;
    gap: 8px;			
}

.flex-column { flex-direction: column;}
.flex-row{ flex-direction: row;}

.flex-row > div { margin: auto; }

form.flex-row > :first-child { width: 100%; }
form.flex-row > :last-child { width: min-content; }

.flex-row > :last-child { width: 100%; }

 .flex-row .last-right { 
	 text-align: right;
 }

.arrow-right {
	border-top-right-radius: 48px;
    border-bottom-right-radius: 48px;
    border-right: 12px solid;
}

.arrow-left {
	border-top-left-radius: 48px;
    border-bottom-left-radius: 48px;
    border-left: 12px solid;
}

.arrow-left .flex-row > :first-child { width: 100%; }
.arrow-left .flex-row > :last-child { width: inherit; }

#map { 
	border-radius: var( --card-radius );    
	height: var( --screen-height );
}

.right {
	float: right;
	}

.symbol {
	width: 22px !important;
	height: 22px !important;	
	background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.marker {
	width: 54px !important;
    height: 54px !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
	margin-left: auto;
    margin-right: auto;    
}

.symbol img {
	height: 22px !important;	
	width: 22px !important;
}

.sign {
    width: 44px !important;
	margin-left: auto;
    margin-right: auto;	
	background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.leaflet-popup-content-wrapper {
	padding: inherit !important;
	background: inherit !important;
    color: inherit !important;
    box-shadow: inherit !important 	
}

.leaflet-popup-content {
    margin: 0px 24px 1px 20px !important;
}

.leaflet-popup-tip 
{
    background:  inherit !important;
    color: inherit !important;
    box-shadow: inherit !important;
}

.destination {
	cursor: pointer;
}

.destination:hover {
	background-color: var(--md-sys-color-error-container);	
}

#main {
	height: var( --screen-height );
    width: var( --screen-width ); 
    display: inline-grid;
	grid-template-columns: 400px auto;
	gap: 4px;
	padding: 8px;
}

#main-sidebar {
	overflow-x: auto;
	padding-right: 4px;
}

#guidepost {
	height: 100%;
	background-image: url("/images/back-sign.png");
	background-position-y: top;
    background-position-x: center;    
}	

#information {
	margin-top: auto;
}


.circle {
	display: flex; 
	flex-direction: row;
	gap: 8px;
}

.circle > * {
	width: 30px;
    height: 30px;
    border-width: 3px;
    border-style: solid;
    border-radius: 99px;
}

.circle .circle-ok {
	border-color: orange	
}

.circle .circle-error {
	border-color: var(--error-color);	
    background: unset;
}

.circle .circle-fixme {
	border-color: var(--fixme-color-container);	
    background: var(--fixme-color-container);
}

.circle .circle-sign {
    background-color: var(--lame-directionnelle);
}

.circle .circle-network-guidepost {
	border-color: var(--net-color);	
}

.circle .circle-network {
	width: 12px;
    height: 12px;
	border-color: var(--net-color);	
    background-color: white;
}

.circle .line {
	width: 12px;
    height: 0px;
	margin-top: 5px;
    margin-bottom: 5px;
}

.circle .line.network {
	border-color: var(--net-color);	
}

.circle .line.hiking {
	border-color: var(--hiking-color);	
}

.clickable {
	background-image: url("/images/clickable.png");
	background-position: left;
	background-repeat: no-repeat;
	padding-left: 24px;	
}

.italic {
	font-style: italic;
}

.error, .warning, .note, fixme {
	font-style: italic;
	font-weight: bold;
}