/* racoondation css */

body{
 margin: 0;
 padding: 0;
}
#fHeaderZone{
  position:fixed;
	z-index:2000;
  top:0;
  height: 48px;
}
#fHeaderZoneL{
  display:inline-block;
  z-index:2000;
  height: 44px;
  margin:0;
  padding: 0;
  border-bottom: 1px solid #e0e0e1;
  vertical-align: top;
}
#fHeaderZoneM{
  display:inline-block;
  z-index:2000;
  height: 44px;
  margin:0;
  padding: 0;
  border-bottom: 1px solid #e0e0e1;
  vertical-align: top;
  font-size: 0;
}
#fHeaderZoneR{
  display:inline-block;
  z-index:2000;
  height: 44px;
  margin:0;
  padding: 0;
  border-bottom: 1px solid #e0e0e1;
  text-align: right;
  vertical-align: top;
}
#fHeaderZoneR:hover{

}
#fHeaderZoneProgress{
    display: block;
    text-align: center;
    width: 100%;
    height: 4px;
    background-color: #6eafff;
    transition: width .3s;
}
#fHeaderZoneProgress.hide {
    opacity: 0;
    transition: opacity 1.3s;
}

#fHeaderZoneMappName{
  display:inline-block;
  vertical-align: top;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

  font-weight: 400;
  /*background-color: #456891;*/
  vertical-align: top;
  margin: 0;
  padding: 0;
}
#fHeaderZoneMappNameContent{
  padding: 0;
}
#fHeaderZoneMmenu{
  display:inline-block;
  text-align: left;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 0;
  /*background-color: #3c4856;*/
  vertical-align: bottom;
}
#fHeaderZoneMmenuContent{
  display:inline-block;
  vertical-align: bottom;
}

#fHeaderZoneMbtn{
  display:inline-block;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 0;
  vertical-align: top;
  text-align:right;
  /*background-color: #456891;*/
}
#fHeaderZoneMbtnBMess, #fHeaderZoneMbtnBAlert{
  display: inline-block;
  margin: 0px 3px 0px 5px;
}
#fHeaderZoneMbtnBMess i{
  margin:0;
}
#fHeaderZoneMbtnBAlert i{
  margin:0 2px 0 2px;
}
#fHeaderZoneMbtnNbMess, #fHeaderZoneMbtnNbAlert{
  display: inline-block;
  border-radius: 10px;
  padding: 1px 5px 0px 4px;
  font-size: 10px;
  font-weight: 700;
  margin:2px 4px 0 4px;
  vertical-align: top;
}

.fHeaderFixe{
	position:fixed;
	z-index:1;
  top:0;
  min-height: 28px;
}
#fFooterZone{
  position:fixed;
	z-index:2001;
  bottom:0px;
  min-height: 20px;
  width:100%;
  border-top: 1px solid #e0e0e1;
}
#fFooterZoneL{
  float: left;
  width: 190px;
  min-height: 20px;
  margin:0;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin: 0 10px 0 10px;
  padding-top: 2px;
  border-right: 1px solid #e0e0e1;
}
#fFooterZoneM{
  display:block;
  margin:0;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin: 0 10px 0 10px;
  padding-top: 2px;
  text-align: inherit;
}
#fFooterZoneR{
  float: right;
  width: 200px;
  min-height: 20px;
  margin:0;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin: 0 10px 0 10px;
  padding-top: 2px;
  text-align: right;
  border-left: 1px solid #e0e0e1;
}
#fMiddleZone{
  display:table;
  width:100%;
  border-collapse:collapse;
  border-spacing:0px;
}

#fMiddleZoneLMenu{
  z-index:2000;
  /*position: fixed;*/
  display: table-cell;
  vertical-align: top;
  width: 200px;
  min-width: 200px;
  padding: 0;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}
