.SS-image171{
	width: 210px;
	height: 200px;
	margin: 5%;
	border: 1px solid grey;
}

.flex{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px;
	align-content: center;
	justify-content: center;
}
.SS-input-field171 {
	 font-family: 'Permanent Marker', cursive;
	border-radius: .7em;
    width: 300px;
	height: 50px;
    padding: 20px;          /* Updated padding */
    margin: 20px 0;         /* Consolidated margin */
   color:grey;
    outline: none;          /* No outline */
    border: none;  
	border-left: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid #999;	/* No border */
    background: white;
    font-size: 30px;        /* Updated font size */
    text-align: center;    /* Centering the text */
	box-shadow:
        
        5px 0px 5px -3px grey,  
        0px 5px 5px -3px grey;   
      
}


.SS-input-field171::placeholder {
	 color:#FFD700;
	  font-family: 'Permanent Marker', cursive;
}
.SS-input-field171-2 {
	 font-family: 'Permanent Marker', cursive;
	border-radius: .7em;
    width: 300px;
	height: 50px;
    padding: 20px;          /* Updated padding */
    margin: 20px 0;         /* Consolidated margin */
   color:black;
    outline: none;          /* No outline */
    border: none;  
	border-left: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid #999;	/* No border */
    background: white;
    font-size: 30px;        /* Updated font size */
    text-align: center;    /* Centering the text */
	box-shadow:
        
        5px 0px 5px -3px grey,  
        0px 5px 5px -3px grey;   
      
}


.SS-input-field171-2::placeholder {
	 color:black;
	  font-family: 'Permanent Marker', cursive;
}
.SS-input-field171-3 {
	 font-family: 'Permanent Marker', cursive;
	border-radius: .7em;
    width: 300px;
	height: 40px;
    padding: 20px;          /* Updated padding */
    margin: 20px 0;         /* Consolidated margin */
   color:grey;
    outline: none;          /* No outline */
    border: none;  
	border-left: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid #999;	/* No border */
    background: white;
    font-size: 25px;        /* Updated font size */
    text-align: center;    /* Centering the text */
	box-shadow:
        
        5px 0px 5px -3px grey,  
        0px 5px 5px -3px grey;   
      
}


.SS-input-field171-3::placeholder {
	 color:grey;
	  font-family: 'Permanent Marker', cursive;
}
  .SS-Add {
	  color: black;
    background-color: #FFD700; 
    border-radius: 2em;       
    font-size: 20px;           
    padding: 40px 40px;            
    border: none;               
    cursor: pointer;           
    transition: all 0.3s ease; 
	width: 200px;
	margin: 20px;
	font-family: 'Francois One', sans-serif;
}
.SS-Output {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-family: 'Francois One', sans-serif;
    font-size: 20px;
    background: white;
    border-radius: .7em;
    width: 120px;
    height: 60px;
    text-align: center;
    box-shadow:
        5px 0px 5px -3px grey,
        0px 5px 5px -3px grey;
}
.SS-Output2 {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-family: 'Francois One', sans-serif;
    font-size: 20px;
    background: #FFD700;
    border-radius: .7em;
    width: 120px;
    height: 60px;
    text-align: center;
   
}
.SS-Output-2 {
	text-shadow: 1px 1px 1px black;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-family: 'Francois One', sans-serif;
    font-size: 50px;
    background: transparent;
    color: #FFD700;
}

  .SS-Get {
	  color: #FFD700;
    background-color: black; 
    border-radius: 2em;       
    font-size: 20px;           
    padding: 20px 10px;            
    border: none;               
    cursor: pointer;           
    transition: all 0.3s ease; 
	width: 220px;
	margin: 5px;
	font-family: 'Francois One', sans-serif;
}
  .SS-Get2 {
	  color: black;
    background-color: #FFD700; 
    border-radius: 2em;       
    font-size: 20px;           
    padding: 15px 10px;            
    border: none;               
    cursor: pointer;           
    transition: all 0.3s ease; 
	width: 220px;
	margin: 15px;
	font-family: 'Francois One', sans-serif;
}
.Fixed{
	color: black;
	background-color:#FFD700;
}
.SS-SelectChoice171 {
    text-align-last: left;
    margin-top: 20px;
    width: 350px;
    background-color: white;
    padding: 10px 30px;
    color: black;
    border-radius: .7em;
    border: none;
    font-family: 'Francois One', sans-serif;
    font-size: 20px;
    margin-bottom: 2%;
    outline: 3px solid black;
   
}


.SS-Add:hover {
    background-color: #EAC117; 
}

  .SS-Instructions {
	font-family: 'Marcellus', serif;
	   margin: 10px 0;
    border: none;
    outline: none;
    background: transparent;
    text-decoration: none;
    font-size: 25px;
    cursor: pointer;
    transition: all 0.3s ease; 
    color: #737373;  /* Default color; you can adjust as needed */
}

.SS-Instructions:hover {
    color: #555;  /* Darken the font color on hover */
    transform: scale(1.05);  /* Slightly enlarge the button on hover */
}

.SS-Instructions:active {
    transform: scale(0.95);  /* Slightly reduce the button size when pressed */
    background-color: rgba(255, 255, 255, 0.1);  /* Optional: Slight white-ish tint */
}


    
     

        .modal-content {
			 box-shadow: 5px 5px 15px  grey;
            width: 70%;
           background: white;
            padding: 40px;
            border-radius: 0.7em;
			font-family: 'Marcellus', serif;
			overflow: auto;
			max-height: 90%;
			margin-bottom: 20px;
			 
        }
		#flex{
			 display: flex;
            flex-direction: row;
			justify-content: center;
			align-items: center;
            gap: 10%;
		}
   .SS-BudgetContainer {
            width: 100%;
            margin: 40px 0;
            background-color: #e6e6e6;
            
            display: flex;
            flex-direction: column;
			justify-content: center;
			align-items: center;
            gap: 10px;
        }
		   .SS-CalculatorContainer {
            width: 100%;
            margin: 40px 0;
            background-color: #FFD700;
          padding: 20px 0;
            display: flex;
            flex-direction: row;
			justify-content: center;
			align-items: center;
            gap: 20%;  /* Provides spacing between the child elements */
        }
		 .SS-ConverterContainer {
            width: 100%;
            margin: 40px 0;
            background-color: black;
          padding: 20px 0;
            display: flex;
            flex-direction: column;
			justify-content: center;
			align-items: center;
            gap: 20%;  /* Provides spacing between the child elements */
        }
			   .SS-GoalContainer {
				   border: 3px solid #FFD700;
            max-width: 100%;
            margin: 10px 0;
            background-color:  #e6e6e6;
            padding: 20px;
            display: flex;
            flex-direction: row;
			justify-content: center;
			align-items: center;
            gap: 10%;  /* Provides spacing between the child elements */
        }
		   .SS-GoalContainer2 {
				   border: 3px solid #FFD700;
            width: 100%;
            margin: 10px 0;
            background-color:  #e6e6e6;
            padding: 20px;
            display: flex;
            flex-direction: row;
			justify-content: center;
			align-items: center;
            gap: 10%;  /* Provides spacing between the child elements */
        }

        /* Additional styles for the button, select, and input elements */
        .SS-BudgetContainer button,
        .SS-BudgetContainer select,
        .SS-BudgetContainer input {
            padding: 5px;
        }
 
 
 .SS-Ad_Text{
	 font-size: 40px;
	 font-family: 'Permanent Marker', cursive;
 }
