/* 

    flexi.css 
    Andy Knoll - TCARE, Inc.
    April 2022

    custom CSS classes for responsive layouts
    place .blocks in .flex-rows
    use shortcut class names: ta-c (text-align: center)

*/

body {
	margin: 0;
	padding: 0px;
	font-size: 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.fixed-top {
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 900;
}

.fixed-bottom {
    position: fixed;
    width: 100%;
    bottom: 0px;
    left: 0px;
    z-index: 900;
}

/************************************   FLEX RELATED   *********************************/
.flex-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* border: 1px solid blue; */
}

.flex-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* border: 1px solid red; */
}

.flex-row.fluid {
    flex-direction: row;
    flex-wrap: wrap;
    /* border: 1px solid green; */
}

.flex-center {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.ai-start {
    align-items: flex-start;
}

.ai-center {
    align-items: center;
}

.ai-end {
    align-items: flex-end;
}


.jc-start {
    justify-content: flex-start;
}

.jc-center {
    justify-content: center;
}

.jc-end {
    justify-content: flex-end;
}

.jc-between {
    justify-content: space-between;
}

.jc-around {
    justify-content: space-around;
}



.flex-block {
    position: relative;
    /* display: flex; */
    /* background-color: #eeeeee; */
}

/************************************   TEXT RELATED   *********************************/
.ta-l { text-align: left; }
.ta-c { text-align: center; }
.ta-r { text-align: right; }

.fs-sm { font-size: 0.8em; }
.fs-md { font-size: 1.0em; }
.fs-lg { font-size: 1.2em; }
.fs-xl { font-size: 1.5em; }

.fs-1 { font-size: 1em; }
.fs-2 { font-size: 2em; }
.fs-3 { font-size: 3em; }
.fs-4 { font-size: 4em; }
.fs-1-5 { font-size: 1.5em; }
.fs-2-5 { font-size: 1.5em; }

.fw-100 { font-weight: 100; }
.fw-200 { font-weight: 200; }
.fw-400 { font-weight: 400; }
.fw-800 { font-weight: 800; }


/************************************   SIZE RELATED   *********************************/
.w-0  { width: 0%;  min-width: 0%; }
.w-1  { width: 1%;  min-width: 1%; }
.w-2  { width: 2%;  max-width: 2%; }
.w-3  { width: 3%;  min-width: 3%; }
.w-4  { width: 4%;  min-width: 4%; }
.w-5  { width: 5%;  max-width: 5%; }
.w-6  { width: 6%;  max-width: 6%; }
.w-7  { width: 7%;  max-width: 7%; }
.w-8  { width: 8%;  max-width: 8%; }
.w-9  { width: 9%;  max-width: 9%; }
.w-10 { width: 10%; max-width: 10%; }
.w-15 { width: 15%; max-width: 15%; }
.w-20 { width: 20%; max-width: 20%; }
.w-24 { width: 24%; max-width: 24%; }
.w-25 { width: 25%; max-width: 25%; }
.w-30 { width: 30%; max-width: 30%; }
.w-32 { width: 32%; max-width: 32%; }
.w-33 { width: 33%; max-width: 33%; }
.w-40 { width: 40%; max-width: 40%; }
.w-45 { width: 45%; max-width: 45%; }
.w-47 { width: 47%; max-width: 47%; }
.w-48 { width: 48%; max-width: 48%; }
.w-49 { width: 49%; max-width: 49%; }
.w-50 { width: 50%; max-width: 50%; }
.w-60 { width: 60%; max-width: 60%; }
.w-65 { width: 65%; max-width: 65%; }
.w-70 { width: 70%; max-width: 70%; }
.w-75 { width: 75%; max-width: 75%; }
.w-90 { width: 90%; max-width: 90%; }
.w-100 { width: 100%; }

.h-2  { height: 2px }
.h-5  { height: 5px }
.h-10 { height: 10px }
.h-20 { height: 20px }
.h-25 { height: 25px }
.h-30 { height: 30px }
.h-33 { height: 33px }
.h-40 { height: 40px }
.h-50 { height: 50px }
.h-100 { height: 100px }
.h-200 { height: 200px }

.m-auto { margin: auto }
.m-1 { margin: 1% }
.m-2 { margin: 2% }
.m-5 { margin: 5% }
.m-10 { margin: 10% }

.mt-1 { margin-top: 1% }
.mt-2 { margin-top: 2% }
.mt-5 { margin-top: 5% }
.mt-10 { margin-top: 10% }

.mb-1 { margin-bottom: 1% }
.mb-2 { margin-bottom: 2% }
.mb-5 { margin-bottom: 5% }
.mb-10 { margin-bottom: 10% }

.mr-1 { margin-right: 1% }
.mr-2 { margin-right: 2% }
.mr-5 { margin-right: 5% }
.mr-10 { margin-right: 10% }

.ml-1 { margin-left: 1% }
.ml-2 { margin-left: 2% }
.ml-5 { margin-left: 5% }
.ml-10 { margin-left: 10% }

.mtb-1 { margin-top: 1%; margin-bottom: 1% }
.mtb-2 { margin-top: 2%; margin-bottom: 2% }
.mtb-5 { margin-top: 5%; margin-bottom: 5% }
.mtb-10 { margin-top: 10%; margin-bottom: 10% }

.p-1 { padding: 1% }
.p-2 { padding: 2% }
.p-5 { padding: 5% }
.p-10 { padding: 10% }

.spacer-h-5  { height:  5px; }
.spacer-h-10 { height: 10px; }
.spacer-h-15 { height: 15px; }
.spacer-h-20 { height: 20px; }
.spacer-h-25 { height: 25px; }
.spacer-h-30 { height: 30px; }
.spacer-h-40 { height: 40px; }
.spacer-h-50 { height: 50px; }
.spacer-h-100 { height: 100px; }

.spacer-w-5  { width:  5px; }
.spacer-w-10 { width: 10px; }
.spacer-w-15 { width: 15px; }
.spacer-w-20 { width: 20px; }
.spacer-w-25 { width: 25px; }
.spacer-w-30 { width: 30px; }
.spacer-w-40 { width: 40px; }
.spacer-w-50 { width: 50px; }
.spacer-w-100 { width: 100px; }

/**********************************   COLOR RELATED   ***********************************/
.bg-none { background-color: none !important; }
.bg-white { background-color: white; }
.bg-gray { background-color: gray; }
.bg-black { background-color: black; }
.bg-red { background-color: red; }
.bg-green { background-color: green; }
.bg-blue { background-color: blue; }

.border-red { border: 1px solid red; }
.border-green { border: 1px solid green; }
.border-blue { border: 1px solid blue; }
.border-gray { border: 1px solid gray; }

.br-5 { border-radius: 5px; }
.br-10 { border-radius: 10px; }
.br-25 { border-radius: 25px; }
.br-50 { border-radius: 50px; }

/**********************************   POSITION RELATED   *******************************/
.rotate-0 { transform: rotate(0deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }




/* when the browser's width is 600px wide or less */
@media screen and (max-width: 600px) {
    .flex-row.fluid {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .flex-row.fluid > * { 
        margin: 0% 0%; 
    }
    
    .flex-row.fluid > .w-10  { width: 100%; max-width: 100%; }
    .flex-row.fluid > .w-20  { width: 100%; max-width: 100%; }
    .flex-row.fluid > .w-24  { width: 100%; max-width: 100%; }
    .flex-row.fluid > .w-25  { width: 100%; max-width: 100%; }
    .flex-row.fluid > .w-30  { width: 100%; max-width: 100%; }
    .flex-row.fluid > .w-32  { width: 100%; max-width: 100%; }
    .flex-row.fluid > .w-33  { width: 100%; max-width: 100%; }
    .flex-row.fluid > .w-49  { width: 100%; max-width: 100%; }
    .flex-row.fluid > .w-50  { width: 100%; max-width: 100%; }
    .flex-row.fluid > .w-80  { width: 100%; max-width: 100%; }
    .flex-row.fluid > .w-100 { width: 100%; max-width: 100%; }
    
    .fs-sm { font-size: 0.6em; }
    .fs-md { font-size: 0.8em; }
    .fs-lg { font-size: 1.0em; }
    .fs-xl { font-size: 1.2em; }
    
    .fs-1 { font-size: 0.9em; }
    .fs-2 { font-size: 1.0em; }
    .fs-3 { font-size: 1.2em; }
    .fs-4 { font-size: 1.5em; }
        
}

@media screen and (min-width: 601px) and (max-width: 1300px) {
    /* .flex-row { border: 1px solid red; } */
    .flex-row.fluid {
        flex-wrap: wrap;
    }

    .flex-row.fluid > .w-24 { width: 49%; max-width: 49%; }
    .flex-row.fluid > .w-25 { width: 50%; max-width: 50%; }
    .flex-row.fluid > .w-32 { width: 50%; max-width: 50%; }
    .flex-row.fluid > .w-33 { width: 50%; max-width: 50%; }
    .flex-row.fluid > .w-49  { width: 100%; max-width: 100%; }
    .flex-row.fluid > .w-50  { width: 100%; max-width: 100%; }

}

@media screen and (min-width: 1201px) and (max-width: 1300px) {
    /* .flex-row { border: 1px solid red; } */
    .flex-row.fluid {
        flex-wrap: wrap;
    }

    .flex-row.fluid > .w-24 { width: 49%; max-width: 49%; }
    .flex-row.fluid > .w-25 { width: 50%; max-width: 50%; }
    .flex-row.fluid > .w-32 { width: 50%; max-width: 50%; }
    .flex-row.fluid > .w-33 { width: 50%; max-width: 50%; }
}

@media screen and (min-width: 1201px) {
    /* .flex-row { border: 1px solid blue; } */
}