@import url("fontha.css");

*, *::after , *::before {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* ---------------- */
/* variables for this page */
/* ---------------- */

:root {
    --color-primary: #A02C3D;
    --color-secondary: #D5684B;
    --color-primary75: #B8616E;
    --color-border: #5A5556;
    --color-trans: rgba(196, 196, 196, 0.25);
    --colorSecond: rgba(229, 109, 138, .6);
    --color-text1: #DFE31A;
    --color-trans-text: rgba(223, 227, 26, .5);
    --color-text2: #FFFFFF;
    --color-accent: #BBC956;
    --color-primary50: rgba(160,44,61, .5);
    --color-error: rgba(227, 29, 50, .9);
    --color-error2: rgba(227, 29, 50, .5);
    --color-error3: rgba(227, 29, 50, .3);
    --color-tErore: #e3908d;
    --color-darker: #455255;
    --color-correct: rgba(110, 221, 29, 0.86);
    --color-correct2: rgba(110, 221, 29, 0.5);
    --color-correct3: rgba(110, 221, 29, 0.3);
    --color-tCorrect: #52f543;
    --dashbooks: rgba(240, 160, 162, .95);
    --dashbooks1: rgba(150, 200, 150, .6);
}


/* ---------------- */
/* grid styles */
/* ---------------- */


.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.column {
    float: left;
    padding: 5px;
}


.column-right {
    float: right;
    padding: 5px;
}

header {
    margin-top: 6px;
    width: 100%;
}

header > div {
    width: 25%;
    min-height: 150px;
}

header > div:nth-child(2) {
    width: 50%;
}

.parent-main > div {
    min-height: 1200px;
    width: 11%;
}

.parent-main > div:nth-child(2) {
    width: 78%;
}

/* ---------------- */
/* general styles */
/* ---------------- */

body {
    background-color: var(--color-primary75);
    font-family: Blotus1;
}

.pos-r {
    position: relative;
}

.pos-child {
    position: absolute;
    top: 50%;
    right: 50%;
}

.child-right {
    transform: translate(50%, -50%);
}

.child-left {
    transform: translate(50%, -55%);
}

/* ---------------- */
/* "index.php" styles */
/* ---------------- */

#parSection {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

#parSection div {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}

#parSection a {
     padding: 0.5em 1.1em;
     font-size: 2.3rem;
     margin: 24px 15px;
     text-decoration: none;
     border-radius: .15em;
     font-family: Narenj;
     font-weight: 800;
     text-align: center;
     color: var(--color-text2);
     background-color: var(--color-accent);
     position: relative;
     transition: .5s all;
}

#parSection a:first-child {
    background-color: var(--color-darker);
}

#parSection a:hover {
    background-color: var(--color-primary);
    box-shadow:inset 0 -0.6em 0 -0.35em var(--color-trans);
}

#parSection a:active {
    top: 0.1em;
}


/* ---------------- */
/* "header" styles */
/* ---------------- */

header h1 {
    font-size: 140px;
    font-family: Narenj;
    color: var(--color-text1);
    text-align: center;
}

/* text in the middle of header */
.vasati {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 45px;
}

#matn-bala {
    font-size: 28px;
    color: var(--color-text2);
}

#matn-bala span {
    color: var(--color-text1);
}

/* logo in the header */
.logo-img {
    text-align: center;
}

.logo-img img {
    width: 210px;
    height: 210px;
}


/* ---------------- */
/* "main-right" styles */
/* ---------------- */

.backImg {
    background-image: url("../image/BG image/social-icons.png");
    height: 530px;
    width: 97%;
}

.icons-parent {
    margin: 56px auto;
    width: 85%;
}

.fa-telegram {
    color: #0088cc;
}


.fa-whatsapp-square {
    color: #25d366;
}

.fa-reddit-square {
    color: #ff4500;
}

 .fa-instagram-square {
     color: #f77737;
 }

 .fa-twitter-square {
     color: #1da1f2;
 }

.fa-telegram:hover, .fa-whatsapp-square:hover, .fa-reddit-square:hover, .fa-instagram-square:hover, .fa-twitter-square:hover {
    color: var(--color-primary50);
    cursor: pointer;
}

