body {
    direction: rtl;
    height: 100vh;
    font-family: Vazir;
}

main {
    height: 100vh;
}

#register-index-side {
    float: right;
    width: 55%;
    background: #1f2533;
    height: 100%;
    padding-right: 55px;
}

#login-index-side {
    float: left;
    width: 45%;
    background: #13884e;
    height: 100%;
}

    #login-index-side > h5 {
        color: whitesmoke;
        margin-top: 104px;
        margin-right: 75px;
        display: block;
    }

    #login-index-side > form {
        display: block;
        width: 80%;
        height: 30px;
        margin-top: 20px;
        margin-right: 55px;
        position: relative;
    }

        #login-index-side > form > input {
            width: 75%;
            margin-right: 20px;
        }

#login-btn-index {
    position: relative;
    height: 55px;
    width: 180px;
    perspective: 1000px;
    float: right;
    margin-right: 1vw;
    margin-top: 15vh;
    display: inline-flex;
    background: none;
    border: none;
}

    #login-btn-index b {
        font-size: 19px;
        letter-spacing: 1px;
        transform-style: preserve-3d;
        transform: translateZ(-25px);
        transition: transform .25s;
        font-family: 'Montserrat', sans-serif;
    }

        #login-btn-index b:before,
        #login-btn-index b:after {
            position: absolute;
            content: "ورود";
            height: 55px;
            width: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 5px solid white;
            box-sizing: border-box;
            border-radius: 5px;
        }

        #login-btn-index b:before {
            color: #fff;
            background: #1f2533;
            transform: rotateY(0deg) translateZ(25px);
        }

        #login-btn-index b:after {
            color: #1f2533;
            transform: rotateX(90deg) translateZ(25px);
        }

        #login-btn-index b:hover {
            transform: translateZ(-25px) rotateX(-90deg);
        }

#register-index-side > h3 {
    color: whitesmoke;
    margin-top: 35px;
    margin-right: 55px;
}

#register-index-side > h5 {
    color: whitesmoke;
    margin-top: 35px;
    margin-right: 75px;
    display: block;
}

#register-index-side > form > span {
    color: whitesmoke;
}

#register-index-side > form > div {
    margin-right: 20px;
    margin-top: 55px;
}

#register-index-side > form > select {
    background-color: whitesmoke;
    color: #13884e;
    padding: 12px;
    width: 250px;
    border: none;
    font-size: 20px;
    -webkit-appearance: button;
    border-radius: 4px;
    margin-top: 55px;
    display: block;
}

    #register-index-side > form > select::before {
        width: 20%;
        height: 100%;
        text-align: center;
        font-size: 28px;
        line-height: 45px;
        color: rgba(255, 255, 255, 0.5);
        background-color: rgba(255, 255, 255, 0.1);
        pointer-events: none;
    }

    #register-index-side > form > select:hover::before {
        color: rgba(255, 255, 255, 0.6);
        background-color: rgba(255, 255, 255, 0.2);
    }

#register-index-side > ul > li > label {
    display: inline-block;
    font-size: 17px;
    user-select: none;
    border-bottom: 2px solid hsl(0, 0%, 93%);
    cursor: pointer;
    color: whitesmoke;
    position: absolute;
    top: 21px;
    right: 60px;
}

#register-index-side > form {
    width: 100%;
}

    #register-index-side > form > input {
        width: 70%;
    }

#register-index-side > form {
    position: relative;
}

@media only screen and (max-width: 555px) {
    #register-index-side > form > select {
        width: 170px;
    }

    #register-btn-index {
        margin-right: -5px;
    }

    #login-index-side > h5 {
        margin-right: 10px;
    }

    #login-index-side > form {
        margin-right: -10px;
    }

    #register-index-side > form {
        margin-right: -20px;
    }

    #register-index-side > h3 {
        margin-right: -20px;
    }

    #register-index-side > h5 {
        margin-right: -20px;
    }
}

#forget_password_tag {
    color: white;
    text-decoration: underline white 1px;
    margin-top: 80px;
    float: right;
    margin-right: 40px;
    display: none;
}

.form__field {
    border: 0;
    border-bottom: 2px solid whitesmoke;
    outline: 0;
    font-size: 1.3rem;
    color: var(--white);
    padding: 7px 0;
    background: transparent;
    transition: border-color 0.2s;
    width: 400px;
    display: block;
    height: 30px;
    margin-top: 20px;
    position: relative;
}

