/* Form Logo */
.custom-mvc-form .form-logo{
    margin: 25px auto 25px auto;
    width: 350px;
    height: 75px;
    background-image: url('https://s23040.pcdn.co/wp-content/images/mvc-horizontal-slate.png');
    /* https://www.grandresidenceclub.com/common/grc/home/images/grand-residences-logo.png */
    /* https://s23040.pcdn.co/wp-content/images/mvc-horizontal-slate.png */
    background-repeat: no-repeat;
    background-size: 100%;
}

.custom-mvc-form #electionFormCheckDiv p::after {
    content: "By checking this box, I agree to receive by mail, email, phone, and/or text (the latter two at the number I provided with this consent) promotional materials and information about Marriott Vacation Club®, Sheraton® Vacation Club, and Westin® Vacation Club regardless of whether my number is registered on a do‑not‑call list, or I have previously unsubscribed from emails or requested not to receive mailings. Texts and calls may be sent via automated technology, and consent to receive them is not required to make a purchase. Messaging and data charges may apply.";
    display: table;
    clear: both;
}

.custom-mvc-form #submit-btn::after{
    content: "Submit Form";
    display: table;
    clear: both;
}

.custom-mvc-form .form-logo img{
    width: 100%;
}

/* Set Form Width */
.custom-mvc-form{
    max-width: 960px; /* Form width */
    background-color: #ffffff; /* Form background color */
}

/* Set Font Color */
.custom-mvc-form select,
.custom-mvc-form label,
.custom-mvc-form p{
    color: #696969;
}
   
/* Set margin for each form group */
.custom-mvc-form .form-group {
    margin-bottom: 10px;
}

.custom-mvc-form input, select {
    border: 1px solid #d1d1d1; /* Input border color */
}
  
.custom-mvc-form button {
    background-color: #009687; /* Button background color */
    color: #ffffff; /* Button text color */
}
  
.custom-mvc-form button:hover {
    background-color: #128275; /* Button hover color */
}

.custom-mvc-form .form-check-input{
    float: left;
    width: 15px;
}



/* Set-column Layout */
/*
    grid-template-columns: repeat(1, 1fr); = 1 Column
    grid-template-columns: repeat(2, 1fr); = 2 Column
    grid-template-columns: repeat(3, 1fr); = 3 Column
    grid-template-columns: repeat(4, 1fr); = 4 Column
*/
.custom-mvc-form .form-container.set-column-size{
    /* Form column amount */
    grid-template-columns: repeat(2, 1fr); 
}

/* Styles for all devices (default styles) */
/* Media query for small screens */
@media only screen and (max-width: 767px) {
    /* Styles for small screens */
    .custom-mvc-form .form-container.set-column-size{
        /* Form column amount */
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Media query for medium screens */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    /* Styles for medium screens */
    .custom-mvc-form .form-container.set-column-size{
        /* Form column amount */
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Media query for large screens */
@media only screen and (min-width: 1024px) {
    /* Styles for large screens */
    
}

.dn {display:none;}