#diffuse button {margin:1px;}

.clickable span {color:#fff;position: relative; z-index: 2; pointer-events: none;font-size:11px;text-shadow: 0 0 1px rgba(0,0,0,0.4);}

.clickable, .clickable1, .clickable2 {border-radius:5px;}

.image-buttonwood10 {width: 66px;height: 40px; background-image: url('woodcolors/black.png');  background-size: cover; position: relative; border:none !important;cursor:pointer; margin: 5px;  margin-bottom:5px !important;}
.image-buttonwood9 {width: 66px;height: 40px; background-image: url('woodcolors/whitethum.png');  background-size: cover; position: relative; border:none !important;cursor:pointer; margin: 5px;  margin-bottom:5px !important;}
.image-buttonwood8 {width: 66px;height: 40px; background-image: url('woodcolors/08.png');  background-size: cover; position: relative; border:none !important;cursor:pointer; margin: 5px;  margin-bottom:5px !important;}
.image-buttonwood7 {width: 66px;height: 40px; background-image: url('woodcolors/woodlegthum.png');  background-size: cover; position: relative; border:none !important;cursor:pointer; margin: 5px;  margin-bottom:5px !important;}
.image-buttonwood6 {width: 66px;height: 40px; background-image: url('woodcolors/wood6thum.png');  background-size: cover; position: relative; border:none !important;cursor:pointer; margin: 5px;  margin-bottom:5px !important;}
.image-buttonwood4 {width: 66px;height: 40px; background-image: url('woodcolors/wood4thum.png');  background-size: cover; position: relative; border:none !important;cursor:pointer; margin: 5px;  margin-bottom:5px !important;}
.image-buttonwood11 {width: 66px;height: 40px; background-image: url('woodcolors/wood11thum.png');  background-size: cover; position: relative; border:none !important;cursor:pointer; margin: 5px;  margin-bottom:5px !important;}
.image-buttonwood3 {width: 66px;height: 40px; background-image: url('woodcolors/wood3thum.png');  background-size: cover; position: relative; border:none !important;cursor:pointer; margin: 5px;  margin-bottom:5px !important;}
.image-buttonwood2 {width: 66px;height: 40px; background-image: url('woodcolors/wood2thum.png');  background-size: cover; position: relative; border:none !important;cursor:pointer; margin: 5px;  margin-bottom:5px !important;}




#textures {	display:inline-block}







.modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 4s ease; /* Fade-in effect over 4 seconds */
}

.modal-content {
    text-align: center;
}

.modal.show {
	z-index:999;
    display: block;
    opacity: 1;
}

.modalbutton {
	width:calc(100% - 10px);
	line-height:25px;
	text-align:left;
	margin-top:10px;
	margin-bottom:10px;
	background:none;
	border:none;
	font-size:15px;
	font-weight:bold;
	font-family:roboto;
	cursor:pointer;
	
	
}

#arrowT {float:right;transition: transform 0.5s ease;}
#arrowB {float:right;transition: transform 0.5s ease;}
#arrowE {float:right;transition: transform 0.5s ease;}
#arrowM {float:right;transition: transform 0.5s ease;}
#arrowTB {float:right;transition: transform 0.5s ease;}
#arrowEB {float:right;transition: transform 0.5s ease;}
#arrowMB {float:right;transition: transform 0.5s ease;}

.rotate {
        transform: rotate(180deg);
    }
	


.rotate {
    transform: rotate(180deg);
}

.collapsible {
    display: none;
}

#randomButton {
	width:calc(100% - 9px);
	height:40px;
	margin:7px 0px;
	background:#fff;
	border-radius:5px;
	border:1px solid #c5c5c5;
}

#randomButton:hover {
	background:#eee;
	cursor:pointer;
}