:root {
    /* ===== PRIMARY ===== */
    --bs-primary:                  #355C8C;
    --bs-primary-border:           #8099B8;
    --bs-primary-hover:            #07407B;
    --bs-primary-hover-border:     #8099B8;
    --bs-primary-focus:            #152538;
    --bs-primary-focus-border:     #8099B8;
    --bs-primary-active:           #203754;
    --bs-primary-active-border:    #152538;
    --bs-primary-disabled:         #8099B8;
    --bs-primary-disabled-border:  #355C8C;
    --bs-primary-text:             #ffffff;
    --bs-primary-rgb:       25,135,84;
    --bs-primary-rgb-config:       53,92,140;


    /* ===== SECONDARY ===== */
    --bs-secondary:                #DDE5EE;
    --bs-secondary-border:         #5A7AA2;
    --bs-secondary-hover:          #CBD6E3;
    --bs-secondary-hover-border:   #2A4A70;
    --bs-secondary-focus:          #DDE5EE;
    --bs-secondary-focus-border:   #5A7AA2;
    --bs-secondary-active:         #A5B7CD;
    --bs-secondary-active-border:  #A5B7CD;
    --bs-secondary-disabled:         #8099B8;
    --bs-secondary-disabled-border:  #355C8C;
    --bs-secondary-text:           #07407B;
    --bs-secondary-rgb:     108, 117, 125;

    /* ==== THREE ====*/

    --bs-black-dark: #152538;

    /* ===== SUCCESS ===== */
    --bs-success:           #167F16;
    --bs-success-border:    #0F420F;
    --bs-success-hover:     #1B691B;
    --bs-success-hover-border:     #0F420F;
    --bs-success-focus:     #167F16;
    --bs-success-focus-border:     #0F420F;
    --bs-success-active:    #155115;
    --bs-success-active-border:    #0F420F;
    --bs-success-disabled:         #8099B8;
    --bs-success-disabled-border:  #355C8C;
    --bs-success-text:      #ffffff;
    --bs-success-rgb:       40, 167, 69;

    /* ===== INFO ===== */
    --bs-info:                  #17a2b8;
    --bs-info-hover:            #138ea0;
    --bs-info-focus:            #0f7888;
    --bs-info-active:           #0b5966;
    --bs-info-border:           #117a8b;
    --bs-info-text:             #ffffff;
    --bs-info-disabled:         #8099B8;
    --bs-info-disabled-border:  #355C8C;
    --bs-info-rgb:          23, 162, 184;

    /* ===== WARNING ===== */
    --bs-warning:           #ffc107;
    --bs-warning-hover:     #e0ac00;
    --bs-warning-focus:     #c99500;
    --bs-warning-active:    #a76f00;
    --bs-warning-border:    #d39e00;
    --bs-warning-text:      #212529;
    --bs-warning-rgb:       255, 193, 7;

    /* ===== DANGER ===== */
    --bs-danger:            #CC0000;
    --bs-danger-border:     #CC0000;
    --bs-danger-hover:      #FF9B9B;
    --bs-danger-hover-border:      #CC0000;
    --bs-danger-focus:      #FFE0E0;
    --bs-danger-focus-border:      #CC0000;
    --bs-danger-active:     #FF6767;
    --bs-danger-active-border:     #CC0000;
    --bs-danger-disabled:         #FFE0E0;
    --bs-danger-disabled-border:  #CC0000;
    --bs-danger-text:       #1A1A1A;
    --bs-danger-rgb:        220, 53, 69;

    /* ===== LIGHT ===== */
    --bs-light:                    #FFFFFF;
    --bs-light-border:             #BFBFBF;
    --bs-light-hover:              #FFFFFF;
    --bs-light-hover-border:       #454545;
    --bs-light-focus:              #FFFFFF;
    --bs-light-focus-border:       #747474;
    --bs-light-active:             #FFFFFF;
    --bs-light-active-border:      #1A1A1A;
    --bs-light-text:               #FFFFFF;
    --bs-light-disabled:           #FFFFFF;
    --bs-light-disabled-border:    #BFBFBF;
    --bs-light-rgb:         248, 249, 250;

    /* ===== DARK ===== */
    --bs-dark:              #0E0D0D;
    --bs-dark-hover:        #16181a;
    --bs-dark-focus:        #0f1011;
    --bs-dark-active:       #0a0b0c;
    --bs-dark-border:       #0f1011;
    --bs-dark-text:         #323232;
    --bs-dark-rgb:          33, 37, 41;

    /* Focus shadow opacity */
    --bs-focus-shadow-opacity: 0.25;

    /* Login BTN Color */
    --bs-gray-transparent: #ABBDD5;

    /* ===== FOOTER ===== -*/

    --bs-light-footer: rgb(17, 24, 39,0.7);
    --bs-light-body-background: #F9FAFB;
    --bs-light-gray:#747474;
    --bs-cornflower-blue: rgba(90, 122, 162, 0.4);
    --bs-dark-gray-text: #414141;
    --bs-light-gray-bg: #F0F4F9;
    --bs-dark-opacity-gray:#454545;

    --bs-input-color: #EBEBEB;
    --bs-input-text-color : #868585;

}

