html, body {
  height: 100%;
  margin: 0;
}

body.saving,
body.saving * {
    cursor: progress !important;          /* or ‘wait’ */
}


.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden; /* Prevent double scrollbar */
}

.preview-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
}

.tab-icons-col {
  width:90px;
}

.tab-icons-col .nav-pills .nav-link.active {background:none}
.tab-icons-col .nav-pills .nav-link.active .ti {background:#eee;}
.tab-icons-col a {line-height: 1}

.sticky-footer {
  flex-shrink: 0;
}

.form-panel-fullheight {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 0;
}

/* Make vertical nav full height inside the form card */
.form-panel-fullheight .row {
  flex: 1;
  display: flex;
  height: 100%;
}

.form-panel-fullheight .row > .col-auto.border-end {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  flex-shrink: 0; 
}

form#slideForm {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.select2-container--default .select2-selection--multiple {
  border: #DCE1E7 solid!important;

}

.trumbowyg-box, .trumbowyg-editor, .trumbowyg-textarea {min-height:100px!important}

.modal-body {padding:10px 10px 0px 10px}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {background-color:#FFF}
.card-header-tabs {background: #FFFFFF;}

.nav-pills .nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  text-align: center;
  padding: 0.75rem 0.5rem;
  color: #666;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.nav-pills .nav-link i {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
  color: #666;
}

.nav-pills .nav-link.active i {
		  /* 1.5x larger */
  color: #000;              /* black icon when active */
}

.nav-pills .nav-link.active {
  background-color: #EEEEEE;
  color: #000;
  font-weight: 500;
}

/* Make sure hover works for inactive icons */
.nav-pills .nav-link:hover i {
  color: #000; /* Black on hover */
  
}

/* Prevent hover from affecting active */
.nav-pills .nav-link.active:hover i {
  color: #000;
  
}

#slidePreview {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 1rem;
}

.preview-scaler {
  max-width: 100%;
  max-height: 100%;
  transform-origin: top left;
  /* scale: calc(min(100% / 1920, 100% / 1080)); */
  display: inline-block;
}

.template {
  width: 1920px;
  height: 1080px;
}