@charset "utf-8";

/* -- 공통 -- */
.error_text { color: #ed1846; margin-top: 3px; }
.success_text { color: #2E8B57; margin-top: 3px; }
.terms_content h2 {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
}
.terms_content h3 {
    margin-top: 15px;
    font-size: 16px;
    font-weight: bold;
}
.terms_content p {
    line-height: 1.6;
}
.terms_content ul {
	list-style-type: decimal;
    margin-left: 20px;
    padding-left: 20px;
}
.terms_content li {
    margin-bottom: 5px;
}
.popup-applicant-code .popup-input-applicant-code{
	display: block;
}
.signup-input-group .popup-input-applicant-code{
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 15px;
    transition: all 0.3s;
}

.signup-selected-field #selectedCodesDisplay{
	margin-bottom: 15px;
}

.popup-input-applicant-code {
    display: none;
}

.selected-codes-display {
    border: 1px solid #ccc;
    min-height: 150px;
    padding: 0 15px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.code-item {
    display: inline-flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    padding: 3px 8px;
    margin-top: 10px;
    margin-left: 5px;
}

.code-remove-btn {
    color: #666;
    background: none;
    border: none;
    margin-left: 5px;
    cursor: pointer;
}

.code-remove-btn:hover {
    color: #ff0000;
}
/* -- 로그인 -- */
/* 테이블 셀 기본 말줄임표 스타일 */
.table-container .patentList td,
.table-container .brandList td, 
.table-container .designList td {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
}

/* 칼럼별 너비 조정 */


/* 메모 */
.table-container td:nth-last-child(2) {
    max-width: 80px !important;
}

/* 이미지 셀 예외처리 */
.table-container td:has(img) {
    max-width: 80px !important;
    min-width: 80px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* 팝업에서는 모든 내용 표시 */
#popupInsertInner input[type="text"],
#popupInsertInner textarea {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    width: 100% !important;
}
.applicantcode-popup-overlay input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0 auto;
    appearance: auto !important;
    -webkit-appearance: radio !important;
    -moz-appearance: radio !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    padding: initial !important;
	margin-right; 15px !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
}
.result-list {
    max-height: 600px;
    overflow-y: auto;
}

.result-item {
    display: flex;
    padding: 10px;
    align-items: center;
    border-bottom: 1px solid #454040;
}

.result-item input[type="radio"] {
    margin-right: 10px;
    display: inline-block;
}

.result-item label {
    display: flex;
    flex: 1;
    cursor: pointer;
}

.result-item span:nth-child(1) {
    width: 140px;
}

.result-item span:nth-child(2) {
    width: 160px;
}

.result-item span:nth-child(3) {
    flex: 1;
    white-space: normal;  /* 주소가 길어도 줄바꿈 되도록 */
    padding-right: 20px;
}

.select-button-area {
    text-align: center;
    padding: 15px 0;
}
.login_box {
	padding: 200px 0;
	width: 460px;
	min-height: calc(100vh - 80px);
	margin: 0 auto;
	font-size: 14px;
	letter-spacing: -0.7px;
}

.login_box .login_title {
	text-align: center;
	margin-bottom: 50px;
}

.login_box .lg_row input {
	width: 100%;
	height: 50px;
	line-height: 48px;
	border: 1px solid #a3a3a3;
	border-radius: 3px;
	padding: 5px;
}

.login_box .lg_row:nth-of-type(2) {
	margin-top: 10px;
}

.login_box .sl_box {
	margin: 10px 0 30px;
}

.login_box .save_id {
	float: left;
	width: 150px;
}

.login_box .save_id input {
	position: absolute;
	left: -9999px;
}

.login_box .save_id label {
	position: relative;
	padding-left: 25px;
}

.login_box .save_id label::before {
	content: '';
    display: block;
    background: url('/asset/ample/img/member/ico_check_white.png') center / 11px auto no-repeat;
    position: absolute;
    left: 0;
    top: 50%;
    transform: rotate(.001deg) translateY(-50%);
    width: 20px;
    height: 20px;
    border: 1px solid #c6c6c6;
    filter: brightness(0.7);
    border-radius: 2px;
}

.login_box .save_id input:checked + label::before {
	background-color: #333;
	border: 1px solid #333;
	filter: brightness(1.3);
}

.login_box .login_find {
	float: left;
	width: calc(100% - 150px);
	text-align: right;
	font-size: 0;
}

.login_box .login_find a {
	color: #333;
	font-size: 14px;
}

.login_box .login_find a:not(:last-child)::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 12px;
	position: relative;
	top: 2px;
	background-color: #cfcfcf;
	margin: 0 5px;
}

