* {
    margin: 0px;
    padding: 0px;
}

html{
    min-height:100%;/* make sure it is at least as tall as the viewport */
}

body {
    font-family: Montserrat, Ubuntu, 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color: #fff; /* per Laird's 9/26 email change this */
    height:100%;
}

/* Per Laird, hide header and footer as default */
header, footer {
  display: none;
}
header,
footer {
    width: 100%;
    margin: 0 auto;
    background: #263746;
    padding: 25px 0px;
}
header > div, 
footer > div {
  margin: 0 auto;
  padding: 0 40px;
  color: #fff;
}

footer > div {
   text-align:center;
}

header a, footer a {
  color: #fff;
  text-decoration: underline;
}

div.map {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
}

div.map > div
{
    margin: 0px auto;
    background-position: center;
}

.description {
    width: 100%;
    margin: 0 auto;
    background: #fff;
    padding: 30px 0px;
    font-size: 35px;
    text-align: left;
    font-weight: bold;
}

.description > div {
    margin: 0px auto;
    padding: 0px 25px;
}

::placeholder {
    color :#b7b7b7;
}

input,
select {
    border: 0px none;
    text-align: right;
    text-align-last: right;
    color: #1DA0A9;
    font-size: 24px;
    padding: 5px;
    margin-right: 5px;
    background-color: #fff;
}

input[type=button],
input[type=submit]
 {
    color: #20b0b9;
    background-color: #fff;
    border: 1px solid #20b0b9;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    text-align-last: center;
    margin: 5px;
    -webkit-appearance: none;
}

input[type=button]:hover, input[type=submit]:hover {
  background-color: #20b0b9;
  color: #fff;
  border: 1px solid #20b0b9;  
}

input[type=button].redButton,
input[type=submit].redButton
 {
    color: #cb3e25;
    border: 1px solid #cb3e25;
}

input[type=button]:hover.redButton,
input[type=submit]:hover.redButton
 {
    color: #fff;
    background-color: #cb3e25;
}


input[type=button]:disabled,
input[type=submit]:disabled
{
    filter: grayscale(100%);
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: default;
}


input[type=button]:disabled:hover,
input[type=submit]:disabled:hover
{
    color: #167bd4;
    background-color: #fff;
}

.pnlInput {
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    align-items: flex-end;
    margin: 8px 0px;
}

.inputPanel > input,
.inputPanel > select,
.pnlInput > input,
.pnlInput > select {
    outline: none;
    flex-grow: 3;
    width: 225px;
    max-width: 225px;
    font-size: 18px;
    margin-left: auto;
}


.inputPanel > input[type=button],
.inputPanel > input[type=submit],
.pnlInput > input[type=button],
.pnlInput > input[type=submit] {
    max-width: 100px;
}

.pnlInput > input[type=button],
.pnlInput > input[type=submit] {
    min-width: 100px;
    margin-top: 5px;
}

.pnlInput > span.smText {
  font-size: 11px;
}

#container {
    margin: 0px auto;
    min-height: calc(70vh);
    padding-bottom: 25px;
}

@keyframes bouncyintro  {
0%      {opacity: 0.3; margin-top: 100px;}
50%     {opacity: 0.8; margin-top: -15px;}
70%     {opacity: 1.0; margin-top: 10px;}
90%     {opacity: 1.0; margin-top: -5px;}
100%    {opacity: 1.0; margin-top: 0px;}
}


.page {
  padding-top: 15px;
  opacity: 0;
  animation: bouncyintro 1.5s ease-in-out normal 1 forwards;
}

.smarty-tag {
    display: none !important;
}

.pg1-address {
    width: 275px;
    padding: 8px;
    font-size: 16px;
    margin-right: 0px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border: 1px solid #d4d4d4;
}

.pg1-submit {
    width: 200px;
    padding: 8px;
    font-size: 16px;
    color: #fff;
    background-color: #167bd4; 
    border: 1px solid #167bd4;
    margin-left: -5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
}

.pg1-submit:disabled {
    background-color: #b7b7b7; 
    border: 1px solid #b7b7b7;
    cursor: default;
}

.stepTitle {
    font-weight: 500;
    font-size: 34px;
    color: #1DA0A9;
    text-align: center;
    margin: 10px 5px 15px 5px;
}

.stepTitleMed {
  font-weight: 300;
  font-size: 26px;
  color: #2c5492;
  text-align: center;
  margin: 15px 5px 15px 5px;
  width: 100%;
}

#addressConfirmTitle {
  width: 100%;
}

.innerPage {
    display: flex;
    flex-wrap: wrap;
    margin: 0px 10px;
    justify-content: center;
}

