@font-face {
  font-family: 'Agency FB';
  src: url("../fonts/AGENCYB.020c04e68a28.woff") format('woff');
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.05rem !important;
}
/*@import url('https://fonts.cdnfonts.com/css/agency-fb');*/

a:link { color: #3f97e1; }
a:visited { color: #1a486e; }
a:focus, a:hover { color: #686868; }

h1{
font-family: "Montserrat", sans-serif !important;
font-size: 28px !important;
padding-top: 15px !important;
letter-spacing: 0.05rem !important;
}

h2{
font-family: "Montserrat", sans-serif !important;
font-size: 24px !important;
letter-spacing: 0.05rem !important;
}

h3{
font-family: "Agency FB", sans-serif !important;
letter-spacing: 0.05rem !important;
}

h4{
font-family: "Agency FB", sans-serif !important;
letter-spacing: 0.05rem !important;
}
    
h5{
font-family: 'Agency FB', sans-serif !important;
font-size: 18px !important;
letter-spacing: 0.05rem !important;
}

h6{
font-family: 'Agency FB', sans-serif !important;
font-size: 20px !important;
letter-spacing: 0.05rem !important;
}

html,body{
overflow-x: clip;
}

/* Add spacing for DataTables search label */
.dataTables_filter label {
display: inline-flex;
justify-content: flex-end;
gap: 10px;
}

.dataTables_info{
font-family: 'Agency FB', sans-serif !important;
font-size: small;
color:#fff !important;
letter-spacing: 0.05rem !important;
}

.dataTables_paginate {
  justify-content: center;
  font-family: 'Agency FB', sans-serif !important;
  letter-spacing: 0.05rem !important;
  font-size: medium; 
}

label {
  color:#fff;
  font-family: 'Agency FB', sans-serif !important;
  letter-spacing: 0.05rem !important;
  font-size: 1.05em;
}

table.dataTable tbody{
color: #fff; 
background-color: #454547;    
}

table.dataTable tr:nth-child(odd),
table tr:nth-child(odd) {
  background-color: #3c3c3e; /* Darker gray */
}

table.dataTable tr:nth-child(even),
table tr:nth-child(even) {
  background-color: #454547; /* Light gray */
}

tbody{
color:  #fff;
background-color:#454547;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);  
}

th{
vertical-align: middle !important;
text-transform: uppercase !important;
border: none !important;
background:#2b6e9a !important; 
color: #fff !important; 
font-family: 'Agency FB', sans-serif !important;
letter-spacing: 0.05rem !important;
font-size: medium;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);
}   

table.dataTable th{
vertical-align: middle !important;
text-transform: uppercase !important;
border: none !important;
background:#2b6e9a !important; 
color: #fff !important; 
font-family: 'Agency FB', sans-serif !important;
letter-spacing: 0.05rem !important;
font-size: 1.15em !important;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.75);
}   

.dataTables_filter  {
  font-family: 'Agency FB', sans-serif !important;
  letter-spacing: 0.05rem !important;
  font-size: medium;
  font-style: bold;  
}

table.dataTable td{ vertical-align: middle !important; font-family: "Montserrat", sans-serif !important; }
td{ border: none !important; vertical-align: middle !important; font-family: "Montserrat", sans-serif !important;}

tr.child:nth-child(2) > td:nth-child(1) > ul:nth-child(1) {
  color: #fff;
}

.select2-container .select2-selection__rendered {
  color: #000;
}

.bg--dark:not(.nav-bar):not(.bar) span.select2-selection__rendered {
  color: #000;
}

.page-item.active .page-link {
  background-color: lightgrey !important;
}
.page-link {
  color: black !important;
}

.main-container {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

input.modal-content{
 color: #000 !important;
}

.row {
padding-top: 25px;
padding-bottom: 25px;
}

.input-checkbox label {
border: #025CA6 1px solid;
}

.form-check-label {
border: #025CA6;
}

input.form-control, input.form-control:focus{
  
  padding: 5px !important;
  height: 30% !important;
}

label.form-control-sm{
  font-size: 3em;
}

input[type="submit"] {
background: none;
outline: none;
border: none;
background-color: #025CA6;
padding: 0.46428571em 2.78571429em 0.46428571em 2.78571429em;
color: #fff;
}

input[type="submit"]:hover {
background-color: #004675;
}

input{
text-align: center !important;
height: 42px !important;
}
  
.bg-footer {
bottom: 0;
justify-content: center;
background-color: #090909;
color: white;
background-image: url("../img/bottom_footerbar.6974617d0af0.png");
background-repeat: repeat-x;    
width: 100%;
height: 100%;
}

.logo-offset{ 
margin-left: 16px;
}

.footer-company-link{
padding-bottom: 8px;
margin: 0;
font-size: small;
text-decoration: none;
}

footer:not(.bg--primary):not(.bg--dark) a {
color: white;
}

footer:not(.bg--primary):not(.bg--dark) a:hover {
color: #3f97e1;
text-decoration: none;
}

.login-mod{
min-height: calc(100vh - 190px);
display: flex;
flex-flow: column;
justify-content: space-around;  
}

.account-mod {
display: flex;
min-height: calc(100vh - 190px);
flex-direction: column;
background-color: rgba(0,0,0,.7);
border-style: solid;
border-top: none;
border-bottom: none;
border-width: 3px;
border-color: #242424;       
}

.card-2{ 
border-radius: 15px 15px 15px 15px !important;
border-width: 3px !important;
border-color: #454547 !important;
background-color: #454547 !important;
}

.card-box {
width: 100%;
max-width: 600px;;
height: 26.297rem;
justify-self: center;
}

.fuel-card-container {
aspect-ratio: 41.704 / 26.297;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 16px;

}

.fuel-card-text {
color: #ffffff;
font-size: 20px;
font-weight: 450;
padding-top: 7.5px;
padding-left: 3%;
letter-spacing: 0.075em;
text-transform: uppercase !important; 
font-family: 'Agency FB', sans-serif !important;
letter-spacing: 0.05rem !important;
}

.number-selector {
display: flex !important;
justify-content: center !important;
width: auto;
margin: auto;
}

.max-limit {
text-align: center;
align-content: center;
width: 39px !important;
height: 42px !important;
color: #fff;
border: solid;
border-width: 2px;
border-color: #3f97e1;
border-radius: 4px;
font-size: 14px;
}

.number-font {
width: 36px !important;
color: #000;
font-size: 13px;
text-align: center !important;
padding: 0px !important;
}

.carousel-inner {
box-shadow: 0px 0px 2px 2px rgba(20, 20, 20, 0.367);
position: relative;
border-width: 2px;
border-radius: 14px;
width: 90% !important;
margin: 0 auto !important;
}

.carousel-inner-1 {
position: relative;
width: 100%;
overflow: visible;
margin: 15px;
}

ul.carousel-indicators {

margin: 10px;

}

ul.carousel-indicators li, ul.carousel-indicators li.active {
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
border: 0;
background: transparent;
}

ul.carousel-indicators li {
background: rgba(255,255,255,0.39);
}

ul.carousel-indicators li.active {
background: orange;
width: 0.75rem;
height: 0.75rem;
margin: auto;
margin-left: 9px;
margin-right: 9px;
}

.back-button{
height: 15px; 
width: 60px;
}

.background-image-account {
position: fixed;
background-size: contain !important; 
z-index: -1;
}

.formbox {    
background-color: rgba(0,0,0,.8);
border-style: solid;
border-color: #11426c;
border-radius: 15px;
margin-left: 10px;
margin-right: 10px;  
}

.dashbox {   
background-color: rgba(0,0,0,.5);
border-style: solid;
border-top: none;
border-bottom: none;
border-width: 3px;
border-color: #242424;
display: flex;
min-height: 100vh;
flex-direction: column;        
}

.navbar-toggler { border:0px !important; }

.dropnav{
background-color: rgba(0,0,0,.5);
border: solid;
border-color: #242424;
border-width: 3px;
border-top: none;
border-bottom: none;
text-align: right;
}

.pad-nav-bottom{
padding-bottom: 16px;
}

.dashnav {   
background-color: rgba(0,0,0,0);
background-image: url("../img/top_navbar.1d05ac74286c.png");    
background-repeat: repeat-x;
text-align: center;
border: none;
min-height: 80px;
width: 100%;
z-index: 2;
} 

.topnav {   
position: sticky;
background-color: #002238;
background-image: url("../img/top_navbar.1d05ac74286c.png");    
background-repeat: repeat-x;
text-align: center;
min-height: 80px;
width: 100%;
z-index: 5;
padding: 0;
margin: 0;
}  

.topnav a{          
color: #f2f2f2;    
text-decoration: none;
font-size: 12px;    
}

.topnav a:hover{    
color: rgb(37, 49, 68);
}

.topnav a:active{
background-color: #535353;
color: #3f97e1;
}

.topnav text{
color:white
}

.page-spacer{
height: 256px;
}
.page-spacer-s{
height: 128px;
}
.page-spacer-xs{
height: 64px;
}
.page-spacer-xxs{
height: 32px;
}
.page-spacer-ss{
  height: 16px;
}

.page-spacer-ssm{
  height: 12px;
}

.page-spacer-xss{
  height: 8px;
}

.form-color{
color: #fff;
}

.form-style{
border-radius: 20px; 
background: linear-gradient(to bottom, rgba(62, 72, 81, 0.3), rgba(164, 185, 222, 0.3)); 
border: 3px solid #0c325a; 
padding: 1em;
}

.header-highlight{
box-shadow: 0px 0px 1px 1px rgba(7, 7, 7, 0.37);
border-width: 1px;
border: solid;
background-image: linear-gradient(rgba(54, 57, 58, 0.826), rgba(99, 107, 113, 0.8));
border-image-slice: 1;
border-image-source: linear-gradient(to bottom, rgb(94, 105, 114), rgba(102, 108, 113, 0.8));  
padding-top: 5px;
padding-bottom: 5px;  
text-align: center;
color: #fff;
font-family: "Montserrat", sans-serif;
font-size: 22px;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.75);
}

.dash-highlight{    
border-width: 1px;
border: solid;
background-image: linear-gradient(rgba(32, 32, 33, 0.826), rgba(65, 70, 74, 0.8));
border-image-slice: 1;
border-image-source: linear-gradient(to bottom, rgb(94, 105, 114), rgba(102, 108, 113, 0.8));
text-align: center;
color: #fff;
font-family: "Montserrat", sans-serif;
font-size: 1.35em;
font-weight: 500;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.75);
}

