/*** COMMENT FORM ********************************************/

@font-face {
	font-family: "koosveratype";
	src: url("koosveratypeGX.ttf") format('truetype');
}

@font-face {
	font-family: "superdumpling";
	src: url("dumplingGX.ttf") format('truetype');
}

body {
	background: var(--black);
	color: var(--gray);

}
* {
	font-family: 'koosveratype';
	font-weight: normal;
	font-style: normal;
	box-sizing: border-box;
	font-size: 20px;	
}

.CommentText {
	padding-bottom: 32px;
}
.CommentText p {
	margin: 0;
	font-size: 9vw;
	line-height: 1;
	max-width: 100vw;
	line-break: loose;
	word-break: break-word;
	color: inherit;
/*	overflow: hidden;*/

}

input[type="range"] {
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	width: 80%;
	position: relative;
	display: block;
	float: left;
	border: none !important;
	height: 25px; /* Specified height */
  	background: var(--gray-dark); /* Grey background */
  	-webkit-transition: .2s; /* 0.2 seconds transition on hover */
  	transition: opacity .2s;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; 
  height: 25px;
  border-radius: 50%;
  background: var(--gray);
  cursor: pointer;
  transition: background 0.2s;
}

input[type="range"]::-moz-range-thumb {
  width: 25px; 
  height: 25px;
  border-radius: 50%;
  background: var(--gray);
  cursor: pointer;
  transition: background 0.2s;

}

/*input[type="range"]:focus::-moz-range-thumb,*/
input[type="range"]:active::-webkit-slider-thumb  {
	background: white !important; 

}

.caption {
	width: 78px;
	position: relative;
	float: left;
}

label {
	clear: both;
}
input, textarea {
	color: white;
	resize: none;
	background-color: var(--black);
	border: none;
	border-bottom: 1px solid var(--gray-dark) !important;

}


.text-around {
	padding: 1px;
	line-height: 1;	
	background-color: var(--gray-dark);
	display: flex;
	float: left;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

input[type="text"] {
	color: var(--gray);
	padding: 0 calc(var(--m) / 2);
	height: 32px;
	border: 0px solid var(--gray-dark) !important;
}


input[type="text"]:focus {
	background-color: var(--gray-dark) !important; 
	border: 0px solid var(--gray) !important;
}

textarea, #CommentForm_text {
	border: none !important;
}

input:focus, textarea:focus {
	outline: none;
	border-bottom: 1px solid white;
}

select {
	overflow: auto;
	appearance: unset;
	-webkit-appearance: unset;
	width: 100%;
	background-color: var(--black);
	outline: none;
	border: none;
}

option {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--black);
	position: relative;
	width: calc(50% - 10px);
	float: left;
	margin: 4px;
	cursor: pointer;
	appearance: unset;
	-webkit-appearance: unset;
	border: 1px solid var(--black);
	opacity: 0.9;
	transition: all 0.2s;
}

.option-white, .option-white:checked {
	background-color: var(--gray-dark) !important;
	border-color: var(--gray-dark);
}
.option-gray, .option-gray:checked {
	background-color: var(--gray);
	border-color: var(--gray);
}
.option-pink, .option-pink:checked{
	background-color: var(--pink);
	border-color: var(--pink);
}
.option-purple, .option-purple:checked {
	background-color: var(--purple);
	border-color: var(--purple);
}
.option-green, .option-green:checked {
	background-color: var(--green);
	border-color: var(--green);
}
.option-yellow, .option-yellow:checked {
	background-color: var(--yellow);
	border-color: var(--yellow);
}
.option-red, .option-red:checked {
	background-color: var(--red);
	border-color: var(--red);
}
.option-blue, .option-blue:checked  {
	background-color: var(--blue);
	border-color: var(--blue);
}

.option-white:before,
.option-gray:before,
.option-pink:before,
.option-purple:before,
.option-green:before, 
.option-yellow:before, 
.option-red:before,
.option-blue:before {
	position: absolute;
	width: 100%;
	height: 100%;
	content: "";
}
.option-white:before {
	background-color: var(--gray-dark);
}
.option-gray:before {
	background-color: var(--gray);
}
.option-pink:before {
	background-color: var(--pink);
}
.option-purple:before {
	background-color: var(--purple);
}
.option-green:before {
	background-color: var(--green);
}
.option-yellow:before {
	background-color: var(--yellow);
}
.option-red:before {
	background-color: var(--red);
}
.option-blue:before {
	background-color: var(--blue);
}

