#layout_setting_form .bootstrap-duallistbox-container.row {
  margin: 0;
}

.layout-builder-nav-item {
  margin: 10px 10px;
  padding: 10px 5px;
  text-align: center;
  border-radius: 3px;
  display: block;
  height: 36px;
  width: 36px;
}

.layout-builder-nav-item.active {
  background-color: #e9e9e9;
}

.layout-placeholder {
  min-height: 39px;
  margin: 15px 0;
  outline: none;
}

.layout-placeholder--border {
  border: none;
}

.layout-builder-draggable-field {
  padding: 4px 10px 0 10px;
  border-radius: 2px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.23);
  margin-bottom: 10px;
  z-index: 1;
  background-color: white;

  .row {
    margin: 0 0;
  }

  .col-sm-7,
  .col-sm-5,
  .col-sm-10,
  .col-sm-12 {
    padding: 0;
  }

  .layout-builder-field-editable-toggle {
    display: inline-block;

    label {
      margin-bottom: 0;
    }
  }

  .layout-builder-draggable-item-handle {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
}

.layout-builder-draggable-field:hover {
  background-color: #f2f2f2;
  cursor: pointer;
}

.draggable-mirror {
  width: 300px;
}

#layout-builder-draggable-header-container1,
#layout-builder-draggable-header-container2,
#layout-builder-draggable-main-container1,
#layout-builder-draggable-main-container2,
#layout-builder-draggable-main-container3,
#layout-builder-draggable-side-container {
  .layout-builder-draggable-field {
    outline: none !important;
  }

  .layout-builder-draggable-item {
    box-shadow: none;
    z-index: 500;
    max-height: 40px;
    background-color: $page-background;
    margin-bottom: 15px;
  }
}

#layout-builder-draggable-trash-container {
  margin-top: 0;
  padding: 10px;
  border: 1px solid #e74c3c;
  box-shadow: 0 0 10px #e74c3c;
  border-radius: 3px;

  p {
    margin-top: 10px;
  }

  .fa.fa-times {
    font-size: 25px;
  }
}

.layout-builder-side-nav {
  min-height: 100%;
  border-right: 1px solid #e9e9e9;
  border-left: 1px solid #e9e9e9;
}

.light-border-bottom {
  border-bottom: 1px solid #f3f3f4;
}

.layout-builder-side-nav-available-table {
  padding: 10px 0;
}

.float-right {
  float: right;
}

.layout_builder_field_settings_form_back_btn {
  margin-right: 5px;
}

.min-height-100vh {
  min-height: 100vh;
}

.text-align-right {
  text-align: right;
}

.layout-builder-trash-can-item-put-back {
  border: 1px solid #9ecaed;
  box-shadow: 0 0 10px #9ecaed;
  border-radius: 3px;
}

.draggable-container--over {
  p > span {
    display: none;
  }
}

.layout-builder-layout {
  cursor: pointer;
}

.pad-left-none {
  padding-left: 0;
}

#layout-builder-draggable-side-container-wrapper {
  border: 1px solid #efefef;
  padding: 0 15px;
}

.table-record-placeholder {
  padding: 15px 0;
}

.table-record-placeholder-header {
  padding: 5px 0;

  h3 {
    margin: 10px auto 5px auto;
  }
}

.p-none {
  padding: 0;
}

a.layout_builder_selected_table_name {
  color: #676a6c;

  i.fa.fa-angle-right.float-right {
    font-size: 25px;
    margin-top: -4px;
  }
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 22px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #51b346;
}

input:focus + .slider {
  box-shadow: 0 0 1px #51b346;
}

input:checked + .slider::before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
  max-height: 22px;
  max-width: 40px;
}

.slider.round::before {
  border-radius: 50%;
}

.edit_view_builder {
  .form-group {
    margin-top: 25px;
  }
}

.layouts-layout_builder_topnavbar-breadcrumb {
  background-color: transparent;
}

.layouts-navbar {
  margin-bottom: 0;
}

.left-layout-link {
  color: gray;

  .logo-thumbnail {
    height: 35px;
    margin: 0 17px 0 16px;
  }
}

.draggable--original {
  min-width: 196px;
}

.editable-input {
  display: none;
  width: 50%;
  padding-left: 10px;
}

.editable-actions-wrapper {
  display: none;
}

#layout-preview-slider-container {
  width: 100%;
  height: 100vh;
}

.layout-preview-slider-item {
  width: 100%;
}

.clickable-row,
.task-queue-item {
  cursor: pointer;
}

.clickable-row:hover,
.task-queue-item:hover {
  background-color: #eaeaea;
}

.footable-sortable:hover {
  background-color: #eaeaea;
}

.toggle {
  margin-top: 2px;
  isolation: isolate;
  position: relative;
  height: 18px;
  width: 37px;
  border-radius: 15px;
  background: #d6d6d6;
  overflow: hidden;
}

.toggle-inner {
  z-index: 2;
  position: absolute;
  top: 1px;
  left: 2px;
  height: 16px;
  width: 33px;
  border-radius: 15px;
  overflow: hidden;
}

.active-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 200%;
  background: $boring-green;
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.05s linear 0.17s;
}

.toggle-state {
  display: none;
}

.indicator {
  height: 100%;
  width: 200%;
  background: white;
  border-radius: 13px;
  transform: translate3d(-75%, 0, 0);
  transition: transform 0.35s cubic-bezier(0.85, 0.05, 0.18, 1.35);
}

input:checked ~ .active-bg {
  transform: translate3d(-50%, 0, 0);
}

input:checked ~ .toggle-inner .indicator {
  transform: translate3d(25%, 0, 0);
}

.layout-builder--main-container {
  .col-md-4:first-child {
    padding-right: 7.5px;
  }

  .col-md-4:nth-child(2) {
    padding-right: 7.5px;
    padding-left: 7.5px;
  }

  .col-md-4:last-child {
    padding-left: 7.5px;
  }
}

.logo-element {
  padding: 10px;
}

.logo-element .thumbnail {
  width: 100%;
}
