* { margin: 0; padding: 0; user-select: none; }
.userSelectAuto{ user-select:auto; }
.userSelectContain{ user-select:contain; }

/*    *{outline: 2px solid orangered;}*/
.debug1{ outline: 1px solid red; color:red; background-color:black; opacity:1; }
.debug2{ outline: 1px solid lime; color:lime; background-color:black; opacity:1; }
.debug3{ outline: 1px solid dodgerblue; color:dodgerblue; background-color:black; opacity:1; }
.debug4{ outline: 1px solid cyan; color:cyan; background-color:black; opacity:1; }
.debug5{ outline: 1px solid magenta; color:magenta; background-color:black; opacity:1; }
.debug6{ outline: 1px solid yellow; color:yellow; background-color:black; opacity:1; }

.flexHide{ display:none; }
.flexRow{ display:flex; flex-direction:row; }
.flexCol{ display:flex; flex-direction:column; }
.flexStart{ justify-content:flex-start; }
.flexCenter{ justify-content:center; }
.flexEnd{ justify-content:flex-end; }
.flexBetween{ justify-content:space-between; }
.flexAround{ justify-content:space-around; }
.flexEvenly{ justify-content: space-evenly; }
.flexStretch{ justify-content: stretch;}
.flexNormal{ justify-content: normal; }

.crossStretch{ align-items:stretch; }
.crossStart{ align-items:flex-start; }
.crossCenter{ align-items:center; }
.crossEnd{ align-items:flex-end; }
.crossBaseline{ align-items:baseline; }
.crossNormal{ align-items:normal; }

.flowWrap{ flex-wrap:wrap; }
.flowNoWrap{ flex-wrap:nowrap; }
.flowStart{ align-content:flex-start; }
.flowCenter{ align-content:center; }
.flowEnd{ align-content:flex-end; }
.flowBetween{ align-content:space-between; }
.flowAround{ align-content:space-around; }
.flowEvenly{ align-content: space-evenly; }
.flowStretch{ align-content:stretch; }
.flowBaseline{ align-content:baseline; }
.flowNormal{ align-content:normal; }

.selfFlexGrow{ flex:1; } /*flex-grow:1; flex-shrink:1; flex-basis: 0%;*/
.selfFlexGrow2{ flex:2; }
.selfFlexGrow3{ flex:3; }
.selfFlexNoGrow{ flex:0; } /*  1 auto; } /* DEFAULT! flex-grow:0 flex-shrink:1 flex-basis:auto*/
.selfFlexShrink{ flex-shrink:1; }
.selfFlexShrink2{ flex-shrink:2; }
.selfFlexShrink3{ flex-shrink:3; }
.selfFlexNoShrink{ flex-shrink:0; }

.selfCrossStretch{ align-self:stretch; }
.selfCrossStart{ align-self:flex-start; }
.selfCrossCenter{ align-self:center; }
.selfCrossEnd{ align-self:flex-end; }
.selfCrossBaseline{ align-self:baseline; }
.selfCrossNormal{ align-self:normal; }
.selfCrossAuto{ align-self:auto; }

.margin10{ margin:10px 10px; }
.margin5{ margin:5px 5px; }
.pad10{ padding:10px 10px; }
.pad5{ padding:5px 5px; }
.gap10{ gap:10px 10px; } /*row-gap:10px column-gap:10px*/
.gap5{ gap:5px 5px; }
.gapNormal{ gap:normal normal; }

:root 
{
    --mbaDarkPurple:#211741;
    --mbaLogoPurple:#211A58;
    --mbaInputIndigo:#6F64AB;
    --mbaLogoGold:#FFA800;
    --mbaYeetYellow:#FFD508;
    --mbaBackBright:#F1EFF9;

    --cicBackDark:#171F27;
    --cicBackLight:#2F3C46;
    --cicFuxia1:#FF0066;
    --cicFuxia2:#BF3069;
    --cicFuxia3:#804059;
    --cicCyan1:#00D2FF;
    --cicCyan2:#3996AA;
    --cicCyan3:#395055;
    --cicYellow1:#FFE700;
    --cicYellow2:#AA9F39;
    --cicYellow3:#555239;
}

