/* Copyright 2019 Software Exchange, LLC */
/** Helps scaling issues **/
@media only screen and( -webkit-min-device-pixel-ratio: 1.25 ),
  only screen and(      -o-min-device-pixel-ratio: 5/4 ),
  only screen and( min-resolution: 120dpi ),
  only screen and( min-resolution: 1.25dppx ) {
  body {
    font-size: 1rem;
  }
}

:root{
  /* BS color override for 508 contrast */
  --primary: #0068D6;
  --info: #0068D6;
}

.print-show,
.print-show-inline {
  display: none !important;
}
@media print {
  .top-bar, .sidenav, .print-hide{
    display: none !important;
  }
  .card {
    border: 1px solid black;
  }
  .print-show {
    display: block !important;
  }
  .print-show-inline {
    display: inline !important;
  }
  .card, .row{
    display: block;
  }

  #main-container {
    height: auto;
  }
}
/**Our Theme**/


body {
  background-color: rgb(255, 255, 255);
  max-width: 99%;
  color: rgb(39, 39, 39);
  font-family: Roboto;
  font-weight: 700pt;
  min-height: 100%;
}

/* Override _reboot.scss */
a {
  color: hsl(211deg 100% 44%);
}
a:hover {
  color: hsl(211deg 100% 35%);
}

textarea {
  width: 100%;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
}

/**Bootstrap modifications**/
.card {
  background-color: white;
  margin-bottom: 1%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: none;
}

.card-focus {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.card-header {
  background: #1b324b;
  color: white;
  border: none;
  font-size: medium;
  padding-top: 14px;
  min-height: 50px;
}
.card-body {
  padding: 1%;
  border: none;
}

.card-header > .btn-link {
  color: white;
}

.header {
  height: 4vh;
}

.modal-header {
  background-color: #3e597b;
  color: white;
  padding: 5pt;
  padding-left: 10pt;
}

.fade {
  transition: opacity 0.01s linear;
}

/*Fix ng-select not showing what you are typing */
.select-dropdown > div {
  top: auto !important;
}
/*Sets the modal in the middle of the screen by putting its top left corner
in the center of the screen then transforming it half of its own height and width*/
.modal-dialog {
  top: 50%;
  transform: translateY(-50%) !important;
}

.modal-body {
  padding: 3%;
  max-height: 65vh;
  overflow-y: scroll;
  min-height: 10vh;
  min-width: 25vw;
}
.top-bar {
  background-color: #CCCCCC;
  z-index: 99;
  margin-bottom: 9px;
  min-height: 40px;
  max-height: 80px;
}

.user-bar-center_links {
  top: 25%;
  right: 0%;
  position: absolute;
}

/* The side navigation menu */
.sidenav {
  background-color: #435466;
  border-radius: 3px;
  padding: 0px 15px 0px 0px !important;
  overflow-y: auto;
}
@media screen and (min-width: 768px) {
  .sidenav {
    min-height: calc(92vh - 10px);
    height: calc(92vh - 10px);
  }
}

/* The navigation menu links */
.sidenav a {
  text-decoration: none;
  text-align: left;
  font-size: 1em;
  width: 100%;
  color: #fff;
  display: block;
  padding: 10px 0px 10px 10px !important;
  margin: 0px 0px 0px 15px;
}

.sidenav a span {
  color: #fff;
}

.sidenav a:hover,
.offcanvas a:focus,
.nav-active,
.sidenav a:active,
.sidenav a:hover span {
  color: #ff8b48 !important;
  background-color: #1c334c !important;
}

.navbar-brand {
  background-color: transparent;
  margin-left: 5%;
  margin-right: 5%;
  width: 100%;
}

.navbar-brand a:hover {
  background-color: #f1f1f8;
}

label {
  font-weight: bold;
  margin-bottom: 5px !important;
}
.logo-img {
  width: 100%;
}
.nav-icon {
  font-size: 1.5em !important;
  padding-right: 2%;
  margin-right: 3%;
  font-size: 2em;
  width: 3hh;
  color: #3d3d3d;
}

/* When you mouse over the navigation links, change their color */

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-width: 800px) {
  .sidenav {
    padding-top: 5vh;
  }
  .sidenav a {
    font-size: 12px;
  }
}

