/* CSS Document */
/* on fait un reset pour éliminer les espacements intrinseques produits par certaines balises */
@charset "UTF-8";

/* LOGIN */

html:has(.init) {
	overflow: hidden;
}

body.roxy:has(.init) .grid_temp_2 {
	grid-template-columns: 1fr 1fr;
}

body.roxy:has(.init) {
	/* Vos styles ou règles CSS pour le body avec la classe "init" dans une div */
	/* Par exemple, pour changer la couleur de fond du body : */
	/* animation: 10s infinite backgroundColor; */
	background-color: var(--color-background-opacity); /* transparent */
	height:100vh;
	overflow: hidden;
}

body.roxy .init{
	display:flex;
    justify-content:center;
	height:100vh;
	position: relative;
    z-index: 1;
	/* background-color: var(--color-background-opacity); */
}
body.roxy .init .center{
	display:block;
	width: 30vw;
	margin:auto;
	padding:15px;
	background-color:var(--color-background-opacity);
	border-radius: 10px;
}



 
@keyframes backgroundColor {
	0% { background-color: red; }
	16.666% { background-color: rgb(255, 255, 0); }
	33.333% { background-color: rgb(0, 255, 0); }
	49.999% { background-color: cyan; }
	66.666% { background-color: blue; }
	83.333% { background-color: rgb(255, 0, 255); }
	100% { background-color: red; }
}
  
.wave,
.wave::before,
.wave::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250vw;
	height: 250vw;
	margin-left: -125vw;
	transform-origin: 50% 50%;
	background-color: transparent;
	border-radius: 38% 42%;
	box-shadow: inset 0 0 10vw rgba(255,0,255,0.8);
	animation: spin 30s infinite linear;
	mix-blend-mode: multiply;
	will-change: transform; /* Indication au navigateur */
}

.wave::before {
	width: 105%;
	height: 95%;
	margin-top: -125vw;
	transform-origin: 49% 51%;
	border-radius: 40% 38%;
	box-shadow: inset 0 0 10vw rgba(255,255,0,0.8);
	animation: spin 27s infinite linear;
	will-change: transform;
}

.wave::after {
	width: 102%;
	height: 98%;
	margin-top: -125vw;
	transform-origin: 51% 49%;
	border-radius: 48% 42%;
	box-shadow: inset 0 0 10vw rgba(0,255,255,0.8);
	animation: spin 24s infinite linear;
	will-change: transform;
}

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

body.roxy:has(.init) .link{
	color:var(--color-text);
	font-size: .875rem;
}

body.roxy:has(.init) .link_reset_password{
	position: absolute;
    right: 0;
    padding-right: 10px;
}


/* LOGIN => reset_password */

body.roxy:has(.init) .block.infos p{
	padding: 10px 0 0;
	font-size: .875rem;
}

body.roxy:has(.init) .block .back{
	text-align:center;
	font-size: .875rem;
}

/* Header - Logo */

body.roxy header .content_logo {
	position: absolute
}
body.roxy header .content_logo .logo{
	width:100px;
}

/* Header - Menu */

body.roxy header .menu {
    display: flex;
    justify-content: end;
    align-items: center;
	height: 100px;
    margin: 0px;

	/* 🚧 TEST 🚧 */
	padding: 15px;
}

body.roxy header .menu ul {
	display: flex;
    justify-content: flex-end;
	align-items: center;
	/* 🚧 TEST 🚧 */
/* 
	align-items: center;
    border-radius: 0 0 20px 20px;
    background-color: var(--color-background-opacity);
    padding: 0 15px;
    height: 100%; 
*/
}

body.roxy header .menu ul li {
	list-style-type: none;
}

body.roxy header .menu ul li a {
    display: inline-flex;
	align-items: center;
    text-decoration: none;
    margin: 12px 0px 12px 0px;
    padding: 6px 18px;
    color: var(--color-text);
    transition: var(--transition);
    width: inherit;
}
body.roxy header .menu ul li a i {
	margin-left:10px;
}

body.roxy header .menu ul li a:not(.not_link):hover{
	color:var(--color-primary);
}

/* BTN DONATION */
body.roxy header .menu ul li.donate{
	position: relative;
	cursor: pointer;
	/* margin: 0 12px;
    padding: 8px 0; */
	transition: var(--transition);
}
#donate-button{
	display: flex; 
	align-items: center; 
	justify-content: center;
	padding: 5px;
}

/* 
body.roxy header .menu ul li.donate:hover{
	background-color: var(--color-background-opacity);
    border-radius: 8px;
    font-weight: bold;
} 
*/
body.roxy header .menu ul li.donate .hover:hover{
	background-color: var(--color-background-opacity);
    border-radius: 8px;
    font-weight: bold;
}
body.roxy header .menu ul li.donate > div:not(.dialog){
	display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 6px 18px; */
	margin: 0 18px 0 12px;
    padding: 8px 0;
    width: 50px;
    height: 100%;
}
body.roxy header .menu ul li.donate > div i.fas.fa-donate{
	margin-left: 0;
}
body.roxy header .menu ul li.donate .dialog{
	z-index: 10;
	position: absolute;
    /* right: 0; */
	right: 18px;
	min-width: 16rem;
    max-width: 90vw;
    width: 40rem;
	cursor: initial;
}
body.roxy header .menu ul li.donate .dialog:before{
	right: 0;
}


body.roxy main .container{
	padding-right: 10%;
    padding-left: 10%;
}



/*  PAGE HOME */

body.roxy main .container .home .container_wave{
	position: relative;
	overflow: hidden;
	height: 90vh;
	margin-left: -15%;
	margin-right: -12.5%;
}

body.roxy main .container .home .frame{
	position: relative;
}
body.roxy main .container .home .container_slider{
	display: flex;
	justify-content: center;
	width: 100%;
	position: absolute;
	z-index: 1;
}

body.roxy main .container .home .container_slider .slide{
	display: grid;
	grid-gap: 20px;
	justify-items: center;
}

body.roxy main .container .home .container_slider .slide .content_slide_img{
	width:250px;
}