.SS-Description_Text{
	font-size: 20px;
	font-family: 'Francois One', sans-serif;
}
.SS-Description_Text4{
	margin-top: 10px;
	font-size: 20px;
	font-family: 'Francois One', sans-serif;
	color: black;

}
.SS-Description_Text5{
	padding: 20px;
	font-size: 30px;
	font-family: 'Francois One', sans-serif;
	text-align: center;
	color: #FFD700;
}
.SS-Description_Text2{
	padding: 20px;
	font-size: 30px;
	font-family: 'Francois One', sans-serif;
	text-align: center;
}
.SS-Description_Text3{
	color: black;
	padding: 20px;
	font-size: 40px;
	 font-family: 'Permanent Marker', cursive;
	text-align: center;
}
 .SS-Advertisement {
	  margin: 20px 0;
            width: 100%;
            height: 100px;
            background-color: #FFD700;
            display: flex;
			flex-direction: column;
           justify-content: center;
            align-items: center;
			gap: 10px;
			padding: 10px 0;
          
        }
.SS-Background171{
	margin: 0;
background-color: white;
	padding-bottom: 100px;

	display: flex;
		flex-direction: column;
	align-content: center;
	justify-content: center;
	align-items: center;

}
.form, .form > div, .form select, .form input, .form button {
    margin: 5px;
    padding: 10px;
    box-sizing: border-box;
}

.form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%; 
    margin: 0 auto; 
}
.alert-message {
    padding: 10px;
    background-color: transparent;
    border: none;
    color: #FFD700;
  
    text-align: center;
	 font-family: 'Permanent Marker', cursive;
	 font-size: 30px;
}




.navbar {
   background-color: black;
    width: 100%;             
    padding: 10px 0;         
    display: flex;           
    justify-content: space-around; /* Distributes space evenly between the buttons */
    align-items: center;   
	
}


.SS-MenuItem {
    color: white;            
    background-color: transparent; 
   outline: none;
   border: none;

    padding: 10px 20px;      
    font-size: 20px;       
    cursor: pointer;         
    transition: 0.3s;       
}



#SS-Table171 td, #SS-Table171 th {
    border-right: 1px solid grey;  /* vertical line */
    border-bottom: 1px solid grey; /* horizontal line */
    margin: 0;
    padding: 10px 10px;  /* Adjust the padding values as needed to control spacing */
}

   #SS-Table171{
	
overflow: auto;
  align-self: center;
  align-content: center;
max-width: 80vw;
  width: 75vw;
 height: auto;
  margin: auto;
  padding: 10px;
border-radius: .7em;
	 box-shadow: 5px 15px 15px  grey;
	background-color: #f7f8f6;
}

#SS-Table171 tr {
    height: 30px !important;
}
#SS-Table171 tr {
    height: 30px; /* Adjust based on desired height */
    overflow: hidden; /* This will hide content that spills out, for testing purposes */
}
#SS-Table171 td {
    height: 30px; /* Adjust based on your preference */
    overflow-y: auto; /* Introduces vertical scroll bar when the content overflows */
    max-height: 30px; /* Ensure this matches the height you've set for the cells */
    vertical-align: top; /* This aligns the content to the top of the cell */
}



    #SS-DataTitle171{
		border-right: 1px solid black;
	padding: 5px 5px;
    font-size: 1.5rem;
text-align: center;
    font-weight:lighter;
	 font-family: 'Permanent Marker', cursive;
   width: 20%;
max-height: 20px;
   color: #FFD700;
   text-shadow: 1px 1px 1px black;

     }



    #tableBody003{  
	
font-size: 25px;
 vertical-align: middle;
  text-align: center;
font-family: 'Francois One', sans-serif;
   color:  black;
  }
  #tableBody003 td:nth-child(2) {
  font-size: 35px;
  vertical-align: middle;
 
}

      #tableBody0003{  
	
font-size: 45px;

  text-align: center;
font-family: 'Francois One', sans-serif;
   color:  black;
  }



@media (max-width: 700px) {
    .SS-CalculatorContainer {
        gap: 3%;
    }#flex{
	  gap: 1%;	
	}
}