/*
    Official Hesk Modern Light (light theme)

    Create your own theme by adjusting the main theme variables.
    TIPS:
        1) Modern Light is the perfect starting base for creating any "light" theme, as it requires no additional CSS adjustments, besides just changing colors.
            I.e. Things like inverted icon colors, or darker texts, softer shadows etc.
        2) Instead of adjusting the existing theme files, please simply create a copy of this file, and renamed it to your new theme.
            The theme will then automatically become available under Admin -> Settings -> General -> Customer Theme
        3) Any theme can also have values overwritten in Admin Settings -> Look & Feel,
        so if what you need is just some changes that are support by the existing theme colors, we suggest using that.

        4) USAGE:
        - By adjusting --primary, --secondary and --tertiary, most of other colors will be adjusted
          programmatically based on these.
        - Programmatic adjustments require support of the css function color-mix().
          This is currently supported for roughly 93% browser users (growing yearly).
          For the rest, there are fallbacks, but they might "not look as good", but keep things functional.
        - For the active theme, a "theme_{theme_file_name}" class will be added to the HTML element.
          This means you can easily override styling of any elements, by overriding the default CSS selector with a stronger specifier.
          For example, say you wanted to override styling of the ".btn-full" selector only for this theme, you could do so by defining this below in this file:
          .theme_modern_light .btn-full {
            padding: 50px;
          }
*/

/*
This first :root section is for setting any values of the main theme variables found in the 0_00_default_theme_vars.css file.
*/
:root {
    
    --primary: #000a1d;
    --secondary: #000a1d;
    --tertiary: #000a1d;
    --brand-navy: #000a1d;
    --brand-blue: #005bed;
    --brand-yellow: #ffe80a;

    --clr-bggray: #f2f2f2;

    --surface: #f2f2f2;
    --main-background: #ffffff;

    --font__pri-clr: #000a1d;
    --font__sec-clr: #000a1d;
    --font__hover: #555f72;

    --header__bg: #000a1d;
    --header_logo__clr: rgb(197, 202, 212);
    --header_nav__clr: #1776ea;
    --header_nav__hover_clr: var(--link__pri-hover-clr);

    --search__bg: #ffefdc;

    --breadcrumbs__a-hover-clr: #000a1d;
    --link__pri-hover-clr: #555f72;

    --info: #002d73;
    --info-2: #ebf8ff;

    --input-bg: #fff;

    --datepicker__clr: var(--gray-5);

    --shadow-1-30: var(--shadow-1-10);

    --notification__clr: var(--font__pri-clr);

    --table_row__bg-hover: color-mix(in srgb, var(--surface) 90%, var(--secondary));

    --navlink__title-clr: #002d73;
    --navlink__hover-bg: #f1fbff;
    --preview__clr: var(--font__pri-clr);
    --preview__hover-bg: #f9fafd;
    --preview__border-clr: #dfe4ec;
    --preview__title-clr: #000a1d;
    --suggest_preview__hover-icon-fill: var(--primary);
    --suggest_preview__border-clr: #777c86;

    --ticket_response__bg: color-mix(in srgb, white 90.5%, var(--green-1));

    --header_profile__clr: #1776ea;

    --icon_circle__clr: var(--gray-2);
    --icon_circle__bg: var(--white-2);
    --navlink_icon_hover__clr: var(--white-2);
    --navlink_icon_hover__bg: var(--gray-2);

    --link__sec-hover-clr: #2c70a2;

    --dropdown__clr: var(--font__pri-clr);
}


/* introducing an actual clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

.float-l {
    float: left;
}

.float-r {
    float: right;
}

.nowrap {
    overflow: hidden;
}

/*  Replacing the Lato font with Exo 2, the Lato font name is retained, replacing the font path locally to the theme */

/* @font-face {
    font-family: 'Lato';
    src: url(../fonts/Lato-Regular.eot);
    src: url(../fonts/Lato-Regular.eot?#iefix) format("embedded-opentype"), url(../fonts/Lato-Regular.woff2) format("woff2"), url(../fonts/Lato-Regular.woff) format("woff"), url(../fonts/Lato-Regular.ttf) format("truetype"), url(../fonts/Lato-Regular.svg#Lato-Regular) format("svg");
    font-weight: 400;
    font-style: normal
} */

