@tailwind base;
@tailwind components;
@tailwind utilities;
/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
@import url('https://fonts.googleapis.com/css2?family=Exo+2&display=swap');

:root{
    /*green machine*/
    /*--primary-color: hsl(154 84% 70%);*/
    /*hex code #72f3bb*/
    /*--glow-color: #8EF5C9;*/
    /*--bg-color: #23262A;*/
    /*even darker bg*/
    --bg-color: #001524;

    --bg-ph-color: #6b7280;
    /*--bg-color: #000000;*/
    /*the primary blue here*/
    --primary-color:#79C8CD;
    --glow-color: #88ced3;

    --danger-color: #ff0000;
}


body{
    /*background: hsl(154 50% 5%);*/
    background-color: var(--bg-color);
    /*color: #72f3bb;*/
    color: var(--primary-color);
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
    /*vendor colors    */
    --aa-background-color-rgb: 35, 38, 42;

    /*green*/
    /*--aa-text-color-rgb: 114, 243, 187;*/
    /*--aa-icon-color-rgb: 114, 243, 187;*/
    /*blue*/
    --aa-text-color-rgb: 121, 200, 205;
    --aa-icon-color-rgb: 121, 200, 205;
}

.neon-t{
    text-shadow: 0 0 3px var(--glow-color);
}

.neon-b{
    box-shadow: 0 0 1px 2px var(--glow-color);
}

/*prevent zoom on mobile upon double click*/
button{
    touch-action: manipulation;
}

.required:after {
    content:"*";
    color: red;
}

textarea, input, input[type=text], input[type=number], input[type=password],input[type=email], select{
    color:  var(--primary-color);
    background-color: var(--bg-color);
    border: 1px dashed var(--primary-color);
}


textarea:focus, input:focus, input[type=text]:focus, input[type=number]:focus, input[type=password]:focus, input[type=email]:focus, select:focus{
    border: 1px solid #fff;
}

.light-groovy{
    color:rgba(114, 243, 187, 0.6);
}
/*adjust fade of groovy text*/
/*color:rgba(114, 243, 187, 0.5)*/

input[type="checkbox"]{
    background-color: var(--bg-color);
    border: 1px solid var(--primary-color);
}

