@charset "utf-8";

/* CSS Document for Hankeportaali
   by Mediascope Oy 2017
*/

html, body, body div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

body { font:13px/1.231; *font-size:small;  background: #fff repeat;} /* Hack retained to preserve specificity */

a:focus { outline: none; }

/* Normalize monospace sizing:
en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre, code, kbd, samp { font-family: monospace, sans-serif; }/* Reset CSS // */
html, body, body div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

ul {margin: 0 0 20px 30px; line-height: 32px;}

a#logo { display:block; float:left; height:80px; width:320px; text-indent:-9000pt; background:url(img/logo.png) no-repeat center right; background-size:auto 80px; margin-right:50px; }
@media (max-width:1200px) { a#logo {  margin-right:25px; } }
@media (max-width:1100px) { a#logo { width:240px; background-size:auto 60px; margin-right:10px; } }
@media (max-width:360px) { a#logo { width:200px;  background-size:auto 50px; } }

h1 { font-size:36px; line-height:40px; font-weight:normal; text-transform:uppercase; }
.col-middle h1 { margin:40px 0; }
#hanke-header h1 { color:#fff; font-size:32px; line-height:40px; position:relative; z-index:2; font-weight:300; text-transform:none; max-width:75%; }
@media (max-width:960px) { #hanke-header h1 { max-width:none; text-align:center; } }
#hanke-header.narrow h1 { max-width:none; text-align:center; }

h2 { font-size:18px; line-height:24px; margin:30px 0 20px; }

h3 { font-size:16px; line-height:24px; margin:20px 0;  }
#unit-info > h3 { text-transform:uppercase; margin:40px 0 15px; }

p { font-size:16px; line-height:22px; margin-bottom:20px; }
.col-middle p { line-height:32px; }

a, a:visited { color:#00afd7; text-decoration:none; }

a.btn { color:#fff; background:#00afd7; padding:10px 20px; display:inline-block; text-decoration:none; font-weight:bold; font-size:14px; line-height:16px; border-radius: 50px; }
a.btn.cancel { background:#999; }
a.btn.report { background:#40c353; }
a.btn.report i { padding-right:10px; }

span.unit a, span.unit a:visited {color:#000; font-size: 14px; font-weight: 300;}
span.unit a:hover {color:#00afd7;}


@media (min-width:741px) { .col-middle a.btn { display:block; width:375px; margin-top:10px; padding:25px 10px; text-align:center; font-size:20px; font-weight:700; line-height:25px; } }
@media (max-width:740px) { .col-middle a.btn { margin:10px; } }
/* WRAPPERS / CONTAINERS */

body { background:#fff; font-family: 'Poppins', sans-serif; min-width:320px; }
body.hankkeet, body.login { background-color: #e1e1e1; background-repeat: no-repeat; background-size: cover; }

#master-wrap {  min-width:320px; position:relative;  }

#header-wrap { background:#fff; border-bottom: 2px solid #FFB81C; }
#header-container { padding:5px 15px; }

#content-wrap { max-width:1400px; margin:0 auto; }
#content-container { }

.wsubmenu .content { text-align:center; }
.wsubmenu .content h3 { text-align:left; }

/* MENUS */

#primary-menu ul { display:block; float:left; list-style-type:none; padding-top:20px; }
#primary-menu ul.right { float:right; }
#primary-menu ul li { display:block; float:left; margin:0 30px; }
@media (max-width:1400px) { #primary-menu ul li { margin:0 15px; } }
@media (max-width:1300px) { #primary-menu ul li { margin:0 10px; } }
#primary-menu ul li a { display:block; text-decoration:none; font-weight:normal; color:#000; text-transform:uppercase; font-size:16px; line-height:43px; }
#primary-menu ul li.active a { font-weight:bold; }
@media (max-width:1200px) { #primary-menu ul li a { font-size:14px; } }

#primary-menu ul li a i { line-height:43px; margin-right:5px; }
#primary-menu ul li a.login { font-size:12px; line-height:16px; padding-top:0px; font-weight:normal; }
#primary-menu ul li a.btn { font-size:14px; line-height:20px; color:#fff; font-weight:bold; text-transform:none; padding-left:15px; }
#primary-menu ul li a.btn i { line-height:20px; }


#show-menu { display:none; }
@media all and (max-width : 959px) {
	
	#show-menu { display:block; z-index:299; cursor:pointer; position:absolute; top:30px; right:30px; width: 31px; height: 45px; padding-top:7px; }
	#show-menu .bar { position:relative; display:block; opacity:1; width:100%; height:3px; background:#000; background:#FFB81C; margin-bottom:4px; -webkit-transition: opacity 500ms, transform 500ms, position 500ms; -moz-transition: opacity 500ms, transform 500ms, position 500ms; -ms-transition: opacity 500ms, transform 500ms, position 500ms; -o-transition: opacity 500ms, transform 500ms, position 500ms; transition: opacity 500ms, transform 500ms, position 500ms;  }
		#show-menu.active .bar { background:#000; }
		#show-menu.active .bar:nth-child(1) { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top:10px; z-index:2; }
		#show-menu.active .bar:nth-child(3) { -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); top:-4px; z-index:2; }
		#show-menu.active .bar:nth-child(2) { opacity:0; z-index:1; }

	#primary-menu { position:absolute; left:0; right:0; top:0; z-index:199;  }
	#primary-menu ul { display:none; float:none!important; width:100%; background:#fff; padding:50px 0; }
	#primary-menu ul.right { padding-top:0; border-bottom: 2px solid #FFB81C; }
		#primary-menu ul li { float: none; margin: 0px; background:#fff; }
		#primary-menu ul li a { width:100%; display:block; padding:0 0; height: 40px; font-size: 18px; text-align:center; font-weight: normal; text-transform: uppercase; }
			#primary-menu ul li a:hover, #primary-menu ul li.active a { border-bottom: 0;}
	
	#primary-menu ul.right li { text-align:Center; }
	#primary-menu ul.right li a { display:inline-block; width:auto; font-size:14px; line-height:20px; height:auto; padding: 10px 20px; }
		
}


#submenu { padding:65px 0 50px; display:block; margin:0 auto; max-width:580px; }
#submenu ul { list-style-type:none; text-align:center; border-bottom:1px solid #dbdbdb; padding-bottom:20px; }
#submenu ul li { display:inline; margin:10px 30px 0; }
#submenu ul li a { color:#222; text-transform:uppercase; font-size:16px; line-height:22px; font-weight:normal; }
#submenu ul li.active a { font-weight:bold; }
@media (max-width:640px) { #submenu { padding:15px 0 10px; } #submenu ul li { display:inline-block; margin:10px 10px; } }

.content ul { list-style-type:none; text-align:center; }
.content ul li { display:block; margin-bottom:15px; }
.content ul li a { color:#222; }

#footer { padding: 15px 30px; position: relative; background: #eeeeef; border-top: solid 1px #fff; }
#footer-container {  }
#footer-container p { float:left; font-size: 12px; font-family: 'Lato', sans-serif; color: #000000; line-height: 1.666; margin:0; }

/* CONTENT */

#content-container { padding:20px 20px 50px 20px; min-height:800px; position:relative; }
@media (max-width:960px) { #content-container { padding:10px 10px 30px 10px; min-height:600px; } }
.tutkimusyksikot #content-container { padding:0px; }
.hankkeet #content-container { background:transparent; }
.content-left, .content-right { display:block; float:left; width:50%; box-sizing:border-box; padding-left:30px; }
.content-left { padding-right:20px; }
.tutkimusyksikot .content-left { padding:0; }
@media (max-width:1200px) { .tutkimusyksikot .content-left { float:none; width:100%; } .tutkimusyksikot .content-left.hidden { display:none; } }

#content-container.login { background:#f4f4f4; color:#666; }
#content-container.login .left { display:block; float:left; width:27%; padding:0 8% 0 15%; border-right:1px solid #d7d7d7; margin:150px 0 50px; }
#content-container.login .right { display:block; float:left; width:385px; padding:0 0 0 75px; margin:150px 0 50px; }
@media (max-width:1250px) {
	#content-container.login .left { width:50%; padding:0 5% 0 5%; border-right:1px solid #d7d7d7; margin:100px 0 50px; box-sizing:border-box; }
	#content-container.login .right { width:40%; padding:0 5% 0 5%; margin:100px 0 50px; }
}
@media (max-width:840px) {
	#content-container.login .left, #content-container.login .right { width:100%; padding:20px; border-right:none; margin:0; box-sizing:border-box; }
}

#content-container.login.rekisteroidy .left { box-sizing:border-box; width:60%; padding:0 0 0 5%; border-right:none;  }
#content-container.login.rekisteroidy .right { box-sizing:border-box; width:40%; padding:100px 5% 0 5%;  }

@media (max-width:550px) {
	#content-container.login.rekisteroidy .left, #content-container.login.rekisteroidy .right  { width:100%; padding:20px; border-right:none; margin:0; box-sizing:border-box; }
}

.col-50 { display:block; box-sizing:border-box; float:left; width:50%; padding:20px 20px 0 0; }
@media (max-width:640px) { .col-50 { width:100%; padding:10px 0 0 0; } }

#unit-info { display:block; float:left; position:relative; width:50%; box-sizing:border-box; padding:20px 20px 20px 50px; }
@media (max-width:1200px) {
	#unit-info { display:none; float:none; width:100%; max-width:700px; margin:0 auto; }
	#unit-info.open { display:block; }
}
@media (max-width:700px) { #unit-info { padding:20px 20px 20px 20px; } }
#unit-info .btn.close { position:absolute; top:50px; right:30px; }
#unit-info > p { padding-top:100px; text-align:center; }
#unit-info .contact-info { display:block; float:left; box-sizing:border-box; padding:5px; width:48%; margin-right:2%; margin-top:10px; border-bottom:1px solid #7E7E7E; color:#333; font-size:13px; }
@media (max-width:600px) { #unit-info .contact-info { float:none; width:100%; margin-right:0%; } }

.hanke-list-container { max-width:640px; margin: 0 auto; }
#unit-info .hanke-list-container { margin:0; }

.hanke-list { position:relative; border:5px solid #fff; border-top:1px solid #DEDEDE!important; border-right:1px solid #DEDEDE!important;  border-bottom:1px solid #DEDEDE!important; background:#fff!important; border-radius:0 5px 5px 0; margin-bottom:10px; }
.hanke-list img { display:block; }
.hanke-list .img-wrap { float:left; }
.hanke-list .info { display:block; float:left; width:calc(100% - 130px); box-sizing:border-box; padding:0 60px 0 15px; text-align:left; }
.hanke-list h3 { color:#000; margin:0px 0 5px; display: block; height: 46px; overflow: hidden; }
.hanke-list p { color:#666; font-size:14px; margin:0 0 10px; }
.hanke-list .btn { position: absolute; top: 30px; right: 20px; }
.hanke-list:after { content:""; display:block; clear:both; }

@media (max-width:680px) {
	.hanke-list .info { float:none; width:100%; padding:10px; text-align:center; }
	.hanke-list img { display:block; float:none; margin: 0 auto; }
	.hanke-list h3 { margin:10px 0; height: auto; text-align:center!important; }
	.hanke-list .btn { position: relative; top: auto; right: auto; margin:20px 0 0; }
}

/*.status-1 { background:#ffa75e; border-color:#ffa75e; }
.status-2 { background:#40c353; border-color:#40c353; }
.status-3 { background:#000; border-color:#000; }
.status-4 { background:#00afd7; border-color:#00afd7; }*/

.status-1, .status-2, .status-3, .status-4 { background:#FFF;}

.status-1 {background: #caeff6;}
.status-3 {background: #222; color:#fff !important;}

.status-float.status-1:after { content:"Suunnitteilla"; }
.status-float.status-2:after { content:"Käynnissä"; }
.status-float.status-3:after { content:"Valmis"; }
.status-float.status-4:after { content:"Arkistoitu"; }

.hanke-container { padding-top:20px; }
.hanke-wrap { display:block; float:left; width:33%; padding:6px; box-sizing:border-box; }
@media (min-width:1001px) { .hanke-wrap:nth-child(3n+1) { clear:both; } }
@media (max-width:1000px) { .hanke-wrap { width:50%; } }
@media (max-width:740px) { .hanke-wrap { width:100%; } }
.hanke-box { position:relative; background: rgba(255,255,255,0.9); border:0; border-radius:5px; padding:6px; min-height: 203px;}
.hanke-box .status-float { display:block; position:absolute; top:15px; right: 15px; z-index:5; width:auto; height:22px; font-size: 12px; line-height: 24px; color:#222; text-align:center; border-radius: 50px; padding: 2px 10px;}
.hanke-box img { display:block; margin:0; padding:0; width:100%; height:auto; }
.hanke-box .info { padding:10px; }
.hanke-box h2 { margin-top:10px; max-height:90px; overflow:hidden; margin: 15px 0 10px; font-weight: 500; }
.hanke-wrap .creator { font-size:13px; margin-bottom: 20px; color: #777; position: absolute; bottom: 00px; left: 20px;}
.hanke-wrap a.btn {position: absolute; bottom: 20px; right: 15px;}
@media (max-width:1200px) { .hanke-wrap .creator { font-size:12px; } }

.img-wrap { position:relative; display:block; }
.img-wrap .main-field { z-index:2; width:100%; height:100%; top:0; left:0; right:0; bottom:0; display:block; background:rgba(0,0,0,0.3); }
.img-wrap .main-field .name { display:block; font-size: 12px; text-align:right; color:#fff; font-weight:bold; }
.hanke-list .main-field .name { font-size:12px; bottom:10px; text-align: center; opacity: 1; }

#hanke-header { width:100%; height:380px; background-size:cover; background-position:center center; position:relative; display:table; }
#hanke-header.narrow { height:280px; }
@media (max-width:960px) { #hanke-header, #hanke-header.narrow { height:auto; display:block; padding:50px 10px; text-align:Center; box-sizing:border-box; } }
#hanke-header:before { content:" "; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); }
.header-container { display:table-cell; vertical-align:middle; padding:0 0 0 25%; }
#hanke-header.narrow .header-container { padding:0 5%; box-sizing: border-box; }
@media (max-width:1200px) { .header-container { padding:0 0 0 10%; } }
@media (max-width:960px) { .header-container { padding:0; width:100%; display:block; } }
#hanke-header .btn { position:absolute; top:50%; right:10%; margin-top:-28px; padding:20px; font-size:16px; font-weight:700; }
@media (max-width:960px) { #hanke-header .btn { position:relative; top:auto; right:auto; margin:40px auto 0; padding:20px; font-size:16px; } }
#content-container.hanke { padding-top:50px; max-width:1170px; margin:0 auto;}

.col-left { display:block; float:left; width:20%; }
.col-middle { display:block; float:left; width:48%; padding-right:5%; }
.col-right { display:block; float:left; width:27%; }

@media (max-width:1100px) {
	.col-left { float:none; width:100%; display:none; }
	.col-middle { width:60%; padding-right:5%; }
	.col-right { width:35%; }
}
@media (max-width:960px) {
	.col-middle { width:55%; padding-right:5%; }
	.col-right { width:40%; }
}
@media (max-width:740px) {
	.col-middle { float:none; width:100%; padding-right:0%; }
	.col-right { float:none; width:100%; max-width:320px; margin:50px auto 0; }
}

.col-middle .btns { padding-top:30px; }

@media (max-width:740px) {
	.col-middle .btns { text-align:center; }
}

.col-right .info { background:#f1f1f1; padding:30px 35px 50px; }
.col-right .info p { font-size:14px; line-height:22px; }
.col-right .info p strong { font-size:16px; }

p.log {}
p.log > span { display:block; }
p.log > span:before { content:"\f054"; font-family:"FontAwesome"; display:inline-block; line-height:20px; font-size:8px; padding-right:3px; position:relative; top:-1px; left:-5px; }
p.log span.date { float:right; }

.customer-list { display:table; border-bottom:1px solid #c8c8c8; width:100%; font-size:13px; line-height:16px; }
.customer-list:hover { background:#f1f1f1; cursor:pointer; }
.customer-list.locked {  }
.customer-list.locked:hover { background:#fff; cursor:default; }

.customer-list .info { display:table-cell; width:20%; padding:20px 0px 20px; box-sizing:border-box; }
.customer-list .name { font-weight:bold; vertical-align:middle; padding-left:50px; width:60%; box-sizing:border-box; }
.customer-list .total { vertical-align:middle; text-align:left; width:18%; }
.customer-list .log { vertical-align:middle; width:22%; }
.customer-list .log .log-entry { display:block; padding:0 0 0 10px; position:relative; }
.customer-list .log .log-entry a { text-transform:uppercase; }
.customer-list .log .msg:before { content:"\f054"; font-family:"FontAwesome"; display:block; position:absolute; top:1px; left:0; font-size:8px; line-height:16px; }
.customer-list .log .msg { display:block; position:relative; padding-left:10px; width:120px; overflow:hidden; white-space: nowrap; overflow:hidden !important; text-overflow: ellipsis; }

@media (max-width:600px) {
	.customer-list .name { padding-left:20px; width:70%; }
	.customer-list .total { width:30%; }
	.customer-list .log { display:none; }
}

#unit-info .log .log-entry { display:block; padding:0 0 5px 10px; position:relative; font-size:13px; }
#unit-info .log .log-entry a {  }
#unit-info .log .log-entry:before { content:"\f054"; font-family:"FontAwesome"; display:block; position:absolute; top:1px; left:0; font-size:8px; line-height:16px; }
#unit-info .log .msg { display:inline-block; padding-left:20px; font-style:italic; }

.pagination { padding:20px; text-align:left; }
.pagination a { display:inline-block; width:25px; height:25px; border-radius:25px; margin:5px; color:#AAA; font-weight:bold; line-height:23px; text-align:center; color:#fff;}
.pagination a.active { color:#fff; background:#00afd7; }
.pagination a.disabled { opacity:0.5; }
	
a.csv-export { float:right; font-size:12px; color:#00afd7; }
a.csv-export i { color:#666; margin-right:5px; }

ul.user-list { list-style-type:none; margin:50px 0 100px; }
ul.user-list li a { text-decoration:none; margin:0 0 10px 0; }
ul.user-list li a i { margin:0 5px; }
ul.user-list li a span.small { font-size: 0.75em; }
ul.user-list li.hidden a { color:#aaa; }

/* FORMS */

input, select, textarea { font-family: 'Lato', sans-serif; } 
input[type=submit] { -webkit-appearance:none; }

#search-top { padding:30px 20px 10px 20px; }
@media (max-width:1200px) { #search-top { padding:20px 0px 10px; } }
#search-top h1 { display:block; float:left; margin:0; padding:10px 50px 0 20px; color:#000; font-weight: bold;}
@media (max-width:1100px) { #search-top h1 { padding:10px 25px 0 20px; } }
#search-top #search-field { display:block; float:left; height:55px; width:470px; box-sizing:border-box; padding:15px 25px; border-radius:5px; border:0; font-size:16px; }
@media (max-width:1100px) { #search-top #search-field { width:320px; } }
@media (max-width:480px) { #search-top #search-field { width:230px; padding:15px 10px; } }
#search-top #search-submit { display:block; float:left; height:55px; width:55px; box-sizing:border-box; border-radius:5px; border:none; background:#00afd7; margin-left:14px; position:relative; cursor:pointer; color:#fff; text-align:Center; }
#search-top a { display:block; float:left; padding:20px 30px; font-size:14px; line-height: 17px; color:#000; }
#search-top a i { padding-left:10px; }

@media (max-width:960px) {
	#search-top { text-align:Center; vertical-align: middle; }
	#search-top h1 { float:none; padding:0 0 20px 0; width:100%;  }
	#search-top a { padding:19px 14px; float:none; display:inline-block;}
	#search-top #search-field, #search-top #search-submit { float:none; display:inline-block; }
	#search-top #search-submit { margin-left:10px; }
}

#adv-search { background: #fff; padding:10px 20px; margin-left:-20px; margin-right:-20px; text-align:center; border-radius: 50px; }
@media (max-width:960px) { #adv-search { margin-left:-10px; margin-right:-10px; } }
#adv-search input.date { height:24px; line-height:24px; width:90px; padding-left:5px; border:1px solid #ccc; border-radius:4px; display:inline-block; margin:13px 5px; box-sizing:border-box; }
#adv-search i { margin-right:5px; }
#adv-search select { height:30px; line-height:30px; width:190px; padding-left:5px; border-color:#ccc; border-radius:4px; display:inline-block; margin:10px 15px; }
@media (max-width:960px) { #adv-search select { display:block; margin:10px auto; } }
#adv-search input.btn { text-transform:none; font-size:12px; padding:6px 10px; margin:11px; }

.search-form { background:#f2f2f2; padding:28px 50px; }
.search-form.asiakkaat { padding:0; }
.search-form.asiakkaat #search-form { padding:28px 50px; }

.search-form .textinput.search { width:60%; box-sizing:border-box; }
@media (max-width:740px) { .search-form .textinput.search { width:100%; } }
.search-form .checkbox-wrap { width:35%; padding-top:5px; }
.search-form label { font-size:12px; position:relative; top:-2px; }

.search-form .column-titles { padding:10px 0 5px 0; }
.search-form .column-titles .sort { position:relative; display:inline-block; width:8px; height:12px; margin-left:4px; }
.search-form .column-titles .sort a { display:block; position:absolute; top:0; left:0; width:8px; height:5px; overflow:hidden; }
.search-form .column-titles .sort a.s-dn { top:auto; bottom:0; }
.search-form .column-titles .sort a i { display:block; line-height:5px; }

.search-form .column-titles .col { display:block; float:left; width:20%; font-size:12px; line-height:18px; box-sizing:border-box; padding:0; }
.asiakkaat .column-titles .col-1 { padding-left:50px; width:60%; }
.asiakkaat .column-titles .col-2 { width:18%; }
.asiakkaat .column-titles .col-3 { width:22%; }

@media (max-width:600px) {
	.asiakkaat .column-titles .col-1 { padding-left:20px; width:70%; }
	.asiakkaat .column-titles .col-2 { width:30%; }
	.asiakkaat .column-titles .col-3 { display:none;  }
}

.form {}
.form .column { display:block; float:left; width:50%; }
.form .column.col3 { width:33.3%; }

.center-form { display:block; margin:0 auto; width:600px; }

.form label { display:block; font-size:14px; line-height:16px; margin-bottom:10px; }
.form label.radio, .form label.check { display:inline; }

.check-wrap label { display:inline; }

.form .textinput { display:block; padding:5px 10px; width:90%; border:none; border-bottom:1px solid #7e7e7e; margin-bottom:10px; color:#333; font-size:13px; line-height:18px; }
.register .form .textinput { background:#fff; border:1px solid #fff; height:22px; line-height:22px; width:100%; max-width:300px; box-sizing:border-box; height:34px; }
.editform .textinput { width:100%; margin-bottom:30px; box-sizing:border-box; }
.form select { height:30px; line-height:30px; width:190px; padding-left:5px; border-color:#ccc; border-radius:4px; display:block; margin:19px 0 20px; }
.register .form select { height:34px; margin:0 0 10px 0; }

.textinput.search { display:block; float:left; text-align:center; background:#fff; border:0px solid #C8C8C8; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset; border-radius:4px; height:30px; line-height:30px; }
.datepicker, .form .datepicker { border:1px solid #ccc; border-radius:4px; height:30px; line-height:30px; text-align:center; width:98px; }

.textarea { width:100%; height:150px; margin-bottom:20px; }

input.btn { color:#fff; background:#00afd7; padding:10px 20px; display:inline-block; text-decoration:none; font-weight:bold; border:none; border-radius:0; font-size:14px; line-height:16px; cursor:pointer; text-transform:uppercase; }
.form-top .btn { text-transform:uppercase; }
.editform .btn { margin-top:40px; }
.rekisteroidy input.btn { margin:30px 52px 0 0; }
@media (min-width:600px) { .rekisteroidy input.btn { float:right; } }

input.error { border-color:red!important; }
label .error { color:red; font-size:12px; }
input[type=checkbox].required.error + label { color:red; }

.form-control { margin-bottom:50px; }
.form-buttons { float:right; }
@media (max-width:550px) { .update-profile h2 { clear:both; padding-top:20px; } }

.update-profile { display:block; max-width:700px; margin:0 auto; padding:20px; }
.update-profile.change-pass { max-width:300px; }
.update-profile h2 { text-align:left; display:block; }
.update-profile label { margin-top:20px; width:100%; }
.update-profile input[type=text], .update-profile input[type=password] {  display:block; padding:5px; width:100%; border:none; border-bottom:1px solid #7e7e7e; margin-bottom:10px; color:#333; font-size:13px; line-height:18px; text-align:left; box-sizing:border-box; }
.update-profile input[type=text]:disabled { background:#fff; color:#ccc; }
.update-profile input[type=submit] { color:#fff; background:#00afd7; padding:10px 20px; display:inline-block; text-decoration:none; font-weight:bold; border:none; border-radius:0; font-size:14px; line-height:16px; cursor:pointer; text-transform:uppercase; }
.update-profile form img { display: block; width: 75px; height: 75px; border-radius: 75px; margin:0 auto; }

.loginUsername, .loginPassword, .loginFPUsername, .loginFPEmail { width:100%; height:45px; box-sizing:border-box; border:0; margin-bottom:18px; padding:5px 20px; font-size:14px; }
.loginLoginButton input, .loginFPButton input { color:#fff; background:#00afd7; padding:15px 40px; display:inline-block; text-decoration:none; font-weight:bold; border:none; border-radius:0; font-size:14px; line-height:16px; cursor:pointer; }
.loginLogin p { text-align:right; }
.loginLogin p a { font-size:13px; }

@media (max-width:480px) {
	.loginLoginButton input, .loginFPButton input { padding:15px; }
	
	input[type=text], select, textarea { font-size:16px;}
}

/* LUO HANKE */

.form label.lang-switch { display:block; }
.form label.lang-switch-en, span.lang-switch-en, #hanke-form .label-wrap label.lang-switch-en, p.lang-switch-en, input.btn.lang-switch-en { display:none; }

.lang-select { padding-top:5px; font-size:12px; }
a.lang { color:#999999;  }
a.lang.active { color:#000; }

#hanke-form { margin:0 auto; max-width:1000px; padding:20px; }
#hanke-form .form-top { padding-bottom:20px; }
#hanke-form .form-left, #hanke-form .form-right { display:block; float:left; width:65%; box-sizing:border-box; padding-right:20px; }
#hanke-form .form-right { width:35%; padding-right:0px; padding-left:20px; }

@media (max-width:900px) { 
	#hanke-form { padding:20px 0; }
	#hanke-form .form-top { padding-bottom:0px; }
	#hanke-form .form-left, #hanke-form .form-right { float:none; width:100%; padding:0; }
}

#hanke-form label, #hanke-form label span { font-weight:700; font-size:16px; }
#hanke-form label p { font-size:12px; line-height:16px; font-weight:400; margin:20px 0; }

#hanke-form .btn.submit { float:right; margin-right:100px; }
#hanke-form .form-top .select { float:left; margin:0 20px 30px 180px; }

@media (max-width:500px) { #hanke-form select { width:150px;} }

@media (max-width:900px) {
	#hanke-form .btn.submit { float:right; margin-right:0px; }
	#hanke-form .form-top .select { margin:0 0 20px 0; }
}

#hanke-form input[type=text] { display:block; padding:7px 10px; width:100%; border:1px solid #c8c8c8; margin-bottom:30px; color:#000; font-size:13px; line-height:18px; box-sizing:border-box; }
#hanke-form .label-wrap { margin-bottom:20px; }
#hanke-form .label-wrap label { display:block; float:left; width:160px; padding-right:20px; padding-top:5px; }
#hanke-form .label-wrap input[type=text] { width:calc(100% - 180px); float:right; margin:0; }
#hanke-form .label-wrap .textarea-wrap, #hanke-form .label-wrap .input-wrap { display:block; width:calc(100% - 180px); float:right; margin:0; }
#hanke-form .label-wrap .textarea-wrap textarea { height:240px; width:100%; }
#hanke-form .label-wrap:after { content:" "; display:block; clear:both; }

@media (max-width:900px) {
	#hanke-form .label-wrap label { float:none; width:100%; padding-right:0px; padding-top:5px; }
	#hanke-form .label-wrap input[type=text] { width:100%; float:none; margin:0; }
	#hanke-form .label-wrap .textarea-wrap, #hanke-form .label-wrap .input-wrap { width:100%; float:none; margin:0; }
}

#hanke-form .check-wrap { padding-left:20px; }
#hanke-form .check-wrap label { font-size:14px; font-weight:400; display:inline-block; padding-left:5px; margin-bottom:2px; cursor:pointer; }

.field-image { border:2px solid #fff; cursor:pointer; display:block; float:left; width:100px; height:auto; }
img.field-image { display:none; }
.field-image.custom { height:50px; padding-top:25px; line-height:25px; text-align:center; background-color:#EBEBEB; }
.field-image:hover { border:2px solid #ddd; }
.field-image.selected { border:2px solid #000; }

#custom-image { padding-top:20px; }
#custom-image img { display:block; float:left; padding:2px; }
#custom-image #image-file { display:block; float:left; padding:30px 10px 10px 40px; }

select[name=main-field] option:disabled {
    display:none;
}

/* TAGS */

.tag-container { background:#F1F1F1; padding:25px 20px 20px; margin:20px 0; }
.info .tag-container { background:#e1e1e1; padding:10px 10px 5px 10px; margin:0; }
.tag-edit { display:inline; }
.tag { display:inline-block; padding:5px 5px 5px 10px; border-radius:3px; margin:0 5px 5px 0; background:#fff; color:#8A8A8A; }
.info .tag { color:#000; padding:5px 10px 5px 10px; }
.tag i { cursor:pointer; }
a.new-tag { display:inline-block; padding:5px 20px 5px 5px; border-radius:3px; margin:0 5px 5px 0; background:#E1E1E1; color:#8A8A8A; }

/* POPUP */

title.featherlight-inner { display:none!important; }
#popup-content { max-width:600px; max-height:500px; }
#popup-content ul {margin-left: 20px;}
#popup-content ul li {margin-bottom: 10px;}
	
/* OTHERS */

.clearer { clear:both; }

.ui-widget { font-family: 'Lato', sans-serif!important; z-index: 10!important; }
.ui-datepicker, .ui-autocomplete, .ui-tooltip { font-size:85%; font-family: 'Lato', sans-serif!important; }
.ui-dialog.ui-widget input.text { width: 100%; box-sizing: border-box; font-size: 16px; font-weight: 400; height: 32px; padding: 0 5px; margin-top: 5px; font-family: 'Lato', sans-serif!important; }

.ui-widget-shadow {
	-webkit-box-shadow: -4px -4px 4px #aaa;
	box-shadow: -4px -4px 4px #aaa;
}

.ui-tooltip { background:#000; color:#fff; border-color:#000; -webkit-box-shadow: none; box-shadow: none; }