body {
   font-family: 'Roboto', sans-serif;
}
/*padding styles */
.padTop-40 {
padding-top:40px; 
}

.p-1-r {
padding-right:45px;
}
.p-2-r {
padding-right: 90px;
}


ul {
list-style:none;
}
li {
display:inline-block;
}

.main {
width: 1184px;
padding: 46px 58px 98px;
margin: auto;
}

h1 {
color:#0A2876;
font-size:48px;
line-height: 58px;
font-weight:600;
padding-bottom: 40px;
}

h4{
padding-bottom:24px; 
color:#1D1D1D;
font-size: 28px;
line-height: 34px; 
}

p {
color:#1D1D1D;
font-size: 20px;
line-height: 24px; 
font-weight:400;
}
ol, ul {
    padding-left: 0rem;
}

.form-group {
padding-bottom:40px;
}

.small-text {
font-size:16px;
line-height: 20px;
text-align:center;
margin-left: -22px;
}


form {
padding-top: 50px;

}

.ThankYouMessage{
font-family: 'Roboto', sans-serif;
font-size:36px;
font-weight:600;
line-height:40px;
color:#0A2876;
text-align:center;
margin-top:20px;

}

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 20px;
  line-height: 24px; 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
color:#1D1D1D;
}

/* Hide the browser's default radio button */
.container input[type="radio"], .container input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
#email_content, #radio_home {
  visibility: visible;
}



/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 4px;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #fff;
  border: 1px solid #1D1D1D;
  border-radius: 50%;
}

/* Create a custom checkbox */
.checkbox {
  position: absolute;
  top: 4px;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #fff;
  border: 1px solid #1D1D1D;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkbox {
  background-color: #0A2876;
}
/*  */
.container:focus input ~ .checkbox {
  background-color: #0A2876;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkbox {
  background-color: #0A2876;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkbox:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkbox:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkbox:after {
 left: 4px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* On mouse-over, add a white background color */
.container:hover input ~ .checkmark {
  background-color: #fff;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #0A2876;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
  top: 9px;
 left: 9px;
 width: 8px;
 height: 8px;
 border-radius: 50%;
}



input[type=text],input[type=number] {
  width: 257px;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #1D1D1D;
  border-radius: 4px;
  box-sizing: border-box;
}

#additional_comments {
  width: 523px;
  height:121px;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #1D1D1D;
  border-radius: 0px;
  box-sizing: border-box;
}

label {
font-size: 20px;
line-height: 24px; 
}

/* >>>>>>>>>>>>>>>>>>>>> style for the stars >>>>>>>>>>>>>>>>>>>>>> */
.engagement_section {
padding:0px 30px;
}
.survey_stars_section {
width: 373px;
padding-bottom: 32px;
}
.survey_stars_section .row {
    margin-left: -24px;
}
.survey_stars_intro p{
font-size:18px;
line-height: 22px;
}

.stars .container {
padding-left:15px;
}

 /*New Stars css */
      .star-cb-group {
        /* remove inline-block whitespace 
        font-size: 0;*/
        /* flip the order so we can use the + and ~ combinators */
        unicode-bidi: bidi-override;
        direction: rtl;
        /* the hidden clearer */
      }
      .star-cb-group * {
        font-size: 40px;
        line-height:32px;
      }
      .star-cb-group > input {
        display: none;
      }
      .star-cb-group > input + label {
        display: inline-block;
        overflow: hidden;
        margin-right:30px;
        white-space: nowrap;
        cursor: pointer;
      }
      .star-cb-group label:first-child {
        margin-right:0px;
      }
      .star-cb-group > input + label,.star-cb-group > input + label:before {
        display: inline-block;
        /* text-indent: -9999px;*/
        width:40px;
        height:40px;
        background-image:url(https://image.email.rocklandtrust.com/lib/fe9413727c66057874/m/3/700e3a46-0e7a-4fc6-9e4a-abc2e737f605.png);
        background-size:contain;
      }
      .star-cb-group > input:checked ~ label:before, .star-cb-group > input + label:hover ~ label:before, .star-cb-group > input + label:hover:before {
        content: "";
        text-shadow: 0 0 1px #333;
        display: inline-block;
        width:40px;
        height:40px;
        background-image:url(https://image.email.rocklandtrust.com/lib/fe9413727c66057874/m/3/5a0f4695-ad84-4577-bde1-f978632126c4.png);
        background-size:contain;
      }
      .star-cb-group > .star-cb-clear + label {
        text-indent: -9999px;
        width: .5em;
        margin-left: -.5em;
        display:none;
      }
      .star-cb-group > .star-cb-clear + label:before {
        width: .5em;
      }
      .star-cb-group:hover > input + label:before {
        background-image:url(https://image.email.rocklandtrust.com/lib/fe9413727c66057874/m/3/700e3a46-0e7a-4fc6-9e4a-abc2e737f605.png);
        background-size:contain;
      }
      .star-cb-group:hover > input + label:hover ~ label:before, .star-cb-group:hover > input + label:hover:before {
        width:40px;
        height:40px;
        background-image:url(https://image.email.rocklandtrust.com/lib/fe9413727c66057874/m/3/5a0f4695-ad84-4577-bde1-f978632126c4.png);
        background-size:contain;
      }
      // extra styles
      :root {
        font-size: 2em;
        font-family: Helvetica, arial, sans-serif;
      }
      body {
        color: $unchecked-color;
      }
      fieldset {
        border: 0;
        width: 383px;
        border-radius: 1px;
        padding: 1em 1.5em 0.9em;
        /* margin: 1em auto; */
      }
      #log {
        margin: 1em auto;
        width: 5em;
        text-align: center;
        background: transparent;
      }
.btn {
background-color: #0A2876;
border: 1px solid #0A2876;
border-radius: 5px;
color: #fff;
height: 48px; 
padding: 0px 30px !important; 

}

.btn:hover {
background-color: #fff;
border: 1px solid #0A2876;
border-radius: 5px;
color: #0A2876;

}

.star_section_left_indent
{
margin-left:20px;
}


/* >>>>>>>>>>>>>>>>>>> Mobile Media Queries >>>>>>>>>>>>>>>>>>>>> */
@media (max-width: 575.98px) {

h1 {
font-size:24px;
line-height: 29px;
padding-bottom: 16px; 
}

.survey_stars_intro p, p{
font-size:16px;
line-height:20px;
}
.survey_stars {
margin-right: 10px;
width:40px;
height:40px;
}
.survey_stars_section {
width:293px;
}
.main {
width: 100%;
padding: 12px 25px 21px;
margin: auto;
}
.photo {
width: 100%;
}
.p-1-r {
padding-right:0px;
}
.p-2-r {
padding-right: 0px;
}

#additional_comments {
  width: 100%;
}
.engagement_section {
padding:0px 0px;
}
.container {
font-size: 16px;
line-height:20px; 
}

.btn {
padding: 0px 11px !important; 
} 
.survey_stars_section .row {
    margin-left: -10px;

}

.star_section_left_indent
{
margin-left:0px;
}


}