/*==================================================
  TutorMatch Design System v2.0
  File        : utilities.css
  Description : Utility Classes
==================================================*/


/*==================================================
  1. DISPLAY UTILITIES
==================================================*/

.tm-block{
    display:block;
}

.tm-inline{
    display:inline;
}

.tm-inline-block{
    display:inline-block;
}

.tm-flex{
    display:flex;
}

.tm-inline-flex{
    display:inline-flex;
}

.tm-grid{
    display:grid;
}

.tm-inline-grid{
    display:inline-grid;
}

.tm-hidden{
    display:none;
}


/*==================================================
  2. FLEX DIRECTION
==================================================*/

.tm-row{
    flex-direction:row;
}

.tm-row-reverse{
    flex-direction:row-reverse;
}

.tm-column{
    flex-direction:column;
}

.tm-column-reverse{
    flex-direction:column-reverse;
}


/*==================================================
  3. FLEX WRAP
==================================================*/

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

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

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


/*==================================================
  4. JUSTIFY CONTENT
==================================================*/

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

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

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

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

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

.tm-justify-evenly{
    justify-content:space-evenly;
}


/*==================================================
  5. ALIGN ITEMS
==================================================*/

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

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

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

.tm-items-stretch{
    align-items:stretch;
}

.tm-items-baseline{
    align-items:baseline;
}


/*==================================================
  6. ALIGN SELF
==================================================*/

.tm-self-start{
    align-self:flex-start;
}

.tm-self-center{
    align-self:center;
}

.tm-self-end{
    align-self:flex-end;
}

.tm-self-stretch{
    align-self:stretch;
}


/*==================================================
  7. FLEX GROW / SHRINK
==================================================*/

.tm-grow{
    flex-grow:1;
}

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

.tm-shrink{
    flex-shrink:1;
}

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


/*==================================================
  8. FLEX HELPERS
==================================================*/

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

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

.tm-flex-none{
    flex:none;
}


/*==================================================
  9. GRID HELPERS
==================================================*/

.tm-grid-center{
    display:grid;
    place-items:center;
}

.tm-place-center{
    place-items:center;
}

.tm-place-start{
    place-items:start;
}

.tm-place-end{
    place-items:end;
}


/*==================================================
  10. TEXT ALIGNMENT
==================================================*/

.tm-text-left{
    text-align:left;
}

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

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


/*==================================================
  11. VERTICAL ALIGNMENT
==================================================*/

.tm-align-top{
    vertical-align:top;
}

.tm-align-middle{
    vertical-align:middle;
}

.tm-align-bottom{
    vertical-align:bottom;
}


/*==================================================
  12. FLOAT UTILITIES
==================================================*/

.tm-float-left{
    float:left;
}

.tm-float-right{
    float:right;
}

.tm-float-none{
    float:none;
}

.tm-clear{
    clear:both;
}
/*==================================================
  13. MARGIN UTILITIES
==================================================*/

/* All Sides */

.tm-m-0{margin:0;}

.tm-m-1{margin:var(--space-1);}
.tm-m-2{margin:var(--space-2);}
.tm-m-3{margin:var(--space-3);}
.tm-m-4{margin:var(--space-4);}
.tm-m-5{margin:var(--space-5);}
.tm-m-6{margin:var(--space-6);}
.tm-m-7{margin:var(--space-7);}
.tm-m-8{margin:var(--space-8);}
.tm-m-9{margin:var(--space-9);}
.tm-m-10{margin:var(--space-10);}
.tm-m-11{margin:var(--space-11);}
.tm-m-12{margin:var(--space-12);}


/* Margin Auto */

.tm-m-auto{

    margin:auto;

}

.tm-mx-auto{

    margin-inline:auto;

}
/*==================================================
  MARGIN - TOP
==================================================*/

