.yellow-skin {
  --skin-color: #F2A600;
  --skin-color-lite:rgba(242,166,0,.3);
  --skin-color-medium:rgba(242,166,0,.6);
  --skin-color-darker:rgba(242,166,0,.8);
}

.bg-yellow {
  background-color: #F2A600;
}

.bordered .bg-yellow {
  border: solid 3px #F2A600;
}

div .bg-yellow:hover, .bg-yellow-lite, .bg-yellow-lite-hover:hover {
  background-color: rgba(242,166,0,.3)
}

.yellow-skin .header-highlight {
  color: #F2A600;
}

.h3-yellow button, .yellow-skin button {
  background-color: #F2A600;
  border:solid 3px #F2A600;
 border:none;
}

.h3-yellow button:hover, .yellow-skin button:hover,  .yellow-skin .floating-window .drag-bar {
  background-color: rgba(242,166,0,.6);
}

.yellow-skin .thing {
//  background: #F2A600;
//  color:white;
}

.yellow-skin .alt.thing, .yellow-skin .thing .alt {
  background: white;
  border:#F2A600 solid 3px;
  padding:10px;
  color:black;
}

.yellow-skin .solid.thing, .yellow-skin .thing .solid {
    background: #F2A600;
    color: white;
    padding:10px;
}



.yellow-skin .connector {
  border-left: solid 3px #F2A600;
}

.yellow-skin .bg-hover:hover {
  background: #F2A600;
}

.bg-yellow {
  background-color: rgba(242,166,0,.6);
}

.yellow-skin .edit-menu .handle {
  background-color: rgba(242,166,0,.6);
}

.bg-yellow {
  background-color: rgba(242,166,0,.6);
}

.h3-yellow h3 {
    color: #F2A600;
}



.dark-green-skin {
  --skin-color: #105B63;
  --skin-color-lite:rgba(16,88,99,.3);
  --skin-color-medium:rgba(16,88,99,.6);
  --skin-color-darker:rgba(16,88,99,.8);
}

.bg-dark-green {
  background-color: #105B63;
}

.bordered .bg-dark-green {
  border: solid 3px #105B63;
}

div .bg-dark-green:hover, .bg-dark-green-lite, .bg-dark-green-lite-hover:hover {
  background-color: rgba(16,88,99,.3)
}

.dark-green-skin .header-highlight {
  color: #105B63;
}

.h3-dark-green button, .dark-green-skin button {
  background-color: #105B63;
  border:solid 3px #105B63;
 border:none;
}

.h3-dark-green button:hover, .dark-green-skin button:hover,  .dark-green-skin .floating-window .drag-bar {
  background-color: rgba(16,88,99,.6);
}

.dark-green-skin .thing {
//  background: #105B63;
//  color:white;
}

.dark-green-skin .alt.thing, .dark-green-skin .thing .alt {
  background: white;
  border:#105B63 solid 3px;
  padding:10px;
  color:black;
}

.dark-green-skin .solid.thing, .dark-green-skin .thing .solid {
    background: #105B63;
    color: white;
    padding:10px;
}



.dark-green-skin .connector {
  border-left: solid 3px #105B63;
}

.dark-green-skin .bg-hover:hover {
  background: #105B63;
}

.bg-dark-green {
  background-color: rgba(16,88,99,.6);
}

.dark-green-skin .edit-menu .handle {
  background-color: rgba(16,88,99,.6);
}

.bg-dark-green {
  background-color: rgba(16,88,99,.6);
}

.h3-dark-green h3 {
    color: #105B63;
}



.red-skin {
  --skin-color: #A61B26 ;
  --skin-color-lite:rgba(166,27,38,.1);
  --skin-color-medium:rgba(166,27,38,.3);
  --skin-color-darker:rgba(166,27,38,.6);
}

.bg-red {
  background-color: #A61B26 ;
}

.bordered .bg-red {
  border: solid 3px #A61B26 ;
}

div .bg-red:hover, .bg-red-lite, .bg-red-lite-hover:hover {
  background-color: rgba(166,27,38,.1)
}

