:root {
    --background:  #b2becc;
    --taskbar-indent: #e8eef5;
    --taskbar-hover: #CBD5E1;
    --canvas-background: #E2E8F0;
    --accent: #282a3d;
    --text: #130b01;
    --text-muted: #0f2742;
    --panel-background: #b2becc;
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      --background: #20212c;
      --taskbar-indent: #22262f;
      --taskbar-hover: #575961;
      --canvas-background: #22262f;
      --accent: #39393f;
      --text: #fffdf5;
      --text-muted: #b0b3bb;
      --panel-background: #2c303a;
    }
  }

body {
    font-family: 'Arial', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    color: var(--text);
    box-sizing: border-box;
}

/* Taskbar */
.taskbar {
    display: flex;
    
    background-color: var(--background);
}

#icon {
    position: relative;

    padding: 10px;
}

.taskbarItem {
    z-index: 5;
    position: relative;
    padding: 10px;
    cursor: pointer;
    background-color: var(--taskbar-indent);
}

.taskbarItem:hover {
    background-color: var(--taskbar-hover);
}

.taskbarItem span {
    padding-right: 56px;
}

.taskbarItemDropdown {
    display: none;
    position: absolute;
    list-style-type: none;
    top: 38px;
    left: 0;
    width: 100%;
    background-color: var(--taskbar-indent);
}

.taskbarItem:hover > .taskbarItemDropdown {
    display: block;
}

.taskbarItemDropdown li {
    position: relative;
    padding: 10px;
    cursor: pointer;
}

.taskbarItemDropdown li:hover {
    background-color: var(--taskbar-hover);
}

.taskbarItemDropdownIsSubmenu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    background-color: var(--taskbar-indent);
    list-style-type: none;
}

.taskbarItemDropdownContainsSubmenu:hover > .taskbarItemDropdownIsSubmenu {
    display: block;
}

.taskbarItemDropdownIsSubmenu li {
    cursor: pointer;
}

.taskbarItemDropdownIsSubmenu li:hover {
    background-color: var(--taskbar-hover);
}

.taskbarModuleTitle {
    display: flex;
    
    justify-content: space-between;

    background-color: var(--taskbar-indent);
}

.taskbarModuleTitle p {
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 3%;

    font-weight: bold;
}

.taskbarModuleTitle button {
    width: 20%;
    right: 0%;
}

.taskbarModuleOneLine {
    padding-top: 1%;
    justify-content: space-between;
    display: flex;
    padding-inline: 5%;
}

.taskbarModuleOneLine input {
    max-width: 30%;

    background-color:var(--taskbar-hover);
}

.taskbarModuleSubmit {
    margin: 2%;
    float: right;
}

.resizeModule {
    z-index: 6;
    display: none;

    position: absolute;

    top: 20%;
    left: 0%;

    width: 20vw;

    background-color: var(--background);
}

.cropModule {
    z-index: 6;
    display: none;

    position: absolute;

    top: 35%;
    left: 0%;

    width: 20vw;

    background-color: var(--background);
}

.hsvModule {
    z-index: 6;
    display: none;

    position: absolute;

    top: 20%;
    left: 20%;

    width: 20vw;

    background-color: var(--background);
}
/* Taskbar End */

.wrapImageAndLayerModules {
    display: flex;
}

/* Image Module */
.imageModule {
    display: flex;
    flex-direction: column;
    
    height: calc(100vh - 40px);
    width: 80vw;
}

/* Image Viewing Module */
.imageViewingModule {
    z-index: 1;
    cursor: grab;

    overflow: hidden;

    height: 100%;    
    width: 100%;

    border: 1px solid var(--accent);
    background-color: var(--canvas-background);
}

.imageViewingModule:active {
    cursor: grabbing;
}

/* This is calculated when the image is loaded in. */
#imageCanvasDiv {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;

    transform-origin: 0 0;
}

#imageCanvas {
    max-width: 100%;
    max-height: 100%;

    border: 1px solid var(--accent);
}

/* Image Viewing Module End */


/* Image Context Modules */
.contextModules {
    display: flex;

    width: 80vw;
    height: 15vh;


    border: 1px solid var(--accent);
    background-color: var(--background);
}

.contextModules > div {
    border: 1px solid var(--accent);
}


/* Image Data Module */
.imageDataModule {
    width: 20vw;
}

.imageDataModuleSection {
    display: flex;
    justify-content: space-between;
}

.sectionLabel {
    float: left;
    font-weight: bold;
}

.sectionValue {
    float: right;
}
/* Image Data Module End */


/* Image Context Modules End */


/* Image Module End */

/* Layers Module */
.layersModule {
    display: flex;
    flex-direction: column;

    height: calc(100vh - 40px);
    width: 20vw;

    border: 1px solid var(--accent);
    background-color: var(--background);
}

.layersModule > div{
    border-bottom: 1px solid var(--accent);
}

#currentLayerSelector {
    min-height: 70vh;
}

#layersSelector {
    position: relative;
    
    overflow-y: auto;

    flex: 1;
    
    background-color: var(--background);
}

#layersList {
    max-height: 100%;
}

#layersControls {
    display: flex;

    bottom: 0;

}

#layersControls button {
    margin: 1%;
    background-color: var(--taskbar-indent);
}

.layerDiv {
    display: flex;
    cursor: pointer;
}

.layerDiv:hover {
    background-color: var(--taskbar-hover);
}

.selectedLayerDiv {
    background-color: var(--taskbar-indent) !important;
}

.layerDivName {
    width: 80vw;
}

.layerDivToggleVisibility {
    width: 20vw;
}
/* Layers Module End */

/* Layer Properties Module */
.layerPropertiesOpacity {
}

.layerPropertiesOpacity p {
    font-weight: bold;
}

.layerPropertiesOpacity input {
    background-color: var(--taskbar-hover);

    width: 25%;
}

.effectParameter {
}

.effectParameter p {
    font-weight: bold;
}

.effectParameter input {
    background-color:var(--taskbar-hover);

    width: 25%;
}
/* Layer Properties Module End */