.tm-mt-0{margin-top:0;}
.tm-mt-1{margin-top:var(--space-1);}
.tm-mt-2{margin-top:var(--space-2);}
.tm-mt-3{margin-top:var(--space-3);}
.tm-mt-4{margin-top:var(--space-4);}
.tm-mt-5{margin-top:var(--space-5);}
.tm-mt-6{margin-top:var(--space-6);}
.tm-mt-7{margin-top:var(--space-7);}
.tm-mt-8{margin-top:var(--space-8);}
.tm-mt-9{margin-top:var(--space-9);}
.tm-mt-10{margin-top:var(--space-10);}
.tm-mt-11{margin-top:var(--space-11);}
.tm-mt-12{margin-top:var(--space-12);}


/*==================================================
  MARGIN - BOTTOM
==================================================*/

.tm-mb-0{margin-bottom:0;}
.tm-mb-1{margin-bottom:var(--space-1);}
.tm-mb-2{margin-bottom:var(--space-2);}
.tm-mb-3{margin-bottom:var(--space-3);}
.tm-mb-4{margin-bottom:var(--space-4);}
.tm-mb-5{margin-bottom:var(--space-5);}
.tm-mb-6{margin-bottom:var(--space-6);}
.tm-mb-7{margin-bottom:var(--space-7);}
.tm-mb-8{margin-bottom:var(--space-8);}
.tm-mb-9{margin-bottom:var(--space-9);}
.tm-mb-10{margin-bottom:var(--space-10);}
.tm-mb-11{margin-bottom:var(--space-11);}
.tm-mb-12{margin-bottom:var(--space-12);}


/*==================================================
  MARGIN - LEFT
==================================================*/

.tm-ml-0{margin-left:0;}
.tm-ml-1{margin-left:var(--space-1);}
.tm-ml-2{margin-left:var(--space-2);}
.tm-ml-3{margin-left:var(--space-3);}
.tm-ml-4{margin-left:var(--space-4);}
.tm-ml-5{margin-left:var(--space-5);}
.tm-ml-6{margin-left:var(--space-6);}
.tm-ml-7{margin-left:var(--space-7);}
.tm-ml-8{margin-left:var(--space-8);}
.tm-ml-9{margin-left:var(--space-9);}
.tm-ml-10{margin-left:var(--space-10);}
.tm-ml-11{margin-left:var(--space-11);}
.tm-ml-12{margin-left:var(--space-12);}


/*==================================================
  MARGIN - RIGHT
==================================================*/

.tm-mr-0{margin-right:0;}
.tm-mr-1{margin-right:var(--space-1);}
.tm-mr-2{margin-right:var(--space-2);}
.tm-mr-3{margin-right:var(--space-3);}
.tm-mr-4{margin-right:var(--space-4);}
.tm-mr-5{margin-right:var(--space-5);}
.tm-mr-6{margin-right:var(--space-6);}
.tm-mr-7{margin-right:var(--space-7);}
.tm-mr-8{margin-right:var(--space-8);}
.tm-mr-9{margin-right:var(--space-9);}
.tm-mr-10{margin-right:var(--space-10);}
.tm-mr-11{margin-right:var(--space-11);}
.tm-mr-12{margin-right:var(--space-12);}

/*==================================================
  MARGIN - X AXIS
==================================================*/

.tm-mx-0{margin-inline:0;}
.tm-mx-1{margin-inline:var(--space-1);}
.tm-mx-2{margin-inline:var(--space-2);}
.tm-mx-3{margin-inline:var(--space-3);}
.tm-mx-4{margin-inline:var(--space-4);}
.tm-mx-5{margin-inline:var(--space-5);}
.tm-mx-6{margin-inline:var(--space-6);}
.tm-mx-7{margin-inline:var(--space-7);}
.tm-mx-8{margin-inline:var(--space-8);}
.tm-mx-9{margin-inline:var(--space-9);}
.tm-mx-10{margin-inline:var(--space-10);}
.tm-mx-11{margin-inline:var(--space-11);}
.tm-mx-12{margin-inline:var(--space-12);}


/*==================================================
  MARGIN - Y AXIS
==================================================*/

