/* Color Palette */
:root {
    --primary-color: #6A1B9A; /* Deep purple */
    --secondary-color: #FFFFFF; /* White */
    --accent-color: #FBC02D; /* Amber */
    --text-color: #58555c; /* Dark gray */
    --background-color: #F5F5F5; /* Light gray */
}
/*Navbar*/
.navbar-dark .navbar-nav > li > a:hover, .navbar-dark .navbar-nav > li.dropdown > a:hover {
    background-color:transparent !important;
    color:#58555c !important;
    text-decoration: underline !important;
}

.navbar-toggler {
    background-color: #58555c !important;
    border-color:#FFFFFF !important ;
}



/* Base Styles */

.header img {
    height: 90px !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Ivar Display" !important;
    font-weight: 400 !important;
    margin-top: 0;
    color: #1c2321 !important;
}

h4{
    font-size: 25px !important;
}

h5{
    font-size:20px !important;
}

p {
    color: #58555c;
    font-size: 1.6rem;
    font-weight: 300;
    margin: 0 0 18px;
    display: block;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
    font-family: var(--bs-body-font-family) !important;
}

.btns {
    display: flex; 
    gap: 10px; 
    align-items: center; 
    justify-content: flex-start;
    margin-top: 15px; 
}

.btn-theme, .btn-primary {
    background-color: #1c2321 !important; 
    color: #FFFFFF !important;
    padding: 10px 20px !important;
    text-decoration: none;
    border: 2px solid black !important; 
    transition: background-color 0.3s ease, border-color 0.3s ease;
    margin-left:10px
}

.button1 {
    background-color: #1c2321 !important;
    color: #FFFFFF !important;
    padding: 10px 20px !important;
    text-decoration: none;
    border: 2px solid black !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
} 



.btn-theme:hover, .button1:hover, .btn-primary:hover {
    background-color: #6c757d !important; 
    border: 2px solid black !important; 
    border-color:#6c757d !important;
    text-decoration: none !important;
}
.btn-default{
    /*padding: 10px 20px !important;*/
    border-radius: 4px !important;
}

.btn-theme-alt, .btn-default{
    color: rgb(88, 85, 92) !important;
    background-color: transparent !important;
    border: 2px solid black !important;
    padding: 10px 20px  !important;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-theme-alt:hover ,.btn-default:hover {
    background-color: #5a6268 !important; 
    color: #FFFFFF !important;
}

.btn-alternate {
    background-color: #1c2321; 
    color: rgb(255, 255, 255);
    padding: 10px 20px;
    text-decoration: none;
    border: 2px solid black; 
    border-color:rgb(88, 85, 92) ;
    background-color: rgb(88, 85, 92); 
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-alternate:hover {
    background-color: #FFFFFF !important;
    border-color:#58555c !important;
}


.event-card {
        max-width: 400px;
    width: auto;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background: #fff;
}


.event-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.event-placeholder {
    width: 100%;
    height: 250px;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-placeholder span {
    color: #666;
}

.event-card-body {
    padding: 15px;
    height: 450px;
    position: relative;
    padding-bottom: 50px;
}

.event-card-body .btn-theme{
    position: absolute;
    bottom: 20px;
    left: 15px;
}

.event-card-description{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4; 
    line-clamp: 4; 
    -webkit-box-orient: vertical;
}

.event-card-topic {
    font-size: 12px;
}

.event-card-name a {
    font-size: 28px;
    font-family: 'Ivar Text';
    font-weight: 600;
    color: #1c2321;
}

.event-card-date,
.event-card-state,
.event-card-delivery,
.event-card-cpdpoints,
.event-card-description {
    font-size: 16px;
}

.event-card-date img, 
.event-card-state img,
.event-card-delivery img,
.event-card-cpdpoints img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 5px;
}

.learn-more {
    margin-top: 10px;
}

.event-card-body h4 {
    color: #333;
    margin-bottom: 5px;
}

#spinner-wrapper {
    justify-content: center !important;
    align-items: center;
    width: 100%;  
    display:flex !important;
}

.spinner {
    border: 4px solid #58555c;
    align-items: center;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    border-top: 8px solid var(--gray);
    display:none;
}


/* Sign up CSS */

.join-signin {
    display: inline-block;
    text-align: left;
    padding: 20px;
    background: #58555c;
    font-size: 16px;
    margin:40px;
}

.join-signin-text {
    color: #ffffff;
}

.TextButton {
    float: left;
    cursor: pointer;
}

.list-group-item.active {
    z-index: 2;
    color: var(--bs-list-group-active-color);
    background-color: #58555c;
    border-color: #58555c
}

#WebFormPanel .tab-title {
    display: none;
}


#WebFormPanel fieldset[aria-label="CPPP_section"],
#WebFormPanel fieldset[aria-label="CPPM_section"],
#WebFormPanel fieldset[aria-label="CPSPM_section"],
#WebFormPanel fieldset[aria-label="Combine_CPPM_CPSPM_section"] ,
#WebFormPanel fieldset[aria-label="CPPD_section"],
#WebFormPanel fieldset[aria-label="CPPE_section"],
#WebFormPanel fieldset[aria-label="CPPPAR_section"],
#WebFormPanel fieldset[aria-label="CPCP_section"],
#WebFormPanel fieldset[aria-label="CPCM_section"],
#WebFormPanel fieldset[aria-label="CPSCM_section"],
#WebFormPanel fieldset[aria-label="CPCD_section"],
#WebFormPanel fieldset[aria-label="CPCS_section"]       {
    display: none;
}

/*Cart*/

.cart-items {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.cart-items th,
.cart-items td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.cart-items th {
    background-color: #f2f2f2;
    color: #333;
}

.cart-items td {
    background-color: #f9f9f9;
}


.total-section {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.total-section p {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.item-description {
    width: 90%;
}

.item-quantity .item-amount {
    width: 10%;
}

#WebFormPanel fieldset[aria-label="BillToOrganisation"]       {
    display: none;
}
/*webkit CSS*/

.field-label {
 font-weight: 500 !important;
}
.text.form-control {
   width: 200% !important;
}

.form-select.picklist{
   width: 130% !important;
}

[data-name="About Me"] #msnfp_birthday,
[data-name="Professional Details"] #aipm_howmanyyearsofexperiencedoyouhavemanaging {
   width: 250% !important;
}

[data-name="About Me"] #gendercode
{
 width: 230px !important
}

[data-name="Professional Details"] .form-control.lookup
{
    min-width: 150% !important;
}



.clearfix.cell.text.form-control-cell,
.clearfix.cell.picklist-cell,
[data-name="Professional_Details_Section"] .clearfix.cell.lookup.form-control-cell,
[data-name="Professional Details"] .clearfix.cell.lookup.form-control-cell,
[data-name="About_You_Section"] .clearfix.cell.datetime.form-control-cell,
[data-name="About Me"] .clearfix.cell.datetime.form-control-cell,
[data-name="Contact_Details"] .clearfix.cell.lookup.form-control-cell,
[data-name="Work_Address_Section"] .clearfix.cell.lookup.form-control-cell,
[data-name="Home_Address_Section"] .clearfix.cell.lookup.form-control-cell {
    display: flex !important;
    align-items: center !important;
    column-gap: 16px !important;
}






.clearfix.cell.text.form-control-cell .table-info,
.clearfix.cell.picklist-cell .table-info,
[data-name="Professional_Details_Section"] .clearfix.cell.lookup.form-control-cell .table-info,
[data-name="Professional Details"] .clearfix.cell.lookup.form-control-cell .table-info,
[data-name="Contact_Details"] .clearfix.cell.lookup.form-control-cell .table-info,
[data-name="About_You_Section"] .clearfix.cell.datetime.form-control-cell .table-info,
[data-name="About Me"] .clearfix.cell.datetime.form-control-cell .table-info,
[data-name="Work_Address_Section"] .clearfix.cell.lookup.form-control-cell .table-info {
    min-width: 220px !important; 
}




.input-group{
   flex-wrap: nowrap !important;
}

h3{
    padding-left: 30px !important;
    font-size: 50px !important;
}

.btn.launchentitylookup{
     background-color: #1c2321;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border: 2px solid black;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    margin-left: 10px;
    height: 40px;
}

.btn.clearlookupfield{
    color: rgb(88, 85, 92);
    background-color: transparent !important;
    border: 2px solid black;
    padding: 10px 20px;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    height: 40px;
}

#NextButton:disabled {
    background-color: #ccc; 
    color: #666;            
    border-color: #999;   
    cursor: not-allowed; 
    opacity: 0.7;           
}

#MembershipCategory-Details {
    padding-left: 30px;
}

#aipm_membershipcategory_label,
#aipm-selection-label,
#MembershipCateogyr-Label {
    padding-bottom: 20px;
    font-weight: 200 !important;
}

a {
    font-size: 18px;
    font-weight: bold;
}

/**/
.points-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 20px;
  }

  .point-card {
    flex: 1 1 300px;
    max-width: 400px;
    border: 1px solid #ccc;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .point-card h4 {
    margin-top: 0;
  }

  .point-card p {
    font-size: 24px;
    margin: 0;
  }

  @media (max-width: 600px) {
    .points-container {
      flex-direction: column;
      align-items: center;
    }

    .point-card {
      width: 90%;
      max-width: 400px;
    }
  }



@-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
    }
  
    100% {
      -webkit-transform: rotate(360deg);
    }
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }