/**
 * 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".
 */
/**** Dashboard ***/

.modal-add-dashlet div.modal-content {
  width: 80%;
}

.dashletcontainer.col-33 {
  width: 100%;
}

.dashletcontainer {
  min-height: 132px;
}

.drop-location {
  min-height: 132px;
}

#pageContainer {
  .dashletcontainer {
    .hd {
      background-color: $dashlet-title-bg;
      padding: 0;
      margin: 0;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    .pagination {
      td {
        background-color: $dashboard-toolbar-bg;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        button {
          background:$transparent-color;
          padding: 2px;
          border-radius: 3px;
          width: auto;
          height: auto;
          &:disabled {
            padding: 0.3em 0.2em 0.3em 0;
          }
        }
      }
      span {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
}

.yui-module .hd {
  background: $dashlet-title-bg;
}

.yui-panel .hd {
  background: $dashlet-title-bg;
}

  // Fix the icons in the dashlet pagination.
#pageContainer .dashletcontainer .aor_reports .pagination h3 {
  margin: 0;
}

#pageContainer .dashletcontainer .aor_reports .pagination button {
  height: 16px;
  line-height: 16px;
  padding: 0 2px;
}

.dashletcontainer button[disabled], .dashletcontainer input[type="submit"][disabled], .dashletcontainer input[type="reset"][disabled], .dashletcontainer input[type="button"][disabled] {
  line-height: 100% ;
}

.dashletcontainer .button, .dashletcontainer input[type="submit"], .dashletcontainer input[type="button"] {
  line-height: 100% ;
}

#pageContainer .dashletcontainer .footable-visible a {
  padding-right: 20px;
}

#pageContainer .dashletcontainer .hd .icon {
  fill: $dashlet-title-color;
}

.dashletPanel thead {
  background-color: $dashlet-header-bg;
}

#moduleDashlets h3 {
  display: none;
  visibility: collapse;
}

#chartDashlets h3 {
  display: none;
  visibility: collapse;
}

#webDashlets h3 {
  display: none;
  visibility: collapse;
}

#toolsDashlets h3 {
  display: none;
  visibility: collapse;
}

#searchDashlets h3 {
  display: none;
  visibility: collapse;
}

ul.subpanelTablist li {
  margin: 0 0 0 3px;
  list-style: none;
  padding:0;
}

#dashletCategories {
  display: block;
  font-size: 13px;
  border-bottom-color: $active-tab-bg;
  height: 28px;
}

#dashletCategories .suitepicon {
  margin: 0 4px 0 4px;
}

#dashletCategories > li {
  display: inline-block;
  font-size: 13px;
}

#dashletCategories > li a {
  font-weight: 400;
  background-color: $default-tab-bg;
  color: $add-dashlet-tab-color;
  padding: 10px 20px 10px 10px;
  border: 1px solid transparent;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  text-transform: uppercase;
}

#dashletCategories > li a:link {
  font-weight: 400;
  background-color: $default-tab-bg;
  color: $add-dashlet-tab-color;
  padding: 10px 20px 10px 10px;
  border: 1px solid transparent;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  text-transform: uppercase;
}

#dashletCategories > li a:hover {
  font-weight: 400;
  background-color: $default-tab-bg;
  color: $add-dashlet-tab-color;
  padding: 10px 20px 10px 10px;
  border: 1px solid transparent;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  text-transform: uppercase;
}

#dashletCategories > li a:visited {
  font-weight: 400;
  background-color: $default-tab-bg;
  color: $add-dashlet-tab-color;
  padding: 10px 20px 10px 10px;
  border: 1px solid transparent;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  text-transform: uppercase;
}

#dashletCategories > li a:active {
  font-weight: 400;
  background-color: $default-tab-bg;
  color: $add-dashlet-tab-color;
  padding: 10px 20px 10px 10px;
  border: 1px solid transparent;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  text-transform: uppercase;
}

#dashletCategories > li a:focus {
  font-weight: 400;
  background-color: $default-tab-bg;
  color: $add-dashlet-tab-color;
  padding: 10px 20px 10px 10px;
  border: 1px solid transparent;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  text-transform: uppercase;
}

#dashletCategories > li.active a {
  background-color: $active-tab-bg;
  color: $add-dashlet-tab-color;
}

#dashletCategories > li.active a:link {
  background-color: $active-tab-bg;
  color: $add-dashlet-tab-color;
}

