/*@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");*/
@import url("https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp");

body {     
    background-color: #434343;
    color: white;
    font-family: "Courier New";             
}

/* create a grid of 3 colums and 2 rows;*/
.grid-container {
    display: grid;
    grid-template-columns: 220px calc(98vw - 400px) 180px;    /*  the 1st and the 3rd column occupy 20% of viewing area and the middle column (canvas) is 60% */
    grid-template-rows: 75px calc(98vh - 75px);  /* fix the row size to be only 95% of viewport  */    
}

.grid-item-11{
    display: flex;
    margin-top: 0px;
    border: 0px solid black;
    background-color: #434343;
    align-items: center;
    justify-content: center;
}

/* progress bar panel */
.grid-item-13{
    display: flex;
    margin-top: 0px;
    border: 0px solid black;
    background-color: #434343;
    align-items: center;
    justify-content: center;
}

/* right panel */
.grid-item-23{
    margin-top: 0px;
    border: 0px solid black;
    background-color: #434343;
    align-items: center;
    justify-content: center;
}

/* top panel */
.grid-item-12{
    position: relative;
    display: flex;
    font-size: 18px;
    font-family: "Courier New";
    border: 0px solid black; 
    margin-top: 5px;    
    align-items: center;
    justify-content: center;
}

/* left panel */
.grid-item-21{
    border: 0px solid black;
    /*margin-top: 10px;*/
    text-align: center;
    background-color: #434343;
}

/********************************* top panel ***********************************/

/* The containers below must be displayed inline because they are div elements and by default div gives a line break */

.welcomeHelpDiv {
  position: absolute; 
  left: 0px; 
  margin-left: 25px; 
  margin-top: -30px;
}

.canvasHelpDiv{
  display: inline-block; 
  margin-right: 20px; 
  margin-top: -17px;
}

.selectToolboxDiv{
  display: inline-block;  
}

.selectUnitDiv {    
    display: inline-block;
}
  
.selectMagnificationDiv{
    display: inline-block;
}
  
.setCanvasWidthDiv{
    display: inline-block;
}

.setCanvasHeightDiv{
    display: inline-block;
}

.displayXY{
  position: relative;
  /*bottom: 2px;*/
  /*text-align: right;*/
  display: inline-block; 
  font-weight: normal;
  font-size: 14px; 
  font-family: 'Courier New';  
  width: 150px;  
}

.showToolFileMainCanvasButton{    
    border: none;    
    background-color:  #636363;
    color: white;   
    font-weight: normal;
    font-size: 14px;  
    font-family: 'Courier New';
    width: 200px;          
    border-radius: 3px;  
}

/* text field to change toolbox name */
.changeToolBoxNameInputField{    
  border: none;    
  background-color:  #636363;
  color: white;   
  font-weight: normal;
  font-size: 14px;  
  font-family: 'Courier New';
}

/* number field for the canvas width */
.setCanvasWidthButton{
    position: relative;
    bottom: 2px;
    width: 50px;
    border: none;
    border-radius: 3px;
    text-align: right;
    background-color:  #636363;
    color: white;   
    font-weight: normal;
    font-size: 14px;  
    font-family: 'Courier New';
}

/* number field for the canvas height */
.setCanvasHeightButton{
    position: relative;
    bottom: 2px;
    width: 50px;
    border: none;
    border-radius: 3px;
    text-align: right;
    background-color:  #636363;
    color: white;   
    font-weight: normal;
    font-size: 14px;  
    font-family: 'Courier New';
}


/* drop-down field for the toolboxes */
.selectToolboxButton{
    position: relative;
    bottom: -2px;
    width: 140px;
    border: none;
    border-radius: 3px;
    text-align: right;
    background-color:  #636363;
    color: white;   
    font-weight: normal;
    font-size: 14px;  
    font-family: 'Courier New';
    margin-right: 7px;
    margin-bottom: 5px;
}

/* drop-down field for the toolboxes */
.customToolboxButton{
  display: block;
  position: relative;
  bottom: -2px;
  width: 140px;
  border: none;
  border-radius: 3px;
  text-align: right;
  background-color:  #636363;
  color: white;   
  font-weight: normal;
  font-size: 14px;  
  font-family: 'Courier New';
  margin-right: 7px;
}


/* drop-down field for the paper size */
.backgroundPaperSizeButton{
    position: relative; 
    bottom: 8px;
    width: 80px;
    border: none;
    border-radius: 3px;
    text-align: center;
    background-color:  #636363;
    color: white;   
    font-weight: normal;
    font-size: 14px;  
    font-family: 'Courier New';
    margin-right: 0px;
}

/* input field for custom paper size */
.myPaperSizeButton{
    position: relative; 
    width: 60px;
    border: none;
    border-radius: 3px;
    text-align: right;
    background-color:  #636363;
    color: white;   
    font-weight: normal;
    font-size: 12px;
    font-family: 'Courier New';
    bottom: 0px;
}

/* drop-down field for the autosave options */
.autoSaveButton{
  position: relative; 
  bottom: 7px;
  /*vertical-align: middle;*/
  width: 90px;
  border: none;
  border-radius: 3px;
  text-align: center;
  background-color:  #636363;
  color: white;   
  font-weight: normal;
  font-size: 14px;  
  font-family: 'Courier New';
  margin-right: 0px;
}

/* drop-down field for the units */
.selectUnitButton{
    position: relative;
    bottom: 2px;
    width: 50px;
    border: none;
    border-radius: 3px;
    text-align: right;
    background-color:  #636363;
    color: white;   
    font-weight: normal;
    font-size: 14px;  
    font-family: 'Courier New';
}

/* drop-down field for the zoom-in */
.selectMagnificationButton{
    position: relative; 
    bottom: 2px;
    width: 57px;
    border: none;
    border-radius: 3px;
    text-align: right;
    background-color:  #636363;
    color: white;   
    font-weight: normal;
    font-size: 14px;  
    font-family: 'Courier New';
}

/* all tooltips : text on hover */

.setCanvasWidthDiv .tooltiptext {
    visibility: hidden;
    width: auto;
    /*background-color:  #464545;*/
    background: none;
    /*color: #fff;*/
    color: #2196F3;
    text-align: center;
    border-radius: 6px;
    padding: 3px 3px;
    font-size: 12.5px;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    margin-top: -15px;
    /*left: 50%;*/
    /*margin-left: 10px;*/
  }
  
  .setCanvasWidthDiv:hover .tooltiptext {
    visibility: visible;
  }


.setCanvasHeightDiv .tooltiptext {
    visibility: hidden;
    width: auto;
    /*background-color:  #464545;*/
    background: none;
    /*color: #fff;*/
    color: #2196F3;
    text-align: center;
    border-radius: 6px;
    padding: 3px 3px;
    font-size: 12.5px;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    margin-top: -15px; 
    /*margin-left: 10px; */
  }
  
  .setCanvasHeightDiv:hover .tooltiptext {
    visibility: visible;
  }


.selectUnitDiv .tooltiptext {
    visibility: hidden;
    width: auto;
    /*background-color:  #464545;*/
    background: none;
    /*color: #fff;*/
    color: #2196F3;
    text-align: center;
    border-radius: 6px;
    padding: 3px 3px;
    font-size: 12.5px;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    margin-top: -15px;
  }
  
  .selectUnitDiv:hover .tooltiptext {
    visibility: visible;
  }

  .backgroundPaperSizeDiv .tooltiptext {
    visibility: hidden;
    width: auto;
    /*background-color:  #464545;*/
    background: none;
    /*color: #fff;*/
    color: #2196F3;
    text-align: center;
    border-radius: 6px;
    padding: 3px 3px;
    font-size: 12.5px;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    margin-top: 20px;
  }
  
  .backgroundPaperSizeDiv:hover .tooltiptext {
    visibility: visible;
  }


  .paperSizeSelectDiv .tooltiptext {
    visibility: hidden;
    width: auto;
    /*background-color:  #464545;*/
    background: none;
    /*color: #fff;*/
    color: #2196F3;
    text-align: center;
    border-radius: 6px;
    padding: 3px 3px;
    font-size: 12.5px;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    margin-top: 20px;    
  }
  
  .paperSizeSelectDiv:hover .tooltiptext {
    visibility: visible;
  }

