.button i,
button i,
input[type='button'] i,
input[type='reset'] i,
input[type='submit'] i {
	margin:0 4px
}

.button,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
	display:inline-block;
	align-content:center;
	align-items:center;
	justify-content:center;
	justify-items:center;
	border: 1px solid transparent;
	cursor: pointer;
	font-family:inherit;
	font-size:0.875em;
	font-weight:500;
	padding: 8px 16px;
	text-align: center;
	text-decoration: none;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.button[disabled],
button[disabled],
input[type='button'][disabled],
input[type='reset'][disabled],
input[type='submit'][disabled] {
	background-color:silver!important;
	border-color:silver!important;
	color:black!important;
	cursor: default!important;
	opacity:0.9!important;
	pointer-events:none!important;
}

input[type='color'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
input[type='week'],
input:not([type]),
textarea,
select {
	border:none;
	box-shadow: none;
	box-sizing: inherit;
	font-family: inherit;
	padding: 8px 4px;
	width: 100%;
}

.button[disabled]:focus, .button[disabled]:hover,
button[disabled]:focus,
button[disabled]:hover,
input[type='button'][disabled]:focus,
input[type='button'][disabled]:hover,
input[type='reset'][disabled]:focus,
input[type='reset'][disabled]:hover,
input[type='submit'][disabled]:focus,
input[type='submit'][disabled]:hover {
	background-color:var(--color-bg)!important;
	border-color:var(--color-bg)!important;
	color:var(--color-default-text)!important;
	opacity:1!important;
}

.bt-default {
	background-color: var(--color-theme);
	border-color: var(--color-theme);
	color: white;
}

.bt-default:hover{
	background-color: var(--color-theme-hover);
	border-color: var(--color-theme-hover);
	color: white;
}

.bt-default-outline {
	background-color: white;
	border-color: var(--color-theme);
	color: var(--color-theme);
}

.bt-default-outline:hover, .bt-default-outline:focus {
	background-color: var(--color-theme-hover);
	border-color: var(--color-theme-hover);
	color: white;
}

.bt-default-clear {
	background-color: transparent;
	color: white;
}

.bt-default-clear:hover, .bt-default-clear:focus {
	background-color: transparent;
	color: rgba(255,255,255,0.6);
}

.bt-white {
	background-color: white;
	border-color: white;
	color: var(--color-default-text);
}

.bt-white:hover, .bt-white:focus {
	background-color: lightgray;
	border-color: lightgray;
	color: rgba(0,0,0,0.8);
}

.bt-white-outline {
	background-color: transparent;
	border-color: white;
	color: white;
}

.bt-white-outline:hover, .bt-white-outline:focus {
	background-color: rgba(255,255,255,0.8);
	border-color: rgba(255,255,255,0.8);
	color: rgba(255,255,255,0.6);
}

.bt-white-clear {
	background-color: transparent;
	color: white;
}

.bt-white-clear:hover, .bt-white-clear:focus {
	background-color: transparent;
	color: rgba(255,255,255,0.6);
}

.bt-secondary {
	background-color: var(--color-seconday)!important;
	border-color: var(--color-seconday)!important;
	color: white!important;
}

.bt-secondary:hover, .bt-secondary:focus {
	background-color: var(--color-seconday-hover)!important;
	border-color: transparent!important;
	color: rgba(255,255,255,0.8)!important;
}

.bt-secondary-outline {
	background-color: transparent;
	border-color: var(--color-seconday);
	color: var(--color-seconday);
}

.bt-secondary-outline:hover, .bt-secondary-outline:focus {
	background-color: transparent;
	border-color: var(--color-seconday-hover);
	color: var(--color-seconday-hover);
}


.bt-dark {
	background-color: var(--color-panel-contrast);
	border-color:  var(--color-panel-contrast);
	color: var(--color-panel);
}

.bt-dark:hover {
	background-color: rgba(0,0,0,0.6);
	border-color: transparent;
	color:white;
}


.bt-dark-outline {
	background-color: transparent;
	border-color: var(--color-dark);
	color:var(--color-dark);
}

.bt-dark-outline:hover {
	background-color: rgba(0,0,0,0.1);
	border-color: transparent;
	color: rgba(0,0,0,0.6);
}

.bt-dark-clear {
	background-color: transparent;
	color: var(--color-dark);
}

.bt-dark-clear:hover, .bt-dark-clear:focus {
	background-color: transparent;
	color: rgba(255,255,255,0.6);
}

.bt-green {
	background-color: var(--green-10);
	border-color: var(--green);
	color: unset;
}

.bt-green:hover, .bt-green:focus {
	background-color: rgba(0,0,0,0.1);
	border-color: transparent;
	color: rgba(0,0,0,0.6);


}

input[type='color'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
input[type='week'],
input:not([type]),
textarea,
select {
	background-color: var(--color-bg);
	border: none;
	box-shadow: none;
	box-sizing: inherit;
	font-family: inherit;
	height: 36px;
	padding: 4px;
	width: 100%;
}

input[type='color']:focus,
input[type='date']:focus,
input[type='datetime']:focus,
input[type='datetime-local']:focus,
input[type='email']:focus,
input[type='month']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
input[type='week']:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
	outline: 0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
select.w-reset {width:auto!important;}
select {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23d1d1d1" d="M0,0l6,8l6-8"/></svg>');
	background:var(--color-bg) center right no-repeat;
	padding-right: 3.0rem;
}

select:focus {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%239b4dca" d="M0,0l6,8l6-8"/></svg>');
	background:#dadada center right no-repeat;
}

select[multiple] {
	background: none;
	height: auto;
}

textarea {
	resize: none;
	overflow: auto;
}

fieldset {
	border-width: 0;
	padding: 0;
}

input[type='checkbox'],
input[type='radio'] {
	display: inline-block;
	margin-right:5px;

}
input[type='checkbox'] + label,
input[type='radio'] +label {
	display: inline-block;
	margin-right:10px;

}

.input-container {
	align-items: center;
	background-color: var(--bg-color);
	border-radius: var(--radius);
	border: 1px solid transparent;
	color: #9fa4a2;
	margin-bottom:4px;
	padding: 4px;
}

.input-container:focus {
	background-color: #f3f3f3
}

.input-container input {
	background-color: transparent !important;
	border: 1px solid transparent;
	border-radius: var(--radius);
	padding: 0;
}
.input-container.error {
	background-color: var(--color-seconday-10);
	border: 1px solid var(--color-seconday-20);
}
.input-error:before {
	content:'Hata'; display:inline-block; font-weight:300; margin-right:5px
}
.input-container.error input {
	color:var(--red);
}
.input-error:empty {
	display:none;
}
.input-error {
	color: var(--red);
	font-size:0.813em;
	padding:5px 0;
}


@media only screen and (min-width: 720px) {

}