/* Customize the button with class accent4-button */
.accent4-button {
  border-color: #002f6c !important;
  color: #002f6c !important; /* text color  */
  border-radius: 12px !important; /* border roundness */
  --theme-color-text_link2: #00aeef !important; /* hover background fill color */
  --theme-color-inverse_link: #002f6c !important; /* hover text color */
}


.CustomButtonStyle .vc_btn3.vc_btn3-color-grey.vc_btn3-style-modern {
    color: #395591 !important; /* text color */
    border-color: #395591 !important; 
    background-color:#ffffff !important; 
    border-radius: 10px !important;
}
.CustomButtonStyle .vc_btn3.vc_btn3-color-grey.vc_btn3-style-modern:hover {
    color: #ffffff !important; /* text color */
    border-color: #00aeef !important; 
    background-color:#00aeef !important; 
}


.CustomButtonStyleAlt .vc_btn3.vc_btn3-color-grey.vc_btn3-style-modern {
    color: #ffffff !important; /* text color */
    border-color: #00aeef !important; 
    background-color:#87c041 !important;  
    border-radius: 10px !important;
    font-size: 30px;   
    font-weight: bold;
}
.CustomButtonStyleAlt .vc_btn3.vc_btn3-color-grey.vc_btn3-style-modern:hover {
    color: #395591 !important; /* text color */
    border-color: #395591 !important; 
    background-color:#ffffff !important; 
}

/* shadows for the callout boxes*/
.CalloutBox .vc_column-inner {
  box-shadow: 
  8px 8px 12px rgba(0, 0, 0, 0.2),  /* original shadow to bottom right */
    -8px 8px 12px rgba(0, 0, 0, 0.2); /* new shadow to bottom left */
    border-radius: 5px 5px 5px 5px;
    width: 85% !important;
}


/* limits width of elemetns. was created because I was unable to make the seperator not fill the entire length of an element */
.limited-width {
  width: 70% !important;
  /* margin: 0 auto; /* centers the element if needed */
}

/* limits height of element. was created because the blank space was not changing from a default value as it was being overwritten by .vc_empty_space.sc_height_tiny */
.vc_empty_space.sc_height_tiny.limited-height {
  height: 10px !important;
}


a.custom-text {
  /* Optional: Define the initial text color. If you want to retain the element's original color, you can omit this line. */
  /* color: inherit; */

  /* Smooth transition for color changes */
  transition: color 0.3s ease;
}
/* Define the hover state */
a.custom-text:hover {
  color: #00aeef !important; /* hover color */
}

/* Increase the maximum width of the tooltip and allow text to wrap */
.trx_addons_tooltip[data-tooltip-text]:hover::after {
    white-space: normal; /* Allow text to wrap to the next line */
    word-wrap: break-word; /* Break long words if necessary */
    font-size: 10px;
     max-width: 300px;
}

.DetailButton {
			color: #000000 !important;
			background-color: #e1f339 !important;
			border-color: #000000 !important;
			border-width: 1px;
			border-style: solid;
			font-size: 15px !important; 
			border-radius: 10px !important;
			padding: 7px 10px !important;
			max-width: 113px;
			font-weight: bold;
			cursor: pointer
		}
.DetailButton:active {
			color: #000000 !important;
			background-color: #c4ff3b !important;
		}

.TableButton {
			color: #000000 !important;
			background-color: #e1f339 !important;
			border-color: #000000 !important;
			font-size: 15px !important;
			border-radius: 10px !important;
			padding: 10px 10px !important;
			cursor: pointer
			
		}
.TableButton:hover {
			color: #000000 !important;
			background-color: #ffffff !important;
		}