/*
Skyheim App Stylesheet
Copyright (C) Skyheim AS, 2023. All rights reserved.
*/

@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600; src: local('Newsreader Semibold'), local('Newsreader-Semibold'), url('../fonts/Newsreader-SemiBold.ttf'); }
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 300; src: local('Mulish'), local('Mulish'), url('../fonts/Mulish-Regular.ttf'); }

/* branding */
.t-Login-title { font-family: Newsreader; font-size: 36px; margin-bottom: -40px; }
.t-MediaList-badge { background-color: #ffa200; color: white; }
.t-HeroRegion-title { font-family: Newsreader; }

/* make regions/reports tighter */
.t-Region-headerItems--title { padding: 1rem 1rem; }
.t-Report-cell, .t-Report-colHead { line-height: 1.2rem; }
.t-Comments-comment p { margin-top: 0px; margin-bottom: 5px; }

@media (max-width: 640px) {
  .t-Report-cell, .t-Report-colHead { line-height: 1.2rem; }
}

/* info regions */
.sh-heading { font-family: Newsreader; font-size: 36px; font-weight: bold; margin-top:0px; margin-bottom: 0px; }
.sh-subheading { font-size: 24px; font-weight: bold; }
.sh-description { clear: both; }
/* .sh-description p { font-size: 80%; } */
.sh-description p { font-size: 100%; }
.sh-remarks { background-color: rgba(255, 193, 7, 0.28); padding: 5px; border: 1px solid #cccccc; }
/* .sh-remarks p { font-size: 80%; line-height: 1.5rem; } */
.sh-remarks p { font-size: 100%; }
.sh-image { max-width: 400px; }
.sh-image-bordered { border: 1px solid #cccccc; }

.sh-link { margin-top: 25px; margin-bottom: 25px; }
.sh-linked-image { margin-top: 25px; margin-bottom: 25px; width: 100%; }
.sh-linked-video { margin-top: 25px; margin-bottom: 25px; }
.sh-linked-youtube { margin-top: 25px; margin-bottom: 25px; }
.sh-linked-vimeo { margin-top: 25px; margin-bottom: 25px; }

@media (max-width: 640px) {
  .sh-image { width: 100%; }
}

.sh-link { color: darkred; }
.sh-pre { font-family:lucida console, courier new, courier; }
dl.sh-name-value-list { margin-top: 0px; margin-bottom: 0px; }
.sh-name-value-list dt { font-size: 90%; color: #cccccc; font-weight: bold; }
.sh-name-value-list dd { font-size: 120%; margin-left: 0; padding-bottom: 2px; }

@media (min-width: 640px) {
  dl.sh-name-value-list { width: 100%; }
  .sh-name-value-list dt { font-size: 90%; color: #cccccc; font-weight: bold; float: left; width: 30%; white-space: nowrap; max-width: 250px; }
  .sh-name-value-list dd { font-size: 100%; margin-left: 0; padding-bottom: 2px; float: left; width: 70%; border-bottom: 1px dotted #eeeeee; }
}

/* show more toggle */
.sh-hide-content { overflow: hidden; line-height: 1em; max-height: 6em; }
.sh-show-content { line-height: 1em; height: auto; }
.sh-show-more { margin-top: 0px; margin-bottom: 10px; text-align: center; }
.sh-show-more a { color: #cccccc; padding: 5px; font-size: 80%; transition: color 0.5s, background-color 0.5s; }
.sh-show-more a:hover { background-color: #d3d3d3; color: white; }

/* pills */
.sh-pill { padding: 5px; white-space: nowrap; }
.sh-pill-full { display: block; width: 100%; }
.sh-pill-small { padding-left: 3px; padding-right: 3px; padding-top: 0px; padding-bottom: 1px; }

.sh-tag-pill { display: inline-block; border-radius: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; margin-right: 3px; margin-bottom: 3px; background-color: #eff0f1; color: #3b4045; white-space: nowrap; font-weight: bold; }

@media screen and (max-width: 640px) {
  .sh-tag-pill {
    font-size: 14px;
  }
}

/* status colors */
.sh-status-new { background-color: #666666; color: white; }
.sh-status-qualified { background-color: orange; color: white; }
.sh-status-tender { background-color: lightgreen; color: white; }
.sh-status-active { background-color: green; color: white; }
.sh-status-inactive { background-color: red; color: white; }
.sh-status-archived { background-color: pink; color: white; }

/* article display */
.sh-article-container { padding-top: 10px; padding-bottom: 10px; }
.sh-article-container .sh-heading { line-height: 1.2; }
.sh-article-content { padding-top: 10px; padding-bottom: 10px; }
.sh-article-metadata { padding-top: 10px; padding-bottom: 10px; }

.sh-article-list { width: 100%; overflow: hidden; column-count: 5; column-gap: 1.875em; column-fill: balance; /* "auto" does not work with FF */ }

@media screen and (max-width: 1200px) {
  .sh-article-list { column-count: 4; }
}

@media screen and (max-width: 960px) {
  .sh-article-list { column-count: 3; }
}

@media screen and (max-width: 640px) {
  .sh-article-list { column-count: 2; }
}

@media screen and (max-width: 480px) {
  .sh-article-list { column-count: 1; }
}

.sh-article-preview { border-radius: 4px; background-color: #ffffff; border: 1px solid #cccccc; box-shadow: 0 0 10px rgba(0,0,0,0.1); margin-bottom: 1.875em; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; }

.sh-article-preview p { margin-left: 10px; margin-right: 10px; margin-bottom: 10px; font-size: 14px; }

.sh-article-preview h4 { font-family: "newsreader";  margin-left: 10px; margin-right: 10px; }

/* todo list */

.sh-todo-item { cursor: pointer; }
.sh-todo-secondary-info { color: #cccccc; }
.sh-todo-title { font-size: 14px; font-weight: bold; }
.sh-todo-done .sh-todo-title { color: #9e9e9e; text-decoration: line-through; }


/* inspiration items */
.sh-inspiration-item {
  width:100%; padding: 10px; margin-bottom: 10px; max-width:200px; float: left;
}

.sh-inspiration-item h4 {
  font-family:newsreader; font-size:18px;
}

@media screen and (max-width: 640px) {
  .sh-inspiration-item {
    float: none;
    max-width: 100%;
  }
}

/* misc */

.sh-region-promote { background: linear-gradient(to bottom right, white, #ffe9c0); }



/* prevent zoom on input fields on mobile */

@media only screen and (max-width: 640px) {

  button, select, textarea, input { font-size: max(16px, 1em) !important; } 
  .sh-todo-item { font-size: 16px; font-weight: bold; }

}

/* disable various stuff to make mobile experience more native-like */

@media only screen and (max-width: 640px) {

    body {
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10+ */
        user-select: none;

        -webkit-tap-highlight-color: transparent;

        overscroll-behavior-y: none;
        overscroll-behavior-x: none;

        -webkit-touch-callout:none;

    }

}

/* remove ugly border around elements such as tabs */

:focus { outline: unset !important; }


/* adjustments to standard APEX theme */

.t-Region-title {
  font-weight: bold;
}

.t-Region--showIcon > .t-Region-header .t-Region-headerIcon {
  font-weight: bold;
}

.t-MediaList-title {
  font-weight: bold;
}

.t-Comments-comment { width: 100%; border-radius: 5px; }