/* Custom HR that allows text to be typed in the middle of it */
.hr-sect {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  color: rgba(0, 0, 0, 0.35);
  margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
  content: "";
  flex-grow: 1;
  background: rgba(0, 0, 0, 0.35);
  height: 1px;
  font-size: 0px;
  line-height: 0px;
  margin: 0px 8px;
}

.content {
  overflow-y: scroll;
  width: 100%;
  max-height: 90vh;
}

/*Tree view classes*/
.tree-children.tree-children-no-padding {
  padding-left: 0;
}
.tree-children {
  padding-left: 20px;
  overflow: hidden;
}
.node-drop-slot {
  display: block;
  height: 2px;
}
.node-drop-slot.is-dragging-over {
  background: #ddffee;
  height: 20px;
  border: 2px dotted #888;
}
.toggle-children-wrapper-expanded .toggle-children {
  transform: rotate(90deg);
}
.toggle-children-wrapper-collapsed .toggle-children {
  transform: rotate(0);
}
.toggle-children-wrapper {
  padding: 2px 3px 5px 1px;
}
/* tslint:disable */
.toggle-children {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABAhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYzRkRFQjcxODUzNTExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYzRkRFQjcwODUzNTExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTk5NzA1OGEtZDI3OC00NDZkLWE4ODgtNGM4MGQ4YWI1NzNmIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzRkZmQxMGMtY2NlNS0xMTc4LWE5OGQtY2NkZmM5ODk5YWYwIi8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+Z2x5cGhpY29uczwvcmRmOmxpPiA8L3JkZjpBbHQ+IDwvZGM6dGl0bGU+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+5iogFwAAAGhJREFUeNpiYGBgKABigf///zOQg0EARH4A4gZyDIIZ8B/JoAJKDIDhB0CcQIkBRBtEyABkgxwoMQCGD6AbRKoBGAYxQgXIBRuZGKgAKPIC3QLxArnRSHZCIjspk52ZKMrOFBUoAAEGAKnq593MQAZtAAAAAElFTkSuQmCC");
  height: 8px;
  width: 9px;
  background-size: contain;
  display: inline-block;
  position: relative;
  top: 1px;
  background-repeat: no-repeat;
  background-position: center;
}
.toggle-children-placeholder {
  display: inline-block;
  height: 10px;
  width: 10px;
  position: relative;
  top: 1px;
  padding-right: 3px;
}
.node-content-wrapper {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 2px;
  transition: background-color 0.15s, box-shadow 0.15s;
}
.node-wrapper {
  display: flex;
  align-items: flex-start;
}
.node-content-wrapper-active,
.node-content-wrapper.node-content-wrapper-active:hover,
.node-content-wrapper-active.node-content-wrapper-focused {
  background: #beebff;
}
.node-content-wrapper-focused {
  background: #e7f4f9;
}
.node-content-wrapper:hover {
  background: #f7fbff;
}
.node-content-wrapper-active,
.node-content-wrapper-focused,
.node-content-wrapper:hover {
  box-shadow: inset 0 0 1px #999;
}
.node-content-wrapper.is-dragging-over {
  background: #ddffee;
  box-shadow: inset 0 0 1px #999;
}
.node-content-wrapper.is-dragging-over-disabled {
  opacity: 0.5;
}

tree-viewport {
  height: 100%;
  overflow: auto;
  display: block;
}
.tree-children {
  padding-left: 20px;
}
.empty-tree-drop-slot .node-drop-slot {
  height: 20px;
  min-width: 100px;
}
.angular-tree-component {
  width: 100%;
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  user-select: none; /* non-prefixed version, currently not supported by any browser */
}

tree-root .angular-tree-component-rtl {
  direction: rtl;
}
tree-root
  .angular-tree-component-rtl
  .toggle-children-wrapper-collapsed
  .toggle-children {
  transform: rotate(180deg) !important;
}
tree-root .angular-tree-component-rtl .tree-children {
  padding-right: 20px;
  padding-left: 0;
}

tree-node-checkbox {
  padding: 1px;
}

/*Allow table body scroll*/
.table-scroll tbody {
  display: block;
  overflow-y: scroll;
}
.table-scroll thead,
.table-scroll tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.table-scroll thead {
  width: calc(
    100% - 1.2em
  ); /* roughly the width of the scrollbar being subtracted from thead*/
}
input[type] {
  box-shadow: none;
}
th {
  font-weight: normal;
}
.btn-horizontal-group-rightside {
  margin-right: 1em;
  float: right;
}
btn-horizontal-group-rightside:last-child {
  margin-right: 0em;
}
.btn-primary {
  white-space: nowrap;
  font-size: 1em;
  font-weight: bold;
  border-radius: 5px;
  border-color: #435466;
  border-style: solid;
  border-width: 2px;
  background-color: #f1f1f8;
  color: #435466;
  padding: 5px 10px 5px 10px;
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  transition: all 0s;
}
.btn-primary:hover {
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  transition: all 0s;
  border-color: #ff8b48;
  color: #ff8b48;
  background-color: #f1f1f8;
}
.btn-primary:disabled {
  border-color: #435466;
  color: #435466;
  background-color: #f1f1f8;
}
.customFileInput {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.customFileInput + label {
  white-space: nowrap;
  font-size: 1em;
  border-color: #435466;
  border-style: solid;
  border-radius: 5px;
  border-width: 2px;
  background-color: #f1f1f8;
  color: #435466;
  padding: 5px 10px 5px 10px;
}
.customFileInput:hover + label {
  border-color: #ff8b48;
  color: #ff8b48;
}
.close {
  opacity: 1;
  text-shadow: 0;
}
button.close span {
  color: white;
}
.modal-title {
  color: white;
}
h6.modal-title span {
  color: white;
}

/* Fix ng-select multiple expanding outside of container */
ng-select > div > .multiple > .option {
  max-width: 100%;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

/* Updated the contrast for Arrow and Close/Clear buttons of ng-select */
ng-select > .below > .single > .toggle,
ng-select > .above > .single > .toggle,
ng-select > .below > .single > .clear,
ng-select > .above > .multiple > .option > .deselect-option,
ng-select > .below > .multiple > .option > .deselect-option {
  color: #595959;
}

/* Fix contrast for ng-select pick-lists, for the selected item. */
ng-select select-dropdown .highlighted,
ng-select select-dropdown .selected.highlighted {
  background-color: hsl(207deg 90% 43%);

  /* Note: The CSS we are overriding is the following, pulled from
   * ng-select's source:

      select-dropdown .highlighted,
      select-dropdown .selected.highlighted {
        background-color: #2196f3; /* hsl(207deg 90% 54%) * /
        color: #fff;
      }

   * Since our selector is more specific than the original, we don't
   * need to include !important, which means we avoid introducing UX
   * regressions via the Law of Unintended Consequences.
   */
}

/* BEGIN: Universal Claim Form */

.stepwizard-step p {
  margin-top: 10px;
}

.stepwizard-row {
  display: table-row;
}

.stepwizard {
  display: table;
  width: 50%;
  position: relative;
}

.stepwizard-step button[disabled] {
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
  top: 12px;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 100%;
  height: 4px;
  background-color: #667b96;
  z-order: 0;
}

.stepwizard-step {
  display: table-cell;
  text-align: center;
  position: relative;
}

.box-form {
  margin: 10px auto 0px; /* top (left, right) bottom */
  background-color: #fff;
}

.box-background {
  background-color: #fff;
  padding-bottom: 14px;
}

.btn-circle {
  background-color: #fff;
  border-color: #667b96;
  width: 30px;
  height: 30px;
}

.active-button {background-color: #ff8b48 !important;}
.cdi-top {padding-bottom: 12px;}
.cdi-addButton {padding-top: 20px;}
.error{color:#a94442;font-size:smaller;}
.prescriber-padding{padding-left: 10px;}

/* END: Universal Claim Form*/

/*Logo CSS Begin */

.logoSubTextSideBar {
  display: block;
  margin-left: 1em;
  margin-right: auto;
  text-align:center;
  font-size:50%;
  font-weight: 700;
  color: #ffffff;
}

.logoSubTextUserBar {
  text-align:center;
  font-size:55%;
  font-weight: 550;
  color: #1999d4;
}

.logoSubText {
  display: block;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    font-size:80%;
    font-weight: 700;
    color: #1999d4;
}

/*Logo CSS End */

/* Landing Page Custom Begin */

.landingPageContainer {
  background-color: rgb(113, 127, 139);
  width: 100%;
  padding: 0pt;
  margin: 0pt;
  margin-bottom: 0pt;
}

.landingPageHeader {
  color: #FF8841;
  padding-top:15px;
}

/* Landing Page Custom End */


input {
  padding-left: 3px;
}

.btn-secondary {
  color: black;
  background-color: white;
}

.btn-link {
  background-color: transparent;
  border: none;
}

.btn-link > .ngb-dp-navigation-chevron {
  color: white;
}

.legacy-text-muted:hover {
color: white !important;
}

@media (min-width: 576px) {
  .form-inline .custom-select, .form-inline .input-group {
      width: 50%;
      margin: 0 1px;
  }
  }

.fix-row-margins {
  margin-right: 0px;
  margin-left: 0px;
}

.panel-heading .accordion-toggle:after {
  /* symbol for "opening" panels */
  font-family: 'FontAwesome';  /* essential for enabling these */
  content: "\f078";    /* adjust as needed, taken from font awesome */
  float: right;        /* adjust as needed */
  color: white;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
  /* symbol for "collapsed" panels */
  content: "\f077";    /* adjust as needed, taken from font awesome */
}

.modal-body iframe {
  border: none;
}

.stepwizard-container
{
  width: 100%;
}

html,body {
  height: 100%
}

#main {
  min-height: 100%;
  position: relative;
}

#content {
  padding-bottom: 2vh;
}

#footer {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
}

.text-primary{
  color: var(--primary) !important;
}

.bg-primary {
  background-color: var(--primary)!important;
}



#mySidenav{
  padding-right: 0;
}

.sidebar {
  width: 100%;
  min-height: calc(95vh - 40px);
  height: 100%;
  background: #435466;
  padding: 10px 0 0 0;
  border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.wrapper .sidebar ul {
  list-style: none;
}

.wrapper .sidebar ul li .fa {
  font-size: 18px;
}

.wrapper .sidebar ul li a {
  color: #fff;
  display: block;
  padding: 7px 7px 7px 7px;
}

.wrapper .sidebar ul li a.active {
  color: #ff8b48 !important;
  background-color: #1c334c !important;
}

.wrapper .sidebar ul li a.active .fa {
  color: #fff !important;
  background-color: #1c334c !important;
}

.wrapper .sidebar ul li:hover .fa {
  color: #ff8b48 !important;
  background-color: #1c334c !important;
}

.wrapper .sidebar ul li a:hover {
  color: #ff8b48 !important;
  background-color: #1c334c !important;
  text-decoration: none;
}

#content {
    margin-right: 5px;
}

.sidebar-logo {
   display: block;
  max-width:120px;
  max-height:95px;
  width: auto;
  height: auto;
}

.sidebar-logo-text {
  text-align:center;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
}


.menu-item
{

}

.side-nav-wrapper
{
  height:100%;
  max-width: 136px;
}


/* The leftnav menu */
.leftnav {
  width: 120px; /* Set the width of the leftnav */
  position: absolute;
  z-index: 1;
  top: 54px;
  left: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 10px;
  height: calc(100% - 54px);
  background: #435466;
  border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.main {
  margin-left: 120px; /* Same as the width of the leftnav */
  padding: 0 0 0 10px;
}

.leftnav ul {
  all: unset;
  list-style: none;
}

.leftnav ul li .fa {
  font-size: 16px;
}

 .leftnav ul li a {
  color: #fff;
  display: block;
  padding: 7px 0px 7px 4px;
  font-size: 12px;
  /* font-size: 0.92em; */
}

 .leftnav ul li a.active {
  color: #ff8b48 !important;
  background-color: #1c334c !important;
}

 .leftnav ul li a.active .fa {
  color: #fff !important;
  background-color: #1c334c !important;
}

 .leftnav ul li:hover .fa {
  color: #ff8b48 !important;
  background-color: #1c334c !important;
}

 .leftnav ul li a:hover {
  color: #ff8b48 !important;
  background-color: #1c334c !important;
  text-decoration: none;
}

.menu-icon
{
  min-width: 27px;
  display: flex;
  align-items: center;
}

.blue-bottom-border{
  border-bottom: 1px solid #1B324B;
  width:100%
}

.vert-middle-align{
  vertical-align: middle;
}

.p-t-25px{
  padding-top: 25px;
}

@media (max-height: 660px) {
  .leftnav {padding-top: 15px;}
  .leftnav ul li a {font-size: 12px;}
 }


@media print {
  .leftnav {
    display:none !important;
  }
  .main{
    margin-left: 0;
  }
}

ucf-layout .material-symbols-outlined {
	bottom: 3px;
	position: relative;
}

.table th app-tooltip span {
  color: #fff !important;
}

a#Register {
  display: inline-block;
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: 15px;
}

.month-year-picker {
  margin-left: 15px;
  margin-top: 10px;
}


.month-year-picker span{
  margin-right: 10px;
}

.csv-file-upload {
  margin-left: 15px;
  margin-top: 20px;
}

.csv-download-link {
    margin-left: 15px;
    margin-top: 8px;
}

.csv-file-upload input {
  width: 240px !important;
  border: none !important;
  font-size: 13px !important;
  margin: 0px;
  padding: 0 !important;
  height: 27px !important;
  display: flex;
}

.dispense-select {
  display: flex;
  justify-content: center;
  align-items: center;
}

  .dispense-select input {
    margin-top: -4px;
    margin-left: 5px;
  }

.bpmh-button {
  display: flex;
  margin-left: auto;
  align-items: center;
}

div.bpmh-button {
  margin-left: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

button.bpmh {
  margin-left: 10px;
}

.parent-label {
  position: relative;
}

  .parent-label.selected:before {
    border: solid #ffffff;
    border-width: 3px 0 0 0;
    content: "";
    display: block;
    height: 10px;
    left: 2px;
    position: absolute;
    top: 13px;
    transform: none;
    width: 9px;
    z-index: 1;
  }

  .parent-label.selected:after {
    content: "";
    display: block;
    height: 11px;
    width: 11px;
    left: 1px;
    position: absolute;
    top: 9px;
    background-color: #777a7c;
  }

.dispense-parent-label {
  position: relative;
  top: 4px;
}


  .dispense-parent-label.selected:before {
    border: solid #ffffff;
    border-width: 3px 0 0 0;
    content: "";
    display: block;
    height: 10px;
    left: 7px;
    position: absolute;
    top: 5px;
    transform: none;
    width: 9px;
    z-index: 1;
  }

  .dispense-parent-label.selected:after {
    content: "";
    display: block;
    height: 11px;
    width: 11px;
    left: 6px;
    position: absolute;
    top: 1px;
    background-color: #777a7c;
  }

iframe.angular-16-iframe {
  border: none;
  width: 100%;
  height: calc(100vh - 90px);
}

.backToInvestigativeTickets {
    text-decoration: none;
    color: white;
}

  .backToInvestigativeTickets:hover {
    text-decoration: none;
    color: white;
  }
  .custom-snackbar {
    z-index: 5 !important;
  }