/*
 * Base structure
 */



/*
 * Global add-ons
 */

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

h1 span.subheading {
  display:block;
  font-size:50%;
  font-weight:normal;
  margin-top:0.5em;
}

.flex, #required_content_fields {
  display:flex;
}
.flex.gap, #required_content_fields {
  gap:2rem;
}

img.rendered_img.backend {
    max-width: 15rem;
}

/* tabs */

.tabs-wrap {
  margin:1rem 0;
}

.tab-content.is-active {
  display:block;
}
.tab-content {
  display:none;
}

/* menu admin */

#menu_designer_wrap > * {
  min-width:40ch;
}
#menu_designer_wrap fieldset:not(.edit) .editonly {
  display:none;
}
#menu_designer_wrap fieldset.edit .noteditonly {
  display:none;
}
fieldset.edit {
  outline:2px solid orange;
}


input:required {
  border: 1px solid orange;
}
input:invalid {
  border:1px solid red;
}
input:required:valid {
  border: 1px solid green;
}
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"] {
  display: block;
}

.menu_node {
    /* margin: 1rem; */
    /* padding: 1rem; */
    /* border: 2px dotted #aaa; */
    position: relative;
    transition: all 0.3s ease;
    /* padding-top: 1rem; */
    background: rgba(0,0,0,0.1);
    margin-bottom: 1rem;
    /* margin-right:1rem; */
}
.menu_node.selected {
  outline: 2px solid orange;
}
#menu_designer_tree.menu_node {
  border:none;
  margin:0;
  padding:0;
  padding-top:0;
  background:transparent;
}
.menu_node_info {
  pointer-events: none;
  padding:1rem;
 /*  margin-bottom:2px; */
}
.menu_node_info .menu_designer_node_title {
  margin-bottom:0;
}

.insertbefore {
  box-shadow: inset 0 10px 0 0 #0a0;
}
.insertafter {
  box-shadow: inset 0 -10px 0 0 #0a0;
}
.insertinside {
  box-shadow: inset -10px 0 0 0 #0a0;
}
.insertbefore, .insertafter, .insertinside {
  transform:scale(1.04);
}
.menu_node.depth_1 {
  margin-left:4rem;
}
.menu_node.depth_2 {
  margin-left:8rem;
}
.menu_node.depth_3 {
  margin-left:12rem;
}
.menu_node.depth_4 {
  margin-left:16rem;
}

legend {
  margin-bottom:0 !important;
}

/*
 * Top navigation
 * Hide default border to remove 1px line.
 */
.navbar-fixed-top {
  border: 0;
}

.pull-right {
  float:right;
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
  display: none;
}
@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }

  
}

/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}
.nav-sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #428bca;
}


/*
 * Main content
 */

.main {
  padding: 20px;
}
@media (min-width: 768px) {
  .main {
    padding-right: 40px;
    padding-left: 40px;
  }
}


/*
 * Placeholder dashboard ideas
 */

.placeholders {
  margin-bottom: 30px;
  text-align: center;
}
.placeholders h4 {
  margin-bottom: 0;
}

.placeholder img {
  display: inline-block;
  border-radius: 50%;
}

.page-folder {
  color:#aaa;
  font-size:70%;
  font-style:italic;
}

@media screen and (max-width: 1023px) {
  nav {
    position: sticky !important;
    top: 0;
  }
  #navbarBasicExample.active {
    display: block;
  }
  .navbar-dropdown, .navbar-end {
    display: none;
  }
  .navbar-dropdown.active {
    display: block;
  }
  #configtabs {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid;
  }
  #configtabs ul {
    flex-direction: column;
    gap: 1rem;
  }
  #configtabs ul li {
    width: 99%; /* prevent border from being ut off due to bulmas overflow rules */
  }
  #configtabs ul li a {
    border-radius: 4px;
  }
  #all_users_table tr,
  #all_pages_table tr,
  table.table tr {
    display: flex;
  }
  #all_users_table th, #all_users_table td,
  #all_pages_table th, #all_pages_table td,
  table.table th, table.table td {
    display: none;
  }
  #all_users_table th:nth-of-type(1), #all_users_table th:nth-of-type(2), #all_users_table td:nth-of-type(1), #all_users_table td:nth-of-type(2),
  #all_pages_table th:nth-of-type(1), #all_pages_table th:nth-of-type(2), #all_pages_table th:nth-of-type(3), #all_pages_table td:nth-of-type(1), #all_pages_table td:nth-of-type(2), #all_pages_table td:nth-of-type(3),
  table.table th:nth-of-type(1), table.table th:nth-of-type(2), table.table td:nth-of-type(1), table.table td:nth-of-type(2) {
    display: block;
  }
  #all_users_table th:nth-of-type(2), #all_users_table td:nth-of-type(2),
  #all_pages_table th:nth-of-type(3), #all_pages_table td:nth-of-type(3),
  table.table th:nth-of-type(2), table.table td:nth-of-type(2) {
    width: 100%;
  }
  .drag_td {
    height: auto !important;
  }
  #content_search_controls {
    flex-direction: column;
    width: 100%;
    gap: 0 !important;
  }
  #user_operations.pull-right {
    float: left;
  }
  #content_type_section {
    flex-direction: column;
  }
  #content_type_wrap {
    flex-direction: column;
    gap: 3rem;
  }
}