.login_box .btn-login {
	display: block;
	height: 50px;
	line-height: 48px;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 3px;
	cursor: pointer;
}

@media (max-width: 768px) {
	.login_box {
		width: 100%;
		padding: 100px 20px;
	}
}

/* -- 회원가입 -- */
.mobile_certi_btn {
    display: block;
    height: 50px;
    line-height: 48px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 30px;
}

.join_box {
	padding: 200px 0;
	width: 460px;
	margin: 0 auto;
	font-size: 14px;
	letter-spacing: -0.7px;
}

.join_box .join_title {
	text-align: center;
	margin-bottom: 50px;
}

.join_box .join_step_wrap {
	margin-bottom: 100px;
}

.join_box .join_step_wrap ul::before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	border-top: 1px dashed #b3b3b3;
	position: relative;
	top: 41px;
}

.join_box .join_step_wrap ul li:not(:last-child)::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%) rotate(-90deg);
	right: -7.5px;
	background: url("/asset/ample/img/common/arrow_down.png") no-repeat;
	width: 15px;
	height: 9px;
}

.join_box .join_step_wrap ul li {
	float: left;
	width: 33.333333%;	
	position: relative;
}

.join_box .join_step_wrap ul li.active {
	font-weight: bold;
}

.join_box .join_step_wrap ul li span {
	display: block;
	width: 80px;
	height: 80px;
	border-radius: 100%;
	border: 1px solid #b3b3b3;
	text-align: center;
	position: relative;
	margin: 0 auto;
	background-color: #fff;
}

.join_box .join_step_wrap ul li.active span {
	background: #333;
	color: #fff;
}

.join_box .join_step_wrap ul li span em {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	left: 0;
	font-style: normal;
}

.join_box .chk_field {
	font-size: 16px;
}

.join_box .chk_field .all_chk_area {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px dashed #c5c5c5; 
}

.join_box .chk_field input {
	position: absolute;
	left: -9999px;
}

.join_box .chk_field label {
	position: relative;
	padding-left: 25px;
}

.join_box .chk_field label::before {
	content: '';
    display: block;
    background: url('/asset/ample/img/member/ico_check_white.png') center / 11px auto no-repeat;
    position: absolute;
    left: 0;
    top: 50%;
    transform: rotate(.001deg) translateY(-50%);
    width: 20px;
    height: 20px;
    border: 1px solid #c6c6c6;
    filter: brightness(0.7);
    border-radius: 2px;
}

.join_box .chk_field input:checked + label::before {
	background-color: #333;
	border: 1px solid #333;
	filter: brightness(1.3);
}

.join_box .chk_field .open_terms {
	float: right;
}

.join_box .chk_field .btn-join {
	display: block;
	height: 50px;
	line-height: 48px;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 3px;
	cursor: pointer;
	margin-top: 30px;
}

.terms_wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
    z-index: 1000; /* z-index 추가 */
}

.terms_wrap .terms_wrap_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.terms_wrap .terms_popup {
    position: fixed; /* absolute에서 fixed로 변경 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    max-height: 80vh; /* 최대 높이 추가 */
    background-color: #fff;
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.1);
    display: none;
    z-index: 1001; /* 배경보다 높은 z-index */
}

.terms_wrap .terms_popup .terms_title {
	text-align: center;
	padding: 20px 0;
	font-size: 24px;
	position: relative;
	border-bottom: 2px solid #a3a3a3;
	font-weight: bold;
}

