/* BASE STYLE */
/* ---------------------------------------------------------------------------*/
:root {
    --palette-bg: #f6f6f6;
    --off-white: #efefef;
    --faint-gray: #e6e6e6;
    --body-bg: #ffffff;
    --txt-color: #333;
    /*--a-color: #A01E1E;*/
    --a-color: #0f6351;
    /*--accent-color: #ff0000;*/
    --accent-color: #26D285;
    --faint-color: #999;
    --less-faint-color: #666;
    --dark-gray: #666;
    --fail-color: #ff0000;
    --button-color: #6f6f6f;
    --lush-green: #26D285;
}

html {
    background-color: var(--body-bg);
    color: var(--txt-color);
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', 'Roboto', sans-serif; /*'Libre Franklin', sans-serif;*/
    font-weight: 200;
    font-size: 100%;
    height: 100%;
}

.body {
    min-height: 100%;
    position: relative;
}

#content-separator {
    /*margin-top: 1%;*/
    width: 100%;
    border-bottom: 1px var(--faint-gray) solid;
}

#content {
    min-height: 100%;
    width: 90%;
    margin: 3% auto;
}

#triad-content {
    width: 100%;
}

.hidden {
    display: none;
}

a {
    color: var(--a-color);
}

.af {
    font-family: "Poppins", "Fredericka the Great", "Adobe Blank";
}

.f {
    font-family: 'Roboto', sans-serif;
}

.pr {
    position: relative;
}

.subt {
    font-size: 180%;
    font-weight: 500;
}

.subsubt {
    font-size: 120%;
    font-weight: 400;
}

.subtsp {
    margin: 0 0 1% 0;
}

.semib {
    font-weight: 400;
}

@media screen and (min-width: 1000px) {
    #triad-content {
        width: 1000px;
        margin: 0 auto;
    }
}

/* JQUERY UI */
/* ---------------------------------------------------------------------------*/

.ui-widget {
    font-family: inherit;
}

.ui-widget-header {
    border: 1px solid #dddddd;
    background: #efefef;
    color: #666;
    font-weight: 500;
}
.ui-widget-header a {
    color: #666;
}

/* COMMON ELEMENTS */
/* ---------------------------------------------------------------------------*/

.button {
    background-color: var(--off-white);
    color: #c6c6c6;
    font-variant: small-caps;
    font-size: 150%;
    padding: 0.7% 1%;
    border-radius: 5px;
    border: 1px var(--faint-gray) solid;
    white-space: nowrap;
    cursor: pointer;
    flex: 1;
}

.button.enabled {
    border-color: #ccc;
    color: var(--dark-gray);
}

.button.enabled:hover,
.button.enabled:active {
    border-color: var(--dark-gray);
}

.button.enabled:active {
    background-color: var(--dark-gray);
    color: var(--off-white);
}

.smallbutton {
    color: #555;
    font-size: 75%;
    padding: 0.2% 0.4%;
    border-radius: 5px;
    border: 1px #ccc solid;
    white-space: nowrap;
    cursor: pointer;
}

.smallbutton:hover {
    border-color: var(--dark-gray);
}

.button,
.flexbutton,
.icon {
    display: inline-block;
}

.icon {
    font-size: 150%;
    text-align: center;
    vertical-align: middle;
}

.icon span {
    vertical-align: middle;
}

.menu-cont {
    margin: 0 0 2% 0;
    display: flex;
}


.menu-sec {
    border: 1px var(--faint-gray) solid;
    float: left;
    padding: 1%;
    border-radius: 5px;
    margin: 0 0.5% 0 0;
    flex-grow: 2;
}

.menu-sec-labeled {
    padding: 4% 1% 1% 2%;
    position: relative;
}

.menu-sec-labeled.color-menu-sec {
    padding: 4% 3% 1% 3%;
}

.menu-sec-labeled .label {
    position: absolute;
    top: 0;
    left: 1%;
    font-size: 70%;
    color: #999;
}

.menu-sec div {
    vertical-align: middle;
}

.drop {
  border: solid var(--faint-color);
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  cursor: pointer;
}

.drop:hover {
    border-color: var(--dark-gray);
}

