.blu-color-background {
    background-color: #2798d0;
    color: #ffffff;
}

    .blu-color-background:hover {
        background-color: #2798d0;
        color: #ffffff;
        border-color: #2798d0;
    }

.blu-color-text {
    background-color: #ffffff;
    color: #2798d0;
}

    .blu-color-text:hover {
        background-color: #ff7f01;
        color: #ffffff;
        border-color: #ff7f01;
    }

.blu-color-text-selected {
    background-color: #ff7f01;
    color: #ffffff;
    border-color: #ff7f01;
    cursor: auto;
}

    .blu-color-text-selected:hover {
        background-color: #ff7f01;
        color: #ffffff;
        border-color: #ff7f01;
        cursor: auto;
    }

.blu-color-text-unselected {
    background-color: #ffffff;
    color: #2798d0;
    cursor: auto;
}

    .blu-color-text-unselected:hover {
        background-color: #ffffff;
        color: #2798d0;
        border-width: 0;
        cursor: auto;
    }

.blu-color {
    color: #0037B8;
}

    .blu-color:hover, .blu-color:visited, .blu-color:active {
        color: #0037B8;
        text-decoration: none;
    }

.red-color {
    color: #d02d28;
}

    .red-color:hover, .red-color:visited, .red-color:active {
        color: #d02d28;
        text-decoration: none;
    }

a:visited, a:active {
    color: #0037B8;
    text-decoration: none;
}

a:hover {
    color: #0037B8;
    font-weight: bold;
    text-decoration: none;
}

.orange-color-background {
    background-color: #ff7f01;
    color: #ffffff;
}

    .orange-color-background:hover {
        background-color: #ff7f01;
        color: #ffffff;
        border-color: #ff7f01;
    }

.roboto {
    font-family: 'roboto-regular';
}

.roboto-bold {
    font-family: 'roboto-bold';
}

@font-face {
    font-family: roboto-regular;
    src: url(../../Fonts/Roboto-Regular.ttf) format('truetype');
}

@font-face {
    font-family: roboto-bold;
    src: url(../../Fonts/Roboto-Bold.ttf) format('truetype');
}

.u-shadow-blu {
    box-shadow: 0 0 20px rgba(39,152,208, 0.3);
}

.u-shadow-v1-3-blu {
    box-shadow: 0 0 5px rgba(39,152,208, 0.3);
}

.u-shadow-preview {
    box-shadow: 0 0 20px rgba(255,127,1, 0.3);
}

.u-shadow-v1-3--preview {
    box-shadow: 0 0 5px rgba(255,127,1, 0.3);
}

/**
         * Nestable Extras
         */

.nestable-lists {
    display: block;
    clear: both;
    padding: 30px 0;
    width: 100%;
    border: 0;
    border-top: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
}

#nestable-menu {
    padding: 0;
    margin: 20px 0;
}

#nestable-output,
#nestable2-output {
    width: 100%;
    height: 7em;
    font-size: 0.75em;
    line-height: 1.333333em;
    font-family: Consolas, monospace;
    padding: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#nestable2 .dd-handle {
    color: #fff;
    border: 1px solid #999;
    background: #bbb;
    background: -webkit-linear-gradient(top, #bbb 0%, #999 100%);
    background: -moz-linear-gradient(top, #bbb 0%, #999 100%);
    background: linear-gradient(top, #bbb 0%, #999 100%);
}

    #nestable2 .dd-handle:hover {
        background: #bbb;
    }

#nestable2 .dd-item > button:before {
    color: #fff;
}

@media only screen and (min-width: 700px) {

    .dd {
        float: left;
        width: 48%;
    }

        .dd + .dd {
            margin-left: 2%;
        }
}

.dd-hover > .dd-handle {
    background: #2ea8e5 !important;
}

/**
         * Nestable Draggable Handles
         */

.dd3-content {
    display: block;
    height: 30px;
    margin: 5px 0;
    padding: 5px 10px 5px 40px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #ccc;
    background: #fafafa;
    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
    background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
    background: linear-gradient(top, #fafafa 0%, #eee 100%);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

    .dd3-content:hover {
        color: #2ea8e5;
        background: #fff;
    }

.dd-dragel > .dd3-item > .dd3-content {
    margin: 0;
}

.dd3-item > button {
    margin-left: 30px;
}

.dd3-handle {
    position: absolute;
    margin: 0;
    left: 0;
    top: 0;
    cursor: pointer;
    width: 30px;
    text-indent: 30px;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #aaa;
    background: #ddd;
    background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%);
    background: -moz-linear-gradient(top, #ddd 0%, #bbb 100%);
    background: linear-gradient(top, #ddd 0%, #bbb 100%);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

    .dd3-handle:before {
        content: '≡';
        display: block;
        position: absolute;
        left: 0;
        top: 3px;
        width: 100%;
        text-align: center;
        text-indent: 0;
        color: #fff;
        font-size: 20px;
        font-weight: normal;
    }

    .dd3-handle:hover {
        background: #ddd;
    }


a.blockdoc:link {
    color: #000000;
    text-decoration: none;
}

a.blockdoc:visited {
    color: #000000;
    text-decoration: none;
}

a.blockdoc:hover {
    color: #000000;
    text-decoration: none;
}


/*input[type="checkbox"]:checked + * .g-bg-item--checked {
    background-color: #2798d0 !important;
}


.g-bg-item--checked.g-checked,
.g-checked .g-bg-item--checked {
    background-color: #2798d0 !important;
}*/

.itemCheckbox input:checked + .g-bg-item--checked {
    background-color: #2798d0 !important;
}




.e-toast-custom {
    background-color: purple;
    color: white;
}


/*=================================================*/
.input-container {
    position: relative; /* Needed for absolute positioning of the icon */
    display: inline-block; /* Or block if you want it to take full width */
    width: 100%; /* Example width */
}

    .input-container input[type="text"] {
        padding-left: 30px; /* Adjust based on icon size and spacing */
        border-radius: 20px; /* Adjust for desired roundness */

        padding: 10px; /* Adjust padding as needed */
        width: 100%; /* Example width */
        box-sizing: border-box; /* Include padding and border in element's total width and height */
    }

    .input-container i { /* Style the icon */
        position: absolute;
        left: 10px; /* Adjust positioning */
        top: 50%;
        transform: translateY(-50%); /* Vertically center the icon */
        /* Add any other icon styles like color, size, etc. */
        color: #777; /* Example color */
    }


    /* Optional: Style the placeholder */
    .input-container input[type="text"]::placeholder {
        color: #aaa;
    }


.container2Cols {
    display: flex; /* Use flexbox for layout */
    height: 100%; /* Ensure container takes full viewport height */
    width: 100%; /* Make the container fill the viewport width */
    gap: 10px; /* Adjust the gap as needed */
    margin-top: 10px;
} 

/*     .left-column {
    flex: 0 0 70%;
    }

    .right-column {
    flex: 0 0 30%;
    background-color: lightcoral;
    overflow-y: auto;
    } */

.left-column {
    width: 70%;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.left-column-content { /* Added for content centering */
    width: 100%; /* Example width */
    text-align: center; /* Center text within the content area if needed */
    padding: 5px;
}

.right-column {
    width: 30%;
    /*   background-color: #f0f0f0;  */
    justify-content: center; /* Center horizontally */
}

.right-column-content { /* Added for content centering */
    width: 100%; /* Example width */
    text-align: center; /* Center text within the content area if needed */
    padding: 5px;
}


.rounded-box {
    border-radius: 10px; /* Adjust for desired roundness */
    padding: 20px; /* Adjust padding as needed */
    width: 100%; /* Make the container fill the viewport width */
    box-sizing: border-box; /* Include padding and border in width */
    overflow: hidden; /* Prevents title from overflowing rounded corners */
    margin-bottom: 10px;
}

.rounded-box-title {
    background-color: #7cbad9; /* Example title background color */
    padding: 5px;
    margin: -20px -20px 10px -20px; /* Negative margins to align with box edges */
    border-top-left-radius: 10px; /* Match box's top-left radius */
    border-top-right-radius: 10px; /* Match box's top-right radius */
    border-bottom-right-radius: 10px; /* Match box's top-right radius */
    border-bottom-left-radius: 10px; /* Match box's top-right radius */
    text-align: center; /* Center title text */
    border: 2px solid #78b0cc; /* Example border */
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(39, 152, 208, 0.24);
}

.rounded-box-content {
    /* Add any specific styling for the content area */
    text-align: left;
    border-left: 1px solid #7cbad9; /* Example border */

    padding: 10px;
}
/*=================================================*/