:root {
--input-width: calc(100% - 22px);
--input-password-width: calc(100% - 60px);
--input-text-color: #000000;
--input-label-color: #000000;
--input-label-bg: #ffffff;
--input-disabled-bg: #eeeeee;
--input-select-color: #000;
--input-select-bg: #ffffff;
--input-border-color: #DEDEDE;
--input-border-focus: #000000;
--input-border-radius: 2px;
--input-border-top: 1px;
--input-border-right: 1px;
--input-border-bottom: 1px;
--input-border-left: 1px;
--input-box-border: none rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, 
rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
rgba(0, 0, 0, 0) 0px 0px 0px 0px;
--input-box-border-focus: none rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, 
rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
rgba(0, 0, 0, 0) 0px 0px 0px 0px;
--input-box-border-error: none rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
rgba(255, 0, 0, 0.16) 0px 0px 0px 1px, 
rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

#register {
margin-top: 80px;
}
.custom-form {
width: calc(95% - 50px);
max-width: 350px;
padding: 25px;
}
.custom-form .custom-input{
width: calc(100% - 10px);
margin: 0 5px;
padding-bottom: 15px;
}
.custom-form .custom-input .custom-checkbox {
width: calc(100% - 10px);
margin: 5px 5px 0;
}
.custom-input.custom-select.active {
z-index: 10;
}
.custom-form .custom-input.error {
color: var(--red)
}
.custom-form .custom-input:last-child {
margin-bottom: 0;
}
.custom-form .custom-input label{
position: absolute;
float: left;
top: calc(20px + var(--input-border-top));
left: var(--input-border-left);
width: var(--input-width);
height: 20px;
line-height: 20px;
padding: 10px;
margin: 0px;
transform: translateY(-50%);
font-family: var(--text-font-family);
font-size: .8em;
cursor: text;
text-align: left;
color: var(--input-label-color);
background: rgba(255,255,255,0);
z-index: 3;
transition: .3s;
}
.custom-form .custom-input.password label{
width: var(--input-password-width);
}
.custom-form .custom-input.ok label {
width: auto;
height: auto;
line-height: 1em;
font-size: .7em;
padding: 0 5px;
margin: 0 5px;
background: var(--input-label-bg);
top: 0;
cursor: default;
}
.custom-form .custom-input.password.ok label{
width: auto;
}
.custom-form .select-selected,
.custom-form .select-items,
.custom-form .custom-input input[type=text],
.custom-form .custom-input input[type=number],
.custom-form .custom-input input[type=password],
.custom-form .custom-input input[type=email],
.custom-form .custom-input input[type=date],
.custom-form .custom-input textarea {
width: var(--input-width);
height: 20px;
line-height: 20px;
padding: 10px;
font-size: 1em;
font-family: var(--text-font-family);
font-weight: 300;
border-radius:  var(--input-border-radius);
border-top: var(--input-border-top) solid var(--input-border-color);
border-right: var(--input-border-right) solid var(--input-border-color);
border-bottom: var(--input-border-bottom) solid var(--input-border-color);
border-left: var(--input-border-left) solid var(--input-border-color);
box-shadow: var(--input-box-border);
color: var(--input-text-color);
text-align: left;
transition: .2s;
}
.custom-form .custom-input .label {
width: calc(100% - 10px);
font-size: .7em;
padding-left: 10px;
font-weight: 500;
}
.custom-form .custom-input .custom-checkbox label{
position: relative;
float: left;
top: auto;
left: auto;
width: auto;
height: 20px;
line-height: 20px;
margin: 0 5px;
padding: 0px;
font-size: .8em;
transform: translate(0);
}
.custom-form .custom-input .custom-checkbox input {
width: 20px;
height: 20px;
line-height: 20px;
margin-left: 5px;
border-radius: var(--input-border-radius);
border: 2px solid var(--primary-color-30);
background: var(--bg-color);
transition: .1s;
cursor: pointer;
z-index: 2;
}
.custom-form .custom-input .checkbox:checked {
background: transparent;
border: 2px solid var(--primary-color-100);
}
.custom-form .custom-input .checkbox-icon {
position: absolute;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
color: var(--primary-color);
font-size: 10px;
margin: 2px 0px 0 7px;
}
.custom-form .custom-input input:disabled,
.custom-form .custom-input textarea:disabled{
background: var(--input-disabled-bg);
}
.custom-form .custom-input input:focus,
.custom-form .custom-input textarea:focus,
.custom-form .custom-input input:valid,
.custom-form .custom-input textarea:valid,
.custom-form .custom-input .select-selected,
.custom-form .custom-input .select-items {
border-top: var(--input-border-top) solid var(--input-border-focus);
border-right: var(--input-border-right) solid var(--input-border-focus);
border-bottom: var(--input-border-bottom) solid var(--input-border-focus);
border-left: var(--input-border-left) solid var(--input-border-focus);
box-shadow: var(--input-box-border-focus);
}
.custom-form .custom-input.error input,
.custom-form .custom-input.error textarea {
border-top: var(--input-border-top) solid var(--red);
border-right: var(--input-border-right) solid var(--red);
border-bottom: var(--input-border-bottom) solid var(--red);
border-left: var(--input-border-left) solid var(--red);
box-shadow: var(--input-box-border-error);
}
.custom-form .custom-input textarea {
resize: none;
height: 40px;
}
.custom-form .select-items {
position: absolute;
top: 0;
left: 0;
color: var(--input-select-color);
background: var(--input-select-bg);
height: auto;
max-height: none;
left: 0px;
max-height: 100px;
overflow: scroll;
z-index: 2;
transition: .3s;
}
.custom-form .custom-select select {
display: none;
}
.custom-select .select-items div {
width: 100%;
cursor: pointer;
}
.custom-select .select-items .same-as-selected {
font-weight: 500;
}
.custom-form .select-items.select-hide {
height: 0;
padding: 0 10px;
border-top: 0px solid var(--border-color);
border-bottom: 0px solid var(--border-color);
}
.custom-form .custom-input .input-password-custom {
width: 100%;
}
.custom-form .custom-input .input-password-custom input{
width: var(--input-password-width);
padding-right: 50px;
}
.custom-form .custom-input .eye {
position: absolute;
top: var(--input-border-top);
right: var(--input-border-right);
width: 20px;
height: 20px;
line-height: 20px;
font-size: 1em;
text-align: center;
padding: 10px;
border-radius: var(--input-border-radius);
color: var(--input-text-color);
background: var(--bg-color);
cursor: pointer;
}
.custom-form .custom-input .eye i{
cursor: pointer;
}
.custom-form button:disabled{
cursor: not-allowed;;
opacity: .5;
}
.custom-form .button,
.custom-form button {
width: calc(100% - 10px);
margin: 0 5px;
padding: 10px;
font-size: .8em;
line-height: 20px;
text-align: center;
color: #ffffff;
border-radius: var(--input-border-radius);
border: 1px solid var(--primary-color);
background: var(--primary-color-100);
cursor: pointer;
transition: .3s;
}
.custom-form .button {
width: calc(100% - 34px);
}
.custom-form .button:hover,
.custom-form button:hover {
background: var(--primary-color-90);
}
.custom-form .button.secondary,
.custom-form button.secondary{
background: #ffffff;
color: var(--primary-color-100);
}
.custom-form .button.secondary:hover,
.custom-form button.secondary:hover{
background: var(--primary-color-10);
}
.custom-form span{
position: relative;
float: left;
font-weight: 300;
}
.custom-form span.alert-error{
width: calc(100% - 10px);
margin: 2px 0px 0;
font-size: .7em;
left: 0;
text-align: left;
}
.custom-form span.details{
width: 100%;
padding: 25px 0;
font-size: .8em;
text-align: center;
}
.custom-form .condition {
width: var(--input-width);
padding: 0 11px;
padding-bottom: 15px;
font-size: .8em;
text-align: center;
}
.custom-form .condition a,
.custom-form span.details a{
color: var(--primary-color);
transition: .3s;
}
.custom-form .condition a:hover,
.custom-form span a:hover {
text-decoration: none;
}


