@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {

    --APPLICATION__bento-box-shadow-size  : 5px                                                                 ;
    --APPLICATION__bento-box-shadow       : 0px                                        /* horizontal offset */
                                            0px                                        /* vertical offset   */
                                            var(--APPLICATION__bento-box-shadow-size)  /* blur radius       */
                                            var(--APPLICATION__bento-box-shadow-color) /* shadow color      */  ;
    --APPLICATION__bento-box-border-radius: 10px                                                                ;

    --APPLICATION__setting-shadow         : 0 0 20px rgba(255, 255, 255, 0.266)                              ;

    --APPLICATION__text-font-family       : 'Poppins', sans-serif                                               ;

    --APPLICATION__primary-color          : #7d00d5                                                           ;
    --APPLICATION__secondary-color        : #bb00ff                                                           ;
    --APPLICATION__tertiary-color         : #ff00f2                                                           ;
    --APPLICATION__default-gradient-color : linear-gradient(45deg                             , 
                                                            var(--APPLICATION__primary-color) , 
                                                            var(--APPLICATION__secondary-color))                ;
    --APPLICATION__pronounced-gradient-color : linear-gradient(45deg                          , 
                                                            var(--APPLICATION__primary-color) , 
                                                            var(--APPLICATION__tertiary-color)) ;
}

[data-application-theme="dark"] {
    --APPLICATION__body-background-color  : #212529                                                           ;
    --APPLICATION__bento-box-color        : #16181a                                                           ;
    --APPLICATION__bento-box-shadow-color : rgba(0,0,0,0)                                                     ;

    --APPLICATION__text-color             : white                                                             ;
    --APPLICATION__text-color-inv         : black                                                             ;

    --APPLICATION__settings-shadow        : 0 0 20px rgba(255, 255, 255, 0.266)                               ;
}

[data-application-theme="light"] {
    --APPLICATION__body-background-color  : white                                                             ;
    --APPLICATION__bento-box-color        : white                                                             ;
    --APPLICATION__bento-box-shadow-color : rgba(0, 0, 0, 0.373)                                              ;

    --APPLICATION__text-color             : black                                                             ;
    --APPLICATION__text-color-inv         : white                                                             ;

    --APPLICATION__settings-shadow        : 0 0 5px rgba(0, 0, 0, 0.373)                                      ;
}



[data-application-theme="light"]  .application-theme-icon-dark  { 
    display: none !important; 
}
[data-application-theme="dark"]   .application-theme-icon-light { 
    display: none !important; 
}




body {
    background-color: var(--APPLICATION__body-background-color)             ;
    color           : var(--APPLICATION__text-color)              !important;
    font-family     : var(--APPLICATION__text-font-family)        !important;
}



.card::-webkit-scrollbar      {
    display: none;
}
.card-body::-webkit-scrollbar {
    display: none;
}



.text-default {
    color      : var(--APPLICATION__text-color)                   !important;
    font-family: var(--APPLICATION__text-font-family)             !important;
}

.bento-default {
    background-color: var(--APPLICATION__bento-box-color)         !important;
    border          : none                                        !important;
    box-shadow      : var(--APPLICATION__bento-box-shadow)        !important;
    border-radius   : var(--APPLICATION__bento-box-border-radius) !important;
}