@font-face {
    font-family: 'Exo2';
    src: url(fonts/Exo2-VariableFont_wght.ttf);
    font-style: normal
}

/* End of font replacement */

/* Using Exo2 font override */

p, h1, h2, h3, h4, h5, h6 {
    font-family: 'Exo2', 'Lato', arial, sans-serif;
}

/* End of Exo2 font override */

/* ADDITIONAL OVERWRITES BELOW - CSS helper vars, and general selector overwrites:
(needed for specifically desired themes, which are currently not part of admin variables.
They ALL require; to properly override followup loaded CSS!
*/
:root {
    --header_border__clr: var(--white-7);
    --btn_full__hover_bg: var(--link__pri-hover-clr);
    --dropdown_input__border-clr: var(--white-7);
    --dropdown_label__border-clr: var(--white-7);
    --dropdown_list__border-clr:  var(--white-7);
}
.wrapper {
    font-family: 'Exo2', 'Lato', arial, sans-serif;
}
.preview {
    box-shadow: none;
}
.preview .preview__text span:not(.lightgrey),
.preview .preview__text .navlink__descr {
    color: var(--gray-7);
}
.tabbed__head .tabbed__head_tabs li.current {
    background: none;
    box-shadow: none;
}
.tabbed__tabs .tabbed__tabs_tab {
    box-shadow: none;
}
.tabbed__head .tabbed__head_tabs li span {
    line-height:1rem;
}
.divider {
    height: 1px;
    margin: 30px 0;
}
.ticket__block-footer {
    border-top: none;
}
a.link {
    text-decoration: none;
}
.ticket__params .params--block .row {
    border-bottom: none;
}
.article-kb {
width: 100%;
margin: 0 auto;
}
.home-kb-link {
    font-size: 2rem;
}
.article-kb .article__heading  a span {
    font-size: 1.5rem;
}
.cust-help .ml-1 {
    margin-left: 8px;
    color: var(--surface);
}
.article-heading-tip {
    padding-top: 8px;
    color: var(--surface)
}
.main__content {
    background-image: url(../../img/dockpipes.png);
    background-position: top; 
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: var(--surface);
}
.main__content .article .block__head {
    background: none;
    box-shadow: none;
}
.preview:hover .icon-in-circle .icon {
    fill: var(--primary);
}
.article__heading {
    color: var(--navlink__title-clr);
}
.tabbed__head .tabbed__head_tabs li.current {
    color: var(--gray-7);
}
.select__title {
    color: var(--gray-7);
}

.form input.form-control, .form textarea.form-control {
    border-color: var(--white-7);
}
.form input.form-control::placeholder, .form textarea.form-control::placeholder {
    color: var(--gray-2);
}
.search__form .form-group {
    max-width: 100%;
}
.search__form .form-group input {
    font-size: 1.5rem;
}
.divider {
    background: var(--brand-navy);
}
.ticket__block-footer {
    color: var(--gray-2);
}
.ticket__params .params--block .row .title {
    color: var(--gray-2);
}
.ticket__body_block h1,
.ticket__body_block h2 {
    color: var(--gray-7);
}
.ticket__body_block.naked {
    box-shadow: 0 2px 4px 0 var(--shadow-1-10), 0 -2px 4px 0 var(--shadow-1-10);
}

label.required.captcha-asterisk {
    margin: 20px 0;
}

label.required.captcha-asterisk::after {
    content: none;
}

.modal a.close-modal {
    border-radius: 50%;
    border: 2px solid var(--brand-yellow);
}

body.cust-help .help-search {
    width: 100%;
    margin: 0 auto;
}

.search__title {
    color: #fff;
    margin-bottom: 40px;
}

.cust-help .h-3 {
    color: var(--surface);
    font-size: 2rem;
    margin-bottom: 0;
    text-align: center;
    font-weight: 700;
}
.cust-help .header {
    height: 80px;
    border-bottom: 1px solid var(--brand-blue);
}
.cust-help .header__inner {
    align-items: start;
    padding: 15px;
}



