/*
    Utility classes
    Uses same syntax as Tailwind CSS
    https://tailwindcss.com/docs/
*/

/* Sizing */
.w-auto {
    width: auto;
}

.w-full {
    width: 100%;
}

.w-0 {
    width: 0;
}

.w-px {
    width: 1px;
}

.w-min {
    width: min-content;
}

.w-max {
    width: max-content;
}

.w-fit {
    width: fit-content;
}

.min-w-0 {
    min-width: 0;
}

.min-w-full {
    min-width: 100%;
}

.max-w-0 {
    max-width: 0;
}

.max-w-none {
    max-width: none;
}

.max-w-full {
    max-width: 100%;
}

.h-full {
    height: 100%;
}

.h-0 {
    height: 0;
}

.h-px {
    height: 1px;
}

.h-min {
    height: min-content;
}

.h-max {
    height: max-content;
}

.h-fit {
    height: fit-content;
}
.h-unset {
    height: unset !important;
}

.min-h-0 {
    min-height: 0;
}

.min-h-full {
    min-height: 100%;
}

.max-h-0 {
    max-height: 0;
}

.max-h-none {
    max-height: none;
}

.max-h-full {
    max-height: 100%;
}

/* Box types */
.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}

.order-first {
    order: -9999;
}

.order-last {
    order: 9999;
}

.order-none {
    order: 0;
}

.font-thin {
    font-weight: 100;
}

.font-extralight {
    font-weight: 200;
}

.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.font-extrabold {
    font-weight: 800;
}

.font-black {
    font-weight: 900;
}


/* Type */
.uppercase {
    text-transform: uppercase !important;
}

.lowercase {
    text-transform: lowercase !important;
}

.capitalize {
    text-transform: capitalize !important;
}

.normal-case {
    text-transform: none !important;
}

.roboto-bold {
    font-family: var(--roboto-bold);
}

.code-pro {
    font-family: var(--code-pro);
}

.roboto {
    font-family: var(--roboto);
}

.roboto-bold {
    font-family: var(--roboto-bold);
}

.lato {
    font-family: var(--lato);
}

.lato-bold {
    font-family: var(--lato-bold);
}

.code-pro {
    font-family: var(--code-pro);
}

.code-pro-bold {
    font-family: "Code Pro", "Roboto", Helvetica, Arial, sans-serif !important;
}

.latoMedium{
    font-family: "Lato Medium", "Roboto", Helvetica, Arial, sans-serif !important;
}
/* Hover effects */
.hover-effect-parent:hover .hover-effect-opacity-100 {
    opacity: 1;
}


/* Misc */
.cursor-pointer {
    cursor: pointer;
}

.opacity-0 {
    opacity: 0;
}
/*.word-break{*/
/*    word-break: break-all;*/
/*}*/

/* 
    Responsive variants
    (Should really be generated with sass)

    Breakpoints (from Mudblazor)
    Device	                Code	Type	                    Range
    Extra small	            xs	    Small to large phone	    < 600px
    Small	                sm	    Small to medium tablet	    600px > < 960px
    Medium	                md	    Large tablet to laptop	    960px > < 1280px
    Large	                lg	    Desktop	                    1280px > < 1920px
    Extra Large	            xl	    HD and 4k	                1920px > < 2560px
    Extra Extra Large	    xx	    4k+ and ultra-wide	        >= 2560px*
*/

/* SM */
@media (min-width: 600px) {
    .sm\:w-auto {
        width: auto;
    }

    .sm\:h-auto {
        height: auto;
    }

    .sm\:h-full {
        height: 100%;
    }

    .sm\:order-1 {
        order: 1;
    }

    .sm\:order-2 {
        order: 2;
    }

    .sm\:order-3 {
        order: 3;
    }

    .sm\:order-first {
        order: -9999;
    }

    .sm\:order-last {
        order: 9999;
    }

    .sm\:order-none {
        order: 0;
    }
}

/* MD */
@media (min-width: 960px) {
    .md\:w-auto {
        width: auto;
    }

    .md\:h-auto {
        height: auto;
    }

    .md\:h-full {
        height: 100%;
    }

    .md\:order-1 {
        order: 1;
    }

    .md\:order-2 {
        order: 2;
    }

    .md\:order-3 {
        order: 3;
    }

    .md\:order-first {
        order: -9999;
    }

    .md\:order-last {
        order: 9999;
    }

    .md\:order-none {
        order: 0;
    }
}

/* LG */
@media (min-width: 1280px) {
    .lg\:w-auto {
        width: auto;
    }

    .lg\:h-auto {
        height: auto;
    }

    .lg\:h-full {
        height: 100%;
    }

    .lg\:order-1 {
        order: 1;
    }

    .lg\:order-2 {
        order: 2;
    }

    .lg\:order-3 {
        order: 3;
    }

    .lg\:order-first {
        order: -9999;
    }

    .lg\:order-last {
        order: 9999;
    }

    .lg\:order-none {
        order: 0;
    }
}

/* XL */
@media (min-width: 1920px) {
    .xl\:w-auto {
        width: auto;
    }

    .xl\:h-auto {
        height: auto;
    }

    .xl\:h-full {
        height: 100%;
    }

    .xl\:order-1 {
        order: 1;
    }

    .xl\:order-2 {
        order: 2;
    }

    .xl\:order-3 {
        order: 3;
    }

    .xl\:order-first {
        order: -9999;
    }

    .xl\:order-last {
        order: 9999;
    }

    .xl\:order-none {
        order: 0;
    }
}

/* XX */
@media (min-width: 2560px) {
    .xx\:w-auto {
        width: auto;
    }

    .xx\:h-auto {
        height: auto;
    }

    .xx\:h-full {
        height: 100%;
    }

    .xx\:order-1 {
        order: 1;
    }

    .xx\:order-2 {
        order: 2;
    }

    .xx\:order-3 {
        order: 3;
    }

    .xx\:order-first {
        order: -9999;
    }

    .xx\:order-last {
        order: 9999;
    }

    .xx\:order-none {
        order: 0;
    }
}

.combo-placeholder{
    font-size: 12px !important;
}
.combo-trigger > *{
    line-height: 1 !important;
    
}
.overflow {
    overflow: hidden;
}
.no-wrap{
    text-wrap: nowrap;
}
.combo-item-content{
    overflow: hidden;
}