@charset "utf-8";

body, p, img, div, table, tr, th, td, dl, dt, dd, ul, ol, li, input, select, form, textarea, button{
	margin: 0; padding: 0; border: none; resize: none; border-spacing: 0; border-collapse: collapse; list-style: none;
}

h1, h2, h3, h4, h5, h6{
	margin: 0; padding: 0;
}

a{
	text-decoration: none; color: inherit;
}

body{
	line-height: 140%; font-size: 1rem; word-break: keep-all; letter-spacing: -0.02rem;
	font-family: var(--font-default), sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	color: var(--color-text-default);
}

body *{
	box-sizing: border-box;
}

button{
	background-color: transparent; cursor: pointer; outline: none;
	font-family: var(--font-default), sans-serif;
}
button:disabled{
	background-color: var(--color-bg-disabled) !important; border: 1px solid var(--color-border-disabled) !important;
	color: var(--color-text-disabled) !important;
}
input, select, textarea{
	outline: none; font-family: var(--font-default), sans-serif; color: var(--color-text-default);
	font-size: var(--fs-rg); border: 1px solid var(--color-border-control-default);
	border-radius: var(--radius-control);
}
input:focus, 
select:focus,
textarea:focus{
	border-color: var(--color-border-strong);	
}
input,
select{
	height: 28px;  padding: 0 5px;
}
input:disabled,
select:disabled,
textarea:disabled{
	background-color: var(--color-bg-disabled); border: 1px solid var(--color-border-disabled);
}
input[readonly]{
	border: none; background: transparent; 
	color: var(--color-text-default);
}
select{
	-webkit-appearance:none; -moz-appearance:none; appearance:none;
	padding: 0 30px 0 5px; background-color: var(--color-bg-surface);
	background-image: url("../img/ico-arrow-normal.svg"); background-repeat: no-repeat; background-position: right 5px center; background-size: 14px;
}
textarea{
	padding: 5px;
}

html,
body{
	height: 100%;
}


.w100{ width: 100% !important; }
.w100{ width: 100px !important; }
.w200{ width: 200px !important; }
.w300{ width: 300px !important; }
.w400{ width: 400px !important; }
.w500{ width: 500px !important; }

.mb5{ margin-bottom: 5px }
.mb10{ margin-bottom: 10px;	}
.mb20{ margin-bottom: 20px;	}
.mb30{ margin-bottom: 30px;	}
.mb40{ margin-bottom: 40px;	}
.mb50{ margin-bottom: 50px;	}

.mt10{ margin-top: 10px; }
.mt20{ margin-top: 20px; }
.mt30{ margin-top: 30px; }
.mt40{ margin-top: 40px; }
.mt50{ margin-top: 50px; }

.gap10{ gap: 10px !important; }
.gap20{ gap: 20px !important; }
.gap30{ gap: 30px !important; }
.gap40{ gap: 40px !important; }
.gap50{ gap: 50px !important; }

.align--r{
	text-align: right; justify-content: flex-end;
}
.align--l{
	text-align: left; justify-content: flex-start;
}
.align--c{
	text-align: center; justify-content: center;
}

.cursor--hand{
	cursor: pointer;
}

.color--red{ color: var(--color-text-red) !important; }
.color--danger{ color: var(--color-text-danger) !important; }
.color--primary{ color: var(--color-text-primary) !important; }

.bg--white{ background-color: var(--color-bg-surface);	}

::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-track {
    background-color: var(--color-bg-surface);  
	box-sizing: border-box;
}
::-webkit-scrollbar-thumb { 
    background-color: var(--color-border-default);
}
::-webkit-scrollbar-button {
	display: none;
}