.inputPanel {
    display: flex;
    flex-direction: row;
    -ms-flex-direction: row;
    align-items: center;
    border: 1px solid #5A5A5A;
    border-radius: 5px;
    vertical-align: middle;
    margin: 5px;
    width: 100%;
    background-color: #fff;
    align-content: flex-start;
    box-sizing: border-box;
}

.inputPanel > * {
    order: 4;
    flex-grow: 1;
}

.inputPanel:hover > div.panelImage > img {
    filter: invert(0.5) sepia(1) saturate(2) hue-rotate(136deg) brightness(0.85);
}

div.panelImage,
div.vehicleImage {
    order: 1;
    -ms-flex-order: 1;
    max-width: 52px;
    border-right: 1px solid #d4d4d4;
    flex-grow: 0;
}

#pgCondition > div.innerPage > div.inputPanel > div.panelImage {
  display: none;
}

div.panelImage stars {
  border-right: none;
}

div.vehicleImage {
    max-width: 70px;
}

img.matchVehicle {
    width: 50px;
    height: 50px;
    padding: 38px 0px;
}

.panelTitle {
    font-size: 19px;
    color: #5A5A5A;
    font-weight: 500;
    order: 2;
    -ms-flex-order: 2;
    padding: 10px;
    width: 150px;
    text-align: left;
    flex-grow: 0;
}

.panelDesc {
    display: none;
}

.customCoverage {
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    justify-content: space-between;
    border: 1px solid #d4d4d4;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    background-color: #fff;
    align-items: center;
    box-sizing: border-box;
}

.customCoverage > .stepTitleMed {
    padding: 0px;
    margin: 0px;
}

.descStars {
  flex-basis: 120px !important;
}

#selectLines > div.inputPanel, #additionalLines > div.inputPanel {
  cursor: pointer;
  min-height: unset;
}

.multiImage {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.multiImage > div {
    padding: 0px 15px;
    font-size: 40px; 
}

.panelImage > img,
.vehicleImage > img {
    width: 22px;
    height: 22px;
    padding: 12px 15px 10px 15px;
}

.vehicleImage > img {
    width: 50px;
    height: unset;
    height: auto;
}

.vehicleImage > img.matchVehicle {
    width: 26px;
    height: unset;
    padding: 10px 22px;
}

.multiImage > img {
    width: 22px;
    height: 22px;
}

.panelImageHelp > img {
  width: 200px;
  height: 200px;
  padding: 15px 0px;
}

#multiCar {
  display: none;
}

#multiHome {
  display: none;
}

.stars > img {
    height: 50px;
    width: 50px;
    padding: inherit 10px;
   margin: 0px 5px;
}

#addressTitle {
  color: #167bd4;
  font-weight: 700;
  font-size: 30px;
  width: 100%;
  text-align: center;
  padding: 15px 0px 0px 0px;
  margin: 0 auto;
}

#prefillTooMany, #prefillTooManyVIN {
  text-align: center;
}

.contactPanel {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: 0px auto;
    padding: 20px;
}

.prefillChkPanel {
  position: relative;
  display: block;
  flex-wrap: wrap;
  margin: 0px auto;
  padding: 20px;
  text-align: center;
  align-content: center;
  color: #2c5492;
  font-weight: 400;
}

.contactPanel > input, .contactPanel > select {
    margin: 10px;
    width: initial;
    flex-grow: 1;
}

.contactPanel > div.panelDesc {
    flex-basis: 100%; 
    margin: 20px 0px;
}

.contactPanel div:first-child {
    margin-top: 0px;
}

.contactPanel .nextButton {
    margin-top: 10px;
}

.nextButton {
    display: flex!important;
    flex-basis: 100%;
    text-align: center;
    margin: 30px 0;
    flex-direction: column;
    -ms-flex-direction: column;
    align-items: center;
    justify-content: center;
}

.coveragePanel {
    position: relative;
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    border: 1px solid #d4d4d4;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
    vertical-align: top;
    margin: 5px 10px;
    flex-grow: 1;
    background-color: #fff;
}

.coveragePanel > div.panelImage.stars > img, .resultsPanel > div.panelImage.stars > img {
    height: 35px;
    width: 35px;
    padding: inherit 10px;
}

.coveragePanel > div.panelImage.stars > div, .resultsPanel > div.panelImage.stars > div {
  display: none;
}

.coveragePanel input[type=button],
.coveragePanel input[type=submit] {
    width: 100%;
    margin-top: 15px;
}

.coverageTextSeperator {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 14px;
    margin: 0px 0px 10px 0px;
    overflow: hidden;
}

.coverageDetails {
    text-align: center;
    font-size: 17px;
}

.coverageItemTitle {
    color: #167bd4;
    display: inline-block;
    font-weight: bold;
    font-size: 12px;
    margin: 5px 0px 3px 0px;
}

.additionalRates > .resultsPanel {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    margin: 5px 15px;
    flex-basis: 100%;
    align-items: center;
    flex-direction: column;
}

