/* Page-specific styles kept from ftgsMaster.css for the Bootstrap 5 site. Layout + Bootstrap 4 overrides removed;
   css/theme.css (loaded after this) sets the look. */
:root {
  --primary: #2d6cb5;
  --primaryActive: #3b80ce;
  --primaryFaded: #9aaabc;
  --secondary: #8d2b2e;
  --grey: #858796;
  --success: #79bd26;
  --pending: #ed9325;
  --bgColor: #cdd8e0;
  --warning: #db0000;
  --theme-cfs: #ff2b84;
  --theme-gmp: #f29e00;
  --theme-co: #5eb1cc;
  --theme-cgs: #92b926;
}

/*------------------------------------*/
/*------------------Brand Presets----*/
/*----------------------------------*/

.ftgs-blue {
  color: var(--primary) !important;
}
.ftgs-blue-bg {
  background-color: var(--primary) !important;
  color: rgba(2554, 255, 255, 0.9);
}

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

.warning {
  color: var(--warning);
}

/*---Status---*/
.status-approved {
  color: var(--success);
}
.status-pending {
  color: var(--pending);
}
.status-declined {
  color: var(--warning);
}
/*---Certificate Themes---*/

.cfs-bg {
  background-color: var(--theme-cfs) !important;
  color: rgba(255, 255, 255, 0.9);
}
.gmp-bg {
  background-color: var(--theme-gmp) !important;
  color: rgba(255, 255, 255, 0.9);
}
.coo-bg {
  background-color: var(--theme-co) !important;
  color: rgba(255, 255, 255, 0.9);
}

.cgs-bg {
  background-color: var(--theme-cgs) !important;
  color: rgba(255, 255, 255, 0.9);
}

/*---Custom Utillities---*/

html {
  height: 100% !important;
  width: 100% !important;
}

body {
  height: 100%;
  width: 100%;
  background-color: var(--bgColor);
}

/*ul li{
    list-style:none;
}

ul{
    padding:0;
}
*/

#wrapper #content-wrapper {
  overflow-x: unset;
}

.grid-v-center {
  align-self: center;
}

.grid-center {
  justify-self: center;
  align-self: center;
}
.self-v-center {
  align-self: center;
}