#fMiddleZoneLMenuBtnContent{
  position: fixed;
  z-index:2000;
  overflow: auto;
  width: 200px;
  margin-top: 45px;
  /*top:48px;
  padding-top: 19px;*/
}
#fMiddleZoneLMenuBtn{
  position: fixed;
  z-index:2001;
  display: table-cell;
  vertical-align: top;
  left: 168px;
  margin-top: 8px;
  width: 28px;
  height: 28px;
  padding: 2px 4px 5px 6px;
  border: 1px solid var(--racoondation-color-b);
  background-color: var(--racoondation-color-b);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.5;
}
#fMiddleZoneLMenuBtn:hover{
  border: 1px solid var(--racoondation-txt-color-b);
  background-color: var(--racoondation-color-d);
}

#fMiddleZoneLMenuBtnB{
  position: fixed;
  width: 15px;
  height: 15px;
  /*top:50px;*/
}
#fMiddleZoneLMenuBtnB i{
  width: 15px;
  height: 15px;
}
#fMiddleZoneMContentZone{
  display: table-cell;
  vertical-align: top;
  margin:0;
  padding: 0 0 16px 0;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .08rem;
  margin: 0 10px 0 10px;
}
#fMiddleZoneRMenu{
  display: none;
  vertical-align: top;
  margin:0;
  width: 187px;
  padding: 0px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 16px;
  font-weight: 400;
}
#fMiddleZoneRMenuB{
  position: fixed;
  overflow: auto;
  width: 187px;
  top:48px;
}
#fMiddleZoneRMenuBtn{
  display: none;
  vertical-align: top;
  margin:0;
  width: 15px;
  padding: 15px 4px 4px 4px;
}
#fMiddleZoneRMenuBtnB{
  position: fixed;
  width: 15px;
  height: 15px;
  top:48px;
}
#fMiddleZoneRMenuBtnB i{
  width: 15px;
  height: 15px;
}
#fHeaderZoneLlogo{
  display: inline-block;
  vertical-align: top;
  margin:0 0 0 0;
  text-align: center;
}
#fHeaderZoneLlogo img{
  height: 28px;
}
#fHeaderZoneLtxt{
  display: inline-block;
  vertical-align: top;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin: 19px 10px 0px 0px;
}
#fHeaderZoneRico{
  display: inline-block;
  vertical-align: top;
}
#fHeaderZoneRico img{
  height: 28px;
  margin: 9px 4px 2px 8px;
}
#fHeaderZoneRtxt{
  display: inline-block;
  vertical-align: top;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 16px;
  font-weight: 400;
  margin: 12px 10px 10px 2px;
}
@media (max-width: 1100px){
  #fHeaderZoneRtxt{
    display: none;
  }
  #fHeaderZoneMmenu{
    display: none;
  }
  #fFooterZoneL{
    display: none;
  }
}
#fHeaderZoneR:hover{
 background-color: ;
}

