/*https://wp-kama.ru/wp-content/uploads/2017/11/shpargalka-flexbox.png*/

body{ font-family:Trebuchet MS; }

.properties {
	display: flex;
	/*flex-flow: row wrap;*/
	flex-wrap: wrap;
	/*align-self: left;*/
	/*align-items: flex-start;*/
	align-content: flex-start;
	justify-content: space-around;
	background: #D2D2D2;
	padding:2px;
	width: 20%;
	/*width: 100%;*/
	/*max-width: 100%;*/
	/*min-width: 20%;*/
	/*height: fit-content;*/
	height: 100%;

  /*float: right;*/
  border: 1px solid #999999;
  overflow-x: hidden;
  overflow-y: hidden;
}


.property_group {
	display: flex;
	/*flex-flow: row wrap;*/
	flex-wrap: wrap;
	/*align-self: left;*/
	/*align-items: flex-start;*/
	align-content: space-around;
	justify-content: flex-end;
	background: #99000000;
	width: 100%;

}


.property_head {
	color:#000;
	display: flex;
	align-content: space-evenly;
	/*align-content: flex-end;*/
	justify-content: space-around;
	flex-flow: row wrap;        
	writing-mode: horizontal-tb;
	-webkit-align-self: flex-start; 
	align-self: flex-start;
	/*padding:20px;*/
	margin: 1px;
	/*text-decoration:none;*/
	/*text-align:left;*/

    box-shadow: 
        0 0 1px rgba(0, 0, 0, 0.3), 
        0 2px 4px rgba(0, 0, 0, 0.3), 
        inset 0 1px rgba(255,255,255,1),
        inset 0 0px 2px rgba(0,0,0,0.25);
    border-radius: 4px;
    background: white; /* Fall		back */
    background: -moz-linear-gradient(#f2f2f2, #ffffff 25%, #ffffff 75%, #f2f2f2 100%);
    background: -ms-linear-gradient(#f2f2f2, #ffffff 25%, #ffffff 75%, #f2f2f2 100%);
    background: -o-linear-gradient(#f2f2f2, #ffffff 25%, #ffffff 75%, #f2f2f2 100%);
    /*background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeefef), color-stop(0.1, #ffffff));*/
    background: -webkit-linear-gradient(#f2f2f2, #ffffff 25%, #ffffff 75%, #f2f2f2 100%);
    background: linear-gradient(#f2f2f2, #ffffff 25%, #ffffff 75%, #f2f2f2 100%);
	/*width: 50%;*/
	/*max-width: 600px;*/
	width: 100%;
	/*min-height: 400px;*/
	height: 32px;
/*	max-height: 200px;
	min-height: 100px;*/
  font-size: 1.2em;

	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;

	cursor: pointer;

}


.properties_row {
	color:#000;
	display: flex;
	justify-content: flex-end;
	/*padding:20px;*/
	margin: 0px 0px 0px 0px;
	padding:0px 5px 0px 0px;

	/*text-decoration:none;*/
	/*text-align:left;*/
	/*width: 50%;*/
	/*max-width: 600px;*/
	width: 98%;

	/*min-height: 400px;*/
	/*height: 19px;*/

  height: fit-content;
/*	max-height: 200px;
	min-height: 100px;*/
}

.properties_row_name {
	color: #100;
    display: flex;
    align-items: center;
    width: 50%;
    height: 24px;
    border: 1px solid #999999;
    border-top: 0px;
    margin: 1px -5px 0px 5px;
    border-block-width: 1px;
    padding: 0px 0px 0px 5px;
    font-size: 1.00em;
    white-space: nowrap;

    background: -moz-linear-gradient(#f2f2f2, #ffffff 100%);
    background: -ms-linear-gradient(#f2f2f2, #ffffff 100%);
    background: -o-linear-gradient(#f2f2f2, #ffffff 100%);
    /*background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeefef), color-stop(0.1, #ffffff));*/
    background: -webkit-linear-gradient(#f2f2f2, #ffffff 100%);
    background: linear-gradient(#f2f2f2, #ffffff 100%);

	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.properties_row_value {
    color: #100;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 50%;
    height: 24px;
    border: 1px solid #999999;
    border-left: 1px solid #999999;
    border-top: 0px;
    border-block-width: 1px;
    margin: 1px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font-size: 1.00em;
    white-space: nowrap;

    background: -moz-linear-gradient(#f2f2f2, #ffffff 100%);
    background: -ms-linear-gradient(#f2f2f2, #ffffff 100%);
    background: -o-linear-gradient(#f2f2f2, #ffffff 100%);
    /*background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeefef), color-stop(0.1, #ffffff));*/
    background: -webkit-linear-gradient(#f2f2f2, #ffffff 100%);
    background: linear-gradient(#f2f2f2, #ffffff 100%);
}

.input_text {
	font-family: Trebuchet MS;
	padding: 0px 0px 0px 5px;
    width: 100%;
    height: 100%;
    border: none;
    margin: 0px 0px 0px 0px;
    /*margin: 0px 0px 0px 5px;*/
    white-space: nowrap;
    font-size: 1.0em;
}

.input_text:focus {
    outline: none;
}

.input_text:read-only {
	background: #F2F2F200;
}

.input_list {
	font-family: Trebuchet MS;
	padding: 0px;
    width: 100%;
    border: none;
    white-space: nowrap;
    margin: 0px 0px 0px 0px;
    /*margin: 0px 0px 0px 5px;*/
    font-size: 1.0em;
}

.input_list:focus {
    outline: none;
}

.input_slider {
	padding: 0px;
    width: 70%;
    border-top: none;
    border-bottom: none;
    border-right: 1px solid #999999;
    border-left: none;
    white-space: nowrap;
    margin: 0px 0px 0px 0px;
    background: #00000000;
    /*font-size: 0.75em;*/
}

.input_slider_text {
	font-family: Trebuchet MS;
	padding: 0px;
    width: 30%;
    border: none; 
    white-space: nowrap;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 5px;
    font-size: 1.0em;
}

.input_slider_text:focus {
    outline: none;
}

.input_slider_text:read-only {
	background: #F2F2F200;
}


input[type=range] {
	overflow: hidden;
	width: 100%;
	/*margin: 3.25px 0;*/
	background-color: transparent;
	-webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 20px;
	cursor: pointer;
}

input[type=range]::-webkit-slider-thumb {
  /*margin-top: -4px;*/
  width: 5px;
  height: 19px;
  background: #aaa;
  border: 1px solid #000;
  cursor: ew-resize;
  -webkit-appearance: none;
  box-shadow: -1000px 0px 0px 1000px #d2d2d2;
}



input[type=range]::-webkit-slider-thumb:hover {
    background: #dddddd;
    background: -moz-linear-gradient(#FCD221, #D58921);
    background: -ms-linear-gradient(#FCD221, #D58921);
    background: -o-linear-gradient(#FCD221, #D58921);
    /*background: -webkit-gradient(linear, 0 0, 0 100%, from(#FCD221), to(#D58921));*/
    background: -webkit-linear-gradient(#FCD221, #D58921);
    background: linear-gradient(#FCD221, #D58921);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	display: none;
}

.input_number {
	font-family: Trebuchet MS;
	padding: 0px 0px 0px 5px;
    width: 100%;
    border: none;
    margin: 0px 0px 0px 0px;
    white-space: nowrap;
    font-size: 1.0em;
}

.input_number:focus {
    outline: none;
}


.input_checkbox {
	opacity: 1.0;
	padding: 0px 0px 0px 0px;
    width: 100%;
    filter: grayscale(100%);
}


.input_color {
    padding: 0px;
    width: 100%;
    border: none;
    margin: 0px 0px 0px 0px;
    height: 120%;
    background-color: #ffffff00;
}

.input_button {
	font-family: Trebuchet MS;
    padding: 0px;
    width: 60%;
    border: 1px solid #999999;
    margin: 0px 0px 0px 5px;
    height: 90%;
    border-radius: 3px;
    /*background: -moz-linear-gradient(#d1d1d1, #ffffff 100%);*/
    /*background: -ms-linear-gradient(#d1d1d1, #ffffff 100%);*/
    /*background: -o-linear-gradient(#d1d1d1, #ffffff 100%);*/
    /*background: -webkit-linear-gradient(#d1d1d1, #ffffff 100%);*/
    /*background: linear-gradient(#d1d1d1, #ffffff 100%);*/
    background: -moz-linear-gradient(#FCD221, #D58921);
    background: -ms-linear-gradient(#FCD221, #D58921);
    background: -o-linear-gradient(#FCD221, #D58921);
    background: -webkit-linear-gradient(#FCD221, #D58921);
    background: linear-gradient(#FCD221, #D58921);
    filter: grayscale(100%) brightness(120%);
    font-size: 1.0em;
}

.input_button:hover {
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    filter: grayscale(0%) brightness(100%);
}

.input_button:checked {
    filter: grayscale(90%) brightness(110%);
}

.input_button:active {
    /*background: -moz-linear-gradient(#d1d1d1, #ffffff 100%);*/
    /*background: -ms-linear-gradient(#d1d1d1, #ffffff 100%);*/
    /*background: -o-linear-gradient(#d1d1d1, #ffffff 100%);*/
    /*background: -webkit-linear-gradient(#d1d1d1, #ffffff 100%);*/
    /*background: linear-gradient(#d1d1d1, #ffffff 100%);*/
    -webkit-transition: all 0.01s ease-out;
    -moz-transition: all 0.01s ease-out;
    -ms-transition: all 0.01s ease-out;
    -o-transition: all 0.01s ease-out;
    transition: all 0.01s ease-out;
    filter: grayscale(100%) brightness(110%);
}

.properties_row_textarea {
  width: 100%;
  /*height: 200px;*/
  background: -moz-linear-gradient(#f2f2f2, #ffffff 100%);
  background: -ms-linear-gradient(#f2f2f2, #ffffff 100%);
  background: -o-linear-gradient(#f2f2f2, #ffffff 100%);
  /*background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeefef), color-stop(0.1, #ffffff));*/
  background: -webkit-linear-gradient(#f2f2f2, #ffffff 100%);
  background: linear-gradient(#f2f2f2, #ffffff 100%);
  border: 1px solid #999999;
  padding: 5px;
  margin: 0px 0px 5px 0px;
}

.properties_textarea {
    font-size: 0.8em;
    font-style: italic;
}

@media all and (max-width: 10000px) {
  .properties {
    width: 15%;
  }
}

@media all and (max-width: 2500px) {
  .properties {
    width: 20%;
  }
}

@media all and (max-width: 2000px) {
  .properties {
    width: 20%;
  }
}

@media all and (max-width: 1750px) {
  .properties {
    width: 25%;
  }
}

@media all and (max-width: 1500px) {
  .properties {
    width: 25%;
  }
}

@media all and (max-width: 1300px) {
  .properties {
    width: 99%;
    display: none;
  }
}


/*input[type=range]:focus::-webkit-slider-runnable-track {
  background: #dcdcdc;
}*/

/*input[type=range]::-moz-range-track {
  background: rgba(200, 200, 200, 0.7);
  border: 1px solid #000101;
  border-radius: 1px;
  width: 100%;
  height: 20px;
  cursor: pointer;
}*/
/*input[type=range]::-moz-range-thumb {
  width: 5px;
  height: 22px;
  background: #000000;
  border: 1px solid rgba(100, 100, 100, 0);
  cursor: pointer;
}*/
/*input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 15.85px 0;
  color: transparent;
  width: 100%;
  height: 20px;
  cursor: pointer;
}*/
/*input[type=range]::-ms-fill-lower {
  background: #b4b2b2;
  border: 0.9px solid #000101;
}*/
/*input[type=range]::-ms-fill-upper {
  background: rgba(200, 200, 200, 0.0);
  border: 0.9px solid #000101;
}*/
/*input[type=range]::-ms-thumb {
  width: 5px;
  height: 28px;
  background: #000000;
  border: 1.3px solid rgba(102, 104, 104, 0);
  cursor: pointer;
  margin-top: 0px;
}*/
/*Needed to keep the Edge thumb centred*/

/*input[type=range]:focus::-ms-fill-lower {
  background: rgba(200, 200, 200, 0.7);
}*/
/*input[type=range]:focus::-ms-fill-upper {
  background: #dcdcdc;
}*/





/* Moz*/
/*input[type="range"]::-moz-range-progress {
	background:  #FF0000;
}*/
/*input[type="range"]::-moz-range-track {  
	background:  #0000FF;
}*/
/* IE*/
/*input[type="range"]::-ms-fill-lower {
	background:  #FF0000;
}*/
/*input[type="range"]::-ms-fill-upper {  
	background:  #0000FF;
}*/