/* theme color settings */

:root {
    --red: #ef233c;
    --darkred: #c00424;
    --darkred-navbar: rgba(207, 0, 17, 0.7);
    --darkred-opacity: #c0042380;
    --darkred-chat: rgb(184, 73, 91);
    --darkred-jawatan: #30040b;
    --darkred-jawatan-second: #1b0206;
    --darkred-jawatan-third: #0f0104;
    --platinum: #e5e5e5;
    --platinum-dark: #bbbbbb;
    --grey: #999999;
    --transparent: #ffffff00;
    --black: #2b2d42;
    --real-black: rgb(0, 0, 0);
    --real-black-chat: rgb(20, 20, 20);
    --real-black-first: rgb(48, 48, 48);
    --real-black-second: rgb(0, 0, 0);
    --real-black-third: rgb(36, 36, 36);
    --real-black-navbar: rgba(0, 0, 0, 0.7);
    --real-black-icon: #212529;
    --black-opacity: rgb(43, 45, 66, 0.6);
    --black-dark: rgb(27, 27, 36);
    --black-hover: #434666;
    --white: #fff;
    --thumb: #edf2f4;
    --darker-blue: rgb(21, 21, 80);
    --darker-blue-navbar: rgba(21, 21, 80, 0.7);
    --darker-blue-chat: rgb(110, 110, 190);
    --darker-blue-jawatan: rgb(24, 24, 97);
    --darker-blue-jawatan-second: rgb(10, 10, 43);
    --darker-blue-jawatan-third: rgb(5, 5, 22);
    --dark-blue: #213875;
    --dark-blue-navbar: rgba(33, 55, 117, 0.7);
    --dark-blue-chat: rgb(89, 120, 189);
    --dark-blue-jawatan: rgb(19, 42, 90);
    --dark-blue-jawatan-second: rgb(7, 15, 32);
    --dark-blue-jawatan-third: rgb(4, 8, 17);
    /* --dark-blue-opacity: rgb(21, 21, 80, 0.6); */
    --dark-blue-opacity: #1a2c5e;
    --dark-blue-lighter: #3357bb;
    --dark-blue-light: rgb(5, 5, 39);
    --dark-blue-light-opacity: rgba(5, 5, 39, 0.836);
    --light-blue: #00bbff;
    --green: rgb(141, 198, 64);
    --yellow-gold: rgb(243, 225, 63);
    --dark-blue-very-light: rgb(34, 34, 129);
    --dark-blue-very-light-hover: rgb(77, 77, 197);
    --new-blue: #dbe3e9;
}

:root, 
[data-selected-theme="blue"] {
    --color-background: var(--white);
    --color-text: var(--thumb);
    --color-accent: #00D4E7;
    --color-title: var(--primary-color);
    --primary-color: var(--real-black);
    --panel-jawatan: var(--dark-blue-jawatan);
    --panel-jawatan-second: var(--dark-blue-jawatan-second);
    --panel-jawatan-third: var(--dark-blue-jawatan-third);
    --panel-bagan-datuk: var(--dark-blue-jawatan);
    --gradient-bg : radial-gradient(circle, var(--panel-jawatan) 0%, var(--panel-jawatan-second) 50%, var(--panel-jawatan-third) 100%);
    --chat-bg : var(--dark-blue-chat);
}

[data-selected-theme="dark-blue"] {
    --color-background: var(--thumb);
    --color-text: var(--thumb);
    --color-accent: #00CC66;
    --color-title: var(--primary-color);
    --primary-color: var(--darker-blue);
    --panel-jawatan: var(--darker-blue-jawatan);
    --panel-jawatan-second: var(--darker-blue-jawatan-second);
    --panel-jawatan-third: var(--darker-blue-jawatan-third);
    --panel-bagan-datuk: var(--darker-blue-jawatan-second);
    --gradient-bg : radial-gradient(circle, var(--panel-jawatan) 0%, var(--panel-jawatan-second) 50%, var(--panel-jawatan-third) 100%);
    --chat-bg : var(--darker-blue-chat);
}