.hr-light {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

label.ft span::before {
  cursor: pointer;
}

a.moreInfo:hover,
a.moreInfo:active,
a.moreInfo:focus {
  text-decoration: none;
}

.table thead t,
.table td,
.table th {
  vertical-align: middle;
}

.round-table {
  border-radius: 5px;
  overflow: hidden;
  border-collapse: collapse;
}

.applications-tooltip .tooltip-inner {
  text-transform: capitalize;
}

/*-----Rotation-----*/
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.rotate {
  animation: rotation 5s infinite linear;
}

a,
.topbar.navbar-light .navbar-nav .nav-item .nav-link {
  color: var(--primary);
}

a:hover,
a:active,
a:focus,
.topbar.navbar-light .navbar-nav .nav-item .nav-link:hover,
.topbar.navbar-light .navbar-nav .nav-item .nav-link:active,
.topbar.navbar-light .navbar-nav .nav-item .nav-link:focus {
  color: var(--primaryActive);
}

/* [legacy.css] removed: old sidebar + top bar company status (see css/theme.css) */

/* [legacy.css] removed: old login page (login/login.css now) */

/* [legacy.css] removed: old top bar dropdown (see css/theme.css) */

/*---Architecture---*/

div.vc-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
div.vc {
  display: flex;
  min-width: 600px;
}

/* [legacy.css] removed: #content-wrapper background (see css/theme.css) */





div.selectedChamber {
  border: 3px solid var(--success);
  background-color: #f2fed2;
}

div.selectedChamber h3 {
  color: var(--success);
}

/*-----------------------------------------------------------------------*/
/*------------------------------CUSTOM INPUTS---------------------------*/
/*---------------------------------------------------------------------*/

/*--Hide Defaults---*/
label.ft input[type="radio"],
label.ft input[type="checkbox"] {
  display: none;
}

label.ft input[type="checkbox"] ~ span,
label.ft input[type="radio"] ~ span {
  transition: all 0.1s ease-out;
  cursor: pointer;
}
/*--Custom Input Before ICONS---*/
label.ft input[type="radio"] ~ span::before,
label.ft input[type="checkbox"] ~ span::before {
  font-family: "Material Design Icons";
  position: relative;
  font-size: 2em;
  top: 7px;
  left: 0px;
  margin-right: 0.25em;
}

/*--Custom Input SELECTED Color---*/
label.ft input[type="radio"]:checked ~ span,
label.ft input[type="radio"]:checked ~ span::before,
label.ft input[type="checkbox"]:checked ~ span,
label.ft input[type="checkbox"]:checked ~ span::before {
  color: var(--success);
}

/*-----------------------------------------------------------------------*/
/*------------------------------RADIOS----------------------------------*/
/*---------------------------------------------------------------------*/

/*---Unselected Radio---*/
label.ft input[type="radio"] ~ span::before {
  content: "\F0766";
}

/*----Radio Hover / Selected----*/
label.ft input[type="radio"]:checked ~ span::before {
  content: "\F05E0";
}

label.ft input[type="radio"]:disabled ~ span::before {
  color: var(--grey);
  content: "\F0376";
}

/*---Unselected Checkbox ---*/

label.ft input[type="checkbox"] ~ span::before {
  content: "\F0131";
}

/*---Checkbox Hover / Selected ---*/
label.ft input[type="checkbox"]:checked ~ span::before {
  content: "\F0132";
}

/*---Disabled Checkbox---*/

label.ft input[type="checkbox"]:disabled ~ * {
  color: var(--grey);
}

label.ft input[type="checkbox"]:disabled ~ span::before {
  color: var(--grey);
  content: "\F0375";
}




/*-----Inputs---------*/

/*--Specific- Mailing address + button-
.input-group>.custom-select:not(:first-child), .input-group>.form-control:not(:first-child){
border-top-left-radius:5px;
border-bottom-left-radius:5px;-
}*/



/*-----Select 2--------*/
.form-control,
input {
  background-color: #f8f8f8;
}

.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary);
}

.select2-container--default .select2-selection--single {
  border: 1px solid #fff;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: var(--grey);
  border: none;
  font-size: 1.5em;
  margin: 8px;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  margin-top: 7px;
}

/*---Select2 - MultiSelecta & Tags---*/

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  background-color: var(--primary);
  color: #fff !important;
  border: 0px solid #fff;

  color: #afafaf;
}

/*---Fixes weird widths on CC Form--*/
div.error {
  width: 100%;
}

/*---Datepicker---*/
.form-control:disabled,
.form-control[readonly] {
  background-color: #f8f8f8;
}

/*----Help Icons and Popovers and Drpopdowns---*/


.popover,
.popover-header {
  background-color: var(--primary);
  color: #fff !important;
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--primary);
}

/* [legacy.css] removed: Bootstrap 4 button colours (see css/theme.css) */

@keyframes heartbeat {
  from {
    transform: scale(1);
    transform-origin: center center;
    animation-timing-function: ease-out;
  }
  10% {
    transform: scale(0.91);
    animation-timing-function: ease-in;
  }
  17% {
    transform: scale(0.98);
    animation-timing-function: ease-out;
  }
  33% {
    transform: scale(0.87);
    animation-timing-function: ease-in;
  }
  45% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
}

/*---Badges----*/

.badge {
  padding-top: 5px;
}

/* [legacy.css] removed: badge-info override (see css/theme.css) */

[data-callback],
#products-table tr,
label.btn,
a.btn {
  cursor: pointer;
}

.productMenu a {
  font-weight: 300 !important;
  color: rgba(255, 255, 255, 0.75);
}

.productMenu a:hover,
.productMenu a:focus,
.productMenu a:active {
  color: rgba(255, 255, 255, 1);
}

.productMenu a,
.productMenu span {
  transition: all 1s;
}

@media only screen and (max-width: 424px) {
  .productMenu a,
  .productMenu span {
    font-size: 0.9em;
  }
}



