#size-calc  {
  margin: 0 auto;
}
#size-calc > .card > .card-body {
  position: relative;
  overflow: hidden;
}
#size-calc > .card > .dismiss {
  position: absolute;
  top: 0;
  right: -.65em;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  cursor: pointer;
  z-index: 10;
}
#size-calc .card, #size-calc img {
  border-radius: .5em
}
#size-calc .brand-gr {
  width: 120px
}
#size-calc #size-result {
	position: relative;

}
#size-calc #size-result.bg-primary {
background: rgb(0,123,188);
background: -moz-linear-gradient(90deg, rgba(0,123,188,1) 0%, rgba(0,138,210,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(0,123,188,1) 0%, rgba(0,138,210,1) 100%);
background: linear-gradient(90deg, rgba(0,123,188,1) 0%, rgba(0,138,210,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#007bbc",endColorstr="#008ad2",GradientType=1);
}
#size-calc .card, #size-calc #sizeinmm {
	border-width: 2px
}
#size-calc .product-img {
  flex: 15%;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center center;
}
#size-calc #size-result:after {
	bottom: 100%;
	left: 40px;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #007cbe;
	border-width: 10px;
	margin-left: -10px;
}
#size-calc #size-result.bg-danger:after {
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: var(--danger);
}
#size-calc #how-its-done-img .badge, #size-calc #how-its-done-content .badge {
  font-size: 1em;
  max-height: 33px;
  min-width: 33px;
  border: 2px solid #00000020;  
  line-height: 1.25;
}
#size-calc #how-its-done-img .badge {
  position: absolute;
  top: 1em;
  left: calc(1em + 15px);
  background: #FFF;
}
.input-outer {
  position: relative;
}
.input-outer input {
  font-weight: bold;  
}
.input-outer input, .input-outer:after {
  font-size: 2em
}
.input-outer input, .input-outer input::placeholder, .input-outer:after {
  color: var(--primary) !important;
}
.input-outer:after {
    content: 'mm';
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
input[type='number'] {
    -moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.embed-in-frame {
  position: absolute;
  background: white;
  padding: 0 10px;
  left: calc(1.25rem - 10px);
  top: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 110%;
}
.embed-in-frame sup {
  position: relative;
  top: -0.25em
}
@media(min-width: 992px) {
  #size-calc > .card > .card-body {
    padding: 3em !important
  }
  #size-calc > .card > .card-body:after {
    top: -10px
  }
}
@media(max-width: 991px) {
  #size-calc > .card > .card-body {
    padding: 1.5em !important
  }
  #size-calc > .card > .card-body:after {
    top: -55px
  }
}
@media(min-width: 576px) {
  #size-calc > .card > .card-body:after {
    content: '';
    position: absolute;
    left: 45%;
    display: block;
    height: 140px;
    width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='1911' height='573' version='1.1'%3E%3Cg fill='none' stroke='none' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='10' stroke-dasharray='' stroke-dashoffset='0' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start' mix-blend-mode='normal'/%3E%3Cg id='1 &quot;in. Tick Group' fill='none' stroke='none' stroke-width='none' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='10' stroke-dasharray='' stroke-dashoffset='0' font-family='none' font-weight='none' font-size='none' text-anchor='none' mix-blend-mode='normal'%3E%3Cline x1='0' y1='0' x2='0' y2='108' id='1 &quot;in. Tick no. 0' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='4' y='109' id='1 &quot;in. label no. 0' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E0%3C/text%3E%3Cline x1='72' y1='0' x2='72' y2='108' id='1 &quot;in. Tick no. 1' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='76' y='109' id='1 &quot;in. label no. 1' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E1%3C/text%3E%3Cline x1='144' y1='0' x2='144' y2='108' id='1 &quot;in. Tick no. 2' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='148' y='109' id='1 &quot;in. label no. 2' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E2%3C/text%3E%3Cline x1='216' y1='0' x2='216' y2='108' id='1 &quot;in. Tick no. 3' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='220' y='109' id='1 &quot;in. label no. 3' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E3%3C/text%3E%3Cline x1='288' y1='0' x2='288' y2='108' id='1 &quot;in. Tick no. 4' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='292' y='109' id='1 &quot;in. label no. 4' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E4%3C/text%3E%3Cline x1='360' y1='0' x2='360' y2='108' id='1 &quot;in. Tick no. 5' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='364' y='109' id='1 &quot;in. label no. 5' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E5%3C/text%3E%3Cline x1='432' y1='0' x2='432' y2='108' id='1 &quot;in. Tick no. 6' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='436' y='109' id='1 &quot;in. label no. 6' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E6%3C/text%3E%3Cline x1='504' y1='0' x2='504' y2='108' id='1 &quot;in. Tick no. 7' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='508' y='109' id='1 &quot;in. label no. 7' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E7%3C/text%3E%3Cline x1='576' y1='0' x2='576' y2='108' id='1 &quot;in. Tick no. 8' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='580' y='109' id='1 &quot;in. label no. 8' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E8%3C/text%3E%3Cline x1='648' y1='0' x2='648' y2='108' id='1 &quot;in. Tick no. 9' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='652' y='109' id='1 &quot;in. label no. 9' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E9%3C/text%3E%3Cline x1='720' y1='0' x2='720' y2='108' id='1 &quot;in. Tick no. 10' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='724' y='109' id='1 &quot;in. label no. 10' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E10%3C/text%3E%3Cline x1='792' y1='0' x2='792' y2='108' id='1 &quot;in. Tick no. 11' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='796' y='109' id='1 &quot;in. label no. 11' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E11%3C/text%3E%3Cline x1='864' y1='0' x2='864' y2='108' id='1 &quot;in. Tick no. 12' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='868' y='109' id='1 &quot;in. label no. 12' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E12%3C/text%3E%3Cline x1='936' y1='0' x2='936' y2='108' id='1 &quot;in. Tick no. 13' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='940' y='109' id='1 &quot;in. label no. 13' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E13%3C/text%3E%3Cline x1='1008' y1='0' x2='1008' y2='108' id='1 &quot;in. Tick no. 14' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='1012' y='109' id='1 &quot;in. label no. 14' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E14%3C/text%3E%3Cline x1='1080' y1='0' x2='1080' y2='108' id='1 &quot;in. Tick no. 15' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='1084' y='109' id='1 &quot;in. label no. 15' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E15%3C/text%3E%3Cline x1='1152' y1='0' x2='1152' y2='108' id='1 &quot;in. Tick no. 16' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='1156' y='109' id='1 &quot;in. label no. 16' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E16%3C/text%3E%3Cline x1='1224' y1='0' x2='1224' y2='108' id='1 &quot;in. Tick no. 17' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='1228' y='109' id='1 &quot;in. label no. 17' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E17%3C/text%3E%3Cline x1='1296' y1='0' x2='1296' y2='108' id='1 &quot;in. Tick no. 18' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='1300' y='109' id='1 &quot;in. label no. 18' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E18%3C/text%3E%3Cline x1='1368' y1='0' x2='1368' y2='108' id='1 &quot;in. Tick no. 19' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='1372' y='109' id='1 &quot;in. label no. 19' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='start'%3E19%3C/text%3E%3Cline x1='1440' y1='0' x2='1440' y2='108' id='1 &quot;in. Tick no. 20' stroke='%23000000' stroke-width='1' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start'/%3E%3Ctext x='1436' y='109' id='1 &quot;in. label no. 20' fill='%23000000' stroke-width='1' font-family='monospace' font-weight='bold' font-size='18' text-anchor='end'%3E20%3C/text%3E%3C/g%3E%3Cg id='1/2 &quot;in. Tick Group' fill='none' stroke='%23000000' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='10' stroke-dasharray='' stroke-dashoffset='0' font-family='sans-serif' font-weight='normal' font-size='12' text-anchor='start' mix-blend-mode='normal'%3E%3Cline x1='36' y1='0' x2='36' y2='54' id='1/2 &quot;in. Tick no. 1'/%3E%3Cline x1='108' y1='0' x2='108' y2='54' id='1/2 &quot;in. Tick no. 3'/%3E%3Cline x1='180' y1='0' x2='180' y2='54' id='1/2 &quot;in. Tick no. 5'/%3E%3Cline x1='252' y1='0' x2='252' y2='54' id='1/2 &quot;in. Tick no. 7'/%3E%3Cline x1='324' y1='0' x2='324' y2='54' id='1/2 &quot;in. Tick no. 9'/%3E%3Cline x1='396' y1='0' x2='396' y2='54' id='1/2 &quot;in. Tick no. 11'/%3E%3Cline x1='468' y1='0' x2='468' y2='54' id='1/2 &quot;in. Tick no. 13'/%3E%3Cline x1='540' y1='0' x2='540' y2='54' id='1/2 &quot;in. Tick no. 15'/%3E%3Cline x1='612' y1='0' x2='612' y2='54' id='1/2 &quot;in. Tick no. 17'/%3E%3Cline x1='684' y1='0' x2='684' y2='54' id='1/2 &quot;in. Tick no. 19'/%3E%3Cline x1='756' y1='0' x2='756' y2='54' id='1/2 &quot;in. Tick no. 21'/%3E%3Cline x1='828' y1='0' x2='828' y2='54' id='1/2 &quot;in. Tick no. 23'/%3E%3Cline x1='900' y1='0' x2='900' y2='54' id='1/2 &quot;in. Tick no. 25'/%3E%3Cline x1='972' y1='0' x2='972' y2='54' id='1/2 &quot;in. Tick no. 27'/%3E%3Cline x1='1044' y1='0' x2='1044' y2='54' id='1/2 &quot;in. Tick no. 29'/%3E%3Cline x1='1116' y1='0' x2='1116' y2='54' id='1/2 &quot;in. Tick no. 31'/%3E%3Cline x1='1188' y1='0' x2='1188' y2='54' id='1/2 &quot;in. Tick no. 33'/%3E%3Cline x1='1260' y1='0' x2='1260' y2='54' id='1/2 &quot;in. Tick no. 35'/%3E%3Cline x1='1332' y1='0' x2='1332' y2='54' id='1/2 &quot;in. Tick no. 37'/%3E%3Cline x1='1404' y1='0' x2='1404' y2='54' id='1/2 &quot;in. Tick no. 39'/%3E%3C/g%3E%3C/svg%3E");
    background-position: top;
    background-repeat: no-repeat;
    opacity: 0.125
  }
}