/*This is where we define the global theming vars and common theming styles*/
/*This is where we define the global theming vars and common theming styles*/


:root {
    /*potree*/
    --color-0: #f4f3ef;
    --color-1: rgb(28, 154, 206);
    --color-2: rgb(60 75 79);
    --color-3: rgb(39 51 56);
    --color-4: rgba(16, 143, 185, 1);
    --bg-color: var(--color-0);
    --bg-color-2: #e7dac7;
    --bg-light-color: rgba(48, 61, 65, 1);
    --bg-dark-color: rgba(24, 31, 33, 1);
    --bg-hover-color: var(--color-2);
    /*--font-color: #9AA1A4;*/
    --font-color-2: #000000;
    --font-color: #000000;
    --border-color: black;
    --measurement-detail-node-bg-light: var(--color-1);
    --measurement-detail-node-bg-dark: var(--color-2);
    --measurement-detail-area-bg-color: #eee;
    --corrner-radius: 10px;

    /*bootstrap*/
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #ef8aef;

    /*#da78a3;*/
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #f33816; /*endpoint orange*/
    --secondary: #66615b;
    --success: #6bd098;
    --info: #51bcda;
    --warning: #fbc658;
    --danger: #ef8157;
    --light: #f4f3ef;
    --dark: #66615b;

    --highlight: #eee8cf;
    --active: #8cc5de;
    --odd-row: #eff4f3;

    /*Custom*/
    --section-bg-orange: #f7765f;
    --section-muted: #e7dac7;
    --section-light: #f0e8db;
    --section-endpoint-orange: #f33816;
    --panel-header-color: var(--bg-color-2);
    --panel-bg-color: var(--light);
    --panel-cell-padding: 0.5em;
    --panel-font: Roboto, "Open Sans", Lato, "Helvetica Neue", Arial, font-family;
    --panel-header-font-size: 2em;
    --panel-cell-font-size: 1.2em;

    --grid-row-height: 50px;

    --mobile-control-size: 120px;
    --mobile-control-pad: 20px;
    /*--absolute-padding: 20px;*/
    --mobile-control-z: 1111;
    --icon-width: 3em;
    --slider-height: 120px;

    --font-dark: var(--dark);
    --font-light: var(--light);
    --font-dark-hover: var(--light);
    --font-light-hover: var(--dark);

    /*From super simple wordx template*/
    --color-light: #f4f3eff0;
    --color-dark: #212121;
    --color-signal: #fab700;
    --color-background: #f4f3ef;
    --color-text: var(--color-dark);
    --color-accent: var(--color-signal);
    --size-bezel: .5rem;
    --size-radius: 12px;
    --color-shadow: #313133;
    /*--bg-color: var(--color-background);*/
    --bg-img: url('/assets/img/mini_bg.svg');
    --bg-filter: blur(0px);
    --btn-secondary: #e7dac7;
    --icon-img: url('/assets/img/paper-plane.svg');

    --panel-radius: 1em;


}


