@font-face {
    font-family: "commercialscript";
    src: url(commercialscript.ttf),format("truetype");
}
@font-face {
    font-family: "brush455";
    src: url(brush455.ttf),format("truetype");
}


@font-face{
    font-family: "Belwe";
    src: url(belwe.ttf),format("truetype");
    font-weight: normal;
    font-style: normal; 

}
@font-face{
    font-family: "Arial";
    src: url(arialbd.ttf),format("truetype");
    font-weight: normal;
    font-style: normal; 

}   
@font-face {
    font-family: "Chalk";
    src: url(chalk.ttf),format("truetype"),
    url(chalk.woff),format("woff");
    font-weight: normal;
}
@font-face {
    font-family: "Katana";
    src: url(katana.ttf),format("truetype");
    font-weight: normal;
}

@font-face {
    font-family: "Brush455";
    src: url(brush455.ttf),format("truetype");
}

@font-face {
    font-family: "CommercialScript";
    src: url(commercialscript.ttf),format("truetype");
}
/*
@font-face {
    font-family: "Japonais";
    src: url(epgyobld.woff2),format("woff2");
}
*/

@font-face {
    font-family: "Japonais";
    src: url(ShipporiAntiqueB1-Regular.ttf),format("truetype");/* url(epgyobld_5.ttf), format("truetype");*/ /**/
}

.show{
    display:block;
}   
.hide{
    display:none;
}
    
.palette {
position:relative;
/*
height:368px;
width:25%;
*/
}

.palette div {
position:absolute;
border-radius: 50%;
cursor:pointer;
}

.selected {
    border: 2px solid black;
}

/* 

.draw_div {position:relative;}
#c_label{
    position:absolute;
    top:0;
    left:2em;
}
#c_nolabel{
    position: absolute;
    top:0;
    right:2em;
    
}

.mini{
    font-size: xx-small;
}
*/

/* dark theme */    
body[data-bs-theme="dark"] {
    background-color: #121212;
    color: #ffffff;

}
	
	#belt_a{
		position:relative;
	}
	.rel{
    position:relative;height:320px;width:266px;margin: 0 auto;

	}
	#toolb {
	position:absolute;
	left:0;
	top:0;
	}
	#toolbr {
	position:absolute;
	left:202px;
	top:0;
	}
	
	/*#c_belt*/
    
    #c_label{
		position:absolute;
		left :76px;
		top:10px;
		height:300px;
		width:54px;
        cursor: pointer;
	}
	/*#c_no_belt*/
    
    #c_nolabel{
		position:absolute;
		left :136px;
		top:10px;
		height:300px;
		width:54px;
cursor: pointer;
	}
	   .kanavertical{
		width:100%; 
		height:100%;
		
		display:flex; 
		justify-content:flex-end; /*center;*/ 
		align-items:center; 
		writing-mode:vertical-rl;
		text-orientation: upright;  /* upright; ne fonctionne pas sur ipad */
		font-family:sans-serif; 
		font-size:52px; 
		color:aliceblue;
	   
    }
    
.hb{


		width: 100%;
      height: 100%;
		display:flex; 
		justify-content:flex-end; /*center;*/ 
		align-items:center; 

      writing-mode: sideways-rl;
      font-family: Arial, sans-serif;
      font-size: 52px;
      color: #00fd09;
      
}   
.bh{
     width: 100%;
      height: 100%;
		display:flex; 
		justify-content:flex-start; /*center;*/ 
		align-items:center;       
      writing-mode: sideways-lr;
      font-family: Arial, sans-serif;
      font-size: 52px;
      color: #00fd09;
   /*   text-align: center;*/
}
.srlr {
    width: 626px; /* Inversion de la hauteur pour la rotation */
    height: 115px;
    transform: rotate(90deg) translateY(-115px); /* Simule sideways-rl */
    transform-origin: top left;
    font-family: Arial, sans-serif;
    font-size: 40px;
    color: #00fd09;
    line-height: 115px;
    text-align: center;
    }