@import url(landing-fonts.css);

/*css*/
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'estedad-medium' !important;
    background-color: #1f2641;
    color: white;
}

div {
    font-family: 'estedad-medium' !important;

}

h1, .h1, h2 .h2, h3, .h3 {
    font-family: 'estedad-bold' !important;
}

small, span {
    font-family: 'estedad-light' !important;
}

.card-text-footer, .card-text-footer:hover {
    text-decoration: none;
    font-family: 'estedad-medium' !important;
}

.under-line {
    display: inline-block;
    color: white;
    text-decoration: none;
    font-size: 16px;
    padding-right: 30px;
}

.under-line:hover {
    color: white;
}

.under-line::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: #56cee4;
    transition: width .3s;
    color: white;
    margin-top: 10px;
}

.under-line:hover::after {
    width: 100%;
}

.bitcoin-minner {
    margin-top: 10%;
}

.first-section {
    margin-top: 4%;
}

.main-text {
    float: right;
    color: white;
    text-align: right;
    direction: rtl;
    margin-top: 20%;
}

.first-title {
    font-size: 40px;
    font-family: estedad-bolder;
    font-weight: 900;
}

.text-green {
    color: #2cbca5 !important;
}

.second-text {
    font-family: estedad-bolder !important;
    font-size: 30px;
    color: #2cbca5;
    display: block;
}

.second-text-responsive {
    display: none;
    font-family: estedad-bolder !important;
    font-size: 30px;
    color: #2cbca5;

}

.feature {
    list-style: none;
    font-family: estedad-medium;
    color: #aab2cd;
    text-align: right;
    float: right;
    direction: rtl;
    font-size: 17px;
    margin-top: 5%;

}

.feature-about {
    list-style: none;
    font-family: estedad-medium;
    color: #aab2cd;
    text-align: right;
    direction: rtl;
    font-size: 17px;
    padding-right: 0;
}

.section-button {
    float: right;
    margin-top: 5%;
    text-align: center;
}

