/* Generated from assets/css/app.css by ops/build-plugin-css.php. */

/* Source: utilities/forms.css */

.gform_wrapper {
    &.gform-theme {
        &.gform-theme--framework {
            .gform_body {
                .gform_fields {
                    .gfield {
                        &.mailing_catalog {
                            .ginput_container {
                                input {
                                    &[type="checkbox"] {
                                        & + label {
                                            &::after {
                                                background-image: url(../../assets/img/forms/mailing_catalog.svg);
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        &.file_upload {
                            .ginput_container {
                                input {
                                    &[type="checkbox"] {
                                        & + label {
                                            &::after {
                                                background-image: url(../../assets/img/forms/file_upload.svg);
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        &.product-select {
                            @apply my-3;

                            .gfield_label {
                                @apply font-header font-light text-text-100 text-[14px];

                                .gfield_required {
                                    @apply text-blue-40;
                                }
                            }

                            .ginput_container_radio {
                                .gfield_radio {
                                    @apply grid grid-cols-3 gap-4;
                                    @apply md:grid-cols-2;

                                    .gchoice {
                                        @apply relative block p-0;

                                        input {
                                            @apply absolute z-10 top-3 left-3 max-h-[14px] min-h-[14px] max-w-[14px] min-w-[14px] appearance-none bg-white border border-white rounded-full transition-none;

                                            &::before {
                                                @apply hidden;
                                            }

                                            &:checked {
                                                @apply bg-blue-40;
                                            }

                                            & + label {
                                                @apply flex flex-col text-transparent text-[0px] m-0;
                                                @apply before:content-[""];

                                                &::before {
                                                    @apply relative flex flex-col cursor-pointer aspect-[333/262] m-0 border-none bg-contain bg-center bg-no-repeat;
                                                }

                                                &::after {
                                                    @apply flex items-center justify-center font-header font-medium text-text-100 text-[12px] text-center uppercase leading-[1.2] h-[42px] w-full px-1 py-0 bg-white;
                                                }
                                            }

                                            &[value="industrial"] {
                                                & + label {
                                                    &::before {
                                                        background-image: url(../../assets/img/forms/thumbnails/industrial.webp);
                                                    }

                                                    &::after {
                                                        content: "Industrial Stairs";
                                                    }
                                                }
                                            }

                                            &[value="commercial"] {
                                                & + label {
                                                    &::before {
                                                        background-image: url(../../assets/img/forms/thumbnails/commercial.webp);
                                                    }

                                                    &::after {
                                                        content: "Commercial Stairs";
                                                    }
                                                }
                                            }

                                            &[value="ships"] {
                                                & + label {
                                                    &::before {
                                                        background-image: url(../../assets/img/forms/thumbnails/shipladder.webp);
                                                    }

                                                    &::after {
                                                        content: "Ship Ladder";
                                                    }
                                                }
                                            }

                                            &[value="portable"] {
                                                & + label {
                                                    &::before {
                                                        background-image: url(../../assets/img/forms/thumbnails/portable.webp);
                                                    }

                                                    &::after {
                                                        content: "Portable Stairs";
                                                    }
                                                }
                                            }

                                            &[value="rolling"] {
                                                & + label {
                                                    &::before {
                                                        background-image: url(../../assets/img/forms/thumbnails/rolling.webp);
                                                    }

                                                    &::after {
                                                        content: "Rolling Stairs & Ladders";
                                                    }
                                                }
                                            }

                                            &[value="swing-gates"] {
                                                & + label {
                                                    &::before {
                                                        background-image: url(../../assets/img/forms/thumbnails/yellowgate.webp);
                                                    }

                                                    &::after {
                                                        content: "YellowGate";
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        &:not(.product-select) {
                            .ginput_container {
                                input {
                                    &[type="radio"],
                                    &[type="checkbox"] {
                                        & + label {
                                            @apply flex items-center justify-end gap-2 cursor-pointer ml-0;
                                            @apply before:content-[""];
                                        }
                                    }

                                    &[type="checkbox"] {
                                        & + label {
                                            @apply flex-row-reverse;
                                            @apply after:content-[""];

                                            &::before {
                                                @apply order-2 rounded-none;
                                            }

                                            &::after {
                                                @apply block order-1 h-[32px] w-[22px] bg-contain bg-center bg-no-repeat;
                                            }
                                        }
                                    }

                                    &[type="text"],
                                    &[type="email"],
                                    &[type="tel"] {
                                        @apply flex items-center justify-end h-[40px];
                                    }
                                }

                                textarea {
                                    @apply h-[120px] min-h-0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.request-quote-form {
    ul.gfield_radio {
        flex-direction: row;
        li {
            display: inline-block;
            width: 190px;

            background-size: 150px auto;
            background-position: 20px 1px;
            background-repeat: no-repeat;

            &:nth-of-type(1) {
                background-image: url(../../assets/img/forms/form-es.png);
            }
            &:nth-of-type(2) {
                width: 165px;
                background-image: url(../../assets/img/forms/form-rs.png);
            }
            &:nth-of-type(3) {
                background-image: url(../../assets/img/forms/form-yg.png);
            }
        }
    }
}

/* Source: utilities/lhn.css */

/* Help Squad */
div#designstudio-button.designstudio-hidden {
  display: none !important;
}

div#lhnHelpOutCenter.lhnWindow.lhnActive {
  opacity: 0;
  height: 0;
  width: 0;
  right: 16px;
  bottom: 16px !important;
  border-radius: 0;
  box-shadow: 0 0 5rem rgba(0,0,0,0.1);
  overflow: scroll;
}

div#lhnHelpOutCenter.lhnWindow.lhnright {
  opacity: 1;
  right: 16px !important;
  border-radius: 0;
  box-shadow: 0 0 5rem rgba(0,0,0,0.1);
  overflow: auto;
  width: 350px;
  height: 100%;
}
/*div#lhnHelpOutCenter.lhnWindow.lhnright {
  opacity: 0;
  height: 0;
  width: 0;
  right: 16px !important;
  border-radius: 0;
  box-shadow: 0 0 5rem rgba(0,0,0,0.1);
  overflow: scroll;
}*/

div#lhnHelpOutCenter.lhnWindow.lhnVisible {
  opacity: 1;
  height: 100%;
  width: auto;
}

div#lhnHelpOutCenter div#lhnHocHeader {
  padding: 5px 15px;
  height: 60px;
  background-color: #00589d;
  border-radius: 0;
  display: flex;
  align-items: center;
}

div#lhnHelpOutCenter div#lhnHocHeader div.lhnWindow-header-text h3 span {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  letter-spacing: 0;
  font-weight: 400;
  text-transform: capitalize;
  color: #fff !important;
}

div#lhnHelpOutCenter div#lhnHocHeader div.lhnWindow-header-text h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 0;
  font-weight: 400;
  text-transform: capitalize;
  margin-top: -2px;
  color: #fff !important;
}

div#lhnHelpOutCenter div#lhnHocHeader div.lhnWindow-header-text h4 span {
  top: 0;
  margin-right: 2px;
}

/* div#lhnHelpOutCenter div#lhnHocHeader div.lhnWindow-header-controls {
  position: absolute;
  top: 1px;
  right: 10px;
  margin: 0;
} */

div#lhnHelpOutCenter div#lhnHocHeader div.lhnWindow-header-controls button img {
  filter: none;
}

div#lhnHelpOutCenter div#lhnHocHeader div.lhnWindow-header-controls button#lhnWindowMinimizer img {
  margin-top: -20px;
}

div#lhnHelpOutCenter div#lhnHocHeader div.lhnWindow-header-controls button#lhnWindowCloser img {
  margin-top: -7px;
}

#lhnHelpOutCenter div.lhnWindow-header div.lhnWindow-header-avatar {
  width: auto;
}
#lhnHelpOutCenter div.lhnWindow-header .lhnWindow-header-avatar--img {
  width: 50px;
  height: 50px;
  margin-right: 7px;
  background-size: 100% 100%;
}

div#lhnHelpOutCenter div.lhnWindow-body {
  padding: 20px;
}

div#lhnHelpOutCenter div.lhnWindow-body * {
  font-size: 13px;
  line-height: 16px;
  font-family: 'Roboto', 'Arial', sans-serif;
}

div#lhnHelpOutCenter h2.lhnSurveyHeader {
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 22px;
  margin: -10px 0 12px 0;
}

div#lhnHelpOutCenter div#hocContainer {
  padding: 0 24px;
  height: calc(100% - 60px);
}
#lhnHelpOutCenter div.lhnHocSection {
  height: calc(100% - 24px);
  padding: 20px 0;
}

#lhnHelpOutCenter div.lhnPrompt {
  width: calc(100% + 48px);
  left: -24px;
  height: calc(100% + 30px);
  top: 0;
  /*display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;*/
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat form {
  margin-top: 10px;
  margin-bottom: 10px;
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnFields div.lhnField {
  margin-bottom: 10px;
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnFields div.lhnField label {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 3px;
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnFields div.lhnField div.lhnRadioGroup label {
  border: 2px solid #00589d;
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnFields div.lhnField div.lhnRadioGroup label span {
  font-family: 'Montserrat', sans-serif;
  padding: 2px;
  font-size: 12px;
  font-weight: 400;
  color: #00589d;
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnFields div.lhnField div.lhnRadioGroup label input:checked + span {
  background-color: #00589d;
  color: #fff;
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnFields div.lhnField div.lhnRadioGroup div.lhnRadioPoor, div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnFields div.lhnField div.lhnRadioGroup div.lhnRadioOutstanding {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 11px;
  bottom: 1px;
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnFields div.lhnField input, div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnFields div.lhnField textarea {
  background-color: #f6f6f6;
  border-radius: 0;
  border-top: 2px solid #f6f6f6;
  border-left: none;
  border-right: none;
  resize: none;
  font-size: 13px;
  font-family: 'Roboto', 'Arial', sans-serif;
  padding: 12px;
  color: #404040;

  -webkit-transition: border-top 0.2s ease;
  -moz-transition: border-top 0.2s ease;
  -o-transition: border-top 0.2s ease;
  transition: border-top 0.2s ease;
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnFields div.lhnField input {
  height: 40px;
  padding: 0 12px;
  margin-bottom: 0;
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnFields div.lhnField input:focus, div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnFields div.lhnField textarea:focus {
  border-top: 2px solid #00589d;
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat button.lhnSubmit {
  border-radius: 0;
  color: #fff;
  background-color: #00589d;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  height: 40px;
  margin-top: 5px;
  letter-spacing: 0;
  text-shadow: none;
  line-height: 14px;
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat button.lhnSubmit:hover, div#lhnHelpOutCenter div#hocContainer div#hocSyschat button.lhnSubmit[disabled] {
  background-color: #636363;
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnSystemMessage div.lhnWindow-message, div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnOperatorMessage div.lhnWindow-message, div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnCustomerMessage div.lhnWindow-message {
  font-size: 13px;
  line-height: 16px;
}

#lhnHelpOutCenter div.lhnChat {
  bottom: 20px;
  max-height: calc(100% - 20px);
}
#lhnHelpOutCenter #hocSyschat.lhnTextboxActive div.lhnChat {
  bottom: 20px;
}

#lhnHelpOutCenter div.jumplogic div.lhnWindow-message {
  border-color: #00589d;
}
#lhnHelpOutCenter div.jumplogic.lhnOperatorMessage .lhnOptions {
  background: #00589d;
}
#lhnHelpOutCenter div.jumplogic .lhnOptions .lhnOption {
  background: #0c2340;
  padding: 8px;
  margin: 6px;
  color: #fff;
  border: 0 none;
  font-size: 0;
}
#lhnHelpOutCenter div.jumplogic .lhnOptions .lhnOption:after {
  content: 'No Questions';
  font-size: 13px;
}
#lhnHelpOutCenter div.jumplogic .lhnOptions .lhnOption:first-child:after {
  content: 'Chat Now';
}
#lhnHelpOutCenter div.jumplogic .lhnFieldInput button.lhnShow {
  bottom: 26px;
  right: 14px;
}
#lhnHelpOutCenter div.jumplogic input.lhnInput, #lhnHelpOutCenter div.jumplogic textarea.lhnInput {
  width: calc(100% - 20px);
  margin-left: 10px;
  margin-right: 10px;
}
#lhnHelpOutCenter div.jumplogic textarea.lhnInput {
  line-height: 1.8;
  padding-top: 8px;
}

#lhnHelpOutCenter div.lhnOperatorMessage div.lhnWindow-message {
  background-color: #00589d;
  color: #fff;
}
#lhnHelpOutCenter div.lhnOperatorMessage div.lhnWindow-message:after {
  border-color: transparent transparent #00589d transparent;
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnCustomerMessage div.lhnWindow-message {
  background-color: #eee;
  color: #666;
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnCustomerMessage div.lhnWindow-message::after {
  border-color: transparent transparent transparent #eee;
}

div#lhnHelpOutCenter div.conversationForm {
  color: #666;
  font-size: 13px;
  line-height: 16px;
}

div#lhnHelpOutCenter div.lhnWindow-chat_input {
  width: calc(100% + 48px);
  left: -24px;
  height: auto;
  background: #aaa;
}

div#lhnHelpOutCenter div.lhnWindow-chat_input textarea {
  background-color: #f6f6f6;
  border-radius: 0;
  border-top: 2px solid #f6f6f6;
  border-left: none;
  border-right: none;
  resize: none;
  font-size: 13px;
  font-family: 'Roboto', 'Arial', sans-serif;
  padding: 10px 12px;
  color: #404040;
  box-shadow: none;
  width: calc(100% - 20px);
  margin-left: 10px;

  -webkit-transition: border-top 0.2s ease;
  -moz-transition: border-top 0.2s ease;
  -o-transition: border-top 0.2s ease;
  transition: border-top 0.2s ease;
}

div#lhnHelpOutCenter div.lhnWindow-chat_input textarea:focus {
  border-top: 2px solid #00589d;
}

div#lhnHelpOutCenter div.lhnInput-chat_input-buttons {
  height: 40px;
  width: 80px;
  margin-right: 12px !important;
}
#lhnHelpOutCenter div.lhnChatActionsMenu {
  float: right;
  text-align: left;
}
#lhnHelpOutCenter div.lhnChatActions {
  left: auto;
  right: 6px;
}
#lhnHelpOutCenter div.lhnWindow-chat_input div.lhnInput-chat_input-buttons {
  display: none;
}

div#lhnHelpOutCenter div.lhnInput-chat_input-buttons button.lhnShow {
  height: 100%;
  width: 100%;
  border-radius: 0;
  color: #fff;
  background-color: #00589d;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  margin-top: 5px;
  letter-spacing: 0;
  text-shadow: none;
  line-height: 14px;
  margin-top: 0;

  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

div#lhnHelpOutCenter div.lhnInput-chat_input-buttons button.lhnShow:hover {
  background-color: #636363;
}

div#lhnHelpOutCenter div.lhnWindow-chat_input form div.lhnChatActions {
  margin-top: -6px;
  background-color: transparent;
}

div#lhnHelpOutCenter div.lhnWindow-chat_input form div.lhnChatActions::after {
  display: none;
}

div#lhnHelpOutCenter div.lhnWindow-chat_input form div.lhnChatActions a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  padding: 10px 16px;
  text-align: center;
  background-image: none;
  color: #fff;
  background-color: #00589d;
  margin-bottom: 4px;
  border: none;

  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

div#lhnHelpOutCenter div.lhnWindow-chat_input form div.lhnChatActions a:hover {
  background-color: #636363;
}

