.monstro-support-contact {
    background-color: var(--signup-service-bg);
    background: linear-gradient(
        180deg,
        var(--signup-service-bg) 0%,
        var(--signup-service-bg-gradient) 100%
    );
    max-width: 50rem !important;
            
    flex-direction: column;
    position: relative;
    width: 100%;
    max-width: 30rem;
    min-height: 40rem;
    height: fit-content;
    border-radius: 15px;

    .support-contact-header {
        display: flex;
        align-items: center;
        margin: 1rem 0;
        padding: 2.2rem;
        padding-bottom: 0;

        .text {
            position: relative;
            width: 100%;
            z-index: 2;
        }

        .text {
            font-size: 36px;
            font-family: Poppins-Bold;
            color: var(--signup-service-head-title);
            margin: 0;
        }
    }

    .support-contact-form {
        display: flex;
        position: relative;
        width: 100% !important;

        .form-container {
            display: flex;
            flex-wrap: wrap;
            position: relative;
            width: 100%;
            gap: 1rem;
            padding: 0 2.2rem 2.2rem;
            
            .verify{
                position: absolute; 
                height: 0; 
                visibility:hidden;
            }

            .input-container {
                display: flex;
                flex-direction: column;
                position: relative;
                flex-grow: 1;

                .label {
                    display: flex;
                    align-items: center;                    

                    label {
                        position: relative;
                        font-size: 1.5rem;
                        display: flex;
                        align-items: center;
                        color: var(--signup-text-white);
                        font-family: Poppins-Bold;                        
                    }
                }                

                .input-field {
                    display: flex;
                    align-items: center;
                    flex-grow: 1;

                    .input-message{
                        flex-grow: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        margin-left: 1rem;
                    }
                    .input-message * {
                        margin-bottom: 0;
                        font-family: Poppins-Regular;
                        color: var(--signup-service-text-white);
                    }
                    .form-control{
                        min-height: 3rem;
                        max-height: 8rem;
                    }
                }

                .input-field:has(#id_agreement){
                    p{
                        font-size: 7pt;
                        a{
                            margin-right: 0;
                        }
                    }                    
                }

                .help-text {
                    font-family: Poppins-Regular;
                    color: #8c8c8c;
                    font-size: 1rem;
                }
            }
            
            .submit-button {
                display: flex;
                justify-content: left;
                align-items: center;
                margin-top: 2rem;
                position: relative;
                width: 100%;         

                .btn{
                    font-size: 24px;
                }

                .btn-outline-primary {
                    font-family: Poppins-Bold; 
                    padding: 0.7rem 3.2rem;
                    color: var(--signup-service-bg);
                    border: 6px solid var(--signup-service-submit-btn);
                    border-radius: 50px;                    
                    background-color: var(--signup-service-submit-btn) !important;

                    &:hover {
                        border-color: var(--signup-service-text) !important;
                        background-color: var(--signup-service-text) !important;
                        color: var(--signup-text-white) !important;
                    }
                }
            }
        }

        .required {
            font-family: Poppins-Bold;
            color: var(--signup-label-required);
            font-size: 20pt;
            padding-left: 0.5rem;
        }
        .file_upload_limit{
            color: var(--signup-text-white);
            font-size: 12pt;
            margin-left: 0.5rem;
        }
        .info {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 8pt;
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 50%;
            margin: 0.5rem;
            flex-shrink: 0;
            border: 2px solid var(--news-service-button-hover);
            color: var(--news-service-button-hover);
        }
                
        .popover-body, .popover {
            max-width: 40rem !important;
        }

        .popover img {
            max-width: 100%;
            height: unset;
        }

        input {
            width: 100%;
            height: 3rem;
            border-radius: 5px;
            padding: 0.7rem;
            margin-top: 0.5rem;  
            box-sizing: border-box;
            border: 3px solid #ccc;
            outline: none;
        }

        .input-field .input-message{
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-left: 1rem;
        }

        .input-field select{
            font-family: inherit;
            -moz-appearance:none; 
            -webkit-appearance:none; 
            appearance:none;
            background-image: url("/static/images/assets_monstro_website_arrow.0efa6d0ebb44.png") ;
            background-repeat: no-repeat;
            background-position-x: 98.6%;
            background-position-y: 15px;
        }

        .input-field:has(input[type=checkbox]){
            margin-top: 8px;
        }

        input[type=checkbox]{
            width: 2rem;
            height: 1.5rem !important;
            margin-top: 0;
            flex-shrink: 0;
        }

        input:focus {
            border: 3px solid var(--signup-input-focus)!important;
        }
        
        .subscription-form {
            .recaptcha-container{
                display: flex;
                justify-content: flex-start;
                position: relative;
                overflow: hidden;
                width: 100%;
            }
        }
    }
}

.d-none {
    display: none;
}

@media screen and (max-width: 1080px) {
    .signup-form {
        .signup-header .description {
            width: 100%;
        }

        .subscription-form {
            width: 100%;

            .name {
                flex-direction: column;

                .input-container {
                    width: 100%;
                    margin-bottom: 1rem;
                }
            }
        }
    }
}

@media screen and (max-width: 487px) {
    .support-contact-header .text{
        font-size: 8vw !important;
    }

    .required,
    .input-container label {
        font-size: 5vw !important;
    }

    .info{
        font-size: 4px !important;
        height: 0.8rem !important;
        width: 0.8rem !important;
    }

    .form-container{
        padding: 0 1rem 1rem !important;
    }

    .signup-form {
        .subscription-form {
            width: 100%;

            .form-container {
                width: 100%;
            }

            .input-container[style] {
                position: relative;
                width: 100% !important;
            }
        }

        .submit-button {
            justify-content: center !important;

            .btn {
                width: 100%;
                text-align: center;
                padding: 0.7rem 0;
                font-size: 5vw !important;
            }
        }
    }
}