body{
	background-color:#f9f8f8;
	font-family:'Open Sans', Arial, sans-serif;
	font-size:14px;
	font-weight:300;
	line-height:1.6em;
}
.mandatory {
    color: red; /* Or any other style you prefer */
}
.missing {
    border: 1px solid red; /* Example of visual indication for missing fields */
}
.latest-job .fas{
    font-size: 4rem;
    color: #2681DD;
}

.amazon-large-banner{
		position: fixed;
		margin-right:7%;
		right:0;
		top:40%;
}

.amazon-mobile-banner{
	display:none;
}
@media (min-width: 500px) {
    .small-screen{
            display:None !important;
        }
}
@media screen and (max-width: 1300px) {
	.amazon-large-banner{
		display:none;
    }
}

@media screen and (max-width: 900px) {
    #applicationModal .modal-content {
     top:25%;
     width:90% !important;
    }
}

@media screen and (max-width: 992px) {
    .tabcontent{
        margin-top:7% !important;
    }
    .employer-section{
        margin-top:10% !important;
        margin-left:3% !important;
        margin-right:3% !important;
    }
}

@media screen and (max-width: 750px) {
	.amazon-mobile-banner{
			display :block;
	}
}
@media screen and (max-width: 576px) {
    .login-form {
        margin-top: 25% !important; /* Adjust as needed */
    }
    #ProjectModal .modal-content {
        margin-top: 20% !important;
        width: 80% !important;
        max-height: 70vh !important;
    }
    #LanguageModal .modal-content {
        margin-top: 20% !important;
        width: 80% !important;
        max-height: 70vh !important;
    }
    #educationModal .modal-content {
        margin-top: 20% !important;
        width: 80% !important;
        max-height: 70vh !important;
    }
    #ExperienceModal .modal-content {
        margin-top: 20% !important;
        width: 80% !important;
        max-height: 70vh !important;
    }
    #CertificationModal .modal-content {
        margin-top: 20% !important;
        width: 80% !important;
        max-height: 70vh !important;
    }
    #ITskillsModal .modal-content {
        margin-top: 20% !important;
        width: 80% !important;
        max-height: 70vh !important;
    }
    #keyskillsModal .modal-content {
        margin-top: 20% !important;
        width: 80% !important;
        max-height: 70vh !important;
    }
    #editModal .modal-content {
        margin-top: 20% !important;
    }
    .back-bg .container {
        padding-right: 0% !important;
        padding-left: 0% !important;
    }
    .latest-job .card{
        margin-left:15% !important;
        margin-right:15% !important;
    }
}
@media (min-width: 576px) and (max-width: 768px) {
    .login-form {
        margin-top: 25% !important; /* Adjust as needed */
    }
    #ProjectModal .modal-content {
        margin-top: 20% !important;
        width: 80% !important;
        max-height: 70vh !important;
    }
    #LanguageModal .modal-content {
        margin-top: 20% !important;
        width: 60% !important;
        max-height: 70vh !important;
    }
     #educationModal .modal-content {
        margin-top: 20% !important;
        width: 80% !important;
        max-height: 70vh !important;
    }
    #ExperienceModal .modal-content {
        margin-top: 20% !important;
        width: 80% !important;
        max-height: 70vh !important;
    }
    #CertificationModal .modal-content {
        margin-top: 20% !important;
        width: 80% !important;
        max-height: 70vh !important;
    }
    #ITskillsModal .modal-content {
        margin-top: 20% !important;
        width: 80% !important;
        max-height: 70vh !important;
    }
    #keyskillsModal .modal-content {
        margin-top: 20% !important;
        width: 80% !important;
        max-height: 70vh !important;
    }
    #editModal .modal-content {
        margin-top: 20% !important;
    }

}
@media (min-width: 768px) and (max-width: 992px) {
    .login-form {
        margin-top: 18% !important; /* Adjust as needed */
    }
     #ProjectModal .modal-content {
        margin-top: 15% !important;
        width: 60% !important;
        max-height: 70vh !important;
    }
    #LanguageModal .modal-content {
        margin-top: 15% !important;
        width: 50% !important;
        max-height: 70vh !important;
    }
     #educationModal .modal-content {
        margin-top: 15% !important;
        width: 60% !important;
        max-height: 70vh !important;
    }
    #ExperienceModal .modal-content {
        margin-top: 15% !important;
        width: 60% !important;
        max-height: 70vh !important;
    }
    #CertificationModal .modal-content {
        margin-top: 15% !important;
        width: 60% !important;
        max-height: 70vh !important;
    }
    #ITskillsModal .modal-content {
        margin-top: 15% !important;
        width: 60% !important;
        max-height: 70vh !important;
    }
    #keyskillsModal .modal-content {
        margin-top: 15% !important;
        width: 60% !important;
        max-height: 70vh !important;
    }
    #editModal .modal-content {
        margin-top: 20% !important;
    }
}
@media (min-width: 992px) and (max-width: 1200px) {
    .login-form {
        margin-top: 15% !important; /* Adjust as needed */
    }
}
.badge{
	margin-left:1%;
}
.badge-danger{
	margin-left:5%;
}
.boxs {
	margin-top:5%;
	margin-left:10%;
	margin-right:10%;
	text-align:center;
} 
.boxs a:hover,h4:hover,p:hover {
	text-decoration: none  !important;
}

