/*
  This file is intended to target specific styles on the OneJH Longer Healthier Better marketing campaigns.
  The form was initially copied from the vitality campaign form, and therefore the look and feel among other things was still intended for Vitality.
  As such, it would not be appropriate to make the change to the styles at the form template level as this would surely impact Vitality campaign and any other forms which use that template.
  Therefore the changes need to be made specific to the LHB form only.
  You might be asking yourself "Why not use a RawHTML block at the page level to target these styles?"
  The issue is that the firm is imported via an iframe and therefore we cannot target the styles from the page level.
  The solution is to create a separate CSS file which is only loaded on the LHB campaign via the form setting "Css File" found in the Adaptive Form Container basic configs
*/

@media screen and (min-width: 768px) {
  .container {
    margin-left: unset;
    width: 100%;
    overflow: hidden;
  }
}

.guideRadioButtonItem:hover, .guideRadioButtonItem input:hover, .guideRadioButtonItem label:hover {
    cursor: pointer;
}
.guideCheckBoxItem:hover, .guideCheckBoxItem input:hover, .guideCheckBoxItem label:hover {
    cursor: pointer;
}

[data-guide-view-bind*="guidecheckbox"] .guideCheckBoxGroup {
    line-height: 24px !important;
}

[data-guide-view-bind*="guidecheckbox"] .guideCheckBoxItem {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    line-height: 24px !important;
}

[data-guide-view-bind*="guidecheckbox"] .guideFieldWidget.left.XfaCheckBox {
    margin-right: 12px !important;
    width: auto !important;
    line-height: 24px !important;
}

[data-guide-view-bind*="guidecheckbox"] .guideWidgetLabel label {
    margin: 0 !important;
    line-height: 24px !important;
    font-size: 16px !important;
    vertical-align: initial !important;
    /* what does this do and what should i set it as*/
}


[data-guide-view-bind*="guideradiobutton"] .guideRadioButtonGroupItems {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    row-gap: 12px !important;
}

[data-guide-view-bind*="guideradiobutton"] .guideRadioButtonItem {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px;
}

[data-guide-view-bind*="guideradiobutton"] .guideFieldWidget {
    display: flex !important;
    width: auto !important;
    /* what does this do and what should i set it as*/
}


[data-guide-view-bind*="guideradiobutton"] .guideWidgetLabel {
    display: flex !important;
    /* what does this do and what should i set it as*/
}

[data-guide-view-bind*="guideradiobutton"] .guideWidgetLabel label {
    margin: 0 !important;
    line-height: 24px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    padding-right: 32px !important;
    /* what does this do and what should i set it as*/
}

/* remove padding from last check box label */
[data-guide-view-bind*="guidecheckbox"] .guideCheckBoxItem:last-child {
    margin-bottom: 0 !important;
}