.resultsPanel {
  position: relative;
	display: flex;
	border: 1px solid #d4d4d4;
	border-radius: 5px;
	padding: 5px 20px;
	text-align: center;
	vertical-align: middle;
	margin: 5px 10px;
	flex-basis: 25%;
	flex-grow: 1;
	background-color: #fff;
	flex-direction: column;
}

div#comboPnl > div.panelTitle, div#homePnl > div.panelTitle, div#autoPnl > div.panelTitle {
  order: 1 !important;
}

div#comboPnl, div#homePnl, div#autoPnl {
  margin-top: 15px;
}

.resultsPanel > div.price {
    font-weight: 300;
    font-size: 50px;
    margin-bottom: 20px;
}

.resultsPanel > div.price > div.term {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 22px;
    padding-top: 10px;
}

.resultsPanel > div > img {
  max-width: 90%;
  max-height: 175px;
  padding: 0px 0px 10px 0px;
}

.resultsPanel > input {
    margin-bottom: 10px;
}
.resultTextSeparator {
  font-size: 20px;
}
.resultTextSeperator {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 14px;
    margin: 0px;
    text-align: center;
    overflow: hidden;
}

/*.resultTextSeperator:before {
    content: "\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7";
    margin-right: 10px; 
}

.resultTextSeperator:after {
    content: "\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7";
     margin-left: 10px; 
}*/

.resultDetails {
    display: table;
    width: 100%;
    font-size: 16px;
    padding: 5px 0px 20px 0px;
}

.resultDetails li {
    display: table-row;
}

.resultDetails li span {
    display: table-cell;
    padding: 3px 0px;
}

.resultDetails li span:first-child {
    font-weight: 400;
    text-align: left;
}

.resultDetails li span:last-child {
    font-weight: 300;
    text-align: right;
}


.additionalRates > .resultsPanel > div {
    flex-grow: 1;
    margin: 0px;
    padding: 0px;
}

.additionalRates > .resultsPanel > div > img {
  margin-top: 10px;
  height: 100px;
}

.additionalRates > .resultsPanel > div.price {
    text-align: center;
    margin: -10px 10px 10px 10px;
}

.additionalRates > .resultsPanel > div.price > div.dollar {
    font-size: 40px;
    display: inline-block;
}

.additionalRates > .resultsPanel > div.price > div.term {
    line-height: 40px;
    vertical-align: middle;
    display: inline-block;
}

.additionalRates > .resultsPanel > div.price > div.term:before {
    content: "    ";
     margin-left: 10px; 
}

.additionalRates > .resultsPanel > div:last-child {
    text-align: right;
}

.additionalRates > .resultsPanel > div.resultTextSeperator,
.additionalRates > .resultsPanel > ol {
    flex-basis: 100%;
    display: none;
}

.modalShowing {
    filter: blur(5px);
}

div.dialogContainer {
    display: none;
}

div.dialogInner {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: #fff;
    padding: 30px 0px;
    overflow: auto;
}

div.dialogInner > .title {
    font-weight: 300;
    font-size: 28px;
    color: #2c5492;
    text-align: center;
}

div.dialogInner > .context {
    font-size: 18px;
    color: #0c1a6b;
    font-weight: 300;
    margin: 25px;
    padding-bottom: 15px;
    text-align: center;
}

div.dialogInner > .innerPage > .inputPanel {
    min-height: unset;
}

div.dialogInner > .innerPage > .inputPanel > input {
    margin: 5px;
}

 div.dialogInnerSm {
  background-color: #fff;
  display: inline-block;
  padding: 20px 20px 20px 20px;
  text-align:center;
  opacity: 1.0 !important;
  border: 1px solid #2c5492;
}

.inputErr {
    border-bottom: 2px solid #b61922 !important;
    color: #b61922;
}

.err {
    border: 2px solid #b61922 !important;
}

.errMsg {
  text-align:center;
  font-size: .9em;
  padding: 5px;
  color: #b61922;
  align-self: stretch;
}

div.dialogContainer {
    display: none;
}

div.ZipDialogContainer {
  display:none;
  background-color:#ffffff;
   position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 9997;
    text-align: center;
}

label.error {
  display:none !important; /* hide jquery validation messages */
}

#loading-div-background {
  display:none;
  position:fixed;
  top:0;
  left:0;
  background: rgba(255,255,255, 0.5);
  width:100%;
  height:100%;
  z-index: 9997;
}

#loading-div {
  text-align:center;
  margin: 0 auto;
  margin-top: 5%;
  opacity: 1.0;
  vertical-align: central;
}

.txtCentered {
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
}

.txtCentered > span.info {
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
}

.txtCentered18 {
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 18px;
  width: inherit;
}

.ComparisonSort > select {
  font-size: 14px;
  width: auto;
  margin-top: 15px;
}

div.WaitMsg {
  border-radius: 4px;
  border: 1px solid #eaeaea;
  background-color: #fff;
  color:  #2c5492;
  font-size: 1.1em;
  padding: 15px;
  margin: 30px auto;
  width: 80%;
  max-width: 800px;
  opacity: 1.0;
}


.ComparsionPhoneMeLink > img {
  max-height: 25px;
}

.ComparsionPhoneMeLink {
  display: inline-flex;
  padding: 5px;
}

.clickToCallResults {
  display: none;
}
.breakdownPhoneImg {
  display:inline;
  padding: 8px 8px 8px 8px;
  position: relative;
  top: 15px;
  height: 40px;
}
.callContainerDiv {
  width: 550px;
  max-width: 550px;
  text-align: center;
  margin: auto;
  font-size: 18px;
  padding-top: 10px;
}
.callUsCaptionAlt {
  font-size: 35px;
  color: #000000;
  font-family: 'nuetraTextBookAlt',helvetica, arial !important;
}
.Divider {
	direction: ltr;
	display: inline-flex;
	margin: auto 0;
	justify-content:center;
}

li.RedDot {
	list-style: none;
	padding: 5px;
	background-image: url("Images/redDot.png");
	background-repeat: no-repeat;
}

.PhoneCodeContainer {
	flex:0 0 auto;
  align-self: flex-start;
	justify-content: center;
  text-align: center;
  min-height: 75px;
  align-items: center;
	max-width:850px;
  margin: auto;
}

.PhoneContainer {
  justify-content: center;
  text-align: center;
  max-width: 200px;
  margin: 0 auto;
}

breakdownPhoneTxt {
  display: inline-flex;
  vertical-align: top;
  margin-top: 10px;
}

callContactSpan {
  font-size: 18px;
  color: #353535;
  font-family: 'nuetraTextBookAlt',helvetica, arial!important;
}
.TapToCall {
    display:none;
}
.PhoneCodeDescription {
  max-width: 80%;
  margin: 0 auto;
  color: #7b7b7b;
  font-style: italic;
  font-size: 16px;
  padding: 15px;
}
.callContact{
    display: -webkit-flex;
    display: flex;
    align-items: center;
    text-align: center;

}
.callContactDays {
  order: 1;
  -ms-flex-order: 1;
  -webkit-flex: 1;
  flex: 1;
  text-align: center;
}

.callContactHours {
    order: 2;
    -ms-flex-order: 2;
    -webkit-flex: 1;
    flex: 1;
    text-align: center;
}

.hiddenTxt {
  display: none;
}

.hidden {
  display: none !important;
  visibility: hidden !important;
}

.clickToCall {
  font-size: 1.2em;
}

.nextButton > .pageButton {
    order: 1;
    -ms-flex-order: 1;
}
.nextButton > .previousPage {
    order: 2;
    -ms-flex-order: 2;
}

.previousPage {
    background-color: #fff !important;
    border: 1px solid #808080 !important;
    color: #808080 !important;
}


.AgencyContactInfoContainer {
  margin-right: 20px;
  min-height: 70px;
  right: 0px;
}

/* alternate container for agencies to add addl info via css that they would like displayed */
.AgencyMessageContainer {
  margin-right: 20px;
  min-height: 70px;
  right: 0px;
  float: right;
  display:none;
  text-align: center;
}


.previousPage:hover {
    background-color: #e9e9e9 !important;
}


input:hover,
select:hover, select:focus {
    border-bottom: unset;
}

select:disabled {
  color: #eaeaea;
  border-bottom: 1px solid #eaeaea;
}


.coveragePanel input[type=button].selCov,
.coveragePanel input[type=submit].selCov {
  color: #fff;
  background-color: #167bd4; 
}

.coverageTextSeparator, .coverageTextSeparator35, .coverageTextSeperator15 {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 14px;
    margin: 0px 0px 10px 0px;
    overflow: hidden;
}

.coverageTextSeperator15 {
  margin-top: 15px;
}
.selected {
  border: 1px solid #167bd4;
}

.coveragePanel > .panelTitle {
  order: 1;
  -ms-flex-order: 1;
  text-align: center;
  margin: 0 auto;
}
.coveragePanel > .panelImage {
  order: 2;
  -ms-flex-order: 2;
  border: none;
  justify-content: space-between;
  direction: ltr;
  margin: 0 auto;
  align-content: center;
  align-self: center;
}
.coveragePanel > .panelDesc {
  order: 3;
  -ms-flex-order: 3;
}
.coveragePanel > .coverageTextSeparator35 {
  order: 4;
  -ms-flex-order: 4;
}

