body {
  /* Margin because fixed menu on top and on bottom */
  font-family: "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
}

.anonymousAccess {
  font-family: "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  background-image: url("../img/logarBackground.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 100vh;
  display: flex;
}

.anonymousAccess .container-fluid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.anonymousAccess #title-page-anonymous-access {
  margin-top: 4vh;
  margin-bottom: 5vh;
  font-size: 72px;
  font-style: italic;
  line-height: 18px;
  font-weight: bold;
}

.anonymousAccess #copyright-logar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-end;
  position: fixed;
  bottom: 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.8);
}

/* @media only screen and (min-height: 730px) {
  .anonymousAccess #okta-login-container {
    margin-bottom: 8vh;
  }
} */

@media only screen and (min-width: 568px) and (max-height: 420px) {
  .anonymousAccess #title-page-anonymous-access {
    margin-top: 98vh;
    margin-bottom: 10vh;
  }
  .anonymousAccess #copyright-logar {
    position: initial;
  }
}

@media only screen and (min-width: 653px) and (max-height: 280px) {
  .anonymousAccess #title-page-anonymous-access {
    margin-top: 114vh;
    margin-bottom: 10vh;
  }
  .anonymousAccess #copyright-logar {
    position: initial;
  }
}

@media only screen and (max-width: 720px) and (min-height: 540px) {
  .anonymousAccess #title-page-anonymous-access {
    margin-top: 19vh;
    margin-bottom: 7vh;
  }
  .anonymousAccess #copyright-logar {
    position: initial;
  }
}

@media only screen and (max-width: 280px){
  .anonymousAccess #title-page-anonymous-access {
    margin-top: 5vh;
    margin-bottom: 5vh;
  }
  .anonymousAccess #copyright-logar {
    position: initial;
  }
}

@media only screen and (max-width: 320px) and (max-height: 600px) {
  .anonymousAccess #title-page-anonymous-access {
    margin-top: 16vh;
    margin-bottom: 7vh;
  }
  .anonymousAccess #copyright-logar {
    position: initial;
  }
}

@media only screen and (min-width: 360px) and (min-height: 640px) {
  .anonymousAccess #title-page-anonymous-access {
    margin-top: 6vh;
    margin-bottom: 6vh;
  }
  .anonymousAccess #copyright-logar {
    position: initial;
  }
}


@media only screen and (max-height: 750px) {
  .anonymousAccess #copyright-logar {
    position: initial;
  }
}

/* ---------------------------------------------------
TITLE ON TOP THE PAGES 
---------------------------------------------------*/
.title {
  font-size: 36px !important;
  color: #63656a !important; /* crgl dark gray */
  display: none !important; /*updated according to Logar, onde now trocar is just an Iframe and these titles already exists in Ligar*/
}
@media screen and (max-width: 500px) {
  .title {
    font-size: 24px !important;
    color: #63656a !important; /* crgl dark gray */
    display: none !important; /*updated according to Logar, onde now trocar is just an Iframe and these titles already exists in Ligar*/
  }
}
/* ---------------------------------------------------
TITLE OC ON TOP  
---------------------------------------------------*/
.title-oc {
  font-size: 24px !important;
  color: #63656a !important; /* crgl dark gray */
  font-weight: lighter;
}
@media screen and (max-width: 500px) {
  .title-oc {
    font-size: 16px !important;
    color: #63656a !important; /* crgl dark gray */
    font-weight: lighter;
  }
}

/* ---------------------------------------------------
BUTTON HUGE SIZE 
---------------------------------------------------*/
.btn-hg {
  padding: 15px 25px 15px 25px;
  font-size: 24px;
}

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #fafafa;
}

.btn-group-toggle .active {
  padding: 0px 4ex 6px 4ex;
  font-weight: bold;
  font-size: 1.15em;
}

/* ---------------------------------------------------
CRGL Colors for texts, when links hapens hover effect
---------------------------------------------------*/
.text-crgl-dark-gray {
  color: #63656a !important;
}
.text-crgl-dark-gray a:hover {
  color: #d1d0cf !important;
}

.text-crgl-light-gray {
  color: #d1d0cf !important;
}
.text-crgl-light-gray a:hover {
  color: #63656a !important;
}

.text-crgl-dark-teal {
  color: #007582 !important;
}
.text-crgl-dark-teal a:hover {
  color: #19988b !important;
}

.text-crgl-light-teal {
  color: #19988b !important;
}
.text-crgl-light-teal:hover {
  color: #007582 !important;
}

.text-crgl-dark-green {
  color: #638c1c !important;
}
.text-crgl-dark-green a:hover {
  color: #abad25 !important;
}

.text-crgl-light-green {
  color: #abad25 !important;
}
.text-crgl-light-green:hover {
  color: #638c1c !important;
}

.text-crgl-dark-orange {
  color: #c2531b !important;
}
.text-crgl-dark-orange a:hover {
  color: #d57f00 !important;
}

.text-crgl-light-orange {
  color: #d57f00 !important;
}
.text-crgl-light-orange a:hover {
  color: #c2531b !important;
}