input[type="checkbox"]:checked {
    /*color: var(--bg-color);*/
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

input[type="checkbox"]:indeterminate {
    background-color: var(--bg-color);
    background-image: none;
    border-color: var(--primary-color);
}

input[type=checkbox]:indeterminate:hover{
    background-color:var(--bg-color);
    border-color:var(--primary-color)}

.border-groovy-dashed{
    border:1px dashed var(--primary-color);
}


.border-groovy-dotted{
    border:1px dotted var(--primary-color) !important;
}

/*..is overwrittern*/
.border-groovy{
    border:1px solid var(--primary-color);
}

.border-prime{
    border:1px dotted var(--primary-color);
}

.groovy-to-black{
    border-radius:.375rem;
    padding: 0.5rem 0.75rem;
    text-align:center;
    font-size:.875rem;
    line-height:1.25rem;
    font-weight:600;
    background-color: var(--primary-color);
    color: var(--bg-color);
    border: 1px solid var(--bg-color);
}

.groovy-to-black:hover{
    background-color: var(--bg-color);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/*includes the delete action button */
.black-to-groovy, form.button_to{
    border-radius:.375rem;
    padding: 0.5rem 0.75rem;
    text-align:center;
    font-size:.875rem;
    line-height:1.25rem;
    /*font-weight:600;*/
    background-color: var(--bg-color);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}


.black-to-groovy.taller-btn,.groovy-to-black.taller-btn {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

a.black-to-groovy, a.groovy-to-black{
    display: flex;
    justify-content: center;
    align-items: center;
}


.black-to-groovy:hover,  form.button_to:hover{
    background-color: var(--primary-color);
    color: var(--bg-color);
    border: 1px solid var(--primary-color);
}


/*FAB*/
/*fab colors*/
.b-to-g, a.b-to-g{
    background-color: var(--bg-color);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.b-to-g:hover, a.b-to-g:hover{
    background-color: var(--primary-color);
    color: var(--bg-color);
    border: 1px solid var(--primary-color);
}

/*red button*/
.b-to-r{
    background-color: var(--bg-color);
    color: var(--danger-color);
    border-color: var(--danger-color)
}

.b-to-r:hover{
    background-color: var(--danger-color);
    color: var(--bg-color);
    border-color: var(--danger-color)

}


#ai-wrapper, #workout-wrapper{
    position: relative;
    /*new*/
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
    /*max-height: 1200px;*/
    max-height: 1000px;
    max-width: 500px;
    margin-top: 5rem;
}

/*slideover buttons */

.sb-setup{
    border-radius:.375rem;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    /*text-align:center;*/
    align-items: center;
    justify-content: center;
    /*line-height:1.25rem;*/
    font-size: 14px;
}

.sb-size{
    width:85px;
    height:41px;
}

/*fab sizing etc*/

.fab-cont{
    position: absolute;
    bottom: 0;
    right: 0;
    overflow: hidden;
    padding-right: 1rem;
    z-index: 1;
}

.fab-h2{
    height:15%;
}

button.fabs, a.fabs{
    border-radius:.375rem;
    border-width: 2px;
    width:90px;
    height:60px;
    margin-bottom: 0.5rem;
    align-items: center;
    justify-content: center;
    /*text-align: center;*/
}

a.fabs{
    display: flex;
}

svg.action-indicator-c{
    width: 2.5rem;
    height: 1.66rem;
    /*divide by 1.5*/
    stroke-width: 2.5px;
    display: block;
    margin: 0px auto;
}

button.fabs-i, a.fabs-i{
    padding: 11px 15px;
}

button.fabs-w, a.fabs-w{
    padding: 11px 0;
}

.cloak-slide{
    position: absolute;
    top: 9%;
    right: 0;
    overflow: hidden;
    height:91%;
    width:90%;
    font-size: 14px;
    z-index: 2;
}

a#exo-icon, .exo-icon{
    font-size:2em;
    /*text-sky-500*/
    /*color: #0ea5e9;*/
}

h1.public-header{
    font-size: 1.5rem;
    margin-top: 1.5rem;
    padding: 0 1.5rem;
    /*color: #730E15;*/
}

.secondary-header{
    /*color: #6b7280;*/
    font-size: 1.5em;
}

.bg-dark{
    background-color: var(--bg-color);
}

.bg-black{
    background-color: #000000;
}

.text-dark{
    color: var(--bg-color);
}

.highlight-row{
    background-color: var(--primary-color);
    color: var(--bg-color);
}

.exo-font{
    font-family: 'Exo 2', Helvetica, Futura, sans-serif;
}





.meatball{
    float: right;
    padding-top: 0.5rem;
}


.meatball-icon{
    width: 2rem;
    height: 2rem;
}

.slideover, #exslideover{
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
}

#exslideover{
    width:46rem;
}

/*slideover textarear*/
.so-ta{
    resize: none;
}

.max-w-xs{
    max-width: 20rem;
}



.aeffort-table{
    border-spacing:0 1.25rem;
}


/*START  workout reps*/

/*control the widths to keep highlight row wide when zoom*/
.w-id{
    width: 5%;
}

.w-ex{
    width: 95%;
}

.blank{
    padding: 0;
    margin: 0;
    line-height: 10px;
}


.edit-slider{
    position: absolute;
    bottom: 0;
    right: 0;
    left:0;
    overflow: hidden;
    /*width: 100%;*/
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.edit-slider-inner{
    margin: 0 1rem;
    /*max-width: 35rem;*/
    /*max-width: 50%;*/

}


.set-parent{
    margin-left: auto;
    margin-right: auto;
}

.set-input{
    max-width: 8rem;
}


/*END  Edit workout reps*/

/*write workout*/





/*.slider-show{*/
/*    width: 75%;*/
/*    max-width: 75%;*/
/*}*/

#ai-convo-header{
  /*height:5vh;*/
  /*new  */
  height: 5%;
}

#ai-convo-messages{
    overflow-y: auto;
}

