.pricing-page-container {
    max-width: 900px;
    margin: auto;
    text-align: center;
    margin-top: 2em;
    padding-left: 1em;
    padding-right: 1em;
}

.dashboard-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.dashboard-block--item {
    flex: 1 0 25%; /* This means that the item will grow and shrink at the same rate as its siblings and will take up 20% of the container's width */
    box-sizing: border-box; /* This includes padding and border in the element's total width and height */
    padding: 1rem; /* Space around the content */
    margin: 1rem; /* Space around the element */
    background-color: #121212; /* Background color of the card */
    border: 1px solid #121212; /* Border around the card */
    border-radius: .25rem; /* Rounded corners */
    min-height: 125px;
}

@keyframes custom-rolling {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

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

.build-info {
    color: #ffffff; /* sets text color to gray */
    font-size: 12px; /* adjusts font size */
    text-align: center; /* centers the text horizontally */
    margin-top: 20px; /* adds space above the build info */
    padding: 10px; /* adds some padding */
    position: absolute; /* positions the element relative to the nearest positioned ancestor */
    bottom: 40px; /* positions the element 40px from the bottom */
    width: 100%; /* ensures the element spans the full width of its container */
}

.build-info-small {
    color: #ffffff; /* sets text color to gray */
    font-size: 9px; /* adjusts font size */
    text-align: center; /* centers the text horizontally */
    margin-top: 20px; /* adds space above the build info */
    padding: 5px; /* adds some padding */
    position: absolute; /* positions the element relative to the nearest positioned ancestor */
    bottom: 40px; /* positions the element 40px from the bottom */
    width: 100%; /* ensures the element spans the full width of its container */
}

.template {
    border: 2px solid green;
    border-style: dotted;
    border-radius: 50%;
    border-top-color: transparent;
    border-bottom-color: transparent;
    height: 16px;
    width: 16px;
}

.template {
    -webkit-animation: custom-rolling 1.3s linear infinite;
    animation: custom-rolling 1.3s linear infinite;
}
.dashboard-block--chart {
    flex: 1 0 100%; /* This means that the chart will take up 100% of the container's width */
}
.pricing-grid {
    display: block;
    margin-bottom: 1em;
}

    .pricing-grid .starter-plan {
        background-color: AliceBlue
    }

    .pricing-grid .pro-plan {
        background-color: HoneyDew
    }

    .pricing-grid .enterprise-plan {
        background-color: LavenderBlush
    }

    .pricing-grid > * {
        padding: 1rem;
    }

@media (min-width: 768px) {
    .pricing-grid {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }


    /* Sample specific styles*/
    .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }

    .e-toolbar {
        background: #121212;
    }

    /*.e-btn-techpulse-light {
        background-color: #1D516D;
    }*/

    /* Specifies the styles for Menu component */
    .sidebar-menu .e-menu-container ul .e-menu-item.e-menu-caret-icon {
        width: 200px;
    }

    .sidebar-menu, .e-menu-wrapper, .e-menu-container ul {
        overflow: hidden;
    }

    #wrapper .sidebar-menu {
        z-index: 20 !important;
    }

    #maintext.main-content {
        height: 100vh;
    }

    #wrapper .sidebar-menu .e-menu-container {
        border: 0px;
        height: 100vh;
    }

    #Grid.sf-grid.e-grid.e-control.e-responsive.e-default.e-gridhover.e-grid-min-height.e-lib.e-keyboard {
        padding: 0;
    }

    .dim-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        z-index: 100;
        display: none;
    }

    .highlighted-control {
        position: relative;
        z-index: 101;
        border: 2px solid #FFF; /* Optional: adds a white border around the highlighted area */
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75); /* Creates the dim effect */
    }

    .my-darkmode {
        background-color: #212121;
    }

    .e-sidebar {
        background: var(--background-color);
        color: var(--text-color);
    }

    /* Content area styles */
    .title {
        font-size: 20px;
    }

    /* Sidebar styles */
    .e-sidebar .e-icons::before {
        font-size: 25px;
    }

    /* dockbar icon Style */
    .e-sidebar .home::before {
        content: '\e102';
    }

    .e-sidebar .profile::before {
        content: '\e10c';
    }

    .e-sidebar .info::before {
        content: '\e11b';
    }

    .e-sidebar .settings::before {
        content: '\e10b';
    }

    .e-sidebar .expand::before,
    .e-sidebar.e-right.e-open .expand::before {
        content: '\e10f';
    }

    .e-sidebar.e-open .expand::before,
    .e-sidebar.e-right .expand::before {
        content: '\e10e';
    }

    /* end of dockbar icon Style */

    .e-sidebar.e-dock.e-close span.e-text {
        display: none;
    }

    .e-sidebar.e-dock.e-open span.e-text {
        display: inline-block;
    }

    .e-sidebar li {
        display: flex;
    }

    .e-sidebar ul {
        padding: 0px;
    }

    .e-sidebar.e-close li {
        justify-content: center;
        
    }

    .e-sidebar span.e-icons {
        color: #50a5d6;
    }

    .e-open .e-icons {
        margin-right: 16px;
    }

    .e-open .e-text {
        overflow: hidden;
        font-size: 15px;
    }

    .sidebar-item {
        text-align: center;
        border-bottom: 1px #50a5d6 solid;
    }

    .e-sidebar.e-open .sidebar-item {
        text-align: left;
        padding-left: 15px;
        color: #50a5d6;
    }

    .e-sidebar {
        background: #121212;
        overflow: hidden;
    }

    @font-face {
        font-family: 'e-icons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .main > div {
        padding: 0px !important;
    }
    /* end of sidebar styles */

    h3 {
        color: white;
    }

    .form-subtitile {
        color: #bb86fc;
    }

    .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text {
        color: white;
    }

    /* Atributos de dialog generales */
    .e-dialog .e-dlg-header-content {
        padding: 4px 20px;
        background-color: #323031;
    }

        .e-dialog .e-dlg-header-content + .e-dlg-content {
            padding: 0 15px 15px 15px;
            background-color: #323031;
        }

    .e-card .e-card-content {
        background-color: #323031;
    }

    .e-label {
        color: white !important;
    }
    /* Atributos de card generales */
    .e-card {
        border: 1px solid #000;
        box-shadow: 0 4px 5px 0 rgb(0 0 0 / 40%);
    }

    .tooltip-description {
        color: blue;
    }
}