.button.log-in {
    width: 235px;
    height: 60px;
    font-family: estedad-bolder;
    background-image: linear-gradient(to right, #ec884c, #ea495c);
    color: white;
    border-radius: 10px;
    border: none;
    box-shadow: 0 1px 10px rgb(237 131 78 / 54%);
    transition: .5s;
    font-size: 16px;
    padding: 1rem 2rem;
    text-decoration: none !important;
}

.log-in:hover {
    background-image: linear-gradient(to right, #ec884c, #ec884c);
}

.sign-up {
    min-width: 235px;
    width: max-content;
    height: 60px;
    font-family: estedad-bolder;
    background-color: #56cee4;
    color: white;
    border-radius: 10px;
    border: none;
    box-shadow: 0 1px 10px rgb(0 231 234 / 54%);
    transition: .4s;
    font-size: 16px;
    padding: 1rem 2rem;
    text-decoration: none !important;
}

.sign-up:hover {
    background-color: #7bdcb5;
    box-shadow: 0 1px 10px rgb(#7bdcb5 / 54%);
}

/*slider*/

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.slider {
    color: white;
    box-shadow: 0px 3px 32px rgb(0 231 234 / 54%);
    height: 90px;
    overflow: hidden;
    position: relative;
    font-family: estedad-light;
    text-align: right;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    border-radius: 20px;
    width: 80%;
}

.slider::before, .slider::after {
    content: "";
    height: 100px;
    position: absolute;
    width: 200px;
    z-index: 2;
}

.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

.slider::before {
    left: 0;
    top: 0;

}

.slider .slide-track {
    animation: scroll 200s linear infinite;
    display: flex;
    width: max-content;
    /*animation-delay: 1s;*/
}

.slider .slide {
    height: 100px;
    width: 250px;
}

/*three ad*/
.card-ad1 {
    border-radius: 25px;
    border: none;
    /*box-shadow: 0px 4px 23px #c46f89;*/
    background-color: transparent;
}

.card-ad2 {
    border-radius: 25px;
    border: none;
    /*box-shadow: 0px 4px 23px #8fa98d;*/
    background-color: transparent;
}

.card-ad3 {
    border-radius: 25px;
    border: none;
    /*box-shadow: 0px 4px 23px #3647d8;*/
    background-color: transparent;
}

/*why arziland*/
.why-arziland {
    background-image: url(../images/landing/data-bg.png);
    background-repeat: no-repeat;
    max-width: 80%;
    margin-top: 10%;

}

.why-title {
    font-size: 20px;
    text-align: right;
    color: white;
    font-family: estedad-bolder;
    direction: rtl;
}

.why-card {
    text-align: center;

    color: white;
    border: none;
    border-radius: 70px;
    transition: .3s;
    border: none;
    background-color: transparent;
}

.why-card:hover {
    transform: scale(1.03);

}

.card-title {
    font-size: 14px;
    font-family: estedad-bolder !important;
    color: white;
}

.card-title-why {
    font-size: 14px;
    font-family: estedad-bolder !important;
    color: #2cbca5;
}

.card-text {
    font-size: 16px;
    line-height: 2;
    font-family: estedad-medium;
    color: rgba(183, 180, 203, 0.83)
}

.support {
    max-width: 80%;
    margin-top: 10%;
    background-image: url(../images/landing/subscribe-bg.png);
    background-repeat: no-repeat;
    background-position: center;

}

.title-support {
    text-align: center;
    font-family: estedad-bolder;
    font-size: 20px;
    color: white;
}

.card-support {
    background-color: transparent;
    text-align: right;
    direction: rtl;
    border: none;
}

.card-title-support {
    font-family: estedad-bolder;
    font-size: 14px;
    color: #2cbca5;
}

.card-text-support {
    color: rgba(183, 180, 203, 0.83);
    font-size: 14px;
    font-family: estedad-medium;
    margin-left: 65px;
    margin-top: 5%;
}

.button.log-in-support {
    width: 235px;
    height: 60px;
    font-family: estedad-bolder;
    background-image: linear-gradient(to right, #ec884c, #ea495c);
    color: white;
    border-radius: 10px;
    border: none;
    box-shadow: 0 1px 10px rgb(237 131 78 / 54%);
    transition: .5s;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    text-decoration: none;
}

.log-in-support:hover {
    background-image: linear-gradient(to right, #ec884c, #ec884c);
}

.buy-crypto {
    max-width: 80%;
}

.how-buy {
    /*background-color: #335b96;*/
    background-color: transparent;
    border-radius: 30px;
}

.title-buy {
    margin-top: 10%;
    font-family: estedad-bolder;
    font-size: 25px;
    float: right;
    text-align: right;
    direction: rtl;
    color: white;
    line-height: 1.75;
}

.text-buy {
    font-size: 14px;
    color: rgba(180, 180, 180, 1);
    font-family: estedad-medium;
    float: right;
    text-align: right;
    direction: rtl;
    margin-top: 5%;
    line-height: 2;
}

.list-buy-container {
    float: right;
    display: flex;
    flex-flow: column;
}

.list-buy {
    font-size: 14px;
    color: rgba(183, 180, 203, 0.83);
    font-size: 14px;
    font-family: estedad-medium;
    float: right;
    text-align: right;
    direction: rtl;
    margin-top: 5%;
    line-height: 2;
}

.math-verifyy {
    margin-top: 10%;
}

.bg-verify {
    background-image: url(../images/landing/facts-bg.png);
    height: 500px;
    background-repeat: no-repeat;
    margin-top: 5%;
    background-size: contain;
    font-family: estedad-bolder;
}

/*weblog*/
.weblog {
    margin-top: 100px;
    background-repeat: no-repeat;
    background-position: right;
}

.weblog p {
    text-align: center;
}

.article-blog {
    margin-top: 60px;
    margin-bottom: 60px;
}

.card-blog {
    font-family: estedad-bolder;
    text-align: right;
    border-radius: 15px;
    transition: .3s;
    background-color: #335b96;
    height: 100%;
    position: relative;
}

.card-blog:hover {
    box-shadow: 0px 5px 20px #2cbca5;
}

.title-article {
    color: white;
    transition: .3s;
    direction: rtl;
    text-align: right;
}

.title-article:hover {
    color: #2cbca5;
    text-decoration: none;

}

.btn-blog {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: white;
    background-color: white;
    transition: .4s;
    border: none;
    float: left;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 2%;
}

.btn-blog:hover {
    color: white;
    background-color: #56cee4;
}

/*footer*/

.custom-footer {
    margin-top: 5%;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/landing/team-bg.png);
    background-position: center;
}

.social-logo {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: #2cbca5;
    border-radius: 40px;
    color: #082e52;
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 40px;
    padding: 8px;
    border: 1px solid #082e52;
    transition: .3s;
    margin-right: 20px;
}

.social-logo:hover {
    background-color: #56cee4;
    color: white;
}

.contact-us {
    padding-top: 80px;
    font-size: 14px;

}

.footer-link {
    color: white;
    text-decoration: none;
    transition: .1s;
}

.footer-link:hover {
    color: #56cee4;
    text-decoration: none;
}

.card-title-footer {
    color: #2cbca5;
    text-align: center;
}

/*go top*/
#myBtn {
    display: none;
    position: fixed;
    bottom: 130px;
    right: 20px;
    z-index: 99;
    border: none;
    outline: none;
    background-image: linear-gradient(to right, #ec884c, #ea495c);; /* Set a background color */
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    font-size: 16px;
}

#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}

/*social slider*/

.icon_bar {
    position: fixed;
    top: 40%;
    transform: translateY(-20%);
    width: 60px;
}

a.slider-social:hover {
    transform: translateX(-5px);
}

a.slider-social {
    text-decoration: none;
    color: #fff;
    font-size: 21px;
    width: 250px;
    padding: 10px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    transition: 1s;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    transform: translateX(-196px);
    margin: 5px;
    font-family: estedad-medium;

}

.icon_bar i {
    font-size: 1.5em;
    padding-left: 30px;
}

.sp {
    background: #3b5999;
}

.od {
    background: #55acee;
}

.sl {
    background: #e4405f;
}

.vf {
    background: #0077b5;
}

.ac {
    background: #bd081c;
}

/*faq*/
.faq {
    background-color: transparent;
    border-radius: 30px;
    margin-bottom: 2%;
    box-shadow: 0px 0px 10px #2cbca5;
}

.card-link {
    font-family: estedad-bolder;
    float: right;
    color: #2cbca5;
    font-size: 14px;
    margin: 20px;
    direction: rtl;
    text-align: right;
}

.card-link:hover {
    color: #56cee4;
}

.faq-body {
    font-family: estedad-light;
    float: right;
    color: #aab2cd;
    font-size: 16px;
    direction: rtl;
    text-align: right;
}

/*log in and sign up*/
.containerr {
    position: relative;
    min-height: 980px;
    border-radius: 10px;
    overflow: hidden;
}

.title-login {
    font-family: estedad-bolder;
    color: white;
    font-size: 20px;
    margin-top: 20%;
}

.sign-up-log,
.swal2-styled.swal2-confirm {
    height: 60px;
    font-family: estedad-bolder;
    background-color: #56cee4;
    color: white;
    border-radius: 10px;
    border: none;
    box-shadow: 0 1px 10px rgb(0 231 234 / 54%);
    transition: .2s;
    font-size: 16px;

}

.sign-up-log:hover,
.swal2-styled.swal2-confirm:hover {
    background-color: #7bdcb5;
    box-shadow: 0 1px 10px rgb(#7bdcb5 / 54%);

}

::placeholder {
    font-family: estedad-medium;
}

.forget-pass {
    color: #aab2cd;
    font-family: estedad-medium;
}

.forget-pass:hover {
    text-decoration: none;
    color: #0077b5;
}

p.text-login {
    font-size: 34px;
    font-weight: 100;
    line-height: 1.4;
    margin: 20px;
    font-family: estedad-bolder;
}

p.text-login-new {
    direction: ltr !important;
    font-size: 34px;
    font-weight: 100;
    line-height: 1.4;
    margin: 20px;
    font-family: estedad-medium;
}

.ghost {
    background-color: transparent;
    border-color: #fff;
    color: #fff;
    height: 60px;
    font-family: estedad-bolder;
    color: white;
    border-radius: 10px;
    border: 1px solid white;
    box-shadow: 0 1px 10px rgb(0 231 234 / 54%);
    transition: .2s;
    font-size: 16px;

}

.ghost:hover {
    background-color: white;
    color: #53bda6;
}

.form-containerr {
    height: 100%;
    position: absolute;
    transition: all .6s ease-in-out;
}
.log-in-containerr{
    top: 50%;
    transform: translateY(-50%);
}
.form-containerr form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*padding: 0 50px;*/
    margin-top: 20px;

}

.form-containerr input {
    margin: 8px auto;
    width: 100%;
    padding: 12px 15px;
    background-color: #fff;
    border: none;
}

.log-in-containerr, .sign-up-containerr {
    /*width: 50%;*/
    left: 0;
    height: max-content;
}

.sign-up-containerr {
    opacity: 0;
    top: calc(50% - 350px);
}

.overlay-containerr {
    position: absolute;
    top: 0;
    right: 0;
    /*width: 50%;*/
    height: 100%;
    overflow: hidden;
    transition: transform .6s ease-in-out;
    z-index: 1010;
    padding-right: 0 !important;
    padding-left: 0 !important;

}

.overlay {
    background-color: #2cbca5;
    width: 200%;
    height: 100%;
    position: relative;
    z-index: 100;
    left: -100%;
    transform: translateY(0);
    transition: transform .6s ease-in-out;
}

.overlay-panel {
    position: absolute;
    top: 0;
    color: #f5f5f5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 40px;
    height: 100%;
    /*width: 50%;*/
    text-align: center;
    transform: translateY(0);
    transition: transform .6s ease-in-out;
}

.right {
    right: 0;
    transform: translateY(0);
}

.left {
    transform: translateY(-20%);
}

.containerr.right-panel-active .log-in-containerr {
    transform: translateY(100%);
}

.containerr.right-panel-active .overlay-containerr {
    transform: translateX(-100%);
}

.containerr.right-panel-active .sign-up-containerr {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.containerr.right-panel-active .overlay {
    transform: translateX(50%);
}

.containerr.right-panel-active .left {
    transform: translateY(0);
}

.containerr.right-panel-active .right {
    transform: translateY(20%);
}

.card-img-top {
    height: 300px;
    object-fit: cover;
    object-position: center;
}

/* =============
   Notification
============= */
#toast-container {
    position: absolute;
    /*top: 8%;*/
    /*right: 10%;*/
}

#toast-container .toast-title {
    text-align: right;
}

#toast-container > div {
    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
    box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
    opacity: 1;
    padding: 17px 15px 15px 15px !important;
    text-align: right;
    border-radius: 10px !important;
}

#toast-container .toast-error {
    background-color: #ea495c !important;
}

#toast-container .toast-success,
#toast-container .toast-info {
    background-color: #56cee4 !important;
}

