/*
Theme Name: child_theme
Theme URI: cloud.idactor.com
Description: CHILD THEME
Author: Vesa Haimi
Author URI: portal.idactor.com
Template: oceanwp
Version: 0.1.0
Text Domain: child_theme
*/

.page-template-forms header{
	display: none !important;
}

/*oceanwp clean*/

/* Minimal resets and sane defaults for OceanWP */

/* 1) predictable box model + font smoothing */
html {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after {
	box-sizing: inherit;
}

/* 2) base typography (adjust sizes/colors to taste) */
body, button, input, select, textarea {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.45;
	color: #222;
	border:none;
}

form input[type=number]{
	max-width:unset;
}

/* 3) headings — preserve case, consistent spacing */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6rem;
	font-weight: 600;
	color: inherit;
	text-transform: none !important; /* override theme uppercase */
	letter-spacing: normal;
}

/* 4) header / navigation / menu — remove forced uppercase */
.site-header, .main-navigation, .main-navigation a,
.menu, .menu a, .oceanwp-menu, .site-title, .site-description {
	text-transform: none !important;
}

/* 5) buttons and form controls — no forced transform */
button, .button, input[type="button"], input[type="submit"], .btn {
	text-transform: none !important;
	border:none;
}

/* 6) table headers — preserve natural case and spacing */
table th, thead th, .woocommerce table.shop_table th {
	text-transform: none !important;
}

/* 7) basic content spacing (paragraphs, lists) */
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem 1.25rem; padding: 0; }
li { margin: 0.25rem 0; }

/* 8) container baseline (keeps content centered) */
.container, .site-content, .wrap {
	/*max-width: 1200px;*/
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* 9) utility: reduce overly large default header/footer paddings */
.site-header, .site-footer {
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
}

/* 10) ensure any theme pseudo-elements do not unexpectedly uppercase/overlay */
*::before, *::after { text-transform: none !important; }

/* Tweak as needed: remove !important lines once you've confirmed theme settings */


/* Color system */
:root{
	--bg:#0e4a8f;	   /* page background (deep blue) */
	--grad-1:#0b3a70;
	--grad-2:#0e4a8f;

	--card:#f3f6fb;	 /* light card surface */
	--card: white;
	--card-text:#0c2a52;    /* dark navy text on light card */

	--text-color:#0c2a52;
	--input-color:#fcfcfc;
	--input-readonly:#e1e3e6;

	--radius-xl:22px;
	--radius-l:18px;
	--radius-m:14px;
	--radius-s:12px;
	--radius-xs:10px;
	--input-radius:8px;
}

/* Base */
*{box-sizing:border-box}

html,body{
	height:100%;
	margin:0;
	font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
	font-family: Roboto, Lato, Verdana, system-ui;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	background-color:var(--bg);
	color:#ffffff;
}

/* Layout helpers */
.app{
	min-height:100%;
	padding:0 28px 64px;
	display:grid;
	gap:26px;
	padding-bottom:300px;
}

/* stacking offset */
.stack{ 
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:22px;
	align-items: start; 
}

.stack .card:nth-child(1),
.stack .card:nth-child(2),
.stack .card:nth-child(3){
	transform:none;
}  

.card{
	position:relative;
	border-radius:var(--radius-s);
	display:flex;
	flex-direction:column;
	width:100%;
	resize:vertical;
	max-height:80vh;
	overflow:hidden;
	box-sizing:border-box;
	min-height:calc(90px + 90px);
	/*height:40vh;*/
	/*max-height:60vh;*/
}

.card:has(.card__body > *:only-child) {
	/*max-height: 40vh;*/
}

.card__top{
	display:flex;
	width:100%;
	align-items:center;
	height:90px;
	max-height:90px;
	min-height:90px;
	padding:10px 5px 0 5px; /* preserves original top/side spacing */
	background:linear-gradient(180deg, var(--grad-1) 0%, var(--grad-2) 100%);
	color:#fff;
	border-top-left-radius:inherit;
	border-top-right-radius:inherit;
	border:1px solid #FFFFFF80;
	border-bottom:0;
	box-sizing:border-box;
}

