/* Basic Structure Stylesheet */

/* Row */
.flex-row {
    display: flex;
    flex-direction: row;
}

/* Column */
.flex-col {
    display: flex;
    flex-direction: column;
}

@media screen and (max-width:767px){
    .flex-col-mobile{
        display:flex;
        flex-direction:column;
    }
    .flex-row-mobile{
        display:flex;
        flex-direction:row;
    }
}

/* Basic Structure Stylesheet - Gap Extensions */

/* Row Gaps */
.row-gap-small {
    row-gap: 10px;
}

.row-gap-medium {
    row-gap: 20px;
}

.row-gap-large {
    row-gap: 30px;
}

.row-gap-extra-large {
    row-gap: 50px;
}

.row-gap-huge {
    row-gap: 100px;
}

/* Column Gaps */
.column-gap-small {
    column-gap: 10px;
}

.column-gap-medium {
    column-gap: 20px;
}

.column-gap-large {
    column-gap: 30px;
}

.column-extra-large {
    column-gap: 50px;
}

.column-huge {
    column-gap: 100px;
}

/* Combined Row and Column Gaps */
.gap-5{
    gap:5px;
}
.gap-small {
    gap: 10px;
}

.gap-medium {
    gap: 20px;
}

.gap-large {
    gap: 30px;
}

.gap-extra-large {
    gap: 50px;
}

.gap-huge {
    gap: 100px;
}

/* Responsive Gap Adjustments 
@media (max-width: 768px) {
    .row-gap-small {
        row-gap: 5px;
    }

    .row-gap-medium {
        row-gap: 10px;
    }

    .row-gap-large {
        row-gap: 15px;
    }
    
    .row-gap-extra-large {
        row-gap: 25px;
    }
    
    .row-gap-extra-huge {
        row-gap: 50px;
    }

    .column-gap-small {
        column-gap: 5px;
    }

    .column-gap-medium {
        column-gap: 10px;
    }

    .column-gap-large {
        column-gap: 15px;
    }
    
    .column-gap-extra-large {
        column-gap: 25px;
    }
    
    .column-gap-huge {
        column-gap: 50px;
    }

    .gap-small {
        gap: 5px;
    }

    .gap-medium {
        gap: 10px;
    }

    .gap-large {
        gap: 15px;
    }
    
    .gap-extra-large {
        gap: 25px;
    }
    
    .gap-extra-huge {
        gap: 50px;
    }
}

/* Container - Extra Large */
.container-extra-large {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* Centers the container */
}