/*---Certificate setup grid ---*/

.cert-setting-grid {
  display: grid;
  grid-template-columns: 180px 60px auto 80px;
  grid-template-rows: auto;
}

.csg-1 {
  grid-column: 1/5;
  grid-row: 1/2;
  max-width: 100%;
  border-bottom: 1px solid #e0e0e0;
}

.csg-2 {
  grid-column: 1/2;
  grid-row: 2/3;
}

.csg-3 {
  grid-column: 2/3;
  grid-row: 2/3;
}

.csg-4 {
  grid-column: 4/5;
  grid-row: 2/3;
}

.csg-5 {
  grid-column: 1/3;
  grid-row: 3/4;
}

.csg-6 {
  grid-column: 4/5;
  grid-row: 3/4;
}

.csg-7 {
  grid-column: 1/3;
  grid-row: 4/5;
}

.csg-8 {
  grid-column: 4/5;
  grid-row: 4/5;
}

.csg-space {
  grid-column: 3/4;
  grid-row: 1/3;
}

.csg-divider1 {
  grid-column: 1/5;
  grid-row: 2;
  border-bottom: 1px solid #e0e0e0;
  line-height: 4;
}

.csg-divider2 {
  grid-column: 1/5;
  grid-row: 3;
  border-bottom: 1px solid #e0e0e0;
}
.csg-divider3 {
  grid-column: 1/5;
  grid-row: 4;
  border-bottom: 1px solid #e0e0e0;
}

/*---Application List----*/

.dropdown-item:focus,
.dropdown-item:hover {
  background-color: var(--primary);
  color: #fff;
  transition: all 0.1s ease-in;
}

div#cert-menu-content {
  font-size: 1.5em;
}

ul#ft-applications li {
  border-radius: 5px;
  transition: all 0.5s;
}

ul#ft-applications li:hover {
  transform: translate(-10px);
}

/*---Company Profile Tab Sizing---*/

.nav-tabs {
  margin-bottom: -3px;
}





/*------ Ben Rules -----*/

div.alert.alert-danger {
  border-color: red !important;
}

.edit-button {
  position: absolute;
  top: 1em;
  right: 1em;
}
.position-relative {
  position: relative !important;
}

.modal-content {
  max-height: 90vh;
  overflow: auto;
}

#countriesOfOrigin ul {
  overflow: auto;
}

#countriesOfOrigin li span::before {
  font-family: "Material Design Icons";
  content: "\F0131";
  margin-right: 1em;
}

#countriesOfOrigin li.selected span::before {
  font-family: "Material Design Icons";
  content: "\F0132";
  margin-right: 1em;
  color: var(--primary);
}

select option:disabled {
  color: #d3d3d3;
  font-weight: bold;
}

.form-group.invalid input,
.form-group.invalid select {
  border: 1px solid red;
  background-color: #fff0f0 !important;
}

.form-group.invalid .form-text {
  color: red !important;
}

.text-capitalize {
  text-transform: capitalize;
}
.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.form-group .form-text {
  display: none;
}

.form-group.invalid .form-text {
  display: block;
}

/*-- seach box with icon === format
<div class='search-box form-inline'>
    <input type="search" class='form-control' placeholder=''/>
</div>
*/
.search-box {
  position: relative;
}
.search-box::before,
.search-box::after {
  font-family: "Material Design Icons";
  z-index: 99;
}
.search-box input {
  padding-left: 35px !important;
}
.search-box::before {
  content: "\F0349";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  pointer-events: none;
}

div.search {
  position: relative;
}
div.search div {
  position: absolute;
  top: 3px;
  left: 0;
  padding: 0.375rem 0.75rem;
}
div.search input {
  padding-left: 3rem;
}

/*================================================*/

div.coProductsTable {
  max-width: 95%;
  max-width: 95vw;
  overflow-x: scroll;
}

/*-- datatables, with child row --*/
tr.active {
  background-color: #2d6cb5 !important;
  color: #fff;
  font-weight: bold;
}