.tm-my-0{margin-block:0;}
.tm-my-1{margin-block:var(--space-1);}
.tm-my-2{margin-block:var(--space-2);}
.tm-my-3{margin-block:var(--space-3);}
.tm-my-4{margin-block:var(--space-4);}
.tm-my-5{margin-block:var(--space-5);}
.tm-my-6{margin-block:var(--space-6);}
.tm-my-7{margin-block:var(--space-7);}
.tm-my-8{margin-block:var(--space-8);}
.tm-my-9{margin-block:var(--space-9);}
.tm-my-10{margin-block:var(--space-10);}
.tm-my-11{margin-block:var(--space-11);}
.tm-my-12{margin-block:var(--space-12);}

/*==================================================
  14. PADDING UTILITIES
==================================================*/

/* All Sides */

.tm-p-0{padding:0;}

.tm-p-1{padding:var(--space-1);}
.tm-p-2{padding:var(--space-2);}
.tm-p-3{padding:var(--space-3);}
.tm-p-4{padding:var(--space-4);}
.tm-p-5{padding:var(--space-5);}
.tm-p-6{padding:var(--space-6);}
.tm-p-7{padding:var(--space-7);}
.tm-p-8{padding:var(--space-8);}
.tm-p-9{padding:var(--space-9);}
.tm-p-10{padding:var(--space-10);}
.tm-p-11{padding:var(--space-11);}
.tm-p-12{padding:var(--space-12);}

/*==================================================
  PADDING - TOP
==================================================*/

.tm-pt-0{padding-top:0;}
.tm-pt-1{padding-top:var(--space-1);}
.tm-pt-2{padding-top:var(--space-2);}
.tm-pt-3{padding-top:var(--space-3);}
.tm-pt-4{padding-top:var(--space-4);}
.tm-pt-5{padding-top:var(--space-5);}
.tm-pt-6{padding-top:var(--space-6);}
.tm-pt-7{padding-top:var(--space-7);}
.tm-pt-8{padding-top:var(--space-8);}
.tm-pt-9{padding-top:var(--space-9);}
.tm-pt-10{padding-top:var(--space-10);}
.tm-pt-11{padding-top:var(--space-11);}
.tm-pt-12{padding-top:var(--space-12);}


/*==================================================
  PADDING - BOTTOM
==================================================*/

.tm-pb-0{padding-bottom:0;}
.tm-pb-1{padding-bottom:var(--space-1);}
.tm-pb-2{padding-bottom:var(--space-2);}
.tm-pb-3{padding-bottom:var(--space-3);}
.tm-pb-4{padding-bottom:var(--space-4);}
.tm-pb-5{padding-bottom:var(--space-5);}
.tm-pb-6{padding-bottom:var(--space-6);}
.tm-pb-7{padding-bottom:var(--space-7);}
.tm-pb-8{padding-bottom:var(--space-8);}
.tm-pb-9{padding-bottom:var(--space-9);}
.tm-pb-10{padding-bottom:var(--space-10);}
.tm-pb-11{padding-bottom:var(--space-11);}
.tm-pb-12{padding-bottom:var(--space-12);}

/*==================================================
  PADDING - LEFT / RIGHT / X / Y
==================================================*/

.tm-pl-0{padding-left:0;}
.tm-pl-1{padding-left:var(--space-1);}
.tm-pl-2{padding-left:var(--space-2);}
.tm-pl-3{padding-left:var(--space-3);}
.tm-pl-4{padding-left:var(--space-4);}
.tm-pl-5{padding-left:var(--space-5);}
.tm-pl-6{padding-left:var(--space-6);}
.tm-pl-7{padding-left:var(--space-7);}
.tm-pl-8{padding-left:var(--space-8);}
.tm-pl-9{padding-left:var(--space-9);}
.tm-pl-10{padding-left:var(--space-10);}
.tm-pl-11{padding-left:var(--space-11);}
.tm-pl-12{padding-left:var(--space-12);}