.cust-help .header__inner .header__nav {
    display: none !important;
}


.menu_dt {
    display: block;
    margin: 8px 15px 0 0;
}
.nav_toggle {
    display: none;
}
.title-link {
    color: var(--gray-7);
    font-size: 1.25rem;
}
.main__content .article .block__head .h-3 {
    color: var(--gray-7);
}

.topics__list {
    list-style-type: none; 
}

.topics__list a {
    font-size: 1rem;
}

.topics__list li:before {
    content: normal;
}

.topics__list li a:before {
    content: ' ›';
    transition: all ease-in 100ms;
    font-size: 24px;
    font-weight: 700;
    color: var(--brand-blue);
    margin-right: 6px;
    top: -10px;
    position: relative;
    transition: all ease-in 100ms;
}

.topics__list li a:before:hover {
    color: var(--brand-yellow);
}

.header .header__nav .profile__user .profile__menu .profile--view a:hover {
    color: var(--btn_full_clr);
}
.dropdown-select .icon-chevron-down {
    fill: var(--white-9);
}
.param.calendar .calendar--value {
    color: var(--font__pri-clr);
}
.radio-custom [type="radio"]:checked + label {
    color: var(--font__sec-clr);
}
.checkbox-custom [type="checkbox"]:not(:checked) + label,
.checkbox-custom [type="checkbox"]:checked + label {
    color: var(--font__sec-clr);
}

.navlink {
    border: 3px solid var(--brand-navy);
    border-radius: 8px;
    background-color: var(--brand-navy);
    width: 70%;
    max-width: 370px;
    padding: 8px 14px;
    border: 1px solid var(--brand-yellow);
    color: var(--surface);
    font-family: Lato, Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    transition: all 300ms cubic-bezier(.5, 0, .5, 1);
}

.navlink .navlink__title {
    color: var(--surface);
    font-size: 18px;
    margin: 0;
}


.navlink:hover .icon-in-circle {
    background-color: var(--brand-yellow);
}

.navlink:hover {
    border: 1px solid var(--brand-blue) ;
    background-color: var(--surface);
}

.navlink:hover .navlink__title, .navlink:hover .navlink__descr {
    color: var(--brand-navy);
}

.navlink__descr {
    display: none;
}

/* Desktop menu */
.menu_dt a {
    color: var(--surface);
    font-family: 'Exo2', 'Lato', arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    display: inline-block;
    white-space: nowrap;
}

.menu_dt a:hover {
    color: var(--brand-yellow);
}

.menu_dt a:nth-child(2) {
    margin-left: 2rem;
}

.menu_dt .menu-home, .menu_dt .menu-learn {
    color: var(--brand-yellow);
}

.menu_dt .menu-home:hover, .menu_dt .menu-learn:hover {
    color:  var(--surface);
}

.menu_dt .menu-home:hover svg, .menu_dt .menu-learn:hover svg  {
    fill:  var(--surface);
}

.menu_dt .menu-learn {
    display: inline-block;
    margin-right: 45px;
}

.dt-nav-divider {
    color:  var(--surface);
    display: inline-block;
    margin: 0 1.5rem;
}

.so-link-icon {
    max-width: 20px;
    vertical-align: middle;
    fill: var(--brand-yellow);
    padding-bottom: 3px;
}

/* Mobile menu */

.menu-link-text {
    font-size: 1.25rem;
    margin-right: 12px;
    color:  var(--surface);
}

.main-nav-overlay {
    width: 100%;
    height: 100vh;
    display: none;
    position: absolute;
    z-index: 2;
    top: 75px;
}

.main-nav-container {
    position: absolute;
    right: 0;
    padding: 30px 30px 30px 40px;
    background-color: rgba(0, 10, 29, .8);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    height: 100vh;
}

.main-nav-link {
    color: #f2f2f2;
    font-family: 'Exo2', 'Lato', arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 2.5rem;
    display: block; 
    text-align: center;
    border: 1px solid transparent;
    padding: 8px 24px;
    transition: all 300ms cubic-bezier(.5, 0, .5, 1);
    margin-bottom: 1.75rem;
}