.mbaRadialGradient{background-image: radial-gradient(circle, var(--mbaBackBright) 0%, var(--mbaInputIndigo) 300%);}
.cicRadialGradient{background-image: radial-gradient(circle, var(--cicBackLight) 0%, var(--cicBackDark) 100%);}
.textOultineBlack{ text-shadow: 1px 1px 0px black, 1px -1px 0px black, -1px 1px 0px black, -1px -1px 0px black; }
.textOutlineWhite{ text-shadow: 1px 1px 0px white, 1px -1px 0px white, -1px 1px 0px white, -1px -1px 0px white; }
.textOutlinePurple{ text-shadow: 2px 2px 0px #211A58, 2px -2px 0px #211A58, -2px 2px 0px #211A58, -2px -2px 0px #211A58; }
.textOutlineIndigo{ text-shadow: 2px 2px 0px #6F64AB, 2px -2px 0px #6F64AB, -2px 2px 0px #6F64AB, -2px -2px 0px #6F64AB; }
.textOutlineGold{ text-shadow: 2px 2px 0px #FFA800, 2px -2px 0px #FFA800, -2px 2px 0px #FFA800, -2px -2px 0px #FFA800; }
.textOutlineCyan{ text-shadow: 2px 2px 0px #44FFFF, 2px -2px 0px #44FFFF, -2px 2px 0px #44FFFF, -2px -2px 0px #44FFFF; }
.textOutlineFuxia{ text-shadow: 2px 2px 0px #FF4466, 2px -2px 0px #FF4466, -2px 2px 0px #FF4466, -2px -2px 0px #FF4466; }
.textLoadingGlow{text-shadow: 2px 2px 5px white, 2px -2px 5px white, -2px 2px 5px white, -2px -2px 5px white; }

.centerDiv
{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
}
.fullScreenDiv
{
    position: relative;
    top: 0px;
    left: 0px;

    height: auto;
    min-height: 100%;
    min-height: 100vh;
    width: auto;
    min-width: 100%;
    min-width: 100vw;

    margin: 0px;
    padding: 0px;
    gap: 0px;
    overflow:auto;
}

html 
{
    height: 100%;
    height: 100vh;
    width: 100%;
    width: 100vw;

    margin: 0px;
    padding: 0px;
    gap: 0px;
    overflow:auto;
}
body
{
    position: relative;
    top: 0px;
    left: 0px;

    height: auto;
    min-height: 100%;
    min-height: 100vh;
    width: auto;
    min-width: 100%;
    min-width: 100vw;

    margin: 0px;
    padding: 0px;
    gap: 0px;
    overflow:auto;
}

.containerBorder
{
    border-color: var(--mbaLogoPurple);
    border-style: solid;
    border-width: 5px;
    border-radius: 10px;
}
.containerWhite
{
    background-color: whitesmoke;
    border-color: whitesmoke;
    border-style: solid;
    border-width: 5px;
    border-radius: 10px;
}

button
{
    cursor: pointer;
    background-color: var(--mbaLogoPurple);
    color: var(--mbaBackBright);
    border-color: var(--mbaInputIndigo);
    border-style: solid;
    border-width: 3px;
    border-radius: 2vh;
}
button:hover
{
    background-color: var(--mbaInputIndigo);
    border-color: var(--mbaLogoPurple);
    transform: scale(1.025);
}
button:focus
{
    background-color: var(--mbaInputIndigo);
    border-color: white;
    transform: scale(1.025);
}
.buttonMain
{
    height: 4vh;
    font-size: 2vh;
    padding: 0 2vh;
}
.buttonSecondary
{
    height: 2.5vh;
    font-size: 2vh;
    padding: 0 2vh;
}
input
{
    background-color: white;
    color: var(--mbaLogoPurple);
    border-color: var(--mbaInputIndigo);
    border-style: solid;
    border-width: 3px;
    border-radius: 1vh;
}
input:hover
{
    background-color: var(--mbaInputIndigo);
    border-color: var(--mbaLogoPurple);
    color: var(--mbaBackBright);
    transform: scale(1.025);
}
input:focus
{
    background-color: var(--mbaInputIndigo);
    border-color: var(--mbaLogoPurple);
    color: var(--mbaBackBright);
    transform: scale(1.025);
}
::placeholder
{
    font-style:italic;
    font-weight: lighter;
    color: var(--mbaInputIndigo);
    transform: scale(1, 0.75);
}
input:hover::placeholder
{
    color: whitesmoke;
}
input:focus::placeholder
{
    color: whitesmoke;
}
.inputMain
{
    height: 2.5vh;
    font-size: 2vh;
    padding: 0 1vh;
}
a
{
    color: var(--mbaLogoPurple);
    font-style: italic;
    text-decoration: underline;
    text-align: center;
}
a:hover
{
    color: white;
    font-weight: bold;
    font-style: italic;
    text-shadow: 2px 2px 5px var(--mbaLogoPurple), 2px -2px 5px var(--mbaLogoPurple), -2px 2px 5px var(--mbaLogoPurple), -2px -2px 5px var(--mbaLogoPurple);
}
a:focus
{
    color: white;
    font-weight: bold;
    font-style: italic;
    text-shadow: 2px 2px 5px var(--mbaLogoPurple), 2px -2px 5px var(--mbaLogoPurple), -2px 2px 5px var(--mbaLogoPurple), -2px -2px 5px var(--mbaLogoPurple);
}

.userToggle
{
    cursor: pointer;
    background-color: var(--mbaLogoPurple);
    border-style: solid;
    border-width: 5px;
    border-radius: 10px;
}
.userToggleOn
{
    border-color: var(--mbaInputIndigo);
}
.userToggleOff
{
    border-color: var(--mbaDarkPurple);
}
.userToggleFacilitator
{
    box-shadow: 0 0 4px #00ff00;
}

.taskBoxBorders
{
    border-color: var(--mbaBackBright);
    border-style: solid;
    border-width: 1px;
}