@media (prefers-color-scheme: dark) {
    :root {
        /* Override styles for dark mode */
        --bg-color: #333;
        --text-color: #fff;


        --bg-color: #333;
        --font-color: #fff;
        --primary: #f33816;
        --secondary: #66615b;
        --success: #6bd098;
        --info: #51bcda;
        --warning: #fbc658;
        --danger: #ef8157;
        --light: #333;
        --dark: #fff;

    /potree/ --color-0: #222;
        --color-1: rgb(28, 154, 206);
        --color-2: rgb(60 75 79);
        --color-3: rgb(39 51 56);
        --color-4: rgba(16, 143, 185, 1);
        --bg-color: var(--color-0);
        --bg-color-2: #444;
        --bg-light-color: rgba(48, 61, 65, 1);
        --bg-dark-color: rgba(24, 31, 33, 1);
        --bg-hover-color: var(--color-2);
    / --font-color: #9AA1A4;
    / --font-color-2: #fff;
        --font-color: #fff;
        --border-color: #fff;
        --measurement-detail-node-bg-light: var(--color-1);
        --measurement-detail-node-bg-dark: var(--color-2);
        --measurement-detail-area-bg-color: #444;
        --corrner-radius: 10px;

        /*bootstrap*/
        --blue: #007bff;
        --indigo: #6610f2;
        --purple: #6f42c1;
        --pink: #ef8aef;

        /*#da78a3;*/
        --red: #dc3545;
        --orange: #fd7e14;
        --yellow: #ffc107;
        --green: #28a745;
        --teal: #20c997;
        --cyan: #17a2b8;
        --white: #fff;
        --gray: #6c757d;
        --gray-dark: #343a40;
        --primary: #f33816; /*endpoint orange*/
        --secondary: #66615b;
        --success: #6bd098;
        --info: #51bcda;
        --warning: #fbc658;
        --danger: #ef8157;
        --light: #222;
        --dark: #fff;

        --highlight: #444;
        --active: #8cc5de;
        --odd-row: #444;

        /*Custom*/
        --section-bg-orange: #f7765f;
        --section-muted: #444;
        --section-light: #444;
        --section-endpoint-orange: #f33816;
        --panel-header-color: var(--bg-color-2);
        --panel-bg-color: var(--light);
        /* Theoretically, root variables cascade so we can leave non-color related stuff in the main root tag and just redefine dark colors in a media query. */

        /*--panel-cell-padding: 0.5em;*/
        /*--panel-font: Roboto, "Open Sans", Lato, "Helvetica Neue", Arial, font-family;*/
        /*--panel-header-font-size: 2em;*/
        /*--panel-cell-font-size: 1.2em;*/

        /*--grid-row-height: 50px;*/

        /*--mobile-control-size: 120px*/

    }
}

.panel-round {
    border-radius: var(--panel-radius);
}

.force-panel-hint-font {
    color: var(--text-bright);
    padding: 6px;
}


.title-orange {
    color: var(--primary);
}

/*.card-img-top {*/
/*    width: 100%;*/
/*    height: 30vw;*/
/*    object-fit: contain;*/
/*}*/


.section-orange {
    background-color: var(--section-bg-orange);
    color: #FFFFFF;
}

.section-orange .blockquote .muted {
    color: var(--section-muted);
}

.section-orange .muted {
    color: var(--section-light);
}

.section-orange .blockquote .blockquote-footer {
    color: var(--section-muted);
}

.section-orange .blockquote .contrast {
    color: var(--light);
}

.section-orange .blockquote .contrast-dark {
    color: var(--font-dark);
}

.section-orange .blockquote .contrast-dark2 {
    color: var(--section-endpoint-orange);
    /*font-size: 0.6em;*/
}

.section-brown-dark {
    background-color: #66615B;
    color: #51cbce;
}

/*These shadows are for title blocks to */
#feature > div > div > div > div > div.blockquote,
#inital-invite > div > div > details > summary {
    /*font-size: 28px;*/
    text-shadow: 2px 3px #0c5460;
}

#header > div.content-center > div > div > h1 {
    text-shadow: -2px -2px 3px #992813,
    -4px -4px 5px #343a40,
    0px 10px 9px #333333,
    0px 1px 0px #f8f9fa;

}

#header > div.content-center > div > div > h2 {
    text-shadow: -2px -2px 0px #797c7e, 2px 2px 0px #565d62, 0px 10px 9px #333333, 2px 3px 0px #000000;
}

body > div.team-4.section-image > div > div:nth-child(1) > div {
    /*text-shadow: 5px 5px #858383, 3px 3px rgba(93, 92, 92, 0.56)*/

    *text-shadow: -1px -1px 0px #fff, -2px -2px 0px #797c7e;

    /*text-shadow: -1px -1px 0px #fff, -2px -2px 0px #797c7e, 2px 2px 0px #565d62, 0px 10px 9px #333333, 2px 3px 0px #000000;*/

}

#team0 > div > div > div > div > blockquote {
    text-shadow: 2px 3px #7e7e7e;
    /*font-size-adjust: 1.5 ;*/

}


.col-lg-4 .card .card-icon i {
    font-size: 70px;
    padding: 0px;
    /*text-shadow: 3px 1px black;*/
}

.section-brown-dark .blockquote .blockquote-footer {
    color: var(--section-muted);
}

.section-brown-dark .blockquote .muted {
    color: var(--section-muted);
}

.section-brown-dark .blockquote .contrast {
    color: var(--light);
}

.section-brown-dark .blockquote .contrast-dark {
    color: var(--font-dark);
}

.section-brown-dark .blockquote .contrast-dark2 {
    color: var(--section-endpoint-orange);
    font-size: 0.6em;
}