#master_tick_index {
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid hsl(0, 0%, 85%);
    border-radius: 1px;
    transform: translateY(-50%);
    left: 1rem;
    outline: none;
    margin-top: 40px;
    position: relative;
    right: -265px;
}

    #master_tick_index:checked {
        background-color: hsl(0, 0%, 40%);
        border-color: hsl(0, 0%, 40%);
    }

    #master_tick_index + label {
        text-decoration: underline;
        color: white;
        font-weight: 600;
        position: relative;
        right: 5%;
        top: -40px;
    }

    #master_tick_index:after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjZmZmZmZmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPmljb25fYnlfUG9zaGx5YWtvdjEwPC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyBmaWxsPSIjZmZmZmZmIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNi4wMDAwMDAsIDI2LjAwMDAwMCkiPjxwYXRoIGQ9Ik0xNy45OTk5ODc4LDMyLjQgTDEwLjk5OTk4NzgsMjUuNCBDMTAuMjI2Nzg5MSwyNC42MjY4MDE0IDguOTczMTg2NDQsMjQuNjI2ODAxNCA4LjE5OTk4Nzc5LDI1LjQgTDguMTk5OTg3NzksMjUuNCBDNy40MjY3ODkxNCwyNi4xNzMxOTg2IDcuNDI2Nzg5MTQsMjcuNDI2ODAxNCA4LjE5OTk4Nzc5LDI4LjIgTDE2LjU4NTc3NDIsMzYuNTg1Nzg2NCBDMTcuMzY2ODIyOCwzNy4zNjY4MzUgMTguNjMzMTUyOCwzNy4zNjY4MzUgMTkuNDE0MjAxNCwzNi41ODU3ODY0IEw0MC41OTk5ODc4LDE1LjQgQzQxLjM3MzE4NjQsMTQuNjI2ODAxNCA0MS4zNzMxODY0LDEzLjM3MzE5ODYgNDAuNTk5OTg3OCwxMi42IEw0MC41OTk5ODc4LDEyLjYgQzM5LjgyNjc4OTEsMTEuODI2ODAxNCAzOC41NzMxODY0LDExLjgyNjgwMTQgMzcuNzk5OTg3OCwxMi42IEwxNy45OTk5ODc4LDMyLjQgWiI+PC9wYXRoPjwvZz48L2c+PC9nPjwvc3ZnPg==");
        background-size: 40px;
        background-repeat: no-repeat;
        background-position: center;
    }

    #master_tick_index:focus,
    #master_tick_index:hover {
        box-shadow: 0 0 0 3px hsl(0, 0%, 92%);
        border-color: hsl(0, 0%, 55%);
    }

    #master_tick_index:focus,
    #master_tick_index:hover {
        box-shadow: 0 0 0 3px hsl(0, 0%, 85%);
        border-color: hsl(0, 0%, 40%);
    }

#master_tick_index {
    right: -34%;
}

#register-index-side > form > select {
    background-color: whitesmoke;
    color: #13884e;
    padding: 12px;
    width: 250px;
    border: none;
    font-size: 20px;
    -webkit-appearance: button;
    border-radius: 4px;
    margin-top: 20px;
    display: block;
}

    #register-index-side > form > select::before {
        width: 20%;
        height: 100%;
        text-align: center;
        font-size: 28px;
        line-height: 45px;
        color: rgba(255, 255, 255, 0.5);
        background-color: rgba(255, 255, 255, 0.1);
        pointer-events: none;
    }

    #register-index-side > form > select:hover::before {
        color: rgba(255, 255, 255, 0.6);
        background-color: rgba(255, 255, 255, 0.2);
    }

.box select option {
    padding: 30px;
}

#register-btn-index {
    position: relative;
    width: 180px;
    height: 55px;
    perspective: 1000px;
    float: right;
    margin-top: 15vh;
    display: inline-flex;
    background: none;
    border: none;
}

    #register-btn-index b {
        font-size: 19px;
        letter-spacing: 1px;
        transform-style: preserve-3d;
        transform: translateZ(-25px);
        transition: transform .25s;
        font-family: 'Montserrat', sans-serif;
    }

        #register-btn-index b:before,
        #register-btn-index b:after {
            position: absolute;
            content: "ثبت نام";
            height: 55px;
            width: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 5px solid #13884e;
            box-sizing: border-box;
            border-radius: 5px;
        }

        #register-btn-index b:before {
            color: #fff;
            background: #1f2533;
            transform: rotateY(0deg) translateZ(25px);
        }

        #register-btn-index b:after {
            color: whitesmoke;
            background: #13884e;
            transform: rotateX(90deg) translateZ(25px);
            border: 5px solid white;
        }

        #register-btn-index b:hover {
            transform: translateZ(-25px) rotateX(-90deg);
        }

