body, html {
      height: 95%; /* Make sure the body takes the full screen height */
      box-sizing: border-box; /* Include padding in the total width/height */
    }
        .draggable {
            position: absolute;
            cursor: move;
        }
.menu-btn {
    position: fixed;
    bottom: 20px; /* Bottommost */
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
    font-size: 20px;
    z-index: 999;
}
.menu-btn.active {
    background-color: grey;
}

.dashboard__box {
    border-radius: 2px;
    box-shadow: 0px 10px 10px -4px rgba(0,0,0,0.12);
    border: 0;
    background-color: #fff
}

.dashboard__box.red {
    background-color: #d7263d;
    color: #fff
}

.dashboard__box.green {
    background-color: #00b295;
    color: #fff
}

.dashboard__box.yellow {
    background-color: #f2c25f;
    color: #000
}

.dashboard__box.cardHover {
    cursor: pointer;
    transition: background-color .5s
}

.dashboard__box.cardHover:hover {
    background-color: #e6e6e6
}

.dashboard__box.cardHover i {
    float: left
}

.dashboard__box.cCard i {
    float: left
}

.dashboard__box.cCard a span.hoverLink {
    transition: background-color .5s
}

.dashboard__box.cCard a span.hoverLink:hover {
    padding: 3px 10px;
    background-color: #e6e6e6
}

.dashboard__box.p1 {
    padding-top: 19px;
    padding-bottom: 7px
}

.dashboard__box.p1.logo {
    padding: 22px;
    text-align: center
}

.dashboard__box.p1.logo img {
    max-width: 100%
}

@media (max-width: 968px) {
    .dashboard__box.p1.logo img {
        padding:10px 30px
    }
}

.dashboard__box.p4 {
    margin-top: 14px
}

.dashboard__box.p4 table {
    margin-bottom: 0px
}

.dashboard__box.p4 table tr {
    cursor: pointer;
    transition: .5s
}

.dashboard__box.p4 table tr:nth-of-type(even) {
    background-color: #f8f8f8
}

.dashboard__box.p4 table tr:nth-of-type(odd) {
    background-color: #fff
}

.dashboard__box.p4 table tr:hover {
    background-color: #e6e6e6
}

.dashboard__box.p4 table th {
    background-color: #f8f8f8;
    font-size: 11px;
    color: #212845;
    padding-top: 9px;
    padding-bottom: 4px;
    padding-right: 15px;
    border: 0
}

.dashboard__box.p4 table th:first-child {
    padding-left: 25px
}

.dashboard__box.p4 table td {
    font-size: 14px;
    color: #212845;
    border: 0;
    position: relative;
    cursor: pointer
}

.dashboard__box.p4 table td:first-child {
    padding-left: 25px
}

.dashboard__box.p4 table td .tAlert {
    width: 12px;
    height: 12px;
    border-radius: 100px;
    background-color: #f2c25f;
    position: absolute;
    left: 18px;
    top: 12px
}

.dashboard__box.p4 table td .tAlert.red {
    background-color: #d7263d
}

.dashboard__box.p4 table td .tAlert2 {
    padding: 0px;
    background-color: #f2c25f !important
}

.dashboard__box.p4 table td .tAlert2.red {
    background-color: #d7263d !important
}

.dashboard__box.p4 .header {
    background-color: #f8f8f8
}

.dashboard__box.p4 .header .header__element {
    font-size: 11px;
    color: #212845;
    display: inline-block;
    padding-top: 9px;
    padding-bottom: 4px;
    padding-right: 15px
}

.dashboard__box.p4 .header .header__element:first-child {
    padding-left: 15px
}

.dashboard__box.p4 .header .header__title {
    font-size: 20px;
    color: #212845
}

.dashboard__box.p4 .header .header__text {
    font-size: 13px;
    color: #212845
}

.dashboard__box.p2 .header {
    background-color: #f8f8f8
}

.dashboard__box.p2 .header__search {
    padding-top: 17px;
    padding-bottom: 12px;
    padding-left: 30px;
    padding-right: 30px
}

.dashboard__box.p2 .header__search input {
    border: 0;
    border-bottom: 1px solid rgba(151,151,151,0.4);
    font-size: 14px;
    font-weight: 300;
    color: #212845;
    background: transparent;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.dashboard__box.p2 .header__search button {
    position: absolute;
    right: 33px;
    top: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: 0
}

.dashboard__box.p2 .header__search button i {
    color: #979797
}

.dashboard__box.p2 .header .header__element {
    font-size: 14px;
    color: #212845;
    display: inline-block;
    padding-top: 18px;
    padding-bottom: 18px;
    transition: .5s;
    cursor: pointer;
    text-align: center;
    width: 49.45%
}

@media (max-width: 968px) {
    .dashboard__box.p2 .header .header__element {
        width:48.45%
    }
}

.dashboard__box.p2 .header .header__element.button:hover {
    background-color: #dfdfdf
}

.dashboard__box.p2 .header .header__title {
    font-size: 20px;
    color: #212845
}

.dashboard__box.p2 .header .header__text {
    font-size: 13px;
    color: #212845
}

.dashboard__box__text {
    color: #212845
}

.dashboard__box__text.f12 {
    font-size: 12px
}

.dashboard__box__text.f14 {
    font-size: 14px
}

.dashboard__box__text.f16 {
    font-size: 16px
}

@media (max-width: 1800px) {
    .dashboard__box__text.f16 {
        font-size:11px
    }
}

@media (max-width: 968px) {
    .dashboard__box__text.f16 {
        font-size:16px
    }
}

.dashboard__box__text.f36 {
    font-size: 36px
}

@media (max-width: 1800px) {
    .dashboard__box__text.f36 {
        font-size:24px
    }
}

.dashboard__box__text.bold {
    font-weight: 700
}

.dashboard__box__text.center {
    text-align: center
}

.dashboard__box__text.right {
    text-align: right
}

.dashboard__box__text.ls09 {
    letter-spacing: 0.9px
}

.dashboard__box__text.lh1p4 {
    line-height: 1.4
}

.dashboard__box__text span.block {
    display: block;
    line-height: 1.4;
    padding-top: 8px
}

@media (max-width: 1800px) {
    .dashboard__box__text span.block {
        padding-top:0px
    }
}

.dashboard__box__verticalLine {
    height: 25px;
    border-left: solid 1px #979797;
    width: 1px;
    position: absolute;
    left: 47%
}

@media (max-width: 1800px) {
    .dashboard__box__verticalLine {
        height:15px
    }
}

.chart-container {
  width: 100%;  /* fill card-body */
  overflow: hidden; /* no scroll */
}

.home-btn {
    position: fixed;
    bottom: 75px; /* 55px above the menu button */
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #6c757d; /* Gray color */
    color: white;
    border-radius: 50%;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
    font-size: 20px;
    z-index: 1000;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.home-btn:hover {
    background-color: #5a6268;
    transform: scale(1.05);
}

.clean-btn {
    position: fixed;
    bottom: 130px; /* 55px gap from home-btn */
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
    font-size: 20px;
    z-index: 1000;
}

.auto-arrange-btn {
    position: fixed;
    bottom: 185px; /* 55px gap from clean-btn */
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
    font-size: 20px;
    z-index: 1000;
}

.add-card-btn {
    position: fixed;
    bottom: 240px; /* 55px gap from auto-arrange-btn */
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #28a745;
    color: white;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
    font-size: 20px;
    z-index: 1000;
}




        .options-menu {
            position: absolute;
            top: 10px;
            right: 10px;
        }
        .ui-resizable-se {
            bottom: 0;
            right: 0;
            width: 10px;
            height: 10px;
            background: transparent;
        }
        .fixed-card {
            position: fixed;
            bottom: 20px;
            left: 20px;
            width: 18rem;
            z-index: 1000;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
        }
		
		#card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Create columns that auto-fill */
    gap: 5px; /* 5px gap between cards */
	padding: 10px;
    width: 100%; /* Take up the full width of the container */
    height: 100%; /* Take up the full height of the viewport */
    box-sizing: border-box; /* Include padding and border in width/height calculations */
}

.card {
    background-color: #f8f9fa; /* Light background color for visibility */
    border: 1px solid #ddd; /* Optional border for clarity */
    border-radius: 8px; /* Optional rounded corners */
    padding: 10px; /* Padding inside the card */
    height: auto; /* Card height auto-adjusts based on content */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    transition: transform 0.3s ease; /* Optional transition for interaction */
}