@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');

body{
    /*background: hsl(154 50% 5%);*/
    background-color: #23262A;
    /*color: #72f3bb;*/
    color: hsl(154 84% 70%);
    /*text-shadow: 0 0 5px hsl(154 84% 70%);*/
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
}

/*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:  hsl(154 84% 70%);
    background-color: #23262A;
    border: 1px dashed hsl(154 84% 70%);
}


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: #23262A;
    border: 1px solid hsl(154 84% 70%);
}

input[type="checkbox"]:checked {
    /*color: #23262A;*/
    color: hsl(154 84% 70%);
    border: 1px solid hsl(154 84% 70%);
}

input[type="checkbox"]:indeterminate {
    background-color: #23262A;
    background-image: none;
    border-color: hsl(154 84% 70%);
}

input[type=checkbox]:indeterminate:hover{
    background-color:#23262A;
    border-color:hsl(154 84% 70%)}

.border-groovy-dashed{
    border:1px dashed hsl(154 84% 70%);
}


.border-groovy-dotted{
    border:1px dotted hsl(154 84% 70%) !important;
}

.border-groovy{
    border:1px solid hsl(154 84% 70%);
}

.peer:checked~.peer-checked\:bg-groovy{
    --tw-bg-opacity:1;
    background-color:hsl(154 84% 70%);
}

.groovy-to-black{
    border-radius:.375rem;
    padding-left:.75rem;
    padding-right:.75rem;
    padding-bottom:.5rem;
    padding-top:.5rem;
    text-align:center;
    font-size:.875rem;
    line-height:1.25rem;
    font-weight:600;
    background-color: hsl(154 84% 70%);
    color: #23262A;
    border: 1px solid #23262A;
}

.groovy-to-black:hover{
    background-color: #23262A;
    color: hsl(154 84% 70%);
    border: 1px solid hsl(154 84% 70%);
}

/*includes the delete action button */
.black-to-groovy, form.button_to{
    border-radius:.375rem;
    padding-left:.75rem;
    padding-right:.75rem;
    padding-bottom:.5rem;
    padding-top:.5rem;
    text-align:center;
    font-size:.875rem;
    line-height:1.25rem;
    /*font-weight:600;*/
    background-color: #23262A;
    color: hsl(154 84% 70%);
    border: 1px solid hsl(154 84% 70%);
}


.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: hsl(154 84% 70%);
    color: #23262A;
    border: 1px solid hsl(154 84% 70%);
}




/*.choice-btn{*/
/*    font-weight: 600 !important;*/
/*}*/

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: #23262A;
}

.text-dark{
    color: #23262A;
}

.highlight-row{
    background-color: hsl(154 84% 70%);
    color: #23262A;
}

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


#ai-wrapper, #workout-wrapper{
    position: relative;
    /*new*/
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
}


.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;
}


/*START workout nov 13 2024*/
#workout-display{
    padding-top: 1rem;
}

.exercise-preview{
    margin-top: 1rem;
    padding: 1rem 0;
}

.exercise-preview:hover, .zoomed-set:hover{
    cursor: pointer;
    background-color: hsl(154 84% 70%);
    color: #23262A;
    border: 1px solid hsl(154 84% 70%);
}


.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 hsl(154 84% 70%);
}


/*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;
    }

    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.
 *


 */