html {
    --green-900: #048132;
    --green-700: #1eaa50;
    --green-500: #8be182;
    --green-300: #beeec1;
    --green-100: #e5ffe7;
    --blue-900: #022e8f;
    --blue-700: #0050ff;
    --blue-500: #2681ff;
    --blue-300: #cee2ff;
    --blue-100: #eaf3ff;
    --orange-900: #d34c18;
    --orange-700: #ff6022;
    --orange-500: #ff911e;
    --orange-300: #ffe589;
    --orange-100: #fff2c3;
    --purple-900: #24116a;
    --purple-700: #3c1eaa;
    --purple-500: #5f3cf0;
    --purple-300: #e4deff;
    --purple-100: #f4f2ff;
    --red-900: #6a0618;
    --red-700: #e63838;
    --red-500: #ff6a6a;
    --red-300: #fddee8;
    --red-100: #ffeef0;
    --gray-900: #222;
    --gray-800: #3e3e3e;
    --gray-700: #4e4e4e;
    --gray-600: #747474;
    --gray-500: #bebebe;
    --gray-400: #dfdfdf;
    --gray-300: #ebebeb;
    --gray-100: #f6f6f6;
    --black: #282828;
    --white: #fff;
    --teal-500: #1aaac0;
    --teal-300: #d0f4f4
}

body {
    margin: 0;
    padding: 0;
    font-family: 'ProximaNova', 'ProximaNova-fallback', 'Helvetica', 'sans-serif';
    line-height: 1.3em;
    font-size: 1em;
    height: 100%
}

b, strong, th {
    font-family: 'ProximaNovaBold', 'ProximaNovaBold-fallback', 'Helvetica', 'sans-serif';
    font-weight: normal
}

iframe {
    border: 0
}

p {
    margin: 0
}

select, input, textarea {
    color: #444
}

input[type="radio"], input[type="checkbox"] {
    margin: 3px
}

label {
    color: #4d4e53;
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
    line-height: 1.2em
}

a {
    color: var(--gray-700);
    outline: 0 !important;
    background-color: transparent
}

a:active, a:hover {
    outline: 0
}

.wordbreak {
    word-break: break-all
}

.overflow-anywhere {
    overflow-wrap: anywhere
}

.nowordbreak {
    word-break: normal
}

.whitespace {
    white-space: normal
}

.hideoverflow {
    overflow: hidden
}

.flexcenter {
    display: flex;
    justify-content: center
}

.open .dropdown-menu {
    transform: translateZ(0)
}

small {
    font-size: 80%
}

hr {
    height: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: #333;
    border: 0;
    border-bottom: 1px solid #e5e5e5
}

input[type=search] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

input[type=file] {
    display: block
}

input[type=range] {
    display: block;
    width: 100%
}

select[multiple], select[size] {
    height: auto
}

input[type=file]:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    input[type=date], input[type=time], input[type=datetime-local], input[type=month] {
        line-height: 34px
    }
}

.clear {
    clear: both
}

.none {
    display: none
}

.center {
    text-align: center
}

.textright {
    text-align: right
}

.fullwidth {
    width: 100%
}

.fullheight {
    height: 100%
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.inlineblock {
    display: inline-block
}

.top {
    top: 0
}

.right {
    right: 0
}

.left {
    left: 0
}

#aligntable {
    text-align: left;
    display: table
}

#aligntable .align {
    vertical-align: middle;
    display: table-cell
}

.tooltip-inner {
    word-break: break-word
}

.modal-title {
    text-transform: uppercase
}

.proximanovalight {
    font-family: 'ProximaNovaLight', 'ProximaNovaLight-fallback', 'Helvetica', 'sans-serif';
    font-weight: normal
}

.proximanova {
    font-family: 'ProximaNova', 'ProximaNova-fallback', 'Helvetica', 'sans-serif';
    font-weight: normal;
    letter-spacing: -0.025em
}

.proximanovasemibold {
    font-family: 'ProximaNovaSemiBold', 'ProximaNovaSemiBold-fallback', 'Helvetica', 'sans-serif';
    font-weight: normal;
    letter-spacing: -0.025em
}

.proximanovabold {
    font-family: 'ProximaNovaBold', 'ProximaNovaBold-fallback', 'Helvetica', 'sans-serif';
    font-weight: normal;
    letter-spacing: -0.025em
}

.proximanova strong {
    font-family: 'ProximaNovaBold', 'ProximaNovaBold-fallback', 'Helvetica', 'sans-serif';
    font-weight: normal;
    letter-spacing: -0.025em
}

.stag {
    font-family: 'ProximaNovaBold', 'ProximaNovaBold-fallback', 'Helvetica', 'sans-serif';
    font-weight: normal;
    letter-spacing: -0.025em
}

.strikethrough {
    text-decoration: line-through
}

.underline {
    text-decoration: underline;
    text-underline-position: under
}

.uppercase {
    text-transform: uppercase
}

.letterspacing0 {
    letter-spacing: 0
}

.font10 {
    font-size: 10px;
    line-height: 12px
}

.font12 {
    font-size: 12px;
    line-height: 14px
}

.font14 {
    font-size: 14px;
    line-height: 18px
}

.font15 {
    font-size: 15px;
    line-height: 20px
}

.font16 {
    font-size: 16px;
    line-height: 22px
}

.font18 {
    font-size: 18px;
    line-height: 24px
}

.font20 {
    font-size: 20px;
    line-height: 22px
}

.font25 {
    font-size: 22px;
    line-height: 25px
}

.font30 {
    font-size: 28px;
    line-height: 30px
}

.font35 {
    font-size: 30px;
    line-height: 32px
}

.font40 {
    font-size: 32px;
    line-height: 35px
}

.font50 {
    font-size: 35px;
    line-height: 35px
}

.font60 {
    font-size: 40px;
    line-height: 40px
}

.font70 {
    font-size: 42px;
    line-height: 42px
}

.font80 {
    font-size: 45px;
    line-height: 45px
}

.font90 {
    font-size: 48px;
    line-height: 48px
}

.font93 {
    font-size: 42px;
    line-height: 45px
}

@media (min-width: 768px) {
    .font25 {
        font-size: 25px;
        line-height: 30px
    }

    .font30 {
        font-size: 30px;
        line-height: 37px
    }

    .font35 {
        font-size: 35px;
        line-height: 42px
    }

    .font40 {
        font-size: 40px;
        line-height: 48px
    }

    .font50 {
        font-size: 50px;
        line-height: 58px
    }

    .font60 {
        font-size: 60px;
        line-height: 60px
    }

    .font70 {
        font-size: 70px;
        line-height: 72px
    }

    .font80 {
        font-size: 80px;
        line-height: 85px
    }

    .font90 {
        font-size: 90px;
        line-height: 100px
    }

    .font93 {
        font-size: 93px;
        line-height: 87px
    }
}

.lineheight24 {
    line-height: 24px
}

.lineheight32 {
    line-height: 32px
}

.lineheight40 {
    line-height: 40px
}

.colordarkgreen {
    color: var(--green-700)
}

.colorgreen {
    color: var(--green-500)
}

.colorlightgreen {
    color: var(--green-300)
}

.colordarkorange {
    color: var(--orange-700)
}

.colororange {
    color: var(--orange-500)
}

.colorlightorange, .colorrust {
    color: var(--orange-300)
}

.colordarkblue {
    color: var(--blue-700)
}

.colorblue {
    color: var(--blue-500)
}

.colorlightblue {
    color: var(--blue-300)
}

.colordarkpurple {
    color: var(--purple-700)
}

.colorpurple {
    color: var(--purple-500)
}

.colorlightpurple {
    color: var(--purple-300)
}

.colordarkgray {
    color: var(--gray-700)
}

.colorgray600 {
    color: var(--gray-600)
}

.colorgray, .colormediumgray {
    color: var(--gray-500)
}

.colorlightgray {
    color: var(--gray-300)
}

.colordarkred {
    color: var(--red-700)
}

.colorred {
    color: var(--red-500)
}

.colorlightred {
    color: var(--red-300)
}

.colorblack {
    color: var(--black)
}

.colorwhite {
    color: var(--white)
}

.colorgray707070 {
    color: var(--gray-500)
}

.colorteal500 {
    color: var(--teal-500)
}

.colorteal300 {
    color: var(--teal-300)
}

.pointer {
    cursor: pointer
}

.cursorHelp {
    cursor: help
}

a.bluelink {
    color: var(--blue-700)
}

a.bluelinkhover:hover {
    color: var(--blue-700)
}

a.bluelinkhover:active {
    color: var(--blue-700)
}

.nounderline {
    text-decoration: none
}

.nounderline:hover {
    text-decoration: underline
}

.nounderlinehover, .nounderlinehover:hover {
    text-decoration: none
}

.hoverwhite:hover {
    color: #f2f2f2
}

.hoverred:hover {
    color: var(--red-700)
}

.hoverredpurple:hover {
    color: var(--purple-500)
}

.btn {
    font-family: "ProximaNova";
    text-decoration: none;
    color: var(--black);
    line-height: 1rem;
    border-radius: 2rem;
    padding: 1em 2em;
    border: 0
}

.btn-primary, .btn-primary:hover, .btn-default, .btn-default:hover, .btn-success, .btn-green {
    background-color: var(--green-500);
    border: 0
}

.btn-orange {
    background-color: var(--green-500)
}

.btn-blue {
    background-color: var(--green-500)
}

.btn-purple {
    background-color: var(--green-500)
}

.btn-white {
    background-color: var(--green-500)
}

.btn-danger, .btn.btn-danger:hover {
    color: var(--white)
}

.btn-gray {
    background-color: var(--gray-700);
    color: var(--white)
}

.btn:hover {
    color: var(--black);
    opacity: .9;
    text-decoration: none
}

.btn-gray:hover {
    color: var(--white)
}

.btn:active {
    opacity: .9
}

.btn:focus, .btn:active {
    outline: none !important
}

.btn-line {
    background: var(--white);
    border: 1px solid var(--green-700)
}

.btn-gray.btn-line {
    color: var(--black)
}

.btn.btn-link {
    font-family: "ProximaNovaSemiBold";
    text-decoration: none
}

.btn.btn-link:hover {
    text-decoration: underline
}

.btn.btn-link::after {
    content: url('/tools/media/hecoicons/linkarrow.svg');
    margin-left: 7px;
    vertical-align: middle
}

.btn.btn-link.colordarkgreen {
    color: var(--green-700)
}

.btn.btn-link.colordarkorange {
    color: var(--green-700)
}

.btn.btn-link.colordarkblue {
    color: var(--green-700)
}

.btn.btn-link.colordarkpurple {
    color: var(--green-700)
}

.btn.btn-link.colordarkgray {
    color: var(--green-700)
}

.btn-basic {
    padding: 0;
    border-radius: 0;
    line-height: 1.2em;
    background-color: transparent
}

.btn.btn-xs {
    font-size: .6em;
    padding: .5em 1em
}

.btn.btn-sm {
    font-size: .8em;
    padding: .5em 1.2em
}

.btn.btn-lg {
    font-size: 1em;
    padding: .8em 1.2em;
    border-radius: 1.5rem
}

@media (min-width: 768px) {
    .btn.btn-lg {
        font-size: 1.2em;
        padding: .8em 2.5em;
        border-radius: 2rem
    }
}

.input-group-btn > .btn {
    padding: 8px 12px
}

.input-group-addon {
    background: var(--gray-100);
    color: var(--gray-700);
    border: 0;
    border: 1px solid var(--gray-500)
}

.btn.btn-arrow {
    padding: 1em .18em .9em 2em;
    background-color: var(--green-500);
    border: 0
}

.btn.btn-arrow::after {
    content: url('/tools/media/hecoicons/linkarrow.svg');
    margin: 0 5px 0 10px;
    padding: 8px 8px 5px 8px;
    vertical-align: middle;
    background-color: var(--black);
    border-radius: 50%
}

.btn-arrow.btn-arrow-black {
    color: var(--white);
    background-color: var(--black)
}

.btn-arrow.btn-arrow-black::after {
    content: url('/tools/media/hecoicons/linkarrow-black.svg');
    background-color: var(--green-500)
}

.togglebutton {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 30px;
    height: 15px;
    display: inline-block;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    background-color: var(--gray-300);
    transition: background-color ease .3s
}

.togglebutton:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    width: 15px;
    height: 15px;
    background-color: var(--red-700);
    border-radius: 50%;
    transition: all cubic-bezier(0.3, 1.5, 0.7, 1) .3s
}

.togglebutton:checked:before {
    left: 15px;
    background-color: var(--green-700)
}

.togglebutton.graybutton {
    background-color: var(--gray-600)
}

.togglebutton.graybutton:before, .togglebutton.graybutton:after {
    background-color: var(--gray-500)
}

.duration-toggle {
    position: relative;
    display: inline-block;
    width: 240px
}

.duration-toggle *, .duration-toggle *:before, .duration-toggle *:after {
    box-sizing: border-box
}

.duration-toggle input[type=checkbox] {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0
}

.duration-toggle label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer
}

.duration-toggle label .duration-toggle__switch {
    position: relative;
    transition: background-color .3s cubic-bezier(0, 1, 0.5, 1);
    background: var(--green-500);
    height: 36px;
    flex: 0 0 244px;
    line-height: 1rem;
    border-radius: 2rem
}

.duration-toggle label .duration-toggle__switch:before {
    content: attr(data-checked);
    position: absolute;
    top: 0;
    text-align: center;
    color: var(--black);
    left: 120px;
    font-size: 12px;
    font-weight: 500;
    line-height: 36px;
    width: 120px;
    padding: 0 12px
}

.duration-toggle label .duration-toggle__switch:after {
    transition: transform .3s cubic-bezier(0, 1, 0.5, 1);
    color: var(--black);
    top: 2px;
    left: 2px;
    border-radius: 2rem;
    width: 120px;
    line-height: 32px;
    font-size: 12px;
    content: attr(data-unchecked);
    position: absolute;
    z-index: 5;
    text-align: center;
    background: white;
    transform: translate3d(0, 0, 0)
}

.duration-toggle input[type=checkbox]:checked ~ label .duration-toggle__switch {
    background-color: var(--green-500)
}

.duration-toggle input[type=checkbox]:checked ~ label .duration-toggle__switch:before {
    content: attr(data-unchecked);
    left: 0
}

.duration-toggle input[type=checkbox]:checked ~ label .duration-toggle__switch:after {
    content: attr(data-checked);
    color: var(--black);
    transform: translate3d(120px, 0, 0)
}

.duration-toggle input[type=checkbox]:checked:focus ~ label .duration-toggle__switch:after {
    color: var(--black);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4)
}

.duration-toggle.colororange label .duration-toggle__switch {
    background: var(--green-500)
}

.duration-toggle.colororange label .duration-toggle__switch:after, .duration-toggle.colororange input[type=checkbox]:checked ~ label .duration-toggle__switch:after, .duration-toggle.colororange input[type=checkbox]:checked:focus ~ label .duration-toggle__switch:after {
    color: var(--black)
}

.duration-toggle.colororange input[type=checkbox]:checked ~ label .duration-toggle__switch {
    background-color: var(--green-500)
}

.duration-toggle.colorblue label .duration-toggle__switch {
    background: var(--green-500)
}

.duration-toggle.colorblue label .duration-toggle__switch:after, .duration-toggle.colorblue input[type=checkbox]:checked ~ label .duration-toggle__switch:after, .duration-toggle.colorblue input[type=checkbox]:checked:focus ~ label .duration-toggle__switch:after {
    color: var(--black)
}

.duration-toggle.colorblue input[type=checkbox]:checked ~ label .duration-toggle__switch {
    background-color: var(--green-500)
}

.duration-toggle.colordarkblue label .duration-toggle__switch {
    background: var(--green-500)
}

.duration-toggle.colordarkblue label .duration-toggle__switch:after, .duration-toggle.colordarkblue input[type=checkbox]:checked ~ label .duration-toggle__switch:after, .duration-toggle.colordarkblue input[type=checkbox]:checked:focus ~ label .duration-toggle__switch:after {
    color: var(--black)
}

.duration-toggle.colordarkblue input[type=checkbox]:checked ~ label .duration-toggle__switch {
    background-color: var(--green-500)
}

.duration-toggle.colorpurple label .duration-toggle__switch {
    background: var(--green-500)
}

.duration-toggle.colorpurple label .duration-toggle__switch:after, .duration-toggle.colorpurple input[type=checkbox]:checked ~ label .duration-toggle__switch:after, .duration-toggle.colorpurple input[type=checkbox]:checked:focus ~ label .duration-toggle__switch:after {
    color: var(--black)
}

.duration-toggle.colorpurple input[type=checkbox]:checked ~ label .duration-toggle__switch {
    background-color: var(--green-500)
}

.duration-toggle.colordarkgray label .duration-toggle__switch {
    background: var(--green-500)
}

.duration-toggle.colordarkgray label .duration-toggle__switch:after, .duration-toggle.colordarkgray input[type=checkbox]:checked ~ label .duration-toggle__switch:after, .duration-toggle.colordarkgray input[type=checkbox]:checked:focus ~ label .duration-toggle__switch:after {
    color: var(--black)
}

.duration-toggle.colordarkgray input[type=checkbox]:checked ~ label .duration-toggle__switch {
    background-color: var(--green-500)
}

.themetoggle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 54px;
    height: 28px;
    display: inline-block;
    position: relative;
    border-radius: 50px;
    overflow: hidden;
    cursor: pointer;
    background-color: #ddd;
    vertical-align: middle;
    transition: background-color ease .3s
}

.themetoggle:before {
    content: "";
    background: var(--white) no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg%20enable-background='new%200%200%2025%2025'%20viewBox='0%200%2032%2032'%20xmlns='http://www.w3.org/2000/svg'%20height='20px'%20style='margin:%204px%200%200%204px;'%3E%3Cg%20transform='matrix(.1%200%200%20-.1%200%20511)'%3E%3Cpath%20d='m115.5%205083.3c-5.1-14.6-9.2-26.7-9.1-26.9s2.1.3%204.5.8c5.8%201.4%2023.4%201.4%2029.1%200%202.2-.5%204-.8%204-.6%200%20.8-18.5%2053.3-18.8%2053.3-.2.1-4.5-11.9-9.7-26.6z'%20fill='%23111111'/%3E%3Cpath%20d='m36.5%205073.2c.2-.3%205.6-11.7%2012.2-25.5s12.1-25.2%2012.3-25.5%201.8%201.5%203.3%203.9c3.6%205.6%2013.9%2016%2019.5%2019.7%202.4%201.6%204.3%202.9%204.2%203s-10.9%205.3-24.1%2011.6c-13.2%206.4-24.8%2011.9-25.9%2012.5-1%20.4-1.7.6-1.5.3z'%20fill='%23111111'/%3E%3Cpath%20d='m188.4%205061.2c-13.6-6.5-24.8-12-25-12.3-.2-.2%201.6-1.7%203.9-3.2%205.4-3.6%2015.9-14.1%2019.1-19.2%201.4-2.3%202.7-4.1%202.9-4.1s3.6%206.8%207.6%2015.1c4%208.2%209.4%2019.7%2012.1%2025.3s4.7%2010.2%204.4%2010.2c-.1%200-11.4-5.4-25-11.8z'%20fill='%23111111'/%3E%3Cpath%20d='m114.4%205047.4c-19.5-3.5-36.8-16.5-45.6-34.1-10.4-21-8.9-44.6%204.2-64.5%203.4-5.1%2011.3-13%2016.5-16.5%205.4-3.6%2013.8-7.5%2020-9.2%204.3-1.2%206.7-1.4%2016.4-1.4%2010.5%200%2011.8.1%2017.1%201.8%2043.6%2013.3%2060.2%2063.8%2032.9%20100.2-13.9%2018.3-38.6%2027.9-61.5%2023.7z'%20fill='%23111111'/%3E%3Cpath%20d='m26.1%204994.3c-14.4-5.1-26.1-9.3-26.1-9.5%200-.5%2053.2-19%2053.5-18.7.2.1-.2%202.5-.8%205.1-1.4%206.4-1.4%2020.6.1%2027.1%201.2%205.7%201.2%205.3.3%205.3-.5-.1-12.6-4.2-27-9.3z'%20fill='%23111111'/%3E%3Cpath%20d='m197.5%205001.9c2.2-8.8%202.6-22.4.8-30.7-.5-2.7-.9-4.9-.8-5%20.3-.3%2052.9%2018.3%2052.9%2018.6%200%20.2-11.6%204.4-25.8%209.3-14.1%204.9-26.1%209.1-26.7%209.3-.7.3-.8%200-.4-1.5z'%20fill='%23111111'/%3E%3Cpath%20d='m48.8%204922.1c-6.8-14.2-12.3-25.9-12.2-25.9.1-.1%209.3%204.2%2020.6%209.6s22.8%2011%2025.8%2012.3l5.4%202.5-4.1%202.7c-5.5%203.6-17.2%2015.4-20.3%2020.5-1.4%202.2-2.6%204-2.7%204s-5.7-11.6-12.5-25.7z'%20fill='%23111111'/%3E%3Cpath%20d='m185.9%204942.1c-3.7-5.5-14.5-16-19.5-18.9-1.9-1.2-3.6-2.4-3.6-2.6%200-.3%2050-24.6%2050.8-24.6.2%200-5.1%2011.4-11.8%2025.3-6.6%2013.9-12.3%2025.3-12.5%2025.3-.1-.1-1.7-2.1-3.4-4.5z'%20fill='%23111111'/%3E%3Cpath%20d='m106.4%204912.9c0-.9%2018.5-53.3%2018.8-53.3.4%200%2018.9%2052.7%2018.6%2052.9-.1.1-2.8-.3-6-.8-7-1.2-22.7-.8-28%20.6-1.9.6-3.4.8-3.4.6z'%20fill='%23111111'/%3E%3C/g%3E%3C/svg%3E");
    display: block;
    position: absolute;
    z-index: 2;
    width: 24px;
    height: 24px;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: all cubic-bezier(0.3, 1.5, 0.7, 1) .3s
}

.themetoggle:checked:before {
    background-image: url("data:image/svg+xml,%3Csvg%20enable-background='new%200%200%2025%2025'%20viewBox='0%200%2035%2035'%20xmlns='http://www.w3.org/2000/svg'%20height='22px'%20style='margin:%204px%200%200%206px;'%3E%3Cpath%20d='m13.2%2025c-7.3%200-13.2-5.9-13.2-13.2%200-5%202.8-9.5%207.3-11.8.2%200%20.5%200%20.6.2s.2.4.1.6c-.8%201.6-1.2%203.4-1.2%205.3%200%206.7%205.4%2012.1%2012.1%2012.1%201.9%200%203.7-.4%205.4-1.3.2-.1.4-.1.6.1s.2.4.1.6c-2.3%204.6-6.8%207.4-11.8%207.4z'%20fill='%23111111'/%3E%3C/svg%3E")
}

.themetoggle:checked {
    background-color: #333
}

.themetoggle:checked:before {
    left: 27px
}

.bttr-btn {
    color: var(--white);
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.8em;
    border-radius: 2rem;
    border: 0;
    cursor: pointer;
    font-weight: 400;
    font-stretch: normal;
    letter-spacing: .8px;
    padding: .72em 1.5em;
    position: relative;
    transition: all .2s ease-in-out;
    background: var(--purple-700)
}

.bttr-btn:focus {
    outline: 0
}

.bttr-btn .icon-cart {
    background-image: url('/tools/media/checkout/cart2.svg');
    width: .58em;
    height: .90em;
    opacity: 0;
    z-index: 10;
    position: absolute;
    top: 1em;
    right: .5em;
    transform: translateX(-100%);
    transition-timing-function: ease-in;
    transition: .2s
}

.bttr-btn.add:hover {
    padding: .72em 2em .72em 1em;
    background-repeat: no-repeat
}

.bttr-btn.add:hover > .icon-cart {
    transition: .25s;
    transition-timing-function: ease-out;
    transform: translateX(0);
    opacity: 1
}

.bttr-btn.pending {
    padding: .72em .55em .72em .6em
}

.bttr-btn.pending > .circle-loader {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-left-color: var(--white);
    animation: btn-loader-spin 1.2s infinite linear;
    position: relative;
    display: inline-block;
    vertical-align: top;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em
}

.bttr-btn.btn-in-cart {
    padding: .72em .55em .72em .6em;
    background: var(--green-700)
}

.bttr-btn.btn-in-cart > .circle-loader {
    border: 1px solid rgba(255, 255, 255, 1);
    position: relative;
    display: inline-block;
    vertical-align: top;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    animation: none;
    transition: border 500ms ease-out
}

.bttr-btn.btn-in-cart > .circle-loader > .checkmark.draw::after {
    animation-duration: 600ms;
    animation-timing-function: ease;
    animation-name: btn-checkmark;
    transform: scaleX(-1) rotate(135deg)
}

.bttr-btn.btn-in-cart > .circle-loader > .checkmark::after {
    opacity: 1;
    height: .75em;
    width: .375em;
    transform-origin: left top;
    border-right: 2px solid var(--white);
    border-top: 2px solid var(--white);
    content: '';
    left: .275em;
    top: .75em;
    position: absolute
}

@keyframes btn-loader-spin {

0
{
    transform: rotate(0)
}
100
%
{
    transform: rotate(360deg)
}
}
@keyframes btn-checkmark {

0
{
    height: 0
;
    width: 0
;
    opacity: 1
}
20
%
{
    height: 0
;
    width: .375em
;
    opacity: 1
}
40
%
{
    height: .75em
;
    width: .375em
;
    opacity: 1
}
100
%
{
    height: .75em
;
    width: .375em
;
    opacity: 1
}
}
fieldset {
    border: 0
}

.form-group {
    position: relative
}

.form-group .form-control, .input-group .form-control {
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 16px;
    padding: 10px;
    height: 47px;
    box-shadow: none;
    display: block;
    border-radius: 10px;
    border: 1px solid var(--gray-500)
}

.form-group textarea.form-control {
    height: auto
}

.has-error .form-control:focus, .has-success .form-control:focus {
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid var(--green-700)
}

.form-group label, .input-group label {
    font-family: 'ProximaNovaSemiBold', 'ProximaNovaSemiBold-fallback', 'Helvetica', 'sans-serif';
    display: block;
    cursor: text;
    font-weight: 500;
    position: absolute;
    color: var(--black);
    top: -1.5em;
    margin-bottom: 0
}

.input-group-addon {
    border-radius: 10px
}

.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:first-child > .btn-group:not(:first-child) > .btn, .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle {
    border-left: 0
}

.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn-group:not(:last-child) > .btn, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
    border-right: 0
}

.has-error .form-control {
    border: 1px solid var(--red-700);
    background: url("/tools/media/sgicons/alert-red.svg") bottom right no-repeat #efefef;
    background-size: 1.4em;
    background-origin: content-box
}

.has-error select.form-control {
    padding: 10px 30px 10px 10px;
    background-position-x: 90%
}

.has-error .form-control:focus {
    filter: none
}

.has-error label {
    color: var(--red-700)
}

.has-error .help-block {
    color: var(--red-700)
}

.has-success .form-control {
    background: url("/tools/media/sgicons/checkmark-green.svg") bottom right no-repeat #efefef;
    background-size: 1.4em;
    background-origin: content-box
}

.has-success .help-block {
    color: var(--green-700)
}

.has-error > input.form-control::-webkit-contacts-auto-fill-button, .has-success > input.form-control::-webkit-contacts-auto-fill-button, .has-error > input.form-control::-webkit-credentials-auto-fill-button, .has-success > input.form-control::-webkit-credentials-auto-fill-button {
    margin-right: 30px
}

.checkbox, .radio {
    display: block;
    position: relative;
    padding-left: 30px;
    margin: 0 0 12px 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.checkbox label, .radio label {
    font-family: 'ProximaNova', 'ProximaNova-fallback', 'Helvetica', 'sans-serif';
    font-weight: 500;
    font-size: 1em;
    color: var(--black);
    text-transform: none;
    position: static;
    padding-left: 0;
    cursor: pointer
}

.checkbox input, .radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.checkbox:hover input ~ .checkmark, .radio:hover input ~ .checkmark {
    border: 2px solid var(--green-700)
}

.checkbox input:checked ~ .checkmark, .radio input:checked ~ .checkmark {
    border: 2px solid var(--green-700)
}

.checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 22px;
    height: 1em;
    width: 1em;
    border: 2px solid var(--gray-700);
    border-radius: 20%
}

.checkbox input:checked ~ .checkmark::after {
    display: block;
    content: "";
    position: absolute;
    left: .3em;
    top: .1em;
    width: .25em;
    height: .5em;
    border: solid var(--green-700);
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.radio .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 22px;
    height: 1em;
    width: 1em;
    border: 2px solid var(--gray-700);
    border-radius: 50%
}

.radio input:checked ~ .checkmark::after {
    display: block;
    content: "";
    position: absolute;
    left: .1em;
    top: .08em;
    width: .08em;
    height: .08em;
    border: .34em solid var(--green-700);
    border-radius: 50%
}

select.form-control {
    position: relative;
    font-family: inherit;
    background-color: transparent;
    height: 37px;
    padding: 10px 10px 10px 0;
    border-radius: 0;
    border: 0;
    border: 1px solid #efefef;
    appearance: none;
    -webkit-appearance: none
}

select.form-control::focus {
    outline: 0;
    border: 2px solid var(--green-500)
}

.select::after {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border: solid var(--green-500);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 4px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    pointer-events: none;
    z-index: 3
}

select.form-control:focus ~ label {
    color: var(--green-500)
}

.form-group.inline-select select.form-control:focus ~ label {
    color: var(--white)
}

.form-group.inline-select {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    width: max-content
}

.form-group.inline-select .form-control {
    position: relative;
    font-family: 'ProximaNovaSemiBold', 'ProximaNovaSemiBold-fallback', 'Helvetica', 'sans-serif';
    color: var(--green-500);
    height: 46px;
    width: auto;
    padding: 10px 15px 10px 100px;
    background: var(--black);
    border: 0
}

.form-group.inline-select label {
    color: var(--white);
    position: absolute;
    height: 20px;
    top: 13px;
    left: 13px
}

