:root{
    --bg-dork-mode : #0e2338 !important;
    --bg-header-dork-mode : #0e2338 !important;
    --bg-other-element-dork-mode : #1b344d !important;

    --text-color-dork-mode : #FFF;
}

body.dark-mode{
    background-color: var(--bg-dork-mode) !important;
    color: var(--text-color-dork-mode) !important;
}

body.dark-mode .custom-header{
    background-color: var(--bg-header-dork-mode) !important;
    color: var(--text-color-dork-mode) !important;
    /*box-shadow: 10px 10px 100px 5px rgb(20, 41, 58);*/
    box-shadow: rgba(27, 94, 140, 0.3) 20px 20px 100px 30px, rgb(11, 29, 45) 10px 10px 100px 60px inset;
}

body.dark-mode .card{
    background-color: var(--bg-other-element-dork-mode) !important;
    color: var(--text-color-dork-mode) !important;
    box-shadow: rgba(27, 52, 77, 0.35) 0px 3px 15px 0px;

}

body.dark-mode .custom-footer {
    color: #FFFFFF;
    position: relative;
    bottom: 0px !important;
}

body.dark-mode .title-box{
    color: #FFFFFF;
    background-color: var(--bg-header-dork-mode);
    box-shadow: rgba(27, 94, 140, 0.3) 20px 20px 100px 1px, rgb(2, 21, 35) 100px 100px 100px 500px inset;
}
/*====================< Start >========================*/
/* style search box */
body.dark-mode input[type=text]{
    background-color: var(--bg-header-dork-mode) !important;
    color: lightgrey !important;
    border-color: var(--bg-other-element-dork-mode);
}

body.dark-mode span svg{
    fill: #9b9898;
}
/*====================< End >========================*/

body.dark-mode .content-product p , .content-product label{
    color: var(--text-color-dork-mode) !important;
}

body.dark-mode .auth-box{
    background-color: var(--bg-other-element-dork-mode);
    color: #FFFFFF !important;
    box-shadow: rgba(27, 94, 140, 0.3) 20px 20px 100px 30px, rgba(2, 29, 51, 0.8) 10px 10px 100px 60px inset !important;
}

body.dark-mode .auth-box small {
    color: #FFFFFF !important;
}

body.dark-mode .auth-box .form-control,.btn-search{
    background-color: var(--bg-other-element-dork-mode) !important;
    border-color: var(--bg-header-dork-mode) !important;
    box-shadow: rgba(3, 20, 59, 0.28) 0px 3px 15px 0px;
    color: #FFF !important;
}

body.dark-mode
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px var(--bg-other-element-dork-mode) inset !important;
    color: #FFFFFF !important;
}

body.dark-mode .header-btn svg{
    fill: #E8EEF58E !important;
    background-color: transparent;
}


body.dark-mode .form-control{
    color: white !important;
}

body.dark-mode .dropdown-content {
    background-color: var(--bg-header-dork-mode) !important;
    color: #D6D8D9 !important;
}
body.dark-mode .dropdown-content a {
    color: #D6D8D9 !important;
}
body.dark-mode .dropdown-content a:hover {background-color: var(--bg-other-element-dork-mode) !important;}
body.dark-mode .dropdown-content a svg {
    fill : #D6D8D9 !important;
}
body.dark-mode .dropdown-content a svg path:last-child{
    fill : #D6D8D9 !important;
}

body.dark-mode .pagination .page-item .page-link{
    background-color: var(--bg-other-element-dork-mode) !important;
    border-color: var(--bg-header-dork-mode) !important;
}

body.dark-mode .pagination .page-item.active .page-link{
    background-color: #0a568c !important;
}

.dark-mode select{
    background-color: var(--bg-header-dork-mode) !important;
    color: lightgrey !important;
    border-color: var(--bg-other-element-dork-mode);
}

.dark-mode #product-list .card{
    border-radius: 15px !important;
}

.dark-mode #product-list .card img{
    border-radius: 15px 15px 0 0 !important;
}

.dark-mode div.modal-content{
    background-color: var(--bg-header-dork-mode) !important;
    color: lightgrey !important;
}

.dark-mode button.btn-close{
    color: lightgrey !important;
}