#fHeaderZoneRMenu{
  display:none;
  position:absolute;
  right: 0;
  width: 200px;
  margin: 0px 0px 0px 0px;
  border-top: 1px solid #e0e0e1;
  padding: 0;

}
li {
    list-style: none;
}
#fHeaderZoneRMenu > li {
    float: left;
    position: relative;
    display: block;
}
#fHeaderZoneRMenu > .user-menu > .dropdown-menu {
    padding: 0;
    margin-top: -1px;
    border-radius: 4px;
}
#fHeaderZoneRMenu > li.user-header {
    padding: 6% 30% 6% 25%;
}
#fHeaderZoneRMenu > li.user-footer {
    padding: 10px;
}
.fFooterZoneRIco, .fFooterZoneLIco{
  display: inline-block;
}
#fFooterZoneRTimeZone{
  display: inline-block;
}
#fFooterZoneRIcoConsole{
  font-size: 9px;
  padding-bottom: 2px;
}
#fFooterZoneRIcoConsoleZone{
  display:none;
  position: fixed;
  bottom:21px;
  left:0;
  padding-left: 8px;
  height:150px;
  overflow: hidden;
  opacity: 0.75;
  text-align: left;
}
.fHeaderZoneMbtnB{
  display: inline-block;
}
#fFooterZoneRIcoConsoleZoneB{
  height:125px;
  overflow: auto;
}
#fFooterZoneRIcoConsoleZoneClose{
  float: right;
  margin-right: 8px;
}
#fMiddleZoneRMenuMessageZone, #fMiddleZoneRMenuAlertZone, #fMiddleZoneRMenuSettingsZone{
  display:none;
}
.fLink, .link, .fLinkMenu{
  cursor: pointer;
}
.fLinkMenuLname{
  margin: 4px 0 4px 10px;
  padding: 4px 0 4px 0;
  font-size: 14px;
}
.fLinkMenuL{
  font-size: 12px;
  cursor: pointer;
}
.fLinkMenuLActive{
  font-weight: 700;
}
.fMiddleZoneLMenuB_menu_label{
  cursor: pointer;
  margin: 1px 0 1px 0;
  padding: 10px 5px 10px 5px;
}
.fMiddleZoneLMenuB_menu{
  display:none;
}
h1{
  height: 54px;
  line-height: 35px !important;

  padding-top:10px;
  margin-top: 0;
  margin-bottom: 0;
  vertical-align: middle;
  text-align: center;
}
.screen_title, .screen_console, .screen_menu_top, .screen_menu_left{
  display:none;
}
.fHeaderZoneMmenuBtn{
  display: inline-block;
  padding:0 6px 0 6px;
}
.fHeaderZoneMmenuBtn i{
  display: inline-block;
}
.fHeaderZoneRMenuUserHeader{
  width:100%;
  height:100px;
  text-align: center;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 16px;
  font-weight: 400;
}
.fHeaderZoneRMenuUserHeaderAvatar, .fHeaderZoneRMenuUserHeaderAvatar img{
  display: block;
  width: 95px;
  height: 95px;
  margin: 0 auto;
}
.fHeaderZoneRMenuUserHeaderNameZone{
  position: absolute;
  display: block;
  margin: 0 auto;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  margin: 4px 4px 8px 4px;
}
.fHeaderZoneRMenuUserHeaderName{
  display: inline;
  margin: 0 auto;
  text-align: center;
  border-radius: 10px;
  padding: 2px 8px 2px 8px;
  opacity: 0.75;
}
.fLinkMenuR{
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 16px;
  font-weight: 400;
  margin:6px 6px 6px 6px;
}
.fHeaderZoneRMenuMail{
  width:100%;
  text-align: center;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 12px;
  padding-bottom: 6px;
  margin-bottom:6px;
}
.fHeaderZoneRMenuLink{
  width:100%;
  text-align: left;
  padding: 0 6px 0 6px;
}
.fHeaderZoneRMenuLinkR{
  width:100%;
}
.fHeaderZoneRMenuLinkR:hover{
  opacity:0.75;
}

.fLinkMenuRb{
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 16px;
  font-weight: 400;
  margin:2px 8px 2px 0;
  text-align: right;
}

.fBtn, .fBtn_valid, .fBtn_warning{
  display: inline-block;
  padding:4px 8px 4px 4px;
  margin:3px 5px 0 0;
  border-radius: 5px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  vertical-align: top;
}
.fBtn{
  background-color: #e0e0e0;
  border: 1px solid #b6b6b3;
  color: #4e4e4e;
}
.fBtn:hover{
  background-color: #f1f1f0;
}
.fBtn_valid{
  background-color: #c3f6c6;
  border: 1px solid #b6b6b3;
  color: #4e4e4e;
}
.fBtn_valid:hover{
  background-color: #ebffec;
}
.fBtn_warning{
  background-color: #efc3c3;
  border: 1px solid #b6b6b3;
  color: #4e4e4e;
}
.fBtn_warning:hover{
  background-color: #ffe6e6;
}
#fDialogOverlayParticules {
    display:none;
    position: fixed;
    background: #000000;
    opacity: 0.75;
    filter: alpha(opacity = 75);
    /*position: absolute;*/
    z-index: 3;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
 }
 #fDialogOverlay {
   display:none;
   position: fixed;
   background: #000000;
   opacity: 0.75;
   filter: alpha(opacity = 75);
   /*position: absolute;*/
   z-index: 2003;
   top: 0;
   left: 0;
   width:100%;
   height:100%;
  }
 #fDialogZone{
   display:none;
   position: fixed;
   z-index: 2004;
   top:20%;
   left: 50%;
   margin-left: -175px;
   width:350px;
   min-height:180px;
   border: 1px solid #e0e0e0;
   border-radius: 5px;
   background-color: #FFFFFF;
 }
 #fDialogZoneTitle{
   background-color: #e0e0e0;
   padding: 8px 8px 5px 8px;
   /*height: 35px;*/
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
   font-size: 16px;
   font-weight: 700;
 }
 #fDialogZoneMessage{
   background-color: #f3f3f3;
   padding: 4px 8px 4px 8px;
   margin-bottom: 8px;
   min-height: 80px;
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
   font-size: 13px;
   font-weight: 400;
   text-align: center;
 }
 #fDialogZoneMess{
   margin-top:6px;
 }
 .fDialogZoneMessValid{
   border-left:4px solid green;
 }
 .fDialogZoneMessErr{
   border-left:4px solid red;
 }
 #fDialogZoneBtn{
   /*background-color: #e0e0e0;*/
   padding: 4px 8px 4px 8px;
  /* height: 35px;*/
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
   font-size: 16px;
   font-weight: 700;
   text-align: right;
 }
 #fDialogZoneBtnMdp, #fDialogZoneBtnIdent, #fDialogZoneBtnCreateIdent{
   float:left;
   font-size: 12px;
   margin:5px 0 0 25px;
   cursor: pointer;
 }
