/* --------- Fonts --------- */

/* Merriweather */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');


/* Helvetica */

@font-face {
  font-family: 'Helvetica';
  src: url('../fonts/Helvetica-Bold.eot');
  src: url('../fonts/Helvetica-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Helvetica-Bold.woff2') format('woff2'),
      url('../fonts/Helvetica-Bold.woff') format('woff'),
      url('../fonts/Helvetica-Bold.ttf') format('truetype'),
      url('../fonts/Helvetica-Bold.svg#Helvetica-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica';
  src: url('../fonts/Helvetica.eot');
  src: url('../fonts/Helvetica.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Helvetica.woff2') format('woff2'),
      url('../fonts/Helvetica.woff') format('woff'),
      url('../fonts/Helvetica.ttf') format('truetype'),
      url('../fonts/Helvetica.svg#Helvetica') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}



/* --------- Basic Css --------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root{
  --font-helvetica: 'Helvetica';
  --font-merriweather: "Merriweather", serif;

  --dark-blue: #ffffff;
  --red: #521a1a;
  --white: #ffffff;
}

body {
  font-family: var(--font-helvetica);
  font-weight: 400;
  background-color: #521a1a;
  padding: 50px 15px;
}


h1, h2, h3, h4, h5, h6{
  font-family: var(--font-helvetica);
}



/* ---------------- Data Form -------------- */


/* header */

.header_title {
  text-align: center;
  text-transform: capitalize;
  font-size: 34px;
  font-weight: 700;
  padding-bottom: 30px;
}

.header_title span{
  color: var(--dark-blue);
}

.header_title h3{
  color: var(--dark-blue);
}





/* id__wrapper */

.id__wrapper {
  width: 100%;
  max-width: 700px;
  transition: width 0.2s ease-in-out;
  margin: auto;
  background-color: var(--white);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.04);
  padding: 40px 30px;
  margin: auto;
  border-radius: 12px;
  position: relative;
}

.id__wrapper>div {
  transition: all 0.1s ease;
}

.id__wrapper .name{
  grid-column: 1 / 3;
}

/* Profile */

.profile {
  display: block;
  background-color: var(--white);
  border: 1px solid var(--red);
  cursor: pointer;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 10px;
  margin: auto;
  margin-bottom: 25px;
  position: relative;
  transition: 200ms;
}

.profile:hover{
  background-color: #fdebeb;
}

.profile p{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-size: 13px;
}

.profile p .icon{
  width: 45px;
  height: auto;
  margin-bottom: 5px;
}

.profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile input {
  opacity: 0;
  position: absolute;
  pointer-events: none;
  bottom: 0;
  left: 0;
  left: 50%;
  transform: translateX(-50%);
}


/* input wrapper */

.input_wrapper{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

label {
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
  display: block;
  flex: 0 0 auto;
  text-transform: capitalize;
}

.star_symbol{
  color: #e46450;
}

.input_box{
  border: none;
  padding: 0 13px;
  height: 40px;
  width: 100%;
  border: none;
  border-radius: 5px;
  resize: none;
  overflow: visible;
  line-height: 1;
  font-family: var(--font-helvetica);
  font-size: 16px;
  background-color: #fdebeb;
}

.input_box:focus{
  outline: none;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.04);
}



/* Button */

.button {
	border: none;
	cursor: pointer;
	display: inline-block;
  width: 240px;
	padding: 20px;
	width: 180px;
  font-size: 14px;
  text-transform: capitalize;
	line-height: 1;
	border-radius:5px;
	color: var(--white);
	background-color: var(--red);
  border: #fdebeb 1px solid;
	position: relative;
	font-family: var(--font-helvetica);
	top: 0;
	transition: 0.1s ease;
  letter-spacing: 1.5px;
  transition: 100ms;
}

.button:hover {
  top: -3px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  color: var(--red);
}


.submit_btn_wrap{
  text-align: center;
  padding-top: 40px;
}

.submit_btn_wrap .button{
  width: 240px;
}



/* ---------------- Card -------------- */

.card{
  display: none;
  margin-left: auto;
  margin-right: auto;
  width: 482px;
  max-width: 100%;
}

