@font-face {
    font-family: 'FbPracticaBold';
    src: url('FbPractica-Bold.otf');
}

@font-face {
    font-family: 'FbPracticaBlack';
    src: url('FbPractica-SemiBlack.otf');
}

@font-face {
    font-family: 'FbPracticaRegular';
    src: url('FbPractica-Regular.otf');
}

@font-face {
    font-family: 'FbPracticaLight';
    src: url('FbPractica-Light.otf');
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: #511bbbff
}

.main-wrapper {
    width: 1300px;
    height: 1920px;
    position: fixed;
}

#welcomeContinueBtn {
    position: absolute;
    z-index: 2;
    top: 1686px;
    left: 435px;
}

#welcomeTitle {
    position: absolute;
    left: 0px;
    top: 460px;
    width: 100%;
    z-index: 2;
    font-family: FbPracticaBold;
    color: white;
    text-align: center;
    font-size: 90px;
    direction: rtl;
    color: #f72586;
}

#welcomeDesc {
    position: absolute;
    left: 0px;
    top: 650px;
    width: 100%;
    z-index: 2;
    font-family: FbPracticaRegular;
    color: white;
    text-align: center;
    font-size: 52px;
    line-height: 52px;
    direction: rtl;
}

#thanksSelfieTitle {
    position: absolute;
    left: 0px;
    top: 500px;
    width: 100%;
    z-index: 2;
    font-family: FbPracticaBold;
    color: white;
    text-align: center;
    font-size: 80px;
    direction: rtl;
    color: #f72586;
}

#thanksSelfieDesc {
    position: absolute;
    left: 0px;
    top: 740px;
    width: 100%;
    z-index: 2;
    font-family: FbPracticaRegular;
    color: white;
    text-align: center;
    font-size: 52px;
    line-height: 52px;
    direction: rtl;
}

#regTitle {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 542px;
    width: 900px;
    z-index: 2;
    font-family: FbPracticaBold;
    color: white;
    text-align: center;
    font-size: 82px;
    line-height: 80px;
    direction: rtl;
}

#regNameInput {
    position: absolute;
    z-index: 2;
    background: url('/input_bg.png');
    width: 927px;
    height: 226px;
    border: 0;
    left: 50%;
    transform: translate(-50%, 0);
    top: 740px;
    padding: 0;
    margin: 0;
    font-family: FbPracticaRegular;
    font-size: 61px;
    padding-right: 104px;
    padding-left: 104px;
}

    #regNameInput::placeholder {
        color: #b3b3b3;
        direction: rtl;
        text-align: right;
    }

#regPhoneInput {
    position: absolute;
    z-index: 2;
    background: url('/input_bg.png');
    width: 927px;
    height: 226px;
    border: 0;
    left: 50%;
    transform: translate(-50%, 0);
    top: 922px;
    padding: 0;
    margin: 0;
    font-family: FbPracticaRegular;
    font-size: 61px;
    padding-right: 104px;
    padding-left: 104px;
}

    #regPhoneInput::placeholder {
        color: #b3b3b3;
        direction: rtl;
        text-align: right;
    }

*:focus {
    outline: none !important;
    -webkit-box-shadow: none;
    box-shadow: none !important;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}

input[data-autocompleted] {
    background-color: transparent !important;
}

#regTOCText {
    position: absolute;
    top: 1160px;
    left: 312px;
    width: 650px;
    z-index: 2;
    font-family: FbPracticaRegular;
    color: white;
    text-align: right;
    font-size: 48px;
    line-height: 49px;
    direction: rtl;
}

#regOnlyOnce {
    position: absolute;
    top: 1288px;
    left: 50%;
    width: 100%;
    transform: translate(-50%, 0);
    z-index: 2;
    font-family: FbPracticaRegular;
    color: white;
    text-align: center;
    font-size: 40px;
    direction: rtl;
}

#regTOCCheckbox {
    position: absolute;
    z-index: 2;
    top: 1150px;
    left: 987px;
}

#regTOCCheckboxOn {
    position: absolute;
    z-index: 2;
    top: 1150px;
    left: 987px;
    display: none;
    pointer-events: none;
}

#regSubmitBtn {
    background: url('/reg_btn.png');
    position: absolute;
    z-index: 2;
    width: 430px;
    height: 110px;
    border: 0;
    left: 50%;
    transform: translate(-50%, 0);
    top: 1432px;
}

.regPopup {
    position: fixed;
    background-color: #00000088;
    width: 1000%;
    height: 1000%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}


.regPopupBackground {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


#regPopupCloseBtn1 {
    width: 150px;
    height: 150px;
    background-color: transparent;
    z-index: 15;
    position: absolute;
    left: 52%;
    top: 48.76%;
    border: 0;
}

#regPopupCloseBtn2 {
    width: 150px;
    height: 150px;
    background-color: transparent;
    z-index: 15;
    position: absolute;
    left: 52%;
    top: 48.76%;
    border: 0;
}

#questionsTitle {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 482px;
    width: 620px;
    z-index: 2;
    font-family: FbPracticaBold;
    color: white;
    text-align: center;
    font-size: 82px;
    line-height: 69px;
    direction: rtl;
}

.questionText {
    font-family: FbPracticaRegular;
    color: white;
    font-size: 55px;
    z-index: 2;
    direction: rtl;
    width: 927px;
    text-align: center;
    line-height: 50px;
    height: 90px;
}

