* { margin: 0; padding: 0; }

/* Design tokens siirretty tiedostoon design-tokens.css */

html, body { height: 100%; }

body, table {
	font-size: 8pt;
	font-style: normal;
	font-weight: normal;
	line-height: normal;
	text-decoration: none;
	color: var(--grey-6); /* Gray 6 instead of pure black */
	background-image: none !important;
}
table {
	font-family: var(--font-base);
}
body {
	background-color: var(--grey-98) !important; /* Gray 98 background */
	font-family: var(--font-base);
}

h1, h2, h3, h4, h5, h6 { font-weight: bold; border: 0 none; margin-top: 8pt; margin-bottom: 8pt; }
h1			{ font-size: 14pt; }
h2			{ font-size: 12pt; }
h3			{ font-size: 10pt; }
h4			{ font-size: 8pt; }
h5			{ font-size: 7pt; margin-top: 7pt; margin-bottom: 7pt; }
h6			{ font-size: 6pt; margin-top: 6pt; margin-bottom: 6pt; }
h6.kello	{ font-size: 11pt; margin-top: 1pt; margin-bottom: 0; margin-left: 14pt; color: #FFF; }

p			{ margin-top: 1em; margin-bottom: 1em; }
p.kkortti	{ margin-top: 0em; margin-bottom: 0em; }

ul, ol		{ margin-left: 0; padding-left: 24px; }

a			{ text-decoration: none; color: #004E92; }
a.oper		{ text-decoration: none; color: #F70; }
a:hover		{ text-decoration: underline; }

/*
 * Formit
 */
fieldset		{ padding: 3px; }
legend			{ border: 2px; color: var(--grey-6); font-weight: bold; }

select, optgroup, option, textarea { font-size: 8pt; font-family: var(--font-base); font-style: normal; font-weight: normal; color: var(--grey-6); margin-left: 0; }
select, textarea{ border: 1px solid #666; background-color: #FFF; outline: none; box-sizing: border-box; }
optgroup		{ font-weight: bold; padding: 0 0 0 1px; }
optgroup option	{ padding: 0 0 0 14px; }
option			{ padding: 0 0 0 1px; }
option:disabled	{ color: #CCC !important; }
td.btn {
	border: none;
	font-family: var(--font-base);
	font-size: 16px;
	font-weight: bold;
	line-height: 24px;
	text-align: center;
	background-color: var(--button-primary-bg);
	color: var(--button-primary-text);
	cursor: pointer;
	border-radius: 3px;
}
input {
	font-family: var(--font-base);
	font-size: 8pt;
	font-style: normal;
	font-weight: normal;
	color: #000;
	margin-left: 0;
	padding-left: 1px;
	outline: none;
	box-sizing: border-box;
}
input:focus		{ background-color: var(--theme-neutral); } /* Muut kuin IE */
input[readonly] { background-color: var(--theme-neutral); }
input[type="text"], input[type="password"], input[type="file"] { border: 1px solid #666; /*padding: .25rem; */ min-height: 16px;}
input[type="checkbox"], input[type="radio"] { border: none 0; margin: 0 3px 0 0; }
input[type="button"], input[type="submit"] {
	background-color: var(--button-primary-bg);
	color: var(--button-primary-text);
	cursor: pointer;
	border-radius: 3px;
	border: 0 !important;
	padding: 0.375rem;
	font-weight: lighter;
}
input[type="button"]:disabled, input[type="submit"]:disabled {
	background-color: #DDD;
	color: rgba(0, 0, 0, .2);
	cursor: default;
}
input[type="button"]:hover, input[type="submit"]:hover {
	background-color: var( --button-primary-hover-bg);
}
input[type="button"]:disabled:hover, input[type="submit"]:disabled:hover {
	background-color: #DDD;
	box-shadow: none;
}
input[type="button"].green, input[type="submit"].green { background-color: #0A0; text-shadow: 0 -1px 1px #060; border-color: #0F0 #060 #060 #0F0; }
input[type="button"].red, input[type="submit"].red { background-color: #C00; text-shadow: 0 -1px 1px #600; border-color: #F00 #600 #600 #F00; }
input[type="button"].light, input[type="submit"].light { background-color: #EEE; border-color: #FFF #AAA #AAA #FFF; color: #666; text-shadow: 0 1px 1px #FFF; }
input[type="button"].strong, input[type="submit"].strong { font-weight: bold; font-size: 15px; line-height: 14px; }
input[type="button"].symbol, input[type="submit"].symbol { font-size: 20px; font-weight: bold; line-height: 15px; padding: 0; margin: 0; color: #000; text-shadow: 0 1px 1px #FFF; }
input[type="button"].float, input[type="submit"].float { background-color: rgba(0, 0, 0, 0); border: none; cursor: pointer; }
input[type="button"].float:active, input[type="submit"].float:active { background-color: rgba(0, 0, 0, 0.2); }
input[type="button"].sym30, input[type="submit"].sym30 { padding: 0; letter-spacing: -10px; width: 20px !important; }
label input[type="checkbox"], label input[type="radio"] { position: relative; bottom: -3px; }

.submit {
	border: 1px solid var(--button-primary-border);
	font-family: var(--font-base);
	font-size: var(--font-size-base);
	font-weight: var(--button-font-weight);
	line-height: 24px;
	text-align: center;
	background-color: var(--button-primary-bg);
	color: var(--button-primary-text);
	cursor: pointer;
	border-radius: var(--button-radius);
	padding: var(--button-padding-md);
	min-width: 80px;
	width: 100%;
	transition: all 0.15s ease-in-out;
}
.submit:hover:not(:disabled) {
	background-color: var(--button-primary-hover-bg);
	box-shadow: var(--button-primary-shadow);
}
.submit:active:not(:disabled) {
	background-color: var(--button-primary-active-bg);
}
.submit:disabled {
	background-color: var(--button-disabled-bg);
	color: var(--button-disabled-text);
	border-color: var(--button-disabled-border);
	cursor: not-allowed;
}

.submit.oper {
	background-color: #FA0;
	color: #000;
}
.submit.oper:disabled {
	background-color: rgba(255, 170, 0, .6);
	color: #444;
}
.submit.oper:disabled:hover {
	background-color: rgba(255, 170, 0, .6);
	color: #444;
}

.dateedit {
	height: 16px;
	width: 85px;
	font-size: 8pt;
	margin-top: 0;
	padding: 0;
	text-indent: 3px;
	background-image: url('/tvv_kuvat/cal2.png');
	background-repeat: no-repeat;
	background-position: 100% 50%;
}
.dateedit:disabled {
	background-image: none;
	background-color: #EEE;
}
.dateIvlContainer {
	display: inline-block;
	white-space: nowrap;
	position: relative;
	bottom: 5px;
}

/*
 * Tablet
 */
table.grid { border-style: solid; border-color: #C0C0C0; border-collapse: separate; border-spacing: 0; }
td.grid { border-style: solid; border-width: 1px; border-color: #FFFFFF #808080 #808080 #FFFFFF; font-size: 7pt; }
tr.header { background-color: var(--table-header-bg); color: var(--text-light); }
tr.sat { background-color: var(--table-weekend-bg); }
tr.sun { background-color: var(--table-weekend-bg); }
tr.week { background-color: var(--theme-neutral); }

th { font-weight: normal; text-align:center; }
tr.nw th, tr.nw td { white-space: nowrap; }
tr.nt th, tr.nt td { font-weight: normal; }

tr.nw th.oper {
	background-color: #FA0;
	color: #000;
}

table.tbc			{ background-color: var(--table-border); border-collapse: separate; border-spacing: 1px; margin-left: auto; margin-right: auto; }
table.tbc caption	{ font-size: 8pt; text-align: left; font-weight: bold; }
table.tbc tr		{ background-color: var(--bg-white); font-weight: normal; }
table.tbc tr.ryhma	{ background-color: var(--sapphire-90); color: var(--text-dark); font-weight: bold; }
table.tbc tr.ryhma2	{ background-color: var(--sapphire-95); color: var(--text-dark); }
table.tbc tr.yht1	{ font-weight: bold; background-color: var(--sapphire-90); }
table.tbc tr.yht2	{ background-color: var(--bg-white); color: #004E92; font-weight: normal; font-style: italic; }
table.tbc tr.yht3	{ background-color: var(--bg-white); color: #004E92; font-weight: bold; font-style: italic; }
table.tbc tr.sat	{ background-color: var(--table-weekend-bg); }
table.tbc tr.sun	{ background-color: var(--table-weekend-bg); }
table.tbc tr.week	{ background-color: var(--theme-neutral); }
table.tbc th		{ text-align:center; font-weight: bold; color: var(--text-light); background-color: var(--table-header-bg); padding:3px 0; }
table.tbc th.oper	{ background-color: var(--table-header-bg2); }
table.tbc th a		{ text-align:center; font-weight: bold; color: var(--text-light); padding:3px; text-decoration: underline;}
table.tbc td		{ padding: 3px; }
table.tbc td.yr		{ padding-top: 0; padding-bottom: 0; height: 24px; }
table.tbc td.login	{ padding-top: 0; padding-bottom: 0; background-image: url('/tvv_kuvat/stock_draw-freeform-line-16.gif'); background-repeat: no-repeat; background-position: center; width: 20px; height: 24px; cursor: pointer; }
table.tbc td.listr	{ padding-top: 0; padding-bottom: 0; background-image: url('/tvv_kuvat/arrowright.gif'); background-repeat: no-repeat; background-position: center; width: 20px; height: 24px; cursor: pointer; }
table.tbc td.listl	{ padding-top: 0; padding-bottom: 0; background-image: url('/tvv_kuvat/arrowleft.gif'); background-repeat: no-repeat; background-position: center; width: 20px; height: 24px; cursor: pointer; }
table.tbc td.info	{ padding-top: 0; padding-bottom: 0; width: 20px; height: 24px; }
table.tbc td.nimi	{ height: 18px; width: 414px; }
table.tbc td.nimip	{ height: 18px; width: 908px; }
table.tbc td.bgc	{ background-color: var(--bg-light-gray); }
table.tbc td.it		{ font-style: italic; padding: 3px; }
table.tbc td.tcd	{ background-color: var(--table-border); padding: 0 3px; }
table.tbc td.tcl	{ background-color: var(--table-border); padding: 0 3px; }
table.tbc td.header	{ font-weight: normal; color: var(--text-light); background-color: var(--table-header-bg); padding: 0 2px; }
table.tbc td.header2{ font-weight: normal; color: var(--grey-6); background-color: var(--table-header-bg4); padding: 0 2px; }
table.tbc td.header3{ font-weight: normal; color: var(--text-light); background-color: var(--table-header-bg3); padding: 0 2px; }

table.editable { border-spacing: 1px; empty-cells: show; width: auto; margin-left: 0; }
table.editable tr td { padding:0; height:16px; }
table.editable tr th { padding:0 3px 0 3px; height:16px; }
table.editable tr.ryhma td { padding: 0 2px; }
table.editable tr.ryhma2 td { padding: 0 3px; }
table.editable .t { border:none; width:100%; margin:0; }
table.editable input { border:none 0; margin:0; padding: 0; } /* padding:auto - kursori inputin keskell� */
table.editable input:focus { background-color: inherit; } /* Ylikirjoitetaan tyovuorovelho.css:n v�ri */
table.editable input[type="text"] { min-height: 16px; }
table.editable input[type="button"]:focus { background-color: var(--input-border-focus); }
table.editable input[type="button"]:disabled { background-color: var(--button-disabled-bg); color: var(--button-disabled-text); cursor: default; }
table.editable input.d { width:100%; margin:0; background: url('/tvv_kuvat/cal2.png') no-repeat 100% 50%; }
table.editable textarea { border:none 0; margin:0; padding: 0; width:100%; height:1.4em; }
table.editable select.s { border:none 0; margin:0; width:100%; max-height:16px; }
table.editable td.c { text-align: center; }
table.editable td.pad { padding-left: 1px; } /* oli 2px. Voi poistaa inputeista */
table.editable td.ni { padding-left: 1px; background-color: var(--theme-neutral); }
table.editable td.ro { background-color: var(--bg-light-gray); }

/* ei pit�isi olla k�yt�ss�: */
table.dlg td { vertical-align: top; padding-left: 3px; }

table.dlgForm { border: 0 none; border-spacing: 0; empty-cells: show; width: auto; margin-left: 0; margin-top: 5px; }
table.dlgForm td { padding-right: 3px; }
table.dlgForm input, table.dlg input { /*padding: 0 0 0 .25rem;*/ min-height: 16px; }
table.dlgForm input.d { background: url('/tvv_kuvat/cal2.png') no-repeat 100% 50%; }

/*
 * Muita
 */

/* lis��/muokkaa nappi td:lle */
div.tdButton, div.button {
	width: auto;
	float: right;
	font-weight: lighter;
	cursor: pointer;
	border: none;
	font-weight: bold;
	text-align: center;
	background-color: var(--theme-brand);
	color: var(--theme-emphasis);
	cursor: pointer;
	border-radius: 3px;
	padding: .125rem;
}
div.tdButton:hover, div.button:hover {
	background-color: var(--grey-90);
	border-color: var(--grey-80);
}

.buttonDisabled { opacity: 0.7; cursor: default !important; }
.displayNone { display: none; }

/* login-sivun tallenna salasana -nappi, pit�� ylikirjoittaa globaalit buttoneita koskevat s��nn�t, rutkasti !important:eja... */
input.genericButton {
	height: 19px !important;
	border-radius: 2px !important;
	border-width: 1px !important;
	border-style: solid !important;
	color: #181818 !important;
	border-color: #4A4A4A !important;
	font-weight: bold !important;
	background-color: #22B0E0 !important;
	box-shadow: 1px 1px #ACACAC !important;
	text-shadow: 1px 1px #BEBEBE !important;
	cursor: pointer !important;
}
input.genericButton:hover {
	border-color: #181818 !important;
	background-color: #32B7E2 !important;
	box-shadow: 1px 1px #585858 !important;
}
input.genericButton.disabled {
	color: #646464 !important;
	border-color: #424242 !important;
	background-color: #1C9BC6 !important;
	text-shadow: 1px 1px #E6E6E6 !important;
	box-shadow: none !important;
}

.font6		{ font-size: 6pt; }
.font8		{ font-size: 8pt; }
.font8B		{ font-size: 8pt; font-weight: bold; }
.font8I		{ font-size: 8pt; font-style: italic; }
.font8BW	{ font-size: 8pt; font-weight: bold; color: #FFF; }
.font10		{ font-size: 10pt; }
.font10B	{ font-size: 10pt; font-weight: bold; }
.font12B	{ font-size: 12pt; font-weight: bold; }
.harmaa		{ color:#808080; }
.sininen	{ color:#9999CC; }
.varoitus	{ margin-bottom: 5px; padding:5px; border: 1px solid #F00; background-color: #FFC; color: #000; font-size: 8pt; display: inline-block; }
.varoitus .otsikko { color: #F00; border-bottom: 1px solid #F00; margin-bottom: 5px; }
.varoitus .teksti { }
.varoitus table th { background-color: #DCDCAC; font-weight: bold; }

#varoitukset { display: inline-block; overflow-x: hidden; white-space: nowrap; }
#varoitukset .varoitus { color: #F00; margin-top: 10px; display: none; }

.arrowBlueNone, .arrowBlueLeft, .arrowBlueRight, .arrowWhite, .arrowLightBlue, .arrowOrange, .arrowBlackLeft, .arrowBlackRight {
	display: inline-block;
	margin: 0;
	padding: 0;
	position: relative;
	top: 0;
}
.arrowBlueLeft, .arrowBlueRight, .arrowWhite, .arrowLightBlue, .arrowOrange, .arrowBlackLeft, .arrowBlackRight {
	background-image: url('/tvv_kuvat/nuolet.gif');
}
.arrowBlueLeft, .arrowBlueRight, .arrowBlueNone, .arrowBlackLeft, .arrowBlackRight {
	width: 16px;
	height: 16px;
}
.arrowWhite, .arrowLightBlue, .arrowOrange {
	width: 10px;
	height: 10px;
}
.arrowBlueLeft		{ background-position: 0 0; }
.arrowBlueRight		{ background-position: -16px 0; }
.arrowWhite			{ background-position: -35px -3px; }
.arrowLightBlue		{ background-position: -51px -3px; }
.arrowOrange		{ background-position: -67px -3px; }
.arrowBlackLeft		{ background-position: -80px 0; }
.arrowBlackRight	{ background-position: -96px 0; }


/*
 * Tiedotteet
 */
.tiedote {
	width: 290px;
	border: 1px solid #DDD;
	padding: 0;
	margin-bottom:10px;
	font-size: 8pt;
	background-color: #FFF;
}
.tiedote td { font-size: 8pt; color: #999; }
.tiedote .title table { border: none; border-spacing: 0; margin: 0; background-color: #DDD; }
.tiedote .title td { padding: 3px; font-weight: bold; }
.tiedote .title .pvm { font-size: 7pt; white-space: nowrap; }
.tiedote .content { padding: 3px; }
.tiedote a { color: #2D5075; text-decoration: none; font-weight: bold; border: 0; }
.tiedote a:hover { text-decoration: underline; }

.uutinen { width: 660px; border: 1px solid #888; background-color: #FFF; color: #000; }
.uutinen td { font-size: 8pt; color: #000; }
.uutinen .title table { border: none; border-spacing: 0; margin: 0; background-color: #B0B8D0; }
.uutinen .title td { padding: 3px; font-weight: bold; }
.uutinen .title .pvm { font-size: 7pt; white-space: nowrap; }


/*
 * Kalenteri
 */
.dpDiv { background-color: #FFF; }
.dpTable { font-family: var(--font-base); font-size: 8pt; text-align: center; color: #505050; background-color: #FFF; border: 1px solid #808080; }
.dpTR {}
.dpTitleTR {}
.dpDayTR {}
.dpTodayButtonTR {}
.dpTD { cursor: pointer; }
.dpDayHighlightTD { background-color: #CCC; border: 1px solid #808080; cursor: pointer; }
.dpTitleTD {}
.dpButtonTD {}
.dpTodayButtonTD {}
.dpDayTD { border: 0 solid #AAA; font-weight: bold; color: #000; }
.dpWeekTD { font-size: 8pt; font-weight: bold; border: 0 solid #AAA; color: #000; }
.dpTitleText { font-size: 8pt; color: #000; font-weight: bold; }
.dpDayHighlight { color: #4060FF; font-weight: bold; }

/*
 * Uusi kalenteri
 */
.ui-datepicker-week-col { text-align: center; font-weight: bold; }

/*
 * ArrangableNodes
 */
.textInput { /* General style for my inputs when they're not highlighted */
	background-color: #FFF;
	border: 1px solid #000;
}

.inputHighlighted { /* Highlighting style */
	background-color: #317082;
	color: #FFF;
	border: 1px solid #000;
}

/* Don't change these options */
#movableNode {
	position: absolute;
}

#arrDestInditcator {
	position: absolute;
	display: none;
	width: 100px;
}
/* End options that shouldn't be changed */

#arrangableNodes, #movableNode ul{
	padding-left: 0;
	margin-left: 0;
	margin-top: 0;
	padding-top: 0;
	width: 300px;
}

#arrangableNodes li, #movableNode li{
	list-style-type: none;
	cursor: default;
	border: 1px solid #999;
	padding: 2px;
	background-color: #FFF;
	margin-top: 1px;
}

/* jQueryn sortable-kikkareen tyylit */
ul#sortable {
	padding: 0;
	margin: 0;
	width: 250px;
}

#sortable li {
	list-style-type: none;
	cursor: grab, default;
	border: 1px solid #999;
	padding: 2px;
	background-color: #FFF;
	margin-top: 1px;
	width: 300px;
}

/*
 * login + vaihdasalasana -sivujen tyylej�
 */div.language-selection-container {
	display: inline-block;
	cursor: pointer;
}

div.padding-right-10 {
	padding-right: 10px;
}

input.language-selection {
	cursor: pointer;
}

img.language-selection-flag {
	box-shadow: 2px 2px 3px #aaaaaa;
}

#divKirjaudu {
	padding: 100px 40px 30px;
	background-color: #FFF;
	background-position: 50% 30px;
	background-repeat: no-repeat;
	box-shadow: 0 0 50px #EEE;
}

#tblKirjaudu {
	border-collapse: separate;
	border-spacing: 15px;
	margin: -15px;
}

#tblKirjaudu tr td {
	font-family: var(--font-base);
	font-size: 16px;
}

#tblKirjaudu tr td:first-child {
	text-align: right;
}

#tblKirjaudu tr td input {
	width: 100%;
	height: 24px;
	border: 1px solid #DDD !important;
	background-color: #F9F5F6 !important;
	font-size: 16px;
	line-height: 24px;
	text-indent: 5px;
}

#btnKirjaudu {
	width: 100%;
	margin-top: 30px;
	padding: 8px;
	border: none;
	font-size: 1rem;
	font-weight: lighter;
	line-height: 24px;
	text-align: center;
	background-color: var(--button-primary-bg);
	color: var(--text-light);
	cursor: pointer;
	border-radius: 3px;
}

#btnKirjaudu:hover {
	background-color: var(--orchid-30);
	box-shadow: none;
}

/* Password preview */

input::-ms-reveal, input::-ms-clear {
	display: none;
}

div.password-preview-container {
	position: relative;
	display: inline-block;
}

div.password-preview-toggle-icon-container {
	position: absolute;
	display: flex;
	top: 0;
	right: 0;
	bottom: 0;
	width: 22px;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

div.password-preview-toggle-icon-eye-outer {
	height: 10px;
	width: 10px;
	border: 1px solid black;
	border-radius: 75% 5% 75% 5%;
	rotate: 45deg;
}

div.password-preview-toggle-icon-eye-inner {
	height: 4px;
	width: 4px;
	border: 1px solid black;
	border-radius: 50%;
	margin: 2px auto 2px auto;
	background-color: rgb(0, 0, 0);
}

div.password-preview-toggle-icon-strike {
	position: absolute;
	top: 0;
	left: 9px;
	background-color: white;
	height: 100%;
	width: 1px;
	border-left: 1px solid black;
	rotate: 45deg;
}

div.error { border: 2px solid #F00; background: #FCC url('/tvv_kuvat/error-bg.png') no-repeat left top; margin: 20px; padding: 12px; border-radius: 12px; width:380px; }
div.error span.title { display: block; text-align: center; margin-bottom: 10px; font-weight:bold; }
.username { height: 16px; width: 180px; cursor:default; background-color: #E6E6E6; background-image: url('/tvv_kuvat/menu/stock_lock.png'); background-repeat: no-repeat; padding: 1px 1px 0 21px; border: 1px solid #8C8C8C; font-weight:normal; color:#000; }
.logininput { height:16px; width:200px; border:1px solid #FC891E !important; padding:1px 1px 0 1px; }
fieldset.loginfieldset { border:1px solid #8C8C8C; border-radius: 2px; }
legend.loginlegend { color:#1E1E1E; margin-left: 10px; }

table.loginbar { width:100%; height:20px; line-height:0; cursor:pointer; }
table.loginbar div.velho { position:relative; height:20px; }
table.loginbar div.outershadow { position:absolute; top:0; right:20px; bottom:0; left:0; z-index:1; box-shadow:2px 1px 16px #848484; }
table.loginbar div.innershadow { position:absolute; top:0; right:0; bottom:0; left:0; z-index:3; box-shadow:0 0 4px #666 inset; }
table.loginbar div.pixel { background-color:var(--theme-emphasis);  position:absolute; top:0; right:0; width:10px; height:10px; z-index:4; }
table.loginbar div.tvvbargradient { background-image:linear-gradient(90deg, var(--theme-brand), #006474);  background-color:var(--theme-brand); position:absolute; top:0; right:0; bottom:0; left:0; z-index:2; }
table.loginbar div.arrow { background-image:linear-gradient(90deg, var(--theme-brand), #006474);  background-color:#0168B5; position:relative; width:20px; height:20px; }
table.loginbar div.arrow div.left { position:absolute; top:0; left:0; width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:10px solid #FFF; }
table.loginbar div.arrow div.topright { position:absolute; top:0; right:0; width:0; height:0; border-top:10px solid #FFF; border-left:10px solid transparent; }
table.loginbar div.arrow div.bottomright { position:absolute; bottom:0; right:0; width:0; height:0; border-bottom:10px solid #FFF; border-left:10px solid transparent; }
table.loginbar td.text { color:#666; text-shadow:1px 1px #B4B4B4; font-weight:bold; line-height:20px; font-size:20px; font-family:Arial, sans-serif; text-align:left; width:20px; }
td.logintd { width:150px; text-align:right; font-weight: bold; color: #4D4D4D; padding-right:10px; padding-top:2px; }
div.logincontainer { background-color:#FFF; border:solid #FED5AF; border-width: 1px 1px 1px 1px; border:0 solid rgba(254, 213, 175, 0); width:760px; box-shadow:2px 1px 16px #848484; padding:20px; }
div.logincontainer div.gradientheader  { background-color:var(--theme-brand); color: var(--theme-emphasis); font-size:12px; font-weight:bold; text-align:left; line-height:28px; border-radius:3px 3px 1px 1px; height:28px; width:100%; }
div.logincontainer div.header { background-color:#F6F6F6; color:#4D4D4D; font-size:8pt; font-weight:bold; text-align:left; border:1px solid #FED5AF; border-radius:1px; height:100%; overflow-x:hidden; overflow-y: auto; padding:10px; }
div.logincontainer div.info { background-color:#F6F6F6; font-size:8pt; text-align:left; height:100%; border:1px solid #FED5AF; border-radius:1px; padding:10px; }
div#scrollOuter { visibility: hidden; width: 100px; height: 100px; overflow: auto; }
div#scrollInner { height:200px; }

/* UnitSelect-widget */
div.unitselect {
	width: 100%;
	background-color: #FFF;
	height: 15px;
}

table.editable div.unitselect {
	height: 16px;
}

div.unitselect label {
	float: right;
	padding: 0 2px 0 3px;
	background-color: transparent !important;
	height: 100%;
	line-height: 15px;
	font-weight: normal;
}

table.editable div.unitselect label {
	line-height: 16px;
}

div.unitselect div {
	overflow: hidden;
}

div.unitselect input {
	width: 100%;
	border: none;
	text-align: right;
	min-height: 10px;
	padding: 0;
	background-color: transparent !important;
	height: 100%;
	line-height: 15px;
}

table.editable div.unitselect input {
	line-height: 16px;
}

div.unitselect.disabled {
	background-color: #EEE;
}

div.unitselect.disabled input {
	color: #666;
}

div.unitselect.disabled label {
	color: #666;
}

/* TimeSelect-widget */
table.timeselect {
	border-collapse: collapse;
	background-color: #FFF !important;
}

table.timeselect td {
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: top;
}

table.timeselect td.value {
	width: 50%;
}

table.timeselect td.colon div {
	width: 6px;
}

table.timeselect input {
	width: 100%;
	border: none;
	padding: 0 !important;
	margin: 0 !important;
	background-color: transparent !important;
	line-height: 16px;
}

table.timeselect input.left {
	text-align: right;
	padding-right: 1px !important;
}

table.timeselect input.right {
	text-align: left;
}

table.timeselect input.center {
	text-align: center;
	color: #333;
}

table.timeselect.disabled {
	background-color: #EEE !important;
}

table.timeselect.disabled input {
	background-color: #EEE !important;
	color: #666 !important;
}

/* TimeDisplay-widget */
table.timedisplay {
	width: 100%;
	border-collapse: collapse;
	color: inherit;
	font-weight: inherit;
}

table.timedisplay tr {
	background-color: transparent;
	color: inherit;
	font-weight: inherit;
}

table.timedisplay td.value {
	width: 50%;
	padding: 0 !important;
}

table.timedisplay td.left {
	text-align: right;
}

table.timedisplay td.right {
	text-align: left;
}

table.timedisplay td.colon {
	padding: 0 1px !important;
	text-align: center;
}

table.timedisplay.error {
	background-color: #FCC;
}

/* DropSelect-widget */
table.dropselect {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}

table.dropselect td {
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}

table.dropselect td.input {
	padding: 0 !important;
}

table.dropselect td.input input {
	width: 100%;
	height: 100%;
	padding: 0 !important;
	border: none;
	text-indent: 2px;
}

table.dropselect td.arrow {
	background-color: #EEE;
	vertical-align: middle !important;
	padding: 0 2px !important;
	font-size: 10px;
	text-align: center;
	cursor: default;
	border-left: 1px solid #666 !important;
}

table.dropselect td.arrow:hover {
	background-color: #CCC;
}

table.dropselect td.glass {
	text-indent: 2px;
	background-color: #FFF;
	cursor: pointer;
}

table.dropselect td.glass:hover {
	text-shadow: #000 0 0 5px;
}

table.dropselect.disabled td.input input {
	background-color: #EEE;
	color: #666;
}

table.dropselect.disabled td.glass {
	background-color: #EEE;
	cursor: default;
}

table.dropselect.disabled td.arrow {
	background-color: #DDD;
	color: #666;
}

table.dropselect.disabled td.arrow:hover {
	background-color: #DDD;
}

select.dropselect {
	display: none;
	position: absolute;
	border: 1px solid #666 !important;
}

/* DoubleSelect-widget */
div.doubleselect {
	display: inline-block;
	padding: 5px 0px;
	padding: 5px;
}

div.doubleselect table {
	border-collapse: collapse;
}

div.doubleselect td.side {
	vertical-align: top;
}

div.doubleselect td.side label {
	display: block;
	text-align: center;
	font-weight: bold;
}

div.doubleselect td.side label.disabled {
	color: #666;
}

div.doubleselect td.side select.side {
	width: 100% !important;
	border-color: #999;
}

div.doubleselect td.side select.disabled * {
	color: #999 !important;
}

div.doubleselect td.side div.filter {
	padding-bottom: 2px;
}

div.doubleselect td.side div.filter label {
	float: left;
	font-weight: normal;
}

div.doubleselect td.side div.filter div {
	overflow: hidden;
	padding-left: 5px;
}

div.doubleselect td.side div.filter div.input {
	border-right: 1px solid #999;
}

div.doubleselect td.side div.filter input[type="text"] {
	width: 100%;
	border: 1px solid #999;
	text-indent: 2px;
}

div.doubleselect td.side div.filter input[type="text"]:disabled {
	background-color: #FFF;
	color: #999;
}

div.doubleselect td.side div.filter select {
	width: 100%;
	height: 16px;
	border-color: #999;
}

div.doubleselect td.side div.filter select.disabled {
	color: #999 !important;
}

div.doubleselect td.side div.buttons {
	margin-top: 3px;
	text-align: center;
	font-size: 0;
	white-space: nowrap;
}

div.doubleselect td.side div.buttons input[type="button"] {
	padding: 0 5px;
}

div.doubleselect td.side div.buttons input[type="button"] + input[type="button"] {
	margin-left: 3px;
}

div.doubleselect td.center {
	vertical-align: middle;
	text-align: center;
}

div.doubleselect td.center input[type="button"] {
	display: block;
	margin: 0 auto;
	width: 30px;
	height: 25px;
	padding: 0;
	font-size: 15px;
	text-align: center;
}

div.doubleselect td.center input[type="button"] + input[type="button"] {
	margin-top: 5px;
}

div.doubleselect div.legend {
	margin-top: 5px;
}

div.doubleselect div.legend div.inner {
	display: inline-block;
	cursor: pointer;
}

div.doubleselect div.disabled div.inner {
	color: #666;
	cursor: default;
}

div.doubleselect div.legend span.key {
	display: inline-block;
	border-width: 1px;
	border-style: solid;
	margin-right: 3px;
	border-radius: 4px;
}

div.doubleselect div.legend div.inner:hover {
	color: #999;
}

div.doubleselect div.legend div.inner:hover span.color {
	opacity: 0.5;
}

div.doubleselect div.legend div.inner:hover span.letter {
	opacity: 0.75;
}

div.doubleselect div.letters div.letter-label {
	text-decoration: underline;
	padding: 1px;
}

div.doubleselect div.colors div {
	line-height: 14px;
}

div.doubleselect div.colors span.color {
	width: 10px;
	height: 10px;
	border-color: #000;
	vertical-align: text-bottom;
}

div.doubleselect div.letters span.letter {
	width: 14px;
	height: 14px;
	border-color: #666;
	text-align: center;
	font-weight: bold;
}

div.doubleselect div.disabled div.inner:hover {
	color: #666;
}

div.doubleselect div.disabled span.color {
	opacity: 0.5;
}

div.doubleselect div.disabled span.letter {
	opacity: 0.75;
}

div.doubleselect div.letters div + div {
	margin-top: 2px;
}

/* StickyTable-widget */
#stickyDiv {
	display: inline-block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: auto;
}

#stickyFiller {
	position: absolute;
	visibility: hidden;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 30;
}

#stickyDiv div.overlay {
	display: none;
	position: fixed;
	overflow: hidden;
}

#stickyDiv div.overlay > table {
	table-layout: fixed;
	width: 0;
	position: relative;
}

#debug {
	position: fixed;
	display: inline-block;
	bottom: 0;
	left: 0;
	padding: 0 5px;
	background-color: rgba(255, 255, 255, 0.75);
	font-size: 13px;
	z-index: 10000;
}

/* PasswordBox-widget */
.pwError { background-color: #FFB7B9 !important; border-color: #CD0005 !important; }
.pwIdentical { background-color: #7BE69B !important; border-color: #167232 !important; }
table.centerContent { height: 100%; width: 100%; }
div.passwordBox { position: relative; background-color: #E3E1DD; height: auto; border: 1px solid #000; border-radius: 10px; box-shadow: 10px 10px 5px #888; padding: 0 20px 0 20px; }
div.passwordSaved { background-color: #FFF; text-align: center; line-height: 300px; }
div.ohjekentta { width: 99%; border: 1px solid #666; border-radius: 4px; padding-left: 2px; }
table.pwStrength { border: 1px solid #666; border-radius: 4px; text-align: center; width: 100%; }
table.pwStrength td { width: 33%; height: 16px; font-weight: bold; }
table.pwStrength td.neutral		{ background-color: #BFBDB0; }
table.pwStrength td.weak		{ background-color: #FF2020; }
table.pwStrength td.moderate	{ background-color: #6F98B7; }
table.pwStrength td.good		{ background-color: #00C400; }

.tree {
	padding: 10px;
	text-align: left;
}
.tree .branch {
	margin-left: 10px;
}
.tree .branch.collapsed {
	background-image: url(/tvv_kuvat/folder_close.png) no-repeat 0px 0px;
}
.tree .branch.expanded {
	background-image: url(/tvv_kuvat/folder_open.png) no-repeat 0px 0px;
}
.tree .branch.disabled {
	opacity: 0.5;
}
.tree .term {
	margin-left: 10px;
	padding-left: 10px;
}
.tree .term .typeIf {
	background-image: url();
}
.tree .term .typeElse {
	background-image: url();
}
.tree .term .tyoeDefault {
	background-image: url();
}
.tree .term .operation {
	background-image: url();
}

.markdown-container {
	display: inline-block;
	font-size: 0;
}

.markdown-container textarea {
	padding: 2px;
}

.markdown {
	overflow: auto;
	border: 1px solid #000;
	background-color: #FFF;
	font-size: 8pt;
	padding: 2px;
}

.markdown *:first-child {
	margin-top: 0;
}

.markdown *:last-child {
	margin-bottom: 0;
}

.markdown table {
	border-collapse: collapse;
	border-spacing: 1px;
}

.markdown table th, .markdown table td {
	padding: 0 2px;
	border: 1px solid #CCC;
	text-align: left;
}

.markdown table th {
	background-color: #DDD;
	font-weight: bold;
}

.markdown-container div.buttons {
	display: inline-block;
	float: right;
}

.markdown-container div.buttons span.button {
	display: inline-block;
	padding: 3px 8px;
	font-size: 8pt;
	background-color: #DDD;
	border: 1px solid #666;
	border-top-width: 0;
	border-radius: 0 0 5px 5px;
	vertical-align: middle;
	cursor: pointer;
}

.markdown-container div.buttons span.button.active {
	background-color: #FFF;
	color: #000;
}

.markdown-container div.buttons span.button.help {
	cursor: help;
}

.markdown-container div.buttons span.button:hover {
	background-color: #BBB;
}

.markdown-container div.buttons span.button + span.button {
	margin-left: 3px;
}

div.tooltip {
	position: fixed;
	display: none;
	background-color: #FFC;
	min-width: 150px;
	z-index: 1000000;
	border: 1px solid #663;
	padding: 5px;
	box-shadow: 0 0 5px #000;
}

div#lisaaLiite {
	border-radius: 3px;
}

#stickyDiv #tblYhteenveto tr.yht {
	background-color: var(--theme-brand);
}

#seliteTbl td {
	min-width: 26px;
	min-height: 13px;
	padding-left: 5px;
	padding-right: 11px;
}

#seliteTbl td.selite {
	border: 1px solid #7b7373;
}

#seliteTbl td.kirjattu {
	display: none;
}

.toteutuneetKirjattu {
	background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, #64D964 6px, transparent 7px);
	vertical-align: top;
}

#errorlog td.info {
	color: #0966B7;
	cursor: pointer;
}

#errorlog td.success {
	font-weight: bold;
	text-align: center;
	background-color: #A0FFA0;
}

#errorlog td.failed {
	background-color: #FF9797;
}

#errorlog .retrybtn {
	height: 100%;
	width: 100%;
}

/* Modern Language Dropdown Styling */
.language-selection-dropdown {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23666' d='M8 10.293l-4.146-4.147-.708.708L8 11.707l4.854-4.853-.708-.708L8 10.293z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px;
	border: 2px solid #e1e5e9;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	color: #000;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	min-height: 38px;
	outline: none;
	padding: 8px 32px 8px 12px;
	transition: all 0.2s ease-in-out;
	min-width: 140px;
}

.language-selection-dropdown:hover {
	border-color: #c1c9d2;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.language-selection-dropdown option {
	background-color: #ffffff;
	color: #333;
	font-weight: normal;
	padding: 8px;
}

.language-selection-dropdown option:hover {
	background-color: #f8f9fa;
}