body,html{
    min-height:100%;
    height:auto;
    height:100%;
}
body {
    display: flex;
    align-items: center;
    /* background-size: cover;
    background-repeat: no-repeat;
    background-color: #eef9fe;
    background-position: center;
    background-attachment: fixed;
    background-blend-mode: normal; */

    background: url(/images/stripes.gif);
}
h1 {
    margin:0 0 20px;
    /* text-shadow: -2px 1px #00ace5;
        -webkit-text-shadow: -2px 1px #00ace5; */
    width: 70%;
}

.cover{
    background-color:white !important;
    /* background-image: url(/images/bg-powder.svg); */
    background-image: url(/images/bg-powder-light.svg) !important;
    background-repeat: no-repeat;
    background-size: cover;
    opacity:.85;
    position:fixed;
    pointer-events:none !important;
        top:0;
        left:0;
        right:0;
        bottom:0;
    height: 100%;
    width:100%;
    z-index: 9 !important;
}

#page {
    display: flex;
        align-items:stretch;
        align-items: center;
        flex: 1;
    height: 100%;
    /* overflow-y: auto; */
    width: 100%;
    padding: 15%;
    padding:35px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 3;
    z-index: 999999999 !important;
}

#page .nest {
    /* display: block; */
}

.decision{
    display:flex;
        flex:1;
        align-items:center;
    height:100%;
    position:fixed;
    width: 100%;
}
.decision.active {
    display:block;
        flex:unset;
        align-items:unset;
    height:unset;
    position:relative;

    /* width: 90% !important;
    height: auto !important;
    margin: 50px auto !important;
    padding: 50px !important;
    background: white !important;
    box-shadow: 10px 10px 10px whitesmoke;
    z-index: 9999999999999999999999 !important;
    border: 1px solid gainsboro !important;
    border-radius: 10px !important; */
}

tree,branch,root,navs,nav,progs,prog,options,opt,family,label,close,votes,vote,agree,yes,no {    
    box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
}

tree {
    display: flex;
        align-items: center;
        flex:1;
    height: 100%;
    padding: 100px;
    padding: 0;
    position:relative;

    display: block;
    display: flex;
    padding:35px;

    margin: 0;
    width: 100%;

    height: auto !important;
    overflow: hidden !important;
}
branch{
    /* display:none; */
    left:-100% !important;
    opacity:0 !important;
    pointer-events:none;
    height:0 !important;
    width:0 !important;
        flex:1;
        flex:0;
    margin-bottom:50px;
    margin-bottom:0;
    padding:0;
    /* overflow:hidden; */

    position:absolute;
    position:relative;
    /* position:unset; */
}
branch:not(.nav){
    /* border-top:2px solid #161d51;
    padding-top:50px; */
}
branch.active{
    /* display:block; */
    flex:1;
    left:0 !important;
    opacity:1 !important;
    pointer-events:all;
    height:100% !important;
    height: auto !important;
    width:100% !important;
}
branch.getstarted{
    display:flex !important;
        align-items:center !important;
        flex:0 !important;
        justify-content:center !important;
    /* display:block !important; */
    margin: 0 auto !important;
    position:relative !important;
    /* width:auto !important; */}

    branch.getstarted.active {    
        flex: 0 0 50% !important;}

    body.edit branch.getstarted {
        display: none !important;
    }

branch.getstarted opt {
    /* background:yellow; */
    flex:0 !important;
    font-size:2em !important;
    font-weight:800 !important;
    line-height:.75em !important;
    /* letter-spacing:-2px !important; */
    justify-content: center !important;
    margin:0 auto !important;
    width:auto !important;
    padding:25px 35px !important;
}
branch .nav{
    display:flex;
        align-items:stretch;
}
branch .nest{
    /* display:flex;
        align-items:stretch; */
}
branch .inline{
    display:flex;
        align-items:stretch;
}
options label {
    margin:2px 2px 2px 0;
}
opt {
    background:white;
    border:3px solid #161d51;
    border:3px solid #eeeeee;
    break-inside: avoid;
    cursor:pointer;
    display:flex;
        align-items:center;           
        flex:none;
    letter-spacing:0;
    line-height:.75em;
    margin:1px;
    margin:2px;
    padding:15px 25px;    
    position:relative;
    width:auto;

    color:#161d51;
    text-transform:uppercase;

    font-family: 'Arial',sans-serif;
    font-family: 'Open Sans', sans-serif;
        font-weight:900 !important;
        font-size:1em;
        font-style: normal;
        line-height: 1em;

    border-radius: 4px !important;
        -moz-border-radius: 4px !important;
        -webkit-border-radius: 4px !important;
}
opt:first-of-type{
    margin-left:0px !important;
    margin-right:2px !important;
}
opt:last-of-type{
    margin-right:0px !important;
}
    options[inline] opt:last-of-type:hover{
        margin-right:15px !important;
    }
