/** COLOR SETS **/
.view.blue .mask {
  background-color: rgba(0, 174, 219, 0.66);
}

.view.blue .view-header i {
  background: #00aedb;
}

.view.blue .info {
  background: #00aedb;
  border-color: #00aedb;
  color: #fff;
}

.view.blue .info:hover {
  background: #0ea5cc;
  border-color: #0ea5cc;
  color: #fff;
}

.view.purple .mask {
  background-color: rgba(125, 5, 194, 0.66);
}

.view.purple .view-header i {
  background: #a200ff;
}

.view.purple .info {
  background: #a200ff;
  border-color: #a200ff;
  color: #fff;
}

.view.purple .info:hover {
  background: #7d05c2;
  border-color: #7d05c2;
  color: #fff;
}

.view.red .mask {
  background-color: rgba(212, 18, 67, 0.66);
}

.view.red .view-header i {
  background: #d41243;
}

.view.red .info {
  background: #d41243;
  border-color: #d41243;
  color: #fff;
}

.view.red .info:hover {
  background: #93092c;
  border-color: #93092c;
  color: #fff;
}


.view.orange .mask {
  background-color: #f47835;
}

.view.orange .view-header i {
  background: #bd5d2a;
}

.view.orange .info {
  background: #bd5d2a;
  border-color: #bd5d2a;
  color: #fff;
}

.view.orange .info:hover {
  background: #d25c1d;
  border-color: #d25c1d;
  color: #fff;
}


.view.green .mask {
  background-color:  #8ec127;
}

.view.green .view-header i {
  background: #7ba722;
}

.view.green .info {
  background: #7ba722;
  border-color: #7ba722;
  color: #fff;
}

.view.green .info:hover {
  background: #a8e42f;
  border-color: #a8e42f;
  color: #fff;
}


.view.black .mask {
  background-color: rgba(0, 0, 0, 0.8);
}

.view.black .view-header i {
  background: #515151;
}

.view.black .info {
  background: #515151;
  border-color: #515151;
  color: #fff;
}

.view.black .info:hover {
  background: #222222;
  border-color: #222222;
  color: #fff;
}


.view.yellow .mask {
  background-color: rgba(213,191,2, 0.66);
}

.view.yellow .view-header i {
  background: #D5BF02;
}

.view.yellow .info {
  background: #D5BF02;
  border-color: #D5BF02;
  color: #fff;
}

.view.yellow .info:hover {
  background: #a08f01;
  border-color: #a08f01;
  color: #fff;
}


.view.choco .mask {
  background-color: rgba(141,98,86, 0.66);
}

.view.choco .view-header i {
  background: #8D6256;
}

.view.choco .info {
  background: #8D6256;
  border-color: #8D6256;
  color: #fff;
}

.view.choco .info:hover {
  background: #694940;
  border-color: #694940;
  color: #fff;
}

.view .view-header {
  color: #fff !important;
}

.view .view-content {
  color: #fff;
}