﻿@charset "UTF-8";
/*.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}*/
html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

fieldset {
  margin-left: 2rem;
}
fieldset > legend {
  margin-left: -2rem;
}

.form-group {
  margin-bottom: 1rem;
}

.cursor-pointer {
  cursor: pointer;
}

.text-orange {
  color: darkorange;
}

.text-ports-terminals {
  color: var(--flow-ports-terminals) !important;
}

.icon-16 {
  height: 16px;
}

.icon-32 {
  height: 32px;
}

.icon-48 {
  height: 48px;
}

.hazard-markings {
  background: repeating-linear-gradient(45deg, yellow, yellow 10px, black 10px, black 20px);
}

.container-paneling {
  border: 8px solid #e6e6e6;
  border-top-width: 12px;
  border-bottom-width: 12px;
  /*background: repeating-linear-gradient(90deg, #d6d6d6, #d6d6d6 9px, #e0e0e0 9px, #e0e0e0 18px);*/
  /*blue: background: repeating-linear-gradient(90deg, #d6e6ff, #d6e6ff 9px, #dcecff 9px, #dcecff 18px);*/
  background: repeating-linear-gradient(90deg, #e6e6e6, #e6e6e6 9px, #ececec 9px, #ececec 18px);
}

.bg-gradient-dp-world {
  background: linear-gradient(180deg, var(--flow-purple-900), var(--flow-purple-700));
}

.bg-contrast {
  --flow-table-bg: var(--flow-contrast-bg);
}

.bg-dp-world {
  background-color: var(--flow-dp-world);
}

.bg-ports-terminals {
  background-color: var(--flow-ports-terminals);
}

.large {
  font-size: 1.2rem;
}

/*.policy-list {*/
/*list-style: none;*/
/*counter-reset: item;

    > li {
        counter-increment: item;

        &::marker {
            font-weight: 400;
            font-size: 2.75rem;
            font-family: var(--flow-font-sans-serif-wide);
        }
    }

    ol > li::marker {
        content: counters(list-item, ".") ". ";
    }
}*/
.dropdown.no-caret > .dropdown-toggle::after {
  display: none;
  margin-left: 0;
  vertical-align: 0;
  content: "";
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

@media (max-width: 575.98px) {
  .dropdown.no-xs-caret > .dropdown-toggle::after {
    display: none;
    margin-left: 0;
    vertical-align: 0;
    content: "";
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }
}
@media (max-width: 767.98px) {
  .dropdown.no-sm-caret > .dropdown-toggle::after {
    display: none;
    margin-left: 0;
    vertical-align: 0;
    content: "";
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }
}
@media (max-width: 991.98px) {
  .dropdown.no-md-caret > .dropdown-toggle::after {
    display: none;
    margin-left: 0;
    vertical-align: 0;
    content: "";
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }
}
@media (max-width: 1199.98px) {
  .dropdown.no-lg-caret > .dropdown-toggle::after {
    display: none;
    margin-left: 0;
    vertical-align: 0;
    content: "";
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }
}
@media (max-width: 1399.98px) {
  .dropdown.no-xl-caret > .dropdown-toggle::after {
    display: none;
    margin-left: 0;
    vertical-align: 0;
    content: "";
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }
}
.form-required {
  color: var(--flow-form-invalid-color);
}

.was-validated .invalid-border {
  border-color: var(--flow-form-invalid-color) !important;
}
.was-validated .valid-border {
  border-color: var(--flow-form-valid-color) !important;
}

.info-feedback,
.custom-feedback {
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
}

.info-feedback {
  color: var(--flow-info-text-emphasis);
}

.custom-feedback {
  display: none;
  color: var(--flow-form-invalid-color);
}

.was-validated .custom-feedback {
  display: block;
}

.train-wagon {
  display: flex;
  border: 1px solid #000;
  height: 1.2rem;
}
.train-wagon .wagon-container {
  border-right: 1px solid #fff;
}
.train-wagon .wagon-container .fill {
  background-color: var(--flow-purple-600);
  border: 3px solid transparent;
  height: 100%;
  text-align: center;
  font-size: 60%;
  line-height: 0;
  color: rgb(var(--flow-white-rgb));
}
.train-wagon .wagon-container .fill.empty {
  background: linear-gradient(to right, white, white), linear-gradient(to right, var(--flow-purple-600), var(--flow-purple-600));
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  color: rgb(var(--flow-black-rgb));
}
.train-wagon .wagon-container:last-of-type {
  border-right: 0;
}

.item-container,
.item-container-secondary {
  /*display:block;*/
  border: 1px solid var(--flow-border-color);
  box-shadow: 0 8px 8px rgba(var(--flow-dark-rgb), 0.04);
  transition: box-shadow cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
  min-height: 50px;
}

.item-container {
  border-left-width: 8px;
}
.item-container.item-container-hover {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
}
.item-container.item-container-hover:hover {
  /*border-color: var(--flow-secondary-color);*/
  box-shadow: 0 8px 48px rgba(var(--flow-dark-rgb), 0.16);
}

.item-container-secondary {
  border-left-width: 4px;
}
.item-container-secondary.item-container-hover {
  cursor: pointer;
}
.item-container-secondary.item-container-hover:hover {
  /*border-color: var(--flow-secondary-color);*/
  box-shadow: 0 8px 16px rgba(var(--flow-dark-rgb), 0.04);
}

.alert-secondary {
  --flow-alert-color: var(--flow-secondary-text-emphasis);
  --flow-alert-bg: var(--flow-secondary-bg-subtle);
  --flow-alert-border-color: var(--flow-secondary-border-subtle);
  --flow-alert-link-color: var(--flow-secondary-text-emphasis);
}

.alert-primary {
  --flow-alert-color: var(--flow-primary-text-emphasis);
  --flow-alert-bg: var(--flow-primary-bg-subtle);
  --flow-alert-border-color: var(--flow-primary-border-subtle);
  --flow-alert-link-color: var(--flow-primary-text-emphasis);
}

.alert-problem {
  /*--flow-alert-color: var(--flow-purple-700);*/
  --flow-alert-color: rgb(127.5, 70, 0);
  /*--flow-alert-bg: var(--flow-purple-300);*/
  --flow-alert-bg: #ffa333;
  /*--flow-alert-border-color: var(--flow-purple-500);*/
  --flow-alert-border-color: $problemOrange;
  --flow-alert-link-color: #995400;
}

.border-problem {
  /*border-color: var(--flow-purple-500);*/
  border-color: darkorange;
}

.bg-problem {
  background-color: darkorange;
}

.bg-contrast .btn-secondary {
  --flow-btn-bg: var(--flow-contrast-bg);
}

.btn-tertiary {
  min-width: 0;
}

.form-white .btn-tertiary {
  --flow-btn-bg: var(--flow-white);
}

.input-group .btn {
  min-width: 0;
}

.text-bg-secondary {
  color: #fff !important;
  background-color: rgba(var(--flow-secondary-rgb), var(--flow-bg-opacity, 1)) !important;
}

.text-bg-dp-world {
  color: #fff !important;
  background-color: var(--flow-dp-world) !important;
}

.elevate-floating-hover:hover {
  box-shadow: 0 8px 48px rgba(var(--flow-dark-rgb), 0.16);
  transition: box-shadow cubic-bezier(0.8, 0, 0.2, 1) 0.25s;
}

.elevate-raised-hover:hover {
  box-shadow: 0 8px 16px rgba(var(--flow-dark-rgb), 0.04);
}

.navbar-nav-expanded {
  --flow-nav-link-padding-x: .5rem;
  flex-direction: row;
}
.navbar-nav-expanded .dropdown-menu {
  position: absolute;
}

/*

.navbar-expand-md {
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.navbar-expand-md .navbar-nav .nav-link {
    padding-right: var(--flow-navbar-nav-link-padding-x);
    padding-left: var(--flow-navbar-nav-link-padding-x);
}

.navbar-expand-md .navbar-nav {
	flex-direction: row;
}

    --flow-nav-link-padding-x

 .navbar-expand-md .navbar-nav .dropdown-menu {
	position: absolute;
}

*/
.form-control,
.form-select {
  border-width: 0 0 1px 0;
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus,
.form-select.is-valid:focus,
.was-validated .form-select:valid:focus,
.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-select:invalid:focus {
  box-shadow: 0 0 0 0.25rem transparent !important;
}

.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"] {
  background-position: right 3rem center, center right 0.75rem;
}

.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"] {
  background-position: right 3rem center, center right 0.75rem;
}

.btn-danger {
  --flow-btn-color: #fff;
  --flow-btn-bg: #dc3545;
  --flow-btn-border-color: #dc3545;
  --flow-btn-hover-color: #fff;
  --flow-btn-hover-bg: #bb2d3b;
  --flow-btn-hover-border-color: #b02a37;
  --flow-btn-focus-shadow-rgb: 225,83,97;
  --flow-btn-active-color: #fff;
  --flow-btn-active-bg: #b02a37;
  --flow-btn-active-border-color: #a52834;
  --flow-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --flow-btn-disabled-color: #fff;
  --flow-btn-disabled-bg: #dc3545;
  --flow-btn-disabled-border-color: #dc3545;
}

.form-control::file-selector-button {
  padding: 0.75rem 6px;
  background-color: var(--flow-gray-300);
  border-color: var(--flow-gray-400);
  border-width: 1px;
  border-radius: 1px 0 0 1px;
  margin: 0 0.5rem -1rem 0;
}

.btn-outline-sq {
  --flow-btn-padding-x: 0.75rem;
  border: 1px solid var(--flow-gray-400);
  border-radius: 8px;
  min-width: 0;
}
.btn-outline-sq:hover {
  border-color: var(--flow-gray-500);
}

.form-select {
  border-color: #d5d5dd;
}
.form-select:focus {
  border-color: var(--flow-dark);
}

.btn-placeholder {
  padding: 0 1.25rem;
}

.doc-icon-placeholder {
  display: inline-block;
  width: 19.75px;
}

.tick-list {
  list-style: none;
  position: relative;
  font-size: 1.5rem;
  text-align: left;
  padding-left: 4rem;
}

.tick-list li:before {
  position: absolute;
  display: block;
  content: "•";
  left: 0;
  width: 36px;
  height: 32px;
  background-repeat: no-repeat;
  background-image: url("/img/flow/tick.svg");
  background-size: 32px 32px;
  background-position: 0.5rem 0.25rem;
  overflow: hidden;
  /*text-indent: -999999px;*/
  text-indent: 100%;
}

.iso-type-box {
  align-items: start;
  border: 4px solid var(--flow-gray-300);
  display: flex;
  flex-direction: column-reverse;
  height: 7.5rem;
  justify-content: end;
  margin-bottom: 1rem;
  padding: 1rem;
  text-decoration: none;
  width: 8rem;
}
.iso-type-box.active {
  border-color: var(--flow-purple-500);
  background-color: var(--flow-purple-100);
}

.accordion-item:has(> div.accordion-collapse.show).accordion-subtle {
  --flow-accordion-bg: var(--flow-body-bg);
}

.accordion-header button {
  text-transform: uppercase;
}