.selectMagnificationDiv .tooltiptext {
    visibility: hidden;
    width: auto;
    /*background-color:  #464545;*/
    background: none;
    /*color: #fff;*/
    color: #2196F3;
    text-align: center;
    border-radius: 6px;
    padding: 3px 3px;
    font-size: 12.5px;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    margin-top: -15px;
  }
  
.selectMagnificationDiv:hover .tooltiptext {
  visibility: visible;
}


.displayXY .tooltiptext {
    visibility: hidden;
    width: auto;
    /*background-color:  #464545;*/
    background: none;
    /*color: #fff;*/
    color: #2196F3;
    text-align: center;
    border-radius: 6px;
    padding: 3px 3px;
    font-size: 12.5px;
    font-family: 'Courier New';
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    margin-top: -15px;
  }
  
  .displayXY:hover .tooltiptext {
    visibility: visible;
  }
  

/********************************* left panel ***********************************/

.fileButtonsDiv{
  margin-bottom: 15px;
}

.fileHelpDiv{
  position: absolute; 
  left:10px;
}

.backgroundPaperSizeDiv{
  display: inline-block;
  margin-bottom: 0px;  
}
.addEllipseRectDiv{
  margin-bottom: 15px;
  display: inline-block;
}

.addEllipseRectHelpDiv{
  position: absolute;
  left: 15px;
}

.simplifyHelpDiv{
  position: absolute;
  left: 15px;
}

.addFromLibraryDiv{
  margin-top: 5px;
  margin-bottom: 17px;
}

.addHandleDiv{
  margin-top: 5px;
  margin-bottom: 17px;
}

.addHandleHelpDiv{
  position: absolute;
  left: 15px;
}

.myHandleDiameterDiv{
  display: inline-block;
  position: relative; 
  bottom: 7px; 
  margin-left: 5px;
}

.rotateButtonsDiv{
  margin-bottom: 15px;
}

.rotateButtonsHelpDiv{
  position: absolute;
  left: 15px;
}

.alignButtonsDiv{
  margin-bottom: 15px;
}

.groupLayoutButtonDiv{
  margin-bottom: 15px;
}


.layoutButtonsDiv{
  margin-bottom: 15px;
}

.layoutButtonsHelpDiv{
  position: absolute;
  left: 15px;
}

.undoRedoButtonDiv{
  margin-bottom: 15px;
}

.categoryOfToolDiv{
  display: inline-block;
  margin-bottom: 15px;
}


/* main edit button class for the buttons on the left panel */
.editButton {
    background-color: #434343;
    border: none;
    color: white;
    /*padding: 7px 7px;*/
    /*margin-bottom: 10px;*/
    font-size: 16px;
    cursor: pointer;      
}


/* hover effect of displaying a text when over any editButton */
.editButton .tooltiptext {
    visibility: hidden;
    width: auto;
    /*background-color:  #464545;*/
    background: none;
    /*color: #fff;*/
    color: #2196F3;
    text-align: left;
    border-radius: 6px;
    padding: 3px 3px;
    font-family: 'Courier New';
    font-size: 12.5px;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }
  
.editButton:hover .tooltiptext {
    visibility: visible;
}

.editButton:focus {
  outline: none;
  box-shadow: none;
}

.editButton:hover {  
  background-color:  #2196F3;
  border-radius: 5px;
  transition: background-color 0.5s ease;
  -webkit-transition: background-color 0.5s ease;
}

/* main edit help button class for the buttons on the left panel */
.editButtonHelp {
  position: absolute;   
  background: none;
  /*background-color: #434343;*/
  border: none;
  color: #2196F3;
  /*padding: 7px 7px;*/
  /*margin-bottom: 10px;*/
  /*font-size: 5px;*/
  margin-left: -15px;
  margin-top: 5px;
  cursor: pointer;    
}


/* hover effect of displaying a text when over any editButton */
.editButtonHelp .tooltiptext {
    visibility: hidden;
    width: auto;
    /*background-color:  #464545;*/
    background: none;
    /*color: #fff;*/
    color: #2196F3;
    text-align: left;
    border-radius: 6px;
    padding: 3px 3px;
    font-family: 'Courier New';
    font-size: 12.5px;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -18px;
    left: -1px;
  }
  
.editButtonHelp:hover .tooltiptext {
    visibility: visible;
}

.editButtonHelp:active {
  outline: 0;
}