.questionButton {
    width: 25rem;
    background-color: transparent;
    background: url("/input_bg.png") no-repeat scroll 0 0 transparent;
    border: 0;
    width: 927px;
    height: 226px;
    font-family: FbPracticaRegular;
    font-size: 55px;
    padding: 0 80px;
    line-height: 40px;
    direction: rtl;
    z-index: 2;
}

.questionsButton {
    width: 25rem;
    background-color: transparent;
    background: url("/next_question_btn.png") no-repeat scroll 0 0 transparent;
    border: 0;
    width: 530px;
    height: 110px;
    font-family: FbPracticaRegular;
    font-size: 55px;
    padding: 0 80px;
    line-height: 40px;
    direction: rtl;
    color: white;
    z-index: 2;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 1750px;
}

#answers {
    position: absolute;
    left: 50%;
    top: 700px;
    transform: translate(-50%,0);
}

.form-group {
    margin-bottom: 0.5rem;
}


.selectedImg {
    background-color: #11db59;
}

#generatingTitle {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 500px;
    color: white;
    font-family: FbPracticaBold;
    font-size: 110px;
    direction: rtl;
}

#generatingPleaseWait {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 630px;
    color: white;
    font-family: FbPracticaRegular;
    font-size: 80px;
    direction: rtl;
    text-align: center;
    width: 100%;
}

#selectTitle {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 542px;
    width: 500px;
    z-index: 2;
    font-family: FbPracticaBold;
    color: white;
    text-align: center;
    font-size: 82px;
    line-height: 80px;
    direction: rtl;
}

#frame1 {
    z-index: 2;
    position: absolute;
    top: 712px;
    left: 180px;
}

#frame2 {
    z-index: 2;
    position: absolute;
    top: 712px;
    left: 627px;
}

#img1 {
    position: absolute;
    z-index: 2;
    width: 399px;
    left: 228px;
    top: 760px;
    border-radius: 51px
}

#img2 {
    position: absolute;
    z-index: 2;
    width: 399px;
    left: 675px;
    top: 760px;
    border-radius: 51px
}

#selectBtn1 {
    position: absolute;
    z-index: 2;
    left: 231px;
    top: 1216px;
    border-radius: 51px
}

#selectBtn2 {
    position: absolute;
    z-index: 2;
    left: 678px;
    top: 1216px;
    border-radius: 51px
}

#submitSelectedBtn {
    position: absolute;
    z-index: 2;
    top: 1690px;
    left: 435px;
}


#searchRes tr td {
    padding: 0.2rem 0.5rem;
    border: 1px solid;
    min-width: 5rem;
}

#searchRes tr:nth-child(even) {
    background-color: #eee;
}

.showcase-image {
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 3%;
}

.showcase-slot0 {
    width: 8%;
    left: -10%;
    z-index: 10;
    filter: brightness(20%) drop-shadow(0 0 1.75rem #00000099);
}

.showcase-slot1 {
    width: 18%;
    left: 8%;
    z-index: 20;
    filter: brightness(33%) drop-shadow(0 0 1.75rem #00000099);
}

.showcase-slot2 {
    width: 32%;
    left: 22%;
    z-index: 30;
    filter: brightness(60%) drop-shadow(0 0 1.75rem #00000099);
}

.showcase-slot3 {
    width: 45%;
    left: 50%;
    z-index: 40;
    filter: brightness(100%) drop-shadow(0 0 1.75rem #00000099);
}

.showcase-slot4 {
    width: 32%;
    left: 78%;
    z-index: 30;
    filter: brightness(60%) drop-shadow(0 0 1.75rem #00000099);
}

.showcase-slot5 {
    width: 18%;
    left: 92%;
    z-index: 20;
    filter: brightness(33%) drop-shadow(0 0 1.75rem #00000099);
}

.showcase-slot6 {
    width: 8%;
    left: 110%;
    z-index: 10;
    filter: brightness(20%) drop-shadow(0 0 1.75rem #00000099);
}

#showcase-bg {
    background: linear-gradient(0deg, rgba(13,28,34,1) 0%, rgba(34,72,87,1) 45%, rgba(34,72,87,1) 55%, rgba(13,28,34,1) 100%);
    position: fixed;
    width: 100%;
    height: 100%;
}

#takeSelfieButton {
    height: 6rem;
    color: white;
    background-color: #f72585;
    border-radius: 20px;
    width: 20rem;
    font-size: 3rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 56%;
    transform: translate(-50%, -50%);
}

#takeSelfieTitle {
    position: absolute;
    left: 0px;
    top: 230px;
    width: 100%;
    z-index: 2;
    font-family: FbPracticaBold;
    color: white;
    text-align: center;
    font-size: 70px;
    direction: rtl;
    color: white;
}

#selfieThanksTitle {
    position: absolute;
    left: 0px;
    top: 40%;
    width: 100%;
    z-index: 2;
    font-family: FbPracticaBold;
    color: white;
    text-align: center;
    font-size: 70px;
    direction: rtl;
    color: white;
}

.ellipsisText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40px;
}

#pleaseUsePortraitMode {
    background-color: #000000cc;
    width: 100%;
    height: 100%;
    position: fixed;
    font-size: 3rem;
    color: white;
}

#pleaseUsePortraitMode > p {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
}

@media (orientation: portrait) {
    #pleaseUsePortraitMode {
        display: none;
    }
}

@media (orientation: landscape) {
    #pleaseUsePortraitMode{
        display: block;
    }
}