/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    font-family: "Montserrat", sans-serif;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
:root{
    --side_padding: 20px;
    --branding: #ff6f61;
}

/*app wrapper*/
body{
    width: 100%;
    height :100%;
}
.iq_app_wrapper {
    width: 100vw;
    height: 100%;
    position: fixed;
    z-index: 1;
    overflow: hidden;
    background-color: #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    }
.iq_app
{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: relative;
    max-width: 500px;
    max-height: 900px;
    background-color: white;
    overflow: hidden;
}
.iq_card_content {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--branding);
    display: grid;
    grid-template-columns: 1fr;
    top: 0px;
    grid-template-rows: 230px 1fr 100px;
    left: 0px;
}
.iq_card_content > * {
    position: relative;
}
.iq_card_header_actions {
    position: absolute;
    top: 10px;
    width: calc(100% - calc(var(--side_padding) + var(--side_padding)));
    left: var(--side_padding);
    height: 50px; 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}
.iq_card_header_avatar {
    position: absolute;
    left: calc(50% - 150px);
    width: 300px;
    height: calc(100% - 10px);
    bottom: 0px;
    display: flex;
    justify-content: center;
}
.iq_card_header_avatar > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.iq_card_info {
    background-color: white;
    overflow: hidden;
}

.iq_card_fields {
    padding-left: var(--side_padding);
    padding-right: var(--side_padding);
    padding-top: 20px;
    padding-bottom: 10px;
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: white;
    box-sizing: border-box;
    align-content: space-between;
}
.iq_card_field_icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 1 / span 1;
    grid-row: 1 / span 2;
}
.iq_card_field {
    display: grid;
    grid-template-columns: 30px 1fr;
    grid-template-rows: 15px 18px;
    grid-gap: 5px;
    align-items: center;
    margin-bottom: 10px;
}
.iq_card_field_value {
    grid-column: 2 / span 1;
}
.iq_card_field_label {
    font-weight: 800;
    color: var(--branding);
    font-size: 13px;
}
.iq_card_actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 5px;
    align-content: center;
    padding-left: var(--side_padding);
    padding-right: var(--side_padding);
}
.iq_card_action {
    background-color: #ffffff;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
}
.iq_card_action_halfsize{
    grid-column: span 2;
}
.iq_card_action_thirdsize{
    grid-column: span 1;
}
.iq_card_action_fullsize{
    grid-column: span 3;
}
.iq_modal {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #191919de;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.iq_share_modal {
    background-color: white;
    padding: 15px;
    border-radius: 4px;
}
.iq_share_modal {
    background-color: white;
    padding: 15px;
    border-radius: 4px;
    max-width: calc(100% - calc(var(--side_padding)* 2));
    width: 80%;
    box-sizing: border-box;
}
.iq_share_header {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 2px solid gainsboro;
}
.iq_share_header_title {
    font-size: 16px;
    font-weight: 800;
    color: var(--branding)
}
.iq_share_qr {
    width: 100%;
    height: 370px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.iq_card_title_name {
    color: white;
    font-size: 18px;
    font-weight: 700;
}
.ic_card_title {
    color: white;
    position: absolute;
    left: 0px;
    width: 100%;
    background-color: transparent;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding-bottom: 10px;
    padding-top: 20px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 90%);
}
.ic_card_companies {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 20px;
    padding-left: var(--side_padding);
    padding-right: var(--side_padding);
    padding-top: 20px;
    padding-bottom: 20px;
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: white;
    box-sizing: border-box;
    align-content: space-between;
}
.iq_card_company{
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding-top: 10px;
    padding-bottom:10px;
}
.iq_card_company_logo{
    width: 100px;
    height: 100px;
    border-radius: 4px;
}
.iq_card_company_logo> img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    overflow: hidden;
}
.iq_card_company_name{
    font-size: 14px;
    font-weight: 800;
    padding: 5px;
}

.iq_card_header_avatar.iq_card_header_avatar_circle {
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid red;
    width: 150px;
    height: 150px;
    top: calc(50% - 85px);
    left: calc(50% - 85px);
    border: 10px solid #0000000d;
}
.qinvisible{
    opacity: 0;
    pointer-events: none;
}

.iq_share_qr_instruction_subtitle {
    background-color: var(--branding);
    padding: 10px;
    color: white;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    border-radius: 4px;
}

.qruw_init_loader {
    width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #f03355;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    animation: qlinit_1 2s infinite cubic-bezier(0.3,1,0,1);
    position: fixed;
    z-index: 0;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
    transform: scale(2);
}
  @keyframes qlinit_1 {
    33% {border-radius: 0;background: #514b82 ;clip-path: polygon(0 0,100% 0,100% 100%,0 100%)}
    66% {border-radius: 0;background: #ffa516 ;clip-path: polygon(50% 0,50% 0,100% 100%,0 100%)}
  }
  /*animaties default*/
.delay1{
    animation-delay: 0.2s;
}
.delay2{
    animation-delay: 0.4s;
}
.delay3{
    animation-delay: 0.6s;
}
.delay4{
    animation-delay: 0.8s;
}
.delay5{
    animation-delay: 1s;
}
.delay6{
    animation-delay: 1.2s;
}
.delay7{
    animation-delay: 1.4s;
}
.delay8{
    animation-delay: 1.6s;
}
.delay9{
    animation-delay: 1.8s;
}

/* HTML: <div class="loader"></div> */
.iq_modal_loader {
    width: 60px;
    aspect-ratio: 1;
    transform:scale(1.5);
    display: flex;
    animation: l8-0 2s infinite sptes(1);
  }
  .iq_modal_loader::before,
  .iq_modal_loader::after {
    content: "";
    flex: 1;
    animation: 
      l8-1 1s infinite linear alternate,
      l8-2 2s infinite steps(1) -.5s;
  }
  .iq_modal_loader::after {
    --s:-1,-1;
  }
  @keyframes l8-0 {
    0%  {transform: scaleX(1)  rotate(0deg)}
    50% {transform: scaleX(-1) rotate(-90deg)}
  }
  @keyframes l8-1 {
    0%,
    5%   {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateY(0deg) }
    33%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(0deg) }
    66%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(-180deg)}
    95%,
    100% {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateX(-180deg)}
  }
  @keyframes l8-2 {
    0%  {background:#f03355}
    50% {background:#ffa516}
  }
  .iq_modal_translateUP > .iq_share_modal {
    transform: translate(0%, -25vh);
    transition: all 500ms cubic-bezier(0.000, 0.600, 0.355, 0.990); /* custom */
    transition-timing-function: cubic-bezier(0.000, 0.600, 0.355, 0.990); /* custom */
}

.iq_card_action {
    background-color: #ffffff;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    border-radius: 7px;
}
.iq_card_actions > .iq_card_action {
    background-color: white;
    padding: 15px 5px;
    font-size: 18px;
    font-weight: 800;
}
.animate__animated{
    animation-duration: .8s!important;
    transition: all 400ms cubic-bezier(0.860, 0.205, 0.000, 1.005)!important; /* custom */
    transition-timing-function: cubic-bezier(0.860, 0.205, 0.000, 1.005)!important; /* custom */
}