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

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

a{
    text-decoration: none;
}

select,input,textarea{
    outline: none;
    border:0;
    box-shadow: initial !important;
}

:root{
    --whitecolor:#fff;
    --blackcolor:#131313;
    --bluecolor:#00a0e3;
    --ffPoppinsR:'PoppinsR';
    --ffPoppinsB:'PoppinsB';
    --fs10:10px;
    --fs12:12px;
    --fs14:14px;
    --fs16:16px;
    --fs18:18px;
    --fs20:20px;
    --fs22:22px;
    --fs24:24px;
    --fs26:26px;
    --fs28:28px;
    --fs30:30px;
}

.bodyWrapper{
    font-family: var(--ffPoppinsR);
}


.thumbnailBlock{
    background: url('../img/bg-thumbnail.png') no-repeat center/cover;
    padding: 30px;
}

.thumbnailBlock .avatarBlock .profileBlock .handsBlock{
    left: 50%;
    transform: translateX(-50%);
    bottom: -30px;
    width: 100%;
}

.avatarBlock .profileBlock {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.avatarBlock .profileBlock img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    border-radius: 50%;
}

.btnBlock{
    display: flex;
    gap: 50px;
}

.btnBlock .btnPrimary{
    background-color:var(--whitecolor) ;
    font-size: var(--fs18);
    font-family: var(--ffPoppinsR);
    display: inline-flex;
    padding:0 30px;
    border-radius: 20px;
    color:var(--blackcolor);
    align-items: center;
    justify-content: center;
    gap:10px;
    text-align: center;
    width: 100%;
    border:0;
    height: 40px;
}

.btnBlock .btnSecondary{
    background-color:var(--bluecolor) ;
    font-size: var(--fs18);
    font-family: var(--ffPoppinsR);
    display: inline-flex;
    padding:0 30px;
    border-radius: 20px;
    color:var(--whitecolor);
    align-items: center;
    justify-content: center;
    gap:10px;
    text-align: center;
    border:0;
    height: 40px;
}

.btnBlock .iconBlock img{
    width: 20px;
    height: 20px;
}

.wrapper .fillFormBlock{
    max-width: 800px;
    margin:0 auto;
    width: 100%;
    padding:30px;
}

.fillFormBlock .fieldGrp{
    display: flex;
    align-items: center;
    width: 100%;
}

.fillFormBlock .fieldGrp:not(:last-child){
    margin:0 0 15px;
}

.fillFormBlock .fieldGrp .rightContent{
    width: calc(100% - 35px);
}

.fillFormBlock .fieldGrp .rightContent .txtLabel{
    color:var(--blackcolor);
    font-family: var(--ffPoppinsB);
    font-size: var(--fs20);
    display: block;
    margin:0 0 5px;
}

.fillFormBlock .fieldGrp .rightContent .fieldInput{
    color:var(--blackcolor);
    font-family: var(--ffPoppinsR);
    font-size: var(--fs14);
    border:0;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    width: 100%;
}

.loginBlock .fieldGrp,
.loginBlock .fieldGrp .rightContent .fieldInput{
    cursor: pointer;
}

/*------------------------------------------ validation toast style pa----------------------------------- */

#snackbar {
    visibility: hidden;
    min-width: 300px;
    background-color: #a7854a;
    color: #fff;
    text-align: center;
    border-radius: 16px;
    padding: 16px;
    position: fixed;
    z-index: 9999999;
    left: 50%;
    top: 30px;
    font-size: 14px;
    transform: translate(-50%, -10%);
    opacity: 0;
    transition: 0.25s all ease;
    font-weight: 600;
    font-family: var(--ff-trajanprob);
  }
  
  /* START > PRELOADER */
  .preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    background-color: #000000ba;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  
  .spinner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: conic-gradient(#0000 10%, #a7854a);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
    animation: s3 1s infinite linear;
  }
  
  @keyframes s3 {
    to {
      transform: rotate(1turn);
    }
  }
  
  /* END > PRELOADER */
  
  #snackbar.show {
    visibility: visible;
    opacity: 1;
    animation: fadein 0.25s, fadeout 0.25s 2.5s;
    transition: 0.5s all ease;
  }

  @media (max-width:767px){
    .fillFormBlock .fieldGrp .rightContent .txtLabel{
        font-size: var(--fs16);
    }
    .btnBlock{
        gap:10px;
    }
    .wrapper .fillFormBlock{
        padding:10px;
   }
}