/* Dragable DIV's & Dropzone CSS */
#outer-dropzone {
  height: 160px;
}

#inner-dropzone {
  /*height: 120px;*/
}


.dropzone {
  background-color: #ccc;
  border: dashed 4px transparent;
  border-radius: 4px;
  margin: 10px auto 30px;
  padding: 10px;
  width: 80%;
  transition: background-color 0.3s;
}

.drop-active {
  border-color: #aaa;
}

.drop-active-red {
  border-color: #f00;
}

.drop-target {
  background-color: #29e;
  border-color: #fff;
  border-style: solid;
}

.drag-drop {
  display: inline-block;
  
  color: #fff;
  
  touch-action: none;
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);

  transition: background-color 0.3s;

}

.drag-drop.can-drop {
  color: #000;
  background-color: #4e4;
}

/* Zone CSS */
.yellow-zone
{
  background-color: #f4f142;
  height: 25%;
}
.green-zone
{
  background-color: #2e8c24;
  /*height: 160px;*/
  height: 25%;
  
  border-radius: 50%;
}
.red-zone
{
  background-color: #d61313;
  height: 25%;
}
/* Image CSS */
.drag-image
{
width:auto;
height: 10%;
min-height: 10%;

border-style: solid;
border-width: 1px;
border-color: black;

}
/* Resizing Draggable DIV's */
.resize-drag {
  background-color: #29e;
  color: white;
  font-size: 20px;
  font-family: sans-serif;
  border-radius: 8px;
  padding: 10px;
 
  width: 120px;
  touch-action: none;
  z-index: 1;
  /* This makes things *much* easier */
  box-sizing: border-box;
}

.resize-container {
  display: inline-block;
  width: auto;
  height: 100px;
}

/* This is where all LSB components should be inside (Makes it easier for drupal integration. */
#mainArea {
  z-index: 0;
  position: absolute;
  /* top: 10%; */
  left: 0;
  width: 100%;
  height: 100%;
  /* height: 90%; */
}


/* Drawer CSS */
/* Fixed sidenav, full height */
#elementSidebar {
  height: 100%;  
  width: 20%;
  position: absolute;
  /*top: 0;
  left: 0; */
  background-color: #d3d3d3;
  
  /* padding-top: 20px; */
}

/* Style the sidenav links and the dropdown button */
#elementSidebar a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.dropdown-btn
{
  color: white;
  background-color: #000000a1;
}

/* On mouse-over */
#elementSidebar a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
}

#upperMenuBar {
  position:absolute;
  top: 1%;
  right: 1%;
}

.upperMenuBarBtn, #elementGroupingModeLowerMenuBtn_ExitGroupingMode, #elementLinkingModeLowerMenuBtn_ExitGroupingMode, .dialogBoxBtn {
  color: white;
  background-color: #4c5057;
  border-color: #4c5057;
  border-radius: 5px;
  font-size: 1vw;
}

.upperMenuBarBtn:hover, #elementGroupingModeLowerMenuBtn_ExitGroupingMode:hover, #elementLinkingModeLowerMenuBtn_ExitGroupingMode:hover, .dialogBoxBtn:hover {
  opacity: 0.8;
}

/* *** Start of Link Connector Dialog box CSS *** */
#linkConnectorDialogBoxOuter, #elementNotepadDialogBoxOuter, #lsbAnalyticsDialogBoxOuter {
  top: 0px;
  left: 0px;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.8);
  display: none;  /* by default this dialogbox is not shown */
}
#linkConnectorDialogBoxForm, #elementNotepadDialogBoxForm, #lsbAnalyticsDialogBoxInner {
  width: 20%;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
  padding: 2%;
  background-color: rgb(255, 255, 255);
  border: 2px solid black;
  border-radius: 10px;
  text-align: center;
  font-size: 1vw;
}
#linkConnectorNotes, #elementNotepadText {
  width: 85%;
  resize: none;
  overflow: auto;
}
/* *** End of Link Connector Dialog box CSS *** */

#elementGroupingModeLowerMenu, #elementLinkingModeLowerMenu {
  display: none;
  position: absolute;
  right: 1%;
  bottom: 1%;
}

.currentSelectGroupedElements{
  border: red dashed 2px !important;
}

.currentSelectedElementForLinking {
  border : white dashed 2px !important;
}

#lsbAnalyticsDialogBoxElementContent, #lsbAnalyticsDialogBoxLinkContent {
  list-style-type: disc;
  text-align: left;
}

/* Main content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
  font-size: 20px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.active {
  background-color: #000000a1;
  color: white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  /*display: none;*/
  background-color: #d3d3d3;
  padding-left: 8px;
}

/* Optional: Style the caret down icon */


/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


  .large-dropzone 
    {
      height: 240px;
    }


.draggable
  {
 z-index: 1;
  }

.allContent
  {
  margin-left: 0%;
  height: auto;
}

.lsbBackground
  {

  /* Background Image for Main DIV */
  background-image:url(images/background/LSBboard16X9_Cropped.jpg);

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100vw 100vh;




  }


  /* jsPlumb Connecter CSS*/

/* ._jsPlumb_connector { z-index:100; } */



.dragg-image
{
width:auto;
height: 10%;
min-height: 10%;

border-style: solid;
border-width: 1px;
border-color: black;
}

.divCon
    {
    border:1px solid red;
    display:table;
    width:1%;
    height: 1%;
    }

.eleLabel
{

}



.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

/* Context Menu */
#contextMenuMain, .custom-menuColor {
    display: none;
    z-index: 1;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 3px;
}

#contextMenuMain, #contextMenuColor li {
    padding: 7px 10px;
    cursor: pointer;
}

#contextMenuMain, #contextMenuColor li:hover {
    background-color: #DEF;
}


.elementDefaultSize
  {
    /* Keep max-width here as it is needed for mobile, but will be removed when element is cloned */
    max-width: 19%;

    width:auto;
    height: 10%;
    min-height: 10%;
    border-style: solid;
    border-width: 1px; 
    border-color: black;
    text-align: center;
    margin-left: 2%;

  }


  .intImage
  {
    padding: 0;
  }


  .contentEditable
  {
    color : black;
  }