/**
 * SuiteCRM is a customer relationship management program developed by SalesAgility Ltd.
 * Copyright (C) 2021 SalesAgility Ltd.
 *
 * This program is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License version 3 as published by the
 * Free Software Foundation with the addition of the following permission added
 * to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
 * IN WHICH THE COPYRIGHT IS OWNED BY SALESAGILITY, SALESAGILITY DISCLAIMS THE
 * WARRANTY OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see http://www.gnu.org/licenses.
 *
 * In accordance with Section 7(b) of the GNU Affero General Public License
 * version 3, these Appropriate Legal Notices must retain the display of the
 * "Supercharged by SuiteCRM" logo. If the display of the logos is not reasonably
 * feasible for technical reasons, the Appropriate Legal Notices must display
 * the words "Supercharged by SuiteCRM".
 */
/**** Campaigns ***/

div.wizard-unique-elem td {
  white-space: normal;
  word-wrap: break-word;
}

@media (min-width: 922px) {
  form[name="wizform"] div.wizard-unique-elem {
    width: 900px;
  }
}

/*sm-col-*/
@media (min-width: 768px) and (max-width: 991px) {
  form[name="wizform"] div.wizard-unique-elem {
    width: 700px;
  }
}

/*md-col-*/
@media (min-width: 992px) and (max-width: 1199px) {
  form[name="wizform"] div.wizard-unique-elem {
    width: 900px;
  }
}

/*md-fixes*/
@media (min-width: 1180px) and (max-width: 1199px) {
  form[name="wizform"] div.wizard-unique-elem {
    width: 1000px;
  }
}

/*lg-col-*/
@media (min-width: 1200px) {
  form[name="wizform"] div.wizard-unique-elem {
    width: 1100px;
  }
}

@media (min-width: 768px) {
  form[name="wizform"] div.wizard-unique-elem {
    width: 700px;
  }
}

@media (min-width: 641px) and (max-width: 978px) {
  form[name="wizform"] div.wizard-unique-elem {
    width: 600px;
  }
}

@media (min-width: 999px) and (max-width: 1279px) {
  form[name="wizform"] div.wizard-unique-elem {
    width: 900px;
  }
}

@media (min-width: 0) and (max-height: 320px) {
  form[name="wizform"] div.wizard-unique-elem {
    min-width: 300px;
  }
}

@media (min-width: 480px) and (max-height: 320px) {
  form[name="wizform"] div.wizard-unique-elem {
    width: 400px;
  }
}

@media (min-width: 768px) and (min-height: 381px) {
  form[name="wizform"] div.wizard-unique-elem {
    width: 700px;
  }
}

@media (min-width: 768px) and (min-height: 381px) {
  form[name="wizform"] div.wizard-unique-elem {
    width: 700px;
  }
}

@media (max-width: 767px) {
  form[name="wizform"] div.wizard-unique-elem {
    width: 700px;
  }
}

@media (min-width: 768px) {
  form[name="wizform"] div.wizard-unique-elem {
    width: 700px;
  }
}

.wizard-box {
  display: block;
  position: relative;
  background-color: $panel-bg;
  color: $main-font-color;
  padding: 20px;
  margin: 20px;
  border: 1px solid $panel-default-border;
  float: left;
  width: 350px;
  min-width: 300px;
  min-height: 150px;
}

.wizard-box label {
  margin-bottom: 15px;
}

.wizard-box input {
  width: 100%;
}

.wizard-box span.helpmsg {
  position: absolute;
  bottom: 15px;
}

div.step2 table {
  min-width: 300px;
}

div.step2 table th td {
  width: 60px;
}

div.step2 .target-list-table {
  min-width: 570px;
}

.wizard-summary-left {
  display: block;
  padding: 0;
  margin: 0 20px 0 0;
  border: none;
  float: left;
  width: 450px;
}

.wizard-summary-left .box {
  display: block;
  background-repeat: no-repeat;
  padding: 20px 20px 20px 80px;
  margin: 0 0 20px 0;
  border: 1px solid lightgrey;
  float: none;
  background-position-x: 10px;
  background-position-y: center;
}

.wizard-summary-right .box {
  display: block;
  background-repeat: no-repeat;
  padding: 20px 20px 20px 80px;
  margin: 0 0 20px 0;
  border: 1px solid lightgrey;
  float: none;
  background-position-x: 10px;
  background-position-y: center;
}

.wizard-summary-left .box.button.disabled {
  background-color: #f3f3f3;
}

.wizard-summary-right .box.button.disabled  {
  color: gray;
}

.wizard-summary-left .box.button.disabled a  {
  color: gray;
}

.wizard-summary-right .box.button.disabled a {
  color: gray;
}

.wizard-summary-left .box.ok {
  background-image: url(../../../../themes/default/images/green_camp.gif);
}