.toast-message {
    font-family: estedad-medium !important;
    direction: rtl;
    text-align: right;
    margin-left: 1.5rem;
}

/* =============
   Notification
============= */
.password-addon {
    border: 1px solid var(--input-color);
    border-top-right-radius: 0;
    border-right: none;
    border-bottom-right-radius: 0;
    z-index: 1000;
}

/************ checkbox **********/
.form-check-label {
    font-family: estedad-medium !important;
    margin-left: 3rem;
}

.form-check .form-check-input {
    background-color: transparent !important;
    width: 1.5em !important;
    height: 1.5em !important;
    margin-left: 8px;
    margin-top: 0;
    cursor: pointer;
}

form, input {
    text-align: right;
}

form small, form strong {
    font-family: estedad-medium !important;
    color: #ea495c !important;
}

.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

/**************** GOFTINO ****************/

#goftino_w {
    right: 5px !important;
    bottom: 50px !important;
}

/*@media screen and (max-height: 700px) {*/
/*    #goftino_w {*/
/*        right: auto !important;*/
/*        left: 35px !important;*/
/*        bottom: 90px !important;*/
/*    }*/
/*}*/
/* cards */
p {
    font-family: estedad-medium;
    text-align: right;
    direction: rtl;
}


/*** swal ***/
.swal2-show {
    font-family: estedad-medium;
    background-color: #1f2641 !important;
}