#dashletCategories > li.active a:hover {
  background-color: $active-tab-bg;
  color: $add-dashlet-tab-color;
}

#dashletCategories > li.active a:visited {
  background-color: $active-tab-bg;
  color: $add-dashlet-tab-color;
}

#dashletCategories > li.active a:active {
  background-color: $active-tab-bg;
  color: $add-dashlet-tab-color;
}

#dashletCategories > li.active a:focus {
  background-color: $active-tab-bg;
  color: $add-dashlet-tab-color;
}

#dashletCtrls {
  float: right;
}

#moduleDashlets h3,
#chartDashlets h3,
#toolsDashlets h3 {
  margin-top: 13px;
}

#dashletSearch table tr td input[type=button] {
  vertical-align: top;
}

.sugarFeedDashlet {
  overflow: auto;
  max-height: 375px;
}

.sugarFeedDashlet td.list th {
  display: none;
}

.sugarFeedDashlet td.list td[scope=col] {
  display: none;
}

.sugarFeedDashlet tr {
  height: auto;
}

.sugarFeedDashlet .byLineBox {
  width:100%;
  position:relative;
  overflow: hidden;
  font-size: 13px;
}

.sugarFeedDashlet blockquote {
  width:100%;
  position:relative;
  overflow: hidden;
  font-size: 13px;
}

.sugarFeedDashlet blockquote img
{
  width: 30px;
  height: 30px;
}

.sugarFeedDashlet .byLineBox .byLineLeft {
  float: left;
}

.sugarFeedDashlet .byLineBox .byLineRight {
  display: inline;
  font-size: 79%;
  float: right;
}

.sugarFeedDashlet {
  blockquote {
    input[type=submit] {
      background: $light-purple;
      &:hover {
        background: $thick-blue;
      }
    }
    form {
      table tr td:nth-child(2) {
        width: 100%;
        input[type=text] {
        width: 100%;
        background: $white;
        border: 1px solid $base-border-light-color;
      }
     }
    }
  }
}

.dashletPanel .hd .hd-center .dashletToolSet a {
  font-size: $dashlet-header-toolset-icon-font-size;
  color: $dashlet-btn-color;
  padding: 0 2px;
  line-height: $dashlet-header-toolset-icon-font-size;
}

.dashletPanel .hd .hd-center .dashletToolSet a:last-child {
  padding-right: 0;
}

.dashletPanelMenu.wizard.import .bd .screen {
  display: block;
  background-color: #fff;
  padding: 20px;
  border: 0 none;
  overflow-x: hidden;
  overflow-y: auto;
  width: auto;
  height: 487px;
}

div#chartDashlets {
  overflow-y: auto;
}

.dashletPanel {
  padding: 0;
  margin: 0 15px 15px 0;
}

.dashletTable {
  table-layout: fixed;
}

.hd-center {
  padding: 0;
  margin: 0;
}

.bd {
  padding: 0;
  margin: 0;
}

#moduleDashletsList {
  height: auto;
}

#dashletsList {
  overflow: hidden;
  max-height: 500px ;
}

#dashletsDialog_c {
  margin-top: -50px;
  margin-left: -125px;
}

td.dashlet-title {
  height: $dashlet-title-height + 4px;
  font-size: 15px;
}

.dashlet-title .suitepicon {
  font-size: $dashlet-header-icon-font-size;
}

#moduleDashletsList > table > tbody > tr > td {
  padding: 10px;
}

#basicChartDashletsList > table > tbody  > tr > td {
  padding: 10px;
}

#toolsDashletsList > table > tbody  > tr > td {
  padding: 10px;
}

#webDashletsList > table > tbody  > tr > td {
  padding: 10px;
}

#moduleDashletsList a {
  color: $link-color;
  margin: 5px;
}

#basicChartDashletsList a {
  color: $link-color;
  margin: 5px;
}

#toolsDashletsList a {
  color: $link-color;
  margin: 5px;
}

#webDashletsList a {
  color: $link-color;
  margin: 5px;
}

#moduleDashletsList a span {
  margin-left: 10px;
}

#basicChartDashletsList a span {
  margin-left: 10px;
}

#toolsDashletsList a span {
  margin-left: 10px;
}

#webDashletsList a span {
  margin-left: 10px;
}

