body {
     background-color: var(--bgColor);
 }

 .widgetDetailComp .well {
     box-shadow: var(--box-shadow40);
     background-color: white; 
     padding: 0px 10px;
     border-radius: 10px;
 }

 .widgetDetailComp .well .list-group-item {
     margin: 10px 0px 0px 0px;
     padding: 15px;
     border-radius: 5px;
     background-color: white;
     transition: 0.3s ease-in;
 }

 .widgetDetailComp .well .list-group-item:hover {
     background-color: rgba(0, 46, 105, 0.1);
     transition: 0.3s ease-in;

 }

 .widgetDetailComp .well .BtnServices {

     background-image: var(--bgImage);
     padding: 12px 25px;
     border-radius: 5px;
     color: white;
     font-size: 1.1em;
     border: none;
     width: 100%;
     margin: 15px 0px;
     transition: opacity 0.3s ease;
 }

 .form-group {
     position: relative;
     margin-top: 15px;
 }

 .widgetDetailComp .well input {
     width: 100%;
     padding: 25px 10px 25px 15px;
     font-size: 16px;
     border: none;
     display: block;
     border-radius: 5px;
     border: 1px solid var(--themeColor);
     background: transparent;
 }

 .widgetDetailComp .well select {
     width: 100%;
     height: 50px;
     font-size: 14px;
     border: none;
     display: block;
     border-radius: 5px;
     border: 1px solid var(--themeColor);
     background: transparent;
 }

 .widgetDetailComp .well label {
     position: absolute;
     top: 15px;
     left: 15px;
     color: #999;
     font-weight: normal;
     font-size: 1em;
     pointer-events: none;
     transition: 0.2s ease all;
 }

 /* Move label up when input is focused or not empty */
 .widgetDetailComp .well input:focus~label,
 .widgetDetailComp .well input:not(:placeholder-shown)~label {
     top: -20px;
     left: 0px;
     font-size: 0.9em;
     color: #5264AE;
 }

 .widgetDetailComp .well textarea:focus~label,
 .widgetDetailComp .well textarea:not(:placeholder-shown)~label {
     top: -20px;
     left: 0px;
     font-size: 0.9em;
     color: #5264AE;
 }

 .contactPerComp .well {
     box-shadow: var(--box-shadow40);
     background-color: white;
     border-radius: var(--borderRadius10);
     padding: 5px 15px 0px 15px;
     border-radius: 10px;
 }

 .lineDivider {
     height: 1px;
     background-color: rgba(0, 46, 105, 0.2);
     margin: 10px 0px;
 }

 .contactPerComp .well h3 {
     font-size: 1.3em;
     margin: 0px;
 }

 .contactPerComp .well h4 {
     font-size: 1em;
     font-weight: 600;
     padding-bottom: 10px;
 }

 .contactPerComp .well h5 {
     padding-bottom: 10px;
     font-size: 1em;
     margin: 0px;
     font-style: italic;
     padding-top: 8px;
 }

 .contactPerComp .well h6 {
     padding-bottom: 10px;
     font-size: 1.1em;
     margin: 0px;
     padding-top: 5px;
 }

 .actionButtonIcons {
     background-color: var(--themeColor);
     color: white;
     border: 0px;
     border-radius: 5px;
     font-size: 0.8em;
     float: right;
     padding: 5px 15px;
 }

 .sidebarMenus a {
     padding: 15px;
     color: var(--themeColor);
     text-decoration: none;
     margin: 0px;
 }

 .sidebarMenus .list-group-item {
     margin-top: -10px;
     margin-bottom: 0px;
     transition: 0.3s ease-in;
 }


 .sidebarComp .well {
     box-shadow: var(--box-shadow40);
     background-color: white;
     border-radius: var(--borderRadius10);
     padding: 5px 15px 0px 15px;
     border-radius: 10px;
 }

 .widgetStudentComp .BtnServices {

     background-image: var(--bgImage);
     padding: 12px 25px;
     border-radius: 5px;
     color: white;
     font-size: 1.1em;
     border: none;
     width: 100%;
     margin: 15px 0px;
     transition: opacity 0.3s ease;
 }
 
 
 .widgetStudentComp .actionButtonProfile {
     background-color: var(--themeColor);
     border-radius: 3px;
     border: none;
     height: 40px;
     aspect-ratio: 1;
     margin-left: 40px;
     margin-top: -50px;
     border-radius: 50%;
     position: absolute;
     text-align: center;
     font-size: 1em;
     transition: 0.5s;
     color: white;
     border: 1px solid var(--theme-color);
 }

 .popUpModal input {
     width: 100%;
     padding: 23px 10px 23px 15px;
     font-size: 16px;
     border: none;
     display: block;
     border-radius: 5px;
     border: 1px solid var(--themeColor);
     background: transparent;
 }

 .popUpModal .modal {
     z-index: 55555555;
     background-color: rgba(0, 46, 105, 0.4);
 }

 .popUpModal .modal-dialog {

     padding-top: 10%;
 }

 .containerWrapper {
     display: flex;
     width: 100%;
 }

 
 .profile {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 0px;
     overflow: hidden;
     border-radius: 50%;
     transition: all 0.3s ease;
 }

 .profile img {
     border-radius: 50%;
 }