.terms_wrap .terms_popup .terms_title .terms_close {
	position: absolute;
	right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.terms_wrap .terms_popup .terms_title .terms_close::after {
	display: inline-block;
	content: "\00d7";
	font-size: 40px;
	line-height: 24px;
}

.terms_wrap .terms_popup .terms_content {
    padding: 20px;
    height: auto;
    max-height: calc(80vh - 100px);
    overflow-y: auto;
    font-size: 14px;
    word-break: keep-all;         /* 단어 단위로 줄바꿈 */
    word-wrap: break-word;        /* 긴 단어나 URL이 있을 때 강제로 줄바꿈 */
    overflow-x: hidden;           /* 가로 스크롤 제거 */
    white-space: normal;          /* 줄바꿈 허용 */
    line-height: 1.6;            /* 줄 간격 조정 */
}

.terms_wrap .terms_popup .terms_content::-webkit-scrollbar {
	width: 10px;
}

.terms_wrap .terms_popup .terms_content::-webkit-scrollbar-thumb {
	background: rgb(58,58,58);
	background: linear-gradient(0deg, rgba(58,58,58,1) 0%, rgba(58,58,58,0.43461134453781514) 100%);
}

.terms_wrap .terms_popup .terms_content::-webkit-scrollbar-track {
	background-color: #f4f4f4;
}

@media (max-width: 768px) {
	.terms_wrap .terms_box {
		width: calc(100% - 40px);
	}	
}

.join_box .join_field input::placeholder {
	font-size: 14px;
}

.join_box .join_field > div {
	margin-bottom: 10px;
}

.join_box .join_field input[type=text]:not(.p-slct):not(.p-num),
.join_box .join_field input[type=password] {
	width: 100%;
	height: 50px;
	line-height: 48px;
	border: 1px solid #a3a3a3;
	border-radius: 3px;
	padding: 5px;
	box-sizing: border-box;
	margin-top: 5px;
	font-size: 16px;
}

.join_box .join_field .p-wrap {
	font-size: 0;
	line-height: 0;
}

.join_box .join_field .p-wrap select.p-slct,
.join_box .join_field .p-wrap input[type=text].p-num {
	height: 50px;
	line-height: 1;
	border: 1px solid #a3a3a3;
	border-radius: 3px;
	padding: 5px;
	box-sizing: border-box;
	vertical-align: middle;
	margin-top: 5px;
	font-size: 16px;
	text-align: center;
}

.join_box .join_field .p-wrap select.p-slct {
	width: 60px;
	font-size: 16px;
	margin-right: 5px;
	margin-top: 5px;
}

.join_box .join_field .p-wrap input[type=text].p-num {
	width: 187.5px;
	margin-top: 5px;
}

.join_box .join_field .p-wrap span {
	display: inline-block;
	width: 20px;
	height: 50px;
	line-height: 48px;
	font-size: 16px;
	vertical-align: middle;
	text-align: center;
	margin-top: 5px;
}

.join_box .join_field .address-wrap #zipcode {
	width: 377px;
}

.join_box .join_field .address-wrap #zipSearchBtn {
	display: inline-block;
	width: 80px;
}

.join_box #userMailing1 {
	position: absolute;
	left: -9999px;
}

.join_box #userMailing1 ~ label {
	position: relative;
	padding-left: 25px;
	margin-top: 5px;
}

.join_box #userMailing1 ~ label::before {
	content: '';
    display: block;
    background: url('/asset/ample/img/member/ico_check_white.png') center / 11px auto no-repeat;
    position: absolute;
    left: 0;
    top: 50%;
    transform: rotate(.001deg) translateY(-50%);
    width: 20px;
    height: 20px;
    border: 1px solid #c6c6c6;
    filter: brightness(0.7);
    border-radius: 2px;
}

.join_box #userMailing1:checked ~ label::before {
	background-color: #333;
	border: 1px solid #333;
	filter: brightness(1.3);
}

.join_box .join_field .btn-join {
	display: inline-block;
	float: left;
	width: calc(50% - 5px);
	height: 50px;
	line-height: 48px;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 3px;
	cursor: pointer;
	margin-top: 30px;
	margin-right: 5px;
}

.join_box .join_field .btn-back {
	display: inline-block;
	float: left;
	width: calc(50% - 5px);
	height: 50px;
	line-height: 48px;
	background-color: #e8e8e8;
	color: #333333;
	text-align: center;
	border-radius: 3px;
	cursor: pointer;
	margin-top: 30px;
	margin-left: 5px;
	transition: all 0.3s;
}

.join_box .join_field .btn-back:hover {
	background-color: #bbbbbb;
}

.join_box .user-join-success-wrap {
	text-align: center;
}

.join_box .user-join-success-wrap h2 {
	font-size: 26px;
}

.join_box .user-join-success-wrap p {
	margin-top: 10px;
	font-size: 16px;
}