.wizard-summary-left .box.fail {
  background-image: url(../../../../themes/default/images/red_camp.gif);
}

.wizard-summary-left .box.small {
  display: table-cell;
  padding-left: 55px;
  padding-right: 5px;
  float: none;
  width: 210px;
  height: 80px;
  vertical-align: middle;
}

.wizard-summary-left .box.button a,
.wizard-summary-right .box.button a {
  color: white;
}

.wizard-summary-left .space {
  display: table-cell;
  float: none;
  width: 28px;
  height: 80px;
}

.wizard-summary-right {
  display: block;
  padding: 20px;
  margin: 0;
  border: 1px solid lightgrey;
  float: left;
  width: 280px;
}

.wizard-summary-right .box {
  display: table-cell;
  background-position: top 10px right 10px;
  padding: 0;
  margin-left: 20px;
  float: none;
  text-align: center;
  width: 260px;
  height: 180px;
  vertical-align: middle;
}

.wizard-summary-right .send {
  background-image: url(../../../../themes/default/images/cmpwzrd/email167.png);
}

.wizard-summary-right .schedule {
  background-image: url(../../../../themes/default/images/cmpwzrd/wallclock.png);
}

.wizard-summary-right .test {
  background-image: url(../../../../themes/default/images/cmpwzrd/email167.png);
  background-position-y: -7px;
}

.wizard-summary-right .disabled {
  color: gray;
}

.wizard-summary-right .space {
  height: 20px;
}

ul.target-list {
  display: block;
  padding: 10px;
  margin: 0;
  border: 1px solid lightgray;
  overflow: scroll;
  max-height: 300px;
  list-style-type: none;
}

ul.target-list li {
  padding: 0;
  margin: 5px 0;
}

div.target-list-create {
  padding: 10px;
  margin: 10px 0 0 0;
  border: 1px solid lightgray;
}

div.target-list-table {
  padding: 10px;
  margin: 0 0 0 10px;
  border: 1px solid lightgray;
  min-height: 490px;
}

.icon-btn-lst {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.icon-btn-lst .icon-btn a {
  display: block;
  background-color: $campaign-type-bg;
  margin: 10px;
  border: none;
  float: left;
  text-align: center;
  width: 150px;
  min-height: 150px;
  list-style-type: none;
}

.icon-btn-lst .icon-btn .suitepicon {
  font-size: 64px;
}

.icon-btn-lst .icon-btn {
  display: block;
  background-color: $campaign-type-bg;
  margin: 10px;
  border: none;
  float: left;
  text-align: center;
  width: 150px;
  min-height: 150px;
  list-style-type: none;
}

.icon-btn-lst .icon-btn:hover {
  background-color: $campaign-type-bg-hover;
}

.icon-btn-lst .icon-btn a:hover {
  background-color: $campaign-type-bg-hover;
}

.icon-btn-lst .icon-btn img {
  margin-top: 10px;
  margin-bottom: 20px;
}

.icon-btn-lst .icon-btn a {
  display: block;
  color: $campaign-type-color;
  padding: 10px;
  width: 100%;
  height: 100%;
}


/*//////// MEDIA QUERIES //////////*/

@media (min-width: 750px) {
  form[name="wizform"] div.wizard-unique-elem {
    width: 500px;
  }
}

@media (max-width: 1130px) {
  form[name="wizform"] div.wizard-unique-elem {
    width: 300px;
  }
}

@media (min-width: 768px) and (max-width: 1000px) {
  /*help*/
  form[name="wizform"] div.wizard-unique-elem {
    width: 700px;
  }
}

@media only screen and (min-device-width: 480px) and (max-device-width: 980px) {
  form[name="wizform"] div.wizard-unique-elem {
    width: 400px;
  }
}

@media (min-width: 980px) {
  form[name="wizform"] div.wizard-unique-elem {
    width: 900px;
  }
}

@media (min-width: 999px) and (max-width: 1024px) {
  form[name="wizform"] div.wizard-unique-elem {
    width: 900px;
  }
}

@media (min-width: 1024px) {
  form[name="wizform"] div.wizard-unique-elem {
    width: 1000px;
  }
}

@media (min-width: 1280px) {
  #cal-edit {
    margin: 0 0 0 200px;
  }
  form[name="wizform"] div.wizard-unique-elem {
    width: 1200px;
  }
}


/* campaign wizard backgrounds and commons */

form[name="wizform"] .other.view {
  background: none;
}

form[name="wizform"] .other.view .edit.view {
  width: 100%;
}

form[name="wizform"] .other.view td:nth-of-type(1) {
  display: table-cell;
  background: none;
  float: none;
  width: auto;
}

form[name="wizform"] .other.view td:nth-of-type(2) {
  display: table-cell;
  background: none;
  float: none;
  width: auto;
}