.login-form{
	margin-left: auto;
    margin-right: auto;
    width: 100%;
	margin-top:8%;
	margin-bottom:2%;
	border-style: solid;
	border-width:1.5px;
	border-color:#bfbcbb;
	border-radius: 15px;
	text-decoration:none;
	background-color:#fff;
}
.login-form-body{
	margin:5%;
	margin-top:15%;
	margin-bottom:10%;
}
.login-form-body h2{
    text-align: center;
    margin-bottom:15%;
    font-family: 'Domine', serif;
}
.form-group {
    display: flex;
    align-items: center; /* Optional: Align items vertically centered */
}
.contact-page{
	margin-left: auto;
    margin-right: auto;
	margin-top:8%;
	margin-bottom:8%;
	text-decoration:none;
	background-color:#fff;
}
.contact-page img{
    height:auto%;
    width:auto%;
    margin-left:0%;
}
.contact-page-content {
    text-align: center;
    margin-top:10%;
    margin-bottom:15%;
    font-family: 'Domine', serif;
}
.contact-page-content p{
    margin:10%;
}
.full-width-button {
    display: block;
    width: 100%;
    padding: 10px;
     text-align: center;
}
.custom-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
}
.forms-small  {
    margin-top:2.5%;
    width:90%;
}
.forms-small form{
            text-align:center;
    }
.forms-small input[type=text] {
    margin-top:1%;
    font-size: 13px;
    width:60%;
    padding:5px;
}
.forms-small button {
    margin-top:1%;
    margin-bottom:20px;
    font-size: 13px;
    padding:5px;
}
@media (min-width: 1300px) {
    .form-search{
        display:none;
    }
}

.social-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.align-center {
	text-align:center;
	background-color:#fff;
	color:#000;
	padding:10%;
	margin-top:30px;
	margin-bottom:30px;
	border-bottom: 30px solid transparent;
	border-color:#2681DD;
	margin-top:-5px;
}
.align-center  p {
	margin-top:10px;
	margin-bottom:30px;
}
.align-center  h5 {
	padding:10%;
	margin-top:10px;
	margin-bottom:30px;
}
.align-center:hover {
	-webkit-box-shadow: 1px 2px 2px 4px rgba(204,204,204,1);
-moz-box-shadow: 1px 2px 2px 4px rgba(204,204,204,1);
box-shadow: 1px 2px 2px 4px rgba(204,204,204,1);
}
.icon {
	margin-top:30px;
	margin-bottom:1%;
	color:#2681DD;
}

.card{
	margin-left:10%;
	margin-right:10%;
	margin-top:2%;
	margin-bottom:1px !important;
	border: 1px solid fcfafa;
}
.card h5 {
	font-family: 'Domine', serif;
}
.card h6 {
	line-height: 1;
	color:#8d8b8b;
}
.latest-job .card{
	margin-left:1%;
	margin-right:1%;
	margin-top:5%;
	margin-bottom:1px !important;
	border: 1px solid fcfafa;
}
.latest-job .card h5 {
	font-family: 'Domine', serif;
}

.latest-job .card h6 {
	line-height: 1;
	color:#8d8b8b;
}

.latest-job a {
	 text-decoration: none  !important;
}
.job-info h6{
    display:inline !important;
}
#apply-btn{
    margin-bottom: 0%;!important;
}
.disclaim {
            background-color: #f8f9fa;
            padding: 3%;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            margin-bottom: 2%;
        }
.disclaim p{
    padding: 0% !important;
    margin-bottom:0%;
}
.disclaimer{
	margin-top:10%;
	margin-bottom:15%;
}

.disclaimer h4{
	margin-bottom:3%;
}
.table{
	margin-top:10%;
	text-decoration:none;
}

.content-what-img{
    margin-top: 5%;
}
.content-what-img h2{
    color:#2681DD;
}

.content-what-img img{
    margin-left:0%;
    height:100%;
    width:100%;
}
.content-what-img p{
     margin-top: 7%;
     margin-right: 2%;
     font-family: 'Inter var',sans-serif;
     font-size:16px;
}
.post-job{
    margin-top:10%;
    margin-bottom:3%;
    background-color: #f0f0f0;
    padding: 10%;
}

.post-job h2{
    color:#2681DD;
}

.latest-job h2{
    text-align: center;
    margin-top:7%;
    margin-bottom:3%;
    color:#2681DD;
}

.latest-job button{
    text-align: center;
}