.fa-telegram:active, .fa-whatsapp-square:active, .fa-reddit-square:active, .fa-instagram-square:active, .fa-twitter-square:active {
    color: var(--color-primary75);
}

.icons-parent i {
    /*background-image: linear-gradient(45deg, rgba(160,44,61, .5), rgba(255,255,255, .8));*/
    display: block;
    text-align: center;
    margin: 3px auto;
    font-size: 80px;
    text-shadow: 3px 2px 10px rgba(160,44,61, .8);
}

/* ---------------- */
/* "main-center" styles */
/* ---------------- */

.form-parent {
    background-color: var(--colorSecond);
    box-shadow: inset 7px 7px 5px var(--color-primary50);
    min-height: 1100px;
    margin-bottom: 100px;
    overflow: hidden;
}

.form-parent::before {
     text-align: center;
     color: var(--color-text1);
     line-height: 250px;
     content: "کتاب یار";
     font-size: 28px;
     background-color: var(--color-secondary);
     width: 200px;
     height: 200px;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     border-radius: 50%;
     position: absolute;
     top: 2%;
     left: 95%;
     transform: translate(-50%, -50%) rotate(45deg);
 }

.form-parent::after {
    text-align: center;
    color: var(--color-text1);
    line-height: 250px;
    content: "کتاب یار";
    font-size: 28px;
    background-color: var(--color-secondary);
    width: 200px;
    height: 200px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    top: 2%;
    left: 5%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.dayereh {
    content: "";
    background-color: var(--color-secondary);
    width: 200px;
    height: 200px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

.d-left {
    top: 98%;
    left: 5%;
}

.d-right {
    top: 98%;
    left: 95%;
}

.d-up-left {
    top: 2%;
    left: 5%;
}

.d-up-right {
    top: 2%;
    left: 95%;
}

.form-parent > p {
    font-size: 28px;
    color: var(--color-text2);
    text-align: center;
    margin-top: 30px;
}

.form-parent > p > span {
    color: var(--color-text1);
}

/* form styles */
#form {
    margin: 55px auto 60px;
    min-height: 900px;
    width: 90%;
}

#form form {
    width: 80%;
    margin: 20px auto;
}

#form fieldset {
    border: 4px solid var(--color-border);
}

#form fieldset legend {
    text-decoration: var(--color-text1) underline solid 4px;
    color: var(--color-accent);
    font-size: 24px;
    position: absolute;
    top: -42px;
    right: 12%;
}

fieldset > div {
    margin: 27px auto;
    width: 86%;
}

fieldset > div > i {
    position: absolute;
    display: block;
    left: 2%;
    top: 18px;
    font-size: 18px;
    color: var(--color-text1);
    opacity: .5;
}

fieldset input {
    background-color: transparent;
    border: none;
    border-bottom: 3px solid var(--color-text2);
    padding: 12px;
    width: 100%;
    font-size: 22px;
    font-family: Blotus1;
    color: var(--color-text1);
}

fieldset input ~ p {
    color: var(--color-tErore);
    font-size: 18px;
}

fieldset input:focus::placeholder {
    opacity: 0;
}

::placeholder {
    color: var(--color-text1);
    opacity: .5;
}

fieldset > div > span {
    display: block;
    padding-top: 5px;
    color: var(--color-accent);
}

fieldset > div > span > em {
    font-family: 'Quintessential', cursive;
    font-size: 14px;
    margin-top: 2px;
}

fieldset > div > span > em > strong {
    display: inline-block;
    margin: 0 3px;
    font-size: 16px;
}

#email {
    font-family: 'Quintessential', Blotus1, cursive;
}

/* radio styles */

.par-selector {
    padding: 5px 0;
    margin-top: 20px;
}

.par-selector p {
    color: var(--color-accent);
    margin-bottom: 20px;
    font-size: 24px;
}

.radioNum {
    width: 25%;
    position: relative;
}

.radioNum input, .checkNum input {
    display: none;
}

.radioNum label {
    color: var(--color-text1);
    font-size: 23px;
    cursor: pointer;
}

.radioNum label::after {
    content: "";
    position: absolute;
    right: 60%;
    width: 35px;
    height: 35px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 5px solid var(--color-primary);
    background-color: var(--color-trans);
}

