/* ---------------------------------------------------------------- Runko */

			html, body {
				font-family: 'Open Sans', sans-serif !important;
			}

/* ---------------------------------------------------------------- Globaalit */
      
      h2 {
      }
      
			#search-outliner, #tasks-outliner, #ucp-container, #products-container, #sales-container, #main-window-outliner {
				margin: 0;
			}
			
			
			
			div.calendar-icon {
				
				height: 11px;
				width: 11px;			
			}
			
			#main-window-container, #ucp-content, #products-content, #sales-content, #ucp-adduser-content {
				position: relative;
				padding: 0 9px;
/*				border-left: 1px solid #474f5c;
				border-right: 1px solid #474f5c; */
			}
			
			div.buttons {
				padding: 10px 0;
				border: 0;
				color: #000;
				text-align: right;
				width: 90%;
			}
			
			div.container-top {
				position: relative;
				height: 9px;
				border-top: 1px solid #838588; 
				margin: 0 10px;
				background: #707379;
			}			
			
			div.container-top-left {
				position: absolute;
				z-index: 15;
				left: -10px;
				top: -1px;
				height: 10px;
				width: 10px;
				border-top: 1px solid #838588; 
				background: #707379;
			}

			div.container-top-right {
				position: absolute;
				z-index: 15;
				right: -10px;
				top: -1px;
				height: 10px;
				width: 10px;
				border-top: 1px solid #838588; 
				background: #707379;
			}
			
			div.container-bottom {
				position: relative;
				height: 10px;
				margin: 0 10px;
				background: #707379;
			}			
			
			div.container-bottom-left {
				position: absolute;
				z-index: 15;
				left: -10px;
				top: 0;
				height: 10px;
				width: 10px;
				background: #707379;
			}

			div.container-bottom-right {
				position: absolute;
				z-index: 15;
				right: -10px;
				top: 0;
				height: 10px;
				width: 10px;
				background: #707379;
			}
			
			div.float-top {
				position: relative;
				height: 14px;
				margin: 0 15px;
				width: 720px;
				
			}

			div.float-bottom {
				width: 720px;
				position: relative;
				height: 14px;
				margin: 0 15px;
				
			}

			div.float-middle {
				position: relative;
				padding: 0 14px;
				
			}

			div.window-header {
				font-family: Arial, sans-serif;
				font-size: 12px;
				font-weight: bold;
				background: #fea759;
				padding: 0 10px 0 10px;
				font-size: 15px;
				text-align: center;
				margin: 0;
				color: #FFF;	
			}
			
			div.window-header-top {
				height: 5px;
				margin: 0 5px;
				background: #fda65a;
				position: relative;
			}
			
			div.window-header-bottom {
				z-index: 1;
				height: 5px;
				margin: 0 5px;
				background: #fd8012;
				position: relative;
			}
			
			div.window-header-top-left {
				z-index: 1;
				position: absolute; top: 0; left: -5px; height: 5px; width: 5px;
				
			}
			
			div.window-header-top-right {
				z-index: 1;
				position: absolute; top: 0; right: -5px; height: 5px; width: 5px;
				
			}

			div.window-header-bottom-left {
				z-index: 1;
				position: absolute; top: 0; left: -5px; height: 5px; width: 5px;
				
			}
			
			div.window-header-bottom-right {
				z-index: 1;
				position: absolute; top: 0; right: -5px; height: 5px;	width: 5px;
				
			}

			table#tablesorter {
				width: 100%;
			}
			
			div.block-content-header .input {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
			}
			
			div.block-content-header div.input-top {
				background: #545b68;
				height: 5px;
				margin: 0;
				position: relative;
				display: none;
			}

			div.block-content-header div.input-top-left {
				position: absolute; width: 5px; height: 5px; top: 0; left: -5px;
				
			}
			
			div.block-content-header div.input-top-right {
				position: absolute; width: 5px; height: 5px; top: 0; right: -5px;
				
			}
			
			div.block-content-header div.input, table#tablesorter thead {
				color: #FFF;
				font-family: Arial, sans-serif;
				font-size: 14px;
				text-align: left;
				padding: 5px 15px 5px 15px;
				background: #545b68;
				border-bottom: 1px solid #3b4250;
			}
			
			table#tablesorter thead {
        font-size: 12px;
			}
			
      table.dataTable tr:nth-child(even) {
        background-color: #cccccc;
      }
			
			table#tablesorter .header, .nuoli {
				
				cursor: pointer;
			}
			
			table#tablesorter .headerSortUp {
				
			}

			table#tablesorter .headerSortDown {
				
			}

			div.block-content-separator {
				height: 5px;
			}
			
			div.block-content div.input {
				border-top: 1px solid #FFF;
				border-bottom: 1px solid #bcbcbc;
				padding: 7px 10px 7px 10px;
				background: #e0e0e0;
				color: #000;
			}
					
			div.block-content span.title {
				font-size: 12px;
				font-weight: bold;			
			}						

			div.block-content div.input-edit {
				padding: 15px 15px 15px 15px;
				border-top: 1px solid #FFF;
				border-bottom: 1px solid #bcbcbc;
				font-size: 13px;
				color: #000;
				background: #e9e9e9;
				position: relative;
			}
			
			div.block-content div.input-edit a {
				color: #000;
				text-decoration: none;
			}

			div.block-content div.input-edit a:hover {
				color: #000;
				text-decoration: underline;
			}

			div.block-content div.input-bottom-left {
				position: absolute; width: 5px; height: 5px; bottom: 0; left: -5px;
				
				border-top: 1px solid #6d727b;
				z-index: 1;
			}
			
			div.block-content div.input-bottom-right {
				position: absolute; width: 5px; height: 5px; bottom: 0; right: -5px;
				
				border-top: 1px solid #6d727b;
				z-index: 1;
			}
			
			div.block-content div.input-bottom {
				position: relative;
				background: #636a74;
				height: 5px;
				margin: 0 5px 0 5px;
				border-top: 1px solid #6d727b;
				z-index: 1;
			}
			
			div.arrow {
				position: absolute;
				top: -10px;
				left: 20%;
				width: 15px;
				height: 10px;
				
			}
			
			div.sort-content {	
				background: #f3f3f3; 
				color: #000;
				padding: 10px;
				width: 900px;
				position: absolute;
				top: 8px;
				left: 0;
				border: 1px solid #525252;
				z-index: 999;
			}
			
			div.block-content div.info {
				background: #f3f3f3;
				font-size: 11px;
				padding: 5px 10px;
				position: relative;
				border: 1px solid #f3f3f3;
			}

			div.block-content div.info-search {
				background: #f3f3f3;
				font-size: 11px;
				padding: 7px 10px;
				position: relative;
				border-left: 1px solid #d0d0d0;
				border-right: 1px solid #d0d0d0;
				border-bottom: 1px solid #d0d0d0;
				z-index: 999;
			}
			
			div.block-content div.info-search:hover {
				background: #d0d0d0;
			}

			div.close {
				float: right;	
				font-size: 8px;
				font-weight: bold;
				padding: 2px 5px;
				background: #FF8000;
				border-bottom: 1px solid #CE6700;
				border-top: 1px solid #FFA64B;
				border-right: 1px solid #CE6700;
				border-left: 1px solid #FFA64B;
			}

			div.close:hover {
				cursor: pointer;
				background: #4d5562;
				border-left: 1px solid #5b626e;
				border-top: 1px solid #5b626e;
				border-bottom: 1px solid #2F2F2F;			
				border-right: 1px solid #2F2F2F;
			}
			
			input.submit, div.submit, button.submit {
				color: #FFF;
				background: #474f5c;               
				border-top: 1px solid #474f5c;
				border-right: 1px solid #1F1F1F;
        border-bottom: 1px solid #1F1F1F;
				border-left: 1px solid #474f5c;
				padding: 2px 4px;
			}

			input.submit:hover, button.submit:hover, div.submit:hover {
				background: #FF8000;
				border-bottom: 1px solid #CE6700;
				border-top: 1px solid #FFA64B;
				border-right: 1px solid #CE6700;
				border-left: 1px solid #FFA64B;
			}
			
			div.input-label {
				padding: 10px 0 10px 0;
				font-weight: bold;
				color: #366076;
				font-size: 11px;
			}

			div.form-block {
				float: left;
				padding: 0 2%;
				height: 60px;
			}
			
			div.block {
				float: left;
				width: 100%;
			}

			div.error-content, div.highlight {
				margin: 10px 0;
				font-weight: bold;
				color: #FFF;
				background: #FF8000;
				padding: 4px 7px;
				border: 1px solid #FFF;
				text-transform: none;
				font-size: 11px;
			}

			div.block-content div.input:hover {
				background: #b8b8b8;
				color: #000;
			}
			
			div.listing-body {
				border-top: 1px solid #d9dbdc;
			}			

			div.listing-header {
				background: #d9dbdc;
				padding: 0 15px;
				border: 1px solid #d9dbdc;
			}			
			
			div.listing-header div.input-label {
				padding: 3px 0;
				color: #537e94;
			}

			div.listing {
				border-bottom: 1px solid #d9dbdc;
				border-left: 1px solid #d9dbdc;
				border-right: 1px solid #d9dbdc;
				background: #FFF;
				padding: 5px 15px;
			}		
				
			div.input-edit div.info-label {
				float: left;
				font-weight: bold;
				padding: 4px 10px;
				height: 17px;
				width: 35%;
				color: #537e94;
				background: #c8c8c8;
				border: 1px solid #c8c8c8;
			}

			div.input-edit div.info-input {
				float: left;
				padding: 4px;
				width: 50%;
				color: #000;
				background: #FFF;
				border: 1px solid #c8c8c8;
			}

			div.info-label {
				float: left;
				font-weight: bold;
				padding: 4px 10px;
				height: 17px;
				width: 35%;
				color: #537e94;
				background: #d9dbdc;
				border: 1px solid #d9dbdc;
			}

			div.info-input {
				float: left;
				padding: 4px;
				width: 50%;
				color: #000;
				background: #FFF;
				border: 1px solid #d9dbdc;
			}
			
			div.info-input input {
        width: 100%;
			}

			div.info-input input[type=checkbox] {
				width: auto;
			}
			
			div.info-input input, div.info-input select, div.info-input textarea {
				padding: 1px;
				border: 0;
				border: 1px solid transparent;
				padding-left: 3px;
				box-sizing: border-box;
			}

			div.info-input input:focus, div.info-input select:focus, div.info-input textarea:focus {
				border: 1px solid #d9dbdc;
			}
			
      th {
        text-align: left;
      }
      
      .jslink {
        cursor: pointer;
      }
      
      .jslink:hover {
        text-decoration: underline;
      }
      
/* ---------------------------------------------------------------- Yläpalkki */

			#ylapalkki {
				padding: 5px 15px;
				font-size: 30px;
				border-bottom: 1px solid #474f5c;
				position: relative;
				height: 70px;
			}
			
			#ylapalkki #loading {
        font-size: 13px;
        left: 80px;
        position: absolute;
        top: 59px;
			}
			
			#ylapalkki #loading img {
        vertical-align: -3px;
			}
			
			span.logo-title1 {
				color: #ff7b0b;
			}

			span.logo-title2 {
				color: #cbcbcb;
			}
			
			div.welcome-body {
				position: absolute;
				bottom: 0;
				right: 20%;
			}
			
			div.logo-body {
				position: absolute;
				top: 0;
				left: 60px;
				padding: 12px;
				background: #474f5c;
				font-size: 20px;
				color: #cbcbcb;
			}

			div.welcome, div.logo {
				background: #474f5c;	
				padding: 1px;
			}
						
			div.welcome-content {
				padding: 5px 10px;
				background: #474f5c;
				font-size: 11px;
				color: #cbcbcb;
			}

			#header {
				width: 100%;
				background: #545b68;
				border-top: 1px solid #5e6570;
				border-bottom: 1px solid #3f4753;
				font-size: 13px;
			}
			
			#mainmenu {
				background: #474f5c;
			}
			
			#mainmenu div.mainmenu-item {
				margin: 0;
				display: block;
				float: left;
				border-right: 1px solid #444;
				background-color: #555;
				padding-right: 1px;
			}
			
			#mainmenu div.mainmenu-item .fa-lg {
        font-size: 1.45em;
        margin-right: 3px;
        color: #ccc;
			}
			
			#mainmenu div.mainmenu-item:hover .fa-lg, #mainmenu div.mainmenu-item.valittu:hover .fa-lg {
        color: #eee;
			}
			
			#mainmenu div.mainmenu-item.valittu .fa-lg, #mainmenu div.mainmenu-item.valittu a {
        color: #fd8012;
			}
			
			#mainmenu div.mainmenu-item.valittu:hover a {
        color: #fff;
			}

			#mainmenu a {
				color: #FFF;				
				text-decoration: none;
				outline: none;
				display: block;
				width: 100%;
				height: 100%;
				padding: 6px 12px;
				border-bottom: 1px solid transparent;
				border-top: 1px solid transparent;
				box-sizing: border-box;
				font-size: 13px;
				background-color: #474f5c;
			}
			
			#mainmenu #header-navi-logout {
        float: right;        
				padding: 0 0 0 1px;
				border-left: 1px solid #555;
				background: #444;
			}
			
			#mainmenu a:hover {
				border-bottom: 1px solid #CE6700;
				border-top: 1px solid #fdaa60;
				background: #fd8012;
			}
      
			#ilmoitus-container {
        		display: none;
        		position: relative;
			}

			#ilmoitus-container i.fa-info-circle {
				color: #4444EE;
				font-size: 20px;
			}

			#ilmoitus-container i.fa-close {
				position: absolute;
				top: 5px;
				right: 5px;
				font-size: 16px;
				cursor: pointer;
				color: #444;
				padding: 3px;
				border-radius: 3px;
			}

      #ilmoitus-sisalto {
      	display: inline-block;
      	padding-left: 10px;
      	padding-right: 5px;
      }
