.ftli-thisform {
    background-color: #F7F8F9;
    border: solid 1px #d5d5d5;
    padding: 3px;
/*     width: 98%; */
/*     border-collapse: collapse; */
}

table#ftli-config_rawEdit{
}

table#ftli-config_rawEdit input{
    width: 200px;
}

a:link, a:visited {
	color: #333333;
	text-decoration: none;
	font-weight: bold;
	font-size: 12px;
}

a:hover {
	color: #333333;
	text-decoration: underline;
}



//#g-mainbar {
//	padding: 1rem 0;
//	font-size: 0;
//	line-height: 0;
//	color: #424753;
//}

.hrFTBlue {
	margin: 0;
	height: 10px;
	background: #0069B4;
}

.hrFTRed {
	height: 10px;
	background: #FF0000;
}

.hrYellowSmall {
	height: 2px;
	background: #FFCC00;
}



.FTLItableC{
	line-height: 1;
	background-color: #FFFFFF;
	//font-family: Arial, Helvetica, sans-serif;
	font-size:1rem;
	font-weight: normal;
	text-decoration: none;
	color: #333333;
	text-align: center;
	table-layout: fixed;
	cellpadding:2px;
    border-spacing: 0;
	border: none;
	vertical-align: top;
    width: auto;	
}

.FTLItableL{
	line-height: 1;
	background-color: #FFFFFF;
	//font-family: Arial, Helvetica, sans-serif;
	font-size:1rem;
	font-weight: normal;
	text-decoration: none;
	color: #333333;
	text-align: left;
	table-layout: fixed;
	cellpadding:2px;
    border-spacing: 0;
	border: none;
	vertical-align: top; 
	width: auto;
}




.TableRowOdd{
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight: normal;
	text-decoration: none;
	color: #333333;
}

.TableRowOdd:hover {
	background-color: #DDDDFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight: normal;
	text-decoration: none;
	color: #333333;
}

.TableRowEven{
	background-color: #E0E0E0;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight: normal;
	text-decoration: none;
	color: #333333;
}

.TableRowEven:hover {
	background-color: #DDDDFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight: normal;
	text-decoration: none;
	color: #333333;
}
.TableRowYellow{
	background-color: #FFFF99;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight: normal;
	text-decoration: none;
	color: #333333;
}

.TableRowYellow:hover {
	background-color: #FFFF4D;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight: normal;
	text-decoration: none;
	color: #333333;
}

.TableRowOrange{
	background-color: #FFCE99;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight: normal;
	text-decoration: none;
	color: #333333;
}

.TableRowOrange:hover {
	background-color: #ffb566;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight: normal;
	text-decoration: none;
	color: #333333;
}


.TableRowRed{
	background-color: #FF9999;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight: normal;
	text-decoration: none;
	color: #333333;
}

.TableRowRed:hover {
	background-color: #FF6666;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight: normal;
	text-decoration: none;
	color: #333333;
}

.TableRowOddGreen{
	background-color: #C2F0C2;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight: normal;
	text-decoration: none;
	color: #333333;
}

.TableRowOddGreen:hover {
	background-color: #DDDDFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight: normal;
	text-decoration: none;
	color: #333333;
}

.TableRowEvenGreen{
	background-color: #CCFFCC;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight: normal;
	text-decoration: none;
	color: #333333;
}

.TableRowEvenGreen:hover {
	background-color: #DDDDFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight: normal;
	text-decoration: none;
	color: #333333;
}

.ftlith{
	font-family: Arial, Helvetica;
	text-align:left;
	color:#606F79;
	font-size: 12px;
	height: 26px;
	background-image:   url(/components/com_ftli/theme/tile_back1.gif);
	background-position: top;
	background-repeat: repeat-x;
	padding-top: 8px;
	padding-right: 12px;
	padding-bottom: 8px;
	padding-left: 8px;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px solid #CED2D6;

}

.ftliTableHeader{
//	background-image:  url(/components/com_ftli/theme/tile_sub.gif);
//	background-color: #708088 ;
//	border-left: 1px solid #95A5AD;
//	border-right: 0px solid #62727A;
//	margin: 0px;
//	color : white;
//	padding-top: 6px;
//	padding-right: 12px;
//	padding-bottom: 6px;
//	padding-left: 12px;
//	font-size: 12px;
//	font-weight: bold;
//	background-image:  url(/components/com_FTDB/theme/tile_sub.gif);
	background-color: #708088 ;
	border-left: 1px solid #95A5AD;
	border-right: 0px solid #62727A;
	margin: 0px;
	color : white;
	padding-top: 6px;
	padding-right: 12px;
	padding-bottom: 6px;
	padding-left: 12px;
	font-size: 12px;
	font-weight: bold;

}

#ftlimain{
	font-family: Arial, Helvetica sans-serif;
}

