@charset "utf-8";


/*   -- main css    */




html, body {
  height: auto !important;
  min-height: 100%;
}


            body {
                height:100%;
                width:100%;
                margin: 0 auto;
                padding: 0;
                /* background-color: #EFEFEF; */
                /* background-color: #EFEFEF; */
                background: linear-gradient(180deg, #063e4e 0%, #038db3 100%);
                font-family: 'PT Sans', sans-serif !important;
                font-size:18px;
                line-height: 25px;

                -webkit-font-smoothing: antialiased;
                text-rendering: optimizeLegibility;
                -moz-osx-font-smoothing: grayscale;

      
                
            }

            .clear {
                clear:both;
                }

            a {
                    text-decoration:none;

                }

            p {
                margin: 0 auto;
                padding: 0; 
            }


            li {
                  float: left;
                 list-style-type: none;
                 display: block;
            }

            hr{

                 margin-top: 40px;
                 margin-bottom: 30px;
                 opacity: .5;
            }


            .centeringBox{

                margin: 10 auto 0 auto;
                display: block;

                padding: 0; 
                font-size:15px;
                line-height: 21px;
                letter-spacing: .04px;
                color: #2B2B2B; text-decoration:none;
            }


            .centeringBox hr{

                display: block;
                margin-top: 40px;
                margin-bottom: 30px;
                margin-left: auto;
                margin-right: auto;
                border-style: inset;
                border-width: 1px;

            }


   /*  LOG IN BOXES  __________________________________________________*/


            body#loggingIn{
                
                background: linear-gradient(180deg, #000024 0%, #5408a0 100%);
                font-family: 'PT Sans', sans-serif;
                font-size: 12px;
                font-weight: 600;
                line-height: 32px;
                letter-spacing: 3px;
                color: #77bff7; 
                opacity: .7;
                text-decoration:none;
                text-transform: lowercase;
                min-height: 100vh; /* Ensure body covers full viewport height */
                margin: 0; /* Remove default margin */
            }

            .emIntro {

                font-family: 'PT Sans', sans-serif;
                font-size: 15px;
                font-weight: 500;
                line-height: 23px;
                letter-spacing: 0.5px;
                /*text-align: center;*/
                text-decoration:none;
                /*text-transform: uppercase;*/
                text-transform: none;
        
                
            }



            .emIntro h1{

                font-family: 'Oswald', sans-serif;
                font-size: 40px;
                font-weight: 500;
                line-height: 44px;
                letter-spacing: 1.2px;
                /* text-align: left; */
                text-decoration:none;
                text-transform: uppercase;
       
            }

            .emIntro p{
                margin-bottom: 6px;
                opacity: 1;
                color: #6ec8fb; text-decoration:none;
            }

            .centerName{
                text-align: center;
                letter-spacing: 1.2px;

            }

             .nameBig{

             font-size: 26px;
             letter-spacing: 1.2px;

            }

              .EmImage{

                /* Remove margin: auto to allow left alignment */
                display: block; /* Ensures the element behaves like a block */
                margin: 0 auto; /* Centers the block horizontally */

                margin-top: 25px;
                margin-bottom: 35px;

                Width: 140px;
                Height: 140px;
                opacity: .8;
               /* margin-left: -33px; */

              }

             .emHead{
                padding-top: 30px;
                padding-bottom: 60px;
                Margin: auto;
                /* Remove margin: auto to allow left alignment */
                Width: 140px;
                Height: 140px;
              }


               #backgroundApp{

                margin: auto;
                min-height: 550px; /* Change fixed height to minimum height */
                width: 550px;
                padding: 20px;

            }
            
            /* Add styles for the container to ensure it stretches */
            .container {
                min-height: 100vh;
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;
            }

            .panel-body{

            width: 280px;
            margin: 0 auto;

            }




                 /* SMALL SCREENS FOR RESPONSE AREA________________________________________________________________*/
            @media only screen and (max-width: 650px) {
            
                        .EmImage{
                            Width: 80px;
                            Height: 80px;
                        }

                           .emHead{
                            padding-top: 10px;
                            padding-bottom: 20px;
                            Width: 80px;
                            Height: 80px;
                        }


                        .emIntro {

                        font-family: 'PT Sans', sans-serif;
                        font-size: 16px;
                        font-weight: 500;
                        line-height: 18px;
                        letter-spacing: 1px;
                        /*text-align: center;*/
                        text-decoration:none;
                        /*text-transform: uppercase;*/
                        text-transform: none;
                        opacity: .8;
                        
                    }

                    .emIntro h1{

                        font-size: 32px;
                        font-weight: 500;
                        line-height: 34px;
                        letter-spacing: 1px;
                        /* text-align: left; */
                        text-decoration:none;
                        text-transform: uppercase;
                        opacity: 1;
                    }

                    #backgroundApp{

                    margin: auto;
                    height:550px;
                    width:280px;
                    padding: 20px;

                    }

    
            }

                .help-block{

                font-family: 'Oswald', sans-serif;
                font-size: 13px;
                text-transform: uppercase;
                letter-spacing: 2.6px;
                color: #D0FF43; text-decoration:none;
                 font-weight: 500;
                line-height: 20px;
                text-align: center;
                margin-top: 10px;
                display: inline-block;
                }



            .EmCheckbox{

                width: 165px;
                margin: auto;
            }

            .EmCheckbox input[type="checkbox"]{

                width: 14px;
                height: 14px;
                
                background: #ffffff;
                border-radius: 2px;
                margin-bottom: 30px;
         
                border: 0px;
                opacity: .9;
              
            }

            .EmEmail{

            line-height: 21px;

            }



            .EmEmail input{

                font-family: 'PT Sans', sans-serif;
                font-size: 14px;
                font-weight: 300;
                line-height: 21px;
                padding: 6px;
                border-radius: 4px;
                border: none;
                width: 96%;
                letter-spacing: 1px;
                background-color: #F7F7F7;
                opacity: .3;


            }

            .promo{
              width: 76%;
              margin: auto;
              margin-bottom: 24px;

            }

            .EmEmail input:focus{
                opacity: .75;
            }


            .form-group{

                margin-bottom: 30px;
            }

            .buttonLogIn{

                width: 230px;
                margin: auto;
                padding-top: 2px;
            }


            .buttonLogIn .loggingIn{
   
                width: 230px;
                margin: auto;
                margin-top: 10px;
                float: none;
                font-family: 'Oswald', sans-serif;
                font-weight: 500;
                font-size: 14px;
                line-height: 22px;
                text-transform: uppercase;
                letter-spacing: 2.6px;
                color: #ffffff; text-decoration:none;
                text-align: center;
                padding-top: 12px;
                padding-bottom: 12px;
                padding-right: 33px;
                padding-left: 33px;
                border-radius: 8px;
                 -moz-border-radius: 8px;
                -webkit-border-radius: 8px;
                background: #2787E4;
                opacity: .75;
                Border: none;
                display: block;

            }

                .buttonLogIn .loggingIn:hover{

                    opacity: 1;
                   
                }

                .lowerLinkBox{

                    width: 200px;
                    margin: auto;
                    padding-bottom: 30px;
                }

                .lowerLinkBox2{

                    width: 55px;
                    margin: auto;
                }


                 .drop{

                    margin-top: 40px;
                }


                .lowerLink{

                font-family: 'Oswald', sans-serif;
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
                text-align: center;
                opacity:.8;
                letter-spacing: 1px;
                color: #ffffff;

                }

                .lowerLink2{

                font-family: 'Oswald', sans-serif;
                font-size: 15px;
                font-weight: 400;
                line-height: 22px;
                text-align: center;
                text-transform: uppercase;
                opacity:.8;
                letter-spacing: 1px;
                color: #ffffff;

                }





                .lowerLink:hover{
                    opacity:1;
                }

                .Regone{

                    margin-right: 20px;
                }
                .Regtwo{

                    margin-left: 20px;
                }


                .Reg3{

                    font-size: 18px;
                    margin-right: 30px;
                }
                .Reg4{
                    font-size: 18px;
                    margin-left: 50px;
                }



       /* HEADER ________________________________________________________________*/

            .header-cont {
                width:100%;
                position:fixed;
                top:0px;
                 z-index: 1000;
            }
         

            #header {
              
                margin: 0 auto 0 auto;
                position:relative;
                width: 100%;
                height: 70px;
                padding-top: 0px;
                padding-left: 0px;
                top:0px;
                background: linear-gradient(180deg, #000039 0%, #29054e 100%); /* Match the body gradient */
               
            }

            #header ul {
                margin: 0px;
                padding: 0px
                display: block;


            }

            #header img {
            padding-top: 9px;

            }

/* NAVBOX ________________________________________________________________*/

           .navbox{

             max-width: 497px;
             margin: 0 auto;

            }

            .onboard {
                margin: 0 auto;
                max-width: 331px;

            }

            .onboard2 {
                margin: 0 auto;
                max-width: 157px;

            }

            .navbox ul {
                list-style-type: none;
                padding-left:0px;
             

            }

             .navbox li {

              
                text-align: center;
                height: 70px;
                width: 165px;
                display: block;
                margin: auto;

            }

             .navbox ul li.active:hover{
            	background-color: #2361A6; 

            }

            .navbox ul li:hover {
             background-color: #114885; /* Add a hover color */ 

            }



            /* SMALL SCREENS ________________________________________________________________*/
            @media only screen and (max-width: 650px) {
            
                .navbox {
                 width: 318px;
                }

                .onboard{

                 width: 215px;

                }

                .onboard2{

                 width: 110px;

                }

                 .navbox li {

                width: 105px;
                 }
    
            }

/* END OF NAVBOX ___________________________________________________________*/



/* BEGINNING OF MIDDLE CONTAINER AND PRIMARY MOMENT TEXT___________________________________________________________*/
    

            #middleContainer{
              
            width:100%;  
            margin: 0 auto;
            padding-bottom: 400px;
            padding-top: 50px;

             }


             #middleContainerAnalysis{
              
             width:100%;  
             margin: 0 auto;
             padding-bottom: 10px;
             padding-top: 0px;



             }



            .middleMoment{

             max-width: 635px;
             margin: 0 auto;
             padding-bottom: 10px;
             padding-left: 16px;
             padding-right:16px;

            }


             .middleMomentResults{

             max-width: 635px;
             margin: 0 auto;
             padding-bottom: 10px;
           

            }

            .middleMoment .momentContext {
            
                font-family: 'Oswald', sans-serif;
                font-weight: 400;
                font-size: 25px;
                line-height: 28px;
                text-transform: uppercase;
                letter-spacing: .9px;
                color: #4688c1f7; text-decoration:none;
                text-align: left;
                margin-bottom: 21px;
            
            }

            .wider{

             max-width: 600px;
             overflow: hidden;
             /* margin-top: 40px; */


            }

            .processing {

                margin: 0 auto;

                display: block;
                height: 105px;
                background-color: #dedede;

                margin-top: 10px;
                margin-bottom: 20px;
                padding-top: 85px;
                padding-bottom: 12px;
                padding-right: 33px;
                padding-left: 33px;
                border-radius: 10px;
                 -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
            
            }

            .segments {

                margin: 0 auto;
                display: block;
                height: 105px;
                background-color: #515475;

                margin-top: 10px;
                margin-bottom: 20px;
                padding-top: 85px;
                padding-bottom: 12px;
                padding-right: 33px;
                padding-left: 33px;
                border-radius: 10px;
                 -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
            
            }

               .middleMoment .processing p{
                font-family: 'Oswald', sans-serif;
                font-weight: 500;
                font-size: 16px;
                text-transform: uppercase;
                letter-spacing: 2.6px;
                color: #55828e; text-decoration:none;
                text-align: center;
                
            
            }

             .middleMoment .segments p{
                font-family: 'Oswald', sans-serif;
                font-weight: 500;
                font-size: 16px;
                text-transform: uppercase;
                letter-spacing: 2.6px;
                color: #FFFFFF; text-decoration:none;
                text-align: center;
                
            
            }



             .middleMoment p {

                margin: 0 auto;
                padding: 0; 
                font-family: 'PT Sans', sans-serif;
                font-size: 20px;
                font-weight: 500;
                line-height: 25px;
                letter-spacing: .04px;
                color: #e7f9fc; 
                text-decoration:none;
               
            }

            .middleMoment a{

                margin: 0 auto; 
                font-family: 'PT Sans', sans-serif;
                font-size: 22px;
                line-height: 32px;
        
                letter-spacing: .04px;
                color: #6eeeff; 
                text-decoration:none;
                cursor:pointer;
               
            }


            .middleMoment a:hover{

                color: #dff1f3; 
               
            }

            .middleMoment b {

                font-family: 'PT Sans Bold', sans-serif;
                font-size: 18px;
                /* color: #000000; text-decoration:none; */
                
            }


            .middleMoment h2 {

                display: block;
                font-size: 21px;
                font-family: 'PT Sans Bold', sans-serif;
                line-height: 28px;
                color: #535353;
                text-decoration:none;
                -webkit-margin-before: 0.83em;
                -webkit-margin-after: 0.83em;
                -webkit-margin-start: 0px;
                -webkit-margin-end: 0px;

            }




               /* SMALL SCREENS FOR RESPONSE AREA________________________________________________________________*/
            @media only screen and (max-width: 650px) {
            
              .wider{

             max-width: 286px;
             margin: 0 auto;


            }

    
            }

            


         


            
/*  THIS IS TO STYLE THE ENTRY FORM FOR TYPING IN A MOMENT.*/

            .medium-editor-placeholder:after  {

                color: #666666!important;
            }

            .marginBox{

                margin-top: 11px;
                margin-bottom: 0px;
                
            }

            .medium-editor-element{
                word-wrap: break-word;
                min-height: 100px!important;
            }

               .marginBox p{

                font-family: 'Oswald', sans-serif;
                font-weight: 400;
                font-size: 13px;
                line-height: 22px;
                text-transform: uppercase;
                letter-spacing: .6px;
                color: #ffffff; text-decoration:none;
                padding-bottom: 6px;
            }



            .writeBox {
                
                background-color: #ffffff;
                padding: 12px;
                border-radius: 4px
                opacity: .75;
            }

            .writeBox input{

                outline-width: 0;
                outline-color: white;

            }

            .writeBox input:focus{

                outline-width: 0;
                 outline-color: white;

            }

            [contenteditable="true"]:focus {
            outline: 0;
            outline-color: white;
            },

            input:focus, textarea {
                outline: none !important;
                 outline-color: white;
            }

            .medium-editor-element {

                outline-width: 0;
            }

            .medium-editor-element:focus {

                outline-width: 0;
                 outline-color: white;
            }

            .writeBox p {

                padding: 0; 
                font-family: 'PT Sans', sans-serif;
                font-size: 18px;
                line-height: 29px;
                letter-spacing: .04px;
                color: #2B2B2B; 
                /* text-decoration:none; */
                text-transform: none;
               
            }

            .writeBoxShorter {
                
                background-color: #ffffff;
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 8px;
                padding-bottom: 8px;
                 border-radius: 4px;
               

            }

            .writeBoxShorter input{
                width: 100%;
                border: none;
                padding: 0; 
                font-family: 'PT Sans', sans-serif;
                font-size: 18px;
                line-height: 32px;
                letter-spacing: .04px;
                color: #2B2B2B; 
                text-decoration:none;
                outline-width: 0;
                 outline-color: white;
            }

            .writeBoxShorter input:focus{

                outline-width: 0;
                 outline-color: white;

            }

            .input momentInput:focus {

                outline-width: 0;
                 outline-color: white;
            }

            .middleMoment .tinyRed {

                color: #ff847e;
                font-family: 'PT Sans', sans-serif;
                font-size: 12px;
                font-weight: 600;
                line-height: 14px;
                letter-spacing: .04px;
                margin-bottom: 5px;
                margin-top: 12px;
                text-align: right;
            }


            .middleMoment .makeBlack {

                color: #c5f4ff;
            }


        /* SMALL SCREENS FOR RESPONSE AREA________________________________________________________________*/
            @media only screen and (max-width: 500px) {
            
                .middleMoment .tinyRed {

                text-align: left;

                }


  
            }

            



            .momentHeader{
                
                margin: 20px 0px 20px 0px;
               
                font-family: 'Oswald', sans-serif;
                font-weight: 400;
                font-size: 14px;
                line-height: 22px;
                text-transform: uppercase;
                letter-spacing: 1.6px;
                color: #9E9E9E; text-decoration:none;

            }

            .momentHeader ul{



            }

          


            .centerIt{

                
            }

            .middleMoment .momentFooter{

                font-family: 'Oswald', sans-serif;
                font-weight: 400;
                font-size: 15px;
                line-height: 32px;
                text-align: center;
                text-transform: lowercase;
                letter-spacing: 1.4px;
                color: #606060; text-decoration:none;
                margin: 30px 0px 40px 0px;

            }

            .momentFooter a{

             color: #606060; text-decoration:none;
             opacity: .5;

            }

            .momentFooter a:hover{

                opacity: 1;
            }

/*
            These pertain to the nav items underneath a moment.*/

            .momentNav {
               
             width: 255px;
             margin: 0 auto;


            }

            .momentNav ul li{
                opacity: 0.5;
                padding: 0px 20px 0px 20px;
            }

            .momentNav res ul li{
                opacity: 0.5;
                padding: 0px 0px 0px 0px;
            }

            .momentNav ul li:hover{

                opacity: 0.75;
            }

            .middleMoment .noMoreClass{

                font-family: 'Oswald', sans-serif;
                font-weight: 400;
                font-size: 21px;
                line-height: 32px;
                text-align: center;
                text-transform: uppercase;
                letter-spacing: 1.1px;
                color: #505050; text-decoration:none;
                margin: 60px 0px 40px 0px;

            }

            .alertBox{

                /*width: 255px;*/
                width: 80%;
                margin: 0 auto;
            }


              .middleMoment .noMoreClass2 p{
      
                font-family: 'PT Sans', sans-serif;
                font-size: 20px;
                font-weight: 500;
                line-height: 27px;
                letter-spacing: .04px;
                color: #211f1f;
                margin: 5px 0px 25px 0px;

            }

            .middleMoment p.alertHeaderText {

                font-family: 'Oswald', sans-serif;
                font-weight: 400;
                font-size: 25px;
                line-height: 27px;
                text-transform: uppercase;
                letter-spacing: .9px;
                color: #4688c1f7;
                text-decoration: none;
                text-align: center;
                margin-bottom: 21px;
            }

            .alertNormalText {    

                font-family: 'PT Sans', sans-serif;
                font-size: 20px;
                font-weight: 500;
                line-height: 33px;
                letter-spacing: .04px;
                color: #211f1f;
            }




            /* This one is for the fade on the emisary temporal page */

            .fade-enter-active, .fade-leave-active {
              opacity: 1;
              transition: opacity .5s ease-in-out;
            }

            .fade-enter, .fade-leave-active {
              opacity: 0
            }

    
            /*  This one allows for the layout of the resonate page.*/

            .res {
               
             width: 195px;

            }


            .drop h1 {
                margin: 60px 0px 30px 0px;

            }



  /* ANALYSIS INPUT RELATED  ___________________________________________________________*/

            .analSlider{

            margin: 83px 0px 30px 0px;
            max-width: 530px;
                 font-family: 'Oswald', sans-serif;
                font-weight: 400;
                font-size: 18px;
                line-height: 32px;
                text-transform: uppercase;
                letter-spacing: 1.6px;
                color: #2b6892db; text-decoration:none;

            }

            .leftAndRight{
            margin: 0 auto;

            }

            .analLeft{

                float: left;
            }

            .analRight{

                float: right;
            }


            .momentInsert{

              margin: 20px 0px 40px 0px;

                }

             .momentInsert2{

              margin: 20px 0px 0px 0px;

                }

             .momentInsert h1{

                -webkit-margin-before: 0px;
                -webkit-margin-after: 0px;
                -webkit-margin-start: 0px;
                -webkit-margin-end: 0px;

            }


 



        


  /* ROADS RELATED  ___________________________________________________________*/



            .roads{
                max-width: 470px;
            }


            .roads ul{
            padding: 0px;

            }

            

            .roads a:hover {
                opacity: 1;

            }


            .roads h1 {
                text-align: center;
                font-family: 'PT Sans Bold', sans-serif;
                font-weight: 400;
                font-size: 22px;
                line-height: 32px;
                text-transform: uppercase;
                letter-spacing: .3px;
                color: #83cad9;
                margin-bottom: 15px;
                margin-top: 50px;


            }

            .roads button{

                
                border: none;
                padding: 0px;
                background-color: rgba(0, 0, 0, 0);
            }

            .roads li p button{
               /* text-align: right;
              
                font-weight:700;
                font-size: 18px;
                color: #3fe5ff; 
                
                float: right; */
                


            }

               .roads li p {
               /* text-align: right;
              
                font-family: 'PT Sans', sans-serif;
                font-size: 22px;
                line-height: 32px;
        
                letter-spacing: .04px;
                color: #6eeeff; 
                text-decoration:none;
                cursor:pointer; */
               


            }

            .roads p:hover{

                  opacity: 1;
                 

            }

            .roads li 
            {

                padding: 0; 
                font-family: 'PT Sans', sans-serif;
                margin-bottom: 10px; 
                font-size: 22px;
                line-height: 32px;
                opacity: .6;
                letter-spacing: .04px;
                color: #6eeeff; 
                text-decoration:none;
                cursor:pointer;
                
            }

            .roads li:hover{

                 opacity: 1;
            }

        .roads a{

                 
            }
            


            .roads .toggleButton {
               /* display: inline-block; */
                border: none;
                background-color: rgba(0, 167, 193, 0);
                opacity: 0.55;
                color: #00adcb; 
               

            }

            .roads .toggleButton:hover {

                 opacity: 1;
            }
   


            .editIcon{

               
                float: right;
                display: inline-block;

            }


            .roads{

                width: 400px;
                margin: 0 auto;
                padding-bottom: 100px;

            }

       /* Target only your roads block */