.main-nav-link:hover {
    border: 1px solid rgba(0, 0, 255, .9);
    border-radius: 10px;
    color: #000a1d;
    background-color: var(--clr-bggray);
}

.navlink {
    /* Monkey */
    /* max-width: 0; */
    width: auto;
    padding-right: 16px;
}


/* Hide Article ID row in sidebar accordion */
.accordion-body .article-id,
.accordion-body .kb-article-id,
.accordion-body .articleid {
  display: none;
}


.smooth-on-link {
    color: var(--brand-yellow);
}

.home-link-icon {
    width: 1.5rem;
    height: auto;
    vertical-align: text-bottom;
}

.home-link-icon:hover {
    fill: #F00;
}

.dt-nav-divider {

}

.faq-link-icon {
    width: 1.5rem;
    height: auto;
    vertical-align: text-bottom;
    fill: #000a1d;
}

#view-more {
    font-size: .75rem;
    font-weight: 600;
    text-decoration: underline;
}

.btn {
    border-radius: 8px;
    font-size: 18px;
    font-family: 'Exo2', 'Lato', arial, sans-serif;
    border: 1px solid var(--brand-yellow);
    color: #fff;
    background-color: #000a1d;
    transition: all 300ms cubic-bezier(.5, 0, .5, 1);
}

.btn:hover {
    border: 1px solid var(--brand-blue);
    color: #000a1d;
    background-color: #fff;
}

.btn-refresh .icon-refresh {
    fill: var(--brand-yellow);
}

.modal a.close-modal {
    background-image: url("../../img/close-window-icon.svg");
}

.page-form #forgot-tid-submit {
    width: 250px;
}

.notice-flash {
    background-image: none;
    border-radius: 15px;
}

.notification {
    border-radius: 15px;
}

.notification a.btn-full {
    width: 200px;
    color: #fff;
}

.notification a.btn-full:hover {
    color: var(--brand-navy);
}

.notification:before, .notification.green::before {
    background: none;
}

.ticket__body {
    margin-right: 30px;
}

.ticket__body_block {
    text-align: left;
}

.ticket__params .params--block .row .title {
    color: var(--brand-navy);
    font-weight: 700;
}

.logo {
    position: relative;
    min-width: 200px;
    filter: drop-shadow(5px 5px 7px #000a1d);
}

.tabbed__head {
    margin: 0;
    border-bottom: 2px solid #000a1d;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
}

.tabbed__head .tabbed__head_tabs li:nth-child(1) {
    border-top-left-radius: 6px;
}

.tabbed__head .tabbed__head_tabs li:nth-child(2) {
    border-top-right-radius: 6px;
}

.tabbed__head .tabbed__head_tabs li {
    background-color: var(--brand-yellow);
    border-bottom-color: #000a1d;
    color: #000a1d;
}

.tabbed__head .tabbed__head_tabs li:hover {
    background-color: #fff;
    border-bottom-color: #000a1d;
    color: #000a1d;
}

.tabbed__head .tabbed__head_tabs li.current {
    background-color: #000a1d;
    border-bottom-color: #000a1d;
    color: var(--brand-yellow);
}

.footer {
    background-color: #000a1d;
    margin-top: 16px;
    padding: 10px 16px 16px;
    color: #fff;
}

.privacy-agree {
    width: 100%;
    text-align: center;
}

.privacy-link {
    color: var(--brand-blue) !important;
    text-decoration: none;
}

.checkboxs .label {
    display: none;
}

.checkbox-custom {
    width: fit-content;
    margin: 0 auto;
}

.breadcrumbs {
    display: none;
}

.search__form {
    background-color: transparent;
    padding: 0;
    border-radius: 15px;
    margin-bottom: 0;
}

.search__form .form-group {
    width: 100%;
    max-width: 100%;
}

.search__form .form-group input {
font-weight: 600;
}

input:focus, 
textarea:focus, 
select:focus,
label:focus {
    outline: none;
    border: none;
}

.search__form .form-group input {
    width: 100%;
    display: inline-block;
    padding: 17px 16px 17px 56px;
    background: #fff;
    border-color: #000a1d;
    font-family: 'Exo2', 'Lato', arial, sans-serif;
    font-weight: 600;
    font-size: 14px;
    transition: all .3s ease;
    color: #000a1d;
}

.kb-suggestions {
    border-radius: 15px;
    margin-top: 30px;
}

.suggest-preview .suggest-preview__title {
    font-weight: 700;
}

.btn.search__submit {
    border: none;
    background: none;
}

.cust-help .wrapper .main .main__content .contr .help-search {
    margin-top: 30px;
}

.cust-help .contr {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
}

.cust-help .header__logo {
    z-index: 3;
}

#kb_search {
    border-radius: 10px;
    background-color: #fff;
}

.search-home {
    margin-bottom: 30px;
    margin-top: 30px;
}

.help-search {
    width: 100%;
    margin: 0 auto;
}

.dropdown, .dropdown-select, .with-label {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    background-color: #fff;
}

.intro-copy-container {
    /* background-image: url(../../img/dockpipes.jpg);
    background-size: 100%;
    background-color: #707884; */
    /* min-height: 230px; */
    padding: 0 2rem;
    margin-bottom: 80px;
    overflow: visible;
    
}

.intro-copy {
    text-align: left;
    max-width: 1000px;
    margin: 0 auto 30px auto;
    padding: 20px 30px;
    position: relative;
    z-index: 1;
    top: 50px;
    background-color: #000a1d;
    border-radius: 20px;
    border: 1px solid var(--brand-yellow);
}

.intro-copy h1 {
    font-size: 1.75rem;
    padding-bottom:.5rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--brand-yellow);
    color: #efefef;
}

.intro-copy p {
    font-size: 1rem;
    margin: 0 auto;
    width: 100%;
    color: #fff;
}

.intro-copy:nth-child(1) p{
    margin-bottom: 1rem;
}

.intro-copy-highlight {
    font-weight: 800;
    color: var(--brand-yellow);
}

.home-link-spacer {
    margin-top: 20px;
}

.tabbed__head {
    margin: 30px 0 0 0
}

.icon-in-circle {
    /* background-color: #000a1d;
    width: 30px;
    height: 30px; */
    display: none;
}

.icon-in-circle .icon {
    fill: var(--brand-yellow);
    font-size: 16px;
}

.icon-in-circle .icon:hover {
    fill: #000a1d;
    font-size: 1rem;
    background-color: #000a1d;
}

.search__form .form-group .icon-search {
    font-size: 20px;
    fill: #000a1d;
}

.navlink:hover .icon-in-circle .icon {
    fill: #000a1d;
    background-color: var(--brand-yellow);
}

.tabbed__tabs_tab a:hover .icon-in-circle .icon {
    fill: var(--brand-yellow);
}

.article__heading {
    color: #000a1d;
}

.preview .preview__title {
    color: var(--preview__title-clr);
}

.article {
    background-color: #f2f2f2;
    margin-top: 44px;
    margin-bottom: 30px;
    padding: 20px;
    border-radius: 20px;
    /* border: 3px solid #000a1d; */
}

.cust-help article {
    margin: 30px auto 30px auto;
    width: 100%;
    max-width: 1000px;
}

.interior-article, .ticket__body_block {
    width: 95%;
    float: left;
}

.ticket__body_block {
    box-shadow: none;
}

.file-upload-checkmark {
    max-width: 30px;
    height: auto;
}

.attachment-row>.name-size-delete>.name-size>.size::after {
    content: url("https://support.smooth-on.com/img/file-upload-checkmark.svg");
    width: 30px;
    height: auto;
    display: inline-block;
}

.attach-tooltype {
    display: none;
}

.topics {
    background-color: #f2f2f2;
    box-shadow: none;
    border-radius: 30px;
    margin-top: 30px;
}

.topics__list a {
    color: var(--font__sec-clr);
}

.topics__list a:hover {
    color: var(--font__hover);
}

.ticket__body_block.naked {
    box-shadow: none;
    background-color: #f2f2f2;
    border-radius: 10px;
}

.ticket__body article {
    margin-top: 0;
}

.ticket__params .params--block {
    border-radius: 2px;
    box-shadow: none;
    background-color: #f2f2f2;
    border-radius: 10px;
    padding-bottom: 15px;
}

.param--attach {
    margin: 0 auto;
}

.form-submit-ticket .form-group, .form-submit-ticket .param {
    max-width: 1200px;
}

.ticket--article {
    margin-top: 30px;
}

.form-submit-ticket {
    margin: 0 auto 24px auto;
    width: 100%;
    padding: 24px 32px 56px;
    border-radius: 30px;
    box-shadow: none;
    background-color: #f2f2f2;
}

.form .label {
    font-family: 'Exo2', 'Lato', arial, sans-serif;
    font-weight: 700;
    color: #000a1d;
}

.field-error, .isErrorStr {
  margin-top: .35rem;
  color: var(--brand-yellow);
  font-size: .875rem;
  font-weight: 800;
  line-height: 1.2;
}


/* Tooltip wrapper (reuses isErrorStr for color) */
.hesk-error-tip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin-top:.35rem;
  position:relative;
  cursor:help;
  font-size:.9em;
}

.form-submit-ticket {
    padding: 30px;
    width: 95%;
}

.form-submit-ticket .form-group, .form-submit-ticket .param input, .form input.form-control, .form textarea.form-control {
    max-width: 100%;
    border-radius: 10px;
}


/* Invalid required fields (when empty or wrong format) */
input:invalid,
textarea:invalid,
select:invalid {
  border: 2px solid #dc2626;
  background-color: #fef2f2;
}

/* When user starts fixing it */
input:valid,
textarea:valid,
select:valid {
  border: 2px solid #16a34a;
}

div[role="alert"] {
  display: none;
}

.form-error {
    display: none;
    color: #fff;
    margin-left: 15px;
    padding: 2px 6px;
    background-color: #F00;
    width: fit-content;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    font-size: 12px;
    font-weight: 800;
}

/* Adjusting styling of error for privacy checkbox */
section.param.checkboxs {
    margin-bottom: 10px;
}

.form-error-privacy {
    padding: 2px 6px;
    border-radius: 10px;
    margin: 0 auto;
}


/* ------------------------------------------------- */
/* --------- Footer styles from Smooth-On ---------- */
/* ------------------------------------------------- */

/* footer */

footer{
	border-top: 1px solid var(--brand-blue);
	background-color: #000a1d;
	color: #f2f2f2;
	font-size: 14px;
	line-height: 18px;
	font-weight: 300;
	padding-top: 20px;
}
footer > div{
    width: 92%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    justify-content: space-between;
        font-family: 'Exo2', 'Lato', arial, sans-serif;
}
footer a{
	color: inherit!important;
	font-weight: 300;
}
footer a:visited{
	color: rgba(100, 110, 120, 1);
}
footer a:hover,
footer a:active{
	color: #fff!important;
}
footer p{
    margin: 0;
	margin-bottom: 6px;
}
footer > p{
	display: none;
}
footer h5 {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0;
	padding-bottom: 1rem;
}
footer h6, footer b{
	margin: 0;
	font-style: italic;
	font-weight: 700;
	font-size: inherit;
}
footer ul {
	list-style: none;
    padding: 0;
	
	li {
		padding-bottom: 1rem;
	}
}
#about-smoothon,
#resources-smoothon,
#contact-smoothon,
#footer-links{
	max-width: 23%;
	margin-bottom: 5px;
    /* margin-right: 2%; */
}
#about-smoothon { margin-left: 2% }
#contact-smoothon a:hover{
	color: rgba(100, 110, 120, 1);
	text-decoration: none;
}
.social-smoothon{
	display: flex;
    margin-top: 1rem;
    text-align: center;
    white-space: nowrap;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
	
	a {
		display: inline-block;
		width: 36px;
        background: transparent;
        transform: skewX(-12deg);
        border-radius: .25rem;
        margin-right: .5rem;
		overflow: hidden;
		transition: all .25s linear;
		
		img {
			transform: skewX(12deg);
			filter: grayscale(1) contrast(0.5);
			transition: all .25s linear;
		}
		img:hover {
			filter: grayscale(0) contrast(1);
		}
	}
	a:hover {
		background: var(--clr-soblu);
	}
}

#copyright{
	clear: left;
	font-size: .8em;
	text-align: left;
	color: #FFF;
	padding: 10px;
	border-top: solid 1px var(--brand-blue);
}
footer .footertech{
	display: block;
	font-size: 1rem;
	font-weight: 500;
	line-height: 50px;
	padding-left: 65px;
	background: url('../images/techSupportIconToRightOver.svg') no-repeat;
	background-size: 58px 50px;
	margin: 12px 0 0 -5px;
	white-space: nowrap;
	cursor: pointer!important;
}
footer .footertech:after{
	content: "\00A0\0203A";
}
footer .footertech:hover,
footer .footertech:active{
	color: #fff!important;
	cursor: pointer!important;
	background-image: url('../images/techSupportIconToRight.svg');
}

#CybotCookiebotDialogBodyButtonDecline, 
#CybotCookiebotDialogBodyButtonAccept {
	background-color: var(--clr-blkblu)!important;
	border-radius: .5rem;
}

.topics__title .icon {
    fill: #000a1d;
}

.nav {
    margin: 1.75rem 0 16px 0;
}

/* View Ticket page styles */

.print-icon {
    border-radius: 50%;
    background-color: var(--brand-navy);
    border: 1px solid var(--brand-yellow);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-print {
    width: 18px;
    height: auto;
    fill: var(--white-9);
}

a.refresh-btn:hover span.refresh-btn-text {
    color: var(--brand-navy);
}

.refresh-btn-text {
    font-size: 1rem;
}

.ticket__body_block {
    background-color: var(--clr-bggray);
    border-radius: 15px;
}

.custom-field-title {
    color: var(--brand-navy);
}

.selectize-control {
    z-index: 2;
}

.ticket__params .params--block {
    padding-top: 15px;
}

.attachment-row>.name-size-delete>.name-size>.size::after {
    position: relative;
    content: url(https://support.smooth-on.com/img/file-upload-checkmark.svg);
    width: 15px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    top: 2px;
}

.attachment-subtext {
    font-size: .75rem;
    line-height: 1.25rem;
    display: inline-block;
    margin-left: 6px;
}

.mysecnum::after, .captcha-required::after {
    content: "";
}

.captcha-required {
    margin: 25px 0;
}

label[for="mysecnum"]::after {
    content: "";
    display: none;
}

.btn-refresh {
    position: relative;
    top: -10px;
    right: 0;
    margin-left: 15px;
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 1px 7px;
}

#modal-contents {
    width: 75%;
    margin: 15px auto 0 auto;
}

.tab-break {
    display: none;
    padding-left: 12px;
}

.article-heading-tip {
    font-size: 1rem;
}

 .support-link {
    color: var(--brand-yellow);
    white-space: nowrap;
    font-weight: 800;
    pointer-events: none;
}

.support-link:hover {
    color: #fadf87;
}

@media (max-width: 1500px){

    .nav {
        font-size: 2.5rem;
        margin: 1.5rem 0 16px 0;
        border-radius: 50%
    }
}

@media (max-width: 1400px) {

    .nav {
        margin: 1rem 0 16px 0;
    }
}

@media (max-width: 1100px){

    .intro-copy {
        /* max-width: 900px; */
    }

    .nav {
        margin: 1.75rem 0 16px 0;
    }


}


@media (max-width: 1000px) {

     .support-link {
        pointer-events: all;
    }

    .tab-break {
        display: block;
        padding: none;
    }

    .main__content {
    background-image: none;
    background: linear-gradient(to bottom, rgba(0, 10, 29, 1) 0%, rgba(0, 10, 29, 0) 50%);
    }

    .nav {
        margin: 5rem 0 16px 0;
    }

    .intro-copy {
    top: 30px;
    }

    .form-submit-ticket {
        width: 90%;
    }

    .search__form .form-group input {
        width: 100%;
        padding: 8px 8px 8px 16px;
        background-color: var(--search__input-bg);
        border-color: #000a1d;
        font-family: 'Exo2', 'Lato', arial, sans-serif;
        font-weight: 600;
        font-size: 10px;
        transition: all .3s ease;
        color: #000a1d;
    }

    .cust-help .wrapper .main .main__content .contr .help-search {
        margin-top: 20px;
    }

    .menu_dt {
        display: none;
    }

    .nav_toggle {
        display: block;
    }

    #about-smoothon, #resources-smoothon, #contact-smoothon, #footer-links {
        width: calc(50% - 6%);
        max-width: none;
        margin: 2%;
    }

    .nav {
        margin: 0 16px;
    }
        

    footer h5 {
        font-size: 1.5rem;
        font-weight: 300;
        margin: 0;
        padding-bottom: 1rem;
        border-bottom: 1px solid #fff;
    }

    footer ul {
            list-style: none;
            padding: 6px;
            margin-top: 6px;
        }

        .cust-help .contr {
            padding: 0 30px 0 30px;
        }

        .main-nav-overlay {
            opacity: 1;
            top: 50px;
    }

    .main-nav-container {
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 10, 29, .95);
    }

    .btn-refresh {
        position: relative;
        right: 0;
        margin-left: 15px;
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

    .btn-refresh .icon-refresh {
        width: .75rem;
        height: .75rem;
        fill: var(--brand-yellow);
    }

    #forgot-modal {
        width: 100%;
    }

    .cust-help article {
        width: 100%;
    }

    .ticket__body_block .block--description {
        font-size: 1.25rem;
    }

    .ticket__body {
        margin-right: 0 !important;
    }
    
}

