/*

:root {
	--cselected: #e0cfa3;
	--cnotselected: #b3a582;
	--cinputs: #e9ddbe;
	--cpcover: #e0cfa3;
	--cpback: #e0cfa3;
	--placehold: #a39a85;
	}

:root {
	--cselected: #e0e0e0
	--cnotselected: #9ABCEA;
	--cinputs: #fefefe;
	--cpcover:  #e0e0e0
	--cpback:  #e0e0e0
	--placehold: #9ABCEA;
	}

darkblue #769BCC
light blue #9ABCEA

*/
:root {
	--cselected: #d0d0d0;
	--cnotselected: #9ABCEA;
	--cinputs: #f0f0f0;
	--cpcover:  #d0d0d0;
	--cpback:  #d0d0d0;
	--placehold:#769BCC;
	}


input::-webkit-input-placeholder {
color: var(--placehold) !important;
}
 
input:-moz-placeholder { /* Firefox 18- */
color: var(--placehold) !important;  
}
 
input::-moz-placeholder {  /* Firefox 19+ */
color: var(--placehold) !important;  
}
 
input:-ms-input-placeholder {  
color: var(--placehold) !important;  
}	

/*
input[type="checkbox"]:checked  	{
 background-color: var(--cinputs) !important;
 content: '\2700';
 
}
input[type=checkbox]:checked:after {
    background: green !important;
    color: black !important;
}
input[type='checkbox']:after {
    box-shadow: none !important;
}
*/	
	
input[type=text] 	{
 background: var(--cinputs);
 border: 2px solid black !important;  
 font-size: 16px;
}
	
input[readonly], input[readonly]:hover { background: var(--cselected) !important; }


textarea::-webkit-input-placeholder {
color: var(--placehold) !important;
}
 
textarea:-moz-placeholder { /* Firefox 18- */
color: var(--placehold) !important;  
}
 
textarea::-moz-placeholder {  /* Firefox 19+ */
color: var(--placehold) !important;  
}
 
textarea:-ms-input-placeholder {  
color: var(--placehold) !important;  
}	


textarea[readonly], textarea[readonly]:hover { background: var(--cselected) !important; }
	
	
td {
   padding: 0;
   padding-left: 1%;
   border: 0px; 
   border-collapse: collapse;
}

/*
table {
  border: 2px solid black  !important;  
   border-collapse: collapse;
   display: table;
}*/

.cinputs {
 background: var(--cinputs);
 border: 2px solid black !important;  
 color: black !important; 
 font-size: 18px !important; 
 height: 36px !important; 
}

.cinputsleft {
 background: var(--cinputs);
 border-top: 2px solid black !important;  
 border-left: 2px solid black !important;  
 border-right: 0px var(--cinputs) !important;  
 border-bottom: 2px solid black !important;  
 color: black !important; 
 font-size: 18px !important; 
 height: 40px !important; 
	margin-right: -10px;
}

.cinputsright {
 background: var(--cinputs);
 border-top: 2px solid black !important;  
 border-left: 0px var(--cinputs) !important;  
 border-right: 2px solid black !important;  
 border-bottom: 2px solid black !important;  
 color: black !important; 
 font-size: 18px !important; 
 height: 40px !important; 
	margin-left: -10px;
}


.cselected {
 background: var(--cselected);
}

.notcselected {
 background: var(--cnotselected);
}

.cpcover {
 background: var(--cpcover);
}

.cpback {
 background: var(--cpback);
}

body { padding: 0px; }

nav {
	position: relative;
	z-index: 1;input[type="number"]
	white-space: nowrap;
}

nav a {
	position: relative;
	display: inline-block;
	padding: 1.5em 1.5em 1em;
/*	color: inherit;*/
	color: black;
	text-decoration: none;
	font-size: 1.2em;
	font-weight: bold;
	margin: 0 -7px;
	margin-bottom: -3px;
} 

nav a::before,
main {
	border: .1em solid #000000;
}

nav a::before {
	content: ''; /* To generate the box */
	position: absolute;
	top: 0; right: 0; bottom: .5em; left: 0;
	z-index: -1;
	border-bottom: none;
	border-radius: 10px 10px 0 0;
	background: var(--cnotselected);
	box-shadow: 0 2px hsla(0,0%,100%,.5) inset;
	transform: perspective(5px) rotateX(2deg);
	transform-origin: bottom;
}

nav.left a {
	padding: 1.5em 2em 1em 1em;
}

nav.left a::before {
	transform-origin: bottom left;
}

nav.right a {
	padding: 1.5em 1em 1em 2em;
}

nav.right a::before {
	transform-origin: bottom right;
}

nav a.selected {
	z-index: 2;
}

nav a.selected::before {
	margin-bottom: -1px;
	border-top-width: 3px;
}

nav a:hover,
nav a:hover::after,
nav a:focus,
nav a:focus::after 
{
	outline: 0;
	text-decoration: underline;
/*	color: white;*/
	text-shadow: 1px 1px black;
}

nav a:focus {
  outline: 0;
}

nav a.selected::before,
.ptabmain {
	background: var(--cselected);
	color: black;
}

.ptabmain {
	display: block;
	margin: -8px 0 30px -15px;
/*	padding: 1em;*/
/*	border-radius: 3px;*/
	border-left: none;
	border-right: none;
	border-bottom: none;
}

.ptabmainx {
/*	padding: 1em;*/
}


#pcontent {
  background: var(--cselected);
/*  padding: 0.5em;
/*  height: 160vh; */
  position: relative;
  z-index: 2; 
  top: 0;
  bottom 0;
  left 0;
  right 0;
  color: black;
/*  border-radius: 0 5px 5px 5px;
  box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);*/
}

.cpbutton {
    /*adjust the roundness*/
    color: black;
    border-radius: 4px;
    moz-border-radius: 4px;
    webkit-border-radius: 4px;
    /*adjust height and width*/
    /*change border colour*/
    border:2px black solid;
    background: var(--cinputs);
	 width: fit-content;
/*    height: 35px;  */
	height: fit-content; 
	padding-top: 5px;
	padding-bottom: 5px;

}

.cpbutton:hover {
    color: limegreen;
    background-color: #fefefe;
}

.cbbutton {
    /*adjust the roundness*/
    color: black;
    border-radius: 4px;
    moz-border-radius: 4px;
    webkit-border-radius: 4px;
    /*adjust height and width*/
    /*change border colour*/
    border:2px black solid;
    background: var(--cpback);
	 width: fit-content;
/*    height: 35px;  */
	height: fit-content; 
	padding-top: 5px;
	padding-bottom: 5px;

}

.cpbuttonleft {
    /*adjust the roundness*/
 border-top: 2px solid black !important;  
 border-left: 2px solid black !important;  
 border-bottom: 2px solid black !important;  
 border-right: 0px var(--cinputs) !important;  
 color: black !important; 
    border-radius: 4px;
    moz-border-radius: 4px;
    webkit-border-radius: 4px;
    /*adjust height and width*/
    /*change border colour*/
    background: var(--cinputs);
	 width: fit-content;
/*    height: 35px;  */
	height: fit-content; 
	padding-top: 5px;
	padding-bottom: 5px;
	margin-right: -10px;

}

.cpbuttonright {
    /*adjust the roundness*/
 border-top: 2px solid black !important;  
 border-right: 2px solid black !important;  
 border-bottom: 2px solid black !important;  
 border-left: 0px var(--cinputs) !important;  
 color: black !important; 
    border-radius: 4px;
    moz-border-radius: 4px;
    webkit-border-radius: 4px;
    /*adjust height and width*/
    /*change border colour*/
    background: var(--cpback);
	 width: fit-content;
/*    height: 35px;  */
	height: fit-content; 
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: -10px;

}

.cpbutton:disabled {
    /*adjust the roundness*/
    color: gray;
    border-radius: 4px;
    moz-border-radius: 4px;
    webkit-border-radius: 4px;
    /*adjust height and width*/
    /*change border colour*/
    border:2px black solid;
    background: var(--cinputs);
	 width: fit-content;
/*    height: 35px;  */
	height: fit-content; 
	padding-top: 5px;
	padding-bottom: 5px;

}


.cpchangebutton {
    /*adjust the roundness*/
    color: white;
    border-radius: 4px;
    moz-border-radius: 4px;
    webkit-border-radius: 4px;
    /*adjust height and width*/
    height: 30px;
/*    width: 10px; */
    /*change border colour*/
    border:1px #ffffff solid;
    background: red;

}

.cpokbutton {
    /*adjust the roundness*/
    color: white;
    border-radius: 4px;
    moz-border-radius: 4px;
    webkit-border-radius: 4px;
    /*adjust height and width*/
    height: 30px;
/*    width: 10px; */
    /*change border colour*/
    border:1px #ffffff solid;
    background: green;

}


.cpgobutton {
    /*adjust the roundness*/
    color: white;
    border-radius: 4px;
    moz-border-radius: 4px;
    webkit-border-radius: 4px;
    /*adjust height and width*/
    height: 30px;
/*    width: 10px; */
    /*change border colour*/
    border:1px #ffffff solid;
    background: green;

}

.changeid {
display: none;
}

.cperror {color: red;}


 .chart_tooltips_css 
 	{
    background-color: #f0f0f0 ! important;
    padding: 4px;
    border-color: #555;
  	};

   #supported-chart-icons div.icon {
        width: 64px;
        height: 64px;
        background-image: url(/images/chart-icons/chart-image-sprite.png);
        float: left;
        margin-left: 8px;
        margin-right: 8px;
        background-repeat: none;
        text-align: center;
        opacity: 0.5;
        transform: scale(0.85);
        transition: opacity .5s, transform .5s;
        height: 70px;
        cursor: pointer;
    }
    
    #supported-chart-icons div.icon:hover {
        opacity: 1;
        transform:  scale(1.1);
    }

    #supported-chart-icons div.icon div {
        position: relative;
        top: 70px;
    }
    
    td.chart {
        text-align: center;
    }


.qj_visuallyhide 
	{ 
 	position: absolute !important; 
  	overflow: hidden !important; 
  	clip: rect(0 0 0 0) !important;
  	height: 1px !important; 
  	width: 1px !important; 
  	margin: -1px !important; 
  	padding: 0 !important; 
  	border: 0 !important; 
  	
   top: -9999px !important;
   left: -9999px !important; 
	}

.qj_hide 
	{ 
  	display: none !important; 
	}

/*
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input[type="number"]
	{
	display: inline;
	}
*/