#moduleDashletsList {
  padding: 10px;
  max-height: 375px ;
  border: 1px solid transparent;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

#basicChartDashletsList {
  padding: 10px;
  max-height: 375px ;
  border: 1px solid transparent;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

#toolsDashletsList {
  padding: 10px;
  max-height: 375px;
  border: 1px solid transparent;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

#webDashletsList {
  padding: 10px;
  max-height: 375px ;
  border: 1px solid transparent;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

#dashletsDialog_mask {
  display: none ;
  visibility: collapse ;
}

#dashletsDialog {
  display: none ;
  visibility: collapse ;
}

@media (max-width: 980px) {
  .dashletNonTable {
    display: none;
  }
  .dashletcontainer {
    position: relative;
    padding: 0;
    margin: 0;
    float: left;
    width: 100%;
  }
}

.dashletPanel .list tr th a:link {
  padding-right: 0;
}

.bd .dashletPanel .list-view-data-icon {
  color: $dashlet-action-color;
  font-size: $dashlet-action-icon-font-size;
  line-height: $dashlet-action-icon-font-size;
  margin: 0 2px 0 2px;
}

.bd .dashletPanel .list-view-data-icon:hover{
  text-decoration: none;
}

.dashletPanel .h3Row {
  background-color: $dashboard-titlt-bg;
  color: $default-btn-color;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.dashletPanel {
  .sort {
    position: relative;
    top: 0.3em;
  }
  tr.oddListRowS1 {
    text-align: center;
  em {
    font-style:normal;
    font-size: 1.2em;
    color: $black;
  }
  }
}

table #dashletPanel {
  .oddListRowS1 {
    td {
      padding: 14px;
    }
  }
  .evenListRowS1 {
    td {
      padding: 14px;
    }
  }
}

.h3Row {
  padding: 5px 10px 5px 10px;
  margin: 5px 0 5px 0;
}

.dashletPanel .h3Row h3 {
  font-size: 13px;
  font-weight: bold;
  color: $dashlet-title-color;
  margin: 0 0 0 10px;
  letter-spacing: 1px;
}

#dashletbuttons {
  color: $dashlet-btn-color;
  margin: 0 2px 0 2px;
}

#dashletbuttons:hover {
  opacity: 0.8;
}

.dashletToolSet {
  margin: 0 10px 0 0;
  svg {
    fill: $white;
  }
}

.yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel {
  top: initial;
  left: 0;
  right: auto;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  margin: 0 auto;
  border: none;
  max-width: 900px;
}

.yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel .container-close {
  top: 15px;
  right: 30px;
  color: #aaa;
  width: initial;
  text-indent: initial;
}

.yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel .hd {
  font-family: Lato, Lato, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  background: $main-alternate-bg;
  color: $main-font-color;
  padding: 15px 15px 42px 19px;
  margin: 0;
  border-bottom: solid 1px #ddd;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  line-height: 25.7143px;
  height: 25px;
}

.yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel .bd {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  overflow: auto;
  max-height: 650px;
}

.yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel .bd form table td input[type="checkbox"] {
  margin-top: 10px;
  height: 30px;
}

.yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel .bd form table.edit tr{
  display: flex;
  border-bottom: none;
  float: none;
  width: auto;
}

.yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel .bd form table.view td tr {
  display: block;
  border-bottom: none;
  float: none;
  width: auto;
}

.yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel .bd form table.edit tr td[scope=row]{
  display: block;
  list-style: none;
  float: left;
  width: auto;
}

.yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel .bd form table.view td tr td {
  display: block;
  float: left;
  width: auto;
}

.yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel .bd form table.edit tr td[scope=row] {
  width: 30%;
}

.yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel .bd form table tr td[scope=row][colspan="4"] {
  float: none;
}

.yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel .bd form table tr td[scope=row][colspan="4"] br {
  display: none;
}

.yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel .bd form table.edit tr td table tbody {
  display: table-row-group;
  border-color: inherit;
  float: initial;
  vertical-align: middle;
}

.yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel .bd form table.edit tr td table tbody tr {
  display: table-row;
  border-color: inherit;
  float: initial;
  vertical-align: inherit;
}

.yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel .bd form table.edit tr td table tbody tr td {
  display: table-cell;
  float: initial;
  vertical-align: inherit;
}