#fDialogZoneBtnMdp{
 }
 #login_mess, #login_mess_a{
   margin:9px 0 9px 0;
 }



 .fMiddleZoneMContent{
  /* margin:25px;*/
 }
 .fInput{
    font-family: 'FontAwesome', sans-serif;
    height: 40px;
    font-size: 16px;
    font-weight: 400;
    /*border-radius:4px;*/
    border-collapse: collapse;
    border-spacing: 0px;
    /*padding-left:15px;
    padding-right:15px;*/
 }
 .fInputSelect{
    font-family: 'FontAwesome', sans-serif;
    height: 40px;
    font-size: 16px;
    font-weight: 400;
    /*border-radius:4px;*/
    border-collapse: collapse;
    border-spacing: 0px;
    padding-left:4px;
    padding-right:4px;
 }
 .fInputLogin{
   font-family: FontAwesome, 'Font Awesome 5 Free', sans-serif;
    /*width: 200px;*/
    border: 1px solid #909090;
    border-radius: 10px;
    padding-left: 15px;
    margin-top: 2px;
 }
 .fRoundFaIcon{
  display: inline-block;
  border-radius: 40px;
  box-shadow: 0px 0px 2px #888;
  padding: 0.5em 0.6em;
  margin-right: 6px;
 }
 /* Layouts */
 .fLayoutRow{
   display:table;
   height:100%;
   width:100%;
   margin:0;
   padding:0;
 }
 .fLayoutCol{
   display:table-cell;
   margin:0;
   padding:0;
   vertical-align: top;
 }
 .fColW1{ width:10%; }
 .fColW2{ width:20%; }
 .fColW3{ width:30%; }
 .fColW4{ width:40%; }
 .fColW5{ width:50%; }
 .fColW6{ width:60%; }
 .fColW7{ width:70%; }
 .fColW8{ width:80%; }
 .fColW9{ width:90%; }
 .fColW10{ width:100%; }
@media only screen and (max-width: 910px){
  .fColW1{ width:50%; }
  .fColW2{ width:50%; }
  .fColW3{ width:100%; display: block;}
  .fColW4{ width:100%; display: block; }
  .fColW5{ width:100%; display: block; }
  .fColW6{ width:100%; display: block; }
  .fColW7{ width:100%; display: block; }
  .fColW8{ width:100%; display: block; }
  .fColW9{ width:100%; display: block; }
  .fColW10{ width:100%; display: block; }
}

 .fColP0{ padding:0; }
 .fColP5{ padding:5px; }
 .fColP10{ padding:10px; }
 .fColP15{ padding:15px; }
 .fColP20{ padding:20px; }


 .fHeaderZoneMmenuBtnLabel{
   display: inline-block;
   margin-left:5px;
 }
 .fHeaderZoneMmenuBtnSeparator{
   display: inline-block;
   margin-left:0px;
 }
 #fMiddleZoneLMenuSpace{
   display: none;
 }

/* Color sheme */
.theme-bgColor{
  background-color: var(--racoondation-bg-color);
}
.theme-txtColor{
 color: var(--racoondation-txt-color);
}
.theme-bg-colorA{
 background-color: var(--racoondation-color-a);
}
.theme-b1t-colorA{
  border-top: 1px solid var(--racoondation-color-a);
}
.theme-b1b-colorA{
  border-bottom: 1px solid var(--racoondation-color-a);
}
.theme-b1l-colorA{
  border-left: 1px solid var(--racoondation-color-a);
}
.theme-b1r-colorA{
  border-right: 1px solid var(--racoondation-color-a);
}
.theme-txt-colorA{
 color: var(--racoondation-txt-color-a);
}
.theme-title-colorA{
 color: var(--racoondation-color-a);
}
.theme-bg-colorB{
 background-color: var(--racoondation-color-b);
}
.theme-b1t-colorB{
  border-top: 1px solid var(--racoondation-color-b);
}
.theme-b1b-colorB{
  border-bottom: 1px solid var(--racoondation-color-b);
}
.theme-b1l-colorB{
  border-left: 1px solid var(--racoondation-color-b);
}
.theme-b1r-colorB{
  border-right: 1px solid var(--racoondation-color-b);
}
.theme-txt-colorB{
 color: var(--racoondation-txt-color-b);
}
.theme-title-colorB{
 color: var(--racoondation-color-b);
}
.theme-bg-colorC{
 background-color: var(--racoondation-color-c);
}
.theme-b1t-colorC{
  border-top: 1px solid var(--racoondation-color-c);
}
.theme-b1b-colorC{
  border-bottom: 1px solid var(--racoondation-color-c);
}
.theme-b1l-colorC{
  border-left: 1px solid var(--racoondation-color-c);
}
.theme-b1r-colorC{
  border-right: 1px solid var(--racoondation-color-c);
}
.theme-txt-colorC{
 color: var(--racoondation-txt-color-c);
}
.theme-title-colorC{
 color: var(--racoondation-color-c);
}
body{
  color: var(--racoondation-txt-color);
}
h1{
    background-color: var(--racoondation-color-d);
    color: var(--racoondation-txt-color-d);
}
h2{
    background-color: #dbdbdb;
    color: var(--racoondation-color-b);
}
#fHeaderZoneMbtnNbMess{
  background-color: var(--racoondation-color-mess);
  color: var(--racoondation-txt-color-mess);
}
#fHeaderZoneMbtnNbAlert{
  background-color: var(--racoondation-color-alert);
  color: var(--racoondation-txt-color-alert);
}

#fHeaderZoneMmenu a, #fMiddleZoneLmenuNavMobile a, .fLinkMenuL {
  color: #FFFFFF;
  text-decoration: none;
}
#fHeaderZoneMmenu a:hover, #fMiddleZoneLmenuNavMobile a:hover, .fLinkMenuL:hover {
  color: #DDDDDD;
}
#fHeaderZoneMmenu a:active, #fMiddleZoneLmenuNavMobile a:active, .fLinkMenuL:active {
  color: #999999;
}
#fMiddleZoneLmenuNavMobile{
  position: relative;
  width:200px;
  max-width:200px;
}
#fMiddleZoneLMenuSpace{
  position: relative;
  width:200px;
}
.fLinkMenuL div{
  padding:9px 15px 9px 15px;
}
.fMiddleZoneLMenuB_menu_label{
 background-color: var(--racoondation-color-c);
}
.fMiddleZoneLMenuB_menu_label:hover{
 background-color: var(--racoondation-color-b);
}
.fLinkMenuL:hover div{
 background-color: var(--racoondation-color-c);
}