.btn-gitlab {

}

.section-nude {
    background-color: var(--light);
    /*background-color: #FFFCF5;*/ /*This was the paper kit original color*/
}

.section-nude .contrast {
    color: var(--primary);
}

.text-endpoint-orange {
    color: var(--section-endpoint-orange);
}

.card-blog .light {
    opacity: 0.7;
}

/*Added by vera from vgeo*/

/* Container holding the image and the text */
.img-container {
    position: relative;
    text-align: center;
    color: white;
}

/*ToDo - not sure why this is relative to the card and not to the card image. If it was correctly relative the top position should be 50%*/
.card-blog .card-image .img-center {
    margin: 0;
    position: absolute;
    top: 25%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.box-regular {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    /*font-family: sans-serif;*/
    /*text-align: center;*/
    line-height: 1;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    max-width: 100%;
    max-height: 100%;
    padding: 10px 10px;
}

.box-regular-nude {
    background-color: rgba(244, 243, 239, 1);
    border-radius: 10px;
    color: var(--color-dark);
    /*font-family: sans-serif;*/
    /*text-align: center;*/
    line-height: 1;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    max-width: 100%;
    max-height: 100%;
    padding: 10px 10px;
}

.box-regular-brown {
    background-color: rgb(231, 230, 228);
    border-radius: 10px;
    color: var(--color-dark);
    /*font-family: sans-serif;*/
    /*text-align: center;*/
    line-height: 1;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    max-width: 100%;
    max-height: 100%;
    padding: 10px 10px;
}


.box-thin {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    font-family: sans-serif;
    text-align: center;
    line-height: 1;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    max-width: 100%;
    max-height: 100%;
    padding: 5px 5px;
}

.masterhead .header-logo {
    border-radius: 1.2em;
    background-color: rgba(255, 255, 255, 0.3);
    /*background: radial-gradient(#ffffff40, transparent);*/
    width: 70%;
    /*opacity: 0.5;*/
    /*margin-left: 15px;*/
    /*margin-bottom: 12px;*/
    padding: 1.2em 1.2em;
}

.page-header .masterhead {

    background: linear-gradient(to bottom, rgba(22, 22, 22, 0.07), rgba(68, 68, 69, 0.15), #161616 100%);
    filter: blur(0.3px);
}

.page-header .title {
    color: var(--section-light);
    /*font-size: x-large;*/
}

.page-header .filter::after {
    background: linear-gradient(to bottom, rgba(22, 22, 22, 0.07), rgba(68, 68, 69, 0.15), #161616 100%);
}


/*Added from index.js*/
.navbar {
    transition: all 2.33s cubic-bezier(0.93, 0.22, 0.52, 0.98)
    /*background-color: #FFFCF5;*/
}


.navbar:not(.navbar-transparent) {
    background-color: #FFFCF5;
}

.navbar-toggler-bar {
    transition: color 2.33s cubic-bezier(0.93, 0.22, 0.52, 0.98)
}


/*.jsPanel-header {*/
/*    border-top-left-radius: var(--panel-radius);*/
/*    border-top-right-radius: var(--panel-radius);*/
/*}*/
/*.jsPanel-content {*/
/*    border-bottom-left-radius: var(--panel-radius);*/
/*    border-bottom-right-radius: var(--panel-radius);*/
/*}*/
.jsPanel-modal, .jsPanel-standard {
    border-radius: var(--panel-radius);
    overflow: clip;
    /*border-top-right-radius: var(--panel-radius);*/
    /*    border-bottom-left-radius: var(--panel-radius);*/
    /*border-bottom-right-radius: var(--panel-radius);*/
}

body, html {
    height: 100%;
    margin: 0;
}

/*document.getElementsByTagName("iframe")[0].className = "fullScreen";*/
.fullScreen {
    width: 100%;
    height: 100%;
    max-width: 100%;
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 1200;

}

.fullScreenAbsBtn {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.7;
}

.default-bg, .secondary-bg {
    background-color: var(--bg-color-2);
}

.primary-bg {
    background-color: var(--primary);
}

.info-bg {
    background-color: var(--info);
}

.success-bg {
    background-color: var(--success);
}

.warning-bg {
    background-color: var(--warning);
}

.danger-bg {
    background-color: var(--danger);
}

.light-bg {
    background-color: var(--light);
}

.dark-bg {
    background-color: var(--dark);
}

.pink-bg {
    background-color: var(--pink);

}

/*.btn-danger {*/
/*    background-color: var(--danger) !important;*/
/*    color: var(--font-light) !important;*/
/*}*/

/*.btn-danger:hover {*/
/*    background-color: var(--danger) !important;*/
/*    color: var(--font-light-hover) !important;*/
/*}*/

/*.btn-success {*/
/*    background-color: var(--success);*/
/*    color: var(--font-light);*/
/*}*/

/*.btn-success:hover {*/
/*    background-color: var(--success);*/
/*    color: var(--font-light-hover);*/
/*}*/

/*Override the dark hover class*/
.jsPanel-hdr.jsPanel-hdr-dark .jsPanel-btn:hover {
    color: var(--font-dark-hover) !important;
}


/*Override dark text color*/
.jsPanel-hdr.jsPanel-hdr-dark .jsPanel-btn,
.jsPanel-hdr.jsPanel-hdr-dark .jsPanel-title {
    color: var(--font-dark) !important;
}


.jsPanel-hdr.jsPanel-hdr-light .jsPanel-btn:hover {
    color: var(--font-light-hover) !important;
}

.jsPanel-hdr.jsPanel-hdr-light * {
    color: var(--font-light) !important;
}


.slick-cell {
    font-family: var(--panel-font);
    font-size: var(--panel-cell-font-size);
    color: var(--font-color);
    padding: var(--panel-cell-padding);
    height: 3em;
    text-align: left;
    /*background: var(--panel-bg-color);*/
}

jsPanel-title {
    font-family: var(--panel-font);
    font-size: var(--panel-header-font-size);
    color: var(--font-color-2);
}

.jsPanel-hdr {

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


/*
IMPORTANT:
In order to preserve the uniform grid appearance, all cell styles need to have padding, margin and border sizes.
No built-in (selected, editable, highlight, flashing, invalid, loading, :focus) or user-specified CSS
classes should alter those!
*/

/*.slick-header-columns {*/
/*    background: url('images/header-columns-bg.gif') repeat-x center bottom;*/
/*    border-bottom: 1px solid silver;*/
/*}*/

/*.slick-header-column {*/
/*    background: url('images/header-columns-bg.gif') repeat-x center bottom;*/
/*    border-right: 1px solid silver;*/
/*}*/

/*.slick-header-column:hover, .slick-header-column-active {*/
/*    background: white url('images/header-columns-over-bg.gif') repeat-x center bottom;*/
/*}*/

.slick-header-column {
    background: var(--bg-color-2) !important;
    color: var(--font-color-2);
}

.slick-headerrow-column {
    background: var(--bg-color-2);
    border-bottom: 0;
    height: 100%;
}

.slick-row.ui-state-active {
    background: #F5F7D7;
}

.slick-row {
    position: absolute;
    background: white;
    border: 0px;
    line-height: 38px;
}


.btn-menu {
    background-image: url("/assets/img/eye_show2.svg");

}

.btn-menu-hide {
    background-image: url("/assets/img/eye_hide2.svg");
}

.btn-home {
    background-image: url("/assets/img/home.svg");

}

.btn-style {
    background-image: url("/assets/img/style.svg");

}

.icon-eye-art {
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;
    background-image: url("/assets/img/eye_show.svg");
}

.slick-icon-btn {

    height: 38px;
    width: 38px;
    padding: 0px;
    /*margin: 4px;*/
    margin: 8px 3px !important;

    transform: translateY(-6px);
    /*transition: transform 0.2s;*/
    transition: all 300ms cubic-bezier(.42, -0.64, 0, 1.87);
}

/*.slick-icon-btn:hover {*/

/*    height: 38px;*/
/*    width: 38px;*/
/*    padding: 0px;*/
/*    margin: 4px;*/
/*    transform: translateY(-6px);*/

/*}*/

.slick-icon-btn:hover {

    height: 42px;
    width: 44px;
    padding: 2px;
    margin: 4px;
    margin: 8px 0px !important;
    transform: translateY(-8px) translateX(0px) rotate(0.08rad);

    /*transform: translateY(-4px) translateX(0px) rotate(0.05rad);*/
    transition: transform 0.3s;

}

.slick-icon-btn.btn-sm {
    padding: 10px 10px;
}

.slick-cell .frozen {
    /*padding: 2px;*/
    margin: 0px;
}

/*.slick-header-column.ui-state-default {*/
/*    background:none ;*/
/*    background-color: #505050 ;*/
/*    color: #eeeeee;*/
/*    border: none;*/
/*    padding: 0;*/
/*    text-shadow: none;*/
/*    font-family: Arial, Verdana, Helvetica, sans-serif;*/
/*    font-size: 13px;*/
/*    height: 40px;*/
/*    line-height: 40px;*/
/*}*/

/* .slick-cell {*/
/*    background: none;*/
/*    background-color: #eeeeee;*/
/*    color: #666666;*/
/*    border: none;*/
/*    border-bottom: solid 1px #ffffff;*/
/*    font-size: 14px;*/
/*    height: 60px;*/
/*    line-height: 60px;*/
/*    padding: 0 5px;*/
/*}*/


.slick-row.selected {
    z-index: 10;
    background: #DFE8F6;
}

.slick-cell {
    padding-left: 4px;
    padding-right: 4px;
}

.slick-group {
    border-bottom: 2px solid silver;
}

.slick-group-toggle {
    width: 9px;
    height: 9px;
    margin-right: 5px;
}

/*.slick-group-toggle.expanded {*/
/*    background: url(images/collapse.gif) no-repeat center center;*/
/*}*/

/*.slick-group-toggle.collapsed {*/
/*    background: url(images/expand.gif) no-repeat center center;*/
/*}*/

.slick-group-totals {
    color: gray;
    background: white;
}

.slick-group-select-checkbox {
    width: 13px;
    height: 13px;
    margin: 3px 10px 0 0;
    display: inline-block;
}

/*.slick-group-select-checkbox.checked {*/
/*    background: url(images/GrpCheckboxY.png) no-repeat center center;*/
/*}*/

/*.slick-group-select-checkbox.unchecked {*/
/*    background: url(images/GrpCheckboxN.png) no-repeat center center;*/
/*}*/

.slick-cell.selected {
    background-color: var(--highlight);
}

.slick-cell.active {
    border-color: var(--active);
    border-style: solid;
}

.slick-sortable-placeholder {
    background: silver !important;
}

.slick-row.odd {
    background: var(--odd-row);
}

.slick-row.ui-state-active {
    background: var(--active);
}

.slick-row.loading {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.slick-cell.invalid {
    border-color: red;
    -moz-animation-duration: 0.2s;
    -webkit-animation-duration: 0.2s;
    -moz-animation-name: slickgrid-invalid-hilite;
    -webkit-animation-name: slickgrid-invalid-hilite;
}

@-moz-keyframes slickgrid-invalid-hilite {
    from {
        box-shadow: 0 0 6px red;
    }
    to {
        box-shadow: none;
    }
}

@-webkit-keyframes slickgrid-invalid-hilite {
    from {
        box-shadow: 0 0 6px red;
    }
    to {
        box-shadow: none;
    }
}

/*d = await projects.getAllShit();*/
/*gg = new Grid(d);*/
/*gg.show();*/

.pill-wave-light::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: var(--light);
    display: block;
    position: relative;
    /* Here we declare our inline animation */
    animation: rotate 3s linear infinite;
    /*transform: translate(29px, 6px) rotateZ(90deg);*/
    /*transform-origin: 14px;*/

}

/* Here we define our animation with the name "rotate" */
@keyframes rotate {
    0% {
        /*transform: rotate(0deg);*/
        transform: translate(30px, 7px) rotateZ(90deg);
        transform-origin: 19px;
    }
    25% {

        transform: translate(30px, 7px) rotateZ(270deg);
        transform-origin: 19px;
    }
    50% {
        transform: translate(-14px, 7px) rotateZ(270deg);
        transform-origin: 19px;
    }
    75% {

        transform: translate(-14px, 7px) rotateZ(450deg);
        transform-origin: 19px;
    }
    100% {

        /*transform: rotate(0deg);*/
        transform: translate(30px, 7px) rotateZ(450deg);
        transform-origin: 18px;
    }
}

/*.sun-moon-spinner{*/
/*    !*width: 40px;*!*/
/*    !*height: 40px;*!*/

/*    !*z-index: 2000;*!*/
/*}*/
:root {
    --sun-moon-height: 20px;
    --sun-moon-offset-x: 55px;
}

.sun-moon-spinner {
    height: 16px;
}

.sun-moon-spinner::before {
    content: "";
    width: var(--sun-moon-height);
    height: var(--sun-moon-height);
    /*overflow: visible;*/
    border-radius: 5px;
    display: block;
    position: relative;
    background-repeat: no-repeat;
    background-size: var(--sun-moon-height) var(--sun-moon-height);
    background-position: center;
    background-image: url("/assets/img/Yin_yang_no_dot.svg");
    transform: translate(var(--sun-moon-offset-x), 20px) rotate(0deg);

}

.sun-moon-spinner::after {
    content: "";
    overflow: visible;

    width: var(--sun-moon-height);
    height: var(--sun-moon-height);
    /*border-radius: 5px;*/
    display: block;
    position: relative;
    background-repeat: no-repeat;
    background-size: var(--sun-moon-height) var(--sun-moon-height);
    background-position: center;
    background-image: url("/assets/img/yin_yang_sun_moon_2.svg");
    animation: rotate-sun-moon 3s linear infinite;
    transform: translate(var(--sun-moon-offset-x), -90px) rotate(0deg);

}

/* Here we define our animation with the name "rotate" */
@keyframes rotate-sun-moon {
    0% {
        transform: translate(var(--sun-moon-offset-x), -100px) rotate(0deg);
        /*transform: translate(30px, 7px) rotateZ(90deg);*/
        /*transform-origin: 19px;*/
    }
    100% {
        transform: translate(var(--sun-moon-offset-x), -100px) rotate(360deg);

        /*transform: translate(30px, 7px) rotateZ(270deg);*/
        /*transform-origin: 19px;*/
    }
}

:root {
    --h-collapse-icon-width: 44px;
    --sun-moon-height: 20px;
    --sun-moon-offset-x: 55px;
}

.h-collapse,
.h-collapse2, .h-collapse3,
.h-collapse4, .h-collapse5 {
    -webkit-transition: width 0.2s ease;
    -moz-transition: width 0.2s ease;
    -o-transition: width 0.2s ease;
    transition: width 0.2s ease;

    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    background: transparent;
    vertical-align: middle;
    line-height: 30px;
    height: var(--grid-row-height);

    margin-bottom: 2px;
    width: 0px;
}

h-collapse2.in {
    width: calc(10px + var(--h-collapse-icon-width) * 2);
}

.h-collapse3.in {
    width: calc(10px + var(--h-collapse-icon-width) * 3);
}

.h-collapse4.in {
    width: calc(10px + var(--h-collapse-icon-width) * 4);
}

.h-collapse5.in {
    width: calc(10px + var(--h-collapse-icon-width) * 5);
}

.action-cell {
    overflow: visible;
    display: flex;
    height: 150px;
}

.actions-container {
    overflow: visible;
    /*position: fixed;*/
    /*width: 150%;*/
    height: 100%;
    transform: translateY(-6px);
}

.actions-container .btn {
    position: relative;

}

.ui-widget-content.active {
    /*height: 150px;*/
}

.action-cell {
    height: 150px;
}

#file-browser-embed-area {
    height: 80vh;
    overflow: auto;
}


/*:root {*/
/*    --color-light: #f4f3eff0;*/
/*    --color-dark: #212121;*/
/*    --color-signal: #fab700;*/
/*    --color-background: #f4f3ef;*/
/*    --color-text: var(--color-dark);*/
/*    --color-accent: var(--color-signal);*/
/*    --size-bezel: .5rem;*/
/*    --size-radius: 12px;*/
/*    --color-shadow: #313133;*/
/*    --bg-color: var(--color-background);*/
/*    --bg-img: url('/assets/img/mini_bg.svg');*/
/*    --bg-filter: blur(0px);*/
/*    --btn-secondary: #e7dac7;*/
/*    --icon-img: url('/assets/img/paper-plane.svg')*/
/*}*/

/**
FANCY WORDX INPUTS
 */
.input {
    position: relative;
    display: block;
    margin-top: 10px;
}

.input__label {
    position: absolute;
    left: 0;
    top: 0;
    padding: calc(var(--size-bezel) * 0.75) calc(var(--size-bezel) * .5);
    margin: calc(var(--size-bezel) * 0.75 + 3px) calc(var(--size-bezel) * .5);
    background: pink;
    white-space: nowrap;
    transform: translate(3px, 0);
    transform-origin: 0 0;
    background: var(--color-background);
    transition: transform 120ms ease-in;
    font-weight: bold;
    line-height: 1.2;
    -moz-transform: translate(3px, 0);
    border-radius: calc(2 * var(--size-radius));
}

.input__field {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border: 3px solid currentColor;
    padding: calc(var(--size-bezel) * 1.5) var(--size-bezel);
    color: currentColor;
    background: transparent;
    border-radius: var(--size-radius);
}

.input__field:not(:-moz-placeholder-shown) + .input__label {
    transform: translate(0.25rem, -65%) scale(0.8);
    -moz-transform: translate(0.25rem, -65%) scale(0.8);
    color: var(--color-accent);
}

.input__field:not(:-ms-input-placeholder) + .input__label {
    transform: translate(0.25rem, -65%) scale(0.8);
    color: var(--color-accent);
}

.input__field:focus + .input__label,
.input__field:not(:placeholder-shown) + .input__label
    /*.input__field:valid + .input__label*/
{
    transform: translate(0.25rem, -65%) scale(0.8);
    /*-moz-transform: translate(0.25rem, -35%) scale(0.8);*/
    color: var(--color-accent);
}

.input__select_label_fix {
    transform: translate(3px, 0) !important;
    /*transform-origin: 0 0;*/
    /*background: purple;*/

    color: var(--color-text) !important;
}


.create-btn-flex {
    /*text-align: center;*/
    display: flex;
    justify-content: center;
    align-content: space-between;
    flex-direction: row;
    align-items: center;
}

.copy-button {
    color: currentColor;
    padding: 2px;
    border: outset;
    border-width: 4px;
    background: var(--btn-secondary);
    border-color: var(--btn-secondary);
    margin-top: 3px;
    border-radius: var(--size-radius);
    font-weight: 900;
}

.copy-button:hover {
    border: inset;
    border-width: 4px;
    border-color: var(--btn-secondary);
}


::-webkit-scrollbar {
    width: 12px;
    background-color: #B9BACC;
}

::-webkit-scrollbar-track {
    color: #fff;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    color: #96A9BB;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}


.flex-wrap {
    display: flex;

    flex-direction: row;
    flex-wrap: wrap;
    /*justify-content: flex-start;*/
    justify-content: space-between;


    align-items: baseline;
    align-content: center;
}

.flex-column {
    display: flex;

    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: baseline;
    align-content: center;
}

.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /*justify-content: flex-start;*/
    justify-content: space-between;
    align-items: baseline;
    align-content: center;
}


/*

body
{
    font-family:        Arial, Helvetica, sans-serif;
    background-color:   #131313;
    position:           absolute;
    top:                5px;
    bottom:             5px;
    left:               5px;
    right:              5px;
}

#grid-simple
{
    position:         absolute;
    top:              0px;
    left:             0px;
    right:            0px;
    bottom:           0px;
    margin:           auto;
    font-size:        12px;
    background-color: #ECEEE9;
}

.toggle
{
    height:           16px;
    width:            16px;
    display:          inline-block;
}
.toggle.expand
{
    background: url(http://tinyurl.com/k9ejb3a/expand.gif) no-repeat center center;
}

.toggle.collapse
{
    background: url(http://tinyurl.com/k9ejb3a/collapse.gif) no-repeat center center;
}


!*--- generic slickgrid padding pollyfill  ----------------------*!

.dynamic-cell-detail
{
    z-index:            10000;
    position:           absolute;
    background-color:   #F4DFFA;
    margin:             0;
    padding:            0;
    width:              100%;
    display:            table;
}

.dynamic-cell-detail > :first-child
{
    display:            table-cell;
    vertical-align:     middle;
    text-align:         center;
    font-size:          12px;
    line-height:        13px;
}
*/

/*Interesting not sure what it really does*/
/*https://github.com/kenwheeler/slick/issues/982#issuecomment-73517458*/
/**{*/
/*min-height: 0;*/
/*min-width: 0;*/
/*}*/

/*This sets the magic animation delays
https://github.com/miniMAC/magic#html--css-tips
*/
.magictime {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}

.magictime.vanishIn {
    -webkit-animation-duration: 0.25s;
    animation-duration: 0.25s;
}