:root {
    --dark: #000;
    --medium: #1b1b1b;
    --light: #2e2e2e;
}

.dark-mode-button {
    background: transparent;
    border: none;
    height: 40px;
    width: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.top-dark-mode-button {
    position: absolute;
    top: .1px;
    right: 16px;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    z-index: 999;
    -webkit-transition: .3s ease-in;
    -o-transition: .3s ease-in;
    transition: .3s ease-in;
}

.top-dark-mode-button .dark-toggle {
    background: rgb(230, 230, 230);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border-color: rgb(230, 230, 230);
    width: 35px;
}

.top-dark-mode-button:after {
   
    position: absolute;
    color: #fff;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 22px;
    top: 10px;
    -webkit-transition: .1s ease-in;
    -o-transition: .1s ease-in;
    transition: .1s ease-in;
}

body.dark-mode .top-dark-mode-button:after {
  
    color: var(--primary);
    top: 12px;
}

.dark-toggle {
    margin: 0;
    width: 30px;
    height: 16px;
    z-index: 20;
    border-radius: 10px;
    background: transparent;
    border: 3px solid #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 1000;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: center;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

body.dark-mode .dark-toggle {
    background: rgb(67,183,255);
    background: -o-linear-gradient(left, rgba(67,183,255,1) 0%, rgba(0,221,246,1) 100%);
    background: -webkit-gradient(linear, left top, right top, from(rgba(67,183,255,1)), to(rgba(0,221,246,1)));
    background: linear-gradient(90deg, rgba(67,183,255,1) 0%, rgba(0,221,246,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#43b7ff",endColorstr="#00ddf6",GradientType=1);
    border: none;
}

.dark-toggle span {
    height: 20px;
    width: 20px;
    left: -8px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

body.dark-mode .dark-toggle span {
    left: 15px;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
}

.top-dark-mode-button .dark-toggle {
    background: rgb(230, 230, 230);
    border-color: rgb(230, 230, 230);
    width: 35px;
}




body.dark-mode {
    background: #000
}



body.dark-mode li {
    color: white;
}
body.dark-mode footer {
    background-color: #737373;
}

body.dark-mode textarea,
body.dark-mode input:not(button, .btn, #submit),
body.dark-mode select {
    background: rgba(70, 69, 69, 1) !important;
    color: #fff;
}

body.dark-mode p, body.dark-mode form, body.dark-mode a, body.dark-mode details {
    color: #fff
}

body.dark-mode h1,  body.dark-mode h2, body.dark-mode h3, body.dark-mode h4,
body.dark-mode h5, body.dark-mode h6 {
    color: rgba(255, 213, 208, 1);
    -webkit-text-stroke-width: 0.05px;
    -webkit-text-stroke-color: #FFF;
}





body.dark-mode div#navbar ul {
    background: linear-gradient(to bottom,
        rgba(144, 54, 102, 0.95),
        rgba(144, 54, 102, 0.75)
    );
    box-shadow: 0 2px 8px rgba(0,0,0,0.25); 
}

body.dark-mode div#navbar ul li,
body.dark-mode footer a {
    
    background: linear-gradient(to bottom, rgba(157, 31, 99, 0.9), rgba(225, 48, 143, 0.7) );
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
body.dark-mode div#navbar ul li.base-emphasized {
    background: linear-gradient(to bottom, rgba(142, 0, 53, 0.9), rgba(242, 0, 79, 0.7) );
}


body.dark-mode div#navbar ul li:hover,
body.dark-mode footer a:hover {
    background: linear-gradient(to bottom,
        rgba(150, 113, 199, 0.95),
        rgba(150, 113, 199, 0.85)
    );
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.35);
}

body.dark-mode div#navbar ul li:active {
    background: linear-gradient(to bottom,
        rgba(199, 113, 182, 0.95),
        rgba(199, 113, 182, 0.85)
    );
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}


body.dark-mode div#navbar ul li.auth {
    
    background: linear-gradient(to bottom, rgba(188, 0, 188, 0.6), rgba(255, 187, 255, 0.51) );
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

body.dark-mode div#navbar ul li.auth:hover {
    background: linear-gradient(to bottom,
        rgba(255, 153, 51, 0.6),
        rgba(255, 153, 51, 0.4)
    );
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.35);
}

body.dark-mode div#navbar ul li.auth:active {
    background: linear-gradient(to bottom,
        rgba(255, 230, 255, 0.48),
        rgba(255, 230, 255, 0.28)
    );
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

body.dark-mode div#navbar ul li.misc {
 
 background: linear-gradient(to bottom, rgba(137, 133, 79, 0.79), rgba(213, 170, 0, 0.7) );
}
body.dark-mode div#navbar ul li.misc:hover {
   
   
   
   background: linear-gradient(to bottom, rgba(113, 135, 38, 0.95), rgba(200, 175, 73, 0.85) );
}
body.dark-mode div#navbar ul li.misc:active {
    background: linear-gradient(to bottom, rgba(199, 182, 113, 0.95), rgba(199, 141, 113, 0.85) );
}