/* Others */
.slider {
  -webkit-appearance: none;
  width: 95%;
  height: 10px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity:0.7;
  -webkit-transition: opacity .15s ease-in-out;
  transition: opacity .15s ease-in-out;
}
.slider:hover {
  opacity:1;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 23px;
  height: 24px;
  border-radius: 50%;
  background: url('../images/ico-contrast.png');
  cursor: pointer;
}
.slider-sun::-webkit-slider-thumb {
  width: 25px;
  height: 25px;
  background: url('../images/ico-lum.png');
}
.slider-hue::-webkit-slider-thumb {
  background: red;
}
.slider::-moz-range-thumb {
  width: 23px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: url('../images/ico-contrast.png');
  cursor: pointer;
}
.slider-sun::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: url('../images/ico-lum.png');
}
.slider-hue::-moz-range-thumb {
  background: red;
}
.slider-mini {
  height: 16px;
}
.slider-mini::-webkit-slider-thumb {
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
}
.slider-mini::-moz-range-thumb {
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
}

/* phkcolorscheme */
.phkcolorscheme_palette_top{
  width:100%;
  height: 100px;
  padding:0;
  font-size: 0;
}
.phkcolorscheme_palette_top_zone_color{
  display: inline-block;
  width:16.6%;
  height: 67px;
  padding:0;
  margin: 0;
  text-align: center;
  vertical-align: top;
}
.phkcolorscheme_palette_top_zone_color_label{
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  font-family: consolas ,monospace;
}
.phkcolorscheme_analogous{
  background: url('../images/colorscheme/analogous.png');
}
.phkcolorscheme_complementary{
  background: url('../images/colorscheme/complementary.png');
}
.phkcolorscheme_compound{
  background: url('../images/colorscheme/compound.png');
}
.phkcolorscheme_monochromatic{
  background: url('../images/colorscheme/monochromatic.png');
}
.phkcolorscheme_triadic{
  background: url('../images/colorscheme/triadic.png');
}
.phkcolorscheme_palette_ico{
  display: inline-block;
  width: 35px;
  height: 35px;
  border: 1px solid #d3d3d3;
  border-radius: 20%;
  background-size: 35px 35px;
  background-position: 0 0;
  background-repeat: no-repeat;
  font-size: 0;
  vertical-align: top;
  margin: 4px;
}

.phkcolorscheme_palette_central{
  width:100%;
  height: 600px;
  padding:0;
  font-size: 0;
  background-color: #ffffff;
}

.phkcolorscheme_palette_central_left{
  display: inline-block;
  width: 83.4%;
  height: 600px;
  padding:0;
  margin: 0;
  font-size: 20px;
  vertical-align: top;
}
.phkcolorscheme_palette_central_right{
  display: inline-block;
  width: 16.6%;
  height: 600px;
  padding:0;
  margin: 0;
  font-size: 20px;
  vertical-align: top;
}

.aPC {
    float: left;
    height: 180px;
    width: 180px;
    position: relative;
    background: url(../images/colorscheme/bg2.png) no-repeat;
    margin: 0;
    cursor: crosshair;
}
.aPC div {
    position: absolute;
    z-index: 1;
    /*background: url(../images/colorscheme/colorPicker.png) no-repeat;*/
    font-size: 12px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.aPC_pl{
  background: url(../images/colorscheme/colorPickerLarge.png) no-repeat;
  width: 14px;
  height: 14px;
}

.aPC_p{
  background: url(../images/colorscheme/colorPicker) no-repeat;
  width: 10px;
  height: 10px;
}
.phkcolorscheme_field_col{
  font-size: 12px;
}
.phkcolorscheme_field_col td{
  text-align: center;
}
.phkcolorscheme_fieldColor{
  width : 35px;
}
#phkcolorscheme_field_colA_Hexa{
  width : 55px;
}
.satlightsliderscontainer{
  display: none;
}

.fillingRateDiv{
  margin-left: 0;
}
.fillingRateDivLabel{
  padding-top: 5px;
}

/* squares background anim */
.area{
    /*background: #4e54c8;
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);*/
    width: 100%;
    height:100vh;
}
.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    /*background: rgba(255, 255, 255, 0.2);*/
    background: #04ff09;
    animation: animate 25s linear infinite;
    bottom: -150px;
}
.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}
.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}
.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}
.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}
.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}
.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}
.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}
.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}
.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}
@keyframes animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}