#lhnHelpOutCenter #hocSyschat.lhnTextboxActive div.lhnWindow-chat_input, #lhnHelpOutCenter #hocSyschat.lhnTextboxActive div.lhnWindow-chat_input div.lhnInput-chat_input-textareasection, #lhnHelpOutCenter #hocSyschat.lhnTextboxActive div.lhnWindow-chat_input>form {
  height: 60px;
}
#lhnHelpOutCenter #hocSyschat.lhnTextboxActive div.lhnWindow-chat_input textarea {
  height: 40px;
}

div#lhnHelpOutCenter div#lhnWindowFooter {
  display: none !important;
}

/*div#lhnHocButton.lhnslide {
  opacity: 0;
  height: 0;
  width: 0;
  bottom: 4px;
}*/

div#lhnHocButton.lhnslide {
  opacity: 1;
  height: 82.5px;
  width: 214.5px;
  bottom: 4px;
}

div#lhnHocButton.lhnslide.lhnVisible {
  opacity: 1;
  height: 82.5px;
  width: 214.5px;
}

div#lhnHocButton.lhnslide .lhnHocChatBtnCont {
  height: 81px;
  width: 214px;
  animation-duration: 0s;

  background-color: transparent;
  background-image: url(../../assets/img/lhn/live-chat-logo.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  box-sizing: border-box;
}

div#lhnHocButton.lhnslide .lhnHocChatBtnCont .lhnHocChatBtn {
  display: none;
}

div#lhnHocButton .lhnHocChatBtnCont .lhnHocChatBtn {
  background-color: transparent;
}

div#lhnHocButton .lhnHocChatBtnCont .lhnHocChatBtn div.lhnHocChatBubbleCont div.lhnHocChatBubble {
  height: 20px;
  width: 28px;
}

div#lhnHocButton .lhnHocChatBtnCont .lhnHocChatBtn div.lhnHocChatBubbleCont div.lhnHocChatBubble::before {
  top: 19px;
  left: 7px;
}

div#lhnHocInvite {
  opacity: 0;
  height: 0;
  width: 0;
  box-shadow: 0 0 5rem rgba(0,0,0,0.1);
}

div#lhnHocInvite.lhnVisible {
  opacity: 1;
  height: auto;
  width: auto;
}

div#lhnHocInvite div.lhnHocInviteCont {
  animation-duration: 0s;
  background-color: #fff;
  border-radius: 0;
}

div#lhnHocInvite div.lhnHocInviteCont div#lhnOpMsg {
  font-family: 'Roboto', 'Arial', sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: #666;
  letter-spacing: 0;
}

div#lhnHocInvite div.lhnHocInviteCont div.lhnHocInviteButtons div.lhnHocInviteButton {
  border-radius: 0;
  color: #fff;
  background-color: #00589d;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  width: 42%;
  height: 38px;
  margin: 16px 8px 0 8px;
  letter-spacing: 0;
  text-shadow: none;
  text-transform: uppercase;
  line-height: 14px;
  padding: 11px;

  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

