body {
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100vw !important;
    user-select: none;
    position: fixed;
    background-color: #000b13;
}

::selection {
    background: rgb(0, 183, 255);
    color: #f72585;
    text-shadow: 0 1px 1px #000;
}

::-moz-selection {
    background: rgba(255, 255, 255, 0.1);
    color: #f72585;
    text-shadow: 0 1px 1px #000;
}

.MessageItem {
    user-select: text;
}

.NoteMassage {
    user-select: text;
}

@media screen and (orientation: landscape) and (max-width: 900px) {
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        overflow: hidden;
    }

    .MainBase {
        display: none;
    }

    #rotate-warning {
        display: block;

    }
}

#rotate-warning {
    font-size: 24px;
    text-align: center;
    padding: 20px;
    color: #ff9797;
    display: none;
    height: 100vh;
    align-content: center;
}


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

* {
    -webkit-tap-highlight-color: rgba(247, 0, 0, 0);
    outline: none;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.FulScreenner {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 10;
    width: 25px;
    padding: 5px;
}

.FullScreenNotifiContainner {
    border-radius: 10px;
    background: linear-gradient(135deg, #121317, #17192d);
    padding: 20px;
    border: 1px solid #7ffdff2e;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

img {
    -webkit-user-drag: none;
    user-select: none;
}

p:empty {
    margin: 0 !important;
}

a {
    -webkit-user-drag: none;
}

li {
    margin-block: 5px !important;
    background: #22004a0f;
    padding: 4px;
    border-radius: 10px;
}

.LinkText {
    color: #00fffa;
    background: #00407730;
    padding: 2px;
    border-radius: 10px;
    padding-inline: 10px;
    cursor: pointer;
    word-break: break-word;
    overflow-wrap: anywhere;
    transition: opacity ease 0.2s;
}

.HighLightr {
    color: #00172b;
    background: #ffee00;
    border-radius: 3px;
    visibility: visible;
    word-break: break-word;
    overflow-wrap: anywhere;
    padding-inline: 5px;
}

.NoteRefText {
    color: #c200d4 !important;
    background: #00f5ff63 !important;
}

.NotePre {
    font-size: 0.8rem;
    background: #00000082;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid black;
    margin: 0;
    overflow: scroll;
    color: white;
}

hr {
    margin: 25px;
    margin-block: 50px;
    height: 4px;
    background: #00ff95db;
    border: none;
    border-radius: 10px;
}

#background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 110vw;
    height: 110vh;
    z-index: -1;
    transform: translate(-5vw, -5vh);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    filter: blur(5px) brightness(0.6);
    transition: all ease 0.5s;


}

#background-video::-webkit-media-controls {
    display: none;
}

#background-video::-webkit-media-controls-enclosure {
    display: none !important;
}

.UndisturbBack {
    filter: blur(50px) brightness(0.5) saturate(0) !important;
    opacity: 0.15 !important;
    
}


/* In put */
.Input {
    padding: 0.6vw;
    padding-block: 0.8rem;
    background: rgba(83, 83, 83, 0.103);
    border-radius: 0.6rem;
    outline: none;
    font-size: 1.2rem;
    color: #cffdff91;
    font-weight: lighter;
    margin-bottom: 1vw;
    border: 1px solid rgba(255, 255, 255, 0.116);
    width: calc(100% - 2vw);
    transition: all ease 0.3s;
}

.Input::placeholder {
    color: #cffdff42;
}

/* Styles for the checkbox */
.checkbox-container {
    display: flex;
    align-items: center;
    margin: 1vh;
    ;
    background-color: #00ccff42;
    padding: 1.5vh;
    border: 1px solid #008cff;
    /* Green border */
    border-radius: 50px;
}

.checkbox-container input[type="checkbox"] {
    display: none;
}

.custom-checkbox {
    width: 4vh;
    height: 4vh;
    min-width: 4vh;
    border: 3px solid #c00096;
    /* Green border */
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    margin-right: 10px;
}

/* Style the checkmark/indicator */
.custom-checkbox::after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox-container input[type="checkbox"]:checked+.custom-checkbox::after {
    display: block;
}

/* Style the checkmark/indicator */

.custom-checkbox::after {
    left: 1.1vh;
    top: 0.5vh;
    width: 1.1vh;
    height: 2.2vh;
    border: solid #c00096;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    font-weight: bolder;

}


/*for public privert switch*/
.toggle-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    background: #5353531a;
    border: 1px solid #ffffff1e;
    justify-content: space-between;
    margin: 5px;
}

.toggle-switch {
    position: relative;
    width: 60px;
    height: 30px;
    background: #ff84846b;
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.4s;
}

.toggle-switch::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 26px;
    height: 26px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]:checked+.toggle-switch {
    background: #198754;
}

input[type="checkbox"]:checked+.toggle-switch::before {
    transform: translateX(30px);
}

.MinLable {
    color: rgb(188, 200, 233);
    font-size: 1rem;
    margin-left: 0.5vw;
    margin-top: 20px;
}









.LOADERContainner {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: #000000a4;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
}

.LoadingImg {
    height: 100px;
    width: 100px;
    border-radius: 20px;
    opacity: 0.8;
    animation: alternate infinite SwapUp 0.5s;
}





.MainBase {
    height: 100vh;
    width: 95vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: auto;
}

.HolderPannel {
    height: 90vh;
    width: 90vw;
    max-width: 500px;
    background: #ffffff4a;
    backdrop-filter: blur(20px);
    border-radius: 10px;
    padding: 15px;
    transition: all ease 0.5s;
    animation: ease SwapRight 0.5s;
    min-width: 0;
    margin: 0;
    min-height: 0;
}

