@keyframes blinker {  
  50% { opacity: 0; }
}

@keyframes appear-success {
  0% {color: #ECF0F5;}
  100% {color: #007eac;}
}

@keyframes appear-fail {
  0% {color: #ECF0F5;}
  100% {color: #D14524;}
}

.subBlockImageBox{
  height:275px;
  margin-top:2px;
  margin-left:20px;
  margin-right:20px;
  margin-bottom:20px;
}

.imageBox{
  width:400px;
  margin-top:2px;
  margin-left:20px;
  margin-right:20px;
  margin-bottom:20px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
}

.bigImageBox{
  width:850px;
  margin-top:10px;
  margin-left:20px;
  margin-right:20px;
  margin-bottom:20px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
}

.biggerImageBox{
  width:1000px;
  margin-top:10px;
  margin-left:20px;
  margin-right:20px;
  margin-bottom:20px;
}

.smallImageBox{
  height:200px;
  margin-top:10px;
  margin-left:20px;
  margin-right:20px;
  margin-bottom:20px;
}

.smallImageBox2{
  height:300px;
  margin-top:10px;
  margin-left:20px;
  margin-right:20px;
  margin-bottom:20px;
}

.mediumImageBox{
  height:400px;
  margin-top:10px;
  margin-left:20px;
  margin-right:20px;
  margin-bottom:20px;
}

.guideNote {
  margin-top:30px;
  text-align:center;
  color:#007eac;
  font-size:13px;
  font-weight:500;
}

.shift-down{
  margin-top:10px !important;
}

.buttons_side_by_side{
  width: 85%;
  height: 200px;
  margin: auto;
}

.navigateButton {
  font-size: 40px !important;
  background-color: #007eac !important;
  opacity: 50%;
}

.buttons_one {
  width: 15%;
  height: 200px;
  float: left;
}

.buttons_two {
  margin-left: 27%;
  height: 200px;
}

.buttonClass {
  margin-right:10px;
  border-color:#999;
  margin-bottom:10px;
  font-size:12px;
}

.buttonShade1 {
  background-color:#ddd;
}

.buttonShade2 {
  background-color:#FFFFFF;
}

.buttonShade3 {
  background-color:#233845;
  color:#FFFFFF;
}

.ragTile {
  background-color:#FAFAFA;
  width:280px;
  margin:10px;
  padding:9px;
  border-radius:4px;
  text-align: left;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
}

.ragTileRed {
  border-left: 8px solid rgba(255, 0, 0, 0.8);
}

.ragTileOrange {
  border-left: 8px solid #FFCD42;
}

.ragTileGreen {
  border-left: 8px solid rgba(0, 128, 0, 0.8);
}

.ragTileBlank {
  border-left: 8px solid #ECF0F5;
}

.floatTop {
  display: inline-block;
  vertical-align:top;
  margin-left:20px;
}

.simpleTable {
    font-size:10px;
}

.dayChart {
  margin-top:30px;
  margin-right:20px;
} 

.statusFont {
  font-size:18px;
  font-weight:300;
}

.pendingStatus {
  color:#CE0A0A;
}

.submittedStatus {
  color:#007eac;
}

.catTile{
  font-size:14px;
  margin-bottom:10px;
  font-weight:400;
  padding:7px;
  border-radius:6px;
  text-align: center;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
}

.redCat{
  background-color: #E05261;
  color:#FFFFFF;
}

.greenCat{
  background-color: #007eac;
  color:#FFFFFF;
}

.amberCat{
  background-color: #EBEB62;
  color:#4B4B4B;
}

.noDataCat{
  background-color: #BFBFBF;
  color:#4B4B4B;
}

.plotPanel{
  width:210px;
  height:275px;
  margin-left:15px;
  margin-bottom:20px;
  padding:20px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius:6px;
  border:thin Solid #CCCCCC;
}

.plotPanel .main-svg {
  overflow: visible !important;
}

.drillPanel{
  width:600px;
  height:275px;
  margin-left:15px;
  margin-bottom:20px;
  padding:20px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius:6px;
  border:thin Solid #CCCCCC;
}

.dataTables_scrollHeadInner {
  background:#808080 !important;
  color:#FFFFFF;
  border-radius: 3px;
}


.loader-text {
  margin-top: 15px; 
  margin-left: 25px; 
  font-size: 20px;
}

.small-box {
  border-radius: 5px !important;
}

.title-modal {
  margin-top:10px;
  margin-bottom: 15px; 
  margin-left: 10px;
  font-size: 24px;
  font-weight: 800;
  color:#233845;
}

.mainTitle-font {
  line-height: 1;
  margin-left:25px;
  margin-top:15px;
  margin-bottom: 2px; 
  font-size: 40px;
  font-weight: 800;
  color:#363636;
}

.subTitle-font {
  margin-left:25px;
  margin-bottom: 15px; 
  font-size: 16px;
  font-weight: 400;
  color:#A6A6A6;
}

.subTitle-font2 {
  font-size: 16px;
  font-weight: 400;
  color:#A6A6A6;
}

.title-font {
  margin-left:15px;
  margin-top:20px;
  margin-bottom: 5px; 
  font-size: 20px;
  font-weight: 600;
  color:#A6A6A6;
}

.title-font-space {
  margin-top:40px;
  margin-bottom: 10px; 
  font-size: 20px;
  font-weight: 600;
  color:#cccccce0;
}

.sub-title-right {
  margin-left:15px;
  position:absolute;
  top:15px;
  right:150px;
  font-size: 16px;
  font-weight: 400;
  color:#A6A6A6;
}

.nudge-right {
  margin-left:15px;
}

.nudge-right-medium {
  margin-left:18px !important;
}

.nudge-right-large {
  margin-left:20px !important;
}

.main-header .logo {
	font-family: "Ubuntu", Tahoma, "Helvetica Neue", sans-serif;
  font-weight: normal;
  font-size: 18px;
	text-align: left;
}

.box.box-solid.box-primary>.box-header {
  color:#fff;
  background:#233845
}
                  
.box.box-solid.box-primary{
  border-bottom-color:#233845;
  border-left-color:#233845;
  border-right-color:#233845;
  border-top-color:#233845;
  overflow-x: hidden;
}


.table.dataTable tbody tr.active td {
  background-color: #ECF0F5 !important;
  color: #272822 !important;
}
            
.pagination>.active>a {
	background-color: #007eac !important;
	border-color: #007eac !important;
}

.selectize-dropdown {
    z-index: 1002;
}	

.dataTables_scrollHeadInner {
    background: #808080 !important;
    color: #FFFFFF;
    border-radius: 3px;
}

a {
  color: #e1a525;
}

a:active, a:focus, a:hover {
color: #636363;
}

.main-header .logo {
  font-family: "Ubuntu", Tahoma, "Helvetica Neue", sans-serif;
  font-weight: normal;
  font-size: 16px;
  text-align: left;
}

.btn {
  font-size: 12px !important;
  margin-top:26px !important;
}

.form-control {
  border-radius: 4px !important;
  font-size: 15px !important; 
}

.form-control:focus {
    border-color: #FBB82A;
    box-shadow: none;
}

.input-container:not(.input-container-inline) {
    width: 100%;
}

.selectize-input {
     font-size: 12px !important;
}

.selectize-dropdown {
     font-size: 12px !important;   
     z-index: 1002 !important; 
} 

table.dataTable thead th {
    
    border-bottom: 1px Solid #F4F4F4 !important; 
    
}

table.dataTable thead td {
    
    border-bottom: 1px Solid #F4F4F4 !important; 
    
}

div.dataTables_scrollBody>table {
    
    border-bottom: 1px Solid #F4F4F4 !important; 
    
} 

.whiteFont {
  color:#FFFFFF !important;
}

.tealFont {
  color:#007eac !important;
}

.sliderPanel {
  display: inline-block;
  vertical-align:top;
}

.radioBlock {
  font-size: 13px;
  margin-top:20px;
  margin-left:20px;
  margin-right:15px;
}

.small-box.bg-lime {
  background-color: #88c540 !important;
}

.small-box.bg-teal {
  background-color: #007eac !important;
}

.small-box.bg-purple {
  background-color: #884c91 !important;
}

.small-box.bg-navy {
  background-color: #233845 !important;
}

.small-box.bg-black {
  background-color: #C9CCD0 !important;
}

.main-sidebar {
  background-color: #F7F7F8 !important;
  border-right: 1px solid #BCC0C6 !important;
}

.skin-purple .sidebar-menu>li.active>a, .skin-purple .sidebar-menu>li:hover>a {
  color: #233845;
  background-color: #ecf0f5;
  border-left-color: #884c91;
  border-width: 8px;
}

.skin-purple .sidebar a {
  color: #233845;
}

.skin-purple .main-header .navbar {
    background-color: #884c91;
}

.skin-purple .main-header .logo {
    background-color: #884c91
}


.skin-green .sidebar-menu>li.active>a, .skin-green .sidebar-menu>li:hover>a {
  color: #233845;
  background-color: #ecf0f5;
  border-left-color: #007eac;
  border-width: 8px;
}

.skin-green .sidebar a {
  color: #233845;
}

.skin-green .main-header .navbar {
    background-color: #007eac;
}

.skin-green .main-header .logo {
    background-color: #007eac
}

.skin-green .sidebar-menu .treeview-menu {
    background: #FFFFFF;
}

/* Definition of class for sidebar sub-menu */
.skin-green .main-sidebar .sidebar .sidebar-menu .treeview-menu {
  color: #233845;
  background-color: #FFFFFF;
}

.skin-green .treeview-menu>li>a {
  color: #233845;
}

.skin-green .treeview-menu>li:hover>a {
  color: #233845;
  background-color: #FEECC6;
  border-left: 2px solid white;
}

.skin-green .treeview-menu>li.active>a{
    color: #233845;
    background-color: #F2F2F2;
    border-left: 2px solid white;
}

/* End definition of class for sidebar sub-menu */

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(35,56,69, 0.2);
  border-right: 1.1em solid rgba(35,56,69, 0.2);
  border-bottom: 1.1em solid rgba(35,56,69, 0.2);
  border-left: 1.1em solid #233845;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.modified-datatable {
  font-size: 11px !important; 
  margin-right: 10px; 
  min-height: 300px;
  display: inline-block;
}

.narrow-datatable {
  max-width:500px;
}

.scrolling-wrapper {
  margin-left: 25px; 
  margin-right: 25px; 
  overflow-x:auto;
} 

.icon-medium {
  font-size: 22px;
  font-weight: 200;
  display: inline-block;
  vertical-align: text-top;
  margin-top: 3px;
  color:#007eac;

}

.label-big {
  width:150px;
  display: inline-block;
}

.label-big2 {
  width:200px;
  display: inline-block;
}

.label-icon {
  margin-left:0px;
  font-size:36px;
  color:#FFFFFF;
  opacity:0.4;
}

.label-icon2 {
  margin-left:0px;
  font-size:26px;
  color:#FFFFFF;
  opacity:0.4;
}

.label-box {
  padding-top: 6px;
  padding-left: 10px;
  min-height: 35px;
  font-size: 34px;
  font-weight: 800;
}

.label-box2 {
  padding-top: 10px;
  padding-left: 10px;
  font-size: 26px;
  font-weight: 800;
}

.combo-box {
  height:100px;
  width:240px;
  color: #FFFFFF;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 11px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #ECF0F5;
  display: inline-block;
  vertical-align:top;
}

.combo-box-deep {
  height:180px;
  width:280px;
  color: #FFFFFF;
  margin-bottom: 10px;
  margin-left: 11px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #ECF0F5;
  display: inline-block;
  vertical-align:top;
}

.combo-green {
  background: #87C440;
}

.combo-green2 {
  background: #5eac31;
}

.combo-teal {
  background: #007eac;
}

.combo-teal2 {
  background: #3f9c58;
}

.combo-purple {
  background: #884C91;
}

.combo-grey {
  background: #A9A9A9;
}

.combo-dark {
  background: #233845;
}

.combo-light {
  background: #FAFAFA;
}

.combo-brown {
  background: #a13d2d;
}

.combo-blue {
  background: #007eac;
}

.combo-green2 {
  background: #84bd00;
}

.combo-sub-box {
  width:240px;
  background: #ECF0F5;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 11px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-left: 6px solid #B2B2B2;
  border-radius: 0px 6px 6px 0px;
  display: inline-block;
  
}

.ragBlockGreen {
  width:140px;
  height:30px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 4px 0px 0px 4px;
  background-color:#ECF0F5;
  display: inline-block;
}

.ragBlockAmber {
  width:70px;
  height:30px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  background-color:#FFCD42;
  display: inline-block;
}

.ragBlockRed {
  width:70px;
  height:30px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 4px 4px 0px;
  background-color:#E05261;
  display: inline-block;
}

.ragBlockGreenText {
  width:140px;
  font-size:11px;
  color:#233845;
  display: inline-block;
}

.ragBlockAmberText {
  width:70px;
  font-size:11px;
  color:#FFCD42;
  display: inline-block;
}

.ragBlockRedText {
  width:70px;
  font-size:11px;
  color:#E05261;
  display: inline-block;
}

.label-box-red {
  background: #F2DBDB !important;
}

.label-box-green {
  background: #88C540 !important;
}

.label-box-amber {
  background: #FFE07D !important;
}

.label-box-explainer {
  padding-left: 10px;
  min-height: 40px;
  font-size: 16px;
  font-weight: 200;
  padding-top: 6px;
}

.label-box-explainer2 {
  padding-left: 10px;
  min-height: 40px;
  font-size: 16px;
  font-weight: 200;
  padding-top: 0px;
}

#00011:hover {
  background-color: #FFFFFF !important;
}

.boxed {
  border: 1px solid #606060;
  border-radius: 3px;
  border-color:#E6E6E6;
  margin-bottom: 2px;
}

.boxed:hover {
  background-color:#F5F0EC;
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(35,56,69, 0.2);
  border-right: 1.1em solid rgba(35,56,69, 0.2);
  border-bottom: 1.1em solid rgba(35,56,69, 0.2);
  border-left: 1.1em solid #233845;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

.loader-container {
  display: flex;
  height: 500px;
  justify-content: center; 
  align-items: center;
}

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

.btn-loading-container {
  margin-left: 10px;
  font-size: 1.2em;
}
.btn-done-indicator {
  color: #3BCC64;
}
.btn-err {
  margin-top: 10px;
  color: red;
}

.trend-box {
  height: 40px;
  width: 40px;
  border-radius: 3px 3px 3px 3px;
  display: inline-block;
  vertical-align:middle;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.19);
  margin: 10px 2px 10px 0px;
  padding-top: 11px;
  font-size: 12px;
  text-align: center;
}


#water_tachometerActionButtons_input{
  color: #007eac !important;
  font-size: 20px !important;
}

#water_tachometerActionButtons_input:hover{
  background-color: #007eac !important;
  color: #f4f4f4 !important;
}

#water_tachometerActionButtons_input:active{
  background-color: #007eac !important;
  font-size: 21px !important;
}

.irs-single {
  background: #FBB82A !important;
}

.irs-bar-edge {
  background: #FBB82A !important;
}

.irs-bar {
  background: #FBB82A !important;
}

.timelapse-mainTitle-font {
  line-height: 1;
  margin-left:25px;
  margin-top:15px;
  margin-bottom: 2px; 
  font-size:22px;
  font-weight: 500;
  color:#808080;
}

.timelapse-subTitle-font {
  margin-left:25px;
  margin-bottom: 15px; 
  font-size: 36px;
  font-weight: 400;
  color:#007eac;
}

.box-header>.box-tools {
  position: absolute;
  right: 10px;
  top: -20px !important;
}

#ribs_legend:hover{
  color: #007eac;
  cursor: pointer;
}

#backbone_legend:hover{
  color: #007eac;
  cursor: pointer;
}

#wosep_icon:hover{
  color: #007eac;
  cursor: pointer;
}

#disposal_legend:hover{
  color: #007eac;
  cursor: pointer;
}

#block_producing_water_legend:hover{
  color: #007eac;
  cursor: pointer;
}

#ngl_fractionation_pipeline_legend:hover{
  color: #007eac;
  cursor: pointer;
}

#new_juaymah_ngl_tankfarm_legend:hover{
  color: #007eac;
  cursor: pointer;
}

#ras_tanura_terminal_legend:hover{
  color: #007eac;
  cursor: pointer;
}

#new_ngl_fractionation_plant_at_juaymah_legend:hover{
  color: #007eac;
  cursor: pointer;
}

#jubail_petrochemical_plant_legend:hover{
  color: #007eac;
  cursor: pointer;
}

.info-copy {
  padding: 6px 8px;
  font: 14px/16px Arial, Helvetica, sans-serif;
  background: white;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  border-radius: 5px;
}
.legend-copy {
  line-height: 18px;
  color: #555;
}

.leaflet-control-copy {
	float: left;
	clear: both;
}

.scrollIntoView-buffer {
  margin-top: 50px;
}

.main-header{
  border-bottom: 6px solid transparent;
  border-image: linear-gradient(to left, #ffffff , #FBB82A);
  border-image-slice: 1;
}

.skin-green .main-header .navbar .sidebar-toggle {
  background-color: #ffffff !important;
  color: #152238 !important;
}

.skin-green .main-header .navbar .sidebar-toggle:hover {
  background-color: #ffffff !important;
  color: #FBB82A !important;
}

.skin-green .main-header .navbar {
  background: #ffffff !important;
  color: #152238;
}

.skin-green .main-header .logo {
  background: #ffffff !important;
  color: #152238 !important;
}

.logo:hover{
  background-color:#ffffff !important;
}

.skin-green .sidebar-menu>li.active>a, .skin-green .sidebar-menu>li:hover>a {
  color: #152238;
  background-color: #ffffff;
  border-left-color: #FBB82A;
  border-width: 8px;
}

.content-wrapper, .right-side {
    min-height: 100%;
    background-color: #ffffff;
    z-index: 800;
}


.leaflet-control-layers-expanded {
    padding: 6px 10px 6px 6px;
    color: #333;
    background: #fff;
    opacity: 90% !important;
}

#keywordSearchContext_results {
  font-size:13px !important;
}

#homeImage_input:hover {
  cursor: pointer;
}

.element {
  animation: pulse 5s;
}

@keyframes pulse {
  0% {
    background-color: #007eac;
  }
  100% {
    background-color: #f4f4f4;
  }
}

#area_HomeButton_input, #block_HomeButton_input, #gcp_HomeButton_input, 
#jfgp_HomeButton_input, #ngl_HomeButton_input, #water_HomeButton_input, 
#block_BackButton_input, #gcp_BackButton_input, #home_videoInstructionsButton_input {
  animation: pulse 5s;
}

.glyphicon {
  margin-top: 20px !important;
    font-size: xx-large !important;
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: "Glyphicons Halflings";
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#home_videoInstructionsButton .btn {
    font-size: 30px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

/* Reactable table styles */

.reactBox {
  margin-top: 15px;
  margin-left: 25px;
  margin-right: 15px;
}

.react-table {
  font-size: 14px;
}

.react-table-inner {
  border: 1px solid hsl(213, 33%, 93%);
  border-radius: 4px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

.react-header {
  background-color: hsl(213, 45%, 97%);
  border-bottom-color: hsl(213, 33%, 93%);
  border-bottom-width: 1px;
  border-top-color: hsl(213, 33%, 93%);
  border-top-width: 1px;
  color: hsl(213, 13%, 33%);
}

.react-header-inner {
  background-color: hsl(213, 45%, 97%);
  border-bottom-color: hsl(213, 33%, 93%);
  border-bottom-width: 1px;
  color: hsl(213, 13%, 33%);
  
}

.ReactTable .rt-thead.-filters .rt-th {
  background-color: #F7F7F8
}

.rt-select-label {
  background-color: #F7F7F8
}

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

.flowChartCard {
  color:#3b4952;
  height:65px;
  line-height: 65px;
  width:150px;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 428px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #ECF0F5;
  text-align:center;
  font-size:18px;
  font-weight:800;
}

.flowChartCard:hover {
  color:#3b4952;
  height:65px;
  line-height: 65px;
  width:150px;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 428px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #ECF0F5;
  text-align:center;
  font-size:18px;
  font-weight:800;
  cursor: pointer;
}

.indentFlow {
  margin-left: 185px !important;
}

.mapPop {
  width:500px; 
  margin-top:75px; 
  margin-left:15px; 
  display:inline-block; 
  vertical-align:top;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #ECF0F5;
}

.mapPop:hover {
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.19);
  border-left: 8px solid #88A0AD;
}
.mapPop2 {
  width:600px;
  height: 500px;
  margin-top:15px; 
  margin-left:30px; 
  display:inline-block; 
  vertical-align:top;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #ECF0F5;
}

.mapPop2:hover {
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.19);
  border-left: 8px solid #88A0AD;
}

.mapPop-Large {
  width:800px; 
  margin-top:75px; 
  margin-left:15px; 
  display:inline-block; 
  vertical-align:top;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #ECF0F5;
}

.mapPop-Large:hover {
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.19);
  border-left: 8px solid #88A0AD;
}

.flowChartCardSub {
  color:#3b4952;
  height:65px;
  width:150px;
  margin-bottom: 10px;
  margin-left: 15px;
  padding: 15px 7px 0px 7px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #ECF0F5;
  display: inline-block;
  text-align:center;
  font-size:13px;
  font-weight:800;
  vertical-align:top;
}

.flowChartCardSub:hover {
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
}

.cardHighlight {
  background: #ffae00 !important;
  color:#FFFFFF !important;
  border-left: 8px solid #fee7b8 !important;
}

.cardHighlight:hover {
  color:#3b4952 !important;
  background: #FEE7B8 !important;
  border-left: 8px solid #FBB92C !important;
}

.cardLowlight {
  background: #FEE7B8 !important;
  border-left: 8px solid #FBB92C !important;
}

.cardLowlight:hover {
  background: #ffae00 !important;
  color:#FFFFFF !important;
  border-left: 8px solid #fee7b8 !important;
}

.lineUp{
  vertical-align:top;
  display:inline-block;
  margin-left:10px;
}

.tag {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 15px;
  font-weight: 600;
  font-size: 12px;
}

/*Yellow*/
.key-color-1 {
  background: #fcba03;
  color: #fcba03;
}

/*Red*/
.key-color-2 {
  background: #e65245;
  color: #e65245;
}

/*Blue*/
.key-color-3 {
  background: #4580e6;
  color: #4580e6;
}

/*Green*/
.key-color-4 {
  background: #5dc960;
  color: #5dc960;
}

/*Pink*/
.key-color-5 {
  background: #d86dde;
  color: #d86dde;
}

/*Teal*/
.key-color-6 {
  background: #40ded6;
  color: #40ded6;
}

.react-table-disabled{
  cursor: no-drop;
  color: lightgrey;
}

.react-table-pointer{
  cursor: pointer;
  color: lightgrey;
}

#humberOveriewElementsTable:target .rt-tr-group:nth-child(4) {
  color: lightgrey;
}

.nodata-card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
}

.nodata-card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.nodata-container {
  padding: 2px 16px;
}

/*Map Legend*/
#natural_gas_pipeline:hover,
#overhead_cables:hover,
#available_land:hover,
#new_facility:hover,
#existing_facility:hover,
#co2_network_pipeline:hover,
#co2_export_pipeline:hover,
#h2_network_pipeline:hover,
#flue_gas:hover,
#building_substation:hover {
  cursor:pointer;
  width:45px;
  height:12px;
}
#project_element_one_natural_gas_pipeline:hover,
#project_element_one_overhead_cables:hover,
#project_element_one_available_land:hover,
#project_element_one_new_facility:hover,
#project_element_one_existing_facility:hover,
#project_element_one_co2_network_pipeline:hover,
#project_element_one_co2_export_pipeline:hover,
#project_element_one_h2_network_pipeline:hover,
#project_element_one_flue_gas:hover,
#project_element_one_building_substation:hover {
  cursor:pointer;
  width:45px;
  height:12px;
}
#project_element_two_natural_gas_pipeline:hover,
#project_element_two_overhead_cables:hover,
#project_element_two_available_land:hover,
#project_element_two_new_facility:hover,
#project_element_two_existing_facility:hover,
#project_element_two_co2_network_pipeline:hover,
#project_element_two_co2_export_pipeline:hover,
#project_element_two_h2_network_pipeline:hover,
#project_element_two_flue_gas:hover,
#project_element_two_building_substation:hover {
  cursor:pointer;
  width:45px;
  height:12px;
}

