/* Almost Aportio fonts */
body {
  font-family: "Ubuntu", "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 300;
}
h1, .h1 {
  font-family: "Ubuntu", Helvetica, Arial, sans-serif !important;
  font-weight: 600;
}
h2, .h2 {
  font-family: "Ubuntu", Helvetica, Arial, sans-serif !important;
  font-weight: 400;
}
h3, h4, h5, .h3, .h4, .sh5 {
  font-family: "Ubuntu", Helvetica, Arial, sans-serif !important;
  font-weight: 400;
}

.navbar a, .side-navbar a{
  font-family: "Ubuntu", Helvetica, Arial, sans-serif !important;
  font-weight: 400;
}
.navbar {
  width: 100vw;
}

.side-navbar {
  top: 45px;
  height: 100vh
}
.page {
  top: 45px;
}
.page-min-vh-100 {
  min-height: calc(100vh - 55px)
}
@media (min-width: 992px) {
  .side-navbar {
    top: 90px;
  }
  .page {
    top: 90px;
  }
  .page-min-vh-100 {
    min-height: calc(100vh - 60px) /* Foot height */
  }
}

a.nav-brand {
  width:60px;
  height:25px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media (min-width: 992px) {
  a.nav-brand {
    width:200px;
    height:70px;
  }
}

/** Style the sidebar to always be visible **/
@media (max-width: 1199px) {
  .page {
    width: calc(100vw - 70px);
  }
  .page.active {
    width: calc(100vw- 70px);
  }
  .page.active-sm {
    width: calc(100vw - 70px);
  }
  .side-navbar {
    left: 0;
    width: 70px;
  }
}

/* Drag and drop styling */
.draggable-row {
  cursor: move;
  user-select: none;
}
.dragging {
  border: 2px dashed #0099999d;
  filter: brightness(75%)
}

/* Allow icons to spin when HTMX request is in progress */
i.htmx-request {
  animation: fa-spin 2s infinite linear;
}
/* Darken the disabled colour for links */
li > a.btn-link.disabled {
  color: #bfbfbf;
}

/* Customise the collapse indicators */
.side-navbar ul li a[data-toggle="collapse"][aria-expanded="true"]::before {
  content: '\f13a';
}
.side-navbar ul li a[data-toggle="collapse"][aria-expanded="false"]::before {
  content: '\f138';
}
@media (max-width: 1199px) {
  .side-navbar ul li a[data-toggle="collapse"][aria-expanded="true"]::before {
    content: '\f13a';
  }
  .side-navbar ul li a[data-toggle="collapse"][aria-expanded="false"]::before {
    content: '\f138';
  }
}
.side-navbar i {
  font-size: initial;
}
.side-navbar.shrink {
  text-align: initial;
}

/* Aportio colours */
.text-aportio {
  color: #009999;
}
.navbar-light .navbar-nav .nav-link {
  color: #009999 !important;
}
.navbar-light .navbar-nav .nav-link:hover:not(.disabled) {
  filter: brightness(120%) saturate(140%);
}
.side-navbar {
  background: #009999;
}
.bg-aportio {
  /* background: #009999 !important; */
  background: white !important  ;
}
.side-navbar a {
  background: #009999 !important;
}
.side-navbar li a {
  font-weight: 500;
}
.side-navbar li a:hover
{
  background: #004d71 !important;
}
.side-navbar li a[aria-expanded="true"] {
  background: #004d71 !important;
}
.side-navbar li ul.collapse a {
  border-left-color: #f7a700;
  background: #0099999d !important;
}
#collapseIndicator {
  font-size: 2em !important;
}

/* override colours in cards */
.card:not([class*="text"]) p,
.card p,
.card th,
.card td,
.card label {
  color: rgb(33,37,41);
}

/* Styling for the 'logout' link in the navbar */
a.nav-link-logout {
    font-style:italic;
}

div.navbar-indent {
    padding-left: 1.5rem;
}

.navbar-unmargin {
    margin-right: 0;
}

