/* General */
body[data-leftbar-compact-mode=condensed] { 
    min-height: 0
}
body[data-leftbar-compact-mode=condensed] .footer {
    left:70px
}
label {
    font-weight: normal
}
.tal{
    text-align: left
}
.tar{
    text-align: right
}
.tac{
    text-align: center
}
hr{
    width: 50px; height: 3px; margin-top: 0rem; background-color: #007daf; border-top: 0px
}
.centered {
    margin-right: -50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)
}
.mark, mark {
    padding: 0em;
    background-color: yellow;
}
.outlineRed {
    box-shadow: 1px 1px 1px 1px #F0706A
}
.outlineGreen {
    box-shadow: 1px 1px 1px 1px #ACD1AF
}
.color-corporate{
    color: #007daf !important
}
.bg-corporate-primary {
    background-color: #007daf !important
}
.bg-corporate-secondary {
    background-color: #0088ff !important
}
.btn-corporate {
    color: white; background-color: #007daf; border-color: #007daf
}
.btn-corporate a {
    color: white; background-color: #007daf; border-color: #007daf
}
.btn-corporate a:hover{
    color: white; background-color: #0088ff; border-color: #0088ff
}
.btn-corporate:hover {
    color: white; background-color: #0088ff; border-color: #0088ff
}
.btn-border-corporate{
    border-color: #007daf; color: #007daf
}
.btn-border-corporate:hover {
    background-color: #007daf
}
.img-whitend {
    filter: grayscale(100%) brightness(500%)
}
.divNoBlock{
    display: inline-block
}
/* footer */
.footer-full{
    padding: 19px 24px 20px; position: absolute; border-top: 1px solid rgba(152,166,173,.2); bottom: 0; right: 0; left: 0; color: #98a6ad
}
.footer-full a{
    color: #007daf
}
.footer-full a:active{
    color: #0088ff
}
/* registration */
.register-label {
    font-family: Arial, Helvetica, sans-serif; font-size: 1rem; color:grey
}
.register-usertype {
    font-family: Arial, Helvetica, sans-serif; color:black
}
/* exam_finished */
.exam-finished-mrg{
    margin-top: 20%;
}
/* Proctor Buttons */
.proctor-button{
    display: block;
    font-size: 1.2rem
}
.restrictionsCheck{
    font-size: 24px; color: #49d29d
}
.border-buttons{
    border-radius: 2%;
}
.active-message{
    background-color: #fcfbdd;
}

/* Teacher Bttons */

.teacher-button{
    display: block;
    font-size: 1.2rem
}

.deleteMessageButton{
    background: none;
    color: #fa6767;
    border: none;
    padding: 0;
    font-size: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s;
    outline: none;
}

.showOriginalMessageButton {
    background: none;
    color: #0078d4;
    border: none;
    padding: 0;
    font-size: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s;
    outline: none;
}

.showOriginalMessageButton:hover, .showOriginalMessageButton:focus {
    color: #005a9e; 
} 

.showOriginalMessageButton:active {
    color: #004578;
}

.ctext-wrap .usernameAndTime {
    display: flex;
    justify-content: space-between; /* Aligns username to left and time to right */
    font-size: 12px;
    font-weight: 700;
    color: black;
}

.ctext-wrap {
    color: black;
}

.ctext-wrap-student {
    color: black;
}


.ctext-wrap .usernameAndTime .username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%; /* Adjust this value based on your design needs */
}

.ctext-wrap .usernameAndTime .chat-time {
    white-space: nowrap;
    font-weight: 100;
}

.ctext-wrap-student .usernameAndTime {
    display: flex;
    justify-content: space-between; /* Aligns username to left and time to right */
    font-size: 12px;
    font-weight: 700;
}

.ctext-wrap-student .usernameAndTime .username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%; /* Adjust this value based on your design needs */
}

.ctext-wrap-student .usernameAndTime .chat-time {
    white-space: nowrap;
    font-weight: 100;
}

.proc .ctext-wrap .usernameAndTime {
    display: flex;
    justify-content: space-between; /* Aligns username to left and time to right */
    font-size: 12px;
    font-weight: 700;
}

.proc .ctext-wrap .usernameAndTime .username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%; /* Adjust this value based on your design needs */
}

.proc .ctext-wrap .usernameAndTime .chat-time {
    white-space: nowrap;
    font-weight: 100;
}

.odd .ctext-wrap .usernameAndTime {
    display: flex;
    justify-content: space-between; /* Aligns username to left and time to right */
    font-size: 12px;
    font-weight: 700;
}

.odd .ctext-wrap .usernameAndTime .username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%; /* Adjust this value based on your design needs */
}

.odd .ctext-wrap .usernameAndTime .chat-time {
    white-space: nowrap;
    font-weight: 100;
}

#student_chat::-webkit-scrollbar {
    height: 4px; background-color: #DCDCDC; width: 10px;
}
#student_chat::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5); border: 1px solid #DCDCDC; border-radius: 5px
}
#student_chat::-webkit-scrollbar-track {
    background-color: #DCDCDC
}
.btn-corp-fancy {
    padding: 5px;
    font-size: 20px;
    color: white;
    border: none;
    border-radius: 5px;
    background-image: linear-gradient(135deg, #2c3e50, #34495e);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    outline: none;
}

.btn-corp-fancy:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    color: white;
}

.btn-corp-fancy:active {
    transform: translateY(1px);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
}

.btn-corp-fancy-red {
    padding: 5px;
    font-size: 20px;
    color: white;
    border: none;
    border-radius: 5px;
    background-image: linear-gradient(to right, #fa6767 0%, #ff8b8b 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    outline: none;
}

.btn-corp-fancy-red:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    color: white;
}

.btn-corp-fancy-red:active {
    transform: translateY(1px);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
}

.btn-corp-fancy-green {
    padding: 5px;
    font-size: 20px;
    color: white;
    border: none;
    border-radius: 5px;
    background-image: linear-gradient(to right, #42d29d 0%, #6be2b6 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    outline: none;
}

.btn-corp-fancy-green:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    color: white;
}

.btn-corp-fancy-green:active {
    transform: translateY(1px);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
}

.btn-corp-fancy-yellow {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    border: none;
    border-radius: 5px;
    background-image: linear-gradient(to right, #f9bc0d 0%, #ffd740 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    outline: none;
}

.btn-corp-fancy-yellow:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    color: white;
}

.btn-corp-fancy-yellow:active {
    transform: translateY(1px);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
}

.btn-corp-fancy-gray {
    padding: 10px 20px;
    font-size: 16px;
    color: #333; /* Darker text color for contrast */
    border: none;
    border-radius: 5px;
    background-image: linear-gradient(to right, rgb(238, 242, 247) 0%, #dfe4ea 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    outline: none;
}

.btn-corp-fancy-gray:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    color: #333;
}

.btn-corp-fancy-gray:active {
    transform: translateY(1px);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
}

.background-corp-fancy-gray {
    background-image: linear-gradient(to right, rgb(238, 242, 247) 0%, #dfe4ea 100%);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    outline: none;
}

.languageSelecterSelfregister{
    left: auto !important;
}