option:checked:before {
	border: 2px solid white;

}

option[data-checked], 
option:checked,
option:hover, 
option:focus, 
option:checked, 
option:active {
	appearance: unset;
	-webkit-appearance: unset;
	opacity: 1;
}

.CommentFormCite input,
.CommentFormEmail input,
.CommentFormWebsite input,
.CommentFormText textarea {
	box-sizing: border-box; 
	display: block;
	width: 100%; 
}

option.selected {
/*    background-color: orange; /* Your desired color */*/
    color: white; /* Change text color if needed */
}

.CommentFormSlider {
	box-sizing: border-box; 
	float: left;
	width: 33%; 
/*	clear: none;*/
}
.CommentFormCite,
.CommentFormEmail,
.CommentFormWebsite {
	box-sizing: border-box; 
	float: left;
	width: 33%; 
}

.CommentFormCite,
.CommentFormEmail {
	padding-right: 10px;
}

.CommentFormWebsite {
	width: 34%; 
}

.CommentFormNotify label {
	padding-right: 0.5em;
	white-space: nowrap;
}

.CommentFormText {
	clear: both;
}

.CommentFormHP {
	display: none;
}

@media only screen and (max-width: 767px) {
	.CommentFormCite,
	.CommentFormEmail,
	.CommentFormWebsite,
	.CommentFormNotify {
		float: none;
		width: 100%;
		padding-right: 0;
	}
}


/*** COMMENT LIST ********************************************/

.CommentList,
.CommentListItem {
	list-style: none;
	margin: var(--m) 0 0 0;
	padding: 0;
}

.CommentListItem {
	position: relative; 
	display: block;
	float: left;
	clear: both;
	width: 100%;
}

.CommentHeader {
	width: 100%;
	position: relative;
	clear: both;
	display: flex;
	align-items: baseline;
	justify-content: space-between;

	font-weight: normal;
	padding-bottom: 32px;
	color: var(--gray);
}

.CommentHeader .CommentCreated {
	font-weight: normal;
	padding-left: 0.5em;
/*	position: absolute;*/
	color: var(--gray);
}

.CommentListNormal .CommentListItem {
	border-bottom: 1px solid var(--gray);
}
.CommentCite {
	font-family: 'dumpling';
/*	font-size: 30px;*/
	text-transform: uppercase;
	line-height: 1;
/*	padding: 5px 10px;*/
/*	border-radius: 3px;*/	
/*	border: 1px solid var(--gray);*/
/*	background-color: var(--gray);*/
	position: relative;
	width: 50vw;
	display: block;
	float: left;
}
.CommentCite .button-subtitle {
	background-color: var(--gray);
	margin-bottom: 0;
}
.CommentCite * {
	color: var(--gray) !important;
	border-color: var(--gray) !important;
}
.CommentCreated {
	display: block;
	position: relative;
	float: left;
	width: 50%;
	color: var(--gray);
}

.CommentFooter {
	padding-bottom: 0em; 
}


/*** COMMENT LIST WITH GRAVATAR ******************************/

.CommentGravatar {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	float: left;
	width: 40px; 
	height: 40px; 
	padding: 1px;
	border: 1px solid #ddd; 
}

.CommentListHasGravatar .CommentHeader,
.CommentListNormal.CommentListHasGravatar .CommentText {
	margin-left: 55px; 
}

.CommentListHasGravatar .CommentText,
.CommentListHasGravatar .CommentAction,
.CommentListHasGravatar form {
	clear: both; 
	margin-left: 0;
}

@media only screen and (max-width: 767px) {
	.CommentListHasGravatar .CommentHeader,
	.CommentListNormal.CommentListHasGravatar .CommentText {
		margin-left: 35px;
	}

	.CommentGravatar {
		width: 25px;
		height: 25px;
	}
}


/*** COMMENT LIST WITH DEPTH (THREADED) ***********************/

.CommentList .CommentList {
	margin-bottom: 2em;
}

.CommentList .CommentList .CommentGravatar {
	left: 1em; /* should match the padding-left in item below */
}

.CommentText {
	width: 100%;
	position: relative;
	float: left;
	clear: both;
}

.CommentText, .CommentText *, #CommentForm_text {
	font-family: 'superdumpling' !important;
	font-size: 9vw;
	line-height: 1;
}
#CommentForm_text {
	transition: all 1s;
}

.CommentList .CommentList .CommentListItem {
	padding-left: 1em;
	border-left: 1px solid;
	border-color: #ddd;
	font-family: 'superdumpling';
}
.CommentAction {
	margin-bottom: 0;
}

.CommentList .CommentList .CommentListItem + .CommentListItem {
	/* provides extra space between adjacent comments on same level */
	margin-top: 2em;
}


/*** COMMENT VOTES ********************************************/

.CommentList .CommentVotes {
	float: right; 
}

.CommentList .CommentVotes a {
	text-decoration: none;
	padding: 3px 0.5em;
	font-weight: bold;
	border-bottom: none;
}
.CommentList .CommentVotes a:hover {
	background-color: #eee; 
}

.CommentList .CommentVotes a.CommentVoted {
	background-color: #eee; 
}

.CommentList .CommentActionUpvote {
	color: green;
}

.CommentList .CommentActionDownvote {
	border-left: 1px solid #ddd; 
	color: red;
}

.CommentList .CommentVotes .CommentUpvoteCnt,
.CommentList .CommentVotes .CommentDownvoteCnt {
	padding-left: 2px; 
}

/*** COMMENT STARS **********************************************/

.CommentStars > span,
.CommentForm .CommentStars > span,
.CommentList .CommentStars > span {
	display: inline-block;
	position: relative;
	width: 1.1em;
	color: #ccc;
}
span.CommentStarOn,
.CommentForm .CommentStars > span.CommentStarOn,
.CommentList .CommentStars > span.CommentStarOn {
	color: #FAA002;
}

span.CommentStarPartial {
	position: relative;
}
span.CommentStarPartial span.CommentStarOn {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	overflow-x: hidden;
	line-height: 0;
}

.CommentForm .CommentStarsInput > span:hover {
	cursor: pointer;
}

textarea {
	position: relative;
	float: left;
	box-sizing: border-box;
	width: 100%;
	resize: none; /* Optional: prevent manual resizing */
	overflow-y: hidden; /* Hide vertical scrollbar */
}
textarea::placeholder {
	color: var(--gray-dark);
}

.formBlock {
	position: relative;
	display: block;
	float: left;
	width: 50%;
/*	width: calc(50% - 10px);
	margin-left: 5px;
	margin-right: 5px;*/
/*	margin-bottom: 2em;*/
}
.full-width {
	width: 100%;
/*	width: calc(100% - 10px);*/
	padding-top: var(--m);
	border-top: 1px solid var(--gray-dark);
	display: block;
}
.flex-column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

.flex-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

.flex-row input {
	width: auto	;
	flex-grow: 10;
}

.flex-row .button-subtitle,
.flex-column .button-subtitle {
	order: -1;
}

.variable {
	position: relative;
	width: 100%;
	display: block;
	clear: both;
	float: left;
}

#CommentForm, .CommentList {
	width: calc(100vw - var(--m) * 2);
	position: relative;
	float: left;
	clear: both;
	margin: var(--m) var(--m) 0 var(--m) ;
}
#CommentForm {
	margin-top: 64px;
}
.CommentList {
	border-top: 1px solid var(--gray);

}
.CommentFormSubmit {
/*	position: relative;*/
/*	width: 100%;*/
	float: left;
	font-f
}
.subtitle {
	float: left;
	text-transform: uppercase;
}

.pending strong, .succes strong, .error strong {
	font-size: 10vw !important;
}
.pending, .success, .error {
    text-align: center;
    padding-bottom: 0.3vw;
    background-color: var(--gray);
    color: var(--black);

    margin-bottom: 2em !important;
    text-transform: uppercase;
    border: 1px solid var(--gray);
    clip-path: polygon(5px 0%, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0% 5px);
}



button[type="submit"] {
	width: 100%;
	color: var(--black);
	padding: 0;
	font-family: 'koosveratype';
	min-width: 200px;
	cursor: pointer;
}
button[type="submit"]:hover {
	color: var(--black);
}
.button-subtitle {
	background-color: var(--gray-dark);	
}
.button-subtitle-inner {
	color: var(--gray-dark);
}

input[type="text"], .button-subtitle, .button-subtitle * {
	transition: all 0.2s;
}

input[type="text"]:focus ~ .button-subtitle,
textarea:focus ~ .button-subtitle  {
	border-color: var(--gray);
	background-color: var(--gray);
}
input[type="text"]:focus ~ .button-subtitle *,
textarea:focus ~ .button-subtitle *  {
	color: var(--gray);
}

h3 {
	display: none;
}


@media (max-width: 787px) {
	.formBlock {
		width: 100%;
	}
}