/* ****************** */
/* General styling */
/* ****************** */

/* MEow */
html, body {
    height: 100vh;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* The film corner's menu styling */
#dkrapp-global-header-top {
    z-index: 25;
}

/* Apply vertical scroll, if needed */
#dkr-artapp-wrapper .dkrapp-add-scroll {
    overflow-y: scroll;
}

#dkr-artapp-wrapper .dkrapp-video-container {
    min-height: 100px;
}

/* Elementor text editor should have dynamic font size, within the art app */
#dkr-artapp-wrapper .elementor-widget-container .elementor-text-editor {
    font-size: calc(4px + 1vmax);
}

/* close-me icons should have a pointer */
.close-me {
    cursor: pointer;
}

/* Adjust paragraphs' margins within artapp to reduce vertical space */
#dkr-artapp-wrapper p {
    margin-bottom: 0.2em;
}

/* Headers for accordions should have no bottom margin */
#dkr-artapp-wrapper .dkrapp-accordion-header {
    margin-bottom: 0;
}

/* Global header styling */
.dkrapp-header-thefilmcorner-menu nav.elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item {
    text-transform: uppercase;
}

.dkrapp-header-thefilmcorner-menu nav.elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item > a.elementor-item {
    font-weight: bold;
}

/* Links colours */
#dkr-artapp-wrapper .color-accent,
#dkr-artapp-wrapper .color-accent-hover:hover,
#dkr-artapp-wrapper .color-accent-hover:focus,
#dkr-artapp-wrapper :root .has-accent-color,
#dkr-artapp-wrapper .has-drop-cap:not(:focus):first-letter,
#dkr-artapp-wrapper .wp-block-button.is-style-outline,
#dkr-artapp-wrapper a {
    color: #004099;
}


/* ********************* */
/* Video library styling */
/* ********************* */

.dkrapp-video-library-draggable,
.dkrapp-video-library-draggable > li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.dkrapp-video-library-draggable {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
}

.dkrapp-video-library-draggable > li {
    width: 47%;
    margin: 4px;
}

body:not(.elementor-editor-active) .dkrapp-video-preview-droppable-target {
    opacity: 0;
}


/* ******************** */
/* Preview area styling */
/* ******************** */

.dkrapp-library-droppable .elementor-image > a > img {
    max-height: 300px;
}


/* ********************* */
/* Notebook area styling */
/* ********************* */

#dkrapp-slide-footer .dkrapp-notebook-area {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    height: 10vh;
    padding: 5px 1px 1px;
    background-color: #D5D5D5;
    border-radius: 8px;
}

#dkrapp-slide-footer .dkrapp-notebook-area label {
    padding: 5px;
    font-weight: bold;
    text-transform: uppercase;
}

#dkrapp-slide-footer .dkrapp-notebook-area textarea {
    height: 100%;
    width: 85%;
    border-radius: 8px;
    resize: none;
    font-size: calc(4px + 1vmin);
    padding: 2px 4px;
    color: #ccc;
    background-color: #333;
}

#dkrapp-slide-footer .dkrapp-notebook-area #dkrapp-notebook-input-text {
    display: none;
    padding: 5px;
    color: #333;
    background-color: #D5D5D5;
    border-radius: 7px;
}

#dkrapp-slide-footer .dkrapp-notebook-area textarea::-webkit-input-placeholder {
    padding: 2px 4px;
    color: #ccc;
}

#dkrapp-slide-footer .dkrapp-notebook-area textarea:-moz-placeholder { /* Firefox 18- */
    padding: 2px 4px;
    color: #ccc;
}

#dkrapp-slide-footer .dkrapp-notebook-area textarea::-moz-placeholder { /* Firefox 19+ */
    padding: 2px 4px;
    color: #ccc;
}

textarea:-ms-input-placeholder {
    padding: 2px 4px;
    color: #ccc;
}

#dkrapp-slide-footer .dkrapp-notebook-area textarea::placeholder {
    padding: 2px 4px;
    color: #ccc;
}

#dkrapp-slide-footer .elementor-widget:not(:last-child) {
    margin-bottom: 0;
}

#dkrapp-slide-footer .dkrapp-enter-slide-0 > .elementor-widget-container img {
    width: 25vmin;
}


/* ****************** */
/* Accordions styling */
/* ****************** */

.dkrapp-accordions-wrapper {
    overflow: hidden;
}

.dkrapp-accordions-wrapper .dkrapp-accordion-container {
    border-radius: 6px;
    background-color: aliceblue;
    padding: 5px;
    user-select: none;
}

.dkrapp-accordions-wrapper .dkrapp-accordion-container > h5 {
    text-transform: uppercase;
    margin: 0;
}

