/* Base Styles and Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Inter, sans-serif;
  scroll-behavior: smooth;
}


:root {
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1;
    --header-height: 95px;
    --footer-height: 250px;
  --primary-bg: #ffffff;
  --text-color: #1A1F2C;
  --rain-color: #0071e3; /* #0EA5E9;  */
  --rain-dark: #0284c7;
  --rain-light: #e0f2fe;
  --flood-color: #3b82f6;
  --flood-light: #93c5fd;
  --flood-dark: #2563eb;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --red-500: #ef4444;
  --amber-500: #f59e0b;
  --green-500: #10b981;
  --blue-500: #3b82f6;
  --indigo-500: #6366f1;
  --violet-500: #8b5cf6;
  --cyan-500: #06b6d4;
  --teal-500: #14b8a6;

    --blue-light: #00E3E3;
    --blue-medium: #0072E3;
    --blue-dark: #0000E3;

  --border-radius: 0.75rem;
  --radius: 0.5rem;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-around: 0px -1px 15px 1px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) ;
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-right:  0 5px 0 0 rgba(0, 0, 0, 0.1), 0 5px 0 0  rgba(0, 0, 0, 0.06);
   --shadow-top:  5px 0 0 0 rgba(0, 0, 0, 0.1), 5px 0 0 0  rgba(0, 0, 0, 0.06);
   width        : 100%;
}


@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

h1 {

    font-family     : Inter, sans-serif;
    font-size       : 75px;
    line-height     : 1.05;
    font-weight     : 600;
    letter-spacing  : -0.015em;
    color: #676767;
}

h2 {
    font-family     : Inter, sans-serif;
    font-size       : 52px;
    line-height     : 1.07143;
    font-weight     : 600;
    letter-spacing  : 0.005em;
        color: #676767;
}

h3 {
    font-family     : Inter, sans-serif;
    font-size       : 24px;
    line-height     : 1.1428571429;
    font-weight     : 600;
    letter-spacing  : 0.007em;
        color: #676767;
}

h4 {
    font-family     : Inter, sans-serif;
    font-size       : 20px;
    line-height     : 1.1428571429;
    font-weight     : 600;
    letter-spacing  : 0.007em;
        color: #676767;
}

.h4--white {
    font-family     : Inter, sans-serif;
    font-size       : 20px;
    line-height     : 1.1428571429;
    font-weight     : 600;
    letter-spacing  : 0.007em;
    color       : white    !important;
}



h5 {
    font-family     : Inter, sans-serif;
    font-size       : 18px;
    line-height     : 1.1428571429;
    font-weight     : 600;
    letter-spacing  : 0.007em;
        color: #676767;
}

h6 {
    font-family     : Inter, sans-serif;
    font-size       : 16px;
    line-height     : 1.1428571429;
    font-weight     : 500;
    letter-spacing  : .007em;
        color: #676767;
}


p {
    font-family     : Inter, sans-serif;
    font-size       : 14px;
    line-height     : 1.2353641176;
    font-weight     : 400;
    letter-spacing  : -0.022em;
        color: #676767;
}

.text-xl {
    font-family     : Inter, sans-serif;
    font-size       : 1.25rem;
    line-height     : 1.75rem;
        color: #676767;
}

.text-sm {
    position        : relative          !important;
    font-family     : Inter, sans-serif;
    font-size       : 0.75rem;
    line-height     : 1.25rem;
        color: #676767;
}


.text-sm-grey {
    font-family     : Inter, sans-serif;
    font-size       : 0.75rem;
    line-height     : 1.25rem;
    color           : var(--gray-400);
}

.text-m-lightblue{
    font-family     : Inter, sans-serif;
    color           : #cbd5e1           !important;
    font-size       : 0.9rem            !important;
    line-height     : 1.3               !important;


}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #f3f6fb;
}

body {
  background-color: var(--primary-bg);
  color: var(--text-color);
  line-height: 1.6;

}

body.dimmed::before {
    background                  : rgba(0,0,0,.8);
    position                    : fixed;
    top                         : 0;
    right                       : 0;
    bottom                      : 0;
    left                        : 0;
    z-index                     : 1;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.loaderdiv{
    position        : fixed;
    top             : 0;
    right           : 0;
    bottom          : 0;
    left            : 0;
    background      : rgba(0,0,0,0.8);
}



.tiledivid{
    height                          : 100%;
    width                           : 100%;

}

#MonitoringFrameID{
    color                           : rgb(1, 1, 1);
    overflow                        : hidden;
    outline                         : none;
    height                          : 100%;
    width                           : 100%;
    position                        : relative;
    box-sizing                      : border-box;
    user-select                     : none;
    -webkit-tap-highlight-color     : transparent;
    display                         : flex;
    flex-direction                  : column;
    flex-wrap                       : wrap;
    justify-content                 : flex-start;

}

.homepagecontainer{
    top                             : 90px              !important;
    display                         : flex;
    flex-direction                  : row;
    flex-wrap                       : nowrap;
    align-items                     : flex-end;
    height                          : calc(100% - 210px)              !important;   /*calc(100% - 210px) !important; */
    overflow-y                      : auto              !important;
     -ms-overflow-style             : none;  /* IE/Edge */
    scrollbar-width                 : none;  /* Firefox */


    }

.homepagecontainer::-webkit-scrollbar {
  display                           : none;
}

.home-info-div {
    display                         : none;                /* default hidden until login */
    flex-direction                  : column;
    align-content                   : flex-start;
    flex-wrap                       : wrap;
    justify-content                 : center;
    align-items                     : flex-start;
    background-color                : transparent;
    border-left                     : 1px solid var(--gray-200);
    width                           : 300px;               /* matches sidebar width */
    padding-left                    : 12px;
}


.home_menubar_container{
    display                         : flex;
    flex-direction                  : row;
    align-content                   : space-around;
    flex-wrap                       : wrap;
    justify-content                 : space-between;
    align-items                     : center;
    padding-top                     : 0;
    padding-bottom                  : 0;
    padding-left                    : 10px;
    padding-right                   : 10px;
    top                             : 0;
    left                            : 0;
    width                           : 100%;
    height                          : 85px                          !important;
    box-shadow                      : 2px 0 10px rgba(0, 0, 0, 0.2);
    background-color                : white;
}

.menu_logo_div {
    position                        : relative;
    width                           : 150px;
    height                          : 100%;
    padding                         : 5px;

}

.home_mainmenu_div {
    position                        : relative;
    display                         : flex;
    height                          : 100%;
    flex-direction                  : row;
    flex-wrap                       : wrap;
    margin-left                     : auto;                /* push the menu area to the right */
    width                           : auto !important;     /* let it shrink-to-fit */
    overflow                        : visible !important;  /* so popups aren’t clipped */
}

.home_mainmenu_div nav {
    position                        : static !important;
    width                           : auto !important;
}

.home_submenu_div {
    position                        : relative;
    display                         : flex;
    height                          : 100%;
    width                           : 25%;
    flex-direction                  : row;
    align-items                     : center;
    align-content                   : center;
    flex-direction                  : row;
    flex-wrap                       : wrap;
    justify-content                 : flex-start;

}

.home_subscribe_div{
    position                        : relative;
    width                           : 150px;
    display                         : flex;
    flex-wrap                       : wrap;
    justify-content                 : center;
    align-items                     : center;
    align-content                   : center;
    height                          : 100% ;
    margin-left                     : 12px;                /* small gap from main menu */

}


nav {
    position                        : relative;
    display                         : flex;
    height                          : 100%;
    display                         : flex;
    flex-direction                  : row;
    flex-wrap                       : wrap;
    justify-content                 : flex-end;
    align-items                     : center;
    align-content                   : center;
}

.main_menu {
  display                   : flex;
  align-items               : center;
  font-family               : Inter, sans-serif;
  height                    : 100%;
}

.menu_item {
  display                   : flex;
  align-items               : center;
  font-family               : Inter, sans-serif     !important;
  font-size                 : 13px;
  line-height               : 1.2353641176;
  font-weight               : 400;
  color                     : #0066cc;
  letter-spacing            : -0.022em;
  height                    : 100%;
}

.menu_item:hover {
    border-bottom                   : 2px solid #0284c7;
      cursor                        : pointer;
}


.menu-disabled {
  pointer-events            : none !important;
  opacity                   : 0.4 !important;
  cursor                    : default !important;
}


.sub_menu_nav nav {
    position                        : relative;
    display                         : flex;
    height                          : 100%;
    display                         : flex;
    flex-direction                  : row;
    flex-wrap                       : wrap;
    justify-content                 : flex-start;
    align-items                     : center;
    align-content                   : center;
}






.editbox{
    display                         : flex;
    padding-top                     : 5px;
    padding-bottom                  : 5px;
    padding-left                    : 0.75rem;
    padding-right                   : 0.75rem;
    border-radius                   : 5px;
    border                          : 1px solid #e2e8f0;
    height                          : 2.5rem                    !important;
    font-size                       : 0.875rem;
    line-height                     : 1.25rem;
    }


.container {
  width                             : 100%;
  max-width                         : 1280px;
  margin                            : 0 auto;
  padding                           : 0 1rem;
  display                           : flex;
  flex-grow                         : 1;
  flex-direction                    : column;
  position                          : relative !important;
  overflow-y                        : auto !important;


}


.createdashboarddiv{
    display                     : flex                          !important;
    justify-content             : center                        !important;
    position                    : relative                      !important;
    flex-direction              : column                       ;
    height                      : 100%;
    width                       : 100%;

}


.container-popup{
    position                        : fixed                             !important;
    display                         : flex                             !important;
    flex-direction                  : row;
    justify-content                 : center;
    width                           : 50%                             !important;
/*    min-width                       : max-content                       !important; */
    background-color                : white;
    border-radius                   : 8px;
    box-shadow                      : 0 4px 16px rgba(0, 0, 0, 0.25)    !important;
    padding                         : 15px;
    height                          : auto                              !important;
 /*   max-width                       : 92vw; */
    box-sizing                      : border-box;
    z-index                         : 3000                              !important;
}

.container-popup > * {
    max-width                       : 100%                              !important;
    box-sizing                      : border-box                        !important;
}

/* Make the child define the intrinsic size of the popup */
.container-popup > .createdashboarddiv{
    position                        : static                            !important;
    display                         : flex                              !important;
    flex-direction                  : column;
    justify-content                 : center;
    flex-wrap                       : nowrap;
  /*  width                           : max-content                       !important; */
/*    height                          : max-content                       !important; */

    box-sizing                      : border-box                        !important;
}

/* Safety: allow inner content to wrap inside that child */
.container-popup > .createdashboarddiv > *{
    max-width                       : 100%                              !important;
    box-sizing                      : border-box                        !important;
}

.container-modal-centered{
    top                             : 0                                         !important;
    left                            : 0                                         !important;
    width                           : 400px                                     !important;
    height                          : 500px                                     !important;
    position                        : relative                                  !important;
    display                         : flex                                      !important;
    flex-direction                  : column                                    !important;
    justify-content                 : space-between                             !important;
    align-items                     : center                                    !important;
    background-color                : white;
    border-radius                   : 8px;
    box-shadow                      : 0 4px 16px rgba(0, 0, 0, 0.25)            !important;
    padding                         : 15px;
    position                        : fixed                                     !important;
}


 .tile{
    border-radius: 4px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
  }



/* Generic spacing for all tile cards */
.tilecard {
  position: relative;
  width: 350px;
  height: 330px ;
  margin: 10px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
  background-color: white !important;
  overflow: hidden;
  z-index: 1;
}

.titlepanel{
    background-color : #f8f8f8;
}

.tilecontentpanel {
  pointer-events        : none          !important;
  z-index               : 100           !important;
}

/* But allow events on actual content inside the panel */
.tilecontentpanel > * {
  pointer-events        : auto                          !important;
}

.tilecard:hover {
  box-shadow            : 0 4px 8px rgba(0,0,0,0.15)    !important;
}

.tilecard.dragging {
  opacity               : 0.8;
  box-shadow            : 0 10px 20px rgba(0,0,0,0.3);
  z-index               : 100;
}

/* Title bar styling */
.tilecontentpanel:first-of-type {
  width                 : 100%                          !important;
  height                : 30px                          !important;
  background-color      : #f8f8f8                       !important;
  border-bottom         : 1px solid #eaeaea             !important;
  display               : block;
  z-index               : 2;
  cursor                : move;
}

/* Content panel styling */
.tilecontentpanel:nth-of-type(2) {
  width                 : calc(100% - 10px)             !important;
  height                : calc(100% - 35px)             !important;
  background-color      : white                         !important;
  display               : block;
  pointer-events        : auto;
}



.card_contentdiv {
  display                   : flex                  !important;
  flex-direction            : column;
  position                  : relative              !important;
  flex                      : 1 1 auto              !important;
  justify-content           : center                !important;
  align-items               : center                !important;
  width                     : 100%                  !important;
  box-sizing                : border-box            !important;
  padding                   : 8px;
  background-color          : #e0e7ff;
/*  border-radius             : 4px; */
  height                    : calc(100% - 34px)     !important;
/*  margin                    : 5px;     */
/*  box-shadow                : 0 2px 5px rgba(0,0,0,0.1) ; */
  overflow                  : visible           !important;
  z-index                   : 1;

}



.card_textdiv {
    position            : relative;
    display             : flex;
    flex-direction      : row;
    background          : transparent;
    overflow            : hidden;
}

.card_icondiv{
    position            : relative;
    display             : flex;
    flex-direction      : column;
    background          : transparent;
    overflow            : hidden;
    width               : 40px;
    height              : 40px;
    align-items         : center ;
    justify-content     : center;
    font-size           : 18px;
    color               : #0EA5E9;
    box-shadow          : none !important;
}


.shadowdiv{
    top                 : 0                             !important;
    left                : 0                             !important;
    background-color    : grey;
    opacity             : 0.9;
    width               : 100%                          !important;
    height              : 100%                          !important;
    z-index             : 200                           !important;
    position            : relative;
}


/*
 canvas[id*="_Canvas"] {
  z-index: 10 !important;
  pointer-events: auto !important;
  position: relative !important;
}
*/


.innerfullscreendiv{
    height              : 100%;
    margin              : 10px;
}





.items-top{
    background-color        : white                                 !important;
}


.leftmenudiv{
    top: 20px !important;
   box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;

}


.items-bottom{
    margin-bottom           : 20px                  !important;
    padding-left            : 15px                  !important;
    background              : white                 !important;
}

.material-icons{
    font-size : 20px !important;
}

.navigatordiv{
    border                                  : none;
    box-shadow                              : 5px 0px 10px 1px rgba(0, 0, 0, 0.1) !important ;
    width                                   : 280px ;
    background-color                        : white;
    z-index                                 : 10;
    height                                  : 100%;
    display                                 : flex;
    flex-direction                          : column;
    justify-content                         : space-between;

}

.az_listbox {
    border                                  : none;
    padding-left                            : 15px;
}


.az_listbox td.selected{
    background-color                          : #e0f2fe; /* light blue */
    border-radius                             : 4px;
    color                                     : #0e0e0e;

}

.az_listbox td div {
  padding-left: 5px;
  box-sizing: border-box;
  width: 100%;
}


.az_listbox option:checked {
  background-color                          : #e0f2fe; /* light blue */
  border                                    : 1px solid #0284c7;
  border-radius                             : 3px;
  color                                     : #0e0e0e;
}

.az_listbox:focus{
    outline                                 : none;
}

.dashboardbodydiv {
  display               : flex          !important;
  flex-direction        : row           !important;

/*  3 May width: 100% !important; */

  position              : relative      !important;
  overflow              : visible       !important;
  padding-left          : 20px;
  padding-right         : 20px;
}

.errortitlediv{
    display                 : flex;

}

.largeexclamationdiv{
    height                  : 80px;
    width                   : 80px;
    position                : relative;
    color                   : #ab0000;
    display                 : flex;

}






.datecontrol{
    margin-top              : auto;
    margin-bottom           : auto;
    height                  : 1.4rem;
}

.filterpanel{
    margin-top          : auto;
    margin-bottom       : auto;
    display             : flex;
    flex-direction      : column;

}


/* The PLUS icon inside the div (bottom-right) */
.plusicon {
  position                      : relative ;
  bottom                        : 0 ;
  right                         : 0 ;
  left                          : auto          !important;
  width                         : 52px          !important;
  height                        : 52px          !important;
  display                       : flex ;
  align-items                   : center;
  justify-content               : center;
  font-size                     : 1.5rem ;
  background                    : #eef2f9;
  border-radius                 : 50%;
  box-shadow                    : 3px 3px 11px #b6c2d0, -1px -4px 9px 0px #ffffff   ;
  transition                    : box-shadow 0.2s, background 0.2s;
  cursor                        : pointer;
  outline                       : none;
  border                        : 1px solid #d1d9e6;
  margin                        : 20px;

}


/* The PLUS icon inside the div (bottom-right) */
.footer-nav-icon {
  position                      : relative ;
  bottom                        : 0 ;
  right                         : 0 ;
  left                          : auto          !important;
  width                         : 24px          !important;
  height                        : 24px          !important;
  display                       : flex ;
  align-items                   : center;
  justify-content               : center;
  font-size                     : 1.5rem ;
  background                    : #eef2f9;
  border-radius                 : 50%;
  box-shadow                    : 3px 3px 11px #b6c2d0, -1px -4px 9px 0px #ffffff   ;
  transition                    : box-shadow 0.2s, background 0.2s;
  cursor                        : pointer;
  outline                       : none;
  border                        : 1px solid #d1d9e6;
  margin                        : 20px;

}

/* The PLUS icon inside the div (bottom-right) */
/*.plusicon {
  position                      : relative ;
  bottom                        : 0 ;
  right                         : 0 ;
  left                          : auto          !important;
  width                         : 90px ;
  height                        : 100% ;
  display                       : flex ;
  align-items                   : center;
  justify-content               : center;
  font-size                     : 2.5rem ;
  color                         : #2563eb ;
  box-shadow                    : none;
  pointer-events                : auto;


}
      */


.plusicon:hover {
  box-shadow         : 2px 2px 6px #dde3ed,  -2px -2px 6px #ffffff;
  cursor                        : pointer;
}


/* Label inside the plus icon block */
.plusicon label {
  display                       : flex          !important;
  justify-content               : center        !important;
  align-items                   : center        !important;
  height                        : 100%          !important;
}

/* Style for the <i> icon inside the label */
.plusicon i {
  font-size                     : 1.5rem        !important;
  color                         : #676767       !important;
  left                          : auto          !important;
  cursor                        : pointer;
}






.settingsheaderdiv{
    position                            : relative;
    display                             : flex;
    align-items                         : center;
    flex-wrap                           : wrap;
    flex-direction                      : row;
    justify-content                     : space-between;
    height                              : 50px;
    top                                 : 0;
    left                                : 0;
    width                               : 100%;
}

.dashboardnamediv {
    box-sizing                          : border-box;
    position                            : relative;
    display                             : flex;
    flex-direction                      : row;
    align-items                         : center;
    gap                                 : 8px;
    flex-wrap                           : wrap;
    justify-content                     : flex-end;
}

.filterdiv{
    position                            : relative;
    top                                 : 0;
    display                             : flex;
    flex-direction                      : row;
    flex-wrap                           : wrap;
    align-content                       : flex-end;
    align-items                         : stretch;
    justify-content                     : space-evenly;

}

.mylocationcontainerdiv{
    display                             : flex;
    flex-direction                      : row;
    align-items                         : center;
    position                            : relative;
    top                                 : 0;
    left                                : 0;
}

.locationtitlediv{

}

.searchradiusdiv{


}

/* Center the login-form container in the viewport */
.pagecontrol_outer_container{
    position                : relative;
    justify-content         : flex-end;
    flex-direction          : column;
    height                  : calc(100% - 90px);
    width                   : 100%;
    display                 : flex;
    padding                 : 10px;

    overflow                : visible;

}

.pagecontrol_outer_container--large{
     min-height              : 50px;
}

.pagecontrol_outer_container > span {

    width                   : 100%          !important;
    height                  : 100%          !important;
    position                : relative;
    box-sizing              : border-box;
    pointer-events          : auto;
    display                 : flex;
    flex-direction          : column-reverse;
    align-items             : center;

}
/* Make the pagecontrol a normal, fluid block inside its parent */
.pagecontrol_fix {
  position   : relative !important;
  top        : 0 !important;
  left       : 0 !important;
  display    : block !important;   /* it's a SPAN by default */
  width      : 100%;
  height     : 100%;
  box-sizing : border-box;
  white-space: normal;             /* TMS sometimes sets nowrap on spans */
}

.innergridpanel{
    padding                 : 15px;
}

.pagecontrol_generic{
    outline                 : none;
    position                : relative;
    box-sizing              : border-box;
    user-select             : none;
    height                  : 100%;
    width                   : 100%;
    display                 : flex;
    flex-direction          : column;
    align-items             : stretch;
    flex-wrap               : nowrap;
    order                   : 2;
    min-width               : 0;
    min-height              : 0;
      transition: width 400ms ease-in-out !important;

}


.pagecontrol_generic > span{
    width                   : 100%              !important;
    height                  : 100%              !important;
}


.pagecontrol_container_div{
    outline                 : none;
    position                : relative;
    box-sizing              : border-box;
    user-select             : none;
    height                  : 100%;
    width                   : 100%;
    display                 : flex;
    flex-direction          : column;
    align-items             : flex-end;
    flex-wrap               : wrap;

}

.pagecontrol_container_div > span{
    width                   : 100%;
    height                  : calc(100% - 100px);
}

.pagecontrolbody{
    width                   : 100%;
    height                  : calc(100% - 100px);
    display                 : flex;
    flex-direction          : column-reverse;


}

.pagecontrol_header{
    width                   : 100%;
    height                  : 100%              !important;
}




#pagecontrolID{
    height          : calc(100% - 100px)        !important;
    top             : 0;
    display         : flex                      !important;
    flex-direction  : row;
    align-items     : flex-start;


}

#displaypagecontrol-id {
    order               : 2                     !important;
    height              : 100%                  !important;
    width               : 100%                  !important;
    border              : none                  !important;
    background-color    : transparent           !important;
    position            : static              !important;
    top                 : auto                     !important;
    left                : auto                     !important;
    right: auto;
    bottom:auto;
    display             : block                 !important;
    width               : 100%;
    height              : 100%;
    box-sizing          : border-box;
    white-space         : normal;
    flex                : 1 1 auto              !important;
}

#pagecontrolID2{
    height          : 100%                      !important;
    top             : 0;
    width           : 100%;

    display         : flex                      !important;
    flex-direction  : row;
    flex-wrap       : wrap;
    align-content   : stretch;
    justify-content : center ;
    align-items     : center;
    position        : relative;

}

.pgcontroldiv{
    position        : relative;
    width           : 100%;
    border-bottom   : 1px solid #e2e8f0;
    padding         : 1rem;


}