#ui-datepicker-div {
font-family: var(--font-family);
border-radius: 0;
background: #ffffff;
border: 1px solid #000;
margin-top: -1px;
}
#ui-datepicker-div .ui-datepicker-header {
width: 100%;
height: 30px;
line-height: 30px;
padding: 0;
background: none;
border: none;
}
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-title {
width: calc(100% - 60px);
height: 30px;
line-height: 30px;
margin: 0 30px;
color: #000;
}
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-title select{
width: auto;
line-height: 30px;
color: #000;
}
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-title select.ui-datepicker-month{
margin-left: 5px;
}
#ui-datepicker-div .ui-datepicker-header .ui-corner-all {
top: 0;
width: 30px;
height: 30px;
color: #000;
border-radius: 0;
}
#ui-datepicker-div .ui-datepicker-header .ui-corner-all:hover{
color: #000;
border: none;
background: none;
cursor: pointer;
}
#ui-datepicker-div .ui-datepicker-header .ui-corner-all.ui-datepicker-next {
right: 0;
}
#ui-datepicker-div .ui-datepicker-header .ui-corner-all.ui-datepicker-prev {
left: 0;
}
#ui-datepicker-div .ui-datepicker-header .ui-corner-all.ui-datepicker-next span{
background: none;
background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-chevron-right' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
#ui-datepicker-div .ui-datepicker-header .ui-corner-all.ui-datepicker-prev span{
background: none;
background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-chevron-left' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
#ui-datepicker-div .ui-datepicker-calendar th {
padding: 0;
}
#ui-datepicker-div .ui-datepicker-calendar td {
border: none;
}
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active{
background: #000000;
color: #ffffff;
}
#ui-datepicker-div .ui-datepicker-calendar td a{
border: none;
text-align: center;
}
#ui-datepicker-div .ui-datepicker-calendar td span {
border: none;
text-align: center;
}