@media(min-width: 800px) {

  .yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel .bd form table.edit tr td[scope=row] {
    width: 20%;
  }
  .yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel .bd form table.edit tr td[valign=top] {
    float: left;
    width: 25%;
    padding-top: 0.7em;
  }
  .yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel .bd form table.edit tr:last-child{
    clear: both;
  }

  .yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel .bd form table.edit {
    position: relative;
  }

  .yui-skin-sam.masked #dlg.SuiteP-configureDashlet.yui-module.yui-overlay.yui-panel .bd form table.edit #edit_tabs {
    position: absolute;
    top: 20px;
    right: 40px;
  }
}

.dashletNonTable {
  padding: 10px 5px 10px 10px;
  background: #a99ac961;
  input[type=text] {
    width: 100%;
    background: $white;
    border: 1px solid $base-border-light-color;
  }
  input[type=submit] {
    background: $light-purple;
    &:hover {
      background: $thick-blue;
    }
  }
}

.dashletNonTable tr td:nth-child(1) {
  padding-right: 10px;
}

.dashletNonTable tr td:nth-child(2) {
  width: 100%;
}

.post_txt_username {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 30em;
  display: inline-block;
  vertical-align: middle;
  font-weight: bold;
}

.dashletNonTable tr td:nth-child(3) {
  padding-left: 6px;
  padding-right: 6px;
}

#add_dashlets {
  display: none;
}

#dashletresponsive {
  float: left;
}

.edit-dashboard-tabs .suitepicon {
  font-size: 18px;
  line-height: 18px;
}

.dashboardTbList {
  max-width: 90% ;
}

@media (max-width: 999px) and (max-height: 1024px) {
  #dashletsDialog_c {
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: 0;
    overflow: scroll;
    height: 70%;
  }
}

@media (min-width:750px) and (max-width:755px) {
  p.error {
    margin-top: 5em!important;
  }  
}

@media (max-width:1024px) {
  ul.nav-dashboard {
    li.active {
      a.first-tab-xs {
        .suitepicon {
          font-size: 8px;          
        }
      }
    }
  } 
}

@media (max-width: 1024px) {
  .dashletcontainer.col-50 {
    width: 100%;
  }

  table td[class*=col-] {
    display: block;
    clear: both;
    float: none;
    width: 100%;
  }

  table th[class*=col-] {
    display: block;
    clear: both;
    float: none;
    width: 100%;
  }

  .dashletcontainer {
    display: block;
    clear: both;
    float: none;
    width: 100%;
  }
}

@media (min-width: 1025px) {
  .dashletcontainer.col-50 {
    width: 50%;
  }
}

#dashboard {
  ul.nav-dashboard {
    li {
      display: inline-block;
      margin-right: 5px;
      a {
        border-radius: 4px;
        background: $dashboard-toolbar-bg;
        color: $white;
        line-height: 9px;
        font-size: 13px;
        letter-spacing: 1px;
        &:hover {
          background: $action-btn-hover-bg-color;
        }
      }
    }
    li.active {
      a {
        @media (max-width: 1200px) { 
          background: $dashboard-dropdown-btn; 
        }
        background: $dashboard-active-tab-bg;   
        &:hover {
          background: $action-btn-hover-bg-color;
        }     
      }
    }
  }
  #tab-actions {
    ul.dropdown-menu {
      .button {
        background: $dashboard-toolbar-bg;
        &:hover {
          background: $action-btn-hover-bg-color;
        }
      }
    }
  }
  .list tr th {
    color: $midnight-blue;
  }
}

#dashboard #tab-actions ul.dropdown-menu li {
  background: none;
  border-bottom: 1px solid $base-border-light-color;
}

#dashboard #tab-actions ul.dropdown-menu {
  background : $dashboard-toolbar-bg;
}

#dashboard #tab-actions > a.dropdown-toggle {
  background: $dashboard-toolbar-bg;
  padding-bottom: 6px;
  &:hover {
    background: $action-btn-hover-bg-color;
  }
}

.dashboard-title {
  display: flex;
  align-items: center;
}

.dashboard-title > span {
  margin-left: 0.7em;
}

.dashletcontainer {
  .dashletPanel {
    .bd {
      overflow-x: auto;
    }   
    .header-title {
      color: $white;
      white-space: nowrap;
      width: 100%;
    } 
  }
}  

.view-module-Home {
  textarea {
    background: $transparent-color;
  }
}