.mobile-only { display: none; }
.only-responsive,
.only-responsive-inline,
.only-responsive-tablerow { display: none; }

/*****************************************************************
Emoikkunan ylläpitoelementit. 
Linkattu myös ylläpidon popup-ikkunoiden headiin. Esimerkiksi
yläpalkin tyyliluokat ovat käytössä myös popup-headissa.

Huom! Muutokset myös cui/styles_print_common.css:ään!

MP101008: styles_updateform-mukaan, jos emoikkunassa käytetään
admin-tallennuslomakkeen input-makroja.
HW300719: Huom! @import määrityksen tulee olla dokumentin alussa.
******************************************************************/

.mobile-only { display: none; }
.only-responsive,
.only-responsive-inline,
.only-responsive-tablerow { display: none; }

div.foggy { overflow: hidden; }

.admin-linkset,
.admin-link-pup-single {
 background-color:#ffffdd;
 white-space:nowrap;
 border:1px solid #808080;
 padding:4px;
 padding-bottom:2px;
 font-size: 9pt;
 font-weight:normal;
 -moz-box-shadow: 2px 2px 5px  #cccccc;
 -webkit-box-shadow: 2px 2px 5px  #cccccc;
 box-shadow: 2px 2px 5px  #cccccc;
 /* For IE 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#aaaaaa')";
 /* For IE 5.5 - 7 */
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#aaaaaa');
 display: block;
}

.admin-link-pup-single {
 padding: 1px 7px 1px 6px;
 display: inline-flex;
 margin-right: 5px;
 margin-bottom: 15px;
}

.admin-link-pup-single .material-icons {
 vertical-align: middle;
 margin-bottom: 3px; 
 margin-right: 5px;
}

img.admin-icon {
 margin:0 0 3px 0; 
 vertical-align:middle;
}

.admin-linkset a, a.admin, a.admin:visited,
.admin-link-like,
.box-tr, .box-info, .box-att,
.box-tr a, .box-info a, .box-att a,
.box-tr a:visited, .box-info a:visited, .box-att a:visited {
 color:black !important;
 font-size:9pt;
 font-family: verdana, arial, helvetica, Sans-serif; 
 text-decoration:none;
}

.box-tr a, .box-info a, .box-att a,
.box-tr a:visited, .box-info a:visited, .box-att a:visited {
 text-decoration:underline !important;
}


/*****************************************************************
MP030608: Yleiskäyttöinen laatikko, aikasemmin "kehys" ja "huomio".
tr = transparent, ei taustaväriä
info = harmaa laatikko
att = attention (keltainen laatikko)
Käytössä sekä emoikkunassa että popupissa.

MP211008: Lisäsin tr-boxiin valkoisen taustavärin, se on siis
admin-poppareissa edelleen "läpinäkyvä", kun siellä taustaväri on
valkoinen. Emossa sitä ei ole käytettykään, vaan siellä on käytössä
(tätä kirjoittaessa) -att -luokka.
Muutos tuli tarpeeseen lomake-editorin input_updateform.inc:ssä
kenttätyyppien wysiwyg-valintaan, joka näytetään keltaisen
divin päällä.
Lisäsin samalla kaikkiin boxeihin mustan tekstivärin, niin ei
teeman väriasetukset tee vaikutusta.

MP061108: Box-luokkien värit ja fontit ylimäritellään styles_admin.css:ssä.

Nimesin hiukan laatikoita uusiksi, kun adminin taustaväri ei olekaan
enää valkoinen, vaan sisältö ympyröidään box-luokalla (aiemmin box-att).
Eli aiemmin box-tr oli valkoipohjainen, mutta nyt se ei tietysti enää
ole läpinäkyvä, kun adminin tausta on harmaa.

Lisäsin adminin headissa olevalle wrapperille oman luokan. Koska
templaateissa käytetään suoraan näitä luokkia, niin on parempi, että
se on omansa -> jos tulee joskus muuteltua leiskaa, niin saa muutettua
headinb wrapperia riippumattomana templaattien laatikoista.

box-admin-wrapper > admin-css
******************************************************************/

.box-tr {
 border:1px solid #808080;
 padding:6px;
 color:black;
}

.box-info {
 border:1px solid #808080;
 background-color:white;
 padding:6px;
 color:black;
}

.box-att {
 border:1px solid #808080;
 background-color:#ffffdd;
 padding:6px;
 color:black;
 -moz-box-shadow: 2px 2px 5px  #cccccc;
 -webkit-box-shadow: 2px 2px 5px  #cccccc;
 box-shadow: 2px 2px 5px  #cccccc;
 /* For IE 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#aaaaaa')";
 /* For IE 5.5 - 7 */
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#aaaaaa');
}

