<template>
  <div class="dashboard-settings">
    <section v-if="selectedSectionIndex === 1" class="visual-settings">
      <b-form>
        <b-form-group>
          <template v-slot:label>
            Dashboard Name <span class="text-danger">*</span>
          </template>
          <b-form-input
            v-model="dashboardData.name"
            type="text"
            id="dashboard-name"
          ></b-form-input>
          <span class="error-msg" v-if="!validations.visual.name.isValid">
            <span
              v-for="(error, index) in validations.visual.name.errorMessages"
              :key="index"
              >{{ error }}</span
            >
          </span>
        </b-form-group>
        <b-form-group label="Dashboard Background Color">
          <div class="dashboard-background">
            <div class="color-wrap">
              <b-form-input
                placeholder="Select Color"
                v-model="dashboardData.settings.background_color"
                type="text"
              ></b-form-input>
              <b-form-input
                v-model="dashboardData.settings.background_color"
                type="color"
                @input="selectBackgroundColor"
              ></b-form-input>
            </div>
            <div class="or">OR</div>
            <div class="gradient-wrap">
              <multiselect
                v-model="dashboardData.settings.background_gradient"
                placeholder="Select Gradient"
                :options="gradientOptions"
                @select="selectBackgroundGradient"
                :select-label="''"
                :selected-label="''"
                :deselect-label="''"
                :allow-empty="false"
              >
                <template slot="singleLabel" slot-scope="props">
                  <span class="option__desc">
                    <span class="option__title">{{ props.option.title }}</span>
                  </span>
                </template>
                <template slot="option" slot-scope="props">
                  <div class="option">
                    <div
                      class="option_gradient"
                      :style="{ background: props.option.background }"
                    ></div>
                    <div class="option_title">
                      {{ props.option.title }}
                    </div>
                  </div>
                </template>
              </multiselect>
            </div>
          </div>
        </b-form-group>
        <b-form-group label="Sidebar Background Color">
          <div class="dashboard-background">
            <div class="color-wrap">
              <b-form-input
                placeholder="Select Color"
                v-model="dashboardData.settings.sidebar_color"
                type="text"
              ></b-form-input>
              <b-form-input
                v-model="dashboardData.settings.sidebar_color"
                type="color"
                @input="selectSidebarColor"
              ></b-form-input>
            </div>
            <div class="or">OR</div>
            <div class="gradient-wrap">
              <multiselect
                v-model="dashboardData.settings.sidebar_gradient"
                placeholder="Select Gradient"
                :options="gradientOptions"
                @select="selectSidebarGradient"
                :select-label="''"
                :selected-label="''"
                :deselect-label="''"
                :allow-empty="false"
              >
                <template slot="singleLabel" slot-scope="props">
                  <span class="option__desc">
                    <span class="option__title">{{ props.option.title }}</span>
                  </span>
                </template>
                <template slot="option" slot-scope="props">
                  <div class="option">
                    <div
                      class="option_gradient"
                      :style="{ background: props.option.background }"
                    ></div>
                    <div class="option_title">
                      {{ props.option.title }}
                    </div>
                  </div>
                </template>
              </multiselect>
            </div>
          </div>
        </b-form-group>
        <b-form-group label="Selected Panel Color">
          <div class="color-wrap">
            <b-form-input
              v-model="dashboardData.settings.selected_panel_color"
              type="text"
            ></b-form-input>
            <b-form-input
              v-model="dashboardData.settings.selected_panel_color"
              type="color"
            ></b-form-input>
          </div>
        </b-form-group>
        <b-form-group label="Dashboard Thumbnail">
          <span class="image-info"
            >(Only JPG, PNG, JPEG files are allowed)</span
          >
          <div v-if="showFileSizeLimitError" class="file-size-type-error">
            File size should be less than 1MB
          </div>
          <div v-if="showFileTypeError" class="file-size-type-error">
            Uploaded file format is not valid
          </div>
          <b-form-file
            placeholder="Choose a file or drop it here..."
            drop-placeholder="Drop file here..."
            accept="image/*"
            @change="uploadThumbnail"
          ></b-form-file>
          <img
            width="300"
            class="attached-image"
            v-if="uploadedFile"
            :src="uploadedFile"
          />
          <template v-else>
            <div v-if="dashboardData.avatar" class="thumbnail-preview">
              <img :src="dashboardData.avatar" alt="" />
            </div>
          </template>
        </b-form-group>
      </b-form>
    </section>
    <section v-if="selectedSectionIndex === 2">
      <b-form-group label="Client Name">
        <b-form-input
          v-model="dashboardData.settings.client_name"
          placeholder="Enter Client Name"
          type="text"
          id="dashboard-name"
        ></b-form-input>
      </b-form-group>
      <b-form-group label="Client Logo">
        <span class="logo-info">(Only JPG, PNG, JPEG files are allowed)</span>
        <div v-if="showInvalidLogoError" class="file-size-type-error">
          {{ showInvalidLogoError }}
        </div>
        <b-form-file
          placeholder="Choose a file or drop it here..."
          drop-placeholder="Drop file here..."
          accept="image/*"
          @change="uploadLogo"
        ></b-form-file>
        <img
          width="300"
          class="attached-image"
          v-if="uploadedLogo"
          :src="uploadedLogo"
        />
        <div
          v-if="dashboardData.settings && dashboardData.settings.client_logo"
          class="thumbnail-preview"
        >
          <img :src="dashboardData.settings.client_logo" alt="" />
        </div>
      </b-form-group>
    </section>
    <section v-if="selectedSectionIndex === 3" class="tabs-section">
      <div class="lists-table panels-table">
        <draggable
          :list="list"
          :key="tabComponentKey"
          class="list-group"
          ghost-class="ghost"
          @start="dragging = true"
          @end="dragging = false"
        >
          <div
            v-for="element in list"
            class="list-group-item"
            :key="element.id"
          >
            <b-card no-body class="mb-1 full-width">
              <b-card-header
                header-tag="header"
                class="p-1"
                role="tab"
                v-b-toggle="element.id.toString()"
              >
                <div v-if="editedPanel !== element.id" class="element-name">
                  {{ element.name }}
                  <!-- <span style="margin-left: 5px;">
                    <font-awesome-icon icon="chevron-down" />
                  </span> -->
                </div>
                <b-form-input
                  v-if="editedPanel === element.id"
                  v-model="element.name"
                  type="text"
                  class="edit-name-input"
                ></b-form-input>
                <div v-if="editedPanel !== element.id" class="actions" style="float: right">
                  <span style="margin-left: 5px;" v-if="element.subpanels && element.subpanels.length">
                    <font-awesome-icon icon="chevron-down" />
                  </span>
                  <svg class="icon pencil" @click="editPanel(element)">
                    <use
                      xlink:href="/assets/img/mads-common-icons.svg#pencil"
                    ></use>
                  </svg>
                  <svg class="icon dustbin" @click="deletePanel(element)">
                    <use
                      xlink:href="/assets/img/mads-common-icons.svg#dustbin"
                    ></use>
                  </svg>
                </div>
                <div v-if="editedPanel === element.id" class="actions update-panel-icon">
                  <svg class="icon tick" @click="updatePanel(element)">
                    <use
                      xlink:href="/assets/img/mads-common-icons.svg#tick"
                    ></use>
                  </svg>
                </div>
              </b-card-header>
              <b-collapse
                :id="element.id.toString()"
                accordion="my-accordion"
                role="tabpanel"
              >
                <b-card-body>
                  <div
                    class="list-group-item"
                    v-for="subpanel in element.subpanels"
                    :key="subpanel.id"
                  >
                    <div v-if="editedPanel !== subpanel.id">
                      {{ subpanel.name }}
                    </div>
                    <b-form-input
                      v-if="editedPanel === subpanel.id"
                      v-model="subpanel.name"
                      type="text"
                      class="edit-name-input"
                    ></b-form-input>
                    <div v-if="editedPanel !== subpanel.id" class="actions">
                      <svg class="icon pencil" @click="editPanel(subpanel)">
                        <use
                          xlink:href="/assets/img/mads-common-icons.svg#pencil"
                        ></use>
                      </svg>
                      <svg class="icon dustbin" @click="deletePanel(subpanel)">
                        <use
                          xlink:href="/assets/img/mads-common-icons.svg#dustbin"
                        ></use>
                      </svg>
                    </div>
                    <div v-if="editedPanel === subpanel.id" class="actions update-panel-icon">
                      <svg class="icon tick" @click="updatePanel(subpanel)">
                        <use
                          xlink:href="/assets/img/mads-common-icons.svg#tick"
                        ></use>
                      </svg>
                    </div>
                  </div>
                </b-card-body>
              </b-collapse>
            </b-card>
          </div>
        </draggable>
        <span class="drag-info"
          >Drag and change the order in which tabs will be displayed</span
        >
        <!-- <b-button variant="primary" @click="saveOrder" class="save-order-btn">Save Order</b-button> -->
      </div>
    </section>
    <section v-if="selectedSectionIndex === 4">
      <b-form-group label="Select Timezone">
        <multiselect
          v-model="selectedTimezone"
          :options="timezones"
          :select-label="''"
          :selected-label="''"
          :deselect-label="''"
          :allow-empty="false"
        ></multiselect>
      </b-form-group>
    </section>
  </div>