.swal2-header h2, .swal2-content {
    color: white !important;
}

.swal2-styled.swal2-confirm {
    height: unset !important;
    font-family: unset !important;
}

.swal2-styled.swal2-cancel {
    border-radius: 10px !important;
}

/* currencies table */
.table {
    color: white;
    direction: rtl;
    font-family: estedad-medium;
    text-align: center;
}

.styling-table {
    /*z-index: 100;*/
}

#currencyPriceTable tbody tr {
    cursor: pointer;
}

.dataTables_length, #currencyPriceTable_filter {
    display: none !important;
}

.dataTables_info {
    display: none !important;
}

.table th {
    cursor: pointer !important;
}

th.sorting_asc::after {
    font-family: "Font Awesome 5 Free";
    content: "\f107";
    margin-right: 0.5rem;
}

th.sorting_desc::after {
    font-family: "Font Awesome 5 Free";
    content: "\f106";
    margin-right: 0.5rem;
}

.navbar-toggler > .fa-bars {
    font-size: 14px;
    color: rgb(71, 164, 134);
}

/************* currencies table *************/
#currencyPriceTableBody tr > td:last-child {
    width: 70px;
    text-align: center;
}

/************* responsive *************/
@media screen and (max-width: 600px) {
    .first-section {
        padding-top: 20%;
    }

    .second-text-responsive {
        display: flex;
        font-size: 20px;
    }

    .second-text {
        display: none;
    }

    .sign-up {
        margin-top: 20px;
    }

    .card-ad2 {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .first-title {
        font-size: 20px;
    }

    .icon_bar {
        display: none;
    }

    .verify {
        display: none;
    }

    .title-buy {
        font-size: 25px;
    }

    .title-support {
        font-size: 25px;
    }

    .card-title-support {
        font-size: 23px;
    }

    .card-blog {
        margin-top: 10%;
    }

    .footer-support {
        margin-top: 50px;
    }

    .card-title-footer {
        font-size: 16px;
    }

    .card-text-footer {
        font-size: 16px;
    }

    .why-card {
        margin-top: 10px;
    }

    .why-title {
        font-size: 14px;
    }

    .faq {
        margin-top: 5%;
    }

    .main-text, .title-buy {
        font-size: 22px !important;
        margin-top: 10%;
    }

    .weblog p, .title-login {
        font-size: 25px !important;
        margin-top: 5%;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .feature, .text-buy, .card-title-support {
        padding: 0 !important;
        margin-top: 0 !important;
        font-size: 14px;
    }

    .section-button {
        margin-top: 0;
    }

    .support {
        max-width: 100%
    }

    .card-text-support {
        margin-left: unset;
        font-size: 16px
    }

    .card-support img {
        width: 40px;
        margin-top: -10px;
    }

    .custom-footer ul {
        margin: 0;
        padding: 0;
    }

    .custom-footer ul li {
        text-align: center !important;
        justify-content: center;
    }

    .custom-footer ul li .fa {
        width: 40px;
        height: 40px;
        margin: 5px;
        margin-bottom: 1rem;
    }

    .sign-up-log {
        margin-top: 1rem !important;
    }

    .sign-up-containerr .forget-pass {
        padding: 2.5rem 0;
    }

    #currencyPriceTableBody td {
        font-size: 12px !important;
        padding: 0.5rem !important;
    }

    #currencyPriceTableBody td:last-child {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #currencyPriceTableBody td:last-child a {
        max-width: 60px !important;
        min-width: unset !important;
        height: 30px !important;
        margin-top: 0;
        text-align: center;
        padding: 5px 7px !important;
        font-size: 14px;
    }

    .navbar-brand img {
        width: 80px !important;
    }
}