.red-skin .header-highlight {
  color: #A61B26 ;
}

.h3-red button, .red-skin button {
  background-color: #A61B26 ;
  border:solid 3px #A61B26 ;
 border:none;
}

.h3-red button:hover, .red-skin button:hover,  .red-skin .floating-window .drag-bar {
  background-color: rgba(166,27,38,.3);
}

.red-skin .thing {
//  background: #A61B26 ;
//  color:white;
}

.red-skin .alt.thing, .red-skin .thing .alt {
  background: white;
  border:#A61B26  solid 3px;
  padding:10px;
  color:black;
}

.red-skin .solid.thing, .red-skin .thing .solid {
    background: #A61B26 ;
    color: white;
    padding:10px;
}



.red-skin .connector {
  border-left: solid 3px #A61B26 ;
}

.red-skin .bg-hover:hover {
  background: #A61B26 ;
}

.bg-red {
  background-color: rgba(166,27,38,.3);
}

.red-skin .edit-menu .handle {
  background-color: rgba(166,27,38,.3);
}

.bg-red {
  background-color: rgba(166,27,38,.3);
}

.h3-red h3 {
    color: #A61B26 ;
}



.green-skin {
  --skin-color: #0F5C63;
  --skin-color-lite:rgba(15,92,99,.3);
  --skin-color-medium:rgba(15,92,99,.6);
  --skin-color-darker:rgba(15,92,99,.8);
}

.bg-green {
  background-color: #0F5C63;
}

.bordered .bg-green {
  border: solid 3px #0F5C63;
}

div .bg-green:hover, .bg-green-lite, .bg-green-lite-hover:hover {
  background-color: rgba(15,92,99,.3)
}

.green-skin .header-highlight {
  color: #0F5C63;
}

.h3-green button, .green-skin button {
  background-color: #0F5C63;
  border:solid 3px #0F5C63;
 border:none;
}

.h3-green button:hover, .green-skin button:hover,  .green-skin .floating-window .drag-bar {
  background-color: rgba(15,92,99,.6);
}

.green-skin .thing {
//  background: #0F5C63;
//  color:white;
}

.green-skin .alt.thing, .green-skin .thing .alt {
  background: white;
  border:#0F5C63 solid 3px;
  padding:10px;
  color:black;
}

.green-skin .solid.thing, .green-skin .thing .solid {
    background: #0F5C63;
    color: white;
    padding:10px;
}



.green-skin .connector {
  border-left: solid 3px #0F5C63;
}

.green-skin .bg-hover:hover {
  background: #0F5C63;
}

.bg-green {
  background-color: rgba(15,92,99,.6);
}

.green-skin .edit-menu .handle {
  background-color: rgba(15,92,99,.6);
}

.bg-green {
  background-color: rgba(15,92,99,.6);
}

.h3-green h3 {
    color: #0F5C63;
}



.purple-skin {
  --skin-color: #61384F;
  --skin-color-lite:rgba(97,56,79,.3);
  --skin-color-medium:rgba(97,56,79,.6);
  --skin-color-darker:rgba(97,56,79,.8);
}

.bg-purple {
  background-color: #61384F;
}

.bordered .bg-purple {
  border: solid 3px #61384F;
}

div .bg-purple:hover, .bg-purple-lite, .bg-purple-lite-hover:hover {
  background-color: rgba(97,56,79,.3)
}

.purple-skin .header-highlight {
  color: #61384F;
}

.h3-purple button, .purple-skin button {
  background-color: #61384F;
  border:solid 3px #61384F;
 border:none;
}

.h3-purple button:hover, .purple-skin button:hover,  .purple-skin .floating-window .drag-bar {
  background-color: rgba(97,56,79,.6);
}

.purple-skin .thing {
//  background: #61384F;
//  color:white;
}

.purple-skin .alt.thing, .purple-skin .thing .alt {
  background: white;
  border:#61384F solid 3px;
  padding:10px;
  color:black;
}

