@charset "UTF-8";

:root {
	
	--LEFT_LIST_HEIGHT: 	1.4rem;
	--LEFT_LIST_FONT-SIZE: 	0.75rem;
	--LEFT_LIST_GAP: 		0.25rem;

	--MINI_LIST_HEIGHT: 	1.2rem;
	--MINI_LIST_FONT-SIZE: 	0.7rem;
	--MINI_LIST_GAP: 		0.2rem;

}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
		box-sizing: border-box;
	
	-webkit-opacity:1;
	
	scrollbar-width: none; /* Also needed to disable scrollbar Firefox */
		-ms-overflow-style: none;  /* Disable scrollbar IE 10+ */

}

::-webkit-scrollbar {
    width: none;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

 @-moz-document url-prefix() { /* Disable scrollbar Firefox */
	html{
	  scrollbar-width: none;
	}
  }

@media print {
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    div, img {
        margin: 0;
        padding: 0;
        border: none;
    }
}

@font-face {
	font-family: 'Apercu';
	src:
		url('../fonts/Apercu-Medium.woff') format('woff'),
		url('../fonts/Apercu-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Apercu Mono';
	src:
		url('../fonts/Apercu-Mono.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}



/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}


html {
    font-size: var(--PIXEL);
}


body {
	background-color: var(--COL_FOND_GENERAL);
	color: var(--COL_TEXT);
    font-size: 1rem;
	font-family: 'Avenir', 'Avenir Next', Helvetica, Arial, sans-serif;
}

.font_courier {
	font-family: "Overpass Mono", monospace;
	font-family: 'Chivo Mono', monospace;
	font-weight: 400;
	font-size: 0.7rem;
	line-height: 1;
}


button,
input,
select,
textarea {
	font: inherit;
	font-family: inherit;
}

a:link {
	color: var(--COL_TEXT);
	text-decoration: none;

}
a:visited {
	color: var(--COL_TEXT);
	text-decoration: none;
}
a:hover {
	color: var(--COL_TEXT);
	text-decoration: none;

}
a:active {
	color: var(--COL_TEXT);
	text-decoration: none;

}

.hidden {
	display: none;
}
	
.show {
	display: block;
}

.show_inline {
	display: inline-block;
}

.dragMode {
	cursor: grab;
}

.noHover {
	pointer-events: none;
}

.flexRowFix {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex: 0 0 auto;
	overflow: hidden;
	font-size: var(--LEFT_LIST_FONT-SIZE);
}

.ellipsis {
	min-width:0;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}

.flexRow {
	display: flex;
	flex-direction: row;
	align-items: center;
	overflow: hidden;
	font-size: var(--LEFT_LIST_FONT-SIZE);
}

.shotvalueListDiv {
	height: calc(var(--LEFT_LIST_HEIGHT) / 1.5);
	width: 2.5rem;
	border-radius: 0.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	background: var(--col-value);
}

.shotvalueListDiv:hover {
	background: var(--col-value-hover);
}


/* rectangle */
.btn-a {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.corner-button {
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px,
                       100% calc(100% - 10px), calc(100% - 10px) 100%,
                       10px 100%, 0 calc(100% - 10px), 0 10px);
}

.bouton_hexagone {
	border-radius: 0 !important;
    clip-path: polygon(
		var(--d) var(--b), 
		calc(100% - var(--d)) var(--b), 
		100% 50%, 
		calc(100% - var(--d)) calc(100% - var(--b)),
		var(--d) calc(100% - var(--b)),
		0 50%
	);
}

.bouton_cadrage {
	border-radius: 0 !important;
	mask-image: url('/app/layout/svg/cadrage.svg');
	mask-position: center;
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	mask-mode: alpha;
}

/* NON UTILISES

.bouton_biseaux {
	border-radius: 0 !important;
    clip-path: polygon(
		0.2rem 0, 
		calc(100% - 0.2rem) 0, 
		100% 0.2rem, 
		100% calc(100% - 0.2rem),
		calc(100% - 0.2rem) 100%,
		0.2rem 100%, 
		0 calc(100% - 0.2rem),
		0 0.2rem
	);
}

.bouton_tableau {
	border-radius: 0 !important;
    clip-path: polygon(
		var(--d) 0, 
		calc(100% - var(--d)) 0, 
		calc(100% - var(--d)) var(--d),
		100% var(--d), 
		100% calc(100% - var(--d)),
		calc(100% - var(--d)) calc(100% - var(--d)),
		calc(100% - var(--d)) 100%,
		var(--d) 100%, 
		var(--d) calc(100% - var(--d)),
		0 calc(100% - var(--d)),
		0 var(--d),
		var(--d) var(--d)
	);
}

.bouton_tintin {
	border-radius: 0 !important;
	clip-path: polygon(
		var(--d) 0,
		calc(var(--d) * .924) calc(var(--d) * .383),
		calc(var(--d) * .707) calc(var(--d) * .707),
		calc(var(--d) * .383) calc(var(--d) * .924),
		0 var(--d),

		0 calc(100% - var(--d)),

		calc(var(--d) * .383) calc(100% - var(--d) * .924),
		calc(var(--d) * .707) calc(100% - var(--d) * .707),
		calc(var(--d) * .924) calc(100% - var(--d) * .383),
		var(--d) 100%,

		calc(100% - var(--d)) 100%,

		calc(100% - var(--d) * .924) calc(100% - var(--d) * .383),
		calc(100% - var(--d) * .707) calc(100% - var(--d) * .707),
		calc(100% - var(--d) * .383) calc(100% - var(--d) * .924),
		100% calc(100% - var(--d)),

		100% var(--d),

		calc(100% - var(--d) * .383) calc(var(--d) * .924),
		calc(100% - var(--d) * .707) calc(var(--d) * .707),
		calc(100% - var(--d) * .924) calc(var(--d) * .383),
		calc(100% - var(--d)) 0
	);
}
	
.losange-button {
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}

*/