#register-btn-index {
    margin-right: -5px;
}

@media only screen and (max-width: 600px) {
    .login-page-form {
        right: 9%;
    }

    .register-page-form {
        right: 9%;
    }

    .submit-page-form {
        right: 9%;
    }

    #login-index-side {
        width: 100%;
        display: block;
    }

    #register-index-side {
        width: 100%;
        display: block;
    }
}

@media only screen and (min-width: 1500px) {

    #master_tick_index + label {
        position: relative;
        right: -67%;
        top: -15px;
    }
}

@media only screen and (max-width: 555px) {
    #register-index-side > form > select {
        width: 170px;
    }

    #register-btn-index {
        margin-right: -5px;
    }

    #login-index-side > h5 {
        margin-right: 10px;
    }

    #login-index-side > form {
        margin-right: -10px;
    }

    #register-index-side > form {
        margin-right: -20px;
    }

    #register-index-side > h3 {
        margin-right: -20px;
    }

    #register-index-side > h5 {
        margin-right: -20px;
    }
}

@media only screen and (max-width: 900px) {
    .login-page-form {
        right: 24%;
    }

    .register-page-form {
        right: 24%;
    }

    .submit-page-form {
        right: 24%;
    }
}

@media only screen and (max-width: 700px) {
    .login-page-form {
        right: 14%;
    }

    .register-page-form {
        right: 14%;
    }

    .submit-page-form {
        right: 14%;
    }
}

@media only screen and (max-width: 600px) {
    .login-page-form {
        right: 9%;
    }

    .register-page-form {
        right: 9%;
    }

    .submit-page-form {
        right: 9%;
    }

    #login-index-side {
        width: 100%;
        display: block;
    }

    #register-index-side {
        width: 100%;
        display: block;
    }
}

@media only screen and (max-width: 500px) {
    .login-page-form {
        right: 0%;
    }

    .register-page-form {
        right: 0%;
    }

    .submit-page-form {
        right: 0%;
    }
}


#register-side {
    position: relative;
    float: right;
    width: 55%;
    background: #1f2533;
    height: 100%;
}

    #register-side > h3 {
        color: whitesmoke;
        margin-top: 35px;
        margin-right: 55px;
    }

#login-side {
    float: left;
    width: 45%;
    background: #13884e;
    height: 100%;
}

.register-page-form > select {
    background-color: #1f2533;
    color: whitesmoke;
    padding: 12px;
    width: 250px;
    border: none;
    font-size: 20px;
    -webkit-appearance: button;
    border-radius: 4px;
    margin-top: 55px;
    display: block;
}

.register-page-form {
    position: absolute;
    top: 70px;
    right: 33%;
    background: whitesmoke;
    border-radius: 4px;
    width: auto;
    height: auto;
    padding: 60px;
}

.form__field-2 {
    border: 0;
    border-bottom: 2px solid #1f2533;
    outline: 0;
    font-size: 1.3rem;
    color: #1f2533;
    padding: 7px 0;
    background: transparent;
    transition: border-color 0.2s;
    width: 400px;
    display: block;
    height: 30px;
    margin-top: 20px;
    position: relative;
}

#register-btn {
    position: relative;
    width: 180px;
    height: 55px;
    perspective: 1000px;
    float: right;
    margin-top: 15px;
    display: inline-flex;
    background: none;
    border: none;
}

    #register-btn b {
        font-size: 19px;
        letter-spacing: 1px;
        transform-style: preserve-3d;
        transform: translateZ(-25px);
        transition: transform .25s;
        font-family: 'Montserrat', sans-serif;
    }

        #register-btn b:before,
        #register-btn b:after {
            position: absolute;
            content: "ثبت نام";
            height: 55px;
            width: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 5px solid #13884e;
            box-sizing: border-box;
            border-radius: 5px;
        }

        #register-btn b:before {
            color: #fff;
            background: #1f2533;
            transform: rotateY(0deg) translateZ(25px);
        }

        #register-btn b:after {
            color: whitesmoke;
            background: #13884e;
            transform: rotateX(90deg) translateZ(25px);
            border: 5px solid #1f2533;
        }

        #register-btn b:hover {
            transform: translateZ(-25px) rotateX(-90deg);
        }