/* ====================================================
   Bootstrap 5 — Full Color Variable Config (all states)
   ==================================================== */
/* -----------------------------
   1) Color variables (all states)
   ----------------------------- */

.btn-custom,
.btn-primary {
    background-color: #003465FF !important;
    border-color: var(--bs-primary-border) !important;
    color: var(--bs-primary-text) !important;
    border: none;
}
.pass_block{
    position: relative;
}
.rotate-arrow{
    font-size: 20px;
    margin-right: 10px;
}
.pass_block i{
    position: absolute;
    right: 15px;
    top: 9px;
    color: black;
    font-size: 20px;
    z-index: 99999999999;
}
.pass_block input{
    border-radius: 0.375rem !important;
}
.btn-custom:hover,
.btn-primary:hover {
    background-color: var(--bs-primary-hover) !important;
    border-color: var(--bs-primary-hover-border) !important;
}
.btn-custom:focus,
.btn-primary:focus {
    background-color: var(--bs-primary-focus) !important;
    border-color: var(--bs-primary-focus-border) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), var(--bs-focus-shadow-opacity)) !important;
}
.btn-custom:active,
.btn-custom.active,
.show > .btn-custom.dropdown-toggle,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle
{
    background-color: var(--bs-primary-active) !important;
    border-color: var(--bs-primary-active-border) !important;
}

.btn-custom.disabled,
.btn-custom:disabled,
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--bs-primary-disabled) !important;
    border-color: var(--bs-primary-disabled-border) !important;
    color: rgba(var(--bs-dark-rgb), 0.5) !important; /* մգացված տեքստ */
    pointer-events: none !important;
    box-shadow: none !important;
}

/* SECONDARY */
.btn-secondary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary-border) !important;
    color: var(--bs-secondary-text) !important;
}
.btn-secondary:hover {
    background-color: var(--bs-secondary-hover) !important;
    border-color: var(--bs-secondary-hover-border) !important;
}
.btn-secondary:focus {
    background-color: var(--bs-secondary-focus) !important;
    border-color: var(--bs-secondary-focus-border) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-secondary-rgb), var(--bs-focus-shadow-opacity)) !important;
}
.btn-secondary:active,
.btn-secondary.active {
    border-color: var(--bs-secondary-active-border) !important;
    background-color: var(--bs-secondary-active) !important;
}

.btn-secondary.disabled,
.btn-secondary:disabled {
    background-color: var(--bs-secondary-disabled) !important;
    border-color: var(--bs-secondary-disabled-border) !important;
    color: rgba(var(--bs-dark-rgb), 0.5) !important; /* մգացված տեքստ */
    pointer-events: none !important;
    box-shadow: none !important;
}



/* SUCCESS */
.btn-success {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success-border) !important;
    color: var(--bs-success-text) !important;
}
.btn-success:hover {
    background-color: var(--bs-success-hover) !important;
    border-color: var(--bs-success-hover-border) !important;
}
.btn-success:focus {
    background-color: var(--bs-success-focus) !important;
    border-color: var(--bs-success-focus-border) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb), var(--bs-focus-shadow-opacity)) !important;
}
.btn-success:active,
.btn-success.active {
    background-color: var(--bs-success-active) !important;
    border-color: var(--bs-success-active-border) !important;
}

.btn-success.disabled,
.btn-success:disabled {
    background-color: var(--bs-success-disabled) !important;
    border-color: var(--bs-success-disabled-border) !important;
    color: rgba(var(--bs-dark-rgb), 0.5) !important; /* մգացված տեքստ */
    pointer-events: none !important;
    box-shadow: none !important;
}