.card__body{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:0;
	background:var(--card);
	color:var(--card-text);
	padding:30px 4px; /* keep top/bottom spacing from original */
	border-bottom-left-radius:inherit;
	border-bottom-right-radius:inherit;
	border:1px solid rgb(99,130,174);
	border-top:0;
	flex:1 1 auto;    /* critical: allow body to grow/shrink inside .card */
	min-height:0;     /* critical for flex children to allow scrolling */
	min-height:90px;
	overflow:auto;    /* internal scrolling when content exceeds height */
	box-sizing:border-box;
	border:1px solid transparent;
}

.card__body > *:only-child {
	grid-column: 2;
	min-height:auto;
	/*justify-self: center; /* optional: centers it horizontally inside the column */
}

.card__full{
	display:grid;
	grid-template-columns: 1fr;
	gap:0;
	background:var(--card);
	color:var(--card-text);
	padding:30px 4px; /* keep top/bottom spacing from original */
	padding:0;
	border-bottom-left-radius:inherit;
	border-bottom-right-radius:inherit;
	border:1px solid rgb(99,130,174);
	border-top:0;
	flex:1 1 auto;    /* critical: allow body to grow/shrink inside .card */
	min-height:0;     /* critical for flex children to allow scrolling */
	overflow:auto;    /* internal scrolling when content exceeds height */
	box-sizing:border-box;
	/*height:550px !important;*/
}

.chart__cell{
	display:block;
	flex-direction:column;
	align-items:center;
	text-align:center;
	padding: 16px 12px 16px 12px;
	margin-right:10%;
	margin-left:10%;
	cursor:pointer;
	
	/*border: 1px solid transparent;		 /* same width as hover */
	/*border-bottom-color: rgba(12,42,82,.12);       /* show bottom line in normal state */
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	border-radius:var(--radius-m);
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
}

.card__cell{
	display:block;
	flex-direction:column;
	align-items:center;
	text-align:center;
	padding: 6px 12px 6px 12px;
	margin-right:10%;
	margin-left:10%;
	cursor:pointer;

	/*border: 1px solid transparent;		 /* same width as hover */
	/*border-bottom-color: rgba(12,42,82,.12);       /* show bottom line in normal state */
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	border-radius:var(--radius-m);
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
}
.card__cell:hover{
	background-color:var(--bg);
	border: 1px solid var(--bg);
	box-sizing: border-box;
	border-radius:var(--radius-m);
}

.card__cell:hover .sub {
	color:var(--text-color);
	color: #ffffff;
	/*padding-bottom:20px;*/
	padding-bottom:0;
}

.card__extra {
	display: none;
	width: 100%;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

.card__cell:hover .card__extra,
.card__cell:focus-within .card__extra {
	display: block;
}

.card__extra .new {
	padding: 6px 12px;
	margin: 4px 8px;
	border-radius: 8px;
	border-radius: 0px;
	padding:0;
	margin:0;
	margin-top:5px;
	background-color:var(--bg),0.5;
	background-color: rgba(0,0,0,0.50);
	background-color: rgba(14,74,143,0.5);
	background-color: rgba(143, 14, 14,0.5);
	background-color: rgba(255,255,255,0.10);
	color:white;
	margin-top:10px;
}

.card__extra .new:hover {
	background-color:white;
	color:black;
}

.card__extra .new a {
	display: block;
	width: 100%;
	text-decoration: none;
	color: inherit;
	padding: 6px 8px;
	font-size:1.3rem;
	font-weight:500;
}

.card__extra .new a:hover {
	background: rgba(10,106,223,0.06);
	color:var(--text-color);
}

.card.expanded .chart__cell {
	display: none;
}

.card.expanded:hover,
.chart__cell:hover {
	background: transparent;
	border: none;
}

/* expanded mode: fill viewport responsively */
.card.expanded {
	max-height: none;
	height: auto;       /* fill available viewport height */
	display: flex;
	flex-direction: column;
}

/* body & cell flex to take space */
.card.expanded .card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 0 !important;
}

.card.expanded .chart__cell.active {
	flex: 1 1 auto;
	display: flex !important;
}

.card.expanded .chart__cell.active .hc-chart {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
}