body.roxy main .container .home .container_slider .slide .content_slide_img img{
	width: 100%;
	height: auto;
}

body.roxy main .container .home section{
	padding-top: 3%;
	padding-bottom: 3%;
}

body.roxy main .container .home section.cards{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	justify-items: center;
    align-items: center;
}

body.roxy main .container .home .cards .card{
	position: relative;
    display: grid;
	grid-gap: 20px;
    width: 20vw;
	height: 100%;
    background-color: var(--color-background);
    padding: 20px;
    border-radius: 20px;
	box-shadow: 0 0px 0 var(--color-secondary);
    border: 2px solid var(--color-tertiary);
	transition: var(--transition);
}
body.roxy main .container .home .cards .card:hover{
	transition: var(--transition);
	box-shadow: 0 0px 35px var(--color-secondary);
}
body.roxy main .container .home .cards .card:before{
	content: "";
    display: block;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--color-tertiary);
    z-index: -1;
    transform: rotate(4deg);
    border-radius: 20px;
	transition: var(--transition);
}
body.roxy main .container .home .cards .card:hover:before{
	transform: rotate(0deg);
}
body.roxy main .container .home .cards .card:after{
	content: "";
    display: block;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--color-secondary);
    z-index: -2;
    transform: rotate(9deg);
    border-radius: 20px;
	transition: var(--transition);
}
body.roxy main .container .home .cards .card:hover:after{
	transform: rotate(0deg);
}
body.roxy main .container .home .cards .card .card_header{
	display: grid;
	align-items: baseline;
	height: 100%;
}
body.roxy main .container .home .cards .card .card_header .main_title{
	text-align: center;
    font-size: 1.4em;
}
body.roxy main .container .home .cards .card .card_body{
	display: grid;
    grid-gap: 15px;
}
body.roxy main .container .home .cards .card .card_body .content_img{
	border-radius: 20px;
	/* border: 2px solid var(--color-tertiary); */
    border: 2px solid var(--color-background-opacity);
    /* padding: 2% 4%; */
    box-shadow: 0px 0px 20px var(--color-background-opacity);
}
body.roxy main .container .home .cards .card .card_body .content_img img{
	width: 100%;
    height: auto;
	border-radius: 20px;
}
body.roxy main .container .home .cards .card .card_body .content_text p{
	font-size:.875em;
	letter-spacing: 1px;
    line-height: 1.5;
}
body.roxy main .container .home .cards .card .card_footer{
	display: grid;
	align-items: end;
	height: 100%;
}
body.roxy main .container .home .cards .card .card_footer .content_btn a{
	text-decoration: none;
	color: inherit;
}



body.roxy main .container .home .presentation .inset_block{
	margin-left: -13%;
	margin-right: -12.5%;
	padding: 30px;
	text-align: center;
	line-height: 30px;
	background-color: var(--color-background-opacity);
	border-top: 1px solid var(--color-primary);
	border-bottom: 1px solid var(--color-primary);
}
body.roxy main .container .home .presentation .inset_block h3{
	display: flex;
	align-items: center;
	justify-content: center;
}
body.roxy main .container .home .presentation .inset_block h3 i{
	font-size: 2rem;
	margin: 0 15px;
}
body.roxy main .container .home .presentation .inset_block p{
	font-size: .875rem;
	padding-top: 30px;
}





body.roxy main .container .home .use .content_code_example{
	display: grid;
    grid-gap: 20px;
	width: 50vw;
}

body.roxy main .container .home .use .content_code_example .wrapper .example{
	position: relative;
}

body.roxy main .container .home .use .content_code_example .wrapper .blur{
	height: 68px;
    background-color: linear-gradient(180deg,hsl(0deg 0% 0% / 0%) 0,#000000 100%,#000000);
    position: relative;
    margin-top: -60px;
	border-radius: 20px
}

body.roxy main .container .home .use .content_code_example .wrapper .example .code_example{
	max-height:150px;
	overflow: hidden;
	transition: var(--transition);
}
body.roxy main .container .home .use .content_code_example .wrapper .example .code_example.open{
	max-height:100em;
}

body.roxy main .container .home .use .content_code_example .content_btn{
	display: flex;
	margin: auto;
	width: 20vw;
}




/* PAGE DOCUMENTATION */

body.roxy main .container .documentation > p{
	padding-top: 4px;
	font-size: .875rem;
}

body.roxy main .container .documentation .grid{
	margin-top: 15px;
	grid-template-columns: 250px 1fr;
	border-radius: 20px;
	background-color: var(--color-background-opacity);
	overflow: hidden;
}

body.roxy main .container .documentation .grid .side_menu{
	width: 250px;
	height: 600px;
	border-radius: 20px;
	background-color: var(--color-background-opacity);
}

body.roxy main .container .documentation .grid .side_menu nav ul.dropdown{
	/* width: 250px; */
}

body.roxy main .container .documentation .grid .side_menu nav ul.dropdown .item{
    display: grid;
	grid-template-columns: 1fr .1fr;
	padding: 5% 10px;
	cursor: pointer;
	transition: var(--transition);
}
body.roxy main .container .documentation .grid .side_menu nav ul.dropdown .item:hover{
	color: var(--color-primary);
}
body.roxy main .container .documentation .grid .side_menu nav ul.dropdown .item.active{
	color: var(--color-primary);
	font-weight: bold;
}

body.roxy main .container .documentation .grid .side_menu nav ul.dropdown .item i{
	padding: 10px;
}
body.roxy main .container .documentation .grid .side_menu nav ul.dropdown .item.active i.fas.fa-chevron-right{
	transition: var(--transition);
	transform: rotate(90deg);
}
body.roxy main .container .documentation .grid .side_menu nav ul.dropdown .dropdown-menu{
	height: 0px;
	overflow: hidden;
	transition: var(--transition);
}

body.roxy main .container .documentation .grid .side_menu nav ul.dropdown .dropdown-menu:has(.group.active){
	height: 90px;
}

body.roxy main .container .documentation .grid .side_menu nav ul.dropdown .dropdown-menu .group{
	cursor: pointer;
	padding: 5px 20px;
	border-top:1px solid var(--color-background);
	transition: var(--transition);
}
body.roxy main .container .documentation .grid .side_menu nav ul.dropdown .dropdown-menu .group:hover{
	color: var(--color-primary);
}
body.roxy main .container .documentation .grid .side_menu nav ul.dropdown .dropdown-menu .group.active{
	color: var(--color-primary);
	font-weight: bold;
}
body.roxy main .container .documentation .grid .content_zone{
	padding: 2% 4%;
	max-height: 600px;
    overflow: auto;
}

body.roxy main .container .documentation .grid .content_zone .content_title{
	display: flex;
	justify-content: space-between;
}
body.roxy main .container .documentation .grid .content_zone .content_title p{
	font-size: .875rem;
}
body.roxy main .container .documentation .grid .content_zone .content_documentation{

}
body.roxy main .container .documentation .grid .content_zone .content_documentation h4{
	padding: 10px 0;
}
body.roxy main .container .documentation .grid .content_zone .content_documentation p{
	padding: 0 10px;
	line-height: 1.5rem;
	font-size: .875rem;
}
body.roxy main .container .documentation .grid .content_zone .content_documentation p a{
	text-decoration: underline;
	font-size: .875rem;
	color:var(--color-quaternary);
	transition:var(--transition);
}
body.roxy main .container .documentation .grid .content_zone .content_documentation p a:hover{
	color:var(--color-primary);
}
body.roxy main .container .documentation .grid .content_zone .content_documentation p strong{
	font-size: .875rem;
}





body.roxy main .container .documentation .grid .content_zone .content_documentation .array{

}
body.roxy main .container .documentation .grid .content_zone .content_documentation .array .array_header{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;	
	align-items: center;
    justify-items: center;
	border-top: 3px solid var(--color-background-opacity);
	border-bottom: 3px solid var(--color-background-opacity);
}
body.roxy main .container .documentation .grid .content_zone .content_documentation .array .array_header div{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
	width: 100%;
	padding: 4px;
	font-size: .875rem;

	border-right: 3px solid var(--color-background-opacity);
}
body.roxy main .container .documentation .grid .content_zone .content_documentation .array .array_header div:nth-child(1){
	border-left: 3px solid var(--color-background-opacity);
}
body.roxy main .container .documentation .grid .content_zone .content_documentation .array .array_body{
	
}
body.roxy main .container .documentation .grid .content_zone .content_documentation .array .array_body .line{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
	align-items: center;
    justify-items: center;
	border-bottom: 3px solid var(--color-background-opacity);
	transition: var(--transition);
}
body.roxy main .container .documentation .grid .content_zone .content_documentation .array .array_body .line div{
	display: flex;
    justify-content: center;
    align-items: center;
	width: 100%;
	height: 100%;
	padding: 4px;
	font-size: .750rem;

	border-right: 3px solid var(--color-background-opacity);
}
body.roxy main .container .documentation .grid .content_zone .content_documentation .array .array_body .line div:nth-child(1){
	text-align: left;
	justify-content: left;

	border-left: 3px solid var(--color-background-opacity);
}

body.roxy main .container .documentation .grid .content_zone .content_documentation .array .array_body .line i.fas.fa-check{
	color: var(--color-success);
}
body.roxy main .container .documentation .grid .content_zone .content_documentation .array .array_body .line i.fas.fa-times{
	color: var(--color-error);
}

body.roxy main .container .documentation .grid .content_zone .zone .content_documentation .content_code{
	position: relative;
}
body.roxy main .container .documentation .grid .content_zone .zone .content_documentation .content_code > div.hover{
	cursor: pointer;
	position: absolute;
    top: 18px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 18px 0 12px;
    padding: 8px 0;
    width: 50px;
}
body.roxy main .container .documentation .grid .content_zone .zone .content_documentation .content_code > div.hover:hover{
	background-color: var(--color-background-opacity);
	border-radius: 8px;
	font-weight: bold;
}

body.roxy main .container .documentation .grid .content_zone .zone.zone_3 .content_documentation .array .array_header{
	grid-template-columns: repeat(6, 1fr);
}
body.roxy main .container .documentation .grid .content_zone .zone.zone_3 .content_documentation .array .array_body .line{
	grid-template-columns: repeat(6, 1fr);
}


body.roxy main .Ir.black{
	display:block;
	padding: .5em;
	color:rgb(248, 248, 248); 
	font-weight:400; 
	background-color: var(--color-background-opacity);
}
body.roxy main pre code .echo{
	color:rgb(150, 203, 254); 
	font-weight:400;
}
body.roxy main pre code .comm{
	color:rgb(124, 124, 124); 
	font-weight:400;
}
body.roxy main pre code .origin{
	color:rgb(218, 239, 163); 
	font-weight:400;
}
body.roxy main pre code .var{
	color:rgb(198, 197, 254); 
	font-weight:400;
}
body.roxy main pre code .value{
	color:rgb(168, 255, 96); 
	font-weight:400;
}
body.roxy main pre code .number{
	color:rgb(255, 115, 253); 
	font-weight:400;
}

/* PAGE STATUS */

body.roxy main .container .status .grid .content_zone .content_title {
    position: relative;
    padding-top: 5px;
}
/* 
body.roxy main .container .status .grid .content_zone i {
    padding: 10px;
}
body.roxy main .container .status .grid .content_zone .content_status .block{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:10px;
	grid-gap: 5px;
    height: 75px;
	border-top: 2px solid var(--color-background-opacity);
    border-bottom: 2px solid var(--color-background-opacity);
}
body.roxy main .container .status .grid .content_zone .content_status .temoin .grid{
	grid-template-columns: .1fr 1fr;
	grid-gap:10px;
} 
*/


body.roxy main .container .status .grid .content_zone .content_status .array .array_header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
	text-align: center;
	padding: 5px 0;
    border-top: 3px solid var(--color-background-opacity);
    border-bottom: 3px solid var(--color-background-opacity);
}
body.roxy main .container .status .grid .content_zone .content_status .array .array_header i{
	padding: 10px;
}
body.roxy main .container .status .grid .content_zone .content_status .array .array_body{
	
}
body.roxy main .container .status .grid .content_zone .content_status .array .array_body .line{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
	padding: 8px 0;
    border-bottom: 3px solid var(--color-background-opacity);
}
body.roxy main .container .status .grid .content_zone .content_status .array .array_body .line div.block{
	display: flex;
    justify-content: center;
    align-items: center;
	width: 100%;
	height: 100%;
	grid-gap: 8px;
	padding: 4px;
}











body.roxy main .container .utility {
	padding-top: 50px;
}
body.roxy main .container .utility .grid.div_alert{
	grid-template-columns: .5fr .5fr;
    align-items: center;
    height: 75px;
    /* text-align: center; */
}
body.roxy main .container .utility .grid.div_alert p{
	font-size: .875rem;
}
body.roxy main .container .utility .grid.div_alert .content_btn{
	display: flex;
	grid-gap: 10px;
	justify-content: end;
	align-items: center;
}
body.roxy main .container .utility .grid.div_alert .content_btn .btn{
	width: auto;
    padding: 5px 15px;
	margin:0;
	font-size: .875rem;
}
body.roxy main .container .utility .grid.div_alert .content_btn .btn{
	color: var(--infos-alert-color);
    background-color: var(--infos-alert-bg);
    border: 1px solid var(--infos-alert-border);
}
body.roxy main .container .utility .grid.div_alert .content_btn .btn.yes:hover,
body.roxy main .container .utility .grid.div_alert .content_btn .btn.yes.active{
	color:var(--success-alert-color) !important;
	background-color: var(--success-alert-bg) !important;
	border: 1px solid var(--success-alert-border) !important;
}
body.roxy main .container .utility .grid.div_alert .content_btn .btn.no:hover,
body.roxy main .container .utility .grid.div_alert .content_btn .btn.no.active{
	color:var(--error-alert-color) !important;
	background-color: var(--error-alert-bg) !important;
	border: 1px solid var(--error-alert-border) !important;
}







/* PAGE ACCOUNT */

body.roxy main .container .account .grid .side_menu nav ul{
    display: flex;
    border-top: 2px solid var(--color-background-opacity);
    border-bottom: 2px solid var(--color-background-opacity);
    padding: 10px 0;
    margin: 10px 0;
}

body.roxy main .container .account .grid .side_menu .item{
    cursor: pointer;
    padding: 3px 12px;
    margin-right: 20px;
    transition: var(--transition);
}
body.roxy main .container .account .grid .side_menu .item.active{
	cursor:initial !important;
	color: inherit !important;
	background-color: var(--color-primary) !important;
    border-radius: 35px !important;
    font-weight: bold !important;
}
body.roxy main .container .account .grid .side_menu .item:hover{
	background-color: var(--color-background-opacity);
    border-radius: 35px;
	font-weight: bold;
}

body.roxy main .container .account .grid .content_zone{
	border-radius: 30px;
    border: 2px solid var(--color-background-opacity);
    padding: 2% 4%;
    box-shadow: 0px 0px 20px var(--color-background-opacity);
}

body.roxy main .container .account .grid .content_zone .content_title{
	position: relative;
	padding-top:5px;
}
body.roxy main .container .account .grid .content_zone .content_title .zone_add{
	position: absolute;
	top: 0;
	right: 0;
	width: 25%;
}
body.roxy main .container .account .grid .content_zone .content_title .zone_add .btn.add{
	margin-right:0;
}
body.roxy main .container .account .grid .content_zone .content_title .zone_add i{
	padding:0;
}

body.roxy main .container .account .grid .content_zone i{
	padding:10px;
}

body.roxy main .container .account .grid .content_zone .content_account{
	display: grid;
}

body.roxy main .container .account .grid .content_zone .content_account .grid_temp_2{
	grid-template-columns: 1fr 1fr;
}
body.roxy main .container .account .grid .content_zone .content_account .grid_temp_3{
	grid-template-columns: 1fr 1fr 1fr;
}

body.roxy main .container .account .grid .content_zone .content_account .zone_save{
	width: 25%;
	margin: auto;
}



body.roxy main .container .account .grid .content_zone .content_search_bar .block {
	padding: 15px 0;
}
/* Recherche effet d'elargissement */
body.roxy main .container .account .grid .content_zone .content_search_bar .block input.search_bar {
	width: 250px;
}
body.roxy main .container .account .grid .content_zone .content_search_bar .block input.search_bar:focus {
	width: 100%;
}

body.roxy main .container .account .grid .content_zone .content_empty_result {
    text-align: center;
    color: var(--color-error);
    font-weight: bold;
    padding: 15px 0;	
}

body.roxy main .container .account .grid .content_zone .content_access .accordion{
	/* padding-bottom: 20px; */
	margin-bottom: 20px;
}

