.cloudburst { background: #1f3043;}
.cloudburst-t, .chip { color: #1f3043;}
.wafer { background: #e5d8d6;}
.wafer-t { color: #e5d8d6;}
.wafer-t-s { text-shadow: -2px -2px #e5d8d6;}
.ocean-green { background: #4bad71;}
.ocean-green-t { color: #4bad71;}
.ocean-green-t-s { text-shadow: -3px -2px #4bad71;}
.custom-blue { background: #2267ff;}
.custom-blue-t { color: #2267ff;}
	
.counter-tag { padding: 0.3em; margin-left: -0.7em; border-left: 2px solid #333; 
	border-top-right-radius: 1em 3em; border-bottom-right-radius: 1em 3em;
	border-top-left-radius: 1em 3em; border-bottom-left-radius: 1em 3em;
}


.tiles, .pane {
  box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
  display: -ms-flex; display: -webkit-box; display: -moz-box;
  display: -ms-flexbox; display: -webkit-flex; display: flex;
  -ms-flex: 0 1 auto; -webkit-box-flex: 0; flex: 0 1 auto;
  -ms-flex-direction: row; -moz-flex-direction: row; -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal; flex-direction: row;
  -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap;
  margin-right: 0; margin-left: 0;
}
.tiles>li {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
ul.tiles { list-style-type: none !important; width: 100%; padding: 0; margin: 0;}
ul.tiles>li {max-width: 100%; padding: 0; margin: 0;}
ul.tiles.padded>li {padding: 1em;}
ul.tiles>li>a {display: block; width: 100%; height: 100%; padding: 1em; opacity: 1; transition: 0.3s;}
ul.tiles.popular>li>a{border: 1px solid #1f3043; background: #e5d8d6;}
ul.tiles.allcats{background:#e5d8d6;}
ul.tiles.allcats>li>a{border: 1px solid #2267ff; background: #1f3043; color: #e5d8d6; }
ul.tiles>li>a:hover { opacity: 0.6;}
ul.tiles>li {
	align-self: stretch !important;
	-webkit-align-self: stretch !important;
	align-items: stretch !important;
	-webkit-align-items: stretch !important;
	align-content: stretch !important;
	-webkit-align-content: stretch !important;
}
.sixths>.block, .sixths>.brick, ul.tiles.sixths li {width: calc(100% / 6); max-width: 16.67%;}
.fifths>.block, .fifths>.brick, ul.tiles.fifths li {width: calc(100% / 5); max-width: 20%;}
.quarters>.block, .quarters>.brick, .fourths>.block, .fourths>.brick, ul.tiles.quarters li, ul.tiles.fourths li {width: calc(100% / 4); max-width: 25%;}
.thirds>.block, .thirds>.brick, ul.tiles.thirds li {width: calc(100% / 3); max-width: 33.33%;}
.halves>.block, .halves>.brick, ul.tiles.halves li {width: calc(100% / 2); max-width: 50%;}
.full, .full>.block, .full>.brick, ul.tiles.full li { width:100%; max-width: 100%;}

.chip {
    display: inline-block;
    height: 32px;
    font-size: 13px; font-weight: 500;
    line-height: 32px;
    padding: 0 12px;
    border-radius: 16px;
    background-color: #e4e4e4;
    margin-bottom: 5px; margin-right: 5px;
}

/* Custom Checkboxes */
ul.ks-cboxtags {
    list-style: none;
    padding: 20px;
}
ul.ks-cboxtags li{
  display: inline;
}
ul.ks-cboxtags li label{
    display: inline-block;
    background-color: rgba(255, 255, 255, .9);
    border: 2px solid rgba(139, 139, 139, .3);
    color: #adadad;
    border-radius: 25px;
    white-space: nowrap;
    margin: 3px 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: all .2s;
}
ul.ks-cboxtags li label {
    padding: 8px 12px; cursor: pointer;
}
ul.ks-cboxtags li label::before {
    display: inline-block;
    font-style: normal; font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    padding: 2px 6px 2px 2px;
    content: "\f067";
    transition: transform .3s ease-in-out;
}
ul.ks-cboxtags li input[type="checkbox"]:checked + label::before {
    content: "\f00c";
    transform: rotate(-360deg);
    transition: transform .3s ease-in-out;
}
ul.ks-cboxtags li input[type="checkbox"]:checked + label {
    border: 2px solid #1bdbf8;
    background-color: #12bbd4;
    color: #fff;
    transition: all .2s;
}
ul.ks-cboxtags li input[type="checkbox"] {
  display: absolute;
}
ul.ks-cboxtags li input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}
ul.ks-cboxtags li input[type="checkbox"]:focus + label {
  border: 2px solid #e9a1ff;
}

/* Inputgroups */
.inputGroup {
  background-color: #fff;
  display: block;
  margin: 10px 0;
  position: relative;
}
.inputGroup label {
  padding: 12px 30px;
  width: 100%;
  display: block;
  text-align: left;
  color: #3C454C;
  cursor: pointer;
  position: relative; z-index: 2;
  transition: color 200ms ease-in;
  overflow: hidden;
}
.inputGroup label:before {
  width: 10px; height: 10px;
  border-radius: 50%;
  content: "";
  background-color: #2267ff;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale3d(1, 1, 1);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0; z-index: -1;
}
.inputGroup label:after {
  width: 32px;
  height: 32px;
  content: "";
  border: 2px solid #D1D7DC;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
  background-repeat: no-repeat;
  background-position: 2px 3px;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  right: 30px; top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 200ms ease-in;
}
.inputGroup input:checked ~ label {
  color: #fff;
}
.inputGroup input:checked ~ label:before {
  transform: translate(-50%, -50%) scale3d(56, 56, 1);
  opacity: 1;
}
.inputGroup input:checked ~ label:after {
  background-color: #4bad71;
  border-color: #4bad71;
}
.inputGroup input {
  width: 32px;
  height: 32px;
  order: 1;
  z-index: 2;
  position: absolute;
  right: 30px; top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  visibility: hidden;
}

.form.steps {
  padding: 0 16px;
  max-width: 920px;
  margin: 30px auto;
  font-size: 18px;
  font-weight: 600;
  line-height: 36px;
}