@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap");
	:root {
      --bg-deep: #0F1B2A;
      --gold: #E18830;
      --sunset: #F2B45B;
      --sea-grey: #6B7C82;
      --cream: #F6E2C8;
    }
    html, body {
      height: 100%;
      margin: 0;
      color: var(--sea-grey);
    }
	#bgimage {
	  position:fixed;	
	  top:-15%;
	  left:0px;
	  bottom:0px;
	  right:0px;
	  z-index:-1;
	  background: url('/accessories/images/shipbg1.jpg') no-repeat center center fixed;
      background-size: cover;
	  filter: grayscale(100%);
	  animation:slide 5s ease-in-out infinite alternate;
	  overflow:hidden;
	}
	

    /*
	header {
      background-color: rgba(27, 84, 124, 0.95);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
      padding: 0.5rem 2rem;
    }
    header h5 {
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--sunset);
    }
	header .me-2 { width: 100px;  }
    .nav-link {
      color: var(--cream) !important;
      font-weight: 500;
      transition: color 0.2s;
	  display:inline-flex;
    }
    .nav-link:hover {
      color: var(--gold) !important;
    }
	*/
	.main-wrapper { margin-top:8px; } 
    .filter-sidebar {
      background-color: rgba(255, 255, 255, 0.85);
      padding: 2rem 1rem;
      border-right: 1px solid var(--sea-grey);
      border-radius: 10px 10px 10px 10px;
    }
    .box-container {
      background-color: rgba(255, 255, 255, 0.85);
      padding: 2rem;
      height: auto;
      overflow-y: auto;
      border-radius: 10px;
    }	
    .table-container {
      background-color: rgba(255, 255, 255, 0.85);
      padding: 2rem;
      height: 100vh;
      overflow-y: auto;
	  overflow-x:hidden;
      border-radius: 10px;
    }
	
    .content-container {
      background-color: rgba(255, 255, 255, 0.85);
      padding: 2rem;
      height: 100vh;
      overflow-y: visible;
	  overflow-x:visible;
      border-radius: 10px;
    }	
	
	.table-responsive { overflow-x:hidden !important;}
    th.sortable {
      cursor: pointer;
      transition: background-color 0.2s;
    }
    th.sortable:hover {
      background-color: rgba(224, 143, 48, 0.15);
    }
    th.sortable.active {
      background-color: rgba(224, 143, 48, 0.25);
    }
    .sort-indicator {
      font-size: 0.75rem;
      margin-left: 4px;
      opacity: 0.6;
    }
    .table {
      border-radius: 10px;
      box-shadow: 0 0 8px rgba(15,27,42,0.2);
    }
    .table tbody tr:hover {
      background-color: rgba(224, 143, 48, 0.1);
    }
    .btn-outline-primary {
      border-color: var(--bg-deep);
      color: var(--bg-deep);
      transition: all 0.2s;
    }
    .btn-outline-primary:hover {
      background-color: var(--bg-deep);
      color: white;
    }
    .btn-outline-secondary {
      border-color: var(--sea-grey);
      color: var(--sea-grey);
    }
    .btn-outline-secondary:hover {
      background-color: var(--sea-grey);
      color: white;
    }
    footer {
      background: rgba(0, 0, 0, 0.9);
      padding: 1rem;
      text-align: center;
      color: var(--sunset);
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	  z-index:1030;
    }
	footer a { text-decoration:none; color: var(--sunset); }
	footer a:hover { color:white; }
	.btn-gold {
	  background-color: #E18830;
	  color: white;
	  border: none;
	  transition: background-color 0.3s ease;
	}
	.btn-gold:hover {
	  background-color: #cc731f;
	  color: white;
	}

	.btn-deep {
	  background-color: #0F1B2A;
	  color: white;
	  border: none;
	  transition: background-color 0.3s ease;
	}
	.btn-deep:hover {
	  background-color: #1c2e44;
	  color: white;
	}
	/* Breadcrumbs */
	.breadcrumb {
	  background-color: transparent;
	  padding-left: 0;
	  margin: 0;
	}
	.breadcrumb .breadcrumb-item a {
	  color: #0F1B2A;
	  text-decoration: none;
	  transition: color 0.2s;
	}
	.breadcrumb .breadcrumb-item a:hover {
	  color: #E18830;
	}
	.breadcrumb .breadcrumb-item.active {
	  color: #6B7C82;
	  font-weight: 500;
	}

	/* Paginator */
	.pagination a {
	  color: #0F1B2A;
	  border: 1px solid #0F1B2A;
	  background-color: transparent;
	  transition: background-color 0.2s, color 0.2s;
	}
	.pagination a:hover {
	  background-color: #0F1B2A;
	  color: white;
	}
	.pagination li.active a {
	  background-color: #0F1B2A;
	  border-color: #0F1B2A;
	  color: white;
	}	

	/* Paginator */
	div.dataTables_paginate  {
	  padding:0.25rem !important;
	  margin:0.25rem !important;
	
	}
	a.paginate_button {
	  color: #0F1B2A;
	  border: 1px solid #0F1B2A;
	  border-radius:5px;
	  background-color: transparent;
	  transition: background-color 0.2s, color 0.2s;
	  padding:0.25rem 0.5rem;
	  margin:0.25rem;
	  text-decoration:none;
	}
	a.paginate_button:hover {
	  background-color: #0F1B2A;
	  color: white;
	  cursor:pointer;
	}
	.dataTables_paginate a.current {
	  background-color: #0F1B2A;
	  border-color: #0F1B2A;
	  color: white;
	}

	.dataTables_length {
		display:flex;
		padding:0.5rem 0.25rem 0.5rem 0.25rem;
	}
	
	.header {
	  position: sticky;
	  top: 0;
	  left: 0;
	  right: 0;
	  background: rgba(0, 0, 0, 0.9);
	  color: #fff;
	  padding: 0 2rem;
	  box-shadow: 0 0 40px rgba(0, 0, 0, 0.03);
	  height: 6rem;
	  display: flex;
	  align-items: center;
	  gap: 3rem;
	  z-index:2000;
	}

	@keyframes logorotate {
	  25%   {transform: rotate(90deg);}
	  50%  {transform: rotate(0deg);}
	}

	.header .header__logo img { width:150px; }
	.header .header__logo img:hover { animation-name: logorotate; animation-duration: 4s; }
	.header .header__logo strong { font-size: 1.4rem; vertical-align: middle; }
	.navbar {
	  display: flex;
	  align-items: center;
	  height: 100%;
	  margin: 0 auto;
	  overflow: hidden;
	}
	.navbar__menu {
	  position: relative;
	  display: flex;
	}
	.navbar__item { list-style:none; }

	.navbar__link {
	  position: relative;
	  display: flex;
	  flex-direction: column;
	  gap: 0.6rem;
	  align-items: center;
	  /*justify-content: center;*/
	  height: 3.5rem;
	  width: 10rem;
	  color: #fff;
	  transition: 250ms ease all;
	  text-decoration: none;
	  width: 10rem;
	  text-transform: uppercase;
	  transition: 500ms ease all;
	}
	.navbar__link svg {
	  transition: 500ms ease all;
	}
	.navbar__link:hover { color: orange; }

	.navbar__link:hover svg {
	  stroke: #c4151c;
	}
	.navbar:not(:hover) .navbar__link:focus span, .navbar__link:hover span {
	  opacity: 1;
	  transform: translate(0);
	}
	.navbar__item:last-child:before {
	  content: "";
	  position: absolute;
	  left: -8rem;
	  margin-left: 5rem;
	  bottom: -1.25rem;
	  height: 0.5rem;
	  width: 2px;
	  background: #c4151c;
	  transition: 500ms ease all;
	}


	@media (min-width: 768px) {
	  .header {
		margin-top: 15px;
	  }
	}


	@media (max-width: 760px) {
		.main-wrapper { margin-top:15px; } 
	}

	@keyframes slide {
	  0% {
		transform:translateY(0%);
	  }
	  100% {
		transform:translateY(10%);
	  }
	}	

	.dataTables_paginate {
	  width: 100%;
	  text-align: center;
	}

	.nav-item a.active { color: #012c3c !important; }
    .modal { z-index: 5000; }
	
	.loader {
			display:none;
            position:absolute; left:0; top:0; bottom:0; right:0;
            height: 100vh; /* Full viewport height */
        }
        .loader div {
            position: absolute;
            top: 50%;
            width:100%;
			transform: translateY(-50%);
			text-align:center;
			
        }
	
   .btn-primary { color: white !important; background-color:#546f72; }
   .btn-primary:hover { color: white !important; background-color:orange; }
	
   .modal-title { text-transform:uppercase; }

   .main-wrapper a { color: #006c95; text-decoration:none; } 
   .main-wrapper a:hover { color: orange; }   
   
   .summary-table .row:hover { background: #eee; }
   
   .table-container nav { background-color: antiquewhite; padding:0.5rem; }
   .table-container h4 { margin:0.5rem 0; }
   
   .dataTables_length {}
   
   
   .table-container .tabrec:hover { background: #eee; }
   .table-container .ownerrec:hover { background: #eee; }
   .table-container .tblhead { background: #eee; }
   /*
   .table-container .tabrec:nth-child(even) {background: #CCC}
   .table-container .tabrec:nth-child(odd) {background: #FFF}
   */
   
   .fourblocks .card { height: 300px; width:200px;margin:0 auto; }
   .fourblocks .card:hover { background-color:#e3e3e4; }
   .fourblocks .card-body { width:100%; text-align: center; position:absolute; bottom:0; }
   .dataTables_info { padding:5px !important; }