/*
@import "style.css";
*/
@import url("profile.css");
@import url("calendar.css");

#clear { width: 50px; height: 20px; background: #ececec; position: fixed; left: 0px; top: 0px; cursor: pointer; }


/* content */
/*
#wrapper_content { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; padding: 0px 0px 0px 0px; }
#content_inner { width: 100%; height: 100%; margin: 0px auto 0px auto; display: flex; flex-direction: column; flex: 1; padding: 92px 50px 0px 50px; }
#wrapper_inner { width: 100%; height: 100%; margin: 0px auto 0px auto; display: flex; flex: 1; padding: 0px 0px 0px 0px; }
*/
/* footer */
/*
#wrapper_footer { position: fixed; width: 100%; height: 0px; bottom: 0px; left: 0px; }
#footer_inner { width: 100%; height: 100%; max-width: 1244px; margin: 0px auto 0px auto; display: flex; align-items: center; justify-content: center; }
*/
/* additional content */
#wrapper_additional { position: fixed; width: 100%; height: 0%; left: 0px; top: 0px; padding: 0px 0px 0px 0px; background: #f7f7f7; overflow: hidden; overflow-y: auto; }
#additional_inner { width: 100%; height: 100%; max-width: 1244px; margin: 0px auto 0px auto; }
#additional_content { height: 100%; padding: 0px 0px 20px 0px; display: flex; flex-direction: column; flex: 1; }
#wrapper_additional2 { position: fixed; width: 100%; height: 0%; left: 0px; top: 0px; padding: 0px 0px 0px 0px; background: #f7f7f7; overflow: hidden; overflow-y: auto; }
#additional2_inner { width: 100%; height: 100%; max-width: 1244px; margin: 0px auto 0px auto; }
#additional2_content { height: 100%; padding: 0px 0px 20px 0px; display: flex; flex-direction: column; flex: 1; }
#wrapper_additional3 { position: fixed; width: 100%; height: 0%; left: 0px; top: 0px; padding: 0px 0px 0px 0px; background: #f7f7f7; overflow: hidden; overflow-y: auto; }
#additional3_inner { width: 100%; height: 100%; max-width: 1244px; margin: 0px auto 0px auto; }
#additional3_content { height: 100%; padding: 0px 0px 20px 0px; display: flex; flex-direction: column; flex: 1; }


#additional_inner_close { position: absolute; width: 40px; height: 40px; overflow: hidden; display: flex; align-items: center;
-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; cursor: pointer; right: 12px; top: 12px; margin: 0px 12px 0px 0px;
background-image: url("../image2/icon/close.png"); background-position: 2px 2px; opacity: .7; }
#additional2_inner_close { position: absolute; width: 40px; height: 40px; overflow: hidden; display: flex; align-items: center;
-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; cursor: pointer; right: 12px; top: 12px; margin: 0px 12px 0px 0px;
background-image: url("../image2/icon/close.png"); background-position: 2px 2px; opacity: .7; }
#additional3_inner_close { position: absolute; width: 40px; height: 40px; overflow: hidden; display: flex; align-items: center;
-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; cursor: pointer; right: 12px; top: 12px; margin: 0px 12px 0px 0px;
background-image: url("../image2/icon/close.png"); background-position: 2px 2px; opacity: .7; }

.extended { height: 100% !important; /* background: #bebebe !important; */ }

/* login form */
#wrapper_login { right: 0px; text-align: center; overflow: hidden; padding: 5px; display: flex; align-items: center; justify-content: center; }
#login_button { position: relative; width: 40px; height: 40px; overflow: hidden; display: flex; align-items: center;
-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; cursor: pointer; 
background-image: url("../image2/icon/user.png"); background-position: 2px 2px; opacity: .7; }

#login_inner { position: relative; width: 120px; height: 30px; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
#login_enter { position: absolute; width: 120px; height: 30px; left: 0px; top: 0px; display: flex; justify-content: center; line-height: 30px;
-webkit-transition: -webkit-transform 400ms ease; -moz-transition: -moz-transform 400ms ease;  transition: transform 400ms ease; }
#login_exit { position: absolute; width: 120px; height: 30px; left: 0px; top: 40px; display: flex; justify-content: center; line-height: 30px;
-webkit-transition: -webkit-transform 400ms ease; -moz-transition: -moz-transform 400ms ease;  transition: transform 400ms ease; }
.login_move { -webkit-transform: translate(0px, -40px); -moz-transform: translate(0px, -40px); transform: translate(0px, -40px); }

#wrapper_form_login { width: 500px; margin: 200px auto 0px auto; font-size: 16px; display: flex; /* justify-content: center; */ flex-direction: column; }
#form_login_title { width: 100%; display: flex; column-gap: 40px; justify-content: center; }

#form_login_title span { text-align: center; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; }
#form_login_input { width: 100%; }
#form_login_input div { position: relative; width: 100%; }
#form_login_input span { display: inline-block; width: 100%; }
#form_login_input input { display: inline-block; width: 100%; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; color: #474a51; border: 1px solid #474a51 !important; 
height: 40px; line-height: 40px; padding: 5px 15px 5px 15px; }

#form_login_button { position: relative; width: 100%; height: 40px; overflow: hidden; background: #474a51; display: flex; align-items: center;
-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; color: #ffffff; font-size: 16px; cursor: pointer; }
#inner_login_button { position: relative; width: 100%; height: 30px; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
#login_button_enter { position: absolute; width: 100%; height: 30px; left: 0px; top: 0px; display: flex; justify-content: center; line-height: 30px;
-webkit-transition: -webkit-transform 400ms ease; -moz-transition: -moz-transform 400ms ease; transition: transform 400ms ease; }
#login_button_registration { position: absolute; width: 100%; height: 30px; left: 0px; top: 40px; display: flex; justify-content: center; line-height: 30px;
-webkit-transition: -webkit-transform 400ms ease; -moz-transition: -moz-transform 400ms ease;  transition: transform 400ms ease; }

#line_title_login { position: relative; height: 40px; line-height: 40px; padding: 0px 15px 0px 15px; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
#form_login_login { position: absolute; left: 0px; top: 0px; }
#line_title_password { position: relative; height: 40px; line-height: 40px; padding: 0px 15px 0px 15px; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
#form_login_password { position: absolute; left: 0px; top: 0px; }
.title_opacity { opacity: .5; }
.title_disable { opacity: 0; }
.wrapper_login_lines { margin: 15px 0px 15px 0px; }

.element_hide { display: none; }
#form_login_info { width: 100%; }
#form_login_info span.email_warning { color: #cf2f2f; }
#form_login_info_inner { width: 100%; font-size: 14px; }
#form_login_info_inner ul { list-style: disc; list-style-position: outside; padding-inline-start: 16px; }
#form_login_info_inner li {  }
#form_login_info_inner li span {  }

#form_login_counter { display: flex; width: 50%; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; color: #474a51;
border: 1px solid #474a51 !important; height: 40px; line-height: 40px; padding: 5px 15px 5px 15px; text-align: center; margin: 0px auto 0px auto; }
#form_login_counter_confirm { width: 50%; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; color: #ffffff; background: #474a51;
height: 40px; line-height: 30px; padding: 5px 15px 5px 15px; text-align: center; margin: 0px auto 0px auto; cursor: pointer; }

#wrapper_counter { position: relative; height: 40px; line-height: 40px; padding: 0px 15px 0px 15px; -webkit-user-select: none; -moz-user-select: none; user-select: none; 
width: 100%; text-align: center; font-size: 24px; margin: 15px 0px 0px 0px; }

/* main page */
.wrapper_main_row_first { margin: 0px 0px 0px 0px; border-radius: 4px; -webkit-border-radius: 4px; overflow: hidden; }
.wrapper_main_row { margin: 20px 0px 20px 0px; border-radius: 4px; -webkit-border-radius: 4px; overflow: hidden; }
.wrapper_main_row_last { margin: 20px 0px 4px 0px; border-radius: 4px; -webkit-border-radius: 4px; overflow: hidden; }