.stretch opt {          
    flex:1;
    width:100%;
}
opt:hover{
    background: #3b3069;
    /* background: tomato; */
    border-color: #161d51;
    color: #00fff5;
    /* color: transparent;
        -webkit-text-stroke: 1px #fff000; */
    margin-left: -10px !important;
    margin-top: -10px !important;
    margin-bottom: 14px !important;
    margin-right: 12px !important;
    box-shadow: 10px 10px 0px #00fff5;
        -webkit-box-shadow: 10px 10px 0px #00fff5;
}
/* branch :not(.nav) opt::after, */
branch:not(.nav) opt::after,
.progress:not(.nav) opt::after {
    content:"\00a0";
    background:#161d51;
    height:35px;
    position:relative;
    width:4px;
    position:absolute;
    left:calc(100% + 3px);
}
opt:last-of-type::after {
    content:unset !important;
}

.columns opt {
    margin: 4px 2px;
}
.columns opt::after{
    content: "\00a0";
    background: #161d51;
    height: 4px !important;
    position: relative;
    width: 35px !important;
    position: absolute;
    left: calc(50%) !important;
    top: calc(100% + 3px) !important;

    content: "";
}

/* .columns opt:nth-child(1):after {
    content: "\00a0";
    background: red;
    height: 4px !important;
    position: relative;
    width: 30px !important;
    position: absolute;
    left: calc(50%) !important;
    top: calc(100% + 3px) !important;
} */



branch {
    transition: all  1s ease;
        /* transition-delay: .5s; */
}
[nest] {
    transition: all  1s ease;
        /* transition-delay: .5s; */
}
opt {
    transition: all 0.3s ease;
}


tree branch .columns {
    border: 0;
    margin: 0 0 0 !important;
    margin-bottom: 20px !important;
}   


/* opt.continue{  
    display:none;
}
option.review{  
    display:none;
} */
branch.nav opt {  
    display:none;
}
option.active{
    display:flex;
}


option.back{
    background: #fff000;
    border-color: #e0d314;
    color: #b7ab00;
    font-weight:800;
}
option.next{
    background: #58bd85;
    border-color: #36a166;
    color: white;
    font-weight:800;

    background: #009ba7;
    border-color: #078791;
}
option.review{
    /* background: dodgerblue;
    border-color: #1065b9;
    color: white;
    font-weight:800; */
}

option.yes{
    background: #009ba7;
    border-color: #009ba7;
    border-width:3px;

    background: none;
    border-color: #161d51;
    color:#161d51;

    background: #009ba7 !important;
    border-color: #009ba7;
    color: #161d51 !important;
    font-weight:800;
}

option.yes:hover{
    background: tomato;
    border-color: #cf462e;
    color: white;
}

branch.nav {
    display: flex !important;
        align-items:center;
    /* display:block; */
    height:auto !important;
    margin-bottom:0;
    /* position:relative; */
    z-index:99999999999999999999999999999;

    position: absolute;
    top: 0;
}
branch.nav opt {
    border:none;
        border-bottom:3px solid #161d51;
    /* display:block; */
    font-size:.85em; 
    margin:2px;
    padding:7px 15px;   
}

.decision .progress{
    display:none;    
}
.decision .progress.active{
    display:flex;
        align-items:stretch;
}

body.review,
html.review{
    display: block;
    height:unset;
    min-height:unset;
    overflow: hidden;
        overflow-y:auto;
}
body.review h1 {
    width: 35%;
}
body.review #page {
    display:block;
    height:unset;
    min-height:unset;
    overflow: hidden;            
    padding: 0 100px 100px !important;
}
body.review tree{
    height:unset;
    padding:0px;
}
body.review tree{
    display:block;
}
body.review tree branch{
    position:relative !important;
    pointer-events:all;
}
body.review tree branch:nth-of-type(2){
    border-top:none !important;
}
body.review tree branch:not([branch="getstarted"]){
    border-bottom:1px dotted #161d51;
    display:flex;
    display:block;
    padding:35px 0;

    left:0 !important;
    opacity:1 !important;
    height:100% !important;
    width:100% !important;
}
body.review tree branch [nest]{
    display: flex;
    display: block;
    margin-bottom: 50px;
    padding: 0 0;
    position: relative !important;
    left: 0 !important;
    opacity: 1 !important;
    height: 100% !important;
    width: 100% !important;
}
body.review tree branch [columns] {
    border: 0;
    padding: 0 !important;
    /* column-gap: 0 !important; */
    column-rule: none !important;
}    

body.review tree branch .nav:not(.options){
    display:none;
}
















