:root{
    /* Typography */
    --bs-font-sans-serif:                       "Plus Jakarta Sans", sans-serif;
    --bs-body-font-size:                        1rem;
    --bs-body-font-weight:                      400;
    --bs-body-line-height:                      1.5;

    --font-size-xxs:                            0.625rem;
    --font-size-xs:                             0.75rem;
    --font-size-sm:                             0.875rem;
    --font-size-md:                             0.875rem;
    --control-font-size:                        var(--font-size-sm);

    --h1:                                       3rem;
    --h2:                                       2.625rem;
    --h3:                                       1.5rem;
    --h4:                                       1.125rem;
    --h5:                                       1rem;
    --h6:                                       0.875rem;

    --btn-font-size:                            var(--font-size-md);

    /*Colors*/
    --bs-body-color:                            #717182;
    --bs-body-color-rgb:                        85, 85, 85;
    --bs-body-bg:                               #fff;
    --bs-body-bg-rgb:                           255, 255, 255;
    --bs-dark:                                  #0A0A0A;
    --bs-dark-rgb:                              10, 10, 10;
    --bs-black:                                 #0A0A0A;
    --bs-black-rgb:                             0, 0, 0;
    --bs-border-color:                          #D8D8D8;
    --bs-border-dark-color:                     #0000001A;
    --header-bg:                                #FFF;
    --header-color:                             var(--bs-body-color);
    --footer-bg:                                #fff;
    --footer-color:                             #2E3644;
    --dark-bg:                                  #000;
    --light-bg:                                 #fff;
    --bs-label-color:                           #0A0A0A;

    --primary-color:                            #2989CD;
    --bs-primary:                               var(--primary-color);
    --secondary-color:                          var(--bs-secondary);
    --bs-primary-rgb:                           41, 136, 204;
    --bs-primary-dark:                          #2989CD;
    --primary-bg:                               #2989CD;
    --primary-bg-rgb:                           114,143,99;
    --bs-secondary:                             #EFF6FF;
    --bs-secondary-rgb:                         246, 231, 245;
    --bs-secondary-dark:                        #0A0A0A;
    --bs-secondary-dark-rgb:                     244, 206, 20;
    --gray-bg:                                  #666666;
    --light-gray:                               var(--light-bg);

    --bs-success:                               #90B35D;
    --bs-danger:                                #F65E59;
    --bs-danger-rgb:                            246, 94, 89;
    --notification-color:                       var(--bs-danger);
    --online-color:                             #2CC84A;
    --chat-active-color:                        #F5FFF2;
    --green-color:                              #00A63E;

    --completed-color:                          0, 133, 255;
    --ongoing-color:                            40, 199, 111;
    --pending-color:                            255, 57, 57;
    --active-color:                             106, 106, 106;

    --text-primary:                             var(--primary-color);
    --text-dark-color:                          #0A0A0A;
    --text-gray-color:                          #4A5565;

    /*Icons*/
    --default-icon-size:                        1.75rem;
    --icon-sm:                                  1rem;
    --icon-md:                                  1.3rem;

    /* Focus */
    --control-focus-shadow:                     0 0 0 .15rem rgba(var( --bs-dark-rgb),.1);

    /*radius*/
    --bs-border-radius:                         0.625rem;
    --bs-border-radius-sm:                      0.25rem;
    --bs-border-radius-lg:                      0.8rem;
    --bs-border-radius-xl:                      1.5rem;
    --bs-border-radius-xxl:                     2.5rem;
    --bs-border-radius-2xl:                     var(--bs-border-radius-xxl);
    --bs-border-radius-pill:                    50rem;

    /*sizes*/
    --container-size:                           1202px;
    --header-size:                              97px;
    --default-logo-size:                        60px;
    --default-logo-md-size:                     80px;
    --btn-xs-size:                              30px;
    --btn-sm-size:                              40px;
    --btn-size:                                 43px;
    --btn-lg-size:                              60px;
    --textarea-size:                            140px;
    --page-hero-size:                           173px;
    --img-thumb-sm:                             60px;
    --img-thumb:                                100px;
    --img-thumb-md:                             154px;
    --img-thumb-md1:                            var(--textarea-size);
    --card-img-h:                               214px;
    --card-img-sm-h:                            80px;
    --img-avatar-size:                          54px;
    --img-avatar-lg-size:                       120px;
    --img-avatar-xs-size:                       18px;
    --img-avatar-sm-size:                       34px;
    --notification-size:                        7px;

    --panel-xs:                                 400px;
    --panel-sm:                                 590px;
    --panel-md:                                 670px;
    --panel-lg:                                 780px;
    --panel-l-size:                             254px;
    --panel-r-size:                             calc(100% - var(--panel-l-size));
    --chat-l-size:                              298px;
    --chat-r-size:                              calc(100% - var(--chat-l-size));

    --mobile-menu-size:                         320px;
    --scrollbar-size:                           8px;

    /* Space */
    --default-space:                            20px;
    --space-x:                                  0.625rem;
    --space-y:                                  0.475rem;
    --panel-space:                              95px;
    --page-y-space:                             25px;

    /*Animation time */
    --default-animation-time:                   .15s;
    --sm-animation-time:                        .5s;

    /* media query */
    --media-xs:                                 576px;
    --media-sm:                                 768px;
    --media-md:                                 992px;
    --media-lg:                                 1200px;
    --media-xl:                                 1400px;
    --media-xxl:                                1400px;
    --media-xxl:                                1400px;
}