/* styles.css */
/*
  DSC Studio
  Copyright (C) 2022-2025 nastys

  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU Affero General Public License as
  published by the Free Software Foundation, either version 3 of the
  License, or (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU Affero General Public License for more details.

  You should have received a copy of the GNU Affero General Public License
  along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/
body {
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
}

.hidden {
    visibility: hidden;
}

.progresswnd {
    position: fixed;
    width: 100%;
    height: 100%;
    cursor: progress !important;
    z-index: 100;
}

.modalbg {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    opacity: 1;
    transition: opacity 0.2s linear;
}

.invisible {
    opacity: 0;
}

.hidden {
    display: none;
}

.modalwnd {
    background: white;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    height: fit-content;
    max-height: 90vh;
    box-shadow: 0px 10px 30px #00000040;
    min-width: 400px;
    max-width: 400px;
    margin: auto;
}

.modalwndheader {
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
    font-size: medium;
    text-align: center;
    min-height: 30px;
    max-height: 30px;
    background: linear-gradient(#9a8cee, #7d6fca);
    color: white;
    border-radius: 1rem 1rem 0 0;
    padding-top: 13px;
    border-bottom: 1px solid grey;
}

.modalwndinside {
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
    overflow: auto;
    height: 100%;
    font-size: smaller;
    padding: 10px;
    line-height: 1.28;
}

.modalwndfooter {
    bottom: 0;
    text-align: center;
    min-height: 60px;
    max-height: 60px;
    border-top: 1px solid grey;
    border-radius: 0 0 1rem 1rem;
    overflow: auto;
}

.modalbtn {
    width: 120px;
    height: 30px;
    text-align: center;
    background: linear-gradient(#e1e1e1, #979797);
    color: white;
    border-radius: 0.2rem;
    box-shadow: 0px 3px 10px #000000bb;
    display: inline-block;
    line-height: 32px;
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
    margin: 12px 12px 12px 12px;
    overflow: hidden;
}

.modalbtn_mini {
    width: 50px;
    height: 16px;
    box-shadow: 0px 1px 4px #9ed77b;
    line-height: 16px;
    background: linear-gradient(#87df7b, #59bd40);
    margin: auto;
    font-size: smaller;
}

.modalbtn_blue {
    background: linear-gradient(#358dff, #274bfe);
    box-shadow: 0px 3px 10px #0015ff80;
}

.modalbtn_blue:hover {
    background: linear-gradient(#88bbff, #6a82ff);
}

.modalbtn_blue:active {
    background: linear-gradient(#2c71ca, #1a36c0);
}

.modalbtn_red {
    background: linear-gradient(#ff6666, #fd1b1b);
    box-shadow: 0px 3px 10px #ff000080;
}

.modalbtn_red:hover {
    background: linear-gradient(#ff9f9f, #ff5757);
}

.modalbtn_red:active {
    background: linear-gradient(#e65959, #b41313);
}

.modalbtn_green {
    background: linear-gradient(#78ff66, #48fd1b);
    box-shadow: 0px 3px 10px #62ff0080;
}

.modalbtn_green:hover, .modalbtn_mini:hover {
    background: linear-gradient(#a6ff9f, #70ff57);
}

.modalbtn_green:active, .modalbtn_mini:active {
    background: linear-gradient(#73e659, #46b413);
}

.modalwnd:has(.tbcont)
{
    max-width: 800px;
    min-width: 600px;
}

.tbcont {
    display: flex;
    flex-direction: row;
}

.cbcont {
    display: flex;
    flex-direction: row;
}

.cblabel {
    margin-top: auto;
}

.mtop4 {
    margin-top: 4px;
}

.mleft {
    margin-left: auto;
}

.progresswndinner {
    display: flex;
    justify-content: center;
}

.translucent {
    background: #0000001f;
}

.menubar {
    height: 24px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding-left: 2px;
    padding-top: 2px;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.menubar::-webkit-scrollbar { 
    display: none;
}

.menubaritem {
    font-size: small;
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.2rem;
    transition: all linear 0.1s;
    padding: 0 5px 0 5px;
    margin: 1px 1px 1px 1px;
    display: flex;
}

.menubaritem:hover {
    background-color: #ffffff22;
    border: 1px solid rgb(159, 159, 159);
    border-radius: 0.2rem;
}

.menubaritemtext {
    margin-top: auto;
    margin-bottom: auto;
}

.menubaritemclicked {
    background-color: #00000022 !important;
    border: 1px solid rgb(159, 159, 159) !important;
    border-radius: 0.2rem !important;
    transition: none !important;
}

.menu {
    border: 1px solid rgb(159, 159, 159) !important;
    border-radius: 0.2rem !important;
    position: fixed;
    top: 24px;
    min-width: 80px;
    box-shadow: 0 2px 10px 0 #1f1f1f22;
}

.menuitem {
    width: auto;
    height: 24px;
    display: flex;
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
}

.menuitem:hover:not(.menuitem-disabled) {
    background: linear-gradient(#9a8cee, #7d6fca);
    color: white;
}

.menuitemtext {
    margin: auto 4px auto 4px;
    font-size: small;
}

.menuicon {
    height: 24px;
    height: 24px;
    margin: auto 2px auto 2px;
}

.menuicon-small {
    height: 18px;
    width: 18px;
    margin: auto 2px auto 2px;
}

.menuicon-right {
    margin-left: auto;
}

.toolbar {
    height: 30px;
    width: 100%;
    border-bottom: 1px solid grey;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: small;
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
    padding-left: 2px;
    padding-top: 2px;
    margin-top: auto;
    margin-bottom: auto;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.toolbar::-webkit-scrollbar { 
    display: none;
}

.footer {
    height: 34px;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    position: fixed;
    bottom: 0;
    border-top: 1px solid grey;
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: small;
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.footer::-webkit-scrollbar { 
    display: none;
}

label {
    min-width: fit-content;
}

.gradient {
    background: #eeeef2;
    color: #1e1e1e;
}

.gradient2 {
    background: linear-gradient(#eeeef2 80%, #e0e0e3 100%) !important;
}

@media (prefers-color-scheme: dark) {
    body {
        background: #1e1d1e;
        color: white;
    }

    .gradient {
        background: #2d2d30;
        color: #f1f1f1;
    }

    .gradient2 {
        background: linear-gradient(#2d2d30 80%, #262629 100%) !important;
    }

    .translucent {
        background: #ffffff1f;
    }

    .modalwnd {
        background: #1e1d1e;
    }

    .modalbtn_blue {
        box-shadow: 0px 3px 10px #0015ffba;
    }

    .modalbtn_red {
        box-shadow: 0px 3px 10px #ff0000ba;
    }

    .toolicon,
    .menuicon-small {
        filter: invert(1) hue-rotate(200deg) saturate(10);
    }

    .menu {
        box-shadow: 0 2px 10px 0 #cacaca22;
    }
}

.toolicon {
    width: 20px;
    height: 20px;
    margin: auto;
}

.toolseparator {
    height: 18px;
    width: 0px;
    margin: 0px 4px 0px 5px;
    border-left: 1px solid grey;
}

.toolbutton {
    min-width: 26px;
    width: auto;
    height: 26px;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.2rem;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    align-items: center;
    transition: all linear 0.1s;
}

.toolbutton:hover:not(.toolbutton-disabled) {
    background-color: #ffffff22;
    border: 1px solid rgb(159, 159, 159);
    border-radius: 0.2rem;
}

.toolbutton:active:not(.toolbutton-disabled) {
    background-color: #00000022;
    border: 1px solid rgb(159, 159, 159);
    border-radius: 0.2rem;
    transition: none;
}

.toolbutton-disabled, .menuitem-disabled {
    opacity: 0.5;
}

.hastooltip .tooltip {
    visibility: hidden;
    opacity: 0;
    text-align: center;
    position: absolute;
    min-width: revert;
    padding: 5px;
    top: 8px;
    z-index: 1;
    transition: opacity 0.2s linear 0.5s;
    pointer-events: none;
}

.hastooltip:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.toolbutton-disabled .tooltip {
    visibility: hidden !important;
}

.editor {
    width: 100%;
    height: calc(100% - 94px);
    border: none;
    padding: 0;
    font-family: 'Open Sans';
}

.myGlyphMarginClass {
    background: red;
}

.myContentClass {
    background: lightblue;
}

.m_triangle::before {
    content: url("./icons/m_triangle.png") !important;
}

.m_square::before {
    content: url("./icons/m_square.png") !important;
}

.m_cross::before {
    content: url("./icons/m_cross.png") !important;
}

.m_circle::before {
    content: url("./icons/m_circle.png") !important;
}

.m_bookmark {
    background: blue;
}

#preview_background {
    position: fixed; 
    width: 100%; 
    height: 100%; 
    left: 0;
    top: 0; 
    background-color: #8888;
    user-select: none;
    -webkit-user-select: none;
}

#preview_window {
    position: absolute;
    display: flex;
    top: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-select: none;
}

#preview_body {
    position: relative;
    left: 0;
    top: 0;
}

#preview_container {
    width: 100%;
    height: 100%;
    display: grid;
}

#preview_canvas {
    width: 1280px;
    height: 720px;
    background-color: #8888;
}

.preview_target {
    width: 64px;
    height: 64px;
    /*filter: drop-shadow(0 0 1rem #00000040);*/
    /*filter: drop-shadow(4px 4px 0 #00000040);*/
    position: absolute;
    /*transition: all;*/
    /*transition-property: left, top;*/
    transition-timing-function: linear;
    opacity: 1;
    image-rendering: pixelated;
}