branch .input.stripe {
    border:none;
    /* box-shadow:5px 5px 0px #c2c4d3;
        -webkit-box-shadow:5px 5px 0px #c2c4d3; */
    display: flex;
        align-items: stretch;
        justify-content: left;
        flex: 1;
    /* margin-bottom: 20px; */
    margin-bottom: 10px;
}
branch .input.stripe:not(.textarea):hover {
    box-shadow:5px 5px 0px #009ba7;
        -webkit-box-shadow:5px 5px 0px #009ba7;   
}
branch .input.textarea:hover textarea {
    border: 3px solid #009ba7;
    box-shadow:5px 5px 0px #009ba7;
        -webkit-box-shadow:5px 5px 0px #009ba7;   
}
branch input[stripe]{
    background:white;
    border:none;
        border: 3px solid #161d51;
    color:#161d51;
    display:flex;
        align-items:center;
        justify-content:left;
        flex:1;
    font-family:'Open Sans',sans-serif !important;
    font-size:1em !important;
    line-height:1.5em !important;
    font-weight:bold !important;
    padding: 20px;
    text-align:left !important;
}
branch input[stripe]:hover{
    border-color: #009ba7;
    /* box-shadow:5px 5px 0px #c2c4d3;
        -webkit-box-shadow:5px 5px 0px #c2c4d3; */
   
}
branch input[stripe] label {
    background:#161d51;
    color:white;
    display:flex;
        align-items:center;
        justify-content:left;
        flex:0 0 15%;
    font-family:'Open Sans',sans-serif;
    font-size:1em;
    line-height:1.25em;
    font-weight:bold;
    padding: 20px;
    white-space:pre;
}
branch input[stripe]:hover label {
    background-color:#009ba7 !important;
    color:white;
}

    body.edit tree branch input[stripe]:hover {
        box-shadow: none !important;
            -webkit-box-shadow: none !important;
    }
    body.edit tree branch input[stripe]:hover {
        background:gainsboro !important;
    }
branch input[stripe][large],
branch input[stripe][large] label {
    font-size: 2em !important;
    line-height: 1em !important;
}

branch .inline{
    display: flex;
    margin-bottom: 20px !important;
}
branch .inline opt {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}



/* all labels label */
branch label {
    background:#161d51;
    color:white;
    display:flex;
        align-items:center;
        justify-content:left;
        flex:0 0 15%;
    /* display:block; */
    font-family:'Open Sans',sans-serif;
    font-size:1em;
    line-height:1.25em;
    font-weight:bold;
    font-weight: normal !important;
    padding: 20px;
    white-space:pre;
}
body.edit tree branch options label {
    margin: 0px !important;
    padding: 15px !important;
}
body.edit tree branch options opt {
    margin: 0px 2px !important;
    padding: 15px !important;
}
body.edit tree branch options[nolabel] opt {
    margin: 2px 2px !important;
    padding: 15px !important;
}

branch :hover label {
    /* background:#009ba7;
    color:white; */
}
branch options:hover label {
    /* background:#009ba7 !important;
    color:white !important; */
}
branch .large label {
    font-size: 2em !important;
    line-height: 1em !important;
}
branch .fields.hide{
    display:none;
}
branch [nest]{
    /* display:none; */
}
branch [nest].active{
    /* display:block; */
}
branch [nest]{
    /* display:none; */
    display:block;
    left:-100% !important;
    left:0 !important;
    opacity:0 !important;
    pointer-events:none;
    height:0 !important;
    width:0 !important;
        flex:1;
        flex:0;
    margin-bottom:50px;
    margin-bottom:0;
    padding:0;
    /* overflow:hidden; */

    position:absolute;
    position:relative;
}
branch [nest].active{
    /* display:block; */
    flex:1;
    left:0 !important;
    opacity:1 !important;
    pointer-events:all;
    height:100% !important;
    height: auto !important;
    width:100% !important;
}

tree branch opt:hover {
    box-shadow: 30px 30px 0px #00fff5;
        -webkit-box-shadow: 30px 30px 0px #00fff5;
}
tree branch options label:hover {
    box-shadow: 10px 10px 0px #00fff5;
        -webkit-box-shadow: 10px 10px 0px #00fff5;
}






options opt::before,
options opt::after{
    content:unset !important;
}
options opt > div {
    display: block;
    /* display: flex;
        align-items:center;
        flex:1;
        justify-content:center; */
}
options opt .label{
    display:flex;
        flex:1;
    font-size:2em !important;
    padding-right: 10%;
}
options opt .description{
    display:flex;
        flex:0 0 50%;
    font-size:1.15em !important;
}
[columns]{
    column-gap:7px !important;
    column-rule:none !important;
    padding:0 !important;
}
[columns] opt {
    /* margin-top: 0 !important; */
}
options[nolabel] label {
    display:none !important;    
}
agree[nolabel] > label {
    display:none !important;    
}


options {}

    options {
        display: flex;
            flex: 1;
        margin:0 0 7px;}

options[inline] {}

    options[inline] options {
        display: flex;
            flex: 1;}

options[min] {
    margin:0 0 2px;}
   
    options[min] label {
        background:none !important;
        color:#161d51 !important;
        font-weight:normal !important;
        padding:7px 12px !important;
        pointer-events:none !important;}

    options[min] opt {
        padding:7px 12px !important;}

        options[min] opt .label {
            padding: 0px !important;}

options[inline][min] {}
   
    options[inline][min] label {
        background:#161d51 !important;
        color:white !important;
        /* font-weight:bold !important; */
        padding:7px 15px !important;
        pointer-events:none !important;
        flex:0 0 15% !important;}

    options[inline][min] opt {
        padding:7px 12px !important;}

        options[inline][min] opt .label {
            padding: 0px !important;}

[columns] {
    column-count: unset !important;
    display: block !important;}

    [columns] {
        display: block !important;}
    [columns][one] {
        column-count: 1 !important;}
    [columns][two] {
        column-count: 2 !important;}
    [columns][three] {
        column-count: 3 !important;}
    [columns][four] {
        column-count: 4 !important;}
    [columns][five] {
        column-count: 5 !important;}
    [columns][six] {
        column-count: 6 !important;}
    [columns][seven] {
        column-count: 7 !important;}
    [columns][eight] {
        column-count: 8 !important;}