.tm-pr-0{padding-right:0;}
.tm-pr-1{padding-right:var(--space-1);}
.tm-pr-2{padding-right:var(--space-2);}
.tm-pr-3{padding-right:var(--space-3);}
.tm-pr-4{padding-right:var(--space-4);}
.tm-pr-5{padding-right:var(--space-5);}
.tm-pr-6{padding-right:var(--space-6);}
.tm-pr-7{padding-right:var(--space-7);}
.tm-pr-8{padding-right:var(--space-8);}
.tm-pr-9{padding-right:var(--space-9);}
.tm-pr-10{padding-right:var(--space-10);}
.tm-pr-11{padding-right:var(--space-11);}
.tm-pr-12{padding-right:var(--space-12);}

.tm-px-0{padding-inline:0;}
.tm-px-1{padding-inline:var(--space-1);}
.tm-px-2{padding-inline:var(--space-2);}
.tm-px-3{padding-inline:var(--space-3);}
.tm-px-4{padding-inline:var(--space-4);}
.tm-px-5{padding-inline:var(--space-5);}
.tm-px-6{padding-inline:var(--space-6);}
.tm-px-7{padding-inline:var(--space-7);}
.tm-px-8{padding-inline:var(--space-8);}
.tm-px-9{padding-inline:var(--space-9);}
.tm-px-10{padding-inline:var(--space-10);}
.tm-px-11{padding-inline:var(--space-11);}
.tm-px-12{padding-inline:var(--space-12);}

.tm-py-0{padding-block:0;}
.tm-py-1{padding-block:var(--space-1);}
.tm-py-2{padding-block:var(--space-2);}
.tm-py-3{padding-block:var(--space-3);}
.tm-py-4{padding-block:var(--space-4);}
.tm-py-5{padding-block:var(--space-5);}
.tm-py-6{padding-block:var(--space-6);}
.tm-py-7{padding-block:var(--space-7);}
.tm-py-8{padding-block:var(--space-8);}
.tm-py-9{padding-block:var(--space-9);}
.tm-py-10{padding-block:var(--space-10);}
.tm-py-11{padding-block:var(--space-11);}
.tm-py-12{padding-block:var(--space-12);}

/*==================================================
  15. WIDTH UTILITIES
==================================================*/

.tm-w-auto{

    width:auto;

}

.tm-w-25{

    width:25%;

}

.tm-w-50{

    width:50%;

}

.tm-w-75{

    width:75%;

}

.tm-w-100{

    width:100%;

}

.tm-max-w-100{

    max-width:100%;

}


/*==================================================
  16. HEIGHT UTILITIES
==================================================*/

.tm-h-auto{

    height:auto;

}

.tm-h-100{

    height:100%;

}

.tm-min-h-100{

    min-height:100%;

}

.tm-vh-100{

    height:100vh;

}

.tm-min-vh-100{

    min-height:100vh;

}


/*==================================================
  17. OVERFLOW UTILITIES
==================================================*/

.tm-overflow-hidden{

    overflow:hidden;

}

.tm-overflow-auto{

    overflow:auto;

}

.tm-overflow-scroll{

    overflow:scroll;

}

.tm-overflow-visible{

    overflow:visible;

}

.tm-overflow-x-auto{

    overflow-x:auto;

}

.tm-overflow-y-auto{

    overflow-y:auto;

}
/*==================================================
  22. CURSOR UTILITIES
==================================================*/

.tm-cursor-pointer{
    cursor:pointer;
}

.tm-cursor-default{
    cursor:default;
}

.tm-cursor-not-allowed{
    cursor:not-allowed;
}

.tm-cursor-wait{
    cursor:wait;
}

.tm-cursor-move{
    cursor:move;
}

.tm-cursor-grab{
    cursor:grab;
}

.tm-cursor-grabbing{
    cursor:grabbing;
}

.tm-cursor-text{
    cursor:text;
}

.tm-cursor-crosshair{
    cursor:crosshair;
}