.form-group .form-control.form-basic {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: var(--white);
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}

.passwordfeedback {
    height: 44px;
    line-height: 60px
}

.label-tooltip {
    cursor: pointer
}

.form-message {
    display: none;
    color: #d53b3c
}

.input-focused {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
}

.iti {
    width: 100%
}

#paginator .perpage {
    padding: 8px;
    height: 37px
}

.geminibanner {
    line-height: .5rem;
    border-radius: 1rem;
    padding: .25em .75em;
    background: #a4b5ff;
    background: linear-gradient(90deg, rgba(164, 181, 255, 1) 0, rgba(59, 109, 255, 1) 100%)
}

.geminioutline {
    line-height: .5rem;
    border-radius: 1rem;
    padding: .25em .75em;
    border: 1px solid #ccc
}

#slideout {
    position: fixed;
    bottom: 0;
    right: 0;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    z-index: 1000
}

.slideout_inner {
    position: fixed;
    top: 50%;
    max-width: 90%;
    right: -250px;
    margin-right: -350px;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s
}

#slideout .hidden-closed {
    display: none
}

.hidden-closed, .hidden-open {
    text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.5), 1px -1px 0 rgba(255, 255, 255, 0.5), -1px 1px 0 rgba(255, 255, 255, 0.5), 1px 1px 0 rgba(255, 255, 255, 0.5)
}

#slideout.open .hidden-closed {
    display: inline-block
}

#slideout.open .hidden-open {
    display: none
}

#slideout.open {
    right: 90%;
    z-index: 10000
}

#slideout.open .slideout_inner {
    right: 0;
    margin-right: -30px;
    width: 90%;
    padding: 10px 30px 10px 15px;
    overflow-x: hidden;
    overflow-y: scroll;
    background: var(--gray-100);
    border: solid 2px #bbb;
    -webkit-box-shadow: 1px 1px 7px 7px rgba(0, 0, 0, 0.10);
    -moz-box-shadow: 1px 1px 7px 7px rgba(0, 0, 0, 0.10);
    box-shadow: 1px 1px 7px 7px rgba(0, 0, 0, 0.10);
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s
}

.opacity65 {
    opacity: .65
}

@media (min-width: 768px) {
    .testing .hidden-open {
        font-size: 3em;
        border: rgba(141, 198, 63, 1);
        color: #999;
        border-radius: 0 6px 6px 0;
        padding: 6px 0 12px 0
    }

    .escape .hidden-open {
        font-size: 2em;
        background: rgba(194, 194, 194, 1);
        border: rgba(141, 198, 63, 1);
        color: var(--white);
        border-radius: 0 6px 6px 0;
        padding: 24px 36px 24px 24px
    }

    .slideout_inner {
        position: fixed;
        max-width: 380px
    }

    #slideout.open {
        right: 350px
    }

    #slideout.open .slideout_inner {
        min-height: 200px;
        max-height: 350px;
        width: 380px
    }
}

img {
    max-width: 100%;
    height: auto
}

.video-container {
    position: relative;
    padding-bottom: calc(var(--aspect-ratio, .5625) * 100%);
    height: 0;
    overflow: hidden
}

.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.carousel-items {
    width: 100%;
    overflow: hidden
}

.carousel-items .carousel-item {
    height: 0;
    width: 100%;
    opacity: 0;
    overflow: hidden;
    transition: transform 200ms ease-in-out
}

.carousel-item.carousel-active {
    height: 100%;
    opacity: 1;
    z-index: 99
}

.carousel-item.carousel-prev {
    opacity: 0;
    transform: translate(-125%)
}

.carousel-item.carousel-next {
    opacity: 0;
    transform: translate(125%)
}

.carousel-btn {
    font-size: 1.5em;
    text-align: center;
    padding: 10px 0;
    cursor: pointer
}

.shadowbox {
    border: 1px solid #d1d1d1;
    -webkit-box-shadow: 0 3px 10px rgba(50, 50, 50, 0.14);
    -moz-box-shadow: 0 3px 10px rgba(50, 50, 50, 0.14);
    box-shadow: 0 3px 10px rgba(50, 50, 50, 0.14)
}

.shadowbox2 {
    border: 1px solid #d1d1d1;
    -webkit-box-shadow: 0 2px 3px rgba(50, 50, 50, 0.35);
    -moz-box-shadow: 0 2px 3px rgba(50, 50, 50, 0.35);
    box-shadow: 0 2px 3px rgba(50, 50, 50, 0.35)
}

.shadowbox3 {
    border: 1px solid silver;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
    -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30)
}

.shadowbox4 {
    border: 2px solid var(--gray-300);
    box-shadow: 0 14px 15px rgba(29, 36, 52, 0.1), 0 4px 2px rgba(0, 0, 0, 0.04);
    border-radius: 15px
}

.nostyle {
    list-style: none;
    margin-left: 8px
}

.horizontal-divider {
    background: #aaa9a5;
    background: -moz-linear-gradient(left, #FFF 0, #aaa9a5 40%, #aaa9a5 60%, #FFF 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #FFF), color-stop(40%, #aaa9a5), color-stop(60%, #aaa9a5), color-stop(100%, #FFF));
    background: -webkit-linear-gradient(left, #FFF 0, #aaa9a5 40%, #aaa9a5 60%, #FFF 100%);
    background: -o-linear-gradient(left, #FFF 0, #aaa9a5 40%, #aaa9a5 60%, #FFF 100%);
    background: -ms-linear-gradient(left, #FFF 0, #aaa9a5 40%, #aaa9a5 60%, #FFF 100%);
    background: linear-gradient(left, #FFF 0, #aaa9a5 40%, #aaa9a5 60%, #FFF 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#AAA9a5', endColorstr='#FFF', GradientType=1);
    height: 1px
}

.checkboxfixedwidth {
    width: 30px
}

.checkboxleftfill {
    margin-left: 35px
}

.scrolly {
    overflow-y: scroll
}

.navbar-fixed-bottom {
    z-index: 0
}

.progress-bar-default {
    background-color: var(--gray-300)
}

.condensed > .hovercolor > .padding10 {
    padding: 0
}

.condensed > .hovercolor .font25 {
    font-size: 18px
}

.condensed > .hovercolor .font20 {
    font-size: 16px
}

.condensed > .hovercolor .font14 {
    font-size: 12px
}

.valigntop {
    vertical-align: top
}

.valignmiddle {
    vertical-align: middle
}

.valignbottom {
    vertical-align: bottom
}

.flexbox-container {
    display: block
}

.flexbox-container .flexbox-box {
    margin: 30px 10px
}

.flexbox-container .flexbox-content {
    height: 100%;
    display: flex;
    flex-flow: column nowrap
}

.label-orange {
    background-color: var(--orange-500);
    border-radius: 0;
    font-weight: normal
}

.label-green {
    background-color: var(--green-500);
    border-radius: 0;
    font-weight: normal
}

ul.greencheck li {
    list-style-type: none;
    background: url('/tools/media/sgicons/checkmark-green.svg') no-repeat left 8px;
    background-size: 1.5em;
    padding-left: 2.5em
}

ul.bluecheck li {
    list-style-type: none;
    background: url('/tools/media/sgicons/checkmark-blue.svg') no-repeat left 8px;
    background-size: 1.5em;
    padding-left: 2.5em
}

ul.orangecheck li {
    list-style-type: none;
    background: url('/tools/media/sgicons/checkmark-orange.svg') no-repeat left 8px;
    background-size: 1.5em;
    padding-left: 2.5em
}

ul.purplecheck li {
    list-style-type: none;
    background: url('/tools/media/sgicons/checkmark-purple.svg') no-repeat left 8px;
    background-size: 1.5em;
    padding-left: 2.5em
}

.hiddencheck {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0
}

.greencheck {
    cursor: auto !important
}

input[type="checkbox"] ~ .greencheck {
    cursor: pointer;
    background: url('/tools/media/sgicons/checkmark-green-700-unchecked.svg') no-repeat left 0;
    background-size: 1.5em;
    padding-left: 2.5em
}

input[type="checkbox"]:checked ~ .greencheck {
    background: url('/tools/media/sgicons/checkmark-green-700.svg') no-repeat left 0;
    background-size: 1.5em;
    padding-left: 2.5em
}

.greenbar {
    width: 62px;
    border: 1px solid var(--green-500);
    margin: 15px 15px 15px 0
}

.orangebar {
    width: 62px;
    border: 1px solid var(--orange-500)
}

.bluebar {
    width: 62px;
    border: 1px solid var(--blue-700)
}

.purplebar {
    width: 62px;
    border: 1px solid var(--purple-500)
}

.graybar {
    width: 62px;
    border: 1px solid var(--gray-500)
}

.redbar {
    width: 62px;
    border: 1px solid var(--red-300)
}

.sort {
    background-image: url('/tools/media/tablesorter/bg.gif');
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer
}

.sort.asc {
    background-image: url('/tools/media/tablesorter/asc.gif')
}

.sort.desc {
    background-image: url('/tools/media/tablesorter/desc.gif')
}

.notification-bar {
    position: relative;
    text-align: center;
    padding: 11px 0 11px 0;
    font-family: 'ProximaNova', 'ProximaNova-fallback', 'Helvetica', 'sans-serif';
    font-size: 20px;
    background: var(--green-700)
}

.notification-bar a {
    text-decoration: none;
    color: var(--white)
}

.notification-bar .link {
    padding: 2px 8px;
    background-color: var(--red-500);
    color: var(--white);
    border-radius: 2px;
    font-size: 12px;
    font-weight: bold
}

.notification-bar .link:hover {
    background-color: var(--red-500)
}

.btnClose {
    height: 25px;
    width: 25px;
    float: right;
    margin-right: -10px;
    font-weight: bold
}

.notification-bar:target {
    display: none
}

.notification-bar:target .btnClose {
    display: none
}

.card {
    display: flex
}

.card-img {
    padding: 2px 20px 10px 20px
}

.card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.product-card {
    padding: 20px;
    box-shadow: 0 14px 15px rgba(29, 36, 52, 0.1), 0 4px 2px rgba(0, 0, 0, 0.04);
    border-radius: 0 0 15px 15px
}

.product-card.green-bar {
    border-top: 5px solid var(--green-700)
}

.product-card.orange-bar {
    border-top: 5px solid var(--orange-700)
}

.product-card.blue-bar {
    border-top: 5px solid var(--blue-700)
}

.product-card.purple-bar {
    border-top: 5px solid var(--purple-700)
}

.product-card.gray-bar {
    border-top: 5px solid var(--gray-700)
}

.product-card.red-bar {
    border-top: 5px solid var(--red-700)
}

.roundshadowbox {
    border: 2px solid var(--gray-300);
    box-shadow: 0 14px 15px rgba(29, 36, 52, 0.1), 0 4px 2px rgba(0, 0, 0, 0.04);
    border-radius: 15px
}

.roundbox {
    border: 2px solid var(--gray-300);
    border-radius: 15px
}

.faqbox {
    background: var(--white);
    box-shadow: 0 14px 15px rgba(29, 36, 52, 0.1), 0 4px 2px rgba(0, 0, 0, 0.04)
}

.faqbox summary {
    cursor: pointer
}

.faqbox summary:focus {
    outline: 0
}

.faqbox summary::-webkit-details-marker {
    display: none
}

.faqbox summary:before {
    font-family: monospace, monospace;
    content: "+";
    float: right;
    font-size: 3em
}

.faqbox details[open] summary:before {
    content: "-"
}

.faqbox .card-img {
    font-size: .7em;
    margin-top: 15px;
    padding: 2px 20px 10px 0
}

#search-keyword, .heco-searchbar, .searchbox {
    font-size: 16px;
    width: 100%;
    height: 60px;
    padding: 0 0 0 20px;
    margin-right: -55px;
    float: left;
    border-radius: 30px;
    border: 1px solid var(--gray-500);
    background-color: var(--gray-100)
}

#search-start, .heco-search-start {
    float: left;
    font-size: 16px;
    min-width: 44px;
    height: 44px;
    position: relative;
    margin: 8px 8px 8px 2px;
    padding: 0;
    vertical-align: top;
    border-style: none;
    border-radius: 50%;
    background-color: var(--green-500)
}

#search-keyword:focus, .heco-searchbar:focus {
    outline: 0
}

#search-start:not(.btn-*), .heco-search-start:not(.btn-*), #search-start:not(.btn-green):not(.btn-orange):not(.btn-blue):not(.btn-purple):not(.btn-gray):not(.btn-white):not(.btn-primary):not(.btn-success), .heco-search-start:not(.btn-green):not(.btn-orange):not(.btn-blue):not(.btn-purple):not(.btn-gray):not(.btn-white):not(.btn-primary):not(.btn-success), {
    background: var(--gray-700)
}

.searchbar-input-group {
    border-radius: 30px;
    border: 1px solid var(--gray-500)
}

.searchbar-input-group #search-keyword, .searchbar-input-group .heco-searchbar, .searchbar-input-group .searchbox {
    border: 0
}