.card__section-title{
	grid-column: 1 / -1;
	padding: 8px 12px;
	font-weight: 600;
	box-sizing: border-box;
}

.card.expanded .card__section-title{
	display: none;
}

a:active {
	border:none;
}
a:focus,
a:active,
a:focus-visible
{
	outline: none !important;
	box-shadow: none !important;
}

.sub{
	font-size:1.3rem;
	font-weight:600;
	color:#173a6b;
	color:var(--text-color);
	cursor: pointer;
	margin:0;
	border: 1px solid transparent;	   /* same width as hover */
	border-bottom-color: rgba(12,42,82,.12);
	padding-bottom:5px;
}

div.cmaster{
	min-height:100%;
	padding:0 28px 64px;
	display:grid;
	gap:26px;
	padding-bottom:300px;
}
@media only screen and (max-width: 768px) {
        div.cmaster {
                padding:0;
        }
}

div.cparent {
	display: grid;
	grid-template-columns: 30fr 30fr 40fr;
	grid-template-columns: 1fr 1fr 1fr;
	width: 100%;
	min-height: 200px;
	overflow: auto;
	border: 1px solid #ccc;
	border:none;
	gap: 8px;
}

@media only screen and (max-width: 768px) {
	div.cparent {
		display: inline-block !important;
	}
}

.cell {
	resize: vertical;
	resize:both;
	overflow: auto;
	min-height: 40px;
	padding: 8px;
	border: 1px solid #ccc;
	background: var(--card);
	background: white;
	box-sizing: border-box;
	height:550px;
	max-height:800px;
	padding:0;
	border-radius: var(--radius-s);
	border-bottom-left-radius: var(--radius-xs);
	border-bottom-right-radius: var(--radius-xs);
}

@media only screen and (max-width: 768px) {
        .cell {
                height: auto;
		min-height: auto;
        }
}

div.cinput{
	width:100%;
	margin-left:0;
	background-color: var(--bg);
	color:var(--text-color);
	float:left;
	border: none;
	margin:0;
	padding:0;
	display:flex;
	justify-content: center;
	text-align:center;
	height: auto;
}

table.c100w{
	width:100%;
	text-align: center;
	border-collapse:collapse;
	background-color: transparent;
	color:white;
	border: none;
	height:auto;
	margin:0;
	padding:0;
}

table.c100w td{
	padding:0;
	margin:0;
	width:220px;
	text-align:center !important;
	color:#ffffff !Important;
}

table.c100w td input{
	padding:0;
	margin:0;
	width:150px;
	text-align:center;
}

.client_sales td button.icon {
	background-color: transparent;
	border: none;
	cursor: pointer;
}

.left, .center, .right {
	flex: 1;
	font-size:14px;
	font-weight:600;
	letter-spacing:.2px;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
	white-space:nowrap;
	text-transform:uppercase !important;
}

.right {
	align-self: flex-start;
	text-align: right;
}

.card .fa-solid{
	font-size:26px !important;
}

.card .fa-circle{
	font-size:1rem !important;
}

div .th-title {
	display: flex;
	align-items: center;       /* vertical centering */
	justify-content: space-between; /* spread title left, button right */
	height: 100%;	      /* match th height */
}

.edit_btn,
.save_btn,
.no_save_btn{
	background: transparent !important;
	padding:0 !important;
}

.edit_btn i {
	font-size: 14px !important;
	color: black;
	//background-color: transparent;
	padding-top:8px;
}

.save_btn i {
	font-size: 14px !important;
	color: green;
	//background-color: transparent;
	padding-top:8px;
}

.no_save_btn i {
	font-size: 14px !important;
	color: red;
	//background-color: transparent;
	padding-top:8px;
}

.edit_btn i:hover,
.save_btn i:hover,
.no_save_btn i:hover
{
	opacity:0.7 !important;
} 

span i {
	font-size: 14px !important;
	color: white;
	background-color: transparent;
	padding-top:8px;
}
span i:hover {
	color: white !important;
}

span {
	padding-right:1px;
}

span button{
	background-color: transparent;
	padding: 0.5rem 1.5rem 0.5rem 1.5rem;
	padding: 2px 1rem 5px 1rem;
	box-sizing: border-box;
	box-shadow: inset 0 0 0 2px transparent;
	/*
	border:1px solid transparent;
	border-radius: 8px;
	box-sizing: border-box;
	*/
}