.input.textarea {
    display: block !important;
}

.input.textarea textarea {
    border: 3px solid #161d51;
    height: 200px;
}

.input.textarea label {
    display: inline-block !important;
    width: 15%;}

    body.edit .input.textarea label {}

body.dev #actions .nest{
    column-count: 3 !important;
    column-gap: 5px !important;
}
/* body.review #actions .nest{
    column-count: 3 !important;
    column-gap: 5px !important;
} */
body.dev #actions .nest pre{
    color: chartreuse;
    font-size: .85em !important;
}

































branch,
nest {
    transition: all  1s ease;
}

navs {
    display:block;
    left:-100% !important;
    opacity:0 !important;
    pointer-events:none;
    height:0 !important;
    width:0 !important;
        flex:1;
        flex:0;
    margin-bottom:50px;
    margin-bottom:0;
    padding:0;

    position:absolute;
    position:relative;
    transition: all  1s ease;
} 
navs.stretch {
    display:flex;
        align-items: stretch;
} 
navs.active{
    flex:1;
    left:0 !important;
    opacity:1 !important;
    pointer-events:all;
    height:100% !important;
    height: auto !important;
    /* width:100% !important; */
    width:auto !important;
}
nav,
a[nav] {
    background:none;
    border:3px solid #161d51;
    cursor:pointer;
    display:inline-block;
        vertical-align:middle;
    letter-spacing:0;
    margin:2px;
    padding:15px 25px;    
    position:relative;
    transition: all  .25s ease;
    white-space:pre;
    width:auto;
    
    font-family: 'Arial',sans-serif;
        background: #161d51 !important;
        border:none !important;
        color: white;
        text-transform: none;
        font-style: normal;
        font-size: 1em;
        font-weight: bold;
        letter-spacing: -.5px;
        line-height: .75em;

    border-radius: 4px !important;
        -moz-border-radius: 4px !important;
        -webkit-border-radius: 4px !important;
}
nav hover,
options opt hover,
.branchlabel hover,
vote * hover,
a[nav] hover {
    height: calc(100% + 30px);
    position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    width: calc(100% + 30px);

    /* background: rgba(145, 255, 0, 0.5); */
    /* display:block; */

    background:none;
    display: none;
}
nav:hover hover,
options opt:hover hover,
body.edit .branchlabel:hover hover,
vote:hover hover,
a[nav]:hover hover {
    display:block;
}

body.review .branchlabel hover{
    display:none !important;
}


.columns nav hover,
.columns options opt hover{
    height: calc(100% + 6px);
    left: -3px;
    top: -3px;
    width: calc(100% + 30px);
}
.inline.min nav hover,
.inline.min options opt hover{
    height: calc(100% + 10px);
    left: -3px;
    top: -3px;
    width: calc(100% + 25px);
}








navs nav,
navs a[nav] {
    background: #161d51;
    border: 3px solid #161d51;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-family: 'Arial',sans-serif;
        text-transform: none;
        font-style: normal;
        font-size: 1em;
        font-weight: bold;
        letter-spacing: -.5px;
        line-height: .75em;
    margin: 5px;
    padding: 14px 22.6px;
    position: relative;
    transition: all .25s ease;
    vertical-align: middle;
    white-space:pre;
    width: auto;
}
nav:first-of-type {
    /* margin-left:0px !important; */
}
nav:last-of-type {
    margin-right:0px !important;
}
nav::after {
    /* background:#161d51;
    content:"\00a0";
    height:35px;
    position:relative;
    position:absolute;
        left:calc(100% + 3px);
        top: 5px;
    width:4px; */
}
nav:last-of-type::after {
    content:unset !important;
}
/* nav.next {
    background: #58bd85;
    border-color: #36a166;
    color: white;
    font-weight: 800;

    background: #009ba7;
    border-color: #078791;
} */
nav:hover,
a[nav]:hover {
    background: #58bd85;
    color: white;
    box-shadow: 10px 10px 0px 0px #161d51;
        -webkit-box-shadow: 10px 10px 0px 0px #161d51;
    margin-left:-5px;
    margin-right:15px;
    margin-top: -5px;
    margin-bottom: 10px;

    /* box-shadow: 25px 25px 0px 0px #161d51;
        -webkit-box-shadow: 25px 25px 0px 0px #161d51;
    margin-left:-15px !important;
    margin-bottom: 15px !important;
    margin-right: 25px !important;
    margin-top:0px !important; */
}
navs nav:hover,
navs a[nav]:hover {
    background: #8a98ff;
    /* color: white;
    box-shadow: 5px 3px 0px #161d51;
        -webkit-box-shadow: 5px 3px 0px #161d51; */

    box-shadow: 10px 10px 0px 0px #161d51;
        -webkit-box-shadow: 10px 10px 0px 0px #161d51;
    margin-left:-5px;
    margin-right:15px;
    margin-top: -5px;
    margin-bottom: 10px;
}
nav.start{
    background: #7a2cc9  !important;
    flex:0 !important;
    font-size:2em !important;
    font-weight:800 !important;
    line-height:.75em !important;
    /* letter-spacing:-2px !important; */
    justify-content: center !important;
    margin:0 7px 0 0 !important;
    width:auto !important;
    padding:25px 35px !important;
}