body.roxy main .container .account .grid .content_zone .content_access .accordion.dragging {
	opacity: 0.6;
	border-radius: 30px;
	border:1px dashed var(--color-save);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion.dragging :where(.accordion-header, .accordion-body) {
	opacity: 0;
}



body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header {
	display: grid;
    grid-template-columns: .01fr .3fr 1fr .1fr;
    align-items: center;

    border-radius: 30px;
    background-color: var(--color-background-opacity);
	color: var(--color-text);
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	transition: var(--transition);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header.active {
	border-radius: 30px 30px 0 0;
	background-color: var(--color-background-opacity);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header.active:hover {
	background-color: var(--color-background-opacity);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header:hover {
	background-color: var(--color-primary);
}

body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header span.research{
	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge{
	display: flex;
	align-items: center;
	position: relative;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .badge{
	display: flex;
	align-items: center;
	margin-right: 5px;
    font-size: .750rem;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .badge i.fas.fa-times-circle{
	padding: 2px;
	margin-left: 4px;
	cursor: pointer;
	transition: var(--transition);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .badge i.fas.fa-times-circle:hover{
	color: var(--color-hover);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .badge.btn.add{
	cursor: pointer !important;
	background-color: inherit;
    font-weight: inherit !important;
    text-align: inherit;
    margin: inherit;
	border: 1px dashed var(--color-background);
    color: var(--color-background) !important;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .badge.btn.add:hover{
	background-color: inherit !important;
	border: 1px dashed var(--color-quaternary) !important;
    color: var(--color-quaternary) !important;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .badge.btn.add i{
	padding: 2px;
    margin-left: 4px;
	font-size: .875rem;
}



























body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge{
    z-index: 10;
    position: absolute;
    top: 20px;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge:before{
	border-color:transparent transparent var(--color-background) transparent;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .header {
	padding:2px;
	color:var(--color-quaternary);
	background-color: var(--color-background);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .header .zone_i_close{
	padding:5px;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .header .zone_i_close .fas.fa-times{
	padding: 5px 10px;
    margin: 0;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body {
	padding: 0;
	background-color: var(--color-background);
	border-radius:0;
} 


body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .dropdown {

}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .dropdown .item{
    padding: 10px;
	font-size: .875rem;
	color: var(--color-quaternary);
	transition: var(--transition);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .dropdown .item:hover{
	background-color: var(--color-background-opacity);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .dropdown .item.active{
	background-color: var(--color-background-opacity);
	border-bottom: 1px solid var(--color-background);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .dropdown .dropdown-menu{
    background: var(--color-background-opacity);
    padding: 0 10px;
    height: 0px;
    overflow: hidden;
    transition: var(--transition);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .dropdown .dropdown-menu.active{
	height:230px;
	/* overflow-y: auto; */
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .dropdown.add_badge .dropdown-menu.active{
	overflow-y: auto;	
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .dropdown.insert_badge.overflow_visible .dropdown-menu.active{
	overflow: visible;	
}

body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .dropdown .dropdown-menu .badge{
	display: grid;
    grid-template-columns: .2fr .2fr 1fr;
	width: auto;
	height: 35px;
	margin-right: 0 !important;
	cursor: pointer !important;
	color: var(--color-quaternary) !important;
	border-radius: 0px !important;
	transition: var(--transition);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .dropdown .dropdown-menu .badge:hover{
	margin-right: -10px !important;
    margin-left: -10px !important;
	background-color: var(--color-background);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .dropdown .dropdown-menu .badge .name{
	padding:5px;
	font-size: .875rem;
}

body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .block {
	padding: 5px;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .block.pallet {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	width: 100%;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .block .box_color {
    width: 100%;
    height: 40px;
	border: 2px solid var(--color-background);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .block .box_color_1 {
	background-color: var(--pallet-1); /* Rouge Volcanique */
	border-top-left-radius: 0.25rem;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .block .box_color_2 {
	background-color: var(--pallet-2); /* Vert Émeraude */
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .block .box_color_3 {
	background-color: var(--pallet-3); /* Or Solaire */
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .block .box_color_4 {
	background-color: var(--pallet-4); /* Fuchsia Flash */
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .block .box_color_5 {
	background-color: var(--pallet-5); /* Bleu Électrique */
	border-top-right-radius: 0.25rem;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .block .box_color_6 {
	background-color: var(--pallet-6); /* Aqua Éthéré */
	border-bottom-left-radius: 0.25rem;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .block .box_color_7 {
	background-color: var(--pallet-7); /* Flamme Orange */
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .block .box_color_8 {
	background-color: var(--pallet-8); /* Mystère Abyssal */
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .block .box_color_9 {
	background-color: var(--pallet-9); /* Prune Profonde */
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .block .box_color_10 {
	background-color: var(--pallet-10); /* Gris Fantôme */
	border-bottom-right-radius: 0.25rem;
}

body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .block .block_in.background_color{
	display: flex;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body input[type="color"].background_color{
	height: inherit !important;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body input[type="color"].background_color::-webkit-color-swatch-wrapper {
	border: none;
	border-radius: 20px 0 0 20px;
	padding: 0;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body input[type="color"].background_color::-webkit-color-swatch {
	border: none;
	border-radius: 20px 0 0 20px;
	padding: 0;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .body .background_color_text {
	border-radius:0 20px 20px 0;
}

body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .footer {
    display: grid;
    grid-gap: 5px;
    padding: 5px;
    border-radius: 0 0 10px 10px;
    color: var(--infos-alert-color);
    border-top: 2px solid var(--color-background-opacity);
    background-color: var(--color-background);
} 
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .footer .content_btn{
	display: flex;
	justify-content: right;
	grid-gap: 5px;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header .content_badge .dialog.dialog_badge .footer .content_btn .btn{
	width: fit-content;
	padding: 3px 5px;
	margin: inherit;
	font-size: .750rem;
}


























body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header.active i.fa.fa-angle-right{
	transform: rotate(90deg);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header i.fa.fa-angle-right{
	margin-right: 10px;
	transition: var(--transition);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-header i.fas.fa-grip-vertical {
	transform: inherit;
    cursor: move;
    margin-right: 0;
    padding: 0;
    text-align: center;
}



body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content {
	border-radius: 0 0 30px 30px;
	background-color: var(--color-background-opacity);
	max-height: 0;
	overflow: hidden;
	transition: max-height .5s ease;
}

body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .content_block{
	padding: 0 18px;
}

body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .side_menu nav ul {
    margin: 0;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .side_menu nav ul li:first-child{
	margin-left: 30px;
} 

body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .content_btn .btn.reset{
	position: absolute;
	top: 0;
	right: 0;
	width: 25%;
	height: 100%;
	border-radius: 0 20px 20px 0 !important;

	display: flex;
	align-items: center;
	justify-content: center;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .content_btn .btn.copied{
	position: absolute;
	top: 0;
	right: 25%;
	height: 100%;
	border-radius: 20px 0 0 20px !important;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .content_btn .btn.copied i.fas.fa-share-square{
	padding:0;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone_save .content_btn .btn.save{
	margin: 10px 0px 0;
    width: 100%;
	height: 100%;
	border-radius: 0 0 30px 30px !important;
}

body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .grid_temp_2{
	grid-template-columns: 1fr 1fr;
	font-size: .875rem;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .grid_temp_2 > span{
	font-size: .875rem;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_2 .content_block.content_search_bar .block{
	padding: 10px;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_2 .content_block.content_search_bar .block .block_in{
	width: 75%;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_2 .content_block .zone_add{
	position: absolute;
    right: 10px;
    width: 20%;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_2 .content_block .zone_add .btn.add{
	margin: 0;
	width: 100%;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_2 .content_block .zone_add .btn.add i{
	color:inherit;
	padding:0;
}

body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_2 > .content_block > .block{
	display: flex;
	align-items: center;
	grid-gap: 20px;
	flex-wrap: wrap;
}

body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_2 .content_cards{
	display: flex;
	justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
	grid-gap: 50px;
	padding: 10px 10px 20px;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_2 .content_cards .card{
    position: relative;
    display: grid;
	width: 25%;
    grid-gap: 20px;
    padding: 20px;
    border-radius: 20px;
	background-color: var(--color-background-opacity);
    /* border: 2px solid var(--color-tertiary); */
    transition: var(--transition);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_2 .content_cards .card .btn.copied{
	right: inherit;
	width: 100%;
	border-radius: 20px !important;
}

body.roxy main .container .account .grid .content_zone .zone.zone_2 .content_access .accordion .accordion-content .content_cards .card .content_icon{
	position: absolute;
	right: 0;
	top: 0;
	background-color: var(--color-background-opacity); 
	border-radius: 0 20px 0 0;
	cursor: pointer;
	transition: var(--transition);
}
body.roxy main .container .account .grid .content_zone .zone.zone_2 .content_access .accordion .accordion-content .content_cards .card .content_icon.trash{
	right: 36px;
	border-radius: 0;
}
body.roxy main .container .account .grid .content_zone .zone.zone_2 .content_access .accordion .accordion-content .content_cards .card .content_icon.chart{
	right: 70px;
	border-radius: 0;
}
body.roxy main .container .account .grid .content_zone .zone.zone_2 .content_access .accordion .accordion-content .content_cards .card .content_icon i.fas.fa-cog{
	transition: var(--transition);
}
body.roxy main .container .account .grid .content_zone .zone.zone_2 .content_access .accordion .accordion-content .content_cards .card .content_icon:hover{
	background-color: var(--color-save);
}
body.roxy main .container .account .grid .content_zone .zone.zone_2 .content_access .accordion .accordion-content .content_cards .card .content_icon.trash:hover{
	background-color: var(--color-error);
}
body.roxy main .container .account .grid .content_zone .zone.zone_2 .content_access .accordion .accordion-content .content_cards .card .content_icon:hover i.fas.fa-cog{
	transform: rotate(360deg);
}
body.roxy main .container .account .grid .content_zone .zone.zone_2 .content_access .accordion .accordion-content .content_cards .card .content_icon:hover i.fas.fa-cog.tooltips .tooltips_text{
	transform: rotate(-360deg) !important;
}

body.roxy main .popup.qr_code .grid_temp_2{
	grid-template-columns: 1fr 1fr;
}
body.roxy main .popup.qr_code .block.grid.grid_temp_2{
	grid-template-columns: 1fr .1fr;
	justify-content: center;
	align-items: center;
	grid-gap: 10px;
}
body.roxy main .popup.qr_code .container_progress{
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
body.roxy main .popup.qr_code .container_progress .progress{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	transition: var(--transition);
	background-color: var(--color-background-opacity); 
}
body.roxy main .popup.qr_code .container_progress .progress.progress_width_0{
	width: 0%;
}
body.roxy main .popup.qr_code .container_progress .progress.progress_width_100{
	width: 100%;
}


/* ZONE STATS */

body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_3{

}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_3 .content_block .block .grid .block .stat{
	display: grid;
	grid-template-columns: 1fr .2fr 1fr;
	font-size: .875rem;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_3 .content_block .block .grid .block .stat > span{
	font-size: .875rem;	
}


/* ZONE LOGS */

body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_4 .menu{
	grid-gap:10px;
	grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_4 .menu .big_btn{
	justify-content: left;
    padding-left: 20px;
	width: 100%;
	height: 50px;
	color: inherit;
	background-color: var(--color-background-opacity);
	border:1px solid transparent;
	font-size: .875rem;
	transition: var(--transition);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_4 .menu .big_btn.active{
	font-weight: bold;
	border:1px solid var(--color-primary);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_4 .menu .big_btn:hover{
	font-weight: bold;
	border:1px solid var(--color-primary);
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_4 .container_days .content_days{
	display: grid;
	align-items: center;
	height: 50px;
	background-color: var(--color-background-opacity);
	margin-right: -28px;
    margin-left: -28px;
    padding-left: 28px;
	font-size: .875rem;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion-content .zone.zone_4 .content_logs > div:nth-child(1) > .content_days{
	margin-top: 10px;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_4 .container_days .content_line_logs .line{
    grid-template-columns: .3fr .3fr 2fr .5fr;
    align-items: center;
    grid-gap: 5px;
    height: 75px;
	margin-right: -28px;
    margin-left: -28px;
    padding-left: 28px;
	padding-right: 28px;
    border-bottom: 2px solid var(--color-background-opacity);
	transition: var(--transition);
	cursor: pointer;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_4 .container_days .content_line_logs .line:hover{
	background-color: var(--color-background-opacity);
	font-weight: bold;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_4 .container_days .content_line_logs .line .hours{
	text-align: end;
}
body.roxy main .container .account .grid .content_zone .content_access .accordion .accordion-content .zone.zone_4 .container_days .content_line_logs .line > div{
	font-size: .875rem;
}




/* ✨🚀 CONFIGURATION 🚀✨ */

body.roxy main .container .account .grid .content_zone .zone.zone_3 .content{
	border-bottom:1px solid var(--color-background-opacity);
}

body.roxy main .container .account .grid .content_zone .content_api_auth_key .block{

}

body.roxy main .container .account .grid .content_zone .content_api_auth_key .btn.copied{
	position: absolute;
    top: 0;
    right: 25%;
    height: 100%;
    border-radius: 20px 0 0 20px !important;
}
body.roxy main .container .account .grid .content_zone .content_api_auth_key .btn.reset{
    position: absolute;
    top: 0;
    right: 0;
    width: 25%;
    height: 100%;
    border-radius: 0 20px 20px 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.roxy main .container .account .grid .content_zone .content_version_api .block,
body.roxy main .container .account .grid .content_zone .content_alerte .block,
body.roxy main .container .account .grid .content_zone .content_emailing .block{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0px 10px 10px;
}
body.roxy main .container .account .grid .content_zone .title{
	font-size: .875rem;
}
body.roxy main .container .account .grid .content_zone .sub_title{
	display: block;
	padding: 0;
	font-size: .750rem;
	padding-top: 5px;
}





.popup.change_version_api .window .content_alert{
    display: flex;
    justify-content: center;
    align-items: center;
}
.popup.change_version_api .window .content_alert .div_alert{
    display: grid;
    grid-template-columns: .1fr .8fr .1fr;
    align-items: center;
    width: 100%;
	margin: 10px auto 5px;
    text-align: center;
    font-size: .875rem;
}
.popup.change_version_api .window .content_alert .div_alert > div{
	font-size: .875rem;
}
.popup.change_version_api .window .content_alert .div_alert .temoin_change_version{
    margin: 10px auto 0;
	text-align: center;
	font-size: .875rem;
	font-weight: bold;
}
.popup.change_version_api .window .content_alert .div_alert .temoin_change_version i{
	margin-left: 10px;
}
.popup.change_version_api .window .contains_pop .content_btn{
	position: absolute;
    top: 0;
    right: 0;
    width: 200px;
	height: 100%;
}
.popup.change_version_api .window .contains_pop .content_btn .btn.change_version_api{
	display: flex;
	justify-content: center;
	align-items: center;
    margin: 0;
    width: 100%;
    border-radius: 0 20px 20px 0 !important;
}
.popup.change_version_api .window .contains_pop .content_btn .btn.change_version_api.height_calc{
	height: calc(100% - 16.8px);
}
.popup.change_version_api .window .contains_pop .content_btn .btn.change_version_api.validate{
	cursor: initial;
}
.popup.change_version_api .window .contains_pop .div_alert.alert_infos{
	margin:0 auto 10px;
}





/* MENTION LEGAL */

body.roxy main .mention_legal .block h3{
	padding-bottom: 10px;
}
body.roxy main .mention_legal .block p{
	padding-left: 20px;
	line-height: 1.5rem;
	text-align: justify;
	font-size: .875rem;
}
body.roxy main .mention_legal .block a{
	text-decoration: underline;
	color: var(--color-quaternary);
	font-size: .875rem;
}




/* ✨🚀 CONFIDENTIAL AND CONDITION 🚀✨ */

body.roxy main .confiential_and_condition .block h3{
	padding-bottom: 10px;
}
body.roxy main .confiential_and_condition .block p{
	padding-left: 20px;
	line-height: 1.5rem;
	text-align: justify;
	font-size: .875rem;
}
body.roxy main .confiential_and_condition .block p span.bold{
	font-weight: bold;
	font-size: .875rem;
}
body.roxy main .confiential_and_condition .block a{
	text-decoration: underline;
	color: var(--color-quaternary);
	font-size: .875rem;
}




/* ✨🚀 COOKIE SETTINGS 🚀✨ */

body.roxy main .cookie_settings .block h3{
	padding-bottom: 10px;
}
body.roxy main .cookie_settings .block h4{
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 5px;
}
body.roxy main .cookie_settings .block p{
	padding-left: 20px;
	line-height: 1.5rem;
	text-align: justify;
	font-size: .875rem;
}
body.roxy main .cookie_settings .block p span.bold{
	font-weight: bold;
	font-size: .875rem;
}
body.roxy main .cookie_settings .block a{
	text-decoration: underline;
	color: var(--color-quaternary);
	font-size: .875rem;
}





/* COMPONENT POPUP */

.popup {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 10000;
}
.popup .background {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: var(--color-background-opacity-dark);
}
.popup .window {
	position: fixed;
    left: calc(50% - 300px);
    top: calc(50% - 300px);
    width: 600px;
    padding: 15px;
    background-color: var(--color-background);
    border-radius: 30px;
    overflow-x: hidden;
}
.popup .window .title {
	position: sticky;
	top: 0;
	padding: 10px 0px;
	color: var(--color-quaternary);
	text-align: center;
	z-index: 10000;
}
.popup .window .title h3 {
	margin: 0px;
	font-size: 1.250rem;
}
.popup .window .zone_i_close {
	position: absolute;
	right: 30px;
	top: 15px;
	cursor: pointer;
	z-index: 100000;
}
.popup .window .zone_i_close i {
	transition: var(--transition);
	font-size: 1.250rem;
	color: var(--color-quaternary);
}
.popup .window .zone_i_close i:hover {
	transform: rotate(90deg);
}

.popup .window .content_btn {
	display: flex;
	justify-content: end;
    grid-gap: 10px;
}
.popup .window .content_btn .btn{
	margin: inherit;
	width: 25%;
}



/* REINITIALISATION CLE PRIVEE */

.popup.reset_key_private .window .contains_pop .content_btn{
	position: absolute;
    top: 0;
    right: 0;
    width: 150px;
	height: 100%;
}
.popup.reset_key_private .window .contains_pop .content_btn .btn.reset_key_private{
	display: flex;
	justify-content: center;
	align-items: center;
    margin: 0;
    width: 100%;
    border-radius: 0 20px 20px 0 !important;
}
.popup.reset_key_private .window .contains_pop .content_btn .btn.reset_key_private.height_calc{
	height: calc(100% - 16.8px);
}
.popup.reset_key_private .window .contains_pop .content_btn .btn.reset_key_private.validate{
	cursor: initial;
}
.popup.reset_key_private .window .contains_pop .div_alert.alert_infos{
	margin:0 auto 10px;
}


/* SUPPRESSION DUN ITEM */

.popup.delete_item .window .contains_pop .content_btn{
	position: absolute;
    top: 0;
    right: 0;
    width: 150px;
	height: 100%;
}
.popup.delete_item .window .contains_pop .content_btn .btn.delete_item{
	display: flex;
	justify-content: center;
	align-items: center;
    margin: 0;
    width: 100%;
    border-radius: 0 20px 20px 0 !important;
}
.popup.delete_item .window .contains_pop .content_btn .btn.delete_item.height_calc{
	height: calc(100% - 16.8px);
}
.popup.delete_item .window .contains_pop .content_btn .btn.delete_item.validate{
	cursor: initial;
}
.popup.delete_item .window .contains_pop .div_alert.alert_infos{
	margin:0 auto 10px;
}


/* COMPONENT SHEET */

.sheet{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 10000;
}
.sheet .background{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: var(--color-background-opacity);
}
.sheet .window{
	position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
	background-color: var(--color-background);
	animation: openSheet .5s;
}
@keyframes openSheet {
	0% { width: 0%; }
	100% { width: 50%; }
}
  
.sheet .window .title {
	position: sticky;
	top: 0;
	padding: 10px 0px;
	color: var(--color-quaternary);
	text-align: center;
	z-index: 10000;
}
.sheet .window .title h3 {
	margin: 0px;
	font-size: 1.250rem;
}
.sheet .window .zone_i_close {
	position: absolute;
	left: -30px;
	top: 15px;
	cursor: pointer;
	z-index: 100000;
}
.sheet .window .zone_i_close i {
	transition: var(--transition);
	font-size: 1.250rem;
	color: var(--color-quaternary);
}
.sheet .window .zone_i_close i:hover {
	transform: rotate(90deg);
}

.sheet .window .div_content .content_block{
	height: 80vh;
	max-height: 100%;
	overflow: auto;
}
.sheet .window .div_content .content_block .grid.grid_temp_2{
	grid-template-columns:.5fr 1fr;
	border-bottom: 1px solid var(--color-background-opacity);
}
.sheet .window .div_content .content_block div:last-child{
	border-bottom: none !important;
}
.sheet .window .div_content .content_block .grid.grid_temp_2 div{
	font-size: .875rem;
}

.sheet .window .content_btn {
	display: flex;
	justify-content: end;
    grid-gap: 10px;
	position: absolute;
    bottom: 30px;
    right: 15px;
    width: 100%;
}
.sheet .window .content_btn .btn{
	margin: inherit;
	width: 25%;
}




/* FOOTER */

body.roxy main footer{
    display: grid;
    background-color: var(--color-background-opacity);
    grid-template-columns: .5fr 1fr;
	padding: 50px 25px;
    margin: 50px -12.5% 0;
}
body.roxy main footer nav > ul{
	display: grid;
    grid-template-columns: 1fr 1fr;
}
body.roxy main footer nav ul .group {
	padding-bottom:10px;
}
body.roxy main footer nav > ul li:not(.group) {
	padding-bottom:5px;
}
body.roxy main footer nav ul a{
	font-size: .875rem;
	color:var(--color-quaternary);
	transition: var(--transition);
}
body.roxy main footer nav ul a.link:hover{
	color:var(--color-primary);
}






/* COOKIE BANNER CONSENT */

body.roxy main .cookie_banner{
	z-index: 1000;
	position: fixed;
    bottom: 0;
	height: 18vh;
    width: 100vw;
    padding: 50px;
	background-color: #000;
	background-image: linear-gradient(140deg, var(--color-secondary) 0%, #BC70A4 55%, var(--color-primary) 100%);
	transition: height 0.5s ease;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
body.roxy main .cookie_banner.height_100{
	height: 100vh;
}
body.roxy main .cookie_banner .content{
    display: grid;
    grid-template-columns: 1fr .6fr;
	align-items: center;
	height: 100%;
}
body.roxy main .cookie_banner .content .content_btn{
	display: flex;
	grid-gap: 25px;
}

body.roxy main .cookie_banner .cookie_manage{
	grid-area: 2 / 3 / 2 / 1;
}

body.roxy main .cookie_banner .cookie_manage .accordion{
	padding-top: 20px;
}
body.roxy main .cookie_banner .cookie_manage .accordion .accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
    /* border-radius: 30px; */
    border: var(--border);
    background-color: var(--color-secondary);
	color: var(--color-text);
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	transition: var(--transition);
}
body.roxy main .cookie_banner .cookie_manage .accordion .accordion-header.active {
	/* border-radius: 30px 30px 0 0; */
	background-color: var(--color-background-opacity);
}
body.roxy main .cookie_banner .cookie_manage .accordion .accordion-header:hover {
	background-color: var(--color-hover);
}
body.roxy main .cookie_banner .cookie_manage .accordion .accordion-header.active i{
	transform: rotate(90deg);
}
body.roxy main .cookie_banner .accordion .accordion-header i {
	transition: var(--transition);
	margin-right: 10px;
}
body.roxy main .cookie_banner .cookie_manage .accordion .accordion-content {
	/* border-radius: 0 0 30px 30px; */
	background-color: var(--color-background-opacity);
	max-height: 0;
	overflow: hidden;
	transition: max-height .5s ease;
}
body.roxy main .cookie_banner .cookie_manage .accordion .accordion-content .content_block{
	padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
	line-height: 1.25rem;
	font-size: .875rem;
}
body.roxy main .cookie_banner .cookie_manage .content_btn{
	justify-content: end;
}
body.roxy main .cookie_banner .cookie_manage .content_btn .btn{
	width: 20%;
    margin: inherit;
    margin-top: 10px;
}