.drop.down {
    transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.drop.up {
    transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.mydialog {
    position: relative;
}

.modal-dial {
    width: 90%;
}

.dialog-content {
    margin: 5% 0;
}

.dialog-sec {
    margin-bottom: 2%;
}

.dialog-content input {
    color: var(--lush-green);
    font-size: 75%;
    border: 1px solid var(--faint-gray);
    width: 100%;
}

.bad-input {
    border: 1px solid var(--fail-color);
}

@media screen and (min-width: 1000px) {
    body {
        font-size: 100%;
    }
    .button {
        font-size: inherit;
    }

    .modal-dial {
        width: 50%;
    }
}

/* HEADER & FOOTER */
/* ---------------------------------------------------------------------------*/

.logo {
    font-weight: 200;
    font-style: normal;
    font-size: 250%;
}

.aicolor {
    color: var(--accent-color);
}

nav {
    width: 100%;
    position: relative;
}

nav a {
    text-decoration: none !important;
    color: inherit;
}

nav .nav-cont {
    width: 100%;
    position: relative;
}

nav .logo {
    width: 100%;
    position: relative;
}

nav .htab {
    width: 23%;
    text-align: center;
    position: relative;
    display: inline-block;

    font-family: "Poppins", "Fredericka the Great", "Adobe Blank";
}

nav .htab div {
    width: 80%;
    margin: 0 auto;
}

.beta {
    position: absolute;
    bottom: -5px;
    right: 0;
    color: var(--faint-color);
    font-size: 30%;
}

footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    color: var(--faint-color);
    font-size: 80%;
}

footer a {
    color: inherit;
}

/* For Desktop. */
@media screen and (min-width: 1000px) {
    nav {
        width: 950px;
    }
    nav .logo {
        display: inline-block;
        width: 30%;
        margin-right: 1%;
    }
    nav .htab {
        width: 15%;
    }
    .beta {
        top: 0;
        right: -15%;
        transform: rotate(-90deg);
    }
}


/* LEFT/RIGHT PANELS */
/* ---------------------------------------------------------------------------*/

.panel {
    width: 100%;
    position: relative;
    margin: 3% 0;
    vertical-align: top;
}

.panel-cont {
    margin: 0 2%; /*0 10%;*/
    position: relative;
    text-align: justify;
}

.panel .fullscreen {
    width: 100%;
}

@media screen and (min-width: 1000px) {
    .panel {
        margin: 1% 0;
        display: inline-block;
    }
    .panel-left {
        width: 48%; 
    }
    .panel-right {
        width: 48%; 
        margin-left: 1%;
    }

    .panel-left-triad{
        width: 40%;
    }
    .panel-right-triad {
        width: 58%;
        margin-left: 1%;
    }
}

/* HOMEPAGE */
/* ---------------------------------------------------------------------------*/

.paper {
    margin-bottom: 1%;
}

.papertitle {
    font-weight: 500;
}

.papertitle a {
    text-decoration: none;
    color: inherit;
}

.authors {
    font-style: italic;
}

/* RECOLOR HOME */
/* ---------------------------------------------------------------------------*/

.sample {
    display: inline-block;
    width: 49%;
    margin: 1% 0 2% 0;
    position: relative;
}

.sample img {
    width: 100%;
}

@media screen and (min-width: 1000px) {
    .sample {
        display: inline-block;
        width: 10%;
        margin: 1% 2% 3% 0;
    }
}

/* RECOLOR UX */
/* ---------------------------------------------------------------------------*/

#theimg {
    width: 100%;
}

.hoverbutton {
    padding: 3%;
    background-color: #999;
    color: white;
    display: inline-block;
    width: 43%;
    text-align: center;
}

.hoverbutton:hover {
    background-color: #ccc;
}

@media screen and (min-width: 1000px) {
    #theimg {
        width: 50%;
    }
    .hoverbutton {
        font-size: inherit;
        padding: 2%;
        width: auto;
    }
}

/* COLOR SAIL UX */
/* ---------------------------------------------------------------------------*/
#warnings {
    font-size: smaller;
    padding: 2%;
    background-color: #faf8b5;
}

#abovecontent {
    font-size: 70%;
    margin: 0 0 2% 0;
}

#palette-panel {
    /*border: 1px solid #dcd7d7;*/
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: var(--palette-bg);
    user-select: none;
}

#palette-panel svg {
    position: absolute;
}

circle,
#edgesvg {
    cursor: pointer;
}

.svg-swatches {
    left: -30%;
    width: 8%;
    height: 100%;
}

#palette-overlay-cont {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#palette-overlay {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
}

.controls-cont {
    margin: 2% 2% 6% 2%;
}

.sailcontrol {
    margin: 2% 0;
}

.roundcorner {
    border-radius: 5px;
}

#help-icon {
    position: absolute;
    top:0;
    left:0;
    width: 10%;
    height: 10%;
    cursor: pointer;
}

#help {
    position: absolute;
    left: 10%;
    top: 10%;
    padding: 2px;
    border: 1px solid var(--faint-gray);
    box-shadow: 0 0 10px var(--faint-color);
    width: 70%;
    height: 70%;
    background-color: white;
}

#help img {
    width: 100%;
}

@media screen and (min-width: 1000px) {
    .controls-cont {
        margin: 1%;
    }
    .sailcontrol {
        display: inline-block;
        margin: 0 1% 0 0;
    }
    #help-icon {
        width: 3%;
        height: 3%;
    }
    #help {
        left: 3%;
        top: 3%;
        width: 50%;
        height: 50%;
    }
}

/* BUILDER UI BLOCK */
/* ---------------------------------------------------------------------------*/

#title-line .h-item {
    display: inline-block;
    line-height: normal;
    vertical-align: middle;
    position: relative;
}

#palette-name {
    width: 100%;
    padding: 0 20px 0 10px;
    margin: 8px 0;
    border: none;
    font-size: 180%;
    box-sizing: border-box;
    border: 1px solid var(--body-bg);
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-weight: 500;
}

#txt-color-input:focus {
    outline-width: 0;
}

.color-menu-sec {
    flex-grow: 0;
}

.smallbutton.private {
    border-color: var(--fail-color);
    color: var(--fail-color);
}

.smallbutton.private:before {
    content: "private";
}

.smallbutton.public {
    border-color: var(--lush-green);
    color: var(--lush-green);
}

.smallbutton.public:hover,
.smallbutton.private:hover {
    border-color: var(--dark-gray);
}

.smallbutton.public:before {
    content: "public";
}

#save.enabled {
    background-color: var(--lush-green);
    color: white;
}

#save.enabled:active {
    background-color: white;
    color: var(--lush-green);
}

.colorinputcontainer {
    padding: 0 30% 0 10%;
}

.txt-color-input {
    font-size: 120%;
}

#psave-info {
    position: absolute;
    left: 10px;
    bottom: 0px;
    font-size: 50%;
}

.currcolorcont {
    position: relative;
}

.currcolorcont input[type="color"] {
    width: 25px;
    height: 25px;
    z-index: 2;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0.001;
}

#expandcolor {
    margin-left: 5px;
}

#hsv-pane,
.helperpane {
    padding: 1% 1% 0 1%;
    border: 1px solid var(--faint-gray);
    margin: 0 0 1% 0;
}

.freepik {
    font-size: 50%;
    color: var(--faint-color);
    text-align: center;
}

.freepik a {
    color: var(--faint-color);
}

/* EXPLORE PAGE */
/* ---------------------------------------------------------------------------*/

.palettes-cont {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.pthumb {
    width: 45%;
    margin: 2%;
    box-shadow: 0 0 10px var(--faint-gray);
    font-size: 80%;
    font-style: oblique;
    color: var(--faint-color);
}

.pthumb:hover {
    box-shadow: 0 0 10px var(--faint-color);
}

.pthumb img {
    width: 100%;
}

.pthumb a {
    color: inherit;
    text-decoration: none
}

.pthumbinfo.name {
    color: var(--less-faint-color);
}

.pthumbinfo.date {
    font-size: 50%;
}

@media screen and (min-width: 1000px) {
    .pthumb {
        width: 20%;
    }
}

.prevnext {
    text-align: center;
    font-size: 70%;
    margin: 2% 0;
}

/* LOGIN BLOCK */
/* ---------------------------------------------------------------------------*/

.forgot-cont {

}

.auth-container {
    font-size: smaller;
    position: relative;
    width: 100%;
    z-index: 5;
}

.signin-hover {
    padding: 2%;
    background-color: #eee;
    box-shadow: 0px 5px 20px 1px #888888;
}

.verify-button {
    color: var(--faint-color);
    text-decoration: underline;
    cursor: pointer;
}

.verify-ok,
.ok-color {
    color: var(--lush-green);
}

.verify-sent {
    color: var(--faint-color);
}

.verify-fail,
.warn-color {
    color: var(--fail-color);
}

.loginout {
    color: var(--a-color);
    text-decoration: underline;
    cursor: pointer;
}

#fire-logout,
#fire-login {
    text-align: center;
}

#login-container {
    width: 100%;
    text-align: center;
}

.infoblock {
    margin: 10% 0;
    font-size: 140%;
    text-align: center;
}

.subinfo {
    font-size: 80%;
    color: var(--lush-green);
    font-style: italic;
}

.subinfo .logout {
    color: inherit;
    font-weight: 500;
}

@media screen and (min-width: 1000px) {
    .infoblock {
        margin: 5% 0;
        font-size: 120%;
    }

    .auth-container {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 30%;
    }

    #fire-logout,
    #fire-login {
        text-align: right;
    }
}

/* RESEARCH */
/* ---------------------------------------------------------------------------*/

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.proj_resources {
    font-size: 90%;
    margin: 1% 0;
}

.proj_resources a {
    color: var(--accent-color);
}

.proj_resources a {
    color: var(--accent-color);
}

.proj_resources div {
    display: inline-block;
    margin-right: 2%;
}

.livedemo, .livedemo a {
    background-color: #26d285;
    color: white;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 3px;
}

.paddedcontent {
    margin: 0 10% 2% 10%;
    text-align: justify;
}

.smiley {
    float: right;
    width: 30%;
    height: auto;
    margin: 0 0 2% 2%;
}

/* HOME SPLASH SCREEN */
/* ---------------------------------------------------------------------------*/

.bg_video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.playhere {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 10;
}

.playhere img {
    width: 100%;
    height: auto;
}

/* EXPERIMENTAL */
/* ---------------------------------------------------------------------------*/

#three-container {
    width: 100%;
}




/* PALETTE ELEMENTS --------------------------------------------------------- */
.container {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: var(--palette-bg);
    user-select: none;
}

#bg-canvas {
    width: 100%;
    height: 100%;
}

#main-svg, #bg-canvas2, #touch-canvas {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
}

#main-svg, #bg-canvas, #bg-canvas2, #art-canvas, #touch-canvas {
    width: 100%;
    height: 100%;
    user-select: none;
}

#touch-canvas {
    display: none;
    pointer-events: none;
}


/* TOUCH DEVICES ------------------------------------------------------------ */

/* no-touch-style */
.nts {
    -webkit-tap-highlight-color: transparent;
}

.nsel {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
}

/* SVG CONTROLS ------------------------------------------------------------- */

#svg-swatches {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.swatch {
    width: 30px;
    height: 30px;
    border: 5px solid white;
    background-color: blue;
    display: inline-block;
    margin: 1%;
    border-radius: 20px;
    box-shadow: 0 0 1px 1px var(--faint-gray);
}

.swatch-sel {
    box-shadow: 0px 0px 1px 2px var(--lush-green)
}

.locked {
    background-position: 0 0;
    width: 16px;
    height: 16px;
    margin: 7px;
}

.locked-light {
    background-image: url("img/locked_white.png");
}

.locked-dark {
    background-image: url("img/locked_black.png");
}

.unlink {
    background-image: url("img/unlink.png");
    background-position: 0 0;
    width: 26px;
    height: 26px;
    position: absolute;
    left: 7px;
    top: 50px;
    display: none;
}

.swatch-sel .unlink {
    display: block;
}

.unlinked div {
    display: none;
}
/* HSV Slider */
.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 20px;
    border-radius: 15px;
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
    margin: 15px 0 15px 0;
}

.slider-top {
  margin: 0 0 15px 0;
}

#hue {
background: linear-gradient(to right,
  hsl(0,100%,50%),
  hsl(36.5,100%,50%),
  hsl(73,100%,50%),
  hsl(109.5,100%,50%),
  hsl(146,100%,50%),
  hsl(182.5,100%,50%),
  hsl(219,100%,50%),
  hsl(255.5,100%,50%),
  hsl(292,100%,50%),
  hsl(328.5,100%,50%),
  hsl(365,100%,50%));
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge)
and -moz- (Firefox) to override default look) */

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border: 3px solid white;
    border-radius: 50%;
    background: lightgray;
    cursor: pointer;
  }

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border: 3px solid white;
    border-radius: 50%;
    background: lightgray;
    cursor: pointer;
}