/* INFO */
.btn-info {
    background-color: var(--bs-info) !important;
    border-color: var(--bs-info-border) !important;
    color: var(--bs-info-text) !important;
}
.btn-info:hover { background-color: var(--bs-info-hover) !important; }
.btn-info:focus {
    background-color: var(--bs-info-focus) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-info-rgb), var(--bs-focus-shadow-opacity)) !important;
}
.btn-info:active,
.btn-info.active { background-color: var(--bs-info-active) !important; }

/* WARNING */
.btn-warning {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning-border) !important;
    color: var(--bs-warning-text) !important;
}
.btn-warning:hover { background-color: var(--bs-warning-hover) !important; }
.btn-warning:focus {
    background-color: var(--bs-warning-focus) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-warning-rgb), var(--bs-focus-shadow-opacity)) !important;
}
.btn-warning:active,
.btn-warning.active { background-color: var(--bs-warning-active) !important; }

/* DANGER */
.btn-danger {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger-border) !important;
    color: var(--bs-danger-text) !important;
}
.btn-danger:hover {
    background-color: var(--bs-danger-hover) !important;
    border-color: var(--bs-danger-hover-border) !important;
}
.btn-danger:focus {
    background-color: var(--bs-danger-focus) !important;
    border-color: var(--bs-danger-focus-border) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), var(--bs-focus-shadow-opacity)) !important;
}
.btn-danger:active,
.btn-danger.active {
    border-color: var(--bs-danger-active-border) !important;
    background-color: var(--bs-danger-active) !important;
}

.btn-danger.disabled,
.btn-danger:disabled {
    background-color: var(--bs-danger-disabled) !important;
    border-color: var(--bs-danger-disabled-border) !important;
    color: rgba(var(--bs-dark-rgb), 0.5) !important; /* մգացված տեքստ */
    pointer-events: none !important;
    box-shadow: none !important;
}


/* LIGHT */
.btn-light {
    background-color: var(--bs-light) !important;
    border-color: var(--bs-light-border) !important;
    color: var(--bs-light-text) !important;
}
.btn-light:hover {
    background-color: var(--bs-light-hover) !important;
    border-color: var(--bs-light-hover-border) !important;
}
.btn-light:focus {
    background-color: var(--bs-light-focus) !important;
    border-color: var(--bs-light-focus-border) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-light-rgb), var(--bs-focus-shadow-opacity)) !important;
}
.btn-light:active,
.btn-light.active {
    background-color: var(--bs-light-active) !important;
    border-color: var(--bs-light-border) !important;
}

.btn-light.disabled,
.btn-light:disabled {
    background-color: var(--bs-light-disabled) !important;
    border-color: var(--bs-light-disabled-border) !important;
    color: rgba(var(--bs-dark-rgb), 0.5) !important; /* մգացված տեքստ */
    pointer-events: none !important;
    box-shadow: none !important;
}

/* DARK */
.btn-dark {
    background-color: var(--bs-dark) !important;
    border-color: var(--bs-dark-border) !important;
    color: var(--bs-light-text) !important;
}
.btn-dark:hover { background-color: var(--bs-dark-hover) !important; }
.btn-dark:focus {
    background-color: var(--bs-dark-focus) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-dark-rgb), var(--bs-focus-shadow-opacity)) !important;
}
.btn-dark:active,
.btn-dark.active { background-color: var(--bs-dark-active) !important; }

/* ------------------------------------------------
   4) Outline buttons (color-only borders, no fill)
   ------------------------------------------------ */

/* Generic outline pattern:
   .btn-outline-<name> uses --bs-<name> for border/text,
   hover/focus uses hover/focus variables as background.
*/

/* OUTLINE PRIMARY */
.btn-outline-primary {
    color: var(--bs-primary) !important;
    background-color: transparent !important;
    border-color: var(--bs-primary-border) !important;
}
.btn-outline-primary:hover {
    color: var(--bs-primary-text) !important;
    background-color: var(--bs-primary-hover) !important;
    border-color: var(--bs-primary-border) !important;
}
.btn-outline-primary:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), var(--bs-focus-shadow-opacity)) !important;
}
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--bs-primary-active) !important;
    color: var(--bs-primary-text) !important;
}

/* OUTLINE SECONDARY */
.btn-outline-secondary {
    color: var(--bs-secondary) !important;
    background-color: transparent !important;
    border-color: var(--bs-secondary-border) !important;
}
.btn-outline-secondary:hover {
    color: var(--bs-secondary-text) !important;
    background-color: var(--bs-secondary-hover) !important;
}

/* OUTLINE SUCCESS */
.btn-outline-success {
    color: var(--bs-success) !important;
    background-color: transparent !important;
    border-color: var(--bs-success-border) !important;
}
.btn-outline-success:hover {
    color: var(--bs-success-text) !important;
    background-color: var(--bs-success-hover) !important;
}

/* OUTLINE INFO */
.btn-outline-info {
    color: var(--bs-info) !important;
    background-color: transparent !important;
    border-color: var(--bs-info-border) !important;
}
.btn-outline-info:hover {
    color: var(--bs-info-text) !important;
    background-color: var(--bs-info-hover) !important;
}

/* OUTLINE WARNING */
.btn-outline-warning {
    color: var(--bs-warning) !important;
    background-color: transparent !important;
    border-color: var(--bs-warning-border) !important;
}
.btn-outline-warning:hover {
    color: var(--bs-warning-text) !important;
    background-color: var(--bs-warning-hover) !important;
}

/* OUTLINE DANGER */
.btn-outline-danger {
    color: var(--bs-danger) !important;
    background-color: transparent !important;
    border-color: var(--bs-danger-border) !important;
}
.btn-outline-danger:hover {
    color: var(--bs-danger-text) !important;
    background-color: var(--bs-danger-hover) !important;
}

/* OUTLINE LIGHT */
.btn-outline-light {
    color: var(--bs-light) !important;
    background-color: transparent !important;
    border-color: var(--bs-light-border) !important;
}
.btn-outline-light:hover {
    color: var(--bs-light-text) !important;
    background-color: var(--bs-light-hover) !important;
}

/* OUTLINE DARK */
.btn-outline-dark {
    color: var(--bs-dark) !important;
    background-color: transparent !important;
    border-color: var(--bs-dark-border) !important;
}
.btn-outline-dark:hover {
    color: var(--bs-dark-text) !important;
    background-color: var(--bs-dark-hover) !important;
}

/* --------------------------------------
   5) Text / Background utility overrides
   -------------------------------------- */
.text-primary   { color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-success   { color: var(--bs-success) !important; }
.text-info      { color: var(--bs-info) !important; }
.text-warning   { color: var(--bs-warning) !important; }
.text-danger    { color: var(--bs-danger) !important; }
.text-light     { color: var(--bs-light) !important; }
.text-dark      { color: var(--bs-dark) !important; }
.text-light-gray{ color: var( --bs-light-gray)!important;}

.bg-primary   { background-color: var(--bs-primary) !important; color: var(--bs-primary-text) !important; }
.bg-primary-c   { background-color: var(--bs-primary) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; color: var(--bs-secondary-text) !important; }
.bg-secondary-c { background-color: var(--bs-secondary) !important; }
.bg-light-gray-c { background-color: var(--bs-light-gray-bg) !important; }
.bg-login { background-color: var(--bs-cornflower-blue) !important;  }
.bg-success   { background-color: var(--bs-success) !important; color: var(--bs-light-text) !important; }
.bg-info      { background-color: var(--bs-info) !important; color: var(--bs-dark-text) !important; }
.bg-warning   { background-color: var(--bs-warning) !important; color: var(--bs-dark-text) !important; }
.bg-danger    { background-color: var(--bs-danger) !important; color: var(--bs-light-text) !important; }
.bg-light     { background-color: var(--bs-light) !important; color: var(--bs-dark-text) !important; }
.bg-dark      { background-color: var(--bs-dark) !important; color: var(--bs-light-text) !important; }
.bg-footer      { background-color: var(--bs-light-footer) !important; color:white !important; }

/* --------------------------------------
   6) Links and small components styling
   -------------------------------------- */
a {
    color: var(--bs-primary);
    text-decoration: none;
}
a:hover, a:focus {
    color: var(--bs-primary-hover);
    text-decoration: underline;
}

/* badges */
.badge-primary { background-color: var(--bs-primary) !important; color: var(--bs-primary-text) !important; }
.badge-secondary { background-color: var(--bs-secondary) !important; color: var(--bs-secondary-text) !important; }
.badge-success { background-color: var(--bs-success) !important; color: var(--bs-success-text) !important; }
.badge-info { background-color: var(--bs-info) !important; color: var(--bs-info-text) !important; }
.badge-warning { background-color: var(--bs-warning) !important; color: var(--bs-warning-text) !important; }
.badge-danger { background-color: var(--bs-danger) !important; color: var(--bs-danger-text) !important; }
.badge-light { background-color: var(--bs-light) !important; color: var(--bs-light-text) !important; }
.badge-dark { background-color: var(--bs-dark) !important; color: var(--bs-dark-text) !important; }

/* border */

.border-primary-bg{
    border-color: var(--bs-primary) !important;
}

/* form controls focus border */
.form-control:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), var(--bs-focus-shadow-opacity));
    border-color: var(--bs-primary-border);
}