#sticky-alerts {
    color: var(--white);
    background-color: var(--gray-700);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    -webkit-transition: max-height .2s ease-in-out;
    -moz-transition: max-height .2s ease-in-out;
    -o-transition: max-height .2s ease-in-out;
    transition: max-height .2s ease-in-out
}

.stickystyles {
    margin: 10px auto 0 auto;
    padding: 30px;
    max-width: 1170px;
    background-color: rgba(127, 127, 127, 0.1)
}

.stickyalert-success {
    border-top: 6px solid var(--green-500)
}

.stickyalert-error, .stickyalert-danger {
    border-top: 6px solid var(--red-500)
}

.stickyalert-warning {
    border-top: 6px solid var(--orange-500)
}

.stickyalert-default {
    border-top: 6px solid var(--gray-300)
}

.new-alert {
    margin: 10px auto 20px auto;
    padding: 30px;
    background-color: var(--white);
    box-shadow: 0 14px 15px rgba(29, 36, 52, 0.1), 0 4px 2px rgba(0, 0, 0, 0.04);
    border-radius: 15px
}

.new-alert2 {
    margin: 10px auto 20px auto;
    padding: 30px;
    background-color: var(--white);
    box-shadow: 0 14px 15px rgba(29, 36, 52, 0.1), 0 4px 2px rgba(0, 0, 0, 0.04);
    border-radius: 15px
}

.new-alert-icon {
    display: none
}

.new-alert-success {
    border: 1px solid var(--green-500)
}

.new-alert-warning {
    border: 1px solid var(--orange-500)
}

.new-alert-danger {
    border: 1px solid var(--red-500)
}

.new-alert-neutral {
    border: 1px solid var(--gray-500)
}

.hiddenFromViewer {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.navbar-container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 10px;
    padding-right: 10px;
    max-width: 1600px
}

.navbar-default {
    border-radius: 0;
    background: var(--white);
    margin-bottom: 0;
    border: 0
}

.navbar-header {
    min-height: 65px
}

.nav > li > a:hover, .nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
    background: transparent
}

.navbar-default .navbar-toggle {
    top: 0;
    color: var(--gray-700);
    padding: 0;
    margin: 0 -10px 0 0;
    border: 0;
    cursor: pointer;
    -webkit-transition: opacity .2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity .2s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.navbar-default .navbar-toggle:hover {
    background: 0;
    opacity: .85
}

.nav > li.mobileonly {
    display: block
}

#logo-name_com {
    position: absolute;
    top: 14px;
    text-align: center;
    height: 20px;
    width: 110px;
    background: url("/tools/media/logo/name_logo.svg");
    background-size: 100%;
    background-repeat: no-repeat
}

.logo a {
    height: 100%;
    text-indent: -9999px;
    width: 120px;
    display: block
}

.top-navbox {
    position: relative;
    display: inline-block;
    float: right;
    font-size: 12px;
    margin: 7px 0 5px 0
}

#cart-logout-button a {
    margin: 0 5px 0 5px
}

.vjs-tooltip-container:hover + .vjs_tooltip {
    display: block;
    opacity: 100
}

.vjs_tooltip {
    display: none;
    opacity: 0;
    padding: 3px 8px;
    margin-top: 10px;
    position: absolute;
    z-index: 1070;
    color: var(--white);
    text-align: center;
    text-decoration: none;
    word-break: break-word;
    background-color: var(--black);
    border-radius: 4px;
    width: auto;
    max-width: 200px;
    height: auto;
    transition: opacity .3s ease-in-out
}

.vjs_tooltip:before {
    content: " ";
    position: absolute;
    left: 42.5%;
    top: -10px;
    border-top: 0;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 10px solid var(--black)
}

.headeraccountdropdown {
    min-width: 250px;
    padding: 20px;
    margin-top: 10px;
    margin-right: -100px;
    box-shadow: 0 14px 15px rgba(29, 36, 52, 0.1), 0 4px 2px rgba(0, 0, 0, 0.04);
    border-radius: 0 0 15px 15px
}

.headeraccountdropdown > li > a {
    color: var(--gray-700);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    margin: 0;
    padding: 5px 10px
}

.headeraccountdropdown > li > a:hover {
    background: transparent;
    text-decoration: none;
    border-bottom: 1px solid var(--green-700)
}

#cart-box {
    background: 0;
    float: right;
    top: 3px;
    line-height: 18px;
    height: 40px;
    position: relative
}

#cart-icon {
    margin: 5px 0 2px 5px;
    -webkit-transition: opacity .2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity .2s cubic-bezier(0.645, 0.045, 0.355, 1)
}

#favorites-icon {
    margin: 4px 5px 2px 5px;
    -webkit-transition: opacity .2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity .2s cubic-bezier(0.645, 0.045, 0.355, 1)
}

#cart-logout-button {
    background: 0;
    float: left;
    font-size: 14px;
    height: 100%;
    line-height: 35px
}

.count {
    color: var(--black);
    background-color: var(--green-500)
}

.account-text {
    margin-top: 7px;
    position: relative
}

