/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* Form stylings begins here */

form {
  font-family: 'Muli' !important;
  background-color: #ffffff;
  border: none;
  padding-left: 45px;
  padding-bottom: 80px;
  padding-right: 45px;
  padding-top: 45px;
}

/* Width of the calender aka table */

.fn-date-picker .pika-lendar {
    float: left;
    /*width: 240px;*/width:100%;
    margin: 0px !important;
}

table {
    margin-bottom: 0rem !important;
    overflow-wrap: break-word;
}

/* Title of the calender */

.fn-date-picker .pika-title {
    position: relative;
    text-align: center;
    font-family: 'Muli' !important;
}

form .hs-richtext, form .hs-richtext p {
    font-size: 18px !important;
    margin: 0 0 1.4rem;
    padding-right: 45px;
    font-family: 'Muli' !important;
}
/*
form .hs-richtext, form .hs-richtext h3 {
    font-size: 45px !important;
    margin: 0 0 1.4rem;
    padding-right: 45px;
    font-family: 'Muli' !important;
}*/

/* This is the title of the form */
h3.form-title {
    background-color: #007d8a !important;
    color: #ffffff !important;
    font-size: 24px !important;
    padding: 45px;
    padding-top: 50px;
    padding-bottom: 50px;
    font-family: 'Muli' !important;
    font-weight: 200 !important;
}


/* This are the Labels of the form */

form label {
    color: #323232;
    display: block;
    font-size: 18px;
    padding-top: 0;
    margin-bottom: 0.35rem;
    text-align: left;
    width: auto;
    font-family: 'Muli' !important;
    font-weight: 300 !important;
    padding-right: 45px;
}

/* This is the placeholder text of the form */

form legend {
     color: #323232;
     font-size: 14px !important;
     font-family: 'Muli' !important;
     font-weight: 300 !important;
     padding-right: 45px;
}
/* This is the outline of the form texbox on focus */

input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=file]:focus, select:focus, textarea:focus {
    outline-color: 	#007d8a !important;
}
}
/* This is the color of the form texbox */

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=file], select, textarea {
    border-color: #007d8a;
    color: #323232;
}

/* This is the font styling for the content in the form texbox */

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=file], select, textarea {
    background-color: #FFF;
    border: 2px solid #D1D6DC;
    border-radius: 3px;
    color: #323232;
    display: inline-block;
    font-size: 18px;
    padding: 0.7rem;
    width: 100%;
    font-family: 'Muli' !important;
    font-weight: 200 !important;
}

/* Inputs - Checkbox/Radio */

form ul.inputs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

form ul.inputs-list li {
  margin: 0.3125rem 0;
}

form ul.inputs-list li input {
  left: -9999px;
  position: absolute;
}

form ul.inputs-list li input + span {
  padding-left: 1.4375rem !important;
  position: relative;
}

.inputs-list input, .inputs-list span {
    font-size: 18px;
    vertical-align: middle;
}
form ul.inputs-list li input + span:before {
  border: 1px solid #323232;
  border-radius: 4px;
  box-sizing: border-box;
  content: '';
  display: inline-block;
  height: 15px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
}

form ul.inputs-list li input[type='radio'] + span:before {
  border-radius: 50%;
  top:10px;
  left:0.5px;
}

form ul.inputs-list li input + span:after {
  /*background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23231F1F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e");*/
  background-image: url("https://7850638.fs1.hubspotusercontent-na1.net/hubfs/7850638/icons8-checkmark.svg");
  background-size: 10px 10px;
  background-repeat: no-repeat;
  content: '';
  display: inline-block;
  height: 10px;
  left: 3px;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
}

form ul.inputs-list li input[type='radio'] + span:after {
  background-color: #007d8a;
  background-image: none;
  border-radius: 100%;
  content: '';
  height: 8px;
  top:10px;
  left: 3.51px;
  width: 9px;
}

form ul.inputs-list li input + span:hover:after {
  opacity: 0.2;
}

form ul.inputs-list li input:checked + span:after {
  opacity: 1;
}

form .input ul.invalid.error > li input + span:before {
  border-color: #ef6b51;
}

/* Date Picker */

abbr[title] {
    border-bottom: 0;
    text-decoration: none !important;
    text-decoration: none !important;
}
.fn-date-picker .pika-table thead th {
    color: #ffffff !important;
}

.fn-date-picker.pika-single {
    z-index: 9999;
    display: block;
    position: relative;
    color: #323232 !important;
    background: #fff;
    border: 1px solid #ccc;
    border-bottom-color: #bbb;
    font-family: 'Muli' !important;
    font-weight: lighter !important;
    *zoom: 1;
}