@media (max-width: 768px) {
	.join_box {
		width: 100%;
		padding: 100px 20px;
	}
	
	.join_box .join_field .p-wrap input[type=text].p-num {
		width: calc(50% - 42.5px);
	}
	
	.join_box .join_field .address-wrap #zipcode {
		width: calc(100% - 83px);
	}
}

/* -- 아이디, 비밀번호 찾기 -- */

.search_box {
	padding: 200px 0;
	width: 460px;
	min-height: calc(100vh - 80px);
	margin: 0 auto;
	font-size: 14px;
	letter-spacing: -0.7px;
}

.search_box .search_title {
	text-align: center;
	margin-bottom: 50px;
}

.search_box .search_field > div {
	margin-bottom: 10px;
}

.search_box .search_field .chk_name input {
	width: 100%;
	height: 50px;
	line-height: 48px;
	border: 1px solid #a3a3a3;
	border-radius: 3px;
	padding: 5px;
	box-sizing: border-box;
	margin-top: 5px;
	font-size: 16px;
}

.search_box .search_field .p-wrap {
	font-size: 0;
	line-height: 0;
}

.search_box .search_field .p-wrap select,
.search_box .search_field .p-wrap input[type=text] {
	height: 50px;
	line-height: 1;
	border: 1px solid #a3a3a3;
	border-radius: 3px;
	padding: 5px;
	box-sizing: border-box;
	vertical-align: middle;
	margin-top: 5px;
	font-size: 16px;
}

.search_box .search_field .p-wrap select {
	width: 60px;
	font-size: 16px;
	margin-right: 5px;
	margin-top: 5px;
	text-align: center;
}

.search_box .search_field .p-wrap input[type=text] {
	width: 187.5px;
	margin-top: 5px;
}

.search_box .search_field .p-wrap span {
	display: inline-block;
	width: 20px;
	height: 50px;
	line-height: 48px;
	font-size: 16px;
	vertical-align: middle;
	text-align: center;
	margin-top: 5px;
}

.search_box .search_field .btn-search {
	display: inline-block;
	float: left;
	width: calc(50% - 5px);
	height: 50px;
	line-height: 48px;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 3px;
	cursor: pointer;
	margin-top: 30px;
	margin-right: 5px;
}

.search_box .search_field .btn-back {
	display: inline-block;
	float: left;
	width: calc(50% - 5px);
	height: 50px;
	line-height: 48px;
	background-color: #e8e8e8;
	color: #333333;
	text-align: center;
	border-radius: 3px;
	cursor: pointer;
	margin-top: 30px;
	margin-left: 5px;
	transition: all 0.3s;
}

.search_box .search_field .btn-back:hover {
	background-color: #bbbbbb;
}

@media (max-width: 768px) {
	.search_box {
		width: 100%;
		padding: 100px 20px;
	}
	
	.search_box .search_field .p-wrap input[type=text] {
		width: calc(50% - 42.5px);
	}
}

.join_box .join_field > div {
	margin-bottom: 10px;
}

.search_box .search_field .search_select ul li {
	float: left;
	width: 50%;
	height: 50px;
	line-height: 48px;
	background-color: #ffffff;
	border: 1px solid #a3a3a3;
	text-align: center;
	cursor: pointer;
	margin-top: 30px;
	box-sizing: border-box;
}

.search_box .search_field .search_select ul li:first-child {
	border-right: 0;
}

.search_box .search_field .search_select ul li a {
	display: block;
}

.search_box .search_field .search_select ul li.on a {
	background-color: #333;
	color: #fff;
}

.search_box .search_field input {
	width: 100%;
	height: 50px;
	line-height: 48px;
	border: 1px solid #a3a3a3;
	border-radius: 3px;
	padding: 5px;
	box-sizing: border-box;
	margin-top: 5px;
	font-size: 16px;
}

.search_box .search_field .btn-send {
	display: block;
	width: 100%;
	height: 50px;
	line-height: 48px;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 3px;
	cursor: pointer;
	margin-top: 30px;
	margin-right: 5px;
}

/* -- 마이페이지 -- */
.mypage_wrap {
	padding: 50px 0;
	width: 460px;
	min-height: calc(100vh - 80px);
	margin: 0 auto;
	font-size: 14px;
	letter-spacing: -0.7px;
}

.mypage_wrap .mypage_title {
	text-align: center;
	margin-bottom: 50px;
}

