/* FONTS */
@font-face {
    font-family: 'fs-elliot-pro';
    src: url('/static/fonts/FSELLIOTPRO.OTF');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'fs-elliot-pro-light';
    src: url('/static/fonts/FSELLIOTPRO-LIGHT.OTF');
    font-weight: normal;
    font-style: normal;
}


/* COLORS */
:root {

    /* Text */
    --txt-dark: rgb(90,90,90);
    --txt-darker: rgb(60,60,60);
    --txt-flat: rgb(130,130,130);
    --txt-flat-light: rgb(160,160,160);
    --txt-light: rgb(200, 200, 200);
    --txt-lighter: rgb(240,240,240);
    --txt-lighter-tad: rgb(250,250,250);
    
    /* Icons, (in)active elements */
    --transp: rgba(240,240,240,0.1);
    --transpi: rgba(240,240,240,0.3);
    --transp-light: rgba(240,240,240,0.4);
    --transp-lighter: rgba(240,240,240,0.5);
    --transp-lighter-tad: rgba(240,240,240,0.6);
    --transp-lighter-plus: rgba(250,250,250,0.8);
    --transp-lighter-top: rgba(250,250,250,0.94);
    --transp-dark: rgba(100,100,100,0.6);
    --transp-dark-darker: rgba(100,100,100,0.1);
    --icon-disabled: #E0E0E0;
    /* --icon-disable-hover: #E0E0E0; */
    --icon-active: #4CAF50;
    --icon-alert: #FF9E80;
    --icon-alert-hover: #FF3D00;
    --icon-gold: #FFD700;
    --icon-silver: rgb(192, 192, 192);

    /* Colors */
    /* main color aka grey/dark */
    --main-dark: rgb(50, 50, 50);
    --main-dark-darker: rgb(35,35,35);
    --main-dark-lighter: rgb(65,65,65);
    --main-dark-lighter-plus: rgb(105,105,105);

    /* 2nd color aka ... pink ? */
    /* --second-flat: #FF91F1;
    --second-lighter: #FFB8F1;
    --second-darker: #FF48F1; */
    --second-flat: #31E896;
    --second-lighter: #36ffa5;
    --second-darker: #27B877;
    --second-transp: rgba(54, 255, 165, 0.701);


    /* tmp for facet widget */
    --main-facet-bg: rgb(200,200,200);
    --main-facet-txt: rgb(35,35,35);
}

.disabled { color: var(--icon-disabled); }
a:hover .disabled,
.disabled:hover { color: var(--icon-disabled); }
.pending { color: var(--icon-disabled); }
.pending:hover { color: var(--icon-active); }
.active { color: var(--icon-active); }
.live { color: var(--second-flat); }
button.iconAlert, 
.iconAlert { color: var(--icon-alert); }
button.action:hover.iconAlert,
a:hover .iconAlert,
a:hover button.iconAlert { color: var(--icon-alert-hover); }
.gold { color: var(--icon-gold); }
.silver { color: var(--icon-silver); }

/* .button.is-primary {
    background-color: var(--second-flat);
    color: var(--main-dark)
}
.button.is-primary:hover {
    color: var(--second-flat);
    border-color: transparent; 
    background-color: var(--main-dark-lighter);
} */

.disabled, 
a:hover .disabled,
.disabled:hover,
.pending, 
.pending:hover,
.active, 
.live, 
.iconAlert, 
a:hover .iconAlert, 
.gold, 
.silver
{
    transition : all 0.3s;
    -webkit-transition :all 0.3s;
}

#public_documentation a.li_link p {
    color: var(--txt-lighter);
    padding: 0;
}

a.li_link p {
    border-bottom: solid 1px var(--txt-light);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-left: .5rem;
    margin-right: .5rem; 
    margin-bottom: 0.7rem;
}
#public_documentation a.li_link:hover p,
a.li_link:hover p {
    background-color: var(--second-flat);
    border-bottom: solid 1px var(--second-flat);
    color: var(--main-dark-darker);
    font-weight: 500;
    padding: 0.5rem;
    margin-left: 0;
    margin-right: 0; 
}

a.url {
    color: var(--txt-darker);
    font-size: .8rem;
    padding: .3rem 0;
    margin: 0 .3rem;
    /*margin:auto;*/
}
a.url:hover {
    margin: 0;
    padding: .3rem;
    color: var(--second-flat);
    background-color: var(--main-dark);
    border-bottom: none;

}
a.url,
a.li_link p,
a.li_link:hover p {
    transition : all 0.2s;
    -webkit-transition :all 0.2s;
}

.account form.fron_end input#submit,
.transpEl {
    color: var(--main-dark-darker);
    background-color: var(--transp-lighter-tad);    
}
/* .transpEl:hover {
    background-color: var(--second-flat);    
} */
.account form input#submit:hover,
a:hover .transpEl {
    color: var(--main-dark-darker);
    background-color: var(--second-lighter);    
}
.darkEl {
    background-color: var(--main-dark);    
    color: var(--transp-lighter-plus);
}
#masonryBox.stackOrg .item:hover h2,
a:hover .darkEl {
    color: var(--main-dark-darker);
    background-color: var(--second-lighter);    
}
.darkEl.transpak {
    background-color: transparent;
}
.darkEl.transpak p {
    color: var(--txt-light);
}
a:hover .darkEl.transpak p {
    color: var(--main-dark-lighter);
}



/* a tag */
a.darkIcon,
a.darkIcon {
    color: var(--transp-lighter-tad);
    background-color: transparent;    
}
a.darkIcon.is-active:hover,
a.darkIcon.is-active {
    color: var(--txt-lighter);
}
a.darkIcon.is-active:hover {
    cursor: default;
}
a.darkIcon:hover {
    /* color: var(--txt-lighter);   */
    color: var(--second-flat)
}

.transpBtn.button {
    color: var(--txt-dark);
    border-color: var(--txt-flat);
    background-color: var(--txt-flat-light);    
}
.corpus .transpBtn.button {
    background-color: var(--txt-light);    
}
#public_contact form p.submit input {
    background-color: var(--transp-lighter-tad);
}
#public_contact form p.submit input:hover,
.transpBtn.button:hover {
    color: var(--second-lighter);
    border-color: var(--txt-dark); 
    background-color: var(--txt-dark);    
}
.darkBtn.button {
    background-color: var(--main-dark);    
    color: var(--transp-lighter-plus);
}
.darkBtn.button:hover {
    color: var(--main-dark-darker);
    background-color: var(--second-lighter);    
}


/* Mix of margin and padding to avoid shitty animations artefacts */
.icon.darkFa {
    background-color: transparent;
    color: var(--txt-flat-light);
    margin: 1rem;
    height: 0.5rem;
    width: 0.5rem;
    padding: 0.5rem;
}
a:hover .icon.darkFa {
    color: var(--main-dark-lighter-plus);
    background-color: var(--second-flat);
    margin: 0;
    padding: 1.5rem;
}


/* Bulma tooltips */
.tooltip.is-tooltip-active::before, 
.tooltip:hover::before {
    border-radius: 0;
}
.tooltip.is-tooltip-right::before,
.tooltip.is-tooltip-bottom::before,
.tooltip.is-tooltip-top::before {
    color: var(--main-dark-darker);
    background-color: var(--transp-lighter-plus);    
}
.tooltip.is-tooltip-right.is-tooltip-active:not(.is-loading)::after, 
.tooltip.is-tooltip-right:focus:not(.is-loading)::after, 
.tooltip.is-tooltip-right:hover:not(.is-loading)::after {
    border-color: transparent var(--transp-lighter-plus) transparent transparent;
}
.tooltip.is-tooltip-top.is-tooltip-active:not(.is-loading)::after, 
.tooltip.is-tooltip-top:focus:not(.is-loading)::after, 
.tooltip.is-tooltip-top:hover:not(.is-loading)::after {
    border-color: var(--transp-lighter-plus) transparent transparent transparent;
}
.tooltip.is-tooltip-bottom.is-tooltip-active:not(.is-loading)::after, 
.tooltip.is-tooltip-bottom:focus:not(.is-loading)::after, 
.tooltip.is-tooltip-bottom:hover:not(.is-loading)::after {
    border-color: transparent transparent var(--transp-lighter-plus) transparent;
}


/* Transitions */
#public_contact form p.submit input,
#public_contact form p.submit input:hover,
#masonryBox.stackOrg .item h2
#masonryBox.stackOrg .item:hover h2,
.account form.front_end input#submit,
.account form.front_end input#submit:hover,
.transpEl,
a:hover .transpEl,
.darkEl,
a:hover .darkEl {
    transition : all 0.3s;
    -webkit-transition :all 0.3s;
}
/* .icon.darkFa,
a:hover .icon.darkFa {
    transition : all 0.2s;
    -webkit-transition :all 0.2s;
} */
.icon.darkFa,
a:hover .icon.darkFa,
.transpBtn.button,
.transpBtn.button:hover,
a.darkIcon,
a.darkIcon:hover {
    transition : all 0.1s;
    -webkit-transition :all 0.1s;
}

.tooltip.is-tooltip-bottom.is-tooltip-active:not(.is-loading)::after, 
.tooltip.is-tooltip-bottom:focus:not(.is-loading)::after, 
.tooltip.is-tooltip-bottom:hover:not(.is-loading)::after,
.tooltip.is-tooltip-bottom::before {
    /* transition-delay: 1s;
    -webkit-transition-delay: 1s; */
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    transition : all 0.3s;
    -webkit-transition :all 0.3s;
}