.tradingview-position {
    text-align: left;
    margin-left: 0;
}

.fy-profit {
    color: #33c659;
}

.fy-loss {
    color: #fb2a23;
}

.fy-breakeven {
    color: #2a394e;
}

.fy-custom-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    height: 15px;
    width: 15px;
}

    .fy-custom-checkbox:checked ~ .fy-custom-checkbox-checkmark:after {
        display: block;
    }

    .fy-custom-checkbox .fy-custom-checkbox-checkmark:after {
        left: 4px;
        top: 1px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
        display: block;
    }

    .fy-custom-checkbox:checked ~ .fy-custom-checkbox-checkmark {
        background-color: #436af5 !important;
        border-color: #436af5;
    }

.fy-custom-checkbox-checkmark {
    position: absolute;
    border: 1px solid #cacacb;
    height: 15px;
    width: 15px;
    border-radius: 2px;
}

    .fy-custom-checkbox-checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    .fy-custom-checkbox-checkmark:after {
        left: 4px;
        top: 1px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-radius: 1px;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

.fy-primary-button {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 12px;
    border: 1px solid #436af5;
    background: #436af5;
    color: #fff;
    font-size: 0.813rem;
    font-weight: 500;
    gap: 8px;
    border-radius: 4px;
    cursor: pointer;
}

.fy-secondary-button {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 12px;
    border: 1px solid #bfc4ca;
    background: #fff;
    border-radius: 4px;
    gap: 8px;
    cursor: pointer;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #51545c rgba(20, 22, 34, 0);
}

    *::-webkit-scrollbar {
        width: 4px;
    }

    *::-webkit-scrollbar-track {
        background: rgba(20, 22, 34, 0);
    }

    *::-webkit-scrollbar-thumb {
        background-color: #51545c;
        border-radius: 20px;
    }

        *::-webkit-scrollbar-thumb:hover {
            background: #51545c;
        }

.exit-position-window-dark .modal-header.ew-modal-header {
    background-color: #2a394e;
    color: #eaebed;
    border-bottom: 1px solid #2a394e;
}

.exit-position-window-dark .modal-content.ew-modal-content {
    background-color: #1a2330;
    color: #eaebed;
}

.exit-position-window-dark .ew-footer-container {
    border-top: 1px solid #2a394e;
}

.exit-position-window-dark .bw-header-heading-text {
    color: #fff;
}

.exit-position-window-dark .ew-modal-close-icon-container > img {
    content: url("https://assets.fyers.in/global-components/trade-icons/basket/bw-close-icon-dark.svg");
}

.exit-position-window-dark .ew-empty-primary-text {
    color: #eaebed;
}

.exit-position-window-dark .ew-empty-secondary-text {
    color: #bfc3ca;
}

.exit-position-window-dark .ew-toggle-item {
    color: #fff;
}

.exit-position-window-dark .ew-empty-img-container > img {
    content: url("https://assets.fyers.in/global-components/trade-icons/exitPosition/ew-empty-positions-dark.svg");
}

.exit-position-window-dark .ew-toggle-container {
    border: 1px solid #2a394e;
}

.exit-position-window-dark .fy-primary-button {
    border: 1px solid #5c6170;
    background-color: #7b97f8;
    color: #fff;
}

.exit-position-window-dark .fy-secondary-button {
    background-color: #2a394e;
    border: 1px solid #6a7483;
    color: #eaebed;
}

.exit-position-window-dark .ew-table .fy-breakeven {
    color: #bfc3ca;
}

.exit-position-window-dark .ew-table thead th {
    background-color: #202a37;
    border-bottom: 1px solid #2a394e;
    color: #bfc3ca;
}

.exit-position-window-dark .ew-table tbody tr {
    border-bottom: 1px solid #2a394e;
    background-color: #1a2330;
}

.exit-position-window-dark .ew-table tbody td {
    color: #bfc3ca;
}

    .exit-position-window-dark .ew-table tbody td.ew-table-symbol-item {
        color: #fff;
    }

.exit-position-window-dark .fy-custom-checkbox-checkmark {
    border: 1px solid #6a7483;
}

.exit-position-window-dark .ew-exit-all-primary-text {
    color: #fff;
}

.exit-position-window-dark .ew-exit-all-secondary-text {
    color: #eaebed;
}

.exit-position-window-dark .ew-toggle-item.ew-toggle-active {
    background-color: #7b97f8;
}

.ew-topmost-wrapper {
    display: none;
    background: #fff;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    width: 700px;
    font-family: "Poppins", sans-serif;
    box-shadow: 2px 4px 32px 16px rgba(42, 43, 46, 0.1);
}

    .ew-topmost-wrapper.ew-open {
        display: block;
    }

.modal-content.ew-modal-content {
    width: 100%;
    transform: unset;
    cursor: default;
}

.modal-header.ew-modal-header {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    border-bottom: 1px solid #eaebed;
}

.ew-header-heading-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding: 5px 5px 5px 20px;
    font-weight: 600;
}

.ew-toggle-wrapper {
    padding: 12px 0px 12px 16px;
}

.ew-toggle-container {
    border: 0px solid #e9e9ea;
    width: -moz-fit-content;
    /* width: fit-content; */
    border-radius: 2px;
    padding: 2px;
    /* display: flex; */
    /* gap: 4px; */
}

.ew-toggle-item {
    color: #2a394e;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    padding: 2px 8px;
    cursor: pointer;
    border-radius: 2px;
}

    .ew-toggle-item > img {
        content: url("https://assets.fyers.in/global-components/trade-icons/exitPosition/ew-toggle-info-light.svg");
    }

    .ew-toggle-item.ew-toggle-active > img {
        content: url("https://assets.fyers.in/global-components/trade-icons/exitPosition/ew-toggle-info.svg");
    }

    .ew-toggle-item.ew-toggle-active {
        background-color: #436af5;
        color: #fff;
    }

.ew-exit-body {
    height: 258px;
}

.bw-stock-drag-icon {
    display: flex;
    height: 12px;
    background-image: url(https://assets.fyers.in/global-components/trade-icons/basket/basket-item-drag.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: move;
}

.ew-table-symbol-heading,
.ew-table-symbol-item {
    flex: 0 0 200px !important;
    width: 200px;
    text-align: left;
}

.ew-table-pl-heading,
.ew-table-pl-item {
    flex: 0 0 150px !important;
    width: 150px;
    text-align: right;
}

.ew-table-price-heading,
.ew-table-price-item {
    flex: 0 0 90px !important;
    width: 90px;
    text-align: right;
}

.ew-table-net-qty-item,
.ew-table-net-qty-heading {
    padding-right: 16px !important;
    flex: 0 0 70px !important;
    width: 70px;
}

.ew-table-net-product-heading,
.ew-table-net-product-item {
    flex: 0 0 90px !important;
    width: 90px;
}

.ew-table-net-side-heading,
.ew-table-net-side-item {
    flex: 0 0 50px !important;
    width: 50px;
}

.ew-table thead th {
    padding: 8px 10px;
    background-color: #f4f5f6;
    color: #6a7483;
    font-size: 11px;
    font-weight: 500;
    font-style: normal;
    line-height: normal;
}

.ew-table tbody td {
    padding: 12px;
    color: #6a7483;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

    .ew-table tbody td.ew-table-symbol-item {
        padding: 12px 12px 12px 10px;
    }

    .ew-table tbody td.ew-table-symbol-item {
        color: #2a394e;
        font-weight: 500;
    }

.ew-table tbody tr {
    border-bottom: 1px solid #f4f4f5;
}

.ew-stock-drag-icon {
    display: flex;
    height: 16px;
    background-image: url(https://assets.fyers.in/global-components/trade-icons/basket/basket-item-drag.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: move;
}

.ew-table-drag-heading,
.ew-table-drag-item {
    flex: 0 0 28px !important;
    width: 28px;
    text-align: center;
}

.ew-modal-close-icon-container {
    cursor: pointer;
}

.ew-exit-all-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem;
}

.ew-exit-all-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ew-exit-all-primary-text {
    color: #2a394e;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.ew-exit-all-secondary-text {
    color: #2a394e;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
}

.ew-exit-all-options-container {
    display: flex;
    gap: 10px;
}

.ew-exit-all-checkbox-container {
    display: flex;
    margin-right: 1rem;
    gap: 0.5rem;
    align-items: center;
}

.ew-footer-container {
    display: flex;
    padding: 1rem;
    padding: 12px 16px;
    gap: 10px;
    border-top: 1px solid #eaebed;
    visibility: hidden;
    opacity: 0;
}

    .ew-footer-container.ew-footer-visible {
        visibility: visible;
        opacity: 1;
    }

.ew-table tbody {
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    height: 324px;
}


.ew-exit-all-checkbox-input-container {
    height: 15px;
    width: 15px;
}

.ew-exit-positions-select-all-container {
    display: flex;
    gap: 24px;
}





.tab-container {
    /* max-width: 600px; */
    margin: 0px auto;
}

.tabs {
    display: flex;
    width: 300px;
}

.tab-btn {
    flex: 1;
    padding: 10px;
    cursor: pointer;
    border: none;
    outline: none;
    background-color: #f1f1f1;
}

    .tab-btn:hover {
        background-color: #ddd;
    }

    .tab-btn.active {
        background: #436af5;
        color: #fff;
        font-weight: 600;
    }

.tab-content {
    display: none;
    padding: 20px;
    border: 0px solid #ccc;
}

    .tab-content p {
        margin: 0;
    }

.bag {
    text-align: center;
    margin-top: 55px;
}

    .bag img {
        width: 73px;
    }

    .bag h1 {
        font-size: 22px;
    }

    .bag h4 {
        font-size: 12px;
        color: #676767;
    }












    .clist{
        display: grid;
        padding: 1rem;
        max-height: 247px;
        width: 100%;
        border: 1px solid #cccccc57;
        overflow-y: auto;
        background: #dae2e7c9;
    }
    .clist .item{
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem;
        align-content: center;
        background: linear-gradient(125deg, #E0F2FF, #F5FBFF, #F2F9FE);
        border-bottom: solid 1px #B0BEC5;
    }
    .clist .item:nth-child(odd){
        background: #ffffff;
        /* box-shadow: 0px 0px 8px #8b8b8b; */
        border-bottom: solid 1px #B0BEC5;
    }
    .clist .item .l-side{
        display: flex !important;
        align-items: center;
    }
    .clist .item .r-side{
        
    }
    .clist .item .l-side img{
        width: 30px;
        margin-right: 0.6rem;
    }
    
    .clist .item .l-side p{
        font-size: 0.7rem !important;
    }
    .clist .item .r-side a{
        background: #0d6efd;
        padding: 5px 10px;
        border-radius: 1rem;
        font-size: small;
        color: #fff;
        text-decoration: unset;
    }
    
    .tabbed-modal .symb {
        display: grid;
        grid-template-columns: 7% auto;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    .tabbed-modal .symb img{
        width: 62px;
    }
    
    .tabbed-modal .symb h5{
        font-size: 0.8rem;
    }
    .tabbed-modal   .tab-content p{
        font-size: 0.6rem !important;
        margin: 0;
        font-weight: 500;
    }
    .tabbed-modal .tab-content label{
        margin:0;
        
    }
    .tab-btn{
        background: lightgrey;
        margin: 0.2rem 0;
    }
    .tab-btn:hover{
        background: #c8c8c8;
    }
    .swaps-btns{
        width: fit-content;
        display: grid;
        row-gap: 5px;
    }
    .swaps-btns button{
        background: lightgrey;
    }
    .swaps-btns button:hover{
        background: #c8c8c8;
    }
    .swaps-btns select{
        
    }
    
    .black{
        color:black !important;
    }
    :root{
        --black: #282828;
      --bs-border-color:#BCBCBC !important;
      --gray-color: #F1EFF2;
    
    }
    .group-click
    {
        text-decoration:underline;
        cursor:pointer;
    }
    
    button,
    input[type=button] {
        text-decoration: none 0 !important;
        ;
        outline: 0 0 !important;
        ;
        box-shadow: none !important;
    }
    button::-moz-focus-inner,
    input[type=button]::-moz-focus-inner,input[type=checkbox] {
      text-decoration: none;
        outline: 0 !important;
        box-shadow: none !important;
    }
    textarea,
    input[type],input[type="select"], select {
        border-radius:1px !important;
        border:1px solid var(--bs-border-color);
    }
    :focus-visible {
        outline: -webkit-focus-ring-color auto 0px;
    }
    
    .contextmenu
    {
    
      border-radius: 10px;
      border:10px solid black;
      padding: 5px;
    }
    
    .exTab1{
    }
    
    
    .bfx {
        background:#fff;
        font-size: 12px;
        color: #20204e;
        font-weight: 800;
        padding: 5px;
    }
    
    .bfx img {
            width: 23px;
        margin-right: 10px;
    }
    
    .bfx_nav {
        display:flex;
        background: #1A237E;
        border-bottom: solid 1px #a0a0a0;
        border-top: solid 1px #a0a0a0;
    }
    
    .bfx_nav ul {
        padding-left: 0px;
        margin-bottom: 0px;
        padding-bottom: 5px;
    }
    
    .bfx_nav li {
        display:-webkit-inline-box;
        font-size: 11px;
        padding:0px 15px 0px 15px;
    }
    
    .bfx_nav li a {
        color: #fff;
        font-weight: 400;
    }
    
    .bfx_top {
        display:flex;
        background: var(--gray-color, #F1EFF2);
        /* box-shadow: -7px -7px 16px 0 #000000, 7px 7px 10px -4px rgba(116,150,179,0.27); */
        /* margin-bottom: 0px; */
        border-bottom: 1px solid var(--bs-border-color-translucent);
    }
    
    .bfx_top ul {
        padding-left: 0px;
        margin-bottom: 0px;
        /* padding-bottom: 9px; */
        /* padding-top: 5px; */
    }
    
    .bfx_top li {
        display: flex;
        font-size: 12px;
        justify-content: center;
        align-content: center;
        align-items: center;
    }
    
    .bfx_top li a {
        color:#000;
        width: auto;
        letter-spacing: 1px;
        height: 3rem;
        /* margin: 0 0.2rem; */
        text-transform: uppercase;
        display: flex;
        row-gap: 0.2rem;
        justify-content: center;
        font-weight: 500;
        font-size: 0.6rem;
        align-items: center;
        flex-direction: column;
    }
    
    .bfx_top img {
        width: 25px;
        margin-right: 0;
    }
    
    
    
    
    .bfx_top2 {
        display:flex;
        background:#f0f0f0;
        border-bottom: solid 2px #aeaeae;
        margin-bottom: 0px;
    }
    
    .bfx_top2 ul {
        padding-left: 0px;
        margin-bottom: 0px;
        padding-bottom: 9px;
        padding-top: 5px;
    }
    
    .bfx_top2 li {
        display:-webkit-inline-box;
        font-size: 11px;
        padding: 0px 6px 0px 4px;
    }
    
    .bfx_top2 li a {
        color:#000;
        font-weight: 550;
    }
    
    .bfx_top2 img {
        width: 14px;
        margin-right:10px;
    }
    
    #exTab1 .tab-content {
      color: black;
      background-color: var(--gray-color);
      padding: 11px;
      font-size: 15px;
      box-shadow: inset 0px 0px 8px #31313166;
    }
    
    #exTab2 h3 {
      color : white;
      background-color: #428bca;
      padding : 5px 15px;
    }
    
    /* remove border radius for the tab */
    
    #exTab1 .nav-pills > li > a {
      border-radius: 0;
    }
    
    /* change border radius for the tab , apply corners on top*/
    
    #exTab3 .nav-pills > li > a {
      border-radius: 4px 4px 0 0 ;
    }
    
    #exTab3 .tab-content {
      color : white;
      background-color: #428bca;
      padding : 5px 15px;
    }
    .nav-pills li {
        background: #283593;
        padding: 5px 15px 5px 15px;
        font-size: 12px;
        color: #000;
        margin: 0px 0px 0px 2px;
    }
    
    .nav-pills li a {
        
        color: #fff;
    
    }
    
    .nav-pills .h3, h3 {
        font-size: 14px;
    }
    
    .nav-pills {
       background: #283593;
    }
    
    .nav-pills .active {
        background: rgb(0 0 0 / 32%);
        color:#000 !important;
        border-bottom: 2px solid #03A9F4;
    }
    
    .nav-pills .active a {
        color: #fff !important;
    }
    
    .market_watch {
        font-size:11px;
        font-weight:600;
    }
    
    .market_watch img {
        width:12px;
        margin-right:5px;
    }
    
    .mw2 {
        background: #abc4eb !important;
    }
    
    .navyblue {
        color: #0010a8 !important;
    }
    
    .red2 {
        color: #f70000 !important;
    }
    
    
    
    table.GeneratedTable {
      width: 100%;
      background-color: #ffffff;
      border-collapse: collapse;
      border-width: 0px;
      border-color: #ffcc00;
      border-style: solid;
      color: #000000;
    }
    .user_card .checkbox-container {
      display: flex;
      margin-top: 13px;
      margin-right: 0;
      height: auto;
      overflow: auto;
      align-content: center;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
    .user_card select{
        width: 100% !important;
    }
    
    /* Style for the actual checkbox */
    .user_card .checkbox-container input[type="checkbox"] {height:auto;margin-left: 5px; /* Adjust the margin based on your preference */}
    
    /* Optional: Style for the checkbox label */
    .checkbox-container label {
      font-size: 14px;
      color: #555;
      /* margin-right: 5px; */ /* Adjust the margin based on your preference */
    }
    .checkbox-container input[type="checkbox"] {
      /* margin-top: 15px; */
      /* margin-left: 0; */ /* Adjust the margin based on your preference */
      width: auto;
      margin: 0 0 0 10px;
      transform: scale(1); /* Adjust the scale factor to make it smaller */
      justify-content: space-between;
    }
    .deposit-row {
        background-color: lightgreen;
      }
    
      .withdraw-row {
        background-color: lightpink;
      }
    #NewsTable {
      font-size: 12px; /* Adjust the font size as needed */
      width: 100%;
      border: 0.5px solid var(--bs-border-color);
    }
    #NewsTable tbody th{
        background: var(--bs-focus-ring-color);
    }
    
    /* Optional: Style to highlight the clicked row in the News table */
    #NewsTable tbody tr.clicked-row {
      background-color: #f0f0f0; /* Adjust the background color as needed */
    }
    .table-container {
      max-height: 600px; /* Set the maximum height of the container */
      overflow-y: auto; /* Enable vertical scrolling */
      
    }
    
    #infoContainer {
          display: none;
          background-color: #fff;
          padding: 20px;
          border-radius: 8px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          max-width: 1200px;
          width: 100%;
          text-align: center;
        }
    
        .columns {
          font-size: 14px;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
        }
    
        .column {
          padding: 10px;
          border: 1px solid #ccc;
          border-radius: 6px;
          background: #fdca40;
          color: #000;
          box-shadow: inset 0px 0px 0px 0 rgba(116,150,179,0.32), inset 0px 0px 15px 0 #bd8a00;
          width: calc(30% - 20px); /* Adjust width based on your preference */
          margin: 10px;
        }
    
    .action-button {
      /* background-color: #4caf50; */ /* Green background */
      color: white; /* White text */
      padding: 8px 16px; /* Padding */
      border: none; /* No border */
      font-size: inherit;
      border-radius: 4px; /* Rounded corners */
      cursor: pointer; /* Pointer cursor */
      margin-right: 5px; /* Add some spacing between buttons */
    }
    
    .action-button:hover {
    }
    .classicModal {
          display: none;
          position: fixed;
          top: 50%;
          background: white;
          left: 50%;
          border-radius: 3px;
          transform: translate(-50%, -50%);
          padding: 20px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
          z-index: 1000;
        }
    .classicModal p{
        font-size:larger;
        color: var(--bs-black);
        margin:0;
        font-size: medium;
        text-align: center;
        font-size: large;
        padding: 0 0px 0.8rem;
    }
    table.GeneratedTable td, table.GeneratedTable th {
      border-width: 0px;
      border-color: #ffcc00;
      border-style: solid;
      padding: 3px;
    }
    
    .green-current-price {
      color: green;
    
    }
    .modal-content {
        border:0px;
        border-radius: 1px;
    }
    .mheader
    {
      background: var(--bs-link-color);
      color: #000;
      /* box-shadow: inset 0px 0px 0px 0 rgba(116,150,179,0.32), inset 0px 0px 15px 0 #bd8a00; */
      font-size: 15px;
      font-weight: 500;
      padding: 5px 15px;
      color: white;
      line-height: 183%;
      height: auto;
    }
    
    #wizardModal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 0px;
      box-shadow: 0 14px 53px 13px rgb(0 0 0 / 44%);
      z-index: 1000;
      max-width: 381px; /* Adjust the max-width as needed */
      margin: 0;
      border: solid 1px #1A237E;
      height: auto;
      border-radius: 0;
      border: 1px solid var(--bs-border-color) !important;
    }
    #groupModal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 0px;
      box-shadow: 0 14px 53px 13px rgb(0 0 0 / 44%);
      z-index: 1000;
      max-width: 30rem; /* Adjust the max-width as needed */
      margin: 25px;
      border: solid 1px #1A237E;
      height: auto;
      border-radius: 0;
    }
    
    #commissionModal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 0px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      max-width: 900px; /* Adjust the max-width as needed */
      margin: 25px;
      border: solid 1px #1A237E;
    }
    
    #transactionModal {
      display: none;
      position: fixed;
      top: 50%;
      height: auto;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 0px;
      box-shadow: 0 13px 20px 20px rgb(91 91 91 / 23%);
      z-index: 1000;
      max-width: 350px; /* Adjust the max-width as needed */
      border-radius: 1px;
      /* margin: 25px; */
      border: solid 2px var(--bs-border-color);
    }
    
    
    
    .modal-content-auth {
      /* background-color: #fff; */
      /* margin: 10% auto; */
      r: white;
      /* padding: 20px; */
      display: contents;
      /* border: 1px solid #888; */
      width: 50%;
      max-width: 400px;
    }
    .classicModal .close{
        color: white;
        font-weight: 300;
        position: relative;
        font-size: 16px;
        top: 0;
        background: #59b60b;
        right: 0;
        line-height: normal;
        text-align: center;
        padding: 0.5rem;
        border-radius: 3px;
    }
    
    .close {
      color: #aaa;
      float: right;
      position: absolute;
      font-size: 28px;
      top: 7px;
      right: 22px;
      font-weight: bold;
      cursor: pointer;
    }
    
    
    .modal input {
     width:90%;
     margin:auto;
     height:35px;
    }
    
    .modal select {
     width:90%;
     margin:auto;
     height: 35px !important;
    }
    
    .modal label {
     /* margin:auto; */
     color: var(--bs-primary);
     font-size: 13px;
     font-weight: 500;
     margin-bottom: 0.4rem;
     padding-top: 0px;
    }
    
    /* Style for input fields */
    .user_card select {
      width: -webkit-fill-available;
      margin: auto;
      padding: 8px;
      border: 0.1px solid #00000029 !important;
      font-size: 0.8rem;
      /* margin-bottom: 10px; */
      /* border-style: solid; */
      background: var(--bs-gray-100);
      box-shadow: none;
      box-sizing: border-box;
      padding-left: 10px;
      margin-bottom: 20px;
      border-radius: 20px !important;
      box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
    }
    
    .user_card input {
      width: -webkit-fill-available;
      margin: auto;
      padding: 8px;
      border: 0.1px solid #00000029 !important;
      font-size: 0.8rem;
      /* margin-bottom: 10px; */
      /* border-style: solid; */
      background: var(--bs-gray-100);
      box-shadow: none;
      box-sizing: border-box;
      padding-left: 10px;
      margin-bottom: 20px;
      border-radius: 20px !important;
      box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
    }
    
    
    .modal h2 {
      color: ivory;
      font-size: 0.8rem;
      background: var(--bs-link-color);
      padding: 0.6rem 1rem;
      margin: 0;
    }
    
    .modal span.dropdown-filter-icon {
      float:right;
      font-weight: 300;
      height: 100%;
      line-height: 0;
      font-size: 32px;
      position: relative;
      border: 0 solid var(--black);
      color: var(--bs-black) !important;
      top: 0;
    }
    .modal .dropdown-filter-dropdown{
        float:inline-end;
    }
    .modal span.dropdown-filter-icon i.arrow-down {
        border: solid var(--black);
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 3px;
        margin-right: 5px;
        margin-left: 5px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
    
    .wizardButton {background: var(--bs-blue);border: 0px;color: #fff;font-size: smaller;padding: 0.4rem 1rem;/* height: 40px; */font-weight: 400;/* width: 200px; */margin: auto;border-radius: 3px;margin-top: 0;}
    
      .authButtons {background: #08367e;border: 0px;margin: auto;color: #fff;margin-bottom: 18px;display: block;font-size: 18px;height: 40px;font-weight: bold;width: 100%;border-radius: 8px;margin-top: 2px;}
    
    #finishButton:hover {
      background-color: #0866f2;
    }
    
    .show {
      display: block !important;
    }
    
    .login-link {
      color: blue; /* Set the text color */
      text-decoration: underline; /* Add underline */
      cursor: pointer; /* Set cursor to pointer for better user experience */
    }
    
    .login-link:hover {
      color: purple; /* Change color on hover */
      text-decoration: none; /* Remove underline on hover */
    }
    .red-current-price {
      color: red;
    
    }
    .GeneralTable {
          font-size: 14px; /* Adjust the font size for the entire table */
          border-collapse: collapse;
          width: 100%;
        }
        th, td {
      padding: 8px; /* Add some padding for better appearance */
      text-align: left;
    }
    
    th:not(:last-child),
    td:not(:last-child) {
      border-right: 1px solid #dddddd; /* Add right border to all cells except the last one in a row */
    }
    .search-bar {
      /* position: fixed; */
      bottom: 0;
      left: 0;
      width: 30rem;
      background-color: var(--gray-color); /* Background color */
      padding: 6px 6px 6px 30px;
      /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */ /* Box shadow for a subtle lift */
      z-index: 1;
      display: flex;
      align-items: center;
    }
    
    .search-bar .btn {
        /* background:#000; */
        font-size:11px;
        margin-right: 5px;
    }
    .search-bar .btn {
        border-radius:0px;
    }
    
    #searchButton {
      background-color: #3498db;
      color: #fff;
      border: none;
      border-radius: 5px;
      padding: 10px 15px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s ease; /* Smooth transition effect */
    }
    
    #searchButton:hover {
      background-color: #2c3e50; /* Darker color on hover */
    }
    
    #searchButton::before {
      content: "\1F50D"; /* Unicode magnifying glass icon */
      font-size: 20px;
      margin-right: 8px;
    }
    
    #searchButton:focus {
      outline: none;
      box-shadow: 0 0 5px #3498db;
    }
    #searchInput {
      flex: 1;
      padding: 8px;
      border: none;
      border-radius: 0;
      margin-right: 10px;
      font-size: 11px;
      background: #ffffff;
    }
    
    #searchInput:focus {
      outline: none;
      /* box-shadow: 0 0 5px #3498db; */ /* Highlight on focus */
    }
    
    #searchButton {
      background-color: #3498db; /* Button background color */
      color: #fff; /* Button text color */
      border: none;
      border-radius: 5px;
      padding: 10px 15px;
      cursor: pointer;
      font-size: 16px;
    }
    
    #searchButton:hover {
      background-color: #2980b9; /* Darker color on hover */
    }
    
    tr:not(:last-child) td {
      border-bottom: 1px solid #dddddd; /* Add bottom border to all cells in rows except the last one */
    }
    .GeneralTable tbody tr:nth-child(odd) {
        background: linear-gradient(125deg, #E0F2FF, #F5FBFF, #F2F9FE); /* Choose your desired alternate color */
      }
    .GeneralTable th, .GeneralTable td {
        padding: 8px;
        text-align: left;
        
    }
    .GeneralTable th {
        position: sticky;
        top: 0;
        text-wrap: nowrap;
        z-index:9;
        background: #2196F3;
    }
    
        .sortable {
            cursor: pointer;
            user-select: none;
            font-size: 12px; /* Adjust the font size for headers */
        }
    
        .GeneralTable tbody tr td {
          font-size: 10px; /* Adjust the font size for rows */
          color: #000;
          font-weight: 500;
        }
    
        .asc::after, .desc::after {
          content: ' ↑↓';
          font-size: 10px; /* Adjust the font size for arrow symbols */
          margin-left: 5px;
        }
    table.GeneratedTable thead {
      background-color: #ffffff;
    }
    
    #live {
        margin-top:15px;
    }
    
    
    
    
    
    
    
    
    
    .user_card label{
        color:white;
        margin-bottom: 0;
    }
    .user_card span{
        color:white;
    }
    .user_card input{
        margin-bottom:0.6rem;
    }
    
    
    
    
    
            .user_card {
                height: auto;
                background: linear-gradient(0deg, rgb(1 34 62 / 92%), rgb(0 0 0 / 61%)), url(https://media.istockphoto.com/id/1584774403/photo/uptrend-line-candlestick-graph-financial-diagrams.webp?b=1&s=170667a&w=0&k=20&c=JBs1z0CI7bv516Um8Xevcg1Ko5IWbYrWsdPvu519qRk=);
                border-radius: 15px;
                box-shadow: 13px 13px 20px #000000, -13px -13px 20px #000000;
                width: 350px;
                margin-top: auto;
                background-size:cover !important;
                margin-bottom: auto;
                /* background: #EDF3F9; */
                /* box-shadow: inset 0px 0px 0px 0 rgba(116,150,179,0.32), inset 0px 0px 15px 0 #1b1b1b; */
                position: relative;
                display: flex;
                justify-content: center;
                flex-direction: column;
                padding: 10px;
                /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
                /* -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
                -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            }
            .brand_logo_container {
                position: absolute;
                height: 135px;
                width: 135px;
                top: -3px;
                border-radius: 50%;
                /* background: #60a3bc; */
                padding: 10px;
                text-align: center;
            }
            .brand_logo {
                height: 69px;
                width: 69px;
                border-radius: 20%;
                /* border: 2px solid white; */
            }
            .form_container {
                margin-top: 60px !important;
                width: 90%;
                margin: auto;
            }
            .login_btn {
                width: 100%;
                background: #c0392b !important;
                color: white !important;
            }
            .login_btn:focus {
                box-shadow: none !important;
                outline: 0px !important;
            }
            .login_container {
                padding: 0 2rem;
            }
            .input-group-text {
                background: #c0392b !important;
                color: white !important;
                border: 0 !important;
                border-radius: 0.25rem 0 0 0.25rem !important;
            }
            .input_user,
            .input_pass:focus {
                box-shadow: none !important;
                outline: 0px !important;
            }
            .custom-checkbox .custom-control-input:checked~.custom-control-label::before {
                background-color: #c0392b !important;
            }
            
            .modal {
                    background: #000000ed;
                    /* backdrop-filter: blur(6px); */
            }
            
            .create_account {
                width: 45%;
                border: 0px !important;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: none;
                box-shadow: 2px 20px 19px 7px #2a282870;
                height: auto;
            }
            
            .create_account label {
        width: 100%;
        margin: auto;
        color: var(--bs-primary);
        font-size: 11px;
        font-weight: 500;
        padding-top: 0px;
        padding-left: 0;
        letter-spacing: 0.5px;
    }
    
    .create_account input {
       font-size: 11px;
       font-weight: normal;
       letter-spacing: 0.5px;
       width: 100%;
       height: 30px;
    }
    
    .create_account select {
       font-size: 11px;
       font-weight: normal;
       width: 100%;
       color: revert;
       margin-bottom: 10px;
       height: 30px;
    }
    
    .create_account span {
        float: right;
        right: 14px;
        font-size: 26px;
        position: absolute;
        color: var(--bs-gray-100);
        /* top: -2px; */
    }
    
    .create_account .wizardButton {
      font-size: 14px;
      Background: var;
      margin-bottom: 0;
      /* padding: 4px; */
      height: 32px;
    }
    
    
     select {
       font-size: 11px;
       font-weight: 600;
       width: 80%;
       height: 30px;
       border-radius: 7px;
       border: solid 1px #232323;
    }
    
     input {
       font-size: 11px;
       font-weight: 600;
       width: 80%;
       height: 30px;
       border-radius: 2px;
       border: solid 1px var(--bs-border-color);
    }
    
    
    .border-right {
      border-right:1px solid var(--bs-border-color) !important;
    }
    
    /*
      Accessibility (A11Y)
      Don't forget! User accessibility is important
    */
    button:focus,
    input[type=button]:focus {
      /* your custom focused styles here */
    } 
    .navbar-toggler:focus {
        text-decoration: none;
        outline: 0;
        box-shadow: none !important;
    }
    
    .container-fluid{margin:0px;padding: 0px !important;}
    body{
      background: var(--white);
    }
    h1,h2,h3,h4,h5,h6{
      font-family:var(--font-primary);
    }
    p{
      font-family: var(--font-secondary);
      /* font-size: 1rem; */
    }
    .navbar2{
      padding: 0rem 0 !important;
      display: contents;
    }
    .navbar1{
      padding: 0.0rem 0 !important;
    }
    .navbar2 .nav-link svg{
      height: 16px;
      width: 16px;
      /* margin-right: 0.5rem; */
    }
    
     .navbar2 .nav-item a:link.nav-link{
      padding: 0.2rem 0.5rem;
    }
    
     .navbar2 .nav-item:hover {
      background:#d2e7e963;
    }
    
    
    
    .navbar{
      background: var(--gray-color, #F1EFF2);
      color: #000;
      font-family: "Segoe UI";
      font-size: 0.8rem;
      font-style: normal;
      background: var(--gray-color);
      /* padding: 0 !important; */
      font-weight: 600;
      border-bottom: 1px solid var(--bs-border-color);
      line-height: normal;
    }
    .navbar .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* remove the gap so it doesn't close */
    }
    .navbar1 .nav-link{
      color:black;
      padding: 0.2rem;
    }
    .navbar .nav-link{
      /* color:black; */
    }
    .disable{filter: grayscale(1);pointer-events: none;cursor: none;}
    
    .navbar .dropdown-menu{
      --bs-dropdown-border-radius: 0;
      --bs-dropdown-item-padding-x: 0.6rem;--bs-dropdown-font-size: 0.8rem;
    }
    .dropdown-menu[data-bs-popper] {
        top: 94% !important;
        left: 0;
        margin-top: var(--bs-dropdown-spacer);
    }
    
     .navbar .dropdown-toggle::after{
      display:none !important;
    }
    .server-tittle{
    
    display: flex;
    
    justify-content: flex-start;
    
    align-content: center;
    
    align-items: center;
    
    padding: 0.5rem;
    }
    .server-tittle img{
    
    margin-right: 0.5rem;
    }
    .server-tittle p{
    
    color: var(--black, #282828);
    
    font-family: "Segoe UI";
    
    font-size: 0.7rem;
    
    font-style: normal;
    
    margin: 0;
    
    font-weight: 600;
    
    line-height: normal;
    }
    
    
    
    .table-height{
        border: 0.5px solid #ccc;
        max-height: 320px;
        overflow-y: auto;
    }
    .symbol-box-child {background: #00000000;width: 50%;height: -webkit-fill-available;box-shadow: 0px 8px 15px 9px #84848438;margin: auto;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
    
    
    .symbol-box-child .modal-dialog{
        width: 100%;
        display: contents;
    }
    
    .symbol-box-child  .tab-content.current{
        height:auto !Important;
    }
    
    .symbol-box {background: #00000000;width: 62%;height: auto;box-shadow: 0px 8px 15px 9px #84848438;margin: auto;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
    
    
    .symbol-box .modal-dialog{
        width: 100%;
        display: contents;
    }
    
    .tabbed-modal {}
    
    .security input{
        margin:0;
        height: 23px !important;
    }
    .security p.hint{
        color: var(--bs-gray-500);
        font-size: 0.6rem;
    }
    .security p{
        margin:0;
        font-size:0.7rem;
        padding-bottom:0px
    }
    
    
    .security button{
        background: var(--bs-gray-300);
        color: #575757;
        height: 23px;
        padding: 0.1rem 1rem !important;
        width:-webkit-fill-available;
    }
    .tabbed-modal .radio-btns .form-check{
        display: flex;
        align-items: center;
    }
    .tabbed-modal .radio-btns .form-check input{
    margin-right:0.2rem !important;	
    }
    .security button:hover{
        background: var(--bs-gray-300);
        color: grey;
    }
    
    .tabbed-modal .tab-content .form-check-input[type=radio]{
        width: 15px;
        padding: 0;
        height: 15px;
        margin: auto;
        border-radius: 100px !important;
        box-shadow: none;
    }
    
    .tabbed-modal .radio-btns{
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        justify-content: center;
        align-items: flex-start !IMPORTANT;
    }
    .tabbed-modal .radio-btns .form-check{
        display: flex !important;
        align-items: center;
    }
    .tabbed-modal .radio-btns .form-check input{
    margin-right:0.2rem !important;	
    }
    
    .tabbed-modal .tab-content label{
          font-size: 0.7rem !important;
          color: var(--bs-black);
         }
    .tabbed-modal .tab-content .form-control:focus
    {
        box-shadow:none;	
    }
    .tabbed-modal .tab-content input,.tabbed-modal .tab-content select{
         width: -webkit-fill-available;
         height: 22px;
         font-size: 0.7rem;
         padding: 0 5px;
         }
    
    .tabbed-modal .tab-content .form-check {
        display: block;
        min-height: 1.5rem;
        padding-left: 0em;
        margin-bottom: 0rem;
    }
    .form-check-input:checked {
        background: url(https://cdn-icons-png.freepik.com/256/1828/1828643.png);
        background-size: 84% 84%;
        border-color: #0d6efd;
        background-repeat: no-repeat !important;
        background-position: center;
    }
    .tabbed-modal .tab-content input[type=checkbox]{
        width:auto;
        height:auto;
        margin: 0;
        box-shadow: none;
        padding: 6px;
        margin-top: 6px;
        margin-right: 8px;
    }
    .tabbed-modal .tab-content .bal-btns{
        display: flex;
        grid-template-columns: auto auto;
        align-content: center;
        grid-column-gap: 6px;
        justify-content: space-between;
        align-items: center;
        margin-top:0.3rem;
    }
    
    .tabbed-modal .tab-content .bal-btns input{
        height:24.5px;
        width:auto;
    }
    .tabbed-modal .tab-content .history-btns{
        display: grid;
        grid-template-columns: 10% 10% 10%;
        align-content: center;
        grid-column-gap: 6px;
        align-items: center;
    }
    .tabbed-modal .tab-content .history-btns select,.tabbed-modal .tab-content .history-btns input{
        margin:5px 0;
        padding: 0 5px;
    }
    .tabbed-modal .tab-content .history-btns button{
        height:auto;
    }
    
    .tabbed-modal .tab-content.form-check label{
    margin:0px !important;
    }
     .tabbed-modal ul.tabs{
            margin: 0px;
            padding: 0px 0 0px 0;
            list-style: none;
        }
     .tabbed-modal ul.tabs li{
            background: linear-gradient(175deg, gainsboro, transparent);
            color: #222;
            display: inline-block;
            padding: 2px 5px;
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;
            cursor: pointer;
            border: 0.5px solid var(--bs-border-color);
            font-size: 0.7rem;
            border-bottom: 0;
        }
    
     .tabbed-modal    ul.tabs li.current{
            background: var(--bs-body-bg);
            color: #222;
            border: 0.5px solid white;
            border-bottom: 0.5px solid white;
        }
    
      .tabbed-modal   .tab-content{
            display: none;
            background: var(--bs-body-bg);
            padding: 1rem;
        }
    
    
      .tabbed-modal .tab-content .user{
          
      }
    
    .tabbed-modal .tab-content .tab-table thead{
        position: sticky;
        top:0;
    }
    .tabbed-modal .tab-content .tab-table tbody{
        height: auto;
        overflow-y: scroll;
    }
      .tabbed-modal .tab-content .tab-table{
          font-size: 0.6rem;
          margin: 0;
          height: initial;
          overflow-y: scroll;
         }
    
     .tabbed-modal .tab-content .tab-table tbody tr td img.dollar{
         width: 10px;
         margin-right:2px;
        }
    
      .tabbed-modal .tab-content .tab-table tbody tr td,.tabbed-modal .tab-content .tab-table thead th{
          padding: 3px 3px;
          align-content: space-between;
          vertical-align: middle;
         }
    
    
    
    .tabbed-modal .tab-content .user p{
          margin-bottom: 3px;
          font-size: 0.7rem;
         }
    
    .tabbed-modal .tab-content .user h5{
          font-size: 0.8rem;
         }
    
    
     .tabbed-modal    .tab-content.current{
            display: inherit;
            height: 65.5vh;
            overflow-y: auto;
        }
    
    .tabbed-modal .modal-footer{
        display: flex;
        justify-content: space-between;
        padding: 0.2rem 0.5rem;
    }
    .tabbed-modal  button{
        font-size: 0.7rem;
        border-radius: 2px;
        padding: 0.2rem 1rem;
    }
    
    .trades{
        display: flex;
    }
    .trades{
        display: grid;
        grid-template-columns: 7% 80%;
        grid-column-gap: 15px;
        margin-top: 1rem;
    }
    
    
    .tabbed-modal .table-btns{
        display: flex;
        flex-direction: column;
        height: 155px;
        
        justify-content: space-between;
        align-items: flex-end;
        align-content: flex-end;
    }
    .tabbed-modal .table-btns button{
        margin-bottom:0.2rem;
        width:100%;
    }
    
    
    .tabbed-modal .modal-header{
        padding: 0.5rem;
        border-top-left-radius: 0px !important;
    }
    .tabbed-modal .modal-header h5{
        font-size: 0.8rem;
        font-weight: 500;
    }
    
    .tabbed-modal .modal-header img{
        width: 20px;
        margin-right: 0.3rem;
    }
    .tabbed-modal .modal-dialog{
        max-width: 80%;
    }
    .tabbed-modal .modal-body{
            background: var(--gray-color);
            padding: 0.5rem;
    }
    
    .tabbed-modal .modal-body .users{
        display:grid;
        grid-template-columns:7% 80%;
        margin-bottom: 9px;
        align-items: center;
        align-content: center;
    }
    .tabbed-modal .modal-body .users img{
        width:48px;
    }
    .tabbed-modal .modal-body .users p{font-size:0.8rem;margin: 0;}
    
    .tabbed-modal .modal-body .box-two{
        display: grid;
        grid-template-columns: 9% auto;
    }
    .tabbed-modal .modal-body .item{
        display: grid;
        align-content: space-between;
    }
    .tabbed-modal .modal-body .item div{
        display: grid;
        align-content: space-between;
        justify-content: end;
    }
    .tabbed-modal .modal-body .item div button{
        display: grid;
        align-content: space-between;
        width: 69px;
        background: lightgray;
        grid-row-gap: 7px;
        margin: 0 1rem 0.2rem;
    }
    .tabbed-modal .modal-body .item div button:hover{
        background: #c6c5c5;
    }
    
    .tabbed-modal .modal-body .item table{
        height: auto;
        margin-bottom: 3px;
        font-size:0.7rem;
    }
    
    .tabbed-modal .modal-body .item table tr td, .tabbed-modal .modal-body .item table  tr th
    {
        padding: 4px !important;
    }
    
    
    
    .time {
      width: 50%;
    }
    
    .time .pagination {
      --bs-pagination-padding-x: 0.3rem;
      --bs-pagination-padding-y: 0.3rem;
      --bs-pagination-font-size: 10px;
      font-weight: 600;--bs-pagination-color: #0200f7;
      --bs-pagination-bg: #a4b0f3;
      --bs-pagination-border-width: var(
      --bs-border-width);
      --bs-pagination-border-color: var(
      --bs-border-color);
      --bs-pagination-border-radius: var(
      --bs-border-radius);
      --bs-pagination-hover-color: var(
      --bs-link-hover-color);
      --bs-pagination-hover-bg: var(
      --bs-tertiary-bg);
      --bs-pagination-hover-border-color: var(
      --bs-border-color);
      --bs-pagination-focus-color: var(
      --bs-link-hover-color);
      --bs-pagination-focus-bg: var(
      --bs-secondary-bg);
      --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
      --bs-pagination-active-color: #fff;
      --bs-pagination-active-bg: #0d6efd;
      --bs-pagination-active-border-color: #0d6efd;
      --bs-pagination-disabled-color: var(
      --bs-secondary-color);
      --bs-pagination-disabled-bg: var(
      --bs-secondary-bg);
      --bs-pagination-disabled-border-color: var(
      --bs-border-color);
      display: flex;
      padding-left: 0;
      list-style: none;
    }
    
    .time .page-item:first-child .page-link {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
    }
    
    .time .page-item:last-child .page-link {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }
    
    .time .page-link {
      position: relative;
      display: block;
      padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
      font-size: var(--bs-pagination-font-size);
      color: var(--bs-pagination-color);
      text-decoration: none;
      background-color: var(--bs-pagination-bg);
      border: solid 1px #d1d1d1;
      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
    
    .time  label {
      /* margin: auto; */
      color: #000000;
      font-size: 11px;
      font-weight: 600;
      margin-bottom: 0.4rem;
      padding-top: 0px;
      margin-right: 7px;
      width: 66px;
    }
    
    .time ul {
      margin-top: 0;
      margin-bottom: 0rem;
    }
    
    .timemd .users {
      display: grid;
      grid-template-columns: 10% 80% !important;
      margin-bottom: 9px;
      align-items: center;
      align-content: center;
    }
    
    .holiday .users {
      display: grid;
      grid-template-columns: 10% 80% !important;
      margin-bottom: 9px;
      align-items: center;
      align-content: center;
    }
    
    .holiday  label {
      /* margin: auto; */
      color: #000000;
      font-size: 13px !important;
      font-weight: 600;
      margin-bottom: 0.4rem;
      padding-top: 0px;
      margin-right: 7px;
      width: 200px;
    }
    
    .time .modal-header img {
      width: 15px !important;
     
    }
    
    .dropdown {
      position: relative;
      font-size: 14px;
      color: #333;
    }
    .dropdown .dropdown-list {
      padding: 0px;
      background: #fff;
      position: absolute;
      top: 25px;
      left: 2px;
      right: 2px;
      box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);
      transform-origin: 50% 0;
      transform: scale(1, 0);
      transition: transform 0.15s ease-in-out 0.15s;
      max-height: 66vh;
      overflow-y: scroll;
    }
    .dropdown .dropdown-option {
      display: flex;
      padding: 4px 8px;
      opacity: 0;
      transition: opacity 0.15s ease-in-out;
      align-items: center;
      align-content: center;
    }
    .dropdown .dropdown-label {
      display: block;
      height: auto;
      background: #fff;
      border: 1px solid #ccc;
      padding: 0.4rem 0.4rem;
      line-height: 1;
      cursor: pointer;
      margin-bottom: 0.3rem !important;
    }
    .dropdown .dropdown-label:before {
      content: "â–¼";
      float: right;
    }
    .dropdown.on .dropdown-list {
      transform: scale(1, 1);
      transition-delay: 0s;
    }
    .dropdown.on .dropdown-list .dropdown-option {
      opacity: 1;
      transition-delay: 0.2s;
    }
    .dropdown.on .dropdown-label:before {
      content: "â–²";
    }
    .dropdown [type=checkbox] {
      position: relative;
      top: -4px;
      margin-right: 4px;
    }