/**********************************/
/*      Default layout Styles     */
/**********************************/

.app-private-dashboard .container-widgets,
.app-private-dashboard .tile-spacer {
  clear: both;
}

.app-private-dashboard .dash-padder {
  padding: 15px 0px 0px 0px;
}

.app-private-dashboard .component-cpd-charting .svg-stats {
  margin-right: 7px;
  margin-left: 7px;
  display: block;
}

.app-private-dashboard .cpd-charts-wrapper {
  display: flex;
  justify-content: center;
}

.app-private-dashboard #channels-list .panel,
.app-private-dashboard #featured-content .panel,
.app-private-dashboard #recommended-content .panel,
.app-private-dashboard .default-tile.panel{
  display: flex;
  flex-direction: column;
  height: 370px;
}

.app-private-dashboard .tile {
  margin: 0px 0px !important;
}

.app-private-dashboard .default-tile.panel {
  cursor: pointer;
  text-align: left;
  background-color: #ffffff;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 7px;
  margin-right: 7px;
  padding: 0px;
  overflow: hidden;
  height: 370px;
}

.app-private-dashboard .default-tile.panel h2 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 0px;
  padding: 0px;
}

.app-private-dashboard .default-tile .img-container-top {
  flex: auto;
}

.app-private-dashboard .default-tile .img-container-top>div {
  height: 100%;
  width: 100%;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.app-private-dashboard .default-tile .tile-text {
  color: #000;
}

.app-private-dashboard .default-tile .panel-view-divider {
  background: #000;
  margin-top: 30px;
  margin-bottom: 30px;;
  height: 2px;
  width: 40px;
}

.app-private-dashboard .default-tile .panel-view-text{
  position: absolute;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 13px;
  bottom: 0;
}
  
.app-private-dashboard .default-tile .panel-view-arrow {
  content:"";
  background-image:url(/content/images/dashboard/arrow.svg);
  background-repeat:no-repeat;
  background-position:50%;
  background-size:cover;
  background-color: transparent;
  width:6px;
  height:10px;
  position:absolute;
  top:50%;
  margin-left:10px;
  transform:translateY(-5px);
  transition:margin-left .3s ease;
}

.app-private-dashboard .default-tile:hover .panel-view-arrow {
  margin-left: 30px;
}

.app-private-dashboard .border-highlight .panel {
  border-width: 3px;
}

.app-private-dashboard .border-highlight .panel:hover {
  border: 3px solid #000;
}

.app-private-dashboard .shadow-highlight .panel:hover {
  box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.3);
  transition: box-shadow 150ms ease-in;
  border-color: rgba(0, 0, 0, 0.2);
}

.app-private-dashboard .title-highlight .panel:hover h2 {
  text-decoration: underline;
}

.app-private-dashboard .rounded-edges .panel {
    border-radius: 15px;
    overflow: hidden;
    background-clip: padding-box;
}

.app-private-dashboard .default-tile.panel {
  height: 370px;
}

.app-private-dashboard .default-layout .component-search {
  margin-left: 7.5px;
  margin-right: 7.5px;
}

@media (min-width: 1800px) {
  .app-private-dashboard .container-widgets {
    max-width: 1800px;
    width: 1800px;
  }
}

@media (min-width: 1500px) and (max-width: 1799px) {
  .app-private-dashboard .container-widgets {
    max-width: 1500px;
    width: 1500px;
  }

  .app-private-dashboard #channels-list.container {
    width: 1200px;
  }
}

@media (min-width: 1200px) and (max-width: 1499px) {
  .app-private-dashboard .container-widgets {
    width: 1200px;
  }
}

@media (min-width: 1200px) and (max-width: 1499px) {
  .app-private-dashboard .default-tile.panel {
    height: 360px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .app-private-dashboard .default-tile.panel {
    height: 350px;
  }
}

/**********************************/
/* Layout demo-1 Dashboard Styles */
/**********************************/

.app-private-dashboard .demo-1-layout .banner-container .banner-item-wrapper {
  display: contents;
}

.app-private-dashboard .demo-1-layout #banner-item-1 {
  grid-column: span 4;
}

.app-private-dashboard .demo-1-layout #banner-item-2 {
  grid-column: span 8;
}

.app-private-dashboard .demo-1-layout .container-widgets .section-0 {
  margin-top: 15px;
}

.app-private-dashboard .demo-1-layout .container-widgets .widget {
  grid-column: span 4;
}

@media (max-width: 767px) {
  .app-private-dashboard .demo-1-layout #banner-item-1,
  .app-private-dashboard .demo-1-layout #banner-item-2 {
    grid-column: span 12;
  }
}

/**********************************/
/* Layout demo-2 Dashboard Styles */
/**********************************/

.app-private-dashboard .demo-2-layout .display-grid .carousel-inner {
  grid-column: span 12;
}

.app-private-dashboard .demo-2-layout .banner-container .banner-item {
  margin-left: 9%;
  margin-right: 9%;
}