.coveragePanel > .coverageDetails {
  order: 5;
  -ms-flex-order: 5;
  flex-grow: 1;
}

.coveragePanel > .pkgInput {
  order: 6;
  -ms-flex-order: 6;
}

.resultsPanel > .panelTitle {
 /* order: 1;
  -ms-flex-order: 1;*/
  text-align: center;
  margin: 0 auto;
}
.resultsPanel > .panelImage {
 /* order: 2;
  -ms-flex-order: 2;*/
  border: none;
  justify-content: space-between;
  direction: ltr;
  margin: 0 auto;
  align-content: center;
}

.previousPage, .pageButton, #customCov {
  width: 225px;
}

.panelDescShowMobile {
      display: block;
      order: 5;
      padding: 12px;
      font-size: 14px;
      border-top: 1px solid #d4d4d4;
  }

.addVeh {
  max-width: 120px !important;
}

.savingsBanner {
  color: #fff;
  font-size: 18px;
  background-color: #3AA684;
  padding: 8px;
  margin: -20px -20px 15px -20px;
  border: 1px solid #3AA684;
  border-radius: 5px 5px 0px 0px;
}

.allowWrap > input[type=button],
.allowWrap > input[type=submit] {
  align-self: center;
  margin-left: auto;
  margin-right: 10px;
  max-width: 150px;
 } 

 .disclaimer {
   margin: 0px 5px;
 }

 #disclaimerBelow {
   display: block;
 }

  #disclaimerAbove {
   display: none;
 }

 .agreement {
   margin: 15px 0px -15px 0px;
   display: block;
 }

 .discVehTitle {
   display: none;
 }
 .discVehDesc {
   display: inline;
 }

 .checkboxContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  margin: 0px 5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkboxContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border: solid 1px #167bd4;
}

/* On mouse-over, add a grey background color */
.checkboxContainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkboxContainer input:checked ~ .checkmark {
  background-color: #167bd4;
}

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

/* Show the checkmark when checked */
.checkboxContainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkboxContainer .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.inputHasFocus {
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.42);
}

.resultsPanel input[type=button] {
  width: 100%;
}

div#addRates .resultsPanel input[type=button] {
  max-width: 225px;
}
#pgOwnership input[type=button].selCov, #pgCondition input[type=button].selCov {
  color: #fff;
  background-color: #167bd4;
}

#pgCombinedChoice > div.innerPage > div#autoPnl {
  order: 3;
  -ms-flex-order: 3;
}

#pgCombinedChoice > div.innerPage > div#homePnl {
  order: 2;
  -ms-flex-order: 2;
}

#pgCombinedChoice > div.innerPage > div#comboPnl {
  order: 1;
  -ms-flex-order: 1;
}

#pgCombinedChoice > div.innerPage > div.resultsPanel {
  flex-grow: 1;
}

#pgCombinedChoice > div.innerPage > div.resultsPanel > div.panelImage {
  order: initial;
  max-width: unset;
  max-width: none;
  border-right: 0px none;
}

#pgCombinedChoice > div.innerPage > div.resultsPanel > div.panelTitle {
  text-align: center;
  width: 100%;
  order: initial;
  font-size: 2em;
}

/* currently hiding navbar - leaving this here in case we want to or need to add */
#navbar {
  width: 100%;
  display: flex;
  margin: 5px 15px;
  flex-basis: 100%;
  align-items: center;
  display: none;
}

#navbar > div {
  width: 12%;
  padding: 5px 10px;
  display: inline;
  text-align: center;
  background-color: #eaeaea;
  cursor: pointer;
}

#navbar > div.active {
  background-color: #263746;
  color: #fff;
}

#navbar > div.visited {
  background-color: #2c5492;
  color: #fff;
}

#navbar > div.disabled {
  background-color: #eaeaea;
  color: #c0c0c0;
}

span.covTitle {
  text-decoration: underline dashed;
  text-decoration-line: underline;
  text-decoration-style: dashed;
  cursor: pointer;
}

  span.covTitle::before {
    display: none;
    position: absolute;
    top: 180px;
    left: 30px;
    content: attr(data-tooltip);
    opacity: 1;
    background-color: #fff;
    color: #20b0b9;
    border: 1px solid #20b0b9;
    border-radius: 4px;
    padding: 10px;
    margin: 15px;
    max-width: 300px;
  }

  span.covTitle::after {
    display: none;
    content: "";
    border: none;
  }

  span.covTitle:hover::before {
    display:block;
  }

  span.covTitle:hover::after {
    display: none;
  }


.tooltip {
  opacity: 1;
  background-color: #fff;
  color: #20b0b9;
  border: 1px solid #20b0b9;
  border-radius: 4px;
  padding: 10px;
  margin: 15px;
  max-width: 300px;
}
.vehCoverages {
  padding: 20px;
  border: 1px solid #d4d4d4;
}

.vehCoverages > div {
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.vehCoverages > div.panelTitle {
  order: initial;
  max-width: 100%;
}

.vehCoverages > div.vehicleImage {
  order: initial;
  max-width: 100%;
  border-right: 0 none;
  max-height: 161.5px;
}

.vehCoverages > div.vehicleImage > img {
  width: 100px;
}

.vehCoverages input[type=button] {
  max-width: 100%;
  max-height: 39px;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 24px;
}

.input-group-addon {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #5A5A5A;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  position: absolute;
}

.iOSWarning {
  margin: 10px;
  display: flex;
}

.iOSWarningHidden {
  display:none;
}

.modalBgHidden {
  display: none;
}

.modalBg {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #eaeaea;
  opacity: 0.95;
  width: 100%;
  height: 100%;
  z-index: 9997;
}

.accessControl {
  text-align: center;
  background-color: #fff;
  padding: 15px;
  margin: 0 auto;
  margin-top: 5%;
  opacity: 1.0;
  vertical-align: central;
  border: 2px solid #000;
  max-width: 90%;
}

.addlCovList > div.inputPanel.selectedAddlCov {
  background-color: #20b0b9;
}

.addlCovList > div.inputPanel.selectedAddlCov > div.panelTitle {
  color: #fff;
  font-weight: bold;
}

.div500 {
  max-width: 500px !important;
}

#ZipCodeErr {
 display: none;
}

.carrierLogo > img {
  max-width: 200px;
}

@media screen and (max-width: 359px) {
    .panelTitle {
    width: calc(20vw) !important;
  }
}

@media screen and (max-width: 599px) {
  .AgencyAddressLabel {
    display: none;
  }

  .AgencyCityStateZipLabel {
    display: none;
  }

  .LogoImage {
    max-width: 100px;
  }

  header > div, footer > div {
    padding: 0px 15px;
  }

  .resultsPanel {
    flex-basis: 50%;
  }

  .carrierSelect {
    /*max-width: 125px*/
  }

  .AgencyMessageContainer, .AgencyContactInfoContainer {
    font-size: .7em;
    min-height: 20px;
  }

  .TapToCall {
    display: inline-flex;
    width: 190px;
    border-radius: 12px;
    background-color: #D71921;
    border: 2px solid #D71921;
    padding: 15px 32px;
    height: auto;
    cursor: pointer;
    margin-bottom: 10px;
    margin: auto;
    margin-top: 10px;
    font-weight: bold;
    color: #fff;
  }

  .breakdownPhoneImg {
    display: none;
  }

  .callUsCaption {
    font-size: 32px;
    color: #000000;
  }

  .callContainerDiv {
    width: 100%;
    text-align: center;
  }

  .breakdownPhoneTxt {
    display: none;
  }


  #drvFirstName {
    max-width: calc(40vw);
  }

  #drvLastName {
    max-width: calc(40vw);
  }

  .coveragePanel > .panelImage, .resultsPanel > .panelImage {
    display: inline-flex;
    margin-bottom: 30px;
    max-width: unset;
    justify-content: center;
  }

    .coveragePanel > .panelImage > img, .resultsPanel > .panelImage > img {
      padding: 0px 0px 10px 0px;
    }

  .dialogInnerSm > .panelTitle {
    text-align: center;
    width: 100%;
  }

  .dialogInnerSm > .panelImage {
    border: none;
    margin: 0 auto;
  }

  .inputPanel > input,
  .inputPanel > select,
  .pnlInput > input,
  .pnlInput > select,
  .pnlInput > input[type=submit] {
    max-width: calc(40vw);
    margin-left: auto;
    flex-grow: 0;
  }

  .allowWrap {
    flex-wrap: wrap;
  }

  .panelTitle {
    width: calc(25vw);
    max-width: calc(35vw);
    font-size: 16px;
  }

  .vehicleImage > img {
    padding: 8px 12px 7px 12px;
  }
}


@media screen and (min-width:640px)
{

    .inputPanel {
        width: unset;
        width: auto;
        min-width: calc(50% - 10px);
        max-width: calc(100% - 10px);
        flex-grow: 1;
    }

    .inputPanel.twoacross {
        width: calc(100% - 10px);
    }

    .inputPanel.oneacross {
        width: calc(100% - 10px);
    }

  .addlCovList > .inputPanel {
    display: flex;
    flex-direction: row;
    -ms-flex-direction: row;
    align-items: center;
    border: 1px solid #5A5A5A;
    border-radius: 5px;
    vertical-align: middle;
    margin: 5px;
    width: 100%;
    background-color: #fff;
    align-content: flex-start;
    box-sizing: border-box;
    max-width: 800px;
  }

    .nextButton {
    flex-direction: row;
    -ms-flex-direction: row;
    align-items: unset;
    justify-content: center;
  }

  .nextButton > .pageButton {
    order: 2;
  }

  .nextButton > .previousPage {
    order: 1;
  }

  .ComparsionPhoneMeLink {
    display: none;
  }

  .inputPanel > input[type=button],
    .inputPanel > input[type=submit],
    .pnlInput > input[type=button],
    .pnlInput > input[type=submit] {
       /* max-width: unset;
        max-width: none; */
    }
  .panelDescShowMobile {
    border-top: 0 none;
    order: 3;
  }

  .agreement > label {
    margin-top: 0px;
  }

  div.vehicleImage {
    max-width: 100px;
  }
  .vehicleImage > img {
      width: 80px;
      height: unset;
      height: auto;
  }
}

@media screen and (min-width:800px)
{
  .multiImage > img {
      width: 100px !important;
      height: 100px !important;
  }
  div.dialogContainer {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.1);
  }
  .inputPanel > * {
        order: initial;
    }

  div.panelImage,
  div.vehicleImage {
    order: initial;
    max-width: unset;
    max-width: none;
    border-right: 0px none;
  }
    .vehCoverages > div.vehicleImage > img {
      width: auto;
       max-width: 200px;
       max-height: 161.5px;
    }

    .panelTitle {
        order: initial;
        -ms-flex-order: 1;
        padding-left: unset;
        border-left: unset;
        width: unset;
        text-align: unset;
        font-size: 1.6em;
    }

    .stepTitle {
     font-size: 2em; 
    }

    .panelImage > img {
        width: 60px;
        height: 60px;
        padding: 15px 0px;
    }

    .inputPanel {
        flex-direction: column;
        -ms-flex-direction: column;
        align-items: center;
        border: 1px solid #d4d4d4;
        border-radius: 5px;
        padding: 20px;
        text-align: center;
        vertical-align: middle;
        margin: 5px;
        width: 100%;
        min-height: 245px;
        background-color: #fff;
        align-content: flex-start;
        box-sizing: border-box;
    }

    .inputPanel > div {
        width: 100%;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .panelDesc {
        display: block;
        font-size: 18px;
        color: #345A5A;
        font-weight: 300;
        padding: 0px 0px 5px 0px;
        min-height: 65px;
        padding-bottom: 15px;
        flex: 2;
    }

    #top3Pkg > .coveragePanel > .panelDesc {
      flex: 0;
    }

    .noFlex {
      flex: 100;
      -ms-flex: 1;
      -ms-flex-preferred-size: 175px;
    }

    .inputPanel {
        width: unset;
        min-width: calc(50% - 10px);
        max-width: calc(100% - 10px);
        flex-grow: 1;
    }

    .inputPanel.twoacross {
        width: calc(100% - 10px);
    }

    .inputPanel.oneacross {
        width: calc(100% - 10px);
    }

    input,
    select {
        border-width: 0px 0px 1px;
        border-style: none none solid;
        border-image: initial;
        border-bottom: 1px solid #345A5A;
        text-align: center;
        text-align-last: center;
        margin: unset;
    }

    .inputPanel > input,
    .inputPanel > select,
    .pnlInput > input,
    .pnlInput > select {
        margin: 15px 5px 5px 5px;
        max-width: unset;
        font-size: 24px;
        width: 100%;
        max-height: 39px;
    }

    .inputPanel > input[type=button],
    .inputPanel > input[type=submit],
    .pnlInput > input[type=button],
    .pnlInput > input[type=submit] {
        max-width: unset;
        max-width: none;
        max-height: 39px;
        margin-left: auto;
    }

    .pnlInput {
        align-items: center;
        margin: 0px;
    }

    input:hover,
    select:hover {
        border-bottom: 1px solid #2c5492;
    }

    img.matchVehicle {
        width: 80px;
        height: 80px;
        padding: 38px 0px;
    }
    
    .vehicleImage > img {
        padding: 15px 0px;
        flex: 2;
        max-width: 170px;
        max-height: 128px;
        width: 100%;
        height: auto;
    }

    .vehicleImage > img.matchVehicle {
        width: 80px;
        height: 80px;
        padding: 38px 0px;
    }

    div.dialogContainer {
        position: fixed;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        background: rgba(0, 0, 0, 0.1);
    }

    div.dialogInner {
        position: unset;
        width: 70vw;
        height: 100vh;
        margin: 0 auto;
    }

    .pg1-address {
        width: 500px;
    }

    .pg1-submit {
        width: 200px;
    }

    div.ZipDialogContainer {
      display:none;
      position:fixed;
      top:100px;
      left:0;
      width:100%;
      height:100%;
      z-index: 9997;
      text-align: center;
      background: rgba(0, 0, 0, 0.3);
    }

    div.dialogInnerSm {
      max-width: 400px;
      top: calc(65vh/2);
      margin-left: calc(50% - 150px);
      max-height: 600px;
    }

    .pg1-address {
        width: 500px;
    }

    .inputPanel {
        width: unset;
        min-width: calc(33% - 10px);
        max-width: calc(25% - 10px);
        flex-grow: 1;
    }
    .contactPanel {
      width: 800px;
    }
    .panelDesc > span.info {
      font-size: 12px;
    }

    

   #multiCar {
    display: block;
  }

  #multiHome {
    display: block;
  }

  .pnlInput > span.smText {
    display:none;
  }

  .disclaimer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .allowWrap {
    flex-wrap: initial;
  }

  .panelDescShowMobile {
    border-top: 0px none;
  }

  .addVeh {
    max-width: unset !important;
    max-width: none !important;
  }

   #disclaimerBelow {
     display: none;
   }

  #disclaimerAbove {
     display: block;
   }

  .coverageTextSeparator35 {
    margin-top: -35px;
  }

   .discVehTitle {
     display: block;
   }
  .discVehDesc {
    /*display: none;*/
  }

  .additionalRates > .resultsPanel {
    flex-direction: row;
  }

  .additionalRates > .resultsPanel > div.price {
    margin: -10px 0px 0px 0px;
  }


  .customCoverage {
    flex-direction: row;
    -ms-flex-direction: row;
  }

  #SR22Pan > div.panelDesc {
    -ms-flex: none;
  }

  .page {
    opacity: 1;
    animation-name: none;
  }

  input[type=number] {
    width: 93% !important;
  }

  .input-group-addon {
    visibility: hidden;
  }

  .addlCovList {
    max-width: calc(100vw - 50px);
    margin: auto;
  }

  .addlCovList > .inputPanel {
    display: flex;
    flex-direction: row;
    -ms-flex-direction: row;
    align-items: center;
    border: 1px solid #5A5A5A;
    border-radius: 5px;
    vertical-align: middle;
    margin: 5px;
    background-color: #fff;
    align-content: flex-start;
    box-sizing: border-box;
    max-width: 380px;
    max-height: 50px;
    min-height: 50px;
    flex-basis: 410px
  }

  .addlCovList > .inputPanel > .panelTitle {
    font-size: 19px;
    color: #5A5A5A;
    font-weight: 500;
    order: 2;
    -ms-flex-order: 2;
    padding: 10px;
    width: 350px;
    text-align: left;
    flex-grow: 0;
  }

  .addlCovList > .inputPanel > .panelTitle:hover {
    cursor: pointer;
    color: #1da0a9;
  }

  .addlCovList > .inputPanel > .panelImage {
    border-right: 1px solid #d4d4d4;
    width: 50px;
    margin-left: -15px;
  }
  

  .addlCovList > .inputPanel > .panelImage > img {
    width: 22px;
    height: 22px;
    padding: 12px 15px 10px 15px;
  }

  #pgCondition > div.innerPage > div.inputPanel > div.panelImage {
    display: block;
  }
}