.editButtonHelp:focus {
  outline: 0;
}


/* past 30 days calendar for getting photos from server */
::placeholder {
  color: orangered;
}

.startDate {   
  display: inline-block;
  width: 120px;
  font-size: 12px;  
  font-family: 'Courier New';
  font-weight: normal;
  background-color:  #636363; 
  /*color: rgb(255, 105, 0);*/
  color: #2196F3;
  border: none;
  position: relative;
  top: -10px;  
}

.myRadii{
  display: inline-block;
}


.Handle{
  display: inline-block;
}



/* number fields to put in radii of ellipses, handles, heights, widths of rects*/
.myDiameterButton{
  position: relative; 
  width: 50px;
  border: none;
  border-radius: 3px;
  text-align: right;
  background-color:  #636363;
  color: white;   
  font-weight: normal;
  font-size: 12px;
  font-family: 'Courier New';
  bottom: 9px;
}


.myHandleDiameterButton{
    width: 50px;
    border: none;
    border-radius: 3px;
    text-align: right;
    background-color:  #636363;
    color: white;   
    font-weight: normal;
    font-size: 12px;
    font-family: 'Courier New';
}

.Handle .tooltiptext {
  visibility: hidden;
  width: auto;
  /*background-color:  #464545;*/
  background: none;
  /*color: #fff;*/
  color: #2196F3;
  text-align: center;
  border-radius: 6px;
  padding: 3px 3px;
  font-size: 12.5px;    
  font-family: 'Courier New';

  /* Position the tooltip */
  position: absolute;  
  margin-top: 25px;      
  z-index: 1;    
}

.Handle:hover .tooltiptext {
  visibility: visible;
}


.myRadii .tooltiptext {
  visibility: hidden;
  width: auto;
  /*background-color:  #464545;*/
  background: none;
  /*color: #fff;*/
  color: #2196F3;
  text-align: center;
  border-radius: 6px;
  padding: 3px 3px;
  font-size: 12.5px;    
  font-family: 'Courier New';

  /* Position the tooltip */
  position: absolute;   
  margin-top: 20px;     
  z-index: 1;    
}

.myRadii:hover .tooltiptext {
  visibility: visible;
}

.myHandleDiameterDiv .tooltiptext {
  visibility: hidden;
  width: auto;
  /*background-color:  #464545;*/
  background: none;
  /*color: #fff;*/
  color: #2196F3;
  text-align: center;
  border-radius: 6px;
  padding: 3px 3px;
  font-size: 12.5px;    
  font-family: 'Courier New';

  /* Position the tooltip */
  position: absolute;   
  margin-top: 14px;     
  z-index: 1;    
}

.myHandleDiameterDiv:hover .tooltiptext {
  visibility: visible;
}

/* drop-down field for the layout algorithms */
.layoutAlgorithmsButton{
  position: relative; 
  bottom: 8px;
  width: 80px;
  border: none;
  border-radius: 3px;
  text-align: center;
  background-color:  #636363;
  color: white;   
  font-weight: normal;
  font-size: 14px;  
  font-family: 'Courier New';
  margin-right: 0px;
  left: -10px; 
}

/* drop-down field for the library of tools */
.addFromLibraryButton{
  position: relative; 
  bottom: 2px;
  width: 80px;
  border: none;
  border-radius: 3px;
  text-align: center;
  background-color:  #636363;
  color: white;   
  font-weight: normal;
  font-size: 14px;  
  font-family: 'Courier New';
  margin-left: 20px;  
}

/* drop-down field for socket options */
.personalToolLibraryOptionsButton{
  position: relative; 
  top: 0px;
  left: -7px;
  vertical-align: top;
  width: 200px;
  height: 150px;
  border: none;
  border-radius: 3px;
  text-align: center;
  background-color:  #636363;
  color: white;   
  font-weight: normal;
  font-size: 12px;  
  font-family: 'Courier New';
  margin-right: 0px;  
}

/* drop-down field for socket options */
.socketNutDriveOptionsButton{
  position: relative; 
  top: 0px;
  left: -7px;
  vertical-align: top;
  width: 200px;
  height: 150px;
  border: none;
  border-radius: 3px;
  text-align: center;
  background-color:  #636363;
  color: white;   
  font-weight: normal;
  font-size: 12px;  
  font-family: 'Courier New';
  margin-right: 0px;  
}

