/*COLORS*/
:root {
    --lighterGray: #F3F3F3 !important;
    --lighterGrayHover: #F9F9F9 !important;
    --lightGray: #C6C6C6 !important;
    --lightGrayHover: #CACACA !important;
    --darkGray: #595959 !important;
    --darkGrayHover: #696969 !important;
    --red: #EA0000 !important;
    --redHover: #F50000 !important;
    --blue: #03A9FA !important;
    --blueHover: #88D3F4 !important;
    --lightYellow: #FFEB9C !important;
    --darkYellow: #9C5700 !important;
    --lightRed: #FFC7C3 !important;
    --darkRed: #9C0006 !important;
    --darkGrayColor: #515151;
    --darkGrayHoverColor: #757A81;
    /* White*/
    --primaryBackgroundColor: #FFFFFF;
    /* Light Gray*/
    --secondaryBackgroundColor: #E6E6E6;
    /* Black*/
    --primaryForeGroundColor: #000000;
    /* White*/
    --secondaryForegroundColor: #FFFFFF;
    /* Blue*/
    --primaryColor: #03A9F4;
    /* Light Blue*/
    --primaryColorLight: #80D8FF;
    /* Dark Blue*/
    --primaryColorDark: #0286c2;
    /* Gray*/
    --secondaryColor: #B3B3B3;
    /* Gray*/
    --secondaryColorMediumLight: #E7E7E7;
    /* Gray*/
    --secondaryColorLight: #F4F4F4;
    /* Gray*/
    --secondaryColorDark: #707070;
}

/*body {
    background-image: radial-gradient(#EEE, #FFF) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}*/

* {
    /*font-family: 'Inter';*/ /* https://fonts.googleapis.com/css?family=Inter */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /*font-weight: 400;
}

.general-design-example {
    font-family: 'Inter'; /* https://fonts.googleapis.com/css?family=Inter */
    font-weight: 400;
}

/* Scroll bar */

/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.slim-scroll::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
}

/* Track */
::-webkit-scrollbar-track {
    background: white;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--secondaryColor);
    border-radius: 5px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }


.slim-scroll::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
}

p {
    font-weight: 400 !important;
    margin: 0px !important;
}

.error-text {
    color: var(--red) !important;
}

/* Font weight */
.fw-thin {
    font-weight: 300 !important;
}

.fw-normal {
    font-weight: 400 !important;
}

.fw-bold {
    font-weight: 500 !important;
}

.fw-thick {
    font-weight: 600 !important;
}

.fw-thicker {
    font-weight: 700 !important;
}


/* Font size */
.fz-12 {
    font-size: 12px !important;
}

.fz-13 {
    font-size: 13px !important;
}

.fz-14 {
    font-size: 14px !important;
}

.fz-15 {
    font-size: 15px !important;
}

.fz-16 {
    font-size: 16px !important;
}

.fz-17 {
    font-size: 17px !important;
}

.fz-18 {
    font-size: 18px !important;
}

.fz-19 {
    font-size: 19px !important;
}

.fz-20 {
    font-size: 20px !important;
}

.fz-21 {
    font-size: 21px !important;
}

.fz-22 {
    font-size: 22px !important;
}

/* Drop shadow */
.small-drop-shadow {
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
}

/* Button */
.new-btn-base, .new-btn-blue, .new-btn-red, .new-btn-darkgray, .new-btn-lightergray, .new-btn-lightgray, .new-btn-white {
    text-decoration: none;
    padding: 10px 25px;
    border: 0px;
    border-radius: 17px;
    transition: all 0.5s;
    font-weight: 500;
    font-size: 14px;
    min-width: min(125px, 100%);
    /*    width: 120px;
    height: 40px;*/
    font-size: 14px;
    font-weight: 600;
    border-radius: 21.5px;
}

    .new-btn-base:disabled, .new-btn-blue:disabled, .new-btn-red:disabled, .new-btn-darkgray:disabled, .new-btn-lightergray:disabled, .new-btn-lightgray:disabled, .secondary-btn:disabled {
        background-color: var(--lightGray);
        color: var(--darkGray);
        opacity: 0.8;
        pointer-events: none;
    }

.new-btn-white {
    background-color: #fff;
    color: black;
    border: 1px solid black !important;
}

    .new-btn-white:hover {
        background-color: var(--lightGray);
    }

    .new-btn-white:active, .new-btn-white:focus {
        border: 1px solid black !important;
    }

.new-btn-blue {
    /*  
    
    
    
    */
    background-color: var(--blue);
    color: white;
}

    .new-btn-blue:hover {
        background-color: var(--blueHover);
    }

.new-btn-red {
    background-color: var(--red);
    color: white;
}

    .new-btn-red:hover {
        background-color: var(--redHover);
    }

.new-btn-darkgray {
    background-color: var(--darkGray);
    color: white;
}

    .new-btn-darkgray:hover {
        background-color: var(--darkGrayHover);
    }

.new-btn-lightgray {
    background-color: var(--lightGray);
    color: black;
}

    .new-btn-lightgray:hover {
        background-color: var(--lightGrayHover);
    }

.new-btn-lightergray {
    background-color: var(--lighterGray);
    color: black;
}

    .new-btn-lightergray:hover {
        background-color: var(--lightGrayHover);
    }

.secondary-btn {
    text-decoration: none;
    padding: 4px 25px;
    border: 0px;
    border-radius: 4px;
    transition: all 0.5s;
    font-weight: 500;
    font-size: 14px;
    background-color: #fff;
    color: black;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
    transition: all 0.5s;
}

    .secondary-btn:hover {
        background-color: var(--lighterGray);
    }

/* Tags */
.tag-normal, .tag-added, .tag-removed {
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
    padding: 10px 8px;
    font-size: 14px;
    font-weight: 400;
}

.tag-normal {
    background-color: #FFF;
    color: black;
}

.tag-added {
    color: var(--darkYellow);
    background-color: var(--lightYellow);
}

.tag-removed {
    color: var(--darkRed);
    background-color: var(--lightRed);
}

.dropshadow-drop-down {
    background-color: white;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
    padding: 10px;
    color: black;
    cursor: pointer;
    position: relative;
    border-radius: 4px;
}

.dropshadow-drop-down-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: white;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}

.dropshadow-drop-down-item, .regular-drop-down-content-item {
    background-color: transparent;
    transition: all 0.5s;
}

    .dropshadow-drop-down-item:hover, .regular-drop-down-item:hover {
        background-color: rgba(0,0,0, 0.1);
    }

.regular-drop-down {
    background-color: transparent;
    color: black;
    padding: 10px;
    cursor: pointer;
    position: relative;
}

.regular-drop-down-content {
    position: absolute;
    top: calc(100% - 10px);
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: white;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    z-index: 1237183;
}

.os-border {
    border: 1px solid var(--lightGray);
}

.os-rounded {
    border-radius: 3px;
}

.os-icon {
    cursor: pointer;
}

    .os-icon svg path {
        fill: var(--blue);
        transition: all 0.5s;
    }

        .os-icon svg path.stroke-icon {
            stroke: var(--blue);
        }


    .os-icon:hover svg path {
        color: var(--blueHover);
        fill: var(--blueHover);
    }

        .os-icon:hover svg path.stroke-icon {
            stroke: var(--blueHover);
        }


    .os-icon:disabled {
        color: var(--lightGray);
        fill: var(--lightGray);
        cursor: default;
        pointer-events: none;
    }

        .os-icon:disabled .stroke-icon {
            stroke: var(--lighterGray);
        }

.os-table {
    width: 100%;
    /*    margin-bottom: 1rem;*/
}

    .os-table > thead > tr > th, .os-table > thead > tr > td, .os-table > tbody > tr > th, .os-table > tbody > tr > td {
        padding: 0.75rem 0.5rem;
        color: black;
        vertical-align: top;
    }

    .os-table > thead > tr > th {
        vertical-align: bottom;
        border-bottom: 1px solid #C6C6C6;
        word-break: keep-all;
        white-space: nowrap;
    }

.os-table-striped > tbody > tr:nth-child(even) {
}

.os-table-striped > tbody > tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.1);
}


/* Loading Spinner */

.dark-loading-screen {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #262626;
    opacity: 0.95;
    position: fixed;
    z-index: 10000;
}

.light-loading-screen {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    opacity: 0.95;
    position: fixed;
    z-index: 10000;
}

div.logo-spinner-container {
    width: 100%;
    height: 100%;
    display: flex;
}

div.logo-spinner-wrapper {
    margin: auto;
    position: relative;
    padding: 5px;
}

div.logo-spinner-wrapper-content-item {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

img.logo-spinner-logo {
    width: 100%;
    height: 100%;
    max-width: 107px;
    max-height: 81px;
}

p.spinner-loading-text {
    font-size: 13px !important;
    color: white !important;
    font-weight: 600 !important;
    white-space: nowrap;
}

div.logo-spinner-circle {
    width: min(100vw, 221px);
    height: min(100vw, 221px);
    border-radius: 50%;
    background: radial-gradient(farthest-side,#ff4747 94%,#0000) top/7px 7px no-repeat, conic-gradient(#0000 30%,#ff4747);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 7px),#000 0);
    animation: loading-spinner 0.9s infinite linear;
    padding: 5px;
}

div.logo-spinner-circle-small {
    width: min(100vw, 67px);
    height: min(100vw, 67px);
    border-radius: 50%;
    background: radial-gradient(farthest-side,#ff4747 94%,#0000) top/7px 7px no-repeat, conic-gradient(#0000 30%,#ff4747);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 7px),#000 0);
    animation: loading-spinner 0.9s infinite linear;
    padding: 5px;
}

@keyframes loading-spinner {
    100% {
        transform: rotate(1turn);
    }
}




.inputStyle {
    border-color: var(--darkGray);
    text-align: end;
    padding-right: 5px;
    border-style: solid;
}

    .inputStyle:focus, inputStyle:active {
        border-color: #000000;
        border-width: 1px;
        outline: none !important;
    }

p, h1, h2, h3, h4 {
    color: #231F20;
}

.file-not-supported-popup-content {
    width: min(460px, 100%) !important;
}

.popup-archive-content {
    /*min-width: min(1400px, 100%) !important;*/
    border-radius: 0px 0px 1rem 1rem !important;
}