/* Roads list container */
.roadsBox.roads .roads-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each item is full-width, stacked vertically, with name on left + X on right */
.roadsBox.roads .roads-item {
  display: flex !important;        /* force flex even if globals say inline */
  align-items: center;
  justify-content: space-between;
  width: 100%;                     /* ensures line break after each */
  padding: 4px 0;

  white-space: normal !important;
}

/* Left side name/link */
.roadsBox.roads .roads-name,
.roadsBox.roads .roads-link {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  text-decoration: none !important;   /* kill underline everywhere */
  color: inherit;                     /* use normal text color */
}

/* Right-side X button */
.roadsBox.roads .roads-remove {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  font-size: 28px;
  color: #16bdd7;
}

/* Optional: red on hover for delete */
.roadsBox.roads .roads-remove:hover {
  color: #ff7676;
}



/* END OF MIDDLE CONTAINER ___________________________________________________________*/



/* ANALYSIS BOX ___________________________________________________________*/



.generalBox{
 width: 281px;
    height: 268px;
    position: relative;

}


.analysisBox {

    width: 300px;
    position: relative;
    float: left;
    

}


.analysisTopBox {


    position: absolute;
    top: 0;
    left: 0;

    width: 281px;
    height: 60px;
    background: #333333;
   
    -moz-border-radius: 8px 8px 0px 0px;
    -webkit-border-radius: 8px 8px 0px 0px;
    border-radius: 8px 8px 0px 0px;


}



#responsivenessContainer{

z-index: -1000;


}


.dataStateContainer .dataState {
    
                font-family: 'Oswald', sans-serif;
                font-weight: 500;
                font-size: 10px;
                line-height: 3px;
                text-align: left;
                letter-spacing: 1.4px;
                color: #ffffff; text-decoration:none;
                text-transform: uppercase;
                padding: 12px 12px 0px 12px;
                opacity: .8


}



.dataStateContainer .trait{

font-family: 'Oswald', sans-serif;
                font-weight: 400;
                font-size: 16px;
                line-height: 32px;
                text-align: left;
                letter-spacing: 1.4px;
                color: #ffffff; text-decoration:none;
                text-transform: uppercase;
                margin: 3px 6px 0px 12px;
                opacity: .8

}

/* INFO BOX  ___________________________________________________________*/

.dataStateContainer .moreInfo{

    position: relative;
    top: -50px;
    left: 255px;
    opacity: .5;
}



.dataStateContainer .moreInfo:hover {
    opacity: 1;
    border-radius: 6px;
     -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

.dataStateContainer .moreInfo button {
    font-size: 12px;
    font-weight: 400;
    padding-top: 2px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 4px;



}


.alertTitle{

font-family: 'Oswald', sans-serif;
                font-weight: 300 !important;
                 text-transform: uppercase;
                line-height: 32px !important;

}



#environmentInfoBox{


}

.relationClass{

    width: 400px;
     margin: 0 auto;
     text-align: left;
     float: left;

}


.spacerHeight{

    margin-top: 39px;
}

.information{
    
    float: right;
    margin-top: 12px;
   

}


.information:hover {
    

}

.moreInfo button {

    font-size: 12px;
    font-weight: 400;
    padding-top: 2px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 4px;
    opacity: .7;
    text-align: center;

    text-decoration: none;
    border: 1px solid #a6a6a6;
    background: #a6a6a6;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    outline: none;
  

}

.moreInfo button:hover{

    opacity: 1;
}

.informationMoment {
                display: inline-block;
                left: 0px;
                width: 14px;
                 vertical-align: top;
                }

.informationMoment:hover {
          
       
                
          }

.analysisHeader{

    display: inline-block;
    width: 90%;

}


.analysisHeader p{
    font-family: 'Oswald', sans-serif;
    text-align: left;
    font-weight: 400;
    font-size: 25px;
    line-height: 32px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #83cad9; text-decoration:none;
  



 }

 .analysisHeader2 {

    margin-top: 15px;
 }

.analysisHeader2 p{
    font-family: 'Oswald', sans-serif;
    text-align: center;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: #83cad9; text-decoration:none;
    margin-top: 10px;



 }
           




/* END OF INFO BOX  ___________________________________________________________*/

.analysisMidBox {

    position: absolute;
    top: 59px;
    left: 0px;


    width: 281px;
    height: 36px;
    background:rgba(25,25,25,0.3);

    

       
}

.analysisMidBox .traitResult{

font-family: 'Oswald', sans-serif;
                font-weight: 400;
                font-size: 26px;
                line-height: 32px;
                /*text-align: center;*/
                letter-spacing: .04px;
                color: #ffffff; text-decoration:none;
                text-transform: lowercase;
                margin: 0px 6px 0px 12px;


}

.middleMoment .analysisHeaders {

                font-family: 'Oswald', sans-serif;
                font-weight: 400;
                font-size: 26px;
                line-height: 38px;
                text-align: left;
                letter-spacing: 1.6px;
                color: #83cad9; text-decoration:none;
                text-transform: uppercase;
                margin: 0px 0px 12px 0px;

}

.middleMomentResults .analysisHeaders {

                font-family: 'Oswald', sans-serif;
                font-weight: 400;
                font-size: 26px;
                line-height: 38px;
                text-align: left;
                letter-spacing: 1.6px;
                color: #83cad9; text-decoration:none;
                text-transform: uppercase;
                margin: 0px 0px 12px 0px;

}


.analysisMiddle {

                position: absolute;
                 top: 240px;
                left: 80px;
                margin: auto;
                 width: 115px;
                
}



.analysisMiddle p{


                 font-family: 'Oswald', sans-serif;
                font-weight: 400;
                font-size: 11px;
                line-height: 15px;
                text-align: left;
                letter-spacing: 1.4px;
                color: #ffffff; text-decoration:none;
                text-transform: uppercase;
                text-shadow: 1px 1px 2px rgba(0,0,0, 0.15);
              
}


.analysisMiddle .one{
                margin: 0px 6px 0px 12px;
                position: relative; top: -50px; left: -80px;

}


.analysisMiddle .two{
                margin: 0px 6px 0px 12px;
                position: relative; top: -140px; left: -60px;

}


.analysisMiddle .three{
                margin: 0px 6px 0px 12px;
                position: relative; top: -155px; left: 100px;

}


.analysisMiddle .four{
                margin: 0px 6px 0px 10px;
                position: relative; top: -95px; left: 115px;

}



.analysisMiddle .status{
                 font-family: 'PT Sans Narrow', sans-serif;
                font-weight: 600;
                font-size: 14px;
                line-height: 15px;
                text-align: left;
                letter-spacing: 1.4px;
                color: #ffffff; text-decoration:none;
                text-transform: uppercase;
              
}






.nulState{
                /* margin: 0px 6px 0px 12px; */
                position: relative; top: -65px; left: -55px;
                opacity: .65

}

.nulStateDigit{
                /* margin: 0px 6px 0px 12px; */
                position: relative; top: -64px; left: 15px;
                opacity: .65

}


.maxState{
                /* margin: 0px 6px 0px 12px; */
                position: relative; top: -95px; left: 100px;
                opacity: .65

}



.maxStateDigit{
                /* margin: 0px 6px 0px 12px; */
                position: relative; top: -95px; left: 100px;
                opacity: .65

}




/*Analysis boxes tweaking of css positions per box ___________________*/



.analysisMiddle .engagementone {
    position: relative; top: -50px; left: -54px;

}




.analysisMiddle .anxietyone {

    position: relative; top: -50px; left: 120px;

}

.analysisMiddle .anxietytwo {

    position: relative; top: -80px; left: 120px;

}

.analysisMiddle .anxietythree {

    position: relative; top: -111px; left: 120px;

}

.analysisMiddle .anxietyfour {

    position: relative; top: -142px; left: 120px;

}  





.analysisMiddle .responsivenessone {

    position: relative; top: -50px; left: -66px;

}




.analysisMiddle .urgetocontrol2{

  position: relative; top: -140px; left: -44px;


}



