/* Best Practice: Do not include padding or margin in css main clases. We don't know beforehand where this class shall be used. There may be old padding in the place where this class will be used. */

/* Color variables */
:root {
    /* Font colors */
    --c1: #357288;
    --c2: #324350;
    --c3: #4d606e;
    --c4: #FFFFFF;
    --c5: #E2E6EA;
    --c6: #3A5F83;
    --c7: #27333C;
    --c8: #0099D7;
    --c14: #8F7000; /* For top advert banner against yellow bg */
    --c15: #8E99A1;
    --c17: #6c757d; /* default bootstrap color for secondary */
    /* Gradient & background colors */
    --c9: #84bfd7;
    --c10: #5f83a5;
    --c11: #EBF0F6;
    --c12: #bde;
    --c13: #FFE773;
    --c16: #F7F9FA; /* Primary section bg */
  }

/* Font colors */
.c1{
    color: var(--c1);
}
.c2{
    color: var(--c2);
}
.c3{
    color: var(--c3);
}
.c4{
    color: var(--c4);
}
.c5{
    color: var(--c5);
}
.c6{
    color: var(--c6);
}
.c7{
    color: var(--c7);
}
.c8{
    color: var(--c8);
}
.c14 {
    color: var(--c14);
}
.c15 {
    color: var(--c15);
}
.c17 {
    color: var(--c17);
}
/* Font weight */
.fw-200{
    font-weight: 200;
}
.fw-300{
    font-weight: 300;
}
.fw-400{
    font-weight: 400;
}
.fw-500{
    font-weight: 500;
}
.fw-600{
    font-weight: 600;
}

/* Font size */
.fs-13px{
    font-size: 13px;
}
.fs-14px{
    font-size: 14px;
}
.fs-16px{
    font-size: 16px;
}
.fs-22px{
    font-size: 22px;
}
.fs-28px{
    font-size: 28px;
}
.fs-30px{
    font-size: 30px;
}
.fs-40px{
    font-size: 40px;
}
.fs-42px{
    font-size: 42px;
}
.fs-52px{
    font-size: 52px;
}

/* Line height */
.lh-1-2{
    line-height: 1.2;
}

/* y padding */
.py-71 {
    padding: 71px 0;
}

.py-128 {
    padding: 128px 0;
}

.py-90 {
    padding: 90px 0;
}

.py-107 {
    padding: 107px 0;
}

/* Margin */
.mt-minus-10{
    margin-top: -10px;
}
.mb-minus-10{
    margin-bottom: -10px;
}

/* Radius */
.border-radius-6 {
    border-radius: 6px;
}

/* Background */
.bckgnd1 {
    background-image: linear-gradient(216deg, var(--c9), var(--c10));
}
.bckgnd2 {
    background: var(--c11);
}
.bckgnd3{
    background-image: linear-gradient(179deg, var(--c1), var(--c6));
}
.bckgnd4 {
    background-image: linear-gradient(215deg, var(--c11), var(--c12));
}
.bckgnd5 {
    background-color: var(--c13);
}
.bckgnd6 {
    background-color: var(--c16);
}
.bckgnd7 {
    background-image: linear-gradient(179deg, var(--c1), var(--c6));
}

/* Page headings */
.page-heading {
    color: #3A5F83;
    font-size: 30px;
    font-weight: 200;
    text-align: center;
}

.page-heading-abstract {
    font-size: 17px;
    font-weight: 200;
    text-align: center;
}

.page-becareful-warning {
    font-size:13px;
    font-weight: 400;
    text-align: center;
    color: white;
    border-radius: 4px;
    background-image: linear-gradient(216deg, var(--c1), var(--c10));

    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.page-subheading1 {
    color: #3A5F83;
    font-size:14px;
}

.page-subheading2 {
    color: #3A5F83;
    font-size:16px;
    font-weight: 500;
}

/* Buttons */
.alpha-button {                             
    background-color: var(--c8);
    padding: 12px;
    border-radius: 4px;
    display: inline-block;
    font-weight: 400;
    font-size: 16px;
    color: var(--c4);
}
.alpha-button:hover {                       
    color:var(--c12);
    cursor: pointer;
}

.beta-button {                              
    background-color: var(--c4);
    padding: 12px;
    border-radius: 4px;
    display: inline-block;
    font-weight: 400;
    font-size: 16px;
    color: var(--c2);
}
.beta-button:hover {                        
    color:var(--c6);
    cursor: pointer;
}

.charlie-button {
    background-color: var(--c8);
    border-radius: 4px;
    display: inline-block;
    padding: 12px;
    color: var(--c4);
}
.charlie-button:hover {
    color: var(--c5);
    cursor: pointer;
}

.delta-button {
    background-color: var(--c4);
    border-radius: 4px;
    display: inline-block;
    padding: 12px;
    color: var(--c7); 
}
.delta-button:hover {
    color: var(--c3);
    cursor: pointer;
}

.echo-button {
    background-color: var(--c11);
    border-radius: 4px;
    display: inline-block;
    padding: 12px;
    color: var(--c7);
    cursor: pointer;
    text-align: center;
}
.echo-button:hover {
    color: var(--c3);
    cursor: pointer;
}

/* Responsive text */
.text-responsive {
    font-size: calc(40% + 1vw + 1vh);
}

/* Signature */
.signature {
    font-family: "The Girl Next Door";
}

/* Error */
.custom-form-error {
    font-size: 12px;
    color: red;
    font-weight: 400;
}

/* Help text 
Usually displayed in the forms just below the input field */
.helptext {
    font-size: 12px;
    font-weight: 300;
}


/* Breadcrumbs */
.breadcrumb {
    font-size: 13px;
    font-weight: 300;
    color: var(--c4);
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Table td background and font color for highlighting 
https://chatgpt.com/c/d2e572e1-c62e-4669-a554-deee7c6e2c87
*/
.contacted {
    background-color: #d1e7dd;  /* Light green background */
    color: #0f5132;  /* Dark green text */
}

/* To ensure the icons also change color when the contacted class 
is applied, you need to adjust your CSS to target the icons within 
the contacted cells.  
https://chatgpt.com/c/d2e572e1-c62e-4669-a554-deee7c6e2c87
*/
.contacted a .bi, 
.contacted a .bi-envelope-arrow-up, 
.contacted a .bi-envelope-open, 
.contacted a .bi-telephone-plus {
    color: #0f5132 !important;  /* Dark green icon color */
}
.contacted a {
    color: #0f5132 !important;  /* Dark green link color */
}
.contacted a:hover .bi, 
.contacted a:hover .bi-envelope-arrow-up, 
.contacted a:hover .bi-envelope-open, 
.contacted a:hover .bi-telephone-plus {
    color: #084298 !important;  /* Darker green color on hover */
}
.contacted a:hover {
    color: #084298 !important;  /* Darker green link color on hover */
}