.mypage_wrap .mypage_chk_pw input {
	width: 100%;
	height: 50px;
	line-height: 48px;
	border: 1px solid #a3a3a3;
	border-radius: 3px;
	padding: 5px;
	box-sizing: border-box;
	margin-top: 5px;
	font-size: 16px;	
}

.mypage_wrap .mypage_chk_pw .btn-pw-conf {
	display: inline-block;
	float: left;
	width: calc(50% - 5px);
	height: 50px;
	line-height: 48px;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 3px;
	cursor: pointer;
	margin-top: 30px;
	margin-right: 5px;
}

.mypage_wrap .mypage_chk_pw .btn-back {
	display: inline-block;
	float: left;
	width: calc(50% - 5px);
	height: 50px;
	line-height: 48px;
	background-color: #e8e8e8;
	color: #333333;
	text-align: center;
	border-radius: 3px;
	cursor: pointer;
	margin-top: 30px;
	margin-left: 5px;
	transition: all 0.3s;
}

.mypage_wrap .mypage_edit_field > div {
	margin-bottom: 10px;
}


.mypage_wrap .mypage_edit_field input[type=text] {
	width: 100%;
	height: 50px;
	line-height: 48px;
	border: 1px solid #a3a3a3;
	border-radius: 3px;
	padding: 5px;
	box-sizing: border-box;
	margin-top: 5px;
	font-size: 16px;
}

.mypage_wrap .mypage_edit_field .p-wrap {
	font-size: 0;
	line-height: 0;
}

.mypage_wrap .mypage_edit_field .p-wrap select,
.mypage_wrap .mypage_edit_field .p-wrap input[type=text] {
	height: 50px;
	line-height: 48px;
	border: 1px solid #a3a3a3;
	border-radius: 3px;
	padding: 5px;
	box-sizing: border-box;
	vertical-align: middle;
	margin-top: 5px;
	font-size: 16px;
}

.mypage_wrap .mypage_edit_field .p-wrap select {
	width: 60px;
	line-height: 1;
	text-align: center;
	font-size: 16px;
	margin-right: 5px;
	margin-top: 5px;
}

.mypage_wrap .mypage_edit_field .p-wrap input[type=text] {
	width: 187.5px;
	margin-top: 5px;
}

.mypage_wrap .mypage_edit_field .p-wrap span {
	display: inline-block;
	width: 20px;
	height: 50px;
	line-height: 48px;
	font-size: 16px;
	vertical-align: middle;
	text-align: center;
	margin-top: 5px;
}

.mypage_wrap .mypage_edit_field #userMailing1 {
	position: absolute;
	left: -9999px;
}

.mypage_wrap .mypage_edit_field #userMailing1 ~ label {
	position: relative;
	padding-left: 25px;
	margin-top: 5px;
}

.mypage_wrap .mypage_edit_field #userMailing1 ~ label::before {
	content: '';
    display: block;
    background: url('/asset/ample/img/member/ico_check_white.png') center / 11px auto no-repeat;
    position: absolute;
    left: 0;
    top: 50%;
    transform: rotate(.001deg) translateY(-50%);
    width: 20px;
    height: 20px;
    border: 1px solid #c6c6c6;
    filter: brightness(0.7);
    border-radius: 2px;
}

.mypage_wrap .mypage_edit_field #userMailing1:checked ~ label::before {
	background-color: #333;
	border: 1px solid #333;
	filter: brightness(1.3);
}

.mypage_wrap .mypage_edit_field .btn-edit-complete {
	display: inline-block;
	float: left;
	width: calc(50% - 5px);
	height: 50px;
	line-height: 48px;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 3px;
	cursor: pointer;
	margin-top: 30px;
	margin-right: 5px;
}

.mypage_wrap .mypage_edit_field .btn-member-out {
	display: inline-block;
	float: left;
	width: calc(50% - 5px);
	height: 50px;
	line-height: 48px;
	background-color: #e8e8e8;
	color: #333333;
	text-align: center;
	border-radius: 3px;
	cursor: pointer;
	margin-top: 30px;
	margin-left: 5px;
	transition: all 0.3s;
}

.mypage_wrap .mypage_edit_field .btn-member-out:hover {
	background-color: #bbbbbb;
}

.mypage_wrap .mypage_edit_field .pw-edit-area .pw-title {
	text-align: center;
	margin-top: 50px;
	margin-bottom: 50px;
}