@media screen and (min-width:1200px){
  header > div, footer > div {
    width: 1028px;
  }
  .inputPanel {
      width: unset;
      min-width: 350px;
      max-width: calc(25% - 10px);
      flex-grow: 1;
      align-items:center;
      text-align:center;
  }

  .description > div {
    width: 980px;
  }

  div.dialogInner > .innerPage > .inputPanel {
        min-width: unset;
        min-width: calc(25% - 10px);
        max-width: calc(33% - 10px);
    }

  .disclaimer {
    max-width: 1000px;
    text-align: center;
  }

    #container {
      max-width: 1600px;
    }

  .addlCovList {
    max-width: 1200px;
    margin: auto;
  }

  .addlCovList > .inputPanel {
    display: flex;
    flex-direction: row;
    -ms-flex-direction: row;
    align-items: center;
    border: 1px solid #5A5A5A;
    border-radius: 5px;
    vertical-align: middle;
    margin: 5px;
    background-color: #fff;
    align-content: flex-start;
    box-sizing: border-box;
    max-width: 550px;
    flex-basis: 600px;
  }
}

.addlCovList > .inputPanel > .panelTitle {
  font-size: 19px;
  color: #5A5A5A;
  font-weight: 500;
  order: 2;
  -ms-flex-order: 2;
  padding: 10px;
  width: 350px;
  text-align: left;
  flex-grow: 50;
}

.addlCovList > .inputPanel > .panelImage > img {
  width: 22px;
  height: 22px;
  padding: 12px 15px 10px 15px;
}

.inputPanel.disabled,
.inputPanel.disabled * {
  filter: grayscale(100%);
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.inputPanel.hidden {
    border: 2px dashed;
}

.inputPanel.conditional {
    display: none;
}