body {
    font-family: monospace;
    margin: 5px;
    background-color: rgb(238, 238, 238);
    
    

}

.mainContainer{
    margin-right: 10px;
}

  


.group{
   
   
    background-color: rgb(232, 232, 232);
   
  margin-left: 0.5%;
  margin-right: 0.5%;
    
    margin-top: 1%;
    border-radius: 15px;
    margin-bottom: 2%;
}
.question{
    background-color: white;
    color: #000000;
    font-size: 20px;
    
    padding: 1px;
    padding-left: 22px;
    padding-right: 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
   
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

    box-shadow: 
    inset 5px 5px 4px -5px rgba(132, 132, 132, 0.5),   /* left */
    inset -5px 5px 4px -5px rgba(57, 57, 57, 0.5), /* right */
    inset 5px 5px 4px -5px rgba(132, 132, 132, 0.5),   /* top */
    inset 5px -5px 4px -5px rgba(57, 57, 57, 0.5);  /*bottom */
}



.codeName{
    background-color: #282c34;
    color: #ffffff;
    grid-template-columns: auto;
    box-shadow: 
    inset 1px 1px 5px #3b3c3e42
    ;
    border-radius: 10px;
    
}
h1 {
    text-align: center;
  
    display: inline-block;
}

.codePrev{
    grid-template-columns: auto;
    
}
h3{
    text-align: center;
  
    display: inline-block;
}
.out{
  display: grid;
  grid-template-columns: 0.3fr 1.7fr;
  box-shadow: 
  inset 1px 1px 5px #3b3c3e42
  ;
}
.arg{
    margin-top: 5px;
    margin-bottom: 5px;
    display:inline-block;
   right: 0;
    
}

.container {
   padding-top: 15px;
    display: grid;
    grid-template-rows: auto;
    text-align: left;
    

}



#toggleButton {
    font-size: 20px;
  margin-right:0;
    cursor: pointer;
    padding: 10px;
    font-weight: bold;
 
}

.down, .left-column, .right-column {
    
    border: 1px solid #ddd; /* Optional: Adds a border for clarity */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Left and right columns take equal width */
}

 .output-section {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
 
   
    background-color: #ffffff;
}


.down[style="display: none;"],.left-column[style="display: none;"], .right-column[style="display: none;"] {
    display: none;
}
.input-section {
    margin-top: 10px;
}

label {
    display: block;
    margin-bottom: 10px;
}

input {
    padding: 5px;
    margin-right: 10px;
    box-shadow: 
    
    inset 1px 1px 5px #3b3c3e42
    ;
}



table {
    text-align: center;
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 15px;
}


th, td {
    
    text-align: center;
    padding: 8px;
    border: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
}

.complexity-summary {
    margin-top: 20px;
    padding: 10px;
    background-color: #00e5ff5d;
    border: 1px solid #ccd;
    font-size: 16px;
    box-shadow: 
    inset 1px 1px 5px #3b3c3e42
    ;
  
}

.codeSpecialContainer{
    background-color: #282c34;
    color: #00e5ff;
    font-size: 15px;
   margin:0;
    border-radius: 5px;
    pointer-events: none; /* Disables all pointer events */
    user-select: none; 
    display: grid;
    grid-template-rows: auto auto auto auto 50px;
    grid-template-columns: 2fr 1fr 2fr auto;
    grid-template-areas: 
    " codeItem1 . codeItem1a  ."
    " codeItem1  . codeItem1a   . "
    " codeItem2  codeItem2 codeItem2 . "
      "codeItem2a codeItem2a codeItem2a ."
      ". . . ."
    ;
}
.codeItem1a{
    
    grid-area: codeItem1a;
}
.codeItem2a{
    grid-area: codeItem2a;
}
.codeContainer{
    padding-left: 1%;
    background-color: #282c34;
    color: #00e5ff;
    font-size: 15px;
   margin:0;
    border-radius: 5px;
    pointer-events: none; /* Disables all pointer events */
    user-select: none; 
    display: grid;
    grid-template-rows: 1fr 1fr auto 20px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    " codeItem1  codeItem1 codeItem3 codeItem3"
    " codeItem1   codeItem1  codeItem3 codeItem3 "
    " codeItem2  codeItem2  codeItem3 codeItem3 "
    ". . . ."

    ;
}


