/* ===================================================================== */
/*  The following CSS was created using Theme Editor.                    */
/*  To modify this CSS, click "Open Theme Editor".                       */
/* ===================================================================== */

/* ===================================================================== */
/*  Root - CSS Variables                                                 */
/* ===================================================================== */

:root {
	
    /* Color - Brand */
    --color-primary: #2884c6;
    --color-secondary: #2884c6;

    --color-primary-hover: #1e6394;
    --color-primary-selected: rgba(40, 132, 198, .12);
	
    /* App Settings */
    --color-background-body: #fafafa;
    --color-background-login: #ffffff;
	
    /* Dark Theme */
    --background-dark-theme: rgba(255, 255, 255, .1);
    --background-dark-theme-hover: rgba(255, 255, 255, .2);
}

/* Login and Splash Color */

.login-screen,
.layout-native .login-screen {
    background-color: var(--color-background-login);
}


.font-family
{
    font-family: 'ArabicRegular';
}

.separator-color{background-color:var(--color-primary)}
/*body{    background-color: var(--color-background-body);}*/
body.is-rtl, .is-rtl button,.is-rtl select, .is-rtl textarea, .is-rtl input, .is-rtl a,.is-rtl span { font-family: "bodyFontRegular", sans-serif;}
body, select, textarea, input, button {
    font-family: "bodyFontRegular", sans-serif;
    letter-spacing: 0.02rem;
}
.labelRight,.labelRight_Ar,.TabHeading,.is-ltr .langSwitch .button-group-item:last-child {font-family: 'bodyFontSemiBold'!important;}
body.is-rtl .header-logo .heading6, body.is-rtl .pageHeading, body.is-rtl .osui-accordion-item__title__placeholder {font-family: 'ArabicHeading';}
.header-logo .heading6, .pageHeading, .osui-accordion-item__title__placeholder{font-family: 'EnglishHeading';}
.is-rtl .pageHeading{font-size: var(--font-size-h4);}

/*======================================================================Font Family==============================================================================*/

.H30{height:30px}
.H50{height:50px}
.H190{height:190px!important}
.H400{height:400px!important}
.font-7px{ font-size: 7px}
.font-9px{ font-size: 9px !important}
.font-10px{ font-size: 10px;}
/*.barcodeImg{ height:30px; width:85px}*/
.ChartH385{height:385px}
.font-size-xxs{font-size:5px !important}
.white-space-prewrap{ white-space: pre-wrap;}
.white-space-nowrap{ white-space: nowrap !important;}
.font-bolder{font-weight: bold !important;}
.displayhide{display: none}
.displayshow{display: block;}
.popup-dialog.submit-modal {min-width:125vh; height: 50vh;}/*pasted from PMC/applicationDetails*/
.text-align-middle{ display: flex;}/*pasted from PMC/applicationDetails*/
.dir-rtl{direction: rtl;}
a:visited{color:var(--color-Primary)}
/*color - palette*/
:root {
    --color-maroon: #781301;
    --color-beige-dark:#987e63;
    --color-beige-light:#F7EDE2;
    --color-text:#272530;
    --color-background-body: #fafafa;
    --color-Primary: #2884C6;
    --color-Secondary: #144066;
    --color-Tertiary:#d7eaf9;
    --color-quaternary: #6FBDC5;
    --font-size-base: 16px;
    --font-size-s: 15px;
    --font-size-xs: 14px;
    --font-size-label: 13px;
    --font-size-12: 12px;
    --color-error: #c62626 !important
}

.img_stamp {width: 150px; height: 145px;}
.lineHight{line-height: 14px;}

.text-primary{color:var(--color-Primary);}
.text-secondary{color: var(--color-Secondary);}

.text-align-justify{text-align: justify;}