.legacy-messages-height{
    height: 70%;
}


#ai-convo-input{
    height: 25%;
}


#perm-input{
   padding: 1rem 0;
}


/*new home*/


.marked{
    border-top: 1px dotted var(--primary-color);
}

/*scroll all table and page*/

.all-height{
    height: 100%;
}

.divide-prime{
    border-bottom: 1px dotted var(--primary-color)
}


/*nov 14 workout, initial home... */
.tall-messages-height{
 height: 85%;
}


/*nov 14 workout, initial home... */
.short-button-height{
    height: 15%;
}

/*search for exercises*/
.short-messages-height{
    height: 80%;
}

/*search for exercises*/
.tall-button-height{
    height: 20%;
}


/*graph exercise*/
.tiny-messages-height{
    height: 16%;
}

.graph-parent-height{
    height:69%
}

.graph-parent-height-p{
    height:37%
}

.cool-msg-height{
    height:32%
}


.tiny-header-height{
    height: 9%;
}

.big-section-height{
    height:78%
}

/*end graph exercise*/

.button-holder{
    padding: 1rem 0;
}


svg.action-indicator{
    width: 1.5rem;
    height: 1rem;
}

svg.action-indicator-b{
    width: 1.8rem;
    height: 1.2rem;
}

svg.inline-bob{
    width:1rem;
    height: 1rem;
    display: inline;
}

#workout-body{
    height: 77%;
    overflow-y: auto;
}

#workout-input{
    height:9%
}

.w-input-inner{
    padding: 1rem;
}

#workout-timer-parent{
    height: 9%;
}

#workout-timer-inner{
    padding: 1rem 0;
}

#workout-timer{
}

.legacy-timer{
    font-size: 2.5rem;

}

/*legacy display workout  exercise rows and rep rows*/
.workout-body > tr{
    display: flex;
    gap: 1rem;
    padding: .25rem;
    font-size: 0.875rem;
}

/*Have to carve this out because display flex messes with it*/
.workout-body > tr.hidden{
    display: none;
}





/*exercise info*/
.public-body{
    height:90vh;
}

/*view exercise video*/
#iframe-web-width{
    margin-top: 1.25rem;
}


/*select buttons on fred*/
.input-label, #submitBtn{
    margin-bottom: 0.20rem;
    height: 3rem;
    width: 6rem;
    padding: 0.5rem 0.75rem;
    font-size:.875rem;
    line-height:1.25rem;
    text-align: center;
}


.public-bg{
    height: 100vh;
    overflow-y: auto;
    position: relative;
}




/*Articles*/
.article-text-div, .article-text-div p, .article-text-div ul li, .article-text-div ul li, .article-text-div ol li{
    font-size: 1.1rem;
    font-weight: 300;
    font-family: "Georgia", "Times New Roman", "Serif";
}

.article-text-div p{
    margin-top: 0;
    margin-bottom: 1rem;
}

.article-text-div h2, .article-text-div h3, .article-text-div h4 {
    font-weight: 400;
    font-family: 'Exo 2', Helvetica, Futura, sans-serif;
}

.article-text-div h2 {
    font-size: 1.45rem;
    margin-bottom: 0.8rem;
}

.article-text-div h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.article-text-div h4 {
    font-weight: 400;
    font-size: 1.25rem;
    margin-bottom: 0.15rem;
}

.article-text-div p.strong{
    font-weight: 600;
}

.article-text-div p.announcement{
    font-size: 1.45rem;
}

.article-text-div p + ol, .article-text-div p + ul {
    margin-top: -0.5rem;
}

.article-text-div ul{
    padding-inline-start: 40px;
    list-style: list;
    list-style-type: disc;
    margin-bottom: 1rem;

}

.article-text-div ul li:first-child{
    margin-top: -0.5rem;
}

.article-text-div ul li{
    /*padding-left: 1rem;*/
}


