*{
    font-family: Vazirmatn, sans-serif;
    font-feature-settings: "ss01", "tnum";
    font-weight: bold;
}

body {
    background-color: #080411;
    margin: 0 auto 2.5rem;
    text-align: center;
    width: 100%;
}

header {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    height: 7rem;
    margin-bottom: .5rem;
    #cmd:first-child i {
        font-size: .9rem;
    }
    #cmd {
        margin: .5rem .8rem;
        min-width: fit-content;
        max-height: fit-content;
        color: #1e4664;
        transition: .3s;
        i {
            color: #bacada;
            font-size: 1.2rem;
            transition: .3s;
        }
        h4 {
            color: #fafafa;
            transition: .3s;
        }
        span{
            font-size: 1rem;
            color: #E99C22;
        }
        img {
            width: 5rem;
        }
    }
    #cmd:hover {
        color: #ffe54c;
        transition: .5s;
        i {
            color: #ffe54c;
            font-size: 1.3rem;
            transition: .5s;
        }
        h4 {
            color: #ffe54c;
            transition: .5s;
        }
    }
}

footer {
    display: flex;
    background-color: #080411;
    position: fixed;
    width: 100%;
    bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid #bacada;
    a {
        display: flex;
        min-width: fit-content;
        padding: .5rem .8rem;
        i {
            color: #bacada;
            font-size: 1rem;
            padding-left: .2rem;
            transition: .3s;
        }
        h4 {
            color: #fafafa;
            transition: .3s;
        }
        span{
            font-size: 1rem;
            color: #e72727;
        }
    }
    a:hover {
        i {
            color: #ffe54c;
            font-size: .9rem;
            transition: .5s;
        }
        h4 {
            color: #ffe54c;
            transition: .5s;
        }
    }
}

a {
    cursor: pointer;
    color: #37bee0;
    text-decoration: none;
    font-size: .9rem;
}
a:hover {
    color: #ffe54c;
}

label {
    color: #bacada;
    padding-top: .2rem;
    font-size: .8rem;
    min-width: fit-content;
}

input {
    color: #fafafa;
    outline-color: #bacada;
    background-color: #080411;
    border: none;
    border-bottom: 1px solid #ffe54c;
    margin-bottom: .3rem;
    padding: .1rem .3rem;
    text-align: center;
}
input:focus {
    outline: none;
}

textarea {
    font-size: .7rem;
    border-radius: 3px;
    resize: none;
}

button {
    background: none;
    border: none;
}
button:hover {
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6, p, ul {
    margin: 0;
    padding: 0;
    color: #fafafa;
}

select {
    margin: 0 .5rem 1rem 0;
    padding-left: 4rem;
    font-size: 1rem;
    background: none;
    border: 1px solid #37bee0;
    border-radius: 10px;
}
select:hover {
    cursor: pointer;
    border-color: #92ef00;
}

option {
    font-size: 1rem;
}

.dgn {
    color: #0a690a;
}

.cyn {
    color: #37bee0;
}

.brn {
    color: #7a3c09;
}

.grn {
    color: #92ef00;
}

.red {
    color: #e72727;
}

.org {
    color: #E99C22;
}

.prp {
    color: #5c339e;
}

.pnk {
    color: #f787c4;
}

.ylw {
    color: #ffe54c;
}

.wit {
    color: #fafafa;
}

.rtl {
    text-align: right;
}

.ltr {
    text-align: left;
}

.wds {
    max-width: 1.5rem;
}

.wdm {
    max-width: 3.5rem;
}

.wdl {
    max-width: 5rem;
}

.wdx {
    max-width: 7.5rem;
}

.bgn {
    background-color: #92ef00;
}

.rea {
    color: #bacada!important;
    font-weight: lighter;
}
.rea:hover {
    color: #fafafa!important;
}

.errorlist {
    list-style-type: none;
    color: #e72727;
    font-size: .6rem;
}

.lgn {
    color: #080411;
    background-color: #ffe54c;
    border: 1px solid #ffe54c;
    border-radius: 4px;
    margin: .5rem 0;
    padding: .4rem 1.5rem;
    font-size: .9rem;
    transition: .3s;
}
.lgn:hover {
    color: #ffe54c;
    background-color: #080411;
    border-color: #ffe54c;
    transition: .5s;
}

.lgh {
    color: #080411;
    background-color: #E99C22;
    border: 1px solid #E99C22;
    border-radius: 4px;
    padding: 0 1.5rem;
    font-size: .9rem;
    transition: .3s;
}
.lgh:hover {
    color: #e72727;
    background-color: #080411;
    transition: .5s;
}

.sec {
    color: #fafafa;
    border: 1px solid #bacada;
    border-radius: 4px;
    margin: .5rem;
    padding: .4rem 1.5rem;
    transition: .3s;
}
.sec:hover {
    color: #ffe54c;
    border-color: #ffe54c;
    transition: .5s;
}

.wmn {
    display: inline-block;
    width: 90%;
    columns: 2;
    margin: 4rem auto 1rem;
    border-bottom: 1px dotted #fafafa;
    padding-bottom: 2rem;
    div {
        width: 50%;
    }
    button {
        color: #fafafa;
        font-size: 2rem;
        margin: .5rem 0 0;
        padding: .4rem 2rem;
        text-align: center;
        transition: .5s;
        span {
            font-size: 0;
            transition: .3s;
        }
    }
    button:hover {
        color: #ffe54c;
        text-align: left;
        transition: .5s;
        span {
            font-size: 2rem;
            padding: .3rem;
            transition: .5s;
        }
    }
}

.slc {
    width: 2.5rem;
    border-radius: 100%;
    padding: .5rem 0;
    border-top: 2px solid #37bee0;
    border-bottom: 2px solid #37bee0;
}
.slc:hover {
    border-color: #92ef00;
}

.afz {
    color: #ffe54c;
    transition: .3s;
}
.afz:hover {
    color: #fafafa;
    transition: .5s;
}

.fai {
    padding: 0;
    font-size: 1.1rem;
    height: 1.4rem;
    color: #ffe54c;
    transition: .3s;
}
.fai:hover {
    color: #fafafa;
    transition: .5s;
}

.smg {
    width: 1.5rem;
    border-radius: 3px;
    border: 1px solid #37bee0;
}
.smg:hover {
    border-color: #92ef00;
}

.mmg {
    display: inline-block;
    margin: 1rem 3%;
    width: 50%;
    max-width: 10rem;
    a {
        display: flex;
        transition: .3s;
        img {
            width: 100%;
            border-radius: 3px;
            transition: .3s;
        }
    }
}
.mmg:hover {
    a {
        transform: scale(.95) rotate(6deg);
        transition: .5s;
        img {
            margin-bottom: .2rem;
            transition: .5s;
        }
    }
    h5 {
        cursor: pointer;
        color: #ffe54c;
        transition: .5s;
    }
}

.lmg {
    position: relative;
    display: inline-flex;
    width: 100%;
    #img {
        width: 100%;
    }
    span {
        position: absolute;
        font-size: 1.6rem;
        background-color: #f2f2f290;
        width: 90%;
        padding: .5rem 1rem;
        border-radius: 5px;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: .3s;
    }
    h5 {
        position: absolute;
        color: #080411;
        background-color: #fafafa40;
        padding: 0 1rem;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 3px;
        transition: .3s;
    }
}
.lmg:hover {
    span {
        color: #ffe54c;
        background-color: #08040e40;
        font-size: 2rem;
        transition: .5s;
    }
    h5 {
        color: #ffe54c;
        background: none;
        background-color: #08040e40;
        transition: .5s;
    }
}

.ict {
    display: inline-flex;
    width: fit-content;
    margin: auto;
    height: 1.5rem;
    h4 {
        color: #ffe54c!important;
        margin: .2rem;
    }
    button {
        display: flex;
        padding: .4rem 0 0 0;

    }
}

.mbl {
    padding: .7rem;
    margin: .5rem auto 2rem;
    h6 {
        color: #E99C22;
    }
}

.flg {
    display: inline-block;
    width: 20rem;
    margin: .7rem;
    overflow-x: auto;
    overflow-y: hidden;
    div {
        display: flex;
        justify-content: space-between;
        width: 95%;
    }
    label {
        color: #bacada;
    }
    a {
        font-size: .8rem;
    }
    select {
        background-color: #080411;
        color: #fafafa;
        width: 65%;
        font-size: .9rem;
        margin: .2rem .5rem 0 0;
    }
    textarea {
        width: 65%;
        height: 6rem;
    }
    #id_image {
        width: 65%;
    }
}