/* drop-down field for socket options */
.socketDepthOptionsButton{
  position: relative; 
  top: 9px;
  vertical-align: top;
  width: 90px;
  border: none;
  border-radius: 3px;
  text-align: center;
  background-color:  #636363;
  color: white;   
  font-weight: normal;
  font-size: 12px;  
  font-family: 'Courier New';
  margin-right: 0px;  
}

/* drop-down field for the category of tool */
.js-example-basic-single .categoryOfToolButton {
  position: relative;
  bottom: -2px;
  width: 180px;
  border: none;
  text-align: right;
  background-color:  #636363;
  color: white;   
  font-weight: normal;
  font-size: 14px;  
  font-family: 'Courier New';
  margin-right: 7px;  
}

/* drop-down field for the subcategory of tool */
.subcategoryOfToolButton{
  position: relative;
  bottom: -2px;
  width: 180px;
  border: none;
  text-align: right;
  background-color:  #636363;
  color: white;   
  font-weight: normal;
  font-size: 14px;  
  font-family: 'Courier New';
  margin-right: 7px;
}

/* select2 class used for category and subcategory */
.select2-results__options{
  font-family: 'Courier New';
  font-size: 14px ;
  background-color:  #636363;
  max-height: 200px;
  overflow-y: auto
}

.categoryPresent {
  color:black;
}
.categorySelected {
  background-color: #8aD4F8;
}

/* change these directly in the select2.min.css */
.select2-selection__rendered{
  font-family: 'Courier New';
  font-size: 14px ;
  background-color:  #636363;
  border-style: none;
  color: white;  
  overflow-y: auto;
}

/* change these directly in the select2.min.css */
.select2-selection--single{
  font-family: 'Courier New';
  font-size: 14px ;
  background-color:  #434343;
  border: none;
  color: white;  
  overflow-y: auto;
  margin-bottom: 5px;
}

/********************************* Detailed Editor ***********************************/

.detailedEditorHelpDiv{
  position: absolute; 
  left: 20px;
}

.showFileNameEditor{
  /*border: none;    
  background-color:  #636363;
  color: white;*/
  font-family: 'Courier New';
  font-size: 14px;
  margin-bottom: 10px;
}

/* slider for tool editor smoothing */
.slidecontainer {
  width: 100%; /* Width of the outside container */    
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 55%; /* Full-width */
  height: 7px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  border-radius: 5px;
  margin-bottom: 24px;
}
  
/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 20px; /* Set a specific slider handle width */
  height: 20px; /* Slider handle height */
  background: white; /* white background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 20px; /* Set a specific slider handle width */
  height: 20px; /* Slider handle height */
  background: white; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

/* label field */
.myLabelButton{    
  border: none;    
  background-color:  #636363;
  color: white;   
  font-weight: normal;
  font-size: 14px;  
  font-family: 'Courier New';
  width: 150px;          
  border-radius: 3px;  
}

input[type="number"] {
  width:45px;
}


/********************************* right panel ***********************************/

.exportDXFButton{
  margin-bottom: 7px;
}

.exportPDFButton{
  margin-bottom: 15px;
}

.paperSizeSelectDiv{
  display: inline-block;
}

.overlapButtonDiv{
  margin-bottom: 15px;
}

.finalCheckButtonDiv{
  display:inline-block;
  margin-bottom: 15px;
}

.rightPanelHelpDiv{
  display: inline-block;
  position: relative;
  margin-bottom: 25px;
  margin-left: 10px;
}

.paperSizeSelectButton{
    position: relative;
    bottom: 0px;
    top: -7px;
    width: 80px;
    border: none;
    border-radius: 3px;
    text-align: right;
    background-color:  #636363;
    color: white;   
    font-weight: normal;
    font-size: 14px;  
    font-family: 'Courier New';
}

/* overlap toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 18px;
  top: -5px;
  background-color: #636363;
  border-radius: 3px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.roundslider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #636363;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 3px;
  /*border-radius: 34px;
  border-radius: 50%;*/
}

.roundslider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: #d3d3d3;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 3px;
}

input[type="checkbox"]:checked + .roundslider {
  background-color: #2196F3;
}

input[type="checkbox"]:focus + .roundslider {
  box-shadow: 0 0 1px #2196F3;
}

input[type="checkbox"]:checked + .roundslider:before {
  -webkit-transform: translateX(22px);
  -ms-transform: translateX(22px);
  transform: translateX(22px);
}


.overlapWidth{
  display: inline-block;
}
.overlapWidth .tooltiptext {
  visibility: hidden;
  width: auto;
  /*background-color:  #464545;*/
  background: none;
  /*color: #fff;*/
  color: #2196F3;
  text-align: center;
  border-radius: 6px;
  padding: 3px 3px;
  font-size: 12.5px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  margin-top: 27px; 
}

.overlapWidth:hover .tooltiptext {
  visibility: visible;
}

.myShadowWidth{
  position: relative;
  bottom: 8px;
  margin-left: -5px;
  width: 30px;
  border: none;
  border-radius: 3px;
  text-align: right;
  background-color:  #636363;
  color: white;   
  font-weight: normal;
  font-size: 12px;  
  font-family: 'Courier New';
}

.overlapButtonIcon .tooltiptext {
  visibility: hidden;
  width: auto;
  /*background-color:  #464545;*/
  background: none;
  /*color: #fff;*/
  color: #2196F3;
  text-align: center;
  border-radius: 6px;
  padding: 3px 3px;
  font-size: 12.5px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  margin-top: 27px; 
}

.overlapButtonIcon:hover .tooltiptext {
  visibility: visible;
}

.switch{
  display: inline-block;
}
.switch .tooltiptext {
  visibility: hidden;
  width: auto;
  /*background-color:  #464545;*/
  background: none;
  /*color: #fff;*/
  color: #2196F3;
  text-align: center;
  border-radius: 6px;
  padding: 3px 3px;
  font-size: 12.5px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  margin-top: 24px; 
}

.switch:hover .tooltiptext {
  visibility: visible;
}


/* output display message (on the right panel)*/
.displayOutputMessageButton{    
  border: none;    
  background-color:  #636363;  
  font-weight: normal;
  font-size: 14px;  
  color :#2196F3;  
  color : white;
  font-family: 'Courier New';
  overflow: auto;
}

.displayOutputMessageButton::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: #f1f1f1;
  }
  
.displayOutputMessageButton::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #a9a9a9;
}

/* stop button for the magic Organizer etc.*/
.stopButton {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: orangeRed;
  border: 5px;
  border-radius: 5px;
  color: white;
  margin-left: 40px;
  margin-top: 50px;
  /*padding: 7px 7px;*/  
  font-family: 'Courier New';
  font-size: 24px;
  cursor: pointer;  
  width: 100px;
  height: 50px;    
}

/* hover effect of displaying a text when over any editButton */
.stopButton .tooltiptext {
  visibility: hidden;
  width: auto;
  /*background-color:  #464545;*/
  background: none;
  /*color: #fff;*/
  color: #2196F3;
  text-align: left;
  border-radius: 6px;
  padding: 3px 3px;
  font-family: 'Courier New';
  font-size: 12.5px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.stopButton:hover .tooltiptext {
  visibility: visible;
}


/* use all the subclasses of material icons  */
.material-icons-outlined.md-light { color: rgba(255, 255, 255, 1.0); }

body.waiting * {
  cursor: progress;
}

/* disable user selection of the entire editor -- disables ctrl-a OR cmd-a behaviour -- no 'all blue' highlighting */
body {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

/* blinking text for 'Start Here' */

.blink {
  animation: blinker 2s linear infinite;
  color: #2196F3;
}
@keyframes blinker {  
  50% { opacity: 0; }
}


/* help videos class for all help videos */
.helpVideos{
  border: 2px solid white;
  opacity: 0.7;
  margin-top: 20px;
  width: 190;  
}

[data-new-window] {
  display: none;
}

/* create a grid of 1 element*/
.grid-container-forApp {
  display: grid;
  grid-template-columns: 5px calc(98vw - 10px) 5px;    /*  the 1st and the 3rd column occupy 20% of viewing area and the middle column (canvas) is 60% */
  grid-template-rows: 5px calc(98vh - 5px);  /* fix the row size to be only 95% of viewport  */    
}