._nav.start:hover {
    background: #00fff5 !important;
    /* box-shadow: 5px 5px 0px #161d51;
        -webkit-box-shadow: 5px 5px 0px #161d51;
    margin-left: -2px !important;
    margin-right: 4px !important;
    margin-top: -10px !important; */
    color: #7a2cc9;

    box-shadow: 25px 25px 0px 0px #161d51;
        -webkit-box-shadow: 25px 25px 0px 0px #161d51;
    margin-left:-15px !important;
    margin-bottom: 15px !important;
    margin-right: 25px !important;
    
    /*floating hover*/
    margin-top:0px !important;
}
nav.start:hover {
    /* background: #00fff5 !important; */
    box-shadow: 25px 25px 0px 0px #161d51;
        -webkit-box-shadow: 25px 25px 0px 0px #161d51;
        /* color: #7a2cc9; */
    /* margin-left: -40px !important;
    margin-bottom: 50px !important;
    margin-right: 50px !important;
    margin-top: 0px !important; */
}
nav.dev {
    /* margin: 0 0 0 2px !important; */}

    .stretch nav{   
        display:flex;    
            align-items: center;   
            flex:0;
        width:100%;}

nav,
a[nav] {
    /* background: #7a2cc9  !important; */
    /* color: white !important; */
    flex:0 !important;
    font-family:'Encode Sans',sans-serif;
    font-size:2em !important;
    font-weight:800 !important;
    line-height:.75em !important;
    letter-spacing:-1px !important;
    justify-content: center !important;
    margin: 0 7px 0px 0 !important;
    width:auto !important;
    padding:25px 35px !important;
}
nav a {
    /* background: #7a2cc9  !important; */
    /* color: white !important; */
    border-radius: 4px !important;
        -moz-border-radius: 4px !important;
        -webkit-border-radius: 4px !important;
    padding: 25px 35px !important;
    display: inline-block;
}
nav:hover,
a[nav]:hover {
    /* background: #00fff5 !important; */
    /* background: #ea00ff  !important; */
    box-shadow: 20px 20px 0px 0px #161d51 !important;
        -webkit-box-shadow: 20px 20px 0px 0px #161d51 !important;
    /* color: #7a2cc9 !important; */
    /* color: white !important; */
    margin-left: -20px !important;
    margin-bottom: 20px !important;
    margin-right: 27px !important;
    margin-top: -20px !important;
}
nav:hover a {
    /* color: #7a2cc9 !important; */
}
nav:first-of-type:hover {
    /* margin-left: -30px !important; */
}
nav:last-of-type:hover {
    margin-right: 20px !important;
}








forms[columns] a[nav] hover {
    height: calc(100% + 30px);
    position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    width: calc(100% + 30px);
    /* background: rgba(145, 255, 0, 0.5); */
    /* display: block; */

    background: none;
    display: none;
}

forms[columns] a[nav]:hover {    
    /* background: #58bd85; */
    /* color: white; */
    box-shadow: 10px 10px 0px 0px #161d51 !important;
        -webkit-box-shadow: 10px 10px 0px 0px #161d51 !important;
    margin-left:-5px !important;
    margin-right:15px !important;
    margin-top: -5px !important;
    margin-bottom: 10px !important;
}

[flex] {
    display:flex !important;
        flex:1 !important;
}
[flex] [nav],
[flex] a[nav] {
    display:flex !important;
        flex:1 !important;
    letter-spacing: 0px !important;
}










nav,
nav a,
nav[purple],
nav[purple] a,
a[nav],
a[nav][purple]  {
    background: #7a2cc9  !important;
    color: white !important;
}
nav:hover,
nav:hover a,
nav[purple]:hover,
nav[purple]:hover a,
a[nav][purple]:hover ,
a[nav][purple]:hover {
    background: #ea00ff  !important;
    color: white !important;
}





nav[blue],
nav[blue] a,
a[nav][blue] {
    background: #00fff5  !important;
    color: #7a2cc9 !important;
}
nav[blue]:hover,
nav[blue]:hover a,
a[nav][blue]:hover {
    background: #ea00ff  !important;
    color: white !important;
}




nav[orange],
nav[orange] a,
a[nav][orange] {
    background: #ff9b00  !important;
    color: white !important;
}
nav[orange]:hover,
nav[orange]:hover a,
a[nav][orange]:hover {
    background: #ea00ff  !important;
    color: white !important;
}




nav[pink],
nav[pink] a,
a[nav][pink] {
    background: #ff007f  !important;
    color: white !important;
}
nav[pink]:hover,
nav[pink]:hover a,
a[nav][pink]:hover {
    background: #ea00ff  !important;
    color: white !important;
}




nav[green],
nav[green] a,
a[nav][green] {
    background: #17c98f  !important;
    color: white !important;
}
nav[green]:hover,
nav[green]:hover a,
a[nav][green]:hover {
    background: #ea00ff  !important;
    color: white !important;
}