@media screen and (max-width: 820px) and ( min-width: 600px) {
    .second-text-responsive {
        display: none;
    }

    .sign-up {
        margin-top: 20px;
    }

    .card-ad2 {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .first-title {
        font-size: 45px;
    }

    .icon_bar {
        display: none;
    }

    .verify {
        display: none;
    }

    .title-buy {
        font-size: 25px;
    }

    .title-support {
        font-size: 25px;
    }

    .card-blog {
        margin-top: 10%;
    }

    .footer-support {
        margin-top: 50px;
    }

    .card-title-footer {
        font-size: 16px;
    }

    .card-text-footer {
        font-size: 16px;
    }

    .why-card {
        margin-top: 10px;
    }

    .faq {
        margin-top: 3%;
    }
}

@media screen and (max-width: 992px) and ( min-width: 820px) {
    .second-text-responsive {
        display: none;
    }

    .sign-up {
        margin-top: 20px;
    }

    .card-ad2 {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .first-title {
        font-size: 45px;
    }

    .icon_bar {
        display: none;
    }

    .verify {
        display: none;
    }

    .title-buy {
        font-size: 25px;
    }

    .title-support {
        font-size: 25px;
    }

    .card-title-support {
        font-size: 23px;
    }

    .card-blog {
        margin-top: 10%;
    }

    .footer-support {
        margin-top: 50px;
    }

    .card-title-footer {
        font-size: 16px;
    }

    .card-text-footer {
        font-size: 16px;
    }

    .why-card {
        margin-top: 10px;
    }
}

.right-panel-active .log-in-containerr {
    display: none;
}

@media only screen and (max-width: 991px) {
    /*.right-panel-active .log-in-containerr {*/
    /*    display: none;*/
    /*}*/
    .containerr.right-panel-active .sign-up-containerr {
        transform: unset !important;
        top: 0 !important;
    }
}

@media screen and (max-height: 980px) {

    html, body {
        height: 100%;
        overflow-y: auto;
    }

    .containerr {
        min-height: 100%;
        height: 100%;
        overflow-y: auto;
    }

}


.card {
    background-color: transparent;
    border: none;
    text-align: right;
}

.coin-details {
    text-align: right;
}

.coin-details p {
    line-height: 2;
    text-align: justify;
}

/*charts*/
.apexcharts-tooltip.light {
    color: #fff !important;
    background: rgba(30, 30, 30, 0.8) !important;
}

.apexcharts-tooltip.light .apexcharts-tooltip-title {
    background: rgba(0, 0, 0, 0.7) !important;
    border-bottom: 1px solid #333 !important;
}

/*comments*/
/**
 * Oscuro: #283035
 * Azul: #03658c
 * Detalle: #c7cacb
 * Fondo: #dee1e3
 ----------------------------------*/
/** ====================
 * Lista de Comentarios
 =======================*/
.comments-container {
    margin: 60px auto 15px;
    width: 100%;
    direction: rtl;
}

.comments-container h1 {
    font-size: 36px;
    color: #283035;
    font-weight: 400;
}

.comments-container h1 a {
    font-size: 16px;
    font-weight: 700;
}

.comments-list {
    margin-top: 30px;
    position: relative;
    text-align: right;
}

/**
 * Lineas / Detalles
 -----------------------*/
.comments-list:before {
    content: '';
    width: 2px;
    height: 100%;
    background: #c7cacb;
    position: absolute;
    right: 32px;
    top: 0;
}

.comments-list:after {
    /*content: '';*/
    /*position: absolute;*/
    /*background: #c7cacb;*/
    /*bottom: 0;*/
    /*left: 27px;*/
    /*width: 7px;*/
    /*height: 7px;*/
    /*border: 3px solid #dee1e3;*/
    /*-webkit-border-radius: 50%;*/
    /*-moz-border-radius: 50%;*/
    /*border-radius: 50%;*/
}

.reply-list:before, .reply-list:after {
    display: none;
}

.reply-list li:before {
    content: '';
    width: 60px;
    height: 2px;
    background: #c7cacb;
    position: absolute;
    top: 25px;
    right: -47px;
}


.comments-list li {
    margin-bottom: 15px;
    display: block;
    position: relative;
}

.comments-list li:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    width: 0;
}

.reply-list {
    padding-left: 88px;
    clear: both;
    margin-top: 15px;
}

/**
 * Avatar
 ---------------------------*/
.comments-list .comment-avatar {
    width: 65px;
    height: 65px;
    position: relative;
    z-index: 99;
    right: -40px;
    float: right;
    margin-bottom: 0.5rem;
    /*border: 3px solid #FFF;*/
    border: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.comments-list .comment-avatar img {
    width: 100%;
    height: 100%;
}

.reply-list .comment-avatar {
    width: 50px;
    height: 50px;
    right: -20px;
}

.comment-main-level:after {
    content: '';
    width: 0;
    height: 0;
    display: block;
    clear: both;
}

/**
 * Caja del Comentario
 ---------------------------*/
.comments-list .comment-box {
    width: 680px;
    float: left;
    position: relative;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.comments-list .comment-box:before, .comments-list .comment-box:after {
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    display: block;
    border-width: 10px 0px 10px 12px;
    border-style: solid;
    border-color: transparent #FCFCFC;
    top: 8px;
    right: -11px;
}

.comments-list .comment-box:before {
    border-width: 11px 13px 11px 0;
    border-color: transparent rgba(0, 0, 0, 0.05);
    right: -12px;
}

.reply-list .comment-box {
    width: 610px;
}

.comment-box .comment-head {
    background: #FCFCFC;
    padding: 10px 12px;
    border-bottom: 1px solid #E5E5E5;
    overflow: hidden;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}

.comment-box .comment-head i {
    float: right;
    margin-left: 14px;
    position: relative;
    top: 2px;
    color: #A6A6A6;
    cursor: pointer;
    -webkit-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.comment-box .comment-head i:hover {
    color: #03658c;
}

.comment-box .comment-name {
    color: #283035;
    font-size: 14px;
    font-weight: 700;
    float: right;
    margin-right: 10px;
}

.comment-box .comment-name a {
    color: #283035;
}

.comment-box .comment-head span {
    float: left;
    color: #999;
    font-size: 13px;
    position: relative;
    top: 1px;
}

.comment-box .comment-content {
    background: #FFF;
    padding: 12px;
    font-size: 15px;
    color: #595959;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

.comment-box .comment-name.by-author, .comment-box .comment-name.by-author a {
    color: #03658c;
}

.comment-box .comment-name.by-author:after {
    content: 'ارسال کننده';
    background: #03658c;
    color: #FFF;
    font-size: 12px;
    padding: 3px 5px;
    font-weight: 700;
    margin-left: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

/** =====================
 * Responsive
 ========================*/
@media only screen and (max-width: 766px) {
    .comments-container {
        /*width: 480px;*/
    }

    .comments-list .comment-box {
        width: 390px;
    }

    .reply-list .comment-box {
        width: 320px;
    }
}

/*show more text*/
div.auto-show-hide {
    height: 230px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: hideAnimate 0.3s;
}

div.auto-show-hide.active {
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100%;
    animation: showAnimate 0.3s;
}

.show-more {
    margin: 1rem auto;
}

@keyframes showAnimate {
    from {
        height: 230px;
    }
    to {
        height: 100%;
    }
}

@keyframes hideAnimate {
    from {
        height: 100%;
    }
    to {
        height: 230px;
    }
}

.block-chain {
    white-space: nowrap;
    width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #2cbca5 !important;
    margin-bottom: 0.5rem;
}

.custom-submit {
    width: 235px;
    height: 60px;
    font-family: estedad-bolder;
    background-color: #2cbca5 !important;
    color: white;
    border-radius: 10px;
    border: none;
    box-shadow: 0 1px 10px rgb(44 188 165 / 54%);
    transition: .5s;
    font-size: 16px;
    padding: 1rem 2rem;
    text-decoration: none !important;
}

.custom-submit:hover {
    background-color: rgba(44, 188, 165, 0.7) !important;
}

.captcha-container {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
}

@media only screen and (max-width: 450px) {
    .captcha-container {
        display: flex;
    }
}