* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Monsteratt", sans-serif;
    color: rgb(41, 41, 41);

}

.mainContent {
    max-width: 1000px;
    margin: auto;
}

p {
    font-size: 16px;
}

.accountTypeLabel {
    font-size: 14px !important;
    color: #515151;
}

#userProfile {
    background-color: transparent;
    cursor: none;
    padding: 6px 8px;
    border-radius: 4px;
   
    transition: 0.3s;
}

#userProfile:hover {
    background-color: rgb(203, 221, 237);
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
    
}

.listItem {
    background-color: rgb(235, 235, 235);
    padding-left: 14px;
    padding-top: 4px;
    padding-right: 4px;
    padding-bottom: 4px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.margin-top {
 margin-top: 20px;
}

.removeButton {
    background-color: rgb(255, 168, 168);
    padding: 4px 10px;
    border-radius: 6px;
    border: none;
    transition: 0.2s;
    font-size: 15px;
    font-weight: bold;
}

.backButtonLink {
    text-decoration: none;
    color: black;
    padding: 4px 10px;
    font-display: flex;
    align-items: center;
    border-radius: 8px;
    background-color: rgb(226, 226, 226);
    transition: 0.3s;
}

.backButtonLink:hover {
    transition: 0.3s;
    background-color: rgb(204, 204, 204);
}

.pageTitleText {
    margin-left: 10px;
    font-size: 20px;
    font-weight: bold;
}

.pageTitleText a {
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 8px;
    background-color: rgb(226, 226, 226);
    transition: 0.3s;
}

.pageTitleText a:hover {
    transition: 1s;
    background-color: rgb(204,204,204);
}

.divider {
    border-bottom: 1px solid rgb(203, 203, 203);
    margin-top: 15px;
    margin-bottom: 15px;
}

.spacer {
    height: 30px;
}

.removeButton:hover {
    background-color: rgb(255, 131, 131);
    padding: 4px 10px;
    border-radius: 6px;
    border: none;
    transition: 0.2s;
    cursor: pointer;
  
}

input {
    height: 25px;
    border: 1px solid grey;
    padding: 4px;
    padding-left: 8px;
    
    border-radius: 8px;
}

.requestButton {
    background-color: rgb(35, 236, 21);
    padding: 4px 6px;
    border-radius: 6px;
    border: none;
    transition: 0.2s;
    font-size: 15px;
    font-weight: bold;
}

.requestButton:hover {
    background-color: rgb(29, 213, 16);
    padding: 4px 6px;
    border-radius: 6px;
    border: none;
    transition: 0.2s;
    cursor: pointer;
}

.toggle-button {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    padding: 5px 10px;
    border: none;
    background: none;
    font-size: 16px;
    font-weight: bold;
    
    border-radius: 8px;
    transition: 0.3s;
    display: flex;
    align-items: center;
}

.toggle-button:hover {
    background-color: rgb(227, 227, 227);
    transition: 0.3s;
}

.toggle-button i {
    margin-left: 8px; /* Space between icon and text */
    transition: transform 0.3s ease; /* Smooth flip effect */
    font-size: 14px;
   
}

.toggle-button.flipped i {
    transform: rotate(180deg); /* Flip the icon */
}

.collapsible {
    overflow: hidden;
    max-height: 0; /* Collapsed state */
    transition: max-height 0.5s ease;
   border-left: 1px solid grey;
    padding: 0 10px; /* Padding for the content */
    
    margin-top: 10px;
}


.collapsible.expanded {
    max-height: 500px; /* Arbitrary large value to accommodate content */
    transition: max-height 0.5s ease-in-out;
}

.pageName {
    text-decoration: none;
    color: black;
}

.pageName:hover {
    text-decoration: none;
    color: rgb(0, 31, 208);
}

.actionButtonSmall {
    background-color: rgb(213, 213, 213);
    padding: 4px 6px;
    border-radius: 6px;
    text-decoration: none;
    color: black;
    font-size: 15px !important;
    transition: 0.2s;
    border: none;
}

.actionButtonSmall:hover {
    background-color: rgb(193, 193, 193);
    padding: 4px 6px;
    border-radius: 6px;
    text-decoration: none;
    color: black;
    transition: 0.2s;
    cursor: pointer;
}

.actionButtonSmall:disabled {
    background-color: rgb(195, 195, 195);
    padding: 4px 6px;
    border-radius: 6px;
    text-decoration: none;
    color: rgb(118, 118, 118);
    transition: 0.2s;
    cursor: not-allowed;
}

.editIcon {
    padding: 4px 6px;
    
    border-radius: 8px;
    transition: 0.2s;
}

.editIcon:hover {
    background-color: rgb(213, 213, 213);
    transition: 0.2s;
}

select {
    height: 25px;
    border: 1px solid grey;
    border-radius: 8px;
}

h4 {
    margin-bottom: 4px;
    margin-top: 18px;
}

.pursuitItemText {
    text-decoration: none;
    font-size: 16px;
    
}
.pursuitItemText:hover {
    text-decoration: underline;
    font-size: 16px;
    
}

.primaryTextArea {
    width: 50%;
    height: 30px;
    resize: none;
    border: 1px solid grey;
    border-radius: 8px;
    padding: 4px;
    padding-top: 6px;
    padding-left: 10px;
}

.actionButtonSmall:active {
    transform: scale(0.97);
}

.listContainer {
    margin-top: 10px;
}

#profileMenu {
    display: none;
    
}

#profileMenu.active {
    display: block;
    transition: width 0.6s ease-in-out;
}

.hideLink {
    text-decoration: none;
    color: #000acd;
}

.centerText {
    text-align: center;
    margin-top: 20px;
}


.pageHeader {
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    padding-left: 20px;
    padding-right: 12px;
    border-bottom: 1px solid rgb(187, 187, 187);
   background-color: rgb(225, 240, 255);
}



.actionRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
    border-bottom: 1px solid rgb(187, 187, 187);
   
}

.flex {
    display: flex;
    
}

.alignCenter {
    align-items: center;
}

.mainContent {
    padding: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 25px;
}

i {
    color: black;
}

.actionButtion {
    padding: 6px 10px;
    border-radius: 8px;
    background-color: rgb(0, 119, 255);
    color: white;
    text-decoration: none;
    font-size: 16px;
    margin-left: 10px;
    transition: 0.3s;
} 

.actionButtion:hover {
    padding: 6px 10px;
    border-radius: 8px;
    background-color: rgb(49, 145, 255);
    color: white;
    text-decoration: none;
    font-size: 16px;
    margin-left: 10px;
    transition: 0.3s;
    cursor: pointer;
} 

.actionButtionSecondary {
    padding: 4px 10px;
    border-radius: 8px;
    border: 2px solid rgb(49, 145, 255);
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-size: 16px;
    margin-left: 10px;
    transition: 0.3s;
} 

.actionButtionSecondary:hover {
    background-color: rgb(222, 238, 255);
    border: 2px solid rgb(49, 145, 255);
    transition: 0.3s;
    cursor: pointer;
    
} 

 

.accountChip {
    font-size: 20px;
    padding: 8px 10px;
    border-radius: 8px;
    transition: 0.2s;
}

.accountChip:hover {
    background-color: rgb(239, 168, 168);
    padding: 8px 10px;
    border-radius: 8px;
    transition: 0.2s;
}


.accountChip:active {
    transform: scale(0.97);
    transition: 0.3s;
}


.field {
    position: relative;
    margin-top: 10px;
  }
  
  .field input {
    height: 45px;
    width: 100%;
    border-radius: 10px;
    margin-top: 10px;
    border: 2px solid #b3b3b3;
    transition: 0.1s ease;
    line-height: 20px;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.3333333333);
    padding-left: 20px;
    font-size: 15px;
    color: rgb(0, 0, 0);
  }
  
  label {
    position: absolute;
    top: 23px;
    left: 25px;
    transition: 0.2s ease-in-out;
    font-size: 1rem;
    font-weight: 400;
  }
  
  label::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background-color: rgb(253, 253, 253);
    transition: 0.2s ease;
    z-index: -1;
  }
  
  input:focus,
  textarea {
    outline: none !important;
  }
  
  .field input:focus {
    color: black;
    border: 2px solid black;
  }
  
  .field input:valid {
    color: green;
    border: 2px solid green;
  }
  
  input:not(:-moz-placeholder-shown) {
    border-color: red;
    -moz-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
  }
  
  input:not(:placeholder-shown) {
    border-color: red;
    transition: 0.2s ease-in-out;
  }
  
  input:not(:-moz-placeholder-shown) + label {
    color: red;
    transform: translate(-12px, -20px);
    font-size: 0.875rem;
    background-color: transparent;
    z-index: 1112;
    padding-left: 0.4375rem;
    padding-right: 0.4375rem;
    -moz-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
  }
  
  input:not(:placeholder-shown) + label {
    color: red;
    transform: translate(-12px, -20px);
    font-size: 0.875rem;
    background-color: transparent;
    z-index: 1112;
    padding-left: 0.4375rem;
    padding-right: 0.4375rem;
    transition: 0.2s ease-in-out;
  }
  
  .matching-txt {
    display: none;
    text-align: center;
    margin-top: 5px;
    font-size: 13px;
  }
  
  input:focus + label {
    color: black;
    transform: translate(-12px, -20px);
    font-size: 0.875rem;
    background-color: transparent;
    z-index: 1112;
    border-radius: 20px;
    padding-left: 0.4375rem;
    padding-right: 0.4375rem;
    transition: 0.2s ease-in-out;
  }
  
  input:valid + label {
    color: green;
    transform: translate(-12px, -20px);
    font-size: 0.875rem;
    background-color: transparent;
    z-index: 1112;
    border-radius: 20px;
    padding-left: 0.4375rem;
    padding-right: 0.4375rem;
    transition: 0.2s ease-in-out;
  }
  
  .register-container h2 {
    font-size: 18px;
  }

  .register-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .register-header h1 {
    padding-left: 15px;
    padding-top: 9px;
  }
  
  .register-container {
    width: 25rem;
    background-color: rgba(255, 255, 255, 0.91);
    border-radius: 20px;
    margin: auto;
    font-weight: 300;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    padding: 25px;
    box-shadow: 8px 8px 40px 10px rgba(199, 199, 199, 0.543);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
  }

  #login-button {
    width: 35%;
    background-color: rgb(39, 178, 39);
    border-radius: 10px;
    height: 40px;
    border: none;
    font-size: 16px;
    transition: 0.2s;
    box-shadow: 4px 4px 20px 5px rgba(199, 199, 199, 0.543);
    color: white;
    font-weight: bold;
  }


  #login-button:hover {
    width: 35%;
    background-color: rgb(28, 155, 28);
    border-radius: 10px;
    height: 40px;
    border: none;
    font-size: 16px;
    transition: 0.2s;
    box-shadow: 4px 4px 20px 5px rgba(199, 199, 199, 0.543);
    color: white;
  }


  #login-button:active {
    transform: scale(0.97);
  }

#register-button {
   
        width: 35%;
        background-color: rgb(48, 121, 189);
        border-radius: 10px;
        height: 40px;
        border: none;
        font-size: 16px;
        transition: 0.2s;
        box-shadow: 4px 4px 20px 5px rgba(199, 199, 199, 0.543);
        color: white;
        font-weight: bold;
      
}

#register-button:hover {
   
    width: 35%;
    background-color: rgb(34, 102, 166);
    border-radius: 10px;
    height: 40px;
    border: none;
    font-size: 16px;
    transition: 0.2s;
    box-shadow: 4px 4px 20px 5px rgba(199, 199, 199, 0.543);
    color: white;
  
}

#register-button:active {
   
    transform: scale(0.97);
  
}

  .secondaryButton {
    background-color: transparent;
    display: flex;
    align-items: center;
    height: 40px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: none;
    font-size: 1rem;
    border-radius: 10px;
    transition: 0.2s;
    color: black;
    font-weight: 400;
  }
  
  .secondaryButton a {
    background-color: transparent;
    color: black;
    text-decoration: none;
  }
  
  .secondaryButton:hover {
    background-color: rgb(233, 233, 233);
    transition: 0.2s;
  }

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

  .modalContainer {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }