@import './../../../../sources/styles/include.scss';

$component: 'widget';
$template: 'form-6';

.widget.c-#{$component}.c-#{$component}-#{$template} {
  position: relative;
  z-index: 0;

  .widget-form {
    &[data-borders='rounded'] {
      @include border-radius(10px);
    }
  }

  .widget-form-wrapper-2 {
    position: relative;
    padding-top: 40px;
    padding-bottom: 40px;
    overflow: hidden;
  }

  .widget-form-title-wrap {}

  .widget-form-image {
    display: inline-block;
    width: 56px;
    height: 56px;
    vertical-align: middle;
    margin-right: 24px;
    background-image: url('images/question_mark.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .widget-form-title {
    display: inline-block;
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
    color: #fff;
    white-space: normal;
    max-width: 200px;
    vertical-align: middle;
  }

  .widget-form-description-wrap {}

  .widget-form-description {
    display: inline-block;
    font-size: 14px;
    line-height: 22px;
    color: #fff;
    text-align: left;
    white-space: normal;
    vertical-align: middle;
  }

  .widget-form-button-wrap {}

  .widget-form-button {

    &.intec-ui.intec-ui-control-button {
      color: #fff;
      border-width: 1px;
      border-color: #fff;
    }
  }

  @include breakpoint-768() {
    .widget-form-title {
      max-width: initial;
    }
    .widget-form-image {
      margin-right: 0;
    }
    .widget-form-title-wrap,
    .widget-form-description-wrap,
    .widget-form-button-wrap,
    .widget-form-description {
      text-align: center;
    }

    .widget-form-title-wrap + .widget-form-description-wrap,
    .widget-form-description-wrap + .widget-form-button-wrap,
    .widget-form-title-wrap + .widget-form-button-wrap {
      margin-top: 20px;
    }
  }
}