navs[map]{
    box-shadow:none !important;
    display:flex !important;
    /* opacity:1 !important; */
    /* left:0 !important; */
    padding:10px !important;
    /* pointer-events:all !important; */
    /* position:relative !important; */
    
    position: fixed !important;
    top: 0 !important;
}
navs[map][top] nav {
    /* background: #7a2cc9 !important; */
    /* color: white !important; */
    flex: 1 !important;
    font-family: 'Encode Sans', sans-serif !important;
    font-size: 2em !important;
    font-weight: 800 !important;
    line-height: .75em !important;
    letter-spacing: -1px !important;
    justify-content: center !important;
    margin: 0 7px 0px 0 !important;
    width: auto !important;
    padding: 25px 35px !important;


    background: #7a2cc9 !important;
    border: 3px solid #161d51;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: 0;
    margin: 2px;
    padding: 15px 25px;
    position: relative;
    transition: all .25s ease;
    white-space: pre;
    width: auto;
    border: none !important;
    color: white;
    text-transform: none;
    font-style: normal;
    font-size: 1em;
    font-weight: bold;
    letter-spacing: -.5px;
    line-height: .75em;
    border-radius: 4px !important;
        -moz-border-radius: 4px !important;
        -webkit-border-radius: 4px !important;

    /*flex box*/
    display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    white-space:normal !important;
}
navs[map][top] nav:hover {
    background: #ea00ff !important;
    box-shadow: 20px 20px 0px 0px #161d51;
        -webkit-box-shadow: 20px 20px 0px 0px #161d51;
    margin-left: -20px !important;
    margin-bottom: 20px !important;
    margin-right: 27px !important;
    margin-top: -20px !important;
}

navs[map][top] nav[small]{
    flex:unset !important;
}

navs[map][top] nav#backtoapp{
    background:#fcb525 !important;
}

navs[map][top] nav#findparcel{
    background:mediumseagreen !important;
}

navs[map][top] nav#backtoapp:hover,
navs[map][top] nav#findparcel:hover{
    background: #ea00ff !important;
}

navs[map][top] nav:hover {
    background: #ea00ff !important;
    box-shadow: 20px 20px 0px 0px #161d51 !important;
        -webkit-box-shadow: 20px -20px 0px 0px #161d51 !important;
    margin-left: -20px !important;
    margin-bottom: -20px !important;
    margin-right: 27px !important;
    margin-top: 20px !important;
}

navs[map][top] nav hover {
    top:-30px !important;
}

navs[top] nav:hover {
    /* background: #ea00ff !important;
    box-shadow: 20px 20px 0px 0px #161d51;
        -webkit-box-shadow: 20px -20px 0px 0px #161d51;
    margin-left: -20px !important;
    margin-bottom: -20px !important;
    margin-right: 27px !important;
    margin-top: 20px !important; */
}
navs[bottom] {
    padding: 10px !important;
    position: fixed !important;
        bottom: 0 !important;
        top: unset !important;
        left: 0 !important;
        right: unset !important;
}


#themap navs[map]{
    display:none;}

#themap.active navs[map]{
    display:flex;}