/* ---------------------------------------------------------------- Välilehdet */

			div.tabs {
				margin: 0;
				width: 100%;
				border-top: 1px solid #5e6570;
				border-bottom: 1px solid #3f4753;
				background-color: #545b68;
			}

			div.tabs-tasks {
				margin: 0;
				font-family: Arial, sans-serif;
				font-size: 12px;
				font-weight: bold;
				text-transform: uppercase;
				padding: 2px 15px 4px 15px;
				color: #FFF;
				border-top: 1px solid #5e6570;
				border-bottom: 1px solid #3f4753;
				border-right: 1px solid #3f4753;
			}

			div.tabs div.outline {
				float: left;
				margin: 0;
				border-right: 1px solid #444;
				background-color: #666;
				padding-right: 1px;
			}

			div.tabs div.tabs-active {
				background: #545b68;
				border-right: none;
				position: relative;
			}
       
			div.tabs div.tabs-active a {
				color: #FFF;  
				text-decoration: none;
				display: block;
				width: 100%;
				height: 100%;
				padding: 5px 15px;
				box-sizing: border-box;
			}

			div.tabs div.tabs-active:hover a {
				color: #cbcbcb;  
				text-decoration: none;
			}

			div.tabs div.tabs-active:hover {
				color: #FFF;  
				text-decoration: none;
				background: #474f5c;
			}

/* ---------------------------------------------------------------- Sisältö */

			#container {
				width: 100%;
				padding: 0;
				margin: 0;
			}
			
			#container-left {
				float: left;
				width: 25%;
				height: 100%;
				z-index: 1;
			}
			
			#float-container {
				position: absolute;
				left: 50%;
				margin-left: -350px;
				top: 10%;
				z-index: 999;
			}			
			
			#float-content {
				position: relative;
				width: 700px;
				padding: 0 10px 0 10px;
				background: #707379;
			}

			#container-right {
				float: right;
				width: 75%;
			}
			
/* ---------------------------------------------------------------- Kirjautuminen */

			#login { 
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -60px auto 0 -150px;
				width: 300px;
				border: 1px solid #474f5c; 
			}

			#login form {
				margin: 0;
				padding: 25px;
				background: #f3f3f3;
				font-size: 11px;
				border: 1px solid #FFF;
			}

			
/* ---------------------------------------------------------------- Vasen laita */
			
			#container-left div.header {
				background: #545b68;
				border-top: 1px solid #5e6570;
				border-bottom: 1px solid #3f4753;
				border-right: 1px solid #3f4753;
				font-size: 12px;
				padding: 4px 10px;
				height: 17px;
				font-weight: bold;
			}		
			
			#container-left div.notice {
				border-top: 1px solid #f63d3d;
				border-bottom: 1px solid #720000;
				background: #BA0000;
				color: #FFF;
			}	
			
			#container-left div.normal {
				border-top: 1px solid #5ac128;
				border-bottom: 1px solid #5ac128;
				background: #8ddb67;
				
			}
			
			#container-left div.today {
				border-top: 1px solid #c9ffaf;
				border-bottom: 1px solid #5ac128;
				background: #8ddb67;
			}
			
			
			
			#container-left div.notice b {
				color: #720000;
			}	
			
			#container-left div.notice:hover {
				background: #f63d3d;
			}	
			
			#container-left div.today:hover {
				background: #c9ffaf;			
			}

			#container-left-content div.block-content,
			#container-left-content div.block-content-header {
				padding: 0 9px;
			}					
			
