/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Sep 29, 2021, 1:12:20 PM
    Author     : user
*/

:root {
  --lightest-gray: #f2f2f2;
  --lighter-gray: #cccccc;
  --light-gray: #a6a6a6;
  --dark-gray: #808080;
  --darker-gray: #595959;
  --darkest-gray: #262626;
}

.surfacer{
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    height: 500px;
}

.surfacer .toolbar{
    width: 100%;
    padding: 5px;
    display: flex;
    margin-bottom: 10px;
    background-color: var(--lightest-gray)
}

.surfacer .item-tools{
    flex: 1;
}

.surfacer .exit-tools{
    
}

.surfacer .workarea{
    flex: 1;
    display: flex;
    border: solid 1px var(--lightest-gray);
    height: 400px;
}

.surfacer .display{
    flex: 1;
}

.surfacer .data{
    width: 400px;
    background-color: var(--lightest-gray);
    overflow: auto;
}

.surfacer .surface-container{
    border: dotted 1px; 
}

.surface-container.surfacer-active{
    border: dashed 2px red;
}