:root {
    --background-color: #F6F7F8;
    --text-color: #333;
    --primary-color: #2A3647;
    --primary-hover-color: #2A3647;
    --border-color: #d1d1d1;
    --bs-btn-active-bg: #2A3647;
    --textarea-border-color: #e8e8e8;
    --bs-btn-active-color: #2A3647;
    --button-width: 200px;
    --button-height: 50px;
    --border-radius: 8px;
    --font-family: 'Inter', sans-serif;
    --global-margin-top: 100px;
    --button-hover-background-color: #29ABE2;
    --white-color: #FFFFFF;
    --link-hover: #29ABE2;
    --color-invalid: #FF8190;
    --input-border-color-standart: #D1D1D1;
    --input-border-color-onfocus: #29ABE2;
    --input-padding: 12px 16px;
    --template-height-with-padding: 80px;
    --input-edit-subtask-border-bottom-color: #29ABE2;
}


@font-face {
    font-family: 'Inter';
    src: url('./font/Inter/Inter-VariableFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    --sb-track-color: #f6f7f8;
    --sb-thumb-color: #a8a8a8;
    --sb-size: 4px;
}


*::-webkit-scrollbar {
    width: var(--sb-size)
}


*::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 2px;
}


*::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 2px;
}


body {
    max-width: 1920px;
    max-height: 100vh;
    padding: 80px 16px;
    box-sizing: border-box;
    background-color: var(--background-color);
    font-family: var(--font-family);
    font-weight: normal;
    font-style: normal;
}


a {
    text-decoration: none;
}


input,
textarea {
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius);
}


textarea {
    border-color: var(--textarea-border-color);
}


input:focus,
textarea:focus {
    border-color: var(--input-border-color-onfocus);
    outline: none;
}


footer {
    width: 100%;
    position: fixed;
    bottom: 0;
}


.text-muted{
    color: #A8A8A8 !important;
}


.text-muted:hover {
    color: #29abe1 !important;
}


.btn-primary {
    background-color: var(--primary-color);
    width: var(--button-width);
    height: var(--button-height);
    padding: 0.75rem;
    border-radius: var(--border-radius);
    color: #fff;
    border: none;
    --bs-btn-active-bg: var(--button-hover-background-color) !important;
}


.btn-primary:hover:not(:disabled),
.btn-dark:hover:not(:disabled) {
    background-color: var(--button-hover-background-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}


.btn-outline-secondary {
    width: var(--button-width);
    height: var(--button-height);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    background-color: transparent;
    border: 1.5px solid var(--primary-color);
    color: var(--primary-color);
    --bs-btn-active-bg: none;
    --bs-btn-active-color: #2A3647;
}


.btn-outline-secondary:hover:not(:disabled) {
    border-color: var(--button-hover-background-color);
    background-color: var(--white-color);
    color: var(--button-hover-background-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}


.btn-dark {
    width: 104px;
    border: none;
    background-color: var(--primary-color);
    --bs-btn-active-bg: var(--background-color);
    --bs-btn-active-bg: var(--button-hover-background-color);
}


.col-md-4 {
    padding: 0;
    display: flex;
    justify-content: center;
    max-width: 650px;
}


.assignedTo-name-label {
    padding: 7px 16px;
    font-size: 19px;
    font-weight: 400;
    color: #000000;
    line-height: 22.8px;
}


.border-color-invalid {
    border-color: var(--color-invalid) !important;
}


.border-color-onfocus {
    border-color: var(--input-border-color-onfocus) !important;
}


.color-invalid {
    color: var(--color-invalid)
}


.gap-4p {
    gap: 4px;
}


.gap-8p {
    gap: 8px;
}


.gap-16p {
    gap: 16px;
}


.input-color-standart-important-always:focus {
    border-color: var(--input-border-color-standart);
}


.m-template {
    margin-bottom: calc(82px - 0.5rem);
}


.no-scroll {
    overflow: hidden !important;
}


.pointer {
    cursor: pointer;
}


#priority-label {
    padding: 4px 18px;
    gap: 10px;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
}


#toast-container {
    z-index: 10002;
    position: fixed;
    transform: translate(50%);
    border-radius: 20px;
    padding: 16px;
    height: 74px;
    width: max-content;
    background-color: #2A3647;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    color: white;
    font-size: 20px;
    line-height: 24px;
    transition: all 0.5s ease;
  }


  #toast-container img {
    height: 26px;
  }
  
  
  .bottom {
    bottom: -100px;
  }
  

  .right {
    right: -600px;
  }


  .xMiddle {
    right: 50% !important;
  }
  

  .yMiddle {
    bottom: 50% !important;
  }


  .yLow {
    bottom: 25% !important;
}


.y-scroll {
    overflow-y: scroll;
}


.name-circle {
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}

.extra-contacts {
    background-color: gray; 
    color: white;
    border-radius: 50%;
    border: 2px solid white;
}


.bg-ff7a00 {
    background-color: #FF7A00;
}


.bg-9327ff {
    background-color: #9327FF;
}


.bg-ff745e {
    background-color: #FF745E;
}


.bg-ffc700 {
    background-color: #FFC700;
}


.bg-ffe62b {
    background-color: #FFE62B;
}


.bg-ff5eb3 {
    background-color: #FF5EB3;
}


.bg-00bee8 {
    background-color: #00BEE8;
}


.bg-ffa45e {
    background-color: #FFA45E;
}


.bg-0038ff {
    background-color: #0038FF;
}


.bg-ff4546 {
    background-color: #FF4546;
}


.bg-6e52ff {
    background-color: #6E52FF;
}


.bg-1fd7c1 {
    background-color: #1FD7C1;
}


.bg-fc71ff {
    background-color: #FC71FF;
}


.bg-c3fe2b {
    background-color: #C3FE2B;
}


.bg-ffbb2b {
    background-color: #FFBB2B;
}


#idVector:hover {
    cursor: pointer;
}

.header-container{
    padding-right: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }