.container {
    width: unset;
}

#ccrrc-contact-us-form {
    @font-face {
        font-family: 'Graphik Regular';
        src: url('clientlib-forms/font/Graphik-Regular.otf') format('otf');
        font-style: normal;
    }

    #guideContainerForm {
        margin-top: 24px;
        font-size: 16px;
        font-family: 'Graphik Regular';
        color: black;
        line-height: 150%;
        font-weight: 400;

        .step.mobileLayout {
            display: none;
        }

        .validation-failure {
            background-color: transparent;
            border: none;
        }

        .fd-row.guideGridFluidLayout2Container {
            &::before {
                display: none;
            }
        }

        #guideContainer-rootPanel-panel-panel___guide-item-container,
        #guideContainer-rootPanel-panel-panel___guide-item-container * {
            box-sizing: border-box;
        }

        #guideContainer-rootPanel-panel-panel___guide-item-container {
            overflow: visible !important;

            .fd-row.guideGridFluidLayout2Container {
                display: flex;
                flex-wrap: wrap;
                gap: 24px;

                > div {
                    flex: 0 0 calc(100%);
                    @media (min-width: 855px) {
                        flex: 0 0 calc(50% - 12px);
                    }
                }
            }
        }

        #guideContainer-rootPanel-panel-panel-guidetextbox_63391189___guide-item {
            flex: 0 0 calc(100%) !important;
            max-width: 100%;
            height: 168px;
        }

        #guideContainer-rootPanel-panel-guidecaptcha___guide-item {
            display: none;
        }

        .guideFieldNode.guideTextBox {
            margin: 0;
            padding: 0;

            &.validation-failure {
                background-color: transparent;
                border: none;

                input {
                    outline: 2px solid #d80000;
                    outline-offset: -2px;
                }
            }

            &.validation-success {
                background-color: transparent;
                border: none;
            }
        }

        .guideFieldError {
            font-size: 14px;
            font-family: 'Graphik', sans-serif;
            line-height: 150%;
            font-weight: 400;
            color: #d80000;
            margin-bottom: 0;
        }

        label {
            font-size: 16px;
            font-family: 'Graphik', sans-serif;
            color: black;
            line-height: 150%;
            font-weight: 400;
            margin-bottom: 8px;
        }

        textarea {
            height: 168px !important;
            resize: none;
        }

        .button-default.button-medium.submit {
            color: white;
            cursor: pointer;
            background: black;
            border: 0.166667rem solid transparent;
            border-radius: 8.33333rem;
            justify-content: center;
            align-items: center;
            gap: 0.333333rem;
            max-width: 27.1667rem;
            min-height: 3.66667rem;
            margin: 32px 0 24px 0;
            padding: 0.666667rem 1.33333rem;
            font-family: 'Graphik', sans-serif;
            font-size: 1.33333rem;
            font-weight: 600;
            line-height: 2rem;
            transition: all 0.3s;
            display: inline-flex;
            position: relative;

            &:hover {
                background-color: #545757;
                border-color: #545757;
            }

            &:active {
                background-color: #818387;
                border-color: transparent;
            }

            span {
                font-size: 16px;
                font-family: 'Graphik', sans-serif;
                color: white;
                line-height: 150%;
                font-weight: 400;
            }
        }

        .iconButton-label {
            &::after {
                content: '';
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12H19M19 12L13 18M19 12L13 6' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                display: inline-block;
                width: 24px;
                height: 18px;
                transition: transform 0.3s ease;
            }

            &:hover {
                &::after {
                    transform: translateX(4px);
                }
            }
        }

        input,
        textarea {
            font-family: 'Graphik', sans-serif;
            font-size: 16px;
            color: black;
            max-width: 100%;
            line-height: 150%;
            font-weight: 400;
            background: #ffffff;
            border: 1px solid black;
            border-radius: 0;
            padding: 16px 24px;
            margin-bottom: 8px;

            &:focus {
                outline: 2px solid black;
                box-shadow: 0 0 10px #00000059;
                outline-offset: -2px;
            }

            &:hover {
                background: #ededed;
            }

            &:active {
                background: #dcdcdc;
            }
        }

        input {
            height: 56px;
        }

        textarea {
            height: 168px !important;
            resize: none;
        }
    }
}