navs[map][top] nav.disabled.bgdarkblue {
    background: #898792 !important;}

navs[map][top] nav.disabled.bgorange {
    background: #e99586 !important;}

navs[map][top] nav.disabled.bgpurple {
    background: #e59ac9 !important;}

navs[map][top] nav.disabled.bgbrightblue {
    background: #81adda !important;}

navs[map][top] nav.disabled.bgyellow {
    background: #f1d08e !important;}
    
 

navs[map]{
    box-shadow: 15px 20px 20px 4px rgba(0,0,0,.25);
        -moz-box-shadow: 15px 20px 20px 4px rgba(0,0,0,.25);
        -webkit-box-shadow: 15px 20px 20px 4px rgba(0,0,0,.25);
    position: relative;}
    
    
navs[map].disabled nav.bgdarkblue {
    background: #898792 !important;}

navs[map].disabled nav.bgorange {
    background: #e99586 !important;}

navs[map].disabled nav.bgpurple {
    background: #e59ac9 !important;}

navs[map].disabled nav.bgbrightblue {
    background: #81adda !important;}

navs[map].disabled nav.bgyellow {
    background: #f1d08e !important;}

navs[map][bottom] > * {
    float:none !important;
    margin: 0 7px 0px 0 !important;
    position:relative !important;
        top:unset !important;
        left:unset !important;
}
/* navs[map][bottom][left] > * {
    background: #7a2cc9 !important;
}
navs[map][bottom][left] > *:hover {
    background: #ea00ff !important;
    box-shadow: 20px 20px 0px 0px #161d51 !important;
        -webkit-box-shadow: -20px -20px 0px 0px #161d51 !important;
    margin-left: 20px !important;
    margin-bottom: -20px !important;
    margin-right: -13px !important;
    margin-top: 20px !important;
    z-index: 999999 !important;
} */

navs[map][top][left]{
    justify-content: left !important;
    position:fixed !important;
        top: 0 !important;
        right: unset !important;
        bottom: unset !important;
        left: 0 !important;}

    navs[map][top][left] nav{
        flex: unset !important;}

    navs[map][top][left] nav:hover {
        background: #ea00ff !important;
        box-shadow: 20px 20px 0px 0px #161d51 !important;
            -webkit-box-shadow: -20px -20px 0px 0px #161d51 !important;
        margin-left: 20px !important;
        margin-bottom: -20px !important;
        margin-right: -13px !important;
        margin-top: 20px !important;
        z-index: 999999 !important;}

    navs[map][top][left] nav hover {
        left:-30px !important;
    }

navs[map][top][right]{
    justify-content: right !important;
    position:fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: unset !important;
        left: unset !important;}

    navs[map][top][right] nav{
        flex: unset !important;}






   
/* navs[small] nav {
    background: #161d51 !important;
    margin-left: -5px;
    margin-right: 15px;
    margin-top: -5px;
    margin-bottom: 10px;
} */

navs[small] {
    padding:10px !important;}

    body.edit navs[small][top] {
        margin-top: 0px;
        padding:10px 20px !important;
    }

    body.edit navs[small][top][hasapp] {
        margin-top: -30px;
    }
    
navs[small] nav {
    background: #161d51;
    font-family: 'Encode Sans', sans-serif !important;
    font-size:1em !important;
    letter-spacing:0px !important;
    line-height:1em !important;
    margin-left: 0;
    margin-right: 7px;
    margin-top: 0;
    margin-bottom: 0;
    padding:10px 15px !important;
    z-index: 999 !important;
}

navs[small] nav:hover {
    background: #ea00ff;
    box-shadow: 20px 20px 0px 0px #fac7ff !important;
        -webkit-box-shadow: 20px -20px 0px 0px #fac7ff !important;
    margin-left: -20px !important;
    margin-bottom: -20px !important;
    margin-right: 27px !important;
    margin-top: 20px !important;
}

navs[small][top] nav:hover {
    box-shadow: 20px 20px 0px 0px #fac7ff !important;
        -webkit-box-shadow: 20px -20px 0px 0px #fac7ff !important;
    margin-left: -20px !important;
    margin-bottom: -20px !important;
    margin-right: 27px !important;
    margin-top: 20px !important;
}

navs[small][top][left] nav:hover {
    box-shadow: 20px 20px 0px 0px #fac7ff !important;
        -webkit-box-shadow: -10px -10px 0px 0px #fac7ff !important;
    margin-left: 10px !important;
    margin-bottom: -10px !important;
    margin-right: -3px !important;
    margin-top: 10px !important;
    z-index: 99999999999999 !important;
}

navs[small][top][left] nav hover {
    /* background: rgba(145, 255, 0, 0.5) !important; */
    width: calc(100% + 18px);
    margin-top: -10px;
    margin-left: -18px;
    height: calc(100% + 12px);
}









progs{
    display:none; 
    transition: all  1s ease;   
}
progs.active{
    display:flex;
        align-items:stretch;
}
prog{
    background:none;
    border:3px solid #161d51;
    cursor:pointer;
    display:inline-block;
        vertical-align:middle;
    letter-spacing:0;
    line-height:.75em;
    margin:2px;
    padding:15px 25px;    
    position:relative;
    width:auto;

    color:#161d51;
    text-transform:uppercase;

    font-family: 'Arial';
        font-weight:400;
        font-size:1em;
        font-style: italic;
        line-height: 1em;
    transition: all  .25s ease;
}

prog:first-of-type{
    margin-left:0px !important;
}
prog:last-of-type{
    margin-right:0px !important;
}
prog:hover{
    background: #161d51;
    /* background: tomato; */
    color: #f1f9fe;
    /* color: transparent;
        -webkit-text-stroke: 1px #fff000; */
}
prog::after {
    background:#161d51;
    content:"\00a0";
    height:35px;
    position:relative;
    position:absolute;
        left:calc(100% + 3px);
        top: 5px;
    width:4px;
}
prog:last-of-type::after {
    content:unset !important;
}
prog:hover {
    box-shadow: 5px 5px 0px #161d51;
        -webkit-box-shadow: 5px 5px 0px #161d51;
}
.stretch prog{          
    flex:1;
    width:100%;
}













#actions .controls:first-of-type {
    display: flex !important;
        align-items:stretch !important;
        flex: 1;
        justify-content:right !important;
        justify-content:center !important;
}
#actions .controls:first-of-type .control {
    margin-left:1px !important;
    font-size: 2.25em;
    text-transform: none;
    padding: 20px 35px !important;
    display: flex !important;
    align-items:center !important;
    flex: 1;
    background: dodgerblue !important;
    color: white !important;
    white-space:pre;
}
#actions .controls:first-of-type .control:hover {
    background: mediumvioletred !important;
    color: white !important;
}


.body.loading{
    display:none !important;}
    
.body.loading.active{
    background:rgba(255,255,255,0.75) !important;
    display:flex !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:100% !important;
    text-align:center !important;
    align-items:center !important;
    z-index: 999999999999999999999999999999999999999 !important;
}











.button{
    margin:0 11px 0 0 !important;
    /* margin:0 20px !important; */
}
.button:first-of-type{
    /* margin-left:0 !important; */
}
.button:last-of-type{
    /* margin-right:0 !important; */
}
.button {
    border-radius: 0 1px 1px !important;
        -moz-border-radius: 0 1px 1px !important;
        -webkit-border-radius: 0 1px 1px !important;
    box-shadow: 10px 10px 0px 0px #161d51 !important;
        -webkit-box-shadow: 10px 10px 0px 0px #161d51 !important;
    /* display: block !important; */
    display:inline-block !important;
    transition: all .35s ease-out !important;
}
.button:hover {
    box-shadow: 15px 20px 0px 0px #00fff5 !important;
        -webkit-box-shadow: 15px 20px 0px 0px #00fff5 !important;
    margin-left:-10px !important;
    margin-top:-10px !important;
    margin-bottom: 10px !important;
    margin-right: 10px !important;
}


#mypledge{
    margin:20px;
}
#mypledge #count{
    display:none;
    display:flex !important;
        align-items:center;
        justify-content:center;
    height:0;
    width:0;
    /* left:100% !important; */
    position:absolute !important;
    font-size: 0 !important;

    /*cwhite ff1 fs2 _ aic jcc  br100 h100px w100px tac z20 cp*/
    color:white;
    font-family:'Arial',sans-serif;
        font-size:2em;
        font-weight:bold;
    border-radius:100%;
    text-align:center;
    z-index:9999999999999999;
    cursor:pointer;

    margin: 0px !important;
    transition: all .25s ease !important;
    
    box-shadow: -9px 6px 0px 0px #00fff5 !important;
        -webkit-box-shadow: -9px 6px 0px 0px #00fff5 !important;
        
    box-shadow: 0px 0px 20px 0px #00fff5 !important;
        -webkit-box-shadow: 0px 0px 20px 0px #00fff5 !important;
}
#mypledge #count:hover {
    box-shadow: 15px 5px 0px 0px #00fff5 !important;
        -webkit-box-shadow: 15px 5px 0px 0px #00fff5 !important;
    margin-top: -5px !important;
    margin-bottom: 0px !important;
    margin-right: 15px !important;
    margin-left: -30px !important;
}
#mypledge #count.active{
    display:flex !important;
    height:100px !important;
    width:100px !important;
    /* left:unset !important; */
    font-size: 36px !important;
    position:relative !important;
}
#mypledge #pledges{
    display:none;
}
#mypledge #pledges pledge{
    display:block;
}
.pledgeit.active *{
    /* color:#7a2cc9 !important; */
    text-shadow: -1px 1px 0px #24c0c1  !important;
}
/* .pledgeit .isitpledged{
    display:none !important;
}
.pledgeit.active .isitpledged.pledged{
    display:flex !important;
} */
.pledgeit.active .pledgethis,
.pledgeit.active .showhide{
    display:none !important;
}
#report.blocks3 .pledge{
    border:0px !important;
    /* padding:35px !important; */
    transition: all .25s ease !important;
}
#report.blocks3 .pledge .isitpledged{
    background:none !important;
    border:0px solid #009ba7 !important;
    display:flex !important;
    pointer-events:none !important;
    /* padding:35px !important; */
    transition: all .35s ease !important;
}
#report.blocks3 .pledge .isitpledged.pledged{
    border: 200px solid #009ba7 !important;
}
#report.blocks3 .pledge.goalmet .isitpledged.pledged {
    /* border: 150px solid #0df58e !important; */
}