@media (max-width: 40em ){
    a#exo-icon, .exo-icon{
        font-size:1.4em;
    }

    body{
        background-color: var(--bg-color);
    }

    #ai-wrapper{
        max-height: none;
        max-width: none;
        margin-top: 0;
    }

    /*#FAB*/
    .fab-cont{
        padding-right: 0.5rem;
    }

    .fab-h3{
        height:30%;
    }

    .fab-h2{
        height:18%;
    }


    svg.action-indicator-c{
        width: 40px;
        height: 25px;
        stroke-width: 2px;
    }


    button.fabs, a.fabs{
        width:75px;
        height:51px;
        margin-bottom: 0.5rem;
    }



    button.fabs-i, a.fabs-i{
        padding: 11px 15px;
    }

    button.fabs-w, a.fabs-w{
        padding: 11px 0;
    }


    h1.public-header{
        font-size: 1.2rem;
        padding: 0 1rem;
    }

    .secondary-header{
        font-size: .875rem;
        line-height: 1.25rem;
    }

    #ai-convo-header{
        height: 6%;
    }

    .meatball{
        padding-top: 0.25rem;
    }

    .meatball-icon{
        width: 1.75rem;
        height: 1.75rem;
    }



    .legacy-messages-height{
        height: 68%;
    }



    #ai-convo-input{
        height: 26%;
    }


    /*new home*/

    /*nov 14 workout, initial home */
    .tall-messages-height{
        height: 87%;
    }

    /*search for exercises*/
    .short-messages-height{
        height: 82%;
    }


    /*nov 14 workout, initial home */
    .short-button-height{
        height: 13%;
    }

    /*search for exercises*/
    .tall-button-height{
        height: 18%;
    }

    /*graph exercise*/
    .tiny-messages-height{
        height: 18%;
    }

    .graph-parent-height{
        height:69%
    }

    .graph-parent-height-p{
        height:29%
    }

    .cool-msg-height{
        height:40%
    }
    /*end graph exercise*/



    .blank{
        padding: 0;
        margin: 0;
        line-height: 8px;
    }


    #workout-input{
        height:7%;
        padding-bottom: 0.5rem;
    }

    .w-input-inner{
        padding:0 0.75rem;
        /*padding-right: 1rem;*/
        /*padding-left: 1rem;*/
        /*padding-top: 0.5rem;*/
        /*padding: 0.5rem 1rem;*/

    }

    .standard-edge{
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }


    .max-w-event-slider{
        /*max-width: 30rem;*/
    }

    .black-to-groovy{
        padding: 0.4rem 0.6rem;
    }

    .black-to-groovy.taller-btn{
        /*padding: 0.6rem 0.6rem;*/
        padding: 0.6rem 0;

    }


    .public-body{
        height:95vh;
    }

    /*view exercise video*/
    #iframe-web-width{
        margin-top: 0.60rem;
    }

    .input-label, #submitBtn{
        /*margin-bottom: 0.10rem;*/
        height: 2.5rem;
        width: 4.0rem;
        font-size:.75rem;
        line-height:0.75rem;
    }


    /*workout*/
    .w-id{
        width: 5%;
    }

    .w-ex{
        width: 95%;
    }


    .sets-table{
        border-spacing:0 0.75rem;
    }

    #workout-timer-parent{
        height: 10%;
    }

    #workout-timer-inner{
        padding: 0.5rem 0;
    }

    #workout-timer{
    }

    .legacy-timer{
        font-size: 1.8rem;
    }



    .edit-slider{
        width: 100%;

    }

    .edit-slider-inner{
        margin: 0 0.75rem;
    }

    .set-input{
        max-width: 6rem;
    }



    /*Articles*/

    .article-text-div{
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }


    .article-text-div, .article-text-div p, .article-text-div p, .article-text-div ul li, .article-text-div ul li, .article-text-div ol li{
        font-size: 1rem;
        line-height: 1.4rem;
    }

    .article-text-div, .article-text-div p, .article-text-div p, .article-text-div ul li, .article-text-div ul li, .article-text-div ol li{
        font-size: 1rem;
    }

    .article-text-div p.announcement{
        font-size: 1.15rem;
    }

    .article-text-div p + ol, .article-text-div p + ul {
        margin-top: -0.75rem;
    }



}


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */