.container-vh {
    flex-direction: row; /* Or column, based on your layout */
    justify-content: space-between; /* Adjusts spacing between sections */
    align-items: stretch; /* Ensures equal height for each section */
    width: 100%;
    height: 100vh; /* Makes sure the container height is equal to viewport height */
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
   /* Section layout */
   .section {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%; /* Adjust width depending on how many sections you want in a row */
    margin: 10px; /* Optional: for spacing between sections */
    height: 100%; /* Ensures the section stretches to the full height of its parent */
    max-height: 90%;
}
    .section label {
        font-weight: bold;
        margin-bottom: 8px;
        display: block;
    }

    /* Styled inputs */
    .section input, .section select {
        width: 100%;
        height: 40px;
        padding: 0 6px;
        margin-bottom: 15px;
        border-radius: 4px;
        border: 1px solid #ddd;
        font-size: 16px;
        box-sizing: border-box;
    }

    .section select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: #f8f9fa;
        color: #333;
        font-weight: 600;
        cursor: pointer;
        padding-right: 30px;
    }

    .section select:focus {
        outline: none;
        border-color: #252525;
    }

    .section button {
        padding: 6px 12px;
        background-color: #252525;
        color: white;
        font-weight: bold;
        border: none;
        cursor: pointer;
        border-radius: 4px;
        font-size: 16px;
    }

    .section button:hover {
        background-color: #363636;
    }

    /* Default Button Styles */
    #call, #put {
        padding: 6px 24px;
        border: none;
        border-radius: 5px;
        color: white;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
        margin-right: 5px;
    }

    /* Light Button Background Colors */
    #call {
        background-color: #a1d88f; /* Light Green */
    }

    #put {
        background-color: #e57373; /* Light Red */
    }

    /* Hover Effects for Light Buttons */
    #call:hover {
        background-color: #78b464; /* Bright Green */
        transform: scale(1.05); /* Slight zoom on hover */
    }

    #put:hover {
        background-color: #f44336; /* Bright Red */
        transform: scale(1.05); /* Slight zoom on hover */
    }

    /* Active Button Styles (when selected) */
    #call.active {
        background-color: #458a49; /* Bright Green */
    }

    #put.active {
        background-color: #dc3545; /* Bright Red */
    }

    /* Optional: Styles when a button is not selected */
    #call:not(.active):hover, #put:not(.active):hover {
        background-color: #78b464; /* Light Yellow-Green for inactive call hover */
    }

    #put:not(.active):hover {
        background-color: #ef9a9a; /* Light Pink for inactive put hover */
    }
    /* Results section */
    .results {
        background-color: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        width: 100%;
    }

    .results p {
        font-size: 16px;
        margin: 10px 0;
        align-items: start;
    }

    .results p span {
        font-weight: bold;
    }
    /* General button container style */
.button-selector {
    gap: 20px; /* Space between buttons */
    margin-top: 20px;
}

/* Button style */
.selector-button {
    padding: 12px 34px;
    margin-right: 5px;
    font-size: 14px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #d3d3d3; /* Light color by default */
    color: white;
    transition: background-color 0.3s, transform 0.2s;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hover effect */
.selector-button:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Active button style (when selected) */
.selector-button.active {
    background-color: #007bff; /* Bright blue for active */
    transform: scale(1.05); /* Slightly enlarge for active button */
}

/* Default inactive button color changes */
#sr {
    background-color: #28a745; /* Green for OI Interest */
}

#oi {
    background-color: #ffc107; /* Yellow for Support & Resistance */
}

#oi_sr {
    background-color: #dc3545; /* Red for OI & SR */
}

/* Inactive states for buttons */
#sr.inactive {
    background-color: #a1d88f; /* Light Green for inactive */
}

#oi.inactive {
    background-color: #ffe78e; /* Light Yellow for inactive */
}

#oi_sr.inactive {
    background-color: #f1a7a7; /* Light Red for inactive */
}

/* Active state styling for each button */
#sr.active {
    background-color: #218838; /* Darker Green for active */
}

#oi.active {
    background-color: #e0a800; /* Darker Yellow for active */
}

#oi_sr.active {
    background-color: #c82333; /* Darker Red for active */
}

/* Active button when clicked */
.selector-button:active {
    transform: scale(0.98); /* Slight shrink effect when clicked */
}
.strike{
    padding: 5px 10px;
    margin-top: 0;
    background-color: rgb(214, 214, 214);
    color: #252525;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: capitalize;
}
.ce{
    background-color: #78b464; /* Bright Green */
    color: white;
}
.pe{
    background-color: #f44336; /* Bright Green */
    color: white;
}
.section h5{
    background-color: #f0f0f0;
    border-radius: 4px;
    padding: 10px;
    color: #252525;
    font-size: 17px;
}
.br_red{
    border: 1px solid red;
}
.main{
    padding-left: 200px;
}
.dtop-header {
    background: #ffffff;
    color: rgb(0, 0, 0);
    padding: 1rem;
    text-align: right;
    display: none;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #1f1f1f0c;
    box-shadow: 1px 1px 10px #1f1f1f15;
}
.dtop-header .logo{
    width: 220px;
    height: 50px;
}
.dtop-header .logo img{
    width: 100%;
}