.navbar-repad {
    padding-left: 0rem;
    padding-right: 0rem;
    padding-top: 0rem;
    padding-bottom: 0.5rem;
}

/* Styling for table-like striped rows */
.row-striped .row:nth-of-type(odd) {
  background-color: rgba(0,0,0,.05);
}

/* Use this when you want to control which element has the strip applied */
.striped .stripe:nth-of-type(odd) {
  background-color: rgba(0,0,0,.05);
}

/* Styling for the 'forgot password' link */
a.forgot_password {
    font-size: 0.8em;
}

/* Placeholder colour change */

/* normal text inputs  */
input:-moz-placeholder { /* Firefox 18- */
    color: #D3D3D3 !important;
}

input::-moz-placeholder {  /* Firefox 19+ */
    color: #D3D3D3 !important;
}

input:-ms-input-placeholder {
    color: #D3D3D3 !important;
}

input::-webkit-input-placeholder {
    color: #D3D3D3 !important;
}

/* normal textareas  */
textarea:-moz-placeholder { /* Firefox 18- */
    color: #D3D3D3 !important;
}

textarea::-moz-placeholder {  /* Firefox 19+ */
    color: #D3D3D3 !important;
}

textarea:-ms-input-placeholder {
    color: #D3D3D3 !important;
}

textarea::-webkit-input-placeholder {
    color: #D3D3D3 !important;
}

/* Styling for the 'welcome' box shown on top of the user profile form when a
 * new account is created.
 */
.welcome-box {
    border:1px solid #333;
    background-color:#ddd;
    padding:1em;
}

.speech-bubble {
    float:            left;
    padding:          0.5rem 1.5rem;
    margin-left:      1rem;
    /* background-color: #40c7d4; */
    background-color: #f8f8f8;
    border:           1px solid #c8c8c8;
    border-radius:    1.5rem;
    word-wrap:        break-word;
    text-align:       left;
    /* max-width:        70%; */
    margin-bottom:    1rem;
    /*font-size:        1rem; */
}

.warning {
    background-color: #f8d7da !important;
}
.changelog li {
  margin-bottom: 2px;
}

/* Styling for Form Preamble */

hr {
    border-top: 1px solid #999 !important;
}

div.form-preamble {
    height: 3rem;
    border: 1px;
    transition: height ease 1s;
    overflow-y: auto;
    font-size: 1.0rem
}

div.form-static-preamble {
    border: 1px;
    overflow-y: auto;
    font-size: 1.0rem
}

div.form-preamble > h1 {
    font-size: 1.7rem
}

div.form-preamble > h2 {
    font-size: 1.5rem
}

div.form-preamble > h3 {
    font-size: 1.3rem
}

div.form-preamble > h4 {
    font-size: 1.1rem
}

/* Styling for ToS in account creation form */

div.tos-box {
    padding:1em;
    border:1px solid #ccc;
    background-color:white;
    transition: height ease 1s;
    overflow-y: scroll;
}

/* Styling for 'contact info' */

a {
    color: #28a5b1;
}

a:hover{
    color: #004d71;
}

.btn-try-again {
    margin-left: 1rem;
}

.btn-cancel {
    margin-left: 1rem;
    background-color: #c3c3c3;
    border-color: #a3a3a3;
}

.btn-cancel:hover {
    background-color: #A9A9A9 !important;
}

.btn-primary {
  background-color: #28a5b1;
  border-color: #28a5b1;
}
.btn-link {
  color: #28a5b1;
}
.btn-link:hover {
  background-color: #004d71;
  color: white;
}
.btn:hover {
    background-color: #004d71;
}
button {
  white-space: normal !important;
}

.btn {
  border-radius: 2rem !important;
}

a.btn {
  white-space: normal !important;
}

.logo-image-container {
    height:       40px;
    width:        130px;
    line-height:  40px;
}

.logo-image-container > img {
    height:         auto;
    width:          auto;
    max-height:     40px;
    max-width:      130px;
    vertical-align: middle;
}

