@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;600;700;800;900&display=swap");

@media (min-width: 992px) {
  .offcanvas {
    visibility: visible;
    position: relative;
    background: none;
    border: none;
    justify-content: end;
    color: red;
  }



code {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
word-break:break-all
}
pre {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
  margin-bottom: 10px;
  
  overflow: auto;
  padding: 5px;
  
word-break:break-all
}

  .main {
    min-height: 90vh;
  }
  .mainPage {
    background-image: url("../img/background.webp");
    min-height: 90vh;
    overflow: auto;
  }
  .bg-main,body {
    background-image: url("../img/background.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bg-secondary{
    background-color: #e0e0e0!important;
  }

  #mainPiece {
    min-height: 84vh;
  }
}
@media (max-width: 992px) {
  .offcanvas {
    width: 250px !important;
  }
  .offcanvas-start-lg {
    top: 0;
    left: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
  }

  .pagination{
    transform: scale(0.8);
  }

  .btn-group{
    margin:10px 0 10px 0;
  }
.sm-w-50{
  width:100%!important;
}
}
.navbar-nav li a {
  font-size: 0.9em;
  font-family: "Lato", sans-serif;
  font-weight: 700;
}

.sidebar{
  position: relative;
}

.logout{
  position: absolute;
  bottom:20px;
  width: 95%;
}

.hidden {
  display: none;
}
.message{
  font-size: 10pt;
}
/* Number Form */

/* Chrome, Safari, Edge, Opera */
.publicForm input::-webkit-outer-spin-button,
.publicForm input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.publicForm input[type="number"] {
  -moz-appearance: textfield;
}

/* Processing */

#process-circle {
  position: absolute;
  padding-top: 10%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.658);
  backdrop-filter: blur(1px);
  z-index: 999;
  overflow: hidden;
}

.spinner {
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  position:relative;
  z-index: 1010;
}

.nolinks a {
  pointer-events: none;
}
.z-high,.dropdown-menu {
  z-index: 1090;
}
.z-mid{
  z-index: 1080;
}
/* footer */

.bg-fill {
  color: white;
  background: linear-gradient(
    140deg,
    rgba(0, 171, 255, 1) 0%,
    rgba(45, 54, 129, 1) 79%
  );

  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50%;
}

.icon-angle-right:before {
  content: "› " !important;
  font-size: 1.5em;
}

.links > li > a:before,
i[class^="icon-"],
i[class*=" icon-"] {
  font-family: "fl-icons" !important;
  font-display: block;
  margin: 0;
  padding: 0;
  display: inline-block;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  position: relative;
  line-height: 1.2;
}
.ux-menu.ux-menu--divider-solid
  .ux-menu-link:not(:last-of-type)
  .ux-menu-link__link {
  border-bottom-style: solid;
}
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -js-display: flex;
}
.ux-menu-link__link {
  text-decoration: none;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 2.5em;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  color: currentColor;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  border-bottom-color: #ececec;
  border-bottom-width: 1px;
}

.absolute-footer.dark {
  color: rgba(255, 255, 255, 0.5);
}
.absolute-footer,
html {
  background-color: #333f49;
}

.absolute-footer {
  color: rgba(0, 0, 0, 0.5);
  padding: 10px 0 15px;
  font-size: 0.9em;
}
.absolute-footer,
html {
  background-color: #5b5b5b;
}
.dark,
.dark p,
.dark td {
  color: #f1f1f1;
}
.text-center {
  text-align: center;
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.absolute-footer.dark {
  color: rgba(255, 255, 255, 0.5);
}
.absolute-footer,
html {
  background-color: #333f49;
}
.absolute-footer {
  color: rgba(0, 0, 0, 0.5);
  padding: 10px 0 15px;
  font-size: 0.9em;
}
.absolute-footer,
html {
  background-color: #5b5b5b;
}
.dark,
.dark p,
.dark td {
  color: #f1f1f1;
}
.text-center {
  text-align: center;
}

.dark .payment-icons .payment-icon svg {
  fill: #fff;
}

.payment-icon {
  padding: 5px;
  margin: 5px;
  background-color: rgb(53, 53, 53);
  border-radius: 5px;
}

.payment-icons .payment-icon svg {
  vertical-align: middle;
  height: 20px;
  width: auto !important;
}
svg:not(:root) {
  overflow: hidden;
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
user agent stylesheet svg:not(:root) {
  overflow: hidden;
}
.absolute-footer.dark {
  color: rgba(255, 255, 255, 0.5);
}

/* Bootstrap Customizations */

h1,
.h1 {
  color: #2d3681;
  font-weight: 800;
  font-family: "Montserrat", sans-serif;
  font-size: 1.7em;
  line-height: 1.3;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0.5em;
  text-rendering: optimizeSpeed;
  overflow-wrap: break-word;
}

.disabled {
  color: #a7a7a7 !important;
  border-color: #a7a7a7 !important;
  pointer-events: none;
}



.focusBorder{
  border: 1px solid #2d3681;
  transition: 0.2s ease-in-out;

  color: #fff;
  background-color: #2d3681;
}
.focusBorder:hover{
  border: 1px solid #00abff;
  transition: 0.2s ease-in-out;

  color: #fff;
  background-color: #00abff;
}

.h4,
h4 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.125em;
  font-weight: 800;
  color: #00abff;
}

a {
  text-decoration: none !important;
}

p,
.p {
  font-family: "Montserrat", sans-serif;
  color: #263238;
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  overflow-wrap: break-word;
}

.btn {
  border-radius: 50px;
}

.btn-primary {
  background-color: #2d3681;
  color: #ffff;
  border: #2d3681;
}


.nav-link:hover,
.active {
  color: #2d3681 !important;
  font-weight: 800 !important;
}

.btn-primary:hover {
  color: #ffff !important;
}

.bg-form-n {
  background-color: #2d3681;
}

/* OTP  */

.otp-.publicForm input-wrapper {
  width: 240px;
  text-align: left;
  display: inline-block;
}
.otp-.publicForm input-wrapper .publicForm input {
  padding: 0;
  width: 264px;
  font-size: 32px;
  font-weight: 600;
  color: #ffffff;
  background-color: transparent;
  border: 0;
  margin-left: 12px;
  letter-spacing: 48px;
  font-family: sans-serif !important;
  overflow: hidden;
}
.otp-.publicForm input-wrapper .publicForm input:focus {
  box-shadow: none;
  outline: none;
}
.otp-.publicForm input-wrapper svg {
  position: relative;
  display: block;
  width: 240px;
  height: 2px;
}

/* Badges */
.badge-success {
  background-color: rgb(0, 189, 0);
}

.badge-danger {
  background-color: rgb(207, 0, 0);
}
/* Notices */

.msg{
  position: fixed;
  top: 90vh;
  right:1vw
}

.loadingText {
  position:relative;
  z-index: 1010;
}
.alert{
 
  -webkit-animation: fadeOut 3s;
  animation: fadeOut 3s;
  animation-fill-mode: forwards;
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
}

/* Data Tables */
.datatable tfoot {
  display: table-header-group;
}

.datatable tfoot .filter-column {
  width: 100% !important;
}

.navbar-toggler>.close {
  display:inline;
}
.navbar-toggler.collapsed>.close, .navbar-toggler:not(.collapsed)>.navbar-toggler-icon {
  display:none;
}

/* Plotly */
.sm-w-50{
  width:50%;
}
.modebar{
  display: none !important;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}


@-webkit-keyframes fadeOut {
  0% { opacity: 1;}
  99% { opacity: 0.01;width: 100%; height: 100%;}
  100% { opacity: 0;width: 0; height: 0;}
}  
@keyframes fadeOut {
  0% { opacity: 1;}
  99% { opacity: 0.01;width: 100%; height: 100%;}
  100% { opacity: 0;width: 0; height: 0;}
}


/* Login */

#formContent {
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  background: #fff;
  padding: 30px;
  width: 90%;
  max-width: 450px;
  position: relative;
  padding: 0px;
  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  text-align: center;
}

