body{
            background-color: #f1f1f1;
            font-family: arial;
           }
           #uploadForm {
            max-width: 500px;
            margin: 0 auto;
        }

        .theform{
            width: 340px;
 
            background-color: #ec6171;
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 0px;
        
            margin: 10px auto;
            box-shadow: 4px 4px 9px #ccc;
            border-radius: 11px;
            text-align: center;
            clear: both;
        }
        .form-group {
            margin-bottom: 1px;
padding: 6px;
color: #fff;
font-size: 14px;
        }

        label {
            display: block;
          
        }

        input[type="text"],
        input[type="file"] {
            width: 140px;
            padding: 5px;
            background: #8e76ff;
            border: 1px solid #ddd;
            border-radius: 4px;
            color: #fff;
        }
        input[type="file"] {
            background-color: #8e76ff;
        }
      .filebtn,  button{
            width: 73px;
            padding: 8px;
            margin: 16px 3px 0;
            background-color: #8e76ff;
            color: #fff;
            border: 1px solid #fff;
            border-radius: 5px;
            transition: transform 0.2s;
            cursor: pointer;
        }
    .filebtn{
        margin: 0;
    }
        .filebtn:hover,button:hover{
            background-color: #577ae3;
        }
        .filebtn:active,button:active {
            transform: translateY(4px); /* Adjust the value as per your preference */
          }
        #scoreCard {
            display: none;
            max-width: 300px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            text-align: center;
        }

        #processingBox {
            display: none;
            width: 200px;
            margin: 0 auto;
            padding: 10px;
            background-color: #ddffce;
            text-align: center;
            height: 40px;
            border: 1px solid #ddec77;
            z-index: 999;
            position: fixed;
            top: 132px;
            margin: 0 auto 0 -100px;
            left: 50%;
            border-radius: 7px;
            box-shadow: 1px 1px 6px #ccc;
        }
		
	 
        #scoreGaugecontainer {
            height: 12em;
            margin: 16px auto 0;
          
        }
 #scoreGauge { width:  11em; height: 11em; margin: 0 auto;}
 
 
   .card,.qrcontainer {
    width: 340px;
 
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 0px;

    margin: 10px auto;
    box-shadow: 4px 4px 9px #ccc;
    border-radius: 11px;
    text-align: center;
    clear: both;
        }

.cardheader{
	background-color: #4a9ae3;
height: 156px;
width: 100%;
display: block;
text-align: center;
border-radius: 10px 10px 0 0;
}

#socialbar{
    background-color: #4a9ae3;
    border-radius: 0 0 10px 10px ;
    color: #fff;
    padding: 3px 0;
}
.cardlables{
text-align: center;
min-height: 22px;
}
#hotname,#hotprofile{
 
    float: left;
    text-align: left;
    color: rgb(221, 34, 34);
    text-shadow: #999 2px 2px 4px;
    padding: 4px 2%;
}
#hotprofile{
    float: right;
    text-align: left;
}
#cardtitle{
    background-color: #8e76ff;
color: white;
}
 
#lookalike{
    color: rgb(221, 34, 34);
 
text-shadow: #999 2px 2px 4px;
}

        .profile-photo {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
             
        }

        .table th,
        .table td {
           
            text-align: left;
        }
        .tableshare {
            border-collapse: collapse;
        text-align: center;
width: 100%;
        }
        .tableshare button{
            margin-top: 6px;
        }

.terms{
    color: #fff;
    font-size: 12px;
    padding: 0 10px 3px;
}
.terms a{
color: #76ff7f;
text-decoration: none;
}
        .simpleGauge {  
            text-shadow: 1px 1px 5px #aaa;
        }

        #sharelink{
            position:absolute;
            left: -1000px;
        }


        @media print {
            body * {
              visibility: hidden;
            }
            #card, #card * {
                visibility: visible;
              }
            }