.inner_main_title { display: flex; justify-content: center; font-size: 20px; margin: 30px 0px 30px 0px; }
.inner_main_content {}
.inner_main_footer { display: flex; justify-content: center; margin: 30px 0px 30px 0px; }
#inner_button_project { position: relative; width: 50%; height: 40px; overflow: hidden; background: #474a51; display: flex; align-items: center; justify-content: center;
-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; color: #ffffff; font-size: 16px; cursor: pointer; }

/* main project */
#wrapper_project_data { justify-content: center; display: flex; flex-wrap: wrap; max-width: 100%; gap: 12px; }
#wrapper_project_pagination { justify-content: center; display: flex; margin: 20px 0px 0px 0px; }


/* ***** paginator ***** */
.pagination { list-style: none; display: flex; padding: 0; }
.pagination li { margin: 0px 5px 0px 5px; cursor: pointer; }
.pagination li span { background: #474a51; color: #ffffff; opacity: .8; width: 40px; height: 40px; line-height: 40px; display: block; text-align: center; 
border-radius: 50%; -webkit-border-radius: 50%; }
.pagination .active span { background: #474a51; color: #ffffff; opacity: 1; }
.pagination .disabled span { opacity: .3; }

.wrapper_paginator_project { flex: 1 1 calc(25% - 12px); background-color: #4caf50; padding: 0px; border-radius: 4px; height: 120px; cursor: pointer; 
display: flex; flex-direction: column; position: relative; }
.wrapper_paginator_project_link { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; cursor: pointer; z-index: 10; }
.wrapper_paginator_image { flex: 1; }
.wrapper_paginator_info { height: 30px; line-height: 30px; padding: 0px 10px 0px 10px; text-overflow: clip; color: #ffffff; display: flex; justify-content: right; }
.paginator_currency {}
.gradient1 { background-image: linear-gradient(120deg, #a18cd1 0%, #fbc2eb 100%); background-image: -webkit-linear-gradient(120deg, #a18cd1 0%, #fbc2eb 100%); opacity: .7; }
.gradient2 { background-image: linear-gradient(120deg, #abecd6 0%, #fbed96 100%); background-image: -webkit-linear-gradient(120deg, #abecd6 0%, #fbed96 100%); opacity: .7; }
.gradient3 { background-image: linear-gradient(120deg, #a3d4ff 0%, #cfbaef 100%); background-image: -webkit-linear-gradient(120deg, #a3d4ff 0%, #cfbaef 100%); opacity: .7; }
.gradient4 { background-image: linear-gradient(120deg, #a3e9dc 0%, #9face6 100%); background-image: -webkit-linear-gradient(120deg, #a3e9dc 0%, #9face6 100%); opacity: .7; }
.gradient5 { background-image: linear-gradient(120deg, #f79aaa 0%, #fb95bf 100%); background-image: -webkit-linear-gradient(120deg, #f79aaa 0%, #fb95bf 100%); opacity: .7; }

#wrapper_project_left { width: 300px; padding: 0px 40px 0px 0px; }
#wrapper_project_right { flex: 1; }

/* ***** filter ***** */
#wrapper_project_filter_title { width: 100%; }
#wrapper_project_filter_body { width: 100%; }
.wrapper_filter_row { margin: 12px 0px 12px 0px; width: 100%; }
#filter_button_apply { position: relative; width: 100%; height: 40px; overflow: hidden; background: #474a51; display: flex; align-items: center; justify-content: center;
-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; color: #ffffff; font-size: 16px; cursor: pointer; }
input.bottom_border { -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; border-radius: 0px !important; border: none !important;  border-bottom: 1px solid #474a51 !important; }

.slider-container { text-align: center; }
#rangeSlider { width: 100%; margin-bottom: 10px; }
#rangeValue { display: block; font-size: 16px; color: #333; }