.analysisMiddle .conformity2{

  position: relative; top: -140px; left: -84px;


}


.analysisMiddle .engagementtwo {

  position: relative; top: -140px; left: -70px;
    

}

.engagementNulstate {

    position: relative; top: -65px; left: -35px;

}


.receptivityNulstate {

    position: relative; top: -65px; left: -20px;

}

.statusSeekingNulstate {

    position: relative; top: -65px; left: 0px;

}

.analysisMiddle .statusSeekingOne {

    position: relative; top: -50px; left: -85px;

}

.analysisMiddle .statusSeekingtwo{
                position: relative; top: -140px; left: -85px;

}

.analysisMiddle .statusSeekingthree{
                position: relative; top: -155px; left: 90px;

}

.analysisMiddle .statusSeekingfour{
                position: relative; top: -95px; left: 115px;

}

.groupCohesion{
                position: relative; top: -155px; left: 40px;
                opacity: .65

}

.groupCohesion2{
 
                position: relative; top: -153px; left: 32px;
                opacity: .65

}

.groupCohesion3{

                position: relative; top: -151px; left: 37px;
                opacity: .65

}


/* END OF ANALYSIS BOX________________________________________________________________*/



/* NAVBOX BOTTOM________________________________________________________________*/

           .navboxBottom{

      
             margin: 0 auto;

            }

            .navboxBottom ul {
                list-style-type: none;
                padding-left:0px;

            }

             .navboxBottom li {

                float: left;
                text-align: center;
                height: 50px;
                width: 210px;

            }

            

            .navboxBottom ul li:hover {
             background-color: #114885; /* Add a hover color */  
            }

             .navboxBottom ul li.active:hover {
             background-color: #114885; /* Add a hover color */  
            }


/*This is the css for the examine form of the navbar*/

            .examine{
                width: 633px;
            }

            .emisary{

                width: 430px;
            }

            .active{
                background-color: #114885; 
            }
            .examine ul li.active:hover{
                background-color: #2361A6; 
            }

     /*This is the css for the emisary form of the navbar*/

            .emisary ul li.active:hover{
                background-color: #2361A6; 
            }


             /* SMALL SCREENS ________________________________________________________________*/
            @media only screen and (max-width: 650px) {
            
                    .navboxBottom{

                     width: 318px;
                    }


                    .navboxBottom li {

                    width: 158px;
                    }


                    .examine{
                
                    width: 318px;
                    }


                    .emisary{

                     width: 230px;
                    }



                 .navboxBottom li {

            
                    width: 106px;

                    }
    
            }



	


/* END OF NAVBOX BOTTOM___________________________________________________________*/



/* BUTTONS___________________________________________________________*/

    

   

        .buttonLogout {
   
        width: 200px;
        margin: auto;
        margin-top: 40px;
        float: none;
        font-family: 'Oswald', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 32px;
        text-transform: uppercase;
        letter-spacing: 2.6px;
        color: #ffffff; text-decoration:none;
        text-align: center;
        padding-top: 16px;
        padding-bottom: 16px;
        padding-right: 33px;
        padding-left: 33px;
        border-radius: 8px;
         -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        background: #004e65;
        opacity: .75;
        Border: none;
        display: block;
        outline:none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

    }

    .buttonLogout:hover{

        opacity: 1;
        background-color: #4494db;
    }


    .buttonMoment{
        width: 120px;
        margin-top: 16px;
        float: left;

        border-radius: 8px;
         -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        background: #004e65;
        opacity: .75;

    }

    .buttonMoment input[type="image"] {
        padding-top: 16px;
        padding-bottom: 16px;
        padding-left: 35px;
        padding-right: 25px;
        vertical-align: middle;
        outline:none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;


    }


    .buttonMoment:hover {
        
      opacity: 1;
        background-color: #4494db;


    }


    .rightMargin{
        margin-right: 20px;

    }

    .leftMargin{
        margin-left: 20px;
      

    }


        #noEmailText {

       max-width: 300px;
        margin: 0 auto;
        margin-top: 30px;
        padding: 16px;
        float: none;
        }

        #noEmailText p {

        font-size: 16px;
        line-height: 21px;
        letter-spacing: .5px;
        color: #cafaff;
        font-weight: 400;
        text-align: center;
        }


    .smallCheck{

        width: 150px;
        margin: auto;

    }


        .centeringBox2{
            max-width: 290px;
            margin: 0 auto;
            margin-bottom: 50px;
    
            }

        .centeringBox3{
            width: 130px;
            margin: 0 auto;
            margin-bottom: 40px;
    
            }


        .submitAnal{

            margin: 0 auto;
           padding-top: 50px;
        }


        .holder{
            margin: 0 auto;
            width: 235px;
        }

        .holder input[type="image"] {

            opacity: .5;
            margin: 0 auto;
            padding-left: 35px;
            padding-right: 35px;

        }

        .holder input[type="image"]:hover{

            opacity: 1;
        }


/*  BEGINNING OF SUB HEAD AREA __________________________________________________________*/

            .subheader {
                height: 50px;
                background-color: #56828F;
                margin: 0 auto;
                width:100%;
                position:fixed;
                top:70px;
                padding-top: 0px;
                padding-left: 0px;
                z-index: 1000;
   
            }

              .subheader2 {
                height: 50px;
                background-color: #56828F;
                margin: 0 auto;
                width:100%;
                position:fixed;
                /* top:70px; */
                padding-top: 0px;
                padding-left: 0px;
                z-index: 1000;
   
            }

            .resonateSubHead{

                 background-color: #312C58;

            }

           .darkBlue {
            
                
                background-color: #117385;

                }
          

           

            .subnav{

             max-width: 550px;
             min-width: 319px;
                max-height: 50px;
             margin: 0 auto;
                font-family: 'Oswald', sans-serif;
                font-weight: 500;
                text-align: center;
                font-size: 13px;
                line-height: 21px;
                text-transform: uppercase;
                letter-spacing: 1.8px;
                color: #FFFFFF;
                overflow: hidden;
                white-space: nowrap;

            }

            .overflow{

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

                       

            .subnav p a{

                color: #FFFFFF;

            }

            .message {

               padding: 14px 0px 0px 0px;

            }


            .subnavOne {

                padding: 12px 20px 0px 15px;
                opacity: 0.7;
                float: left;
                width:20px;
            }

            .subnavOne:hover{
                    opacity: 1;

            }

               .subnavTwo {

             padding: 4px 0px 0px 5px;
             white-space: nowrap;
             overflow: hidden;
            text-overflow: ellipsis;

        
  
    


            }

            .subnavTwo a {
                opacity: 0.7;
                 

             
            }

            .subnavTwo a:hover{
                    opacity: 1;

           }

             .subnavTwo p strong{
                    font-weight: 400;
                    letter-spacing: 2.8px;

            }


            .subnavFour {
                padding: 4px 0px 0px 0px;
                display:inline-block;
                max-width:400px;
            }

               .subnavThree {

                padding: 12px 20px 0px 0px;
                margin-left:10px;
                opacity: 0.7;
                float: right;
                width:20px;

            }

            .subnavThree:hover{
                    opacity: 1;

            }

            .subnavFive{
                padding: 4px 0px 0px 0px;
                opacity: 0.8;
             
                max-width:550px;
                text-align: center;

            }





 /*  END OF SUB HEAD AREA __________________________________________________________*/


            .postHead {
                height:50px;
                position:fixed;
                left:0px;
                bottom:0px;
                width:100%;
                background: linear-gradient(180deg, #000039 0%, #29054e 100%);  /* Match the body gradient */
                z-index: 1000;
       
            }

             .postHead img {
            padding-top: 7px;
                }

                 .postHead ul {
                margin: 0px;
                padding: 0px


            }




            /*. @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            /*. @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            /*     
           /*. THIS IS THE NEW CSS FOR THE UPDATED AI APP: 
           /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

           /* shared card look (works even without Bootstrap card styles) */
            .result-box { 
                max-width: 600px;
                margin: 0 auto;
                overflow: hidden;
                /* background: #ffffff; /* light background for contrast */
                /* border: 1px solid #ddd; /* subtle border */
                /* border-radius: 8px; rounded corners */ */ */
                padding: 20px; /* space inside the box */
                margin-bottom: 10px;
                margin-top: 10px; /* space between boxes */
                /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); soft shadow for depth */
                color: #e7f9fc;
                font-weight: 500;
                font-size: 17px;
                text-align: left; 
                letter-spacing: 0.0px;
                line-height: 20px;
                opacity: .9
            }
             
            .result-box__title { 
                font-family: 'Oswald', sans-serif;
                font-weight: 400;
                font-size: 24px;
                line-height: 32px;
                text-align: left;
                letter-spacing: 1.6px;
                color: #83cad9;
                text-decoration: none;
                text-transform: uppercase;
                margin: 28px 0px 12px 0px;
            
            }
            .result-box__content { 
                
                line-height: 1.2; 
                padding-inline-start: 5px;
               
            
            }

            .result-box__content p {
                
                margin-bottom: 10px; /* space between paragraphs */
            
            }

            /* target each box individually */
            #box-moment    { 
                
                margin-top: 140px;
            
            }
            #box-summary   { /* styles specific to the narrative box    */ }


            #box-reasoning { 
                
                /* styles specific to the reasoning box    */ 
                margin-bottom: 10px; 
            
            }

            #box-reasoning ul{ 
                
                /* styles specific to the reasoning box    */ 
                display: block;
                list-style-type: disc;
                margin-block-start: 1em;
                margin-block-end: 1em;
                padding-inline-start: 5px;
                unicode-bidi: isolate;
            
            }



      
           
            .result-box__item  { 
                margin-bottom: 10px; /* space between items */
                line-height: 21px;
            }


            .traitTitle{
                 
                color: #9be3f1;
                font-weight: 600;
                letter-spacing: 1.1px;
            }


/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
/* LATEST UPDATE TO THE TWO COLUMN LAYOUT
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/* Two-column layout for results */
#results-two-col {
  display: grid;
  grid-template-columns: 1fr;          /* stack by default */
  gap: 24px;
  align-items: start;
}