.orange-border-box{    
border-width: 3px;
border-style: ridge;
border-color: #ffae0092;
text-align: center;
justify-content: center;
color: #fff;
background-image: linear-gradient(rgba(32, 32, 33, 0.826), rgba(65, 70, 74, 0.8));
border-image-slice: 1;
border-image-source: linear-gradient(to bottom, rgb(255, 180, 31, 0.8), rgba(106, 81, 0));
font-family: 'Agency FB', sans-serif;
letter-spacing: 0.05rem !important;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.75);
padding-top: 12px;
padding-bottom: 12px;
font-size: 1.1em;
}

.asteriskField {
color: #f5b11d;
}

.reduce-spacing{
padding-top: 0; 
padding-bottom: 0;
}

.reduce-padding-right{
padding-right: 0 !important;
}

.reduce-padding-left{
padding-left: 0 !important;
}

.add-spacing{
padding-top: 5; 
padding-bottom: 5;
}

.top-header{
color: #fff;
text-align: center; 
padding-top: 10px;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.75);
}

.bg-mod{
z-index: -1; 
background-size: contain; 
position: fixed;
}

.error-tablestyle{
border-radius: 20px; 
background: linear-gradient(to bottom, rgba(62, 81, 81, 0.3), rgba(222, 203, 164, 0.3)); 
border: 3px solid #6c757d; 
padding: 1em;
}