@media (max-width: 800px){

    .nav {
        margin: 1rem 0 1rem 0;
    }


}
    
@media (max-width: 767px) {

.search__form .search__submit {
    left: 14px;
}

.search__form .form-group input {
    padding: 8px 8px 8px 46px;
}

.intro-copy-container {
    padding: 0;
}

.article-kb .article__heading  a span {
    font-size: 1.5rem;
}

#view-more {
    font-size: .75rem;
    font-weight: 600;
    text-decoration: underline;
}

.cust-help article {
    padding-top: 15px;
}

.cust-help .contr {
    padding: 0 15px;
}

.cust-help .header__logo {
    margin: 8px;
}

.logo {
    position: relative;
    min-width: 130px;
}
  
.cust-help .header {
    height: 50px;
}

.cust-help .header__inner {
    padding: 0;
}

/* hamburger mobile */
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 30px;
    height: 2px;
}

.main-nav-overlay {
        opacity: 1;
        top: 50px;
}

.main-nav-container {
    width: 100%;
    height: 100vh;
    background-color: var(--brand-navy);
}

.main-nav-link {
    margin: 0 auto 1.75rem auto;
}

#about-smoothon, #resources-smoothon, #contact-smoothon, #footer-links {
    width: 100%;
    max-width: none;
    margin: 2%;
    text-align: center;
}

.social-smoothon {
    margin: 2rem 0;
    justify-content: center;
}

footer h5 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--brand-yellow);
}

footer ul {
        list-style: none;
        padding: 6px;
        margin-top: 6px;
    }

#about-smoothon img {
    display: block;
    margin: 0 auto 5% auto;
}

.intro-copy {
    text-align: center;
    width: 90%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.intro-copy-container {
    background-image: none;
    background-color: none;
    min-height: auto;
}

.icon {
    display: none;
}

.icon-search {
    display: inline-block;
}

.icon-chevron-down, .icon-print {
    font-size: 14px;
    fill: var(--brand-yellow);
    display: block;
}

.topics__block {
    padding: 0 20px;
    width: 100%;
    font-size: 1.5rem;
}

.navlink {
    width: 100%;
    display: block;
    text-align: center;
}

.navlink.icon-in-circle {
    display: none;
}

.navlink .navlink__title, .navlink .navlink__descr {
    margin-right: auto;
}

.topics__list li a:before {
    font-size: 36px;
    top: -14px;
}

.title-link {
    color: var(--gray-7);
    font-size: 1.5rem;
}

.search__form .form-group input {
    max-width: 100%;

}

.search__form .form-group input {
    font-size: 1.25rem;
}

.refresh-btn-text {
    margin-left: 0;
}

.btn-toggler:hover {
    border: 1px solid var(--brand-yellow);
    color: var(--brand-yellow);
    background-color: var(--brand-navy);
}

}