div#lhnHocInvite div.lhnHocInviteCont div.lhnHocInviteButtons div.lhnHocInviteButton:hover {
  background-color: #636363;
}

@media (max-width: 639px) {
  div#lhnHocButton.lhnslide,
  div#lhnHocButton.lhnslide.lhnVisible {
    height: 46px;
    width: 116px;
  }

  div#lhnHocButton.lhnslide .lhnHocChatBtnCont {
    background-size: contain;
    background-position: center;
    height: 46px;
    width: 116px;
  }
}

.lhnPreChatForm .preChatHeader {
  display: flex;
  align-items: center;
}
.lhnPreChatForm .preChatHeader .person {
  flex: 0 0 auto;
  text-align: center;
  margin-right: 1rem;
}
.lhnPreChatForm .preChatHeader .person img {
  width: 87px;
  height: 87px;
  display: block;
  margin-bottom: 6px;
}
.lhnPreChatForm .preChatHeader .message {
  background: #00589d;
  padding: 0.5rem;
  color: #fff !important;
  position: relative;
  margin-left: 24px;
  border-radius: 4px 4px 4px 0;
}
.lhnPreChatForm .preChatHeader .message:before {
  content: '';
  display: block;
  position: absolute;
  right: 100%;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 12px;
  border-color: transparent #00589d #00589d transparent;
}
.lhnPreChatForm form .lhnFields {
  margin-top: 1.5rem;
}
.lhnPreChatForm form .lhnFields.postFields .helper {
  font-size: 0.8em !important;
  font-style: italic;
}