.codeItem1{
    
    grid-area: codeItem1;
}
.codeItem2{
    display: flex;
    justify-content:end; /* Aligns content horizontally */
    align-items:end; 
    grid-area: codeItem2;
   
}
.codeItem3{
   
    grid-area: codeItem3;
}

.codeItem3{
    display: flex;
    /* Aligns content horizontally */
    align-items:start; 
}

.codeDefContainer{
    background-color: #282c34;
    color: #ffffff;
    font-size: 15px;
   margin:0;
    border-radius: 10px;
    pointer-events: none; /* Disables all pointer events */
    user-select: none; 
    
    line-height: 1.5;
}


  

#customTable {
    text-align: center;
    width: 100%;
    border-collapse: collapse;
   
    font-size: 15px; 
}

#customTable thead th {
    background-color: #333;
    color: #fff;
    padding: 10px;
    border: 1px solid #ddd;
  }
  #customTable tbody tr {
    background-color: #333;
    color: #fff;
    border-bottom: 1px solid #ddd;
  }
  #customTable tbody td {
    padding: 8px;
  }
  
.code-preview  {
    background-color: #282c34;
    color: #00e5ff;
    font-size: 20px;
    
   margin:0;
    border-radius: 5px;
 
}
.code-previewSpecial{
    background-color: #282c34;
    color: #00e5ff;
    font-size: 17px;
    
   margin:0;
    border-radius: 5px;
}

.heading{
    color: #008ac1;
    width: 100%;
    text-align: center;
margin-top: 25px;
    margin-bottom: 10px;
    box-shadow: 
    1px 1px 5px #3b3c3e42
    ;
    
}
.spaceBottom{
    height: 400px;
}

.paramTable{
    padding-right: 1.8%;
    padding-bottom: 1.8%;
}
.paramTable th{
    background-color: rgb(236, 236, 236);
  
  font-size: 16px;

    color: #000000;
}
.paramTable td{
    background-color: rgb(255, 255, 255);
    font-size: 16px;
  
}

#pTable thead th {
    background-color: #b9b9b9;
    color: #000000;
    padding: 10px;
    border: 1px solid #ddd;
  }
  

.specialNotesMaths{
    font-size: 20px;
}


.cache-button {
    background-color: #626262;
    color: white;
    border: none;
    padding: 8px 16px;
    margin: 5px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
}

.cache-button:hover {
    background-color: #050505;
}

#getContainer {
    width: 300px;         /* Set the width */
    padding: 5px;        /* Add padding inside the box */
     /* Center the box horizontally */
    background: #f4f4f4;  /* Light gray background */
    border: 2px solid #ccc; /* Add a light border */
    border-radius: 8px;   /* Rounded corners */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    text-align: center;   /* Center the text inside */
}





.Pre-Ques {
    background-color: #272727;
    color:#00e5ff;
    padding: 25px;
    border: 1px solid #ddd;
    border-radius: 30px;
    overflow-x: auto;
    font-family:  monospace;
  }


 
  .insert-container{
    display: flex;
    font-size: 20px;
    align-items:first baseline;
}

.linkInputA{
    width: 100px;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin:0;
  
}

.linkInput{
    width: 50px;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin:0;
}

.linkButton1{
    padding: 6px 14px;
    font-size: 14px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    
}
.linkButton1:hover{
    background-color: #007bffa8;
    color:rgb(0, 0, 0);
}
.linkButton{
    margin-left: 72px;
    padding: 6px 14px;
    font-size: 14px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.linkButton:hover{
    background-color: #007bffa8;
    color:rgb(0, 0, 0);
}


.langChooseButton{
    width: 150px;
    height: 30px;
    
    align-items: center;   /* vertical centering */
    justify-content: center; /* horizontal centering */

    /* Optional: aesthetics */
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #00f7ff0e;
    border-radius: 4px;
}
.langChooseButton:hover{
    background-color: #00f7ff2d;
}





.scrollHome{
    display:flex;
    align-items:center;
    justify-content: center;   /* Optional: Horizontal centering */
    margin-bottom: 5%;
    
  }
  
  .scrollIcon{
    width: 18em;
  }

  .mainHead{
    display:flex;
    align-items: center;
    justify-content: space-between;
  }

  .pageIcon{
    width: 50%;
    margin-right: 1.5%;
  }