.lessonFilterBase {
    width: calc(100% - 50px);
    margin-top: -42px;
    position: absolute;
    z-index: 2;
    background: #000000d6;
    padding: 10px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    scale: 1.05;
    -webkit-animation: slide-in-elliptic-bottom-bck 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-elliptic-bottom-bck 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.ExpanedHolderPannerl {
    min-width: 0;
    margin: 0;
    min-height: 0;
    z-index: unset;
    padding: 5px;
}

.ExpanedHolderPannerl .AddNewNoteBt {
    display: none;
}

.ExpanedHolderPannerl .BackBT {
    position: unset !important;
}

.ExpanedHolderPannerl .ReadableModeIcon {
    filter: invert(1) !important;
}

.ExpanedHolderPannerl .filterBT {
    opacity: 0;
    pointer-events: none;
}


.ExpanedHolderPannerl .SkeletonHolder {
    top: 59vh !important;
}

.ExpanedHolderPannerl .ChatDpHolder {
    min-width: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;

}

.ExpanedHolderPannerl .DocumentUploadPriviveItem {
    margin-left: 0 !important;
    ;
}


.ExpanedHolderPannerl .TableAvailable {
    max-width: calc(100% - 110px + 70px);
}

.ExpanedHolderPannerl .MainChatItem {
    gap: 0;
}

.ExpanedHolderPannerl .SubjectHintHplder {
    margin-top: 0 !important;
}

.FlashCardClassmatOpenBT {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px;
    background: #ba006aa8;
    border-bottom-left-radius: calc(25px);
    border-top-right-radius: calc(25px);
    cursor: pointer;
    display: none;
    transition: border-radius 0.2s ease-in-out, background 0.3s ease-in-out;

}

.BackDropIMG {
    position: relative;
    z-index: 1;
}

.BackDropIMG::before {
    content: "";
    position: absolute;
    /* stay inside parent */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
    /* start hidden */
    transition: opacity 2s ease-in-out;
    z-index: -1;
    /* stay behind content */
    border-radius: 10px;
    filter: blur(4px);
}




@keyframes SwapUp {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes SwapRight {
    0% {
        transform: translateX(30px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


@-webkit-keyframes slide-in-elliptic-bottom-bck {
    0% {
        -webkit-transform: translateY(600px) rotateX(-30deg) scale(6.5);
        transform: translateY(600px) rotateX(-30deg) scale(6.5);
        -webkit-transform-origin: 50% -100%;
        transform-origin: 50% -100%;
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0) rotateX(0) scale(1);
        transform: translateY(0) rotateX(0) scale(1);
        -webkit-transform-origin: 50% 500px;
        transform-origin: 50% 500px;
        opacity: 1;
    }
}

@keyframes slide-in-elliptic-bottom-bck {
    0% {
        -webkit-transform: translateY(600px) rotateX(-30deg) scale(6.5);
        transform: translateY(600px) rotateX(-30deg) scale(6.5);
        -webkit-transform-origin: 50% -100%;
        transform-origin: 50% -100%;
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0) rotateX(0) scale(1);
        transform: translateY(0) rotateX(0) scale(1);
        -webkit-transform-origin: 50% 500px;
        transform-origin: 50% 500px;
        opacity: 1;
    }
}

.DpIMG {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    min-width: 80px;
    min-height: 80px;
    border: 3px solid #ff2bc5;
}

.BackBT {
    font-weight: bolder;
    width: max-content;
    color: #ffd46f;
    word-spacing: 0px;
    transition: word-spacing ease 0.2s, padding ease 0.2s;
    cursor: pointer;
    text-wrap: nowrap;
}

@media (hover: hover) {
    .BackBT:hover {
        padding-left: 10px;
        word-spacing: 5px;
    }

    .ImageGrid img:hover {
        opacity: 0.3 !important;
    }

    .OverlayMore:hover {
        opacity: 0.3;
    }

    .JoblineItem-delete:hover {
        color: #ff000d;
        transform: scale(1.1) rotate(90deg);
    }

    .secondary-button:hover {
        transform: translateY(-3px);
    }

    .LinkNoteHolder:hover {
        transform: translateX(10px);
    }

    .DocumentNote .DocumentUploadPriviveItem:hover {
        transform: translateX(5px);
        opacity: 0.6;
    }

    .DocumentNote:hover {
        transform: none;
    }

    #MenuExpanderBT:hover {
        padding-inline: 20px;
    }

    .LinkText:hover {
        opacity: 0.5;
    }

    .NoteFocusArrow:hover {
        opacity: 1;
    }

    .mini-play-btn:hover {
        border-color: #fde68a;
    }

    .MenuItem:hover {
        opacity: 0.5;
    }

    .subjectModal_buttons button:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 15px rgba(0, 132, 180, 0.3);
    }

    #cropButton:hover {
        background-color: #9b27b0;
    }

    .uni-profile-button:hover::before {
        transform: translateX(0);
    }

    .uni-profile-button:hover {
        color: #fff;
    }

    .menu-item:hover {
        background: #33334d5d;
        transform: translateX(0);
    }

    #ClassMatesHolder .adminDataItem:hover {
        opacity: 0.4;
    }

    .LoginBtBase:hover {
        transform: translateY(-15px);
        opacity: 0.7;
    }
}


@media (max-width: 900px) {
    #LessonHolder {
        height: calc(100% - 32px - 30px) !important;
    }

    #NoteHolder {
        height: calc(100% - 32px - 30px) !important;
    }

    .HolderPannel {
        height: 70vh;
    }

    .ExpanedHolderPannerl {
        min-width: calc(100vw - 5px) !important;
        margin: 0 !important;
        min-height: calc(100vh - 5px) !important;
        z-index: 402 !important;
        border-radius: 0 !important;
        background: #e900ff1a !important;
        backdrop-filter: blur(50px) !important;

    }

    .SkeletonHolder {
        top: 40vh !important;
    }

    .NoteDeleteIcon {
        opacity: 0.7;
    }


}


.BackBT:active {
    padding-left: 10px;
    word-spacing: 5px;
}

.JoblineItem-delete:active {
    color: #b82b31;
    transform: scale(0.91);
}

.secondary-button:active {
    transform: scale(0.95)
}

.LinkNoteHolder:active {
    transform: scale(0.95);
}

.DocumentNote .DocumentUploadPriviveItem:active {
    transform: scale(0.95);
}





















.ChatDp {
    object-fit: cover;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    position: absolute;
    border: 1px solid #3bff27;
}

.MainChatItem {
    display: flex;
    position: relative;
    animation: ease SwapUp 0.5s;
    gap: 10px;
}




.FlashChatItem {
    position: relative;
    z-index: 1;
    /*box-sizing: border-box;*/
}

/* Neon flash behind */
.FlashChatItem::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ff00bf;
    border-radius: 20px;
    filter: blur(20px);
    opacity: 0.8;
    z-index: -1;
    animation: flashNeon 5s ease forwards;
}

@keyframes flashNeon {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}



.AddNewNoteBt {
    border: 1px solid #ffffff75;
    font-size: 2rem;
    font-weight: bolder;
    background: #00000094;
    width: 3rem;
    height: 3rem;
    text-align: center;
    border-radius: 50%;
    align-content: center;
    color: #cdac56;
    position: absolute;
    bottom: -1.5rem;
    right: 10px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform ease 0.3s, opacity ease 0.3s;
}

.AddNewNoteBt.strech {
    align-content: stretch !important;
    opacity: 0.5;
}

.AddNewNoteBt.RE {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEMxQTdFNDZBOTdCMTFGMDgxQzRGQTc1M0ZGQTAxNjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEMxQTdFNDdBOTdCMTFGMDgxQzRGQTc1M0ZGQTAxNjAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0QzFBN0U0NEE5N0IxMUYwODFDNEZBNzUzRkZBMDE2MCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0QzFBN0U0NUE5N0IxMUYwODFDNEZBNzUzRkZBMDE2MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtMvLy0AAAdVSURBVHjaxFd7bFNV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');
}

.AddNewNoteBt.AD {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjczOUMyRjRBOTdDMTFGMDhBMzdFQjU4M0FDOTcwODEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjczOUMyRjVBOTdDMTFGMDhBMzdFQjU4M0FDOTcwODEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyNzM5QzJGMkE5N0MxMUYwOEEzN0VCNTgzQUM5NzA4MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyNzM5QzJGM0E5N0MxMUYwOEEzN0VCNTgzQUM5NzA4MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk5potQAAAkpSURBVHjaxFd5UNTn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')
}

.AddNewNoteBt.MI {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0ZEMDg5QzBCMTYxMTFGMDlEMjc4MkFCNzFGQzEyMDAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0ZEMDg5QzFCMTYxMTFGMDlEMjc4MkFCNzFGQzEyMDAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3RkQwODlCRUIxNjExMUYwOUQyNzgyQUI3MUZDMTIwMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3RkQwODlCRkIxNjExMUYwOUQyNzgyQUI3MUZDMTIwMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pl/fRS8AAAUeSURBVHjaxFZLTxtXFL4z4zE24ASD7VCg7cKlYKirICiFLgqq2iAXJVVXSF2k+/6B0CwoTis16qY/ADVhxaKoC2gXNW1wJEqpSAJKFaJsQqGpCdgBYxvwc2b6nWtPNLziECJxpaOZuTNzvvP8zhU0TWMnsUR2Qst00KaqqkwQBGaMxt7I7HvOb+aVmkz8/6LAwWCQ9ff38whUVFR4q6qqHIqixPHzLZMkcSWCKDK6N8kyE/FMxhE47dOzUBACXV1bY8vLy7uAent72cDAwG7gSCTCZmdnT+P2w08uXLje7PHYCECW5UEo85eYzay8vJzBGBaLxThodXU1czmdHEjGezn/PausrGRDQ0NsdHR0F7Db7d7vsQRPsGog50tLS20EoEC51WIZlPKK/Q8XF9nw8LAUjkRe+9jn+6K9vR22lH9nr6j4RzB4TAEmA/YuM4w7LMdUaMLK48cKrJMoX5ubmwyhH1QkSfvh2rUroVDI29ra+v3nFy92k6eISnM6k+mWFEWlsJNkMhmWg+FHqeowZH56evqvO3NzCpVJNpvl4IiA/522tqvYeveMy9WSTqdZPB5nmXS6PpPNWum7LADpimeekqNU9RPIeC6XkycmJjSErLOlpUUiZevr6wzhvQSls6lkMpMCsIZUZHM5RVJVQTUAZV8AmJxchPxEPwYmJihdHRwc3qyurrKec+faEQF1K5Hg1Q1XNVUUNWPrUKiPCswXlOjg2q+BgIK8dbacPSuTwhjCXmq1iuSxOe8xfc9hheMC22w2+nFxe3v7RzxaJoNBGYXU9lZzMwfnFVpSwsmCwgpYjRnI5IWBUTQylDV4vd6vm5uaOgFahmdxZ2eHA+oQlGPUA28TTiTkN0QEoRRjrcMo01NeVvbNG273eaGgiJSnC94aFxkzPz+fIc+pd6nFiGgW7t8/MjAxST1y92qCCqjAuQQuQdRCr1Jo6R7RcaZSqd/wj6JzO7UZaoJ1dnQgKGpofHz8yr2FhYfFgFVICMqmb92+LYEWHUiwQMxGDEZX8DXoWRQdDoftba/X8mZ9fRelgGi1BFez4VoF+kTN1Hx5+fJHxYAphX9DhsDJ45CD3qOyWHttbe1nnsbG1ykyZlR5msCp2gu8Tny+tb1NUas8aJrtyzHaZafK4birUKsUQkyeinlv2b+PHpUmk8kz2NOIwYjTdZVCAQA5TsAADC0hNDY2dqnQps8GppAap44ZRaOHz2KxsI1oVAMw94gKTjXObIjVamWhlZU5AH6Lx7vIyupzVTUpJIIwwWPyhuiQ9p6Kogj6d9SzWmEuU2Sy2Cdu9/X0vA9jJ1EfgaWlJfbnzEzxUFPzgzzyhQQD5PwU4u1CnhNb6X2MIcENoP79b2OD1dXW8ndra2vCB93dftupU8LIyIjf5XLxaD0TGBXNyMqD8mIsEgoxhZqigmJSgzdv3mvyeBoxp83U1+FwmN4P+nw+1t3V5UdPPv9hT5+xRtHrCB6LBJDOey2CxaZ+v3HjDxDK05FK3I53dJj4ikfmmKdM0pDZwiKyIHLB0SmMtroOw37BVJsxgkejUQ6OA8WnRU+ZRVYa8mAnmZzEOS3udDpjT9bXryJFd7AfRY2YjCOV2hIznL1SU+M+LjA5Mw+JxRMJM4ToMF54Z5znGvL/XmNDg0hWnLbbI8cFppWELBzyTgffDAQCc1NTU8BXZ/r6+n5+GcDFFoGTh1ZMsBRFZG8fC/pE2XsAf9nLbrezurq63cAnsf4XYABK2wS2y40xawAAAABJRU5ErkJggg==');
    right: 4rem;
}

.AddNewNoteBt.CL {
    background-color: #530000c4;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkU3NEYxMkJBOTdDMTFGMEJGNjQ4MkVDQkY1NURGREQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkU3NEYxMkNBOTdDMTFGMEJGNjQ4MkVDQkY1NURGREQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyRTc0RjEyOUE5N0MxMUYwQkY2NDgyRUNCRjU1REZERCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyRTc0RjEyQUE5N0MxMUYwQkY2NDgyRUNCRjU1REZERCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkDVl+sAAAe2SURBVHjaxFdrbJRV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')
}

.AddNewNoteBt.SH {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzlDRkVGNzlCNTkyMTFGMEJEQTBDNTkxQUIxMjhBQ0UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzlDRkVGN0FCNTkyMTFGMEJEQTBDNTkxQUIxMjhBQ0UiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDOUNGRUY3N0I1OTIxMUYwQkRBMEM1OTFBQjEyOEFDRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDOUNGRUY3OEI1OTIxMUYwQkRBMEM1OTFBQjEyOEFDRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuRIWU0AAAXlSURBVHjavFcLbBRV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');
}

.NoteDeleteIcon::before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: red;
}

.NoteDeleteIcon {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity ease 0.3s;
    transform: translate(110%, 110%);
}

.NoteFocusArrow {
    position: absolute;
    bottom: 50px;
    right: 5px;
    opacity: 0.4;
    z-index: 10;
    cursor: pointer;
    transition: rotate ease 0.3s, opacity ease 0.3s;
}

.NoteFocusArrow:active {
    opacity: 0.1;
}



/*normal massage style--------------------*/

.ChatDpHolder {
    min-width: 70px;
    min-height: 62px;
    position: relative;
    height: max-content;
    cursor: pointer;
    transition: all ease 0.5s;
}

.MessageItem {
    background: #ffbd6f45;
    border-radius: 14px;
    border-top-left-radius: 0;
    padding: 14px;
    margin-top: 40px;
    margin-bottom: 20px;
    max-width: 400px;
    flex: 1;
}

.QuizHistorybt {
    margin-left: auto;
    cursor: pointer;
    transition: rotate 0.3s ease;
}

.DAYDEL {
    border: 1px solid red;
    background: #ff000045;
}

.MessageHeading {
    font-size: 1.3rem;
    font-weight: bolder;
    color: #ffffff;
    margin-bottom: 10px;
    text-align: center;
}

.ImageGrid {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
    max-width: 400px;
    margin: auto;
}

.ImageGrid img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}


.CaptionText {
    font-size: 1.1rem;
    color: #ffffff;
    margin-bottom: 6px;
}

.TimeText {
    font-size: 12px;
    color: #ffd46f;
    text-align: right;
    width: -webkit-fill-available;
    margin-top: 10px;
}

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

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-4,
.grid-4plus {
    grid-template-columns: repeat(2, 1fr);
}

.OverlayMore {
    position: relative;
    transition: opacity 0.1s ease;
    cursor: pointer;
}

.OverlayMore::after {
    content: attr(data-count) "+";
    position: absolute;
    right: 0;
    bottom: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffffa6;
    font-size: 2rem;
    font-weight: bold;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    text-align: center;
    border-radius: 8px;
    align-content: center;
}


.sortable-ghost {
    opacity: 0.4;
    border-radius: 10px;


}

.sortable-dragging {
    opacity: 0.7;
    transform: scale(1.05);
    display: none !important;
}

.sortable-chosen {
    cursor: grabbing !important;
}

.NormalMassageImg {
    object-fit: cover;
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 15px;
    user-select: none;
    touch-action: none;
    user-drag: none;
    -webkit-user-drag: none;
    cursor: grab;
}

.NormalMassageImgSEL {
    border: 3px solid rgb(97, 255, 247);
}


#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
}

#sortable li {
    margin: 0 3px 3px 3px;
    padding: 0.4em;
    padding-left: 1.5em;
    font-size: 1.4em;
    height: 18px;
}

#sortable li span {
    position: absolute;
    margin-left: -1.3em;
}



.NoteHeading {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    background: #a300ff4a;
    color: #ffce00;
    border-radius: 50px;
    padding: 5px;
    margin-block: 15px;
    width: -webkit-fill-available;

}

.NoteMassage {
    background: #90f3de4a;
    border: 2px dashed #35ff87;
    padding: 10px;
    border-radius: 20px;
    margin: auto;

}

.TableAvailable {
    max-width: calc(100% - 110px);
}

.AlertNoteMAssage {
    background: #ff858563;
    border: 2px solid #ff3535;
    border-radius: 6px;
}

.AlertNoteMAssage .MessageHeading {
    color: #a20000;
    text-decoration: underline;
}

.AlertNoteMAssage .CaptionText {
    color: #f4e500;
    font-style: italic;
}


.LinkNoteHolder {
    display: flex;
    background: #00ffca3b;
    padding: 5px;
    border-radius: 100px;
    width: max-content;
    padding-right: 50px;
    min-width: 250px;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s, color 0.3s;
}

.LinkNoteHolder .MessageHeading {
    margin: 0;
    width: 100%;
    text-align: center;
    font-size: 1rem;
}

/*----------   instant navigator    -----------------------------------*/
.instantNavigatorPannelDrop {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background: #11111131;
    backdrop-filter: blur(5px);
    z-index: 402;
    display: none;
    justify-content: flex-end;
    align-items: center;
    animation: Fade 0.5s ease forwards;
}