body.dark-mode div#navbar ul li.report {
    
    background: linear-gradient(to bottom, rgba(118, 100, 183, 0.9), rgba(175, 102, 190, 0.7) );
}
body.dark-mode div#navbar ul li.report:hover {
    
    
    
    
    background: linear-gradient(to bottom, rgba(99, 130, 189, 0.9), rgba(158, 142, 238, 0.7) );
}
body.dark-mode div#navbar ul li.report:active {
    
    background: linear-gradient(to bottom, rgba(133, 115, 215, 0.95), rgba(207, 118, 189, 0.85) );
}


body.dark-mode details.forminstruction {
  background-color: rgba(164, 90, 186, 0.7);
}

body.dark-mode img {
    box-shadow: rgba(249, 237, 236, 1) 0px 7px 17px;
}

body.dark-mode div.indexinstruction summary {
    background-color: rgba(156, 30, 85, 0.72);
    color: rgba(252, 168, 159, 1);  
    -webkit-text-stroke-width: 0.15px;
    -webkit-text-stroke-color: #fdc3bc;
}

body.dark-mode table.modtrack-display td {
    border: 1px solid #dededf;
    background-color: #000000;
    color: #ffffff;
}

body.dark-mode table.modtrack-display th {
    border: 1px solid #dededf;
    background-color: #787878;
    color: #eceff1;
}


    body.dark-mode ul.flashmessage li {
        background-color: rgba(179, 157, 219, 0.49);
        border-left-color: #b39ddb;
        color: rgba(193, 78, 187, 0.9);
    }

    body.dark-mode ul.flashmessage li::before {
        color: #b39ddb;
    }

    body.dark-mode ul.flashmessage li.success {
        background-color: rgba(129, 199, 132, 0.4) !important;
        border-left-color: #81c784;
        color: #7fcc83;
    }

    body.dark-mode ul.flashmessage li.success::before {
        color: #81c784;
    }

    body.dark-mode ul.flashmessage li.error {
        background-color: rgba(229, 115, 115, 0.4) !important;
        border-left-color: #e57373;
        color: #edabab;
    }

    body.dark-mode ul.flashmessage li.error::before {
        color: #e57373;
    }


body.dark-mode #result {
    color: lightgrey;
}

body.dark-mode ul.tabs li {
	background: #e0e0e0;
}

body.dark-mode ul.tabs li a {
	color: #000;
}

body.dark-mode ul.tabs li a:hover {
	background: #ccc;
}

html body.dark-mode ul.tabs li.active, html body.dark-mode ul.tabs li.active a:hover  { 
	background: #f9f5f7;
}


body.dark-mode #filterInput {
    width: 200px;
    background-color: rgba(230, 230, 230, 0.45);
}

body.dark-mode input::placeholder {
    color: rgb(255, 204, 255, 0.7);
}

body.dark-mode select:disabled {
    color: white !important;
}

body.dark-mode input:disabled {
    background-color: darkgrey !important;
}

body.dark-mode .modal {
    background-color: rgba(61, 61, 61, 0.5);
}
body.dark-mode .modal-content {
    background-color: rgb(107, 107, 107);
}





body.dark-mode .btn-danger:hover {
    background: linear-gradient(to bottom,
        #9671c7,
        #8561b5
    );
}

body.dark-mode .btn-danger:active {
    background: linear-gradient(to bottom,
        #c771b6,
        #b564a4
    );
}

body.dark-mode .btn-danger:focus {
    background: linear-gradient(to bottom,
        #8561b5,
        #7452a1
    );
    box-shadow: 0 0 0 3px rgba(150, 113, 199, 0.4);
    outline: none;
}

body.dark-mode .btn-primary {
    background: linear-gradient(to bottom,
        #b39ddb,
        #9f8ac7
    ) !important;;
    border-color: #b39ddb;
    color: #ffffff;
    text-shadow:
        0 0 2px #737373,
        0 0 2px #737373,
        0 0 2px #737373,
        0 0 2px #737373 !important;
}

body.dark-mode .btn-primary:hover {
    background: linear-gradient(to bottom,
        #9575cd,
        #8667b9
    );
    border-color: #9575cd;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.25);
}

body.dark-mode .btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

body.dark-mode .btn-primary:focus {
    background: linear-gradient(to bottom,
        #7e57c2,
        #6a46a9
    );
    box-shadow: 0 0 0 3px rgba(179, 157, 219, 0.4);
    outline: none;
}

body.dark-mode .btn-success {
    
    background: linear-gradient(to bottom,
        rgb(228, 2, 171, 0.85),
        rgb(152, 1, 114, 0.85)
    ) !important;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

body.dark-mode .btn-success:hover {
    background: linear-gradient(to bottom,
        rgba(255, 51, 204, 0.9),
        rgba(230, 0, 172, 0.9)
    ) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.35);
}

body.dark-mode .btn-success:active {
    background: linear-gradient(to bottom,
        rgba(230, 0, 172, 0.95),
        rgba(204, 0, 153, 0.95)
    ) !important;
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}


body.dark-mode .btn-success:focus {
   background: linear-gradient(to bottom,
        rgba(204, 0, 153, 0.95),
        rgba(179, 0, 134, 0.95)
    ) !important;
    box-shadow: 0 0 0 3px rgba(255, 0, 191, 0.4);
    outline: none;
}


body.dark-mode .btn-green {
    background: linear-gradient(to bottom,
        #81c784,
        #66bb6a
    );
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

body.dark-mode .btn-green:hover {
    background: linear-gradient(to bottom,
        #a5d6a7,
        #81c784
    );
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.35);
}

