* {
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background-color: #efefef;
  min-height:100%;
  width:100%; 
}

/*=====NOTIFICATION Code START====*/
.notification-box {

  position: fixed;

  top: 20px;
  right: 20px;

  padding: 15px 20px;

  border-radius: 8px;

  color: white;

  font-size: 15px;

  opacity: 0;
  visibility: hidden;

  transform: translateY(-20px);

  transition:
  opacity .3s ease,
  transform .3s ease,
  visibility .3s ease;

  z-index: 1002;

  }

  .notification-box.show {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

  }


  .notification-box.success{

    background:#2ecc71;
    color:white;

    }

    .notification-box.error{

    background:#e74c3c;
    color:white;

    }

    .notification-box.warning{

    background:#f39c12;
    color:white;

    }

    .notification-box.info{

    background:#3498db;
    color:white;

    }
  
/*=====NOTIFICATION CODE END =======*/

/*--------------main content start-------------------------*/
.main-container{
display:grid;
grid-template-rows:30px 1fr;
margin-left:55px;
min-height:100%;
}



main{
display:grid;
grid-template-rows:5.6% 12% 38% 44.4%;
}


.s{

  margin:0.05% 0.1%;
}

.s1{
  display:flex;
  justify-content: right;
  padding-right:2%;
}

.s1 button,
.modal-container .modal button {
  border:none;
  background-color:grey;
  height: 30px;
  margin:5px 0;
  padding: 5px;
  border-radius: 3px;
}

#new-trade{
  width:90px;
}

.s1 .btn2{
  display: none;
}

.s2{
  display: grid;
  grid-template-columns:repeat(4, 24%);
  grid-column-gap:0.5%;
  padding-left:0.4%;
}

.c1{
  display:grid;
  grid-row-gap:30%;
}

.c2{
  display: grid;
  grid-template-rows:50% 25% 25%;
}


.meter{
  height:7px;
  border:solid 1px white;
  display: flex;
  border-radius:3px;
  width: 95%;
}

.green{
  background-color:#66FF00;
  width:68%;
}

.red{
  background-color:#f94449;
  width:32%;
}

.values{
  display: flex ;
  justify-content: space-between;
}

.c3,
.c4{
  display: grid;
  grid-row-gap:30%;
}

.c{

  height: 96%;
  border-radius:10px;
  background-color:white;
  border-left:7px solid green;
  padding: 10px;
  
}

.s3{
 display: grid;
 grid-template-columns:30% 30% 40% ;
 gap: 5px;
 padding: 3px;
}

.chart{
  background-color:white;
  border-radius:3px;
}

.s4{
  display: grid;
  grid-template-columns: 49% 49%;
  grid-column-gap:0.7%;
  padding:3px;
}

/* TABLE WRAPPER */

.table.chart{
width:100%;
max-height:350px;
overflow-y:auto;
background:#f4f6fb;
border: 1px solid #e2e8f0;
}

/* TABLE */
.table.chart table{
width:100%;
border-collapse:collapse;
color:#334155;
font-size:13px;
background:#f4f6fb;
}

/* HEADER */
.table.chart thead th{
position:sticky;
top:0;
z-index:10;
background:#ffffff;
color:#8e97a9;
font-weight:500;
text-align:left;
padding:14px 18px;
white-space:nowrap;
border-bottom:1px solid #e2e8f0; 
}

/* ROWS */
.table.chart tbody tr{
background:#ffffff;
transition:.15s;
}

.table.chart tbody tr:nth-child(even){
background:#f8fafc;
}

.table.chart tbody tr:hover{
background:#eef4ff;
}

/* CELLS */
.table.chart tbody td{
padding:16px 18px;
color:#333;
white-space:nowrap;
}

/* DATE COLUMN */
.table.chart tbody td:first-child{
font-weight:500;
color:#333;
}

/* P/L COLORS */
.profit{
color:#6fd37a;
}

.loss{
color:#ff6d7d;
}

/* SCROLLBAR */
.table.chart::-webkit-scrollbar{
width:6px;
}

.table.chart::-webkit-scrollbar-track{
background:#f1f5f9;
}

.table.chart::-webkit-scrollbar-thumb{
background:#cbd5e1 ;
border-radius:10px;
}

/* HEADER SHADOW */
.table.chart thead{
box-shadow:0 2px 10px rgba(0,0,0,.04);
}

/*--------------main content end --------------------------*/

/*-------------------------navbar start-----------------------*/


nav {
background: #7e7e7e;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.6rem 1rem;
}

nav h1 {
font-size: 1.2rem;
color: #fff;
}

.nav-links {
display: flex;
align-items: center;
gap: 1rem;
position: relative;
}

.nav-links i {
font-size: 1.3rem;
cursor: pointer;
}

.nav-links button {
background: #333;
color: #fff;
border: none;
padding: 0.4rem 0.8rem;
border-radius: 5px;
cursor: pointer;
transition: background 0.2s;
}

.nav-links button:hover {
background: #555;
}


/*---------------------navbar end------------------------------*/

/*-----------------sidebar start------------------------------*/
aside{
  position: fixed;
  top:0;
  left: 0;
  background-color:#202020;
  min-height:100vh;
  width:55px;
  align-items: center;
  justify-content: center;
  padding-left: 10px;
}

.logo{
  padding-bottom:25%;
}

.logo i{
  color:blue;
  font-size:30px;
  font-weight:1000;
}

ul {
 list-style: none;
  padding: 0;
  margin: 0;
}


.list-items ul li a,
.profile ul li a{
    color:white;
    text-decoration:none;
    line-height: 30px;
    font-size: 16px;
    padding-left: 8px;
}

.profile{
  position:absolute;
  bottom:0;
}



/*------------------sidebar end----------------------*/


/*------------Calendar css start-------------------------*/

.container {
  width: 100%;
  height: 400px;
  background-color:#fff;
  padding: 10px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.calendar-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 8px;
 font-size: 14px;
}

 .calendar-header button {
 background-color:black;
 border: none;
 color: #fff;
 padding: 6px 10px;
 cursor: pointer;
 border-radius: 4px;
 font-size: 12px;
}

.calendar-title {
 font-size: 16px;
 font-weight: bold;
}

.calendar-wrapper {
 display: flex;
 gap: 8px;
 width: 100%;
 flex: 1;
 overflow: hidden;
}

.calendar {
  flex: 3;
  display: flex;
  flex-direction: column;
}

.weekly-summary {
flex: 1;
background-color: #fff;
border-radius: 6px;
padding: 6px;
overflow-y: auto;
display: flex;
flex-direction: column;
}

.weekly-summary h3 {
margin: 0 0 4px;
font-size: 14px;
border-bottom: 1px solid #333;
padding-bottom: 2px;
}

.week {
margin-bottom: 6px;
padding-bottom: 4px;
border-bottom: 1px solid #2c2c2c;
font-size: 12px;
}


.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 3px;
flex: 1;
}

.day {
text-align: center;
font-weight: bold;
font-size: 10px;
padding: 4px 0;
background-color: #fff;
border-radius: 3px;
}

.date {
background-color: #efefef;
height: 48px;
padding: 4px;
border-radius: 4px;
position: relative;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 10px;
}

.date:hover {
background-color: #333;
}

.date span.day-number {
font-size: 12px;
font-weight: bold;
}

.trade-count {
font-size: 10px;
color: #90caf9;
position: absolute;
bottom: 2px;
right: 4px;
}

.today {
background-color: #2196f3;
color: #fff;
}

.inactive {
opacity: 0.4;
}

/*-------------------Calendar css end-----------------------*/
/*===== OPEN MODAL CODE START ====*/
.modal-overlay {
display: none; /* hidden by default */
position: fixed;
top:0;
left:0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
justify-content: center;
align-items: center;
z-index: 1000;
}


/* Modal container */
.modal-1-container {
background-color: #fff;
width: 470px;
height: 280px; /* fixed height */
border-radius: 6px;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
overflow: hidden;
display: flex;
flex-direction: column;
}

/* Modal header */
.modal-1-container .header {
background-color: #efefef;
padding: 5px 10px;
border-bottom: 1px solid #ddd;
}

.modal-1-container .header h1 {
font-size: 22px;
color: #333;
}

/* Modal body */
.modal-1 {
padding: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(100% - 50px);
}

.m1-s1 {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
}

.m1-s1 h1 {
font-size: 16px;
color: #444;
}

.m1Bts {
display: flex;
justify-content: space-between;
gap: 1px;
}

.status-toggle{
display:inline-flex;
border:1px solid #ccc;
border-radius:8px;
overflow:hidden;
background:#f5f5f5;
}

.status-toggle .status-btn{
border:none;
border-radius:0;
width:90px;
padding:8px 16px;
background:transparent;
color:#555;
font-size:14px;
transition:all .25s ease;
}

.status-toggle .status-btn:hover{
background:#e9e9e9;
color:#333;
}

.status-toggle .status-btn.active{
background:#333;
color:#fff;
}

.status-toggle .status-btn:first-child{
border-right:1px solid #ccc;
}


.m1-s2 {
display: flex;
justify-content: space-between;
gap: 10px;
flex-wrap: nowrap;
align-items: flex-start;
}

.m1-s2 .in {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}

.setup-container {
flex: 0.7;
}

#m-result{
  height:100% ;
  width:7.2rem ;
  border-radius:6px ;
  outline: none;
}

.m1-s2 input,
.m1-s2 select{
padding: 8px;
width: 100%;
border: 1px solid #ccc;
border-radius: 6px;
outline: none;
font-size: 14px;
transition: border-color 0.25s ease;
}

.m1-s2 input:focus,
.m1-s2 select:focus {
border-color: #333;
}