.fbx {
    display: inline-block;
    background-color: #f2f2f220;
    border-bottom: 1px solid #bacada;
    border-right: 1px solid #bacada;
    border-radius: 3px;
    margin: .2rem;
    padding: .2rem;
    width: 90%;
    max-width: 22rem;
    #lin {
        display: inline-flex;
        justify-content: space-between;
        width: 95%;
    }
    #img {
        width: 95%;
    }
    textarea{
        min-height: 5rem;
    }
}

.ars {
    display: inline-block;
    width: 90%;
    #cnt {
        border: 1px solid #bacada;
        border-radius: 7px;
        padding: 0 .5rem;
        margin: .5rem 0;
    }
    #lin {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    p {
        text-align: right;
        font-size: .7rem;
    }
}

.nbx {
    display: inline-block;
    width: 90%;
    #cnt {
        height: 1.5rem;
        margin-bottom: .5rem;
        border-bottom: 1px solid #bacada;
        border-right: 1px solid #bacada;
        border-radius: 3px;
        background-color: #f2f2f220;
        padding: .3rem;
        overflow-y: hidden;
        i {
            display: flex;
            float: right;
            color: #fafafa;
            margin: .2rem 0 0 .2rem;
        }
        #lin {
            display: flex;
            justify-content: space-between;
            max-height: 1.5rem;
            text-overflow: ellipsis;
            overflow-x: auto;
            overflow-y: hidden;
            form {
                min-width: fit-content;
            }
            button {
                color: #ffe54c;
                transition: .3s;
            }
            button:hover {
                color: #fafafa;
                transition: .5s;
            }
            h5 {
                color: #bacada;
                margin: 0 .5rem;
                min-width: fit-content;
            }
        }
    }
}
.aus {
    width: fit-content;
    max-width: 90%;
    margin: auto;
    h3 {
        text-align: right;
    }
    h5 {
        margin: 0 1.5rem 1rem 0;
        text-align: justify;
        font-weight: lighter;
    }
}

.ush {
    width: 100%;
    display: inline-block;
    div {
        width: 90%;
        margin: auto;
        display: flex;
        margin-bottom: .5rem;
    }
    label {
        width: 30%;
    }
    h4 {
        width: 70%;
    }
    a {
        margin: auto;
    }
}

.fmg {
    p {
        width: 95%;
        height: 6rem;
        text-align: justify;
        padding: .5rem;
        font-size: .8rem;
    }
    textarea {
        width: 95%;
        height: 6rem;
        text-align: justify;
        padding: .5rem;
    }
}

.exi {
    border: 1px dotted #92ef00;
    background-color: #7eac0050;
    h2 {
        background-color: #92ef00;
    }
}

.exr {
    border: 1px dotted #E99C22;
    background-color: #E99C2250;
    h2 {
        background-color: #E99C22;
    }
}

.exd {
    border: 1px dotted #e72727;
    background-color: #CB2A2920;
    h2 {
        background-color: #e72727;
    }
}

.exc {
    border-radius: 30px 3px 30px 3px;
    max-width: 18rem;
    margin: 1rem auto;
    padding-bottom: .5rem;
    h2 {
        position: absolute;
        min-width: 2rem;
        height: 2rem;
        border-radius: 0 3px 0 10px;
    }
    p {
        display: flex;
        font-size: .8rem;
        font-weight: lighter;
        text-align: justify;
        text-indent: 1.3rem;
        line-height: 1.7;
        margin: .5rem;
        padding: .2rem .5rem;
    }
    a {
        display: block;
        font-size: .9rem;
        margin: .3rem auto;
    }
}

.ftr {
    background-color: #fafafa;
    color: #080411;
    padding: 1.5rem 5%;
    text-align: right;
    margin: auto;
    #lgo {
        width: 9rem;
    }
    #aft {
        #slo {
            label {
                color: #0a690a;
                font-size: 1.2rem;
            }
            img {
                width: 9rem;
                height: fit-content;
                border: none;
                border-radius: 0;
                margin-right: .5rem;
            }
        }
        a {
            display: flex;
            width: 90%;
            margin: .5rem 0;
            img {
                height: 1.5rem;
                margin-left: .5rem;
                border-radius: 100%;
                border: 1px solid #fafafa;
                border-radius: 100%;
                transition: .3s;
            }
            label {
                color: #1e4664;
                cursor: pointer;
                margin: auto 0;
                transition: .3s;
            }
        }
        a:hover {
            img {
                border-color: #833000;
                transition: .5s;
            }
            label {
                color: #833000;
                transition: .5s;
            }
        }
    }
    hr {
        margin: 1;
        color: #bacada;
    }
    h3 {
        color: #080411;
        margin: 1rem;
    }
    button {
        width: min-content;
        margin: 1rem 2rem;
        transition: .3s;
        i {
            font-size: 2rem;
        }
    }
    button:hover {
        color: #833000;
        transition: .5s;
    }
    #wmn {
        display: inline-block;
        margin: auto;
        a {
            color: #1e4664;
            font-size: 1rem;
            margin: .5rem 0 0;
            padding: .4rem 2rem;
            text-align: center;
            transition: .3s;
            span {
                font-size: 0;
                transition: .3s;
            }
        }
        a:hover {
            color: #833000;
            text-align: left;
            transition: .5s;
            span {
                font-size: 1rem;
                padding: .3rem;
                transition: .5s;
            }
        }
    }
    #drp {
        display: inline-block;
        justify-content: space-around;
        transition: .3s;
        input {
            display: none;
            color: #080411;
            transition: .5s;
        }
        h3 {
            color: #080411;
        }
        p {
            visibility: hidden;
            text-align: right;
            text-indent: 1rem;
            color: #f2f2f200;
            font-size: 0;
            transition: .3s;
        }
        br {
            display: none;
        }
        label {
            position: relative;
            display: block;
            cursor: pointer;
            color: #1e4664;
            font-size: 1rem;
            text-align: right;
            text-indent: 1rem;
            transition: .3s;
        }
        label:hover {
            color: #833000;
            transition: .5s;
        }
        input#ch1:checked~p#c1,
        input#ch2:checked~p#c2,
        input#ch3:checked~p#c3 {
            visibility: visible;
            color: #080411;
            padding: 0 1rem 2rem 1rem;
            margin: auto;
            font-size: .8rem;
            transition: .5s;
            br {
                display: block;
            }
        }
    }
    h6 {
        color: #833000;
        width: fit-content;
        margin: 1rem auto;
    }
}

.par {
    color: #fafafa;
    font-size: .8rem;
    font-weight: lighter;
    padding: 1.5rem;
    text-indent: 2rem;
    text-align: justify;
    margin: 0 auto 3rem;
    max-width: 65%;
    span {
        color: #92ef00;
    }
}

.icn {
    img {
        width: 4rem;
    }
}
.icn:hover {
    h5 {
        color: #ffe54c;
        transition: .5s;
    }
}

.bnr {
    display: flex;
    width: 100%;
    background-color: #5c339e;
    margin: 1.5rem auto;
    padding: .5rem;
    justify-content: center;
    transition: .3s;
    ul {
        h2 {
            color: #fafafa;
            text-align: right;
            transition: .3s;
        }
        li {
            list-style: none;
            color: #bacada;
            font-size: .8rem;
            text-align: right;
        }
    }
}
.bnr:hover {
    background-color: #1e4664;
    transition: .5s;
    h2 {
        color: #ffe54c;
        transition: .5s;
    }
}

.gly {
    div {
        position: relative;
        img {
            width: 100%;
        }
        h3 {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #08040e40;
            padding: .2rem 1rem;
            border-radius: 3px;
            transition: .3s;
            width: 90%;
        }
    }
    div:hover {
        h3 {
            color: #ffe54c;
            bottom: 70%;
            transition: .5s;
        }
    }
}

.ctq {
    border-top: 2px solid #92ef00;
    border-bottom: 2px solid #92ef00;
    border-radius: 5px 0 0 5px;
    i {
        color: #92ef00;
    }
    span {
        color: #92ef00;
    }
}
.mnu {
    display: flex;
    #ctg {
        display: flex;
        flex-direction: column;
        width: 25%;
        max-width: 10rem;
        #ctb {
            width: 100%;
            padding: .3rem;
            font-size: 1rem;
            text-align: right;
            transition: .3s;
        }
        #cnt {
            font-size: .7rem;
        }
    }
    .bju {
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: 25rem;
        margin: auto;
        transition: .3s;
        .isw {
            color: #080411;
            border-color: #92ef00;
            background-color: #92ef00;
        }
        h5 {
            width: fit-content;
            padding-left: .5rem;
        }
        button {
            color: #bacada;
            border-top: 2px solid #bacada;
            border-bottom: 2px solid #bacada;
            border-left: 1px solid #bacada;
            border-right: 1px solid #bacada;
            margin-bottom: 1rem;
            font-size: .8rem;
            transition: .3s;
        }
        #ctn {
            padding: 0 .7rem;
        }
    }
    #lef {
        width: 75%;
        #pgb {
            margin-top: 1rem;
        }
    }
    #ctn:hover,#ctj:hover,#ctb:hover {
        color: #080411;
        background-color: #ffe54c;
        border-color: #ffe54c;
        transition: .5s;
    }
}

.bld {
    display: inline-flex;
    background-color: #f2f2f220;
    width: 95%;
    max-width: 20rem;
    border-radius: 3px;
    margin: .4rem;
    transition: .3s;
    a {
        position: relative;
        display: flex;
        img {
            width: 20%;
            height: fit-content;
        }
        #hrt {
            color: #e72727;
            position: absolute;
        }
        #ilf {
            position: relative;
            width: 80%;
            text-align: right;
            h4 {
                color: #fafafa;
                padding-right: .3rem;
            }
            #prc {
                position: absolute;
                left: .2rem;
                top: 0;
            }
            h6 {
                position: absolute;
                top: 1.2rem;
                left: .2rem;
                border-radius: 10px;
                padding: 0 .3rem;
                background-color: #5c339e;
                border-right: 2px solid #e72727;
                border-left: 2px solid #e72727;
            }
            #dls {
                color: #e72727;
                position: absolute;
                top: 1.1rem;
                left: 2.5rem;
            }
            p {
                font-size: .6rem;
                color: #37bee0;
                margin-right: .5rem;
                position: absolute;
                bottom: 0;
            }
            .afz {
                position: absolute;
                left: 0;
                bottom: 0;
            }
            .ict {
                position: absolute;
                left: .2rem;
                bottom: .2rem;
            }
            #tmm {
                color: #E99C22;
                position: absolute;
                left: .3rem;
                bottom: 0;
            }
        }
    }
}
.bld:hover {
    background-color: #fafafa40;
}

.dtl {
    display: inline-flex;
    background-color: #f2f2f220;
    width: 95%;
    border-radius: 3px;
    margin: .5rem;
    transition: .3s;
    a {
        display: flex;
        h4 {
            width: 95%;
            padding-right: .3rem;
            span {
                color: #bacada;
                font-size: .8rem;
            }
        }
        h5 {
            color: #e72727;
        }
        #ilf {
            position: relative;
            display: flex;
            flex-direction: column;
            min-width: 30%;
            img {
                width: 100%;
                border-radius: 3px 0 3px 0;
            }
            #ims {
                border-radius: 10px;
                padding: 0 .5rem;
                width: fit-content;
                margin: auto;
                background-color: #5c339e;
                border-right: 2px solid #e72727;
                border-left: 2px solid #e72727;
            }
        }
        #hrt {
            position: absolute;
            left: 3%;
        }
        #irg {
            display: flex;
            flex-direction: column;
            min-width: 70%;
            p {
                color: #fafafa;
                border-radius: 2px;
                font-size: .65rem;
                text-align: justify;
                line-height: 1.35;
                width: 92%;
                height: 4.4rem;
                overflow: hidden;
                text-indent: 1.5rem;
                margin: .3rem .3rem 0 0;
                padding: .2rem;
            }
            div {
                text-align: right;
                margin-top: .2rem;
                h6 {
                    color: #37bee0;
                    padding: .1rem 0;
                }
                i {
                    color: #37bee0;
                    margin-right: .3rem;
                }
            }
        }
    }
}
.dtl:hover {
    background-color: #fafafa40;
}

.rte {
    display: inline-block;
    img {
        width: 35%;
        float: right;
        margin: 0 1rem;
        border-radius: 3px;
    }
    h3 {
        text-align: right;
        text-indent: .5rem;
    }
    p {
        font-size: .9rem;
        text-align: justify;
        text-indent: 2rem;
        padding: 0 1rem;
        font-weight: lighter;
        color: #bacada;
    }
    .afz {
        width: 100%;
        margin: .5rem 0;
    }
    #psd {
        color: #E99C22;
        transition: .3s;
    }
    #psd:hover {
        color: #fafafa;
        transition: .5s;
    }
    #rte {
        border-top: 1px solid #1e4664;
        border-bottom: 1px solid #1e4664;
        width: 100%;
        max-width: 35rem;
        margin: 1rem auto;
        padding: .5rem 0;
        h4 {
            color: #37bee0;
            display: inline-flex;
            width: 80%;
            margin-bottom: .2rem;
            justify-content: space-around;
        }
        #kar {
            display: inline-flex;
            min-width: 80%;
            justify-content: space-between;
            h5 {
                color: #e72727;
            }
        }
        span {
            font-size: .8rem;
            padding-top: .2rem;
            color: #e72727;
        }
        #spb {
            color: #37bee0;
        }
        progress {
            width: 60%;
        }
        #fai {
            border: 2px solid #92ef00;
            border-radius: 7px;
            padding: 0 .4rem;
            font-size: .7rem;
            margin: auto .3rem;
            color: #92ef00;
            transition: .3s;
        }
        #fai:hover {
            color: #fafafa;
            border-color: #fafafa;
            transition: .5s;
        }
    }
    #img {
        width: 55%;
    }
}

.itl {
    margin: 0 auto;
    width: 90%;
    #ibd {
        display: inline-flex;
        justify-content: space-between;
        padding: .2rem;
        width: 99%;
        height: 1.4rem;
        border-bottom: 1px solid #bacada;        
    }
    #inm {
        font-size: .8rem;
        text-align: right;
        min-width: 40%;
    }
    #mnb {
        display: flex;
        max-width: 0;
        max-height: .4rem;
        color: #e72727;
        font-size: .7rem;
        rotate: 12deg;
    }
}

.its {
    display: inline-block;
    width: 90%;
    margin-top: 3rem;
    #lin {
        display: inline-flex;
        justify-content: space-between;
        width: 100%;
    }
    textarea {
        width: 100%;
        margin: 1.5rem 0;
    }
    #cnf {
        margin: .5rem auto;
        display: block;
    }
    #lgn {
        padding: 0 1.5rem;
    }
}

.pgn {
    display: flex;
    justify-content: center;
    margin: 1rem;
    button {
        padding: 0 .3rem;
        border: 1px solid #1e4664;
        color: #fafafa;
        margin: .1rem;
        border-radius: 5px;
        transition: .3s;
    }
    button.active {
        background-color: #92ef00;
        color: #080411;
        border-color: #92ef00;
    }
    button:hover:not(.active):not(:disabled) {
        background-color: #ffe54c;
        color: #080411;
        border-color: #ffe54c;
        transition: .5s;
    }
    button:disabled {
        color: #bacada;
        border-color: #bacada;
        cursor: default;
    }
}



@media only screen and (min-width: 600px) {
    * {
        font-size: large;
    }
    header {
        #cmd {
            img {
                width: 6.5rem;
            }
        }
    }
    .lmg {
        width: 80%;
    }
    .gly {
        columns: 3;
    }
    .ftr {
        border-radius: 5px;
        #afu {
            display: inline-flex;
            width: 100%;
        }
        #aft {
            width: 50%;
            a {
                img {
                    height: 2rem;
                }
            }
        }
        #wmn {
            width: 50%;
        }
        #bft {
            width: 50%;
        }
        #drp {
            width: 50%;
        }
        #lgo {
            width: 12rem;
        }
        h6 {
            font-size: small;
        }
    }
    .bld {
        width: 45%;
        h6 {
            font-size: small;
        }
        #hrt {
            font-size: small;
        }
        i {
            font-size: small;
        }
    }
    .rte {
        width: 70%;
        #rte {
            border: none;
        }
        .afz {
            width: fit-content;
        }
    }
    .dtl {
        max-width: 26rem;
        max-height: 14rem;
        h6 {
            font-size: small;
        }
        #hrt {
            font-size: small;
        }
        i {
            font-size: small;
        }
    }
}