.prechat_field_name {
  display: inline-block;
  width: calc(50% - 8px);
  margin-right: 8px;
}
.prechat_field_zipcode {
  display: inline-block;
  width: calc(50% - 8px);
  margin-left: 8px;
}

/* ProStep live chat theme. Keep the marker synchronized with the CI contract. */
div#lhnHelpOutCenter,
div#lhnHocInvite {
  --prostep-chat-theme: prostep;
  --prostep-chat-navy: var(--wp--preset--color--accent-4, #0c2340);
  --prostep-chat-blue: var(--wp--preset--color--accent, #00589d);
  --prostep-chat-red: var(--wp--preset--color--accent-3, #c8102e);
  --prostep-chat-amber: var(--wp--preset--color--accent-2, #ffb81c);
  --prostep-chat-hover: var(--wp--preset--color--contrast-2, #636363);
  --prostep-chat-disabled: var(--wp--preset--color--accent-5, #b5bdbc);
  --prostep-chat-text: var(--wp--preset--color--contrast, #111111);
}

div#lhnHocButton .lhnHocChatBtnCont:focus-visible {
  border-radius: 4px;
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--wp--preset--color--accent-4, #0c2340);
}

div#lhnHelpOutCenter div#lhnHocHeader {
  background-color: var(--prostep-chat-navy);
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnFields div.lhnField div.lhnRadioGroup label {
  border-color: var(--prostep-chat-blue);
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnFields div.lhnField div.lhnRadioGroup label span {
  color: var(--prostep-chat-blue);
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnFields div.lhnField div.lhnRadioGroup label input:checked + span {
  background-color: var(--prostep-chat-blue);
  color: #fff;
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnFields div.lhnField input:focus,
div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnFields div.lhnField textarea:focus,
div#lhnHelpOutCenter div.lhnWindow-chat_input textarea:focus {
  border-top-color: var(--prostep-chat-blue);
}

#lhnHelpOutCenter div.jumplogic div.lhnWindow-message {
  border-color: var(--prostep-chat-blue);
}

#lhnHelpOutCenter div.jumplogic.lhnOperatorMessage .lhnOptions {
  background: var(--prostep-chat-blue);
}

#lhnHelpOutCenter div.jumplogic .lhnOptions .lhnOption {
  background: var(--prostep-chat-navy);
}

#lhnHelpOutCenter div.jumplogic .lhnOptions .lhnOption:hover {
  background: var(--prostep-chat-hover);
}

#lhnHelpOutCenter div.jumplogic .lhnOptions .lhnOption:focus-visible {
  background: var(--prostep-chat-navy);
  outline: 3px solid var(--prostep-chat-amber);
  outline-offset: 2px;
}

#lhnHelpOutCenter div.lhnOperatorMessage div.lhnWindow-message {
  background-color: var(--prostep-chat-blue);
}

#lhnHelpOutCenter div.lhnOperatorMessage div.lhnWindow-message:after {
  border-color: transparent transparent var(--prostep-chat-blue) transparent;
}

#lhnHelpOutCenter div.lhnOperatorMessage div.lhnWindow-message a {
  color: #fff;
  text-decoration: underline;
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnCustomerMessage div.lhnWindow-message a {
  color: var(--prostep-chat-blue);
  text-decoration: underline;
}

.lhnPreChatForm .preChatHeader .message {
  background: var(--prostep-chat-navy);
}

.lhnPreChatForm .preChatHeader .message:before {
  border-color: transparent var(--prostep-chat-navy) var(--prostep-chat-navy) transparent;
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat button.lhnSubmit,
div#lhnHelpOutCenter button.lhnFormButton,
#lhnHelpOutCenter div.jumplogic .lhnFieldInput button.lhnShow,
div#lhnHelpOutCenter div.lhnInput-chat_input-buttons button.lhnShow,
div#lhnHelpOutCenter div.lhnInput-chat_input-buttons button.lhnSendButton,
div#lhnHelpOutCenter div.lhnInput-chat_input-buttons button.lhnShowButton,
div#lhnHelpOutCenter div.lhnWindow-chat_input form div.lhnChatActions a,
div#lhnHelpOutCenter div.lhnWindow-chat_input form div.lhnChatActions button,
div#lhnHocInvite div.lhnHocInviteCont div.lhnHocInviteButtons div.lhnHocInviteButton {
  background-color: var(--prostep-chat-blue);
  border-radius: 4px;
  color: #fff;
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat button.lhnSubmit:hover,
div#lhnHelpOutCenter button.lhnFormButton:hover,
#lhnHelpOutCenter div.jumplogic .lhnFieldInput button.lhnShow:hover,
div#lhnHelpOutCenter div.lhnInput-chat_input-buttons button.lhnShow:hover,
div#lhnHelpOutCenter div.lhnInput-chat_input-buttons button.lhnSendButton:hover,
div#lhnHelpOutCenter div.lhnInput-chat_input-buttons button.lhnShowButton:hover,
div#lhnHelpOutCenter div.lhnWindow-chat_input form div.lhnChatActions a:hover,
div#lhnHelpOutCenter div.lhnWindow-chat_input form div.lhnChatActions button:hover,
div#lhnHocInvite div.lhnHocInviteCont div.lhnHocInviteButtons div.lhnHocInviteButton:hover {
  background-color: var(--prostep-chat-hover);
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat button.lhnSubmit[disabled],
div#lhnHelpOutCenter button.lhnFormButton[disabled],
#lhnHelpOutCenter div.jumplogic .lhnFieldInput button.lhnShow[disabled],
div#lhnHelpOutCenter div.lhnInput-chat_input-buttons button.lhnShow[disabled],
div#lhnHelpOutCenter div.lhnInput-chat_input-buttons button.lhnSendButton[disabled],
div#lhnHelpOutCenter div.lhnInput-chat_input-buttons button.lhnShowButton[disabled],
div#lhnHelpOutCenter div.lhnWindow-chat_input form div.lhnChatActions button[disabled] {
  background-color: var(--prostep-chat-disabled);
  color: var(--prostep-chat-text);
  cursor: not-allowed;
  opacity: 1;
}

div#lhnHelpOutCenter div#hocContainer div#hocSyschat button.lhnSubmit:focus-visible,
div#lhnHelpOutCenter button.lhnFormButton:focus-visible,
#lhnHelpOutCenter div.jumplogic .lhnFieldInput button.lhnShow:focus-visible,
div#lhnHelpOutCenter div.lhnInput-chat_input-buttons button.lhnShow:focus-visible,
div#lhnHelpOutCenter div.lhnInput-chat_input-buttons button.lhnSendButton:focus-visible,
div#lhnHelpOutCenter div.lhnInput-chat_input-buttons button.lhnShowButton:focus-visible,
div#lhnHelpOutCenter div.lhnWindow-chat_input form div.lhnChatActions a:focus-visible,
div#lhnHelpOutCenter div.lhnWindow-chat_input form div.lhnChatActions button:focus-visible,
div#lhnHocInvite div.lhnHocInviteCont div.lhnHocInviteButtons div.lhnHocInviteButton:focus-visible,
div#lhnHelpOutCenter div#hocContainer div#hocSyschat div.lhnFields div.lhnField div.lhnRadioGroup label input:focus-visible + span {
  outline: 3px solid var(--prostep-chat-navy);
  outline-offset: 2px;
}

div#lhnHelpOutCenter div#hocContainer .chat-quality-disclaimer,
div#lhnHelpOutCenter div#hocContainer .prechat-recording-note {
  margin-top: 0.5rem;
  font-size: 11px;
  line-height: 1.4;
  color: var(--wp--preset--color--contrast-2, #636363);
  text-align: left;
}

/* Source: utilities/products.css */

.sixaxis-products {
  --sixaxis-products-blue: #00589d;
  --sixaxis-products-blue-dark: #003f71;
  --sixaxis-products-border: #aeb4b9;
  --sixaxis-products-copy: #3d3d3d;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block: 40px;
}

.sixaxis-products.alignwide,
.sixaxis-products.alignfull {
  width: auto;
}

.sixaxis-products__product {
  background: #fff;
  border: 1px solid var(--sixaxis-products-border);
  box-shadow: 0 4px 32px rgb(0 0 0 / 10%);
  color: var(--sixaxis-products-copy);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 4px;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

a.sixaxis-products__product:hover {
  border-color: var(--sixaxis-products-blue);
  box-shadow: 0 8px 36px rgb(0 88 157 / 18%);
  color: var(--sixaxis-products-copy);
  transform: translateY(-2px);
}

a.sixaxis-products__product:focus-visible {
  outline: 3px solid var(--sixaxis-products-blue);
  outline-offset: 3px;
}

.sixaxis-products__feature {
  aspect-ratio: 83 / 65;
  background: #f2f4f5;
  overflow: hidden;
}

.sixaxis-products__feature img,
.sixaxis-products__feature-placeholder {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.sixaxis-products__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 24px 16px;
}

.sixaxis-products__content::after {
  background-color: var(--sixaxis-products-blue);
  background-image: url("../../assets/img/icons/product.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
  border-radius: 999px;
  content: "";
  display: block;
  height: 36px;
  margin: 20px auto 0;
  transition: background-color 160ms ease, transform 160ms ease;
  width: 36px;
}

a.sixaxis-products__product:hover .sixaxis-products__content::after {
  background-color: var(--sixaxis-products-blue-dark);
  transform: translateX(2px);
}

.sixaxis-products__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sixaxis-products__logo {
  background-color: var(--sixaxis-products-blue);
  margin: 0 auto 12px;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.sixaxis-products__logo img {
  display: block;
  margin: 0;
  max-height: 42px;
  max-width: 150px;
  opacity: 0;
  width: 100%;
}

.sixaxis-products__title,
.sixaxis-products__tagline {
  margin: 0;
  text-align: center;
}

.sixaxis-products__title {
  color: var(--sixaxis-products-copy);
  font-family: Montserrat, sans-serif;
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
  font-weight: 650;
  line-height: 1.2;
}

.sixaxis-products__tagline {
  color: #50575e;
  font-size: 1rem;
  line-height: 1.3;
}

.sixaxis-products--small {
  gap: 16px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.sixaxis-products--small .sixaxis-products__content {
  padding: 12px 12px 8px;
}

.sixaxis-products--small .sixaxis-products__content::after,
.sixaxis-products--small .sixaxis-products__logo,
.sixaxis-products--small .sixaxis-products__tagline {
  display: none;
}

.sixaxis-products--small .sixaxis-products__title {
  font-size: 1rem;
  font-weight: 500;
}

@media (max-width: 1200px) {
  .sixaxis-products {
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sixaxis-products--small {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .sixaxis-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sixaxis-products--small {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .sixaxis-products,
  .sixaxis-products--small {
    gap: 16px;
    grid-template-columns: 1fr;
  }

  .sixaxis-products__product {
    margin-inline: auto;
    max-width: 360px;
    width: 100%;
  }
}