@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;}
body{
    background-image: url('../image/background_card.webp');
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    margin: 0 10px;}

/* Bootoast */
.bootoast button {
    display: none;}
.bootoast-container.center{
    left: 50vw;}
.bootoast-alert-content{
    font-size: 0.875rem;}
.alert{
    font-weight: 500;
    padding: 0.75rem 1.125rem;}
    .alert.alert-success {
        display: flex;
        gap: 0.5rem;
        background-color: #16a085; 
        color: #ffffff;
        border-color: #16a085;}
    .alert.alert-danger {
        display: flex;
        gap: 0.5rem;
        background-color: #DA4453; 
        color: #ffffff;
        border-color: #DA4453;}
.fa-check-circle{
    display: flex;
    align-items: center;}
.fa-times-circle{
    margin-top: 3px;}

/* Essential Contact Card */
.fade-in-image, .fade-in-image-load { 
    animation: fadeInLoad 1s;}
@keyframes fadeInLoad {
    0% { opacity: 0; }
    100% { opacity: 1; }}
.card-body{
    padding: 1.25rem;}
.profile_photo_container{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border: none;
    background: none;}
.profile_photo {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: white;
    object-fit: cover;
    box-shadow: 0px 4px 4px 0px #0000001A;}
.digital_card {
    border-radius: 8px;
    background: linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.40) 100%);
    box-shadow: 0px 2.767256498336792px 2.2138051986694336px 0px rgba(0, 0, 0, 0.01), 0px 6.650102138519287px 5.32008171081543px 0px rgba(0, 0, 0, 0.02), 0px 12.521552085876465px 10.017241477966309px 0px rgba(0, 0, 0, 0.03), 0px 22.3363094329834px 17.869047164916992px 0px rgba(0, 0, 0, 0.03), 0px 41.777610778808594px 33.422088623046875px 0px rgba(0, 0, 0, 0.04), 0px 100px 80px 0px rgba(0, 0, 0, 0.05);}
#save_contact_btn{
    color: white;
    border: none;
    height: 40px;
    width: 100%;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0em;
    border-radius: 1000px;
    box-shadow: 0px 4px 8px 0px #F854546B;
    background: linear-gradient(0deg, #ED1C24 0%, #AB1006 100%), linear-gradient(180deg, #ED1C24 0%, #AB1006 100%);
    border-image-source: linear-gradient(0deg, #ED1C24 0%, #AB1006 100%);}
    #save_contact_btn:hover{
        background: linear-gradient(0deg, #AB1006 0%, #ED1C24 100%), linear-gradient(180deg, #AB1006 0%, #ED1C24 100%);
        box-shadow: 0px 4px 8px 0px #F854546B;}
    #save_contact_btn:active{
        background: linear-gradient(0deg, #ED1C24 0%, #AB1006 100%), linear-gradient(180deg, #ED1C24 0%, #AB1006 100%);
        box-shadow: 0px 2px 4px 0px #F854546B;}
.btn-cancel-table{
    color: white;
    border: none;
    height: 40px;
    width: 100%;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0em;
    border-radius: 1000px;
    box-shadow: 0px 4px 8px 0px #F854546B;
    background: linear-gradient(0deg, #ED1C24 0%, #AB1006 100%), linear-gradient(180deg, #ED1C24 0%, #AB1006 100%);
    border-image-source: linear-gradient(0deg, #ED1C24 0%, #AB1006 100%);}
    .btn-cancel-table:hover{
        background: linear-gradient(0deg, #AB1006 0%, #ED1C24 100%), linear-gradient(180deg, #AB1006 0%, #ED1C24 100%);
        box-shadow: 0px 4px 8px 0px #F854546B;}
    .btn-cancel-table:active{
        background: linear-gradient(0deg, #ED1C24 0%, #AB1006 100%), linear-gradient(180deg, #ED1C24 0%, #AB1006 100%);
        box-shadow: 0px 2px 4px 0px #F854546B;} 
#fullname{
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #020202;}
#job_title{
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #020202;}
#phone_number {
    font-weight: 600;
    font-size: 14px;}
.row_profile_info_container{
    padding: 1rem 1rem 1rem 0;
    align-content: center;
    min-height: 75px;
    transition-duration: 0.5s;
    border: 3px solid #F2F2F2;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    background: linear-gradient(180deg, #F2F2F2 0%, #DFDFDF 100%), linear-gradient(360deg, #F2F2F2 0%, #DFDFDF 100%);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);}
    .row_profile_info_container:hover{
        background: linear-gradient(180deg, #DFDFDF 0%, #F2F2F2 100%), linear-gradient(360deg, #DFDFDF 0%, #F2F2F2 100%);
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);}
.profile_info_text{
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    color: #4E4E4E;
    text-align: left;}
.profile_info_desc {
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: #020202;
    word-break: break-all;}
.profile_info_container{
    align-content: center;
    min-height: 75px;
    border: 3px solid #F2F2F2;
    margin-top: 8px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    background: linear-gradient(180deg, #F2F2F2 0%, #DFDFDF 100%), linear-gradient(360deg, #F2F2F2 0%, #DFDFDF 100%);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 650px;
    padding: 1rem 1rem 1rem 0;}
    .profile_info_container:hover{
        background: linear-gradient(180deg, #DFDFDF 0%, #F2F2F2 100%), linear-gradient(360deg, #DFDFDF 0%, #F2F2F2 100%);
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);}