.instantNavigatorPannecontainner {
    background: linear-gradient(to bottom right, #ffeb8a75, #ffc45f75);
    height: 90vh;
    width: 300px;
    border-top-left-radius: 10px;
    padding: 5px;
    border-bottom-left-radius: 10px;
    overflow: scroll;
    animation: navigatorcome 0.5s ease forwards;
}

.instantNavigator_focused {
    animation: neonFlash 1.2s infinite alternate;
}

@keyframes navigatorcome {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes neonFlash {

    0%,
    100% {
        box-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #0ff;
        color: #0ff;
        text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff;
        filter: brightness(1.2);
    }

    50% {
        box-shadow: 0 0 2px #00ffff66, 0 0 5px #00ffff66;
        color: #00ffffaa;
        text-shadow: 0 0 3px #00ffff55;
        filter: brightness(0.7);
    }
}

.instantNavigator_mainTopic {
    background: #00000087;
    padding: 10px;
    border-radius: 10px;
    margin: 5px;
    color: #ffffff;
    font-weight: bolder;
    cursor: pointer;
    margin-top: 20px;
    transition: background 0.3s ease;
}

.instantNavigator_Subtopic {
    background: #70005d69;
    padding: 10px;
    border-radius: 10px;
    margin: 5px;
    color: #ffffff;
    font-weight: bolder;
    cursor: pointer;
    margin-left: 25px;
    transition: background 0.3s ease;

}





/*////////////////////////////////////////////////////////   Document Viver   ///////////////////////////////*/

#DocumentUpladerPannel_heading_PreviveContainner {
    max-height: 350px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    padding-block: 50px;
    overflow: scroll;
}

.DocumentUploadPriviveItem {
    background: #00d4ff36;
    padding: 10px;
    border-radius: 10px;
    position: relative;
    cursor: grab;
}

.DocumentUploadPriviveItem_Text {
    color: #a4ffec;
    text-align: center;
    overflow: scroll;
}


/*documant show in chat*/
.DocumentNote {
    max-width: calc(100% - 5rem);
    background: #ffbd6f45;
    border-radius: 34px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 10px;
    align-items: flex-start;
    flex-direction: column;
    padding-right: 5px;
    animation: none !important;
    margin-block: 30px;
    cursor: unset;
}

.QuizNote {
    width: 100%;
    margin-bottom: 10px;
    background: #00000087;
    max-width: calc(100% - 1.5rem);
    border-radius: 34px;
    border-bottom-right-radius: 0px;
    transition: background ease 0.15s;
    cursor: pointer;
}

.DocumentNote .DocumentUploadPriviveItem {
    margin: 5px;
    cursor: pointer;
    transition: transform ease 0.3s, opacity ease 0.3s;
    margin-left: 70px;
}




/*////////////////////////////////////////////////////////   Document Viver   ///////////////////////////////*/

.InAPpDocumentViverBase {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

.InAPpDocumentViverBase iframe {
    width: 100vw;
    height: 100vh;
}

.InAPpDocumentViverBase .AddNewNoteBt {
    top: 0px;
    scale: 0.5;
    left: 0;
    bottom: unset;
    color: #ffcbcb;
    border: 2px solid wheat;
}


/*////////////////////////////////////////////////////////   Slide Menu   ///////////////////////////////*/
#MenuExpanderBT {
    position: fixed;
    z-index: 401;
    left: 0;
    bottom: 5px;
    background: #68006770;
    padding-inline: 10px;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
    cursor: pointer;
    transition: left ease 0.5s, padding-inline ease 0.5s;
}

#MenuExpanderBT img {
    transition: rotate ease 0.5s;
}

.MenupannelContainner {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    min-width: 300px;
    background: #68006770;
    max-width: calc(100vw - 100px);
    animation: ease MenuCome 0.5s;
    overflow: scroll;
    display: flex;
    flex-direction: column;

}

@keyframes MenuCome {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes Fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Initial fade-in animation */
.MenuVisible {
    animation: Fade 0.5s ease forwards;
}

.MenuVisible .MenupannelContainner {
    animation: MenuCome 0.5s ease forwards;
}

/* Reverse (fade-out) animation */
.MenuRehider {
    animation: Fade 0.5s reverse forwards !important;
}

.MenuRehider .MenupannelContainner {
    animation: MenuSlideOut 0.5s ease forwards !important;
}

@keyframes MenuSlideOut {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

.menuItemHolder {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    margin-bottom: auto;

}

.MenuItem {
    display: flex;
    background-color: #00d8fd42;
    margin: 5px;
    align-items: center;
    justify-content: space-evenly;
    padding: 5px;
    border-bottom-right-radius: 29px;
    border-top-right-radius: 29px;
    border: 1px solid #fbfd0070;
    transform: translateX(-40px);
    transition: transform ease 0.3s, opacity ease 0.3s;
    cursor: pointer;
}

.MenuItem div {
    color: burlywood;
    font-weight: bolder;
}

.MenuItem img {
    width: 40px;
}

.menuSelected {
    background-color: #fdff003d;
    transform: translateX(-10px);
}

.AdminDitailsBase {
    display: flex;
    margin: auto;
    justify-content: center;
    margin-top: 50px;
    flex-direction: column;
    width: -webkit-fill-available;
    align-items: center;
}

.AdminDitailsBase img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 3px solid #00fc7f;
    border-radius: 50%;

}

.MenuStudentDp {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover;
    border: 2px double burlywood;
    border-radius: 50%;
}

.MenuFooter {
    position: sticky;
    bottom: 4px;
    margin-inline: 10px;
    text-align: center;
    padding: 10px;
    background: #ffffff13;
    border: 1px solid #de00ff43;
    border-radius: 50px;
    display: flex;
    gap: 20px;
    justify-content: center;
}

.MenuFooterItem {
    display: inline-block;
    color: #ffffff;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.3s;
}

.MenuFooterItem img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

.MenuFooterItem div {
    font-family: "Open Sans Condensed", Arial, Helvetica, Verdana, sans-serif;
    font-weight: 900;
    margin-top: 5px;
    color: #ffffff;
    font-size: 12px;
    text-align: center;

}


/*////////////////////////////////////////////////////////   DropBox Uploader   ///////////////////////////////*/
.JoblineItem-delete {
    color: #ff5858;
    border: none;
    margin: 10px;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s, color 0.3s;
    position: absolute;
    top: 0;
    right: 0;
}

.banner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent overlay */
    backdrop-filter: blur(10px);
    /* Blur effect */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 400;
    animation: PannelOpen ease 0.3s;
    transition: all ease 0.3s;
}

.minimizeWindowBT {
    width: 50px !important;
    height: 50px !important;
    top: 20px !important;
    left: 50vw !important;
    border-radius: 50%;
    padding: 0px !important;
    background: url(Res/WinMaximiz.png) !important;
    background-position: center;
    overflow: hidden;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    box-shadow: 0px 0px 17px 9px #ffffff;
    transform: translateX(-50%);
    animation: miniwindopuls 1.5s infinite alternate;
    cursor: pointer;
}

@keyframes miniwindopuls {
    from {
        transform: translateY(10px) translateX(-50%);
        box-shadow: 0 0 5px 2px #ffffffa9;
    }

    to {
        box-shadow: 0 0 20px 10px #ffffff;
        transform: translateY(0px) translateX(-50%);
    }
}

.minimizeWindowBT * {
    display: none !important;
}



.DropBoxUpdatorContainner {
    background-color: #f1f3f2;
    border-radius: 10px;
    padding: 10px;
    width: 90vw;
    min-height: 75vh;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    justify-content: space-between;
    z-index: 1;
}


.DragImageDropbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    border-radius: 10px;
    pointer-events: none;
    /* Ensure interactions go through to the container */
    background: #00fdbe38 !important;
}





.DropBoxHedderIcon {
    height: 30px;
    width: auto;
}

.ReLinkBt {
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 25px;
    right: 5px;
    cursor: pointer;
    transition: scale 0.2s ease-in-out, rotate 0.2s ease-in-out;
}


.DropBoxUploaderFotter {
    color: #9d9d9d;
    text-transform: uppercase;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 900;
    margin-bottom: 10px;
    font-family: "Open Sans Condensed", Arial, Helvetica, Verdana, sans-serif;
}

.ErrorUnlincBase {
    margin-block: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    background: #ff000012;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #ff00004d;
    margin-inline: 10px;
}

.ErrorUnlincBase img {
    height: 50px;
    width: auto;
}

.ErrorUnlincBase div {
    font-family: "Open Sans Condensed", Arial, Helvetica, Verdana, sans-serif;
    color: #ff0000;
    font-size: 1.3rem;
    font-weight: 900;
    text-align: center;
    animation: alternate notificaome 0.6s;
}


.DroBoxFile-Upload-container {
    margin-top: auto;
    border: 2px dashed #0062fd;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    background: rgb(0 97 254 / 13%);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}

.DropboxUpDisCript {
    font-size: 1rem;
    font-weight: 900;
    color: #0f6dfd;
    resize: none;
    height: 100px;
    width: 90%;
    padding: 5px;
    outline: none;
    border: 1px solid #0061fd5d;
    border-radius: 5px;
    background-color: #00000000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);


}


.carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding: 10px;
    width: 95%;
    overflow: scroll;
    height: 150px;
}

.carousel-item {
    flex: 0 0 auto;
    scroll-snap-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-in-out;
    width: 100px;
    height: 150px;
    position: relative;
    animation: alternate notificaome 0.6s;
}

.carousel-item img {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 10px;
    object-fit: cover;
}

.DropImgeDel {
    background-color: #ff0037;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #ffffff;
    font-weight: 900;
    position: absolute;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    right: 0;
    transform: translate(20%, -20%);
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, scale 0.2s ease-in-out;
}


.DropboxLinkingBt {
    width: 30px !important;
    height: 30px !important;
    padding: 5px;
    transition: scale 0.2s ease-in-out, rotate 0.2s ease-in-out;
    cursor: pointer;
}

.DropboxProg {
    background-color: #000dff17;
    width: 80%;
    border-radius: 5px;
    transform: translateY(-50%);
    display: flex;
    margin-top: 20px;
}

.DropboxInnerProg {
    background-color: #1c8bee;
    width: 0%;
    height: 1rem;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: width ease 1s;
}

.progText {
    font-size: 40%;
    font-weight: bolder;
    color: #00ff74;
}

.secondary-button {
    background: linear-gradient(135deg, #ffaf40, #ff7676);
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: alternate notificaome 0.6s;
    text-align: center;
}




/*-------------------------A udio Player  -----------------------*/
.mini-audio-player {
    background: #00031694;
    padding: 10px 15px;
    border-radius: 12px;
    font-family: 'Segoe UI', sans-serif;
    color: #eee;
    width: -webkit-fill-available;
}

.track-title {
    font-size: 14px;
    font-weight: 600;
    color: #fcd34d;
    margin-bottom: 6px;
    text-align: center;
}

.audio-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

.AudioLoader {
    height: 20px;
    width: 50px;
    transform: translateY(-2px);
    margin: auto;
}

.mini-play-btn {
    width: 32px;
    height: 32px;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid #00cac299;
    transition: border-color ease 0.3s;
}


.AudioSeekSlider {
    flex: 1;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: #888;
    outline: none;
    margin: 0 4px;
    display: none;
    max-width: 20vw;
}

.AudioSeekSlider::-webkit-slider-thumb {
    appearance: none;
    width: 10px;
    height: 10px;
    background: #fcd34d;
    border-radius: 50%;
    cursor: pointer;
}

.AudioTimeDisplay {
    font-size: 11px;
    width: 40px;
    text-align: center;
}



/*  - - --- --- - - -  for massage tabele   -- -- - - - - -*/


.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
    border-radius: 12px;
    background: linear-gradient(to right, #e2e2e22e, #0000002e);
    padding: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    position: relative;
}

/* Optional Table Title */
.table-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #4b4b4b;
    font-family: 'Segoe UI', sans-serif;
    position: sticky;
    top: 0;
    left: 0;
}

/* Table Base */
table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Segoe UI', sans-serif;
    background-color: #00000000;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #000000;
}

/* Table Header */
thead {
    background-color: #ff2bca38;
    color: rgb(255, 186, 154);

}

thead th {
    padding: 14px 10px;
    font-size: 1rem;
    text-align: left;
    font-weight: 600;
    border: 1px solid #7aff813d;
    text-align: center;
    align-content: center;
}

/* Table Body */
tbody td {
    padding: 12px 10px;
    font-size: 0.95rem;
    color: #e7f1ff;
    border: 1px solid #4b4b4b94;
    background-color: #6b81ff36;
    vertical-align: top;
    text-align: center;
    align-content: center;
}

/* Alternating row background */
tbody tr:nth-child(even) td {
    background-color: #6bffc136;
}

/* Hover effect */


/* Colspan/Rowspan styling */
/*
td[colspan],  td[rowspan] {  
  color: #e7f1ff;  
  background-color: #6b81ff36;
  font-weight: 500;
}
th[colspan], th[rowspan] {  
  background-color: #ff2bca00;
  color: white;
  font-weight: 500;
}*/


/* Responsive font size and padding */
@media (max-width: 768px) {
    .table-title {
        font-size: 1.2rem;
    }

    thead th,
    tbody td {
        padding: 10px 5px;
        font-size: 0.6rem;
    }

    table {
        min-width: 100%;
        /* For tighter space */
    }
}


/*-----------------         Tools Pannel       ----  */

/* === Tools Holder === */
#ToolsHolder {
    max-height: 95%;
    overflow-y: auto;
    border-radius: 15px;
    padding: 10px;
}

#ToolsHolder h2 {
    font-weight: 600;
    font-size: 1.8em;
    color: #00b4d8;
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(0, 180, 216, 0.4);
}

/* === Tool Item === */
.ToolItem {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    margin: 12px 0;
    border-radius: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.ToolItem:hover {
    transform: translateY(-3px);
    background: rgba(0, 180, 216, 0.1);
    box-shadow: 0 5px 20px rgba(0, 180, 216, 0.25);
}

.ToolItem img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.ToolItem:hover img {
    transform: scale(1.08);
}

/* === Tool Text === */
.ToolItemText h3 {
    margin: 0;
    font-size: 1.2em;
    font-weight: 600;
    color: #fff;
}

.ToolItemText p {
    margin-top: 4px;
    color: #bbb;
    font-size: 0.9em;
    line-height: 1.4;
}



/*            -------------------           Admin Ditails Base -------------------------------------              */




.adminDataItem {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-block: 10px;
    border-radius: 65px;
    padding-block: 6px;
    background: linear-gradient(135deg, #40abff5e, #76ffab5e);
    border-top-right-radius: 5px;
    min-height: 50px;
    margin-block: 25px;
}

#ClassMatesHolder .adminDataItem {
    cursor: pointer;
    transition: opacity ease 0.2s;
}



.AdminDitailDivider {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.adminDitailsDp {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #ffea88;
}

.AdminDitailsName {
    color: #35ffe3;
    font-size: 1rem;
    font-weight: bolder;
}

.AdminDitailDivider .secondary-button {
    background: linear-gradient(135deg, rgb(34 230 0), rgb(12 135 0));
    background: linear-gradient(135deg, rgb(34 230 0), rgb(12 135 0));
    font-size: 0.8rem;
    padding: 7px 16px;
}


.adminDataItem a {
    display: flex !important;
    align-items: center !important;
    max-height: 0px !important;
}


/*admin Loggin Containner*/

.LoginBtBase {
    cursor: pointer;
    transition: transform ease 0.3s, opacity ease 0.2s;
    animation: alternate flip-in-hor-bottom 0.5s;
}

@keyframes flip-in-hor-bottom {
    0% {
        -webkit-transform: rotateX(80deg);
        transform: rotateX(80deg);
        opacity: 0;
    }

    100% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        opacity: 1;
    }
}

.LoginImageBt {
    border-radius: 10px;
    width: 100px;
}

.LoginBtCaption {
    text-align: center;
}





/*            -------------------            noti fi cation -------------------------------------              */

.NotifyPannel {
    width: calc(100vw - 10vw);
    position: absolute;
    top: 0;
    padding-inline: 3vw;
    margin: 2vw;
    z-index: 2005;
}

.notifi {
    background-color: #ffffff54;
    padding: 1vw;
    border-radius: 0.51vw;
    display: flex;
    align-items: center;
    color: #ffffff;
    margin-bottom: 5px;
    animation: alternate notificaome 0.4s;
    box-shadow: 0px 0px 8px 0px rgb(0 0 0 / 34%);
    text-shadow: 0px 0px 3px rgb(0 0 0);
    padding-block: 0.1vw;
    overflow: hidden;
}

.Notificlas {
    text-align: end;
    font-size: 1.7rem;
    padding: 0.1rem;
    font-weight: bolder;
    color: #443131;
    rotate: 45deg;
    pointer-events: all;
    cursor: pointer;
    text-shadow: none;
}

.RemoveNotif {
    animation: ease notiremove 0.5s;
}


@keyframes notificaome {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes notiremove {
    0% {
        max-height: 100px;
        opacity: 1;
    }

    100% {
        max-height: 0;
        opacity: 0.7;
    }
}

.ComfirmBackDrop {
    background-color: #090622e0;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    backdrop-filter: blur(5px);
    align-items: center;
    /* Align items horizontally */
    justify-content: center;
    /* Align items vertically */
    z-index: 1997;
    animation: PannelOpen ease 0.3s;

}

.ComfimContainner {
    background: rgba(255, 255, 255, 0.2);
    padding: 1rem;
    border-radius: 0.5rem;
    max-width: 50vw;
    overflow: hidden;
    transition: all ease 0.5s;
}

.ComfimContainner img {
    width: 100%;
}

















.SkeletonHolder {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    background: #fafafa00;
    position: absolute;
    top: 50vh;
    width: 82%;
    transform: translateY(-50%);
    height: 75%;
    overflow: scroll;
}

.SkeletonItem {
    display: flex;
    align-items: center;
    gap: 12px;
    align-items: flex-start;
}

.SkeletonCircle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e0e0e0;
    flex-shrink: 0;
}

.SkeletonText {
    height: 14px;
    background: #e0e0e0;
    border-radius: 4px;
}

/* Pulse Animation */
@keyframes pulse {
    0% {
        opacity: 1;
        gap: 30px;
    }

    50% {
        opacity: 0.3;
        gap: 12px;
    }

    100% {
        gap: 30px;
        opacity: 1;
    }
}








/* ------------------   subject modle   ------------------------*/

.subjectModal_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 4999;
    animation: subjectModal_fadeIn 0.3s ease-in-out;
}

.subjectModal_container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    max-width: 80%;
    width: 380px;
    padding: 25px 20px;
    position: relative;
    transition: transform 0.3s;
}

.subjectModal_container h2 {
    margin-top: 0;
    font-size: 22px;
    text-align: center;
    color: #333;
}

.subjectModal_buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 25px;
}

.subjectModal_buttons button {
    padding: 12px;
    font-size: 16px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(to right, #00b4db, #0083b0);
    color: white;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}


.subjectModal_close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
}

@keyframes subjectModal_fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



/* --------------------------------  Context menu  ----------------------------*/



.custom-context-menu {
    display: none;
    position: fixed;
    background: #1e1e2f7a;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    min-width: 150px;
    z-index: 500;
    font-family: 'Segoe UI', sans-serif;
    backdrop-filter: blur(50px);
    overflow: hidden;
    animation: SwapRight ease 0.3s;
}

.menu-item {
    padding: 10px 20px;
    color: #f0f0f0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    text-wrap: nowrap;
    transform: translateX(-5px);
}


.fackCotextBT {
    display: none;
}






/*////////////////////////////////////////////////////////   Image Croping   ///////////////////////////////*/

.CopperContainner {
    background: linear-gradient(137deg, #fc699e80, #f0007780);
    padding: 5px;
    border-radius: 10px;
    width: 90vw;
    max-width: 450px;
    max-height: 550px;
    animation: PannelOpen ease 0.3s;
    animation: slideUp 0.6s ease-out;

}

/* Wrapper for proper alignment */
.file-input-wrapper {
    display: flex;
    position: relative;
    width: 100%;
    justify-content: center;
    margin-block: 10px;
}

/* Hide the default input */
.hidden-file-input {
    display: none;
}

/* Custom button styles */
.custom-file-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    background: linear-gradient(45deg, #6a11cb, #2575fc);
    border: none;
    margin: 10px;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.TAPBT {}

.TAPBT:active {
    transform: scale(0.95);
    opacity: 0.6;
}

.custom-file-button:active {
    transform: scale(0.95);
    opacity: 0.6;
}

.button-icon {
    font-size: 1.2rem;
}


#CropBaseImage {
    min-width: 100%;
    max-width: 100%;
    max-height: 350px;
    min-height: 350px;
    object-fit: contain;
}

#cropButton {
    margin-top: 20px;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #8406aa;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
}



#resultCanvas {
    display: block;
    margin: 20px auto;
    border: 2px solid #ddd;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    display: none;
}

/* Make the crop box circular */
.cropper-view-box {
    border-radius: 50%;
    /* Makes the crop box round */

}

.cropper-face {
    border-radius: 50%;
    /* Round the visible area */
}


.cropper-canvas,
.cropper-wrap-box {
    border-radius: 10px;
}

.cropper-move {
    cursor: move;
    border-radius: 10px;
}

.cropper-crop-box .cropper-move {
    border-radius: 0px;
}

.cropper-modal {
    background-color: #000000;
    opacity: .7;
}








/* Overlay Background with animated gradient */
@keyframes bgAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.uni-profile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(270deg, #0a0f27, #33271aec, #0a0f27);
    background-size: 600% 600%;
    animation:
        bgAnimation 15s ease infinite,
        Fade 0.5s ease;
    z-index: 403;
    width: 100vw;
    height: 100vh;
    transition: all ease 0.3s;
}


/* Glassmorphism Container */
.uni-profile-box {
    margin: 10px;
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
    color: #e0e0e0;
    max-height: 500px;
    overflow: scroll;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.uni-profile-box h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.9rem;
    color: #00e5ff;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
}

.uni-profile-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

.uni-profile-field label {
    font-size: 0.85rem;
    margin-bottom: 3px;
    color: #ccc;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
    padding-left: 0.2rem;
}



.dp-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dp-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    background: #f4f4f4;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.dp-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dp-footer {
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    padding: 6px 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    height: 20%;
    width: 50%;
    transition: background 0.3s ease, height 0.3s ease, width 0.3s ease;
}



.dp-footer i {
    font-size: 14px;
}

.dp-footer span {
    font-weight: bold;
}


/* Inputs */
.uni-profile-input {
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    color: #fff;
    outline: none;
    transition: background 0.3s;
}

.uni-profile-input:focus {
    background: rgba(255, 255, 255, 0.15);
}

.uni-profile-input::placeholder {
    color: #bbb;
}


/* Save Button with Neon Glow */
.uni-profile-button {
    padding: 0.85rem;
    border: none;
    border-radius: 12px;
    background: linear-gradient(45deg, #00e5ff, #ff00ff);
    font-size: 1rem;
    font-weight: 600;
    color: #000;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    transition: color 0.3s;
    text-align: center;
}

.uni-profile-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(60deg, #00262b94,#44004446,
        #44004400);
    transform: translateX(-100%);
    transition: transform 0.5s;
    z-index: -1000000 !important;
    pointer-events: none;
}

.uni-profile-input option {
    color: #0083b0;
}

@media (max-width: 480px) {
    .uni-profile-box {
        padding: 1.5rem 1rem;
    }
}












.FirstInstructerBase {
    display: none;
    z-index: 1995;
    background-color: rgba(0, 0, 0, 0.712);
    width: calc(100vw - 2rem);
    height: calc(100vh - 2rem);
    position: absolute;
    top: 0;
    left: 0;
    backdrop-filter: blur(4px);
    align-items: center;
    /* Align items horizontally */
    justify-content: center;
    /* Align items vertically */
    animation: PannelOpen ease 0.3s;
    font-size: 1.5rem;
    padding: 1rem;

}

.InstuctCaptionBase {
    color: #ffffff;
    text-align: center;
    position: absolute;
    transform: translate(-50%, -50%);
    text-shadow: 0px 0px 3px rgb(0 0 0);
}

.cloneAnim {
    transform: translate(-50%, -50%);
    animation: cloneanimation ease infinite 1s !important;
}

@keyframes cloneanimation {
    0% {
        box-shadow: 0px 0px 4px 4px #ffffff50;
        background-color: #ffffff50;
    }

    50% {
        opacity: 1;
    }

    100% {
        box-shadow: 0px 0px 20px 20px #00f7ff00;
        background-color: #00f7ff00;
    }
}

.IsntrutionProgresBase {
    position: absolute;
    bottom: 1vw;
    display: flex;
}

.ProgDot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin: 0.1rem;
    border: 1px solid #ffffff4b;
    animation: PannelOpen ease 0.3s;
}

.skipAllBt {
    position: absolute;
    bottom: 1vw;
    color: #ffffffa4;
    right: 1vw;
    font-size: 1rem;
    display: none;

}