#project_element_three_natural_gas_pipeline:hover,
#project_element_three_overhead_cables:hover,
#project_element_three_available_land:hover,
#project_element_three_new_facility:hover,
#project_element_three_existing_facility:hover,
#project_element_three_co2_network_pipeline:hover,
#project_element_three_co2_export_pipeline:hover,
#project_element_three_h2_network_pipeline:hover,
#project_element_three_flue_gas:hover,
#project_element_three_building_substation:hover {
  cursor:pointer;
  width:45px;
  height:12px;
}

#flowscheme_natural_gas_pipeline:hover,
#flowscheme_overhead_cables:hover,
#flowscheme_available_land:hover,
#flowscheme_new_facility:hover,
#flowscheme_existing_facility:hover,
#flowscheme_co2_network_pipeline:hover,
#flowscheme_co2_export_pipeline:hover,
#flowscheme_h2_network_pipeline:hover,
#flowscheme_flue_gas:hover,
#flowscheme_building_substation:hover {
  cursor:pointer;
  width:45px;
  height:12px;
}

.legend-background{
  background:white;
}

#subClusterGeoMap_legend_toggle:hover,
#projElementOneGeoMap_legend_toggle:hover,
#projElementTwoGeoMap_legend_toggle:hover,
#projElementThreeGeoMap_legend_toggle:hover,
#flowschemeGeoMap_legend_toggle:hover{
  cursor:pointer;
  background:#F4F4F4;
}

.flowSchemeText {
  font-size: 12px;
  padding-top: 10px;
  padding-left: 20px;
}

.flowSchemeInvisible {
  height:45px;
  line-height: 65px;
  width:110px;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 250px;
}

.flowSchemeColOne {
  color:#3b4952;
  height:45px;
  line-height: 45px;
  width:90px;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 2px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #233845;
  text-align:center;
  font-size:16px;
  font-weight:600;
}

.flowSchemeColOne:hover {
  color:#3b4952;
  height:45px;
  line-height: 45px;
  width:90px;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 2px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #233845;
  text-align:center;
  font-size:16px;
  font-weight:600;
  cursor: pointer;
}

.flowSchemeColTwo {
  color:#3b4952;
  height:45px;
  line-height: 65px;
  width:80px;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 50px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #ECF0F5;
  text-align:center;
  font-size:12px;
  font-weight:700;
}

.flowSchemeColTwo:hover {
  color:#3b4952;
  height:45px;
  line-height: 65px;
  width:80px;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 50px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #ECF0F5;
  text-align:center;
  font-size:12px;
  font-weight:700;
  cursor: pointer;
}

.flowSchemeColThree {
  color:#3b4952;
  height:40px;
  line-height: 45px;
  width:60px;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 50px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #ECF0F5;
  text-align:center;
  font-size:10px;
  font-weight:700;
}

.flowSchemeColThree:hover {
  color:#3b4952;
  height:40px;
  line-height: 45px;
  width:60px;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 50px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #ECF0F5;
  text-align:center;
  font-size:10px;
  font-weight:700;
  cursor: pointer;
}

.flowSchemeColFour {
  color:#3b4952;
  height:45px;
  line-height: 65px;
  width:110px;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 150px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #ECF0F5;
  text-align:center;
  font-size:12px;
  font-weight:700;
}

.flowSchemeColFour:hover {
  color:#3b4952;
  height:45px;
  line-height: 65px;
  width:110px;
  margin-top: 15px;
  margin-left: 150px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #ECF0F5;
  text-align:center;
  font-size:12px;
  font-weight:700;
  cursor: pointer;
}

.flowSchemeColFive {
  color:#3b4952;
  height:45px;
  line-height: 65px;
  width:110px;
  margin-top: 15px;
  margin-left: 80px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #ECF0F5;
  text-align:center;
  font-size:12px;
  font-weight:700;
}

.flowSchemeColFive:hover {
  color:#3b4952;
  height:45px;
  line-height: 65px;
  width:110px;
  margin-top: 15px;
  margin-left: 80px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #ECF0F5;
  text-align:center;
  font-size:12px;
  font-weight:700;
  cursor: pointer;
}

.flowSchemeColSix {
  color:#3b4952;
  height:20px;
  line-height: 25px;
  width:70px;
  margin-top: 15px;
  margin-left: 90px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #ECF0F5;
  text-align:center;
  font-size:12px;
  font-weight:700;
}

.flowSchemeColSix:hover {
  color:#3b4952;
  height:20px;
  line-height: 25px;
  width:70px;
  margin-top: 15px;
  margin-left: 90px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #ECF0F5;
  text-align:center;
  font-size:12px;
  font-weight:700;
  cursor: pointer;
}

.flowSchemeCardSub {
  color:#3b4952;
  height:65px;
  width:150px;
  margin-bottom: 10px;
  margin-left: 15px;
  padding: 15px 7px 0px 7px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0px 6px 6px 0px;
  border-left: 8px solid #ECF0F5;
  display: inline-block;
  text-align:center;
  font-size:13px;
  font-weight:800;
  vertical-align:top;
}

.flowSchemeCardSub:hover {
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
}

.highlightText{
  color:#4ec24a;
  font-weight:500;
}

.highlightLine{
  border-top:1px solid #4ec24a !important;
}

.highlightArrow{
  border: solid #4ec24a !important;
  border-width: 0 1px 1px 0  !important;
  display: inline-block  !important;
  padding: 2px !important;
}

.cardPurplelight {
  background: #d9b9eb !important;
  border-left: 8px solid #9b66ba !important;
}

.cardGreenlight {
  background: #4ec24a !important;
  border-left: 8px solid #52a64e !important;
}

.cardGreenlight:hover {
  background: #4ec24a !important;
  color:#FFFFFF !important;
  border-left: 8px solid #52a64e !important;
}

.arrow {
  border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 2px;
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

#p66_panel {
  position: relative;
}

#greenh2line,
#verticallinkline,
#co2ccverticalline
 {
  position: absolute;
  z-index: 10;
}

.redLineVertical{
  border-right:1px solid #ff4e33 !important;
}

.redLineHorizontal{
  border-top:1px solid #ff4e33 !important;
}

.redLineHorizontalBelow{
  border-bottom:1px solid #ff4e33 !important;
  color: #ff4e33 !important;
}

.redLineArrow{
  border: solid #ff4e33 !important;
  border-width: 0 1px 1px 0 !important;
  display: inline-block !important;
  padding: 2px !important;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #DDDDDD;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.landing-panel{
  color:#152238;
  font-size:15px;
  padding:25px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}

.button-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top:50px;
  transform: translate(-50%);
}

.modal-content {
  border-radius: 6px;
  margin-top:100px;
}

#requestAccess_input{
  background-color:#152238;
  color:#f4f4f4;
}

#requestAccess_input:hover{
  opacity:0.85;
}

.row {
  display: flex;
}

.column {
  flex: 50%;
}

.required-field::placeholder{
  color:#e04343;
}

.qr-form {
  height: 100%;
  width:100%;
  max-width: 800px;
  border-radius:10px;
  background-color: #fff;
}

.qr-header-box {
  position:relative;
  margin: auto;
  height: 290px;
  border: 35px solid #007069;
  border-radius: 0px 0px 5px 5px;
  background-color: #007069;
  background-image: url(../images/wood_logo_white.png);
  background-position: initial;
  background-size: 200px;
  background-repeat: no-repeat;
}

.qr-body-box {
  position:relative;
  margin: auto;
  background-color: #fff;
  min-height: 500px;
}

.qr-header-text {
  position:absolute;
  bottom:0px;
  left:0px;
  font-size: 16px;
  color: white;
}

.qr-title-text {
  font-size: 25px;
  position:absolute;
  bottom:20%;
  left:0px;
  color: white;
}

.qr-question{
  background-color: #e6f5f2;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  margin-left:50px;
  margin-right:50px;
  height:auto; 
  width:auto;
}

.qr-question-number {
  color: #fff;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.qr-question-number-box {
  height: 35px;
  width: 35px;
  background-color: #007069;
  color: #fff;
  margin-left: 15px;
  position: absolute;
  display: table;
}

.qr-question-text {
  color: #808080;
  width: 100%;
  margin-top: 50px !important;
  margin-bottom: 10px;
  margin-left: 15px;
  display: table;
  text-align: left;
  font-size: 16px;
}
.qr-question-input{
  background-color: #fff;
  padding-top: 15px;
  margin-left:50px;
  margin-right:50px;
  margin-bottom:35px;
  text-align: left;
}

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  background: #e6f5f2;
}

.qr-submit-btn {
  background-color: #007069;
  width:50px;
  font-size: 22px;
  margin: 5px;
  color: #fff;
  text-align:center;
}

.qr-submit-btn:hover, .qr-submit-btn:active, .qr-submit-btn:focus, .qr-submit-btn:visited {
  background-color: #007069;
  width:50px;
  font-size: 22px;
  margin: 5px;
  color: #fff;
  text-align:center;
}


/*f7 edits to CSS file*/
.list{
  width: 100%;
}

.smart-select .item-after {
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  display: block;
}

/* Custom color theme */
:root {
  --f7-theme-color: #007069 !important;
  --f7-theme-color-rgb: 0, 160, 175 !important;
  --f7-theme-color-shade: #007b86 !important;
  --f7-theme-color-tint: #00c5d8 !important;
}

.required-question{
  background-color: #facaca;
}

.item-title {
  font-size: 16px !important;
  color: #808080 !important;
}

.icon-radio {
  font-size: 16px !important;
  color: #808080 !important;
}

.list input[type=date], .list input[type=datetime-local], .list input[type=email], .list input[type=month], .list input[type=number], .list input[type=password], .list input[type=search], .list input[type=tel], .list input[type=text], .list input[type=time], .list input[type=url], .list select {
  font-size: 16px !important;
  color: #808080 !important;
}

.list textarea {
  font-size: 16px !important;
  color: #808080 !important;
}

.item-after {
  font-size: 16px !important;
  color: #808080 !important;
}

.navbar .title {
  left: 0px !important;
}

.qr-language-select {
  position:absolute;
  top:0px;
  right:0px;
  width:200px;
}

.qr-language-select-box{
  position:relative;
  background-color: #007069;
}

:root #language_dropdown {
  --f7-list-margin-vertical: 0px;
}

#language_dropdown .item-content {
  background-color: #007069 !important;
  text-align: right;
}

#language_dropdown .item-label {
  color: #fff !important;
  text-align: right;
}

#language_dropdown{
  color: #fff !important;
}

/* Apply CSS class to a html element (in this case <option></option> */
#language_dropdown option {
  color: #808080 !important;
}

#language_dropdown select {
  color: #fff !important;
}

* {
  scroll-margin-top: 100px;
}

.shiny-notification {
  background-color: #e8e8e8;
  color: #007069;
  border: 1px solid #ccc;
  border-radius: 3px;
  opacity: .85;
  padding: 10px 8px 10px 10px;
  margin: 2px;
}

.toast-content{
  display: none !important;
}

.fab-opened .fab-buttons a:nth-child(7) {
    transition-delay: .3s;
}

.fab-opened .fab-buttons a:nth-child(8) {
    transition-delay: 350ms;
}

/* styling the mailto: hyperlink */
a[href^="mailto:"] {
  text-decoration: none;
  color: #18272F;
  font-weight: 700;
  position: relative;
}

a[href^="mailto:"]::before {
  content: '';
  background-color: #00b5ad78;
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 100%;
  height: 4px;
  transition: all .1s ease-in-out;
}

a[href^="mailto:"]:hover::before {
  bottom: 0;
  height: 100%;
}
/* END styling the mailto: hyperlink */

/* Below is the code necessary to handle
   the sheet modal swipe handler when the
   sheet is open
*/
.swipe-handler:after {
  content: '';
  width: 36px;
  height: 6px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -18px;
  margin-top: -3px;
  border-radius: 3px;
  background: #121212;
}

.light .split-layout .page-content:not(.login-screen-content, .panel-content),
.light .single-layout .page-content:not(.login-screen-content, .panel-content),
.light .tab-layout .page-content:not(.login-screen-content, .panel-content),
.light div.messages {
  background-color: gainsboro;
}

.panel.theme-dark {
  --f7-panel-bg-color: #000;
}

.split-layout .view-main {
  margin-left: 260px;
}

/* Left Panel right border when it is visible by breakpoint */
.split-layout .panel-left.panel-visible-by-breakpoint:before {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 1px;
  background: rgba(0,0,0,0.1);
  content: "";
  z-index: 6000;
}

/* Hide navbar link which opens left panel when it is visible by breakpoint */
.split-layout .panel-left.panel-visible-by-breakpoint ~ .view .navbar .panel-open[data-panel="left"] {
  display: none;
}

/*
Extra borders for main view and left panel for iOS theme when it behaves as panel (before breakpoint size)
*/
.ios .split-layout .panel-left:not(.panel-visible-by-breakpoint).panel-active ~ .view-main:before,
.ios .split-layout .panel-left:not(.panel-visible-by-breakpoint).panel-closing ~ .view-main:before {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 1px;
  background: rgba(0,0,0,0.1);
  content: "";
  z-index: 6000;
}

/* FAB label in dark mode */
.theme-dark .fab-label {
  background-color: #333;
  color: white;
}

/* Tabs standalone issue */
.tabs-standalone {
  height: auto;
}

.popup {
  overflow-y: auto;
}

.swiper {
  margin-top: 20px;
  width: 90%;
}

.theme-dark .swiper-slide {
  background-color: #1c1c1d;
}

.swiper-slide {
  border-radius: var(--f7-card-border-radius);
  min-height: 400px;
}

.light .swiper-slide {
  background-color: white;
}

.swal2-container {
  z-index: 10000;
}

.swal2-actions {
  width: 90%;
}

.ui-datepicker {
  z-index: 10000 !important;
}