.dkrapp-accordions-wrapper .dkrapp-accordion-container > ul {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.dkrapp-accordions-wrapper .dkrapp-accordion-container > ul > li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.dkrapp-accordions-wrapper .dkrapp-accordion-container > ul > li:hover {
    opacity: 0.65;
}

.dkrapp-accordions-wrapper .dkrapp-accordion-container > .dkrapp-accordion-toggle {
    position: relative;
    cursor: pointer;
    font-size: calc(6px + 1vmax);
}

.dkrapp-accordions-wrapper .dkrapp-accordion-container > .dkrapp-accordion-toggle > i.fa.close-me {
    position: absolute;
    display: none;
    right: 10px;
    line-height: inherit;
}

.dkrapp-accordions-wrapper .dkrapp-accordion-container > ul > li .dkrapp-accordion-label {
    font-size: calc(6px + 1vmax);
}

.dkrapp-accordions-wrapper .dkrapp-accordion-container > ul > li .dkrapp-accordion-content {
    display: none;
}


/* ****************************************************** */
/* Common steps colors - Maybe create CSS vars for these? */
/* ****************************************************** */

/*--e-global-color-be24899: #333333;*/
/*--e-global-color-20a87c1: #D5D5D5;*/
/*--e-global-color-9218e66: #43BAB8;*/
/*--e-global-color-305e186: #45BAB7;*/
/*--e-global-color-6bbcb59: #57BEAA;*/
/*--e-global-color-a8a9a7e: #8FC885;*/
/*--e-global-color-4d8e4f1: #D4D556;*/
/*--e-global-color-d49c966: #F3D63F;*/
/*--e-global-color-33d8075: #F6C334;*/
/*--e-global-color-95419ae: #F3A327;*/
/*--e-global-color-143de16: #F18D20;*/
/*--e-global-color-a08ede4: #F08329;*/
/*--e-global-color-7ee8e19: #EF7644;*/

#dkr-artapp-wrapper .bgcolour-0,
#dkrapp-slide-footer .bgcolour-0,
#dkrapp-wrapper-pathline .bgcolour-0 {
    background-color: #43bab8;
}

#dkr-artapp-wrapper .bgcolour-1,
#dkrapp-slide-footer .bgcolour-1,
#dkrapp-wrapper-pathline .bgcolour-1 {
    background-color: #45bab7;
}

#dkr-artapp-wrapper .bgcolour-2,
#dkrapp-slide-footer .bgcolour-2,
#dkrapp-wrapper-pathline .bgcolour-2 {
    background-color: #57BEAA;
}

#dkr-artapp-wrapper .bgcolour-3,
#dkrapp-slide-footer .bgcolour-3,
#dkrapp-wrapper-pathline .bgcolour-3 {
    background-color: #8fc885;
}

#dkr-artapp-wrapper .bgcolour-4,
#dkrapp-slide-footer .bgcolour-4,
#dkrapp-wrapper-pathline .bgcolour-4 {
    background-color: #d4D556;
}

#dkr-artapp-wrapper .bgcolour-5,
#dkrapp-slide-footer .bgcolour-5,
#dkrapp-wrapper-pathline .bgcolour-5 {
    background-color: #f3d63f;
}

#dkr-artapp-wrapper .bgcolour-6,
#dkrapp-slide-footer .bgcolour-6,
#dkrapp-wrapper-pathline .bgcolour-6 {
    background-color: #f6c334;
}

#dkr-artapp-wrapper .bgcolour-7,
#dkrapp-slide-footer .bgcolour-7,
#dkrapp-wrapper-pathline .bgcolour-7 {
    background-color: #f3a327;
}

#dkr-artapp-wrapper .bgcolour-8,
#dkrapp-slide-footer .bgcolour-8,
#dkrapp-wrapper-pathline .bgcolour-8 {
    background-color: #f18d20;
}

#dkr-artapp-wrapper .bgcolour-9,
#dkrapp-slide-footer .bgcolour-9,
#dkrapp-wrapper-pathline .bgcolour-9 {
    background-color: #f08329;
}

#dkr-artapp-wrapper .bgcolour-10,
#dkrapp-slide-footer .bgcolour-10,
#dkrapp-wrapper-pathline .bgcolour-10 {
    background-color: #ef7644;
}


/* *************** */
/* Tooltip styling */
/* *************** */

.dkrapp-tooltip-wrapper {
    position: fixed;
    display: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    opacity: 0;
    background-color: rgba(142, 115, 115, 0.72);
    z-index: 500;
}

.dkrapp-tooltip-wrapper > .dkrapp-tooltip-container {
    position: relative;
    min-width: 50vw;
    max-width: 90vw;
    width: 50vw;
    /*height: 50vh;*/
    padding: 25px;
    margin: 0;
    background-color: aliceblue;
    border: 2px solid aliceblue;
    border-radius: 25px;
}

.dkrapp-tooltip-wrapper > .dkrapp-tooltip-container > .close-me {
    position: absolute;
    top: 15px;
    right: 15px;
}


/* ************************************* */
/* Scrollbars! Yes, scrollbars styling!! */
/* ************************************* */

html {
    --scrollbarBG: #888888;
    --thumbBG: #2d2d2d;
}

textarea::-webkit-scrollbar,
.dkrapp-add-scroll::-webkit-scrollbar {
    width: 11px;
}

textarea,
.dkrapp-add-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

textarea::-webkit-scrollbar-track,
.dkrapp-add-scroll::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
}

textarea::-webkit-scrollbar-thumb,
.dkrapp-add-scroll::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG);
    border-radius: 6px;
    border: 3px solid var(--scrollbarBG);
}