/* ---------------------------------------------------------------- Products */

			#products {
				margin: 0 auto;
				padding: 0;
				width: 100%;
				margin: 0 auto;
				text-align: left;
				position: relative;
				border-bottom: 1px solid #3f4753;
			}
			
			#product-forms-left {
				float: left;
				width: 70%;
			}

			#product-forms-right {
				float: right;
				width: 30%;
			}
			
/* ---------------------------------------------------------------- Userdetails */

			#logoutpopup {
				position: absolute;
				z-index: 999;
				top: 100px;
				right: 100px;
			}
			
			#logoutpopup-content {
				position: relative;
				width: 700px;
				padding: 0 10px 0 10px;
				background: #707379;
			}

/* ---------------------------------------------------------------- Userdetails */

/*			#ucp div.outliner {
				border-left: 1px solid #474f5c;
				margin: 0;
			}*/

			#userdetails-float {
				position: absolute;
				z-index: 999;
				top: 100px;
				right: 100px;
			}
			
			#userdetails-float-content {
				position: relative;
				width: 700px;
				padding: 0 10px 0 10px;
				background: #707379;
			}

/* ---------------------------------------------------------------- User Control Panel */

/*			#ucp div.outliner {
				border-left: 1px solid #474f5c;
				margin: 0;
			}*/

			#ucp {
				margin: 0 auto;
				padding: 0;
				width: 100%;
				margin: 0 auto;
				text-align: left;
				position: relative;
				border-bottom: 1px solid #3f4753;
			}
			
			#ucp-adduser {
				position: absolute;
				z-index: 999;
				top: 0;
				left: 100px;
			}
									
/* ---------------------------------------------------------------- User Control Panel Floating Panel*/
			
			#ucp-user-content div.block-content-header a {
				color: #FFF;
				text-decoration: none;
			}	
			
			#ucp-user-content div.block-content-header a:hover {
				color: #CBCBCB;
				text-decoration: none;
			}

			#ucp-user-content div.block-content a {
				color: #CBCBCB;
				text-decoration: none;
			}
			
			#ucp-user-content div.block-content a:hover {
				color: #FFF;
				text-decoration: none;
			}
			
			#ucp-user-content div.access-title div.item {
				float: left;
				width: 29%;
				text-align: center;
				padding: 2px 5px;
			}
			
			#ucp-user-content div.access-button div.item {
				float: left;
				width: 29%;
				text-align: center;
				padding: 5px 5px;
				height: 17px;
			}

			#ucp-user-content div.error {
				font-weight: bold;
				color: #FF0000;
			}
						
