/* Jalus alati ekraani allosas, kui sisu on lühike */
html {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.paevik .content-text {
  padding: 1.5em .5em;
}

body.paevik .arno-h1 {
  margin-bottom: 0px;
}

/* Keskmine paigutusala (layout-center konteiner) võtab kogu vaba ruumi päise ja jaluse vahel */
.layout-wrapper {
  flex: 1 1 auto;
}

/* Päeviku vaates (ja üldiselt), lase #layout-center plokil kasvada päise ja jaluse vahel */
body>#layout-center {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Päeviku vaates ärme keskenda sisu vertikaalselt; hoia see lehe alguses */
body.paevik #layout-center {
  justify-content: flex-start;
  width: calc(100% - 0px);
}

/* Päeviku vaates hoidkem konteiner täislaiuses ja tavapaigutuses */
body.paevik #layout-center .container {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 2%;
  padding-right: 2%;
}

/* Päeviku sisu vasakjoondus (väldi horisontaalset tsentreerimist) */
body.paevik #layout-center .content-text,
body.paevik #layout-center h1,
body.paevik #layout-center .arno-h1 {
  text-align: left;
}

.paevik-breadcrumbs {
  margin: 6px 0 14px 0;
  font-size: 0.95rem;
  color: #5a6872;
}

.paevik-breadcrumbs .crumb {
  display: inline-block;
  padding: 6px 10px 5px;
  margin: 2px 2px;
  border-radius: 20px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  color: #797979;
}

.paevik-breadcrumbs .crumb:hover {
  background: #e9e9ea;
  color: #131416;
}

.paevik-breadcrumbs .crumb.active {
  border-color: #d0d6dc;
  color: #131416;
  cursor: default;
}

.paevik-breadcrumbs .crumb.active:hover {
  background: none !important;
}

.paevik-crumb-sep {
  color: #a3afb8;
  font-size: .8rem;
  vertical-align: middle;
}

body.paevik .arno-h1 {
  margin-top: 0px;
  font-size: 1.1em;
}

#paevik-view {
  max-width: 1000px;
}

.paevik-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 40px;
}

.paevik-grid>button.paevik-tile {
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
}

button.paevik-laps-button {
  min-width: 300px !important;
  padding: 16px 16px 14px 16px !important;
  font-size: 1.1em !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 500;
  line-height: 20px;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
  background: white !important;
  color: #131416 !important;
}

button.paevik-laps-button:after {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23131416" role="presentation" aria-hidden="true" focusable="false"><title id="rightIconTitle">Right Icon</title><path fillrule="evenodd" cliprule="evenodd" d="M18.5858 11L13.2929 5.70706L14.7071 4.29285L22.4142 12L14.7071 19.7071L13.2929 18.2928L18.5858 13H2V11H18.5858Z" fill="%23131416"></path></svg>');
  margin-left: 20px;
  display: inline-flex;
  vertical-align: middle;
}

button.paevik-laps-button:hover:after {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23131416" role="presentation" aria-hidden="true" focusable="false"><title id="rightIconTitle">Right Icon</title><path fillrule="evenodd" cliprule="evenodd" d="M18.5858 11L13.2929 5.70706L14.7071 4.29285L22.4142 12L14.7071 19.7071L13.2929 18.2928L18.5858 13H2V11H18.5858Z" fill="%230072ce"></path></svg>');
  margin-left: 20px;
  display: inline-flex;
  vertical-align: middle;
}

button.paevik-laps-button:hover {
  color: #0072ce !important;
  border: 1px solid #ddd !important;
}

button.paevik-laps-button:focus {
  color: #131416 !important;
  border: 1px solid #ddd !important;
}

button.paevik-laps-button:focus:after {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23131416" role="presentation" aria-hidden="true" focusable="false"><title id="rightIconTitle">Right Icon</title><path fillrule="evenodd" cliprule="evenodd" d="M18.5858 11L13.2929 5.70706L14.7071 4.29285L22.4142 12L14.7071 19.7071L13.2929 18.2928L18.5858 13H2V11H18.5858Z" fill="%23131416"></path></svg>');
}

button.paevik-tile {
  background: #fff !important;
  border-radius: .5rem !important;
  border: .115rem solid #dcdfe0 !important;
  padding: 1rem;
  color: #131416 !important;
  font-weight: 400;
}

button.paevik-tile:hover,
button.paevik-tile:active,
button.paevik-tile:focus {
  background: #05427F !important;
  border-color: #05427F !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

button.paevik-tile:hover .fa-book-open:before,
button.paevik-tile:active .fa-book-open:before,
button.paevik-tile:focus .fa-book-open:before,
button.paevik-tile:hover .fa-paper-plane:before,
button.paevik-tile:active .fa-paper-plane:before,
button.paevik-tile:focus .fa-paper-plane:before,
button.paevik-tile:hover .fa-chart-line:before,
button.paevik-tile:active .fa-chart-line:before,
button.paevik-tile:focus .fa-chart-line:before,
button.paevik-tile:hover .fa-user-xmark:before,
button.paevik-tile:active .fa-user-xmark:before,
button.paevik-tile:focus .fa-user-xmark:before {
  filter: brightness(0) invert(1);
  background-color: transparent !important;
}

.paevik-tile-label {
  white-space: nowrap;
  font-size: 1.2rem;
}

.paevik-alam ul {
  margin-left: 1.5rem;
}

body.paevik .fa-book-open:before,
body.paevik .fa-paper-plane:before,
body.paevik .fa-chart-line:before,
body.paevik .fa-user-xmark:before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="58px" viewBox="0 -960 960 960" width="58px" fill="%230072ce"><path d="M252-306.67q51.38 0 100.02 11.84Q400.67-283 448-259.33v-416q-43.67-28-94.08-43t-101.92-15q-37.33 0-73.5 8.66Q142.33-716 106.67-702v421.33Q139-294 176.83-300.33q37.84-6.34 75.17-6.34Zm262.67 47.34q48-23.67 94.83-35.5 46.83-11.84 98.5-11.84 37.33 0 75.83 6t69.5 16.67v-418q-33.66-16-70.71-23.67-37.05-7.66-74.62-7.66-51.67 0-100.67 15t-92.66 43v416ZM481.33-160q-50-38-108.66-58.67Q314-239.33 252-239.33q-38.36 0-75.35 9.66-36.98 9.67-72.65 25-22.4 11-43.2-2.33Q40-220.33 40-245.33v-469.34q0-13.66 6.5-25.33Q53-751.67 66-758q43.33-21.33 90.26-31.67Q203.19-800 252-800q61.33 0 119.5 16.33 58.17 16.34 109.83 49.67 51-33.33 108.5-49.67Q647.33-800 708-800q48.58 0 95.29 10.33Q850-779.33 893.33-758q13 6.33 19.84 18 6.83 11.67 6.83 25.33v469.34q0 26.26-21.5 39.96t-43.17.7q-35-16-71.98-25.33-36.99-9.33-75.35-9.33-62 0-119.33 21-57.34 21-107.34 58.33Zm-204-330.67Z"/></svg>');
  background-color: #f0f3fd;
  height: 80px;
  display: flex;
  width: 69px;
  border-radius: 50%;
  align-items: center;
  align-content: center;
  text-align: center;
  padding-left: 11px;
  margin-bottom: 12px;
}

body.paevik .fa-paper-plane:before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="58px" viewBox="0 -960 960 960" width="58px" fill="%230072ce"><path d="M120-160v-640l760 320-760 320Zm66.67-102 520.66-218-520.66-220v158.67L428-480l-241.33 60v158Zm0 0v-438 438Z"/></svg>');
}

body.paevik .fa-chart-line:before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="58px" viewBox="0 -960 960 960" width="58px" fill="%230072ce"><path d="M318.67-418v-298.67h100V-418l-50-48.67-50 48.67Zm196 80.67V-880h100v442.67l-100 100Zm-392 112.66v-328h100v228l-100 100ZM120-118l250-250 146.67 128.67L766-488.67h-80v-66.66h194V-362h-66.67v-80l-294 294-146.66-128-158 158H120Z"/></svg>');
}

body.paevik .fa-user-xmark:before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="58px" viewBox="0 -960 960 960" width="58px" fill="%230072ce"><path d="M696-453.85 653.85-496l83.38-84-83.38-83L696-705.77l84 84 83-84L905.77-663l-83.62 83 83.62 84L863-453.85l-83-83-84 83Zm-336-38.46q-57.75 0-98.87-41.12Q220-574.56 220-632.31q0-57.75 41.13-98.87 41.12-41.13 98.87-41.13 57.75 0 98.87 41.13Q500-690.06 500-632.31q0 57.75-41.13 98.88-41.12 41.12-98.87 41.12ZM60-187.69v-88.93q0-29.38 15.96-54.42 15.96-25.04 42.66-38.5 59.3-29.07 119.65-43.61 60.35-14.54 121.73-14.54t121.73 14.54q60.35 14.54 119.65 43.61 26.7 13.46 42.66 38.5Q660-306 660-276.62v88.93H60Zm60-60h480v-28.93q0-12.15-7.04-22.5-7.04-10.34-19.11-16.88-51.7-25.46-105.42-38.58Q414.7-367.69 360-367.69q-54.7 0-108.43 13.11-53.72 13.12-105.42 38.58-12.07 6.54-19.11 16.88-7.04 10.35-7.04 22.5v28.93Zm240-304.62q33 0 56.5-23.5t23.5-56.5q0-33-23.5-56.5t-56.5-23.5q-33 0-56.5 23.5t-23.5 56.5q0 33 23.5 56.5t56.5 23.5Zm0-80Zm0 384.62Z"/></svg>');
}

.paevik-row {
  display: grid;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
}

.paevik-laps-row {
  margin-bottom: 10px;
}

.paevik-row-head {
  background: #f7f8fa;
  border: 1px solid #eceef0;
  border-radius: 6px 6px 0 0;
  padding: 12px;
  display: flex;
  justify-content: space-between;
}

.puudumised-pohjus {
  font-size: 1.1em;
}

.t-r-vaartus {
  font-weight: 500;
  font-size: 1.1em;
}

.t-r-tulemus {
  font-size: 1.1em;
}

.t-r-kp:before {
  content: url("data:image/svg+xml,%3Csvg%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%237c7bc4%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20clip-rule%3D%27evenodd%27%20d%3D%27M8%204H16V2H18V4H20C21.1046%204%2022%204.89543%2022%206V20C22%2021.1046%2021.1046%2022%2020%2022H4C2.89543%2022%202%2021.1046%202%2020V6C2%204.89543%202.89543%204%204%204H6V2H8V4ZM4%206H20V8H4V6ZM4%2010V20H20V10H4ZM9%2012V14H7V12H9ZM9%2018V16H7V18H9ZM11%2012H13V14H11V12ZM13%2016H11V18H13V16ZM17%2012V14H15V12H17ZM17%2018V16H15V18H17Z%27%20fill%3D%27%236DBB77%27/%3E%3C/svg%3E");
}

.puudumised-kp {
  white-space: nowrap;
}

.t-r-lisaja {
  color: #6a6868;
}

.t-r-lisaja:before {
  content: "Lisaja:";
  color: #6a6868;
  margin-right: 5px;
}

.paevik-alam-jaotis {
  background: #fff !important;
  border-radius: .5rem !important;
  border: .125rem solid #dcdfe0 !important;
  padding: 1rem;
  color: #131416 !important;
  font-weight: 400;
  margin-bottom: 10px;
}

button.paevik-nav-btn,
button.paevik-nav-btn:hover,
button.paevik-nav-btn:focus {
  background-color: transparent !important;
  color: #131416 !important;
  padding: 8px 0px 6px 0px !important;
  border: 0px !important;
  height: 32px;
  width: 32px;
}

button.paevik-nav-btn:hover,
button.paevik-nav-btn:focus {
  background-color: #e1e5e8 !important;
  box-shadow: none !important;
}

.paevik-header {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 20px;
}

.paevik-back-btn,
.paevik-back-btn:hover,
.paevik-back-btn:focus {
  width: 38px;
  padding-left: .7rem !important;
  margin-right: 10px;
  background-color: transparent !important;
  border: transparent !important;
  color: #131416 !important;
  font-size: 20px !important;
  margin-top: 0px !important;
}

.paevik-back-btn:hover,
.paevik-back-btn:focus {
  background-color: #e1e5e8 !important;
}

@media (max-width: 950px) {
  .paevik-tile-icon {
    font-size: 2em;
  }
}

@media (max-width: 767.98px) {
  /* Tables become horizontal scroll on small screens */
  .paevik-table {
    overflow-x: auto;
  }

  button.paevik-laps-button {
    width: 100% !important;
    padding: 20px !important;
  }

  body.paevik .user ul {
    right: 8px !important;
  }

  body.paevik .user ul li {
    font-size: 16px;
  }

  body.paevik .user .pais_kasutaja {
    display: flex;
    visibility: visible;
  }

  body.paevik .header-images {
    display: flex;
    align-items: center;
  }

  body.paevik .logo {
    padding-top: 0;
  }

  body.paevik .menu {
    flex-wrap: nowrap;
  }

  body.paevik .logo-image img {
    vertical-align: inherit;
  }

  body.paevik .pais_kasutaja span {
    display: none !important;
  }

  body.paevik .user .pais_kasutaja {
    padding: 0px 5px;
    cursor: pointer;
  }

  body.paevik .user-icon {
    margin-right: 0px;
  }

  .paevik-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 20px;
  }

  .paevik-tile-label {
    font-size: 1.2rem;
  }
  
}

@media (max-width: 480px) {
  .puudumised-kp:before,
  .t-r-kp:before {
    padding: 3px;
    margin-top: -5px;
  }
}