.mycss-select {
	position: relative;
	display: inline-block;
	margin-right: 8px;
}

.mycss-select select {
	margin-right:8px;
	margin-bottom:8px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: #fff;
	border: 2px solid #000;
	border-radius: 0;
	padding: 10px 30px 10px 10px;
	font-size: 1.2em;
	cursor: pointer;
	position: relative;
	width: 100%;
	overflow: hidden;
}

.mycss-select select:disabled {
	background-color: #ccc !important;
	cursor: not-allowed;
}
.mycss-select select:not([disabled]):active
{
	box-shadow: none; 
	transform: translate(2px, 2px); 
}

.mycss-select:after {
	content: "\25BC";
	position: absolute;
	top: 10px; 
	right: 1.2em;
	font-size: 1.2em;
	z-index:2;
  pointer-events: none;
}
.mycss-select select option:nth-child(even) {
	background-color: #ffd700;
}

.mycss-select select option:nth-child(odd) {
	background-color: #f6e3b5;
}

.mycss-select select option:last-child {
	border-bottom: 1px solid #000;
}
.mycss-select select:hover {
	background-color: #ffd700;
}

.mycss-select select:focus {
	outline: none;
}

.mycss-select:disabled:after {
	color: #ccc;
	cursor: not-allowed;
}

table.mycss-table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 8px;
  background-color: #fff7db; 
}

table.mycss-table tbody tr:nth-child(even) {
  background-color: #ffd700; 
}

table.mycss-table tbody tr:nth-child(odd) {
  background-color: #f6e3b5; 
}

table.mycss-table tr:hover {
  background-color: #a6a6a6!important;
}

table.mycss-table th {
  padding: 10px;
  text-align: center;
  border: 2px solid #000;
  background-color: #b6e2ff; 
  color: #000; 
}

table.mycss-table td {
  padding: 10px;
  text-align: center;
  border: 2px solid #000;
}

.mycss-button {
	margin-right:8px;
	margin-bottom:8px;
	padding: 10px 20px;
	font-size: 1.2em;
	border: none;
	background-color: #fff;
	border: 2px solid #000;
	cursor: pointer;
	box-shadow: 4px 4px 4px #aaa; 
	transition: box-shadow 0.1s ease, transform 0.1s ease;
}

.mycss-button:hover {
	background-color: #ffd700;
}

.mycss-button:not([disabled]):active
{
  box-shadow: none; 
  transform: translate(2px, 2px); 
}

.mycss-textarea::-webkit-scrollbar {
  width: 1.2em;
}

.mycss-textarea::-webkit-scrollbar-thumb:hover {
  background-color: #f6e3b5; 
}
.mycss-textarea::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 10px;
}
.mycss-textarea::-webkit-scrollbar-thumb {
  background: #f6e3b5;
  border: 3px solid #fff;
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.mycss-textarea::-webkit-scrollbar-corner {
  background: #fff;
}

.mycss-textarea:hover {
  background-color: #ffd700;
}

.mycss-textarea:focus{
    outline: none;
    background-color: #fff;
}
.mycss-textarea {
  margin-bottom:8px;
  width: 100%;
  padding: 10px;
  border: 2px solid #000;
  border-radius: 1em;
  font-size: 1em;
  resize: vertical;
  background-color:#eee8d5;
}

.mycss-button:disabled,
input[type="radio"].mycss-radio:disabled,
input[type="checkbox"].mycss-checkbox:disabled,
textarea.mycss-textarea:disabled {
	background-color: #ccc;
	cursor: not-allowed;
}

.mycss-label {
	display: inline-block;
	position: relative;
	cursor: pointer;
	font-size: 1.2em;
	margin-bottom: 10px;
  margin-right:8px;
}
.mycss-label:hover {
	background-color: #ffd700;
}

.mycss-radio-label:hover {
	background-color: #ffd700;
}
.mycss-radio-label {
	padding-left: 30px;
}
.mycss-radio-label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border: 2px solid #000;
	border-radius: 50%;
	background-color: #fff;
}

.mycss-radio-input{ display:none }
.mycss-radio-input:checked + .mycss-radio-label::before {
	background-color: #f6e3b5;
}
.mycss-radio-input:checked + .mycss-radio-label::after {
    content: "✔";
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    color: #000;
    font-size: 1.2em;
}
.mycss-checkbox-label:hover {
	background-color: #ffd700;
}
.mycss-checkbox-label {
	padding-left: 30px;
}
.mycss-checkbox-label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border: 2px solid #000;
	background-color: #fff;
}
.mycss-checkbox-input{ display:none }
.mycss-checkbox-input:checked + .mycss-checkbox-label::before {
	background-color: #f6e3b5; 
}
.mycss-checkbox-input:checked + .mycss-checkbox-label::after {
    content: "✔";
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    color: #000;
    font-size: 1.2em;
}
.mycss-label.disabled {
	color: #ccc; 
	cursor: not-allowed;
}

.mycss-text-input {
    margin-bottom: 8px;
    padding: 10px;
    border: 2px solid #000;
    border-radius: 10px;
    font-size: 12em;
    width: 100%;
    box-sizing: border-box;
}

.mycss-text-input:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.mycss-text-input:hover{
	background-color: #ffd700;
}
.mycss-text-input:focus {
    outline: none;
    background-color: #fff;
}

.mycss-dropdown-toggle {
    display: none;
}

.mycss-dropdown {
    position: relative;
    display: inline-block;
}

.mycss-dropdown-label {
    padding: 10px;
    border: 2px solid #000;
    cursor: pointer;
    background-color: #fff;
}

.mycss-dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 2px solid #000;
    border-top: none;
    z-index: 10;
}

.mycss-dropdown-list li {
    padding: 10px;
    background-color: #f6e3b5;
    cursor: pointer;
}

.mycss-dropdown-list li:nth-child(even) {
    background-color: #ffd700;
}

.mycss-dropdown-list li:hover {
    background-color: #a6a6a6;
}

.mycss-dropdown-toggle:checked + .mycss-dropdown-label + .mycss-dropdown-list {
    display: block;
}