.text-crgl-dark-red {
  color: #a22b2f !important;
}
.text-crgl-dark-red a:hover {
  color: #c2531b !important;
}

.text-crgl-light-red {
  color: #c2531b !important;
}
.text-crgl-light-red a:hover {
  color: #a22b2f !important;
}

/* ---------------------------------------------------
Background color Crgl
---------------------------------------------------*/
.bg-crgl-light-teal {
  color: white !important;
  background-color: #abad25 !important;
}
.bg-crgl-light-orange {
  color: white !important;
  background-color: #d57f00 !important;
}
.bg-crgl-light-red {
  color: white !important;
  background-color: #c2531b !important;
}
.bg-crgl-light-green {
  color: white !important;
  background-color: #abad25 !important;
}
.bg-crgl-dark-green {
  color: white !important;
  background-color: #638c1c !important;
}
.bg-crgl-dark-blue {
  color: white !important;
  background-color: #005e86 !important;
}

/* ---------------------------------------------------
Style when button is disabled 
---------------------------------------------------*/
button:disabled,
button:disabled:hover button[disabled],
button[disabled]:hover {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
}
/* ---------------------------------------------------
Style when checkbox is readonly 
---------------------------------------------------*/
input[type="checkbox"][readonly] {
  pointer-events: none;
}
/* ---------------------------------------------------
    Footer of copyright
--------------------------------------------------- */
.copyright,
.copyright a {
  color: #777777;
  padding: 8px 12px;
  margin: 10px 3px;
  line-height: 20px;
  font-size: 9px;
}

.copyright a {
  margin: 0;
  padding: 0;
  text-decoration: underline;
}

/* LOGIN INDEX */

.legal-terms {
  color: #777777;
}

.legal-terms a {
  color: #777777;
  line-height: 20px;
  font-size: 12px;
  padding: 0 5px;
  text-decoration: underline;
}

/* ---------------------------------------------------
    CSS used here will be applied after bootstrap.css to customize badge notifiers 
See: https://stackoverflow.com/questions/23790721/overlap-notification-badge-on-glyph-in-bootstrap-3
--------------------------------------------------- */
.badge-notify {
  background: #a22b2f;
  color: white;
  font-weight: bold;
  position: relative;
  top: -14px;
  left: -2px;
}
.btn-notify {
  color: #ffffff;
  background: none;
  border: none;
  padding: 0;
}
.btn-notify :hover {
  color: #cccccc;
}

/* ---------------------------------------------------
    SIDEBAR STYLE - RIGHT
----------------------------------------------------- */
#sidebar {
  width: 250px;
  position: fixed;
  top: 0;
  right: -250px;
  height: 100vh;
  z-index: 1500;
  background: rgba(99, 101, 106, 0.7);
  color: #fff;
  transition: all 0.3s;
  overflow-y: scroll;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

#sidebar.active {
  right: 0;
}

#dismiss {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  background: rgba(99, 101, 106, 0.7);
  position: absolute;
  top: 17px;
  left: 5px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#dismiss:hover {
  background: rgba(255, 255, 255, 0.473);
  color: rgba(99, 101, 106, 0.7);
}

.overlay {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 998;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
.overlay.active {
  display: block;
  opacity: 1;
}

#sidebar .sidebar-header {
  padding: 20px;
  background: #343a40;
  text-align: center;
}

#sidebar ul.components {
  padding: 20px 0;
  border-bottom: 1px solid #47748b;
}

#sidebar ul p {
  color: #fff;
  padding: 10px;
}

#sidebar ul li a {
  padding: 10px;
  font-size: 1.1em;
  display: block;
  color: #fff;
}

#sidebar ul li a:hover {
  color: #638c1c;
  background: #fff;
}

#sidebar ul li.active > a,
a[aria-expanded="true"] {
  color: #fff;
  background: #638c1c;
}
/* ---------------------------------------------
  BUTTONS FLOAT BOTTOM
  ---------------------------------------------- */
.btn-float-back {
  display: block; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 60px; /* Place the button at the bottom of the page */
  left: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 8px; /* Some padding */
  border-radius: 50%; /* Rounded corners */
  width: 40px;
  height: 40px;
}
.btn-float-up {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 60px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 8px; /* Some padding */
  border-radius: 50%; /* Rounded corners */
  width: 40px;
  height: 40px;
}

/* ---------------------------------------------
  modal
  ---------------------------------------------- */
.modal-dialog.modal-fullscreen {
  max-width: 97%;
  height: 92%;
  padding: 0;
  margin: inherit auto;
}

.modal-dialog {
  margin-left: 30px !important;
}

/* ---------------------------------------------
  bootstrap v4 removed btn-xs
  ---------------------------------------------- */

.btn-group-xs > .btn,
.btn-xs {
  padding: 0.25rem 0.4rem;
  font-size: 0.875rem;
  line-height: 0.5;
  border-radius: 0.2rem;
}

.notifications-pane-list .unread {
  font-weight: bold;
}

.notifications-pane-list .read {
  font-weight: normal;
}

.notifications-pane-list .timestamp {
  display: block;
  font-size: 70%;
}

/*
.notification_icon_bell.is_ringing{
    position: absolute;
    -webkit-text-fill-color: white;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: teal;
    font-size: 600%;
    right: 20px;
    top: 50px;
}
*/

/***** PROFILES *******/

/* color of Nav menu for each Profile logged */
/*CRGL Dark Blue, aligned with Box in LoadingOrder List and Timeline */
.bg-driver {
  background-color: #005e86 !important;
}
/* CRGL Dark Green */
.bg-farmer {
  background-color: #638c1c !important;
}
/*CRGL Dark Teal*/
.bg-backoffice {
  background-color: #19988b !important;
}
/*CRGL Dark Orange*/
.bg-transporter{
  background-color: #638c1c !important;
  border-color: #638c1c !important;
  color: #ffffff !important;
}

/*CRGL Dark Blue, aligned with Box in LoadingOrder List and Timeline */
.fg-driver {
  color: #002346 !important;
}
/* CRGL Dark Green */
.fg-farmer {
  color: #284D02 !important;
}
/*CRGL Dark Teal*/
.fg-backoffice {
  color: #055B49 !important;
}
/*CRGL Dark Orange*/
.fg-transporter {
  color: #A83F00 !important;
}

.bg-lightseagreen {
  background: lightseagreen;
}

/* overwrite */
.btn-crgl-dk-teal {
  border-color: white;
}
/* override background color of card "Processing..." during DataTables load from Ajax */
div.dataTables_processing.card {
  background-color: #638c1c !important;
  color: white !important;
  font-weight: bolder !important;
}

.btn-crgl-lt-teal {
  background-color: #abad25 !important;
  border-color: #abad25 !important;
  color: #ffffff !important;
}

.btn-crgl-lt-teal:hover,
.btn-crgl-lt-teal:active,
.btn-crgl-lt-teal.active {
  background-color: #638c1c !important;
  border-color: #638c1c !important;
  color: #ffffff !important;
}

.btn-crgl-dk-teal {
  background-color: #638c1c !important;
  border-color: #638c1c !important;
  color: #ffffff !important;
}

.btn-crgl-dk-teal:hover,
.btn-crgl-dk-teal:active,
.btn-crgl-dk-teal.active {
  background-color: #abad25 !important;
  border-color: #abad25 !important;
  color: #ffffff !important;
}

.btn-crgl-lt-green {
  background-color: #abad25 !important;
  border-color: #abad25 !important;
  color: #ffffff !important;
}

.btn-crgl-lt-green:hover,
.btn-crgl-lt-green:active,
.btn-crgl-lt-green.active {
  background-color: #638c1c !important;
  border-color: #638c1c !important;
  color: #ffffff !important;
}

.btn-crgl-dk-green {
  background-color: #638c1c !important;
  border-color: #638c1c !important;
  color: #ffffff !important;
}

.btn-crgl-dk-green:hover,
.btn-crgl-dk-green:active,
.btn-crgl-dk-green.active {
  background-color: #abad25 !important;
  border-color: #abad25 !important;
  color: #ffffff !important;
}

.border-crgl-dark-green {
  border-color:  #638C1C !important;
}

.text-danger{
  color: #CD0D15 !important;
}

.gpslike-button {
  line-height: 18px !important;
  border: none !important;
  background-color: #658D1B !important;
  color: white !important;
}

.gpslike-button:hover {
  background: '#749831' !important;
}

.gpslike-button:active {
  background: '#84A449' !important;
}

.swal2-confirm {
  border-radius: inherit !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  border: none !important;
  background-color: #658D1B !important;
  color: white !important;
}

.swal2-confirm:hover {
  background: '#749831' !important;
}

.swal2-confirm:active {
  background: '#84A449' !important;
}

.swal2-cancel {
   border-radius: inherit !important;
   font-weight: 700 !important;
   line-height: 18px !important;
   border: none !important;
   background-color: #ffffff !important;
   color: black !important;
}

@media only screen and (min-width: 420px) {
  .swal2-popup {
    position: absolute;
    top: 15px;
    left: 15px;
  }
}

#modalDocumentInForm .modal-dialog{
  float: right;
  margin-right: 63vw;
  margin-top: 360px;
}

.modalSendDocumentsMinsize {
  max-width: 1024px !important;
}

#modalLoading_OrdersForm .modal-content {
   max-width: 1024px;
   min-width: 75%;
}

.modalLoading_OrdersFormPresentation .modal-dialog {
  max-width: 2500px;
}

.modal-height-900 {
  max-height: 900px !important;
}

.modal-height-650 {
  max-height: 650px !important;
}

.swal-login {
  position: initial !important;
}

.btn-group-validate-documents {
  display: block;
  text-align: right;
}

.bottom {
  padding-bottom: 25px;
}

.dataTables_wrapper {
  min-height: 900px;
}

.modal-fullscreen .modal-body {
  min-height: 500px;
}