.m1-s3 {
display: flex;
justify-content: flex-end;
border-top: 1px solid #eee;
padding-top: 15px;
}

.form-button {
display: flex;
justify-content: space-between;
width: 100%;
}

.form-button button {
padding: 8px 18px;
border-radius: 6px;
border: none;
font-size: 14px;
cursor: pointer;
transition: all 0.25s ease;
}

.form-button button:first-child {
background-color: #333;
color: #fff;
}

.form-button button:first-child:hover {
background-color: #0069d9;
}

.form-button button:last-child {
background-color: #f5f5f5;
color: #333;
border: 1px solid #ccc;
}

.form-button button:last-child:hover {
background-color: #e0e0e0;
}

/* Fix input/button heights */
input, select, .m-button  {
min-height: 36px;
}

/* Modal arrows */
.modal-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
color: rgb(5, 1, 1);
cursor: pointer;
z-index: 1001;
user-select: none;
transition: color 0.2s ease;
}

#modal-prev {
left: 260px; /* distance from modal left edge */
}



#modal-next {
right: 260px; /* distance from modal right edge */
}

.modal-arrow:hover {
color: #0d73e0;
}

/*=======OPEN MODAL CODE END ====*/

/*---------range modal code start---------*/

.range-modal.active{
 position:fixed ;
 display:flex;
 justify-content:center;
 top:0;
 left:0;
 background-color:rgba(0, 0, 0, 0.2);
 height:100vh;
 width:100vw;
}

.range-modal{
display:none;
}

.range-modal-container{
background-color:#fff;
height:160px;
width:400px;
padding:10px;
position:absolute ;
top:20px;
border-radius:7px;
}

.range-modal-inp-container{
display:flex;
margin-top:10px;
margin-bottom:25px;
}

.range-modal-c input{
width:180px;
}

.range-modal-end-inp,
.range-modal-start-inp{
  height:10px;
}


.range-modal-btn-container{
display:flex;
justify-content:space-between;
}

.range-modal-btn-container button{
background-color:#333;
color:#fff;
border:none;
width:90px;
height:20px;
border-radius:5px;
}

/*----------range modal end---------------*/
 
/*------------Calender Modal START-------*/
.calender-modal.active{
  position:fixed;
  display:flex;
  top:0;
  left:0;
  width:100vw;
  z-index:11;
  height:100vh;
  align-items:center;
  justify-content:center;
  background-color:rgba(0,0,0, 0.2);
}

.calender-modal{
  display: none;
}

.calender-modal-container{
background-color:#fff;
padding:15px;
border-radius:9px;
height:340px;
width:520px;
}

.calender-add-sec{
  display:flex;
  gap:0.7rem;
}

.calender-add-sec button{
  background-color:grey;
  color:#fff;
  border: none;
  width: 6rem;
  padding: 2px 5px;
  cursor: pointer;
  border-radius: 2px;
  font-size: 14px;
  
}

.calender-modal-container-section-A{
display:flex;
justify-content:space-between;
}

.calender-modal-chart-container{
background-color:#efefef;
width:305px;
margin:12px 0;
}

/* TABLE WRAPPER */
.calender-modal-container-section-C{
width:100%;
max-height:115px;
overflow-y:auto;
background:#f4f6fb;
border:1px solid #e2e8f0
}

/* TABLE */
.calender-modal-table{
width:100%;
border-collapse:collapse;
background:#f4f6fb;
color:#334155;
font-size:13px;
}

/* HEADER */
.calender-modal-table thead th{
position:sticky;
top:0;
z-index:10;
background:#ffffff;
color:#8e97a9;
font-weight:500;
text-align:left;
padding:10px 14px;
white-space:nowrap;
border-bottom:1px solid #e2e8f0;
}

/* ROWS */
.calender-modal-table tbody tr{
background:#ffffff;
transition:.15s;
}

.calender-modal-table tbody tr:nth-child(even){
background:#f8fafc;
}

.calender-modal-table tbody tr:hover{
background:#eef4ff;
}

/* CELLS */
.calender-modal-table tbody td{
padding:10px 14px;
color:#333;
white-space:nowrap;
}

/* FIRST COLUMN */
.calender-modal-table tbody td:first-child{
color:#333;
font-weight:500;
}

/* P/L COLORS */
.profit{
color:#6fd37a;
font-weight:600;
}

.loss{
color:#ff6d7d;
font-weight:600;
}

/* SCROLLBAR */
.calender-modal-container-section-C::-webkit-scrollbar{
width:6px;
}

.calender-modal-container-section-C::-webkit-scrollbar-track{
background:#f1f5f9;
}

.calender-modal-container-section-C::-webkit-scrollbar-thumb{
background:#cbd5e1;
border-radius:10px;
}

/* HEADER SHADOW */
.calender-modal-table thead{
box-shadow:0 2px 10px rgba(0,0,0,.04);
}