.purple-skin .solid.thing, .purple-skin .thing .solid {
    background: #61384F;
    color: white;
    padding:10px;
}



.purple-skin .connector {
  border-left: solid 3px #61384F;
}

.purple-skin .bg-hover:hover {
  background: #61384F;
}

.bg-purple {
  background-color: rgba(97,56,79,.6);
}

.purple-skin .edit-menu .handle {
  background-color: rgba(97,56,79,.6);
}

.bg-purple {
  background-color: rgba(97,56,79,.6);
}

.h3-purple h3 {
    color: #61384F;
}



.orange-skin {
  --skin-color: #BD4A33;
  --skin-color-lite:rgba(189,74,51,.2);
  --skin-color-medium:rgba(189,74,51,.4);
  --skin-color-darker:rgba(189,74,51,.6);
}

.bg-orange {
  background-color: #BD4A33;
}

.bordered .bg-orange {
  border: solid 3px #BD4A33;
}

div .bg-orange:hover, .bg-orange-lite, .bg-orange-lite-hover:hover {
  background-color: rgba(189,74,51,.2)
}

.orange-skin .header-highlight {
  color: #BD4A33;
}

.h3-orange button, .orange-skin button {
  background-color: #BD4A33;
  border:solid 3px #BD4A33;
 border:none;
}

.h3-orange button:hover, .orange-skin button:hover,  .orange-skin .floating-window .drag-bar {
  background-color: rgba(189,74,51,.4);
}

.orange-skin .thing {
//  background: #BD4A33;
//  color:white;
}

.orange-skin .alt.thing, .orange-skin .thing .alt {
  background: white;
  border:#BD4A33 solid 3px;
  padding:10px;
  color:black;
}

.orange-skin .solid.thing, .orange-skin .thing .solid {
    background: #BD4A33;
    color: white;
    padding:10px;
}



.orange-skin .connector {
  border-left: solid 3px #BD4A33;
}

.orange-skin .bg-hover:hover {
  background: #BD4A33;
}

.bg-orange {
  background-color: rgba(189,74,51,.4);
}

.orange-skin .edit-menu .handle {
  background-color: rgba(189,74,51,.4);
}

.bg-orange {
  background-color: rgba(189,74,51,.4);
}

.h3-orange h3 {
    color: #BD4A33;
}



.blue-skin {
  --skin-color: #1F80A6;
  --skin-color-lite:rgba(31,128,166,.3);
  --skin-color-medium:rgba(31,128,166,.6);
  --skin-color-darker:rgba(31,128,166,.8);
}

.bg-blue {
  background-color: #1F80A6;
}

.bordered .bg-blue {
  border: solid 3px #1F80A6;
}

div .bg-blue:hover, .bg-blue-lite, .bg-blue-lite-hover:hover {
  background-color: rgba(31,128,166,.3)
}

.blue-skin .header-highlight {
  color: #1F80A6;
}

.h3-blue button, .blue-skin button {
  background-color: #1F80A6;
  border:solid 3px #1F80A6;
 border:none;
}

.h3-blue button:hover, .blue-skin button:hover,  .blue-skin .floating-window .drag-bar {
  background-color: rgba(31,128,166,.6);
}

.blue-skin .thing {
//  background: #1F80A6;
//  color:white;
}

.blue-skin .alt.thing, .blue-skin .thing .alt {
  background: white;
  border:#1F80A6 solid 3px;
  padding:10px;
  color:black;
}

.blue-skin .solid.thing, .blue-skin .thing .solid {
    background: #1F80A6;
    color: white;
    padding:10px;
}



.blue-skin .connector {
  border-left: solid 3px #1F80A6;
}

.blue-skin .bg-hover:hover {
  background: #1F80A6;
}

.bg-blue {
  background-color: rgba(31,128,166,.6);
}

.blue-skin .edit-menu .handle {
  background-color: rgba(31,128,166,.6);
}

.bg-blue {
  background-color: rgba(31,128,166,.6);
}

.h3-blue h3 {
    color: #1F80A6;
}