.login-page-form > span {
    color: whitesmoke;
}

.login-page-form > div {
    margin-right: 20px;
    margin-top: 55px;
}

.login-page-form > select {
    background-color: #1f2533;
    color: whitesmoke;
    padding: 12px;
    width: 250px;
    border: none;
    font-size: 20px;
    -webkit-appearance: button;
    border-radius: 4px;
    margin-top: 55px;
    display: block;
}

.login-page-form {
    position: absolute;
    top: 180px;
    right: 33%;
    background: whitesmoke;
    border-radius: 4px;
    width: auto;
    height: auto;
    padding: 60px;
}

#login-btn {
    position: relative;
    width: 180px;
    height: 55px;
    perspective: 1000px;
    float: right;
    margin-right: 15px;
    margin-top: 15vh;
    display: inline-flex;
    background: none;
    border: none;
}

    #login-btn b {
        font-size: 19px;
        letter-spacing: 1px;
        transform-style: preserve-3d;
        transform: translateZ(-25px);
        transition: transform .25s;
        font-family: 'Montserrat', sans-serif;
    }

        #login-btn b:before,
        #login-btn b:after {
            position: absolute;
            content: "ورود";
            height: 55px;
            width: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 5px solid white;
            box-sizing: border-box;
            border-radius: 5px;
        }

        #login-btn b:before {
            color: #fff;
            background: #1f2533;
            transform: rotateY(0deg) translateZ(25px);
        }

        #login-btn b:after {
            color: #1f2533;
            background: #13884e;
            transform: rotateX(90deg) translateZ(25px);
        }

        #login-btn b:hover {
            transform: translateZ(-25px) rotateX(-90deg);
        }


@media only screen and (min-width: 1500px) {

    #master_tick_index + label {
        position: relative;
        right: -67%;
        top: -15px;
    }
}

@media only screen and (max-width: 555px) {
    #register-index-side > form > select {
        width: 170px;
    }

    #register-btn-index {
        margin-right: -5px;
    }

    #login-index-side > h5 {
        margin-right: 10px;
    }

    #login-index-side > form {
        margin-right: -10px;
    }

    #register-index-side > form {
        margin-right: -20px;
    }

    #register-index-side > h3 {
        margin-right: -20px;
    }

    #register-index-side > h5 {
        margin-right: -20px;
    }
}

#master_tick_index {
    right: -34%;
}

@media only screen and (max-width: 900px) {
    .login-page-form {
        right: 24%;
    }

    .register-page-form {
        right: 24%;
    }

    .edit-page-form {
        right: 24%;
    }

    .submit-page-form {
        right: 24%;
    }
}

@media only screen and (max-width: 700px) {
    .login-page-form {
        right: 14%;
    }

    .register-page-form {
        right: 14%;
    }

    .edit-page-form {
        right: 14%;
    }

    .submit-page-form {
        right: 14%;
    }
}

@media only screen and (max-width: 1130px) {
    #register-side > h3 {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    .login-page-form {
        right: 9%;
    }

    .register-page-form {
        right: 9%;
    }

    .edit-page-form {
        right: 9%;
    }

    .submit-page-form {
        right: 9%;
    }

    #login-index-side {
        width: 100%;
        display: block;
    }

    #register-index-side {
        width: 100%;
        display: block;
    }
}

@media only screen and (max-width: 500px) {
    .login-page-form {
        right: 0%;
    }

    .register-page-form {
        right: 0%;
    }

    .edit-page-form {
        right: 0%;
        padding: 15px;
    }

    .submit-page-form {
        right: 0%;
    }
}

@media(max-width: 576px) {
    .contacts_card {
        margin-bottom: 15px !important;
    }
}


@media only screen and (max-width: 520px) {
    .table > tbody > tr > td {
        font-size: 0.7rem;
    }
}

.button-width {
    width: 12vw;
}

@media only screen and (max-width: 680px) {
    .button-width {
        width: auto;
    }
}

/* Hide username up/down arrows */
input[name="username"]::-webkit-outer-spin-button,
input[name="username"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[name="username"] {
    -moz-appearance: textfield;
}