/* ---------------------------------------------------------------- User Control Panel Right Panel*/

			#ucp-right {
				padding: 0;
				float: right;
				width: 70%;
			}
						
			#ucp-right div.block-content div.label {
				text-align: left;
				background: #5b626e;
				padding: 3px 15px;
				font-weight: bold;
				color: #FFF;
				border-top: 1px solid #636a74;
				border-bottom: 1px solid #4d5562;			
			}
			
			#ucp-right div.block-content div.input {
				padding: 5px 15px 15px 15px;
				border-top: 1px solid #6d727b;
				background: #505764;
			}
			
			#ucp-right div.access-title div.item {
				float: left;
				width: 29%;
				text-align: center;
				padding: 2px 5px;
				color: #000;
			}
			
			#ucp-right div.access-button div.item {
				float: left;
				width: 29%;
				text-align: center;
				padding: 5px 5px;
				height: 17px;
			}

			#ucp-right div.error {
				font-weight: bold;
				color: #FF0000;
			}
						
/* ---------------------------------------------------------------- User Control Panel Left Panel*/

			#ucp-left {
				padding: 0;
				float: left;
				width: 30%;
				position: relative;
				z-index: 5;
			}
			
			#ucp-left div.block-content div.non-active {
				border-top: 1px solid #bcbcbc;
				background: #b7b7b7;		
				font-style: italic;
				color: #cbcbcb;
			}

			#ucp-left div.non-active {
				font-style: italic;
				color: #000;
				z-index: 9999;
			}

			#ucp-left div.block-content-header div.non-active a {
				font-style: italic;
				color: #646974;
			}
			
			#ucp-left div.block-content-header div.non-active a:hover {
				font-style: italic;
				color: #646974;
			}
			
			#ucp-left div.block-content-header a {
				color: #FFF;
				text-decoration: none;
			}	
			
			#ucp-left div.block-content-header a:hover {
				color: #CBCBCB;
				text-decoration: none;
			}

			#ucp-left div.block-content a {
				color: #000;
				text-decoration: none;
			}
			
			#ucp-left div.block-content a:hover {
				color: #FFF;
				text-decoration: none;
			}

			#ucp-left div.block-content-user-fade {
				background: #636a74;
			}
			
			#ucp-right div.access-title {
				font-weight: bold;
				color: #FFF;
			}

/* ---------------------------------------------------------------- Client */

			#client-addclient {
				position: absolute;
				z-index: 900;
				top: 0;
				left: 0;
			}
			
			div.client-float {
				position: relative;
				z-index: 999;
				padding: 0 14px;
				
			}
						
			div.client-float-top {
				position: relative;
				height: 14px;
				margin: 0 15px;
				
			}

			div.client-float-bottom {
				position: relative;
				height: 14px;
				margin: 0 15px;
				
			}

			#float-content div.block-content-user-fade {
				border-top: 1px solid #6d727b;
				border-bottom: 1px solid #49505e;
				background: #505764;
			}

			#float-content div.block-content-header a {
				color: #FFF;
				text-decoration: none;
			}	
			
			#float-content div.block-content-header a:hover {
				color: #CBCBCB;
				text-decoration: none;
			}

			#float-content div.block-content a {
				color: #CBCBCB;
				text-decoration: none;
			}
			
			#float-content div.block-content a:hover {
				color: #FFF;
				text-decoration: none;
			}
			
			#float-content div.access-title div.item {
				float: left;
				width: 29%;
				text-align: center;
				padding: 2px 5px;
			}
			
			#float-content div.access-button div.item {
				float: left;
				width: 29%;
				text-align: center;
				padding: 5px 5px;
				height: 17px;
			}

			#float-content div.error {
				font-weight: bold;
				color: #FF0000;
			}
			
/* ---------------------------------------------------------------- Client */

			#client-list-left {
/*				float: left;
				width: 30%;*/
			}

			#client-list-right {
/*				float: right;
				width: 70%;*/
			}

			#client-list-info {
				float: left;
				width: 30%;
				z-index: 90;
				position: relative;
			}
			
			#client-navi-list {
				position: absolute;
				top: 29px;
				left: 9px;
				z-index: 999;
			}
			
			#client-navi-list-content {
				padding: 2px;
							
			}

			#client-list-right div.tabs-popup-arrow {
				position: absolute;
				top: -15px;
				left: 15px;
				width: 15px;
				height: 10px;
				z-index: 9999;
			}

			#client-list-right div.tabs-popup {
				position: absolute;
				top: 28px;
				left: 5px;
				z-index: 9999;
			}

			#client-list-right div.tabs-popup-content {
				position: relative;
				width: 250px;
				background: #fda65a;
				padding: 5px 15px;
				color: #FFF;
			}

			#client div.input-fade {
				background: #505764;
				position: relative;
			}
			
			#client-tasks-list div.input-fade {
				background: #505764;
				position: relative;
			}	


    /* ASIAKKAAT */
    
    .asiakasLomake {
      display: table;
      border-collapse: collapse;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      width: 100%;
    }
    
    .asiakasLomakeVasen {
      width: 50%;
      display: table-cell;
      box-sizing: border-box;
      vertical-align: top;
    }
    
    .asiakasLomakeOikea {
      width: 50%;
      display: table-cell;
      box-sizing: border-box;
      vertical-align: top;
    }

/* JARKON SÄÄDÖT 2014 */

div#infos, div.ajaxSisalto {
  padding: 10px;
}

.r2d2 table tr {
  position: relative;
}

.r2d2 table th {
  width: 160px;
}

.r2d2 table td {
  max-width: none;
}

.r2d2 table td input:not([type='checkbox']):not([type="radio"]), .r2d2 table td select {
  width: 200px;
  box-sizing: content-box;
}

.r2d2.column-3 textarea {
  width: 200px;
  height: 120px;
}

.r2d2.column-3 input.column-2 {
  width: 60px;
  float: left;
  margin-right: 5px;
}

.r2d2.column-3 input.column-2.alv-hinta {
  width: 122px;
  margin-right: 0;
}

.r2d2.column-3, .r2d2.column-2 {
  max-width: 33%;
  min-width: 440px;
  padding: 5px 20px;
  margin: 0px 5px;
  background: #f3f3f3;
  box-sizing: border-box;
  float: left;
  border: 1px solid #bbb;
  margin-bottom: 10px;
}

.r2d2.column-2 {
  max-width: 48%;
}

.r2d2 h2 {
  margin-top: 5px;
}

.r2d2 table td, .r2d2 table th {
  padding: 4px 2px;
}

.r2d2 table tr:nth-child(even) {
  background-color: #e5e5e5 !important;
}

.r2d2 table.liitteet th {
  width: 125px;
}

div.block-content table td, div.block-content table th {
  padding: 2px 10px;
}

div.napit {
  margin-top: 15px;
}

div.napit input {
  width: auto !important;
  cursor: pointer;  
  padding: 5px 8px;
  color: #000;
  border-radius: 3px;
  margin-bottom: 3px;
  min-width: 60px;
  text-align: left;
  border: 1px solid #999;
  cursor: pointer;
  font-weight: bold;
}

div.napit .submit {
	background-color: #aaeeaa;
}

div.napit .submit:hover {
	background-color: #88cc88;
  border: 1px solid #999;
}

div.napit .cancel {
  background-color: #eeaaaa;
}

div.napit .cancel:hover {
  background-color: #ee6666;
  border: 1px solid #999;
}

.select2 {
  width: 215px;
}

#tablesorter {
  margin-top: 15px;
}

#tablesorter tr:nth-child(1) th:not(.nosort) {
  cursor: pointer;
}

#tablesorter td {
  max-width: 120px;
}

.dataTables_filter, .dataTables_length {
  margin-top: 5px;
  margin-left: 15px;
}

div.clear {
  clear: both;
}

div#loading {
  display: none;
}

/* Käytössä Myynnissä, kun valitaan asiakas "Uusi asiakas", näytetään uuden asiakkaan kentät vasta sitten, sama liittymille */
div.uusiasiakas, div.uusiliittyma {
  display: none;
}


