/* 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-10px{
    font-size: 10px;
}
.fs-12px{
    font-size: 12px;
}
.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;
}

.font-family-manrope-sans-serif{
    font-family: Manrope, sans-serif;
}

/* 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(--c1));
}
.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));
}
.glassy-div {
    /* To add a slightly glassy (frosted glass) background to a div, use 
    CSS properties like backdrop-filter for the blur effect and a semi-transparent background. 
    https://grok.com/chat/027fe5f9-ed9f-4fa1-8c2f-fb69fea0265c
    */
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
    backdrop-filter: blur(10px); /* Blur effect */
    border-radius: 10px; /* Optional: rounded corners */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Optional: subtle border */
    padding: 20px; /* Optional: inner spacing */
}
/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(10px)) {
  .glassy-div {
    background: rgba(255, 255, 255, 0.5); /* More opaque fallback */
  }
}

/* Page headings */
.page-heading {
    color: #3A5F83;
    font-size: 30px;
    font-weight: 400;
    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-becareful-warning a{
    color:var(--c9);
}

.page-becareful-warning a:hover{
    color:var(--c12);
}

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

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

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

.beta-button {                              
    background-color: var(--c4);
    padding: 8px 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;
}

.conference-btn{
    /* make a small button with a silver gradient background, a small shadow effect, font size 12px and a svg image at the begining and followed by a text 'conferences' */
    background: linear-gradient(28deg, var(--c5), var(--c4));
    border: 1px solid var(--c5);
    border-radius: 4px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
    color: var(--c3);
    box-shadow: 0px 0px 1px 0px var(--c27);
}

.conference-btn:hover{
    /* make some subtle changes */
    background: linear-gradient(90deg, var(--c26), var(--c4));
}

/* https://chatgpt.com/c/679731e0-1790-8010-af77-649d94f58bc9
A temporary CSS class to remove the hover effect
*/
.disable-hover:hover {
    background-color: transparent !important;
    color: inherit !important;
    pointer-events: none;
}

/* Badges */
.payment-pending-badge{
    display: inline-block;
    padding: 0.1em 0.66em;
    font-size: 10px;
    font-weight: 300;
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
    border-radius: 1rem;
    box-shadow: 6px 3px 9px 0px rgba(0, 0, 0, 0.1);
}


/* 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;
}

.error-message {
    /* Layout & spacing */
    max-width: 100%;
    max-height: 200px;     /* set a reasonable max height */
    overflow-y: auto;      /* scroll if content exceeds max-height */
    white-space: pre-wrap; /* preserve line breaks and wrap text */
    word-wrap: break-word; /* break words as needed */
    margin: 10px 0;
    padding: 10px;

    /* Typography */
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #721c24;        /* a typical "error" text color */

    /* Background & border */
    background-color: #f8d7da; /* a typical "error" background color (light red) */
    border: 1px solid #f5c6cb; /* border color matching background */
    border-radius: 4px;
  }

/* 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;
    padding-top: 10px;
    padding-bottom: 10px;
}

.breadcrumb .breadcrumb-item > a{
    color: var(--c1) !important;
}
.breadcrumb .breadcrumb-item > a:hover{
    color: var(--c2) !important;
}



/* Ref: https://chat.openai.com/c/75b0cbb4-f408-4f0b-93d1-2016e213415a */
/* Style the select element of country in new registration and update page */
#id_country {
    font-size: 14px; /* Adjust the font size of the dropdown */
    color: gray; /* Default color for the dropdown text */
}


/* WRAPPING/ WRAP */

.force-break-long-sentence {
    /* 
    ChatGPT: To force a line break in a long sentence using CSS, you can use the word-break or 
    overflow-wrap property.

    It will break the word at arbitrary points, even if the break occurs in the middle of a meaningful 
    unit, like a URL or a word like example breaking into exa and mple.

    https://chatgpt.com/c/677f78fb-a23c-8010-9f6e-8978b32b5371

    */
    word-break: break-all;
}

.natural-wrap {
    /*
    More natural wrapping; it doesn't break words arbitrarily if there's enough space to display them on the current line.
    https://chatgpt.com/c/677f78fb-a23c-8010-9f6e-8978b32b5371
    */
    overflow-wrap: anywhere; /* Breaks only when necessary */
}

/* To underline a sentence with a gradient color */
.gradient-underline {
    display: table;
    position: relative;
}
  
.gradient-underline::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 0;
    width: 113%;
    height: 4px;
    background: linear-gradient(to right, #009cdf, #665cff);
}

.gradient-underline-center{
    margin: 0 auto;
}


/* Bootstrap Alert button */
.alert{
    font-size:13px
}


/* Text shadows */
.text-shadow1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}