.radioNum label::before {
    content: "";
    position: absolute;
    right: 64%;
    top: 12px;
    width: 21px;
    height: 21px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: var(--color-primary75);
    box-shadow: inset 2px 3px 3px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition-timing-function: ease-out;
    transition-property: all;
    transition-duration: 300ms;
}

.radioNum input:checked ~ label::before {
    opacity: 1;
}

.radioNum input:hover ~ label::after, .checkNum input:hover ~ label::after {
    border: 5px solid var(--color-text1);
}

/* special for checkboxes */
.checkNum {
    width: 25%;
    display: flex;
    align-items: center;
}

.checkNum label {
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--color-text1);
    font-size: 23px;
    cursor: pointer;
}

.checkNum label::after {
    content: "";
    margin-right: 1%;
    width: 35px;
    height: 35px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 3px solid var(--color-primary);
    background-color: var(--color-trans);
}

.fa-check {
    opacity: 0;
    color: var(--color-text2);
    font-size: 20px;
    transform: translateX(-148%);
    transition: 300ms;
}

.checkNum input:checked ~ label .fa-check {
    opacity: 1;
}

.checkNum input:checked ~ label::after {
    box-shadow: inset 2px 3px 3px rgba(0, 0, 0, 0.6);
}

/* end part (submit button) */
.end-rule {
    width: 75%;
    margin-top: 20px;
}

.end-rule a {
    color: var(--color-text2);
    text-decoration: none;
    display: inline-block;
    padding-left: 2px;
}

.end-rule a:hover {
    color: var(--color-accent);
}

.end-rule .fa-check {
    transform: translateX(-155%);
}

.parent-end {
    margin-top: 40px;
}

.btn-par {
    width: 25%;
    position: relative;
}

#button-sb {
    position: relative;
    width: 95%;
    height: 75px;
    padding-right: 2px;
    font-size: 19px;
    text-align: right;
    color: var(--color-trans-text);
    background-color: var(--color-primary75);
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    border: 3px solid var(--color-trans-text);
    cursor: not-allowed;
    transition-property: all;
    transition-duration: 500ms;
    transition-timing-function: ease-in;
}

.btn-sub::after , .btn-sub2::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    background-color: var(--color-text2);
    opacity: 0.25;
}

.btn-sub2::after {
    opacity: 0;
}


.btn-par img {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .3;
}

.btn-par img:last-child {
    left: 24px;
    top: 55%;
}

/* ---------------- */
/* "main-left" styles */
/* ---------------- */

.backImg2 {
    background-image: url("../image/BG image/register.png");
    width: 97%;
    height: 1000px;
}

/* ---------------- */
/* "validation-input" styles */
/* ---------------- */

fieldset .requieredError ~ .fa-star {
    color: var(--color-error);
}

fieldset .requieredError {
    border: none;
    border-bottom: 3px solid var(--color-error);
}

fieldset .requieredError {
    position: relative;
}

fieldset .requieredError ~ p {
    color: var(--color-tErore);
    font-size: 18px;
}

/* ---------------- */
/* "transition-vue" styles */
/* ---------------- */

.validate-enter-active, .validate-leave-active {
    transition: opacity .7s;
}
.validate-enter, .validate-leave-to  {
    opacity: 0;
}

/* ---------------- */
/* "tippy.js" styles for tooltip */
/* ---------------- */

.tippy-box[data-theme~='register-tip'] {
    background-color: var(--color-primary);
    color: var(--color-text1);
    border: 2px solid var(--color-text2);
    font-size: 20px;
}

/*.tippy-box[data-theme~='register-tip'][data-placement^='bottom'] > .tippy-arrow::before {*/
/*    border-top: 7px solid var(--color-text1); !* your color here *!*/
/*    border-right: 7px solid transparent;*/
/*    border-left: 7px solid transparent;*/
/*}*/


.tippy-box[data-theme~='register-tip'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--color-primary);
}
.tippy-box[data-theme~='register-tip'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--color-primary);
}
.tippy-box[data-theme~='register-tip'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--color-text2);
}
.tippy-box[data-theme~='register-tip'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--color-text2);
}