/*
 These CSS rules are intended to override previous styles from other templates.
 As this file is imported last, the properties defined here will either
  add new styles or take precedence over existing ones.
*/

/*Highly Recommended to use global CSS*/
:root {
    --primary-color: #cf14b6;
    --secondary-color: #03dac6;
    --accent-color: #9a56fb;
    --container-bg: rgba(255, 255, 255, 0.87);
    --field-text-color: #212121;

    --font-size-small: 1em;
    --font-size-medium: 1.5em;
    --font-size-large: 2em;
    --very-small-font:0.875rem;
}


.form-control{
    font-size: var(--font-size-small);
    border: 1px solid var(--primary-color);
}




.secondary-button {
    all: unset;
    display: inline-block;
    min-width: 100px;
    padding: 10px 30px;
    font-size: 1rem;
    color: var(--primary-color);
    cursor: pointer;
    text-align: center;
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    margin-top: 4px;
    transition: 0.3s ease;
    margin-bottom: 10px;

}

.secondary-button:hover {
    color: white;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}


.nav-link{
    position: relative;
    transition: 0.2s;
}

.nav-link:hover::after{
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary-color);
}


.default-title{
    color: var(--primary-color);
    font-size: var(--font-size-small);
    font-weight: bold;
    cursor: pointer;
}


.default-title::first-letter {
    color: var(--accent-color);
    font-size: var(--font-size-medium);
    font-weight: bold;
}

.table-container{
    margin-top: 10px;
    background-color: var(--container-bg);
    border-radius: 10px;
    border: solid var(--primary-color) 1px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tertiary-button {
    all: unset;
    border: 1px solid var(--accent-color);
    align-items: center;
    border-radius: 2px;
    font-size: var(--font-size-small);
    cursor: pointer;
    padding: 5px;
    transition: all 0.3s ease-in-out;
    color: var(--accent-color);
}

.tertiary-button:hover {
    background-color: var(--accent-color);
    color: white;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


table {
    border-collapse: collapse;
}

tr, td, th {
    border: 1px solid var(--primary-color);
    text-align: center;
}


.container-field-count{
    position: relative;

}


.container-field-count .count{
    position: absolute;
    right: 20px;
    bottom: -5px;
    font-size: var(--very-small-font);
}





/*The password wrapper is restricting the password icon to be*/
/*placed at certain level from top.*/
.password-wrapper {
    position: relative;
    min-height: 80px;
    height: 80px;
    max-height: 80px;
    /*border: black 1px solid;*/
}




#togglePasswordIcon {
    position: absolute;
    cursor: pointer;
    padding: 3px;
    right: 5px;
    top: 40px;
}



#togglePasswordIcon:hover{
    color: var(--primary-color);
}



svg:hover {
    fill: var(--primary-color);
}

.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .login-box{
    background: #FFFFFF; display: flex; align-items: center; min-width: 300px; padding: 20px; width: 60vw; max-width: 800px;
  }


  @media only screen and (max-width : 480px) {
    #recaptcha_challenge_image{
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    #recaptcha_response_field
    {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    .recaptchatable #recaptcha_image {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    .recaptchatable .recaptcha_r1_c1, 
    .recaptchatable .recaptcha_r3_c1, 
    .recaptchatable .recaptcha_r3_c2, 
    .recaptchatable .recaptcha_r7_c1, 
    .recaptchatable .recaptcha_r8_c1, 
    .recaptchatable .recaptcha_r3_c3, 
    .recaptchatable .recaptcha_r2_c1, 
    .recaptchatable .recaptcha_r4_c1, 
    .recaptchatable .recaptcha_r4_c2, 
    .recaptchatable .recaptcha_r4_c4, 
    .recaptchatable .recaptcha_image_cell {

    margin: 0 !important;
    width: 100% !important;
    background: none !important;
    height: auto !important;
    }
}

.customTD{
    word-wrap:break-word; max-width: 25vw;
}