[data-selected-theme="dark"] {
    --color-background: var(--real-black);
    --color-text: var(--thumb);
    --color-accent: #00CC66;
    --color-title: var(--real-black-icon);
    --primary-color: var(--real-black);
    --panel-jawatan: var(--real-black-first);
    --panel-jawatan-second: var(--real-black-second);
    --panel-jawatan-third: var(--real-black-third);
    --panel-bagan-datuk: var(--real-black-third);
    --gradient-bg : radial-gradient(circle, var(--panel-jawatan) 0%, var(--panel-jawatan-second) 50%, var(--panel-jawatan-third) 100%);
    --chat-bg : var(--real-black-chat);
}

[data-selected-theme="red"] {
    --color-background: var(--thumb);
    --color-text: var(--thumb);
    --color-accent: #00CC66;
    --color-title: var(--primary-color);
    --primary-color: var(--darkred-jawatan);
    --panel-jawatan: var(--darkred-jawatan);
    --panel-jawatan-second: var(--darkred-jawatan-second);
    --panel-jawatan-third: var(--darkred-jawatan-third);
    --panel-bagan-datuk: var(--darkred-jawatan-second);
    --gradient-bg : radial-gradient(circle, var(--panel-jawatan) 0%, var(--panel-jawatan-second) 50%, var(--panel-jawatan-third) 100%);
    --chat-bg : var(--darkred-chat);
}


body {
    background-color: var(--color-background);
}

header {
    background-color: var(--primary-color);
}

h1 {
    color: var(--color-text);
}

.panel-title, .panel-title-right, .news-box, .news-box-list-title > h1 {
    color: var(--color-title);
}

.accordion-button {
    color: var(--color-title);
}

.panel-jawatan {
    transition: background 1s ease-in-out;
    /* background: radial-gradient(circle, var(--panel-jawatan) 0%, var(--panel-jawatan-second) 50%, var(--panel-jawatan-third) 100%); */
    background: var(--gradient-bg);
}

.panel-bagan-datuk {
    transition: background-color 0.5s ease-in-out;
    background-color: var(--panel-bagan-datuk);
}

.chat-box>.startup-message {
    transition: background 0.5s ease-in-out;
    background: var(--chat-bg);
}

.chat-box>.header {
    transition: background-color 0.5s ease-in-out;
    background-color: var(--dark-blue);
}

.chat-box>.startup-message>.button-start-chat {
    transition: background-color 0.5s ease-in-out;
    background-color: var(--dark-blue);
}

.chat-box>.chat-room>.message>.bubble-light {
    transition: background-color 0.5s ease-in-out;
    background-color: var(--dark-blue);
}


.chat-box>.save-area>.button-save {
    transition: background-color 0.5s ease-in-out;
    background-color: var(--panel-jawatan-second);
}

.chat-box>.save-area>.button-save:hover {
    transition: background-color 0.5s ease-in-out;
    background-color: var(--panel-jawatan);
}

.chat-box>.chat-room {
    transition: background-color 0.5s ease-in-out;
    background: var(--chat-bg);
}

.chat-box>.type-area {
    transition: background-color 0.5s ease-in-out;
    background-color: var(--dark-blue);
}

.chat-box>.type-area>.input-wrapper>input {
    transition: background-color 0.5s ease-in-out;
    background-color: var(--dark-blue);
}

.chat-box>.type-area>.button-send {
    transition: background-color 0.5s ease-in-out;
    background-color: var(--dark-blue);
    border-left: 2px solid var(--panel-jawatan-third);
}

.chat-box>.type-area>.button-send:hover {
    transition: background-color 0.5s ease-in-out;
    background-color: var(--panel-jawatan-second);
}

.chat-box>.chat-room>.message>.bubble-dark {
    background-color: var(--panel-jawatan-third);
}

