@import url(https://db.onlinewebfonts.com/c/9e00143409affcb46a1ae58634aa64be?family=SofiaProRegular);

@font-face {
    font-family: "SofiaProRegular";
    src: url("https://db.onlinewebfonts.com/t/9e00143409affcb46a1ae58634aa64be.eot");
    src: url("https://db.onlinewebfonts.com/t/9e00143409affcb46a1ae58634aa64be.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/9e00143409affcb46a1ae58634aa64be.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/9e00143409affcb46a1ae58634aa64be.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/9e00143409affcb46a1ae58634aa64be.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/9e00143409affcb46a1ae58634aa64be.svg#SofiaProRegular")format("svg");
}
:root {
     /* color neutral palette */
    --color-neutral-0: #ffffff;
    --color-neutral-1: #f8f9fa;
    --color-neutral-2: #f1f3f5;
    --color-neutral-3: #e9ecef;
    --color-neutral-4: #dee2e6;
    --color-neutral-5: #ced4da;
    --color-neutral-6: #9ea6ae;
    --color-neutral-7: #6a7178;
    --color-neutral-8: #4f575e;
    --color-neutral-9: #272b30;
    --color-neutral-10: #000000;

    /* font sizes  */
    --font-size-h1: 32px;
    --font-size-h2: 28px;
    --font-size-h3: 26px;
    --font-size-h4: 22px;
    --font-size-h5: 20px;
    --font-size-h6: 18px;
    --font-size-display: 36px;
    --font-size-base: 16px;
    --font-size-s: 14px;
    --font-size-xs: 12px;
    --font-size-xxs: 10px;

    /* font weight */
    --font-light: 300;
    --font-regular: 400;
    --font-semi-bold: 600;
    --font-bold: 700;

    /* spaces */
    --space-none: 0;
    --space-xxs: 3px;
    --space-xs: 4px;
    --space-s: 8px;
    --space-base: 16px;
    --space-m: 24px;
    --space-l: 32px;
    --space-xl: 40px;
    --space-xxl: 48px;

    /* border radius */
    --border-radius-none: 0;
    --border-radius-soft: 4px;
    --border-radius-medium: 8px;
    --border-radius-rounded: 20px;
    --border-radius-circle: 100%;

    /* border sizes */
    --border-size-none: 0;
    --border-size-s: 1px;
    --border-size-m: 2px;
    --border-size-l: 4px;

    /* shadows */
    --shadow-none: none;
    --shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-s: 0px 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-m: 0px 1px 12px rgba(22, 34, 51, 0.05);
    --shadow-l: 0px 1px 12px rgba(22, 34, 51, 0.15);
    --shadow-xl: 0px 8px 10px rgba(0, 0, 0, 0.1);

    /* colors */
    --color-border: var(--color-neutral-5);
    --color-border-hover: var(--color-neutral-6);
    --color-border-focus: #4fa4ee;
 
    /* others */
    --color-background-body: #F8F9FA;
    --font-family: "SofiaProRegular", sans-serif;
}


body {
    background-color: var(--color-background-body);
    font-size: var(--font-size-s);
    font-family: var(--font-family);
    font-weight: var(--font-regular);
    line-height: 1.5;
    margin: 0;

}

.hi__apps__title {
    margin-bottom: var(--space-xl);
}

.hi__apps__title h1 {
    line-height: 40px;
    font-size: var(--font-size-h1);
    font-weight: var(--font-regular);
    margin: 0;
}

.hi__apps__wrapper {
    display: flex;
    flex-direction: column;
    padding: var(--space-base);
}

a, a:link {
    text-decoration: none;
}


/* top actions /filters */

.hi__apps__top-action {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-base);
    margin-bottom: var(--space-base);  
}

.hi__apps__top-action div {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}


/* Search app input */

.hi__apps__search {
    position: relative;
}

.hi__apps__search input {
    height: 40px;
    padding: var(--space-none) var(--space-base);
    background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid var(--color-border);
    border-radius: var(--border-radius-soft);
    color: var(--color-neutral-10);
    font-size: var(--font-size-s);
    padding-left: var(--space-xxl);
    outline: 0;
    box-sizing: border-box;
}

.hi__apps__search input:hover {
    border: var(--border-size-s) solid var(--color-border-hover);
}

.hi__apps__search input:focus {
    border: var(--border-size-s) solid var(--color-border-focus);
    box-shadow: 0px 0px 0px 2px rgba(79, 164, 238, 0.5);
}

.hi__apps__search::after {
    align-items: center;
    color: var(--color-neutral-6);
    content: "\f002";       /* search icon */
    display: flex;
    font-family: "Font Awesome 6 Free"; 
    font-weight: 900; 
    height: 100%;
    left: var(--space-m);
    position: absolute;
    top: 0;
}

.hi__apps__search input::placeholder {
    font-family: var(--font-family);
    color: var(--color-neutral-6);
}


.hi__apps__top-action div input,
.hi__apps__top-action div select {
    width: 100%;
}


/* Gallery apps */

.hi__apps__gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-base);
}


.hi__apps__gallery .hi__apps__app {
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-medium);
    border: var(--border-size-none);
    box-shadow: var(--shadow-m);
    padding: var(--space-m);
}


.hi__apps__gallery .hi__apps__app div {
    display: flex;
    align-items: center;
    justify-content: center;
}


.hi__apps__gallery .hi__apps__app__icon {
    height: 63px;
}


.hi__apps__gallery .hi__apps__app__icon img {
    height: 100%;
}


.hi__apps__gallery .hi__apps__app__title {
    color: var(--color-neutral-10);
    text-transform: none;
    font-size: var(--font-size-base);
    text-align: center;
    margin-top: var(--space-xxs);
}