#pg_new_dashboard_id{
    display         : flex                      !important;
    flex-direction  : row;
    flex-wrap       : wrap;
    align-content   : center;
    position        : relative                  !important;

}

.tabsheet {
    display         : flex ;
    flex-direction  : column                !important;
    height          : 100%;
    width           : 100%;
    border-radius   : 8px;
}


#innerpagecontrol{
    height          : 200px                     !important;
    top             : 0;
    display         : flex                      !important;
    flex-direction  : row;
    align-items     : flex-start;
}


.logintabsheet {
    top             : 80px                  !important;
    display         : flex ;
    flex-direction  : column                !important;
    width           : 100%;
    padding         : 30px;
}


.tabsheet > div {
  height                    : 100%              !important;
  box-sizing                : border-box        !important;
  display                   : flex;
  align-items               : stretch;
  flex-direction            : row;
  justify-content           : space-evenly;
  width                     : 100%

}


span.tabsheet{

    width           : 100%                  !important;
  /*  box-shadow      : 0 0 15px 1px rgb(99 57 57 / 10%); */

}

.tabsheet .standardform{
    height          : calc(100% - 100px)    !important;
}




.pagecontrolsheetheader{
 /*   position        : relative              !important; */
    width           : 20%;
    z-index         : 0;
}




.tabs-container {
  margin-top        : 3rem;
  margin-left       : 20px;
  margin-right      : 20px;
}



.tabs-list.dashboard-tabs{
    top             : -80px                 !important;
    position        : absolute              !important;
}





.tabs-list {
  display           : flex;
  background-color  : white;
  border-radius     : 0.75rem;
  box-shadow        : 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  overflow          : hidden;
  margin-top        : 10px;
  margin-bottom     : 10px;
/*  margin-top        : 10px !important;
  margin            : 45px auto 2rem; */
  max-width         : max-content;
}





li.tab-button::marker{
    content         : ""                    !important;

    }

li.tab-list::marker {
    content         : ""                    !important;
    }


li.nav-item::marker {
display             : none                  !important;
content             : ""                    !important;
}


.tab-button {
    padding                     : 0.75rem 1.5rem;
    border                      : none;
    background                  : none;
    font-weight                 : 400;
    font-size                   : 0.75rem;
    color                       : #676767;
    cursor                      : pointer;
    transition                  : all 0.2s ease;
    white-space                 : nowrap;
    text-decoration             : none;
    display                     : block;
}

.tab-button:hover {
    color                       : white;
    background-color            : #6796f0;
}

.tab-button.active {
    font-weight                 : 500;
    color                       : white;
    background-color            : #6796f0;
    border-bottom               : 3px solid #0ea5e9;
}

/*
.tab-button {
  padding           : 0.75rem 1.5rem;
  border            : none;
  background        : none;
  font-weight       : 500;
  cursor            : pointer;
  transition        : all 0.2s ease;
  color             : #475569;
  display           : block                 !important;
}

.tab-button:hover {
  color             : #0284c7;
}

.tab-button.active {
  background-color  : #0EA5E9;
  color             : black;
  display           : block                 !important;
}  */

.tab-content-container {
  position          : relative;
}

.tab-content {
  display           : none;
}

.tab-content.active {
  display           : block;
  animation         : fadeIn 0.3s ease-out;

}

.nav-item {
    padding         : 0;
}

.pg_switch{
    position                : relative              !important;
    display                 : flex                  !important;
    flex-direction          : row;
    align-items             : flex-start;
}


.pg_switch_tabsheet {
    border                  : none                  !important;
    display                 : flex                  ;
    flex-direction          : column;
    width                   : 100%                  !important;

}/* Center the login-form container in the viewport */
.pagecontrol_outer_container{
    position                : relative;
    justify-content         : flex-end;
    flex-direction          : column;
    height                  : calc(100% - 90px);
    width                   : 100%;
    display                 : flex;
    padding                 : 10px;

    overflow                : visible;

}

.pagecontrol_outer_container--large{
     min-height              : 50px;
}

.pagecontrol_outer_container > span {

    width                   : 100%          !important;
    height                  : 100%          !important;
    position                : relative;
    box-sizing              : border-box;
    pointer-events          : auto;
    display                 : flex;
    flex-direction          : column-reverse;
    align-items             : center;

}
/* Make the pagecontrol a normal, fluid block inside its parent */
.pagecontrol_fix {
  position   : relative !important;
  top        : 0 !important;
  left       : 0 !important;
  display    : block !important;   /* it's a SPAN by default */
  width      : 100%;
  height     : 100%;
  box-sizing : border-box;
  white-space: normal;             /* TMS sometimes sets nowrap on spans */
}

.innergridpanel{
    padding                 : 15px;
}

.pagecontrol_generic{
        outline                 : none;
    position                : relative;
    box-sizing              : border-box;
    user-select             : none;
    height                  : 100%;
    width                   : 100%;
    display                 : flex;
    flex-direction          : column;
    align-items             : flex-end;
    flex-wrap               : wrap;
    order                   : 2;
}


.pagecontrol_generic > span{
    width                   : 100%              !important;
    height                  : 100%              !important;
}


.pagecontrol_container_div{
    outline                 : none;
    position                : relative;
    box-sizing              : border-box;
    user-select             : none;
    height                  : 100%;
    width                   : 100%;
    display                 : flex;
    flex-direction          : column;
    align-items             : flex-end;
    flex-wrap               : wrap;

}

.pagecontrol_container_div > span{
    width                   : 100%;
    height                  : calc(100% - 100px);
}

.pagecontrolbody{
    width                   : 100%;
    height                  : calc(100% - 100px);
    display                 : flex;
    flex-direction          : column-reverse;


}

.pagecontrol_header{
    width                   : 100%;
    height                  : 100%              !important;
}




#pagecontrolID{
    height          : calc(100% - 100px)        !important;
    top             : 0;
    display         : flex                      !important;
    flex-direction  : row;
    align-items     : flex-start;


}

#displaypagecontrol-id {
    order               : 2                     !important;
    height              : 100%                  !important;
    width               : 100%                  !important;
    border              : none                  !important;
    background-color    : transparent           !important;

     position   : relative !important;
  top        : 0 !important;
  left       : 0 !important;
  display    : block !important;   /* it's a SPAN by default */
  width      : 100%;
  height     : 100%;
  box-sizing : border-box;
  white-space: normal;
}

#pagecontrolID2{
    height          : 100%                      !important;
    top             : 0;
    width           : 100%;

    display         : flex                      !important;
    flex-direction  : row;
    flex-wrap       : wrap;
    align-content   : stretch;
    justify-content : center ;
    align-items     : center;
    position        : relative;

}

.pgcontroldiv{
    position        : relative;
    width           : 100%;
    border-bottom   : 1px solid #e2e8f0;
    padding         : 1rem;


}

#pg_new_dashboard_id{
    display         : flex                      !important;
    flex-direction  : row;
    flex-wrap       : wrap;
    align-content   : center;
    position        : relative                  !important;

}


#innerpagecontrol{
    height          : 200px                     !important;
    top             : 0;
    display         : flex                      !important;
    flex-direction  : row;
    align-items     : flex-start;
}

/*
.mapsheet    {
    top             : 50px                  !important;
    display         : flex ;
    flex-direction  : column                !important;
    height          : 100%                  !important;
    width           : 100%;
    padding         : 30px                  !important;
    border-radius   : 8px;

 }
 */


.tabsheet > div {
  height                    : 100%              !important;
  box-sizing                : border-box        !important;
  display                   : flex;
  align-items               : stretch;
  flex-direction            : row;
  justify-content           : space-evenly;
  width                     : 100%

}


span.tabsheet{

    width           : 100%                  !important;
  /*  box-shadow      : 0 0 15px 1px rgb(99 57 57 / 10%); */

}

.tabsheet .standardform{
    height          : calc(100% - 100px)    !important;
}




.pagecontrolsheetheader{
 /*   position        : relative              !important; */
    width           : 20%;
    z-index         : 0;
}




.tabs-container {
  margin-top        : 3rem;
  margin-left       : 20px;
  margin-right      : 20px;
}



.tabs-list.dashboard-tabs{
    top             : -80px                 !important;
    position        : absolute              !important;
}





.tabs-list {
  display           : flex;
  background-color  : white;
  border-radius     : 0.75rem;
  box-shadow        : 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  overflow          : hidden;
  margin-top        : 10px;
  margin-bottom     : 10px;
/*  margin-top        : 10px !important;
  margin            : 45px auto 2rem; */
  max-width         : max-content;
}





li.tab-button::marker{
    content         : ""                    !important;

    }

li.tab-list::marker {
    content         : ""                    !important;
    }


li.nav-item::marker {
display             : none                  !important;
content             : ""                    !important;
}


.tab-button {
    padding                     : 0.75rem 1.5rem;
    border                      : none;
    background                  : none;
    font-weight                 : 400;
    font-size                   : 0.75rem;
    color                       : #676767;
    cursor                      : pointer;
    transition                  : all 0.2s ease;
    white-space                 : nowrap;
    text-decoration             : none;
    display                     : block;
}

.tab-button:hover {
    color                       : white;
    background-color            : #6796f0;
}

.tab-button.active {
    font-weight                 : 500;
    color                       : white;
    background-color            : #6796f0;
    border-bottom               : 3px solid #0ea5e9;
}

/*
.tab-button {
  padding           : 0.75rem 1.5rem;
  border            : none;
  background        : none;
  font-weight       : 500;
  cursor            : pointer;
  transition        : all 0.2s ease;
  color             : #475569;
  display           : block                 !important;
}

.tab-button:hover {
  color             : #0284c7;
}

.tab-button.active {
  background-color  : #0EA5E9;
  color             : black;
  display           : block                 !important;
}  */

.tab-content-container {
  position          : relative;
}

.tab-content {
  display           : none;
}

.tab-content.active {
  display           : block;
  animation         : fadeIn 0.3s ease-out;

}

.nav-item {
    padding         : 0;
}

.pg_switch{
    position                : relative              !important;
    display                 : flex                  !important;
    flex-direction          : row;
    align-items             : flex-start;
}


.pg_switch_tabsheet {
    border                  : none                  !important;
    display                 : flex                  ;
    flex-direction          : column;
    width                   : 100%                  !important;

}/* Center the login-form container in the viewport */
.pagecontrol_outer_container{
    position                : relative;
    justify-content         : flex-end;
    flex-direction          : column;
    height                  : calc(100% - 90px);
    width                   : 100%;
    display                 : flex;
    padding                 : 10px;

    overflow                : visible;

}

.pagecontrol_outer_container--large{
     min-height              : 50px;
}

.pagecontrol_outer_container > span {

    width                   : 100%          !important;
    height                  : 100%          !important;
    position                : relative;
    box-sizing              : border-box;
    pointer-events          : auto;
    display                 : flex;
    flex-direction          : column-reverse;
    align-items             : center;

}
/* Make the pagecontrol a normal, fluid block inside its parent */
.pagecontrol_fix {
  position   : relative !important;
  top        : 0 !important;
  left       : 0 !important;
  display    : block !important;   /* it's a SPAN by default */
  width      : 100%;
  height     : 100%;
  box-sizing : border-box;
  white-space: normal;             /* TMS sometimes sets nowrap on spans */
}

.innergridpanel{
    padding                 : 15px;
}

.pagecontrol_generic{
        outline                 : none;
    position                : relative;
    box-sizing              : border-box;
    user-select             : none;
    height                  : 100%;
    width                   : 100%;
    display                 : flex;
    flex-direction          : column;
    align-items             : flex-end;
    flex-wrap               : wrap;
    order                   : 2;
}


.pagecontrol_generic > span{
    width                   : 100%              !important;
    height                  : 100%              !important;
}


.pagecontrol_container_div{
    outline                 : none;
    position                : relative;
    box-sizing              : border-box;
    user-select             : none;
    height                  : 100%;
    width                   : 100%;
    display                 : flex;
    flex-direction          : column;
    align-items             : flex-end;
    flex-wrap               : wrap;

}

.pagecontrol_container_div > span{
    width                   : 100%;
    height                  : calc(100% - 100px);
}

.pagecontrolbody{
    width                   : 100%;
    height                  : calc(100% - 100px);
    display                 : flex;
    flex-direction          : column-reverse;


}

.pagecontrol_header{
    width                   : 100%;
    height                  : 100%              !important;
}




#pagecontrolID{
    height          : calc(100% - 100px)        !important;
    top             : 0;
    display         : flex                      !important;
    flex-direction  : row;
    align-items     : flex-start;


}

#displaypagecontrol-id {
    order               : 2                     !important;
    height              : 100%                  !important;
    width               : 100%                  !important;
    border              : none                  !important;
    background-color    : transparent           !important;

     position   : relative !important;
  top        : 0 !important;
  left       : 0 !important;
  display    : block !important;   /* it's a SPAN by default */
  width      : 100%;
  height     : 100%;
  box-sizing : border-box;
  white-space: normal;
}

#pagecontrolID2{
    height          : 100%                      !important;
    top             : 0;
    width           : 100%;

    display         : flex                      !important;
    flex-direction  : row;
    flex-wrap       : wrap;
    align-content   : stretch;
    justify-content : center ;
    align-items     : center;
    position        : relative;

}

.pgcontroldiv{
    position        : relative;
    width           : 100%;
    border-bottom   : 1px solid #e2e8f0;
    padding         : 1rem;


}

#pg_new_dashboard_id{
    display         : flex                      !important;
    flex-direction  : row;
    flex-wrap       : wrap;
    align-content   : center;
    position        : relative                  !important;

}


#innerpagecontrol{
    height          : 200px                     !important;
    top             : 0;
    display         : flex                      !important;
    flex-direction  : row;
    align-items     : flex-start;
}



.tabsheet > div {
  height                    : 100%              !important;
  box-sizing                : border-box        !important;
  display                   : flex;
  align-items               : stretch;
  flex-direction            : row;
  justify-content           : space-evenly;
  width                     : 100%

}


span.tabsheet{

    width           : 100%                  !important;
  /*  box-shadow      : 0 0 15px 1px rgb(99 57 57 / 10%); */

}

.tabsheet .standardform{
    height          : calc(100% - 100px)    !important;
}




.pagecontrolsheetheader{
 /*   position        : relative              !important; */
    width           : 20%;
    z-index         : 0;
}




.tabs-container {
  margin-top        : 3rem;
  margin-left       : 20px;
  margin-right      : 20px;
}



.tabs-list.dashboard-tabs{
    top             : -80px                 !important;
    position        : absolute              !important;
}





.tabs-list {
  display           : flex;
  background-color  : white;
  border-radius     : 0.75rem;
  box-shadow        : 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  overflow          : hidden;
  margin-top        : 10px;
  margin-bottom     : 10px;
/*  margin-top        : 10px !important;
  margin            : 45px auto 2rem; */
  max-width         : max-content;
}





li.tab-button::marker{
    content         : ""                    !important;

    }

li.tab-list::marker {
    content         : ""                    !important;
    }


li.nav-item::marker {
display             : none                  !important;
content             : ""                    !important;
}


.tab-button {
    padding                     : 0.75rem 1.5rem;
    border                      : none;
    background                  : none;
    font-weight                 : 400;
    font-size                   : 0.75rem;
    color                       : #676767;
    cursor                      : pointer;
    transition                  : all 0.2s ease;
    white-space                 : nowrap;
    text-decoration             : none;
    display                     : block;
}

.tab-button:hover {
    color                       : white;
    background-color            : #6796f0;
}

.tab-button.active {
    font-weight                 : 500;
    color                       : white;
    background-color            : #6796f0;
    border-bottom               : 3px solid #0ea5e9;
}

/*
.tab-button {
  padding           : 0.75rem 1.5rem;
  border            : none;
  background        : none;
  font-weight       : 500;
  cursor            : pointer;
  transition        : all 0.2s ease;
  color             : #475569;
  display           : block                 !important;
}

.tab-button:hover {
  color             : #0284c7;
}

.tab-button.active {
  background-color  : #0EA5E9;
  color             : black;
  display           : block                 !important;
}  */

.tab-content-container {
  position          : relative;
}

.tab-content {
  display           : none;
}

.tab-content.active {
  display           : block;
  animation         : fadeIn 0.3s ease-out;

}

.nav-item {
    padding         : 0;
}

.pg_switch{
    position                : relative              !important;
    display                 : flex                  !important;
    flex-direction          : row;
    align-items             : flex-start;
}


.pg_switch_tabsheet {
    border                  : none                  !important;
    display                 : flex                  ;
    flex-direction          : column;
    width                   : 100%                  !important;

}


.dashboard {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.tilebodydiv{
    order                           : 1             !important;
    flex-grow                       : 1             !important;
    flex-shrink                     : 1             !important;
    flex-basis                      : 0             !important;
    position                        : relative      !important;
    height                          : 100%          !important;
    overflow                        : auto          !important;
    left                            : 0             !important;
    scrollbar-width                 : none;
    background-color                : #f9f9f994;
   }


.tilediv {
  order                     : 2                     !important;
  flex-grow                 : 1                     !important;
  flex-shrink               : 1                     !important;
  flex-basis                : 0                     !important;
  position                  : relative              !important;
  height                    : calc(100% - 100px)     !important;
  width                     : 100%                  !important;
  overflow                  : auto                  !important;
}

/* Ensure parent container has proper overflow handling */
.tileblock {
    overflow                : auto !important;
    display                 : flex;
    flex-wrap               : wrap;
    gap                     : 20px;
    padding                 : 20px;
    box-sizing              : border-box;
    scrollbar-width         : none;
    height                  : 100%;
}



.tilecloseicon,
.tilemaximizeicon,
.tilesettingsicon {
  cursor: pointer;
  z-index: 3;
}

.tilesettingsicon:hover{
   background-color     : #0EA5E9;
   color                : white;
}

.tilecloseicon:hover {
    background-color    : #ff5252;
    color               : white;
}

.tilemaximizeicon:hover {
    background-color    : #e0e0e0;
}


.showpasswordicon {
    display             : flex              !important;
    justify-content     : center            !important;
    align-items         : center            !important;
    color               : black;

    }


/* Override the label’s table-cell display and center its contents too */
.showpasswordicon > label {
  display               : flex              !important;
  justify-content       : center            !important;
  align-items           : center            !important;
  width                 : 100%;
  height                : 100%;
  margin                : 0;
  padding               : 0;
}

/* Ensure the icon itself doesn’t shift on active/click */
.showpasswordicon:active,
.showpasswordicon:focus {
  justify-content: center !important;
  align-items: center !important;
}

.showpasswordicon:hover{
   color: #0000ff;

}


#TileCardID{
    Width :100% !important;
    }

.text-rain {
  color: var(--rain-color);
}

.tilepagediv {
  position                  : relative              !important;
  width                     : 100%                  !important;
  height                    : 100%                  !important;
  display                   : flex                  !important;
  justify-content           : stretch               !important;
  align-items               : stretch               !important;
  overflow                  : visible               !important;
}

.tilepagediv > span {
  position                  : relative              !important;
  top                       : 0                     !important;
  left                      : 0                     !important;
  width                     : 100%                  !important;
  height                    : 100%                  !important;
  box-sizing                : border-box            !important;
}

.tilepagediv > span > canvas {
  position                  : relative              !important;
  top                       : 0                     !important;
  left                      : 0                     !important;
  width                     : 100%                  !important;
  height                    : 100%                  !important;
  box-sizing                : border-box            !important;
}

.tile-image_inuse{

}

.tilepagediv > span > canvas[id$="_Canvas"] {
  position   : relative !important;   /* was absolute; lets grid show its bars */
  top        : 0 !important;
  left       : 0 !important;
  width      : 100% !important;
  height     : 100% !important;
  box-sizing : border-box !important;
}

/* FNC scrollbars are painted inside the host; keep them visible at bottom */
.tilepagediv > span > span[id*="_ScrollBar"] {
  position : relative !important;
  bottom   : 0 !important;
}

/* This makes all children non-interactive */
.tile-title *, .tile-description *, .tile-image *
{
    pointer-events: none;
}

.sidebarscroll   {
  display                               : flex;
  width                                 : 100%;
  height                                : 99%;
  top                                   : 20px;
  margin-top                            : 8px;
  z-index                               : 9999;

 }


/* Fix title/description order in tiles */
.tile-title {
  top: 0 !important;
  order: 1 !important;
}

.tile-description {
  top: 25px !important;
  order: 2 !important;
}

.tile-image {
  order: 3 !important;
}

/* Make sure the tile elements use flexbox layout */
.tile > div {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Make the panel rounded and add shadow */
#css_top_panel_icons {
  border-radius: 8px 8px 0 0 !important;
  box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1) !important;
}


/* Fix the icon classes to match reference */
.fa-thin.fa-thumbtack-slash,
.fa-thin.fa-circle-xmark {
  font-weight: 300 !important; /* Lighter font weight to match fa-light */
}

/* FIX: Remove conflicting overflow from container */
.dashboard-sidebar-container,
.dashboard-sidebar-container[style*="position: relative"],
.dashboard-sidebar-container[style*="display: none"],
.dashboard-sidebar-container[style] {
    display                     : block !important;
    position                    : fixed !important;

    /* Positioning */
    top                         : 85px !important;
    right                       : 0 !important;
    height                      : calc(100vh - 185px) !important;
    width                       : 350px !important;
    z-index                     : 1000 !important;

    /* Always start hidden off-screen */
    transform                   : translateX(100%) !important;
    opacity                     : 0 !important;
    pointer-events              : none !important;
    visibility                  : hidden !important;

    /* Simple styling */
    background                  : white !important;
    border-radius               : 8px 0 0 8px !important;
    box-shadow                  : -4px 0 10px rgba(0, 0, 0, 0.1) !important;

    /* FIX: Remove overflow - let internal scrollbox handle it */
    overflow                    : visible !important;

    /* Smooth transitions */
    transition                  : transform 400ms ease, opacity 400ms ease !important;
}

/* When slide-visible class is added */
.dashboard-sidebar-container.slide-visible {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    display                     : block !important
}

/* Ensure the internal scrollbox works properly */
.dashboard-sidebar-container .scrollbox {
    height                  : 100% !important;
    width                   : 100% !important;
    overflow-y              : auto !important;
    overflow-x              : hidden !important;
}


.sidebarscroll{
   -ms-overflow-style: none;  /* IE/Edge */
   scrollbar-width: thin !important;
    }

.sidebarscroll::-webkit-scrollbar {
  scrollbar-width: thin  !important;
}


.slider-container-div{
    height          : 100%;
    width           : 100%;
}

/*
.dashboard-sidebar-container .formcontainer-flip-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    perspective: 1000px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    display: flex !important;
    flex-direction: column !important;
}

.dashboard-sidebar-container .formcontainer-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 600ms cubic-bezier(0.4, 0.0, 0.2, 1);
    flex: 1 1 auto;
}
*/