.dot {
font-size: 0;
height: 15px;
width: 15px;
background-color: #bbb;
border-radius: 50%;  
}


.map-style{

border-style: none; 

}

.tab-body{
border-radius: 0px 5px 5px 5px;    
border-width: 0px;
border: none;
background-color: #313131;
border-color: rgba(0,0,0,0);
padding-top: 10px;
padding-bottom: 10px;
color: #fff;
padding-left: 10px;
padding-right: 10px;
}

.spinner-position{
  position: absolute; 
  top: 0; left: 0; right: 0; bottom: 0; 
  background-color: rgba(255,255,255,0.4); 
  display: none; 
  justify-content: center; 
  align-items: center; 
  z-index: 1000;
  border-radius: 7px;
}

.custom-spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: #000;
  animation: spin 1s ease infinite;
}

.custom-font-header{
font-family: "Montserrat", sans-serif !important;
}

.custom-font-paragraph{
font-family: 'Agency FB', sans-serif !important;
letter-spacing: 0.05rem !important;
font-size: 1.1rem;
color: #fff;
}

.m-align{
text-align: left;
}

.m-adjustpopup{
width: 93%;
padding-left: 60px;
padding-bottom: 0px;
}

.dropnav-line{
border-image: linear-gradient(to right, #3f98e100 0%, #3f97e1 100%) 1;
border-style: solid;
border-width: 1px;
width: 40%;
margin-left: auto; 
margin-right: 0;
}

.drop-display{
display: flex;
padding-right:  12px;
justify-content: end;
}

.btn-mod,
.btn-mod:link,
.btn-mod:visited,
.btn-mod:hover,
.btn-mod:active{
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);  
box-shadow: 0px 0px 1px 1px rgba(20, 20, 20, 0.37);
padding-top: 5px; 
padding-bottom: 5px;
font-size: large;
font-family: 'Agency FB', sans-serif !important;
text-transform: uppercase;
width: 100%;
height: auto;
color: white !important;
letter-spacing: 0.05rem !important;
}