.pledgeit .ipledged{
    display:none !important;
}
.pledgeit.active .ipledged{
    display:flex !important;
}













.popup {
    display: none !important;
    /* position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    height: 100%;
    margin: 0;
    overflow-y: auto;
    padding: 0 20%;
    width: 100%;
    z-index: 99999999999999999999999999; */
    
    overflow-y: auto;
    position: relative !important;
    position: fixed !important;
    height: 100%;
    width: 100%;
}
.popup.active {
    display: flex !important;
        align-items: center !important;

    flex: 1 !important;
}
.popup .overlay {
    display: block !important;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 99999999;
    width: 100%;
    margin: 0;
    height: 100%;
}
.popup .bar{
    position:relative !important;
        top:0 !important;
        left:0 !important;
    display:flex !important;
    align-items:stretch !important;
    justify-content:center !important;
    height:auto !important;
    width:100% !important;
    z-index:999999999999999 !important;
    
}

.popup .nest{
    position:relative !important;
        top:0 !important;
        left:0 !important;
    display:block !important;
    display:flex !important;
        align-items:stretch !important;
        justify-content:center !important;
        flex: 0 0 50% !important;
    height:auto !important;
    width:100% !important;
    z-index:999999999999999 !important;    
}
.bgpurple{
    background: #6e1eaf;   
}
.bgpurple.overlay{
    background: rgb(110 30 175 / 80%) !important;   
    background: rgba(110, 30, 175, 0.8) !important;    
}
.bgbrightpurple{
    background: #a200ff;  
}
.bgbrightpurple.overlay{
    background: rgb(162 0 255 / 70%) !important;  
    background: rgba(162, 0, 255, 0.7) !important;   
}