.tm-cursor-zoom-in{
    cursor:zoom-in;
}

.tm-cursor-zoom-out{
    cursor:zoom-out;
}
/*==================================================
  23. USER SELECT UTILITIES
==================================================*/

.tm-select-none{
    user-select:none;
    -webkit-user-select:none;
}

.tm-select-text{
    user-select:text;
    -webkit-user-select:text;
}

.tm-select-all{
    user-select:all;
    -webkit-user-select:all;
}

.tm-select-auto{
    user-select:auto;
    -webkit-user-select:auto;
}


/*==================================================
  24. OBJECT FIT UTILITIES
==================================================*/

.tm-object-cover{
    object-fit:cover;
}

.tm-object-contain{
    object-fit:contain;
}

.tm-object-fill{
    object-fit:fill;
}

.tm-object-scale-down{
    object-fit:scale-down;
}

.tm-object-none{
    object-fit:none;
}
/*==================================================
  23. USER SELECT UTILITIES
==================================================*/

.tm-select-none{
    user-select:none;
    -webkit-user-select:none;
}

.tm-select-text{
    user-select:text;
    -webkit-user-select:text;
}

.tm-select-all{
    user-select:all;
    -webkit-user-select:all;
}

.tm-select-auto{
    user-select:auto;
    -webkit-user-select:auto;
}


/*==================================================
  24. OBJECT FIT UTILITIES
==================================================*/

.tm-object-cover{
    object-fit:cover;
}

.tm-object-contain{
    object-fit:contain;
}

.tm-object-fill{
    object-fit:fill;
}

.tm-object-scale-down{
    object-fit:scale-down;
}

.tm-object-none{
    object-fit:none;
}
/*==================================================
  25. BACKGROUND UTILITIES
==================================================*/

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

.tm-bg-primary-soft{
    background:var(--color-primary-soft);
}

.tm-bg-white{
    background:var(--color-surface);
}

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

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

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

.tm-bg-success-light{
    background:var(--color-success-light);
}

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

.tm-bg-warning-light{
    background:var(--color-warning-light);
}

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

.tm-bg-error-light{
    background:var(--color-error-light);
}

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

.tm-bg-info-light{
    background:var(--color-info-light);
}

.tm-bg-transparent{
    background:transparent;
}

.tm-bg-gradient{
    background:var(--color-primary-gradient);
}/*==================================================
  26. TEXT COLOR UTILITIES
==================================================*/

.tm-text-primary{
    color:var(--color-primary);
}

.tm-text-heading{
    color:var(--text-heading);
}

.tm-text-body{
    color:var(--text-body);
}

.tm-text-secondary{
    color:var(--text-secondary);
}

.tm-text-muted{
    color:var(--text-muted);
}

.tm-text-white{
    color:var(--text-inverse);
}

.tm-text-success{
    color:var(--color-success);
}

.tm-text-warning{
    color:var(--color-warning);
}

.tm-text-error{
    color:var(--color-error);
}

.tm-text-info{
    color:var(--color-info);
}
/*==================================================
  27. TRANSITION UTILITIES
==================================================*/

.tm-transition-fast{
    transition:var(--transition-fast);
}

.tm-transition-normal{
    transition:var(--transition-normal);
}

.tm-transition-slow{
    transition:var(--transition-slow);
}

.tm-transition-bounce{
    transition:var(--transition-bounce);
}

.tm-transition-smooth{
    transition:var(--transition-smooth);
}
/*==================================================
  28. RESPONSIVE UTILITIES
==================================================*/

.tm-desktop-only{
    display:block;
}

.tm-tablet-only,
.tm-mobile-only{
    display:none;
}

@media (max-width:1024px){

    .tm-desktop-only{
        display:none;
    }

    .tm-tablet-only{
        display:block;
    }

}

@media (max-width:768px){

    .tm-tablet-only{
        display:none;
    }

    .tm-mobile-only{
        display:block;
    }

}