#formFooter {
  background-color: #f6f6f6;
  border-top: 1px solid #dce8f1;
  padding: 25px;
  text-align: center;
  -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}



/* TABS */

h2.inactive {
  color: #cccccc;
}

h2.active {
  color: #0d0d0d;
  border-bottom: 2px solid #5fbae9;
}



/* FORM TYPOGRAPHY*/

.publicForm input[type=button], .publicForm input[type=submit], .publicForm input[type=reset]  {
  background-color: #56baed;
  border: none;
  color: white;
  padding: 15px 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  font-size: 13px;
  -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
  box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  margin: 5px 20px 40px 20px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.publicForm input[type=button]:hover, .publicForm input[type=submit]:hover, .publicForm input[type=reset]:hover  {
  background-color: #39ace7;
}

.publicForm input[type=button]:active, .publicForm input[type=submit]:active, .publicForm input[type=reset]:active  {
  -moz-transform: scale(0.95);
  -webkit-transform: scale(0.95);
  -o-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
}

.publicForm input[type=email],.publicForm input[type=password] {
  background-color: #f6f6f6;
  border: none;
  color: #0d0d0d;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 5px;
  width: 85%;
  border: 2px solid #f6f6f6;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}

.publicForm input[type=email]:focus,.publicForm input[type=password]:focus {
  background-color: #fff;
  border-bottom: 2px solid #5fbae9;
}

.publicForm input[type=email]:placeholder ,.publicForm input[type=password]:placeholder {
  color: #cccccc;
}



/* ANIMATIONS */

/* 360 spin */



/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {
  opacity:0;
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fadeIn.first {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.fadeIn.second {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.fadeIn.third {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.fadeIn.fourth {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

/* Simple CSS3 Fade-in Animation */
.underlineHover:after {
  display: block;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 2px;
  background-color: #56baed;
  content: "";
  transition: width 0.2s;
}

.underlineHover:hover {
  color: #0d0d0d;
}

.underlineHover:hover:after{
  width: 100%;
}

.spin{
  animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

/* OTHERS */

*:focus {
    outline: none;
} 

#icon {
  width:100px;
  height: auto;
}

td{
  font-weight: 400;
  color:#000
}




/* Sidebar */

/* Loader */

.loader-handler{
  top:0;
  left:0;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 8000;
  background-color: rgba(204, 204, 204, 0.685);
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  transition: 0.3s ease-in-out;
  backdrop-filter: blur(2px);
}


.loader {
  width: 8px;
  height: 40px;
  border-radius: 4px;
  display: block;
  margin: 20px auto;
  position: relative;
  background: currentColor;
  color: #00abff;
  box-sizing: border-box;
  animation: animloader 0.3s 0.3s linear infinite alternate;
}


.loader::after, .loader::before {
  content: '';
  width: 8px;
  height: 40px;
  border-radius: 4px;
  background: currentColor;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  box-sizing: border-box;
  animation: animloader 0.3s  0.45s  linear infinite alternate;
}
.loader::before {
  left: -20px;
  animation-delay: 0s;
}

@keyframes animloader {
  0%   { height: 48px} 
  100% { height: 4px}
}