div.dt-button-collection {
  float: left !important;
  max-width: 720px !important;
  width: 100% !important;
}

/**
 * Muutoksia Datatablesin "Kolumnit" popupin ulkoasuun, useita rinnakkain
 * Lähinnä ajatellen myyntiä, kun sielä nappeja on julmetusti
 */ 
.dt-button-collection a {
  float: left !important;
  width: 170px !important;
  margin: 0 5px;
}

table.dataTable {
	width: 100%;
}

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc {
  background-position: left center !important;
}

table.dataTable td.col_toiminnot {
  text-align: right;
}

table.dataTable td.col_toiminnot a {
  display: inline-block;
  padding: 5px 8px;
  color: #000;
  border-radius: 3px;
  margin-bottom: 3px;
  min-width: 60px;
  text-align: left;
  border: 1px solid #999;
  cursor: pointer;
}

table.dataTable td.col_toiminnot a:hover {
  text-decoration: none;
}

table.dataTable td.col_toiminnot a .fa {
  vertical-align: 0;
}

table.dataTable td.col_toiminnot a:first-child {
  background-color: #99dd99;
}

table.dataTable td.col_toiminnot a:first-child:hover {
  background-color: #88cc88;
}

table.dataTable tr.odd td.col_toiminnot a:first-child {
  background-color: #aaeeaa;
}

table.dataTable tr.odd td.col_toiminnot a:first-child:hover {
  background-color: #99dd99;
}

table.dataTable td.col_toiminnot a:last-child {
  background-color: #dd9999;
}

table.dataTable td.col_toiminnot a:last-child:hover {
  background-color: #cc8888;
}

table.dataTable tr.odd td.col_toiminnot a:last-child {
  background-color: #eeaaaa;
}

table.dataTable tr.odd td.col_toiminnot a:last-child:hover {
  background-color: #dd9999;
}

table.dataTable thead tr:nth-child(2) input, table.dataTable thead tr:nth-child(2) select {
	color: #000;
	padding: 3px 5px;
	font-weight: 400;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before, table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before {
	top: calc(50% - 9px) !important;
}

input.tarkastaPvm {
	z-index: 25 !important;
	position: relative;
}

.navigointiNapit {
  position: absolute;
  top: 15px;
  left: 90px;
  z-index: 15;
}

.asiakasLomakeOikea .napit {
  text-align: center;
}

div.help {
  display: block;
  color: rgba(70, 70, 220, 0.5);
  font-size: 1.4em;
  cursor: pointer;
  position: absolute;
  right: 4px;
  top: 50%;
  margin-top: -10px;
}

/* help popup: http://www.nicolashoening.de/?twocents&nr=8 */
#pup {
  position:absolute;
  z-index:200; /* aaaalways on top*/
  padding: 3px 8px;
  border-radius: 5px;
  margin-left: 10px;
  margin-top: 5px;
  width: 250px;
  border: 1px solid black;
  background-color: rgba(60, 60, 60, 0.98);
  color: white;
  font-size: 1.1em;
}

input.searching {
  background-image: url('/asiakas/images/common/ajax-loader.gif');
  background-position: right center;
  background-repeat: no-repeat;
  border-width: 1;
}

nav .fa-lg {
	vertical-align: -10%;
}

@media (max-width: 1100px) {
	table.dataTable thead tr:nth-child(2) {
		display: none;
	}

	/* Liittyvät esim. asiakasnäkymän tabbed-näkymiin, yhdessä tab-collapse lisäosan kanssa */
	div#infos, div.ajaxSisalto {
	  padding: 0px;
	}
	.panel-body.js-tabcollapse-panel-body {
		padding: 10px 0;
	}
	.panel-heading a:before {
    	content: '- ';
	}
	.panel-heading a.collapsed:before {
	    content: '+ ';
	}

	.js-tabcollapse-panel-body .panel.panel-default {
		border-width: 0;
	}

	.js-tabcollapse-panel-body .panel-default > .panel-heading {
		background-color: transparent;
	}
	/* Tab-collapse päättyy */
}