.ftli-infoTabs{
    float: right;
    width: 45%;
}


#ftli-credits h3{
    width: 60%;
    margin-bottom: .8ex;
    margin-top: 1ex;
    border-bottom: 1px solid #c64934;
}

#ftli-credits dt{
    margin-top: 1.3ex;
}

#ftli-credits dd{
    margin-top: .3ex;
}

#ftli-credits dd a{
    margin-left: 1ex;
    color: #888;
    font-size: smaller;
}

#ftli-cpanelDebug{
    clear: left;
}

#ftli-cpanelDebug div.icon a{
    border: 1px dashed #d00;
}

#cpanel{
    margin-right: 45%;
}

div.main{
text-align:left;
font-family : Arial, Helvetica sans-serif;
}

.icon{
/*     float:left; */
/*     width: 120px; */
/*     padding: 10px; */
}

/* utility selectors */
.ftli-clr{
    clear:both;
    line-height:0px;
}

.ftli-footer{
	font-size: 12px;
}

iframe {
  margin-top: 20px;
  margin-bottom: 30px;

  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;

  -moz-box-shadow: 4px 4px 14px #000;
  -webkit-box-shadow: 4px 4px 14px #000;
  box-shadow: 4px 4px 14px #000;
  
  background-color: #FFFFFF;
}

/* Onderstaande voor proef om achtergrondkleur te wijzigen bij leeg veld */
.TableTdEmpty{
	background-color: #FFD6CC;
}

/* Onderstaande voor het weergeven van een al bestaand record bij toevoegen onderdeel / doos */
.Checkfail{

	border: 5px solid red;
	background-color: lightgrey;
	padding: 25px;
	color: red;
}

/* onderstaande ontvangen van Walter Stroebel  (info@infcomtec.nl) */
.TableSmallLines{
    border-width: 0 0 1px 1px;
    border-spacing: 0;
    border-collapse: collapse;
    border-style: solid;
}

/* from the following site   */
/* https://www.jimmybonney.com/articles/column_header_rotation_css/ */

.table-header-rotated th.row-header{
  width: auto;
}

.table-header-rotated td{
  width: 40px;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  vertical-align: middle;
  text-align: center;
}

.table-header-rotated th.rotate-45{
  height: 150px;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  position: relative;
  vertical-align: bottom;
  padding: 0;
  font-size: 12px;
  line-height: 0.8;
}

.table-header-rotated th.rotate-45 > div{
  position: relative;
  top: 0px;
  left: 75px; /* 150 * tan(45) / 2 = 75 where 150 is the height on the cell and 45 is the transform angle*/
  height: 100%;
  -ms-transform:skew(-45deg,0deg);
  -moz-transform:skew(-45deg,0deg);
  -webkit-transform:skew(-45deg,0deg);
  -o-transform:skew(-45deg,0deg);
  transform:skew(-45deg,0deg);
  overflow: hidden;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
}

.table-header-rotated th.rotate-45 span {
  -ms-transform:skew(45deg,0deg) rotate(315deg);
  -moz-transform:skew(45deg,0deg) rotate(315deg);
  -webkit-transform:skew(45deg,0deg) rotate(315deg);
  -o-transform:skew(45deg,0deg) rotate(315deg);
  transform:skew(45deg,0deg) rotate(315deg);
  position: absolute;
  bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
  left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/
  display: inline-block;
  // width: 100%;
  width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
  text-align: left;
  // white-space: nowrap; /*whether to display in one line or not*/
}

/* self added 90 degrees   */
/* by the example above with 45 degrees  */


.table-header-rotated th.rotate-90{
  height: 80px;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  position: relative;
  vertical-align: bottom;
  padding: 0;
  font-size: 12px;
  line-height: 0.8;
}

.table-header-rotated th.rotate-90 > div{
  position: relative;
  top: 0px;
  left: 40px; /* 80 * tan(90) / 2 = 40 where 80 is the height on the cell and 90 is the transform angle*/
  height: 100%;
  -ms-transform:skew(-90deg,0deg);
  -moz-transform:skew(-90deg,0deg);
  -webkit-transform:skew(-90deg,0deg);
  -o-transform:skew(-90deg,0deg);
  transform:skew(-90deg,0deg);
  overflow: hidden;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
}

.table-header-rotated th.rotate-90 span {
  -ms-transform:skew(90deg,0deg) rotate(270deg);
  -moz-transform:skew(90deg,0deg) rotate(270deg);
  -webkit-transform:skew(90deg,0deg) rotate(270deg);
  -o-transform:skew(90deg,0deg) rotate(270deg);
  transform:skew(90deg,0deg) rotate(270deg);
  position: absolute;
  bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
  left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/
  display: inline-block;
  // width: 100%;
  width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
  text-align: left;
  // white-space: nowrap; /*whether to display in one line or not*/
}




/* from the following site   */
/* https://css-tricks.com/rotated-table-column-headers/ */