body{
    background-color: var( --bs-light-body-background);
    font-size: 14px;
    color: var(--bs-primary);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dark-text{
    color: var(--bs-dark-text)!important;
}
.dark-gray-text{
    color: var(--bs-dark-gray-text)!important;
}
.dark-opacity-gray-text{
    color: var(--bs-dark-opacity-gray)!important;
}


.bs-line {
    color: #989898;
    height: 3px;
}
.ui-dialog-titlebar{
    display: flex !important;
    justify-content: space-between;
    font-size: 25px;
}
.ui-dialog-content{
    margin: 15px 0 !important;
}
.ui-dialog {
    padding: 30px !important;
    border-radius: 16px !important;

    /* For Chrome, Edge, Safari */

    .ui-widget-header {
        border: 0 !important;
        background: var(--bs-primary) !important;
        cursor: default !important;
        border-radius: 0 !important;
        padding: 15px 25px !important;
        line-height: 1;

        .ui-dialog-title {
            color: var(--bs-primary-text) !important;
        }

        .ui-dialog-titlebar-close{
            width: 90px;
            visibility:hidden

            /*&:after {*/
            /*    content: "X Փակել";*/
            /*    display: block;*/
            /*}*/

            /*.ui-icon-closethick {*/
            /*    display: none;*/
            /*}*/

        }

    }

    .ui-dialog-buttonpane {
        border-color: var(--bs-primary) !important;
        .ui-dialog-buttonset{
            justify-content: end;
        }
    }
}
.ui-widget-content {
    background: white !important;
    border: none!important;
    padding-top: 10px;
    border-top: solid 2px!important;

    &.ui-dialog-buttonpane{
        button{
            margin-left: 15px;
        }
    }
}

.ui-widget-overlay{
    background: black!important;
}

.ui-datepicker-prev {
    .ui-widget-header {
        .ui-icon {
            background-image: url("../../img/client/loader.svg");
        }
    }
}
  {

}

/* ------------------------------------------------
   7) Optional: easy theme switcher classes examples
   ------------------------------------------------ */
/* dark-ish theme override example (add .theme-dark to body) */
body.theme-dark {
    --bs-primary: #4dabf7;
    --bs-primary-hover: #3a8ee0;
    --bs-primary-focus: #2b6fb1;
    --bs-primary-border: #2b6fb1;
    --bs-primary-text: #0b1220;

    --bs-light: #1f2a36;
    --bs-light-hover: #2b3946;
    --bs-light-text: #e9eef5;
    --bs-light-rgb: 31,42,54;

    --bs-dark: #0b1220;
    /*--bs-dark-text: #e9eef5;*/
    --bs-dark-rgb: 11,18,32;
}

::-webkit-scrollbar {
    width: 20px;            /* լայնությունը */
}

::-webkit-scrollbar-track {
    background: var(--bs-light-gray-bg);    /* բաց մոխրագույն/կապտավուն ֆոն */
    border-radius: 12px;
    border: 2px solid #ffffff; /* սպիտակ բորդեր՝ ինչպես նկարում */
}

::-webkit-scrollbar-thumb {
    background: var(--bs-primary);     /* thumb-ի մուգ կապույտ գույնը */
    border-radius: 8px;
    border: 3px solid var(--bs-light-gray-bg); /* thumb-ի շուրջ բաց գիծ, որ լինի detached effect */
}



::-webkit-scrollbar-thumb:hover {
    background: var(--bs-primary-hover);
}