.btn-check:checked + .time_type {
        background-color: black;
        color: white; /* Adding white text color for better contrast */
    }

    /* Optional: Add a transition for smooth effect */
    .time_type {
        transition: all 0.3s ease;
    }
        .sticky-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: rgba(241, 241, 241, 0.5); /* Background color for the footer with transparency */
        padding: 10px;
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Optional: Adds a small shadow for better visibility */
        display: flex;
        justify-content: space-between;
        align-items: center;
        
    }

    .label {
        margin-left: 10px;
        font-size: 14px;
        font-weight: bold;
    }
    input[name="time_type"] {
        display: none; /* Hide the radio buttons */
    }

    /* Style the label to visually represent the radio button */
    .time_type_label {
        /* display: inline-block; */
        padding-top:15px;
        padding-bottom: 10px;
        padding-left: 5px;
        padding-right: 5px;
        cursor: pointer;
        border: 1px solid #ccc;
        width: 80%
    }

    /* Change color of active radio label when checked */
    /* input[type="radio"]:checked + label {
        background-color: #333;
        color: #f0f0f0;
        border-color: #999;
    } */
    .text-grey{
        color: grey;
    }
    
    .rotate{
        animation: rotation 1s infinite linear;
    }
    .rotate-90{
    transform: rotate(90deg)
    }
    .rotate-n90{
    transform: rotate(0deg)
    }
    /* .ck .ck-link_selected {
        background: var(--ck-color-link-selected-background);
    } */
    a.link-button{
        width: fit-content;
        text-align: center;
        margin: 0 auto;
        display: inline-block;
        text-align: center;
        border: 1px solid transparent;
        padding: 0.5rem 1rem;
        border-radius: 0.25rem;
        font-weight: 600;
        color: #ffffff;
        background-color: rgba(31,176,255,.1);;
        vertical-align: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        font-size: 0.8125rem;
        line-height: 1.5;
        /* transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; */
    }
    .link-button a[href]:hover {color: #ffffff;}

    /* .link-button{display: block;color: #ffffff;background: var(--ck-color-link-selected-background);padding: 5px;text-decoration: none} */
    @keyframes rotation {
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(359deg);
        }
    }
    .ck-editor__editable_inline {
        min-height: 480px !important;
        max-width:100%;
        min-width: 300px !important;
    }
    .ck-content a[href] {color: #15c;}
    .ck.ck-icon, .ck.ck-icon:hover{
        color:#7fb8d1;
    }
    .modal.fade.in .lab-modal-body {
        bottom: 0;
        opacity: 1;
    }
    
    img.grid_img{
        width: 50%
    }
    .ck-content code {
        background-color: #292D3E;
        padding: .15em;
        border-radius: 2px;
    }
    .ck-content pre {
        padding: 1em;
        color: #ffffff;
        background: #292D3E;
        border: 1px solid hsl(0, 0%, 77%);
        border-radius: 2px;
        text-align: left;
        direction: ltr;
        tab-size: 4;
        white-space: pre-wrap;
        font-style: normal;
        min-width: 200px;
    }
    #snippet-balloon-block-editor {
        margin-left: 5%;
        margin-right: 5%;
    }
    :root {
    --ck-z-default: 100;
    --ck-z-modal: calc( var(--ck-z-default) + 999 );
    }
/* Brief editor placeholder: keep the space CKEditor will take (toolbar + editing area) while it
   loads, with a soft pulse, so the form below doesn't jump down ~480px when the editor appears.
   CKEditor hides (classic) or fills (inline/balloon) this element, so the rule stops applying. */
#content.content:empty {
    min-height: 519px;
    border-color: #eef0f3;
    background: linear-gradient(90deg, #f5f6f8 25%, #eceef1 37%, #f5f6f8 63%);
    background-size: 400% 100%;
    animation: brief-editor-loading 1.4s ease infinite;
}
@keyframes brief-editor-loading {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
    #content.content:empty { animation: none; }
}