:root {
    --ds-surface: #FFFFFF;
    --ds-text: #172B4D;
    --ds-text-subtle: #44546F;
    --ds-space-100: 0.5rem;
    --ds-background-input: #FFFFFF;
    --ds-border-input: #8590A2;
    --ds-space-075: 0.375rem;
    --ds-background-input-hovered: #F7F8F9;
    --ds-background-input-pressed: #FFFFFF;
    --ds-border-focused: #388BFF;
    --ds-border-focused: #388BFF;
    --ds-link: #0C66E4;
    --ds-text-inverse: #FFFFFF;
    --ds-background-brand-bold: #0C66E4;
    --ds-background-brand-bold-hovered: #0055CC;
    --ds-text-danger: #AE2E24;
    --ds-border-danger: #E2483D;
    --ds-background-accent-gray-subtlest: #F1F2F4;
    --ds-background-accent-gray-subtlest-hovered: #DCDFE4;
}

body {
    background-color: var(--ds-surface, #fff);
    color: var(--ds-text, #172b4d);
    font-family: IRANSans;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-text-decoration-skip-ink: auto;
    text-decoration-skip-ink: auto;
    direction: rtl;
}

div {
    display: block;
    unicode-bidi: isolate;
}

#root {
    height: 100%;
}

.css-4b375e {
    height: 100%;
}

html, body, p, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, img, pre, form, fieldset {
    margin: 0;
    padding: 0;
}

.css-q0b2qn {
    display: flex;
    width: 100%;
    min-height: 100%;
    flex-direction: column;
}

.css-xxwux {
    display: flex;
    flex: 1 1 auto;
}

.css-tw4vmx {
    position: relative;
    z-index: 2;
}

.css-auqgo3 {
    min-width: 0px;
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
}

/*.css-13okiyj {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: rgb(250, 251, 252);
    background-image: url(https://id-frontend.prod-east.frontend.public.atl-paas.net/assets/trello-left.4f52d13c.svg), url(https://id-frontend.prod-east.frontend.public.atl-paas.net/assets/trello-right.e6e102c7.svg);
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-size: 368px, 368px;
    background-position: left bottom, right bottom;
}*/

.css-1iefl20 {
    min-height: calc(100% - 100px);
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    margin: 50px 0px;
}

.css-qj62pw {
    display: flex;
    flex-direction: column;
    margin: 0px auto;
    width: 400px;
    padding: 32px 40px;
    background: rgb(255, 255, 255);
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;
    box-sizing: border-box;
    color: var(--ds-text-subtle, #42526E);
}

.css-146wmq {
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    text-align: center;
    margin-bottom: 16px;
}

.css-a3l9jr {
    display: inline-block;
    position: relative;
    color: var(--logo-color);
    fill: var(--logo-fill);
    line-height: 1;
    user-select: none;
    white-space: normal;
    height: 40px;
}

    .css-a3l9jr > svg {
        height: 100%;
        fill: inherit;
    }

.css-azin1o {
    display: flex;
    flex-direction: column;
    padding-top: 24px;
    -webkit-box-align: center;
    align-items: center;
}

    .css-azin1o h5 {
        font-weight: 600;
        font-size: 16px;
        line-height: 20px;
        color: rgb(23, 43, 77);
    }

p:first-child, ul:first-child, ol:first-child, dl:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, blockquote:first-child, pre:first-child, form:first-child, table:first-child {
    margin-top: 0;
}

.css-r44k6v {
    margin: 0px;
}

.css-13d1xil:first-of-type {
    margin-top: -8px;
}

.css-13d1xil {
    margin-top: 8px;
    transform-origin: 50% 0px;
    transition-property: visibility, height, margin-top, opacity, transform;
    transition-duration: 0s, 0.2s, 0.2s, 0.2s;
    transition-timing-function: ease-in-out;
    margin-bottom: 8px;
}

.css-wwet8f {
    margin-block-start: var(--ds-space-100, 8px);
}

.css-17nf42q {
    -webkit-box-align: center;
    align-items: center;
    background-color: var(--ds-background-input, #FAFBFC);
    border-color: var(--ds-border-input, #7A869A);
    color: var(--ds-text, #091E42);
    cursor: text;
    border-radius: 3px;
    border-width: var(--ds-border-width, 1px);
    padding: var(--ds-border-width, 1px) 0;
    border-style: solid;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 100%;
    font-family: IRANSans;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 100%;
    overflow: hidden;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    overflow-wrap: break-word;
    vertical-align: top;
    pointer-events: auto;
}

.css-1kxou5n:placeholder-shown {
    text-overflow: ellipsis;
}

.css-1kxou5n:not([data-compact]) {
    padding: var(--ds-space-100, 8px) var(--ds-space-075, 6px);
}

.css-1kxou5n {
    background-color: transparent;
    border: 0px;
    box-sizing: border-box;
    color: inherit;
    cursor: inherit;
    font-family: IRANSans;
    min-width: 0px;
    outline: none;
    width: 100%;
}

.css-17nf42q:hover:not([data-disabled]) {
    background-color: var(--ds-background-input-hovered, #EBECF0);
    border-color: var(--ds-border-input, #7A869A);
}

.css-17nf42q:focus-within:not([data-disabled]) {
    background-color: var(--ds-background-input-pressed, #FFFFFF);
    border-color: var(--ds-border-focused, #2684FF);
    box-shadow: inset 0 0 0 var(--ds-border-width, 1px) var(--ds-border-focused, #2684FF);
}

.css-1gu5jds {
    margin-top: 8px;
    text-align: right;
    padding-left: 0px;
}

.css-uahybi {
    font-size: 12px;
}

p, ul, ol, dl, h1, h2, h3, h4, h5, h6, blockquote, pre, form, table {
    margin: var(--ds-space-150, 12px) 0 0 0;
}

.css-1y8hiba {
    color: var(--ds-link, #0052CC);
}

a {
    color: var(--ds-link, #0052cc);
    text-decoration: none;
}

.css-17oh7w9 {
    margin-top: 8px;
    display: flex;
    flex-direction: row;
    -webkit-box-pack: center;
    justify-content: center;
}

.css-1s4vgyd {
    margin-top: 8px;
}

.css-t8mx7z {
    -webkit-box-align: baseline;
    align-items: baseline;
    border-width: 0px;
    border-radius: var(--ds-border-radius, 3px);
    box-sizing: border-box;
    display: inline-flex;
    font-size: inherit;
    font-style: normal;
    font-family: inherit;
    font-weight: 500;
    max-width: 100%;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);
    white-space: nowrap;
    background: var(--ds-background-brand-bold, #0052CC);
    cursor: pointer;
    padding: 0px 10px;
    vertical-align: middle;
    width: 100%;
    -webkit-box-pack: center;
    justify-content: center;
    color: var(--ds-text-inverse, #FFFFFF) !important;
    height: 40px !important;
    line-height: 40px !important;
}

    .css-t8mx7z div, .css-t8mx7z span {
        -webkit-box-pack: center;
        justify-content: center;
        display: flex !important;
    }

.css-178ag6o {
    opacity: 1;
    transition: opacity 0.3s;
    margin: 0px 2px;
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.css-1vt5tf0 {
    color: var(--ds-text-subtle, #42526E);
    margin-top: 24px;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
}

    .css-1vt5tf0 ul {
       text-align:right;
        list-style: none;
        padding: 0px;
    }

.css-1ef928d {
    color: var(--ds-text-subtle, #42526E);
    padding-top: 16px;
    font-size: 11px;
    text-align: center;
    line-height: 14px;
}

.css-1tn479n {
    background: transparent;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    flex-direction: column;
    margin: 0px auto;
    border-top: 1px solid rgb(193, 199, 208);
    padding-top: 24px;
    font-size: 11px;
    color: rgb(23, 43, 77);
}

.css-1eu9lrx {
    display: inline-block;
    position: relative;
    color: var(--logo-color);
    fill: var(--logo-fill);
    line-height: 1;
    user-select: none;
    white-space: normal;
    height: 24px;
}

    .css-1eu9lrx > svg {
        height: 100%;
        fill: inherit;
    }

.css-ftz4sr {
    padding-top: 8px;
}

.css-1s4vgyd {
    margin-top: 8px;
}

@media (max-width: 1200px) {
    .css-13okiyj {
        background-size: calc(-232px + 50vw), calc(-232px + 50vw), cover;
    }
}

@media (max-width: 800px) {
    .css-13okiyj {
        background: rgb(255, 255, 255);
        color: rgb(23, 43, 77);
    }
}

@media (max-width: 800px) {
    .css-1iefl20 {
        height: 100%;
        margin: 0px;
        -webkit-box-pack: start;
        justify-content: flex-start;
    }
}

@media (max-width: 800px) {
    .css-qj62pw {
        padding: 32px 16px;
        background: transparent;
        box-shadow: none;
        min-height: 100%;
        width: 320px;
    }
}
@media (max-width: 735px) {
    .maininvitedetail {
        padding: 30px;
    }
    .iconmizkar {
        text-align: center;
        display: block;
    }

}

    .css-t8mx7z:hover {
        background: var(--ds-background-brand-bold-hovered, #0065FF);
        text-decoration: inherit;
        transition-duration: 0s, 0.15s;
        color: var(--ds-text-inverse, #FFFFFF) !important;
    }

    .css-t8mx7z:focus:not(:focus-visible) {
        outline: none;
    }

    .css-t8mx7z:focus {
        outline: 2px solid var(--ds-border-focused, #2684FF);
        outline-offset: 2px;
    }

    .css-1y8hiba:hover {
        color: var(--ds-link, #0052CC);
    }

    a:hover {
        color: var(--ds-link, #0065ff);
        text-decoration: underline;
    }

    .css-1f0jn2w {
        display: flex;
        gap: var(--ds-space-050, 4px);
        font-family: IRANSans;
        margin-block-start: var(--ds-space-050, 4px);
        color: var(--ds-text-danger, #AE2A19);
    }

    .css-17nf42q[data-invalid], .css-17nf42q[data-invalid]:hover {
        border-color: var(--ds-border-danger, #DE350B);
        box-shadow: inset 0 0 0 var(--ds-border-width, 1px) var(--ds-border-danger, #DE350B);
    }

    .css-k008qs {
        display: flex;
    }

    .css-1wits42 {
        display: inline-block;
        flex-shrink: 0;
        line-height: 1;
        width: 16px;
        height: 16px;
    }

        .css-1wits42 > svg {
            width: 16px;
            height: 16px;
        }

        .css-1wits42 > svg {
            overflow: hidden;
            pointer-events: none;
            max-width: 100%;
            max-height: 100%;
            color: currentColor;
            fill: var(--icon-secondary-color);
            vertical-align: bottom;
        }

    .css-17nf42q[data-invalid], .css-17nf42q[data-invalid]:hover {
        border-color: var(--ds-border-danger, #DE350B);
        box-shadow: inset 0 0 0 var(--ds-border-width, 1px) var(--ds-border-danger, #DE350B);
    }

    .connect-your-account-container {
        margin-top: -16px;
        padding-top: 16px;
        background: -webkit-gradient(linear, left top, left bottom, from(#E9E7FD), to(rgba(249, 250, 252, 0)));
        background: linear-gradient(180deg, #E9E7FD 0%, rgba(249, 250, 252, 0) 100%);
    }




    header {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin: 16px;
        margin-bottom: 12vh;
    }

    header {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 40px;
    }

    article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
        display: block;
    }

        header img {
            height: 32px;
            width: 112px;
        }

    main {
        margin: auto;
        max-width: 550px;
    }

    .connect-your-account-header {
        line-height: 40px;
        letter-spacing: 0px;
        margin-bottom: 8px;
    }

    main h1 {
        font-size: 35px;
    }

    .connect-your-account-container p {
        font-size: 20px;
        line-height: 30px;
        letter-spacing: -0.75px;
        max-width: 100%;
        font-weight: 400;
        margin-bottom: 16px;
    }

    .connect-your-account-action-container {
        margin-top: 40px;
    }

    .connect-your-account-atlassian-logo {
        margin-bottom: 32px;
        height: 24px;
    }

    .connect-your-account-action-container a {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: .5px;
    }

    .connect-your-account-button {
        background: #0065FF;
        border-radius: 3.2px;
        display: inline-block;
        color: #FFFFFF;
        padding: 8px 16px;
        margin-left: 5px;
    }

    .connect-your-account-action-container a:hover {
        color: #FFFFFF;
    }

    .css-17nf42q.is-valid {
        border-color: #50cd89;
        padding-left: calc(1.5em + 1.55rem);
        background-image: url(/media/svg/is-valid.svg);
        background-repeat: no-repeat;
        background-position: left calc(0.375em + 0.3875rem) center;
        background-size: calc(0.75em + 0.775rem) calc(0.75em + 0.775rem);
        box-shadow: inset 0 0 0 var(--ds-border-width, 1px) #50cd89;
    }

        .css-17nf42q.is-valid:hover {
            border-color: #50cd89;
            box-shadow: inset 0 0 0 var(--ds-border-width, 1px) #50cd89;
        }

    .css-1s4vgyd .css-t8mx7z[disabled] {
        border: none !important;
        background-color: var(--ds-background-disabled, #091e4208) !important;
        box-shadow: none !important;
        color: var(--ds-text-disabled, #091e424f) !important;
        cursor: not-allowed !important;
    }

    #InputEmail::placeholder {
        text-align: right;
    }

    .form-control.form-control-solid {
        border: 1px solid #cccccc !important;
        background-color: #FDFD96;
    }
@media (max-width: 394px) {
    .w-mini-size {
        width: 50px !important;
    }
}
@media (max-width: 991.98px) {
    .app-container {
        max-width: max-content;
        padding-right: 20px !important;
        padding-left: 20px !important;
    }
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}