/* At wider screens, go two columns: left widgets / right text */
@media (min-width: 1024px) {
  #results-two-col {
    grid-template-columns: 1.1fr 0.9fr;  /* tweak fractions to taste */
  }
}

/* Optional: make the right column cards feel cohesive */
.result-box {  }
.result-box__title { font-weight: 400; }
.result-box__content { line-height: 1; }

/* Optional spacing harmony for the widget column */
#col-widgets .relationClass { margin-top: 8px; }
#col-widgets #middleContainerAnalysis .analysisHeaders { margin: 8px 0 12px; }

/*If you want the text column to stick while scrolling (desktop only), uncomment: */
/* @media (min-width: 1024px) {
  #col-text { position: sticky; top: 16px; align-self: start; }
} */
/* === 2-column container (centered) === */


/* Desktop: fixed-width columns, centered */
@media (min-width: 1024px) {
  #results-two-col {
    grid-template-columns: 620px 436px;  /* LEFT / RIGHT (−20%) */
    max-width: calc(620px + 436px + 4px);
  }
}

/* === Left column resets so headers/boxes don't form extra columns === */
#col-widgets .middleMoment{ display:block; }
#col-widgets .widget-group{ display:block; margin-top:0px; }
#col-widgets .relationClass{ display:block; clear:both; }

#col-widgets [id$="Box"]{
  display:block;
  float:none !important;   /* neuter legacy floats */
  width:100% !important;   /* keep each box full-width in the left column */
}

/* Optional: tidy header spacing inside widget column */
#col-widgets .analysisHeaders{ margin:8px 0 12px; }

/* Optional: unify right-column card look */
.result-box{  }
.result-box__title{ font-weight:400; }
.result-box__content{ line-height:1.2; }

/* Optional: if any legacy CSS sets CSS columns on .middleMoment, kill it here */
#col-widgets .middleMoment{ column-count:auto; column-width:auto; }

/* Defaults if JS can’t detect anything */
:root {
  --header-offset: 72px;   /* fallback */
  --footer-offset: 72px;   /* fallback */
}

/* Keep content clear of fixed subheader/bottom nav */
#results-frame {
   
  /* padding-top: var(--header-offset); */
  padding-bottom: var(--footer-offset);
}

/* Two-column grid (from before), centered with fixed gap */
#results-two-col {
  display: grid;
  grid-template-columns: 1fr;   /* stack by default */
  gap: 12px;
  justify-content: center;      /* center the grid tracks */
  margin-inline: auto;
}

/* Desktop: fixed track widths, centered */
@media (min-width: 1024px) {
  #results-two-col {
    grid-template-columns: 640px 520px;  /* left widgets / right text */
    max-width: calc(640px + 520px + 24px);
  }
}

/* Ensure nothing gets clipped by ancestor overflow rules */
#results-frame, #results-two-col, #col-widgets, #col-text {
  overflow: visible;
  
}

/* Left column: neutralize old float/width so headers don’t pop out */
#col-widgets .widget-group { display: block; margin-top: 0px; }
#col-widgets .relationClass { display: block; clear: both; }
#col-widgets [id$="Box"] {
  display: block;
  float: none !important;
  width: 100% !important;
}

/* (optional) a little breathing room at the very bottom beyond footer */
#results-frame::after {
  content: "";
  display: block;
  height: 12px;
}

/* Spacers to keep content clear of fixed subheader/bottom nav */
#results-spacer-top,
#results-spacer-bottom {
  height: 72px; /* fallback; JS updates this */
}

/* Two-column grid: centered, fixed gap, aligned tops */
#results-two-col {
    
  display: grid;
  grid-template-columns: 1fr;   /* stack on mobile */
  gap: 6px;                    /* fixed gutter */
  justify-content: center;      /* center the tracks */
  align-items: start;           /* top-align both columns */
  margin-inline: auto;
}

/* Desktop: fixed widths so it never becomes 3 cols and stays centered */
@media (min-width: 1024px) {
  #results-two-col {
    grid-template-columns: 620px 456px;  /* LEFT / RIGHT (−20%) */
    max-width: calc(620px + 456px + 4px);
  }
}

/* Left column: prevent legacy floats/columns from splitting headers/boxes */
#col-widgets .widget-group { display: block; margin-top: 0px; }
#col-widgets .relationClass { display: block; clear: both; }
#col-widgets [id$="Box"] {
  display: block;
  float: none !important;
  width: 100% !important;
}

/* Ensure top edges line up cleanly */
#col-widgets .middleMoment { margin-top: 0; }
#col-text > .result-box:first-child { margin-top: 30px; }

/* Safety: nothing should be clipped by ancestor overflow */
#results-frame, #results-two-col, #col-widgets, #col-text { overflow: visible; }





/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
/* TABS SECTION HERE FOR NEW TABS

/*************************************************

/* Tabs bar */
#mainTabs.emi-tabs{
  position: sticky; top: 0; /* or relative if your subheader is fixed and we already pad below it */
  z-index: 5;
  display: flex; gap: 16px;
  align-items: center;
  padding: 8px 12px;
          /* adjust if subheader background differs */
 
}

/* Tab */
.emi-tab{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  line-height: 1;
}
.emi-tab:hover{ background: #011b1d; }   

/* Active tab */
.emi-tab.is-active{
  background: #00464f; color: #0c5a60;
}

/* Icons & labels */
.emi-tab__icon{ font-size: 16px; line-height: 1; }

.emi-tab__label{ 

    font-family: 'Oswald', sans-serif;
    text-align: left;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #4186c3; text-decoration:none;







}



/* Subheader should scroll with the document: no sticky/fixed */
#subheaderDock {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  /* keep your visual styling if you want the separators */
  background: #fff;
  border-bottom: 1px solid oklch(69.034% 0.11909 209.167);
  border-top: 1px solid #009191;
}

/* Ensure all inner wrappers are in normal flow too */
#subheaderDock .subheader,
#subheaderDock .subheader2,
#subheaderDock .subheaderNav,
#subheaderDock .subnav,
#subheaderDock .subnavTwo {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}



















/* Submit button reset + sizing */
.buttonMoment button.loggingIn {
  /* all: unset;                 */
  /* display: inline-flex;  */
  /* align-items: center; */
  /* justify-content: center; */
  cursor: pointer;
    width: 200px;
    margin: auto; 
    margin-top: 10px;
    float: none;
    padding-top: 12px;
    padding-bottom: 16px;
    padding-right: 77px;
    padding-left: 33px;
    border-radius: 8px;
        -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    background: #2787E4;
    opacity: .75;
    Border: none;
    display: block;

  /* size to taste */
  /* width: 90px;
  height: 90px;
  border: 0; 
  border-radius: 50%; */
  background: transparent;
  
}

/* Icon inside the button */
.buttonMoment button.loggingIn img {
  display: block;
  width: 50%;
  height: 50%;
  object-fit: contain;
}

/* If you had legacy rules for inputs, make sure they don't spill over */
.buttonMoment input[type="image"] {
  /* legacy element now gone; safe to narrow or delete old rules */
}

/* If a stubborn global rule is winning, you can force a clean slate: */
button.loggingIn {
  /* appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none; */
}


               
/* HERE IS THE CSS FOR THE NEW MODALS 
*****************************************************************/

.emi-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:#e7f9fcrgba(0,0,0,.35);
    z-index:9999}


.emi-modal.is-open{display:flex}



.emi-modal__panel{
    position:relative;
    background:#009ac0;
    border-radius:12px;
    max-width:450px;
    width:94%;
    padding:44px;
    padding-bottom: 44px;
    box-shadow:0 20px 60px rgba(0,0,0,.25)
}
.emi-modal__panel p{
     font-family: 'PT Sans', sans-serif;

                font-weight: 400;
                font-size: 20px;
                line-height: 25px;
                text-align: left;
                letter-spacing: .01px;
                
                color: #e7f9fc; text-decoration:none;
                opacity: 0.75;
                margin-top: 8px;
                margin-bottom: 36px;
                margin: 0 0 10px;
    
}

#welcome-modal-title{

    /* font-family: 'PT Sans', sans-serif;

                font-weight: 600;
                font-size: 25px;
                line-height: 38px;
                text-align: left;
                letter-spacing: .04px;
                text-transform: uppercase;
            
                
                color: #c2f5ff; text-decoration:none;
                opacity: 0.75;
                margin-top: 16px;
                margin-bottom: 24px; */


                font-family: 'Oswald', sans-serif;
   
                font-weight: 500;
                font-size: 30px;
                line-height: 38px;
                text-align: left;
                letter-spacing: .04px;
                text-transform: uppercase;
            
                
                color: #96e5f5; text-decoration:none;
                opacity: 0.75;
                margin-top: 8px;
                margin-bottom: 24px;
}





.emi-modal__close{
    
    cursor: pointer;
    width: 250px;
    margin: auto; 
    margin-top: 10px;
    float: none;
    padding-top: 12px;
    padding-bottom: 16px;
    padding-right: 37px;
    padding-left: 33px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    background: #006587;
    text-align:center;
    opacity: .75;
    Border: none;
    display: block;
    
    opacity: 0.55;
    text-align:center;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    margin-top: 36px;

   
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    text-transform: uppercase;
    letter-spacing: 2.6px;
    color: #ffffff; text-decoration:none;
    text-align: center;
    background: #004e65;

}

.emi-modal__panel button{
    
text-align:center;

}

.emi-modal__panel button .emi-modal__x{
    

    font-weight: 500;
    font-size: 32px;
    text-align:center;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
}


.emi-modal__close:hover{

    opacity: .9;

}   

.emi-modal__x{

     font-weight: 500;
    font-size: 42px;
    color: #dcf9ff; text-decoration:none;
    opacity: 0.55;
    text-align:center;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    position:absolute;
    top:8px;
    right:10px;
    background:none;
    border:0;
    font-size:44px;
    line-height:1;
    cursor:pointer}




/* THESE ARE FOR STYLING THE AUTHOR/DATE LIKE ON EXPLORE
*****************************************************************/
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

.moment-meta { margin-top: 12px; }
.moment-author-link { color:#2563eb; text-decoration:none; }
.moment-author-link:hover { text-decoration:underline; }

.exploreContainer {

max-width:840px;
margin:0 auto;
padding:16px

}





/*.  THIS IS THE AUTHOR NAME ON A MOMENT IN EXPLORE */

.exp-moment__byline mt-2 {

    font-family: 'PT Sans', sans-serif;
                font-weight: 600;
                font-size: 16px;
                line-height: 32px;
                text-align: left;
                letter-spacing: .04px;
                color: #00c1d2; text-decoration:none;
                opacity: 0.75;
                margin-top: 8px;
                margin-bottom: 32px;

}


.emi-tabs-container {
  max-width: 1200px;   /* match your results layout */
  margin: 0 auto;      /* center horizontally */
  padding: 0 16px;     /* optional: side padding for small screens */
}


#topbox{

width: 100%;
  /* background: #00323a; */
  background: #002a3a;

  


}

.results-left-column {
  flex: 0 0 65%; /* whatever width you chose */
}

.emi-tabs-container {
  max-width: 1050px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  padding-left: 16px;  /* tweak until it lines up */
}

#exp-moment-context{


    font-family: 'Oswald', sans-serif;

   
                font-weight: 500;
                font-size: 25px;
                line-height: 38px;
                text-align: left;
                letter-spacing: .04px;
                text-transform: uppercase;
            
                
                color: #96e5f5; text-decoration:none;
                opacity: 0.75;
                margin-top: 8px;
                margin-bottom: 1px;

}


.moment-context{

    font-family: 'PT Sans', sans-serif;

   
                font-weight: 600;
                font-size: 25px;
                line-height: 38px;
                text-align: left;
                letter-spacing: .04px;
                text-transform: uppercase;
            
                
                color: #96e5f5; text-decoration:none;
                opacity: 0.75;
                margin-top: 8px;
                margin-bottom: 16px;

}


.moment-body {

 font-family: 'PT Sans', sans-serif;

                font-weight: 400;
                font-size: 20px;
                line-height: 25px;
                text-align: left;
                letter-spacing: .01px;
                
                color: #e7f9fc; text-decoration:none;
                opacity: 0.75;
                margin-top: 8px;
                margin-bottom: 16px;
    }   



#exp-moment-text{

    font-family: 'PT Sans', sans-serif;

                font-weight: 400;
                font-size: 20px;
                line-height: 25px;
                text-align: left;
                letter-spacing: .01px;
                
                color: #e7f9fc; text-decoration:none;
                opacity: 0.75;
                margin-top: 1px;
                margin-bottom: 16px;

}


.exp-moment__author-link {


                font-weight: 400;
                font-size: 17px;
                line-height: 25px;
                text-align: left;
                letter-spacing: .01px;
                text-transform: uppercase;
                color: #e7f9fc; text-decoration:none;
                opacity: 0.75;
                margin-top: 8px;
                margin-bottom: 16px;



}


.btn {

    font-size: 11px;
    font-weight: 500;
    padding-top: 7px;
    padding-right: 12px;
    padding-bottom: 7px;
    padding-left: 12px;
    opacity: .7;
    text-align: center;
    text-transform: uppercase;
    color: #aef3ff; text-decoration:none;
    letter-spacing: 1.4px;

    text-decoration: none;
    border: 1px solid #0b8db500;
    background: #0d5463;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    outline: none;

}

.btn .btn-small{



}

.btn:hover{

    opacity: 1;
    background-color: #0b8db5;
    border: 1px solid #0b8db5;

}


#exp-moment-actions{

    margin-top: 10px;
}


.alert{

    width: 300 px;
    margin: 0 auto;
    margin-top: 85px;
    padding: 16px;
    float: none;
    
    text-align: center;
    text-transform: uppercase;
    color: #aef3ff; text-decoration:none;
    letter-spacing: 1.4px;

    font-family: 'Oswald', sans-serif;
    text-align: center;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: #83cad9;
    text-decoration: none;
    margin-top: 30px;


    line-height: 38px;


}

.roadsSpacer{

    margin-top: 200px;
    margin-bottom: 150px;
}


#roadsBox{

             max-width: 535px;
             margin: 0 auto;
             padding-bottom: 10px;
             padding-left: 16px;
             padding-right:16px;

            }



 /* Wrapper just for layout; optional */
.buttonMoment {
  
              /* or flex; justify-content:center; if you need centering */
  align-items: center;
  
  
}

/* Reset the button to be “image only” */
.momentBtn {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  background-image: none !important;
  border: 0 ;
  padding: 8px;
  margin: 18px;
  box-shadow: none !important;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent; /* iOS grey tap flash */                  /* don’t pull in system button font */
}

/* Remove Firefox inner padding */
.momentBtn::-moz-focus-inner {
  border: 0;
  padding: 0;
}