.btn-mod-table,
.btn-mod-table:link,
.btn-mod-table:visited,
.btn-mod-table:hover,
.btn-mod-table:active{
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75); 
box-shadow: 0px 0px 1px 1px rgba(20, 20, 20, 0.37);
font-size: 12;
font-family: 'Agency FB', sans-serif !important;
text-transform: uppercase;
padding: 3px;
width: 100%;
height: auto;
color: white !important;
letter-spacing: 0.05rem !important;
}


.btn-mod-green,
.btn-mod-green:visited {
  background-image: linear-gradient(#209250, #13552e);
  color: #fff;
  border: 0;
  border-radius: 4px;
  height: 150%;  
}
.btn-mod-green .btn__text,
.btn-mod-green:visited .btn__text {
  color: #fff;
  
}
.btn-mod-green .btn__text i,
.btn-mod-green:visited .btn__text i {
  color: #fff;
  
}
.btn-mod-green:hover {
  background-image: linear-gradient(#2dc96e, #196e3c);
  color: #fff;
}
.btn-mod-green:active { 
  background-image: linear-gradient(#13552e, #209250);
}


.btn-mod-red,
.btn-mod-red:visited {
  background-image: linear-gradient(#ad2525, #551313);
  color: #fff;
  border: 0;
  border-radius: 4px;
  height: 150%;  
}
.btn-mod-red .btn__text,
.btn-mod-red:visited .btn__text {
  color: #fff;
  
}
.btn-mod-red .btn__text i,
.btn-mod-red:visited .btn__text i {
  color: #fff;
  
}
.btn-mod-red:hover {
  background-image: linear-gradient(#c92d2d, #6e1919);
  color: #fff;
}
.btn-mod-red:active { 
  background-image: linear-gradient(#551313, #922020);
}


.account-select{
display: flow-root;
background-image: linear-gradient(rgba(54, 57, 58, 0.826), rgba(99, 107, 113, 0.8));
width: 100%;
border-radius: 4px;  
padding-top: 7px;
}

.element-left{
float: inline-start;
margin-left: 8px;
margin-top: 2px;
}


.attempted-submit .field-error {
border-color: #D84D4D !important;
border-width: .3em;
}

p.invalid-feedback strong {
color: #D84D4D;
}

form p.successmsg {
font-size: 1.2em;
}

.alert-custom-style{
background-color: #111111cd !important; 
border-width: 1px; 
border-color: rgb(22, 146, 248) !important; 
text-decoration: none !important;
}

/* FOR BODY ALERTS */
.alert-icon{
margin-right: 10px;
margin-bottom: 5px;
}

.alert-body{
display: flex;
justify-content: center;
align-items: center;
}

/* FOR MESSAGES ALERTS */
.alert-error{
color: red !important;
background-color: rgba(0, 0, 0, 0) !important
}

.alert-success{
color: greenyellow !important;
background-color: rgba(0, 0, 0, 0) !important;
}

.alert-info{
color: #3f97e1 !important;
background-color: rgba(0, 0, 0, 0) !important
}

.alert-warning{
color: orange !important;
background-color: rgba(0, 0, 0, 0) !important
}

.nav-link {
color: #fff !important; 
font-style: bold; 
font-size: large !important; 
text-transform: uppercase !important; 
font-family: 'Agency FB', sans-serif !important;
letter-spacing: 0.05rem !important;
margin-right: 10px;
}

.nav-link:hover {color: #3f97e1 !important;}
.nav-link:active {color: #3f97e1 !important;}
.btn-mod:active .btn-mod:focus, .btn-mod:hover, .btn-mod:visited { color: #fff !important; text-decoration: none !important; letter-spacing: 0.05rem !important; }

.modal-color{
background-color: #fff !important;
color: #000 !important;
}

.modal-colorReverse{
background-color: rgba(0, 0, 0, 0) !important;
color: #fff !important;
padding: none;
margin: 5px;  
padding-top: 0px;
padding-bottom: 0px;      
padding-left: 5;
padding-right: 5;
line-height: 1; 
}

.modal-headerTable{
background-color: rgba(0, 0, 0, 0) !important;
vertical-align: middle !important; 
box-shadow: 0px 3px 0px 0px !important;
}

.modal-headerAlt{
width: 100%;
vertical-align: middle;
margin-top: 5px;
margin-bottom: 0px;
padding-bottom: 0px;
}

.dataTables_length {
    display: flex;
    align-items: center;
    gap: 8px; /* space between length dropdown and buttons */
}

.modal-title{
text-align: left !important;
padding: 0px !important;
margin: 0px !important;
text-shadow: none !important;
}

.modal-title-dark{
text-align: left !important;
padding: 0px !important;
margin: 0px !important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
color: #fff;
}

.modal-content{
text-align: center !important;
}

.station-map-container {
box-shadow: 0px 0px 2px 2px rgba(7, 7, 7, 0.37);
height: 100%;  /* Fills the available space */
margin: 0 auto !important;
min-height: 40em;
border-style: none;
border-radius: 7px;
background-color: rgba(0, 0, 0, 0) !important;
}

#address-map > div:nth-child(1) > div:nth-child(2) {
position: unset !important;
}

#station-map > div:nth-child(1) > div:nth-child(2) {
position: unset !important;
}

.table { 
width: 100% !important; 
overflow-x: auto !important;
text-align: center !important;
}

.table-header{
background-color: #ffffff; 
color: #454547; 
font-weight: bold; 
padding-top: 5px; 
padding-bottom: 5px;
}

.table-custom {
text-align: center;
padding-top: 0px !important;
}

table.dataTable {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  text-align: center !important;
}

table.dataTable th{
  text-align: center !important;
}

tr{ border-bottom: 0 !important; }

.dt-button-custom {
width: fit-content !important; 
height: fit-content !important;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);  
box-shadow: 0px 0px 2px 2px rgba(20, 20, 20, 0.37); 
padding: 5px !important;  
font-size: 1em !important;
font-family: 'Agency FB', sans-serif !important;
letter-spacing: 0.05rem !important;
text-transform: uppercase !important;
background-image: linear-gradient(#3f97e1, #19495c) !important;
color: #fff !important;
border: 0 !important;
border-radius: 4px !important;
}

.dt-custom-button-row {
display: flex;
justify-content: flex-start; /* Align to the left */
margin-bottom: 15px; /* Space between button row and dropdown */
}

.dt-button-custom:hover { background-image: linear-gradient(#74b0e0, #2a505f) !important; }
.dt-button-custom:active { background-image: linear-gradient(#134872, #2a505f) !important; }
.dt-button-custom{ justify-content: flex-start; font-family: 'Agency FB', sans-serif !important; text-transform: uppercase !important; letter-spacing: 0.05rem !important; }

.dt-search, .dt-search input{
justify-content: flex-end  !important;
margin-right: 0 !important
}

#dt-search-0{ margin-left: 4px !important; }
  
#dt-length-0{ margin-right: 4px !important; }

.dt-info { font-family: "Agency FB", sans-serif !important; padding: 0px !important; letter-spacing: 0.05rem !important; }

.col-md {
display: flex !important;
}

.col-md>* {
flex: 1 !important;
display: flex !important;
align-items: center !important;
height: fit-content !important;
}

.form-control, .form-control:focus{
  text-align: center !important;
  margin: auto !important;
  justify-content: center !important;
}

.select2-container .select2-selection--multiple {
border-radius: 7px !important;
overflow: hidden !important;
height: auto !important;
color: black !important;
}

.select2{
width: 100% !important;
}

.select2-dropdown { 
text-align: center !important;
align-items: center !important;
}

.select2-container .select2-selection--single {  
height: 36px !important;
border-radius: 7px !important;
}

.select2-container--open .select2-selection__rendered{
border: none;
}

.select {
text-align: center !important;
text-align-last: center !important;
-moz-text-align-last: center !important;
height: 32px !important;
}

.supplier-name {
  position: absolute;
  bottom: 15px;
  right: 20px;
  font-weight: bold;
  font-size: 14px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  font-family: 'Agency FB', sans-serif !important;
  letter-spacing: 0.05rem !important;
  text-transform: uppercase !important;
}

.uppercase-help{text-transform: uppercase !important;}

.supplier-spass { color: #FFD700; } /* Gold */
.supplier-parkland { color: #00FF00; } /* Bright Green */
.supplier-efs { color: #FF69B4; } /* Hot Pink */
.supplier-ktth { color: #87CEEB; } /* Sky Blue */
.supplier-apeiron { color: #FFA500; } /* Orange */
.supplier-platinum { color: #E6E6FA; } /* Lavender */
.supplier-nfn { color: #98FB98; } /* Pale Green */
.supplier-bluewave { color: #6fdbff; } /* Deep Sky Blue */

div.row.justify-content-between{
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.dropdown-menu {
background-color: #ffffff !important;
border: 1px solid #444;
}

.dropdown-item {
text-shadow: none; 
color: #357fbc !important;
}

.dropdown-item:hover {
background-color: #cdcdcd !important;;
color: #525252 !important;;
}

.dropdown-item.disabled {
color: #3a3a3a;
}

select.form-control option {
    text-align: center;
}

/* /////////   MEDIA QUERIES   ////////// */

/*MOBILE PORTRAIT*/
@media only screen and (max-width: 599px) and (orientation: portrait) {

h1{ font-size: 20px !important; padding-top: 20px !important;}
h2{ font-size: 16px !important;}
h5{ font-size: 12px !important;}
h6{ font-size: 15px !important;}
p{ font-size: 1.1em;}
table.dataTable th{ font-size: 1em; }
table.dataTable { display: block !important; }   

.dataTables_length {  justify-content: center !important; }
.dataTables_filter { text-align: center !important; }
.dataTables_info { text-align: center !important; }
.dt-buttons { justify-content: center !important; }

.nav-link-img { margin-top: 0px; }

.dt-length { text-align: center !important; }
.dt-search { text-align: center !important; margin-top: 2px !important; }
.dt-info { text-align: center !important; }

ul.pagination { justify-content: center !important;}
.dataTables_paginate  { margin-top: 15px !important; justify-content: center !important; }
.col-sm-12, .col-md-7{ padding: 0px !important;}
.col-md-auto.ml-auto{ padding: 0px !important;}
.col-md-auto.mr-auto{ padding: 0px !important;}

.carousel-inner { width: 100% !important; margin: 0 auto !important; }
.alter-align{ text-align: center; }
.number-font { font-size: 14px; }
.account-mod{ min-height: calc(100vh - 165px); }     
.login-mod{ min-height: calc(100vh - 165px); }      
.header-highlight{ font-size: 1.25em; font-weight: 500; }
.m-adjustpopup{ text-align: center; justify-content: center; margin: auto; padding-left: 55px; }
.dropnav { margin-top: 19px; }
.pad-nav-bottom{ padding-bottom: 19px; }
.element-left{width: 28px; height: 28px;}
.dt-button-custom { margin-top: 2px !important; font-size: small !important; width: fit-content !important; height: fit-content !important;}
.back-button{ height: 12px; width: 48px; }
.fuel-card-text{ font-size: 10.5px; }
.supplier-name{ font-size: 10.5px; bottom: 4px; right: 12px;}
.fuel-card-container{ padding-right:  50px; padding-bottom: 5px; }
.max-limit { padding: 9px;}
.alert-body{ display: flex; flex-direction: column; justify-content: center; align-items: center; }
.dash-highlight{ font-size: 1.15em; }
label { font-size: 1em;}

.logo-offset{ margin-left: 0px; }
.btn-mod,
.btn-mod:link,
.btn-mod:visited,
.btn-mod:hover,
.btn-mod:active{
font-size: medium;
}

ul.carousel-indicators li, ul.carousel-indicators li.active {
  width: 0.45rem;
  height: 0.45rem;
  margin: 3.5px;
}
ul.carousel-indicators li.active {
  width: 0.6rem;
  height: 0.6rem;
  margin-top :auto;
  margin-bottom: auto;
}

}

/*PHONE LANDSCAPE*/
@media only screen and (min-width: 600px) and (max-width: 945px) and (orientation: landscape) {

  h1{ font-size: 21px !important; padding-top: 20px !important;}
  h2{ font-size: 17px !important;}
  h5{ font-size: 13px !important;}
  h6{ font-size: 16px !important;}
  p{ font-size: 1.1em;}

.nav-link-img { margin-top: 0px; }
.carousel-inner { width: 100% !important; margin: 0 auto !important; }
.alter-align{ text-align: left; }
.account-mod{ min-height: calc(100vh - 165px); }     
.login-mod{ min-height: calc(100vh - 165px); }
.dropnav { text-align: right; }
.dash-highlight{ font-size: 1.15em;}
.fuel-card-text{ font-size: 12.5px; }
.supplier-name{ font-size: 12.5px; bottom: 4px; right: 12px;}
.fuel-card-container{ padding-bottom: 5px; padding-right:  100px; }
.back-button{ height: 12px; width: 48px; }
.header-highlight {font-size: 1.35em; font-weight: 500;}
.element-left{width: 28px; height: 28px;}
label { font-size: 1em;}

table.dataTable th{
  font-size: 1.15em;
  }   


.btn-mod,
.btn-mod:link,
.btn-mod:visited,
.btn-mod:hover,
.btn-mod:active{
font-size: 1.15em;
}

ul.carousel-indicators li, ul.carousel-indicators li.active {
  width: 0.45rem;
  height: 0.45rem;
  margin: 4px;
}
ul.carousel-indicators li.active {
  width: 0.65rem;
  height: 0.65rem;
  margin-top :auto;
  margin-bottom: auto;
}

}

/*TABLET PORTRAIT*/
@media only screen and (min-width: 600px) and (max-width: 899px) and (orientation: portrait) {

h1{ font-size: 21px !important; padding-top: 20px !important;}
h2{ font-size: 17px !important;}
h5{ font-size: 13px !important;}
h6{ font-size: 16px !important;}
p { font-size: 1.15em !important; }


.alter-align{ text-align: left; }
.account-mod{ min-height: calc(100vh - 162px); }     
.login-mod{ min-height: calc(100vh - 162px); }
.dropnav { text-align: right; }
.fuel-card-text{ font-size: 11px; }
.supplier-name{ font-size: 11px; bottom: 16px; right: 12px;}
.dash-highlight{ font-size: 1.25em; }
.type--fade{ font-size: small;}
.back-button{ height: 12px; width: 48px; }
.header-highlight{ font-size: 1.25em; }
.element-left{width: 28px; height: 28px;}
.nav-link-img { margin-top: 0px; }

table.dataTable th{
  font-size: 1.15em;
  }   

ul.carousel-indicators li, ul.carousel-indicators li.active {
  width: 0.45rem;
  height: 0.45rem;
  margin: 5px;
}
ul.carousel-indicators li.active {
  width: 0.65rem;
  height: 0.65rem;
  margin-top :auto;
  margin-bottom: auto;
}

.btn-mod,
.btn-mod:link,
.btn-mod:visited,
.btn-mod:hover,
.btn-mod:active{
font-size: small;
}

}

/*TABLET LANDSCAPE*/
@media only screen and (min-width: 950px) and (max-width: 1080px) and (orientation: landscape) {

  h1{ font-size: 21px !important; padding-top: 20px !important;}
  h2{ font-size: 17px !important;}
  h5{ font-size: 13px !important;}
  h6{ font-size: 16px !important;}
  p { font-size: 1.15em !important; }
  
  .nav-link-img { margin-top: 3px; }
  .carousel-inner { width: 90% !important; margin: 0 auto !important; }
  .alter-align{ text-align: left; }
  .account-mod{ min-height: calc(100vh - 162px); }     
  .login-mod{ min-height: calc(100vh - 162px); } 
  .dropnav { text-align: right; }
  .fuel-card-text{ font-size: 16px; }
  .supplier-name{ font-size: 16px; bottom: 15px; right: 16px;}
  .dash-highlight{ font-size: 1.25em; }
  .type--fade{ font-size: small;}
  .back-button{ height: 15px; width: 60px; }  
  .back-button{ height: 12px; width: 48px; }
  .header-highlight{ font-size: 1.25em; }
  table.dataTable th{ font-size: 1.15em; }   
  .element-left{width: 33px; height: 33px; margin-top: 0px;}
  ul.carousel-indicators li, ul.carousel-indicators li.active {
    width: 0.45rem;
    height: 0.45rem;
    margin: 4px;
  }
  ul.carousel-indicators li.active {
    width: 0.65rem;
    height: 0.65rem;
    margin-top :auto;
    margin-bottom: auto;
  }
  .btn-mod,
  .btn-mod:link,
  .btn-mod:visited,
  .btn-mod:hover,
  .btn-mod:active{
  font-size: small;
  }
}

/*DESKTOP*/
@media only screen and (min-width: 1200px) {

h1{ font-size: 28px !important; padding-top: 20px !important;}
h2{ font-size: 24px !important;}
h5{ font-size: 18px !important;}
h6{ font-size: 20px !important;}
p { font-size: medium !important; }

.carousel-inner { width: 90% !important; margin: 0 auto !important; }
table { width: 100% !important; }
.alter-align{ text-align: left; }
.account-mod{ min-height: calc(100vh - 190px); }
.login-mod{ min-height: calc(100vh - 190px); }
.dropnav { text-align: right; margin-top: 14px; }
.pad-nav-bottom{ padding-bottom: 18px; }
.supplier-name{ font-size: 18px; bottom: 15px; right: 16px;}
.fuel-card-text{ font-size: 18px; }
.element-left{width: 48px; height: 48px;}
.dash-highlight{ font-size: 1.35em;}
.type--fade{ font-size: medium;}
.back-button{ height: 15px; width: 60px; }
.header-highlight{ font-size: 1.5em; }
.nav-link-img { margin-top: 3px; }


table.dataTable th{
  font-size: 1.25em;
  }  

ul.carousel-indicators li, ul.carousel-indicators li.active {
  width: 0.45rem;
  height: 0.45rem;
  margin: 9px;
}
ul.carousel-indicators li.active {
  width: 0.75rem;
  height: 0.75rem;
  margin-top :auto;
  margin-bottom: auto;
}

.btn-mod,
.btn-mod:link,
.btn-mod:visited,
.btn-mod:hover,
.btn-mod:active{
font-size: large;
}

}