.box-tr.small, .box-info.small, .box-att.small,
.box-tr.small a, .box-info.small a, .box-att.small a,
.box-tr.small a:visited, .box-info.small a:visited, .box-att.small a:visited {
 font-size:8pt; 
 line-height: 200%;
}

.shadow {
 -moz-box-shadow: 2px 2px 5px  #cccccc;
 -webkit-box-shadow: 2px 2px 5px  #cccccc;
 box-shadow: 2px 2px 5px  #cccccc;
 /* For IE 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#aaaaaa')";
 /* For IE 5.5 - 7 */
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#aaaaaa');
}

/*****************************************************************
MP030608: Ylläpitopalkki (emoikkunan toolbar ja yp-popupin head)
toolbar-thememenu* -> yläpalkin teemalinkkivalikko
MP231008: Samoja taustoja ja värejä käytössä myös login/logout!
******************************************************************/

div.toolbarWrapper {
 width:100%;
 position:fixed;
 z-index:200000;
 text-align:right;
 top:-46px;
 left:0px; 
 line-height: 1;
}

div.toolbarWrapper.visible {
 top:0px;
 left:0px;
}

table.toolbarContainer {
 width:100%;
 height:44px;
 font-family: verdana, arial, helvetica, Sans-serif; 
 border-top: 1px solid #808080;
/*  border-top:3px solid #efefef; //#246cb4; //#1062B1; */
}

/*modal layout -> admin-head-inc */

table.toolbarContainer.modal {
 border-top:0;
 margin-top:-6px;
}

/* Sama taustakuva -> style_thickbox_admin.css */

td.toolbarData {
 height:44px;
 background:#efefef left bottom repeat-x url(/common_ui/embed_ui/img/toolbar/bg.gif);
 color:black;
}

td.toolbarData.left {
 text-align:left;
 /* padding-top: 2px; */
 /* padding-bottom: 2px; */
 padding-left: 10px;
}

td.toolbarData.right {
 text-align:right;
 padding-right: 10px;
}

div#toolbarButtonWrap {
 position:absolute;
 top:45px;
 right:20px;
}

div#toolbarButton {
 width:45px;
 height:21px;
 cursor:pointer;
 background:transparent top left no-repeat url(/common_ui/embed_ui/img/toolbar/show_hor.gif);
}

div#toolbarButton.hide {
 background-image:url(/common_ui/embed_ui/img/toolbar/hide_hor.gif);
}

td.toolbarItem {
 text-align: center;
 padding: 2px 10px;
 text-transform: uppercase;
 white-space: nowrap;
 border-top: 1px solid transparent;
 border-bottom: 1px solid transparent;
 box-sizing: border-box;
}

td.toolbarItemSmall.link { height: 35px; }

td.toolbarItemSmall {
 text-align: center;
 padding: 2px 10px;
 text-transform: uppercase;
 white-space: nowrap;
 border-top: 1px solid transparent;
 border-bottom: 1px solid transparent;
}

td.toolbarItemSmall div#passwd_fields {
 white-space: normal;
}

td.toolbarItemSmall div#passwd_fields td {
 padding-right: 6px !important;
}

td.toolbarItem,
td.toolbarItem a,
td.toolbarItem a:visited,
td.toolbarItemSmall,
td.toolbarItemSmall a,
td.toolbarItemSmall a:visited {
 font-size: 10px;
 outline: none;
 border:1px solid transparent;
}

td.toolbarItem:hover {
 background-color: #f1f1f1;
 text-decoration: none;
 border: 1px solid #bbbbbb;
}

td.toolbarItemSmall.link:hover {
 background-color: #f1f1f1;
 text-decoration: none;
 border-top: 1px solid #bbbbbb;
 border-bottom: 1px solid #bbbbbb;
}

td.toolbarItem a:hover,
td.toolbarItemSmall a:hover { text-decoration: none; }

