html {
    scroll-behavior: smooth;
}

.direction-rtl {
    direction: rtl;
}

.direction-ltr {
    direction: ltr;
}

.btn-pill {
    border-radius: 2rem;
    padding: 0.5rem 2rem;
    border: 2px solid #fff;
    /*box-shadow: 0 2px 12px rgba(black, 0.1);*/
}

.cursor-pointer {
    cursor: pointer;
}

/* when iframe and not iframe*/
section.dashboard--page:not([class*='embed']) {
    padding-top: 70px;
}


.spinner {
    display: block;
    width: 3rem;
    height: 3rem;
    border: 2px solid transparent;
    border-top: 2px solid #000;
    border-radius: 100%;
    margin: 0 auto;
    -webkit-animation: spin 0.7s infinite linear;
    animation: spin 0.7s infinite linear;
}

.spinner.center-of-center {
    position: absolute;
    margin: -13px;
    top: 50%;
    left: 50%;
    z-index: 100;
}

.spinner.in-btn {
    border-top-color: #fff;
}

.spinner.fixed {
    position: fixed;
}

.spinner.lg {
    width: 5rem;
    height: 5rem;
    border-width: 4px;
}

.spinner.xs {
    width: 24px;
    height: 24px;
    border-width: 2px;
}

.spinner.xxs {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

.spinner.l {
    border-top-color: #fff;
}

.spinner.float {
    width: 18px;
    height: 18px;
    margin-left: 14px;
    border-top-color: #262626;
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

p.submitted {
    color: #132b56;
    font-weight: bold;
}

a {
    color: #6f7170;
}

a:hover {
    color: #000000;
}


.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}


/* Evergreen dialog override START */
div[role="dialog"] {
    max-height: calc(100% - 6vmin * 2);
    max-width: 100%;
    /*margin: 6vmin 0;*/
    margin: auto;
}

div[role="dialog"] h4, div[data-evergreen-toaster-container] h4 {
    font-family: "TT Norms Pro", serif;
}

div[role="dialog"]:last-child div {
    float: none;
}

/* Evergreen dialog override END */


.full-width {
    width: 100%;
    line-height: 1.45;
    border-radius: 3px;
    /*border-radius: 999px;*/
}

.font-13 {
    font-size: 13px;
}

.alert-warning {
    background-color: #ffffff;
    border-color: #ab0c0c;
    color: black;
}

.line-divider {
    border-top: 1px solid rgb(228, 228, 228);
    margin: 1.0rem 0;
}

.height-36 {
    height: 36px;
}

.btn-cancel {
    background-color: transparent;
    color: #151515;
    border-color: gray;
}

.btn-cancel:hover {
    background: #f1f1f1;
}

.btn-save {
    color: #fff;
    background-color: #084350;
    border-color: #084350;
}


/* Login override START */
.form-anchor {
    color: rgb(45 50 93);
}
.form-anchor:hover {
    color: black !important;
}

.a-anchor-color {
    color: #2F80ED;
}

/* Login override END */

/* START CSS HOMEPAGE v 2.0 */

:root {
    --home-color: #C4C4C4;
    --a-navy: #060715;
    --font-family: Source Sans Pro;
    --gradient1: linear-gradient(96.34deg, #340B58 12.52%, #0D5268 85.44%);
    --gradient2: linear-gradient(101.19deg, #3A0647 -0.48%, #073346 37.82%, #143443 64.83%, #060715 95.17%);
    --gradient3: linear-gradient(83.37deg, #060715 -3.1%, #032533 56.9%, #412A59 117.23%);
    --gradient4: linear-gradient(229.63deg, #0A2B6D -29.17%, #430F3E 93.09%);
    --gradient5: linear-gradient(180deg, #F4F5F7 78.65%, rgba(244, 245, 247, 0) 100%);
    --gradient6: linear-gradient(67.86deg, #060715 -3.1%, #032533 56.9%, #412A59 117.23%);
}

.a-bg-navy {
    background: var(--a-navy) !important;
}

.a-bg-gradient4 {
    background: var(--gradient4);
}

/*TODO: hovers later*/
.a-bg-gradient4:hover {
    opacity: 1;
}

/* END CSS HOMEPAGE v 2.0 */

label {
    margin-bottom: 0.1rem;
}


/*TODO: Use tailwind instead*/

.ml-15, .mx-15 {
    margin-right: 15px !important;
}

.mr-15, .mx-15 {
    margin-left: 15px !important;
}

.ml-20, .mx-20 {
    margin-right: 20px !important;
}

.mr-20, .mx-20 {
    margin-left: 20px !important;
}

.text-overflow-hidden {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


@keyframes flickerAnimation {
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
}
.animate-flicker {
    -webkit-animation: flickerAnimation 2s infinite;
    -moz-animation: flickerAnimation 2s infinite;
    -o-animation: flickerAnimation 2s infinite;
    animation: flickerAnimation 2s infinite;
}


.react-tour-helper {
    --reactour-accent: #5cb7b7;
    line-height: 1.3;
    color: #2d2323;
    width: calc(100% - 19px) !important;
}

.low-opacity {
    transform: scale(0.0001);
    height: 20px
}


/*TODO: shall we move this to common.js?*/
input::placeholder {
    opacity: 0.65 !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

input:disabled, textarea:disabled {
    opacity: 0.65;
}

.wrap-max-three-lines {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Adjust this to your desired maximum number of lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

fieldset:disabled, textarea:disabled {
    opacity: 0.6;
}

/*TODO: for admin */
.admin-sticker-setup input[placeholder='Filter...'] {
    font-size: 1rem;
}


/* START FROM BOOTSTRAP */

*, ::after, ::before {
    box-sizing: border-box;
}

.container-fluid {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}


svg:not(:root) {
    overflow: hidden
}

.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px
}


/*col = basis-0 grow*/

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-bottom: .5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: #191919;
}

.h1 {
    font-size: 2.5rem
}

.h2 {
    font-size: 2rem
}

.h3 {
    font-size: 1.75rem
}

.h4 {
    font-size: 1.5rem
}

.h5 {
    font-size: 1.25rem
}

.h6 {
    font-size: 1rem
}
/* END FROM BOOTSTRAP */


/* START Ebook COLOR PALETTE */
.text-cp-blue {
    color: #0066FF;
}

.border-cp-blue {
    border-color: #0066FF;
}

.bg-cp-blue {
    background: #0066FF;
}

.bg-cp-lightblue {
    background: #DBE9FF;
}

.text-cp-snow {
    color: #E3EEFF;
}
/* END Ebook COLOR PALETTE */

#nprogress {
  pointer-events: none; }

.root {
  transition: 0.2s ease-in opacity; }

.nprogress-busy .root {
  opacity: 0.85; }

#nprogress .bar {
  background: #060715;
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px; }

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #060715, 0 0 5px #060715;
  opacity: 1;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px); }

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: none;
  position: fixed;
  top: 8px;
  width: 24px;
  height: 24px;
  right: 16px;
  border-width: 2px;
  z-index: 1031; }

.nprogress-custom-parent {
  overflow: hidden;
  position: relative; }

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute; }

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

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

/* Local shim stylesheet (intentionally minimal). Original dist/main.css from the
   private @agentflashio/frontend-component-library is unavailable. */

.react-bootstrap-table-pagination {
  direction: ltr; }
  .react-bootstrap-table-pagination ul {
    margin: 0;
    padding: 0; }
  .react-bootstrap-table-pagination .col-xs-6:first-child {
    display: none; }

.react-bootstrap-table {
  overflow-x: auto;
  display: block; }

.react-bootstrap-table-page-btns-ul {
  float: none; }

.table {
  margin-bottom: 1rem;
  border: none; }
  .table tbody tr {
    cursor: pointer; }
    .table tbody tr:hover {
      background-color: #f9f9f9; }
  .table td,
  .table th {
    padding: .6rem;
    border-top: 0;
    font-size: 13px;
    border-right: none;
    border-left: none;
    border-bottom-width: 1px !important;
    vertical-align: middle; }
  .table th {
    font-weight: 500;
    font-size: 0.72rem;
    padding: 10px;
    color: #272a31d9;
    background: white;
    white-space: nowrap;
    text-transform: uppercase; }
    .table th:focus {
      outline: none; }

.card-box {
  padding: 2rem;
  border-radius: 4px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12);
  background-color: var(--white); }

@media screen and (max-width: 575px) {
  .react-bootstrap-table-page-btns-ul {
    right: 10px; } }