/* Container - Large */
.container-large {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

/* Container - Medium */
.container-medium {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* Container - Small */
.container-small {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

/* Container - Extra Small */
.container-extra-small {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* Container - Full Width */
.container-full-width {
    width: 100%;
    margin: 0 auto;
}

/* Utility Classes for Padding and Margin */
.padding-small {
    padding: 10px;
}

.padding-medium {
    padding: 20px;
}

.padding-large {
    padding: 30px;
}

.margin-small {
    margin: 10px;
}

.margin-medium {
    margin: 20px;
}

.margin-large {
    margin: 30px;
}

/* Flex Utilities */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.flex-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-space-around {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* Text Alignment Utilities */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
    .container-extra-large {
        max-width: 95%;
    }
}

@media (max-width:1100px){
    .container-large{
        max-width:95%;
    }
}

@media (max-width: 992px) {
    .container-large {
        max-width: 95%;
    }
}

@media (max-width: 768px) {
    .container-medium {
        max-width: 95%;
    }
}

@media (max-width: 576px) {
    .container-small,
    .container-extra-small,
    .container-extra-large,
    .container-large,
    .container-medium{
        max-width: 92%;
    }
}

/* Flex Grow and Shrink Stylesheet */

/* Flex Grow */
.flex-grow {
    flex-grow: 1;
}

.flex-no-grow {
    flex-grow: 0;
}

.flex-grow-2 {
    flex-grow: 2;
}

.flex-grow-3 {
    flex-grow: 3;
}

/* Flex Shrink */
.flex-shrink {
    flex-shrink: 1;
}

.flex-no-shrink {
    flex-shrink: 0;
}

.flex-shrink-2 {
    flex-shrink: 2;
}

.flex-shrink-3 {
    flex-shrink: 3;
}

/* Flex Basis */
.flex-basis-auto {
    flex-basis: auto;
}

.flex-basis-0 {
    flex-basis: 0%;
}

.flex-basis-50 {
    flex-basis: 50%;
}

.flex-basis-100 {
    flex-basis: 100%;
}

/* Combined Flex Properties */
.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.flex-3 {
    flex: 3;
}

.flex-auto {
    flex: 1 1 auto;
}

.flex-none {
    flex: none;
}


/* Flex Grid Column Classes Examples:

Example Usage:

1. Fixed Width Column:
   <div class="flex-row">
       <div class="flex-col-fixed-200">Content here</div>
       <div class="flex-col">Remaining space</div>
   </div>

2. Percentage-Based Column:
   <div class="flex-row">
       <div class="flex-col-1-2">50% Width</div>
       <div class="flex-col-1-2">50% Width</div>
   </div>

3. Equal Width Columns:
   <div class="flex-row">
       <div class="flex-col">Equal Space</div>
       <div class="flex-col">Equal Space</div>
       <div class="flex-col">Equal Space</div>
   </div>

4. Responsive Columns:
   <div class="flex-row">
       <div class="flex-col-50">Adapts to 100% on small screens</div>
       <div class="flex-col-50">Adapts to 100% on small screens</div>
   </div>

5. Offset Columns:
   <div class="flex-row">
       <div class="flex-offset-1-4">Offset by 25%</div>
   </div>

*/

/* Flex Grid Column Classes */

/* Fixed Width Columns */
.flex-col-fixed-100 { flex: 0 0 100px; }
.flex-col-fixed-200 { flex: 0 0 200px; }
.flex-col-fixed-300 { flex: 0 0 300px; }

/* Percentage-Based Columns */
.flex-col-1-4 { flex: 0 0 25%; }        /* 25% of container's width */
.flex-col-1-3 { flex: 0 0 33.333%; }     /* 33.333% of container's width */
.flex-col-1-2, flex-col-2-4 { flex: 0 0 50%; }        /* 50% of container's width */
.flex-col-2-3 { flex: 0 0 66.666%; }     /* 66.666% of container's width */
.flex-col-3-4 { flex: 0 0 75%; }        /* 75% of container's width */

/* Based on 6 parts */
.flex-col-1-6 { flex: 0 0 16.6667%; }   /* ~16.67% of container's width */
.flex-col-1-5 { flex: 0 0 20%; }        /* 20% of container's width */
.flex-col-2-6 { flex: 0 0 33.3333%; }   /* ~33.33% of container's width */
.flex-col-1-12 { flex: 0 0 8.3333%; }   /* ~8.33% of container's width */
.flex-col-5-6 { flex: 0 0 83.3333%; }   /* ~83.33% of container's width */

/* Based on 8 parts */
.flex-col-1-8 { flex: 0 0 12.5%; }      /* 12.5% of container's width */
.flex-col-3-8 { flex: 0 0 37.5%; }      /* 37.5% of container's width */
.flex-col-5-8 { flex: 0 0 62.5%; }      /* 62.5% of container's width */
.flex-col-7-8 { flex: 0 0 87.5%; }      /* 87.5% of container's width */

/* Based on 12 parts */
.flex-col-1-12 { flex: 0 0 8.3333%; }   /* ~8.33% of container's width */
.flex-col-2-12 { flex: 0 0 16.6667%; }  /* ~16.67% of container's width */
.flex-col-3-12 { flex: 0 0 25%; }       /* 25% of container's width */
.flex-col-4-12 { flex: 0 0 33.3333%; }  /* ~33.33% of container's width */
.flex-col-5-12 { flex: 0 0 41.6667%; }  /* ~41.67% of container's width */
.flex-col-6-12 { flex: 0 0 50%; }       /* 50% of container's width */
.flex-col-7-12 { flex: 0 0 58.3333%; }  /* ~58.33% of container's width */
.flex-col-8-12 { flex: 0 0 66.6667%; }  /* ~66.67% of container's width */
.flex-col-9-12 { flex: 0 0 75%; }       /* 75% of container's width */
.flex-col-10-12 { flex: 0 0 83.3333%; } /* ~83.33% of container's width */
.flex-col-11-12 { flex: 0 0 91.6667%; } /* ~91.67% of container's width */


/* Equal-Width Columns */
.flex-col-1 { flex: 1; } /* Equal division of space */

/* Responsive Columns */
.flex-col-50 {
    flex: 0 0 50%; /* 50% of container's width */
}

@media screen and (max-width: 767px) {
    .flex-col-50 {
        flex: 0 0 100%; /* Full width on smaller screens */
    }
}

/* Offset Columns */
.flex-offset-1-4 { margin-left: 25%; } /* Offset by 25% */
.flex-offset-1-3 { margin-left: 33.333%; } /* Offset by 33.333% */
.flex-offset-1-2 { margin-left: 50%; } /* Offset by 50% */

/* Responsive Offset Columns */
@media screen and (max-width: 767px) {
    .flex-offset-1-4, .flex-offset-1-3, .flex-offset-1-2 {
        margin-left: 0; /* No offset on smaller screens */
    }
}

.opacity-0 {
    opacity: 0; /* Fully transparent */
}

.opacity-10 {
    opacity: 0.1; /* 10% visible */
}

.opacity-20 {
    opacity: 0.2; /* 20% visible */
}

.opacity-30 {
    opacity: 0.3; /* 30% visible */
}

.opacity-40 {
    opacity: 0.4; /* 40% visible */
}

.opacity-50 {
    opacity: 0.5; /* 50% visible */
}

.opacity-60 {
    opacity: 0.6; /* 60% visible */
}

.opacity-70 {
    opacity: 0.7; /* 70% visible */
}

.opacity-80 {
    opacity: 0.8; /* 80% visible */
}

.opacity-90 {
    opacity: 0.9; /* 90% visible */
}

.opacity-100 {
    opacity: 1; /* Fully opaque */
}

.mobile-show{
    display:none;
}
@media (max-width:500px){
    .mobile-hide{
        display:none;
    }
    .mobile-show{
        display:block;
    }
    .mobile-flex-space-around{
        justify-content: space-around;
    }
    .mobile-flex-center{
        align-items: center;
    }
}

fieldset legend{
    margin-bottom:20px;
}

.flex-wrap{
    flex-wrap:wrap;
}