.fn-date-picker .pika-button {
    cursor: pointer;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    border: 0;
    margin: 0;
    width: 100%;
    padding: 5px;
    color: #323232 !important;
    font-size: 12px;
    line-height: 15px;
    text-align: right;
    background: #ffffff !important;
    font-family: 'Muli' !important;
}
thead th, thead td {
    background-color: #007d8a !important;
    border-bottom-color: #A8A8A8 !important;
    color: #ffffff;
}

.fn-date-picker td.is-selected .pika-button {
    background-color: #007d8a !important;
    color: #ffffff !important;
}

th,
td {
  border: 1px solid #D8D8D8 !important;
  padding: 15px;
  vertical-align: top;
}
/*td:hover {
  background-color: #007d8a;
}*/
.fn-date-picker td .pika-button:hover {
  background-color: #007d8a !important;
  border-radius: 0 !important;
  color: #323232;
}
/* Submit Button*/

form input[type=submit],
form .hs-button {
  background-color: #007d8a !important;
  border: 1px solid #ffffff !important;
  border-radius: 6px;
  color: #FFF;
  font-family: 'Muli' !important;
  cursor: pointer;
  display: inline-block;
  float:right;
  font-size: 14px !important;
  font-weight: normal;
  height: auto;
  line-height: 1.1;
  margin-right: 70px;
  margin-bottom: 50px;
  padding: 15px 53px;
  position: relative;
  text-align: center;

  text-decoration: none;
  transition: all 0.15s linear;
  white-space: normal;
  width: auto;
  word-break: break-word;
}

button, input, select, textarea {
    font-family: inherit;
    line-height: inherit;
}

legend {
    border-bottom: none !important;
}


/* Form stylings ends here */
/*--1st try
select{
  background-color:#F5F9FA;
  color:white;
}
.hs-form select:focus {background-color:#F5F9FA;
  color:white;}
--*/
/*--2nd try
option{
background-color:#F5F9FA;
color:white;
}

--*/
/*-- 3rd try
 .hs-input{
background-color:#F5F9FA;
color:white;
}
--*/
/*
<select id="will_you_be_responsible_for_the_payment_of_any_connection_and_infrastructure_charges_-e695c58a-2b55-45df-9d5a-f373f1d3e7d7_3622" required="" class="hs-input" name="will_you_be_responsible_for_the_payment_of_any_connection_and_infrastructure_charges_" data-reactid=".hbspt-forms-0.1:$12.1:$will_you_be_responsible_for_the_payment_of_any_connection_and_infrastructure_charges_.$will_you_be_responsible_for_the_payment_of_any_connection_and_infrastructure_charges_.$will_you_be_responsible_for_the_payment_of_any_connection_and_infrastructure_charges_.0"><option value="" disabled="" selected="" data-reactid=".hbspt-forms-0.1:$12.1:$will_you_be_responsible_for_the_payment_of_any_connection_and_infrastructure_charges_.$will_you_be_responsible_for_the_payment_of_any_connection_and_infrastructure_charges_.$will_you_be_responsible_for_the_payment_of_any_connection_and_infrastructure_charges_.0.0">Please Select</option><option value="Yes" data-reactid=".hbspt-forms-0.1:$12.1:$will_you_be_responsible_for_the_payment_of_any_connection_and_infrastructure_charges_.$will_you_be_responsible_for_the_payment_of_any_connection_and_infrastructure_charges_.$will_you_be_responsible_for_the_payment_of_any_connection_and_infrastructure_charges_.0.1:$Yes">Yes</option><option value="No- it will be someone else" data-reactid=".hbspt-forms-0.1:$12.1:$will_you_be_responsible_for_the_payment_of_any_connection_and_infrastructure_charges_.$will_you_be_responsible_for_the_payment_of_any_connection_and_infrastructure_charges_.$will_you_be_responsible_for_the_payment_of_any_connection_and_infrastructure_charges_.0.1:$No- it will be someone else">No- it will be someone else</option></select>


select#will_you_be_responsible_for_the_payment_of_any_connection_and_infrastructure_charges_-e695c58a-2b55-45df-9d5a-f373f1d3e7d7_3622 option:hover,
select#will_you_be_responsible_for_the_payment_of_any_connection_and_infrastructure_charges_-e695c58a-2b55-45df-9d5a-f373f1d3e7d7_3622 option.unselected:hover {
    background-color: black;
}*/