canvas {
    height: 100%;
    width: 100%;
}
h6 { font-weight: bold; }

#appContainer {
    position: relative;
    margin-top: 16px;
}
#canvasContainer { 
    /*height: 580px;*/
    height: calc(100vh - 156px);
    position: static!important;
    padding: 1px!important;
    margin: 1px!important;
    /*background-color: rgba(188, 188, 188, 0.44)!important;*/
    border: 1px solid #dee3df!important;
}
.menubar {
    position: absolute; top: 8px; right: 8px; width: 360px;
    border: 1px solid #dee3df;
    text-align: left;
    background-color: #eee;
    box-shadow: 0px 0px 6px rgb(120 120 120 / 40%);
}

/* Arkeo Acordion Start*/
.tabconf {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  overflow: hidden;
}
.tabconf input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tabconf label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
  /*border: 1px solid #eaeaea;*/
}
.tabconf-content {
  max-height: 0;
  /*overflow-x: hidden;*/
  overflow-y: auto;
  background: #fff;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
  border-top: 1px solid #ccc;
  padding: 0px;
}
/* :checked */
.tabconf input:checked ~ .tabconf-content {
  max-height: 70vh;
}
/* Icon */
.tabconf label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 1.2em;
  height: 1.2em;
  line-height: 1.2;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