.momentBtn:hover,
.momentBtn:active,
.momentBtn:focus {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* The icon itself */
/* The SVG img element itself */
.cloudIcon {
  display: block;
  width: 40px;          /* adjust to taste */
  height: auto;
  margin-left: 10px;
  background: transparent !important; /* hard override */
}






/* HERE IS THE ANALYSIS SPINNER FOR CSS  */


/* Spinner core */
.emi-spinner{
  /* Tunables */
  --size: 200px;
  --thickness: 8px;
  --spin-duration: 30s; /* default, 2 minutes per rotation */

  /* Segment colors (10 slices) */
  --seg1:#0083FF; --seg2:#1C9AC8; --seg3:#14B7C7; --seg4:#52C14D; --seg5:#BCCC1E;
  --seg6:#D7BF2E; --seg7:#F28220; --seg8:#F25616; --seg9:#F02C00; --seg10:#C7000D;

  width: var(--size);
  height: var(--size);
  border-radius: 50%;

  /* 10 equal slices (36deg each) */
  background:
    conic-gradient(
      var(--seg1) 0deg 36deg,
      var(--seg2) 36deg 72deg,
      var(--seg3) 72deg 108deg,
      var(--seg4) 108deg 144deg,
      var(--seg5) 144deg 180deg,
      var(--seg6) 180deg 216deg,
      var(--seg7) 216deg 252deg,
      var(--seg8) 252deg 288deg,
      var(--seg9) 288deg 324deg,
      var(--seg10) 324deg 360deg
    );

  /* Hollow ring */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(50% - var(--thickness)), #000 calc(50% - var(--thickness) + 1px));
          mask: radial-gradient(farthest-side, transparent calc(50% - var(--thickness)), #000 calc(50% - var(--thickness) + 1px));

  /* Slow rotation */
  animation: emi-spin var(--spin-duration) linear infinite;

  /* A little depth */
  box-shadow:
    0 0 0 6px rgba(0,0,0,0.08) inset,
    0 3px 6px rgba(0,0,0,0.09);


      /* tune these two shadows as you like */
  --halo-1: 0 10px 33px rgba(9, 94, 109, 0.18);
  --halo-2: 0 10px 44px rgba(0,0,0,.16);

  filter: drop-shadow(var(--halo-1)) drop-shadow(var(--halo-2));
}

/* Optional subtle highlight sweep */
.emi-spinner::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    conic-gradient(from 90deg, rgba(255,255,255,0.0) 0 70%, rgba(255,255,255,0.18) 85%, rgba(255,255,255,0.0) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(50% - var(--thickness)), #000 calc(50% - var(--thickness) + 1px));
          mask: radial-gradient(farthest-side, transparent calc(50% - var(--thickness)), #000 calc(50% - var(--thickness) + 1px));
  animation: emi-spin var(--spin-duration) linear infinite;
  pointer-events:none;
}

@keyframes emi-spin { to { transform: rotate(360deg); } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .emi-spinner, .emi-spinner::after { animation: none; }
}

/* Caption styling (optional) */
.emi-spinner-caption{
  margin-top: 10px;
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: #444;
  opacity: 0.85;
  text-align: left;
}

/* If your WaitingContainer needs centering/layout tweaks */
.WaitingContainer{
  max-width: 720px;
  margin: 40px auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.spinnerHead{

    font-family: 'PT Sans', sans-serif;

   
                font-weight: 600;
                font-size: 25px;
                line-height: 38px;
                text-align: center;
                letter-spacing: .04px;
                text-transform: uppercase;
            
                
                color: #96e5f5; text-decoration:none;
                opacity: 0.75;
                margin-top: 8px;
                margin-bottom: 22px;
}

.spinnerText{
    font-family: 'PT Sans', sans-serif;

                font-weight: 400;
                font-size: 18px;
                line-height: 18px;
                text-align: center;
                letter-spacing: .01px;
                
                color: #e7f9fc; text-decoration:none;
                opacity: 0.75;
                margin-top: 24px;
                margin-bottom: 14px;
}

.spinnerText2{
    font-family: 'PT Sans', sans-serif;

                font-weight: 400;
                font-size: 18px;
                line-height: 18px;
                text-align: center;
                letter-spacing: .01px;
                
                color: #e7f9fc; text-decoration:none;
                opacity: 0.75;
                margin-top: 7px;
                margin-bottom: 7px;
}


#eta-wrap{
   
}


.emi-banner{
  position: sticky; top: 0; z-index: 9998;
  background: #001a1e; border-bottom: 1px solid #00526d;
  padding: 10px 14px; display: none;
  
}
.emi-banner-inner{ display: flex; align-items: center; gap: 10px; }
.emi-banner-icon{ opacity: .9; }
.emi-banner-text{ 
    font-family: 'PT Sans', sans-serif;

                font-weight: 400;
                font-size: 18px;
                line-height: 18px;
                text-align: center;
                letter-spacing: .01px;
                color: #e7f9fc; text-decoration:none;
                opacity: 0.75;
                margin-top: 1px;
                margin-bottom: 1px;


}
.emi-banner-link{ color: rgb(97, 205, 187); text-decoration: underline; }



/* 
HERE ARE THE CSS TAGS FOR THE POPUPS RELATING TO PAID AND UNPAID USERS GETTING PINGED ABOUT SIGNING UP */


/* base + variants the middleware emits */
.emi-popup { }
.emi-popup--free_cap   { /* unpaid hit free limit */ }
.emi-popup--paid_daily { /* paid user hit daily cap */ }
.emi-popup--expired    { /* subscription expired */ }

.emi-popup-title { /* header area */ }
.emi-popup-cta   { margin-top: 14px; text-align: right; }
.emi-popup-btn   { padding: 8px 14px; border-radius: 8px; background:#0066cc; color:#fff; text-decoration:none; }

/* Container added to the alert content */
.emi-alert { }

/* Body text inside the alert */
.emi-alert__content {
  font: 400 15px/1.55 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #222;
}

/* Actions row + CTA styled like a button */
.emi-alert__actions {
  margin-top: 16px;
  text-align: right;
}
.emi-alert__cta {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 9999px;
  background: #0a7;
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
}
.emi-alert__cta:hover { opacity: .9; }

/* Per-case variants (optional) */
.emi-alert--free_cap  .emi-alert__cta { background: #0066cc; }
.emi-alert--expired   .emi-alert__cta { background: #b83232; }
.emi-alert--paid_daily .emi-alert__cta { background: #0a7; } /* could be OK-only (no link) */






/* HERE ARE THE CSS TAGS FOR THE CHECKOUT FORM */ 

.emi-checkout { max-width: 680px; margin: 40px auto; }
  .emi-card { 
    padding: 16px; 

    border-radius: 10px; 
    background: linear-gradient(180deg, #e9f4ff 0%, #a1d0ff 100%);
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
}


  .emi-row { margin: 18px 0; }
  .emi-note { color:#555; font-size: 14px; }
  .emi-error { color: #b00020; margin-top: 10px; }
  .emi-success { color: #065f46; margin-top: 10px; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .emi-option { display:block; }
  .emi-option input { display:none; }
 
  .emi-option input:checked + .emi-option-card {
    
  }
  .emi-option-title { font-weight:600; }
  .emi-option-price { font-weight:500; }

  .emi-btn
    {
        display:inline-flex; 
        align-items:center; 
        gap:8px; 
        border:0; 
        border-radius:999px; 
        Margin-top:21px;
        padding:12px 24px; 
    background-color: #0076ba;
        cursor:pointer; 
        font-weight:500; 
        font-family: 'Oswald', sans-serif;
        font-weight: 400;
        font-size: 13px;
        line-height: 21px;
        text-transform: uppercase;
        letter-spacing: 1.6px;
        color: #ffffff; text-decoration:none;
    }

.emi-btn:hover{
    opacity: 1;
    background-color: #002f6c;

}

.cancelbtn{
     background:#9cbacc; 

}

.cancelbtn:hover{
     background-color: #637a8d;
    
}

.emi-header {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 19px;
    text-align: left;
    letter-spacing: 1.1px;
    color: #003f4b;
    text-decoration: none;
    text-transform: uppercase;
    margin: 0px 0px 12px 0px;

}

.emi-header2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 32px;
    text-align: left;
    letter-spacing: 1.0px;
    color: #003f4b;
    text-decoration: none;
    text-transform: uppercase;
    margin: 11px 18px 12px 0px;

}

  .emi-note { 
    font-family: 'PT Sans', sans-serif !important;
    font-size:15px;
    font-weight: 400;
    line-height: 18px;
    color: #000e24;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
}

  .emi-option-title { 
    font-size:16px;
    font-weight: 500;
    color: #000e24;
    line-height: 16px;

}


  .emi-option-price { font-weight:500; }


  .cardbox {
    padding:18px; 
    text-decoration: none;
    border: 1px solid #7db9fc;
    background: #ffffff;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    outline: none;

  }

   .emi-option-card {
    display:flex; 
    justify-content:space-between; 
    align-items:center;
    padding:12px;
    padding:14px; 
    text-decoration: none;
    border: 1px solid #7db9fc;
    background: #e5f6ff;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    outline: none;
    transition: border .15s ease, background .15s ease;
  }

#waitingMessage{

     max-width:560px;
     margin:40px auto;
     text-align:center"
}

  .waiting{
    
                font-family: 'PT Sans', sans-serif;
                font-size: 15px;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: 1px;
                color: #72daff; 
                text-align: center;

  }

  .waitingHead{

                font-family: 'Oswald', sans-serif;
                font-size: 40px;
                font-weight: 500;
                line-height: 44px;
                letter-spacing: 1.2px;
                text-align: center;
                text-decoration:none;
                text-transform: uppercase;
                color: #4ee1f8; 
                margin-bottom: 18px;
                margin-top: 44px;
    
    
  }


  .DontUseoriginal{

 --bg-start: rgba(0, 42, 52, 0.55);
    --bg-end:   #00abdb;
    --text-main: #e9eef2;
    --text-muted: #a9c7d3;
    --accent:    #28d0ff;
    --accent-strong: #0f94ec;
    --shadow: rgba(0, 42, 52, 1);


    --p1: #0e81f4;
    --p2: #00c1ab;
    --p3: #17aaff;

  --t1: #100052;   /* trail for type A trails match P's, so you can associate trail with p color*/
  --t2: #1e6aa0;  /* trail for type B */
  --t3: #7ffbff; 

    --vignette-color-rgb: 0, 12, 08;  /* R,G,B for edge shadow */
	  --vignette-strength: 0.36;        /* 0–1 darkness at edges */
	  --vignette-inner: 58%;            /* where darkening begins from center */
	  --vignette-feather: 12%;          /* softness of rolloff */

	  --glow-color-rgb: 80, 220, 255;   /* center glow tint (eye highlight) */
	  --glow-strength: 0.00;            /* 0–1 opacity of center glow */
	  --glow-size: 4%;                 /* radius of the bright core */
	  --glow-feather: 5%;              /* falloff around glow core */

  

  }

    .DontUseoriginal2{

 --bg-start: rgba(0, 42, 52, 0.55);
    --bg-end:   #00abdb;
    --text-main: #e9eef2;
    --text-muted: #a9c7d3;
    --accent:    #28d0ff;
    --accent-strong: #0f94ec;
    --shadow: rgba(0, 42, 52, 1);


    --p1: #0e81f4;
    --p2: #00c1ab;
    --p3: #17aaff;

  --t1: #100052;   /* trail for type A trails match P's, so you can associate trail with p color*/
  --t2: #1e6aa0;  /* trail for type B */
  --t3: #7ffbff; 

    --vignette-color-rgb: 0, 12, 08;  /* R,G,B for edge shadow */
	  --vignette-strength: 0.36;        /* 0–1 darkness at edges */
	  --vignette-inner: 58%;            /* where darkening begins from center */
	  --vignette-feather: 12%;          /* softness of rolloff */

	  --glow-color-rgb: 80, 220, 255;   /* center glow tint (eye highlight) */
	  --glow-strength: 0.00;            /* 0–1 opacity of center glow */
	  --glow-size: 4%;                 /* radius of the bright core */
	  --glow-feather: 5%;              /* falloff around glow core */

  

  }

  .dontuse{
--bg-start: rgba(0, 16, 26, 0.2);
    --bg-end:   #000817;
    --text-main: #e9eef2;
    --text-muted: #a9c7d3;
    --accent:    #89c8ff;
    --accent-strong: #6fa6ff;
    --shadow: rgba(0, 42, 52, 0.597);


    --p1: #03adf6;
    --p2: #dbfd00;
    --p3: #1770ff;

  --t1: #100052;   /* trail for type A trails match P's, so you can associate trail with p color*/
  --t2: #1e6aa0;  /* trail for type B */
    --t3: #7ffbff; 
  
	/* Vignette + center-glow controls */
	  --vignette-color-rgb: 0, 12, 08;  /* R,G,B for edge shadow */
	  --vignette-strength: 0.66;        /* 0–1 darkness at edges */
	  --vignette-inner: 58%;            /* where darkening begins from center */
	  --vignette-feather: 5%;

  }

  
  .agreeToStuff{
    font-family: 'PT Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: #b3d0ff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    margin-top: 22px;
    margin-bottom: 24px;
    text-align: center;
    text-transform: none;
    letter-spacing: 1px;
    pointer-events: auto;     

  }

  .agreeToStuff a{
    color: #72daff; 
    text-decoration:none;
    opacity: .9;

  } 

  .agreeToStuff a:hover{ opacity: 1; text-decoration: underline; }


  .contactDiv{


       max-width: 300px;
        margin: 0 auto;
        margin-top: 30px;
        padding: 16px;
        float: none;
  }

  .contactus{
        font-family: 'Oswald', sans-serif;
    text-align: left;
    font-weight: 400;
    font-size: 25px;
    line-height: 32px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #83cad9; text-decoration:none;

  }
  .contactusText{

    font-size: 16px;
        line-height: 21px;
        letter-spacing: .5px;
        color: #cafaff;
        font-weight: 400;
        text-align: center;  

  }

    .contactusText a{
        color: #72daff; 
        text-decoration:none;
        opacity: .9;
    
    }



     .ExploreButtons{
   
        width: 190px;
        margin: auto;
        margin-top: 40px;
        float: none;
        font-family: 'Oswald', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 32px;
        text-transform: uppercase;
        letter-spacing: 2.6px;
        color: #ffffff; text-decoration:none;
        text-align: center;
        padding-top: 16px;
        padding-bottom: 16px;
        padding-right: 33px;
        padding-left: 33px;
        border-radius: 8px;
         -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        background: #004e65;
        opacity: .75;
        Border: none;
        display: block;
        outline:none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

    }

    .ExploreButtons:hover{

        opacity: 1;
        background-color: #4494db;
    }

    .exploreButtonsBox { 
        display: flex; 
        align-items: left; 
        gap: 12px; 
        /* justify-content: flex-end; */
    
    }


    .longer{
        width: 300px;
    }

    .deletebutt{
        Margin-top: 33px;
        background: #2b3d43;
         width: 300px;
         opacity: .25;
        
    }


/* THIS IS THE SUBNAV BUTTON THAT SAYS YOU CAN GENERATE A PERSONALITY AFFECT ASSESSMENT */

          .subnavFive {
                display:inline-block;
                max-width:400px;
            }


            .subnavAnalysis{

             max-width: 550px;
             min-width: 319px;
                max-height: 50px;
             margin: 0 auto;
                font-family: 'Oswald', sans-serif;
                font-weight: 500;
                text-align: center;
                font-size: 13px;
                line-height: 21px;
                text-transform: uppercase;
                letter-spacing: 1.8px;
                color: #FFFFFF;
                overflow: hidden;
                white-space: nowrap;

            }

                 .ExploreButtons2{
   
                    width: 340px;
                    margin: auto;
                    margin-top: 0px;
                    float: none;
                    font-family: 'Oswald', sans-serif;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 12px;
                    text-transform: uppercase;
                    letter-spacing: 2.6px;
                    color: #ffffff; text-decoration:none;
                    text-align: center;
                    padding-top: 14px;
                    padding-bottom: 14px;
                    padding-right: 33px;
                    padding-left: 33px;
                    border-radius: 8px;
                    -moz-border-radius: 8px;
                    -webkit-border-radius: 8px;
                    background: #003b41;
                    opacity: 1;
                    border: 1px solid #9cf7f4aa;
                    display: block;
                    /* outline:none; */
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;

                }

                .ExploreButtons2:hover{

                    opacity: 1;
                    background-color: #008ba3;
                }
     
   .result-box__title2{

    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 21px;
    line-height: 32px;
    text-align: left;
    letter-spacing: 1.6px;
    color: #c9f6ff;
    text-decoration: none;
    text-transform: uppercase;
    margin: 30px 0px 0px 0px;
   }




.anonHeader {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 38px;
    text-align: center;
    letter-spacing: .04px;
    text-transform: uppercase;
    color: #96e5f5;
    text-decoration: none;
    opacity: 0.75;
    margin-top: 8px;
    margin-bottom: 24px;
}

.anonBox {

        width: 400px;
    margin: 0 auto;
    padding-bottom: 100px;
    padding-top: 60px;
}

.anonBox2 {

    width: 400px;
    margin: 0 auto;
    padding-bottom: 30px;
    padding-top: 0px;
}

.anonBody {

    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 25px;
    text-align: center;
    letter-spacing: .01px;
    color: #e7f9fc;
    text-decoration: none;
    opacity: 0.75;
    margin-top: 1px;
    margin-bottom: 16px;
}


.anonButton { 
    width: 200px;
    margin: auto;
    margin-top: 40px;
    float: none;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 32px;
    text-transform: uppercase;
    letter-spacing: 2.6px;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-right: 33px;
    padding-left: 33px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    background: #004e65;
    opacity: .75;
    Border: none;
    display: block;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

   }

   .anonButton:hover{

        opacity: 1;
        background-color: #4494db;
    }

    .spacer {
    margin: auto;
    margin-top: 40px;

    }


    .salesMomentBox{

    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 100px;
    padding-top: 30px;
    }

    .salesTextLabel{
    font-family: 'PT Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 3px;
    color: #d2ebff;
    opacity: .7;
    text-decoration: none;
    text-transform: lowercase;
    text-align: left;
    }

    .salesTitle{
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 38px;
    line-height: 38px;
    text-align: center; 
    color: #4494db;   
    margin-bottom: 18px;
    margin-top: 12px; 
    }

    .salesHeader{
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px; 
    text-align: center;
    color: #fafdff;
    margin-bottom: 28px;       
    }

    .salesText{
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    color: #ffffff;
    text-decoration: none;
    text-align: center;      
    }

    .salesText2{
    font-family: 'PT Sans', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    Margin-top: 16px;
    Margin-bottom: 24px;
    }


    .emHead2{
                padding-top: 10px;
                padding-bottom: 20px;
                Margin: auto;
                /* Remove margin: auto to allow left alignment */
                Width: 140px;
                Height: 140px;
              }

.traitReason{
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    color: #e7f9fc;
    font-weight: 500;
    font-size: 17px;
    text-align: left;
    letter-spacing: 0.0px;
    line-height: 1.2;



}

/* Layout the trait tiles side-by-side, wrapping as needed */
.widget-tiles{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(281px, 1fr));
  gap: 16px; /* adjust to taste */
}

/* Each tile holds a widget + its reasoning */
.trait-tile{
  max-width: 100%;
}

/* Keep reasoning from stretching wider than widget visuals */
.traitReason{
  max-width: 281px;
  width: 100%;
  overflow-wrap: anywhere; /* modern */
  word-break: break-word;  /* fallback */
  margin-top: 8px;         /* space below the widget */
}


/* Nudge up visually without breaking clicks */
#col-widgets .traitReason {
  transform: translateY(-14px);
  margin-bottom: -14px;     /* cancel the extra space created by the transform */
  pointer-events: none;     /* let clicks go to the widget/button under it */
}

/* If you ever include links inside the reasoning and want them clickable: */
#col-widgets .traitReason a,
#col-widgets .traitReason button,
#col-widgets .traitReason [role="button"] {
  pointer-events: auto;
}


/* Hairline divider under each two-trait block */
#col-widgets .widget-group .widget-tiles::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;                      /* base line */
  background: #000608;              /* divider color */
  margin: 12px 0 8px;               /* space above/below the line */
  transform: scaleY(0.3);           /* ~0.3px visual thickness on HiDPI */
  transform-origin: center top;     
  pointer-events: none;             /* don’t block clicks */
  opacity: 0.95;                    /* tiny softening (optional) */
}

/* Optional: hide the divider on the very last group */
#col-widgets .widget-group:last-of-type .widget-tiles::after {
  display: none;
}


.text-preline { white-space: pre-line; word-wrap: break-word; }





.splash-slogan{
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 18px;
    text-align: center; 
    font-style: italic;
    color: #4494db;   
    margin-bottom: 18px;
    margin-top: 3px;
    letter-spacing: .5px;
}



.emIntroName{
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 38px;
    text-align: center; 
    color: #ffffff;   
    margin-bottom: 8px;
    margin-top: 12px;
}



  .splash-title { 
  	font-family:"Oswald", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; 
  	font-weight:400; 
  	text-align: center;
  	text-transform: uppercase;
  	font-size:clamp(16px, 6vw, 25px); 
  	margin:0 0 16px; 
  	margin-top: 60px;
    margin-bottom: 8px;
  	letter-spacing:0.12em; 
  	line-height:1.05; 
  	text-shadow:0 0 30px var(--shadow); 
  }
  
  .splash-subhead { 
  	font-weight:600; 
  	text-transform: uppercase;
  	font-size:var(--subhead-size); 
  	letter-spacing:0.05em; 
  	color:var(--accent); 
  	line-height: 45px;
  	/*text-shadow:0 0 24px rgba(6,62,78,0.7); */
  	margin-top: 64px;
  	margin-bottom: 16px;

  	 }

  .splash-blurb { 
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    letter-spacing: .01px;
    color: #e7f9fc;
    text-decoration: none;
    margin-top: 1px;
    margin-bottom: 16px;

    color:var(--text-muted); 
    max-width:800px; 
    margin:0 auto 20px; 
    line-height:1.2; 

}

.biggerBlurb{
    font-size: 18px;
}

 .splash-blurb2 { 
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    letter-spacing: .01px;
    color: #00d1f6;
    text-decoration: none;
    margin-top: 1px;
    margin-bottom: 16px;
    opacity: .75;
    color:var(--text-muted); 
    max-width:800px; 
    margin:0 auto 20px; 
    line-height:1.2; 

}

  .splash-cta { margin-top:22px; display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; }



  .splash-btn { 

    width: 100px;
    margin: auto;
    margin-top: 10px;
    float: none;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-transform: uppercase;
    letter-spacing: 2.6px;
    color: #ffffff; text-decoration:none;
    text-align: center;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 33px;
    padding-left: 33px;
    border-radius: 8px;
        -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    background: #2787E4;
    opacity: .75;
    Border: none;
    display: block;
  }


  .splash-btn:active { transform: translateY(1px) scale(.995); }

  .splash-btn-primary { 

  	background: #2787E4;

   }


  .splash-btn-primary:hover { 

  	background:#001723f2;
  }

  .splash-btn-secondary { 

  	background: #011f2ec4;
  

  }

  .splash-btn-secondary:hover { 

  	background: #001723f2;
  	


  	 }
  

  .splash-noscript { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.35); color:var(--text-main); padding:6px 12px; border-radius:8px; font-size:12px; }

  .emIntro { 
  	margin-top: 2vh; 
  	font-size: 17px;
  	letter-spacing: 0.0;

  }


	.emIntro h1{

      font-family: 'Oswald', sans-serif;
      font-size: 48px;
      font-weight: 500;
      line-height: 44px;
      letter-spacing: 1.2px;
      /* text-align: left; */
      text-decoration:none;
      text-transform: uppercase;
       
            }



/* Ensure the editor area just behaves normally now */
/* .writeBox { position: relative; } */

.mic-under {
  position: static !important;
  float: none !important;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* New row under the editor; aligns the mic button to the right */
/* .mic-row {
  display: flex;
  justify-content: flex-end;
  margin-top: .5rem;
} */


/* The mic placed *under* the editor should be in normal flow */
.mic-row { display: flex; justify-content: flex-end; margin-top: .5rem; }

/* If the mic still has old overlay/float classes anywhere under the editor, kill them */
.mic-row .mic-overlay,
.mic-row .mic-under,
.mic-row .voice-mic {
  position: static !important;
  float: none !important;
}


/* Make the main app shell stretch */
html, body { height: 100%; }
#app { min-height: 100vh; display: flex; flex-direction: column; }

/* Make the primary page container grow to fill space.
   These cover the common wrappers you mentioned. Use whichever exists on this page. */
.page, .middleMoment, .container, .site, .layout {
  flex: 1 1 auto;
  min-height: calc(100vh - var(--tabs-height, 0px));
}



/* ALTERNATE SPLASH PAGE CSS :: */