/* Ensure forms inside flip structure fill properly */
/*.dashboard-sidebar-container .formcontainer-flip-side {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 8px;
    overflow-y: auto;
    overflow-x: hidden;
}  */

.slidepanel {
    position        : absolute;
    height          : calc(100% - 210px);
    background      : #fff;
    box-shadow      : 0 2px 10px rgba(0,0,0,0.12);
    z-index         : 1200;
    border-radius   : 8px;
    transition      : right 0.3s cubic-bezier(0.4,0,0.2,1),
                        left 0.3s cubic-bezier(0.4,0,0.2,1),
                        bottom 0.3s cubic-bezier(0.4,0,0.2,1),
                        top 0.3s cubic-bezier(0.4,0,0.2,1);
    display         : block;
    overflow        : auto;

}

.slidepanel.right {
    top             : 0               !important;
    right           : -100%;
    left            : auto;
    height          : calc(100% - 100px)    !important;
}

.slidepanel.right.shown {
    right         : 0;
}

.slidepanel.left {
    top           : 0;
    left          : -100%;
    right         : auto;
}

.slidepanel.left.shown {
    left          : 0;
}

.slidepanel.bottom {
    left          : 0;
    right         : 0;
    bottom        : -100%;
}

.slidepanel.bottom.shown {
    bottom        : 0;
}

.slidepanel.top {
    left          : 0;
    right         : 0;
    top           :-100%;
}

.slidepanel.top.shown {
    top           : 0;
}


 .slidepanel_version1{
    display             : block                             !important;
    border-style        : none;
    overflow-y          : auto;
    overflow-x          : hidden;
    white-space         : nowrap;
    padding-top         : 45px                              !important;
    box-sizing          : border-box;
    color               : rgb(1, 1, 1);
    outline             : none;
    width               : 350px;
    height              : calc(100%  - 205px)               !important;
    position            : relative;
    background-color    : rgb(255, 255, 255);
    font-family         : Inter, sans-serif;
    font-style          : normal;
    font-size           : 12pt;
    top                 : 90px                              !important;
    box-shadow          : -4px 0 10px rgba(0, 0, 0, 0.1)    !important;
    -webkit-tap-highlight-color: transparent;
}

.slidepaneltopgrid{
    height              : 50px;
    padding-top         : 5px;
    padding-bottom      : 5px;
    border-bottom       : 1px solid #3b82f6;
}

 .sidebardiv{
    border              : none;
 }


/* Base styling for the panel container */
#css_top_panel_icons {
  border-radius: 8px 8px 0 0;
  box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);
  padding: 5px 0;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  background-color: rgb(255, 255, 255);
  font-family: Inter, sans-serif;
  font-size: 12pt;
  border-bottom: 1px solid rgb(211, 208, 208);
}

/* Fix duplicate header issue */
#css_top_panel_icons .PanelHeaderFont:nth-of-type(2) {
  display: none;
}

#css_top_panel_icons #PinIcon:nth-of-type(2) {
  display: none;
}

#css_top_panel_icons #CloseIcon:nth-of-type(2) {
  display: none;
}

/* Make icons match the design of the reference panel */
#css_top_panel_icons i {
  font-weight: 300; /* Lighter font weight to match fa-light */
}

/* Icon styling */
/* CSS Fixes for Delphi TMS Web Core application */

/* Fix for duplicated elements in panel headers */
#css_top_panel_icons .PanelHeaderFont:not(:first-of-type),
#css_top_panel_icons #PinIcon:not(:first-of-type),
#css_top_panel_icons #CloseIcon:not(:first-of-type) {
  display: none !important;
}

/* Make header match reference panel */
#css_top_panel_icons {
  border-radius: 8px 8px 0 0 !important;
  box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1) !important;
}

/* Fix icon styling */
.action_icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
}


/* Optional: Custom maximize button (if you've added one manually) */
.custom-maximize-button {
    height: 24px;
    background-color: #d2f5fb;
    color: black;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    padding: 4px 8px;
    cursor: pointer;
}

.custom-maximize-button.active {
    background-color: #06b6d4;
    color: white;
}


 .rainmap-container {
    position                            : relative          !important;
    z-index                             : 1000;
    pointer-events                      : auto;
    width                               : 100%              !important;
    height                              : 100%              !important;
    display                             : flex             !important;
  }

  .rainmap-map {
    z-index                             : 1001              !important;
    pointer-events                      : auto              !important;
    width                               : 100%              !important;
    height                              : 100%              !important;
    position                            : relative          !important;
  }

  .logindiv {
    display                 : flex          !important;
    flex-direction          : column        !important;
    justify-content         : center        !important;
    align-items             : center        !important;
  }

  .verticalpanel{
    width                   : 60%           !important;
    display                 : flex;
    flex-direction          : column;
    justify-content         : space-around;
  }

  .logintable{
    display                 : flex          !important;
    flex-direction          : column        !important;
    justify-content         : space-around  !important;
  }


  .SideBarContainer  {
    z-index                 : 999           !important;

  }

/* Buttons */
/*.btn-primary {
  background-color                  : var(--rain-color);
  color                             : white;
  border                            : none;
  padding                             : 0.75rem 1.5rem;
    border-radius                       : 0.5rem;
  display                           : flex;
  flex-direction                    : column;
  justify-content                   : center;
  font-weight                       : 500;
  cursor                            : pointer;
   height                              : 2.5rem;
  transition                        : background-color 0.2s ease;
}
*/

.btn-primary {
    background-color                : #eef2f9;
    color                           : #676767;
    border                          : none;
    padding                         : 0.75rem 1.5rem;
    border-radius                   : 0.5rem;
    display                         : flex;
    flex-direction                  : column;
    justify-content                 : center;
    font-weight                     : 400;
    cursor                          : pointer;
    height                          : 2rem;
    font-size                       : 0.75rem;
    transition                      : box-shadow 0.2s, background 0.2s;
    box-shadow                      : 3px 3px 11px #b6c2d0, -1px -4px 9px 0px #ffffff;
}

.btn-primary:hover {
  background-color                  : #6796f0;
  color                             : white;
}

.btn-outline {
  background-color                  : transparent;
  border                            : 1px solid #becddd;
  color                             : var(--rain-color);
  padding                           : 0.75rem 1.5rem;
  border-radius                     : 0.5rem;
  display                           : flex;
  flex-direction                    : column;
  justify-content                   : center;
  font-weight                       : 500;
  cursor                            : pointer;
  height                            : 2rem;
  transition                        : background-color 0.2s ease, color 0.2s ease;
  box-shadow                        : 3px 3px 11px #b6c2d078, -1px -4px 9px 0px #ffffff;
}

.btn-outline:hover {
  background-color: rgba(14, 165, 233, 0.05);
}

.btn-white {
  background-color: white;
  color: var(--rain-color);
  border: none;
  padding                             : 0.75rem 1.5rem;
    border-radius                       : 0.5rem;
  font-weight: 500;
  cursor: pointer;
  height: 30px;
  transition: all 0.2s ease;
}

.btn-white:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

.btn-outline-white {
    background-color                    : transparent;
    border                              : 1px solid #e2e8f0;
    padding                             : 0.75rem 1.5rem;
    border-radius                       : 0.5rem;
    font-weight                         : 500;
    cursor                              : pointer;
    transition                          : background-color 0.2s ease;
    height                              : 2.5rem;
    width                               : 100%;
    display                             : inline-flex;
    align-items                         : center;
    justify-content                     : center;
    gap                                 : 0.5rem;
    border-radius                       : calc(var(--radius) - 2px);
    padding-left                        : 1rem;
    padding-right                       : 1rem;
    padding-top                         : 0.5rem;
    padding-bottom                      : 0.5rem;
    font-size                           : 0.875rem;
    line-height                         : 1.25rem;
}



.btn-outline-white:hover {
    background-color                    : #e2e8f0;
}

.btn-full {
  width: 100%;
}

.btn-primary-large{
    background-color                  : var(--rain-color);
    color                             : white;
    border                            : none;
    padding                           : 0.75rem 1.5rem;
    border-radius                     : 1rem;
    display                           : flex;
    flex-direction                    : column;
    justify-content                   : center;
    font-weight                       : 500;
    cursor                            : pointer;
    height                            : 40px;
    transition                        : background-color 0.2s ease;
}

.btn-primary-large:hover {
    background-color                  : var(--rain-dark);
}

/* ============================================================================
   PRIMARY SMALL BUTTON
   - works for <button>, <a>, <div> with ElementClassName='btn-primary-small'
   - immune to parent flex/stretch, centered content, crisp hover/focus/active
   ============================================================================ */

.btn-primary-small {
    appearance                    : none;
    -webkit-appearance            : none;
    -moz-appearance               : none;
    display                       : inline-flex;
    align-items                   : center;
    justify-content               : center;
    gap                           : 0.25rem;
    background-color                : #eef2f9;
    color                           : #676767;
    border                        : none;
    border-radius                 : 1rem;
    padding                       : 0.375rem 0.75rem;   /* ~6px 12px */
    height                        : 25px;
    width                           :7rem;
    line-height                   : 1;
    font-weight                   : 400;
    text-decoration               : none;
    cursor                        : pointer;
    user-select                   : none;
    white-space                   : nowrap;
    box-sizing                    : border-box;
    font-size                     : 11px                    !important;
    outline                       : none;
    -webkit-tap-highlight-color   : transparent;
    align-self                    : flex-start;         /* avoids parent flex stretching */
    transition                    : background-color 0.2s ease,transform 0.06s ease,box-shadow 0.2s ease;
}

.btn-primary-small:hover {
    background-color              : var(--rain-dark);
}

.btn-primary-small:active {
    transform                     : translateY(1px);
}

.btn-primary-small:focus-visible {
    box-shadow                    : 0 0 0 3px rgba(42, 109, 244, 0.35); /* accessible focus ring */
}

.btn-primary-small:disabled,
.btn-primary-small[aria-disabled="true"] {
    opacity                       : 0.5;
    cursor                        : default;
    pointer-events                : none;
}

.btn-primary-small > svg,
.btn-primary-small > i {
    width                         : 1em;
    height                        : 1em;
    flex                          : 0 0 auto;
}

/* Header
.header {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 1rem 0;
  border-bottom: 1px solid var(--gray-100);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
*/

.logo {
  display               : flex;
  align-items           : center;
  gap                   : 0.5rem;
  font-weight           : 700;
  font-size             : 1.25rem;
}

.logo i {
  color: var(--rain-color);
}



.desktop-nav {
  display: none;
}

@media (min-width: 768px) {
  .desktop-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  .desktop-nav a {
    color: var(--gray-700);
    transition: color 0.2s ease;
  }

  .desktop-nav a:hover {
    color: var(--rain-color);
  }

  .mobile-menu-btn {
    display: none;
  }
}

.mobile-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--gray-700);
}

.mobile-nav {
  display: none;
  background-color: white;
  border-top: 1px solid var(--gray-100);
  padding: 1rem 0;
}

.mobile-nav.active {
  display: block;
}

.mobile-nav nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mobile-nav a {
  color: var(--gray-700);
  padding: 0.5rem 0;
  transition: color 0.2s ease;
}

.mobile-nav a:hover {
  color: var(--rain-color);
}

/* Hero Section */
.hero {
    top                 : auto                  !important;
    left                : auto;
    padding             : 5rem 10rem 4rem 10rem;

    background          : linear-gradient(to bottom, var(--primary-bg) 0%, var(--gray-50) 100%);
    position            : relative              !important;
    overflow            : hidden;

    display             : flex                  !important;
    flex-wrap           : nowrap                !important;
    justify-content     : center                !important;
    align-items         : stretch               !important;
    min-height          : 500px                 !important;
    gap                 : 20px;
}



.hero-content {
     display               : flex                  !important;
    flex                : 1;
    flex-direction      : column;
    align-content: flex-start;
    align-items: flex-start;
    align-content       : space-between;
}

@media (min-width: 768px) {
  .hero-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-text, .hero-visual {
    width: 50%;
  }
}

.hero-text h1 {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .hero-text h1 {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .hero-text h1 {
    font-size: 3.5rem;
  }
}

.hero-text p {
  font-size: 1.125rem;
  color: var(--gray-700);
  margin-bottom: 2rem;
}

.button-group {
  display               : flex;
  position              : relative;
  flex-direction        : row;
  justify-content       : space-between   ;
  flex-wrap             : nowrap;
  width                 : 100%;
  align-items           : center;
  gap                   : 1rem;
  margin                : 20px 0 0 0;
  left                  : 0;

}

@media (min-width: 640px) {
  .button-group {
    flex-direction: row;
  }
}



.selectionpanel{
    top             : 0px;
    left            : 0px;
    height          : 52px;
    position        : absolute;
    box-shadow      :  0 2px 5px rgba(0,0,0,0.1)                !important;
}



/* --- Outer Container: The main DashboardPanel (span with class "dashboard") --- */
span.dashboard {
  display           : flex              !important;
  flex-direction    : column            !important;
  width             : 100%              !important;
  height            : 100%              !important;
  justify-content   : unset             !important;
  align-items       : unset             !important;
}

/* --- Inner Container: The direct child DIV that holds sidenav, tile area, and footer --- */
span.dashboard > div {
  display           : flex              !important;
  flex-wrap         : wrap              !important;
  flex              : 1 1 auto          !important;
  width             : 100%              !important;
  position          : relative          !important;
}

/* Hide the first empty span (if any) */
span.dashboard > div > span:first-child {
  display           : none              !important;
}

/* --- Tree View: The container with class "sidenav" --- */
span.dashboard > div > div.sidenav {
  flex              : 0 0 250px         !important;
  width             : 250px             !important;
  height            : auto              !important;
  position          : relative          !important;
  box-sizing        : border-box        !important;
  box-shadow        : 2px 0 5px rgba(0, 0, 0, 0.1)  !important;

}

/* Override inner tree view element’s absolute positioning */
span.sidenav > span {
  position          : relative          !important;
  width             : 100%              !important;
  height            : auto              !important;
}

/* --- Tile Area: The sibling DIV with class "dashboard" that holds the TileList --- */
span.dashboard > div > div.dashboard {
  flex              : 1 1 auto          !important;
 /* width: calc(100% - 250px) !important; */
  width             : 100%              !important;
  position          : relative          !important;
  box-sizing        : border-box        !important;
  overflow          : auto              !important;
  height            : auto              !important;
}

/* Override the inner tile list element’s forced absolute positioning */
span.dashboard > div > div.dashboard > span {
  position          : relative      !important;
  width             : 100%          !important;
  height            : auto          !important;
  overflow          : auto          !important;
}

/* --- Footer: The span with class "footer" --- */
span.dashboard > div > span.footer {
  order             : 999           !important;
  flex              : 0 0 50px      !important;
  width             : 100%          !important;
  position          : absolute      !important;
  background-color  : white         !important;
  margin-top        : 10px          !important;
  clear             : both          !important;
}


/* --- Responsive Behavior: On screens narrower than 800px stack vertically --- */
@media (max-width: 800px) {
  span.dashboard > div {
    flex-direction  : column        !important;
  }
  span.dashboard > div > div.sidenav,
  span.dashboard > div > div.dashboard {
    flex            : none          !important;
    width           : 100%          !important;
  }
}

/* Footer panel - make it visible at the bottom */
span[style*="height: 60px"][style*="width: 100%"] {
  position          : fixed         !important;
  bottom            : 0             !important;
  left              : 0             !important;
  top               : auto          !important;
  z-index           : 9999          !important;
}


.display-card {
  background        : white;
  border-radius     : 12px;
  padding           : 1.5rem;
  position          : relative;
  overflow          : hidden;
  width             : 40%          !important;
  height            : 85%           !important;
  display           : block;
  z-index           : 9999;
  box-shadow        : 0 2px 5px rgb(0 0 0 / 32%) !important;
}


.dashboard-content {
  position          : relative;
  z-index           : 10;
  width             : 100%;
  height            : 100%;
  top               : 50px;
}

.dashboard-tabs {
  display           : flex;
  gap               : 1rem;
  margin-top        : 5px;
  margin-left       : 5px;
  margin-right      : 5px;
  margin-bottom     : 1.5rem;
}


.rain-animation-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rain-drop {
  position: absolute;
  width: 2px;
  background: var(--rain-color);
  opacity: 0;
  border-radius: 0.5rem;
  animation: raindrop 2s linear infinite;
}

@keyframes raindrop {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

.tab {
  display           : flex;
  align-items       : center;
  gap               : 0.5rem;
  font-size         : 0.875rem;
  font-weight       : 500;
}


.tab i.fa-sun {
  color: var(--amber-500);
}

.tab i.fa-cloud-rain {
  color: var(--rain-color);
}

.tab i.fa-bolt {
  color: var(--violet-500);
}


#weather-tab{
    position:relative
}

#alerts-tab{
    position:relative
}


#rainfall-tab{
    position:relative
}


.holder{
    background-color: transparent;
    }

.current-conditions {
  background: var(--gray-50);
  border-radius: var(--border-radius);
  padding: 1rem;
  margin-bottom: 1rem;
  height : 165px !important;
/*  left :0;*/
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 !important;
  background-color: transparent;

}

.divcardbottomshadow{
      box-shadow: 0 0 5px rgba(0,0,0,0.1) !important;
      padding-left: 20px;
      padding-bottom:8px;
}


.conditions-grid{
    background-color:transparent !important;
    width: 100% !important;
    margin: 0 !important;
    }



tr.conditions-grid{
 padding: 0 !important;
 display: flex !important;
 flex-direction: row !important;
 height: 100% !important;

 }

span.conditions-grid{
    background-color:transparent !important;
    width: 100% !important;
    height: 75px !important;
    margin: 0 !important;
    display: block !important
}


.condition-card {
  background: white;
  padding: 0.50rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  margin-left:10px;
  margin-right: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;

}

.condition-label {
  font-size: 0.75rem;
  color: var(--gray-500);
}

.condition-value {
  font-size: 1.25rem;
  font-weight: 700;
}


table.section-header{
    background-color:transparent !important
}

.section-header h3 {
  font-weight: 600;
}

.update-time {
  font-size: 0.75rem;
  color: var(--gray-500);
}


@media (min-width: 768px) {
  .conditions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.alert-box {
  background-color: rgba(14, 165, 233, 0.1);
  border-radius: var(--border-radius);
  padding: 1rem;
  height : 120px !important;
}

.alert-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
}

.alert-icon {
    width: 40px !important;
    height: 40px !important;
  background-color: var(--amber-500);
  color: white;
  padding: 0.25rem;
  border-radius: 0.25rem;
  display: flex !important;
  flex-direction: column !important;
  align-content : space-around;
  justify-content : space-around !important;
  align-items : stretch;
  flex-wrap: wrap;
}

.alert-header h3 {
  color: var(--amber-500);
  font-weight: 600;
  margin-bottom: 0 !important;
}

.alert-box p {
  font-size: 0.875rem;
  color: var(--gray-700);
}

.alert-text{
    padding-left: 5px;
}

.wave-container {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rem;
  overflow: hidden;

}

.wave {
  position: absolute;
  width: 200%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' opacity='.25' fill='%230EA5E9'/%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' opacity='.5' fill='%230EA5E9'/%3E%3Cpath d='M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z' fill='%230EA5E9'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 bottom;
  background-size: 50% 100px;
  animation: wave 15s linear infinite;

}

@keyframes wave {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Features Section */
.features {
  padding: 5rem 0;
  background-color: white;
}

.section-heading {
  text-align            : center;
  max-width             : 42rem;
  margin                : 0 auto 2rem;
  height                : auto              !important;
}

.section-heading h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .section-heading h2 {
    font-size: 2.5rem;
  }
}

.section-heading p {
  font-size: 1.125rem;
  color: var(--gray-600);
}


.features-grid {
    display                 : flex;
    flex-wrap               : wrap;
    gap                     : 20px;
    justify-content         : space-between;
    width                   : 100%;
    box-sizing              : border-box;
    /*position: relative !important;
    height: auto !important;

    margin:15px;*/
}

@media (min-width: 640px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.feature-card {
    display                 : flex;
    flex-direction          : column;
    justify-content         : space-between;
    flex                    : 1;
    padding                 : 1.5rem;
    margin                  : 5px;
    box-sizing              : border-box;
    background              : white;
    border                  : none;
    border-radius           : var(--border-radius);
    box-shadow              : var(--shadow);
    transition              : box-shadow 0.3s ease;
}

.feature-card:hover {
  box-shadow: var(--shadow-lg);
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--border-radius);
  background-color: rgba(14, 165, 233, 0.1);
  color: var(--rain-color);
  margin-bottom: 1rem;
}

.feature-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.feature-card p {
  color: var(--gray-600);
}

