*,
*:before,
*:after{
    box-sizing:border-box;
}
.toolbar{}

.tool-list{
    display:inline-block;
}
.tool{
    display:inline-flex;
}
.tool-btn{
 display:block;
 border:none;
 font-size:20px;
}
.tool-btn:hover{
    background-color:#999;
    cursor:pointer;
}
.HEoutput{
    height:400px;
    width:100%;
    border:1px #DDD solid;
    font-size:15px;
    overflow:scroll;
    resize:both;
    background-color:white;
}

.HEoutput .hte-heading:empty:after{
    content:"TEXT HERE....";
    padding-left:3px;
    font-size:23px;
    color:#777;
}
.hte_row{
    display:flex;
    flex-wrap: wrap;
}

.HEoutput .container{
    border:1px solid;
    padding:10px;
}

.col{
    border:1px solid;
    height:100px;
    width:100px;
    margin-left:5px;
}

.dropd-cont{
    position:relative;
}

.dropd{
    display:none;
    list-style:none;
    position:absolute;
    top:30px;
    background-color:#EEE;
    padding:4px;
    z-index:500000;
}
.dropd li{
  font-size:20px;
}
.dropd li:hover{
  background-color:white;
  cursor:pointer;
}
.selected[data-colspace]{
    background-color:#AAA;
}
.dropd .selected{
    background-color:#AAA;
}
.addColBtn{
   /* position: absolute;
    right: 1;*/
}
.HEoutput .addedcol{
   /* position:relative;*/
    min-height: 40px;
    border: 3px solid #DDD;
}
.addedcol > iframe{
  align-self:center;
}
.addedcol > img{
    align-self:center;
}

.HTMEditor .addedcol[selected]{
    border-color:#90bbff;
}
.htmlEditor{
    width:0px;
    height:0px;
}
.resize-img{
    padding:3px;
    border:1px solid #EEE;
    height:80%;
    width:max-content;
    resize:both;
    overflow:auto;
}
.resize-img img{
   width:100%;
   height:100%;
}
.HEoutput > img{
   resize:both;
width:100%;

}
.row img{
    width:100%;
}
.HTEpopupOverlay{
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    z-index:9000;
    display:none;
}
.HTEpopupOverlay > div{
    margin:auto;
    padding:30px;
    background-color:white;
    border:1px solid;
    width:max-content;
    margin-top:20%;
}
.HTEpopupOverlay li{
    list-style:none;
    text-align:center;
    margin-bottom:10px;
}
.HTEpopupOverlay ul{
    padding-left:0px;
}
#moviesList > ul > li:hover{
  background-color:blue;
  cursor:pointer;
  color:white;
}
.column-context-menu{
    background-color:white;
    border:solid 1px;
    position:fixed;
    z-index:3000;
}

.column-context-menu > div{
  padding:5px;
}

.column-context-menu > div:hover{

  background-color: #DDD;
  border-bottom:solid 1px;
  cursor:pointer;

}
#imagePropDialog {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
  }