.employer-form{
	margin-left: 5%;
    margin-right: 10%;
	margin-top:8%;
	margin-bottom:2%;
	border-style: solid;
	border-width:1.5px;
	border-color:#bfbcbb;
	border-radius: 15px;
	text-decoration:none;
	background-color:#fff;
}
.employer-form-body{
    margin-top:10%;
	margin:10%;
}
.employer-form-body h2{
    text-align: center;
    margin-bottom:5%;
    font-family: 'Domine', serif;
    color:#2681DD;
}
.no-margin {
  margin: 0% !important;
}
.employer-section{
    margin-top:5%;
    margin-left:10%;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}
.employer-div {
    margin-top:2%;
    margin-bottom:2%;
}
.heading {
  font-size: 24px;
  font-weight: bold;
  margin-bottom:2%;
}
.subheading {
  font-size: 18px;
  font-style: italic;
}
.description {
  font-size: 16px;
}
.employer-section h2{
    color:#2681DD;
    font-family: 'Domine', serif;
}
.employer-section h4{
    color:#2681DD;
    font-family: 'Domine', serif;
    margin-bottom:3%;
}
#success-message img {
        width: 100%; /* Make the image fill the width of its container */
        height: auto; /* Maintain aspect ratio */
        max-height: 200px; /* Limit the maximum height for responsiveness */
        margin: 0 auto; /* Center the image horizontally */
        display: block; /* Remove any default inline spacing */
}
.tile-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.tile {
  margin-top:3%;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  width:100%;
}

.tile:hover {
  transform: scale(1.05);
}
/* Job Application Pop up*/
#applicationModal .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

#applicationModal .modal-content {
    background-color: #f4f4f4;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 10px;
    width: 35%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
}

#applicationModal .close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}
#applicationModal .close-success {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}
#applicationModal .apply-button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#applicationModal .submit-button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#applicationModal input[type="text"], input[type="file"], input[type="email"]{
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#applicationModal form label {
    text-align: left;
    display: block;
}

/* Job application pop ends */
/* Education Pop up*/
#educationModal .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

#educationModal .modal-content {
    background-color: #f4f4f4;
    margin: 10% auto;
    padding: 20px;
    overflow-y: auto;
    border: 1px solid #888;
    border-radius: 10px;
    width: 35%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    max-height: 60vh;
}

#educationModal .close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}
#educationModal .close-success {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}
#educationModal .apply-button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#educationModal .submit-button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#educationModal input[type="text"], input[type="file"], input[type="email"]{
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#educationModal form label {
    text-align: left;
    display: block;
}
/* Education pop up ends */
/* User skills modal Pop up*/
#keyskillsModal .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

#keyskillsModal .modal-content {
    background-color: #f4f4f4;
    margin: 10% auto;
    padding: 20px;
    overflow-y: auto;
    border: 1px solid #888;
    border-radius: 10px;
    width: 35%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    max-height: 60vh;
}

#keyskillsModal .keyclose {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}
#keyskillsModal .key-close-success {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}
#keyskillsModal .apply-button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#keyskillsModal .submit-button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#keyskillsModal input[type="text"], input[type="file"], input[type="email"]{
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#keyskillsModal form label {
    text-align: left;
    display: block;
}
/* user skills modal pop up ends */

/* IT skills modal Pop up*/
#ITskillsModal .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

#ITskillsModal .modal-content {
    background-color: #f4f4f4;
    margin: 10% auto;
    padding: 20px;
    overflow-y: auto;
    border: 1px solid #888;
    border-radius: 10px;
    width: 35%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    max-height: 60vh;
}

#ITskillsModal .ITclose {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}
#ITskillsModal .IT-close-success {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}
#ITskillsModal .apply-button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#ITskillsModal .submit-button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#ITskillsModal input[type="text"], input[type="file"], input[type="email"]{
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#ITskillsModal form label {
    text-align: left;
    display: block;
}
/* IT skills modal pop up ends */

/* Experience modal Pop up*/
#ExperienceModal .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

#ExperienceModal .modal-content {
    background-color: #f4f4f4;
    margin: 10% auto;
    padding: 20px;
    overflow-y: auto;
    border: 1px solid #888;
    border-radius: 10px;
    width: 35%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    max-height: 60vh;
}

#ExperienceModal .experienceclose {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}
#ExperienceModal .experience-close-success {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}
#ExperienceModal .apply-button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#ExperienceModal .submit-button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#ExperienceModal input[type="text"], input[type="file"], input[type="email"]{
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#ExperienceModal form label {
    text-align: left;
    display: block;
}
/* Experience modal pop up ends */

/* Certification modal Pop up*/
#CertificationModal .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

#CertificationModal .modal-content {
    background-color: #f4f4f4;
    margin: 10% auto;
    padding: 20px;
    overflow-y: auto;
    border: 1px solid #888;
    border-radius: 10px;
    width: 35%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    max-height: 60vh;
}

#CertificationModal .certificationclose {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}
#CertificationModal .certification-close-success {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}
#CertificationModal .apply-button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#CertificationModal .submit-button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#CertificationModal input[type="text"], input[type="file"], input[type="email"]{
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#CertificationModal form label {
    text-align: left;
    display: block;
}
/* Certification modal pop up ends */