.ham {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 200ms;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.hamRotate.active {
    transform: rotate(45deg)
}

.hamRotate180.active {
    transform: rotate(180deg)
}

.line {
    fill: none;
    transition: stroke-dasharray 200ms, stroke-dashoffset 200ms;
    stroke: var(--gray-700);
    stroke-width: 3.5;
    stroke-linecap: round
}

.ham .top {
    stroke-dasharray: 40 160
}

.ham .middle {
    stroke-dasharray: 40 142;
    transform-origin: 50%;
    transition: transform 200ms
}

.ham .bottom {
    stroke-dasharray: 40 85;
    transform-origin: 50%;
    transition: transform 200ms, stroke-dashoffset 200ms
}

.ham.active .top {
    stroke-dashoffset: -64px
}

.ham.active .middle {
    transform: rotate(90deg)
}

.ham.active .bottom {
    stroke-dashoffset: -64px
}

.navbar-nav {
    margin: 0;
    font-size: 16px
}

.navbar-default .navbar-nav > li > a {
    line-height: 16px;
    padding: 10px 22px 10px 0;
    margin: 0;
    text-decoration: none;
    letter-spacing: 0;
    color: var(--black)
}

.navbar-default .navbar-nav > .open {
    position: static
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: var(--white)
}

.navbar-nav > li > a.domains-button, .navbar-nav > li > a.products-button {
    color: var(--green-700)
}

.account-text a.active {
    font-family: 'ProximaNovaBold', 'ProximaNovaBold-fallback', 'Helvetica', 'sans-serif'
}

.navbar-default .navbar-nav > li.mydomainlink > a, .navbar-default .navbar-nav > li.mydomainlink > a.active, .navbar-default .navbar-nav > li.mydomainlink > a.active:hover, .navbar-default .navbar-nav > li.myproductlink > a, .navbar-default .navbar-nav > li.myproductlink > a.active, .navbar-default .navbar-nav > li.myproductlink > a.active:hover {
    color: var(--green-700)
}

.navbar-nav > li > a.domains-button.active, .navbar-nav > li > a.products-button.active {
    font-family: 'ProximaNovaBold', 'ProximaNovaBold-fallback', 'Helvetica', 'sans-serif';
    text-decoration: underline
}

.navbar-header .navbar-collapse {
    margin-top: 65px;
    border: 0;
    box-shadow: 0 60px 60px rgba(0, 0, 0, 0.175)
}

.mobile-relative {
    position: relative
}

.navbar-nav .divider {
    height: 1px;
    margin: 9px;
    overflow: hidden;
    background-color: #e5e5e5
}

.navbar-default .navbar-nav > li.open > .dropdown-toggle > .sgi-arrow-down, .account-text > .inlineblock.open > .dropdown-toggle > .sgi-arrow-down {
    background-position: -3.5625em -3.67em;
    transform: rotate(-180deg);
    transition: transform 250ms ease
}

.navbar-default .navbar-nav > li > .dropdown-toggle > .sgi-arrow-down, .account-text > .inlineblock > .dropdown-toggle > .sgi-arrow-down {
    transform: rotate(0);
    transition: transform 250ms ease
}

.sub-nav .navbar-nav {
    width: 100%
}

.sub-nav {
    border-radius: 0;
    padding: 0;
    color: #4c4c4c;
    display: none;
    z-index: 10000
}

.sub-nav-container {
    background: #f2f1ef;
    background: -moz-linear-gradient(180deg, rgba(242, 241, 239, 1) 0, rgba(248, 248, 248, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(242, 241, 239, 1) 0, rgba(248, 248, 248, 1) 100%);
    background: linear-gradient(180deg, rgba(242, 241, 239, 1) 0, rgba(248, 248, 248, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f2f1ef", endColorstr="#f8f8f8", GradientType=1)
}

.sub-nav.active {
    display: block
}

.sub-nav .navbar-nav > li > a {
    color: #4c4c4c;
    padding: 20px 15px;
    text-decoration: none
}

.sub-nav .navbar-nav li:first-child {
    margin-left: auto
}

.navbar-nav > li > .dropdown-menu.sub-menu-block {
    width: 100%;
    color: var(--gray-700);
    border: 0;
    padding: 20px;
    border-radius: 10px;
    background-color: var(--gray-100)
}

.sub-menu-header {
    font-family: 'ProximaNovaSemiBold', 'ProximaNovaSemiBold-fallback', 'Helvetica', 'sans-serif';
    text-decoration: none;
    line-height: 18px;
    color: var(--gray-600);
    display: block;
    width: 100%;
    padding: 5px 5px 5px 0
}

.sub-menu-header:hover {
    color: var(--green-700);
    text-decoration: underline
}

.sub-menu-link {
    font-family: 'ProximaNovaSemiBold', 'ProximaNovaSemiBold-fallback', 'Helvetica', 'sans-serif';
    text-decoration: none;
    line-height: 18px;
    color: var(--black);
    display: block;
    width: 100%;
    padding: 5px 5px 5px 0
}

.sub-menu-link:hover {
    color: var(--green-700);
    text-decoration: underline
}

.sub-nav .navbar-nav.mobile-header-nav {
    margin: 0
}

.flexbox-container.navprices {
    flex-wrap: wrap;
    gap: 10px
}

.flexbox-container.navprices .flexbox-box {
    display: flex;
    margin: 0;
    width: 30%
}

.flexbox-container.navprices .flexbox-box .flexitem {
    flex-grow: 1
}

footer {
    background: var(--black)
}

.footernav {
    margin: 15px;
    padding: 0
}

.footernav:last-child ul {
    border-bottom: 0
}

.footernav ul {
    padding: 0 0 20px 0;
    border-bottom: 1px solid var(--gray-600)
}

.footernav ul li {
    margin: 0 0 12px 0;
    list-style: none;
    list-style-image: none
}

.footernav ul li:first-child {
    font-weight: normal;
    font-family: 'ProximaNovaBold', 'ProximaNovaBold-fallback', 'Helvetica', 'sans-serif';
    cursor: default
}

.footernav ul li a {
    font-family: 'ProximaNovaSemiBold', 'ProximaNovaSemiBold-fallback', 'Helvetica', 'sans-serif';
    color: var(--white);
    font-size: 14px;
    line-height: 16px;
    text-decoration: none;
    position: relative
}

.footernav ul li a:hover {
    text-decoration: underline
}

.footernav ul li.footerheader {
    color: var(--gray-500);
    width: 100%;
    margin: 20px 0 10px 0
}

.footerlines {
    background: url('/tools/media/navigation/footerlines.svg') repeat-x;
    min-height: 130px
}

.expand-icon:before {
    content: "-";
    color: var(--gray-500);
    font-family: monospace, monospace;
    font-size: 1.25em;
    font-style: normal
}

.expand-icon.collapsed:before {
    content: "+"
}

#buttoninform {
    display: flex;
    flex-direction: row;
    padding: 2px
}

#email_signup {
    flex-grow: 2;
    border: 0;
    border-radius: 10px;
    height: 41px;
    background-color: var(--gray-100)
}

#email_signup:focus {
    outline: 0
}

#signupbutton {
    padding: 5px 25px;
    margin-left: 10px
}

@media (min-width: 768px) {
    .footer-grid-container {
        display: grid;
        grid-template-columns:1.5fr .7fr 1fr;
        grid-template-rows:.8fr 1.2fr;
        gap: 0;
        grid-template-areas:"logo trustpilot subscribe" "controls trustpilot subscribe"
    }

    .footer-logo {
        grid-area: logo
    }

    .footer-subscribe {
        grid-area: subscribe
    }

    .footer-controls {
        grid-area: controls
    }

    .footer-trustpilot {
        grid-area: trustpilot
    }

    .footer-grid-container .trustpilot-widget iframe {
        width: 80%
    }
}

.margin0 {
    margin: 0
}

.margincentered {
    margin: 0 auto;
    float: none
}

.margintop0 {
    margin-top: 0
}

.margintop5 {
    margin-top: 5px
}

.margintop10 {
    margin-top: 10px
}

.margintop15 {
    margin-top: 15px
}

.margintop20 {
    margin-top: 20px
}

.margintop30 {
    margin-top: 30px
}

.margintop40 {
    margin-top: 40px
}

.margintop50 {
    margin-top: 50px
}

.margintop60 {
    margin-top: 60px
}

.margintop70 {
    margin-top: 70px
}

.margintop80 {
    margin-top: 80px
}

.margintop90 {
    margin-top: 90px
}

.margintop100 {
    margin-top: 100px
}

.marginbottom5 {
    margin-bottom: 5px
}

.marginbottom10 {
    margin-bottom: 10px
}

.marginbottom15 {
    margin-bottom: 15px
}

.marginbottom20 {
    margin-bottom: 20px
}

.marginbottom30 {
    margin-bottom: 30px
}

.marginbottom40 {
    margin-bottom: 40px
}

.marginbottom50 {
    margin-bottom: 50px
}

.marginbottom60 {
    margin-bottom: 60px
}

.marginbottom70 {
    margin-bottom: 70px
}

.marginbottom80 {
    margin-bottom: 80px
}

.marginbottom90 {
    margin-bottom: 90px
}

.marginbottom100 {
    margin-bottom: 100px
}

.marginright5 {
    margin-right: 5px
}

.marginright10 {
    margin-right: 10px
}

.marginright15 {
    margin-right: 15px
}

.marginright20 {
    margin-right: 20px
}

.marginright30 {
    margin-right: 30px
}

.marginright40 {
    margin-right: 40px
}

.marginright50 {
    margin-right: 50px
}

.marginright60 {
    margin-right: 60px
}

.marginleft5 {
    margin-left: 5px
}

.marginleft10 {
    margin-left: 10px
}

.marginleft15 {
    margin-left: 15px
}

.marginleft20 {
    margin-left: 20px
}

.marginleft30 {
    margin-left: 30px
}

.marginleft40 {
    margin-left: 40px
}

.marginleft50 {
    margin-left: 50px
}

.marginleft60 {
    margin-left: 60px
}

.margintopnegative5 {
    margin-top: -5px
}

.margintopnegative10 {
    margin-top: -10px
}

.margintopnegative15 {
    margin-top: -15px
}

.margintopnegative20 {
    margin-top: -20px
}

.margintopnegative30 {
    margin-top: -30px
}

.margintopnegative40 {
    margin-top: -40px
}

.margintopnegative50 {
    margin-top: -50px
}

.margintopnegative60 {
    margin-top: -60px
}

.margintopnegative70 {
    margin-top: -70px
}

.margintopnegative80 {
    margin-top: -80px
}

.margintopnegative100 {
    margin-top: -100px
}

.marginbottomnegative5 {
    margin-bottom: -5px
}

.marginbottomnegative10 {
    margin-bottom: -10px
}

.marginbottomnegative15 {
    margin-bottom: -15px
}

.marginbottomnegative20 {
    margin-bottom: -20px
}

.marginbottomnegative30 {
    margin-bottom: -30px
}

.marginbottomnegative40 {
    margin-bottom: -40px
}

.marginbottomnegative50 {
    margin-bottom: -50px
}

.marginbottomnegative60 {
    margin-bottom: -60px
}

.marginbottomnegative70 {
    margin-bottom: -70px
}

.marginbottomnegative70 {
    margin-bottom: -70px
}

.marginbottomnegative80 {
    margin-bottom: -80px
}

.marginbottomnegative100 {
    margin-bottom: -100px
}

.padding0 {
    padding: 0
}

.padding2 {
    padding: 2px
}

.padding5 {
    padding: 5px
}

.padding10 {
    padding: 10px
}

.padding15 {
    padding: 15px
}

.padding20 {
    padding: 20px
}

.padding30 {
    padding: 30px
}

.padding40 {
    padding: 40px
}

.padding50 {
    padding: 50px
}

.paddingsides0 {
    padding-left: 0;
    padding-right: 0
}

.paddingsides5 {
    padding-left: 5px;
    padding-right: 5px
}

.paddingsides10 {
    padding-left: 10px;
    padding-right: 10px
}

.paddingsides15 {
    padding-left: 15px;
    padding-right: 15px
}

.paddingsides20 {
    padding-left: 20px;
    padding-right: 20px
}

.paddingsides30 {
    padding-left: 30px;
    padding-right: 30px
}

.paddingsides40 {
    padding-left: 40px;
    padding-right: 40px
}

.paddingsides50 {
    padding-left: 50px;
    padding-right: 50px
}

.smallestheight {
    height: 50px
}

.smallishheight {
    height: 100px
}

.smallerheight {
    height: 150px
}