.text-maroon{color:var(--color-Secondary);}
.background-success-light{background-color: #d5efd8;}
.btn-maroon
{   background-color: var(--color-maroon);
    border: var(--border-size-s) solid var(--color-maroon);
    color: var(--color-neutral-0);
}
.btn-secondary
{
    background-color: var(--color-Secondary);
    border: var(--border-size-s) solid var(--color-Secondary);
    color: var(--color-neutral-0);
}


.approve-btn, .approve-btn:hover{ background-color:#41ca8f!important; color: #ffffff !important; padding: 3px 5px !important;font-size: var(--font-size-label) !important;display:block;height: 22px;  border-radius: 5px; text-decoration:none;}
.reject-btn, .reject-btn:hover{ background-color:#e4504b!important; color: #ffffff !important; padding: 3px 5px !important;font-size: var(--font-size-label) !important;display:block;height: 22px;  border-radius: 5px;text-decoration: none;}
.approve-btn .fas6, .reject-btn .fas6, .save-btn .icon {font-size: 0.7rem;}
.save-btn, .save-btn:hover { background-color:#357EDD!important; color: #ffffff !important; padding: 3px 5px !important;font-size: var(--font-size-label) !important;display:block;height: 22px; border-radius: 5px;text-decoration: none;}
.save-btn span{color: #ffffff!important;}


@media (max-width: 1366px) { 
   /*  .login-Wrapper{background-position: center -5rem;}
  .login-screen{margin-top: -40px!important;}*/
  

}
@media only screen and (min-width: 768px) and (max-width: 1366px) {
    .is-rtl .label{font-size: var(--font-size-12)!important;line-height: 16px;}
    .label{font-size: var(--font-size-label)!important;line-height: 13px;}
    .is-rtl .LabelControlUI,.LabelControlUI{margin-bottom: var(--space-s)!important;}

}
/* login Page*/
.login-screen, .layout-native .login-screen{background-color: transparent !important}
.login-Wrapper{background-image: url('../img/MFS_Theme_Lib.LoginBg.svg?nMwfv15c4MiUY_gEpW_JJw');background-repeat: no-repeat;background-size: cover;background-position: center;background-color: #fff;height: 100%;}

/*tooltip*/

.osui-tooltip .osui-balloon {background-color:#ddeeef;color: #333}
.osui-tooltip__balloon-arrow {background-color:#ddeeef}
.osui-tooltip .icon {color:var(--color-neutral-8);}
.osui-tooltip__balloon-wrapper.right .osui-tooltip__balloon-wrapper__balloon:before{border-color: transparent #ddeeef transparent transparent;}
.osui-tooltip__balloon-wrapper.top .osui-tooltip__balloon-wrapper__balloon:before{border-color:  #ddeeef transparent transparent transparent;}
.osui-tooltip__balloon-wrapper.left .osui-tooltip__balloon-wrapper__balloon:before{border-color:  transparent transparent transparent #ddeeef;}
/*==================================custom=========================*/
.text-underline{ text-decoration: underline;}
.text-decoration-none:hover{ text-decoration: none !important;}
.tableRowclickCursor{ cursor: pointer;}
/*=====================================================================*/

/*.flatpickr*/

.flatpickr-months{padding: var(--space-s) var(--space-base);}
.flatpickr-day{line-height: 40px;}
span.flatpickr-weekday{padding: var(--space-none) var(--space-xs);}
.flatpickr-calendar.open{z-index: 100;}

/*========================outsystem UI overwrite============================*/
.tablet .columns.gutter-base.tablet-break-all:only-child > .columns-item:not(:last-child){margin-bottom: var(--space-none);}
/*=====================================================================*/

/*checkbox*/
[data-checkbox]{width: 18px;height: 14px;}
[data-checkbox]:before, .table [data-checkbox]:before{width: 15px;height: 15px;border: var(--border-size-s) solid var(--color-neutral-8) !important;}
[data-checkbox][disabled]:before,[data-checkbox][disabled]:checked:before{background-color: #ababab !important;border: var(--border-size-s) solid #ababab !important;}
[data-checkbox][disabled]:checked:after{border-color: var(--color-neutral-0) !important;}
[data-checkbox]:checked:after{width: 8px;top: 4px;left: 4px;}
[data-checkbox]:checked:before{border: var(--border-size-s) solid var(--color-primary) !important;}

.tablet [data-checkbox]:before, .phone [data-checkbox]:before{width: 22px;height: 22px;}
.tablet [data-checkbox], .phone [data-checkbox]{width: 22px;height: 22px;}
.tablet [data-checkbox]:checked:after, .phone [data-checkbox]:checked:after{left: 6px;top: 6px;}

/*button*/
.btn{padding:var(--space-none) var(--space-s);font-size: var(--font-size-s);height: 32px;letter-spacing: 0.05rem;}
.btn span{height: 14px;}
.btn + .btn {margin-left: var(--space-base);}
.btn.btn-small{height: 26px; line-height: 26px; font-size:var(--font-size-xs);} /*height: 30px;*/
.tablet .btn, .phone .btn {font-size: var(--font-size-s);height: 35px;}
.tablet .btn.btn-small, .phone .btn.btn-small{height: 30px;}

/*switch button*/
[data-switch]{height: 20px;}
[data-switch]:empty:after{width: 20px;height: 20px;top: 1px;}
[data-switch]:empty:before{width: 42px; height: 20px;}

/*pagination button*/
.pagination-button.is--active{border-color:#000000;color: #000000; }
.tablet .pagination-button,.phone .pagination-button{width: 32px;height: 32px;font-size: var(--font-size-s);}

.border-right-s {border-right: var(--border-size-s) solid #adb5bd!important;}
.is-rtl .border-right-s {border-left: var(--border-size-s) solid #adb5bd;border-right: 0px!important;}

.border-color{border-color: var(--color-primary);}
.text-white{color:#ffffff !important}
.card{border-radius: 7px;/*box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;*/}
.card.cardWrapper{padding:var(--space-none);}
/*Main body Wrapper*/
.mainWrapper{padding: 0 0 0 61px; }
.phone .mainWrapper, .tablet .mainWrapper{padding: 0;}
.is-rtl.phone .mainWrapper, .is-rtl.tablet .mainWrapper{padding: 0;}
.content{min-height: calc(100vh - 75px);}
.layout .main-content.ThemeGrid_Container{ padding: var(--space-base) var(--space-m) var(--space-m) var(--space-m);}
/* ================================================================ */
/*         Page Layout - Header                                     */
/* ================================================================ */
.userWrapper{border-radius: 5px;
max-height: 76.5vh;
overflow-y: auto;
padding-bottom: 0px;
padding-left: 0.5vw;
padding-right: 0.5vw;
padding-top: 0px;}
.split-screen-wrapper .split-right {
    max-height: 92vh;
}
.header{
    height: 75px; box-shadow: rgba(33,35,38, 0.20) 0px 10px 10px -10px;
}

.formQR .form-control[data-input]{color:var(--color-maroon); text-decoration: underline;font-weight: 600;cursor:pointer;}


.layout-top .header-content{height: 75px;}
.MOHLogo{display: flex; align-items: center;height:75px; }
.phone .MOHLogo, .tablet .MOHLogo{height: 70px;}
.application-name{ display: flex; flex-direction: column; margin:0 var(--space-xs);height: 75px; justify-content: center;}
.applicationNum{border-left: 4px solid var(--color-primary); margin: var(--space-s) 0; font-size: var(--font-size-h4); padding: 0 var(--space-xs); color: #000000;height: 24px;
    display: block;line-height: 27px;}
.sampleIDHeading{color: #000000;font-weight: 600; font-size: var(--font-size-base);  display: flex; justify-content: flex-start;    border-left: 4px solid #26ad9e;background: rgba(38,173,158,0.15);
    padding: 0 5px; margin-bottom: 7px;}
.is-rtl .sampleIDHeading{    border-right: 4px solid #26ad9e;border-left: none;}        
.is-rtl .applicationNum{border-right: 4px solid var(--color-primary); border-left:none}
.mohLogoImg{height:70px;width:auto; /*border-right: 1px solid var(--color-neutral-5); */ padding:0 var(--space-s);}
/*.phone .mohLogoImg, .tablet .mohLogoImg{height: 43px;}*/
.systemNameAR, .systemNameEN{color:var(--color-red); font-weight: bold;}
.systemNameEN{font-size: 11px; width:120px; line-height: 12px;}

.AppNameMOH{ font-size: 0.85rem; font-weight: 600;}
.desktop .header-content > [data-block*="ApplicationLogo"] .application-name {
    display: none;
}
.phone .application-name .heading4, .tablet .application-name .heading4{font-size: 1rem;}

.header-content > [data-block*="ApplicationLogo"] .application-name {
    margin-right: var(--space-m);
}
.header .app-logo{max-width: 200px;}
.header .ThemeGrid_Container, .main-content ThemeGrid_Container{padding: var(--space-none) 0 ; max-width: 99%;}
/* ================================================================ */
/*         Page Layout - Menu                                       */
/* ================================================================ */
/* style as OS UI the app link in the side bar for layout external portal */
.tablet .header-logo, .phone .header-logo{margin: var(--space-s); border-radius: 5px;height: 70px;display: flex;padding: var(--space-none) var(--space-s);}
.tablet .app-login-info, .phone .app-login-info{padding: var(--space-base) var(--space-xs);}
.tablet .half-width-vw{width: 100%;}
.tablet .dropdown-container:after, .phone .dropdown-container:after {
    top: 10px;
}

/*.desktop .layout:not(.layout-side) .app-menu-links{display: none;}*/
.phone .app-menu-links, .tablet .app-menu-links{order: 3;}
.phone .app-menu-links a, .tablet .app-menu-links a{padding: var(--space-s) var(--space-base);}
.phone .half-width-vw{width: 100%;}
.layout .app-menu-content{ justify-content: space-between;}
.phone .app-menu-content, .tablet .app-menu-content{ background-color:var(--color-Secondary);}
.tablet .form-control[data-input], .phone .form-control[data-input]{font-size: var(--font-size-s);}
.phone .layout:not(.layout-native) .btn{margin-right: 0;}

/* ================================================================ */
/*         Page Layout - Login Popup                                */
/* ================================================================ */
.icon-close {
    cursor: pointer;
}
.circle-icon{
    align-items: center;
    background: #ffffff;
    /*background: linear-gradient(to bottom right, #274dd7f5 28%, #187de5 75%);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;*/
    border-radius: 50%;
    border: 2px solid var(--color-primary);    
    color: #239177;
    display: flex;
    height: 2vw;
    justify-content: center;
    width: 2vw;
}
.circle-icon .icon{font-size: 1rem;}


/* ================================================================ */
/*         Page Layout - Content                                    */
/* ================================================================ */

/* footer's background color equals to header for layout external portal */
.footer {
    background-color: transparent;
    font-size: var(--font-size-xs);
    position: absolute;
    bottom: 0;
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;
    height: 28px;
}

.footer-built-with-theme-editor {
    color: var(--color-neutral-8);
}

/* style to footer links for layout external portal */
.footer-built-with-theme-editor a,
.footer-built-with-theme-editor a:visited {
    color: var(--color-neutral-8);
    text-decoration: underline;
    text-decoration-color: var(--color-neutral-8);
}

/* Heading */
.pageHeading{ font-size:var(--font-size-h5);color:var(--color-text) ; font-weight: 500;} 
.sectionHeading{color:#26AD9E;
    padding-bottom: 5px;
    font-weight: 600;
    display: table;
    justify-content: flex-start;
    margin-top: -32px;
    background-color: white;
    padding: 10px;
    font-size: var(--font-size-base);
    letter-spacing: 0.03rem;}
.bg-card .sectionHeading{border-radius: 5px;}
.subHeading{ color:var(--color-Secondary);padding-bottom: 5px; font-weight: 600; font-size: var(--font-size-h6); display: flex; justify-content: flex-start;}   

/*Alert Message*/
.alert .alert-icon{/*color:var(--color-info);*/font-size:1.1rem;margin-right: var(--space-xs);margin-left: var(--space-xs);}
.alert{padding: var(--space-s);}
.alert .alert-message{font-size: var(--font-size-xs); }
.alert.alert-info .alert-icon{color:var(--color-info);}
.alert.alert-success .alert-icon{color:var(--color-success);}
.alert.alert-info .alert-message{color:var(--color-info); text-align: left;padding:var(--space-none) var(--space-s);}
.alert.alert-success .alert-message{color:var(--color-success); text-align: left;padding:var(--space-none) var(--space-s);}
.is-rtl .alert.alert-info .alert-message{text-align: right;}
.alert-info{background-color: #F2F8FC; border:1px solid var(--color-info)}
.alert-success{background-color: #eff8f0; border:1px solid var(--color-success)}
.alert.alert-error .alert-message{font-size: var(--font-size-xs);color:var(--color-error)}
.alert-error{background-color: transparent; /*border:2px solid var(--color-error)*/}
.alert-warning {background-color: #fdf1c4;border:1px solid #cba950;color:var(--color-yellow-darkest);}
.alert.alert-warning .alert-message{padding:var(--space-none) var(--space-s);}
.alert.alert-warning .alert-icon{color:var(--color-yellow-darkest);font-size: 1.1rem;margin-right: var(--space-xs);margin-left: var(--space-xs);}

/*.success-msg{font-size: 0.9rem;border-left: 4px solid #29823B;color: #29823B;background-color: #e8f5d3;}
.info-msg{color: #017aad;border: 1px solid #017aad;font-size: 0.85rem;}
.error-msg {color: #D8000C;font-size: 0.9rem;background-color: #eed3d7;border-left: 4px solid #D8000C;}
.is-rtl .success-msg{border-right: 4px solid #29823B;}
.is-rtl .error-msg{border-right: 4px solid #D8000C;}*/

/*Application SubType*/
.TitleSubtype{background-color: rgba(215,234,249,.3);color:#2379b7;}
.Img-Subtype{width: 40px;height:40px; background-color:var(--color-Primary);color: #fff; padding:5px;border: 3px solid #fff;margin-left: -18px;margin-right: 10px;border-radius: 50%;display: flex;align-items: center; justify-content: center;font-size: 1rem;}
.Icon-Subtype{color: var(--color-neutral-8);}
.Item-subtype{border: 1px solid rgba(215,234,249,.4);}
.Item-subtype:hover{background-color: rgba(215,234,249,.25)}
.is-rtl .Icon-Subtype{ transform: rotate(180deg);}
.Selected-Item-subtype {background-color: rgba(215,234,249,.15); border: 1px dashed #2379b7 !important; color:#2379b7 !important;}

/*=========================================*/
/*user info in header*/
/*=========================================*/
[data-popover].popover-position-bottom > .popover-bottom:hover{background-color: var(--color-neutral-0)!important;}
.UserPopover [data-popover].popover-position-bottom > .popover-bottom {max-width: initial;width: 160px!important; top: 51px;transform: translateX(39%)!important;padding: var(--space-base);display: flex;
    flex-direction: column;align-items: flex-start;}
.SupportPopover [data-popover].popover-position-bottom > .popover-bottom {max-width: initial;width: 175px!important; top: 46px;transform: translateX(40%)!important;padding: var(--space-base);}
.SupportPopover .SupportIcon{color:var(--color-beige-dark);background-color: #faf7f3;padding: 8px;border-radius: 50%;font-size: 1rem;width: 32px;height: 32px;}
.SupportPopover .bghover:hover{background-color: #faf7f3;border-radius: 5px;}
.SupportPopover .bghover:hover a{text-decoration:none;}
.SupportPopover .bghover:hover a .fas6{background-color: #ffffff}
.login-button{display: flex;align-items:center;padding: 5px; color:var(--color-neutral-8) }
.login-button:hover{background-color: var(--color-Secondary); border-radius: 7px; padding: 5px; text-decoration: none;}
.login-icon{border-radius: 50%; border: 1px solid var(--color-neutral-8); padding: 5px; height: 25px;width:25px; display: flex; align-items: center;justify-content: center; color:var(--color-neutral-8)}
.UserInfoLangWrapper{ display: flex; justify-content: flex-end; align-items: center; height: 75px;}
.UserInfoLangWrapper a {text-decoration: none;}
.user-icon{border-radius: 50%; background-color:rgba(20, 64, 102, 0.1); color: var(--color-Secondary); padding: 5px; height: 30px;width:30px; display: flex; justify-content: center;align-items: center;}
.username {font-size: 0.8rem;}
[data-popover].popover-position-bottom.popover-expanded [data-icon].user-icon{
   -webkit-transform:none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform:none;
    transform: none; 
}
.user-info .logoutMenu{display: flex;}
/*.phone .UserInfoLangWrapper, .tablet .UserInfoLangWrapper{order:2; justify-content: space-between;}*/
/*=========================================*/
/*language switch*/
/*=========================================*/
.langSwitch.button-group{border-radius: 25px; height: 26px;  border: var(--border-size-s) solid var(--color-Secondary);}
.langSwitch .button-group-item{color: var(--color-neutral-10); height: 24px;padding: var(--space-none) var(--space-xs);font-size:var(--font-size-label);width: 27px;border: none; border-radius: 25px !important;}/*#a4e7d7*/
.langSwitch .button-group-item.button-group-selected-item{background-color:var(--color-Secondary);color:var(--color-neutral-0);border-radius: 25px;border: var(--border-size-none);line-height: 26px;}/*bgcolor: #a4e7d7;color:#165d4d*/
.is-rtl .langSwitch #b5-English{line-height: 25px;}
/*.is-ltr .langSwitch .button-group-item:last-child{}*/
.is-rtl .langSwitch .button-group-item{line-height: 28px;}
.is-rtl .langSwitch .button-group-item.button-group-selected-item {
    line-height: 22px;
}
/*.is-rtl .button-group-item:not(:first-child){border-left: var(--border-size-s) solid #c92a2a;}*/

/* ================================================================ */
/*         Widgets                                                  */
/* ================================================================ */
/* Widgets - Popover */
[data-popover].popover-position-bottom.popover-expanded [data-icon] {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
[data-popover] > .popover-bottom{padding:var(--space-s) ;}
[data-popover].popover-position-bottom  > .popover-bottom {
    top: 30px;
    transform: translateX(91%)!important;
}

[data-popover].popover-position-bottom  > .popover-bottom:hover {
    background-color: var(--color-neutral-2);
}

/* Widgets - Popup */
.popup-backdrop {
    background-color: rgba(0, 0, 0, .7);
}

/* ================================================================ */
/*         Useful classes                                           */
/* ================================================================ */
.text-no-wrap {
    white-space: nowrap;
}
.content-top-actions, .content-top-title {margin-bottom: var(--space-s);}

/*=======================================================================*/
/*         Form UI                                                       */
/*=======================================================================*/

.formUIContainer{border: 1px dashed var(--color-quaternary);
    padding: 10px;
    border-radius: 7px;
    margin: var(--space-m) var(--space-s) var(--space-l) var(--space-s) ;}

.formUIContainer.borderZero{ border:none} 
.form-control[data-input]{height: 30px;padding: var(--space-none) var(--space-s);}
.label{ font-size: var(--font-size-xs);display: flex;align-items: center;height: 30px; color:#333;font-weight: 600;line-height: 16px;}
.label2{ font-size: var(--font-size-s);height: 30px; color: var(--color-neutral-10);}
.LabelControlUI{display: flex; margin: var(--space-xs)  var(--space-s);}
.LabelControlUI label{display:flex; align-items:baseline}
.LabelControlUI label[data-label].mandatory:after{line-height: 18px;height: 10px;}
.LabelControlUI .dropdown-container > select.dropdown-display{height: 30px;padding: var(--space-none) var(--space-s);line-height: 30px;font-size: var(--font-size-xs);}
.dropdown-container > select.dropdown-display{height: 36px;padding: var(--space-none) var(--space-s);font-size: var(--font-size-xs);}
/*.dropdown-container:after{top:11px} */
.LabelControlUI .dropdown-container:after{top:9px} 
.LabelControlUI .vscomp-toggle-button{min-height:30px !important}
.LabelControlUI .vscomp-option-text{font-size: small;}
.form-control[data-input][disabled], select.dropdown-display[disabled]{font-weight: 500;color: #333;background-color: #f8f8f8;border:0px;height: 30px;} 
.form-control[data-textarea][disabled]{font-weight: 500;color: #333;background-color: #f8f8f8;border:0px;}
.buttonWrapper{ display: flex; justify-content: center;margin-top:var(--space-m)}
.phone .buttonWrapper, .tablet .buttonWrapper{ margin: var(--space-base);}
.content-top-actions .buttonWrapper{ justify-content: flex-end;}
.tablet .form-control[data-input], .phone .form-control[data-input]{height: 30px;}
.form-control[data-input], .form-control[data-textarea],.dropdown-container > select.dropdown-display, .osui-dropdown-tags .vscomp-wrapper .vscomp-toggle-button .vscomp-value{font-size: var(--font-size-xs); font-weight: 500;}
.form-control[data-textarea]{ padding:var(--space-s)}
.form input[data-input]{margin-bottom: var(--space-base);}
[data-label].mandatory:after{ font-size: var(--font-size-h5)}
[data-label].mandatory.rmvMandatory:after{color:#ffffff !important}
.osui-dropdown-tags.not-valid > .vscomp-wrapper > .vscomp-toggle-button{border: var(--border-size-s) solid var(--color-error); border-radius: var(--border-radius-soft);}
.osui-dropdown-tags[disabled] .vscomp-toggle-button .vscomp-clear-button, .osui-dropdown-tags[disabled] .vscomp-toggle-button:after{display:none}
.vscomp-wrapper .vscomp-value{padding-bottom: 3px;color: var(--color-neutral-10);}
.vscomp-toggle-button:after{font-size: 14px; font-weight: bold;right: var(--space-s); }
.is-rtl .vscomp-wrapper.has-value .vscomp-value {margin-left: var(--space-m);margin-right: var(--space-none);}
.is-rtl .vscomp-wrapper .checkbox-icon {margin-left: var(--space-s);margin-right: var(--space-none);}
.is-rtl .vscomp-wrapper.multiple .vscomp-search-container {padding-right: var(--space-base);padding-left:0;}
.is-rtl .vscomp-toggle-button:after{left:var(--space-s);right: auto;}
.is-rtl .vscomp-wrapper.show-value-as-tags .vscomp-toggle-button{padding: var(--space-xs) var(--space-base) var(--space-none) var(--space-xxl);}
.is-rtl .vscomp-wrapper.multiple .vscomp-option.selected .checkbox-icon:after{transform: rotate(45deg) translate(-3px, 2px);}
.is-rtl .vscomp-wrapper:not(.text-direction-rtl).has-value .vscomp-clear-button {left: var(--space-xl);right: auto;}
.is-rtl .vscomp-wrapper.multiple .vscomp-option .vscomp-option-text{text-align: right;}
.radio-button{width: 20px;height: 20px;}
.radio-group label{font-weight: 500; font-size:var(--font-size-s);}
.radio-button-d-flex div{display: flex;}
.radio-button-d-flex div > div[data-radio-button]{margin:0 var(--space-s)}
.radio-button:disabled:checked:before{ background-color: #ffffff !important;border: 6px solid #ababab !important;}
/*.radio-button:disabled:before{ background-color: #ababab !important}*/
span.input-text-center input{text-align: center;}
.btn.btn-link{border-radius: var(--border-radius-rounded); border-color: var(--color-primary); padding: var(--space-none) var(--space-s); height: 26px; color: var(--color-primary); }
.btn.btn-link:hover{text-decoration: none;}
.text-primary-link{color: maroon}
a.btn{text-decoration: none; }
/*===================breadcrum================================*/
.breadcrumbs-item a {color:#144066; text-decoration: underline;}
.content-breadcrumbs{ font-size:var(--font-size-xs);margin-bottom:var(--space-s) ;/*padding: 3px 10px; box-shadow: 0 1px 5px 0 rgb(21 24 26 / 10%);background-color: #ffffff;*/}

/*===================floating-button================================*/
.floating-button{background-color: var(--color-Secondary);}
.floating-actions-item-button{background-color: var(--color-primary);color: #ffffff;}
.Help-floatingUI .floating-button{height:40px; width:40px}
/*.Help-floatingUI .floating-button .icon{font-size: 1rem;}*/
.floating-actions-wrapper.is--open .floating-button{-webkit-transform: rotate(0deg) translateZ(0);transform: rotate(0deg) translateZ(0);background: #1d6091;color: #fff;}
.Help-floatingUI .floating-items{padding: 0; width:162px}
.Help-floatingUI .floating-items a{color: var(--color-primary); width: 100%;}
.Help-floatingUI .floating-actions-item {margin-bottom: var(--space-s);background-color: white;border-radius: 25px;  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);justify-content: space-between;}
.Help-floatingUI .floating-actions-item-label{margin:0 var(--space-s) }
.Help-floatingUI .floating-items .floating-actions-item-button:hover{background-color:var(--color-Tertiary);}
.Help-floatingUI .floating-items .floating-actions-item-button{font-size:0.8rem; margin:0}
.Help-floatingUI .floating-items .floating-actions-item-button:hover .fas6{color:var(--color-primary)}
.surveylink{ position: fixed;left: auto;right: 0; margin: 0 var(--space-l) !important; height: 40px !important; width: 40px  !important; bottom: 80px;}
.is-rtl .surveylink{ position: fixed;left: 0;right: auto; margin: 0 var(--space-l) !important; height: 40px !important; width: 40px  !important; bottom: 80px;}
.surveylink .fa6-stack{display: flex; align-items: center;}
.surveylink i.fa6-stack-1x{font-size: var(--font-size-h4); margin-top: -2px;}
.surveylink i.fa6-stack-2x{font-size: 10px;   margin-top: 2px;}
/*=========================wizard=================================*/
.Wizard .wizard-wrapper{ margin-left: 13vw;}
.wizard-wrapper{ margin-bottom: 5px;}
.is-rtl .Wizard .wizard-wrapper{margin-right: 13vw; margin-left:0}
.phone .wizard-wrapper, .tablet .wizard-wrapper, .phone.is-rtl .wizard-wrapper, .tablet.is-rtl .wizard-wrapper{margin:0}
.wizard-item-icon:empty{height: 15px;width:15px;border-width: 2px;}
.wizard-item-icon-wrapper:before{width: calc(100% - 10px);right: calc(50% + 6px);}
.wizard-wrapper-item .wizard-item-label{font-size: var(--font-size-s);}
.wizard-wrapper-item.active .wizard-item-icon{border: var(--color-Secondary) 2px solid; color: var(--color-Secondary);background-color: var(--color-background-body);}
.wizard-wrapper-item.active .wizard-item-icon .icon, .wizard-wrapper-item.active .wizard-item-icon .fa-stack,.wizard-wrapper-item .wizard-item-icon .icon, .wizard-wrapper-item .wizard-item-icon .fa-stack{font-size: 1rem; line-height: 29px;}
.wizard-wrapper-item.active .wizard-item-label{color: var(--color-Secondary);}
.wizard-wrapper-item .wizard-item-label, .wizard-wrapper-item .wizard-item-icon {font-weight: bold;}
.wizard-wrapper-item.past .wizard-item-label{color: var(--color-primary);}
.wizard-item-icon{width:40px; height:40px;font-size: 1.1rem; background-color: var(--color-background-body);}
.wizard-item-icon .fa-stack .fa-stack-2x{top: 3px;font-size: 1.7em;}
.wizard-item-icon .fa-stack .fa-stack-1x{top: 3px;}
.wizard-wrapper [data-block*=WizardItem] .wizard-wrapper-item{cursor: initial!important;}
.wizard-wrapper-item.past .wizard-item-icon{background-color: var(--color-quaternary); border-color: var(--color-quaternary);}
.wizard-wrapper-item.past .wizard-item-label{color: var(--color-quaternary);}
.wizard-wrapper-item.active .wizard-item-icon-wrapper:before {background-color: var(--color-quaternary);}
.wizard-wrapper-item.past .wizard-item-icon-wrapper:before{background-color: var(--color-quaternary);}
/*=======================tab UI========================================*/
.TabHeading{ font-size:var(--font-size-h5); color:#000000; display: block;padding: var(--space-s) var(--space-s);}

/* tab-vertical*/
.is-rtl .osui-tabs--is-vertical.osui-tabs--is-left .osui-tabs__content{border-right:0 !important; border-left:0 !important}
.osui-tabs--is-vertical.osui-tabs--is-left .osui-tabs__content{border-left: 0 !important;border-right: 0 !important;}
.is-rtl .osui-tabs--is-vertical.osui-tabs--is-left > .osui-tabs__header .osui-tabs__header-item{border-radius: 0px 25px 25px 0px;}
.osui-tabs--is-vertical.osui-tabs--is-left > .osui-tabs__header .osui-tabs__header-item{height:52px; border-bottom: 4px solid var(--color-background-body);border-radius: 25px 0 0 25px;background-color: #fff;padding: var(--space-xs) var(--space-base) var(--space-xs) 0;}
.osui-tabs--is-vertical.osui-tabs--is-left > .osui-tabs__header .osui-tabs__header-item[disabled] .icon{color:#92abc2}
.osui-tabs--is-vertical .osui-tabs__header-item.osui-tabs--is-active{background-color:var(--color-Primary)!important;}
.osui-tabs--is-vertical > .osui-tabs__header > .osui-tabs__header__indicator{width: 0;}
.osui-tabs--is-vertical .osui-tabs__header-item.osui-tabs--is-active .icon {color:var(--color-Primary)!important;}

/* tab-horizontal*/
.osui-tabs--is-horizontal > .osui-tabs__header{background-color:#ebf4fc; padding-top: 10px; padding-left: 10px;width: 100%;}
.osui-tabs--is-horizontal > .osui-tabs__header .osui-tabs__header-item{border-bottom:none;border-radius: 7px 7px 0 0;}
.osui-tabs--is-horizontal > .osui-tabs__header .osui-tabs__header-item, .osui-tabs--is-horizontal > .osui-tabs__header  .osui-tabs__header-item[disabled], .osui-tabs--is-horizontal > .osui-tabs__header  .osui-tabs__header-item[disabled]:hover{background-color: #cee4f4; border: 2px solid #ebf4fc;border-bottom:none;    color: var(--color-primary);}
.osui-tabs--is-horizontal > .osui-tabs__header .osui-tabs__header-item.osui-tabs--is-active .icon{background-color: #e7ecef;color: var(--color-Secondary)!important;}
.osui-tabs--is-horizontal > .osui-tabs__header .osui-tabs__header-item.osui-tabs--is-active{background-color: #ffffff!important; color: var(--color-Secondary)!important;font-weight: 500;}
.osui-tabs--is-horizontal > .osui-tabs__header > .osui-tabs__header__indicator{display: none;}
.osui-tabs--is-horizontal > .osui-tabs__header .osui-tabs__header-item .icon {background-color:var(--color-neutral-2)}
.osui-tabs--is-horizontal .osui-tabs__content{border-top:none;}
.osui-tabs--is-horizontal .osui-tabs__content-item{padding: 0;}
.osui-tabs--is-horizontal .osui-tabs__content-item .card{border-radius: 0 0 7px 7px;border-top: var(--border-size-s) solid var(--color-neutral-0);}
.phone .osui-tabs--is-horizontal > .osui-tabs__header .osui-tabs__header-item {padding: var(--space-s); text-align: center;}
.is-rtl .osui-accordion-item__title{flex-direction: row-reverse;}
.osui-accordion-item__icon{color: var(--color-Secondary);}
.osui-accordion-item, .osui-accordion :first-child:not(.list) > .osui-accordion-item{ border-radius: 0; border:none}
.osui-accordion-item__title{margin-bottom: var(--space-s); color: var(--color-Secondary); padding:10px; border-radius: 0;font-size: 1rem; background:rgba(215,234,249,.5);font-weight: 500 !important;}
.osui-accordion-item--is-open::after{border:none}
.osui-accordion-item__content{padding: 0;border:none; border-radius: 5px;}
.osui-tabs__header-item{font-size: var(--font-size-s) !important;color:var(--color-neutral-9);}
.osui-tabs__header-item.osui-tabs--is-active{ font-size: var(--font-size-s) !important; background-color:var(--color-primary) ; color:#fff!important}
.osui-tabs__header-item.osui-tabs--is-active .icon{ color:var(--color-primary); background-color:#fff}
.osui-tabs__header-item .icon{color:var(--color-primary); background-color: var(--color-neutral-2);padding: 8px; border-radius: 50%;font-size: 1rem;width: 32px;
    height: 32px; display: flex;  align-items: center; justify-content: center;}
.tablet .osui-tabs--is-horizontal > .osui-tabs__header .osui-tabs__header-item{text-align:center;padding: var(--space-s) var(--space-s);}
.tablet .osui-tabs--is-horizontal > .osui-tabs__header .osui-tabs__header-item .icon,.phone .osui-tabs--is-horizontal > .osui-tabs__header .osui-tabs__header-item .icon{display:none}
.osui-tabs--is-vertical .osui-tabs__header{width: 13vw; margin-top: var(--space-base);}
.osui-tabs--is-vertical .osui-tabs__content{width:80.5vw}
.osui-tabs--is-vertical .osui-tabs__content-item { padding: var(--space-s);}
.osui-tabs--is-vertical .osui-tabs--is-horizontal .osui-tabs__content{width:auto}
.osui-tabs--is-vertical .osui-tabs--is-horizontal .osui-tabs__header{ width: auto; margin-top: 0;}
.phone .osui-tabs--is-vertical .osui-tabs--is-horizontal .osui-tabs__header .osui-tabs__header-item {padding: var(--space-s); text-align: center;}
.tablet .osui-tabs--is-vertical .osui-tabs--is-horizontal .osui-tabs__header .osui-tabs__header-item{text-align:center;padding: var(--space-s) var(--space-s);}
.tablet .osui-tabs--is-vertical .osui-tabs--is-horizontal .osui-tabs__header .osui-tabs__header-item .icon,.phone .osui-tabs--is-vertical .osui-tabs--is-horizontal  .osui-tabs__header .osui-tabs__header-item .icon{display:none}
.osui-tabs--is-vertical .osui-tabs--is-horizontal .osui-tabs__header{background-color:#ebf4fc; padding-top: 10px; padding-left: 10px;width: 100%;}
.osui-tabs--is-vertical .osui-tabs--is-horizontal .osui-tabs__header .osui-tabs__header-item{border-bottom:none;border-radius: 7px 7px 0 0;}
.osui-tabs--is-vertical .osui-tabs--is-horizontal .osui-tabs__header .osui-tabs__header-item, .osui-tabs--is-vertical .osui-tabs--is-horizontal  .osui-tabs__header  .osui-tabs__header-item[disabled], .osui-tabs--is-vertical .osui-tabs--is-horizontal  .osui-tabs__header  .osui-tabs__header-item[disabled]:hover{background-color: #cee4f4; border: 2px solid #ebf4fc;border-bottom:none;    color: var(--color-primary); }
.osui-tabs--is-vertical .osui-tabs--is-horizontal .osui-tabs__header .osui-tabs__header-item.osui-tabs--is-active .icon{background-color: #e7ecef;color: var(--color-Secondary);}
.osui-tabs--is-vertical .osui-tabs--is-horizontal .osui-tabs__header .osui-tabs__header-item.osui-tabs--is-active{background-color: #ffffff; color: var(--color-Secondary)!important;}
.osui-tabs--is-vertical .osui-tabs--is-horizontal .osui-tabs__header  .osui-tabs__header__indicator{display: none;}
.osui-tabs--is-vertical .osui-tabs--is-horizontal .osui-tabs__header .osui-tabs__header-item .icon {background-color:var(--color-neutral-2)}
.osui-accordion-item__title__placeholder{font-family: 'bodyFontSemiBold'; font-size: var(--font-size-h6);}
.osui-tabs__content > .ph > .OSBlockWidget {   margin-bottom: 1.5rem; }


/*========================table=====================*/
.table-header th{font-size: var(--font-size-s); height: 40px; color:#000; border-bottom:2px solid #73C4CC}/*background-color: #cfe7e2; border-color: #70a79b;
    color: #40796d;*/
.table-row td:first-child{ font-weight: bold;}
.table-row td {font-size: var(--font-size-xs);font-weight: normal;color: #000000;height: 40px;}

.table-row td a {color: #2477B4;font-weight: 500;padding: 2px 3px;font-size: var(--font-size-xs);}
.table-row td[data-header="Action"] a:hover{background-color: #ffffff; text-decoration: none;border-radius: 5px;}
.table-row td[data-header="Application Number"] a span {color: #2477B4!important;}
.table-row td i {font-size: 0.9rem;}
.table-row td i.fa-asterisk {font-size:0.45rem;font-weight: normal;}
.column-freeze{position: sticky; right:0; top:0; z-index: 1;}
.is-rtl .column-freeze{position: sticky; left:0; top:0; z-index: 1;}
/*
.table-row td[data-header="Action"] a {color: var(--color-maroon);font-weight: 500;}
.table-row td[data-header="Action"] i{font-size: 0.9rem;}
*/
.table-row td a span{color: #2477B4;font-weight: 500;}
.pagination-counter{margin: 0 var(--space-base);display: flex;}
.pagination-counter span{margin:0 2px;}
.action-column{ width:205px}
/*======userdashboard (add user) scroll issue====================*/

.background-userdashboard-image{ background: url('../img/MFS_Theme_Lib.abstractcover.jpg?DN0U1wOFr25u2F2VTuECgQ') no-repeat;}
/*photo upload*/
.photo-upload{ height:auto; width:150px;border: 1px solid var(--color-neutral-5); padding: 10px; font-size: var(--font-size-s);}
[data-upload] [data-icon]{margin:0}
[data-upload].upload-image-withoverlay .change-image{color: var(--color-neutral-10);font-size:  var(--font-size-s);}
[data-upload].upload-image-withoverlay .change-image .icon{color: var(--color-neutral-10)}

.upload{ padding: 0 !important;width: 150px;align-items: center;display: flex;text-align: center;justify-content: center;font-size: var(--font-size-s);}
.is-rtl .upload {overflow: hidden;}
.upload-image-withoverlay{padding: 0px;border-style: solid;border-width: 0px;margin-bottom: 0px!important;}
.upload-wrapper{border: 0px !important;}
.left-profile-card,.right-detail-card  {border: 1px solid var(--color-neutral-5); background-color: #ffffff;}


/*Certificate Issuance*/
.left-Heading{color:#cc181c;text-align: center;}
.borderDashed{border: 1px dashed #000;padding: 10px;border-radius: 7px;}
.borderHCertificate{border-bottom: 3px solid #1AD1D1;}
.borderBrown{border-bottom:4px solid #cbbdaf;}
.borderPrimary{border:2px solid #2884C6;border-radius: 10px;}
.borderSecondary{border:2px solid #144066;border-radius: 10px;}
.borderRed{border:2px solid #cc181c;border-radius: 10px;}
.borderBlack{border:1px solid #000;border-radius: 10px; padding: 1rem 1rem 0.3rem 1rem;}
.labelRight {font-size:var(--font-size-s) ;font-weight: 600;text-align: right; display:flex;align-items: center;height: 30px;color: #000;justify-content: flex-end;}  /* will be remove*/

/*Certificate*/
.containerCertificate .columns.gutter-base{margin: auto!important;}  
.labelRight_Ar {font-size:var(--font-size-s) ;font-weight: 600;text-align: right; display:flex;align-items:flex-start;color: #000;justify-content: flex-end;line-height: 16px; padding-bottom: 5px;}   
.labelLeft_En{font-size: var(--font-size-s);font-weight: 600;display: flex; align-items: flex-start; color: #000;line-height: 16px; padding-bottom: 5px;}
.labelCenter {font-size: var(--font-size-s);display: flex;align-items: flex-start;color: #000;justify-content: center; text-align:center;line-height: 16px;  padding-bottom: 5px;} 
.topHeadingAR{font-size:var(--font-size-h4);font-family: 'ArabicHeading';}
.topHeadingEn{font-size:var(--font-size-h6);font-family: 'EnglishHeading';font-weight: bold; }
.img_certificate{width: 200px; height: 200px;}
.topHeadingEn_Logo{font-size:var(--font-size-h6);font-weight: bold;}
.topHeadingAr_Logo{font-size:var(--font-size-h6);font-weight: bold;}

.phone .topHeadingEn_Logo{font-size: var(--font-size-12)}
.phone .topHeadingAr_Logo{font-size: var(--font-size-12)}

.phone .labelLeft_En{font-size: var(--font-size-label)}
.phone .labelRight_Ar{font-size: var(--font-size-label)}
.phone .labelCenter{font-size: var(--font-size-label)}

/*Certificate responsive*/
.content-three-col{display:flex;justify-content: space-between;margin-bottom:5px;}
.phone  .content-three-col{flex-flow: wrap;}
.width-Cert-col-30{width:30%}
.width-Cert-col-60{width:60%;}

.phone .width-Cert-col-60{
    width: 100%!important;
    display: flex;
    justify-content: center;
    background: #f8f8f8;
}
.phone .width-Cert-col-30{
    width: 50%;
    order: -1;
    display: inline-block;
}

/*===================phone responsive==============================*/
.phone .columns.gutter-base.phone-break-all:only-child > .columns-item:not(:last-child), .phone .layout:not(.layout-native) [class*=ThemeGrid_Width]:not(.no-responsive){ margin-bottom: 0;}
.phone .LabelControlUI, .phone .buttonWrapper{ flex-direction: column;}

.validationMsg-Fix{position: relative;margin-bottom: 1rem;}
.validationMsg-Fix .validation-message{position: absolute; width: 300px; margin: 5px 0;}
span.validation-message{display: block;}
.is-rtl span.validation-message{display: block; text-align: right;}

/*============================RTL Support ==================================*/
.is-rtl .mainWrapper{padding:0px 61px 0 0;}
.is-rtl .Img-Subtype{margin-right: -18px;  margin-left: 10px;}
.is-rtl [data-popover] > .popover-bottom{transform: translateX(0)!important;margin-right: 0;}
.is-rtl .buttonWrapper .fa-chevron-left, .is-rtl .buttonWrapper .fa-chevron-right{transform: scalex(-1)}
.is-rtl input[type=time], .is-rtl input[type=date], .is-rtl input[type=datetime], .is-rtl input[type=datetime-local], .is-rtl input[type=time], .is-rtl input[type=time]:empty{flex-direction: row-reverse;
  text-align: right; }
.is-rtl .popup-content .card-title, .is-rtl .popup-content .card-content{text-align: right;}
.is-rtl .table-header th {text-align: right;}
.is-rtl .LabelControlUI label {text-align: right;height:30px;}
.is-rtl .label {font-size: var(--font-size-xs);}
.is-rtl.phone .table:not(.table-no-responsive) td, .is-rtl.tablet .table:not(.table-no-responsive) td{text-align: right!important;}
.is-rtl .btn + .btn{margin-right: var(--space-m); margin-left: var(--space-none);}

/*=============tooltip========================================*/
.osui-tooltip .icon.fa-info-cirlce{font-size: 1.1rem;}

/*date picker*/
.osui-datepicker input.flatpickr-input[disabled] + input{background-color: #f8f8f8;  border: 0; color: #393333;}

/*============================Search Container================================*/
.searchContainer{ margin: var(--space-s) 0;} 
.searchContainer .dropdown-container > select.dropdown-display{ min-height: auto;    max-height: 100px;
    overflow-y: scroll; }/*, .searchContainer .osui-dropdown-tags .vscomp-wrapper .vscomp-toggle-button */
.searchContainer .form-control[data-input], .searchContainer .form-control[data-textarea],.searchContainer .dropdown-container > select.dropdown-display{font-size: var(--font-size-xs);}
.searchContainer .form-control[data-input]{height:36px}
.searchContainer .dropdown-container:after{border: 2px solid var(--color-neutral-7);height: 6px;width: 6px;right: 10px;}
.is-rtl .searchContainer .dropdown-container:after{right: auto; left: 10px;}
/*.searchContainer .vscomp-wrapper.has-clear-button .vscomp-toggle-button{ height: 36px !important;}*/
.searchContainer .input-with-icon .input-with-icon-content-icon{background-color: transparent; border-radius: 0;}
.searchContainer .input-with-icon .input-with-icon-input input{ border-radius:var(--border-radius-soft);} 
/*========================incremental Counter============================*/
.incrementalCounter button{font-size: 0.4rem;background-color: #ffffff; border:1px solid var(--color-neutral-6);height:30px}
.incrementalCounter button.btn-Increment{border-radius: 4px 0 0 4px;}
.is-rtl .incrementalCounter button.btn-Increment{border-radius: 0px 4px 4px 0px;}
.incrementalCounter button.btn-decrement{border-radius: 0 4px 4px 0;}
.is-rtl .incrementalCounter button.btn-decrement{border-radius: 4px 0px 0px 4px;}
.incrementalCounter [data-input]{height:30px; background-color: #ffffff;width:70px;}
.incrementalCounter .form-control[data-input][disabled]{border-radius: 0;text-align: center;}

/*==============================multiselect tag==============================*/
.vscomp-wrapper.show-value-as-tags .vscomp-value-tag{ background-color: #e9ecef; }
.vscomp-wrapper.show-value-as-tags .vscomp-value-tag .vscomp-value-tag-clear-button{background-color: transparent;}
.vscomp-wrapper.show-value-as-tags .vscomp-value-tag .vscomp-value-tag-clear-button .vscomp-clear-icon:before, .vscomp-wrapper.show-value-as-tags .vscomp-value-tag .vscomp-value-tag-clear-button .vscomp-clear-icon:after{color: var(--color-primary); font-size: 1rem;}
.vscomp-ele[disabled] .vscomp-wrapper.show-value-as-tags .vscomp-value-tag{background-color: var(--color-neutral-4);padding: 6px 10px;}
.vscomp-ele[disabled] .vscomp-wrapper.show-value-as-tags .vscomp-value-tag .vscomp-value-tag-clear-button{display: none;}


/*==============================Alert message=======================*/
.feedback-message{font-size: var(--font-size-s); color:var(--color-neutral-0);justify-content: center;}
.feedback-message-text{padding-left: var(--space-xs); }
.feedback-message-warning{background-color: #fef2cc !important; border:1px solid #e8d69c !important; color:#b16225 !important}
.feedback-message-error{background-color: #fbd4d4 !important; border:1px solid #e0a8a8 !important; color:#922222 !important}
.feedback-message-info{background-color: #e0f6fe !important; border:1px solid #b4e2f3 !important; color:#2d89aa !important}
.feedback-message-success{background-color: #d8f9c8 !important; border:1px solid #b9dda8 !important; color:#468129 !important}
@media (min-width: 1900px) {
    .is-rtl .feedback-message{right: 19%;}
}
@media (min-width: 1260px) and (max-width:1370px) {
    .is-rtl .feedback-message{right: 9%;}
    .osui-tabs--is-vertical .osui-tabs__content {width: 76vw;}
}
/*===============================CardItem-CustomUI=========================*/
.CardItem-CustomUI:hover{ background-color: #fafaef;border-color:#c5c5a9; cursor: pointer;}

.popup-dialog.popup-xxl{max-width:90%}
.popup-dialog.popup-xl{max-width:1000px}
.popup-usermanual{ width: 60%;max-width: initial; height: 90%;overflow: hidden;}
.popup-usermanual .popup-content{height: 100%;}
.popup-helpvideo{max-width: 60%; width: 60%;}
.popup-helpvideo .popup-content{height: 100%;}

/*=========================Notification================================*/
.icon-badge .badge [data-expression]{font-size: 0.65rem;}
.NotificationPopover [data-popover] > .popover-bottom{max-width:initial; width: 300px;padding: var(--space-base); top: 45px;}
.NotificationPopover .list-item{border-bottom:none; border-radius: 7px;}
.NotificationPopover .list-item:hover{background-color: rgba(111,189,197,0.10) !important;}
.NotificationPopover .list-item .icon{color: var(--color-quaternary); background-color:rgba(111,189,197,0.10);  padding: 8px; border-radius: 50%; font-size: 1rem; width: 32px; height: 32px;}
.NotificationPopover .list-item:hover .icon{ background-color: var(--color-neutral-0);}
.NotificationPopover .list-item a{text-decoration: none;}
.NotificationPopover .icon-badge .badge.background-red{ background-color:#a30606 !important;width: 20px; min-width: 20px;height: 20px;line-height: 20px;left: 60%;transform: translateY(-42%);-webkit-transform: translateY(-42%); -ms-transform: translateY(-42%);}



/*==============================sidebar menu==========================================*/
.mobile-menu{display: flex; justify-content: space-between; align-items: center; width:93vw}

/*menu icon and close icon*/
.layout-sidebar .app-menu-sidebar {
    background-color:var(--color-Secondary);
    bottom: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    position: absolute;
    top: 0;
    width:52px; 
    /*max-width: var(--side-menu-size);
    min-width: max-content;*/
    z-index: 101;
    transition: all 0.3s linear; 
    border-radius: 8px;
    margin: 4px;
    padding: 0 5px;
    overflow: hidden;
}
.layout-sidebar .app-sidemenu-links {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-md);
    /* ServiceStudio Preview*/
    
}

.layout-sidebar .app-sidemenu-links a {
    color: var(--color-neutral-0);
    display: flex;
    align-items: center;
    margin: 12px 12px 0 12px;
    padding: 6px;
}

.layout-sidebar .app-sidemenu-links a:hover{background-color: #8ccfb5; border-radius: 7px;text-decoration: none;}
.layout .layout-sidebar .app-sidemenu-links a.active {
    border-left: var(--border-size-m) solid var(--color-primary);
    border-bottom: 0;
}
.layout-sidebar .app-sidemenu-links a span{margin: 0 10px;}

.phone .layout-sidebar .app-menu-sidebar, .tablet .layout-sidebar .app-menu-sidebar{display: none;}

.layout-sidebar .app-menu-sidebar .menuIcon{display: block;margin: 12px 10px;}
.layout-sidebar .app-menu-sidebar .closeIcon{display: none;margin: 12px var(--space-xs)}
.layout-sidebar .app-menu-sidebar:hover .menuIcon{display: none;}
.layout-sidebar .app-menu-sidebar:hover .closeIcon{display: block;}

.layout-sidebar .app-menu-sidebar .closeIcon, .layout-sidebar .app-menu-sidebar .menuIcon{color:#ffffff; font-size: var(--font-size-h6);}


.layout-sidebar .app-menu-sidebar:hover{transition: all 0.3s linear;}
.layout-sidebar .osui-menu{padding: 0 0px;  margin: 0}
.layout-sidebar .osui-menu a{display: flex; align-items: center;color: #9edbc0;}
.layout-sidebar .osui-menu a:hover{ text-decoration: none;}
.layout-sidebar .osui-menu .fas6{color: var(--color-neutral-0);padding: 10px 0;font-size: 0.9rem !important;width: 28px;}
.layout-sidebar .osui-submenu{padding: 0;width:100%; display: flex; flex-direction: column;margin-bottom: 6px;}
.layout-sidebar .osui-submenu:hover, .layout-sidebar .osui-submenu.osui-submenu--is-open {background-color:#12324e; border-radius: 5px;}
.layout-sidebar .osui-submenu__header{justify-content: space-between; width: 100%;border:none;padding: var(--space-none) var(--space-xs);}
.layout-sidebar .osui-submenu.active .osui-submenu__header{color: #b0edd2;border:none}
.layout-sidebar .osui-submenu__header:hover, .layout-sidebar .osui-submenu.osui-submenu--is-open{border: none !important;}
.layout-sidebar .app-sidemenu-item{display: flex; align-items: center;color: #ffffff !important;height: 38px;}
.layout-sidebar .app-sidemenu-item .fas6, .phone .app-sidemenu-item .fas6, .tablet .app-sidemenu-item .fas6{ padding: 10px 0;font-size: 1rem !important;width: 35px; height:35px;border-radius: 50%;line-height: 12px; text-align: center;background-color:#12324e; /*border: 2px solid #ffffff;*/}
.layout-sidebar .app-menu-sidebar .menu-item{margin-left: 11px;color: #ffffff;overflow: hidden;font-size: var(--font-size-xs);line-height: 14px;
    opacity: 0;
    animation: menuVisibility 0.8s;
    }
.is-rtl .layout-sidebar .app-menu-sidebar .menu-item{margin-right: 11px; margin-left:0;font-weight: 500;letter-spacing: 0.05rem;font-size:var(--font-size-12);}
.layout-sidebar .app-menu-sidebar .osui-submenu.active .menu-item{ margin-left: 11px;color: #ffffff;}
.is-rtl .layout-sidebar .app-menu-sidebar .osui-submenu.active .menu-item{margin-right: 11px; margin-left:0; }
.layout-sidebar .app-menu-sidebar .osui-submenu .osui-submenu__header__icon:before, .layout-sidebar .app-menu-sidebar .osui-submenu:hover .osui-submenu__header__icon:before{border-color: var(--color-neutral-0);margin: 0 7px;}
/*, .layout-sidebar .app-menu-sidebar .osui-submenu__header__icon{display: none;}*/
.layout-sidebar .app-menu-sidebar:hover .menu-item{opacity: 1;-webkit-transition: all 2s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;} 
.layout-sidebar .osui-submenu__items{ display: none; position: initial; background-color: transparent;box-shadow: var(--space-none);padding: 0 0 5px 0;}
.layout-sidebar .osui-submenu--is-open .osui-submenu__items{display:block; border: none;margin:0 5px;}
.layout-sidebar .app-menu-sidebar .osui-submenu__items a{ display: flex;color:#ffffff; font-size: var(--font-size-xs); white-space: normal;align-items: baseline;
    justify-content: flex-start;line-height: 13px;}
.layout-sidebar .app-menu-sidebar .osui-submenu__items a:before{content:'\f10c'; font-family: 'FontAwesome';margin: 0 5px;font-weight: normal;font-size: 5px;}
.layout-sidebar .app-menu-sidebar .osui-submenu__items a.active{color: var(--color-quaternary); font-size: var(--font-size-xs);}
.layout-sidebar .app-menu-sidebar  .osui-submenu__items a.active:hover{background-color:transparent;color: #ffffff; text-decoration: none;}
.layout-sidebar .app-menu-sidebar .osui-submenu__items a:hover{background-color: transparent;color:var(--color-quaternary)!important;text-decoration: none;}
.is-rtl .layout-sidebar .app-menu-sidebar .osui-submenu__items a {font-size: var(--font-size-12);font-weight: 500;letter-spacing: 0.05rem;}
@keyframes menuVisibility {
  from {opacity: 0;}
  to {opacity: 1;}
}
.layout-sidebar .app-menu-sidebar .close-icon{display: none;}
.layout-sidebar .app-menu-sidebar:hover .close-icon{display:block; color:#ffffff; margin: 12px 10px;; font-size: var(--font-size-h6); opacity: 1;
    animation: menuVisibility 0.8s;}

.app-menu-sidebar:hover .username{opacity: 1;-webkit-transition: all 2s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;} 
.app-menu-sidebar .username{text-transform: uppercase; font-weight: normal; color:var(--color-neutral-0);overflow: hidden;font-size: var(--font-size-s);
    opacity: 0;  animation: menuVisibility 0.8s; }
    .app-menu-sidebar .usernameIcon{font-size: 1rem; border: 2px solid #ffffff; border-radius: 50%; color: #fff; height: 35px;  width: 35px;  line-height: 29px;
    vertical-align: middle;}
.app-menu-sidebar .usernameWrapper {display: flex; height: 70px; align-items: center;}

.phone .app-menu-sidebar .usernameWrapper, .tablet .app-menu-sidebar .usernameWrapper {padding: 0 var(--space-base);}
.userNameSideMenu{padding:0 var(--space-xs)}
.phone .userNameSideMenu, .tablet .userNameSideMenu{ position:absolute; width:100%; bottom:0}
.phone .app-menu-sidebar .username, .tablet .app-menu-sidebar .username{opacity: 1;}
.phone .osui-submenu__header, .tablet .osui-submenu__header{ padding: var(--space-xs) ;}
.layout-sidebar .app-menu-sidebar .sideMenuAppName{padding:var(--space-m) var(--space-base); width:100%;display: none;font-size: var(--font-size-s); color: white;height: 65px;overflow: hidden;line-height: 0.8rem; text-align:center;font-family: 'bodyFontSemiBold';}
.layout-sidebar .app-menu-sidebar .sideMenuAppName span{line-height: 1rem;}
.layout-sidebar .app-menu-sidebar:hover .sideMenuAppName{animation-name: menuVisibility;display: block;
    animation-duration: 0.8s;
} 
/* submenu on hover */
 /*.layout-sidebar .app-menu-sidebar .osui-submenu .osui-submenu__items{display: none;}
 .layout-sidebar .app-menu-sidebar .osui-submenu:hover > .osui-submenu__items{display: block;}*/

 div#IsTableLoadingOrEmpty img {
    height: 100px;
    width: auto;
}
/*app-menu-conten*/
.app-menu-content .app-menu-links{background-color: var(--color-Secondary) !important;}
.app-menu-content #b3-b2-MultipleSubMenus{padding: 0 var(--space-s);}
.app-menu-content .app-sidemenu-links {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-md);
    /* ServiceStudio Preview*/
    
}
.app-menu-content .app-sidemenu-links a {
    color: var(--color-neutral-0);
    display: flex;
    align-items: center;
    margin: 12px 12px 0 12px;
    padding: 6px;
}

.app-menu-content .app-sidemenu-item {color: #fff;}

.app-menu-content .app-sidemenu-links a:hover{background-color: #8ccfb5; border-radius: 7px;text-decoration: none;}
.app-menu-content .app-sidemenu-links a.active {
    border-left: var(--border-size-m) solid var(--color-primary);
    border-bottom: 0;
}
.app-menu-content .app-sidemenu-links a span{margin: 0 10px;}
.app-menu-content .app-menu-sidebar .menuIcon{display: none !important}
.app-menu-content .app-menu-sidebar .closeIcon{display: none !important}
.app-menu-content .osui-menu{padding: 0 0px;  margin: 0}
.app-menu-content .osui-menu a{display: flex; align-items: center;color: #9edbc0;}
.app-menu-content .osui-menu a:hover{ text-decoration: none;}
.app-menu-content .osui-menu .fas6{color: var(--color-neutral-0);padding: 10px 0;font-size: 0.9rem !important;width: 28px;}
.app-menu-content .osui-submenu{padding: 0;width:100%; display: flex; flex-direction: column;margin-bottom: 3px;}
.app-menu-content .osui-submenu:hover, .app-menu-content .osui-submenu.osui-submenu--is-open {background-color: #12324e; border-radius: 5px;}
.app-menu-content .osui-submenu__header{justify-content: space-between; width: 100%;border:none}
.app-menu-content .osui-submenu.active .osui-submenu__header{color: #b0edd2;border:none !important}
.app-menu-content .osui-submenu__header:hover, .app-menu-content .osui-submenu.osui-submenu--is-open{border: none !important;}

.app-menu-content .osui-submenu__header:hover, .app-menu-content .osui-submenu.osui-submenu--is-open{border: none !important;}
.app-menu-content .app-sidemenu-item{display: flex; align-items: center;color: #ffffff !important;/* height: 42px;*/}

.app-menu-content .app-menu-sidebar .menu-item{ margin-left: 11px;color: #ffffff;overflow: hidden;font-size: var(--font-size-s);}
.is-rtl .app-menu-content .app-menu-sidebar .menu-item{margin-left: 0; margin-right: 11px;}
.app-menu-content .app-menu-sidebar .osui-submenu.active .menu-item{ margin-left: 11px;color: #ffffff;}
.app-menu-content .app-menu-sidebar .osui-submenu .osui-submenu__header__icon:before, .app-menu-content .app-menu-sidebar .osui-submenu:hover .osui-submenu__header__icon:before{border-color: var(--color-neutral-0); margin:0 7px}

.app-menu-content .osui-submenu__items{ display: none; position: initial; background-color: transparent;}
.app-menu-content .osui-submenu--is-open .osui-submenu__items{display:block; border: none;}
.app-menu-content .app-menu-sidebar .osui-submenu__items a{ display: flex;color: #def1ed; font-size: 0.7rem; white-space: normal;align-items: baseline;
    justify-content: flex-start;
    margin: 0;}
.app-menu-content .app-menu-sidebar .osui-submenu__items a:before{content:'\f10c'; font-family: 'FontAwesome';margin: 0 5px;font-weight: normal;font-size: 5px;}
.app-menu-content .app-menu-sidebar .osui-submenu__items a.active{color: #def1ed; font-size: 0.7rem;}
.app-menu-content .app-menu-sidebar  .osui-submenu__items a.active:hover{background-color:transparent;color: #ffffff; text-decoration: none;}
.app-menu-content .app-menu-sidebar .osui-submenu__items a:hover{background-color: transparent;color: var(--color-neutral-0);text-decoration: none;}

.app-menu-content .app-menu-sidebar .close-icon{display: none;}

/*Start login*/
.login-screen{display: flex; flex-direction: column;margin-top:0; Height: Calc(100vh - 195px);}
.login-card .card{box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;border-radius: 20px;background: linear-gradient(0deg, rgba(255,255,255,1) 40%, #d7eaf9 100%);border: 0;}
.login-MOH-logo{height: 79px; width:266px; margin: var(--space-s) var(--space-m);}
.login-screen .form-control[data-input]{font-size: var(--font-size-base);text-align: center; font-weight: normal;}
/*.is-rtl .login-screen .form-control[data-input]{}*/
.login-screen .form-contro[placeholder]{font-size: var(--font-size-s);text-align: center; font-weight: normal; color:#d8d8d8}
.login-screen .btn.btn-maroon{font-size: 0.9rem !important;}
.login-screen .input-with-icon .input-with-icon-content-icon:not(:empty) + .input-with-icon-input input{padding: 0;}
.login-screen input[type="password"]{font-size: var(--font-size-h2)}
.login-MOH-logo img{width:auto; height: 100%;}
.login-screen .loginMainCard.card{border-radius: 10px;width: 440px; padding:var(--space-m); border:none;box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.accountTypeWrapper .card{ border-radius: 5px;}
.accountTypeWrapper{display: flex; flex-direction: column;}
.accountTypeWrapper a{ text-decoration: none !important;margin-left: 0; margin-right: 0;}

.input-with-icon .input-with-icon-input input{border-radius: 25px;}
.input-with-icon .input-with-icon-content-icon{width: 30px!important; height: 30px!important;line-height:30px;background-color:var(--color-Tertiary);border-radius:50%;}
.input-with-icon .input-with-icon-content-icon i {color: var(--color-Secondary);}
.input-with-icon span.validation-message{position: relative;}
.is-rtl .input-with-icon .input-with-icon-content-icon{right: 0; left: auto;}
.is-rtl .card-detail-right {padding-right: 0;padding-left: var(--space-base);transform: rotate(180deg);}

.SupportPopover [data-popover].popover-position-bottom > .popover-bottom{top: 30px;}
.input-date{display: flex; position: relative; flex-direction: column;}
.input-date .form-control[data-input]:hover{ cursor: pointer;}
.input-date:after{content:'\f073'; font-family: 'FontAwesome'; position: absolute; display: block; height: 30px; width:25px;line-height:30px; color:var(--color-neutral-7);right:0; left: auto }
.is-rtl .input-date:after{left:0; right: auto }

/*Mobile*/
/*.phone .login-screen{margin-top:6vh}
.phone .login-screen .loginMainCard.card{width:350px}
.phone .login-MOH-logo{height: 70px; width:150px;}*/
.phone .login-screen{margin-top: 0; height:auto}
.phone .login-Wrapper{background: linear-gradient(180deg, rgba(255,255,255,1) 85%, #d7eaf9 100%);height: auto;}
/*End login*/

/*Dashboard*/
.dashboard .card{box-shadow: rgb(0 0 0 / 15%) 0px 2px 10px;border: 0;border-radius: 10px;}
.btn-header .osui-tabs__header {width: 45%;}
.dashboard-icon{ width:65px; height:65px; line-height: 78px; margin-top: -4rem; text-align: center; color:var(--color-neutral-0); border-radius:.75rem;}
.dashboard-icon i{font-size: 1.5rem;}
.btn-header .button-group{display: flex;justify-content: flex-end;}
.btn-header .button-group > div{display: block;}
.phone .btn-header .button-group > div, .tablet .btn-header .button-group > div{text-align: center; width: 100%;}
.btn-header .button-group-item{font-size:var(--font-size-s);border-color: var(--color-Secondary);height:30px;font-weight: 500; color:var(--color-Secondary)}
.btn-header .button-group-item.button-group-selected-item{background-color: var(--color-Secondary);font-weight: 500;color: var(--color-neutral-0);}
.bg-gradient-success{
    background-image: linear-gradient(310deg,#2dce89,#2dcecc);
    box-shadow:0 4px 20px 0 rgba(0,0,0,.10), 0 7px 10px -5px rgba(0, 0, 0, 0.20);
}
.bg-gradient-info{
    background-image: linear-gradient(310deg,#1a73e8,#0cb2c8);
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.10), 0 7px 10px -5px rgba(0, 0, 0, 0.20);
}
.bg-gradient-warning{
    background-image:linear-gradient(310deg,#fb6340,#fbb140);
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.10), 0 7px 10px -5px rgba(0, 0, 0, 0.20);
}
.bg-gradient-purple{
    /*background-image:linear-gradient(310deg,#ab393a,#e83f3c);*/
     background-image:linear-gradient(310deg,#c93835,#ff898a);
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.10), 0 7px 10px -5px rgba(0, 0, 0, 0.20)
}
/*eService*/
.wizard-item-icon .cursorinitial{cursor: initial;}
.wizard-item-icon .cursorpointer{cursor: pointer!important;}



/*will be change later*/
.text-red-darkest
{
    color: var(--color-Secondary)!important;
}

/*Popup sizes*/
.popup-eighty-percent-width{
    max-width: 80%;
    width: 80%;
}
.popup-seventy-percent-width{
    max-width: 70%;
    width: 70%;
}

.popup-seventy-percent{
    max-width: 70%;
    width: 70%;
    max-height: 70%;
    height: 70%;
}

.popup-fifty-percent{
    max-width: 50%;
    width: 50%;
    height: inherit
}
/* Style to make the input field accept Arabic text and RTL */
.arabic-input {
    direction: rtl;
    text-align: right;
    font-family: 'Amiri', 'Arial', sans-serif;
    white-space: nowrap;        
}