* {
  box-sizing: border-box;
}

html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

body {  
    	//font-family: "Source Sans Pro",sans-serif;
	font-family: jost,Helvetica Neue,Helvetica,Arial,sans-serif;
        border-width: 0px;
        margin: 0px;
        padding: 0px;
        border-left:1px solid #aaa;
        -webkit-font-smoothing: antialiased;
      }

.lomake, form {
	/*background-color: #eee;*/
	}

#content {
        left : 1%;
        position : relative;
        padding : 4px;
}

table td {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-family: "Assistant",sans-serif;
    font-family: "Source Sans Pro",sans-serif;
}

img { border:0; }
a { border:0; color:blue ;}

a:link {background-color: transparent; border:1px solid transparent; padding:0 3px 0 3px;}
a:hover { color: #0B55C4; }

div.ylareuna { width:100%;height:80px;
  background: #003399 url("/icon/gui/ylabanner_sin80.jpg") repeat-x top;
  margin:0 0 0 0; padding:5px 2px 2px 2px; border: 1px solid #0033aa ;
  padding-top:0px;
  }
div.ylapalkki { width:100%;
  background: #f8f8f8 url("/icon/gui/ylabanner_sin80.jpg") repeat-x top;
  margin:5px 10px 0 0; padding:5px 2px 2px 2px; border: 1px solid #cceeff ;
    -moz-border-radius:4px;
  border-radius:4px;
  }

/* form juttuja */
fieldset {
        margin-bottom: 10px;
        border: 1px #ccc solid;
        padding: 5px;
	width: 90%;
	max-width: 70em;
        text-align: left;
	background-color: #eee;
}

fieldset p {  margin: 10px 0px;  /*font-size : 1.1vw;*/
		}

legend    {
        color: #0B55C4;
	color: #f14c1a;
        font-weight: bold;
}

input { 
	display : inline-block;
        width : 80%;
	height: 24px;
        padding-left : 10px;
	span { display: none; 
		 background-color: #222222;
		}
}

input, select { /*font-size: 1.1vw; */
	 border: 1px solid silver; padding:0px;
}

textarea      { /*font-size: 1.1vw;*/  border: 1px solid silver; padding:0px;}

input[type=submit] {
	background: linear-gradient(to bottom, #6DAB14 0%, #5A8C11 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
        border: 1px solid #5A8C11;
        border-radius: 4px;
        box-shadow: 0 0 3px #6DAB14;
        font-weight: bold;
        padding: 3px 10px;
        cursor: pointer;
	}

input.submit:hover  { border: 1px solid #444; background-color: #ccc; }

input.button  { cursor: auto; }
  /*cursor: hand; cursor:pointer;  */

input:focus,
select:focus,
textarea:focus { background-color: #ffd; }

label { 
	display:inline-block; 
	float:left;
        background-color: #f6f6f6;
        text-align: left;
        width:180px;
        max-width:320px;
        font-weight: bold;
        border-bottom: 1px solid #e9e9e9;
        border-right: 1px solid #e9e9e9;
        padding: 0px;
}


.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    max-width: 50vw;
    min-width: 20vw;
    background-color: black;
    color: #fff;
    text-align: left;
    border-radius: 2px;
    padding: 2px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

select { 
	min-width: 20vw;
}

select:invalid { 
	color: gray; 
}


COL,COLGROUP,TABLE,TBODY,TD,TR {
  text-decoration:        normal;
  border-color:   navy;
  text-align: left;
  vertical-align:top ;
  border-style:   none;
  }
TD,TR { border-bottom: 1px solid #cccccc; }
TR:hover { background-color: #ddd; }
TD:hover { background-color: #fff; }

#submitdiv { display:none;}
#submitdiv { 
	     position: absolute; visibility: hidden;
	     display:inline-block; 
		color:#888;
    		font-family: "Source Sans Pro",sans-serif;
             white-space: nowrap;
             padding-left:50px;
             padding-right:50%;
	     width:80%;
		
             color: green;
             background-color:#ddd;z-index:1000;
	}


@media only screen and (min-width: 1200px) {
        /*.palkki { background-color: CornflowerBlue ; }*/
	font-size: 20px;
}
@media only screen and (min-width: 1025px) and (max-width: 1280px) { /* laptop, desktop */
        /*.palkki { background-color: AliceBlue ; }*/
	font-size: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) { /* tablet portrait */
        /*.palkki { background-color: CornSilk;}*/
	font-size: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { /* tablet landscape */
        /*.palkki { background-color: FloralWhite;}*/
	font-size: 30px;
}
@media only screen and (min-width: 481px) and (max-width: 767px)  { /* low res, phone landscape */
        /*.palkki { background-color: Coral;}*/
	font-size: 40px;
}
@media only screen and (min-width: 320px) and (max-width: 480px)  { /* low res, phone landscape */
        /*.palkki { background-color: Brown;}*/
	font-size: 40px;
}


select,
select::before,
select::after {
  box-sizing: border-box;
}

select {
	visibility: visible;
	&::focus {
    		visibility: visible;
  }
}

:root {
  --select-border: #777;
  --select-focus: blue;
  --select-arrow: var(--select-border);
}


.dropdown {/*position:relative;*/
	  position: absolute;
	  display:inline-block;} /*cursor:pointer; z-index:1000;

/* class applies to select element itself, not a wrapper element */
.select-css {
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .3em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
        // Stack above custom arrow
  	z-index: 100;
	// Optional styles
  	// remove for transparency
	background-color: #fff;
  	background-image: linear-gradient(to top, #f9f9f9, #fff 33%);

  	// Custom arrow
  	&:not(.select--multiple)::after {
    		content: "";
    		justify-self: end;
    		width: 0.8em;
    		height: 0.5em;
    		/*background-color: var(--select-arrow);*/
    		background-color: blue;
    		clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  		}
}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
	display: none;
}
/* Hover style */
.select-css:hover {
	border-color: #888;
}
/* Focus style */
.select-css:focus {
	border-color: #aaa;
	/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/* Set options to normal weight */
.select-css option {
	font-weight:normal;
}

/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
	color: graytext;
}

.select-css:disabled:hover, .select-css[aria-disabled=true] {
	border-color: #aaa;
}