$color-gray: #c1c1c1;
$color-bg: #535353;

#dialog-section {
  overflow: hidden;
  height: 100%;
  position: relative;
	* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	}
}

#dialog-overlay-wrap {
  height: 100%;
  overflow: auto;
}

#dialog {
	user-select: text;
  position: relative;
  z-index: 10;
  display: inline-block;
  min-height: 0px;
  min-width: 48px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 13px;
  line-height: 15px;
  font-weight: 400;
	letter-spacing: 0.026em;
  margin: 80px 55px;
  
  [contenteditable] {
    position: relative;
    z-index: 0;
    outline: none;
		&:focus {
	    // background: #fff !important;
	    // color: #000 !important;
	  }
		&:hover {
			cursor: text;
		}
  }
	
  #dialog-title-bar {
    position: relative;
    overflow: hidden;
    text-align: center;
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid #b6b6b6;
    color: #333333;
    height: 20px;
    line-height: 20px;
    background: linear-gradient(to bottom, #e5e5e5 0%,#d3d3d3 100%);
	  border-radius: 6px 6px 0 0;
    /* padding: 0 13px; */
		div {
      position: absolute; // Chrome was doing just fine with max-width: 100%, but I needed to add this to make it work in firefox.
      right: 13px;
      left: 13px;
			&:focus {
				right: unset;
				left: unset;
        width: 100%;
			}
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; // There's a javscript fix in the "assets/js/panels/dialog.js" file. Look for id: #5945573415
		}
		div:focus {
			text-overflow: unset; // There's a javscript fix in the "assets/js/panels/dialog.js" file. Look for id: #5945573415
		}
  }
	
  #dialog-container {
  	overflow: hidden;
	  border-radius: 6px;
	  box-shadow: 0px 0px 2px rgba(0,0,0,.7), 0px 2px 30px 3px rgba(0,0,0,.4);
		 > .padding-box {
	    display: flex;
	    white-space: nowrap;
	    padding: 16px;
	    background: $color-bg;
	    min-height: 20px;
	    color: #dadada;
	  }
  }
  
  .pb-shrink {
    width: auto !important;
    height: auto !important;
    > .padding-box {
	    flex-grow: 0 !important;
	    justify-self: flex-start !important;
	    align-self: flex-start !important;
    }
  }
  
  // .padding-box > div {
  //   overflow: visible !important;
  // }
  
  .padding-box {
    > .divider-line {
      align-self: stretch;
      display: flex;
      > .padding-box {
        align-self: stretch;
      }
    }
  }
	.text-container {
		display: block;
	}
	
  // ORIENTATION ROW
  .orientation-row {
    display: flex;
    flex-direction: row;
    
    > div {
      display: flex;
      flex-direction: row;
    }
        
    // ALIGN CHILDREN
    &.align-children-vertical-top > div {
      align-items: flex-start;
    }
    &.align-children-vertical-center > div {
      align-items: center;
    }
    &.align-children-vertical-bottom > div {
      align-items: flex-end;
    }
    &.align-children-vertical-fill > div {
      align-items: stretch;
    }
    &.align-children-horizontal-left > div {
      justify-content: flex-start;
    }
    &.align-children-horizontal-center > div {
      justify-content: center;
    }
    &.align-children-horizontal-right > div {
      justify-content: flex-end;
    }
    &.align-children-horizontal-fill > div {
      justify-content: stretch;
      >div {
        flex: 1;
      }
    }
    
    // ALIGMENT
    > div > .alignment-vertical-top {
      justify-self: flex-start;
      margin-bottom: auto !important;
    }
    > div > .alignment-vertical-center {
      justify-self: center;
      margin-top: auto !important;
      margin-bottom: auto !important;
    }
    > div > .alignment-vertical-bottom {
      justify-self: flex-end;
      margin-top: auto !important;
    }
    > div > .alignment-vertical-fill {
      align-self: stretch;
    }
  }
	
	// ORIENTATION COLUMN
  .orientation-column {
    display: flex;
    flex-direction: column;
    
    > div {
      display: flex;
      flex-direction: column;
    }
    
    // ALIGN CHILDREN
    &.align-children-horizontal-left > div {
      align-items: flex-start;
    }
    &.align-children-horizontal-center > div {
      align-items: center;
      > .padding-box > div {
        text-align: center;
        .text-container {
          display: inline-block;
        }
      }
    }
    &.align-children-horizontal-right > div {
      align-items: flex-end;
      > .padding-box > div {
        text-align: right;
        .text-container {
          display: inline-block;
        }
      }
    }
    &.align-children-horizontal-fill > div {
      align-items: stretch;
    }
    &.align-children-vertical-top > div {
      justify-content: flex-start;
    }
    &.align-children-vertical-center > div {
      justify-content: center;
    }
    &.align-children-vertical-bottom > div {
      justify-content: flex-end;
    }
    &.align-children-vertical-fill > div {
      justify-content: stretch;
      > div {
        flex: 1;
      }
    }
    
      // ALIGMENT
    > div > .alignment-horizontal-left {
      align-self: flex-start;
    }
    > div > .alignment-horizontal-center {
      align-self: center;
    }
    > div > .alignment-horizontal-right {
      align-self: flex-end;
    }
    > div > .alignment-horizontal-fill {
      align-self: stretch;
    }
  }
	
	#dialog-container.orientation-row {
		flex-direction: column;
    > .padding-box {
      flex-direction: row;
    }
	}
  
  .group,
  .panel {
    /* display: inline-block; */
    align-items: flex-start;
    align-items: center;
  }
  
  .panel.orientation-row > *,
  .group.orientation-row > * {
    line-height: 15px;
    min-height: 15px;
  }
  .panel.orientation-column > *,
  .group.orientation-column > * {
    line-height: 13px;
    min-height: 13px;
  }
  
  .button {
    line-height: 23px;
    min-height: 23px;
  }
  
  & > .orientation-column > .padding-box {
    display: flex;
    flex-direction: column;
  }
  & > .orientation-row > .padding-box {
    display: flex;
    flex-direction: row;
  }
  
  .panel {
    position: relative;
    .title {
      align-self: flex-start;
      color: #f0f0f0;
      background: $color-bg;
      min-height: 13px;
      line-height: 13px;
      padding: 0px 5px;
      margin: 0 0 -24px 5px !important;
    }
    > .padding-box {
      align-self: stretch;
      justify-self: stretch;
      flex-grow: 1;
      min-width: 30px;
      min-height: 0px;
      border: 1px solid #3e3e3e;
      border: 1px solid darken($color-bg,5);
			margin-top: 19px;
      padding: 16px 16px;
    }
  }
  
  .padding-box {
    align-self: stretch;
    justify-self: stretch;
    flex-grow: 1;
    overflow: hidden;
  }
  
  // .orientation-row > .padding-box > div > .title,
  .padding-box > .panel.orientation-row > {
    .title {
      position: absolute;
      // top: 17px;
    }
    .padding-box {
      margin-top: 8px;
    }
  }
  // Correction for spacing <style> element...
  .padding-box > .panel.orientation-row:first-of-type > .title {
    top: 0px;
  }
  .orientation-row > .padding-box > .panel.orientation-row > .title {
    top: 0px;
  }
  
	.justify-left {
		text-align: left;
	}
	.justify-center {
		text-align: center;
	}
	.justify-right {
		text-align: right;
	}
	
  .play-video {
    color: #8a8a8a;
    font-size: 50px;
    padding: 50px 100px;
    transition: all 300ms linear;
    display: flex;
    white-space: nowrap;
    background: $color-bg;
    min-height: 20px;
  }
  
  &:hover .add-new-element {
    color: #a2a2a2;
    font-size: 60px;
  }
  
  .button {
    display: flex;
		.button-border {
      overflow: hidden;
      display: flex;
      flex-grow: 1;
      justify-content: center;
      flex-direction: column;
			border: 1px solid #c1c1c1;
			border-radius: 9999px;
      .text-container {
        display: block;
        padding: 0px 14px;
      }
			&:hover {
				// background: #cdcdcd;
        // color: $color-bg !important;
			}
		}
		&.default-button .button-border {
			border-width: 2px;
		}
  }
	
  [data-item-type="checkbox"],
	[data-item-type="radiobutton"],
	[data-item-type="Checkbox"],
	[data-item-type="RadioButton"] {
		text-align: left;
    // overflow: hidden;
    // text-overflow: ellipsis;
		div {
			text-align: left;
		}
	}
	
  .dropdownlist {
    display: flex;
  }
	
  .static-text,
  .edit-text > .edit-text-inner-wrap {
    vertical-align: middle;
		.os-content-glue,
    .text-container {
      display: inline-block;
      white-space: normal;
	    word-break: normal;
	    overflow-wrap: normal;
      vertical-align: middle;
    }
  }
  
  .static-text {
    overflow: hidden;
    // &:before {
    //   content: "";
    //   display: inline-block;
    //   vertical-align: middle;
    //   height: 100%;
    // }
    &:before {
      content: "";
      display: inline-block;
      vertical-align: middle;
      height: 100%;
    }
    .text-container {
      word-spacing: 0px;
      letter-spacing: 0.63px;
      line-height: 17.5px;
      font-size: 13.6px;
      font-weight: 300;
      box-sizing: border-box;
      width: 100%;
    }
  }
  
  .edit-text {
    // &:before {
    //   content: "";
    //   display: inline-block;
    //   vertical-align: middle;
    //   height: 100%;
    // }
    line-height: 19px;
		span.edit-text-inner-wrap {
      display: inline-block;
      // display: flex;
      align-items: center;
      cursor: text;
			overflow: auto;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
			min-height: 23px;
      padding: 0px 7px 0px;
      background: darken($color-bg,7);
      border: 1px solid lighten($color-bg,7);
      border-radius: 4px;
      text-align: left;
      &:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }
    }
    .os-content-glue,
    span.text-container {
      // white-space: inherit !important;
			// overflow: auto;
      // display: inline-block;
			// box-sizing: border-box;
    	// color: yellow !important;
	    font-size: 12.3px;
	    word-spacing: 1.30px;
	    letter-spacing: 0.54px;
	    line-height: 15px;
	    font-weight: 300;
      // vertical-align: top !important;
    }
		&.focused span {
			// background: #fff;
      background: darken($color-bg,12);
			// color: #fff !important;
		}
		
		&.justify-left > span {
      text-align: left;
		}
		&.justify-center > span {
			text-align: center;
		}
		&.justify-right > span {
			text-align: right;
		}
  }
  
	.vertical-tabbed-panel > .tab-container,
  .list-box {
    
		.inner-wrap {
			overflow: auto;
	    background: $color-bg;
	    border: 1px solid lighten($color-bg,10);
	    border-radius: 4px;
      align-self: stretch;
			flex-grow: 1;
		}
		
    ul, li {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    ul {
      
      &:after {
        content: '';
        display: inline-block;
        width: 100%;
        height: 12px;
      }
    }
    li {
      display: flex;
      flex-direction: column;
      cursor: pointer;
      white-space: nowrap;
      text-align: left;
      border-bottom: 1px solid lighten($color-bg,10);
      &.visible,
			&.selected,
			&:active {
        // background: #476785;
        // background: #3d4e5f;
        background: #345c80;
      }
    }
    span {
      flex-grow: 1;
      white-space: nowrap;
      display: inline-block;
      padding: 5px 5px 3px 5px;
    }
  }
	.vertical-tabbed-panel {
    
    > .tab-container {
  		align-self: stretch;
      margin-right: 5px;
  	}
    > .padding-box {
      padding: 0;
      > .tab {
    		align-self: stretch;
        > .padding-box {
          margin: 0;
    			border: none;
        }
      }
    }
  }
  
  .tree-view {
		display: flex;
    > .padding-box {
      margin: 0px;
      padding: 0px;
      padding-top: 2px;
      border: 1px solid lighten($color-bg,10);
      border-radius: 4px;
      overflow: hidden;
    }
  }
  
  .tree-view-item {
    .item-wrap {
      position: relative;
      padding-left: 14px;
			margin-bottom: 2px;
      &:before {
        content: "";
        position: absolute;
        right: -200%;
        bottom: 0px;
        left: -200%;
        // width: 500%;
        border-bottom: 1px solid lighten($color-bg,10);
      }
      .tree-view-arrow {
        cursor: pointer;
        display: none;
        position: absolute;
        top: 0;
        left: 0px;
				margin-top: 2.5px;
				margin-left: 2px;
        font-size: 10px;
        line-height: 10px;
        transition: transform .10s ease;
        svg.font-awesome-chevron-right {
          height: 9px;
          display: inline-block;
        }
      }
      .text-container {
				padding: 1px 3px 3px 0;
        text-align: left;
      }
    }
    > .padding-box {
      display: none;
      padding-left: 10px;
      overflow: visible;
    }
    &.tree-node > .item-wrap > .tree-view-arrow {
      display: inline-block;
    }
    &.expanded {
      > .item-wrap .tree-view-arrow {
				// margin-top: 2.5px;
        transform: rotate(90deg);
      }
      > .padding-box {
        display: block;
      }
    }
  }
  
  .divider-line {
    min-width: auto;
    min-height: auto;
    line-height: 0px;
    padding: 0px;
    margin: 0px !important;
    > .padding-box {
      border-color: #4b4b4b;
      min-width: 0;
      min-height: 0;
      padding: 0px;
      margin: 0px;
    }
  }
	
	// Slider
  // This tool helped a ton: https://github.com/danielstern/range.css
	
	input[type=range] {
	  -webkit-appearance: none;
	  width: 30px;
    flex-grow: 1;
    height: 13px;
	  margin: 6px 0;
    background: transparent;
	}
  .slider {
    display: flex;
  }
	// .orientation-row > .padding-box > .slider {
  //   &, input[type=range] {
  //     // width: auto;
  //   }
  // }
	// .orientation-column > .padding-box > .slider {
  //   &, input[type=range] {
  //     // width: 100% !important;
  //   }
  // }
	input[type=range]:focus {
	  outline: none;
	}
	input[type=range]::-webkit-slider-runnable-track {
	  width: 100%;
	  height: 2px;
	  cursor: pointer;
	  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
	  background: #747474;
	  border-radius: 0px;
	  border: 0px solid rgba(0, 0, 0, 0);
	}
	input[type=range]::-webkit-slider-thumb {
	  box-shadow: 0px 0px 0px 3px #535454, 0px 0px 0px #606161;
	  border: 1.5px solid #c7c7c7;
	  height: 13px;
	  width: 13px;
	  border-radius: 13px;
	  background: #535454;
	  cursor: pointer;
	  -webkit-appearance: none;
	  margin-top: -5.5px;
    &:active {
      background: #459ff4;
      border-color: #459ff4;
    }
	}
	input[type=range]:focus::-webkit-slider-runnable-track {
	  background: #939393;
	}
	input[type=range]::-moz-range-track {
	  width: 100%;
	  height: 2px;
	  cursor: pointer;
	  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
	  background: #747474;
	  border-radius: 0px;
	  border: 0px solid rgba(0, 0, 0, 0);
	}
	input[type=range]::-moz-range-thumb {
	  box-shadow: 0px 0px 0px 3px #535454, 0px 0px 0px #606161;
	  border: 1.5px solid #c7c7c7;
	  height: 13px;
	  width: 13px;
	  border-radius: 13px;
	  background: #535454;
	  cursor: pointer;
    &:active {
      background: #459ff4;
      border-color: #459ff4;
    }
	}
	input[type=range]::-ms-track {
	  width: 100%;
	  height: 2px;
	  cursor: pointer;
	  background: transparent;
	  border-color: transparent;
	  color: transparent;
	}
	input[type=range]::-ms-fill-lower {
	  background: #555555;
	  border: 0px solid rgba(0, 0, 0, 0);
	  border-radius: 0px;
	  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
	}
	input[type=range]::-ms-fill-upper {
	  background: #747474;
	  border: 0px solid rgba(0, 0, 0, 0);
	  border-radius: 0px;
	  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
	}
	input[type=range]::-ms-thumb {
	  box-shadow: 0px 0px 0px 3px #535454, 0px 0px 0px #606161;
	  border: 1.5px solid #c7c7c7;
	  height: 13px;
	  width: 13px;
	  border-radius: 13px;
	  background: #535454;
	  cursor: pointer;
	  height: 2px;
    &:active {
      background: #459ff4;
      border-color: #459ff4;
    }
	}
	input[type=range]:focus::-ms-fill-lower {
	  background: #747474;
	}
	input[type=range]:focus::-ms-fill-upper {
	  background: #939393;
	}

	


  .tabbed-panel {
    display: flex;
    flex-direction: column;
    > .tab-container {
      display: block !important;
      position: relative;
      height: 0px;
      top: 10px;
      // padding: 0 13px 0 13px;
      padding: 0 34px 0 12px;
      margin: 0;
      text-align: left;
      justify-self: flex-start;
      align-self: flex-start;
      
    	.tab {
        cursor: default;
    		display: inline-block;
        letter-spacing: 1px;
        padding-bottom: 1px;
    		border-bottom: 2px solid transparent;
        margin-left: 28px;
        &:first-child {
          margin-left: 0px;
        }
        // &.active,
        // &:hover {
        //   color: #46a0f5;
        // }
        &.visible {
    		  border-bottom: 2px solid #dadada;
        }
    	}
    }
    > .padding-box {
      display: flex;
      margin: 0 !important;
			padding: 29px 1px 1px 1px !important;
    }
  	> .padding-box > .tab {
      flex: 1;
      display: none;
  	}
    > .padding-box > .tab > .title {
      display: none;
    }
  	> .padding-box > .tab > .padding-box {
  		margin: 0 !important;
      border: none !important;
  	}
  }
  
  .vertical-tabbed-panel {
  	> .padding-box > .tab {
      flex: 1;
      display: none;
  	}
  }
  
	.tab-width-auto {
		min-width: auto !important;
		width: auto !important;
		min-height: auto !important;
		height: auto !important;
	}
  .visible-tab,
  .tab-temp-class {
    position: relative;
    z-index: 0;
    display: flex !important;
  }
	.tab-temp-class {
    align-self: flex-start !important;
    justify-self: flex-start !important;
		display: inline-block !important;
	}
	.tab-temp-hide-class {
    display: none !important;
	}
	
	.icon-button,
	.image-item {
    justify-items: center;
    align-items: center;
		img {
      display: inline-block;
		}
	}
  
  .icon-button {
		display: flex;
    justify-items: stretch;
    align-items: stretch;
    .inner-wrap {
      display: flex;
      flex-direction: row;
			flex-grow: 1;
      justify-items: center;
      align-items: center;
      justify-content: center;
      align-content: center;
      text-align: center;
      overflow: hidden;
      background-clip: padding-box;
      border-radius: 999999px;
      padding: 6px 10px;
			span {
				padding-right: 3px;
			}
    }
    &.icon-button-stroke .inner-wrap {
      border: 1px solid #fafafa;
    }
    .inner-wrap:hover  {
      background: #fff;
      color: $color-bg;
    }
    &:active .inner-wrap {
      background: #45a0f5;
    }
  }
	
	div.align-children-horizontal-fill.child-width-auto > .padding-box > div,
	div.parent-width-auto,
  div.align-children-horizontal-fill > .padding-box > .width-auto {
		width: auto !important;
    outline: 1px solid rgb(24,236,102);
	}
	div.align-children-vertical-fill.child-height-auto > .padding-box > div,
	div.parent-height-auto,
  div.align-children-vertical-fill > .padding-box > .height-auto {
		height: auto !important;
    outline: 1px solid red;
	}

  .disable-soft-wrap,
  .disable-soft-wrap .edit-text-inner-wrap,
  .disable-soft-wrap .text-container {
    white-space: nowrap !important;
  }
	
	.item-disabled {
		// position: relative;
		opacity: .40;
    
		.item-disabled { opacity: 1; } // Normalizes nested/disabled items
    
	}
  
  .disable-item {
    opacity: .40;
    .disable-item { opacity: 1; } // Normalizes nested/disabled items
    img {
      filter: grayscale(100%);
    }
    &.icon-button:hover .inner-wrap,
    &.icon-button:active .inner-wrap {
      background: transparent;
    }
    &#dialog-container {
      opacity: 1;
      > .padding-box > * {
    		opacity: .40;
      }
    }
  }
	
	.sdb-hidden {
		display: none !important;
	}
  
	.progress-bar {
    display: flex;
    min-width: 1px;
    min-height: 1px;
    > div {
      flex-grow: 1;
      overflow: hidden;
  		border-radius: 99999999px;
  		background: darken($color-bg, 4);
  		.progress-indicator {
  			background: #46a0f5;
  			float: left;
  			width: 50%;
  			height: 100%;
  		}
    }
	}
	
} // #dialog


// Idea that didn't work out
// body.dialog-animate-changes #dialog [data-item-type],
// body.dialog-animate-changes #dialog .padding-box {
// body.dialog-animate-changes #dialog,
body.dialog-animate-changes #dialog * {
  transition: all 250ms ease;
}

// Idea that didn't work out
.paint-target-for-deletion {
	background: #d63e3e;
}

@import
	'../misc/drop-list.scss',
	'../misc/radiocheck.scss',
  '../misc/cep-mode.scss',
  '../misc/sui-interface-colors.scss';