.mypage_wrap .mypage_edit_field .pw-edit-area input {
	width: 100%;
	height: 50px;
	line-height: 48px;
	border: 1px solid #a3a3a3;
	border-radius: 3px;
	padding: 5px;
	box-sizing: border-box;
	margin-top: 5px;
	font-size: 16px;
}

.mypage_wrap .mypage_edit_field .pw-edit-area .btn-pw-conf {
	display: inline-block;
	float: left;
	width: calc(50% - 5px);
	height: 50px;
	line-height: 48px;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 3px;
	cursor: pointer;
	margin-top: 30px;
	margin-right: 5px;
}

.mypage_wrap .mypage_edit_field .pw-edit-area .btn-pw-canc {
	display: inline-block;
	float: left;
	width: calc(50% - 5px);
	height: 50px;
	line-height: 48px;
	background-color: #e8e8e8;
	color: #333333;
	text-align: center;
	border-radius: 3px;
	cursor: pointer;
	margin-top: 30px;
	margin-left: 5px;
	transition: all 0.3s;
}

.mypage_wrap .mypage_edit_field .pw-edit-area .btn-pw-canc:hover {
	background-color: #bbbbbb;
}

@media (max-width: 768px) {
	.mypage_wrap {
		width: 100%;
		padding: 100px 20px;
	}
}

.ui-datepicker.elegant-datepicker{background:#fff;border:none;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,0.1);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;padding:20px;width:300px}
.ui-datepicker.elegant-datepicker .ui-datepicker-header{background:transparent;border:none;padding:0 0 20px;position:relative}
.ui-datepicker.elegant-datepicker .ui-datepicker-title{color:#333;font-size:18px;font-weight:600;line-height:1;text-align:center;margin:0 40px}
.ui-datepicker.elegant-datepicker .ui-datepicker-prev,.ui-datepicker.elegant-datepicker .ui-datepicker-next{cursor:pointer;height:30px;position:absolute;top:-5px;width:30px;text-indent:-9999px;overflow:hidden}
.ui-datepicker.elegant-datepicker .ui-datepicker-prev{left:0}
.ui-datepicker.elegant-datepicker .ui-datepicker-next{right:0}
.ui-datepicker.elegant-datepicker .ui-datepicker-prev:after,.ui-datepicker.elegant-datepicker .ui-datepicker-next:after{border:solid #333;border-width:0 2px 2px 0;content:'';display:block;height:10px;left:50%;position:absolute;top:50%;width:10px}
.ui-datepicker.elegant-datepicker .ui-datepicker-prev:after{transform:translate(-25%,-50%) rotate(135deg)}
.ui-datepicker.elegant-datepicker .ui-datepicker-next:after{transform:translate(-75%,-50%) rotate(-45deg)}
.ui-datepicker.elegant-datepicker .ui-datepicker-calendar{margin:0;width:100%}
.ui-datepicker.elegant-datepicker th{color:#888;font-size:12px;font-weight:600;padding:5px 0;text-transform:uppercase}
.ui-datepicker.elegant-datepicker td{padding:2px}
.ui-datepicker.elegant-datepicker td span,.ui-datepicker.elegant-datepicker td a{background:transparent;border-radius:50%;color:#333;display:block;font-size:14px;height:34px;line-height:34px;text-align:center;text-decoration:none;width:34px}
.ui-datepicker.elegant-datepicker td a:hover{background:#f0f0f0}
.ui-datepicker.elegant-datepicker .ui-state-active,.ui-datepicker.elegant-datepicker .ui-datepicker-current-day a{background:#3498db;color:#fff}
.ui-datepicker.elegant-datepicker .ui-datepicker-today a{background:#e8f4f8;color:#3498db;font-weight:600}
.ui-datepicker.elegant-datepicker .ui-datepicker-other-month a{color:#ccc}
.ui-datepicker.elegant-datepicker select.ui-datepicker-month,.ui-datepicker.elegant-datepicker select.ui-datepicker-year{background:#fff;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;margin:0 2px;padding:5px}
.ui-datepicker.elegant-datepicker .ui-datepicker-title select{font-size:14px;margin:2px 2px;padding:5px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;color:#333}
@media (max-width:480px){.ui-datepicker.elegant-datepicker{left:50%!important;transform:translateX(-50%);width:280px}}

#userBirth { cursor: pointer; }