.avatar-image {
    height:       auto;
    width:        auto;
    max-height:   3.5em;
    /* max-width:    3.5em; */
    margin-top:   0.5rem;
    margin-bottom:1rem;
    float:        left;
}

.avatar-image-container > img {
    height:       auto;
    width:        auto;
    max-width:    3.5em;
    max-height:   3.5em;
}

.avatar-greeting-container {
    padding-top: 0.5em;
    font-style:italic;
}

.form-title-text {
    padding-top: 0.5rem;
    font-style:italic;
    font-size: 1.2rem;
}

.form-util-btn {
    font-style: normal !important;
}

.form-util-btn-lower {
    margin-top: 0.5rem;
    margin-right: 0;
    font-style: normal !important;
}

.page-footer {
    font-size: 0.85rem;
}

.footer-copyright {
    font-size: 0.8rem;
}
/* Font styling for different screen sizes */
/*
Extra small devices (portrait phones, less than 544px)
No media query since this is the default in Bootstrap because it is "mobile first"
*/
html {
    font-size:12px !important;
}
body {
    font-size:12px !important;
}
.form-control {
    font-size:1rem;
} /* Placeholder text size */

.btn {
    font-size: 1rem !important;
}
h4 {
    font-size: 1.5rem;
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {
    html{font-size:12px !important;} /*1rem = 12px*/
    body{font-size:12px !important;} /*1rem = 12px*/
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    html{font-size:12px !important;} /*1rem = 12px*/
    body{font-size:12px !important;} /*1rem = 12px*/
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    html{font-size:13px !important;} /*1rem = 13px*/
    body{font-size:13px !important;} /*1rem = 13px*/
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    html{font-size:13px !important;} /*1rem = 13px*/
    body{font-size:13px !important;} /*1rem = 13px*/
}

@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: calc(100vw - 300px);
  }
}

/* Styling for fallback button  */
.fallback-btn-wrapper {
    float: right;
}
/* Styling for form content */

.form-content {
    background-color: #F2F2F2;
    border-style: solid;
    border-width: 1px;
    border-radius: 1rem;
    border-color: #c2c2c2;
    margin-bottom: 1rem;
}

.form-content-inner {
    margin: 0.5rem;
}

/* Styling for debug info */

div.debug-text {
    background-color:#ffd;
    padding:1em;
    border:1px dashed #444;
}

div.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    opacity: 0.9;
    background: white;
    width:220px;
    height:220px;
    vertical-align: middle;
    text-align: center;
    border-radius: 25px;
    border:2px solid #999;
}

div.spinner_wait_text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    opacity: 0.9;
    background: white;
    width:360px;
    height:300px;
    vertical-align: middle;
    text-align: center;
    border-radius: 25px;
    border:2px solid #999;
}

span.wait_text {
    font-weight: bold;
}

div.spinner_inner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    vertical-align: middle;
    width:90%;
    text-align: center;
}


.spinner > img {
    margin: 0;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    position:absolute;
    transform: translate(-50%, -50%);
}

/* Styling needed for date-picker */
.input-group-addon {
    color: #555;
    padding-right: 0.4rem;
    padding-left: 0.4rem;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-left-width: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

/* Styling needed for date-picker */
.glyphicon {
    top: -1px !important;
}

/* Styling needed for date-picker */
.date {
    width:21rem;
}

.search-results > .list-group > .list-group-item > a > h5 {
    font-size: 1.1rem !important;
    color: #00a;
}

.search-results > .list-group > .list-group-item > a > p {
    font-size: 1rem !important;
}

.admin-panel {
    background-color: #fdd;
}

/** Suppress green ticks in valid bootstrap form controls **/
.form-control.is-valid {
  background-image: none;
}

/** Make it appear the collapse checvorn icon is changing **/
a.collapse-icon-toggle[aria-expanded=true] .fa-chevron-right,  a.collapse-icon-toggle[aria-expanded=true] .fa-chevron-left {
  display: none;
}
a.collapse-icon-toggle[aria-expanded=false] .fa-chevron-down {
  display: none;
}