.mediumboxheight {
    height: 235px
}

.smallheight {
    height: 250px
}

.mediumheight {
    height: 350px
}

.largeheight {
    height: 450px
}

.bgdarkestgreen {
    background-color: var(--green-900)
}

.bgdarkgreen {
    background-color: var(--green-700)
}

.bggreen {
    background-color: var(--green-500)
}

.bglightgreen {
    background-color: var(--green-300)
}

.bglightestgreen {
    background-color: var(--green-100)
}

.bgdarkestorange {
    background-color: var(--orange-900)
}

.bgdarkorange {
    background-color: var(--orange-700)
}

.bgorange {
    background-color: var(--orange-500)
}

.bglightorange {
    background-color: var(--orange-300)
}

.bglightestorange {
    background-color: var(--orange-100)
}

.bgdarkestblue {
    background-color: var(--blue-900)
}

.bgdarkblue {
    background-color: var(--blue-700)
}

.bgblue {
    background-color: var(--blue-500)
}

.bglightblue {
    background-color: var(--blue-300)
}

.bglightestblue {
    background-color: var(--blue-100)
}

.bgdarkestpurple {
    background-color: var(--purple-900)
}

.bgdarkpurple {
    background-color: var(--purple-700)
}

.bgpurple {
    background-color: var(--purple-500)
}

.bglightpurple {
    background-color: var(--purple-300)
}

.bglightestpurple {
    background-color: var(--purple-100)
}

.bgdarkestgray {
    background-color: var(--gray-900)
}

.bggray800 {
    background-color: var(--gray-800)
}

.bgdarkgray {
    background-color: var(--gray-700)
}

.bggray {
    background-color: var(--gray-500)
}

.bglightgray, .bglightergray {
    background-color: var(--gray-300)
}

.bglightestgray {
    background-color: var(--gray-100)
}

.bgdarkred {
    background-color: var(--red-700)
}

.bgred {
    background-color: var(--red-500)
}

.bglightred, .bgwarning {
    background-color: var(--red-300)
}

.bgblack {
    background-color: var(--black)
}

.bgwhite {
    background-color: var(--white)
}

.bgwhitef2 {
    background-color: #f2f2f2
}

.bgteal300 {
    background-color: var(--teal-300)
}

.lightline {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3)
}

.borderwhite {
    border: 1px solid #f2f2f2
}

.borderlightgray {
    border: 1px solid var(--gray-300)
}

.bordermediumgray, .bordergray {
    border: 1px solid var(--gray-500)
}

.borderdarkgray {
    border: 1px solid var(--gray-700)
}

.form-group .form-control.borderdarkgreen, .borderdarkgreen {
    border: 1px solid var(--green-700)
}

.form-group .form-control.borderdarkblue, .borderdarkblue {
    border: 1px solid var(--blue-700)
}

.form-group .form-control.borderdarkorange, .borderdarkorange {
    border: 1px solid var(--orange-700)
}

.form-group .form-control.borderdarkpurple, .borderdarkpurple {
    border: 1px solid var(--purple-700)
}

.borderdarkred {
    border: 1px solid var(--red-500)
}

.bordertopgray {
    border-top: 1px solid var(--gray-500)
}

.borderbottomgray {
    border-bottom: 1px solid var(--gray-500)
}

.borderradius {
    border-radius: 6px
}

.borderradius10 {
    border-radius: 10px
}

.noborder {
    border: 0
}

.noboxshadow {
    box-shadow: none
}

@media (min-width: 380px) {
    #search-keyword, .heco-searchbar, .searchbox {
        padding: 0 5px 0 20px
    }
}

@media (min-width: 768px) {
    .form-control {
        font-size: 14px
    }

    .dropdown.open {
        position: static
    }

    #search-keyword, .heco-searchbar, .searchbox {
        font-size: 18px
    }

    .logo a {
        width: 180px
    }

    .cart-and-login {
        display: inline
    }

    .loginprompt {
        min-width: 350px;
        margin-top: 12px;
        margin-right: -80px
    }

    #logo-name_com {
        position: relative;
        left: auto;
        float: left;
        text-align: left
    }

    .headeraccountdropdown {
        min-width: 300px;
        margin-top: 10px;
        margin-right: -40px
    }

    .account-text {
        margin-top: 4px
    }

    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important
    }

    .navbar-toggle {
        display: none
    }

    .navbar-nav {
        float: none;
        margin: 4px auto 4px auto;
        display: table;
        table-layout: fixed
    }

    .navbar-nav.loggedin {
        padding-left: 0
    }

    .navbar-header {
        min-height: 45px;
        margin-top: 8px;
        margin-bottom: 8px
    }

    .navbar-nav > li > .dropdown-menu.sub-menu-block {
        min-width: 200px;
        padding: 0 20px 20px 20px;
        border-radius: 0;
        background-color: var(--white);
        box-shadow: 0 60px 60px rgba(0, 0, 0, 0.175)
    }

    .navbar-header {
        float: none
    }

    .navbar-default {
        position: relative;
        margin: 0
    }

    .navbar-header .navbar-collapse {
        margin-top: 0;
        box-shadow: none
    }

    .navbar-default .navbar-nav > li > a {
        padding: 11px 2px;
        font-size: 1em;
        margin: 2px 7px 0 7px
    }

    .navbar-default .navbar-nav > li > a.active, .navbar-default .navbar-nav > li > a.active:hover {
        display: block
    }

    .navbar-nav > li.mydomainlink, .navbar-nav > li.myproductlink {
        float: right
    }

    .nav > li.mobileonly {
        display: none
    }

    .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
        background-color: var(--gray-100);
        border-radius: 6px
    }

    .sub-nav.active .mobile-nav.collapse {
        display: block;
        height: auto !important
    }

    .sub-nav .navbar-nav > li > a.domains-button, .sub-nav .navbar-nav > li > a.products-button {
        float: right;
        width: auto
    }

    .sub-nav .navbar-nav li:first-child {
        margin-left: -14px
    }

    li.main_nav_desktop_open {
        position: static
    }

    li.main_nav_desktop_open > a {
        background-color: var(--gray-100);
        border-radius: 6px
    }

    .main_nav_desktop_open > .dropdown-menu {
        transform: translateZ(0);
        display: block
    }

    .navbar-nav > li > .dropdown-menu {
        margin-top: -12px
    }

    .footernav {
        margin: 0;
        padding: 15px
    }

    .footernav ul {
        border-bottom: 0
    }

    .footernav ul li {
        float: none;
        width: auto;
        display: list-item;
        padding: 0
    }

    .footernav ul li.footerheader {
        margin: 40px 0 10px 0;
        width: auto
    }

    .footernav ul li a {
        padding: 0
    }

    .footer_collapse {
        display: block
    }

    .searchtab {
        border: 0;
        min-width: 500px
    }

    .searchtab li {
        background: #7e7e7e;
        width: auto;
        padding: 6px 10px;
        margin: 2px 3px 0 0;
        text-align: center;
        font-size: 14px
    }

    .modal-dialog {
        margin-top: 80px
    }

    .faqbox .card-img {
        font-size: 1em;
        margin-top: 0;
        padding: 2px 20px 10px 20px
    }

    .faqbox details p {
        margin-right: 100px
    }
}

@media (min-width: 992px) {
    #logo-name_com {
        position: relative;
        top: 12px;
        left: auto;
        float: left;
        text-align: left;
        height: 26px;
        width: 148px
    }

    .mobile-relative {
        position: static
    }

    .navbar-default .navbar-nav > li > a {
        padding: 11px 10px
    }

    .navbar-nav > li > .dropdown-menu.sub-menu-block {
        min-width: 480px;
        background-color: var(--white)
    }

    .navbar-nav.loggedin {
        padding-left: 100px
    }

    .headeraccountname {
        font-size: 1em;
        margin: 9px 8px 0 8px
    }

    .flexbox-container {
        display: flex
    }

    .flexbox-container .flexbox-box {
        width: 33%
    }
}

@media (min-width: 1200px) {
    .container-wide {
        margin-right: auto;
        margin-left: auto;
        padding-left: 15px;
        padding-right: 15px;
        width: auto;
        max-width: 1300px
    }

    .navbar-nav.loggedin {
        padding-left: 200px
    }
}

.ie10 .label-blank {
    margin-left: 0
}

.ie10 .organize li {
    margin-top: 0
}

.ie10 input[type='radio'], .ie10 input[type='checkbox'] {
    margin: 0
}

.linkarrow::after {
    content: url('/tools/media/hecoicons/linkarrow.svg');
    margin-left: 7px;
    vertical-align: middle
}

.sgi {
    height: 1em;
    width: 1em;
    display: inline-block;
    background: url("/tools/media/hecoicons/heco-icons.svg") no-repeat;
    background-size: 14.0625em
}

.sgi.colordarkgreen {
    filter: brightness(0) saturate(100%) invert(60%) sepia(11%) saturate(3116%) hue-rotate(89deg) brightness(86%) contrast(84%);
    -webkit-filter: brightness(0) saturate(100%) invert(60%) sepia(11%) saturate(3116%) hue-rotate(89deg) brightness(86%) contrast(84%)
}

.sgi.colordarkorange {
    filter: brightness(0) saturate(100%) invert(53%) sepia(49%) saturate(4549%) hue-rotate(344deg) brightness(99%) contrast(104%);
    -webkit-filter: brightness(0) saturate(100%) invert(53%) sepia(49%) saturate(4549%) hue-rotate(344deg) brightness(99%) contrast(104%)
}

.sgi.colordarkblue {
    filter: brightness(0) saturate(100%) invert(17%) sepia(65%) saturate(7245%) hue-rotate(222deg) brightness(103%) contrast(106%);
    -webkit-filter: brightness(0) saturate(100%) invert(17%) sepia(65%) saturate(7245%) hue-rotate(222deg) brightness(103%) contrast(106%)
}

.sgi.colordarkpurple {
    filter: brightness(0) saturate(100%) invert(8%) sepia(83%) saturate(6865%) hue-rotate(258deg) brightness(97%) contrast(94%);
    -webkit-filter: brightness(0) saturate(100%) invert(8%) sepia(83%) saturate(6865%) hue-rotate(258deg) brightness(97%) contrast(94%)
}

.sgi.colordarkgray {
    filter: brightness(0) saturate(100%) invert(24%) sepia(12%) saturate(29%) hue-rotate(314deg) brightness(103%) contrast(79%);
    -webkit-filter: brightness(0) saturate(100%) invert(24%) sepia(12%) saturate(29%) hue-rotate(314deg) brightness(103%) contrast(79%)
}

.sgi.colordarkred {
    filter: brightness(0) saturate(100%) invert(33%) sepia(70%) saturate(4796%) hue-rotate(333deg) brightness(99%) contrast(104%);
    -webkit-filter: brightness(0) saturate(100%) invert(33%) sepia(70%) saturate(4796%) hue-rotate(333deg) brightness(99%) contrast(104%)
}

.sgi.colorwhite {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0) saturate(7500%) hue-rotate(75deg) brightness(107%) contrast(107%);
    -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(0) saturate(7500%) hue-rotate(75deg) brightness(107%) contrast(107%)
}

.sgi-spinner {
    background: url("/tools/media/sgicons/spinner.svg") no-repeat;
    background-size: 1em
}

.sgi-circle-bg {
    display: inline-block;
    text-align: left;
    line-height: 1.2em;
    overflow: hidden;
    height: 1em;
    width: 1em;
    border-radius: 50%;
    background: var(--gray-300)
}

.sgi-circle-bg.bggray {
    background: var(--gray-300)
}

.sgi-circle-bg .sgi {
    font-size: .6em;
    margin-top: -0.71em;
    margin-left: .34em;
    vertical-align: middle
}

.sgi-sm {
    font-size: .8em
}

.sgi-lg {
    font-size: 1.5em;
    vertical-align: text-bottom
}

.sgi-2x {
    font-size: 2em;
    vertical-align: text-bottom
}

.sgi-3x {
    font-size: 3em;
    vertical-align: text-bottom
}

.sgi-4x {
    font-size: 4em;
    vertical-align: text-bottom
}

.sgi-blank {
    background-position: 1em 1em
}

.sgi-add {
    background-position: -2.39em -2.24em
}

.sgi-address-book {
    background-position: -2.4375em -4.625em
}

.sgi-address-card {
    background-position: -4.8em -6.97em
}

.sgi-alert {
    background-position: -1.1875em -2.25em
}

.sgi-api {
    background-position: -1.1875em .225em
}

.sgi-arrow-down {
    background-position: -3.5625em -3.375em
}

.sgi-arrow-left {
    background-position: .05em -3.45em
}

.sgi-arrow-right {
    background-position: -1.25em -3.46em
}

.sgi-arrow-up {
    background-position: -2.39em -3.4em
}

.sgi-arrow-circle-down {
    background-position: -6.02em -8.04em
}

.sgi-arrow-circle-left {
    background-position: -7.25em -8.04em
}

.sgi-arrow-circle-right {
    background-position: -4.79em -8.04em
}

.sgi-arrow-circle-up {
    background-position: -3.57em -8.04em
}

.sgi-add-to-cart {
    background-position: -10.85em -9.05em
}

.sgi-bell {
    background-position: -8.375em -1.0625em
}

.sgi-billing {
    background-position: -13.12em -8.07em
}

.sgi-blocked-email {
    background-position: -11.97em -9.05em
}

.sgi-browser-add {
    background-position: -4.86em -9.99em
}

.sgi-business {
    background-position: -13.1em -4.57em
}

.sgi-calendar {
    background-position: -4.75em -1.0625em
}

.sgi-cart {
    background-position: -13.05em .05em
}

.sgi-cc-visa, .sgi-cc-vi {
    background-position: -6em -5.85em
}

.sgi-cc-mc {
    background-position: -7.2em -5.85em
}

.sgi-cc-amex {
    background-position: -8.43em -5.85em
}

.sgi-cc-discover {
    background-position: -9.63em -5.85em
}

.sgi-cc-alipay {
    background-position: -10.78em -5.86em
}

.sgi-cc-paypal {
    background-position: -11.92em -5.9em
}

.sgi-cc-cup {
    background-position: -13.1em -5.85em
}

.sgi-cc-maestro {
    background-position: -8.47em -10.02em
}

.sgi-chart {
    background-position: -2.4em -5.8em
}

.sgi-chat {
    background-position: -1.18em -6.9em
}

.sgi-check {
    background-position: -8.4em -4.65em
}

.sgi-checkmark {
    background-position: 0 -2.25em
}

.sgi-clock {
    background-position: -4.76em -5.88em
}

.sgi-close {
    background-position: -5.97em -2.27em
}

.sgi-cloud {
    background-position: 0 .15em
}

.sgi-cog {
    background-position: -9.53em -1.08em
}

.sgi-computer {
    background-position: -10.75em -4.615em
}

.sgi-computer-store {
    background-position: -2.4em -7.98em
}

.sgi-connect {
    background-position: -4.8125em .175em
}

.sgi-credit-card {
    background-position: -11.9375em -2.25em
}

.sgi-credit-card-alt {
    background-position: -13.125em -2.125em
}

.sgi-diamond {
    background-position: -1.18em -9.99em
}

.sgi-digitalocean {
    background-position: .045em -9em
}

.sgi-download {
    background-position: -13.1em -3.475em
}

.sgi-edit {
    background-position: -9.5em -2.25em
}

.sgi-ellipsis {
    background-position: .045em -9.99em
}

.sgi-envelope-sent {
    background-position: -6.03em -6.89em
}

.sgi-email {
    background-position: -1.1875em -4.625em
}

.sgi-envelope {
    background-position: -7.16em .15em
}

.sgi-error {
    background-position: -5.9375em -2.25em
}

.sgi-external-link {
    background-position: -7.125em -3.375em
}

.sgi-eye {
    background-position: -4.8em -9.1em
}

.sgi-eye-slash {
    background-position: -6em -9.1em
}

.sgi-forwarding {
    background-position: -9.72em -8.03em
}

.sgi-gift {
    background-position: -2.4em -7em
}

.sgi-globe {
    background-position: -1.2em -7.98em
}

.sgi-gemini {
    background-position: -9.68em -10.02em
}

.sgi-google {
    background-position: -12em -8.07em
}

.sgi-gsuite {
    background-position: -9.4575em -3.435em
}

.sgi-heart {
    background-position: -3.5625em .175em
}

.sgi-heart-fill {
    background-position: -1.16em -9.01em
}

.sgi-house {
    background-position: -7.125em -1.1em
}

.sgi-import {
    background-position: -7.234em -6.89em
}

.sgi-info {
    background-position: -4.74em -2.25em
}

.sgi-info-card {
    background-position: 0 -4.5625em
}

.sgi-invoice {
    background-position: -9.7em -9em
}

.sgi-key {
    background-position: -3.5625em -4.5625em
}

.sgi-level-up {
    background-position: -5.9375em .225em
}

.sgi-lightbulb {
    background-position: -3.66em -10em
}

.sgi-locked {
    background-position: -8.375em .1em
}

.sgi-locked-o {
    background-position: -8.48em -8.02em
}

.sgi-logout {
    background-position: -7.125em -2.2em
}

.sgi-manage {
    background-position: -2.4em .175em
}

.sgi-menu {
    background-position: -3.5625em -1em
}

.sgi-migrate {
    background-position: -8.45em -6.95em
}

.sgi-mobile {
    background-position: -9.65em -7em
}

.sgi-phone {
    background-position: -10.75em -2.25em
}

.sgi-power {
    background-position: 0 -1.08em
}

.sgi-preview {
    background-position: -6.03em -10.02em
}

.sgi-pro {
    background-position: -0 -5.87em
}

.sgi-question {
    background-position: -11.9375em -1.0625em
}

.sgi-question-o {
    background-position: -10.75em -1.0625em
}

.sgi-refresh {
    background-position: -8.375em -2.1875em
}

.sgi-remove {
    background-position: -3.55em -2.25em
}

.sgi-responsive {
    background-position: -8.5em -9.02em
}

.sgi-return {
    background-position: -13.07em -9.01em
}

.sgi-ribbon {
    background-position: -7.23em -10.02em
}

.sgi-risk {
    background-position: -2.43em -8.98em
}

.sgi-save {
    background-position: -10.87em -8.03em
}

.sgi-scale {
    background-position: -1.1875em -1.0625em
}

.sgi-search {
    background-position: -4.75em -3.475em
}

.sgi-search-computer {
    background-position: -3.67em -9.01em
}

.sgi-security {
    background-position: -13.12em -6.99em
}

.sgi-send-undo {
    background-position: -11.97em -6.99em
}

.sgi-shield {
    background-position: -10.75em -3.4875em
}

.sgi-social-facebook {
    background-position: -4.75em -4.625em
}

.sgi-social-instagram {
    background-position: -11.9375em .15em
}

.sgi-social-twitter {
    background-position: -6em -4.625em
}

.sgi-social-youtube {
    background-position: -10.75em .15em
}

.sgi-star {
    background-position: -11.93em -3.48em
}

.sgi-starter {
    background-position: -11.92em -4.475em
}

.sgi-store {
    background-position: -1.205em -5.8em
}

.sgi-supercharge {
    background-position: -2.4em -1.0625em
}

.sgi-tag {
    background-position: -7.23em -4.635em
}

.sgi-titan, .sgi-titan_email {
    background-position: .045em -7.98em
}

.sgi-transfer {
    background-position: -9.56em -4.54em
}

.sgi-trash {
    background-position: -3.58em -5.85em
}

.sgi-unlocked {
    background-position: -9.5625em .1em
}

.sgi-upload {
    background-position: .03em -6.89em
}

.sgi-usd {
    background-position: -13.11em -1.03em
}

.sgi-user {
    background-position: -5.96em -1.0625em
}

.sgi-user-sparkle {
    background-position: -2.4em -9.99em
}

.sgi-users {
    background-position: -10.82em -7.1em
}

.sgi-wordpress {
    background-position: -8.41em -3.4em
}

.sgi-wix {
    background-position: -7.25em -9.04em
}

.sgi-www {
    background-position: -3.6em -7em
}
.S9gUrf-YoZ4jf{
    background-image: url('/tools/media/google.png');
    width:226px;height: 53px;
}