/* Language modal Pop up*/
#LanguageModal .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

#LanguageModal .modal-content {
    background-color: #f4f4f4;
    margin: 10% auto;
    padding: 20px;
    overflow-y: auto;
    border: 1px solid #888;
    border-radius: 10px;
    width: 35%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    max-height: 60vh;
}

#LanguageModal .languageclose {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}
#LanguageModal .language-close-success {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}
#LanguageModal .apply-button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#LanguageModal .submit-button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#LanguageModal input[type="text"], input[type="file"], input[type="email"]{
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#LanguageModal form label {
    text-align: left;
    display: block;
}
/* Language modal pop up ends */

/* Project modal Pop up*/
#ProjectModal .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

#ProjectModal .modal-content {
    background-color: #f4f4f4;
    margin: 10% auto;
    padding: 20px;
    overflow-y: auto;
    border: 1px solid #888;
    border-radius: 10px;
    width: 50%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    max-height: 60vh;
}

#ProjectModal .projectclose {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}
#ProjectModal .project-close-success {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}
#ProjectModal .apply-button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#ProjectModal .submit-button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#ProjectModal input[type="text"], input[type="file"], input[type="email"]{
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#ProjectModal form label {
    text-align: left;
    display: block;
}
/* Language modal pop up ends */
/* Resume modal pop up ends */
#resumeModal .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

#resumeModal .modal-content {
    background-color: #f4f4f4;
    margin: 10% auto;
    padding: 20px;
    overflow-y: auto;
    border: 1px solid #888;
    border-radius: 10px;
    width: 35%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    max-height: 60vh;
}

#resumeModal .close-resume{
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}

/* Resume modal pop up ends */
.modal-content {
    background-color: #f4f4f4;
    margin: 10% auto;
    padding: 20px;
    overflow-y: auto;
    border: 1px solid #888;
    border-radius: 10px;
    width: 35%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    max-height: 60vh;
}