.tabconf input[type=checkbox] + label::after {
  content: "+";
  color: #96a499;
  font-size: 2.4em;
  font-weight: normal;
}
.tabconf input[type=radio] + label::after {
  content: "\25BC";
}
.tabconf input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
.tabconf input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}
.tabhl {
    font-family: "fira_sans_condensedlight"; font-style: normal; font-weight: normal; color: #363636;
    font-size: 1em; margin: 0.2em 0em 0em 0em; 
}
.is-active::before {

}
/* Arkeo Acoridion End*/
.colorRaster {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    height: 180px;
    margin: 6px;
    justify-content: space-around;
}
.colorRastersml {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    height: 72px;
    margin: 6px;
}
.materialRaster {
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    height: 557px;
    align-content: flex-start;
    justify-content: space-evenly;
    margin: 6px;
}
.colorItem {
    padding: 3px;
    border-radius: 9px;
    font-size: 0.5em;
    text-align: center;
    border: 2px solid #dee3df;
    margin: 2px;
}
.ciPedestal, .colorSeal, .ciCorner {
    /*flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;*/
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 2px solid #dee3df;
    margin: 2px;
}
.ciPedestal:hover, .colorSeal:hover, .ciCorner:hover {
    border: 2px solid #96a499;
    cursor: pointer;
}
.ciMaterial {
    /*flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;*/
    /*width: 32px;
    height: 32px;*/
    border: 2px solid #dee3df;
    margin: 2px;
    max-width: 70px;
    font-size: 0.65em;
}
.ciMaterial > img {
    width: 100%;
}
.ciMaterial:hover {
    border: 2px solid #96a499;
    cursor: pointer;
}
.seal1  {background-color: #363636;}
.seal2  {background-color: #000000;}

.ral1000 {background-color: #BEBD7F;}
.ral1001 {background-color: #C2B078;}
.ral1002 {background-color: #C6A664;}
.ral1003 {background-color: #E5BE01;}
.ral1004 {background-color: #CDA434;}
.ral1005 {background-color: #A98307;}
.ral1006 {background-color: #E4A010;}
.ral1007 {background-color: #DC9D00;}
.ral1011 {background-color: #8A6642;}
.ral1012 {background-color: #C7B446;}
.ral1013 {background-color: #EAE6CA;}
.ral1014 {background-color: #E1CC4F;}
.ral1015 {background-color: #E6D690;}
.ral1016 {background-color: #EDFF21;}
.ral1017 {background-color: #F5D033;}
.ral1018 {background-color: #F8F32B;}
.ral1019 {background-color: #9E9764;}
.ral1020 {background-color: #999950;}
.ral1021 {background-color: #F3DA0B;}
.ral1023 {background-color: #FAD201;}
.ral1024 {background-color: #AEA04B;}
.ral1026 {background-color: #FFFF00;}
.ral1027 {background-color: #9D9101;}
.ral1028 {background-color: #F4A900;}
.ral1032 {background-color: #D6AE01;}
.ral1033 {background-color: #F3A505;}
.ral1034 {background-color: #EFA94A;}
.ral1035 {background-color: #6A5D4D;}
.ral1036 {background-color: #705335;}
.ral1037 {background-color: #F39F18;}
.ral2000 {background-color: #ED760E;}
.ral2001 {background-color: #C93C20;}
.ral2002 {background-color: #CB2821;}
.ral2003 {background-color: #FF7514;}
.ral2004 {background-color: #F44611;}
.ral2005 {background-color: #FF2301;}
.ral2007 {background-color: #FFA420;}
.ral2008 {background-color: #F75E25;}
.ral2009 {background-color: #F54021;}
.ral2010 {background-color: #D84B20;}
.ral2011 {background-color: #EC7C26;}
.ral2012 {background-color: #E55137;}
.ral2013 {background-color: #C35831;}
.ral3000 {background-color: #AF2B1E;}
.ral3001 {background-color: #A52019;}
.ral3002 {background-color: #A2231D;}
.ral3003 {background-color: #9B111E;}
.ral3004 {background-color: #75151E;}
.ral3005 {background-color: #5E2129;}
.ral3007 {background-color: #412227;}
.ral3009 {background-color: #642424;}
.ral3011 {background-color: #781F19;}
.ral3012 {background-color: #C1876B;}
.ral3013 {background-color: #A12312;}
.ral3014 {background-color: #D36E70;}
.ral3015 {background-color: #EA899A;}
.ral3016 {background-color: #B32821;}
.ral3017 {background-color: #E63244;}
.ral3018 {background-color: #D53032;}
.ral3020 {background-color: #CC0605;}
.ral3022 {background-color: #D95030;}
.ral3024 {background-color: #F80000;}
.ral3026 {background-color: #FE0000;}
.ral3027 {background-color: #C51D34;}
.ral3028 {background-color: #CB3234;}
.ral3031 {background-color: #B32428;}
.ral3032 {background-color: #721422;}
.ral3033 {background-color: #B44C43;}
.ral4001 {background-color: #6D3F5B;}
.ral4002 {background-color: #922B3E;}
.ral4003 {background-color: #DE4C8A;}
.ral4004 {background-color: #641C34;}
.ral4005 {background-color: #6C4675;}
.ral4006 {background-color: #A03472;}
.ral4007 {background-color: #4A192C;}
.ral4008 {background-color: #924E7D;}
.ral4009 {background-color: #A18594;}
.ral4010 {background-color: #CF3476;}
.ral4011 {background-color: #8673A1;}
.ral4012 {background-color: #6C6874;}
.ral5000 {background-color: #354D73;}
.ral5001 {background-color: #1F3438;}
.ral5002 {background-color: #20214F;}
.ral5003 {background-color: #1D1E33;}
.ral5004 {background-color: #18171C;}
.ral5005 {background-color: #1E2460;}
.ral5007 {background-color: #3E5F8A;}
.ral5008 {background-color: #26252D;}
.ral5009 {background-color: #025669;}
.ral5010 {background-color: #0E294B;}
.ral5011 {background-color: #231A24;}
.ral5012 {background-color: #3B83BD;}
.ral5013 {background-color: #1E213D;}
.ral5014 {background-color: #606E8C;}
.ral5015 {background-color: #2271B3;}
.ral5017 {background-color: #063971;}
.ral5018 {background-color: #3F888F;}
.ral5019 {background-color: #1B5583;}
.ral5020 {background-color: #1D334A;}
.ral5021 {background-color: #256D7B;}
.ral5022 {background-color: #252850;}
.ral5023 {background-color: #49678D;}
.ral5024 {background-color: #5D9B9B;}
.ral5025 {background-color: #2A6478;}
.ral5026 {background-color: #102C54;}
.ral6000 {background-color: #316650;}
.ral6001 {background-color: #287233;}
.ral6002 {background-color: #2D572C;}
.ral6003 {background-color: #424632;}
.ral6004 {background-color: #1F3A3D;}
.ral6005 {background-color: #2F4538;}
.ral6006 {background-color: #3E3B32;}
.ral6007 {background-color: #343B29;}
.ral6008 {background-color: #39352A;}
.ral6009 {background-color: #31372B;}
.ral6010 {background-color: #35682D;}
.ral6011 {background-color: #587246;}
.ral6012 {background-color: #343E40;}
.ral6013 {background-color: #6C7156;}
.ral6014 {background-color: #47402E;}
.ral6015 {background-color: #3B3C36;}
.ral6016 {background-color: #1E5945;}
.ral6017 {background-color: #4C9141;}
.ral6018 {background-color: #57A639;}
.ral6019 {background-color: #BDECB6;}
.ral6020 {background-color: #2E3A23;}
.ral6021 {background-color: #89AC76;}
.ral6022 {background-color: #25221B;}
.ral6024 {background-color: #308446;}
.ral6025 {background-color: #3D642D;}
.ral6026 {background-color: #015D52;}
.ral6027 {background-color: #84C3BE;}
.ral6028 {background-color: #2C5545;}
.ral6029 {background-color: #20603D;}
.ral6032 {background-color: #317F43;}
.ral6033 {background-color: #497E76;}
.ral6034 {background-color: #7FB5B5;}
.ral6035 {background-color: #1C542D;}
.ral6036 {background-color: #193737;}
.ral6037 {background-color: #008F39;}
.ral6038 {background-color: #00BB2D;}
.ral7000 {background-color: #78858B;}
.ral7001 {background-color: #8A9597;}
.ral7002 {background-color: #7E7B52;}
.ral7003 {background-color: #6C7059;}
.ral7004 {background-color: #969992;}
.ral7005 {background-color: #646B63;}
.ral7006 {background-color: #6D6552;}
.ral7008 {background-color: #6A5F31;}
.ral7009 {background-color: #4D5645;}
.ral7010 {background-color: #4C514A;}
.ral7011 {background-color: #434B4D;}
.ral7012 {background-color: #4E5754;}
.ral7013 {background-color: #464531;}
.ral7015 {background-color: #434750;}
.ral7016 {background-color: #293133;}
.ral7021 {background-color: #23282B;}
.ral7022 {background-color: #332F2C;}
.ral7023 {background-color: #686C5E;}
.ral7024 {background-color: #474A51;}
.ral7026 {background-color: #2F353B;}
.ral7030 {background-color: #8B8C7A;}
.ral7031 {background-color: #474B4E;}
.ral7032 {background-color: #B8B799;}
.ral7033 {background-color: #7D8471;}
.ral7034 {background-color: #8F8B66;}
.ral7035 {background-color: #D7D7D7;}
.ral7036 {background-color: #7F7679;}
.ral7037 {background-color: #7D7F7D;}
.ral7038 {background-color: #B5B8B1;}
.ral7039 {background-color: #6C6960;}
.ral7040 {background-color: #9DA1AA;}
.ral7042 {background-color: #8D948D;}
.ral7043 {background-color: #4E5452;}
.ral7044 {background-color: #CAC4B0;}
.ral7045 {background-color: #909090;}
.ral7046 {background-color: #82898F;}
.ral7047 {background-color: #D0D0D0;}
.ral7048 {background-color: #898176;}
.ral8000 {background-color: #826C34;}
.ral8001 {background-color: #955F20;}
.ral8002 {background-color: #6C3B2A;}
.ral8003 {background-color: #734222;}
.ral8004 {background-color: #8E402A;}
.ral8007 {background-color: #59351F;}
.ral8008 {background-color: #6F4F28;}
.ral8011 {background-color: #5B3A29;}
.ral8012 {background-color: #592321;}
.ral8014 {background-color: #382C1E;}
.ral8015 {background-color: #633A34;}
.ral8016 {background-color: #4C2F27;}
.ral8017 {background-color: #45322E;}
.ral8019 {background-color: #403A3A;}
.ral8022 {background-color: #212121;}
.ral8023 {background-color: #A65E2E;}
.ral8024 {background-color: #79553D;}
.ral8025 {background-color: #755C48;}
.ral8028 {background-color: #4E3B31;}
.ral8029 {background-color: #763C28;}
.ral9001 {background-color: #FDF4E3;}
.ral9002 {background-color: #E7EBDA;}
.ral9003 {background-color: #F4F4F4;}
.ral9004 {background-color: #282828;}
.ral9005 {background-color: #0A0A0A;}
.ral9006 {background-color: #A5A5A5;}
.ral9007 {background-color: #8F8F8F;}
.ral9010 {background-color: #FFFFFF;}
.ral9011 {background-color: #1C1C1C;}
.ral9016 {background-color: #F6F6F6;}
.ral9017 {background-color: #1E1E1E;}
.ral9018 {background-color: #D7D7D7;}
.ral9022 {background-color: #9C9C9C;}
.ral9023 {background-color: #828282;}

.is-active i.check::after {
    content: ' ';
    display: inline-block;
    position: relative;
    background: url("images/piktogram_w_checked.svg") no-repeat;
    background-size: contain;
    height: 28px;
    width: 28px;
}
.is-active {
    box-shadow: 0px 0px 6px rgb(120 120 120 / 60%);
}
.is-active span i {
    display: inline-block;
}

@media only screen and (max-width: 599px) {
    .pageHl {display: none;}
}
@media only screen and (min-width: 600px ) {
    .pageHl {
        position: absolute;
        top: -100px;
        left: 87px;
        z-index: 20;
    }
    .pageHl h1 { font-size: 2.3em; margin: 0em; padding: 0em; }
    .pageSubHl {display: none; }
}
@media only screen and (min-width: 1113px ) {
    .pageHl { position: absolute; top: 8px; left: 24px; }
    .pageSubHl {display: initial; }
}