td.child {
  background-color: #cdd8e0;
  color: #000;
  padding: 0px;
}

/*----Typeography Media Queries---*/

h1,
h2,
h3 {
  transition: all 1s;
}

h5.summary {
  text-transform: uppercase;
  font-weight: 700;
  color: rgb(80, 80, 80);
}

/*----404 Page----*/

.four04text {
  font-size: 6em;
}
.s-bell {
  width: 100%;
  max-width: 200px;
}

.s-img {
  width: 100%;
  max-width: 1000px;
}

@media only screen and (max-width: 767px) {
  h1 {
    font-size: 1.7em;
  }
  h2 {
    font-size: 1.2em;
  }
  h3 {
    font-size: 1.1em;
  }
}

@media only screen and (min-width: 768px) {
  h1 {
    font-size: 1.8em;
  }
  h2 {
    font-size: 1.4em;
  }
  h3 {
    font-size: 1.3em;
  }
}

@media only screen and (min-width: 1200px) {
  h1 {
    font-size: 2.3em;
  }
  h2 {
    font-size: 1.7em;
  }
  h3 {
    font-size: 1.6em;
  }
}

/*--Footer--*/

/* [legacy.css] removed: sticky footer (see css/theme.css) */

/*---Extras---*/

.card-border {
  border: 3px solid rgba(36, 49, 61, 0.5);
}


.app-topnav {
  display: grid;
  grid-template-columns: auto 120px;
}

.stickyNav {
  position: relative;
  top: 0px;
  width: 100%;
}

.topbar {
  height: 50px;
}

.feature {
  background-color: rgba(248, 232, 129, 1);
}

.saved {
  background-color: rgba(228, 244, 221, 1);
}

div#countriesOfOrigin ul {
  max-height: 50vh;
  overflow: auto;
}

span.checkProduct::before {
  font-size: 30px;
}

table.dataTable tbody > tr > td {
  vertical-align: middle;
}

table.dataTable tbody > tr.selected,
table.dataTable tbody > tr > .selected {
  background-color: var(--primary) !important;
}

/*---Searchbar-*/
@media screen and (max-width: 767px) {
  div#productsTable_filter.dataTables_filter {
    margin-top: 15px !important;
  }
}

div#tr-Left-Collapse {
  background-color: var(--primary);
}

/*---Page Blocker---*/

#pageBlocker {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.75);
  position: fixed;
  top: 0;
  z-index: 999;
}

/*----Application List---*/
li.message .application-message,
li.message .application-view {
  display: inline-block !important;
}

li .status::before {
  font-family: "Material Design Icons";
  margin-right: 0.5em;
  font-size: 20px;
}

li.draft .status::before {
  font-family: "Material Design Icons";
  content: "\F03EB";
}

li.pending .status::before {
  font-family: "Material Design Icons";
  content: "\F051F";
  color: #ffa500;
}

li.approved .status::before {
  font-family: "Material Design Icons";
  content: "\F0791";
  color: #2e8b57;
}

li.declined .status::before {
  font-family: "Material Design Icons";
  content: "\F073A";
  color: #cc0000;
}

li.cancelled .status::before {
  font-family: "Material Design Icons";
  content: "\F006E";
  color: rgb(124, 0, 0);
}

/* application menu options */
.ft-menu a {
  font-size: 0.75em;
  display: none;
}

.ft-menu a::after {
  content: " |";
}

.ft-menu .application-copy,
.ft-menu .application-view,
li.draft .ft-menu .application-edit,
li.draft .ft-menu .application-delete,
li.approved .ft-menu .application-invoice,
li.approved.co .ft-menu .application-certificate,
li.approved .ft-menu .application-track,
li.pending .ft-menu .application-view,
li.pending .ft-menu .application-withdraw,
li.declined .ft-menu .application-edit {
  display: inline-block !important;
}

span.certificate {
  text-transform: uppercase;
}

/*---Application List (Messages)-*/

div.message {
  width: 75%;
  max-width: 400px;
}