form[name="wizform"] .other.view td {
  display: table-cell;
  background: none;
  float: none;
  width: auto;
}

form[name="wizform"] .other.view td {
  height: auto;
}

/* campaign wizard home start page */

form[name="wizform"] fieldset legend {
  padding: 0;
}

.progression-container {
  margin: 0 0 8px 0;
  padding:0;
}

ul.progression {
  margin: 0;
  padding:0;
}

.progression li {
  color: $campaign-progression-color;
  border-radius: 0px;
  display: inline-block;
  padding: 5px 20px 5px 20px;
  margin-right: 16px;
  width: auto;
  margin-top: 4px;
}

.progression li:nth-child(1)::before {
  border: none transparent;
}

.progression li::before, .progression li::after {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  border-color: transparent;
  border-radius: 0px;
}

.progression li::before {
  border-width: 16px;
  margin-top: -7px;
  margin-left: -20px;
}

.progression li::after {
  border-width: 14px;
  margin-top: -5px;
  margin-left: 20px;
}

.progression li:hover {
  cursor: pointer;
}

.progression li:last-child::after {
  border-left-color: transparent;
}

.progression li div, .progression li div *{
  text-decoration: none;
  padding-left: 8px;
  display: inline;
}

.wizard-summary-right .test, .wizard-summary-right .schedule {
  background-position: center center;
  text-align: center;
  vertical-align: bottom;
  padding: 8px;
}

.wizard-step-info {
  margin-bottom: 12px;
}

form[name="wizform"] .icon-btn-lst .icon-btn a {
  margin: 0;
  line-height: 20px;
  text-align: center;
}

form[name="wizform"] .icon-btn-lst .icon-btn a img {
  float: none;
}

form[name="wizform"] .icon-btn-lst .icon-btn a br {
  display: block;
  clear: both;
  float: none;
}

/* campaign wizard progress bar stuff */
form[name="wizform"] .progression-container .progression .nav-steps {
  background-color: $campaign-progression-bg;
}

form[name="wizform"] .progression-container .progression .nav-steps:hover {
  background-color: $campaign-progression-bg-hover;
  color: $campaign-progression-color-hover;
}

form[name="wizform"] .selected  {
  background-color: $campaign-progression-bg-active;
}

.progression .nav-steps:hover {
  background-color: $campaign-progression-bg-active;
}

form[name="wizform"] .progression-container .progression .nav-steps.selected {
  background-color: $campaign-progression-bg-active;
}

form[name="wizform"] .progression li.selected::after {
  border-left-color: $campaign-progression-bg-active;
}

form[name="wizform"] .progression li:hover{
  border-left-color: $campaign-progression-bg-hover;
}

form[name="wizform"] .progression li:hover::after{
  border-left-color: $campaign-progression-bg-hover;
}

form[name="wizform"] .progression li::after {
  border-left-color: $campaign-progression-bg;
}

form[name="wizform"] .progression li::after {
  border-left-color: $campaign-progression-bg;
}

form[name="wizform"] .progression li::before {
  border-left-color: $main-bg;
}


/* campaign wizard (top) buttons */

form[name="wizform"] input[type="button"]{
  margin-left: 10px;
  margin-right: 10px;
}

form[name="wizform"] input[type="submit"] {
  margin-left: 10px;
  margin-right: 10px;
}

/* campaign wizard forms */

form[name="wizform"] td {
  margin-bottom: 24px;
}

form[name="wizform"] .emptyField {
  display: none;
}

form[name="wizform"] tr.emptyRow {
  display: none;
}

/* target list page */

form[name="wizform"] .template-container-full div.row {
  padding: 5px 20px;
}

form[name="wizform"] .other.view img, .other.view svg {
  width: initial;
  height: initial;
}

form[name="wizform"] .input-sm {
  height: 42px;
}

form[name="wizform"] div.target-list-create br {
  display: none;
}
form[name="wizform"] div.target-list-create input[type="button"] {
  margin-top: 16px;
}

/* Template editor */

div.wizard-unique-elem .header-2 {
  font-size: $page-font-size;
  font-weight: bold;
}

#email_template_editor .mozaik-thumbnail.ui-draggable.ui-draggable-handle * {
  float: none;
}

#email_template_editor ul.mozaik-thumbs li.mozaik-thumbnail {
  padding: 0;
}

#email_template_editor .mozaik-thumbnail.ui-draggable.ui-draggable-handle * {
  margin: 5px;
}

#email_template_editor ul.mozaik-list {
  background-color: $table-header-bg;
}


/* Marketing page */

div.step2 table tr td, div.step2 table th td {
  width: 80%;
}

form[name="wizform"] .other.view div.step2 table.edit.view tr:first-child td:first-child {
  width: 100%;
}

form[name="wizform"] .wizard-box span.helpmsg {
  bottom: -36px;
}

/* summary page */

form[name="wizform"] .target_message br,
form[name="wizform"] .alert_messages br {
  display: none;
}

form[name="wizform"] .diagnose_messages td {
  margin-bottom: 0;
}

form[name="wizform"] br.emptyRow {
  display: none;
}

form[name="wizform"] div.step3 .button-group a.btn img {
  margin-top: 0;
}

.li-tick .suitepicon {
  line-height: 48px;
  font-size: 24px;
}

.li-tick .suitepicon-action-confirm {
  color: $alert-success-text;
}

.li-tick .suitepicon-action-clear {
  color: $alert-danger-text;
}

/* non-email campaign / budget page */

form[name="wizform"] div.wizard-unique-elem div.step2 .other.view td:nth-of-type(1) {
  display: table-cell;
  float: none;
}

form[name="wizform"] div.wizard-unique-elem div.step2 .other.view td:nth-of-type(2) {
  display: table-cell;
  float: none;
}

form[name="wizform"] div.wizard-unique-elem div.step2 table tr td {
  display: table-cell;
  float: none;
  width: auto;
}


/* desktop / tablet / mobile fix */

@media (max-width: 1024px) {

  form[name="wizform"] table.other.view tr td.edit.view table tr td input {
    max-width: 355px;
  }

  form[name="wizform"] table.other.view tr td.edit.view table tr td textarea {
    max-width: 355px;
  }

  @media (max-width: 980px) {

    form[name="wizform"] table.other.view tr td.edit.view table tr td {
      display: block;
      float: left;
    }
    form[name="wizform"] table.other.view tr td.edit.view table tr td:nth-of-type(odd) {
      width: 300px;
      max-width: 300px;
      min-width: 300px;
    }
    form[name="wizform"] table.other.view tr td.edit.view table tr td:nth-of-type(even) {
      width: 500px;
      max-width: 500px;
      min-width: 500px;
    }

    /* a common fix */

    form[name="wizform"] .edit tr {
      border-bottom: none;
    }

    /* Subscriptions fix */

    form[name="wizform"] div.wizard-unique-elem div.step2 table tr td {
      float: left;
    }

    form[name="wizform"] div.wizard-unique-elem div.step2 table tr td .header-4 {
      max-width: 255px;
    }

    /* marketing fix */

    form[name="wizform"] table.other.view tr td div.wizard-unique-elem div.step2 table {
      background: none;
    }

    form[name="wizform"] table.other.view tr td div.wizard-unique-elem div.step2 table.edit.view tr td {
      display: block;
      float: left;
    }

    form[name="wizform"] table.other.view tr td div.wizard-unique-elem div.step2 table.edit.view tr td:nth-of-type(odd) {
      width: 300px;
      max-width: 300px;
      min-width: 300px;
    }

    form[name="wizform"] table.other.view tr td div.wizard-unique-elem div.step2 table.edit.view tr td:nth-of-type(even) {
      width: 500px;
      max-width: 500px;
      min-width: 500px;
    }

    /* Target List fix */

    form[name="wizform"] table.other.view tr td.edit.view div.wizard-unique-elem div.step2 .row .col-xs-12.col-sm-4 {
      width: auto;
    }

    form[name="wizform"] table.other.view tr td.edit.view div.wizard-unique-elem div.step2 table.detail.view tr td table tr.detail.view td  {
      float: left;
    }

    form[name="wizform"] table.other.view tr td.edit.view div.wizard-unique-elem div.step2 table.detail.view tr td table tr.detail.view th {
      float: left;
    }

    form[name="wizform"] table.other.view tr td.edit.view div.wizard-unique-elem div.step2 .target-list-table {
      min-width: 335px;
    }

    @media (max-width: 480px) {
      form[name="wizform"] table.other.view tr td.edit.view table tr td input {
        max-width: 255px;
      }

      form[name="wizform"] table.other.view tr td.edit.view table tr td textarea {
        max-width: 255px;
      }

      form[name="wizform"] .wizard-box {
        width: auto;
        min-width: 0;
      }

      /* target-list fix */

      form[name="wizform"] table.other.view tr td.edit.view div.wizard-unique-elem div.step2 .target-list-table {
        min-width: 255px;
      }

    }

  }

}


.mozaik-inner {
  background-color: $email-template-bg;
}

.panel-toolbar,
#wizform > table > tbody > tr > td,
.template-panel-container,
.template-panel-container {
  background-color: $panel-bg !important;;
}

.template-panel {
  background-color: $panel-bg !important;
}

.button-group-separator {
  border-right: $panel-default-border;
}

.target-list,
.target-list-create,
.target-list-table {
  background-color: $panel-bg !important;
}