.app-private-dashboard .demo-2-layout .container-widgets .section-0 {
  margin-top: 15px;
}

.app-private-dashboard .demo-2-layout .container-widgets .widget {
  grid-column: span 4;
}

/**********************************/
/* Layout demo-3 Dashboard Styles */
/**********************************/

.app-private-dashboard .demo-3-layout .banner-container .banner-item-wrapper {
  display: contents;
}

.app-private-dashboard .demo-3-layout #banner-item-1 {
  grid-column: span 8;
}

.app-private-dashboard .demo-3-layout #banner-item-2 {
  grid-column: span 4;
}

.app-private-dashboard .demo-3-layout .container-widgets .section-0 {
  margin-top: 15px;
}

.app-private-dashboard .demo-3-layout .container-widgets .widget {
  grid-column: span 4;
}

.app-private-dashboard .demo-3-layout .container-widgets .component-search {
  grid-column: 3/11;
}

@media (max-width: 991px) {
  .app-private-dashboard .demo-3-layout .container-widgets .component-search {
    grid-column: span 12 !important;
  }
}

@media (max-width: 767px) {
  .app-private-dashboard .demo-3-layout #banner-item-1,
  .app-private-dashboard .demo-3-layout #banner-item-2 {
    grid-column: span 12;
  }
}

/**********************************/
/* Layout demo-4 Dashboard Styles */
/**********************************/

.app-private-dashboard .demo-4-layout .banner-container .banner-item-wrapper {
  display: contents;
}

.app-private-dashboard .demo-4-layout #banner-item-1,
.app-private-dashboard .demo-4-layout #banner-item-2,
.app-private-dashboard .demo-4-layout #banner-item-3 {
  grid-column: span 4;
}

.app-private-dashboard .demo-4-layout .container-widgets .widget {
  grid-column: span 4;
}

.app-private-dashboard .demo-4-layout .container-widgets .component-tile-0,
.app-private-dashboard .demo-4-layout .container-widgets .component-tile-5 {
  grid-column: span 8;
}

.app-private-dashboard .demo-4-layout .container-widgets .component-tile-2,
.app-private-dashboard .demo-4-layout .container-widgets .component-tile-3 {
  grid-column: span 6;
}

.app-private-dashboard .demo-4-layout .container-widgets .component-tile-1,
.app-private-dashboard .demo-4-layout .container-widgets .component-tile-4 {
  grid-column: span 4;
}

.app-private-dashboard .demo-4-layout .container-widgets .component-search {
  grid-column: 3/11;
}

@media (max-width: 991px) {
  .app-private-dashboard .demo-4-layout .container-widgets .component-search {
    grid-column: span 12 !important;
  }
}

@media (max-width: 767px) {
  .app-private-dashboard .demo-4-layout #banner-item-1,
  .app-private-dashboard .demo-4-layout #banner-item-2,
  .app-private-dashboard .demo-4-layout #banner-item-3 {
    grid-column: span 12;
  }
}

/***********************************/
/*    Global demo layout Styles    */
/***********************************/

.app-private-dashboard .demo-1-layout .display-grid,
.app-private-dashboard .demo-2-layout .display-grid,
.app-private-dashboard .demo-3-layout .display-grid,
.app-private-dashboard .demo-4-layout .display-grid {
  display: grid;
  grid-gap: 15px;
	grid-template-columns: repeat(12, 1fr);
}

.app-private-dashboard .demo-1-layout .banner-container .banner-text,
.app-private-dashboard .demo-2-layout .banner-container .banner-text,
.app-private-dashboard .demo-3-layout .banner-container .banner-text,
.app-private-dashboard .demo-4-layout .banner-container .banner-text {
  max-width: initial;
}

.app-private-dashboard .demo-1-layout .container-widgets .widget .panel,
.app-private-dashboard .demo-2-layout .container-widgets .widget .panel,
.app-private-dashboard .demo-3-layout .container-widgets .widget .panel,
.app-private-dashboard .demo-4-layout .container-widgets .widget .panel {
  margin: 0px;
}

@media (min-width: 992px) {
  .app-private-dashboard .demo-1-layout .container,
  .app-private-dashboard .demo-2-layout .container,
  .app-private-dashboard .demo-3-layout .container,
  .app-private-dashboard .demo-4-layout .container {
    width: inherit;
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (max-width: 991px) {
  .app-private-dashboard .demo-1-layout .container-widgets .widget,
  .app-private-dashboard .demo-2-layout .container-widgets .widget,
  .app-private-dashboard .demo-3-layout .container-widgets .widget,
  .app-private-dashboard .demo-4-layout .container-widgets .widget {
    grid-column: span 6;
  }
}

@media (max-width: 767px) {
  .app-private-dashboard .demo-1-layout .container-widgets .widget,
  .app-private-dashboard .demo-2-layout .container-widgets .widget,
  .app-private-dashboard .demo-3-layout .container-widgets .widget,
  .app-private-dashboard .demo-4-layout .container-widgets .widget {
    grid-column: span 12;
  }
}