/* 
.panel-social {
    background: linear-gradient(180deg, var(--white) 0%, #000000 80%, #000000 100%);
}

.panel-galeri {
    background: linear-gradient(180deg, var(--real-black) 0%, #000000 80%, #000000 100%);
}

.panel-data {
    background: linear-gradient(180deg, var(--real-black) 0%, #000000 20%, var(--white) 100%);
} */

::selection {
    background-color: var(--color-accent);
}

@media (max-width: 320.98px) { 
    .theme-picker {
        position: fixed;
        bottom: 90px;
        left: 0px;
        width: 40px;
        background-color: #f4f4f4;
        z-index: 10;
        border-radius: 0px 10px 10px 0px;
    }
    
    .theme-switcher {
        width: 100%;
        padding: 10px;
    }
}

@media (min-width: 321px) and (max-width: 424.98px) { 
    .theme-picker {
        position: fixed;
        bottom: 90px;
        left: 0px;
        width: 40px;
        background-color: #f4f4f4;
        z-index: 10;
        border-radius: 0px 10px 10px 0px;
    }
    
    .theme-switcher {
        width: 100%;
        padding: 10px;
    }
}

@media (min-width: 425px) and (max-width: 575.98px) { 
    .theme-picker {
        position: fixed;
        bottom: 90px;
        left: 0px;
        width: 40px;
        background-color: #f4f4f4;
        z-index: 10;
        border-radius: 0px 10px 10px 0px;
    }
    
    .theme-switcher {
        width: 100%;
        padding: 10px;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) { 
    .theme-picker {
        position: fixed;
        bottom: 300px;
        left: 0px;
        width: 50px;
        background-color: #f4f4f4;
        z-index: 10;
        border-radius: 0px 10px 10px 0px;
    }

    .theme-switcher {
        width: 100%;
        padding: 15px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px){
    .theme-picker {
        position: fixed;
        bottom: 300px;
        left: 0px;
        width: 50px;
        background-color: #f4f4f4;
        z-index: 10;
        border-radius: 0px 10px 10px 0px;
    }
    
    .theme-switcher {
        width: 100%;
        padding: 15px;
    }
}

@media (min-width: 992px) and (max-width: 1199.99px) {
    .theme-picker {
        position: fixed;
        bottom: 300px;
        left: 0px;
        width: 50px;
        background-color: #f4f4f4;
        z-index: 10;
        border-radius: 0px 10px 10px 0px;
    }
    
    .theme-switcher {
        width: 100%;
        padding: 15px;
    }
}

@media (min-width: 1200px) { 
    .theme-picker {
        position: fixed;
        bottom: 310px;
        left: 0px;
        width: 50px;
        background-color: #f4f4f4;
        z-index: 10;
        border-radius: 0px 10px 10px 0px;
    }
    
    .theme-switcher {
        width: 100%;
        padding: 15px;
    }
}

.theme-picker h2 {
    margin-top: 0;
}

.theme-switcher > i {
    color: var(--dark-blue);
    padding-bottom: 20px;
}

.theme-switcher > button {
    border-radius: 50%;
    height: 10px;
    width: 10px;
}

.theme-btn-blue {
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    width: 100%;
    border: none;
    background-color: var(--dark-blue);
    cursor: pointer;
    transition: background-color 0.3s;
}

.theme-btn-dark-blue {
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    width: 100%;
    border: none;
    background-color: var(--darker-blue);
    cursor: pointer;
    transition: background-color 0.3s;
}

.theme-btn-dark {
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    width: 100%;
    border: none;
    background-color: var(--real-black);
    cursor: pointer;
    transition: background-color 0.3s;
}

.theme-btn-red {
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    width: 100%;
    border: none;
    background-color: var(--darkred-navbar);
    cursor: pointer;
    transition: background-color 0.3s;
}

.theme-btn:hover {
    background-color: #ccc;
}