</template>

<script>
import dasbhoardEventBus from '../../dashboardBus'
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data () {
    return {
      settings: {},
      dashboardData: {
        name: '',
        avatar: '',
        settings: {
          background_color: '#ffffff',
          background_gradient: '',
          sidebar_color: '#000000',
          sidebar_gradient: '',
          selected_panel_color: '#ffffff',
          client_name: '',
          client_logo: ''
        }
      },
      list: [],
      tabComponentKey: 0,
      editedPanel: null,
      timezones: [],
      selectedTimezone: null,
      showFileSizeLimitError: false,
      validations: {
        visual: {
          name: {
            required: true,
            errorMessages: [],
            isValid: true
          }
        }
      },
      showFileTypeError: false,
      uploadedFile: null,
      uploadedLogo: null,
      showInvalidLogoError: null,
      clientLogo: null,
      value: {
        title: 'Explorer',
        desc: 'Discovering new species!',
        img: 'static/posters/creatures.png'
      },
      gradientOptions: [
        {
          title: 'MegaTron',
          background: 'linear-gradient(to right, #c6ffdd, #fbd786, #f7797d)'
        },
        {
          title: 'MoonlitAsteroid',
          background: 'linear-gradient(to right, #0f2027, #203a43, #2c5364)'
        },
        {
          title: 'GradeGrey',
          background: 'linear-gradient(to right, #bdc3c7, #2c3e50)'
        },
        {
          title: 'JShine',
          background: 'linear-gradient(to right, #12c2e9, #c471ed, #f64f59)'
        },
        {
          title: 'DarkOcean',
          background: 'linear-gradient(to right, #373b44, #4286f4)'
        },
        {
          title: 'EveningSunshine',
          background: 'linear-gradient(to right, #b92b27, #1565c0)'
        },
        {
          title: 'KyooPal',
          background: 'linear-gradient(to right, #dd3e54, #6be585)'
        },
        {
          title: 'KyeMeh',
          background: 'linear-gradient(to right, #8360c3, #2ebf91)'
        },
        {
          title: 'Magic',
          background: 'linear-gradient(to right, #59c173, #a17fe0, #5d26c1)'
        },
        {
          title: 'SublimeLight',
          background: 'linear-gradient(to right, #fc5c7d, #6a82fb)'
        },
        {
          title: 'RainbowBlue',
          background: 'linear-gradient(to right, #00f260, #0575e6)'
        },
        {
          title: 'Mello',
          background: 'linear-gradient(to right, #c0392b, #8e44ad)'
        },
        {
          title: 'HoneyDew',
          background: 'linear-gradient(to right, #43c6ac, #f8ffae)'
        },
        {
          title: 'LoveCouple',
          background: 'linear-gradient(to right, #3a6186, #89253e)'
        },
        {
          title: 'Jupiter',
          background: 'linear-gradient(to right, #ffd89b, #19547b)'
        },
        {
          title: 'Nepal',
          background: 'linear-gradient(to right, #de6161, #2657eb)'
        },
        {
          title: 'Dusk',
          background: 'linear-gradient(to right, #2c3e50, #fd746c)'
        },
        {
          title: 'Transfile',
          background: 'linear-gradient(to right, #16bffd, #cb3066)'
        },
        {
          title: 'Forest',
          background: 'linear-gradient(to right, #5a3f37, #2c7744)'
        },
        {
          title: 'Greentodark',
          background: 'linear-gradient(to right, #6a9113, #141517)'
        },
        {
          title: 'FreshTurboscent',
          background: 'linear-gradient(to right, #f1f2b5, #135058)'
        },
        {
          title: 'Hersheys',
          background: 'linear-gradient(to right, #1e130c, #9a8478)'
        },
        {
          title: 'Predawn',
          background: 'linear-gradient(to right, #ffa17f, #00223e)'
        },
        {
          title: 'ManofSteel',
          background: 'linear-gradient(to right, #780206, #061161)'
        },
        {
          title: 'Virgin',
          background: 'linear-gradient(to right, #c9ffbf, #ffafbd)'
        },
        {
          title: 'Miaka',
          background: 'linear-gradient(to right, #fc354c, #0abfbc)'
        },
        {
          title: 'Amin',
          background: 'linear-gradient(to right, #8e2de2, #4a00e0)'
        },
        {
          title: 'Harvey',
          background: 'linear-gradient(to right, #1f4037, #99f2c8)'
        },
        {
          title: 'Flare',
          background: 'linear-gradient(to right, #f12711, #f5af19)'
        },
        {
          title: 'LoveandLiberty',
          background: 'linear-gradient(to right, #200122, #6f0000)'
        }
      ]
    }
  },
  props: {
    selectedSectionIndex: {
      type: Number,
      required: true
    },
    editMode: {
      type: Boolean,
      default: false
    },
    modalSections: {
      type: Array,
      default: () => []
    },
    dashboardService: {},
    currentUser: {},
    selectedDashboard: {}
  },
  methods: {
    customLabel ({ title, desc }) {
      return `${title} – ${desc}`
    },
    selectBackgroundGradient () {
      this.$set(this.dashboardData.settings, 'background_color', '')
    },
    selectBackgroundColor () {
      this.$set(this.dashboardData.settings, 'background_gradient', '')
    },
    selectSidebarGradient () {
      this.$set(this.dashboardData.settings, 'sidebar_color', '')
    },
    selectSidebarColor () {
      this.$set(this.dashboardData.settings, 'sidebar_gradient', '')
    },
    uploadLogo (file) {
      let clientLogo = null

      if (
        (file &&
          file.target &&
          file.target.files &&
          file.target.files[0].type.match('image.*') != null) ||
        (file &&
          file.dataTransfer &&
          file.dataTransfer.files &&
          file.dataTransfer.files[0].type.match('image.*') != null)
      ) {
        if (file.type === 'drop') {
          clientLogo = file.dataTransfer.files[0]
          if (clientLogo.size < 1000000) {
            this.clientLogo = file.dataTransfer.files[0]
            this.showInvalidLogoError = null
            this.uploadedLogo = URL.createObjectURL(this.clientLogo)
          } else {
            this.showInvalidLogoError = 'File size should be less than 1 MB'
          }
        } else {
          clientLogo = file.target.files[0]
          if (clientLogo.size < 1000000) {
            this.clientLogo = file.target.files[0]
            this.showInvalidLogoError = null
            this.uploadedLogo = URL.createObjectURL(this.clientLogo)
          } else {
            this.showInvalidLogoError = 'File size should be less than 1 MB'
          }
        }
      } else {
        this.showInvalidLogoError = 'Uploaded file format is not valid'
      }
    },
    uploadThumbnail (file) {
      let thumbnail = null

      if (
        (file &&
          file.target &&
          file.target.files &&
          file.target.files[0].type.match('image.*') != null) ||
        (file &&
          file.dataTransfer &&
          file.dataTransfer.files &&
          file.dataTransfer.files[0].type.match('image.*') != null)
      ) {
        if (file.type === 'drop') {
          thumbnail = file.dataTransfer.files[0]
          if (thumbnail.size > 1000000) {
            this.showFileSizeLimitError = true
            this.showFileTypeError = false
          } else {
            this.uploadedFile = URL.createObjectURL(file.dataTransfer.files[0])
            this.showFileSizeLimitError = false
            this.showFileTypeError = false

            this.dashboardData = this.$_.merge({}, this.dashboardData, {
              image: thumbnail
            })
          }
        } else {
          thumbnail = file.target.files[0]
          if (thumbnail.size > 1000000) {
            this.showFileSizeLimitError = true
            this.showFileTypeError = false
          } else {
            this.uploadedFile = URL.createObjectURL(file.target.files[0])
            this.showFileSizeLimitError = false
            this.showFileTypeError = false

            this.dashboardData = this.$_.merge({}, this.dashboardData, {
              image: thumbnail
            })
          }
        }
      } else {
        this.showFileTypeError = true
        this.showFileSizeLimitError = false
      }
    },
    getThumbnailUrl () {
      return "url('" + this.dashboardData.settings.client_logo + "')"
    },
    saveOrder () {
      let loader = this.$loading.show()
      let config = {
        orgId: this.currentUser.org.id,
        id: this.selectedDashboard.id
      }
      let panelsOrder = {}

      this.$_.forEach(this.list, (item, index) => {
        panelsOrder[item.id] = index + 1
      })

      let params = {
        settings: {
          panels_order: panelsOrder
        }
      }

      this.dashboardService.update(config, params).then((response) => {
        dasbhoardEventBus.$emit('reload-dashboard')
        loader.hide()
      })
    },
    getSettings () {
      let formData = new FormData()

      if (this.dashboardData && this.dashboardData.image) {
        formData.append(
          'image',
          this.dashboardData.image,
          this.dashboardData.image.name
        )
      }
      if (this.clientLogo) {
        formData.append(
          'settings[client_logo]',
          this.clientLogo,
          this.clientLogo.name
        )
      }

      formData.append('name', this.dashboardData.name)
      formData.append(
        'settings[background_color]',
        this.dashboardData.settings['background_color'] ||
          this.dashboardData.settings['background_gradient']['background']
      )
      formData.append(
        'settings[sidebar_color]',
        this.dashboardData.settings['sidebar_color'] ||
          this.dashboardData.settings['sidebar_gradient']['background']
      )
      formData.append(
        'settings[selected_panel_color]',
        this.dashboardData.settings['selected_panel_color']
      )
      formData.append(
        'settings[client_name]',
        this.dashboardData.settings['client_name']
      )
      formData.append('settings[timezone]', this.selectedTimezone)

      this.$_.forEach(this.list, (item, index) => {
        formData.append(`settings[panels_order][${item.id}]`, index + 1)
      })

      return formData
    },
    editPanel (panel) {
      this.editedPanel = panel.id
    },
    deletePanel (panel) {
      let loader = this.$loading.show()
      let config = {
        orgId: this.currentUser.org.id,
        dashboardId: this.selectedDashboard.id,
        id: panel.id
      }

      this.dashboardService.deleteDashboardPanel(config).then((response) => {
        dasbhoardEventBus.$emit('reload-dashboard')
        this.$_.remove(this.list, (item) => {
          return item.id === response.id
        })
        this.tabComponentKey += 1
        loader.hide()
      })
    },
    updatePanel (panel) {
      let loader = this.$loading.show()

      let params = { name: panel.name }
      let config = {
        orgId: this.currentUser.org.id,
        dashboardId: this.selectedDashboard.id,
        id: panel.id
      }

      this.dashboardService.updateDashboardPanel(config, params).then((response) => {
        this.editedPanel = null
        dasbhoardEventBus.$emit('reload-dashboard')
        loader.hide()
      })
    },
    handleAPIErrors (errors) {
      let source = this.$_.keys(errors)
      let sections = this.$_.keys(this.validations)
      let sourceSections = {}
      this.$_.forEach(this.modalSections, (section) => {
        let sectionFields = this.$_.map(section.fields, (field) => field)
        let sourceSectionFields = this.$_.intersection(sectionFields, source)
        sourceSections = this.$_.merge({}, sourceSections, {
          [section.key]: sourceSectionFields
        })
      })
      let visual = this.validations.visual
      for (const [key, value] of Object.entries(sourceSections)) {
        for (const validationKey of sections) {
          if (key === validationKey) {
            for (let i = 0; i <= value.length; i++) {
              let currentValue = value[i]
              if (currentValue === 'name') {
                visual = this.$_.merge({}, visual, {
                  name: {
                    errorMessages: errors[currentValue],
                    isValid: false
                  }
                })
              }
            }
          }
        }
      }
      this.validations = this.$_.merge({}, this.validations, {
        visual: visual
      })
    },
    isGradientColor (colorString) {
      return this.$_.includes(colorString, 'gradient')
    },
    getGradient (gradientString) {
      return this.$_.find(this.gradientOptions, (option) => {
        return option.background === gradientString
      })
    }
  },
  watch: {
    selectedDashboard () {
      // this.list = this.selectedDashboard.panels
    }
  },
  mounted () {
    this.list = this.$_.cloneDeep(this.selectedDashboard.panels)
    this.dashboardData = this.$_.merge(
      {},
      {
        name: this.selectedDashboard.name,
        avatar: this.selectedDashboard.avatar || '',
        settings: {
          background_color:
            this.selectedDashboard.settings &&
            !this.isGradientColor(
              this.selectedDashboard.settings['background_color']
            )
              ? this.selectedDashboard.settings['background_color']
              : '',
          background_gradient:
            this.selectedDashboard.settings &&
            this.isGradientColor(
              this.selectedDashboard.settings['background_color']
            )
              ? this.getGradient(
                this.selectedDashboard.settings['background_color']
              )
              : '',
          client_name: this.selectedDashboard.settings
            ? this.selectedDashboard.settings['client_name'] || ''
            : '',
          sidebar_color:
            this.selectedDashboard.settings &&
            !this.isGradientColor(
              this.selectedDashboard.settings['sidebar_color']
            )
              ? this.selectedDashboard.settings['sidebar_color']
              : '',
          sidebar_gradient:
            this.selectedDashboard.settings &&
            this.isGradientColor(
              this.selectedDashboard.settings['sidebar_color']
            )
              ? this.getGradient(
                this.selectedDashboard.settings['sidebar_color']
              )
              : '',
          selected_panel_color: this.selectedDashboard.settings
            ? this.selectedDashboard.settings['selected_panel_color']
            : '#FFFFFF',
          client_logo: this.selectedDashboard.settings
            ? this.selectedDashboard.settings['client_logo']
            : ''
        }
      }
    )
    this.selectedTimezone =
      this.selectedDashboard.settings &&
      this.selectedDashboard.settings['timezone']
        ? this.selectedDashboard.settings['timezone']
        : this.$moment.tz.guess()
    this.timezones = this.$moment.tz.names()
  }
}
</script>

<style lang="scss" scoped>
.dashboard-settings {
  height: 525px;
}
section {
  padding: 16px 0px 0px 30px;
}
.visual-settings {
  height: 460px;
  padding: 16px 0px 0px 30px;
  form {
    height: 460px;
    overflow: auto;
  }
}
.form-group {
  margin-right: 31px !important;
  label {
    color: #000000;
    font-weight: bold;
    font-size: 14px;
    line-height: 17px;
  }
  input,
  textarea {
    background: #f5fbff !important;
    font-size: 14px;
    line-height: 17px;
  }
}

.dashboard-background {
  display: flex;
  align-items: center;
  .or {
    padding: 0 10px;
  }
}

.full-width {
  width: 100%;
}

.element-name {
  display: inline-block;
}

.edit-name-input {
  display: inline-block;
  width: 92%
}

.update-panel-icon {
  float: right;
  margin-top: 8px;
}

.color-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #d7d7d7;
  width: 165px;
  height: 40px;
  border-radius: 4px;
  background: #f5fbff !important;
  span {
    display: inline-block;
    color: #303033;
    width: 60px;
    text-transform: uppercase;
  }
  input {
    border: none;
    &[type="text"] {
      width: 120px;
      height: 38px;
    }
    &[type="color"] {
      width: 30px;
      height: 32px;
      cursor: pointer;
      padding: 0;
      margin: 0 10px 0 auto;
    }
  }
}
.thumbnail-preview {
  max-width: 150px;
  height: auto;
  margin-top: 20px;
  border-radius: 4px;
  img {
    border-radius: 4px;
    width: 100%;
  }
}
.modal-body {
  padding: 0;
  .right-panel {
    padding-bottom: 100px;
  }
}
.right-panel {
  padding-bottom: 100px;
}
.panels-table {
  .icon {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0 5px;
    &.tick {
      width: 21px;
      height: 21px;
    }
  }
}
.list-group-item {
  display: flex;
  cursor: pointer;
  align-items: center;
  .actions {
    margin: 0 0 0 auto;
  }
}
.drag-info {
  padding: 10px 5px;
  display: inline-block;
  font-style: italic;
}
.save-order-btn {
  margin-top: 20px;
  float: right;
}
.list-group-item {
  background: #f5fbff !important;
}
.image-info {
  margin-left: 145px;
  font-size: 9px;
  margin-top: -21px;
  float: left;
}
.logo-info {
  margin-left: 80px;
  font-size: 8px;
  margin-top: -20px;
  float: left;
}
.file-size-type-error {
  color: red;
  margin-top: -23px;
  float: right;
  font-size: 12px;
}
.attached-image {
  padding-top: 15px;
  height: 150px;
  width: auto;
}
.tabs-section {
  margin-right: 31px;
  height: 100%;
  overflow: scroll;
}
</style>

<style lang="scss">
.bv-no-focus-ring.col-form-label.pt-0 {
  color: #000000;
  font-weight: bold;
  font-size: 14px;
  line-height: 17px;
}
.modal-body {
  padding: 0;
  .right-panel {
    padding-bottom: 100px;
  }
}
label.custom-file-label {
  background: #f5fbff !important;
  color: dimgray;
  line-height: inherit;
  cursor: pointer;
}
.dashboard-settings {
  .multiselect__tags {
    background: #f5fbff !important;
  }
  .multiselect__single {
    background: #f5fbff !important;
  }
  .multiselect__input {
    background: #f5fbff !important;
  }
  .option {
    display: flex;
    align-items: center;
  }
  .option_gradient {
    width: calc(100% - 120px);
    height: 45px;
    border-radius: 4px;
  }
  .option_title {
    width: 120px;
    padding-left: 20px;
  }
}
</style>