span button:hover{
	background-color: var(--bg);
	border-radius: 10px;
	box-shadow: inset 0 0 0 2px #fff;
	border-color: transparent;
	box-sizing: border-box;
}

.site-loginout-topright {
	display: block;
	text-align: right;     /* pushes link to the right side of its container */
	padding: 10px 20px;
	position: relative;    /* relative = stays in flow, scrolls with content */
	background: transparent;
	color:white;
}

.site-loginout-topright a {
	color: #ffffff;
	text-decoration: none;
}
.site-loginout-topright a:hover,
.site-loginout-topright a:focus {
	color: rgba(255,255,255,0.9);
	text-decoration: underline;
}


/*CONTENT*/

table{
	margin-bottom: 5px;
	font-size: 16px;
	border-collapse: collapse;
	color: #222;
	background: #ffffff;
	padding: 1.5rem;
	border-radius: 12px;
	/*box-shadow: 0 6px 20px rgba(0,0,0,0.08);*/
	overflow: hidden;
	padding-bottom:10px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

table tr{
	border:none;
	vertical-align:top;
	margin:0;
}

table th{
	color:#ffffff;
	vertical-align: middle;
	white-space:nowrap;
	background:linear-gradient(180deg, var(--grad-1) 0%, var(--grad-2) 100%);
	margin:0;
	text-align: left;
	font-weight: 600;
	font-size: 1.5rem;

	letter-spacing: 1px;
	padding: 1%;
	padding-left:2%;
	text-transform: uppercase !important;
	border:none;
}

table th:first-child{
	padding-left:10px;
	font-size:1.5rem;
}

table th:not(:first-child){
	padding-left:0;
	padding-right:10px;
	text-align:right;
}

td.required{
	vertical-align:middle;
}

td.required:after{
	color: red;
	content: ' *';
}

table td{
	vertical-align:middle;
	/*border-bottom:1px solid white;*/
	color: #000000;
	padding:10px;
	padding-top:3px;
	padding-bottom:3px;
	padding-left:5px;
	max-height:20px;
	min-width: 10px;
	text-align: left;
	border:none;
	font-weight: 500;
	font-size: 1.3rem;
}

table td input[type="text"],
table td input[type="password"],
table td input[type="number"],
table td input[type="tel"],
table td input[type="email"],
table td textarea,
table td select
{
	line-height:0;
	min-height:30px;
	padding-top:0;
	padding-bottom:0;
	padding-left:5px;
	background: var(--input-color);
	width: 100%;
	border: 1px solid #d0d0d0;
	border-radius: var(--input-radius);
	font-size: 1.4rem;
	transition: all 0.2s ease;
	box-sizing: border-box;
	color: var(--text-color);
}

table td select{
	padding-left:2px;
}

table td select.select33{
	max-width: 32%;
 }

table td input[type="text"]:read-only,
table td input[type="password"]:read-only,
table td input[type="number"]:read-only,
table td input[type="tel"]:read-only,
table td input[type="email"]:read-only,
table td textarea:read-only
{
	color: var(--text-color);
	background-color: var(--input-readonly);
	opacity:0.9;
}

table td textarea{
	min-height:70px;
	line-height:1.5;
	resize:vertical;
}

table td input:focus {
	border-color: #0a6adf;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(10,106,223,0.15);
	outline: none;
}

table td input[type='file']{
	border: 0;
	padding:0px;
	min-width: 5em;
	max-width: 15em;
	height:30px;
	background-color: white;
	color: black;
	font-size:12px;
}

table td input[type=file]::file-selector-button {
	border: 1px solid lightgrey;
	padding:5px;
	min-width: 5em;
	max-width: 15em;
	height:30px;
	letter-spacing: 0;
	border-radius:5px;
	background-color: white;
	color: black;
	font-size:12px;
}

table span input[type='submit']{
	padding: 1rem 1.5rem 0.6rem 1.5rem;
}

.client_submit{
	display:none !important;
}

@media only screen and (max-width: 768px) {
	.client_submit{
		min-height:30px;
		display:inline-block !important;
	}
}

input[type='submit'].submit-link,
input[type='submit'].submit-link:hover,
input[type='submit'].submit-link:active
{
	border: none;
	outline: none;
	background: none;
	cursor: pointer;
	color: var(--text-color);
	padding: 0;
	text-decoration: none;
	text-align: left;
	min-width:0;
	letter-spacing:0;
	font-size:1.3rem;
}

table input[type='submit'],
table input[type='reset'],
table input[type='button']
{
	background-color: var(--grad-1);
	color: var(--input-color);
	font-weight: 600;
	padding: 0.85rem 1.5rem;
	border-radius: 8px;
	cursor: pointer;
	font-size: 1.1rem;
	transition: background 0.2s ease;
	text-transform: capitalize !important;
	font-style: normal;
	border:1px solid transparent !important;
	box-sizing: border-box;
}

table input[type='submit']:disabled,
table input[type='submit']:hover:disabled,
table input[type='button']:disabled,
table input[type='button']:hover:disabled
{
	background-color: grey;
}

table th input[type='submit'],
table th input[type='reset'],
table th input[type='button']
{       
	background: transparent;
}

table input[type='submit']:hover,
table input[type='reset']:hover,
table input[type='button']:hover
{
	background-color: var(--grad-2);
	color:#ffffff;
	font-size: 1.1rem;
	border:1px solid white !important;
	/*box-sizing: border-box;*/
	/*border-color:#fff !important;*/
	box-shadow: inset 0 0 0 1px #fff;
	border-color:transparent;
}

table input[type='submit']:focus:not(:hover),
table input[type='reset']:focus:not(:hover),
table input[type='button']:focus:not(:hover)
{
	background-color: var(--grad-1);
}

table td input[type='checkbox']{
	border: 1px solid #d0d0d0;
	transform: scale(1.5);
	margin:4px;
	border-radius:3px;
	box-shadow:none;
	transition: all 0.2s ease;
	box-sizing: border-box;
	color:var(--bg);
	background: var(--input-color);
}

table td input[type='checkbox']:checked::before{
	color:var(--bg);
}

table td input[type='checkbox']:checked{
	background-color: var(--bg);
	border:none;
}

table td input[type="checkbox"]:not(:checked):disabled {
	background-color: #F0F0F0; /* Light grey for unchecked */
	border-color: lightgrey;	 /* Match the border color */
	cursor: not-allowed;     /* Show a disabled cursor */
}

table td input[type="checkbox"]:disabled {
	opacity: 0.6; /* Slightly faded look for all disabled checkboxes */
	cursor: not-allowed;
	color: var(--input-readonly);
	border:none;
}

table td select:disabled{
	border:none;
	/*background:transparent;*/
	background-color: var(--input-readonly);
} 

table td input[type='text']:read-only{
	border:none;
}

/* Remove the default border/background and size the swatch */
input[type="color"] {
	-webkit-appearance: none;   /* for Chrome/Safari */
	-moz-appearance: none;   /* for Firefox */
	appearance: none;
	border: 1px solid lightgrey;
	border-radius: 10px;
	width: 1.5em;	       /* adjust to taste */
	height: 1.5em;
	padding: 0;
	background: none;
	cursor: pointer;
}

/* Chrome/Safari: remove the extra padding around the swatch */
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
input[type="color"]::-webkit-color-swatch {
	border: 1px solid lightgrey;;	      /* remove the grey border */
	border-radius: 10px;	  /* square corners */
}

/* Firefox: remove the default border */
input[type="color"]::-moz-color-swatch {
	border: 1px solid lightgrey;
	border-radius: 10px;
}

/* highlight out-of-range values automatically */
input[type=number]:invalid {
	border: 1px solid red;
}

table.blank{
	width:50% !important;
	margin-left:25%;
	background-color: transparent;
	margin-bottom: 5px;
}

table.c20-stats{
	width:20%;
	margin-left:40%;
}

table.c20-stats td:first-child{
    width: 50%;
    padding-right: 10px;
    text-align: right;
    font-size: 1.4rem;
    white-space: nowrap;
    overflow-wrap: break-word;
}

table.c20-stats td:last-child{
	width: 50%;
	padding-right: 25%;
	overflow: hidden;
	padding-left: 10px;
	white-space: nowrap;
}

table.c30-stats{    
	width:30%;
	margin-left:35%;
}	       
		
table.c30-stats td:first-child{
	width: 50%;
	padding-right: 10px;
	padding-left: 10px;
	text-align: left;
	font-size: 1.4rem;
	white-space: nowrap;
	overflow-wrap: break-word;
}
	
table.c30-stats td:last-child{
	width: 50%;
	padding-right: 10px;
	overflow: hidden;
	padding-left: 10px;
	white-space: nowrap;
	overflow-wrap: break-word;
	text-align: right;
}

table.notice{
	width:100% !important;
	margin-left:0%;
	background-color: transparent;
	margin-bottom: 5px;
	box-shadow:none;
}

table.notice td{
	text-align:center;
	color:#ffffff !important;
	font-style: italic;
}

table.error{
	width:100% !important;
	margin-left:0%;
	background-color: transparent;
	margin-bottom: 5px;
	box-shadow:none;
}

table.error td{
	text-align:center;
	color:#ffffff !important;
	font-style: italic;
}

table.error tr:first-child td::before {
	content: "⚠️\A";
	/*content: "✅\A";*/
	white-space: pre;
	font-style:normal;
}

table.error tr:last-child td::after {
	content:"\A\A";
	white-space: pre;
}

table.c20 th,
table.c30 th,
table.c35 th,
table.c40 th,
table.c60 th,
table.c80 th,
table.c100 th
{
	background:linear-gradient(180deg, var(--grad-1) 0%, var(--grad-2) 100%);
	color:#fff;
	height: 60px;
	padding: 0 20px;
	padding-left:10px;
	padding-right:10px;
	box-sizing: border-box;
	overflow: hidden;
	vertical-align:middle;
	text-align:left;
	border-radius: var(--radius-s);
	border-bottom: none;
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
	box-sizing: border-box;
	border-left: 1px solid var(--card);
	border-left: none;
	border-top: 1px solid var(--card);
	border-top: none;
	border-right: 1px solid var(--card);
	border-right:none;
}

th span{
    float:right;
}

table tr:first-child:has(th) + tr td {
	padding-top: 10px;
}

table tr:last-child > td[colspan],
table tr:last-child > td:only-child
{
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
}

td.buttons
{
	text-align:center !important;
	padding-top:10px !important;
	padding-bottom:10px !important;
	padding:10px !important;
	
}

tr.titles td
{
	font-weight: 800 !important;
	font-size:1.4rem !important;
	padding-left:5px;
	white-space:nowrap;
	/*border-bottom:1px solid var(--text-color);*/
	padding-bottom:1px;
	text-align:left !important;
}

.pika-single { z-index: 9999 !important; }

table.c20{
	width:20% !important;
	margin-left:40%;
}

table.c20 tr:last-child td{
	white-space:nowrap;
}

table.c20 tr > th:last-child {
	text-align: right;
}

/* ensure single-cell rows (colspan) stay left */
table.c20 tr > th:only-child,
table.c20 tr > th[colspan]
{
	text-align: left;
}

table.c20 td{
	white-space:nowrap;
	border-bottom: none;
}

table.c20 tr:last-child td{
}

table.c20 td:nth-child(1){
	width: 40%;
	text-align: left;
	font-weight: 600;
	font-size: 1.4rem;
	color: #333;
	padding-left: 10px;
	vertical-align: middle;
}

table.c20 td:nth-child(2){
	width: 60%;
	padding-right:10px;
	text-align:left;
}

table.c30{
	width:30% !important;
	margin-left:35%;
}

table tr th:last-child{
	padding-right:10px;
}

table td input[type='text']:invalid:focus,
table td input[type='text'].is-invalid,
table td input[type='tel']:invalid:focus,
table td input[type='tel'].is-invalid,
table td select:invalid:focus,
table td select.is-invalid
{
	box-shadow: 0 0 0 3px rgba(255,0,0,0.12) !important;
	border: 1px solid #d32f2f !important;
}

.c35{
	margin-left:32.5%;
	width:35%;
	box-sizing: border-box
}

.c35 td:first-child{
	padding-left:15px;
	font-size:14px;
}

.c35 td:last-child{
	padding-right:15px;
}

.c35 tr.titles > td[colspan],
.c35 tr.titles > td:only-child
{
	padding-left:8px;
	font-size:14px;
}

.fixed-image{
	display: block;
	width: auto;
	height: auto;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 60%;
}

table.c40{
	width:40% !important;
	margin-left:30%;
}


table.c40 tr:not(:first-child) {
	border-top: 1rem solid transparent;
}

table td:nth-child(1){
	font-weight: 500;
	font-size: 1.3rem;
	color: #333;
	padding-left: 10px;
	vertical-align: middle;
	white-space: nowrap;
}

table.c40 td:nth-child(2){
	padding-right:10px;
}


table.c60{
	width:60% !important;
	margin-left:20%;
	/*line-height:1.2;*/
}

table tr:last-child td{
	padding-bottom:10px;
}

table.c60 tr:first-child td{
	padding-bottom:1px;
	/*border-bottom: 1px solid var(--text-color);*/
	font-weight: 600;
	font-size: 1.4rem;
}

table.c60 td{
	font-weight: 500;
	font-size: 1.3rem;
	padding-top:1px;
	padding-bottom:1px;
}

table.c80{
	width:80% !important;
	margin-left:10%;
}

table.c80 tr.titles td:first-child{
	padding-left:10px;
}

table.c80 td{
	font-weight: 500;
	font-size: 1.3rem;
}

table.c90
{
	width:90% !important;
	margin-left:5%;
}

table.c90 td{
	border-bottom: 1px solid lightgrey;
} 

table.c100{
	width:100% !important;
	margin-left:0;
	margin-bottom:0;
	border-top-left-radius:0;
	border-top-right-radius:0;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
}

table.c100 td{
	padding-top:1px;
	padding-bottom:1px;
	/*border-bottom: 1px solid lightgrey;*/
}

table.c100-4{
	width:100% !important;
	margin-left:0;
	margin-bottom:0;
	border-top-left-radius:0;
	border-top-right-radius:0;
}

table.c100-4 tr:first-child td{
	background:#ffffff;;
	color:var(--text-color);
	font-weight: 600;
	font-size: 1.4rem;
}

table.c100-4 td{
	padding-top: 0;
	padding-bottom: 0;
	font-weight: 500;
	font-size: 1.3rem;
	width:25%;
	white-space:nowrap;
	/*border-bottom:1px solid lightgrey;*/
	color:var(--text-color);
}

/*Customers*/

 div.dtable {
	width: 98%;
	height:1000px;
	max-height:1000px;
	display: inline-block;
	text-align:center;
	padding: 0;
	margin:0;
	overflow: auto;
	margin-left:1%;
 }

 div.drow {
	display: inline-block;
	width:100%;
	padding: 5px;
 }

 div.dcell {
	width: 48%;
	display: inline-block;
	padding: 5px;
	margin: 1%;
	height:1000px ;
	max-height: 1200px;
	overflow:auto;
	text-align:center;
	border: #000000 solid 1px;
	border:none;
 }

 div.dcell50 {
	width: 48%;
	display: inline-block;
	padding: 5px;
	border: #000000 solid 1px;
	margin: 1%;
	height:1000px !important;
	max-height: 1200px !important;
	overflow:auto;
	border:none;
 }

/*IdCreator*/
 #iphone_1{
	width:380px;
	height:400px;
	max-height:700px;
	margin-left: 25%;
 }

 #iphone_2{
	width:175px;
	max-height:300px;
	margin-top:45px;
	margin-left:8px;
 }

 .box {
	background-color: white;
	color: #fff;
	border: 1px solid black;
	border-radius: 5px;
	padding: 0;
	font-size: 100%;
	text-align: left;
	height: 100%;
	max-height:600px;
	overflow:auto;
 }

 .wrapper {
	display: grid;
	grid-template-columns: 33% 33% 33%;
	grid-template-columns:repeat(3,1fr);
	grid-gap: 5px;
	background-color: transparent;
	color: #444;
	height: 1200px;
	height:auto;
	margin-left:1%;
	margin-right:1%;
 }

 .wrapper_one {
	display: grid;
	grid-template-columns: 80%;
	grid-gap: 5px;
	background-color: transparent;
	color: #444;
	height: 800px;
	margin-left:16%;
	margin-right:4%;
 }

 .wrapper_two {
	display: grid;
	grid-template-columns: 40% 40%;
	grid-gap: 5px;
	background-color: transparent;
	color: #444;
	height: 800px;
	margin-left:16%;
	margin-right:0;
 }


/* Transactions*/

.table-wrapper {
	background: white;
}

#reportTable thead{
}
#reportTable thead th{
	text-align:left !important;
}

#reportTable thead th:first-child{
	border-top-left-radius:12px;
}

#reportTable thead th:last-child{
	border-top-right-radius:12px;
}

.filter-row input.col-filter {
	width: 80%;
	box-sizing: border-box;
	padding: 4px;
	padding-left:5px;
	color:var(--text-color);
	font-size:1.4rem;
	border-radius:var(--input-radius);
	border:none;
	font-size: 1.2rem;
	transition: all 0.2s ease;
	margin-left:0;
}

.filter-row input.col-filter::placeholder{
	color:var(--text-color);
	opacity:0.5;
	font-size:1.2rem;
}

/* filter close button */
.filter-row button.clear-filter {
	margin-left:0;
	padding:6px 8px;
	cursor:pointer;
	color:white;
	background-color:transparent;
	border:none;
}

/* titles */
.header-row th {
	background: var(--card);
	cursor: pointer;
	user-select: none;
	position: relative;
	text-align:left;
	color:var(--text-color);
	padding-left:none;
	/*text-transform: none;*/
}

.header-row td {
	cursor:pointer;
	font-weight: 800;
	font-size:1.4rem;
	padding-left:5px;
	white-space:nowrap;
	/*border-bottom:1px solid var(--text-color);*/
	padding-bottom:1px;
}

#reportTable td{
	padding-left:10px !important;
}

/* sort indicator */
.sort-indicator {
	display: inline-block;
	width: 1.1em;
	text-align: center;
	margin-left: 6px;
	color: var(--bg);
	font-size: 1.2rem;
	line-height: 1;
}
.sort-indicator.asc::after { content: "▲"; }
.sort-indicator.desc::after { content: "▼"; }

/* small visual for active filtered columns */
.filter-row input.col-filter:not(:placeholder-shown) {
	outline: 2px solid rgba(26,115,232,0.12);
}

/*
@media (max-width:640px){
	.report-table th, .report-table td { padding: 6px 8px; font-size:13px; }
}
*/

/* ===== Responsiveness ===== */

@viewport {
	width: device-width;
	zoom: 1.0;
	user-zoom: fixed;
}

@media (max-width:900px){
	.card__body{
		grid-template-columns:1fr;
	}

	.card__cell + .card__cell{
		border-left:0;border-top:1px solid rgba(12,42,82,.12);
	}

	.app{
		padding:24px;
	}

	table.c40{
		width:80% !important;
		margin-left:10%;
	}

	table.c80{
		width:98% !important;
		margin-left:1%;
	}
	.table-wrapper {
		overflow-x: auto;
		width: 100%;
	}
}

@media only screen and (max-width: 768px) {
	.stack{
		grid-template-columns:1fr;
	}

	.site-loginout-topright {
		position: static;
		margin: 8px 0;
	}

	table.c20,
	table.c30,
	table.c35,
	table.c40,
	table.c60,
	table.c80,
	table.c100{
		margin-left:1%;
		width:98%;
	}

	div.cell{
		margin-bottom:20px !important;
	}

	table.c100{
		margin-left:0;
		width:100%;
	}

	.table-wrapper {
		overflow-x: auto;
		width: 100%;
	}
	.card.expanded {
		height: auto;    /* allow natural flow on small screens */
		max-height: none;
	}

	.client_submit{
		min-height:30px;
		display:inline-block !important;
	}
}

@media print{
	table.c30-stats {
		margin-left:0 !important;
		width:100% !important;
		max-width: auto !important;
	}
}