body { background-color: #efeff6 }
.dark_Body { background-color: black }
h1 { font-size: 20pt; font-family: Arial, Helvetica, sans-serif; font-weight: bold; float: left; margin: 6px; margin-left: 10px; color: royalblue }
j1 { font-size: 20pt; font-family: Arial, Helvetica, sans-serif; font-weight: bold; float: right; margin: 6px; margin-right: 10px; color: royalblue }
h2 { font-size: 24pt; font-weight: bold; text-align: center; margin-bottom: 4px; margin-top: 16px; }
h3 { font-size: 14pt; font-weight: normal; text-align: center; margin-top: 0px; padding-top: 0px; }
h4 { font-size: 16pt; font-family: Oswald, Arial, Helvetica, sans-serif; font-weight: normal; }
j2 { font-size: 32pt; font-weight: bold; text-align: center; padding-bottom: 24px; margin-top: 16px; color: mediumblue; position: relative; }
optionHeaderText { font-family: Oswald, Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: bold; }
#wordSpan0 { font-size: 14pt; font-weight: normal; text-align: center; margin-top: 0px; padding-top: 0px; position: relative; top: 8px }
#wordSpan1 { font-size: 14pt; font-weight: bold; text-align: center; margin-top: 0px; padding-top: 0px; position: relative; top: 8px }
#buttonParentBox { text-align: center; position: relative; min-height: 310px; width: 50%; background: white; display: inline-block; padding: 0px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
#buttonBox { text-align: center }
#testButtonBox { text-align: center }
#checkAllButton { background-color: #ccffcc; margin-right: 10px; border-radius: 40px;  }
#uncheckAllButton { background-color: #ffcccc; border-radius: 40px; }
#dark_HeaderDiv { width: 100%; margin-bottom: 0px; background-color: black; border-bottom-color: royalblue; border-bottom-width: 2px; border-bottom-style: solid; position:fixed; top:0; left:0; z-index: 1; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09); }
#counterSpan { text-align: right; width: 10%; margin-bottom: 0px; margin-right: 10px; font-size: 12pt; font-style: italic; position: absolute; top: 5px; right: 0px; }
#starSpan { text-align: left; width: 32px; height: 32px; margin-bottom: 0px; position: absolute; bottom: 26px; left: 40px; }
#bottlePic { float: left; width: 300px; height: 697px; background: white; align-content: center; vertical-align: middle; }
#results { font-size: 16px; font-family: Oswald, Arial, Helvetica, sans-serif; border-collapse: collapse; border-spacing: 0; width: 100%; }
#results th { padding-top: 11px; padding-bottom: 11px; background-color: cornflowerblue; color: white; }
#results td, #results th { border: 1px solid #ddd; text-align: left; padding: 8px; }
.altRow { background-color: #f0f0f0; }

.optionBoxParent { text-align: center }
.optionBox { width: 80%; background: white; display: inline-block; text-align: left; padding: 3px; padding-left: 50px; padding-top: 0px; border-style:solid; border-color: #ebebeb; border-width: 1px }
.button1 { width: 20%; height: 50px; color: white; background:radial-gradient(green, green); font-size: 16pt; font-weight: bold; border-radius: 40px; border-style: solid;}
.button2 { width: 25%; height: 50px; position: absolute; top: 240px; left: 0; right: 0; margin: auto; background: linear-gradient(#fafaff, #ccccff); border-radius: 40px; }

.radioOptionText { font-size: 12pt; padding-right: 10px }
.optionText { font-size: 12pt; padding-right: 10px; }
.optionTextBox { font-size: 12pt; padding-right: 10px; width: 80%; }
.nameTextBox { font-size: 12pt; padding-right: 10px; width: 15em; }

.optionSpan { background-color: #ffffff; display: inline-block; position: relative; margin-top: 2px; margin-right: 0px; }

.textBoxContainer { display: inline-block; margin-left: calc(10% - 8px); margin-right: calc(9% - 3px); padding: 0px; padding-top: 75px; background-color: #efeff6; color: black }
.dark_TextBoxContainer { display: inline-block; margin-left: calc(10% - 8px); margin-right: calc(9% - 3px); padding: 0px; padding-top: 75px; background-color: black; color: white }
.textBoxDisplay  { background: white; text-align: left; padding: 6px; padding-left: 16px; padding-top: 8px; color: black }
.dark_TextBoxDisplay  { background: #111122; text-align: left; padding: 6px; padding-left: 16px; padding-top: 8px; color: white }

.textBoxResultsContainer { display: grid; margin-left: calc(10% - 8px); margin-right: calc(10% - 3px); grid-gap: 1px; grid-template-columns: 100%; padding: 0px; padding-top: 48px; background-color: #efeff6; position: relative !important }
.textBoxResults  { font-family: Oswald, Arial, Helvetica, sans-serif; font-size: 24px; line-height: 32px; grid-column-start: 1; grid-column-end: 2; background: white; text-align: left; padding: 6px; padding-top: 8px; position: static }

.bottleTextBoxContainer { display: grid; margin-left: calc(10% - 8px); margin-right: calc(9% - 3px); grid-gap: 1px; grid-template-columns: 100%; padding: 0px; padding-top: 75px; background-color: #efeff6; position: relative !important }
.bottleTextBoxDisplay  { grid-column-start: 1; grid-column-end: 2; background: white; text-align: center; padding: 0px; padding-left: 16px; padding-top: 8px; padding-bottom: 8px; position: static }

.bottlePicContainer { text-align: center; vertical-align: middle; margin-left: calc(10% - 8px); margin-right: calc(9% - 3px); padding: 0px; padding-top: 1px; background-color: #efeff6; position: relative !important }
.bottleText  { font-size:24px; background: white; text-align: left; margin-left: 302px; margin-top: 0px; width: 60%; position: static }

.spritelyTextLine { float: left; width: 32px; height: 0px; border-bottom: 90px solid thistle; background-color: white; position: relative; }
.mellowTextLine { float: left; width: 32px; height: 0px; border-bottom: 90px solid orchid; background-color: white; position: relative; }
.sweetTextLine { float: left; width: 32px; height: 0px; border-bottom: 90px solid rebeccapurple; background-color: white; position: relative; }
.dryTextLine { float: left; width: 32px; height: 0px; border-bottom: 90px solid gold; background-color: white; position: relative; }
.deepTextLine { float: left; width: 32px; height: 0px; border-bottom: 90px solid lightsalmon; background-color: white; position: relative; }
.oldTextLine { float: left; width: 32px; height: 0px; border-bottom: 90px solid firebrick; background-color: white; position: relative; }
.delicateTextLine { float: left; width: 32px; height: 0px; border-bottom: 90px solid paleturquoise; background-color: white; position: relative; }
.juicyTextLine { float: left; width: 32px; height: 0px; border-bottom: 90px solid steelblue; background-color: white; position: relative; }
.oilyTextLine { float: left; width: 32px; height: 0px; border-bottom: 90px solid royalblue; background-color: white; position: relative; }
.lightlyTextLine { float: left; width: 32px; height: 0px; border-bottom: 90px solid palegreen; background-color: white; position: relative; }
.peatedTextLine { float: left; width: 32px; height: 0px; border-bottom: 90px solid olivedrab; background-color: white; position: relative; }
.heavilyTextLine { float: left; width: 32px; height: 0px; border-bottom: 90px solid darkolivegreen; background-color: white; position: relative; }

.separatorLine { width: 80%; height: 12px; margin-bottom: 12px; border-bottom: 2px solid royalblue; background-color: white; position: relative; }
.whiteLine { width: 80%; height: 12px; margin-bottom: 12px; border-bottom: 2px solid white; background-color: white; position: relative; }
.spritelyLine { width: 80%; height: 12px; margin-bottom: 12px; border-bottom: 2px solid thistle; background-color: white; position: relative; }
.mellowLine { width: 80%; height: 12px; margin-bottom: 12px; border-bottom: 2px solid orchid; background-color: white; position: relative; }
.sweetLine { width: 80%; height: 12px; margin-bottom: 12px; border-bottom: 2px solid rebeccapurple; background-color: white; position: relative; }
.dryLine { width: 80%; height: 12px; margin-bottom: 12px; border-bottom: 2px solid gold; background-color: white; position: relative; }
.deepLine { width: 80%; height: 12px; margin-bottom: 12px; border-bottom: 2px solid lightsalmon; background-color: white; position: relative; }
.oldLine { width: 80%; height: 12px; margin-bottom: 12px; border-bottom: 2px solid firebrick; background-color: white; position: relative; }
.delicateLine { width: 80%; height: 12px; margin-bottom: 12px; border-bottom: 2px solid paleturquoise; background-color: white; position: relative; }
.juicyLine { width: 80%; height: 12px; margin-bottom: 12px; border-bottom: 2px solid steelblue; background-color: white; position: relative; }
.oilyLine { width: 80%; height: 12px; margin-bottom: 12px; border-bottom: 2px solid royalblue; background-color: white; position: relative; }
.lightlyLine { width: 80%; height: 12px; margin-bottom: 12px; border-bottom: 2px solid palegreen; background-color: white; position: relative; }
.peatedLine { width: 80%; height: 12px; margin-bottom: 12px; border-bottom: 2px solid olivedrab; background-color: white; position: relative; }
.heavilyLine { width: 80%; height: 12px; margin-bottom: 12px; border-bottom: 2px solid darkolivegreen; background-color: white; position: relative; }

.bottleInfoContainer { display: grid; margin-left: calc(10% - 8px); margin-right: calc(9% - 3px); grid-gap: 1px; grid-template-columns: 25% 25% 25% 25%; padding: 0px; padding-top: 1px; background-color: #efeff6; position: relative !important }
.bottleInfoPic  { grid-row-start: span 4; grid-column-start: 1; grid-column-end: 2; background: white; text-align: center; padding: 0px; padding-left: 16px; padding-top: 0px; position: static }
.bottleInfoText { background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}

.bottleHeaderCask { font-size:20pt; font-family: Oswald, Arial, Helvetica, sans-serif; font-weight: normal }
.bottleHeaderName { font-size:42px; font-family: Oswald, Arial, Helvetica, sans-serif; font-weight: 800; margin-top: -8px }

.optionGridContainer { display: grid; margin-left: calc(10% - 8px); margin-right: calc(9% - 3px); grid-gap: 1px; grid-template-columns: 20% 20% 20% 20% 20%; padding: 0px; padding-top: 1px; background-color: #efeff6; position: relative !important }
.optionGridDisplay  { grid-column-start: 1; grid-column-end: 2; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static }
.optionGridDistillery { grid-column-start: 2; grid-column-end: 3; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}
.optionGridStartDate { grid-column-start: 3; grid-column-end: 4; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}
.optionGridEndDate { grid-column-start: 4; grid-column-end: 5; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}
.optionGridVaults { grid-column-start: 5; grid-column-end: 6; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}

.optionGridMinAge  { grid-column-start: 1; grid-column-end: 2; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static }
.optionGridMaxAge { grid-column-start: 2; grid-column-end: 3; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}
.optionGridDistilledStartDate { grid-column-start: 3; grid-column-end: 4; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}
.optionGridDistilledEndDate { grid-column-start: 4; grid-column-end: 5; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}
.optionGridRegion { grid-column-start: 5; grid-column-end: 6; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}

.optionGridMinPrice { grid-column-start: 1; grid-column-end: 2; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}
.optionGridMaxPrice { grid-column-start: 2; grid-column-end: 3; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}
.optionGridProfile { grid-column-start: 3; grid-column-end: 4; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}
.optionGridIgnoreDay { grid-column-start: 4; grid-column-end: 5; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}
.optionGridIgnoreYear { grid-column-start: 5; grid-column-end: 6; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}

.headerDiv { width: 100%; margin-bottom: 0px; background-color: white; border-bottom-color: royalblue; border-bottom-width: 2px; border-bottom-style: solid; position:fixed; top:0; left:0; z-index: 1; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09); }
.dark_HeaderDiv { width: 100%; margin-bottom: 0px; background-color: black; border-bottom-color: royalblue; border-bottom-width: 2px; border-bottom-style: solid; position:fixed; top:0; left:0; z-index: 1; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09); }

.starCheckbox { display: none; }

.starCheckbox + label {
  background: url("/gfx/starUnselected512.png") 0px 0px/32px 32px no-repeat;
  display: inline-block;
  padding: 0px;
  height: 32px;
  width: 32px;
  z-index: 3;
}

.starCheckbox:checked + label {
  background: url("/gfx/starSelected512.png") 0px 0px/32px 32px no-repeat;
  display: inline-block;
  padding: 0px;
  height: 32px;
  width: 32px;
  z-index: 3;
}

@media only screen 
  and (max-device-width: 640px), 
  only screen and (max-device-width: 667px), 
  only screen and (max-width: 480px) {

  .radioOptionText { font-size: 28pt; padding-right: 10px }
  .optionText { font-size: 28pt; padding-right: 20px; padding-top: 3px }
  .optionTextBox { font-size: 16pt; padding-right: 10px; width: 90%; }

  h2 { font-size: 48pt; font-weight: bold; text-align: center; margin-bottom: 4px; margin-top: 16px; position: relative; top: 0px }
  h3 { font-size: 28pt; font-weight: normal; text-align: center; margin-top: 0px; padding-top: 0px; position: relative; top: 0px }
  h4 { font-size: 24pt; font-style: italic; font-weight: normal; text-align: center; margin-top: 0px; padding-top: 0px; position: relative; top: 10px }
  j2 { font-size: 58pt; font-weight: bold; text-align: center; padding-bottom: 24px; margin-top: 16px; color: mediumblue; position: relative; top: 0px }
  optionHeaderText { font-size: 18pt; font-weight: bold; }
  #wordSpan0 { font-size: 28pt; font-weight: normal; text-align: center; margin-top: 0px; padding-top: 0px; position: relative; top: 10px }
  #wordSpan1 { font-size: 28pt; font-weight: bold; text-align: center; margin-top: 0px; padding-top: 0px; position: relative; top: 10px }
  #buttonParentBox { text-align: center; position: relative; min-height: 590px; width: 90%; background: white; display: inline-block; padding: 0px; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2), 0 14px 44px 0 rgba(0, 0, 0, 0.19); }
  #checkAllButton { background-color: #ccffcc; margin-right: 20px; width:18%; height:70px; font-size: 16pt; font-weight:bold; text-align:center; border-radius: 40px;  }
  #uncheckAllButton { background-color: #ffcccc; width:19%; height:70px; font-size: 16pt; font-weight:bold; text-align:center; border-radius: 40px;  }
  #headerDiv { width: 100%; display: inline-block; margin-bottom: 0px; background-color: white; border-bottom-color: royalblue; border-bottom-width: 2px; border-bottom-style: solid; position:fixed; top:0; left:0; z-index: 1; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); }
  #counterSpan { text-align: right; width: 10%; margin-bottom: 0px; margin-right: 10px; font-size: 18pt; font-style: italic; position: absolute; top: 5px; right: 0px; }
  #starSpan { text-align: left; width: 64px; height: 64px; margin-bottom: 0px; position: absolute; bottom: 60px; left: 70px; }
  #results { font-size: 16px; font-family: Oswald, Arial, Helvetica, sans-serif; border-collapse: collapse; border-spacing: 0; width: 100%; }
  .optionBox { width: 90%; background: white; display: inline-block; text-align: left; padding: 16px; padding-top: 0px; padding-bottom:24px; border-style:solid; border-color: #ebebeb; border-width: 1px }
  .button1 { width: 50%; height: 150px; color: white; background:radial-gradient(green, green); font-size: 32pt; font-weight: bold; border-radius: 40px; border-style: solid;}
  .button2 { width: 50%; height: 100px; position: absolute; top: 450px; left: 0; right: 0; margin: auto; font-size: 32pt; font-weight: bold; background: linear-gradient(#fafaff, #ccccff); border-radius: 40px; }
  .optionSpan { background-color: #ffffff; display: inline-block; position: relative; margin-top: 8px; margin-right: 8px; }

  .textBoxContainer { display: grid; margin-left: calc(10% - 8px); margin-right: calc(9% - 3px); grid-gap: 1px; grid-template-columns: 100%; padding: 0px; padding-top: 40px; background-color: #efeff6; position: relative !important }
  .textBoxDisplay  { grid-column-start: 1; grid-column-end: 2; background: white; text-align: left; padding: 6px; padding-left: 16px; padding-top: 8px; position: static }

  .textBoxResultsContainer { display: grid; margin-left: calc(3% - 8px); margin-right: calc(2% - 3px); grid-gap: 1px; grid-template-columns: 100%; padding: 0px; padding-top: 24px; background-color: #efeff6; position: relative !important }
  .textBoxResults  { font-family: Oswald, Arial, Helvetica, sans-serif; font-size:32px; line-height: 48px; grid-column-start: 1; grid-column-end: 2; background: white; text-align: left; padding: 6px; padding-left: 16px; padding-top: 8px; position: static }

  .optionGridContainer { display: grid; margin-left: calc(5% - 12px); margin-right: calc(5% - 11px); grid-gap: 1px; grid-template-columns: 33% 33% 33%; padding: 0px; background-color: #efeff6; position: relative !important }

  .optionGridDistillery { grid-column-start: 1; grid-column-end: 2; grid-row: 1; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}
  .optionGridStartDate { grid-column-start: 2; grid-column-end: 3; grid-row: 1; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}
  .optionGridEndDate { grid-column-start: 3; grid-column-end: 4; grid-row: 1; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}

  .optionGridDisplay  { grid-column-start: 1; grid-column-end: 2; grid-row: 2; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static }
  .optionGridDistilledStartDate { grid-column-start: 2; grid-column-end: 3; grid-row: 2; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}
  .optionGridDistilledEndDate { grid-column-start: 3; grid-column-end: 4; grid-row: 2; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}
  
  .optionGridMinAge { grid-column-start: 1; grid-column-end: 2; grid-row: 3; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static }
  .optionGridMaxAge { grid-column-start: 2; grid-column-end: 3; grid-row: 3; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}
  .optionGridRegion { grid-column-start: 3; grid-column-end: 4; grid-row: 3; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}

  .optionGridMinPrice { grid-column-start: 1; grid-column-end: 2; grid-row: 4; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}
  .optionGridMaxPrice { grid-column-start: 2; grid-column-end: 3; grid-row: 4; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}
  .optionGridProfile { grid-column-start: 3; grid-column-end: 4; grid-row: 4; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}

  .optionGridVaults { grid-column-start: 1; grid-column-end: 2; grid-row: 5; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}

  .optionGridIgnoreDay { grid-column-start: 2; grid-column-end: 3; grid-row: 5; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}
  .optionGridIgnoreYear { grid-column-start: 3; grid-column-end: 4; grid-row: 5; background: white; text-align: left; padding: 16px; padding-top: 0px; position: static}

  .bottleTextBoxContainer { display: grid; margin-left: calc(10% - 8px); margin-right: calc(9% - 3px); grid-gap: 1px; grid-template-columns: 100%; padding: 0px; padding-top: 50px; background-color: #efeff6; position: relative !important }
  .bottleTextBoxDisplay  { grid-column-start: 1; grid-column-end: 2; background: white; text-align: center; padding: 0px; padding-left: 16px; padding-top: 8px; padding-bottom: 8px; position: static }
  
  .bottlePicContainer { text-align: center; vertical-align: middle; margin-left: calc(8% - 8px); margin-right: calc(7% - 3px); padding: 0px; padding-top: 1px; background-color: #efeff6; position: relative !important }
  .bottleText  { font-size:24px; background: white; text-align: left; margin-left: 302px; width: 64%; position: static }

  .separatorLine { width: 80%; height: 11px; margin-bottom: 11px; border-bottom: 2px solid royalblue; background-color: white; position: relative; }
  .whiteLine { width: 80%; height: 29px; margin-bottom: 16px; border-bottom: 2px solid white; background-color: white; position: relative; }
  .spritelyLine { width: 80%; height: 11px; margin-bottom: 11px; border-bottom: 2px solid thistle; background-color: white; position: relative; }
  .mellowLine { width: 80%; height: 11px; margin-bottom: 11px; border-bottom: 2px solid orchid; background-color: white; position: relative; }
  .sweetLine { width: 80%; height: 11px; margin-bottom: 11px; border-bottom: 2px solid rebeccapurple; background-color: white; position: relative; }
  .dryLine { width: 80%; height: 11px; margin-bottom: 11px; border-bottom: 2px solid gold; background-color: white; position: relative; }
  .deepLine { width: 80%; height: 11px; margin-bottom: 11px; border-bottom: 2px solid lightsalmon; background-color: white; position: relative; }
  .oldLine { width: 80%; height: 11px; margin-bottom: 11px; border-bottom: 2px solid firebrick; background-color: white; position: relative; }
  .delicateLine { width: 80%; height: 11px; margin-bottom: 11px; border-bottom: 2px solid paleturquoise; background-color: white; position: relative; }
  .juicyLine { width: 80%; height: 11px; margin-bottom: 11px; border-bottom: 2px solid steelblue; background-color: white; position: relative; }
  .oilyLine { width: 80%; height: 11px; margin-bottom: 11px; border-bottom: 2px solid royalblue; background-color: white; position: relative; }
  .lightlyLine { width: 80%; height: 11px; margin-bottom: 11px; border-bottom: 2px solid palegreen; background-color: white; position: relative; }
  .peatedLine { width: 80%; height: 11px; margin-bottom: 11px; border-bottom: 2px solid olivedrab; background-color: white; position: relative; }
  .heavilyLine { width: 80%; height: 11px; margin-bottom: 11px; border-bottom: 2px solid darkolivegreen; background-color: white; position: relative; }
  
  .starCheckbox { display: none; }

  .starCheckbox + label {
    background: url("/gfx/starUnselected512.png") 0px 0px/64px 64px no-repeat;
    display: inline-block;
    padding: 0px;
    height: 64px;
    width: 64px;
    z-index: 3;
  }
  
  .starCheckbox:checked + label {
    background: url("/gfx/starSelected512.png") 0px 0px/64px 64px no-repeat;
    display: inline-block;
    padding: 0px;
    height: 64px;
    width: 64px;
    z-index: 3;
  }

  /* CUSTOM CHECKBOX */

  .regular-checkbox { display: none; }

  .regular-checkbox + label {
    background-color: #fafafa;
    border: 2px solid #cacece;
    box-shadow: 0 2px 3px rgba(0,0,0,0.05), inset 0px -50px 32px -36px rgba(0,0,0,0.05);
    padding: 24px;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    top: 18px;
  }

  .regular-checkbox + label:active, .regular-checkbox:checked + label:active {
    box-shadow: 0 2px 3px rgba(0,0,0,0.05), inset 0px 2px 5px rgba(0,0,0,0.1);
  }

  .regular-checkbox:checked + label {
    background-color: #d6e6f1;
    border: 1px solid #adb8c0;
    box-shadow: 0 2px 3px rgba(0,0,0,0.05), inset 0px -50px 32px -36px rgba(0,0,0,0.05), inset 50px 32px -36px rgba(255,255,255,0.1);
  }

  .regular-checkbox:checked + label:after {
    content: '\2714';
    font-size: 34px;
    position: absolute;
    top: 2px;
    left: 6px;
    color: #0091ff;
  }

  /* CUSTOM RADIO */

  .regular-radio {
    display: none;
  }

  .regular-radio + label {
    -webkit-appearance: none;
    background-color: #fafafa;
    border: 2px solid #cacece;
    box-shadow: 0 2px 3px rgba(0,0,0,0.05), inset 0px -25px 16px -18px rgba(0,0,0,0.05);
    padding: 20px;
    border-radius: 50px;
    display: inline-block;
    position: relative;
    top: 8px;
  }

  .regular-radio:checked + label:before {
    content: ' ';
    width: 28px;
    height: 28px;
    border-radius: 50px;
    position: absolute;
    background: #0091ff;
    box-shadow: inset 0px 0px 16px rgba(0,0,0,0.3);
    text-shadow: 0px;
    top: 6px;
    left: 6px;
    font-size: 32px;
  }

  .regular-radio:checked + label {
    background-color: #d6e6f1;
    border: 2px solid #adb8c0;
    box-shadow: 0 2px 3px rgba(0,0,0,0.05), inset 0px -25px 16px -18px rgba(0,0,0,0.05), inset 25px 16px -18px rgba(255,255,255,0.1), inset 0px 0px 16px rgba(0,0,0,0.1);
  }

  .regular-radio + label:active, .regular-radio:checked + label:active {
    box-shadow: 0 2px 3px rgba(0,0,0,0.05), inset 0px 2px 5px rgba(0,0,0,0.1);
  }
}