.modal__actions {
	animation-delay: 0.2s;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.modal__button,
.modal__close-button {
	color: currentColor;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.modal__button {
	background-color: field !important;
	border-radius: 0.25rem;
	font-size: 0.75em;
	padding: 0.5rem 2rem;
	transition:
		background-color var(--trans-dur),
		border-color var(--trans-dur),
		opacity var(--trans-dur);
	width: 100%;
}
.modal__button + .modal__button {
	margin-top: 0.75em;
}
.modal__button:disabled {
	opacity: 0.5;
}
.modal__button:focus,
.modal__close-button:focus {
	outline: transparent;
}
.modal__button:hover,
.modal__button:focus-visible {
	background-color: hsla(var(--hue),10%,60%,0.2);
}
.modal__button--upload {
	background-color: transparent;
	border: 1px dashed #ccc;
	flex: 1;
	padding: 0.375rem 2rem;
}
.modal__col + .modal__col {
	flex: 1;
	margin-top: 1.875em;
}
.modal__close-button,
.modal__message,
.modal__progress-value {
	color: hsl(var(--hue),10%,30%);
	transition: color var(--trans-dur);
}
.modal__close-button {
	background-color: transparent;
	display: flex;
	width: 1.5em;
	height: 1.5em;
	transition: color var(--trans-dur);
}
.modal__close-button:hover,
.modal__close-button:focus-visible {
	color: hsl(var(--hue),10%,40%);
}
.modal__close-icon {
	display: block;
	margin: auto;
	pointer-events: none;
	width: 50%;
	height: auto;
}
.modal__content > * {
	/* don’t use shorthand syntax, or actions delay will be overridden */
	animation-name: fadeSlideIn;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	opacity: 0;
}
.modal__file {
	flex: 1;
	font-size: 0.75em;
	font-weight: 700;
	margin-right: 0.25rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.modal__file ~ .modal__button {
	margin-top: 1.5em;
}
.modal__file-icon {
	color: hsl(var(--hue),10%,50%);
	display: block;
	margin-right: 0.75em;
	width: 1.5em;
	height: 1.5em;
	transition: color var(--trans-dur);
}


/* Job Application End*/

.fbpanel{
	position: fixed;
	margin-right:7%;
	border: 3px solid #8c8481;
	right:0;
	top:15%;
}
.fb-page{
	
}

@media screen and (max-width: 1300px) {
	.fbpanel{
		display:none;
}	
}

.fb-mobile{
	display:none;
}
@media screen and (max-width: 750px) {
	.fb-mobile{

		display:block;
		font-family: 'Domine', serif;
		margin-top:7%;
		margin-bottom:7%;
		margin-left:20%;


}	
.fb-mobile .fb-page{
		border: 3px solid #8c8481;
}
}
@media screen and (max-width: 600px) {
	.fb-mobile{
		display:block;
		
		font-family: 'Domine', serif;
		margin-top:12%;
		margin-bottom:9%;
		margin-left:20%;

}	
.fb-mobile .fb-page {
		border: 3px solid #8c8481;
}
}
@media screen and (max-width: 500px) {
	.fb-mobile{
		display:block;
		
		font-family: 'Domine', serif;
		margin-top:12%;
		margin-bottom:9%;
		margin-left:0%;
    }
    .fb-mobile .fb-page {
            border: 3px solid #8c8481;
    }
     .latest-job .card{
        margin-left:0% !important;
        margin-right:0% !important;
    }
}
@media screen and (max-width: 400px) {
	.fb-mobile{
		display:block;
		font-family: 'Domine', serif;
		margin-top:7%;
		margin-bottom:7%;
		margin-left:0%;
}	
.fb-mobile .fb-page{
		border: 3px solid #8c8481;
}
}
.table a{
	
	text-decoration:none;
}

.success th{
	background-color:#F3F5F5;
}

@media screen and (max-width: 500px) {
	.card{
		margin-left:1%;
		margin-right:1%;
	}
}
@media screen and (max-width: 700px) {
	.card{
		margin-left:4%;
		margin-right:4%;
	}
}
@media screen and (max-width: 900px) {
	.card{
		margin-left:4%;
		margin-right:4%;
	}
}

.navbar{
	color:#fff;
	-webkit-box-shadow:5px 5px 5px;
	-moz-box-shadow:5px 5px 5px;
	box-shadow:5px 5px 5px grey;
}
.navbar-brand { 
  margin-left:2%;
  }
.navbar li a, .navbar .navbar-brand {
  color:#2681DD !important;
  padding:1%;
  font-weight: bold;
}
.nav-search  button{
	background:#2681DD;
}
.navbar-nav .nav-item:hover {
  background-color: #fbfbfb; /* Change this to your desired hover background color */
}

.nav-search{
    margin-left:4%;
     margin-right:0%;
}


.content {
  max-width: 650px;
  margin: auto;
  margin-top:3%;
  margin-bottom:3%;
  background:F4F2F2;
}
.job-list  {
	margin-top:3%;
	margin-bottom:30px;
}
.job-list h4  {
	font-family:'Domine', serif;
}
.job-list  a{
	color:#000;	
}
.job-detail-list  {
	margin-top:30px;
	margin-bottom:30px;
	margin-left:60px;
	margin-right:60px;
}
.job-detail-list h5{
	font-family: 'Domine', serif;
}
.job-detail-list h6{
	color:#8d8b8b;
}
.job-list a {
	 text-decoration: none  !important;
}
.animated-paragraph {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.5s ease-in, transform 0.5s ease-in;
}
.animated-paragraph.animate {
    opacity: 1;
    transform: translateX(0);
}
.hr-space {
	margin-top:5%;
	margin-bottom:3%;
	padding-bottom:1%;
}
.social a{
	font-size: 20px;
	line-height: 1.6;
	color:#B82929;
}
.section{
	height: 90vh; 
}
.search-bar{
    width:50%;
}
.back-bg{
	display:block;
	background: linear-gradient(
                     rgba(20,20,20, .5), 
                     rgba(20,20,20, .5)),
                     url('../images/2.jpg');
	
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
    background-repeat: no-repeat;
	padding:14%;
}
.back-bg h1{
	font-weight:bold;
	color:#fff;
	font-family:Lora;
	text-align:center;
	margin-top:-8%;
}
.back-bg form{
	text-align:center;
	margin-top:50px;
}
.back-bg input[type=text] {
    padding: 5%;
    font-size: 17px;
    border: none;
    background: white;
    margin-bottom:2%;
}
.back-bg button {
    padding: 12.7%;
    float: left;
    background: #2681DD;
    font-size: 17px;
    border: none;
    cursor: pointer;
    color:#fff;
}
.rounded-border{
    border-radius : 30px;
    border: 2px solid #E2DBD9;
}
.user_bg{
	text-align:center;
	margin-top:7%;
	margin-left:7%;
	margin-right:8%;
	margin-bottom:5%;
	background: white;
}
.user_bg input[type=text] {
    margin:2%;
    padding-top:3%;
    padding-bottom:3%;
    margin-left:10%;
    margin-right:10%;
    font-size: 17px;
    border: none;
    background: white;
}
.user_bg button {
    float: left;
    height:100%;
    background: #2681DD;
    font-size: 17px;
    border: none;
    cursor: pointer;
    color:#fff;
    border-radius : 0px 30px 30px 0px;
}
.user_bg input:focus {
  outline: none;  /* Remove the outline on focus */
}

.free-space {
	background-color:#fff;
	margin-bottom:-120px;
}
.mycontainer{
	background-color:#fff;
	margin-left:10%;
	margin-right:30%;
}
.nav-cont{
	margin-left:9%;
	margin-right:30%;
}
.job-detail{
	margin-top:50px;
	margin-left:50px;
	margin-right:50px;
}
.tags{
	margin-left:5%;
	margin-right:5%;
}
.tags  a {
	margin-top:2%;
	margin-bottom:1%;
}
.tags .btn-color{
	margin-top:3%;
	margin-bottom:3%;
	background-color:#fff;
	border-color:#DEDAD9;
}
.job-detail hr{
	width:100%;
}
.job-detail h4{
	font-family: 'Domine', serif;
}
.job-detail .btn{
	margin-top:5px;
	margin-bottom:2%;
}
.job-detail .alert{
	margin-top:50px;
	padding:2%;
	margin-bottom:50px;
}
.search-results h3 {
  margin-top:50px;
  font-family: 'Domine', serif;
}
.pagination {
	margin-top:30px;
}
.pagination a{
	text-decoration:none;
	margin-bottom:20px;
}
.search-results-not-found-list h4 {
	text-align:center;
	margin:50px;
}
.search-else form{
	text-align:center;
	margin-top:5%;
	margin-bottom:5%;
}
.search-else input[type=text] {
  padding: 10px;
  font-size: 17px;
  margin-left:50px;
  padding-right:0px;
}
.search-else button {
  padding: 10px;
  background: #ddd;
  font-size: 17px;
  cursor: pointer;
}
.overlay-content {
  position: relative;
  top: 46%;
  width: 100%;
  text-align: center;
  margin: auto;
}
.overlay button:hover {
  background: #bbb;
}
.view-job-button{
	display:block;
	padding-top:60px;
	padding-bottom:60px;
	text-align:center;
}
.btn-xl {
    padding: 10px 50px;
    font-size: 20px;
    border-radius: 10px;
	margin-left:0px;
}
.bg-color{
	background-color:#fff !important;
}
/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
.icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Style the icon bar links */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #BB401C;
  color: white;
}

.bar-hr {
  margin-top:3%;
}
.bar-hr .fa {
  padding:1px;
}
/* Style the icon bar links */
.bar-hr a {
  display:inline;
  text-align: center;
  padding: 10px;
  color: white;
  font-size: 10px;
}
.bar-hr .whatsapp {
  background: #5FD72C;
  color: white;
}
.bar-hr .telegram {
  background: #3CAAF1;
  color: white;
}
.bar-hr .messenger {
  background: #3CAAF1;
  color: white;
}
/* Style the social media icons with color, if you want */
.bar-hr a:hover {
  background-color: #000;
}

@media screen and (max-width: 400px) {
	.view-job-button  .btn{
		margin-left:0%;
		margin-top:5%;
		margin-bottom:5%;
		padding-top:5%;
		padding-bottom:5%;
    }
    .back-bg input[type=text] {
	    margin-bottom:9% !important;
	}
    .btn-xl {
        padding: 10px 50px;
        font-size: 15px;
        border-radius: 10px;
        margin-left:0px;
    }
}
@media screen and (max-width: 500px) {
	.content-what span{
		margin-bottom:0%;
	}
}
@media (max-width: 767.2px) {
    .dynamic-rounding {
        border-radius: 75%;
    }
    .content-what-img img{
        width:85%;
        height:75%;
        display: flex;
        justify-content: center;
        align-items: center !important;
    }
    .content-img{
        display: flex;
        justify-content: center;
        align-items: center !important;
    }
    .content-what-img p{
        margin-top:0%;
    }
}

@media screen and (max-width: 500px) {
	.back-bg{
		padding-top:40% !important;
		padding-bottom:40% !important;
	}
	.back-bg h1{
		font-size:30px;
		margin-bottom:-10px;
		text-align:center;
		margin-left:5px;
	}
	.back-bg button {
	  float: left;
	  width: 20%;
	  padding: 12px;
	  font-size: 12px;
	  border: none;
	  cursor: pointer;
	  margin-top:-15px;
	  background:#2681DD;
	}
	.back-bg input[type=text] {
	  padding: 12px;
	  font-size: 12px;
	  border: none;
	  float: left;
	  width: 90%;
	  background: white;
	  margin-top:-15px;
	  margin-right:0%;
	  margin-bottom:7%;
	}
	.dynamic-rounding {
        border-radius: 75%;
    }
   .content-what-img img{
        width:85%;
        height:75%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .large-screen{
        display:None;
    }
    .content-what-img .small-screen{
        margin-left:8%;
        margin-right:8%;
        margin-top:5%;
        margin-bottom:2%;
    }
      .content-what-img p{
        margin-left:2%;
        margin-right:2%;
        margin-top:0%;
    }
}
@media screen and (max-width: 1300px) {
    .mycontainer{
		margin-left:10%;
		margin-right:10%;
	}
	.nav-cont{
        margin-left:9%;
        margin-right:10%;
    }
    .nav-search {
		display:none;
    }
}

@media screen and (max-width: 1024px) {

    .mycontainer{
		margin-left:10%;
		margin-right:10%;
	}
}
@media screen and (max-width: 1000px) {
.user_bg{
        text-align:center;
        margin-top:10%;
        margin-left:5%;
        margin-right:5%;
        margin-bottom:5%;
    }
}
@media (min-width: 1024px) {
  .job-list{
		margin-right:30%;
		margin-left:3%;
	}
  .application .card{
    margin-right:3% !important;
  }
}
@media (min-width:992px) and (max-width: 1024px) {
  .application .card{
    margin-right:30% !important;
  }
}
@media screen and (max-width: 900px) {
    .user_bg{
        text-align:center;
        margin-top:7%;
        margin-left:5%;
        margin-right:5%;
        margin-bottom:2%;
    }
    .application .card{
        margin-right:15% !important;
  }
}
@media screen and (max-width: 768px) {
	.back-bg{
		padding:15%;
	}
	.back-bg button {
	    padding:3%;
	}
	.back-bg input[type=text] {
	    padding:3%;
	}
	.content-what-img h2{
        text-align:center;
    }
	.user_bg{
        text-align:center;
        margin-top:15%;
        margin-left:5%;
        margin-right:5%;
        margin-bottom:6%;
    }
    .user_bg input[type=text] {
        margin:0%;
        margin-bottom:1%;
        width:100% !important;
        margin-left:0% !important;
        padding-top:2.5%;
        padding-bottom:2%;
        margin-left:7%;
        font-size: 17px;
        border: 2px solid #E2DBD9!important;
        background: white;
    }
    input::placeholder {
        font-size: 10px; /* Set the font size to your desired value */
        color: #888;     /* Set the color of the placeholder text */
        }
    .user_bg button {
        float: left;
        padding:2%;
        height:100%;
        background: #2681DD;
        font-size: 17px;
        border: none;
        border-radius:0px;
        cursor: pointer;
        color:#fff;
    }
    .mycontainer{
		margin-left:2%;
		margin-right:2%;
	}
	.sub-footer {
		bottom:0;
	}
	.free-space{
	}
	.rounded-border{
        border-radius :0px;
        border:None;
    }
    .border-right{
        border-right:None!important;
    }
}

@media screen and (max-width: 600px) {
	.icon-bar  {
		display: none;	
}
}

@media screen and (max-width: 500px) {
    .mycontainer{
		margin-left:3%;
		margin-right:2%;
	}
	.nav-cont{
		margin-left:1%;
		margin-right:2%;
	}
	.pagination {
	    margin-top:30px;
	    margin-bottom:-10%;
	    font-size:12px;
    }
	.job-list h3{
		margin-left:1%;
		margin-right:1%;
	}
	.job-list{
		margin-top:12%;
		margin-left:0%;
		margin-right:0%;
	}
	.job-detail{
		margin-left:3%;
		margin-right:3%;
	}
	.job-detail-list{
		margin-left:1%;
		margin-right:1%;
	}
}


/* --- Scroll Top  Start --- */
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 10%; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}


/* --- Scroll Top End --- */


/* --- Contact area --- */


/* --- footer area --- */
.copyright {
	text-align:center;
	 color:white;
}
.copyright p {
	color:#2681DD ;
	text-align:center;
	font-size:12px;
}
.widget {
	margin-top:10px;
	padding:50px;
	text-align:left;
	margin-left:0px;
}
.widget p,ul {
	margin-top:10px;
	margin-left:0px;
}

h5.widgetheading{
	font-weight:bold;
	font-size:18px;
	color:#000;
}

.footer{
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  width: 100%;
}
.footer h5{
	color:#fff;
}
.footer p{
	padding:15px;
	color:#d9d9d9;
	text-align:left;
}
.address i {
    height: .5px;
    width: 30px;
    margin:15px 0px;
	color:#C2F281;
}
.address p{
	padding:15px;
	color:#d9d9d9;
	text-align:left;
}

.sub-footer {
	 margin-top:3%;
	 background-color:#2d2828 !important;
	 bottom: 0;
}
 .sub-footer hr{
	 display:inline-block;
	 color:white !important;	
}
ul.social-network {
	list-style:none;
	margin-top:30px;
	text-align:center;
	padding-left:0%;
}

ul.social-network li {
	display:inline;
	margin: 0 5px;
	color:#ff6e34;
}
ul.social-network li a {	
	color:#ff6e34;
}
ul.social-network li a i {	
	color:#fff;
}
@media screen and (max-width: 500px) {
	ul.social-network li a {
		text-align:center;
	}
}
@media screen and (max-width: 400px) {
	.sub-footer {
		margin-top:15%;
	}
	.free-space{
	}
}
@media screen and (max-width: 500px) {
	.sub-footer {
		margin-top:15%;
	}
}

@include media-breakpoint-between(xs,sm){
  .job-detail .btn {
      @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
  }
}
.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
  padding: 15px;
}
.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel-heading > .dropdown .dropdown-toggle {
  color: inherit;
}
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}
.panel-title > a {
  color: inherit;
}
.panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.panel > .list-group,
.panel > .panel-collapse > .list-group {
  margin-bottom: 0;
}
.panel > .list-group .list-group-item,
.panel > .panel-collapse > .list-group .list-group-item {
  border-width: 1px 0;
  border-radius: 0;
}
.panel > .list-group:first-child .list-group-item:first-child,
.panel > .panel-collapse > .list-group:first-child .list-group-item:first-child {
  border-top: 0;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel > .list-group:last-child .list-group-item:last-child,
.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child {
  border-bottom: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.panel-heading + .list-group .list-group-item:first-child {
  border-top-width: 0;
}
.list-group + .panel-footer {
  border-top-width: 0;
}
.panel > .table,
.panel > .table-responsive > .table,
.panel > .panel-collapse > .table {
  margin-bottom: 0;
}
.panel > .table caption,
.panel > .table-responsive > .table caption,
.panel > .panel-collapse > .table caption {
  padding-right: 15px;
  padding-left: 15px;
}
.panel > .table:first-child,
.panel > .table-responsive:first-child > .table:first-child {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel > .table:first-child > thead:first-child > tr:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
  border-top-left-radius: 3px;
}
.panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
  border-top-right-radius: 3px;
}
.panel > .table:last-child,
.panel > .table-responsive:last-child > .table:last-child {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
  border-bottom-left-radius: 3px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
  border-bottom-right-radius: 3px;
}
.panel > .panel-body + .table,
.panel > .panel-body + .table-responsive,
.panel > .table + .panel-body,
.panel > .table-responsive + .panel-body {
  border-top: 1px solid #ddd;
}
.panel > .table > tbody:first-child > tr:first-child th,
.panel > .table > tbody:first-child > tr:first-child td {
  border-top: 0;
}
.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
  border: 0;
}
.panel > .table-bordered > thead > tr > th:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
.panel > .table-bordered > tbody > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
.panel > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-bordered > thead > tr > td:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
.panel > .table-bordered > tbody > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
.panel > .table-bordered > tfoot > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
  border-left: 0;
}
.panel > .table-bordered > thead > tr > th:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
.panel > .table-bordered > tbody > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
.panel > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-bordered > thead > tr > td:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
.panel > .table-bordered > tbody > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
.panel > .table-bordered > tfoot > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
  border-right: 0;
}
.panel > .table-bordered > thead > tr:first-child > td,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
.panel > .table-bordered > tbody > tr:first-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
.panel > .table-bordered > thead > tr:first-child > th,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
.panel > .table-bordered > tbody > tr:first-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
  border-bottom: 0;
}
.panel > .table-bordered > tbody > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
.panel > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-bordered > tbody > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
.panel > .table-bordered > tfoot > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
  border-bottom: 0;
}
.panel > .table-responsive {
  margin-bottom: 0;
  border: 0;
}
.panel-group {
  margin-bottom: 20px;
}
.panel-group .panel {
  margin-bottom: 0;
  border-radius: 4px;
}
.panel-group .panel + .panel {
  margin-top: 5px;
}
.panel-group .panel-heading {
  border-bottom: 0;
}
.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
  border-top: 1px solid #ddd;
}
.panel-group .panel-footer {
  border-top: 0;
}
.panel-group .panel-footer + .panel-collapse .panel-body {
  border-bottom: 1px solid #ddd;
}
.panel-default {
  border-color: #ddd;
}
.panel-default > .panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #ddd;
}
.panel-default > .panel-heading .badge {
  color: #f5f5f5;
  background-color: #333;
}
.panel-default > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #ddd;
}
.panel-primary {
  border-color: #337ab7;
}
.panel-primary > .panel-heading {
  color: #fff;
  background-color: #337ab7;
  border-color: #337ab7;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #337ab7;
}
.panel-primary > .panel-heading .badge {
  color: #337ab7;
  background-color: #fff;
}
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #337ab7;
}
.panel-success {
  border-color: #d6e9c6;
}
.panel-success > .panel-heading {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.panel-success > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #d6e9c6;
}
.panel-success > .panel-heading .badge {
  color: #dff0d8;
  background-color: #3c763d;
}
.panel-success > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #d6e9c6;
}
.panel-info {
  border-color: #bce8f1;
}
.panel-info > .panel-heading {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.panel-info > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #bce8f1;
}
.panel-info > .panel-heading .badge {
  color: #d9edf7;
  background-color: #31708f;
}
.panel-info > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #bce8f1;
}
.panel-warning {
  border-color: #faebcc;
}
.panel-warning > .panel-heading {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.panel-warning > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #faebcc;
}
.panel-warning > .panel-heading .badge {
  color: #fcf8e3;
  background-color: #8a6d3b;
}
.panel-warning > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #faebcc;
}
.panel-danger {
  border-color: #ebccd1;
}
.panel-danger > .panel-heading {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.panel-danger > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #ebccd1;
}
.panel-danger > .panel-heading .badge {
  color: #f2dede;
  background-color: #a94442;
}
.panel-danger > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #ebccd1;
}

/* --- User Index page tab --- */

.tab {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background-color: #f9f8f8;
  text-align:center!important;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #2681DD;
  color:#fff;
}

/* Style the tab content */
.tabcontent {
    margin-top:3%;
    display: none;
    padding: 6px 12px;
    border-top: none;
    text-align:center;
}