td.toolbarItem.left,
td.toolbarItemSmall.left { border-right: 1px solid #f1f1f1; }

td.toolbarItem.mid,
td.toolbarItemSmall.mid {
 border-left: 1px solid #bbbbbb;
 border-right: 1px solid #f1f1f1;
}

td.toolbarItemSmall.right { border-left: 1px solid #bbbbbb; }

td.toolbarItem.right {
 border-left: 1px solid #bbbbbb;
 border-right: 1px solid transparent;
 width: 90px;
}

table.toolbar-dropmenu-wrapper,
div.toolbar-dropmenu-wrapper-passwd {
 position: absolute;
 left:-10px;
 border-bottom:1px solid #808080;
 background-color:#f1f1f1;
 text-align:left;
}

table.toolbar-dropmenu-wrapper {
 top: 37px;
 z-index:10;
}

div.toolbar-dropmenu-wrapper-passwd div#passwd_changed { display: none; }

div.toolbar-dropmenu-wrapper-passwd {
 z-index:5000 !important;
 top: 45px;
 left: 10px;
 width: 390px;
 border-left:1px solid #808080;
 border-right:1px solid #808080;
 border-bottom:1px solid #808080;
 padding:10px;
 background-color:#f1f1f1;
 text-transform: none;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 12px;
 color: black;
 white-space:normal;
 position: fixed;
}

div.toolbar-dropmenu-wrapper-passwd.fbinfo {
 display:none;
 z-index:5000;
 padding:0;
 width:450px;
}

div.toolbar-dropmenu-wrapper-passwd.fbinfo .fbinfo-title {
 background: #F1F1F1;
 text-transform: uppercase;
 font-size: 10px;
 color:#333333; 
 padding: 10px 10px 0 10px;
}

div.toolbar-dropmenu-wrapper-passwd.fbinfo .fbinfo-content {
 padding: 10px;
}

div.toolbar-dropmenu-wrapper-passwd.fbinfo .fbinfo-content table {
 margin-bottom: 10px;
}

div.toolbar-dropmenu-wrapper-passwd.fbinfo .fbinfo-content table td.fbuser-info {
 line-height: 17px;
 padding-left: 10px;
 color: #333333;
}

div.toolbar-dropmenu-wrapper-passwd.fbinfo .fbinfo-content table td.fbuser-info a.fbdata-name {
 color: #3B5998; 
 text-decoration: none;
 font-size:14px;
 font-weight: bold;
}

div.toolbar-dropmenu-wrapper-passwd .passwdTitleWrap { margin-bottom:10px; }

div.toolbar-dropmenu-wrapper-passwd .passwdTitle {
 float:left;
 width:150px;
 font-size: 10px;
}

td.toolbar-dropmenu-data {
 min-width: 140px;
 border:1px solid #808080;
 padding:5px;
 background-color:#f1f1f1;
 text-transform: none;
 line-height: 16px;
}

td.toolbar-dropmenu-data:hover { background-color:#e4e4e4; }

table#usermenu td.toolbar-dropmenu-data {
 min-width: 195px;
}

td#user_td { position: relative; }

td#user_td img#user_settings_toggler {
 position: absolute;
 top: 0;
 right: 0;
 width: 12px;
 height: 12px;
 cursor: pointer;
}

div#user_settings {
 position: absolute;
 left:-10px;
 border:1px solid #808080;
 background-color:#f1f1f1;
 text-align:left;
 display: none;
 top: 40px;
 padding: 10px;
}

div#user_settings img { margin-right: 5px; }
div#user_settings span#remove_fb:hover { text-decoration: underline; }

.modal_fb_progress {
 position: fixed;
 background-color: #fff;
 display: none;
 width: 420px;
 padding: 15px;
 text-align: center;
 border: 1px solid #333;
 opacity: 0.9;
 max-width: 90% !important;
 left: 50%;
 top: 120px;
 margin-left: -210px;
}

#tiptip_holder { z-index: 1000000; }

/* Yläpalkin salasanan vaihdon kentät */

div.toolbar-dropmenu-wrapper-passwd .passwdTitleWrap input[type="password"] {
 padding: initial;
 margin-top: 0;
 padding: 1px;
 font-size: initial;
 border: 1px solid #808080;
 box-sizing: initial;
}

div.toolbar-dropmenu-wrapper-passwd .passwdTitleWrap input[type="password"]:focus {
 -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
 -moz-box-shadow:    0px 0px 0px 0px rgba(0, 0, 0, 0);
 box-shadow:         0px 0px 0px 0px rgba(0, 0, 0, 0);
 border: 1px solid #000000;
 margin-top: 0;
}

/* Yläpalkin lomakepainikkeet (salasanan vaihto) */

.button_admin {
 padding-top: 1px;
 padding-bottom: 1px;
 background:#f1f1f1; 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#cccccc');
 background: -webkit-gradient(linear, center center, center bottom, from(#f1f1f1), color-stop(50%,f1f1f1), to(#cccccc));
 background: -moz-linear-gradient(90deg, #cccccc, #f1f1f1 55%, #f1f1f1);
 border:1px solid #808080; 
 -moz-border-radius: 3px;
 border-radius: 3px;
 cursor:pointer;
 color:black;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 11px;
}

.button_admin:hover {
 background:#70a1d0; 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e7f3ff', endColorstr='#b7dcff');
 background: -webkit-gradient(linear, center center, center bottom, from(#e7f3ff), color-stop(50%,e7f3ff), to(#b7dcff));
 background: -moz-linear-gradient(90deg, #b7dcff, #e7f3ff 55%, #e7f3ff);
 border:1px solid #4f8ac3; 
 text-decoration:none;
 color:#0257a4; 
}


/* Develin debug-infolaatikko, toolbar.inc */

div#debugInfo {
 display:none;
 position:fixed;
 top:47px;
 left:15px;
 margin:0;
 min-width:220px;
 padding:10px;
 z-index:1000;
 line-height:140%;
}


/* Toolbarin kalenteri */

input#toolbar_cal {
 position: absolute;
 margin-left: -130px;
 visibility: hidden;
}

#ui-datepicker-div.toolbar { top: 46px !important; }

#ui-datepicker-div.toolbar .ui-state-default,
#ui-datepicker-div.toolbar .ui-state-hover {
  cursor: default;
  border: 1px solid #d3d3d3;
  background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
  font-weight: normal;
  color: #555555;
  opacity: 1;
}

#ui-datepicker-div.toolbar .ui-state-highlight { background-color: #bbb; }

#ui-datepicker-div.toolbar .ui-priority-primary, 
#ui-datepicker-div.toolbar .ui-widget-content .ui-priority-primary, 
#ui-datepicker-div.toolbar .ui-widget-header .ui-priority-primary { 
 font-weight: normal; 
}

#ui-datepicker-div.toolbar .ui-datepicker-current { width: 1px; display: none; }
#ui-datepicker-div.toolbar .ui-datepicker-close { width: 98% !important; }


/* Ohjeartikkeli-laatikko, toolbar.inc */

div#helpTexts {
 text-align: left;
 display: none;
 position: fixed;
 top: 60px;
 right: 0;
 margin: 0;
 width: 450px;
 min-height: 100px;
 max-height: 85%;
 padding: 0;
 z-index: 300000;
 line-height: 140%;
 background: #e4e4e4;
 overflow: auto;
 overflow-x: hidden;
 border-top: 0;
}

div#helptexts_close {
 position: fixed;
 display: none;
 z-index: 300100;
 width: 450px;
 height: 20px;
 right: 0;
 top: 47px;
 background: #e4e4e4;
 border-left: 1px solid #808080;
 border-right: 1px solid #808080;
 border-top: 1px solid #808080;
}

div#helptexts_close img {
 margin-top: 3px;
 margin-right: 3px;
 float: right;
}

div#quickHelp {
 text-align: left;
 display: block;
 position: absolute;
 top: 150px;
 left: 50%;
 margin-left: -225px;
 width: 450px;
 z-index: 1000;
 line-height: 140%;
 border-top: 3px solid #059;
 border-left: 1px solid #808080;
 border-right: 1px solid #808080;
 background: #eaeaea left bottom repeat-x url(/common_ui/embed_ui/img/toolbar/bg.gif);
}

div#quickHelp a,
div#quickHelp a:visited,
div#quickHelp p {
  font-family: verdana,arial,helvetica,Sans-serif;
  font-size: 9pt;
}

div.helptext_group {
 border-bottom: 1px solid #cccccc !important;
 background-color: #e4e4e4;
 padding: 0;
}

div.helptext_group_title {
 background-color: #e4e4e4;
 padding: 10px;
}

div.helptext_group a.groupLink {
 font-size: 90%;
 text-decoration: none !important;
 outline: 0;
 border: 0;
 text-transform: uppercase;
}

div.helptext_group div.groupCont { display: none; }

div.helptext_group div.articleLink { 
 margin: 0 !important;
 padding: 7px 10px 7px 25px; 
 border-top: 1px dashed #cccccc;
}

div.helptext_group div.articleLink a { text-decoration: none !important; }

div.helptext_group div.articleLink a,
div.helptext_group div.articleLink a:visited {
 color: #059 !important;
}

div.helptext_group div.articleLink a:hover { text-decoration: underline !important; }

div.helptext_group div.articleCont {
 display: none;
 margin: 0 10px 0 25px;
}

div#quickhelp_content div.helptext_group div.articleCont { margin: 0 10px 0 10px; }

div#quickhelp_content div.helptext_group div.articleLink { padding: 7px 10px 7px 10px; }


/*************** Passiiviset/julkaisemattomat tietueet (esim. kpalsta + sivulista) *******************/

/* MP270907: IE7 vaatii läpinäkyvälle elementille height tai width -määrityksen
-> selvitän myöhemmin */

.passive-data,.passiivinen {
 filter:alpha(opacity=50);
 -moz-opacity:.50;
 opacity:.50;
}


a.addthis_counter, a.addthis_counter a { color: #000 !important; }


/*****************************************************************
MP130608: Teeman esikatselusivun maskaus 
******************************************************************/

div#theme-preview-mask {
 width:100%;
 height:100%;
 position:absolute;
 top:0;
 left:0;
 z-index:50;
 background-color:white;
 filter:alpha(opacity=0);
 -moz-opacity:.0;
 opacity:.0;
}


/*****************************************************************
MP130608: Teemaeditorin (iframen) asemointi esikatselusivulla.
Itse teemaeditorin luokat -> style_admin.css -> te* -luokat.
******************************************************************/

div.themebarWrapper {
 width:651px;
 position:absolute;
 top:55px;
 left:-630px;
 height:88%;
 z-index:5000;
}

div.themebarWrapper.visible { left:0px; }


/*rt#190*/

.jqToggle { cursor:pointer; }


iframe.themebarContainer {
 border:0;
 height:100%;
 width:628px;
 border:0 solid #808080;
 border-width:0 2px 2px 0;
 overflow:auto;
 float:left;
 background-color: #ffffff;
}

td#themebarButtonWrap {
 vertical-align:top;
 width:21px;
 padding-top:12px;
}

div#themebarButton {
 width:21px;
 height:45px;
 cursor:pointer;
 background:transparent top left no-repeat url(/common_ui/embed_ui/img/toolbar/show_ver.gif);
}

div#themebarButton.hide { background-image:url(/common_ui/embed_ui/img/toolbar/hide_ver.gif); }

body.body-teeman-muokkaus .jPicker.Container {
 position: fixed !important;
 top: 10px !important;
 left: 35px !important;
}

/*****************************************************************
TO291010: Tooltipin muotoilut.
******************************************************************/
.toolTip {
    cursor: help; 
    position: relative;
}
 
.toolTipWrapper {
    width: auto;
    min-width: 250px;
    position: absolute;
    top: 10px;
    display: none;
    color: #FFF;
    font-weight: normal;
    border: 1px solid #888888;
    -moz-box-shadow: 0 0 10px #000;
    -webkit-box-shadow: 0 0 10px #000;
    z-index: 9999;

}

.toolTipContent {
    font-size: 12px; 
    margin: 2px;
    padding: 5px 10px;
    background-color: #000000;
    border: 1px solid #000000;
    color: white;
    opacity: .8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    text-align: left;
}



/*****************************************************************
TO091110: jQueryn Tools-tooltipin muotoilut.
******************************************************************/
.jqTip:hover,
.jqTipLayout:hover {
    cursor: help;
}

.jqTipLayout {
    background-color: #ffffff;
    padding: 10px;
    width: auto;
    display: none;
    border: 1px solid #888888;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px #888;
    background-color: white;
    color: black;
    opacity: .9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    z-index: 99999;
}


/*****************************************************************
TO28082015: Tooltipsterin oletusmuotoilu
******************************************************************/

.tooltipster-netland-theme {
border-radius: 5px; 
border: 1px solid #aaaaaa;
box-shadow: 2px 2px 2px 0 #cccccc;
background: #ffffff;
color: #000000;
margin: 10px;
}
/* Use this next selector to style things like font-size and line-height: */
.tooltipster-netland-theme .tooltipster-content {
font-family: Arial, sans-serif;
font-size: 13px;
line-height: 1.2em;
padding: 15px;
}

/*****************************************************************
TO030212: koko sivun kokoinen modaali
******************************************************************/
#pagemask-white {
 display: none;
 position: fixed;
 left: 0px;
 top: 45px;
 width: 100%;
 height: 100%;
 z-index: 9000;
 background-color: #ffffff;
 opacity:0.7;
 filter:alpha(opacity=70);
}

#pagemask-black {
 display: none;
 position: fixed;
 left: 0px;
 top: 45px;
 width: 100%;
 height: 100%;
 z-index: 12000;
 background-color: #000000;
 opacity:0.7;
 filter:alpha(opacity=70);
}


/*****************************************************************
TO27092012: autocomplete-muotoilut
HW22112016: lisätty .ui-autocomplete -alkuisia tyylejä
******************************************************************/
.autocomplete_input {
 outline: none;
}

.autocomplete-results ul.ui-menu,
.ui_autocomplete-results ul.ui-menu {
 border: 1px solid #c8c8c8;
 width: auto !important;
 text-align: left;
 z-index: 140 !important;
}

.autocomplete-results ul.ui-menu,
.autocomplete-results ul.ui-menu li.ui-menu-item,
.ui_autocomplete-results ul.ui-menu,
.ui_autocomplete-results ul.ui-menu li.ui-menu-item,
.ui-autocomplete li.ui-menu-item {
 background: #ffffff;
 font-size: 100%;
}

.autocomplete-results ul.ui-menu li.ui-menu-item a,
.ui_autocomplete-results ul.ui-menu li.ui-menu-item a,
.ui-autocomplete li.ui-menu-item a {
 border: 1px solid transparent;
}

.autocomplete-results ul.ui-menu li.ui-menu-item a:hover,
.ui_autocomplete-results ul.ui-menu li.ui-menu-item a:hover,
.ui-autocomplete li.ui-menu-item a:hover {
 border: 1px solid transparent;
}

.autocomplete-results ul.ui-menu .ui-menu-item:hover,
.ui_autocomplete-results ul.ui-menu .ui-menu-item:hover {
 background: #aaaaaa;
 cursor: pointer;
}

.autocomplete-results ul.ui-menu .ui-menu-item a,
.ui_autocomplete-results ul.ui-menu .ui-menu-item a {
 color: #666666;
}

.autocomplete-results ul.ui-menu .ui-menu-item a b,
.ui_autocomplete-results ul.ui-menu .ui-menu-item a b,
.autocomplete-results ul.ui-menu .ui-menu-item a strong,
.ui_autocomplete-results ul.ui-menu .ui-menu-item a strong {
 color: #222222;
}

.autocomplete-results ul.ui-menu .ui-menu-item a.ui-state-hover,
.autocomplete-results ul.ui-menu .ui-menu-item a.ui-state-active,
.ui_autocomplete-results ul.ui-menu .ui-menu-item a.ui-state-hover,
.ui_autocomplete-results ul.ui-menu .ui-menu-item a.ui-state-active,
.ui-autocomplete .ui-menu-item a.ui-state-hover,
.ui-autocomplete .ui-menu-item a.ui-state-active {
 font-weight: normal;
 margin: 0;
 color: #000000;
}

.ui-autocomplete a.ui-state-hover,
.ui-autocomplete .ui-menu-item a.ui-state-active {
 border: 0;
}

.ui-autocomplete-loading {
  background-image: url('/common_ui/embed_ui/img/loader/indicator.gif');
  background-position: right 5px center;
  background-repeat: no-repeat;
}

.autocomplete-results .ac-no-results,
.ui_autocomplete-results .ac-no-results {
 display: none;
 color: black;
 border: 1px solid #C8C8C8 !important;
 background-color: white;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 border-radius: 5px;
 line-height: 1.5;
 padding: 5px;
}

.ac-search-help,
.autocomplete-no-results {
 display: none;
 margin-right: 4px;
 left: 0;
 float: right;
 text-align: left;
 padding: 2px 5px;
 color: black;
 border: 1px solid #C8C8C8;
 width: 200px;
 background-color: white;
 line-height: 1.5;
 position: absolute;
 z-index: 100000;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 border-radius: 5px;
}

.ac-search-help p {
 margin-top: 0;
}

.ui-datepicker-trigger { 
 margin-top: 7px; 
 cursor: pointer;
}

.toolbarContainer .ui-datepicker-trigger { margin-top: 0; }


/*****************************************************************
HW131113: lomakkeiden tyhjennä-rasti
******************************************************************/
img.clearvalue {
 cursor: pointer;
 position: absolute;
 top: 3px;
 right: 5px;
 display: block;
}

/*****************************************************************
TO20150513: Jos Flexsliderissa vain yksi kuva, niin näytetään se.
******************************************************************/
div.flexslider ul.slides.onlyone li { display: block; }


div#search-wrap input { outline: none; }

/*****************************************************************
TO20160531: table2div - taulukoiden muuntaminen diveiksi
******************************************************************/
div.resp-table {  }

div.resp-table div.resp-item { 
 display: table; 
 width: 100%;
 padding: 20px 10px;
}

div.resp-table div.resp-item.even { background-color: #f4f4f4; }

div.resp-table div.resp-item div.resp-row { display: table-row; }

div.resp-table div.resp-item div.resp-col { 
 display: table-cell; 
 padding-top: 3px;
 padding-bottom: 3px;
 vertical-align: top;
}

div.resp-table div.resp-item div.resp-col.resp-col-rowed { 
 display: block; 
 padding-top:0;
 padding-bottom:0;
}

div.resp-table div.resp-item div.resp-col.resp-col-rowed.col-value { margin-bottom: 20px; }
 
div.resp-table div.resp-item div.col-title { 
 width: 1%;
 text-transform: uppercase;
 padding-right: 40px;
 white-space: nowrap;
}

.vis-rolling-mode-btn { 
 background-image: url(/common_ui/embed_ui/img/icons_google/action/ic_home_white_36dp.png);
 background-repeat: no-repeat;
 background-position: 2px 2px;
 z-index: 10;
}

.vis-rolling-mode-btn:before { content: initial; }

.vis-item .vis-item-content { 
 white-space: normal; 
}

.vis-item.vis-readonly { cursor: pointer; }

div.timeline-item div.maximized { display: none; }

div.timeline-item h2 { margin: 0; }

div.timeline-item div.ingressi { max-width: 300px; }

div#timeline-zoom div {
 width: 20px;
 height: 20px;
 background-color: #ffffff;
 background-repeat: no-repeat;
 background-position: center center;
 border: 1px solid #cccccc;
 cursor: pointer;
 border-radius: 2px;
 box-shadow: 0 1px 4px rgba(0,0,0,0.3);
 position: absolute;
 right:5px;
 z-index: 999;
 opacity: 0.5;
}

div#timeline-zoom div#zoomIn { 
 bottom: 24px;
 background-image: url(/common_ui/embed_ui/img/icons_google/content/ic_add_grey600_18dp.png); 
}

div#timeline-zoom div#zoomOut {
 bottom: 5px;
 background-image: url(/common_ui/embed_ui/img/icons_google/content/ic_remove_grey600_18dp.png);
}

div#timeline-moveLeft {
 opacity: 0.5;
 border-radius: 0 8px 8px 0;
 width: 30px;
 height: 60px;
 background-color: #ffffff;
 background-repeat: no-repeat;
 background-position: center center;
 border: 1px solid #cccccc;
 cursor: pointer;
 position: absolute;
 left: 0;
 top: 50%;
 margin-top: -30px;
 z-index: 999;
 background-image: url(/common_ui/embed_ui/img/icons_google/navigation/ic_chevron_left_grey600_36dp.png);
}

div#timeline-moveLeft:hover {
 background-image: url(/common_ui/embed_ui/img/icons_google/navigation/ic_chevron_left_black_36dp.png);
}

div#timeline-moveRight {
 opacity: 0.5;
 border-radius: 8px 0 0 8px;
 width: 30px;
 height: 60px;
 background-color: #ffffff;
 background-repeat: no-repeat;
 background-position: center center;
 border: 1px solid #cccccc;
 cursor: pointer;
 position: absolute;
 right: 0;
 top: 50%;
 margin-top: -30px;
 z-index: 999;
 background-image: url(/common_ui/embed_ui/img/icons_google/navigation/ic_chevron_right_grey600_36dp.png);
}

div#timeline-moveRight:hover {
 background-image: url(/common_ui/embed_ui/img/icons_google/navigation/ic_chevron_right_black_36dp.png);
}

div#visualization:hover div#timeline-moveRight,
div#visualization:hover div#timeline-moveLeft,
div#visualization:hover div#zoomIn,
div#visualization:hover div#zoomOut {
 opacity: 1;
}

div#timeline-zoom div#zoomIn:hover {
 background-image: url(/common_ui/embed_ui/img/icons_google/content/ic_add_black_18dp.png) !important; 
}

div#timeline-zoom div#zoomOut:hover {
 background-image: url(/common_ui/embed_ui/img/icons_google/content/ic_remove_black_18dp.png) !important; 
}

div#timeline-zoom div:hover,
div#timeline-moveLeft:hover,
div#timeline-moveRight:hover {
 border: 1px solid #999999;
 background-color: #f0f0f0;
}

div.devel_basic_pagepath_ { display: none !important; }

div#devel_basic_pagepath.hidepagepath {
 opacity: 0 !important;
}

div#devel_basic_pagepath.hidepagepath:hover {
 border-top: 1px dotted #cacdd1;
 border-left: 1px dotted #cacdd1;
 opacity: 1;
 color: transparent;
 background: transparent;
}

div.devel_basic_pagepath_1,
div.devel_basic_pagepath_11 {
 cursor: default;
 position: fixed;
 right: 0;
 bottom: 0;
 background: #f1f3f4;
 color: #5f6368;
 padding: 6px;
 z-index: 10001;
 font-family: system-ui;
 font-size: 12px;
 border-top: 1px solid #cacdd1;
 border-left: 1px solid #cacdd1;
 line-height: 1;
}

#develribbon {
 display: none;
 position: fixed;
 left: -10px; 
 top: -10px;
 z-index: 99999999;
 overflow: hidden;
 width: 280px; 
 height: 280px;
 text-align: right;
}

#develribbon span {
 font-size: 25px;
 font-weight: bold;
 color: #FFF;
 text-transform: uppercase;
 text-align: center;
 line-height: 40px;
 transform: rotate(-45deg);
 -webkit-transform: rotate(-45deg);
 width: 375px;
 display: block;
 background: #79A70A;
 background: linear-gradient(#9BC90D 0%, #79A70A 100%);
 box-shadow: 0 2px 24px -2px rgba(0, 0, 0, 1);
 position: absolute;
 top: 99px;
 left: -67px;
}

#develribbon span::before {
 content: "";
 position: absolute; left: 0px; top: 100%;
 z-index: -1;
 border-left: 3px solid #79A70A;
 border-right: 3px solid transparent;
 border-bottom: 3px solid transparent;
 border-top: 3px solid #79A70A;
}

#develribbon span::after {
 content: "";
 position: absolute; right: 0px; top: 100%;
 z-index: -1;
 border-left: 3px solid transparent;
 border-right: 3px solid #79A70A;
 border-bottom: 3px solid transparent;
 border-top: 3px solid #79A70A;
}


/* select.makediv muotoilut, kts embed_ui.js "Muutetaan select divirakenteeksi" */

div.makediv-opt-sel-cont { 
 position: relative; 
 display: inline-block;
}

div.makediv-opt-sel-wrapper { 
 height: 100%; 
 min-width: fit-content;
}

div.makediv-opt-sel-wrapper.disabled div.makediv-sel-opt,
div.makediv-opt-sel-wrapper.disabled div.makediv-opts {
  opacity: 0.5; 
  cursor: default;
}

div.makediv-sel-opt { 
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  height: 100%;
  width: fit-content;
  min-width: 200px;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 7px 15px;
  padding-right: 40px !important;
  text-align: left;
  white-space: nowrap;
  background: #ffffff no-repeat right center url(/common_ui/embed_ui/img/icons_google/navigation/ic_arrow_drop_down_black_36dp.png);
  border: 1px solid #cccccc;
  color: #000;
}

div.makediv-sel-opt.multiple { width: 100%; } 

div.makediv-sel-opt:focus,
div.makediv-sel-opt:active { border: 1px solid #000000; }


div.makediv-sel-opt.opened { 
  background: #ffffff no-repeat right center url(/common_ui/embed_ui/img/icons_google/navigation/ic_arrow_drop_up_black_36dp.png);
  border: 1px solid #000000;
}

div.makediv-opt-search {
 padding: 5px;
 border-left: 1px solid #808080;
 border-right: 1px solid #808080;
 border-top: 1px solid #808080;
 border-bottom: 1px solid #808080;
 display: none;
 position: absolute;
 z-index: 999;
 background-color: #fff;
}

div.makediv-opt-search input { 
 padding: 0 10px 0 30px;
 width: calc( 100% - 40px ); 
}

div.makediv-opt-search div.makediv-opt-search-icon,
div.makediv-opt-search div.makediv-opt-clear-search {
 position: absolute;
 color: #808080;
 line-height: 1em;
 margin-top: -3px;
 top: 13px;
 left: 10px;
}

div.makediv-opt-search div.makediv-opt-clear-search { 
 left: unset;
 right: 10px;
 top: 15px;
 cursor: pointer;
}

div.makediv-opt-search div.makediv-opt-search-icon span.material-icons { 
 font-size: 20px;
}

div.makediv-opt-search input::placeholder { 
 color: #808080;
 font-style: italic;
}

div.makediv-opts-no-results { 
  padding: 7px 30px 7px 15px;
  text-align: left;
}

div.makediv-opts { 
  display: none;
  position: absolute;
  left: 0;
  z-index: 100;
  margin-top: -1px;
  background: #ffffff;
  border: 1px solid #808080;
  overflow: auto;
 -webkit-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -moz-box-sizing: border-box;
  box-sizing: border-box;
}

div.makediv-opts div.makediv-opt {
  color: #000;
  border: 1px solid transparent;
  border-bottom: 1px solid #cccccc;
  padding: 7px 30px 7px 15px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -moz-box-sizing: border-box;
  box-sizing: border-box;
 background-color: #ffffff; 
 position: relative;
}

div.makediv-opts.multiple div.makediv-opt::after {
 font-family: 'Material Icons';
 font-size: 20px;
 position: absolute;
 right: 0px;
 color: #404040;
 background: #ffffff;
 border: 5px solid #ffffff;
 line-height: 1em;
 top: 50%;
 margin-top: -15px;
 content: '\E835';
}

div.makediv-opts.multiple div.makediv-opt.selected::after { 
  background: #e2e2e2;
  border: 5px solid #e2e2e2;
  content: '\E834';
}

div.makediv-opts div.makediv-opt:last-of-type { border-bottom: 0; }

div.makediv-opts div.makediv-opt:hover,
div.makediv-opts div.makediv-opt.selected:hover,
div.makediv-opts div.makediv-opt:focus { border: 1px solid #333; }

div.makediv-opts div.makediv-opt.selected { background: #e2e2e2; }

div.makediv-opt-sel-wrapper:focus div.makediv-sel-opt { 
  border: 1px solid #333;
}

div.makediv-opt-sel-wrapper.focused { 
 outline: auto 1px Highlight;
 outline: auto 1px -webkit-focus-ring-color;
}

div.makediv-opts div.makediv-opt.selected.remove { 
  background-image: url(/common_ui/embed_ui/img/icons_google/content/ic_clear_white_18dp.png);
  background-position: 95.5% center;
  background-position: -webkit-calc(100% - 8px) center; 
  background-position: right 8px center;
  background-repeat: no-repeat;
}

div.makediv-opts div.makediv-opt.disabled { 
  color: #d0d0d0; 
  cursor: default;
}

div.makediv-opts div.makediv-opt.filtered-hide { display: none !important; }

div.makediv-opts div.makediv-opt.filtered-show { display: block !important; }

a.makediv_update_grouplink { 
 display: block; 
 width: fit-content;
}

a.makediv_update_grouplink button { margin-top: -3px; }


/*****************************************************************
Piilotetaan elementti ruudulta, mutta pidetään edelleen saatavilla
ruudunlukijoille (saavutettavuustekijä).
*****************************************************************/
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