/* Monitoring Section */
.monitoring {
  padding               : 5rem 0;
  background-color      : var(--gray-50);
  display               : flex;
  flex-direction        : row;
  align-content         : stretch;
  justify-content       : space-between;
  flex-wrap             : wrap;
  align-items           : center;
  height                : 100%;
  width                 : 100%;
  max-width             : 1280px;

}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.section-description {
  font-size: 1.125rem;
  color: var(--gray-600);
  max-width: 42rem;
  margin: 0 auto;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* This is the CSS for checkbozes, radio buttons and grids */
/* Base styling for form controls */
.rw-form-control {
  font-family       : Inter, sans-serif;
  font-size         : 0.875rem;
  border-radius     : 0.375rem;
  transition        : all 0.2s ease-in-out;
}


.rw-checkbox {
  appearance        : none;
  width             : 1.25rem;
  height            : 1.25rem;
  border            : none;
  border-radius     : 0.25rem;
  padding-top       : 8px;
  position          : absolute;
}

.rw-checkbox input[type="checkbox"] {
  appearance        : none;
  width             : 1.25rem                   !important;
  height            : 1.25rem                   !important;
  border            : 1px solid #64748B;
  border-radius     : 0.375rem;
  background-color  : #FFF;
  cursor            : pointer;
  margin-right      : 0.5rem                   !important;
  margin-top        : 0                         !important;
  position          : relative;
  vertical-align    : middle;
  transition        : all 0.2s ease-in-out;
  -webkit-appearance: none;
}

.rw-checkbox input[type="checkbox"]:checked {
  background-color  : #0EA5E9;
  border-color      : #0EA5E9;
}

.rw-checkbox input[type="checkbox"]:checked::after {
  content           : '';
  position          : absolute;
  left              : 4px;
  top               : 1px;
  width             : 5px;
  height            : 10px;
  border            : solid white;
  border-width      : 0 2px 2px 0;
  transform         : rotate(45deg);
}

.rw-checkbox input[type="checkbox"]:hover:not(:disabled) {
  border-color      : #0EA5E9;
  box-shadow        : 0 0 0 2px rgba(14, 165, 233, 0.1);
}

.rw-checkbox input[type="checkbox"]:focus {
  outline           : none;
  box-shadow        : 0 0 0 2px rgba(14, 165, 233, 0.3);
}

.rw-checkbox input[type="checkbox"]:disabled {
  opacity           : 0.5;
  cursor            : not-allowed;
}

.rw-checkbox-label {
  font-size         : 0.875rem;
  color             : #1E293B;
  cursor            : pointer;
  user-select       : none;
  display           : flex;
  align-items       : center;
  gap               : 0.5rem;
  padding           : 0.25rem 0;
  position          : relative;
}

/* Grid Styling */
.rw-grid {
  width             : 100%;
  border-collapse   : separate;
  border-spacing    : 0;
  border-radius     : 0.5rem;
  overflow          : hidden;
  box-shadow        : 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.rw-grid-header {
  background-color  : #0C4A6E;
  color             : white;
  font-weight       : 600;
}

.rw-grid-header th {
  padding           : 0.75rem 1rem;
  text-align        : left;
  border-bottom     : 1px solid #0EA5E9;
}

.rw-grid-row {
  background-color  : white;
}

.rw-grid-row:nth-child(2n) {
  background-color  : #F8FAFC;
}

.rw-grid-row:hover {
  background-color  : #BAE6FD;
  cursor            : pointer;
}

.rw-grid-cell {
  padding           : 0.75rem 1rem;
  border-bottom     : 1px solid #E2E8F0;
}

.rw-grid-footer {
  background-color  : #F8FAFC;
  border-top        : 1px solid #E2E8F0;
  padding           : 0.5rem;
  display           : flex;
  justify-content   : space-between;
  align-items       : center;
}

.rw-grid-pagination {
  display           : flex;
  align-items       : center;
  gap               : 0.25rem;
}

.rw-grid-page-button {
  background-color  : transparent;
  border            : 1px solid #E2E8F0;
  border-radius     : 0.25rem;
  padding           : 0.25rem 0.5rem;
  cursor            : pointer;
}

.rw-grid-page-button:hover {
  background-color  : #BAE6FD;
}

.rw-grid-page-button.active {
  background-color  : #0EA5E9;
  color             : white;
}


.monitoring-card {
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  padding: 1.5rem;
}

.monitoring-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.monitoring-card p {
  color: var(--gray-600);
  margin-bottom: 1.5rem;
}

.monitoring-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .monitoring-grid {
    grid-template-columns: 1fr 2fr;
  }

  .alerts-grid {
    grid-template-columns: 2fr 1fr;
  }
}

.monitoring-wide {
  grid-column: 1 / -1;
}

.monitoring-sidebar {
  padding-right             : 1rem;
  display                   : flex;
  flex-direction            : column;
  justify-content           : space-evenly;

}

.feature-list {
  list-style-type           : none;
  display                   : flex;
  flex-direction            : column;
  flex-wrap                 : wrap;
  justify-content           : space-between;
  gap                       : 15px;

}

.feature-list li {
  display               : flex;
  align-items           : flex-start;
  gap                   : 0.75rem;
  margin-bottom         : 1rem;
}

.feature-icon-small {
  display                       : flex;
  align-items                   : center;
  justify-content               : center;
  width                         : 1.6rem;
  height                        : 1.6rem;
  border-radius                 : 50%;
  background-color              : rgba(14, 165, 233, 0.1);
  color                         : var(--rain-color);
  flex-shrink                   : 0;
  margin-top                    : 0.25rem;
  box-sizing                    : border-box;
}



.feature-icon-small i {
    font-size         : 22px;       /* Adjust as needed */
    color             : #666;
    display           : block;
    margin            : 0 auto;
}

.feature-icon-small.flood {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--flood-color);
}

.feature-title {
  font-weight: 500;
  display: block;
  margin-bottom: 0.25rem;
}

.system-overview {
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.system-overview h4 {
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 0.5rem;
}

.overview-stats {
  display: flex;
  justify-content: space-between;
}

.stat {
  flex: 1;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-bottom: 0.25rem;
  display: block;
}

.stat-value {
  font-weight: 500;
}

.stat-value.alert {
  color: var(--amber-600);
}

.dashboard-preview_error{
    display                         : flex;
    flex-direction                  : column;
    height                          : 100%;

}

.dashboard-charts {
  display                           : flex;
  flex-direction                    : column;
  grid-template-columns             : 1fr;
  gap                               : 1rem;
  margin-bottom                     : 1rem;
  height                            : 100%;
}

@media (min-width: 640px) {
  .dashboard-charts {
    grid-template-columns           : repeat(2, 1fr);
  }
}

.chart-box {
  background-color                  : var(--gray-50);
  border-radius                     : var(--border-radius);
  padding                           : 1rem;

}

.chart-header {
  display                           : flex;
  justify-content                   : space-between;
  align-items                       : center;

}

.chart-header h5 {
  font-weight: 500;
}

.rainfall-chart {
  height                            : 8rem;
/*  background-color                  : rgba(14, 165, 233, 0.05); */
  border-radius                     : 0.5rem;
  display                           : flex;
  align-items                       : flex-end;
  padding                           : 0.5rem;
  gap                               : 0.25rem;
}

.chart-bar {
  flex: 1;
  background-color: var(--rain-color);
  border-radius: 0.25rem 0.25rem 0 0;
  opacity: 0.7;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.flood-map {
  height: 8rem;
  background-color: rgba(59, 130, 246, 0.05);
  border-radius: 0.5rem;
  position: relative;
  overflow: hidden;
}

.map-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, var(--gray-200) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--gray-200) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.5;
}

.flood-low {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 33%;
  background-color: rgba(59, 130, 246, 0.3);
}

.flood-medium {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 50%;
  background-color: rgba(59, 130, 246, 0.5);
}

.flood-high {
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 25%;
  height: 75%;
  background-color: rgba(59, 130, 246, 0.7);
}

.map-label {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.map-legend {
  display: flex;
  margin-top: 0.5rem;
  gap: 1rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
}

.legend-color {
  width: 0.75rem;
  height: 0.75rem;
}

.legend-color.low {
  background-color: rgba(59, 130, 246, 0.3);
}

.legend-color.medium {
  background-color: rgba(59, 130, 246, 0.5);
}

.legend-color.high {
  background-color: rgba(59, 130, 246, 0.7);
}

.alerts-panel {
  background-color: rgba(245, 158, 11, 0.1);
  border-radius: var(--border-radius);
  padding: 1rem;
}

.alerts-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--amber-500);
  margin-bottom: 0.5rem;
}

.alerts-header h5 {
  font-weight: 500;
}

.alerts-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

.alerts-list li:last-child {
  border-bottom: none;
}

.alert-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--amber-800);
}

.alert-badge.high {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--red-500);
}

.alert-badge.medium {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--amber-500);
}

.alert-badge.low {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--green-500);
}

/* Rainfall Tab */
.rainfall-map-container {
  background-color: var(--gray-50);
  border-radius: var(--border-radius);
  padding: 1rem;
}

.rainfall-map-container h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.rainfall-map {
  aspect-ratio: 16 / 9;
  background-color: rgba(14, 165, 233, 0.05);
  border-radius: var(--border-radius);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}

.rain-area {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
}

.rain-area.light {
  background-color: var(--rain-light);
  opacity: 0.4;
}

.rain-area.medium {
  background-color: var(--rain-color);
  opacity: 0.3;
}

.rain-area.heavy {
  background-color: var(--rain-color);
  opacity: 0.6;
}

.area-1 {
  top: 25%;
  left: 25%;
  width: 33%;
  height: 33%;
}

.area-2 {
  top: 25%;
  left: 25%;
  width: 25%;
  height: 25%;
}

.area-3 {
  top: 33%;
  left: 33%;
  width: 16%;
  height: 16%;
}

.map-marker {
  position: absolute;
}

.marker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: white;
  border: 2px solid var(--gray-500);
}

.marker-label {
  position: absolute;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: 0.5rem;
}

.downtown {
  top: 25%;
  left: 33%;
}

.riverside {
  bottom: 33%;
  right: 25%;
}

.map-legend {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 0.25rem;
  padding: 0.5rem;
  font-size: 0.75rem;
}

.legend-title {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.legend-colors {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.legend-color {
  width: 0.75rem;
  height: 0.75rem;
}

.legend-color.light {
  background-color: var(--rain-light);
}

.legend-color.medium {
  background-color: var(--rain-color);
}

.legend-color.heavy {
  background-color: var(--rain-dark);
}

.rainfall-stats {
  margin-top: 1rem;
}

.rainfall-stats h5 {
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.stat-card {
  background-color: white;
  padding: 0.75rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

.stat-label {
  font-size: 0.75rem;
  color: var(--gray-500);
}

.stat-value {
  font-weight: 700;
}

/* Flood Monitoring Tab */
.flood-map-container {
  background-color: var(--gray-50);
  border-radius: var(--border-radius);
  padding: 1rem;
}

.flood-map-container h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.flood-risk-map {
  aspect-ratio: 16 / 9;
  background-color: rgba(59, 130, 246, 0.05);
  border-radius: var(--border-radius);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}

.river {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  height: 16%;
  background-color: rgba(59, 130, 246, 0.3);
}

.river-center {
  position: absolute;
  top: 50%;
  left: 25%;
  right: 25%;
  transform: translateY(-50%);
  height: 16%;
  background-color: rgba(59, 130, 246, 0.5);
}

.flood-zone {
  position: absolute;
  border-radius: 0;
}

.flood-zone.low {
  top: 40%;
  left: 25%;
  right: 25%;
  bottom: 40%;
  background-color: rgba(147, 197, 253, 0.3);
}

.flood-zone.medium {
  top: 42%;
  left: 30%;
  right: 30%;
  bottom: 42%;
  background-color: rgba(147, 197, 253, 0.4);
}

.flood-zone.high {
  top: 45%;
  left: 33%;
  width: 16%;
  bottom: 45%;
  background-color: rgba(59, 130, 246, 0.7);
}

.sensor {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--red-500);
}

.sensor-1 {
  top: 50%;
  left: 25%;
}

.sensor-2 {
  top: 50%;
  left: 50%;
}

.sensor-3 {
  top: 50%;
  left: 75%;
}

.map-title {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.water-levels {
  margin-top: 1rem;
}

.water-levels h5 {
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.water-level-item {
  background-color: white;
  padding: 0.75rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 0.5rem;
}

.level-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.level-label {
  font-size: 0.75rem;
  color: var(--gray-500);
}

.level-value {
  font-weight: 700;
}

.level-status {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.level-status.normal {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--green-800);
}

.level-status.warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--amber-800);
}

.level-status.danger {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--red-800);
}

.level-bar {
  height: 0.625rem;
  background-color: var(--gray-100);
  border-radius: 1rem;
  overflow: hidden;
}

.level-fill {
  height: 100%;
  border-radius: 1rem;
}

.level-fill.normal {
  background-color: var(--green-500);
}

.level-fill.warning {
  background-color: var(--amber-500);
}

.level-fill.danger {
  background-color: var(--red-500);
}

/* Alert System Tab */
.alerts-types-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .alerts-types-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.alert-type-card {
  background-color: white;
  padding: 1rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  border-left: 4px solid transparent;
}

.alert-type-card.weather {
  border-color: var(--amber-500);
}

.alert-type-card.flood {
  border-color: var(--flood-color);
}

.alert-type-card.channels {
  border-color: var(--indigo-500);
}

.alert-type-card.options {
  border-color: var(--green-500);
}

.alert-type-card h5 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.alert-type-card ul {
  font-size: 0.875rem;
  line-height: 1.7;
}

.alert-preview-container {
  background-color: var(--gray-50);
  border-radius: var(--border-radius);
  padding: 1rem;
}

.alert-preview-container h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.alert-preview {
  border: 1px solid;
  border-radius: var(--border-radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

.alert-preview.danger {
  background-color: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.2);
}

.alert-preview.warning {
  background-color: rgba(245, 158, 11, 0.05);
  border-color: rgba(245, 158, 11, 0.2);
}

.alert-preview-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.alert-preview.danger .alert-preview-header {
  color: var(--red-800);
}

.alert-preview.warning .alert-preview-header {
  color: var(--amber-800);
}

.alert-preview-header h5 {
  font-weight: 700;
}

.alert-preview-message {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.alert-preview.danger .alert-preview-message {
  color: var(--red-700);
}

.alert-preview.warning .alert-preview-message {
  color: var(--amber-700);
}

.alert-preview-details {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 0.25rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  margin-bottom: 0.75rem;
}

.details-label {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.alert-preview-footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
}

.alert-preview.danger .issue-time {
  color: var(--red-700);
}

.alert-preview.danger .expire-time {
  color: var(--red-800);
  font-weight: 500;
}

.alert-preview.warning .issue-time {
  color: var(--amber-700);
}

.alert-preview.warning .expire-time {
  color: var(--amber-800);
  font-weight: 500;
}

.alert-delivery {
  text-align: center;
  margin-top: 1rem;
}

.delivery-title {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.delivery-methods {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.delivery-method {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.delivery-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.delivery-icon.success {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--green-700);
}

.delivery-icon.pending {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--amber-700);
}

.delivery-method span {
  font-size: 0.75rem;
}

/* Benefits Section */
.benefits {
  padding: 5rem 0;
  background-color: white;
}

.benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
}

@media (min-width: 640px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .benefits-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.benefit-card {
  background: white;
  border: none;
  border-radius: var(--border-radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.3s ease;
}

.benefit-card:hover {
  box-shadow: var(--shadow-lg);
}

.benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  color: white;
  margin-bottom: 1rem;
}

.bg-red {
  background-color: var(--red-500);
}

.bg-amber {
  background-color: var(--amber-500);
}

.bg-green {
  background-color: var(--green-500);
}

.bg-blue {
  background-color: var(--blue-500);
}

.bg-indigo {
  background-color: var(--indigo-500);
}

.bg-violet {
  background-color: var(--violet-500);
}

.bg-cyan {
  background-color: var(--cyan-500);
}

.bg-teal {
  background-color: var(--teal-500);
}

.benefit-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.benefit-card p {
  color: var(--gray-600);
}

.stats-container {
  background-color: var(--gray-50);
  border-radius: var(--border-radius);
  padding: 1.5rem;
}

.stats-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .stats-grid {
    flex-direction: row;
  }

  .stats-column {
    flex: 1;
  }

  .testimonial-column {
    flex: 1;
  }
}

.stats-column h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.stats-column p {
  margin-bottom: 1.5rem;
  color: var(--gray-600);
}

.stats-bar-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.stat-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.stat-percentage {
  color: var(--rain-color);
  font-weight: 700;
}

.stat-bar-bg {
  height: 0.5rem;
  background-color: var(--gray-200);
  border-radius: 1rem;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  background-color: var(--rain-color);
  border-radius: 1rem;
}

.testimonial {
  background-color: white;
  border-radius: var(--border-radius);
  border-left: 4px solid var(--rain-color);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
}

.testimonial h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.testimonial blockquote {
  font-style: italic;
  color: var(--gray-700);
  margin-bottom: 1rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.author-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
}

.author-name {
  font-weight: 600;
}

.author-title {
  font-size: 0.875rem;
  color: var(--gray-500);
}

/* Call to Action */
.cta {
  padding: 5rem 0;
  background: linear-gradient(135deg, var(--rain-color) 0%, var(--blue-500) 100%);
  color: white;
}

.cta-content {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.cta-content h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .cta-content h2 {
    font-size: 2.5rem;
  }
}

.cta-content p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.cta-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
}

.cta-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}

@media (min-width: 640px) {
  .cta-buttons {
    flex-direction: row;
  }
}

/* Footer */
.footer {
  background-color          : var(--gray-900);
  color                     : var(--gray-300);
  padding-top               : 4rem;
  padding-bottom            : 2rem;
  width                     : 100%;
  height                    : 150px                 !important;
  top                       : auto                  ! important;
  bottom                    : 0;
  display                   : flex;
  flex-direction            : row;
  flex-wrap                 : wrap;
  align-content             : center;
  justify-content           : space-between;
  padding                   :    0 20px 0 20px;

}

.footer-hide{
    display                 : none;
}

.footer-flex-row{
    display                     : flex;
    flex-direction            : row-reverse;;
    flex-wrap                 : wrap;
    align-content             : flex-end;
    justify-content           : space-between;
    gap                         : 10px;
   color                    :white;
}

.footer-blocks{
    padding                             : 10px !important;
    margin                              : 5px !important;
    display                             : flex;
    padding                             : 10px !important;
    margin                              : 5px !important;
    display                             : flex;
    gap                                 : 10px;
    flex-direction                      : column;
    align-content                       : flex-start;
    align-items                         : flex-start;
    gap                                 : 10px;


}



.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.25rem;
  color: white;
  margin-bottom: 1rem;
}

.footer-logo i {
  color: var(--rain-color);
}

.footer-column p {
  margin-bottom: 1.5rem;
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.25rem;
  background-color: var(--gray-800);
  color: var(--gray-400);
  transition: all 0.2s ease;
}

.social-links a:hover {
  background-color: var(--rain-color);
  color: white;
}

.footer-column h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: white;
  margin-bottom: 1.5rem;
}

.footer-column ul {
  list-style-type: none;
}

.footer-column ul li {
  margin-bottom: 0.5rem;
}

.footer-column ul li a:hover {
  color: var(--rain-color);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-800);
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer-bottom p {
  font-size: 0.875rem;
}

.footer-links {
  display: flex;
  gap: 2rem;
}

.footer-links a {
  font-size: 0.875rem;
}

.footer-links a:hover {
  color: var(--rain-color);
}

/* Utilities */
.ml-4 {
  margin-left: 1rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mb-16 {
  margin-bottom: 4rem;
}


tooltip-overlay {
    position            : absolute;
    top                 : 0;
    left                : 0;
    width               : 100%;
    height              : 100%;
    pointer-events      : none; /* so it doesn’t block mouse interactions */
    z-index             : 9999;
}

.custom-tooltip {
    position            : fixed;
    background          : #f8fafc;
    color               : #0f172a;
    padding             : 10px 15px;
    border-radius       : 8px;
    box-shadow          : 4px 4px 10px rgba(0, 0, 0, 0.1), -4px -4px 10px rgba(255, 255, 255, 0.7);
    font-size           : 14px;
    z-index             : 9999;
    white-space         : normal;
    max-width           : 350px;
    word-wrap           : break-word;
    transition          : opacity 0.2s ease-in-out;
    pointer-events      : none; /* so it doesn’t block mouse interactions */
    opacity             : 0;
    font-size           : 0.75rem;

}

.custom-tooltip.shown {
    opacity            : 1;
}



.seperator {

}

.seperator--vertical{
    width               : 2px;
    border-left         : 1px solid #ccd4db;

}

.seperator--horizontal{
    height                : 2px;
    border-bottom         : 1px solid #ccd4db;
}

.homepage-container-div{
     overflow-y     : auto !important;
    overflow-x     : hidden !important;
    max-height     : none !important;
    height         : auto !important;
    box-sizing     : border-box !important;
    display        : flex !important;
    flex-direction : column !important;


}


.card-badge {
  position         : absolute;
  top              : 50%;
  right            : 50%;
  background-color : crimson; /* Can be changed from Delphi */
  color            : white;
  padding          : 4px 50px;
  font-size        : 13px;
  font-weight      : bold;
  text-align       : center;
  transform        : rotate(45deg);
  transform-origin : top right;
  z-index          : 10;
  pointer-events   : none;
}

.graph {
    width                   : 100%          !important;
    height                  : 100%          !important;
    background-color        : white;

}


.radiobutton{
    margin                  : 4px 4px           !important;
}


.forgotpasswrd{
    outline                         : none;
    position                        : relative;
    box-sizing                      : border-box;
    display                         : flex;
    user-select                     : none;
    -webkit-tap-highlight-color     : transparent;
    flex-direction                  : column;
    flex-wrap                       : wrap;
    justify-content                 : flex-start;
    align-items                     : flex-start;
    gap                             : 20px;
    margin-top                      : 40px;

    }

.forgotpassword--email{
    outline                         : none;
    box-sizing                      : border-box;
    user-select                     : none;
    -webkit-tap-highlight-color     : transparent;
    display                         : flex;
    flex-direction                  : column;
    flex-wrap                       : wrap;
    justify-content                 : flex-end;
    align-items                     : flex-start;
    align-content                   : space-between;
    gap                             : 5px;
}

.forgotpassword--btn {
    position                        : relative;
    box-sizing                      : border-box;
    display                         : flex;
    flex-direction                  : row;
    justify-content                 : center;
    gap                             : 20px;
}



    .forgotpassword--emailinput{
        box-sizing                  : border-box;
        text-transform              : initial;
        position                    : relative;
        width                       : 100%;
    }

/* Scope only where you add 'overlay-host' */
.overlay-host {
  position              : relative;   /* already true via .tilepagediv; harmless to repeat */
  box-sizing            : border-box;
  height                : 100%;
  width                 : 100%;
}

/* Hidden by default — centered overlay when active */
.overlay-host > .status-msg {
  position           : absolute;
  inset              : 0;
  display            : none;       /* toggle on with .is-active */
  align-items        : center;
  justify-content    : center;
  z-index            : 100000;     /* above any internal canvases/maps */
  pointer-events     : auto;       /* block clicks behind when shown */
}

/* Show + dim background */
.overlay-host > .status-msg.is-active {
  display            : flex;
}

.overlay-host > .status-msg.is-active::before {
  content            : "";
  position           : absolute;
  inset              : 0;
  background         : rgba(0, 0, 0, 0.45);
}

/* Message card (whatever you put inside MessageDiv) */
.overlay-host > .status-msg > * {
  position           : relative;   /* sits above the dimmer */
  background         : #ffffff;
  padding            : 10px 14px;
  border-radius      : 8px;
  box-shadow         : 0 4px 18px rgba(0, 0, 0, 0.25);
  max-width          : 90%;
  text-align         : center;
  box-sizing         : border-box;
}




/* Optional: tidy label text if you're using TWebLabel */
.overlay-host > .status-msg [data-lbl="lbl"] {
  margin             : 0;
  white-space        : nowrap;
  overflow           : hidden;
  text-overflow      : ellipsis;
}



.active-tab{
    height          : 100% !important;
    display         : block !important;   /* fight inline-block collapse */
    box-sizing      : border-box;
    overflow        : hidden;
}

/* 2) Make the immediate content wrapper(s) fill the tab */
.active-tab > div{
    height          : 100% !important;
    box-sizing      : border-box;
}

/* 3) Your tile containers (use if you have these classes in your layout) */
.tilepagediv,
.overlay-host{
    height          : 100% !important;
    box-sizing      : border-box;
}


.chart-div
{
    position           : relative                  !important;
    box-sizing          : border-box                !important;
    width               : 100%                      !important;
    height              : 100%                       !important;
    background-color    : white;
    border-radius       : 0 0 5px 5px;
    min-height          : 0                         !important;
}


.chart-div  > div
{
    width              : 100%                      !important;
    height             : 100%                       !important;

}


.chart-div > canvas
{
    width               : 100%                      !important;
    height              : 100%                      !important;
}



/* ============================================================================
   SETTINGS PAGE LAYOUT - ONLY STATIC CLASSES, NO DYNAMIC IDS
   ============================================================================ */

/* Main layout container */
.modern-three-section-layout {
  display                               : flex                          !important;
  flex-direction                        : row                        !important;
  height                                : 100%                         !important;
  width                                 : 100%;
  /*background                            : linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important; */
  position                              : relative                      !important;
}

/* Fix DOM order using child selectors */
.modern-three-section-layout > .modern-footer-panel {
  order                             : 3                                 !important;
  flex                              : 0 0 80px                          !important;
  background                        : #ffffff                           !important;
  border-radius                     : 16px                              !important;
  box-shadow                        : 0 -4px 16px rgba(0, 0, 0, 0.04)   !important;
  margin                            : 20px                              !important;
  display                           : flex                              !important;
  align-items                       : center                            !important;
  justify-content                   : space-between                     !important;
  padding                           : 0 30px                            !important;
}

.modern-three-section-layout > .modern-horizontal-content {
  order                             : 2                                 !important;
  flex                              : 1 1 auto                          !important;
  background                        : #ffffff                           !important;
  border-radius                     : 8px                               !important;
  box-shadow                        : 0 8px 32px rgba(0, 0, 0, 0.08)    !important;
  overflow                          : hidden                            !important;
/*  margin                            : 20px                              !important; */
  position                          : relative                          !important;
  top                               : 0 ;
  height                            : 100%
}

.modern-three-section-layout > .modern-options-panel {
  display                           : flex;
  flex-direction                    : column;
  flex-wrap                         : wrap;
  justify-content                   : flex-start;
  align-items                       : stretch;
  align-content                     : flex-start;
  order                             : 0                                 !important;
  position                          : absolute                          !important;
 /* left                              : 20px                              !important; */
  height                            : 7rem;
  width                             : 100%                             !important;
  background                        : #ffffff                           !important;
  border-radius                     : 8px 8px 0 0                               !important;
  box-shadow                        : 0 8px 32px rgba(0, 0, 0, 0.08)    !important;
  padding                           : 15px                              !important;
  overflow-y                        : auto                              !important;
  z-index                           : 20                                !important;
  gap                               : 10px;
  scrollbar-width                   : none;
}

/* Content cards */



.innercontentdiv {
  background                        : #f8fafc !important;
  border-radius                     : 12px !important;
  box-shadow                        : inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  padding                           : 15px !important;
  height                            : 100% !important;
  display                           : flex !important;
  flex-direction                    : column !important;
}

.innercardfooterdiv {
  background                        : #e2e8f0 !important;
  border-radius                     : 0 0 8px 8px !important;
  padding                           : 10px 15px !important;
  margin                            : 10px -15px -15px -15px !important;
}

.cardtitlediv {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  color: white !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 8px 15px !important;
  margin: -15px -15px 10px -15px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Fix huge headers */
.cardtitlediv h2,
.cardtitlediv h4 {
  font-size: 14px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 600 !important;
}

.neo-card--base{
    background                        : #f1f5f9 !important;
    padding                           : 15px !important;
    margin-top                        : 60px;
    display                           : flex;
    height                            : 100%;
    width                             : 100%;
}

.neo-card {
  background                        : #f1f5f9 !important;
  border-radius                     : 8px !important;
  box-shadow                        : inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  padding                           : 15px !important;
  height                            : 100% !important;
  margin-top                        : 60px;
  display                           : flex;
  height                            : 100%;
  width                             : 100%;

}


.card_headerdiv .neo-card-buttons {
  position                          : absolute;
  display                           : flex;
  justify-content                   : flex-end;
  align-items                       : center;
  gap                               : 8px;
  padding                           : 3px                                   !important;
  height                            : 100%                                  !important;
  width                             : 75%                                  !important;
  left                              : auto;
  right                             : 2px;
  border-radius                     : 3px                                   !important;
  white-space                       : nowrap;

}

.neo-card-buttons {
  display                           : flex;
  flex-direction                    : row;
  justify-content                   : flex-end;
  align-items                       : center;
  width                             : 75%               !important;   /* not 100% */
  height                            : 22px;
  margin-left                       : auto; /* push to right side */

}


.header-divider {
    width            : 1px;
    height           : 18px;
    background-color : #ccc;
    margin           : 0 6px;
}

.header-buttons-fixed,
.header-buttons-dynamic {
    display          : flex;
    align-items      : center;
    gap              : 4px;
}

.card_resizeicon{

    color                   : #2563eb;
    width                   : 18px;
    height                  : 100%;       /* Fill the parent height */
    display                 : flex;
    align-items             : center;
    justify-content         : center;
    cursor                  : pointer;
    min-height              : 18px;     /* Ensure it's clickable enough */
    font-size               : 13px;
    position                : relative              !important;
    padding                 : 5px;
    border-radius           : 3px;
}

.card_resizeicon.red{
     color                       : #ab0000            !important;
     background-color            : transparent    !important;
}


.card_headerdiv .neo-card-buttons .card_resizeicon{
  position        : static;     /* overrides inline absolute */
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  width           : 20px;       /* or auto; set if you want consistent hit targets */
  height          : 20px;
}




.card_resizeicon:hover,
.card_resizeicon:active,
.card_resizeicon:focus {
    color                       : #93faf6;
    cursor                      : pointer       !important;

}

.card_resizeicon:hover i,
.card_resizeicon:active i,
.card_resizeicon:focus i {
    color                       : #2563EB       !important;
    cursor                      : pointer       !important;
}

/* reserve space so title doesn’t sit under buttons */
/*.card_headerdiv .title-wrapper-div {
  padding-right   : 160px;
} */



.neo-sidemenu {
  box-shadow                    : 0 0px 5px 3px rgba(0, 0, 0, 0.1) !important;
  overflow                      : hidden;
  border-radius                 : 8px;
 /* display                       : flex                                  !important;*/
  height                        : 100%                                  !important;

}


.neo-sidemenu .smcontainer-close{
  box-shadow                    : 0 0px 5px 3px rgba(0, 0, 0, 0.1) !important;
  overflow                      : hidden;
  border-radius                 : 8px;
  display                       : flex                                  !important;
  height                        : 100%                                  !important;

}

.neo-card-container{
  box-shadow                    : 0 0px 5px 3px rgba(0, 0, 0, 0.1) !important;
  overflow                      : hidden;
  border-radius                 : 8px;
  display                       : flex                                  !important;
  height                        : 100%                                  !important;
  margin-right                  : 0px                                  !important;
  margin-top                    : 10px;
}

.smcontainer{
    height                          : 100%          !important;
}

.items-bottom {
    margin-bottom                   : 0             !important;
}

.edit-suffix{
    order                           : 3;
}


.hidecard{
        display                     : none !important;

}





.card-flex {
    background                          : transparent                   !important;
    border-radius                       : 8px                       !important;
    box-shadow                          : 3px 3px 11px #b6c2d0, -1px -4px 9px 0px #ffffff;
    padding                             : 15px                          !important;
    display                             : flex;
    flex-direction                      : row;
    flex-wrap                           : wrap;
    justify-content                     : flex-start;
    align-items                         : stretch;
    position                            : relative;
    box-sizing                          : border-box;
    outline                             : none;
    height                              : 100%;
    width                               : 100%;
    margin                              : 10px              !important;
    gap                                 : 20px;


}

.card-flex--transparent{
    background-color                    : transparent   !important;
    border-radius                       : 0          !important;
    padding                             : 0 !important;
    box-shadow                          : none;
}

.left-flex{
    flex                            : 2;
    box-shadow                      : 3px 3px 11px #b6c2d0, -1px -4px 9px 0px #ffffff;
    border-radius                   : 5px;
    padding                         : 15px;
    background-color                : white;
    height                          : 100%;
    overflow                        : scroll;
}

.right-flex {
    flex                            :1;
    box-shadow                      : 3px 3px 11px #b6c2d0, -1px -4px 9px 0px #ffffff;
    border-radius                   : 5px;
    background-color                : white;
    padding                         : 10px 0 10px 0;
}

.right-flex--nopadding{
    padding                         : 0                 !important;
}

.right-flex--scroll {

    overflow-y                      : scroll;
    overflow                        : hidden;
}

.right-card-flex--full{
    padding                         : 0;
}

.left-card--flex {
  background                        : white                         !important;
  border-radius                     : 8px                           !important;
  box-shadow                        : 3px 3px 11px #b6c2d0, -1px -4px 9px 0px #ffffff;
  padding                           : 15px                          !important;
  display                           : flex;
  flex-direction                    : column;
  flex-wrap                         : wrap;
  box-sizing                        : border-box;
  justify-content                   : flex-start;
  align-items                       : stretch;
  height                            : 100%;
  width                             : 100%;

}

.left-full--height {
    height                          : calc(100% - 70vh);
    display                         : flex;
}


.left-mini--height {
    height                          : calc(100% - 85vh);
    display                         : flex;
}

.right-full--height {
    height                          : calc(100% - 70vh) !important   ;
    display                         : flex;
}

.right-full--nodisplay {
    height                          : 100% !important;
    box-shadow                      : none;
    padding                         : 0;
}

.left-full--hide {
    display                         : none;
}



.right-full--hide {
    display                         : none;
}



.scrollbox{
    border                          : none;
    background-color                : white;
    width                           : 100%   ;
    height                          : 100%;

    position                        : relative;
    box-sizing                      : border-box;
    overflow                        : auto;
    white-space                     : nowrap;
    display                         : block;
    border-radius                   : 5px;

}


.scrollbox > div{

    height                           : 100%;
}



/* ------------  CSS for Grids that sit inside a page control to be plugged into a card
/* TabSheet pane: only target tabs that explicitly opt-in via 'tilepage-obsgauge' */
/* --- TabSheet scope: let TMS handle visibility; we only fix nowrap/size --- */
/* scope: your Grid tab sheet */
.neo-tabsheet-full.tilepage-obsgauge{

    width       : 100%;
    height      : 100%;
    box-sizing  : border-box;
}

/* 1) FORCE VERTICAL STACKING inside the card (no side-by-side) */
.neo-tabsheet-full.tilepage-obsgauge .modern-grid-card{
    display         : flex;
    flex-direction  : column;
    flex-wrap       : nowrap;             /* was wrap -> causes side-by-side */
    min-height      : auto;        /* <<< key for inner scroll */
}
.neo-tabsheet-full.tilepage-obsgauge .modern-grid-card > *{
    flex-basis   : initial;               /* every child takes full row */

}

/* 2) Make the header/search compact (or hide header) */
.neo-tabsheet-full.tilepage-obsgauge .modern-card-title{   /* hide title if you want */
    display      : none;               /* comment this out if you want it back */
}

.neo-tabsheet-full.tilepage-obsgauge .modern-option-section-across{
    display      : flex;
    flex-wrap    : nowrap;          /* keep on one line */
    align-items  : center;
    gap          : 4px;             /* tighter than 10px */
    padding      : 2px 6px !important; /* reduce vertical padding */
    margin       : 0 !important;    /* kill extra margins from .margined-card */
    width        : 100%;
    box-sizing   : border-box;
}

.neo-tabsheet-full.tilepage-obsgauge .modern-option-section-across .modern-input{
   flex         : 1 1 auto;        /* grow/shrink */
    min-width    : 0;
    height       : 24px !important; /* smaller */
    font-size    : 10px !important;
    line-height  : 1.3;
    padding      : 2px 6px !important;
}

/* 3) Grid should fill the rest of the card neatly */
.neo-tabsheet-full.tilepage-obsgauge .neo-grid{
    flex                : 1 1 auto      !important;
    width               : 100%;
    margin-top          : 55px          !important;
    margin-bottom       : 26px          !important;
    box-sizing          : border-box;


}


/* To keep the scrollbar only in the table content area */
.neo-tabsheet-full.tilepage-obsgauge .neo-grid-table > tbody > tr:last-child > td:last-child > div:first-child{
    height          : 100%;
    overflow-y      : auto              !important;
    overflow-x      : auto              !important;
}

.neo-tabsheet-full.tilepage-obsgauge .card-icon-small i {
    font-size    : 14px !important;
    line-height  : 1;
}



.neo-tabsheet-full.tilepage-obsgauge .chart-div > div:first-child,
.neo-tabsheet-full.tilepage-obsgauge .chart-div canvas {
    width      : 100% !important;
    height     : 100%  !important;
    min-height : 0;   /* or match your tile min height */
    box-sizing : border-box;
    padding     :  5px 0px 18px 0px !important;
}
.tilepage-obsgauge,
.tilepage-obsgauge .neo-tabsheet-full,
.tilepage-obsgauge .tilepagediv,
.tilepage-obsgauge .chart-div {
    width  : 100%;
    height : 100%;
    display: block;
    box-sizing: border-box;
}


.neo-tabsheet-full.tilepage-obsgauge .chart-div {
    width               : 100%              !important;
    height              : calc(100% - 30px) !important;
    min-height          : 0                 !important;
    position            : relative          !important;
    display             : block             !important;
    padding             : 5px               !important;
}

.neo-tabsheet-full.tilepage-obsgauge .chart-div > div {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

.tilepage-obsgauge canvas {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


.neo-tabsheet-full.tilepage-obsgauge .chart-div {
    white-space: normal !important;
    overflow: visible !important;
}

.neo-tabsheet-full.tilepage-obsgauge .chart-div > div {
    white-space: normal !important;
}

/* Fix the zero-height wrapper */
/* DB 5 Oct */
.neo-grid-table > tbody > tr:last-child > td:last-child > div:first-child {
    height: calc(100% - 4px) !important;

    min-height: 30px !important;
}



/* make the ACTIVE obs-gauge tab actually visible */
.neo-tabsheet-full.tilepage-obsgauge.active-tab                 {
  display                   : block              !important ;
  width                     : 100%                             ;
  height                    : 100%                             ;
  min-height                : 30px;
}



/* make the ACTIVE obs-gauge tab actually visible */
.neo-tabsheet-full.tilepage-obsgauge.setup-page{
    flex-direction          : row               !important;
}


/* ------------------------ */



.neo-grid-card--base {
    background                          : #f8fafc                   ! important ; /* #f1f5f9 !important; */
    padding                             : 0 !important;
    height                              : calc(100% - 100px)     !important;
    margin                              : 10px 0 10px 0;
    display                             : grid;
    height                              : 100%;
    width                               : 100%;
    display                             : grid;
    gap                                 : 40px;
    transition                          : all 0.3s ease;
   /* overflow-y                          : scroll;*/
}



.neo-grid-card--shadow {
  border-radius                     : 7px !important;
  box-shadow                        : inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}


.neo-grid-card {
  background                            : #f8fafc                   ! important ; /* #f1f5f9 !important; */
  border-radius                         : 7px !important;
  box-shadow                            : inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  padding                               : 15px !important;
  height                                : calc(100% - 20px)     !important;
  margin                                : 10px 0 10px 0;
  height                                : 100%;
  width                                 : 100%;
  display                               : grid;
  grid-template-rows                    : repeat(2, 1fr);
  grid-template-columns                 : repeat(2, 1fr);
  gap                                   : 30px;
  transition                            : all 0.3s ease;

}


.neo--single{
    width                               : 40vw;
    height                              : 100%    !important;
    overflow-y                          : scroll;
    grid-template-rows                  : 1fr;
    grid-template-columns               : 1fr;

}

.neo--double{
    grid-template-rows                : auto;
    /*grid-template-columns               : repeat(2, 1fr); */
    width                               : 40vw;
    height                              : 100%    !important;
    overflow-y                          : scroll;

}

.neo--thirds {
    grid-template-rows                : auto;
    grid-template-columns             : 2fr 1fr;
    margin                            : 10px;
    height                            : calc(100% - 1vh) !important;
    width                             : 100% ; /*calc(100% - 200px); */
    display                             : grid !important;

}

.neo--thirds > .modern-grid-card {
   width        : 100% !important;
    min-width    : 0 !important;
    max-width    : 100% !important;
    padding      : 0 !important;
    margin       : 0 !important;
    box-sizing   : border-box !important;
    overflow     : hidden !important;
}

.neo--mini {
    grid-template-rows                : auto;
    grid-template-columns             : 2fr 1fr;
    margin                            : 10px;
    height                            : calc(100% - 16vh) !important;
    width                             : calc(100% - 20px);
    display                             : grid !important;

}


.neo-flex--thirds {
    height                              : calc(100% - 200px)     !important;
    display                             : flex !important;
    flex-direction                      : row;
    flex-wrap                           : wrap;
    justify-content                     : space-between;
    align-items                         : center;


}


.neo--single {
    grid-template-rows                : auto;
    grid-template-columns             : 1fr;
    margin                            : 10px;

}

.neo--inner--layout-horizontal{
    outline                             : none;
    position                            : relative;
    box-sizing                          : border-box;
    user-select                         : none;
    -webkit-tap-highlight-color         : transparent;
    display                             : flex    ;
    flex-direction                      : row;
    justify-content                     : space-evenly;
    gap                                 : 15px;
    padding                             : 5px;
}


.neo-grid-viewport {
  flex                              : 1 1 auto      !important;
  min-height                        : 0       !important;
  overflow-y                        : auto    !important;
  overflow-x                        : hidden  !important;
/*  height                            : auto        !important;
  max-height                        : none    !important;       */
  position                          : relative  !important;
  margin: 10px !important;
}

.neo-grid {
    flex                            : 1 1 auto !important;
    display                         : flex;
    flex-direction                  : column;
    font-size                       : 0.75rem;
    line-height                     : 1.2353641176;
    font-weight                     : 400;
    letter-spacing                  : -0.022em;
    width                           : 100%;
    overflow-y                      : scroll;
   /* height                          : calc(100% - 80px) !important; *//* FIX: Account for title and footer */

}




.neo-grid td > div {
  height                            : 100% !important;
}

.neo-grid td > div > div {
  height                            : 100% !important; /* Remove the fixed 315px height */
  line-height                       : 0.5rem;
}



.grid-highlighted-row {
    background-color : #fffa99 !important;  /* Yellow highlight */
    transition       : background-color 0.3s ease;
}


.modern-grid-card {
    flex                              : 1 1 0;
    background                        : white                   !important;
    border-radius                     : 8px                       !important;
    box-shadow                        : 3px 3px 11px #b6c2d0, -1px -4px 9px 0px #ffffff;
    padding                           : 0                      !important;
    display                           : flex;
    flex-direction                    : column;
    flex-wrap                         : wrap;
    box-sizing                        : border-box;
    justify-content                   : flex-start;
    align-items                       : stretch;
    height                            : 100%;

}

.grid-card--medium{
    width                           : 100%;

}



.grid-card--narrow{
    width                           : 250px;

}


.neo-flex{
    flex                            : 1 1 auto;
    display                         : flex;
    flex-direction                  : column;
    overflow                        : hidden;
    font-size                       : 0.775rem;
    line-height                     : 1.2353641176;
    font-weight                     : 400;
    letter-spacing                  : -0.022em;
    width                           : 100%;
    height                          : 100%;
    margin-left                     : 10px;
}

.neo-flex td > div > div {
  overflow-y                        : auto                              !important;
  overflow-x                        : hidden                            !important;
}


.neo-flex-table {
  border-collapse                   : separate !important;
  border-spacing                    : 0 !important;
  border-radius                     : 5px !important;
  height                            : 100% !important;
  border                            : 1px solid #ccd4db;
  width                             : 100%;

}


.neo-flex-table tr{
    vertical-align                  : middle;
    height                          : 10px;
}

.neo-flex td > div {
  height                            : 100% !important;
}

.neo-flex td > div > div {
  height                            : 100% !important; /* Remove the fixed 315px height */
}



.neo-grid-table {
  border-collapse                   : separate !important;
  border-spacing                    : 0 !important;
  height                            : 100% !important;
  border-bottom                     : 1px solid #ccd4db;
  border-top                        : 1px solid #ccd4db;
  width                             : 100%;

}

.neo-grid-table tr{
    vertical-align                  : middle;
    height                          : 10px              !important;
}

/* FIX: Add scrolling to the table content area */
.neo-grid-table > tbody > tr:last-child > td:last-child > div:first-child {
    overflow-y                      : auto !important;
    overflow-x                      : hidden !important;
    height                          : calc(100% - 4px) !important; /* Small offset for border */
    min-height                      : 100px !important; /* Ensure minimum height even when empty */
}

/* FIX: Force the wrapper to take available height */
.neo-grid-table > tbody > tr:last-child > td:last-child {
    height                          : 100% !important;
    vertical-align                  : top !important;
}


.neo-grid table table tr:last-child {
  border-bottom                     : none !important;
}



.neo-grid table td {
  vertical-align                    : middle !important;
  padding-left                      : 3px !important;
}

.neo-grid input[type="checkbox"], input[type="checkbox"].neo-checkbox  {
  -webkit-appearance : none;
  -moz-appearance    : none;
  appearance         : none;

  width              : 1rem !important;
  height             : 1rem !important;
  margin             : 0 !important;
  border-radius      : 0.25rem;
  background-color   : white;
  border             : 1px solid #94a3b8;
  cursor             : pointer !important;
  position           : relative;
  box-shadow         : 0 0 0 1px rgba(0,0,0,0.1);
}

.neo-grid input[type="checkbox"]:checked::after,
input[type="checkbox"].neo-checkbox:checked::after {
  content        : '';
  position       : absolute;
  left           : 7px;
  top            : 2px;
  width          : 5px;
  height         : 12px;
  border         : solid #0EA5E9;
  border-width   : 0 2px 2px 0;
  transform      : rotate(45deg);
  background     : none;
  border-radius  : 0.5px;
  box-sizing     : border-box;
  /* optional: smooths out the edges */
}

.neo-grid .cell {
  display                           : flex !important;
  align-items                       : center !important;
  height                            : 100% !important;
  padding-left                      : 3px;
  font-size                         : 0.65rem;
  line-height                       : 1.5rem;
}


.neo-tabsheet {
    top                             : 50px                  !important;
    display                         : flex ;
    flex-direction                  : column                !important;
    height                          : calc(100% - 60px);
    width                           : 100%;
    border-radius                   : 8px;
    flex-wrap                       : wrap;
    align-content                   : stretch;
    justify-content                 : space-evenly;
   /* padding                         : 10px; */

}


.neo-tabsheet > div {
  height                            : 100%              !important;
  box-sizing                        : border-box        !important;
  display                           : flex;
  align-items                       : stretch;
  flex-direction                    : row;
  justify-content                   : space-between;
  width                             : 100% ;
  flex-wrap                         : wrap;
  align-content                     : stretch;
  align-items                       : stretch;

}


.neo-tabsheet-full {
    top                             : 0                  !important;
    display                         : flex ;
    flex-direction                  : column                !important;
    height                          : calc(100% - 60px);
    width                           : 100%;
  /*  border-radius                   : 8px;*/
    flex-wrap                       : wrap;
    align-content                   : stretch;
    justify-content                 : space-evenly;
   /* padding                         : 10px; */

}

.neo-tabsheet-full > div {
  height                            : 100%              !important;
  box-sizing                        : border-box        !important;
  display                           : flex;
  align-items                       : stretch;
  flex-direction                    : column               !important;
  justify-content                   : space-between;
  width                             : 100% ;
  flex-wrap                         : wrap;
  align-content                     : stretch;
  align-items                       : stretch;
  gap                               :10px;

}


#neo-pagecontrol{
    height                          : calc(100% - 30px);
    width                           : calc(100% - 30px)         !important;
    top                             : 15px                      !important;
    left                            : 15px                      !important;
    display                         : flex;
    flex-direction                  : column;
    align-items                     : stretch;
    align-content                   : flex-start;
    position                        : relative;

}

.modern-card-mid-textblock{
    outline                         : none;
    position                        : relative;
    box-sizing                      : border-box;
    height                          : 40px;
    display                         : flex;
    flex-direction                  : column;
    flex-wrap                       : wrap;
    align-content                   : stretch;
    justify-content                 : space-evenly;
    align-items                     : center;
}



/* ===== Sensors grid — isolated scope, no globals ===== */
/* isolated to this grid only */
/* container fills its tile; no opinion on jqx internals */
.sg-grid {
  position    : absolute;
  inset       : 0;
  min-height  : 50px;
  box-sizing  : border-box;
  font-size   : 12px !important;
}

/* let jqx decide the split between header/content/pager */
.sg-grid .jqx-grid,
.sg-grid .jqx-widget {
  width       : 100% !important;
  height      : 100% !important;
  box-sizing  : border-box;
}

/* CRITICAL: do NOT force 100% on these, or the pager can’t appear */
.sg-grid .jqx-grid-content,
.sg-grid .jqx-grid-table {
  height      : auto !important;
}

/* optional: if the grid sits directly inside a flex child */
.modern-grid-card > .sg-grid {
  min-height  : 0;
  min-width   : 0;
}

/* row sizing is fine to keep */
.sg-grid .jqx-grid-row,
.sg-grid .jqx-grid-cell {
  height      : 25px !important;
  line-height : 25px !important;
  box-sizing  : border-box;
}

/* the card that hosts the grid must be visible & fill */
.tilepage-obsgauge .modern-grid-card                            {
  display                   : flex               !important ;
  width                     : 100%                             ;
  height                    : 100%                             ;
  box-sizing                : border-box                       ;
}

/* force just THIS grid to fill its card (overrides inline 0×0) */
.tilepage-obsgauge .sg-grid                                     {
  position                  : absolute                          ;
  inset                     : 0                                  ;
  width                     : 100%               !important   ;
  height                    : 100%               !important   ;
  box-sizing                : border-box                       ;
}

/* jqx internals need explicit sizes or they collapse */
.tilepage-obsgauge .sg-grid .jqx-widget,
.tilepage-obsgauge .sg-grid .jqx-grid,
.tilepage-obsgauge .sg-grid .jqx-grid-content,
.tilepage-obsgauge .sg-grid .jqx-grid-table                     {
  width                     : 100%               !important   ;
  height                    : 100%               !important   ;
}

/* reserve header (~35px); if you enable paging, add ~40px more */
.tilepage-obsgauge .sg-grid .jqx-grid-content                   {
  height                    : calc(100% - 35px)                 ;
  overflow                  : auto                              ;
}
.tilepage-obsgauge .sg-grid.sg-paging .jqx-grid-content         {
  height                    : calc(100% - 75px)                 ;
}

/* Sidebar and content cards */
/*.modern-grid-card {
  background                        : white                   !important;
  border-radius                     : 8px                       !important;
  box-shadow                        : 0 0px 5px 3px rgba(0, 0, 0, 0.1);
  padding                           : 0                      !important;
  display                           : flex;
  flex-direction                    : column;
  flex                              : 1 1 0;
  flex-wrap                         : wrap;
  box-sizing                        : border-box;
  justify-content                   : flex-start;
  align-items                       : stretch;
  height                            : 100%;

}   */




.tiles-flex-card {
  background                        : white                   !important;
  border-radius                     : 8px                       !important;
  box-shadow                        : 3px 3px 11px #b6c2d0, -1px -4px 9px 0px #ffffff;
  padding                           : 0                      !important;
  display                           : flex;
  flex-direction                    : column;
  flex                              : 1 1 0;
  flex-wrap                         : wrap;
  box-sizing                        : border-box;
  justify-content                   : flex-start;

  height                            : 100%;

}



.modern-flex-card{
    background                        : white                   !important;
    border-radius                     : 8px                       !important;
    box-shadow                        : 3px 3px 11px #b6c2d0, -1px -4px 9px 0px #ffffff;
    padding                           : 0                      !important;
    display                           : flex;
    flex-direction                    : row;
    flex                              : 1 1 0;
    flex-wrap                         : wrap;
    box-sizing                        : border-box;
    justify-content                   : flex-start;
    align-items                       : stretch;
    height                            : 100%;
    width                             : 50%;
    align-content                     : space-between;
}


.modern-flex-panel {
    display                             : flex;
    flex-direction                      : row;
    align-content                       : space-between;
    align-items                         : stretch;
    height                              : calc(100% - 20px)     !important;
    width                               : 50%;
    margin-top                          : 10px;
    margin-bottom                       : 10px;
}

.sidemenu-selection{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 50%;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 15px;
}

/*
.modern-sidebar-card > span{
    color                           : rgb(0, 0, 0);
    overflow                        : hidden;
    outline                         : none;

    left                            : 0;
    width                           : 100%;
    height                          : calc(100% - 80px)         !important;
    position                        : absolute;
    box-sizing                      : border-box;
    user-select                     : none;
    -webkit-tap-highlight-color     : transparent;
    background-color                : rgb(255, 255, 255);
    font-family                     : Inter;
    font-style                      : normal;
    font-size                       : 11pt;
    padding                         : 10px;
}
*/


.modern-sidebar-card > canvas{
   padding                          : 0;
}

.stepdiv {
    display                         : flex;
    flex-direction                  : row;
    flex-wrap                       : wrap;

}


.modern-content-card {
  background                        : #f8fafc !important;
  border-radius                     : 8px !important;
  box-shadow                        : inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  padding                           : 5px !important;
  height                            : 100% !important;
  display                           : flex !important;
  flex-direction                    : column !important;
}

.modern-card-title {
  background                        : #f1f5f9cf;
  color                             : black;
  border-radius                     : 8px 8px 0 0 !important;
  border-bottom                     : 1px;
  border-color                      : #e2e8f0;
  padding                           : 8px 15px !important;
/*  margin                            :  -20px -20px 10px -20px !important;*/
  margin                            : 0;
  font-weight                       : 600           !important;
  font-size                         : 0.875rem      !important;
  height                            : 40px;
  flex                              : 0 0 auto !important;
  width                             : 100%;
}

.modern-card-title h2,
.modern-card-title h4 {
  font-size: 14px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 600 !important;
}

.modern-card-footer {
    padding                         : 10px;
    flex                            : 0 0 auto !important;
}

/* Option sections */
.modern-option-section-across {
  background                        : #f8fafc !important;
  border-radius                     : 8px !important;
  box-shadow                        : inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  padding                           : 10px !important;
  margin                            : 5px !important;
  display                           : flex;
  flex-direction                    : row;
  flex-wrap                         : wrap;
  align-content                     : center;
  align-items                       : center;
  justify-content                   : space-between;
  gap                               : 10px;
  width                             : calc(100% - 10px);

}

.flex--end{
    justify-content                   : flex-end            !important;
}


.unset--width {
   width                            : unset                     !important;
}

.margined-card{
    margin          : 5px;
}

.modern-option-section-across > * {
  flex                          : 0 0 auto;
}


.modern-option-section-across-main {
  background                        : #f8fafc !important;
  border-radius                     : 8px !important;
  box-shadow                        : inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  padding                           : 15px !important;
  margin-top                        : 10px;
  margin-bottom                     : 10px !important;
  display                           : flex;
  flex-direction                    : row;
  flex-wrap                         : wrap;
  align-content                     : flex-start;
  align-items                       : flex-start;
  justify-content                   : flex-start;
  gap                               : 15px;
  width                             : calc(100vw - 40vw - 350px);
  height                            : calc(100% - 20px);

}

.modern-option-section-grid{
  background                        : #f8fafc !important;
  border-radius                     : 8px !important;
  box-shadow                        : inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  padding                           : 15px !important;
  margin-bottom                     : 15px !important;
  display                           : grid;
  grid-template-rows                : repeat(2, 1fr);
  grid-template-columns             : repeat(2, 1fr);
}


.modern-option-section-across input[type="NUMBER"] {
  flex                              : 0 0 auto !important;
  width                             : 80px !important;
  order                             : 2 !important;
}

.modern-option-section-across div:first-child {
  flex                              : 0 0 auto !important;
  order                             : 1 !important;
}

.modern-option-section-across div:last-child {
  flex                              : 0 0 auto !important;
  order                             : 3 !important;
}

.modern-option-section-down {
  background                        : #f8fafc !important;
  border-radius                     : 8px !important;
  box-shadow                        : inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  padding                           : 15px !important;
  margin-top                        : 5px !important;
  display                           : flex;
  flex-direction                    : column;
  flex-wrap                         : wrap;
  align-content                     : flex-start;
  align-items                       : stretch;
  justify-content                   : flex-start;
 /* gap                               : 10px; */
}

.section-down-container  {
  display                           : flex;
  flex-direction                    : column;
  flex-wrap                         : wrap;
  align-content                     : flex-start;
  align-items                       : stretch;
  justify-content                   : flex-start;
}



.section-across-container  {
  display                           : flex;
  flex-direction                    : column;
  flex-wrap                         : wrap;
  justify-content                   : space-between;
  width                             : calc(100% - 42vw);
  height                            : 100%;
  gap                               : 15px;
  margin-top                        : 5px;
}


.dashboard-columns {
    display                         : flex;
    flex-direction                  : row;
    width                           : 100%;
    gap                             : 15px;
    height                          : 100vh;
    min-height                      : 50px;
}

.dashboard-columns > .modern-sidebar-card,
.dashboard-columns > .sidemenu-selection {
    flex                            : 1 1 0;
    min-width                       : 0;
    height                          : 100%;
    box-sizing                      : border-box;

}



.checkbox-across{
    display                         : flex;
    flex-direction                  : row;
    justify-content                 : space-between;
    align-items                     : stretch;
    gap                             : 15px;
    padding                         : 5px;

}

/* Modern inputs */
.modern-input {
  background                        : #ffffff !important;
  border                            : 1px solid #e2e8f0 !important;
  border-radius                     : 5px !important;
  padding                           : 5px 8px !important;
  transition                        : all 0.2s ease !important;
}



.modern-input:focus {
  border-color                      : #0ea5e9 !important;
  box-shadow                        : 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
  outline                           : none !important;
}


/* Modern inputs */
.modern-input-large {
  background                        : #ffffff !important;
  border                            : 1px solid #e2e8f0 !important;
  border-radius                     : 5px !important;
  padding                           : 5px 8px !important;
  transition                        : all 0.2s ease !important;
  height                            : 10rem;
}



/* Map specific */
.mapblockdiv {
  height                            : 100% !important;
  width                             : 100% !important;
  position                          : relative !important;
}

/*
.mapsheet {
  height                            : 100% !important;
  width                             : 100% !important;
  background                        : #f8fafc !important;
  border-radius                     : 12px !important;
  overflow                          : hidden !important;
}
*/


/* FIX: neo-grid-card-two to not overflow */
.neo-grid-card-two {
    background                      : #f8fafc                   ! important ; /* #f1f5f9 !important; */
    border-radius                   : 7px !important;
    box-shadow                      : inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
    padding                         : 15px !important;
    height                          : calc(100% - 20px)     !important;
    margin                          : 10px 0 10px 0;
    overflow                        : hidden !important;
    display                         : flex !important;
    flex-direction                  : row !important;
    gap                             : 15px !important;
    margin-top                      : 10px;
    margin-bottom                   : 10px;
    padding                         : 15px;
}

/* FIX: Ensure left card (Gauges) takes proper space */
.neo-grid-card-two > .modern-grid-card:first-child {
    flex                            : 0 0 400px !important;
    min-width                       : 400px !important;
}

/* FIX: Ensure right card (Selection) takes remaining space */
.neo-grid-card-two > .modern-grid-card:last-child {
    flex                            : 1 1 auto !important;
}

/* AGGRESSIVE FIX: Override inline height: 0px on wrapper div */
.neo-grid-table > tbody > tr:last-child > td:last-child > div {
    height                          : calc(100% - 6px) !important;
    min-height                      : 50px !important;
}





.scrollable-card {
    overflow            : auto;
    max-height          : 100%;
    height              : 100%;
    display             : flex;
    flex-direction      : column;
}

/* Ensure cards within the scrollable canvas behave properly */
.scrollable-canvas .dashboard-card {
    margin-bottom: 8px;
    flex-shrink: 0;
}

/* Fix for embedded forms to respect parent container size */
.modern-grid-card > form,
.modern-grid-card > div[data-embedded-form] {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Ensure the selections div maintains its size */
.neo-grid-card--base .modern-grid-card:last-child {

    overflow: hidden;
}


/* from dashboardbuilder css */



/* ============================================================================
   1) The outer wrapper around everything (dashboard‐tile‐container)
   ----------------------------------------------------------------------------
   Remove its forced 100%×100% and flex so that it no longer covers
   the header/sidebar. We simply let Delphi’s Align/Dimensions control
   its size and position.
   ============================================================================ */



.builder-main-div {
    position                    : relative;
    display                     : flex;
    flex-direction              : column;
    width                       : 100%;
    height                      : 100%;
    margin-top                  : 0;
    background-color            : #f8fafc;
    transition                  : width 400ms ease-in-out !important;
    overflow                    : hidden !important;

}



.dashboard-container {
  display                   : grid                  !important;
  gap                       : 16px                  !important;
  box-sizing                : border-box            !important;
  width                     : 100%                  !important;
  height                    : 100%                  !important;
  position                  : relative              !important;
  padding                   : 10px                  !important;
  overflow                  : visible               !important;
  grid-template-rows        : unset                 !important;
  grid-auto-rows            : 1fr                   !important;
  font-size                 : 2rem;
  transition                : width 400ms ease-in-out !important;
  max-width                 : 100% !important;
  position                  : relative              !important;

}


/*

.dashboard-container {
  display                   : grid                  !important;
  gap                       : 16px                  !important;
  box-sizing                : border-box            !important;
  width                     : 100%                  !important;

  padding                   : 10px                  !important;

  overflow-y                : auto !important;
  overflow-x                : hidden !important;

}      */


/* ============================================================================
   3) Each tile (dashboard‐tile) MUST NOT be absolutely positioned.
   ----------------------------------------------------------------------------
   Delphi injected `position:absolute; top:0; left:0; width:100px; height:25px`.
   We override each of those with `!important` so the grid can place them.
   ============================================================================ */

.dashboard-card {
  /* Override Delphi’s absolute positioning */
  position                  : relative              !important;
  top                       : auto                  !important;
  left                      : auto                  !important;
  width                     : 100%                  !important;
  height                    : auto                  !important;
  box-sizing                : border-box            !important;
                                                     /*
  /* Basic “card” styling */
  background-color          : #ffffff               !important;
  border                    : 1px dashed #d1d5db    !important;
  border-radius             : 8px                   !important;
  overflow                  : hidden                !important;

  /* Center contents (title + buttons) */
  display                   : flex                  !important;
  flex-direction            : row                   !important;
  align-items               : center                !important;
  justify-content           : space-between                !important;
  text-align                : center                !important;
  align-content             : flex-start;
  flex-wrap                 : wrap;

  /* Give it a visible minimum size so you can see it at design‐time */
  min-width                 : 150px                 !important;
  min-height                : 50px                 !important;

  padding                   : 0;
  z-index                   : 1                    !important;
}

.dashboard-card-hidden {
    display              : none;
}



.dashboard-card-invisible{

    visibility              : hidden;
    /* display: none !important; */
}

/*.dashboard-card:hover, */
.dashboard-card,
.dashboard-card:focus,
.dashboard-card:visited  {
  border                    : 1px dashed #d1d5db    !important;
  }


.dashboard-card:active{
  border                    : 1px solid #d1d5db    !important;
  }


.dashboard-card.maximized {
  position                  : absolute                       !important;
  inset                     : 0                              !important;  /* top/left/right/bottom = 0 */
  width                     : auto                           !important;
  height                    : auto                           !important;
  margin                    : 10px                           !important;
  padding                   : 0                              !important;
  z-index                   : 1000                           !important;
  /* ignore grid placement completely while Maximized */
  grid-column               : auto                           !important;
  grid-row                  : auto                           !important;
  overflow                  : hidden                          !important;
}

.dashboard-card.maximized .card-header,
.dashboard-card.maximized .card-toolbar {
    position                : relative                       !important;
    z-index                 : 100000                         !important;
}

/*
.dashboard-card .card_contentdiv {
  position                  : absolute                       !important;
  top                       : 40px                            !important;
  left                      : 0                               !important;
  right                     : 0                               !important;
  bottom                    : 0                               !important;
  width                     : 100%                            !important;
  height                    : auto                            !important;
  overflow                  : hidden                          !important;
}
*/





.image-placeholder{
    position                : relative;
    width                   : 100%;
    height                  : 100%;
}


.image-placeholder-hidden{
    display                 : none                  !important;
}



.dashboard-imagecard-container{
    width                       : 100%              !important;
    height                      : calc(100% - 35px) !important;
    border-top-left-radius      : 0                 !important;
    border-top-right-radius     : 0                 !important;

}

.dashboard-imagecard{
    width                       : 100%              !important;
    height                      : calc(100% - 35px) !important;
    border-top-left-radius      : 0                 !important;
    border-top-right-radius     : 0                 !important;
    box-shadow                  : none              !important;

}

.selected--card{
    border                    : 1px dashed #ab0000    !important;
}

.selected--card .card_contentdiv {
    box-shadow:  inset 3px 3px 8px 0px rgba(60,60,60,0.18),      inset -2px -2px 4px 0px rgba(255,255,255,0.18);
}

.card_headerdiv {
    position                    : relative              !important;
    display                     : flex                  !important;
    flex-direction              : row                   !important;
    justify-content             : flex-end              !important;
    flex-wrap                   : wrap;
    align-items                 : center                !important;
    gap                         : 8px                   !important;
    flex                        : 0 0 auto              !important;
    width                       : 100%                  !important;
    box-sizing                  : border-box            !important;
    padding                     : 4px                   !important;
    background-color            : white;
    height                      : 37px                  !important;
    cursor                      : pointer;
    border-bottom               : 1px solid  #d5d5d5  ;
    box-shadow                  : 0 1px 8px 0px rgba(60, 60, 60, 0.18);
    z-index                     : 10;
}


.card_headerdiv:hover{
    border-radius               :   3px;
    background-color            :  #f8fafc ;
    box-shadow                  : 0 0 10px rgba(0, 123, 255, 0.5);
}

.card_title {
    position                : relative;
    font-size               : 0.6rem;
    padding                 : 4px 3px;
    white-space             : normal !important;
    overflow-wrap           : break-word !important;
    word-break              : break-word !important;

}


.card_subtitle {
    position                : static;
    font-size               : 0.4rem;
    padding                 : 3px;
    white-space             : normal !important;
    overflow-wrap           : break-word !important;
    word-break              : break-word !important;

}



/* A slightly taller min-height if you need more vertical space for buttons */
@media all {
  .dashboard-container .dashboard-card {
    min-width               : 150px !important;
    min-height              : 50px !important;
  }
}

/* On hover, change border + box-shadow (exactly like React) */
.dashboard-card:hover {
  border-color              : #3b82f6 !important;
  box-shadow                : 0 4px 6px rgba(0,0,0,0.1) !important;
}

.dashboard-card.drag-over {
    border                  : 2px dashed #007bff;
    box-shadow              : 0 0 10px rgba(0, 123, 255, 0.5);
    background-color        : rgba(0, 123, 255, 0.1); /* Light blue overlay */
}

/* Override any inline font/style rules that might squeeze out text */
.dashboard-card > * {
  box-sizing                : border-box !important;
}

/* ============================================================================
   4) Buttons inside each tile
   ----------------------------------------------------------------------------
   Keep these small and transparent, turning blue on hover.
   ============================================================================ */
.dashboard-card button {
  background-color          : transparent !important;
  border                    : none !important;
  cursor                    : pointer !important;
  margin                    : 2px !important;
  font-size                 : 14px !important;
}

.dashboard-card button:hover {
  color                     : #1d4ed8 !important;
}

/* ============================================================================
   5) Sidebar (dashboard-left-paneldiv) – preserve your existing rules
   ----------------------------------------------------------------------------
   Just ensure no “width:100%” or “position:absolute” sneaks in.
   ============================================================================ */
.dashboard-left-paneldiv {
  width                     : 100%                          !important;
  height                    : 100%                          !important;
  display                   : flex                          !important;
  flex-direction            : column                        !important;
  background-color          : #ffffff                       !important;
  border-right              : 1px solid #e2e8f0             !important;
  padding                   : 0                             !important;
  box-sizing                : border-box                    !important;
}

/* Sidebar header (icon + title) */
.dashboard-topleft-cornerdiv {
  display                   : flex                          !important;
  flex-direction            : row                           !important;
  justify-content           : space-between                 !important;
  align-items               : center                        !important;
  gap                       : 15px                          !important;
  height                    : 80px                          !important;
  width                     : 100%                          !important;
  padding                   : 16px                          !important;
  border-bottom             : 1px solid #e2e8f0             !important;
  box-shadow                : 5px 0px 10px 1px rgba(0, 0, 0, 0.1) ;
  box-sizing                : border-box                    !important;
  z-index                   : 10;
}

.dashboard-topleft-cornerdiv.divider{

  border-top            : 1px solid #e2e8f0             !important;

}


/* Button panel in sidebar */
.dashboard-button-paneldiv {
    display                     : flex                          !important;
    justify-content             : flex-start                    !important;
    position                    : relative                      !important;
    border                      : none                          !important;
    /*width                       : 100%                          !important; */

}

.pg_newdashboard{
    position                    : relative                      !important;
    display                     : flex;
}

.createdashboardnamediv {
    display                     : flex;
    justify-content             : space-between                    !important;
    position                    : relative                      !important;
    flex-direction              : row-reverse                        ;
    gap                         : 15px;
    padding-top                 : 10px;
    padding-bottom              : 10px;


}


.adjustsensorsdiv {
    display                     : flex;
    justify-content             : space-between                    !important;
    align-items                 : center;

    position                    : relative                      !important;
    flex-direction              : column  ;
    gap                         : 15px;
    padding-top                 : 15px;
    padding-bottom              : 10px;


}

/* Tiles list inside sidebar */
/* Scope: ONLY the sidebar list */
.dashboard-card-list {
  position           : relative;
  display            : flex;
  flex-direction     : column;
  gap                : 10px                 !important;
  padding            : 4px 8px              !important;
  box-sizing         : border-box;
  flex               : 1 1 auto;
}

/* Make each card a flex row; kill absolute + fixed size */
.dashboard-card-list > .sidebar_card_container {
  position           : relative            !important;
  left               : auto                !important;
  top                : auto                !important;
  width              : 100%                !important;
  height             : auto                !important;
  display            : flex                !important;
  align-items        : center;
  justify-content    : space-between;
  padding            : 6px 10px;
  border-radius      : 8px;
  background-color   : #ffffff;
  box-shadow         : 0 2px 4px rgba(0,0,0,0.12);
  box-sizing         : border-box;
}

/* Text block: stop absolute stacking; let it grow */
.dashboard-card-list .sidebar_card_text_div {
  position           : static              !important;
  width              : auto                !important;
  height             : auto                !important;
  display            : flex;
  flex-direction     : column;
  flex               : 1 1 auto;
  overflow           : hidden;
}

/* Ellipsis for both lines */
.dashboard-card-list .sidebar_card_title label,
.dashboard-card-list .sidebar_card_subtitle label {
  margin                : 0;
  white-space           : nowrap;
  overflow              : hidden;
  text-overflow         : ellipsis;
  cursor                : pointer ;
}

/* Trash icon pinned to the end */
.dashboard-card-list .card-icon-small {
  flex               : 0 0 auto;
  margin-left        : 8px;
  cursor             : pointer;
  color              : #666;
  cursor             : pointer ;
}

/* Optional: hide or let this sit at end without forcing size */
.dashboard-card-list .control-div {
  position           : static              !important;
  width              : auto                !important;
  height             : auto                !important;
  flex               : 0 0 auto;
}
.dashboard_header_div{
    display                     : flex;
    align-items                 : flex-end;
    flex-direction              : column;
}


.dashboard_subheader{
    border-top                  : 1px solid  #0284c7;
}




.dashboard_card_container{
    position                    : relative                      !important;
    display                     : flex;
    flex-direction              : row;
    flex-wrap                   : wrap;
    justify-content             : space-between;
    align-content               : center;
    border-radius               : 0.8rem                        !important;
    background-color            : #e2e8f0;
    border                      : 1px solid #3b82f6   ;
    width                       : 100%                          !important;
    height                      : 55px                          !important;
    padding                     : 0.75rem                       !important;

}
   /*
.dashboard-card-container {
    position                : relative;
    width                   : 100%;
    height                  : 100%;
    padding-top             : 0;
    padding-left            : 0;
    padding-right           : 0;
    display                 : flex;
    flex-direction          : row;
    align-items             : stretch;
    background-color        : #e0e7ff;
}

.dashboard-card-container {
  height                    : auto                  !important;
  padding-top               : 0                     !important;
  padding-left              : 0                     !important;
  padding-right             : 0                     !important;
  align-items               : stretch               !important;
  background-color          : #e0e7ff               !important;
  box-sizing                : border-box            !important;
}
*/

.dashboard_card_item{
    display                     : flex;
    align-items                 : center;

}

      /*
.sidebar_card_container {
    position                : relative                      !important;
    width                   : 100%                          !important;
    height                  : 30px                          !important;
    padding-top             :  2px                            !important;
    padding-bottom             :  2px                            !important;
    padding-left            : 0.75rem                       !important;
    padding-right           : 0.75rem                       !important;
    display                 : flex                          !important;
    flex-direction          : row                           !important;
    align-items             : stretch                       !important;
    background-color        : #e0e7ff                       !important;

    border-radius           : 3px;

}
       */


.settingscontentdiv{
    height                  : 100%;
    width                   : 100%;


}
.message-label {
    left                    : 0;
    transition              : all 0.4s ease-in-out;
}


.sidebar_card_container {
    position                : relative                      !important;
    width                   : 100%                          !important;
    height                  : 45px                          !important;
    padding-top             :  2px                            !important;
    padding-bottom          :  2px                            !important;
    padding-left            : 0.75rem                       !important;
    padding-right           : 0.75rem                       !important;
    display                 : flex                          !important;
    flex-direction          : row                           !important;
    align-items             : center                       !important;
    flex-wrap               : wrap;
    justify-content         : flex-end;
    background-color        : white                       !important;
    border-radius           : 5px;
    cursor                   : pointer                      !important;
   /* box-shadow              : inset 2px 2px 2px #d3d3d3, inset -2px -2px 2px #ededed; */
}


.sidemenu_card_container {
    position                : relative                      !important;
    width                   : 100%                          !important;
    height                  : 45px                          !important;
    padding-top             :  2px                            !important;
    padding-bottom          :  2px                            !important;
    padding-left            : 0.75rem                       !important;
    padding-right           : 0.75rem                       !important;
    display                 : flex                          !important;
    flex-direction          : row                           !important;
    align-items             : center                       !important;
    flex-wrap               : wrap;
    justify-content         : flex-end;
    background-color        : white                       !important;
    border-radius           : 5px;
    cursor                   : pointer;
   /* box-shadow              : inset 2px 2px 2px #d3d3d3, inset -2px -2px 2px #ededed; */
}


.sidebar_card_container-top {
    position                : relative                      !important;
    width                   : 100%                          !important;
    height                  : 45px                          !important;
    padding-top             :  2px                            !important;
    padding-bottom          :  2px                            !important;
    padding-left            : 0.75rem                       !important;
    padding-right           : 0.75rem                       !important;
    display                 : flex                          !important;
    flex-direction          : row                           !important;
    align-items             : center                       !important;
    flex-wrap               : wrap;
    justify-content         : flex-end;
    background-color        : white                       !important;
    border-radius           : 5px;
    cursor                   : pointer;
    margin                  : 5px;
    box-shadow              : inset 2px 2px 2px #d3d3d3, inset -2px -2px 2px #ededed;
}


.sidebar_card_container-subitem {
   box-shadow               : none;
}

.sidebar_card_container:hover {
    background-color         : #b8ceff;
    border-radius           : 5px;
    box-shadow              : 5px 0px 10px 1px rgba(0, 0, 0, 0.1) ;
}



.sidebar_card_container.selected {
   background-color         : #b8ceff;
   box-shadow               : 5px 0px 10px 1px rgba(0, 0, 0, 0.1) ;
   border                   : 1px solid #3360a9;

}



.sidebar_card_item{
    display                     : flex;
    align-items                 : center;
    position                    : relative;
    width                       : 100%;
    height                      : 100%;
    flex-direction              : row;
    align-items                 : center;
    justify-content             : space-between;
    flex-wrap                   : wrap;
    align-content               : center;
    border-radius               : 4px;
    cursor                      : pointer;

}


.sidebar_card_item:hover{



}

.sidebar_card_text_div{
    display                 : flex;
    flex-direction          : column;
    padding-left            : 8px;
    padding-top             : 3px;
    cursor                   : pointer;
}

.sidebar_card_title{
    font-size                   : 0.875rem;
    line-height                 : 1.25rem;
    cursor                      : pointer;
}

.sidebar_card_subtitle{
    font-size                   : 0.6rem;
    line-height                 : 1.25rem;
    cursor                      : pointer;
}

.sidebar_card_item  p {
    font-size                   : 0.875rem;
    line-height                 : 1.25rem;
    cursor                      : pointer;
}

.sidebar_badge {
    display                     : flex;
    align-items                 : center;
    justify-content             : center;
    border-radius               : 50%;
    background-color            : #3b82f6;
    color                       : white;
    height                      : 22px;
    width                       : 22px;
    font-size                   : 0.4rem;

}



.builder_container{
    width                   : 100%;
    height                  : 100%;
    display                 : flex;
    flex-direction          : row;



}



.region_badge p{
    vertical-align              : middle;
    display                     : table-cell;
    text-overflow               : clip;
    white-space                 : nowrap;
    font-size                   : 0.4rem;
    line-height                 : 1.25rem;

}


.sidemenu_divider{
    vertical-align              : middle;
    display                     : table-cell;
    text-overflow               : clip;
    white-space                 : nowrap;
    font-size                   : 11px;
    line-height                 : 1.25rem;
    border-top                  : 1px solid #e2e8f0;
    border-bottom               : 1px solid #e2e8f0;

}



.dashboard_card_icon {
    font-size                   : 1.5rem;

}

.dashboard_card_container.selected {
    background-color            : #2563eb;   /* A blue shade */
    border-color                : #1e40af;
    color                       : white;
}

.dashboard_card_container.selected .dashboard_card_item {
    color                       : white;
}

/* ============================================================================
   6) Header above the grid (to right of sidebar)
   ----------------------------------------------------------------------------
   Ensure 100% minus 320px width if you need to fill remaining space.
   ============================================================================ */
.dashboard-headerdiv {
  display                   : flex                              !important;
  flex-direction            : column                            !important;
  text-align                : center                            !important;
  justify-content           : center                            !important;
  align-items               : stretch                           !important;
  background-color          : #ffffff                           !important;
  border-bottom             : 1px solid #e2e8f0                 !important;
  padding                   : 16px 24px                         !important;
  height                    : 80px                              !important;
  width                     : 100%;
  margin-bottom             : 10px                              !important;
  flex-wrap                 : wrap                              !important;
  align-content             : stretch                          !important;
  box-sizing                : border-box                        !important;
  order                     : 1                                 !important;
  box-shadow                : 0 4px 10px 0 #b6c2d0;
}

/* Header icon styling */
.dashboard-icon i {
  font-size                 : 2rem !important;
  color                     : #4a5568 !important;
}


/* Header icon styling */
.card-icon-small{
    display                 : flex;
    flex-direction          : column;
    justify-content         : center;
}


.card-icon-small i {
  font-size                 : 1rem          !important;
  color                     : #0066cc       !important;
  display                   : flex;
  flex-direction            : column;
  flex-wrap                 : wrap;
  justify-content           : center;
  cursor                    : pointer       !important;
}



.card-icon-small:hover,
.card-icon-small:focus {
    color                       : #1e40af; /* Darker blue on hover */
    cursor                    : pointer       !important;
}

.card-icon-small:hover i,
.card-icon-small:focus i {
    color                       : #1e40af !important; /* Ensures the <i> icon changes too */
    cursor                      : pointer       !important;
}


.large_icon {
    width                   : 40px;        /* Or whatever you want */
    height                  : 40px;       /* Fill the parent height */
    display                 : flex;
    align-items             : center;
    justify-content         : center;
    font-size               : 38px;
    position                : relative              !important;
    padding                 : 5px;
    border-radius           : 3px;
    color                   :  #1e40af;
}

.pagebuilder_header_icon i {
  font-size                 : 1.5rem !important;
  color                     : #4a5568 !important;
  transition                : color 0.2s;
  cursor                    : pointer;
  z-index                   : 20;
}

.pagebuilder_header_icon:hover{
    cursor                    : pointer;
}




/*
.dashboard-headerdiv .dashboard-tabs {
    margin-top    : 0        !important;
    padding-top   : 0        !important;
    position      : relative !important;
    top           : -32px    !important;
    z-index       : 100      !important;
    background    : #fff     !important;
}

.dashboard-headerdiv .dashboard-tabs .tab-button {
    border        : none         !important;
    background    : none         !important;
    color         : #333         !important;
    font-size     : 18px         !important;
    padding       : 0 18px       !important;
    line-height   : 42px         !important;
    height        : 42px         !important;
}

.dashboard-headerdiv .dashboard-tabs .tab-button.active {
    border-bottom : 3px solid #1976d2 !important;
    color         : #1976d2           !important;
    background    : #fff              !important;

    font-weight   : bold              !important;
}
                          */

.builder-footer-div {
    background-color            : white;
    display                     : flex;
    flex-direction              : row;
    align-items                 : center;
    justify-content             : center;
    height                      : 100px;
    width                       : 100%;
    box-sizing                  : border-box;
    position                    : relative;
    order                       : 10                !important;
    padding                     : 0 10px 0 20px;
    gap                         : 10px;
    overflow                    : visible;
    z-index                     : 9999;
}


.footer-nav {
    display                     : flex;
    align-items                 : center;
    justify-content             : center;
    gap                         : 24px;     /* constant gap between items */
    width                       : fit-content;
    margin                      : 0 auto;   /* keep centered in footer */
    position                    : relative; /* anchor for the floating + */
    overflow                    : visible;
    z-index                     : 500;
}


.icon-container {
    width                       : 74px;
    height                      : 72px;
    display                     : flex              !important;
    flex-direction              : column-reverse;
    align-items                 : center;
    justify-content             : center;
    box-sizing                  : border-box;
    gap                         : 6px;
    cursor                      : pointer;
}

/* Apply to any clickable footer icon cell */
.icon-container,
.icon-container .nav-footer-icon,
.icon-container .nav-footer-text {
    cursor: pointer;
}

/* icon (Font Awesome label) */
.nav-footer-icon {
    font-size                   : 24px;     /* icon size */
    line-height                 : 24px;
    display                     : inline-block;
}

.nav-footer-icon i {
    font-size                   : 24px;
    line-height                 : 1;
}

.icon-container .nav-footer-icon i {
    font-size                   : 24px !important;        /* visible size */
    line-height                 : 1 !important;
}

/* text label */
.nav-footer-text {
    font-size                   : 12px;     /* caption size */
    line-height                 : 1.1;
    margin                      : 0;
    text-align                  : center;
    white-space                 : nowrap;
}

.plusicon-container {
    width                       : 74px;     /* matches other cells */
    height                      : 72px;     /* matches other cells */
    position                    : relative; /* contains the floating button */
    display                     : flex;
    align-items                 : center;
    justify-content             : center;
}

/* the circular button */
.plusicon-button {
    position                    : absolute              !important;
    left                        : 50%;
    top                         : -20px;                    /* raise above the footer row */
    transform                   : translateX(-50%);
    width                       : 72px                  !important;                         /* inner circle ~52px look */
    height                      : 72px                  !important;
    aspect-ratio                : 1 / 1;
    padding                     : 0;
    border-radius               : 50%;
    border                      : 1px solid #3b82f6;  /* thin ring */
    display                     : flex                  !important;
    align-items                 : center                !important;
    justify-content             : center                !important;
    background                  : linear-gradient(180deg, #3bb0ff, #187bff);
    box-sizing                  : border-box;
    box-shadow                  : 0 8px 16px rgba(0,0,0,0.2);
    cursor                      : pointer;
    overflow                    : visible                !important;
    z-index                     : 510;
}

.plusicon-button i {
    font-size                   : 30px;
    font-weight                 : 300;
    color                       : #fff;
    line-height                 : 1;
    cursor                      : pointer;
}

/* plus icon inside the button (Font Awesome label) */
.plusicon-button .nav-footer-icon {
    font-size                   : 32px;     /* slightly larger plus */
    line-height                 : 1;
    color                       : #ffffff;
}

/* Neutralize builder wrappers so sizes don’t get distorted */
.icon-container .nav-footer-icon,
.icon-container .nav-footer-text {
    display                     : flex !important;
    align-items                 : center;
    justify-content             : center;
    box-sizing                  : border-box;
}
.icon-container .nav-footer-icon p,
.icon-container .nav-footer-icon h6,
.icon-container .nav-footer-text p,
.icon-container .nav-footer-text h6 {
    margin                      : 0 !important;
    padding                     : 0 !important;
    display                     : block !important;
}


/*  active/hover feedback */
.icon-container:hover .nav-footer-icon,
.icon-container:hover .nav-footer-text {
    opacity                     : 0.85;
}

.plusicon-button:hover {
    box-shadow                  : 0 10px 20px rgba(0,0,0,0.24);
}

.period-trigger{
  overflow                    : visible;
  cursor                      : pointer;
}

.period-trigger .nav-footer-icon,
.period-trigger .nav-footer-text {
    cursor                      : pointer;
}



.icon-container.period-trigger {
    position                    : relative;
     overflow                    : visible;
}

.period-menu {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    height: auto;
    max-height: 60vh;
    overflow-y: auto;
    position: fixed;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    width: 200px !important;
    padding: 8px !important;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
    z-index: 5000;
    scrollbar-width: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateX(-50%) translateY(0);
}

.period-menu.fixed {
    opacity: 1;
}

.period-menu::-webkit-scrollbar {
    display: none;
}

.period-menu::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #ffffff;
}

.period-trigger.is-open .period-menu {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.period-option {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    min-height: 36px !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    background-color: #f3f6f9;
    color: #2b2f33;
    font-size: 13px;
    line-height: 1.2 !important;
    cursor: pointer;
}

.period-option p,
.period-option h6 {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

.period-option:hover {
    background-color: #e6f1ff;
    color: #125dff;
}

.period-option.is-selected,
.period-option[aria-selected="true"] {
    background-color: #1a7cff;
    color: #ffffff;
}

/* ===== RadioGroup → popup list look ===== */

/* Root container */
.rg-period{
    display                     : flex            !important;
    flex-direction              : column          !important;
    gap                         : 6px             !important;
    width                       : 200px           !important;
    padding                     : 8px             !important;
    border-radius               : 8px             !important;
    background-color            : #ffffff         !important;
    box-shadow                  : 0 10px 24px rgba(0,0,0,0.18) !important;
    max-height                  : 60vh            !important;
    overflow-y                  : auto            !important;
    box-sizing                  : border-box      !important;
    scrollbar-width             : none;
    font-size                   : 13px            !important;
    line-height                 : 1.2             !important;
}
.rg-period::-webkit-scrollbar{ display: none; }

/* Reset default fieldset/legend that TRadioGroup may emit */
.rg-period fieldset,
.rg-period legend{ all: unset; display: contents; }

/* Each option block (we style the label, which TRadioGroup always has) */
.rg-period label{
    position                    : relative        !important; /* allows input overlay */
    display                     : flex            !important;
    align-items                 : center          !important;
    min-height                  : 36px            !important;
    padding                     : 10px 12px       !important;
    border-radius               : 6px             !important;
    background-color            : #f3f6f9         !important;
    color                       : #2b2f33         !important;
    cursor                      : pointer         !important;
    box-sizing                  : border-box      !important;
    user-select                 : none            !important;
    transition                  : background-color .12s ease, color .12s ease, box-shadow .12s ease;
    /* keep text tidy like your popup */
    white-space                 : nowrap;
    margin                      : 0 !important;
}

/* Make the actual radio clickable but invisible.
   Case 1: input is INSIDE the label */
.rg-period label > input[type="radio"]{
    position                    : absolute !important;
    inset                       : 0        !important;  /* stretch over the label */
    width                       : 100%     !important;
    height                      : 100%     !important;
    opacity                     : 0        !important;
    margin                      : 0        !important;
    cursor                      : pointer  !important;
    appearance                  : none     !important;
    border                      : 0        !important;
    background                  : transparent !important;
    /* keep pointer events ON so clicks register */
}

/* Case 2: input is a sibling just before the label — keep it invisible but focusable */
.rg-period input[type="radio"]{
    position                    : absolute !important;
    opacity                     : 0        !important;
    pointer-events              : none     !important; /* only for the sibling case */
}

/* Hover styling like .period-option:hover */
.rg-period label:hover{
    background-color            : #e6f1ff !important;
    color                       : #125dff !important;
}

/* Selected state — handle BOTH DOM patterns */
.rg-period input[type="radio"]:checked + label,
.rg-period label:has(> input[type="radio"]:checked){
    background-color            : #1a7cff !important;
    color                       : #ffffff !important;
    box-shadow                  : 0 0 0 1px rgba(26,124,255,0.80) inset;
}

/* Keyboard focus outline when tabbing to the radio */
.rg-period input[type="radio"]:focus-visible + label,
.rg-period label:has(> input[type="radio"]:focus-visible){
    outline                     : 2px solid #1a7cff;
    outline-offset              : 2px;
}




.step-progress {
    display         : block                ;
    flex-direction  : row;
    align-items     : center;
    position        : relative;
    box-sizing      : border-box;
    flex-wrap       : nowrap;
    overflow        : hidden                    !important;
    white-space     : nowrap;
    margin-left     : 20px;
    width           : 50%;
    height          : 100%;
}


.step-progress--hidden {
    display         : none                ;
}

.step-circle {
    position        : relative;
    width           : 26px;
    height          : 26px;
    border          : 2px solid #3498db;
    border-radius   : 50%;
    background-color: white;
    transition      : background-color 0.3s, border-color 0.3s;
    flex-shrink     : 0;
    z-index         : 10;
    top             : 4px !important;
}

.step-circle.active {
    background-color: #3498db;
    border-color    : #3498db;
}

.step-line {
    height          : 2px;
    width           : 100px;
    background-color: #ccc;
    flex-grow       : 1;
    margin          : 0 5px;
    transition      : background-color 0.3s;

}

.step-line.active {
    background-color: #3498db;
}

.step-label {
    top             : 30px              !important;
    text-align      : center;
    font-size       : 10px;
    margin-top      : 3px;
}


.inner-infolabel{
    font-size       :0.75rem;
    position       : relative !important;
    display        : block !important;
    margin-bottom  : 2px;
}



.message-div{
    display                 : block;
    width                   : 100%;
    height                  : 100%;
    background-color        : white;
    box-shadow              : inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
    border-radius           : 5px;
    margin                  : 4px;
}


.footer-status-msg{
    display                 : block;
    width                   : 100%;
    height                  : 30px;
    background-color        : white;
    box-shadow              : none;
    border-top              : 1px solid grey;

}






.card_info_contentdiv{
    display                 : flex;
    flex-direction          : column;
    flex-wrap               : wrap;
    border-radius           : 4px;
    width                   : 100%              !important;
    height                  : 100%              !important;
    padding                 : 5px               !important;
    order                   : 10;
    background-color        : white;
    border-radius           : 5px;
    align-items             : flex-start;
    justify-content         : flex-start;
    box-shadow              : inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;




}


.menu-item{
    font-family             : Inter;
    font-size               : 0.75rem;
    font-weight             : 300;
    color                   : #1A1F2C !important;
}



/* Center the login-form container in the viewport */
.pagecontrol_outer_container{
    position                : relative;
    justify-content         : flex-end;
    flex-direction          : column;
    height                  : calc(100% - 90px);
    width                   : 100%;
    display                 : flex;
    padding                 : 10px;

    overflow                : visible;

}

.pagecontrol_outer_container--large{
     min-height              : 50px;
}

.pagecontrol_outer_container > span {

    width                   : 100%          !important;
    height                  : 100%          !important;
    position                : relative;
    box-sizing              : border-box;
    pointer-events          : auto;
    display                 : flex;
    flex-direction          : column-reverse;
    align-items             : center;

}


.innergridpanel{
    padding                 : 15px;
}

.pagecontrol_generic{
        outline                 : none;
    position                : relative;
    box-sizing              : border-box;
    user-select             : none;
    height                  : 100%;
    width                   : 100%;
    display                 : flex;
    flex-direction          : column;
    align-items             : flex-end;
    flex-wrap               : wrap;
    order                   : 2;
}


.pagecontrol_generic > span{
    width                   : 100%              !important;
    height                  : 100%              !important;
}


.pagecontrol_container_div{
    outline                 : none;
    position                : relative;
    box-sizing              : border-box;
    user-select             : none;
    height                  : 100%;
    width                   : 100%;
    display                 : flex;
    flex-direction          : column;
    align-items             : flex-end;
    flex-wrap               : wrap;

}

.pagecontrol_container_div > span{
    width                   : 100%;
    height                  : calc(100% - 100px);
}

.pagecontrolbody{
    width                   : 100%;
    height                  : calc(100% - 100px);
    display                 : flex;
    flex-direction          : column-reverse;


}

.pagecontrol_header{
    width                   : 100%;
    height                  : 100%              !important;
}




#pagecontrolID{
    height          : calc(100% - 100px)        !important;
    top             : 0;
    display         : flex                      !important;
    flex-direction  : row;
    align-items     : flex-start;


}

#displaypagecontrol-id {
    order               : 2                     !important;
    height              : 100%                  !important;
    width               : 100%                  !important;
    border              : none                  !important;
    background-color    : transparent           !important;
}

#pagecontrolID2{
    height          : 100%                      !important;
    top             : 0;
    width           : 100%;

    display         : flex                      !important;
    flex-direction  : row;
    flex-wrap       : wrap;
    align-content   : stretch;
    justify-content : center ;
    align-items     : center;
    position        : relative;

}

.pgcontroldiv{
    position        : relative;
    width           : 100%;
    border-bottom   : 1px solid #e2e8f0;
    padding         : 1rem;


}

#pg_new_dashboard_id{
    display         : flex                      !important;
    flex-direction  : row;
    flex-wrap       : wrap;
    align-content   : center;
    position        : relative                  !important;

}




.tabsheet {
    display         : flex ;
    flex-direction  : column                !important;
    height          : 100%;
    width           : 100%;
    border-radius   : 8px;
}


.tabsheet-right{
    background              : #f8fafc                   ! important ; /* #f1f5f9 !important; */
    display                 : flex ;
    flex-direction          : column                !important;
    height                  : 100%;
    width                   : 100%                  !important;
    border-radius           : 8px;
    border                  : none                  !important;
    overflow-y              : scroll;

}



.tabsheet-right > div {
  height                    : calc(100% - 40px)              !important;
  width                     : calc(100% - 40px)             !important;
  box-sizing                : border-box        !important;
  display                   : flex;
  align-items               : stretch;
  flex-direction            : row;
  justify-content           : space-evenly;
  gap                       : 20px;
  margin-left               : 10px                  !important;

  }




.tabsheet > div {
  height                    : 100%              !important;
  box-sizing                : border-box        !important;
  display                   : flex;
  align-items               : stretch;
  flex-direction            : row;
  justify-content           : space-evenly;
  width                     : 100%

}


span.tabsheet{

    width           : 100%                  !important;
  /*  box-shadow      : 0 0 15px 1px rgb(99 57 57 / 10%); */

}

.tabsheet .standardform{
    height          : calc(100% - 100px)    !important;
}



#innerpagecontrol{
    height          : 200px                     !important;
    top             : 0;
    display         : flex                      !important;
    flex-direction  : row;
    align-items     : flex-start;
}





.pagecontrolsheetheader{
 /*   position        : relative              !important; */
    width           : 20%;
    z-index         : 0;
}




.tabs-container {
  margin-top        : 3rem;
  margin-left       : 20px;
  margin-right      : 20px;
}



.tabs-list.dashboard-tabs{
    top             : -80px                 !important;
    position        : absolute              !important;
}





.tabs-list {
  display           : flex;
  background-color  : white;
  border-radius     : 0.75rem;
  box-shadow        : 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  overflow          : hidden;
  margin-top        : 10px;
  margin-bottom     : 10px;
/*  margin-top        : 10px !important;
  margin            : 45px auto 2rem; */
  max-width         : max-content;
}





li.tab-button::marker{
    content         : ""                    !important;

    }

li.tab-list::marker {
    content         : ""                    !important;
    }


li.nav-item::marker {
display             : none                  !important;
content             : ""                    !important;
}


.tab-button {
    padding                     : 0.75rem 1.5rem;
    border                      : none;
    background                  : none;
    font-weight                 : 400;
    font-size                   : 0.75rem;
    color                       : #676767;
    cursor                      : pointer;
    transition                  : all 0.2s ease;
    white-space                 : nowrap;
    text-decoration             : none;
    display                     : block;
}

.tab-button:hover {
    color                       : white;
    background-color            : #6796f0;
}

.tab-button.active {
    font-weight                 : 500;
    color                       : white;
    background-color            : #6796f0;
    border-bottom               : 3px solid #0ea5e9;
}

/*
.tab-button {
  padding           : 0.75rem 1.5rem;
  border            : none;
  background        : none;
  font-weight       : 500;
  cursor            : pointer;
  transition        : all 0.2s ease;
  color             : #475569;
  display           : block                 !important;
}

.tab-button:hover {
  color             : #0284c7;
}

.tab-button.active {
  background-color  : #0EA5E9;
  color             : black;
  display           : block                 !important;
}  */

.tab-content-container {
  position          : relative;
}

.tab-content {
  display           : none;
}

.tab-content.active {
  display           : block;
  animation         : fadeIn 0.3s ease-out;

}

.nav-item {
    padding         : 0;
}

.pg_switch{
    position                : relative              !important;
    display                 : flex                  !important;
    flex-direction          : row;
    align-items             : flex-start;
}


.pg_switch_tabsheet {
    border                  : none                  !important;
    display                 : flex                  ;
    flex-direction          : column;
    width                   : 100%                  !important;

}
.debugmemo{
    height              : 100%      !important;
    width               : 100%      !important;
}


/* Global message bar, fixed to bottom of viewport */
.bottom-message-bar {
  position                      : fixed;
  left                          : 0;
  right                         : 0;
  bottom                        : 0;
  height                        : 45px;

  transform                     : translateY(100%);   /* start off-screen */
  transition                    : transform 250ms ease-out;
  will-change                   : transform;

  z-index                       : 99999;              /* sits above everything */
  display                       : flex;
  align-items                   : center;
  justify-content               : center;
  pointer-events                : none;

  background                    : #8AFFE4; /* green*/ /* #FF8AA6; red */
  color                         : #ffffff;
  border-top                    : 1px solid rgba(255,255,255,0.15);
  box-shadow                    : 0 -4px 12px rgba(0,0,0,0.12);
  padding                       : 0 14px;
}

/* Active (visible) state */
.bottom-message-bar.show {
  transform                     : translateY(0);
}

.bottom-message-text {
  font-weight                   : 500;
  white-space                   : nowrap;
  overflow                      : hidden;
  text-overflow                 : ellipsis;
  width                         : 100%;
  text-align                    : center;
}

.divscroller-container {
    overflow     : hidden;
    box-sizing   : border-box;
    position     : relative;
    width        : 100%;
    height       : 100%;
}

.divscroller-content {
    width        : 100%;
    height       : 100%;
    box-sizing   : border-box;
}

.divscroller-track {
    display      : flex;
    height       : 100%;
    box-sizing   : border-box;
    will-change  : transform;
    transition   : transform 300ms ease-in-out;
}

.divscroller-panel {
    flex         : 0 0 auto;
    width        : 100%;
    height       : 100%;
    box-sizing   : border-box;
    overflow     : auto;   /* allows inner scroll if content exceeds */
}




.horizontal-flex {
    position                    : relative              !important;
    display                     : flex                  !important;
    flex-direction              : row                   !important;
    justify-content             : flex-start              !important;
    flex-wrap                   : wrap;
    align-items                 : center                !important;
    align-content               : center;
    gap                         : 5px                   !important;
/*    flex                        : 0 0 auto              !important; */
    width                       : 100%                  !important;
    box-sizing                  : border-box            !important;
    padding                     : 4px                   !important;
    background-color            : white;
    height                      : 45px                  !important;
    cursor                      : pointer;
    border-bottom               : 1px solid  #d5d5d5  ;
    z-index                     : 10;
}



/* Group container — generic */
.rw-form-controls{
    position            : sticky        !important;
    top                 : 0             !important;
    z-index             : 100           !important;
    display             : flex;
    flex-direction      : row;
    width               : 100%;
    flex-wrap           : wrap;
    align-items         : center;
    justify-content     : flex-start    !important;   /* defeat parent centering */
    gap                 : 0.75rem;
    text-align          : left;
    height              : 55px;
    align-self          : flex-start    !important;   /* defeat align-center parents */
    order               : 0             !important;
    background-color    : white         !important;

}

.rw-radio {
    width               : inherit;
}

.rw-radio > span {
    position            : relative      !important;
}

/* One radio item */
.rw-form-controls .rw-radio{
    display           : inline-flex;
    align-items       : center;
}

/* STYLE THE INPUT ITSELF — do not hide it (labels remain visible) */
.rw-form-controls .rw-radio input[type="radio" i]{
    -webkit-appearance: none;
    -moz-appearance   : none;
    appearance        : none;

    width             : 0.7rem;
    height            : 0.7rem;
    border            : 1px solid #64748B;
    border-radius     : 50%;
    background        : #FFF;
    position          : relative;
    margin-right      : 0.5rem;
    box-sizing        : border-box;
    transition        : border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

/* Inner dot */
.rw-form-controls .rw-radio input[type="radio" i]::after{
    content           : "";
    position          : absolute;
    left              : 50%;
    top               : 50%;
    transform         : translate(-50%,-50%);
    width             : 0.4rem;
    height            : 0.4rem;
    border-radius     : 50%;
    background        : #0EA5E9;
    opacity           : 0;
}

.rw-form-controls .rw-radio input[type="radio" i]:checked::after{
    opacity           : 1;
}

/* Hover/focus */
.rw-form-controls .rw-radio input[type="radio" i]:hover:not(:disabled){
    border-color      : #0EA5E9;
    box-shadow        : 0 0 0 2px rgba(14,165,233,.10);
}
.rw-form-controls .rw-radio input[type="radio" i]:focus{
    outline           : none;
    box-shadow        : 0 0 0 2px rgba(14,165,233,.30);
}

/* Disabled */
.rw-form-controls .rw-radio input[type="radio" i]:disabled{
    opacity           : .5;
    cursor            : not-allowed;
}

/* IMPORTANT: never hide the TMS label span/label */
.rw-form-controls .rw-radio input[type="radio" i] + *{
    display           : inline-block;    /* ensure label stays visible */
}


.webhint-hidden {
  opacity        : 0 !important;
  pointer-events : none;
}

.webhint-visible {
  opacity        : 1;
  pointer-events : auto;
  transition     : opacity 0.2s ease;
}



.popup-menu{

    background              : white;
    line-height             : 0.5rem;
    font-size               : 12px;
    border-radius           : 5px;
    box-shadow              : 1px 5px 5px 5px rgba(0, 0, 0, 0.12);
    height                  : auto;
    width                   : auto;

    }

.popup-menu-div{

    position                : relative;
    top                     : 0;
    height                  : auto;
    width                   : auto;

    }


.custom-tooltip{
    position         : fixed;
    z-index          : 9999;
    opacity          : 0;
    transition       : opacity 0.2s ease-in-out;
    padding          : 10px 15px;
    border-radius    : 8px;
    max-width        : 250px;
    background       : #f8fafc;
    box-shadow       : 4px 4px 10px rgba(0, 0, 0, 0.1), -4px -4px 10px rgba(255, 255, 255, 0.7);
    white-space      : normal;
    word-wrap        : break-word;
    pointer-events   : none;
}

.webhint-hidden{
    display          : none            !important;
}

.webhint-visible{
    display          : block           !important;
}


/* ============================================================================
   Popup Forms Styling
   Ensures popup forms maintain their designer dimensions
   ============================================================================ */

.popup-form {
   display              : block         !important;
   position             : relative      !important;
   box-sizing           : border-box    !important;
   overflow             : visible       !important;
   flex-shrink          : 0             !important;
   flex-grow            : 0             !important;
}

/* Ensure child elements don't break the sizing */
.popup-form > * {
   box-sizing           : border-box;
}

/* Optional: Add shadow and border for visual popup effect */
.popup-form.elevated {
   box-shadow           : 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
   border-radius        : 8px;
   border               : 1px solid rgba(0, 0, 0, 0.1);
   background           : white;
}

/* ============================================================================
   Form Container Sliding Styles
   ============================================================================ */

.form-container-sliding{
   position       : fixed;
   top            : 0;            /* pin to top */
   right          : -350px;       /* start off-screen to the right */
   left           : auto;         /* kill left-side anchoring */
   bottom         : auto;
   width          : 350px;        /* match SlideWidth */
   height         : 100%;
   opacity        : 0;
   pointer-events : none;
   z-index        : 3000;
   transition     : right 300ms ease, opacity 180ms ease;
   box-shadow     : -2px 0 8px rgba(0,0,0,.15);
   background     : #fff;
}
.form-container-sliding.slide-visible{
   right          : 0;            /* slide in */
   opacity        : 1;
   pointer-events : auto;
}


.sliding-popup-form {
    /* ONLY set what's needed for visibility and styling */
    /* DO NOT set position, top, left, width, height - let inline styles handle that! */
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    padding: 15px;
    box-sizing: border-box;
    /* NO position, width, height, top, left - the slide methods set these inline! */
}


.left-fulldiv{
    position                : relative;
    height                  : 100%;
    min-width               : 100px;
    width                   : 200px;
    background-color        : white;
    order                   : 0;


}


.top-containerdiv{
    display                     : flex;
    justify-content             : space-between                    !important;
    position                    : relative                          !important;
    flex-direction              : column                            ;
    gap                         : 15px;
    padding-top                 : 4px;
    padding-bottom              : 4px;
    height                      : 400px;
    width                       : 200px;
    order                       : 0;


}




.button-containerdiv {
    display                     : flex;
    justify-content             : flex-start                        !important;
    position                    : relative                          !important;
    flex-direction              : row;
    gap                         : 5px;
    padding-top                 : 3px;
    padding-bottom              : 3px;
    align-content               : space-around;

}




/* Group container — generic */
.simple_container_div {
    isolation       : isolate            !important;
    position        : relative              !important;
    display         : flex                  !important;
    flex-direction  : row                   !important;   /* keep row */
    flex-wrap       : nowrap;                       /* prevent wrapping */
    align-items     : stretch               !important;
    width           : 100%                  !important;
    height          : calc(100% - 20px)     !important;
    gap             : 10px                  !important;
    box-sizing      : border-box;
    overflow        : hidden;                       /* keep scroll inside */

}


/* Optional: if you have a tile footer/status inside this container, keep it out of the grid area */
.simple_container_div .statusbar-div {
    position        : absolute                    !important;   /* CHANGED from static */
    margin-top      : 0;
    bottom          : 0;
    left            : 0;
    right           : 0;
    height          :309px                        !important;
}





/* States grid host — fixed width */
.div-states {
    position        : relative          !important;
    flex            : 0 0  300px        !important;
    max-width       : 300px             !important;
    min-width       : 300px             !important;
    height          : calc(100% - 40px)              !important;
    min-height      : 0                 !important;
    background-color: white;
    order           : 0                 !important;
    z-index         : 2                 !important;
    isolation       : isolate           !important;
    overflow        : hidden            !important;
}

/* Sensors grid host — fluid */
.div-sensors {
    position        : relative          !important;
    flex            : 1 1 auto          !important;   /* take remaining space */
    min-width       : 100px             !important;
    height          : calc(100% - 40px)              !important;
    min-height      : 0                  !important;
    order           : 1                 !important;
    z-index         : 2                 !important;
    isolation       : isolate           !important;
    overflow        : hidden            !important;
}

/* Ensure FNC grid spans fill their divs */
.div-states  > span,
.div-sensors > span {
    position        : relative        !important;
    display         : block           !important;
    width           : 100%            !important;
    height          : 100%            !important;
    min-width       : 0               !important;
    min-height      : 0               !important;
    overflow        : hidden         !important;
    box-sizing      : border-box      !important;
}

/* Keep canvas scaling natural (sharp text, crisp lines) */
.div-states  > span > canvas[id$="_Canvas"],
.div-sensors > span > canvas[id$="_Canvas"] {
    position        : relative        !important;
    width           : auto            !important;
    height          : auto            !important;
}

.sensormsg-div {
    position        : absolute          !important;
    top             : 50%               !important;
    left            : 50%               !important;
    transform       : translate(-50%, -50%) !important;
    z-index         : 2000              !important;

    display         : none;             /* hidden by default */
    padding         : 10px 20px;
    background      : rgba(255,255,255,0.95);
    border          : 1px solid #ccc;
    border-radius   : 6px;
    box-shadow      : 0 2px 6px rgba(0,0,0,0.2);

    font-family     : Inter, system-ui, -apple-system, sans-serif !important;
    font-size       : 12px              !important;
    color           : black;
    text-align      : center;
    white-space     : normal            !important;
}



/* Match ANY TMS FNC StatusBar wrapper span, no hardcoded IDs */
.statusbar-div {
    position        : absolute          !important;
    bottom          : 0;
    left            : 0;
    right           : 0;
    height          : 30px              !important;
    z-index         : 99;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    align-items     : center;
    align-content   : space-between;
    gap             : 1px;
    padding         : 0;
    background      : white             !important;
    border          : none              !important;
    outline         : none              !important;
    box-shadow      : none              !important;

    font-family     : Inter, system-ui, -apple-system, sans-serif !important;
    font-size       : 9px               !important;
    line-height     : 1.2               !important;
    box-sizing      : border-box        !important;
    overflow        : visible            !important;

}

.statusbar-div > div {
    flex            : 1 1 0;
    min-width       : 0               !important;

    display         : block;
    height          : 100%;
    padding         : 5px;
    box-sizing      : border-box;
    overflow        : hidden          !important;

    /* bevel (same as toolbar blocks) */
    box-shadow      : inset 4px 3px 5px 2px rgb(51 158 163 / 5%),inset 1px 1px 1px #2563eb3d;
}

.statusbar-div > div > * {
    white-space         : normal          !important;
    word-wrap           : break-word      !important;
    word-break          : break-word      !important;
    overflow-wrap       : break-word      !important;
    hyphens             : auto            !important;
}

.wraplabel {
    color               : black;
    background-color    : transparent;
    white-space         : normal            !important;
    text-align          : left              !important;
}
.wraplabel.red {
    color               : white             !important;
    background-color    : transparent;
}


.toolsbar-div{
    position        : absolute        !important;
    bottom          : 30px;
    left            : 0;
    right           : 0;
    height          : 35px            !important;
    z-index         : 99;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : wrap;
    align-items     : center;
    gap             : 8px;
    padding         : 3px;
    background      : #ffffff         !important;
    border          : none            !important;
    outline         : none            !important;
    box-shadow      : none            !important;
    font-family     : Inter, system-ui, -apple-system, sans-serif !important;
    font-size       : 9px             !important;
    line-height     : 1.2             !important;
    box-sizing      : border-box      !important;
    overflow        : visible         !important;
}


.toolsbar-div > div {
    flex                : 1;
    width               : 150px;
    padding             : 5px;
    font-family         : Inter, system-ui, -apple-system, sans-serif !important;
    font-size           : 9px               !important;
    white-space         : normal;
    overflow-wrap       : anywhere          !important;
    word-break          : break-all         !important;
    hyphens             : auto              !important;
    /* Simple block layout - no flex */
    height              : 100%;
    line-height         : 1.2;
    min-width           : 0                 !important;
    flex-shrink         : 1                 !important;
    overflow            : hidden            !important;
    /* Subtle inner bevel effect */

}

.toolsbar-div > div > * {
    flex            : 0 0 auto;
    min-width       : 0               !important;

    display         : inline-flex;
    align-items     : center;
    gap             : 6px;
    height          : 100%;
    padding         : 5px;
    box-sizing      : border-box;

    /* bevel (you asked for it explicitly) */
    box-shadow      : inset 4px 3px 5px 2px rgb(51 158 163 / 5%),inset 1px 1px 1px #2563eb3d;
}

.toolsbar-div label {
    display         : inline-flex;
    align-items     : center;
    white-space     : nowrap;
    margin-right    : 8px;
}
.toolsbar-div input[type="radio"],
.toolsbar-div input[type="checkbox"] {
    margin          : 0 6px 0 0         !important;
    flex            : 0 0 auto;
    vertical-align  : middle            !important;  /* ADDED to stop overlap */
}


.toolsbar-div > div:nth-child(1){
    flex                : 1;
}

 /* StatusPanel2 - 2 x as wide */
.toolsbar-div > div:nth-child(2) {
    flex                : 4;
}



/* Set different flex ratios for each panel */
/* statusPanel1 - 3 x as wide */
.statusbar-div > div:nth-child(1){
    flex                : 3;
    }

 /* StatusPanel2 - 2 x as wide */
.statusbar-div > div:nth-child(2) {
    flex                : 2;
}

.statusbar-div > div:nth-child(3) {
    flex                : 1;
}

.statusbar-div > div:nth-child(4) {
    flex: 1;
}

.statusbar-div > div:nth-child(1).red{
    background-color            : #ab0000;
    color                       : white         !important;
    }

 /* StatusPanel2 - 2 x as wide */
.statusbar-div > div:nth-child(2).red {
    background-color            : #ab0000;
    color                       : white         !important;

}

.statusbar-div > div:nth-child(3).red {
    background-color            : #ab0000;
    color                       : white         !important;

}

.statusbar-div > div:nth-child(4).red {
    background-color            : #ab0000;
    color                       : white         !important;

}

.statusbar-div > div:nth-child(1).red label,
.statusbar-div > div:nth-child(1).red span,
.statusbar-div > div:nth-child(1).red {
    color: white !important;
}

.statusbar-div > div:nth-child(2).red label,
.statusbar-div > div:nth-child(2).red span,
.statusbar-div > div:nth-child(2).red {
    color: white !important;
}

.statusbar-div > div:nth-child(3).red label,
.statusbar-div > div:nth-child(3).red span,
.statusbar-div > div:nth-child(3).red {
    color: white !important;
}

.statusbar-div > div:nth-child(4).red label,
.statusbar-div > div:nth-child(4).red span,
.statusbar-div > div:nth-child(4).red {
    color: white !important;
}