@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital@0;1&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital@0;1&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");
@font-face {
  font-family: "cfl-portale-multiservizi";
  src: url("../fonts/cfl-portale-multiservizi/fonts/cfl-portale-multiservizi.eot?e9axid");
  src: url("../fonts/cfl-portale-multiservizi/fonts/cfl-portale-multiservizi.eot?e9axid#iefix") format("embedded-opentype"), url("../fonts/cfl-portale-multiservizi/fonts/cfl-portale-multiservizi.ttf?e9axid") format("truetype"), url("../fonts/cfl-portale-multiservizi/fonts/cfl-portale-multiservizi.woff?e9axid") format("woff"), url("../fonts/cfl-portale-multiservizi/fonts/cfl-portale-multiservizi.svg?e9axid#cfl-portale-multiservizi") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.ico-pm {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "cfl-portale-multiservizi" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ico-apprendistato:before {
  content: "\e900";
}

.ico-arrow:before {
  content: "\e901";
}

.ico-company:before {
  content: "\e902";
}

.ico-company-detail:before {
  content: "\e910";
}

.ico-corso:before {
  content: "\e903";
}

.ico-dashboard:before {
  content: "\e904";
}

.ico-lock:before {
  content: "\e905";
}

.ico-logout:before {
  content: "\e906";
}

.ico-tirocinio:before {
  content: "\e907";
}

.ico-user:before {
  content: "\e908";
}

.ico-refresh:before {
  content: "\e909";
}

.ico-export:before {
  content: "\e90a";
}

.ico-config:before {
  content: "\e90b";
}

.ico-filter:before {
  content: "\e90c";
}

.ico-sort:before {
  content: "\e90d";
}

.ico-bin:before {
  content: "\e90e";
}

.ico-download:before {
  content: "\e90f";
}

:root {
  --color-black: #2A254D;
  --color-white: #FFFFFF;
  --color-grey: #F6F5F5;
  --color-grey-2: #cdcbd3;
  --color-grey-3: #697585;
  --color-grey-4: #f7f7f7;
  --color-red: #FF1327;
  --color-red-2: #FF6767;
  --color-blue: #1099FF;
  --color-blue-2: #3DACFF;
  --color-yellow: #FFBE67;
  --color-transparent: transparent;
  --font-family-noto-sans: "Noto Sans", sans-serif;
  --font-family-urbanist: "Urbanist", sans-serif;
  --font-size: .9rem;
  --font-size-sm: .7rem;
  --font-size-md: 1.4rem;
  --font-size-lg: 1.8rem;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --border-radius-7: 7px;
  --border-radius-10: 10px;
  --border-radius-20: 20px;
  --box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
  --box-shadow-2: 0px 4px 1px rgba(0,0,0,.03);
  --cubic-bezier-linear: cubic-bezier(.6,.03,.44,.89);
  --nav-width: 90px;
  --nav-top-sm: 200px;
  --button-width: 44px;
  --button-width-sm: 34px;
  --header-height: 70px;
}

@font-face {
  font-family: "cfl-portale-multiservizi";
  src: url("../fonts/cfl-portale-multiservizi/fonts/cfl-portale-multiservizi.eot?e9axid");
  src: url("../fonts/cfl-portale-multiservizi/fonts/cfl-portale-multiservizi.eot?e9axid#iefix") format("embedded-opentype"), url("../fonts/cfl-portale-multiservizi/fonts/cfl-portale-multiservizi.ttf?e9axid") format("truetype"), url("../fonts/cfl-portale-multiservizi/fonts/cfl-portale-multiservizi.woff?e9axid") format("woff"), url("../fonts/cfl-portale-multiservizi/fonts/cfl-portale-multiservizi.svg?e9axid#cfl-portale-multiservizi") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.ico-pm {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "cfl-portale-multiservizi" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ico-apprendistato:before {
  content: "\e900";
}

.ico-arrow:before {
  content: "\e901";
}

.ico-company:before {
  content: "\e902";
}

.ico-company-detail:before {
  content: "\e910";
}

.ico-corso:before {
  content: "\e903";
}

.ico-dashboard:before {
  content: "\e904";
}

.ico-lock:before {
  content: "\e905";
}

.ico-logout:before {
  content: "\e906";
}

.ico-tirocinio:before {
  content: "\e907";
}

.ico-user:before {
  content: "\e908";
}

.ico-refresh:before {
  content: "\e909";
}

.ico-export:before {
  content: "\e90a";
}

.ico-config:before {
  content: "\e90b";
}

.ico-filter:before {
  content: "\e90c";
}

.ico-sort:before {
  content: "\e90d";
}

.ico-bin:before {
  content: "\e90e";
}

.ico-download:before {
  content: "\e90f";
}

:root {
  --color-black: #2A254D;
  --color-white: #FFFFFF;
  --color-grey: #F6F5F5;
  --color-grey-2: #cdcbd3;
  --color-grey-3: #697585;
  --color-grey-4: #f7f7f7;
  --color-red: #FF1327;
  --color-red-2: #FF6767;
  --color-blue: #1099FF;
  --color-blue-2: #3DACFF;
  --color-yellow: #FFBE67;
  --color-transparent: transparent;
  --font-family-noto-sans: "Noto Sans", sans-serif;
  --font-family-urbanist: "Urbanist", sans-serif;
  --font-size: .9rem;
  --font-size-sm: .7rem;
  --font-size-md: 1.4rem;
  --font-size-lg: 1.8rem;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --border-radius-7: 7px;
  --border-radius-10: 10px;
  --border-radius-20: 20px;
  --box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
  --box-shadow-2: 0px 4px 1px rgba(0,0,0,.03);
  --cubic-bezier-linear: cubic-bezier(.6,.03,.44,.89);
  --nav-width: 90px;
  --nav-top-sm: 200px;
  --button-width: 44px;
  --button-width-sm: 34px;
  --header-height: 70px;
}

.color-black {
  color: var(--color-black) !important;
}

.color-white {
  color: var(--color-white) !important;
}

.color-grey {
  color: var(--color-grey) !important;
}

.color-red {
  color: var(--color-red) !important;
}

.color-red-2 {
  color: var(--color-red-2) !important;
}

.color-blue {
  color: var(--color-blue) !important;
}

.color-blue-2 {
  color: var(--color-blue-2) !important;
}

.color-yellow {
  color: var(--color-yellow) !important;
}

.background-black {
  background-color: var(--color-black) !important;
}

.background-white {
  background-color: var(--color-white) !important;
}

.background-grey {
  background-color: var(--color-grey) !important;
}

.background-red {
  background-color: var(--color-red) !important;
}

.background-red-2 {
  background-color: var(--color-red-2) !important;
}

.background-blue {
  background-color: var(--color-blue) !important;
}

.background-blue-2 {
  background-color: var(--color-blue-2) !important;
}

.background-yellow {
  background-color: var(--color-yellow) !important;
}

@media (max-width: 992px) {
  .login .login-box {
    min-width: unset;
    padding: 35px 25px;
  }
}
@media (max-width: 768px) {
  .box-data .box-title .options {
    position: static;
    margin-top: 20px;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  nav {
    height: var(--header-height);
    width: 100%;
    padding: 5px 15px;
    flex-direction: initial;
  }
  nav .nav {
    margin: 0;
    position: fixed;
    top: var(--nav-top-sm);
    background: var(--color-black);
    left: 100vw;
    width: 100vw;
    height: calc(100vh - var(--nav-top-sm));
    overflow-y: auto;
  }
  .header {
    z-index: 1001;
    background-color: var(--color-transparent);
    pointer-events: none;
  }
  .header > div .data {
    pointer-events: fill;
    position: fixed;
    top: var(--header-height);
    left: 100vw;
    background-color: var(--color-black);
    color: var(--color-white);
    width: 100vw;
    height: calc((var(--nav-top-sm) - var(--header-height)) / 2);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header > div .data:nth-of-type(2) {
    top: calc(var(--header-height) + (var(--nav-top-sm) - var(--header-height)) / 2);
  }
  .header > div #nav-mob {
    display: inline-block;
  }
  .header > div .logout {
    pointer-events: fill;
  }
  main {
    margin-left: 0;
    padding-right: 15px;
    padding-left: 15px;
  }
}