@import url("Theme.DCWeb_Template.css?61282");

:root{
    --primary-color: #C0392B;
    --text-primary: #20272D;
    --background-color: #F6F7F7;
}

html, body, a, select, form, fieldset, table, tr, td, img, input, button, select, textarea, optgroup, option {
    font-family: Dubai;
    font-size: 16px;
    color : var(--text-primary);
}

body.null {
    min-width: auto !important;
}

input, select,textarea {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.ut-hide-label-for-wave {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

.ut-primary-btn{
    border-radius: var(--border-s);
    background: var(--primary-color);
    height: 48px;
    box-shadow: none;
    padding: 10px 32px 13px 32px;
    justify-content: center;
    align-items: center;
    color: var(--white, #FFF);
    /* H6 */
    font-size: var(--font-size-h6, 19px);
    font-weight: 500;
    line-height: 120%; /* 22.8px */
}
.ut-primary-btn[disabled="disabled"]{
    background: rgba(32, 39, 45, 0.10);
    color: var(--dark-gray);
}

.ut-secondary-btn{
    border: 1px solid var(--primary-color);
    border-radius: var(--border-s);
    box-shadow: none;
    height: 48px;
    padding: 10px 32px 13px 32px;
    justify-content: center;
    align-items: center;
    background: white;
    color: var(--primary-color);
    font-weight: 500;
    font-size: var(--font-size-h6, 19px);
    line-height: 120%; /* 22.8px */
}

.ut-file-list{
    display: ruby;
    gap: var(--space-s);
}

.ut-text-small{
    font-size: small;
}

/* Responsive 2 column */
.ut-columns2{
    display: flex;
    gap: var(--space-base);
}
.ut-columns2 > .ut-column-item{
    flex:1;
}

@media screen and (max-width: 806px) 
{
    .ut-columns2{
        display: contents;
    }
    .ut-columns2 .ut-column-item:first-child{
        margin-bottom: var(--space-base);
    }
}

/* Dropdown */
.ut-dropdown
{
    display: flex !important;
    height: 56px !important;
    padding: 0px 12px !important;
    justify-content: space-between !important;
    align-items: center !important;
    align-self: stretch !important;
    border-radius: 8px !important;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImV4cGFuZF9tb3JlIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE1Ljg3NDYgOS4wMDAwMkwxMS45OTQ2IDEyLjg4TDguMTE0NjEgOS4wMDAwMkM3LjcyNDYxIDguNjEwMDIgNy4wOTQ2MSA4LjYxMDAyIDYuNzA0NjEgOS4wMDAwMkM2LjMxNDYxIDkuMzkwMDIgNi4zMTQ2MSAxMC4wMiA2LjcwNDYxIDEwLjQxTDExLjI5NDYgMTVDMTEuNjg0NiAxNS4zOSAxMi4zMTQ2IDE1LjM5IDEyLjcwNDYgMTVMMTcuMjk0NiAxMC40MUMxNy42ODQ2IDEwLjAyIDE3LjY4NDYgOS4zOTAwMiAxNy4yOTQ2IDkuMDAwMDJDMTYuOTA0NiA4LjYyMDAyIDE2LjI2NDYgOC42MTAwMiAxNS44NzQ2IDkuMDAwMDJaIiBmaWxsPSIjNDA0ODRGIi8+CjwvZz4KPC9zdmc+Cg==') !important;
    background-position: right 8px center !important;
    box-shadow: none !important;
}
.ut-dropdown:not(.Not_Valid){
    border: 1px solid #E4E2E6 !important;
}

.ut-dropdown:invalid {
    color: #747474 !important;
}

.ar-AE .ut-dropdown{
    background-position: left 8px center !important;
}

/* Document Upload */
.upload-document-dragleave{
    background: var(--section_bg);
    border: 1px dashed rgba(192, 57, 43, 0.50);
}

.upload-document-dragenter{
    background: none;
    border: 1px dashed grey;
}

.upload-document-bg{
    min-height: var(--document-upload-height);
    align-items: center;
    align-self: stretch;
    border-radius: var(--border-s);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    justify-content: center;
}

.upload-document-bg .upload-component{
    min-height: var(--document-upload-height);
    opacity: 0;
    position: absolute;
    cursor: pointer;
    margin-left: 0;
}

.ut-row-button input{
    margin-top: var(--space-s);
    margin-left: var(--space-base);
    margin-right: 0px;
}

.ar-AE .ut-row-button input{
    margin-right: var(--space-base);
    margin-left: 0px;
}

.ut-button-grey{
    height: 48px !important;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border: none;
    border-radius: 8px;
    background: rgba(32, 39, 45, 0.10);
    color: var(--dark-gray);
    font-size: var(--font-size-h6);
    font-weight: 500;
    line-height: 120%; /* 22.8px */
}

@media (max-width: 768px) {
    .ut-row-button{
        margin-top: var(--space-base);
        display: flex;
        flex-direction: column;
        gap: var(--space-base)
    }
    .ut-row-button input{
        width: 100%;
        margin: 0px !important;
    }
}

.ut-file-widget{
    display: flex;
    padding: 12px 24px;
    align-items: center;
    border-radius: 8px;
    gap: 18px;
    border: 1px solid rgba(32, 39, 45, 0.10);
    width: fit-content;
}

.ut-file-widget .ut-file-btn-delete{
    display: flex;
    height: 32px;
    padding: 0px 12px;  
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 100px;
    background: #F9ECEA;
}

.ut-file-widget .ut-file-name{
    color: var(--dark-gray);
    font-weight: 500;
    line-height: 120%; /* 19.2px */
    text-wrap-mode: nowrap;
}

.ut-file-widget .ut-file-size{
    color: var(--description, #40484F);
    font-size: 12px;
    font-weight: 400;
    line-height: 120%; /* 15.6px */
}

@media (max-width: 1024px) {
    .ut-file-widget .ut-file-name {
        display: block;
        width: 43vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        direction: ltr;
    }

    .ar-AE .ut-file-widget .ut-file-name {
        text-align: right;
    }
}

/* -------------- Checkbox css start -------------- */
input[type="checkbox"]:checked:before{
    opacity: 1;
    box-shadow: none;
    border-radius: 6px;
    background: var(--primary-color);
    display: flex;
    padding: 4px;
    justify-content: center;
    border: 0px;
}

input[type="checkbox"]:checked:after {
    opacity: 1;
    width: 12px;
    height: 12px;
    content: url(/DCWeb_Template/img/UT_CheckMark.svg);
    border: none;
    transform: none;
    top: -2px;
    line-height: normal;
}

input[type=checkbox]:focus{
    outline: none;
}

@media (max-width: 1024px){
    input[type=checkbox]{
        width: 20px !important;
    }
}
/* -------------- Checkbox css end -------------- */
/* -------------- Radio css start -------------- */
input[type="radio"]:before{
    box-shadow: none;
    border-radius: 16px;
    border: 2px solid #E4E2E6;
    background: #FFF;
}

input[type="radio"]:checked:before {
    border: 2px solid var(--primary-color);
}

input[type="radio"]:checked:after {
    opacity: 1;
    background: var(--primary-color) !important;
    border: none;
    width: 8px;
    height: 8px;
    top: 31%;
    transform: none;
    left: 30%;
}

input[type=radio]:focus{
    outline: none;

}
/* -------------- Radio css end -------------- */



/* -------------- Feedback-Popup css start -------------- */
.Feedback_Message_Error {
    max-width: 500px !important;
    display: inline-flex !important;
    padding: 29px 45px 29px 31px !important;
    align-items: center !important;
    gap: 55px !important;
    border-radius: 12px !important;
    border: 1px solid #930005 !important;
    background: #FFEDEA !important;
    color: #930005 !important;
    height: 60px !important;
    box-shadow: none !important;
    background-image: url(/DCWeb_Template/img/Red_Warning_Circle.svg) !important;
    background-repeat: no-repeat !important;
    background-position-y: 18px !important;
    background-position-x: 10px !important;
    background-size: 21px !important;
    top: 40px !important;
}
 
.Feedback_Message_Wrapper_Close:after {
    content: url(/DCWeb_Template/img/Red_X.svg) !important;
}

.Feedback_Message_Success {
    max-width: 500px !important;
    display: inline-flex !important;
    padding: 29px 45px 29px 31px !important;
    align-items: center !important;
    gap: 55px !important;
    border-radius: 12px !important;
    border: 1px solid #00531F !important;
    background: #C6FFC7 !important;
    color: #00531F !important;
    height: 60px !important;
    box-shadow: none !important;
    background-image: url(/DCWeb_Template/img/Green_Check_Circle.svg) !important;
    background-repeat: no-repeat !important;
    background-position-y: 18px !important;
    background-position-x: 10px !important;
    background-size: 21px !important;
}
 
.Feedback_Message_Success .Feedback_Message_Wrapper_Close:after {
    content: url(/DCWeb_Template/img/Green_X.svg) !important;
}

a.Feedback_Message_Wrapper_Close {
    transform: scale(0.9) !important;
    top: 17px !important;
    outline: none !important;
    padding: 0px;
    margin-right: 20px;
}
 
.Feedback_Message_Success::before{
    display: none !important;
}

.ar-AE .Feedback_Message_Error,
.ar-AE .Feedback_Message_Success {
    background-position-x: 96% !important;
}



.ar-AE a.Feedback_Message_Wrapper_Close {
    transform: scale(0.9) translateX(70%) translateY(10%) !important;
    position: sticky !important
}

.ar-AE .Feedback_Message_Text {
    text-align: right !important;
    min-width: 85% !important;
}

div.os-internal-Popup.os-internal-ui-dialog,
.os-internal-Popup.os-internal-ui-dialog iframe{
    border-radius: 10px !important;
}

@media (max-width: 450px) 
{
    .ar-AE a.Feedback_Message_Wrapper_Close {
        transform: scale(0.9) translateX(100%) translateY(10%) !important;
        margin-right: 0px !important;
    }
}
/* -------------- Feedback-Popup css end -------------- */

/* -------------- Carousel css start -------------- */

:root {
    --document-upload-height: 120px;

    --section_bg: #FBF8FD;

    --border-s: 8px;
    --border-base: 12px;

    --font-size-xs: 10px;
    --font-size-s: 14px;
    --font-size-body: 16px;
    --font-size-h4: 28px;
    --font-size-h6: 19px;
    --form-space: 18px;

    /*Font color*/
    --dark-gray: #20272D;

    --space-l: 40px;
    --space-m: 24px;
    --space-base: 16px;
    --space-s: 8px;
    --space-xs: 4px;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .1);
     /* Color - Neutral */
    --color-neutral-0: #ffffff;
    --color-neutral-1: #f8f9fa;
    --color-neutral-2: #f1f3f5;
    --color-neutral-3: #e9ecef;
    --color-neutral-4: #dee2e6;
    --color-neutral-5: #ced4da;
    --color-neutral-6: #adb5bd;
    --color-neutral-7: #6a7178;
    --color-neutral-8: #4f575e;
    --color-neutral-9: #272b30;
    --color-neutral-10: #101213;
}


/* $4.1.9 - Patterns - Content - Carousel */
.carousel {
    position: relative;
    -webkit-transition: opacity 330ms ease;
            transition: opacity 330ms ease;
}

.carousel.is--hidden {
    opacity: 0;
    
}

.carousel .tns-outer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:reverse;
    -ms-flex-direction:column-reverse;
    flex-direction:column-reverse;
    width: 100%;
}

.carousel .tns-ovh {
    position: relative;
}

.carousel .tns-item {
    cursor: -webkit-grab;
}

.carousel .tns-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: var(--space-m);
}

.carousel .tns-nav button {
    cursor: pointer;
}

.carousel .carousel-navigation {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.carousel .carousel-arrow-left,
.carousel .carousel-arrow-right {
    position: absolute;
    background:  var(--color-neutral-0);
    border-radius: 50%;
    cursor: pointer;
    height: 40px;
    width: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack:  center;
    -ms-flex-pack:  center;
    justify-content:  center;
    -webkit-box-align:  center;
    -ms-flex-align:  center;
    align-items:  center;
    -webkit-box-shadow: var(--shadow-xs);
            box-shadow: var(--shadow-xs);
    color: var(--color-neutral-7);
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
}

.carousel .carousel-arrow-left:hover,
.carousel .carousel-arrow-right:hover {
    color: var(--color-neutral-9);
}

.carousel .carousel-arrow-left {
    left: 0;
}

.carousel .carousel-arrow-right {
    right: 0;
}

.carousel .carousel-navigation.carousel-padding-none .carousel-arrow-left {
    left: 24px;
}

.carousel .carousel-navigation.carousel-padding-none .carousel-arrow-right {
    right: 24px;
}

.carousel .carousel-arrow-left .fa-fw,
.carousel .carousel-arrow-right .fa-fw {
    font-size: 24px;
}

.carousel .carousel-arrow-left .fa-fw {
    margin: -2px 0 0 -2px;
}

.carousel .carousel-arrow-right .fa-fw {
    margin: -2px -2px 0 0;
}

/* Library CSS */
.carousel img:not(.tns-lazy-img),
.carousel .lazyload img {
    height: auto;
}
.carousel [class*="autoWidth"] img {
    max-width: none;
}

.carousel .img {
    font-size: 100px;
    font-weight: 100;
    color: #fff;
    text-align: center;
}

.carousel .visually-hidden {
    position: fixed;
    left: -10000px;
    opacity: 0;
}

/* nav */
.carousel .nav.active ul {
    left: 0;
}

.carousel .nav.active .nav-toggle-handle {
    left: 17em;
}

.carousel .nav.active .nav-toggle-handle:before {
    display: inline-block;
}

.carousel .nav.active .nav-toggle-handle:after {
    display: none;
}

.carousel .nav ul {
    position: fixed;
    top: 0;
    left: -17em;
    z-index: 100;
    width: 17em;
    height: 1000px;
    height: 100vh;
    background-color: #fff;
    -webkit-box-shadow: 2px 0 15px rgba(0, 0, 0, 0.15);
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.15);
    transition: left 0.25s;
    overflow-y: auto;
}

.carousel .nav a {
    display: block;
    padding: 0.7em 1em;
    color: inherit;
    text-decoration: none;
}

.carousel .nav a:hover {
    background-color: #F3F3F3;
}

.carousel .nav .active {
    color: #fff;
    background-color: #af23ff !important;
}

.carousel .nav-toggle-handle {
    position: fixed;
    transition: left 0.25s;
    left: 0;
    top: 0;
    z-index: 100;
    padding: 10px;
    color: #fff;
    background-color: #af23ff;
    cursor: pointer;
}

.carousel .nav-toggle-handle:before { 
    display: none;
    padding-right: 5px;
    content: 'â—„'; 
    font-size: 0.8em;
}

.carousel .nav-toggle-handle:after { 
    padding-left: 5px;
    content: 'â–º'; 
    font-size: 0.8em;
}

.carousel .customize-tools {
    position: relative;
}

.carousel .thumbnails { 
    margin: 20px 0;
    text-align: center;
}

.carousel .thumbnails li {
    display: inline-block;
    cursor: pointer;
    border: 5px solid #fff;
}

.carousel .thumbnails [aria-selected="true"] {
    background: none;
    border-color: #000;
}

.carousel .thumbnails li {
    width: 50px;
}

.carousel .thumbnails img {
    vertical-align: bottom;
    height: auto;
    max-height: 50px;
}

.carousel .controls {
    text-align: center;
}

.carousel .controls li {
    display: block;
    position: absolute;
    top: 50%;
    height: 60px;
    line-height: 60px;
    margin-top: -30px;
    padding: 0 15px;
    cursor: pointer;
    transition: background 0.3s;
}

.carousel .controls li img {
    display: inline-block;
    vertical-align: middle;
}

.carousel .controls .prev {
    left: 0;
}

.carousel .controls .next {
    right: 0;
}

.carousel .controls li:hover {
    background: #f2f2f2;
}

.carousel .tns-controls {
    text-align: center;
    margin-bottom: 10px;
}

.carousel .tns-controls [aria-controls] {
    font-size: 15px;
    margin: 0 5px;
    padding: 0 1em;
    height: 2.5em;
    color: #000;
    background: #66CCFF;
    border-radius: 3px;
    border: 0;
}

.carousel .lt-ie9 .tns-controls > [aria-controls] {
    line-height: 2.5em;
}

.carousel [data-action] {
    display: block;
    margin: 10px auto;
    font-size: 17px;
    min-width: 3em;
    text-align: center;
    background: transparent;
    border: 0;
}

.carousel .tns-controls [disabled] { 
    color: #999999;
    background: #B3B3B3; 
    cursor: not-allowed !important;
}

.carousel .tns-nav > [aria-controls] {
    width: 8px;
    height: 8px;
    padding: 0;
    margin: 0 4px;
    border-radius: 50%;
    background: var(--color-neutral-5);
    border: 0;
}

.carousel .tns-nav > [aria-selected="true"] {
    background: var(--primary-color);
}

.carousel .playbutton-wrapper {
    text-align: center;
}

.carousel .playbutton-wrapper button {
    height: 34px;
    padding: 0 10px;
    font-size: 14px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid  #ccc;
    cursor: pointer;
}

.carousel .wrapper {
    padding: 0 5em;
}

.carousel .suite-container .title, 
.carousel .suite-container .subtitle, 
.carousel .suite-container li {
    padding: 5px 10px;
}

.carousel .suite-container li {
    font-size: 12px;
    line-height: 1.4;
    background: #f5f5f5;
}
.carousel .suite-container .title {
    font-size: 14px;
    font-weight: bold;
    background: #8acac6;
    text-transform: capitalize;
}

.carousel .suite-container .subtitle {
    font-size: 13px;
    font-weight: bold;
    background: #dedede;
    text-transform: capitalize;
}

.carousel .suite-container .fail {
    background: #FFADE2;
}

.carousel [class*="vertical"] .img {
    padding: 30px 0;
}

.carousel [class*="vertical"] .img:before {
    content: '';
    display: inline-block;
    width: 1px;
    margin-right: -1px;
    height: 100%;
    vertical-align: middle;
}

.carousel [class*="vertical"] .img a {
    display: inline-block;
    padding: 0;
}
.carousel [class*="vertical"] .img-1 { height: 137px; }
.carousel [class*="vertical"] .img-2 { height: 122px; }
.carousel [class*="vertical"] .img-3 { height: 143px; }
.carousel [class*="vertical"] .img-4 { height: 325px; }
.carousel [class*="vertical"] .img-5 { height: 140px; }
.carousel [class*="vertical"] .img-6 { height: 119px; }
.carousel [class*="vertical"] .img-7 { height: 223px; }
.carousel [class*="vertical"] .img-8 { height: 164px; }

/*########## tny slider css ##########*/
.carousel .tns-outer {
    padding: 0 !important;
}

.carousel .tns-outer [hidden] {
    display: none !important;
}

.carousel .tns-outer [aria-controls], .carousel .tns-outer [data-action] {
    cursor: pointer;
}

.carousel .tns-slider {
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    transition: all 0s;
}

.carousel .tns-slider > .tns-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.carousel .tns-horizontal.tns-subpixel > .tns-item {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
}

.carousel .tns-horizontal.tns-no-subpixel:after {
    content: '';
    display: table;
    clear: both;
}

.carousel .tns-horizontal.tns-no-subpixel > .tns-item {
    float: left;
    margin-right: -100%;
}

.carousel .tns-no-calc {
    position: relative;
    left: 0;
}

.carousel .tns-gallery {
    position: relative;
    left: 0;
    min-height: 1px;
}

.carousel .tns-gallery > .tns-item {
    position: absolute;
    left: -100%;
    -webkit-transition: transform 0s, opacity 0s;
    -moz-transition: transform 0s, opacity 0s;
    transition: transform 0s, opacity 0s;
}

.carousel .tns-gallery > .tns-slide-active {
    position: relative;
    left: unset !important;
}

.carousel .tns-gallery > .tns-moving {
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    transition: all 0.25s;
}

.carousel .tns-lazy-img {
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    transition: opacity 0.6s;
    opacity: 0.6;
}

.carousel .tns-lazy-img.loaded {
    opacity: 1;
}

.carousel .tns-ah {
    -webkit-transition: height 0s;
    -moz-transition: height 0s;
    transition: height 0s;
}

.carousel .tns-ovh {
    overflow: hidden;
}

.carousel .tns-visually-hidden {
    position: absolute;
    left: -10000em;
}

.carousel .tns-transparent {
    opacity: 0;
    visibility: hidden;
}

.carousel .tns-fadeIn {
    opacity: 1;
    filter: alpha(opacity=100);
    z-index: 0;
}

.carousel .tns-normal, .carousel .tns-fadeOut {
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: -1;
}
/* -------------- Carousel css nd -------------- */


/* -------------- Buttons css start -------------- */
.ut-primary-button{
    min-width: 120px;
    height: 48px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    background: #C0392B;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: inline-flex;
    color: white;
    font-size: 19px;
    font-family: Dubai;
    font-weight: 500;
    line-height: 22.80px;
    word-wrap: break-word;
    border: none;
}

/* -------------- Buttons css end -------------- */


/* -------------- Accordion css start -------------- */

/* Custom  Css*/

.accordion-item-title img{
    max-width: 24px;
    max-height: 24px;
    margin-right: 0.5vw;
}

.ar-AE .accordion-item-title img{
    margin-left: 0.5vw;
    margin-right: 0;
}

.accordion-item-title, .accordion-item-title span{
    text-align: left;
    color: #20272D;
    font-size: 19px;
    font-family: Dubai;
    font-weight: 500;
    line-height: 22.80px;
    word-wrap: break-word;
}

.ar-AE .accordion-item-title, .ar-AE .accordion-item-title span{
    text-align: right;
}

.accordion-item-content a, .accordion-item-content.is--expanded, .accordion-item-content.is--expanded span{
     text-align: left;
     color: #40484F; 
     font-size: 16px; 
     font-family: inherit; 
     font-weight: 400; 
     line-height: 19.20px; 
     word-wrap: break-word;
     text-indent: 0;
     display: inline-block;
}

.ar-AE .accordion-item-content.is--expanded, .ar-AE .accordion-item-content.is--expanded span{
     text-align: right;
}

.accordion-item-content.is--expanded img{
    margin-right: 0.5vw;
}

.ar-AE .accordion-item-content.is--expanded img{
    margin-right: 0;
    margin-left: 0.5vw;
}

/* Custom  Css*/

/* $4.1.1 - Patterns - Content - Accordion */
.accordion {
    background-color: var(--color-neutral-0);
}

.accordion-item {
    border: var(--border-size-s) solid var(--color-neutral-4);
    border-bottom: 0.5px lightgray solid;
}

.accordion-item:first-child {
    border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
}

.accordion-item:last-child {
    border-bottom-width: var(--border-size-s);
    border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft);
}

.accordion-item.is--open {
    border-top: var(--border-size-m) solid var(--color-primary);
}

.accordion-item .accordion-item-header {
    -webkit-box-align: start;
       -ms-flex-align: start;
          align-items: flex-start;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: var(--font-size-h6);
    padding: var(--space-m);
}

.accordion-item.is--open .accordion-item-header {
    font-weight: var(--font-semi-bold);
}

.accordion-item .accordion-item-title {
    width: 100%;
}

.accordion-item .accordion-item-icon {
    color: var(--color-primary);
    -webkit-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
}

.accordion-item .accordion-item-icon .fa {
    font-size: 24px;
    width: auto;
}

.accordion-item.is--open > .accordion-item-header > .accordion-item-icon {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.accordion-item.is--disabled {
    color: var(--color-neutral-7);
    pointer-events: none;
}

.accordion-item.is--disabled .accordion-item-icon {
    color: var(--color-neutral-6);
}

.accordion-item .accordion-item-content {
    display: block;
    overflow: hidden;
}

.accordion-item .accordion-item-content.is--animating.is--expanded {
    overflow: hidden;
}

.accordion-item .accordion-item-content.is--expanded {
    overflow: visible;
}

.accordion-item .accordion-item-content,
.accordion-item .accordion-item-content.is--collapsed {
    height: 0;
    padding: var(--space-none) var(--space-m);
    visibility: hidden;
}

.accordion-item .accordion-item-content.is--expanded {
    height: auto;
    padding-right: var(--space-m);
    padding-left: var(--space-m);
    padding-bottom: var(--space-m);
    visibility: visible;
}

.accordion-item .accordion-item-content.is--animating {
    -webkit-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
}

/* $4.1.1 - Patterns - Content - Accordion */

/* -------------- Accordion css end -------------- */