.card > div{
  position: relative;
  min-height: 312px;
  background: var(--white);
  box-shadow: 0 4px 4px rgb(0, 0, 0, 0.1);
}


/* ----- card front Side ------- */

.card_frontSide{
  padding: 25px 28px;
  margin-bottom: 20px !important;
}

.card_frontSide .logo{
  padding-bottom: 22px;
  text-align: end;
}

.card_frontSide .logo img{
  width: 171px;
}

.card_frontSide_inner{
  display: grid;
  grid-template-columns: 1fr 170px;
  gap: 0 30px;
}

.card_frontSide .title {
	font-size: 24px;
	color: #ed1c24;
	font-weight: bold;
	font-family: var(--font-merriweather);
	padding-bottom: 17px;
	line-height: 1;
}

.card_frontSide .user_name h5{
  font-size: 16px;
  color: #231f20;
  font-weight: bold;
  font-family: var(--font-helvetica);
  padding-bottom: 1px;
  text-transform: capitalize;
}

.card_frontSide .user_name p{
  font-size: 12px;
  color: #231f20;
  font-weight: 400;
  font-family: var(--font-helvetica);
  text-transform: capitalize;
}

p.drk_text {
	font-size: 14px;
	line-height: 1.14285;
	color: #231f20;
	font-weight: 400;
	font-family: var(--font-helvetica);
	padding: 16px 0 24px;
}

.number_wrap p{
  font-size: 11px;
  line-height: 1.3;
  color: #4f4c4d;
  font-weight: 400;
  font-family: var(--font-helvetica);
}


.card_profile_wrap{
  position: relative;
}

.profile_img{
  width: 130px;
  height: 176px;
  position: relative;
  z-index: 1;
}

.profile_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.barcode {
  width: 173px;
	position: absolute;
	top: 69px;
	right: -74px;
	transform: rotate(-90deg);
}



/* ----- card back Side ------- */

.card_backSide{
  padding: 27px 28px 25px 28px;
}

.card_backSide_content p{
  font-size: 11.5px;
  line-height: 1.2;
  color: #231f20;
  font-weight: 400;
  font-family: var(--font-helvetica);
  padding-bottom: 6px;
}

.card_backSide_content .text_bold{
  font-weight: bold;
  font-family: var(--font-helvetica);
}

.card_backSide_content .text_noraml{
  margin-right: -5px;
}

.card_backSide_content .text_italic{
  font-style: italic;
  color: #4f4c4d;
  font-family: var(--font-helvetica);
}

.card_backSide_footer{
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  padding-top: 16px;
}

.card_backSide_footer p{
  font-size: 11px;
  line-height: 13.2px;
  color: #231f20;
  font-family: var(--font-helvetica);
}

.card_backSide_footer .fullName,
.card_backSide_footer .street,
.card_backSide_footer .postAndCity{
  text-transform: capitalize;
}

.card_backSide_footer .text_bold{
  font-weight: bold;
}

.card_backSide_footer a{
  text-decoration: none;
  color: inherit;
}


/* print btns */

.print_btns{
  display: none;
  justify-content: center;
  gap: 0 15px;
  padding-top: 40px;
}





/* ------------- As card ------------ */

.as-card .header_title h3:nth-child(1) {
  display: none;
}

.as-card .header_title h3:nth-child(2) {
  display: block;
}

.as-card .data_form{
  display: none;
}

.as-card .card{
  display: block;
}

.as-card .print_btns{
  display: flex;
}




/* ----- Card Print ------- */

@media print {

  body{
    background: #fff !important;
    padding: 0 !important;
  }

  .card > div {
    box-shadow: none;
    page-break-inside: avoid;
  }

  .card_frontSide{
    margin-bottom: 0 !important;
  }

  .card_backSide{
    page-break-before: always;
  }

  .header_title{
    display: none !important;
  }

  .print_btns {
    display: none !important;
  }

  @page {
      size: 482px 312px;
      margin: 0;
  }

  .card_frontSide{
    width: 482px;
    height: 312px;
  }

  .card_backSide{
    width: 482px;
    height: 312px;
  }

}