body.dark-mode .btn-green:active {
    background: linear-gradient(to bottom,
        #66bb6a,
        #4caf50
    );
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

body.dark-mode .btn-green:focus {
    background: linear-gradient(to bottom,
        #4caf50,
        #43a047
    );
    box-shadow: 0 0 0 3px rgba(129, 199, 132, 0.4);
    outline: none;
}

body.dark-mode .btn-orange {
    background: linear-gradient(to bottom,
        #ffb74d,
        #ffa726
    );
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

body.dark-mode .btn-orange:hover {
    background: linear-gradient(to bottom,
        #ffcc80,
        #ffb74d
    );
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.35);
}

body.dark-mode .btn-orange:active {
    background: linear-gradient(to bottom,
        #ffa726,
        #fb8c00
    );
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

body.dark-mode .btn-orange:focus {
    background: linear-gradient(to bottom,
        #fb8c00,
        #f57c00
    );
    box-shadow: 0 0 0 3px rgba(255, 183, 77, 0.4);
    outline: none;
}


body.dark-mode .btn-yellow {
    background: linear-gradient(to bottom,
        #fff176,
        #ffee58
    );
    color: #2c2c2c;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

body.dark-mode .btn-yellow:hover {
    background: linear-gradient(to bottom,
        #fff59d,
        #fff176
    );
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.35);
}

body.dark-mode .btn-yellow:active {
    background: linear-gradient(to bottom,
        #ffee58,
        #fdd835
    );
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

body.dark-mode .btn-yellow:focus {
    background: linear-gradient(to bottom,
        #fdd835,
        #fbc02d
    );
    box-shadow: 0 0 0 3px rgba(255, 241, 118, 0.4);
    outline: none;
}

body.dark-mode .btn-cyan {
    background: linear-gradient(to bottom,
        #4dd0e1,
        #26c6da
    );
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

body.dark-mode .btn-cyan:hover {
    background: linear-gradient(to bottom,
        #80deea,
        #4dd0e1
    );
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.35);
}

body.dark-mode .btn-cyan:active {
    background: linear-gradient(to bottom,
        #26c6da,
        #00bcd4
    );
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

body.dark-mode .btn-cyan:focus {
    background: linear-gradient(to bottom,
        #00bcd4,
        #00acc1
    );
    box-shadow: 0 0 0 3px rgba(77, 208, 225, 0.4);
    outline: none;
}



body.dark-mode .btn-deep-purple {
    background: linear-gradient(to bottom,
        #b39ddb,
        #9575cd
    );
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

body.dark-mode .btn-deep-purple:hover {
    background: linear-gradient(to bottom,
        #d1c4e9,
        #b39ddb
    );
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.35);
}

body.dark-mode .btn-deep-purple:active {
    background: linear-gradient(to bottom,
        #9575cd,
        #7e57c2
    );
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

body.dark-mode .btn-deep-purple:focus {
    background: linear-gradient(to bottom,
        #7e57c2,
        #673ab7
    );
    box-shadow: 0 0 0 3px rgba(179, 157, 219, 0.4);
    outline: none;
}

body.dark-mode .btn-lime {
    background: linear-gradient(to bottom,
        #dce775,
        #d4e157
    );
    color: #2c2c2c;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

body.dark-mode .btn-lime:hover {
    background: linear-gradient(to bottom,
        #e6ee9c,
        #dce775
    );
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.35);
}

body.dark-mode .btn-lime:active {
    background: linear-gradient(to bottom,
        #d4e157,
        #c0ca33
    );
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

body.dark-mode .btn-lime:focus {
    background: linear-gradient(to bottom,
        #c0ca33,
        #afb42b
    );
    box-shadow: 0 0 0 3px rgba(220, 231, 117, 0.4);
    outline: none;
}


body.dark-mode .btn-indigo {
    background: linear-gradient(to bottom,
        #7986cb,
        #5c6bc0
    );
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

body.dark-mode .btn-indigo:hover {
    background: linear-gradient(to bottom,
        #9fa8da,
        #7986cb
    );
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.35);
}

body.dark-mode .btn-indigo:active {
    background: linear-gradient(to bottom,
        #5c6bc0,
        #3949ab
    );
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

body.dark-mode .btn-indigo:focus {
    background: linear-gradient(to bottom,
        #3949ab,
        #303f9f
    );
    box-shadow: 0 0 0 3px rgba(121, 134, 203, 0.4);
    outline: none;
}


body.dark-mode .btn-amber {
    background: linear-gradient(to bottom,
        #ffd54f,
        #ffca28
    );
    color: #2c2c2c;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

body.dark-mode .btn-amber:hover {
    background: linear-gradient(to bottom,
        #ffe082,
        #ffd54f
    );
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.35);
}

body.dark-mode .btn-amber:active {
    background: linear-gradient(to bottom,
        #ffca28,
        #ffb300
    );
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

body.dark-mode .btn-amber:focus {
    background: linear-gradient(to bottom,
        #ffb300,
        #ffa000
    );
    box-shadow: 0 0 0 3px rgba(255, 213, 79, 0.4);
    outline: none;
}


body.dark-mode .btn-light-blue {
    background: linear-gradient(to bottom,
        #4fc3f7,
        #29b6f6
    );
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

body.dark-mode .btn-light-blue:hover {
    background: linear-gradient(to bottom,
        #81d4fa,
        #4fc3f7
    );
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.35);
}

body.dark-mode .btn-light-blue:active {
    background: linear-gradient(to bottom,
        #29b6f6,
        #03a9f4
    );
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

body.dark-mode .btn-light-blue:focus {
    background: linear-gradient(to bottom,
        #03a9f4,
        #039be5
    );
    box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.4);
    outline: none;
}


body.dark-mode .btn-deep-orange {
    background: linear-gradient(to bottom,
        #ff8a65,
        #ff7043
    );
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

body.dark-mode .btn-deep-orange:hover {
    background: linear-gradient(to bottom,
        #ffab91,
        #ff8a65
    );
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.35);
}

body.dark-mode .btn-deep-orange:active {
    background: linear-gradient(to bottom,
        #ff7043,
        #ff5722
    );
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

body.dark-mode .btn-deep-orange:focus {
    background: linear-gradient(to bottom,
        #ff5722,
        #f4511e
    );
    box-shadow: 0 0 0 3px rgba(255, 138, 101, 0.4);
    outline: none;
}

body.dark-mode .info-box {
    background-color: #595959;
}



body.dark-mode .info-label {
    color: lightgrey;
}


    body.dark-mode .profile-section {
        background-color: #737373;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    body.dark-mode .profile-section h2 {
        color: #e699ff !important;
        text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
    }


    body.dark-mode .profile-section h2 .hint {
        color: #bfbfbf;
    }


    body.dark-mode .user-profile-section {
        background-color: #737373 !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    body.dark-mode .user-profile-section h2 {
        color: #e699ff !important;
        text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
    }


    body.dark-mode .user-profile-section h2 .hint {
        color: #bfbfbf;
    }


  

    body.dark-mode .edit-form {
        background-color: #737373;
    }


body.dark-mode .info-value {
    background-color: black;
    color: white;
}

body.dark-mode .loadingContent {
    background-color: darkgrey;
    color: #cc0099;
}


body.dark-mode .form-control, body.dark-mode .form-control-file, body.dark-mode .form-control-file-inline {
    background-color: #555;
    color: #e0e0e0;
    border-color: #666;
}

body.dark-mode .file-name {
    color: #ffe6f9;
    text-shadow: 0.2px 0.2px 0 #990099, -0.2px 0.2px 0 #990099, 0.2px -0.2px 0 #990099, -0.2px -0.2px 0 #990099;
}


    body.dark-mode summary {
        color: #ffe6f9;
        text-shadow: 0.2px 0.2px 0 #ff1ac6, -0.2px 0.2px 0 #ff1ac6, 0.2px -0.2px 0 #ff1ac6, -0.2px -0.2px 0 #ff1ac6;
    }

    body.dark-mode .summary-hint {
        color: lightgrey;
    }


    body.dark-mode .no-link {
        color: lightgrey;
    }


    body.dark-mode .index-info-box {
        background-color: #636888 !important;
        border-left-color: #7986cb;
    }

    body.dark-mode .index-info-box-blue {
        background-color: #636888 !important;
        border-left-color: #7986cb;
    }

body.dark-mode .has-tooltip {
    border-bottom-color: #b39ddb;
}

  body.dark-mode #contentTable .new-content {
        background-color: rgba(255, 204, 255, 0.15);
    }

  body.dark-mode #contentTable .modified-row {
        background-color: rgba(255, 255, 208, 0.2);
    }

    body.dark-mode .form-help-text {
        color: lightgray
    }



    body.dark-mode .page-link {
        color: #b39ddb;
        border-color: #b39ddb;
    }

    body.dark-mode .page-item.active .page-link,
    body.dark-mode .page-link:hover {
        background-color: #b39ddb;
        color: #333;
    }

    body.dark-mode .page-item.disabled .page-link {
        color: #777;
        border-color: #555;
    }


   body.dark-mode table.modtrack-content-table {
        border: 2.5px solid #a0799d;
        background-color: rgba(0, 0, 0, 0.2);
    }

  body.dark-mode table.modtrack-content-table th,
  body.dark-mode table.modtrack-content-table td {
        color: #000000;
        border-bottom: 1px solid #8c8c8c;
    }

    body.dark-mode table.modtrack-content-table th {
        
        background: linear-gradient(180deg, #7b1fa2, #4a1259);
        text-shadow: 1px 1px 0 #8e24aa, -1px 1px 0 #8e24aa, 1px -1px 0 #8e24aa, -1px -1px 0 #8e24aa;
        color: white;
    }

  

    body.dark-mode table.modtrack-content-table tr:hover {
        background-color: rgba(142, 36, 170, 0.2);
    }

    body.dark-mode table.modtrack-content-table td {
        border: 1px solid #8c8c8c;
        color: white;
    }


    body.dark-mode .sortable::after {
        color: #999; 
    }

    body.dark-mode .sortable::before {
        color: #999; 
    }

    body.dark-mode .sortable.ascending::after,
    body.dark-mode .sortable.descending::before {
        color: #fff; 
    }

    body.dark-mode .sortable.ascending,
    body.dark-mode .sortable.descending {
        background-color: rgba(149, 106, 146, 1); 
        
        box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
    }

    
    body.dark-mode .sortable:hover {
        background-color: rgba(134, 95, 132, 0.99); 
    }

    
    body.dark-mode .sortable.ascending:hover,
    body.dark-mode .sortable.descending:hover {
        background-color: rgba(134, 95, 132, 0.92); 
    }

body.dark-mode table.modtrack-content-table {
    border: 2.5px solid #a0799d;
    background-color: rgba(0, 0, 0, 0.2);
}

body.dark-mode table.modtrack-content-table th,
body.dark-mode table.modtrack-content-table td {
    color: #000000;
    border-bottom: 1px solid #8c8c8c;
}

body.dark-mode table.modtrack-content-table th {
    --dark-gradient-start: #7b1fa2;
    --dark-gradient-end: #4a1259;
    background: linear-gradient(180deg, var(--dark-gradient-start), var(--dark-gradient-end));
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    color: white;
}

body.dark-mode table.modtrack-content-table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode table.modtrack-content-table tr:hover {
    background-color: rgba(142, 36, 170, 0.2);
}

body.dark-mode table.modtrack-content-table td {
    border: 1px solid #8c8c8c;
    color: white;
}


body.dark-mode .sortable::after,
body.dark-mode .sortable::before {
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .sortable.ascending::after,
body.dark-mode .sortable.descending::before {
    color: #fff;
}

body.dark-mode .sortable:hover {
    --dark-gradient-start: #9c27b0;
    --dark-gradient-end: #6a1b9a;
}

body.dark-mode .sortable.ascending,
body.dark-mode .sortable.descending {
    --dark-gradient-start: #9c27b0;
    --dark-gradient-end: #6a1b9a;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

body.dark-mode .sortable.ascending:hover,
body.dark-mode .sortable.descending:hover {
    --dark-gradient-start: #ab47bc;
    --dark-gradient-end: #7b1fa2;
}



    
    body.dark-mode .activity-details {
        color: lightgrey;
    }

    body.dark-mode .activity-item {
        border-bottom-color: #555;
        color: white;
    }

    body.dark-mode .username {
        color: #b39ddb;
    }

    body.dark-mode .activity-timestamp,
     body.dark-mode .activity-timestamp-large {
        color: #aaa;
    }

    body.dark-mode .activity-feed {
        background-color: #333;
        border-color: #555;
    }



    body.dark-mode .highlight-link {
        color: #e7c3f7;
    }

    

body.dark-mode .boxes summary {
    background: linear-gradient(to bottom,
        #a0799d,
        #8f6b8c
    );
    text-shadow: 1px 1px 0 #8e24aa,
                -1px 1px 0 #8e24aa,
                1px -1px 0 #8e24aa,
                -1px -1px 0 #8e24aa;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

body.dark-mode .boxes summary:hover {
    background: linear-gradient(to bottom,
        #b088ad,
        #a0799d
    );
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

body.dark-mode .boxes summary:active {
    background: linear-gradient(to bottom,
        #906c8d,
        #7f5e7c
    );
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

    body.dark-mode .boxes details,
    body.dark-mode .boxes summary {
        border-color: #555;
        
    }

    body.dark-mode .boxes details[open] {
        background-color: rgba(0, 0, 0, 0.72);
    }


    body.dark-mode .creator-notes {
        color: lightgray;
    }


    body.dark-mode .styled-list li::before,
     body.dark-mode .styled-ordered-list li::before {
        color: #e1bee7;
        background-color: #4a148c;
    }
    body.dark-mode .styled-list li,
     body.dark-mode .styled-ordered-list li {
        color: white;
    }

    body.dark-mode .styled-list li:nth-child(odd),
    body.dark-mode .styled-ordered-list li:nth-child(odd) {
        background-color: rgba(225, 190, 231, 0.3);
    }

    body.dark-mode .styled-list li:hover,
    body.dark-mode .styled-ordered-list li:hover {
        background-color: rgba(225, 190, 231, 0.4);
    }

    body.dark-mode .styled-list li ul {
        opacity: 0.75;
    }

    body.dark-mode .important-note {
        border-left-color: #b39ddb;
    }

    body.dark-mode .important-note p {
        background-color: #4a148c;
        color: #e1bee7;
    }


    body.dark-mode .has-tooltip {
        border-bottom: 1px dotted #dfaaee;
    }

    body.dark-mode [data-tooltip]:not(button, a, div):not(.tooltip-wrapper) {
        border-bottom: 1px dotted #dfaaee;
    }

    body.dark-mode .content-box,
    body.dark-mode .fieldset {
      border: 2px solid #9d28bd;
      background-color: #571669;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        color: white;

    }

    body.dark-mode .content-box-title,
    body.dark-mode .legend {
      background-color: #8e24aa;
      color: white;
    }
  body.dark-mode .section-nested-white {
        background-color: rgba(0, 0, 0, 0.35);
        color: white;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        
        
    }

    body.dark-mode input[type="text"]:disabled,
     body.dark-mode textarea:disabled {
        background: repeating-linear-gradient(45deg, #6e6e6e, #6e6e6e 10px, #3e3e3e 10px, #3e3e3e 20px) !important;
        color: white;
        background-color: inherit;
    }


    body.dark-mode .whited-bg {
        
        rgba(119, 119, 119, 0.82);
        color: white;
    }

    body.dark-mode [data-tooltip] {
        border-bottom-color: #b39ddb;
    }
    body.dark-mode [data-tooltip]::before {
        background-color: #636888; 
        
    }
    body.dark-mode [data-tooltip]::after {
        border-top-color: #b39ddb;
    }

    body.dark-mode .font-choice-button:hover .font-toggle {
        background-color: lightgrey;
    }

    body.dark-mode [data-tooltip].below::after {
        border-top-color: transparent;
        border-bottom-color: #b39ddb;
    }

body.dark-mode .special-nav-link {
    -webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: #fb83ad;
    text-shadow: 0 0 0.187rem #FA8072, 0 0 0.25rem #fb83ad;

}

body.dark-mode .glow-pink-emphasis {
    -webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: rgba(251, 131, 173, 0.45);
    text-shadow: 0 0 0.187rem rgba(250, 128, 114, 0.12), 0 0 0.25rem rgba(251, 131, 173, 0.17);
    
}

body.dark-mode .glow-pink-emphasis-strong {
    -webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: rgba(251, 131, 173, 0.5);
    text-shadow: 0 0 0.187rem rgba(250, 128, 114, 0.3), 0 0 0.25rem rgba(251, 131, 173, 0.3);
    
}
   body.dark-mode .basic-hint {
        font-size: 0.95em;
        font-style: italic;
        color: #d9d9d9;
   }

body.dark-mode .bordered-text-small {
   
  text-shadow:
    0 0 0.01875rem #cccccc,
    0 0 0.01875rem #cccccc,
    0 0 0.01875rem #cccccc,
    0 0 0.01875rem #cccccc;
}



body.dark-mode .partial-border .label {
      background-color: #666666;
      color: #b39ddb;
}


    body.dark-mode .profile-section .ms-choice,
    body.dark-mode .tool-container .ms-choice {
        background-color: inherit; 
        color: white;
    }

    body.dark-mode .profile-section .ms-drop,
    body.dark-mode .tool-container .ms-drop {
        background-color: #3c3030;
        color: white;
    }

    body.dark-mode .profile-section .ms-drop ul>li.hide-radio:focus,
    body.dark-mode .tool-container .ms-drop ul>li.hide-radio:focus,
    body.dark-mode .profile-section .ms-drop ul>li.hide-radio:hover,
    body.dark-mode .tool-container .ms-drop ul>li.hide-radio:hover {
        background-color: #737373;
    }
    body.dark-mode .profile-section .ms-search input {
        background-color: rgba(70, 69, 69, 1) !important;
    }



     body.dark-mode .ms-parent .ms-choice.disabled {
        background: repeating-linear-gradient(45deg, #6e6e6e, #6e6e6e 10px, #3e3e3e 10px, #3e3e3e 20px) !important;
        color: white;
        background-color: inherit;
    }



body.dark-mode div#navbar ul li.dropdown .dropdown-content {
    background: linear-gradient(to bottom, rgb(192 39 121 / 64%), rgb(192 39 121 / 48%));
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
body.dark-mode div#navbar ul li.dropdown .dropdown-content li {
    
    background: linear-gradient(to bottom, rgb(204 96 189 / 95%), rgb(192 39 121 / 67%));
}
body.dark-mode div#navbar ul li.dropdown .dropdown-content li:hover {
    background: linear-gradient(to bottom,
        rgba(150, 113, 199, 0.9),
        rgba(150, 113, 199, 0.7)
    );
}



body.dark-mode .cursor-spinner::after {
    border-color: #333;
    border-top-color: #b39ddb;
    background: rgba(40, 40, 40, 0.9);
}
body.dark-mode .cursor-spinner.success::after {
    background: #43a047;
}



    body.dark-mode .video-container video,
     body.dark-mode .video-container img {
        border: 3px solid rgba(106, 27, 154, 1);
        box-shadow: 0 0 15px 5px rgba(106, 27, 154, 1);
        border-radius: 8px;
    }




body.dark-mode .loadingContent {
   background-color: #333;
   color: #b39ddb;
}
body.dark-mode .overlay-spinner {
   border-color: #333;
   border-top-color: #b39ddb;
}
body.dark-mode .loadingContent.success .overlay-spinner {
   background: #43a047;
}
body.dark-mode .loading-content.success .overlay-spinner::after {
    color: #43a047;
}


    


   body.dark-mode .forbidden-div {
        background: repeating-linear-gradient(45deg, #6e6e6e, #6e6e6e 10px, #3e3e3e 10px, #3e3e3e 20px) !important;
        color: white;
        background-color: inherit !important;
    }
    body.dark-mode .modtrack-content-table tr:has(.hidden-content) {
        
        background: repeating-linear-gradient(45deg, #6e6e6e85, #6e6e6e8a 10px, #3e3e3e85 10px, #3e3e3e91 20px);
    }

body.dark-mode .mild_contrast_bg {
  background-color: #545454;
}

body.dark-mode .whitesmoke-bg {
   background-color: #5e5e5e;
}