.dtop-header .menu-toggle {
    background: none;
    border: none;
    color: rgb(29, 29, 29);
    font-size: 1.5rem;
    cursor: pointer;
    display: none; /* Hidden by default */
}

.dleft-sidebar {
    width: 250px;
    background: #ffffff;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: start;
    box-shadow: 1px 1px 1px #cccccc;
    z-index: 99;
}

.dleft-sidebar .logo {
    width: 100%;
    height: 60px;
    background-color: #15233c10;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dleft-sidebar .logo img{
    width: 90%;
    margin-left: -5px;
}
.dleft-sidebar .name{
    margin-top: 25px;
    width: 100%;
    padding: 0px 15px;
}
.dleft-sidebar .name span{
    color: #1e3458;
}
.dleft-sidebar ul {
    list-style-type: none;
    padding: 0px 15px;
    width: 100%;

}

.dleft-sidebar ul li {
    margin: 10px 0;
}

.dleft-sidebar ul li a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    display: block;
    width: 100%;
    padding: 5px 15px;
    color: #1f1f1f;
    border-radius: 4px;
}
.dleft-sidebar ul li a:hover{
    color: #007ba7;
    font-weight: 500;
}
.dleft-sidebar ul.pt-3 > li > ul.submenu {
    padding: 0;
    margin: 0px 30px;
    left: 100%;
    top: 0;
}
.dleft-sidebar ul li .active{
    border: 1px solid #007ba7;
    color: #007ba7;
    background-color: #007aa70e;
}
.dleft-sidebar .profile-logout{
    position: absolute;
    bottom: 5%;
    width: 100%;
}
.dleft-sidebar .profile-logout a{
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: block;
    width: 85%;
    padding: 5px 15px;
    margin-top: 10px;
    border-radius: 4px;
    text-align: center;
    display: flex;
    justify-content: center;
}
.pl-login{
    border: 2px solid #F6461A;
    color: #F6461A;
    background: transparent;
} 
.pl-login:hover{

    background-color: #F6461A0a;
}
.pl-login-ao{
    border: 2px solid #1a79f6;
    color: #1a79f6;
    background: transparent;
} 
.pl-login-ao:hover{

    background-color: #1a79f60a;
}
.pl-logout{
    border: 2px solid #d8aa15;
    color: #ffffff;
    background-color: #d8aa15;
}
.dleft-main {
    margin-left: 250px;
    padding: 0 25px;
    flex-grow: 1;
    box-sizing: border-box;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .dtop-header{
        display: flex;
    }
    .dtop-header .menu-toggle {
        display: block; /* Show the menu button */
    }

    .dleft-sidebar {
        transform: translateX(-100%); /* Hide the sidebar */
    }

    .dleft-sidebar.active {
        transform: translateX(0); /* Show the sidebar when active */
    }

    .dleft-main {
        margin-left: 0;
        padding-top: 3rem; /* Adjust padding for the header */
    }
}
.cpay-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}
.cpay-top h5 {
    margin: 0;
    padding-left: 5px;
    font-weight: 600;
}
.cpay-top span {
    margin: 0;
    font-size: 14px;
}
.cpay-top span a{
    background-color: #007ba7; /* Green */
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px;
    margin: 2px 1px;
    cursor: pointer;
    border-radius: 4px;
}
.paginationdiv{
    margin-top: 10px;
    width: 100%;
    background-color: #ccc;
    height: 45px;
    display: flex;
    justify-content: center;
  }
  #paginationContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
  }
  
  /* Previous and Next buttons */
  #paginationContainer button {
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin: 0 5px;
    outline: none;
  }
  
  #paginationContainer button.disabled {
    background-color: #ccc; /* Disabled button style */
    cursor: not-allowed;
  }
  
  /* Center pagination numbers */
  #paginationNumbers {
    display: flex;
    justify-content: center;
  }
  
  #paginationNumbers button {
    padding: 3px 12px;
    margin: 0 5px;
    border: 1px solid #ddd;
    background-color: #f8f9fa;
    color: #007bff;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
  }
  
  #paginationNumbers button.active {
    background-color: #007bff;
    color: white;
    font-weight: bold;
  }
  #paginationContainer button:hover{
    background-color: #000;
  }
  
  /* Responsive styling for smaller screens */
  @media (max-width: 768px) {
    #paginationContainer {
        flex-direction: column;
    }
    #paginationNumbers {
        margin-top: 10px;
    }
  }
   
  .data-tb{
    width: 100%;
    overflow-x: scroll;
    max-height: 80vh; /* Adjust this value to set the desired max height based on viewport height */
    overflow-y: auto;
    position: relative;
  }
  .data-tb >table {
    width: 100%;
    border-collapse: collapse;
  }
  .data-tb > table th, td {
    border: 1px solid #bbbbbb;
    padding: 3px;
  }
  
  .data-tb > table thead {
    border: 1px solid #bbbbbb;
  }
  .data-tb > table tr th{
    font-size: 14px;
    background: #ccc;
    color: #252525;
    text-transform: uppercase;
  }
  .data-tb > table th {
    background-color: #e4e4e4;
    text-align: left;
    text-transform: capitalize;
    font-weight: 500;
    position: sticky;
    top: -1px; /* Stick to the top when scrolling vertically */
    z-index: 1; /* Ensure headers are above other content */
    border: 1px solid #bbbbbb;
  }
  .data-tb > table tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  .data-tb > table tr:hover {
    background-color: #ddd;
  }
  .data-tb > table th, td {
    text-align: center;
    font-size: 13px;
    text-transform: capitalize;
    white-space: nowrap;
  }
  .data-tb .action-button {
    background-color: #007ba7; /* Green */
    border: none;
    color: white;
    padding: 1px 12px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    font-size: 13px;
    margin: 2px 1px;
    cursor: pointer;
    border-radius: 4px;
  }
  .btn-hide{
    display: none;
  }
  .no-results{
    padding: 15px;
  }
  .w-100{
    width: 100%;
  }
#strike_execute, #strike_calculator{
    display: none;
}

#sl-form{
    width: 90%;
    background-color: rgb(243, 243, 243);
    padding: 25px;
    border-radius: 4px;
    box-shadow: 1px 2px 5px #38383844;
}

  #sl-form input[type=text]{
    width: 100%;
    height: 45px;
    padding: 7px;
    border-radius: 4px;
    font-size: 15px;
    color: #242424;
    font-weight: 500;
  }
  #sl-form input[type=password]{
  width: 100%;
  height: 45px;
  padding: 7px;
  border-radius: 4px;
  font-size: 15px;
  color: #242424;
  font-weight: 500;
  }
  #sl-form input[type=number]{
  width: 100%;
  height: 45px;
  padding: 7px;
  border-radius: 4px;
  font-size: 15px;
  color: #242424;
  font-weight: 500;
  }
  #sl-form input::placeholder{
    font-weight: 500;
    font-size: 14px;
  }
  #sl-form button{
    width: 100%;
    height: 35px;
    margin: 10px 0px;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
    background-color: #007ba7;
    color: #ffffff;
    border: 3px solid #007ba7;
    border-radius: 4px;
    -webkit-transition-duration: 500ms;
    -o-transition-duration: 500ms;
    transition-duration: 500ms;
    cursor: pointer;
  }
  #sl-form button:focus{
  outline: none;
  }
  .sl-formborder{
    border: 1px solid #d8d8d8;
}
#sl-form a{
    font-size: 14px;
    margin-top: 20px;
}
.sl-form-g{
    margin-bottom: 8px;
}

.form_error span{
    font-size: 13px;
    color: var(--red);
}
.font-13{
    font-size: 13px;
}
.sl-form-dc h4, p{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.sl-form-dc-img{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
.sl-form-dc img{
    width: 200px;
    
}
.body-gr{
    background-color: rgb(250, 250, 250);
}
/* Center */
.div-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

/* Timer box */
.timer-box {
  background: #fff;
  padding: 50px 70px;
  border-radius: 4px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  text-align: center;
  width: 90%;
  max-width: 600px;
}

#status {
  font-size: 22px;
  color: #e67e22;
  margin-bottom: 10px;
}

#countdown {
  font-size: 50px;
  font-weight: bold;
}

#minutes { color: #333; }
#seconds { margin-left: 5px; }

#action {
  margin-top: 15px;
  font-size: 20px;
  font-weight: bold;
}

.red { color: red; }
.green { color: #00c853; }

.green-blink {
  color: #00c853;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% { opacity: 0.3; }
}
.te-fdiv{
    margin-bottom: 10px;
}
.te-fdiv label{
    margin: 0;
    font-weight: 500;
    color: rgb(29, 29, 29);
}
.te-form input,
.te-form select {
    width: 100%;
    height: 38px;              /* slightly increased */
    border-radius: 3px;
    border: 1px solid #00427b5f;
    background-color: #ffffff;
    outline: none;
    padding: 6px 10px;         /* reduce vertical padding */
    margin: 5px 0 10px;
    box-sizing: border-box;    /* IMPORTANT fix */
}
.dflex{
    display: flex;
}
.te-form button {
      width: 100%;
      padding: 10px 7;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      height: 38px;
    }