/* Reset */
* {
    font-family: "Founders Grotesk";
}
*, *:before, *:after { box-sizing: inherit; }
html, body, form, h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
html { height: 100%; box-sizing: border-box; font-family: IBM Plex Sans; font-size: 14px; color: #555; background: #fbfbfb; }
body { height: 100%; }
table { border-collapse: collapse; border-spacing: 0; }
th, td { text-align: left; vertical-align: top; }
h1, h2, h3, h4, h5, h6, th, td, caption { font-weight: normal; }
img { border: 0; }

/* Header */
.cs-header { margin: 0; padding: 15px 15px 0 15px; border: none; background-color: rgb(25, 118, 210); min-height: 54px; }
.cs-header span { float: left; cursor: pointer; color: rgba(255, 255, 255, 0.8); font-size: 24px; margin-top: -1px; }
.cs-header span.right { float: right; }
.cs-header span:hover { color: rgba(255, 255, 255, 1.0); }
.cs-header span.alert { color: #f55; cursor: default; }
.cs-header h2 { float: left; padding: 0; margin: 0 0 0 15px; color: rgba(255, 255, 255, 0.8); line-height: 24px; font-size: 18px; font-weight: 300; text-transform: uppercase; }
.cs-header .current-user { float: right; margin-top: -4px; }
.cs-header .current-user p { color: rgba(255, 255, 255, 0.8); font-size: 12px; padding: 2px 0; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Card */
.cs-card-container { padding: 0 20px; }
.cs-card-container-dialog { max-height: 400px; margin-top: 10px; }
.cs-card { position: relative; width: 23.5%; float: left; margin: 20px 2% 0 0; box-shadow: 0 2px 2px 0 rgba(0, 0, 0,0.14), 0 3px 1px -2px rgba(0, 0, 0,0.2), 0 1px 5px 0 rgba(0, 0, 0,0.12); overflow: hidden; background: #fff; border-radius: 2px; border: 1px solid #fff; }
.cs-card:hover { cursor: pointer; }
.cs-card:nth-child(4n) { margin-right: 0; }
.cs-card:nth-child(4n+1) { clear: left; }
.cs-card .image { text-align: center; padding: 40px 0; }
.cs-card .image img { max-width: 100%; height: auto; }
.cs-card .image span { font-size: 72px; display: block; padding: 40px 0; color: #777; }
.cs-card .image .warning-icon { position: absolute; top: 10px; left: 10px; font-size: 24px; cursor: help; background: #f55; color: #fff; padding: 5px; }
.cs-card .image .goto-button { position: absolute; top: 10px; right: 10px; font-size: 24px; background: rgba(255, 255, 255, 0.2); cursor: pointer; color: #04ac21; padding: 5px; }
.cs-card .title h4 { padding: 15px 10px; font-size: 16px; color: #555; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.cs-card .description { padding: 12px; }
.cs-card .description p { font-size: 12px; color: #aaa; }
.cs-card .description p.right { float: right; }
.cs-card .description p.time-ago { text-transform: lowercase; }
@media (min-width: 1440px)
{
    .cs-card { width: 18.4%; }
    .cs-card:nth-child(4n) { margin-right: 2%; }
    .cs-card:nth-child(4n+1) { clear: initial; }
    .cs-card:nth-child(5n) { margin-right: 0; }
    .cs-card:nth-child(5n+1) { clear: left; }
}
@media (max-width: 1000px)
{
    .cs-card { width: 32%; }
    .cs-card:nth-child(4n) { margin-right: 2%; }
    .cs-card:nth-child(4n+1) { clear: initial; }
    .cs-card:nth-child(3n) { margin-right: 0; }
    .cs-card:nth-child(3n+1) { clear: left; }
}
@media (max-width: 800px)
{
    .cs-card { width: 49%; }
    .cs-card:nth-child(4n) { margin-right: 2%; }
    .cs-card:nth-child(4n+1) { clear: initial; }
    .cs-card:nth-child(3n) { margin-right: 2%; }
    .cs-card:nth-child(3n+1) { clear: initial; }
    .cs-card:nth-child(2n) { margin-right: 0; }
    .cs-card:nth-child(2n+1) { clear: left; }
}
@media (max-width: 550px)
{
    .cs-card { width: 100%; margin-right: 0; }
    .cs-card:nth-child(4n) { margin-right: 0; }
    .cs-card:nth-child(4n+1) { clear: initial; }
    .cs-card:nth-child(3n) { margin-right: 0; }
    .cs-card:nth-child(3n+1) { clear: initial; }
    .cs-card:nth-child(2n) { margin-right: 0; }
    .cs-card:nth-child(2n+1) { clear: initial; }
}

/* Fonts: */

@font-face {
    font-family: "Founders Grotesk";
    src: local("Founders Grotesk"), url("./fonts/FoundersGrotesk-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Founders Grotesk";
    src: local("Founders Grotesk"), url("./fonts/FoundersGrotesk-LightItalic.otf") format("opentype");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: "Founders Grotesk";
    src: local("Founders Grotesk"), url("./fonts/FoundersGrotesk-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Founders Grotesk";
    src: local("Founders Grotesk"), url("./fonts/FoundersGrotesk-RegularItalic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Founders Grotesk";
    src: local("Founders Grotesk"), url("./fonts/FoundersGrotesk-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Founders Grotesk";
    src: local("Founders Grotesk"), url("./fonts/FoundersGrotesk-MediumItalic.otf") format("opentype");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Founders Grotesk";
    src: local("Founders Grotesk"), url("./fonts/FoundersGrotesk-Semibold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Founders Grotesk";
    src: local("Founders Grotesk"), url("./fonts/FoundersGrotesk-SemiboldItalic.otf") format("opentype");
    font-weight: 600;
    font-style: italic;
}

/* cyrillic-ext */
@font-face {
        font-family: 'IBM Plex Sans';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/ibmplexsans/v14/zYXgKVElMYYaJe8bpLHnCwDKhdzeFb5N.woff2) format('woff2');
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
     
}

  /* cyrillic */   
@font-face {
        font-family: 'IBM Plex Sans';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/ibmplexsans/v14/zYXgKVElMYYaJe8bpLHnCwDKhdXeFb5N.woff2) format('woff2');
        unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
     
}

  /* greek */   
@font-face {
        font-family: 'IBM Plex Sans';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/ibmplexsans/v14/zYXgKVElMYYaJe8bpLHnCwDKhdLeFb5N.woff2) format('woff2');
        unicode-range: U+0370-03FF;
     
}

  /* vietnamese */   
@font-face {
        font-family: 'IBM Plex Sans';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/ibmplexsans/v14/zYXgKVElMYYaJe8bpLHnCwDKhd7eFb5N.woff2) format('woff2');
        unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
     
}

  /* latin-ext */   
@font-face {
        font-family: 'IBM Plex Sans';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/ibmplexsans/v14/zYXgKVElMYYaJe8bpLHnCwDKhd_eFb5N.woff2) format('woff2');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
     
}

  /* latin */   
@font-face {
        font-family: 'IBM Plex Sans';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/ibmplexsans/v14/zYXgKVElMYYaJe8bpLHnCwDKhdHeFQ.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
     
}