/*---CO Application-------*/
#co-application .form-group .form-text {
  display: block !important;
}
tr.co-product:first-child .up,
tr.co-product:last-child .down {
  visibility: hidden;
}
#co-application .form-group .form-text {
  display: block !important;
}

/*---CO Products/Shipment---*/
.packageError {
  border: 1px solid red;
  background-color: #fff0f0 !important;
}

[contenteditable] {
  min-height: 2em;
}

/*----CFS / GMP Applications---*/
/*--CG Products--*/
#productsTable tbody tr td:first-child span::before {
  font-family: "Material Design Icons";
  content: "\F0131";
  cursor: pointer;
}

#productsTable tbody tr.selected td:first-child span::before {
  font-family: "Material Design Icons";
  content: "\F0132";
}

#editProductButton {
  position: absolute;
  right: 5px;
}

/*---Summary--*/

div.summaryGrid {
  display: grid;
  grid-template-columns: 250px auto;
  grid-template-rows: auto;
}
div.summaryGridRight {
  display: grid;
  grid-template-columns: auto 100px;
  grid-template-rows: auto;
}

#applicationProductList {
  column-count: 2;
  column-gap: 10px;
  column-rule: 1px solid lightgrey;
}

/*--Mailing Addresses--*/
.address.card,
.address.card .card-header {
  transition: all 0.5s;
}

.address.card.default {
  background-color: rgba(255, 215, 13, 0.2);
}
.address.card.default .card-header {
  background-color: rgba(255, 215, 13, 0.3);
}

.address.card.default .default-button {
  display: none;
}

.address.card .mdi-star {
  display: none;
}

.address.card.default .mdi-star {
  display: inline-block;
}


/*---Product Summary---*/

div#applicationProductList {
  max-height: 400px;
  overflow: auto;
}

/*-----Chamber Selection Grid----*/

.chamberLogo {
  max-height: 50px;
}

.popover {
  max-width: 600px; /* Max Width of the popover (depending on the container!) */
  max-height: 75% !important;
  overflow-y: auto;
}

/*---Messages---*/

li.application a {
  color: var(--primary);
}

.firstUseMenu a:hover {
  color: #fff !important;
}

#ft-applications a:hover,
#ft-applications a:focus,
#ft-applications a:active {
  color: var(--primaryActive);
}

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

.bg-info {
  background-color: var(--secondary) !important;
}

table.uploadTable td {
  min-width: 100px;
}

.nav-subHeading {
  margin-top: -5px;
  letter-spacing: 5px;
  margin-bottom: 0;
}

.navbar-light .navbar-toggler {
  border-color: rgba(0, 0, 0, 0);
}

/*-------------Ben---------------*/

.date::after {
  font-size: 75%;
  margin-left: 0.25em;
  color: white;
  padding: 0.25em 0.5em;
  border-radius: 3px;
}

.date.expDate::before {
  font-family: "Material Design Icons";
  margin-right: 5px;
  content: "\F00F4";
  color: var(--danger);
}

.date.expDate::after {
  content: "Expired";
  background-color: var(--danger);
}

.date.expDate.gracePeriod::before {
  font-family: "Material Design Icons";
  color: var(--pending);
  content: "\F00F0";
}

.date.expDate.gracePeriod::after {
  background-color: var(--pending);
  content: "Expired :: Within grace period";
}

/*---override text field glitch---*/
.error {
  font-size: 1rem;
  width: 100%;
  background-color: rgb(255, 240, 240);
}

.application.gs .ft-menu .application-copy,
.application.gs .ft-menu .application-certificate,
.application.gs .ft-menu .application-delete,
.application.gs .ft-menu .application-edit {
  display: none !important;
}

[contenteditable] {
  white-space: pre-wrap;
}

/*---- Company Manager ------*/
label.ft input[type="radio"]:disabled ~ span::before,
label.ft input[type="checkbox"]:disabled ~ span::before {
  color: rgb(109, 109, 109) !important;
}


#companies-table tr .archiveBadge,
#companies-table tr .defaultBadge {
  visibility: hidden;
}

#companies-table tr.archive .archiveBadge,
#companies-table tr.default .defaultBadge {
  visibility: visible;
}