@import url("/LisbonTheme/Theme.LisbonTheme.css?52");


/*
    How to generate a theme for your company: 
    
        1 - Go to https://silkui.outsystems.com/ThemeCustomizer/GenerateLisbon.aspx
        2 - Copy the generated CSS
        3 - Replace the CSS for Primary Color Customization below with the Generated CSS

*/

/*------------------------------------*\
             Import Font
\*------------------------------------*/
@font-face {
  font-family: 'icomoon';
  src:  url('/SFTS_Theme_Internet/icomoon.eot');
  src:  url('/SFTS_Theme_Internet/icomoon.eot') format('embedded-opentype'),
    url('/SFTS_Theme_Internet/icomoon.ttf') format('truetype'),
    url('/SFTS_Theme_Internet/icomoon.woff') format('woff'),
    url('/SFTS_Theme_Internet/icomoon.svg') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-calendar-1:before {
  content: "\e900";
}
.icon-calendar-2:before {
  content: "\e903";
}
.icon-calendar:before {
  content: "\e909";
}
.icon-deadline:before {
  content: "\e90a";
}
.icon-exclamation-alert-sign-on-reminder-daily-calendar-page:before {
  content: "\e90b";
}
.icon-term:before {
  content: "\e90c";
}
.icon-calendar1:before {
  content: "\e90d";
}

@font-face {
    font-family: 'Roboto';
    src: url('/RichWidgets/fonts/Roboto-Regular-webfont.eot');
    src: url('/RichWidgets/fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/RichWidgets/fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('/RichWidgets/fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('/RichWidgets/fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/RichWidgets/fonts/Roboto-Bold-webfont.eot');
    src: url('/RichWidgets/fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/RichWidgets/fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('/RichWidgets/fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('/RichWidgets/fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
    font-weight: 700;
    font-style: normal;
}



/*------------------------------------*\
             Font Definition
\*------------------------------------*/

 /* html, body, a, select, form, fieldset, table, tr, td, img, input, button, select, textarea, optgroup, option {
    font-family: 'Open-Sans', sans-serif;
} */

html,
body,
a,
select,
fieldset,
input,
button,
select,
textarea,
optgroup,
option,.font_Name {
    font-family: 'Roboto', sans-serif;
}




/* Font OpenSans classes */

.Roboto_Regular {
    font-family:  'Roboto', sans-serif;
    font-weight: 400;
}

.Roboto_Bold {
    font-family:  'Roboto', sans-serif;
    font-weight: 700;
}

/***************************************/
/***** PRIMARY COLOR CUSTOMIZATION *****/
/***************************************/
a,
a:link,
a:visited,
.Footer a,
.Footer a:link,
.Footer a:visited {
    color: #524E9C; /*primary-color*/
}
html, body, a, select, fieldset, input, button, select, textarea, optgroup, option {
    font-family: Arial, Helvetica, Meiryo, sans-serif;
    font-size: 100%;
}

.desktop a:hover,
.desktop a:link:hover,
.desktop a:visited:hover {
    color: #524E9C; /*primary-color*/
}

.Header_background {
    background-color: #524E9C; /*primary-color*/
    border-bottom-color: #524E9C; /*primary-color*/
}

.Header_title {    
    border-right-color: #524E9C; /*primary-color*/
}

.Menu_DropDownPanel {
    background-color: #524E9C; /*primary-color*/
}

.Menu_TopMenu a span.fa {
    border-color: #524E9C; /*primary-color*/
}

.Menu_TopMenu:hover span.fa {
    color: #FFF;
    border-color: #FFF;
}

.Menu_TopMenu:hover .Menu_DropDownArrow {
    border-top-color: #FFF;
}

.Menu_TopMenuActive {
    border-top-color: #FFF;
}

.Header_Menu a:hover, 
.Header_Menu a:link:hover, 
.Header_Menu a:visited:hover,
.desktop a:hover, 
.desktop a:link:hover {
    color: #FFF;
}


.Menu_TopMenuActive:hover a:link, .Menu_TopMenuActive a:link,
.Menu_TopMenuActive:hover a:visited, .Menu_TopMenuActive a:visited,
.Menu_TopMenuActive:hover a, .Menu_TopMenuActive a,
.Menu_TopMenu:hover a, .Menu_TopMenu a {
    color: #FFF;
}

.Menu_TopMenuActive .Menu_DropDownArrow,
.Menu_TopMenuActive:hover .Menu_DropDownArrow {
    border-top-color: #FFF;
}

.Menu_DropDownArrow {
    border-top-color: #FFF;
}

.Menu_TopMenuActive a span.fa {
    color: #FFF;
    border-color: #FFF;
}

.Menu_DropDownPanel a span.fa {
    color: #FFF;
}

a.ListNavigation_PageNumber:link,
span.ListNavigation_CurrentPageNumber,
span.ListNavigation_Ellipsis {
    color: #524E9C; /*primary-color*/
}

a.ListNavigation_PageNumber:link:hover,
span.ListNavigation_CurrentPageNumber:hover,
span.ListNavigation_Ellipsis:hover {
    color: #524E9C; /*primary-color*/
}

a.ListNavigation_Previous:link,
a.ListNavigation_Next:link,
span.ListNavigation_DisabledNext, 
span.ListNavigation_DisabledPrevious {
    color: #524E9C; /*primary-color*/
}

a.ListNavigation_Previous:link:hover,
a.ListNavigation_Next:link:hover,
span.ListNavigation_DisabledNext:hover, 
span.ListNavigation_DisabledPrevious:hover {
    color: #524E9C; /*primary-color*/
}

a.ActionAdd,
a.ActionAdd:link,
a.ActionAdd:visited,
a.ActionEdit,
a.ActionEdit:link,
a.ActionEdit:visited,
a.ActionDelete,
a.ActionDelete:link,
a.ActionDelete:visited,
a.ActionChange,
a.ActionChange:link,
a.ActionChange:visited {
    background-color: #524E9C; /*primary-color*/
    border-color: #524E9C; /*primary-color*/
}

.desktop a.ActionAdd:hover,
.desktop a.ActionAdd:hover:visited,
.desktop a.ActionAdd:link:hover,
.desktop a.ActionEdit:hover,
.desktop a.ActionEdit:link:hover,
.desktop a.ActionEdit:link:visited,
.desktop a.ActionDelete:hover,
.desktop a.ActionDelete:hover:visited,
.desktop a.ActionDelete:link:hover,
.desktop a.ActionChange:hover,
.desktop a.ActionChange:hover:visited,
.desktop a.ActionChange:link:hover {
    background-color: #524E9C; /*primary-color*/
    border-color: #524E9C; /*primary-color*/
    box-shadow: none;
    color: #fff;
    -webkit-filter: brightness(0.9);
    filter: brightness(0.9);
}

.desktop a.ActionAdd:hover:active,
.desktop a.ActionEdit:hover:active,
.desktop a.ActionDelete:hover:active,
.desktop a.ActionChange:hover:active {
    background-color: #524E9C; /*primary-color*/
    border-color: #524E9C; /*primary-color*/
    color: #FFF;
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
}

.Login_Footer {
    background: #524E9C; /*primary-color*/
    background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
    background-image:    -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
    background-image:     -ms-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
    background-image:      -o-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
    background-image:          linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}
textarea, select, input, input[type="text"]{
    border: 2px solid #ccc;
}

.AccordionVertical_item.open .AccordionVertical___icon > .fa {
    color: #524E9C; /*primary-color*/
}
.AccordionVertical_item.open > .AccordionVertical__header > .AccordionVertical___icon > .fa {
    color: #524E9C; /*primary-color*/
}

.expanded .SectionExpandable__icon.Heading2 > .fa {
    color: #524E9C; /*primary-color*/
}

.Panel .SectionExpandable__icon.Heading2 > .fa {
    color: #524E9C; /*primary-color*/
}

.ButtonGroup_button.Button:hover {
    background: #524E9C; /*primary-color*/
}

.select2-container .select2-choice span {
    color: #524E9C; /*primary-color*/
}

.select2-dropdown-open .select2-choice {
    background-color: #fff;
}

.select2-results .select2-highlighted {
    background-color: #524E9C; /*primary-color*/
}

.IconBadge_number {
    background-color: #524E9C; /*primary-color*/
}

.desktop .NavigationBar a:hover, 
.desktop .NavigationBar a:link:hover {
    color: #524E9C; /*primary-color*/
}

.NavigationBar a.Active {
    color: #524E9C; /*primary-color*/
}

.desktop .NavigationBar a:hover:after, 
.desktop .NavigationBar a:link:hover:after,
.NavigationBar a.Active:after {
    background-color: #524E9C; /*primary-color*/
}

.NavigationBar a.Active:not(.IE8):before {
    border-bottom-color: #524E9C; /*primary-color*/
}

.desktop .NavigationBar.Vertical a:hover,
.desktop .NavigationBar.Vertical a:link:hover,
.NavigationBar.Vertical a.Active,
.NavigationBar.Vertical a:link.Active {
  border-color: #524E9C; /*primary-color*/
}

.NavigationBar.Vertical a.Active:not(.IE8):before {
    border-left-color: #524E9C; /*primary-color*/
}

.phone .NavigationBar .InlineDropdown:active,
.phone .NavigationBar .InlineDropdown:link:active,
.tablet .NavigationBar .InlineDropdown:active,
.tablet .NavigationBar .InlineDropdown:link:active,
.phone .NavigationBar a:active, 
.phone .NavigationBar a:link:active,
.tablet .NavigationBar a:active, 
.tablet .NavigationBar a:link:active {
    color: #524E9C; /*primary-color*/
}

.phone .NavigationBar .InlineDropdown:active:after,
.phone .NavigationBar .InlineDropdown:link:active:after,
.tablet .NavigationBar .InlineDropdown:active:after,
.tablet .NavigationBar .InlineDropdown:link:active:after,
.phone .NavigationBar a:active:after, 
.phone .NavigationBar a:link:active:after,
.tablet .NavigationBar a:active:after, 
.tablet .NavigationBar a:link:active:after {
    background-color: #524E9C; /*primary-color*/
}

.Tabs__tab.active {
    border-top-color: #524E9C; /*primary-color*/
    color: #524E9C; /*primary-color*/
}

.WizardStep a,
.WizardStep a:link,
.desktop .WizardStep a:hover,
.desktop .WizardStep a:link:hover
{
    color: #524E9C; /*primary-color*/
}


.WizardStep.ActiveStep {
    background: var(--color-primary); /*primary-color*/
     background: #524E9C; /*primary-color*/
    
}

.WizardStep.ActiveStep:before {
    border-top-color:  var(--color-primary); /*primary-color*/
    border-bottom-color: var(--color-primary); /*primary-color*/
     border-top-color:   #524E9C; /*primary-color*/
    border-bottom-color: #524E9C;  /*primary-color*/
}

.WizardStep.Past {
    background:  var(--color-gray-past); 
     background:  #BCBEC0; 
}

.WizardStep.Past:before {
    border-top-color: var(--color-gray-past);
    border-bottom-color: var(--color-gray-past);
    border-top-color: #BCBEC0; 
    border-bottom-color: #BCBEC0; 
}

.WizardStep.Past a,
.WizardStep.Past a:hover,
.WizardStep.Past a:link,
.WizardStep.Past a:link:hover,
.WizardStep.Past a[disabled="disabled"],
.WizardStep.Past a[disabled="disabled"]:hover
.WizardStep.ActiveStep a,
.WizardStep.ActiveStep a:hover,
.WizardStep.ActiveStep a:link,
.WizardStep.ActiveStep a:link:hover,
.WizardStep.ActiveStep a[disabled="disabled"],
.WizardStep.ActiveStep a[disabled="disabled"]:hover {
    color: #FFF;
}

.WizardStep.Past:after {
    border-right-color:var(--color-gray-past);
    border-top-color: var(--color-gray-past); 
     border-right-color:#BCBEC0; 
    border-top-color: #BCBEC0; 
    
}

.Button,
a.Button {
    color: #524E9C; /*primary-color*/
}

.Button.ButtonDefault,
.Button.Is_Default {
    background-color: #524E9C; /*primary-color*/
    border-color: #524E9C; /*primary-color*/
}

.desktop .Button.ButtonDefault:hover, 
.desktop .Button.Is_Default:hover {
    background-color: #524E9C; /*primary-color*/
    border-color: #524E9C; /*primary-color*/
    -webkit-filter: brightness(0.9);
    filter: brightness(0.9);
}


.Button:hover:active,
a.Button:hover:active {
    color: #524E9C; /*primary-color*/
}

.Button.ButtonDefault:hover,
.Button.Is_Default:hover {
    -webkit-filter: brightness(0.9);
    filter: brightness(0.9);
}

.Button.ButtonDefault:hover:active,
.Button.Is_Default:hover:active {
    background-color: #524E9C; /*primary-color*/
    border-color: #524E9C; /*primary-color*/
    color: #fff;
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
}

.desktop a.ActionAdd:hover:active,
.desktop a.ActionEdit:hover:active,
.desktop a.ActionDelete:hover:active,
.desktop a.ActionChange:hover:active {
    background-color: #524E9C; /*primary-color*/
    border-color: #524E9C; /*primary-color*/
    color: #fff;
}

a,
a:link,
a:visited,
.EditableTable tr.RowControlGroup a  {
    color: #524E9C; /*primary-color*/
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar {
    background: #524E9C; /*primary-color*/
}

.Menu_DropDownPanel a.Menu_SubMenuItem:hover {
    background-color: #524E9C; /*primary-color*/
}

.Menu_DropDownButton.open .Menu_TopMenu .Menu_DropDownArrow {
    border-top-color: #fff;
    opacity: .5;
}

.tablet a.Header_ButtonMenu, 
.phone a.Header_ButtonMenu {
    color: #FFF;
}

.Page.active .Header_ButtonMenu {
    color: #FFF;
}

.SectionIndex.vertical a.active, 
.SectionIndex.vertical a:hover {
    color: #524E9C; /*primary-color*/
    border-left-color: #524E9C; /*primary-color*/
}

.SectionIndex a, 
.SectionIndex a:link, 
.SectionIndex a:visited,
.SectionIndex a.active, 
.SectionIndex a:hover,
.desktop .SectionIndex a:hover{
    color: #524E9C; /*primary-color*/
    border-bottom-color: #524E9C; /*primary-color*/
    text-decoration: none;
}


.AccordionVertical___title {
    color: #524E9C; /*primary-color*/
}

.SectionExpandable.expanded .SectionExpandable_header .Heading2 {
    color: #524E9C; /*primary-color*/
}


.Button.Link {
    color: #524E9C; /*primary-color*/
}

.desktop .Button.Link:hover {
    border-color: #524E9C; /*primary-color*/
    color: #524E9C; /*primary-color*/
}

.desktop .Button:hover, 
.desktop a.Button:hover {
    color: #524E9C; /*primary-color*/
}

.ButtonGroup_button.active, 
.desktop .ButtonGroup_button.active:hover {
    background-color: #524E9C; /*primary-color*/
}

.ButtonGroup_button.Button:hover,
.ButtonGroup_button.Button:hover .fa{
    color: #FFF;
}


.Calendar-day-selected, 
.Calendar-day-selected:hover {
    background: #524E9C; /*primary-color*/
}

.Calendar-navDisabled > div, 
.topBar-navDisabled .Calendar-navBtn > div,
.Calendar-time-down, 
.Calendar-time-up, 
.Calendar-time-am {
    color: #524E9C; /*primary-color*/
}

.pika-prev:after,
.pika-next:after {
    color: #524E9C; /*primary-color*/ 
}

.Calendar-navBtn > div {
    color: #524E9C; /*primary-color*/ 
}

.pika-title {
    border-bottom: 2px solid #524E9C; /*primary-color*/
}

.is-selected .pika-button {
   background-color: #524E9C; /*primary-color*/
}

.has-event .pika-button:after {
   background-color: #524E9C; /*primary-color*/ 
}


.DropdownMenu .PH > a,
.DropdownMenu .PH > a:hover {
    color: #524E9C; /*primary-color*/
}

.SliderRange .ui-slider-range, .noUi-origin.noUi-connect {
    background-color: #524E9C; /*primary-color*/
}

.EditableTable tr.RowControlGroup a:hover {
    color:  #524E9C; /*primary-color*/
}

.desktop .Button.ButtonDefault:hover,
.Button.Button.Is_Default:hover {
    background-color: #524E9C; /*primary-color*/
    border-color: #524E9C; /*primary-color*/
}
.owl-theme .owl-controls .owl-page.active span, 
.owl-theme .owl-controls.clickable .owl-page:hover span {
    background-color: #524E9C; /*primary-color*/
}

td.RowWithAddAction a:hover {
    color: #524E9C; /*primary-color*/
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
}

.InfoTooltip .tooltipstered,
.ListItem  .tooltipstered{
    color: #524E9C; /*primary-color*/
}

div.Menu_DropDownPanel a:hover, 
div.Menu_DropDownPanel a:link:hover,
div.Menu_DropDownPanel a:visited:hover,
div.Menu_DropDownPanel a.Menu_SubMenuItem:hover,
div.Menu_DropDownPanel a.Menu_SubMenuItem.Menu_SubMenuItemActive {
    color: #FFF;
    background-color: rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
    
}

/* Menu tablet and phone */
.tablet .Application_Menu,
.phone .Application_Menu {
    background: #524E9C; /*primary-color*/
}

.Application_Menu {
    background: #524E9C; /*primary-color*/
}


div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-title,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-title{
    color: #FFF;
    top:0;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close {
    opacity: 1;
    top: 15px;
    background-image: url(/WebPatterns/img/PopupCloseWhite.png?48);
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar{
    padding-top:0;
}


div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-title,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-title{
    color: #FFF;
    top:10px;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close {
    opacity: 1;
    top: 15px;
    background-image: url(/WebPatterns/img/PopupCloseWhite.png?48);
}

.Feedback_AjaxWait {
    color: #222;
}

.Feedback_AjaxWait .Loader {
    -webkit-animation: loader 1.3s infinite linear;
            animation: loader 1.3s infinite linear;
    border-radius: 50%;
    font-size: 4px;
    height: 1em;
    margin-bottom: 20px;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
            transform: translateZ(0);
    width: 1em;
    background: transparent;
}

@-webkit-keyframes loader {
    0%,
    100% {
        box-shadow: 0 -3em 0 .2em #222, 2em -2em 0 0 #222, 3em 0 0 -.5em #222, 2em 2em 0 -.5em #222, 0 3em 0 -.5em #222, -2em 2em 0 -.5em #222, -3em 0 0 -.5em #222, -2em -2em 0 0 #222;
    }
    12.5% {
        box-shadow: 0 -3em 0 0 #222, 2em -2em 0 .2em #222, 3em 0 0 0 #222, 2em 2em 0 -.5em #222, 0 3em 0 -.5em #222, -2em 2em 0 -.5em #222, -3em 0 0 -.5em #222, -2em -2em 0 -.5em #222;
    }
    25% {
        box-shadow: 0 -3em 0 -.5em #222, 2em -2em 0 0 #222, 3em 0 0 .2em #222, 2em 2em 0 0 #222, 0 3em 0 -.5em #222, -2em 2em 0 -.5em #222, -3em 0 0 -.5em #222, -2em -2em 0 -.5em #222;
    }
    37.5% {
        box-shadow: 0 -3em 0 -.5em #222, 2em -2em 0 -.5em #222, 3em 0 0 0 #222, 2em 2em 0 .2em #222, 0 3em 0 0 #222, -2em 2em 0 -.5em #222, -3em 0 0 -.5em #222, -2em -2em 0 -.5em #222;
    }
    50% {
        box-shadow: 0 -3em 0 -.5em #222, 2em -2em 0 -.5em #222, 3em 0 0 -.5em #222, 2em 2em 0 0 #222, 0 3em 0 .2em #222, -2em 2em 0 0 #222, -3em 0 0 -.5em #222, -2em -2em 0 -.5em #222;
    }
    62.5% {
        box-shadow: 0 -3em 0 -.5em #222, 2em -2em 0 -.5em #222, 3em 0 0 -.5em #222, 2em 2em 0 -.5em #222, 0 3em 0 0 #222, -2em 2em 0 .2em #222, -3em 0 0 0 #222, -2em -2em 0 -.5em #222;
    }
    75% {
        box-shadow: 0 -3em 0 -.5em #222, 2em -2em 0 -.5em #222, 3em 0 0 -.5em #222, 2em 2em 0 -.5em #222, 0 3em 0 -.5em #222, -2em 2em 0 0 #222, -3em 0 0 .2em #222, -2em -2em 0 0 #222;
    }
    87.5% {
        box-shadow: 0 -3em 0 0 #222, 2em -2em 0 -.5em #222, 3em 0 0 -.5em #222, 2em 2em 0 -.5em #222, 0 3em 0 -.5em #222, -2em 2em 0 0 #222, -3em 0 0 0 #222, -2em -2em 0 .2em #222;
    }
}
@keyframes loader {
    0%,
    100% {
        box-shadow: 0 -3em 0 .2em #222, 2em -2em 0 0 #222, 3em 0 0 -.5em #222, 2em 2em 0 -.5em #222, 0 3em 0 -.5em #222, -2em 2em 0 -.5em #222, -3em 0 0 -.5em #222, -2em -2em 0 0 #222;
    }
    12.5% {
        box-shadow: 0 -3em 0 0 #222, 2em -2em 0 .2em #222, 3em 0 0 0 #222, 2em 2em 0 -.5em #222, 0 3em 0 -.5em #222, -2em 2em 0 -.5em #222, -3em 0 0 -.5em #222, -2em -2em 0 -.5em #222;
    }
    25% {
        box-shadow: 0 -3em 0 -.5em #222, 2em -2em 0 0 #222, 3em 0 0 .2em #222, 2em 2em 0 0 #222, 0 3em 0 -.5em #222, -2em 2em 0 -.5em #222, -3em 0 0 -.5em #222, -2em -2em 0 -.5em #222;
    }
    37.5% {
        box-shadow: 0 -3em 0 -.5em #222, 2em -2em 0 -.5em #222, 3em 0 0 0 #222, 2em 2em 0 .2em #222, 0 3em 0 0 #222, -2em 2em 0 -.5em #222, -3em 0 0 -.5em #222, -2em -2em 0 -.5em #222;
    }
    50% {
        box-shadow: 0 -3em 0 -.5em #222, 2em -2em 0 -.5em #222, 3em 0 0 -.5em #222, 2em 2em 0 0 #222, 0 3em 0 .2em #222, -2em 2em 0 0 #222, -3em 0 0 -.5em #222, -2em -2em 0 -.5em #222;
    }
    62.5% {
        box-shadow: 0 -3em 0 -.5em #222, 2em -2em 0 -.5em #222, 3em 0 0 -.5em #222, 2em 2em 0 -.5em #222, 0 3em 0 0 #222, -2em 2em 0 .2em #222, -3em 0 0 0 #222, -2em -2em 0 -.5em #222;
    }
    75% {
        box-shadow: 0 -3em 0 -.5em #222, 2em -2em 0 -.5em #222, 3em 0 0 -.5em #222, 2em 2em 0 -.5em #222, 0 3em 0 -.5em #222, -2em 2em 0 0 #222, -3em 0 0 .2em #222, -2em -2em 0 0 #222;
    }
    87.5% {
        box-shadow: 0 -3em 0 0 #222, 2em -2em 0 -.5em #222, 3em 0 0 -.5em #222, 2em 2em 0 -.5em #222, 0 3em 0 -.5em #222, -2em 2em 0 0 #222, -3em 0 0 0 #222, -2em -2em 0 .2em #222;
    }
}


/*CURRENT STYLES**/


:root {
    /* Typography - Size */
    --font-size-display: 36px;
    --font-size-h1: 32px;
    --font-size-h2: 28px;
    --font-size-h3: 26px;
    --font-size-h4: 22px;
    --font-size-h5: 20px;
    --font-size-h6: 18px;

    --font-size-base: 16px;
    --font-size-s: 14px;
    --font-size-xs: 12px; 
 /* Color  */
    --color-primary: #524E9C;
    --color-primary-bg:  #524e9c;
    --color-white:#ffffff;
    --color-gray:#BCBEC0;
    --color-green:#18830E;
    --color-red:#C42C34;
    --color-sol-blue:#F1F5F7;
    --color-orange:#EF831E;
    --color-text-black:#334152;
     --color-table-headerBg:#C4C4C4;  
     --color-gray-past:#BCBEC0;
}
/*Generic*/
body, select, textarea, input {
    color: #384142;
}
.selectbox, select, .width-250{
width:250px!important;
font-size: 80%;
}
.ml-30{
margin-left: 30px!important;
}
.pd-15{padding: 10px 15px!important;}
a, a:link, a:visited, .EditableTable tr.RowControlGroup a, a:hover,
a.ListNavigation_PageNumber:link, span.ListNavigation_CurrentPageNumber, span.ListNavigation_Ellipsis,
a.ListNavigation_Previous:link, a.ListNavigation_Next:link, span.ListNavigation_DisabledNext, span.ListNavigation_DisabledPrevious,
a.ListNavigation_PageNumber:link:hover, span.ListNavigation_CurrentPageNumber:hover, span.ListNavigation_Ellipsis:hover
{
color: var(--color-primary);
color:#524E9C;
}
.Header_Menu a:hover, .Header_Menu a:link:hover, .Header_Menu a:visited:hover, .desktop a:hover, .desktop a:link:hover {
    color: inherit;
}
.select, .Tabs__content.active .select {
    padding-left: 15px;
    height: 40px;
    width: 200px!important;
    border-radius: 8px;
        color: #838080;
}
.Tabs__content.active  .select.report-select{
width: 90px!important;
}
table.TableRecords .select.width-110, .Tabs__content.active  .select.width-110{
width: 110px!important;
}
table.TableRecords .select.width-150, .Tabs__content.active  .select.width-150{
width: 150px!important;
}
table.TableRecords .select.width-250, .Tabs__content.active  .select.width-250,.select.width-250 {
width: 250px!important;
}
.select.width-250{text-align: left;}
.border-radius-8, .selectbox, .CardSimple.Card{
border-radius: 8px;
}
.Button.Is_Default,.Button.ButtonDefault:hover, .Button.Button.Is_Default:hover,
button.applyBtn.border-radius-8, button.cancelBtn.border-radius-8{
 box-shadow: none;
    font-size: 100%;
    background-color:#524E9C;
    border-color:#524E9C;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color:#fff;
}
button.applyBtn.border-radius-8, button.cancelBtn.border-radius-8{font-size: 100%;}
/*Placeholder Style*/
::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
    line-height: 30px;
     color: #B2B0B0;
}
::-moz-placeholder {
    line-height: 30px;
    color: #B2B0B0;
}
 :-ms-input-placeholder {
    line-height: 30px;
    color: #B2B0B0;
}
/*Table**/

.TableRecords .TableRecords_Header{
background:var( --color-table-headerBg) ;
background:#C4C4C4;
background-color: #ddddddbf;
background-color: rgba(221, 221, 221, 0.7490196078431373);
color:#334152;
color:var(--color-text-black);
    font-size: 100%;
     width: 10%;
        vertical-align: top;
            text-transform: none;

}
.TableRecords_OddLine, .TableRecords_EvenLine {
    border-bottom: none;
    padding: 12px;
    vertical-align: middle;
}
.TableRecords_Wrapper .Filters_Wrapper {
    background: #DEF0F5;
    border-radius: 8px;
    margin-bottom: 10px;
}
.TableRecords_OddLine:not(:first-child), .TableRecords_EvenLine:not(:first-child) {
    border-left: none;
}
.Filters_Wrapper input.search_field{
background: #FFFFFF;
    border: 1px solid #DDDDDD;
    box-sizing: border-box;
    border-radius: 8px;
    width:250px;
        height: 36px;
}


table.TableRecords {
   margin-top:0;
    border: none;
    box-shadow: none;
    padding: 0;
}
th.SortColumns_Sorted.ASC::after, th.SortColumns_Sorted.Inc.ASC > div::after,.TableRecords .TableRecords_Header .fa.fa-info-circle{
    color: var(--color-primary);
    color: #524E9C;
}
.SortColumns_Sorted:hover,.SortColumns_Sortable:hover {
    text-decoration: none;
}
 a.Button, a.search-btn, .Button{
    transition: box-shadow 500ms;
 }
 .ListNavigation_Wrapper a.ListNavigation_Previous, .ListNavigation_Wrapper a.ListNavigation_Next,
  .ListNavigation_Wrapper a.ListNavigation_PageNumber,  .ListNavigation_Wrapper span.ListNavigation_CurrentPageNumber,
  .ListNavigation_Wrapper span.ListNavigation_DisabledPrevious, .ListNavigation_Wrapper span.ListNavigation_DisabledNext,
  .ListNavigation_Wrapper .carousel .carousel-arrow-left, .ListNavigation_Wrapper .carousel .carousel-arrow-right{
     border-radius: 50%;
     box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
     transition: box-shadow 500ms;
     padding: 5px 12px;
 }
 span.ListNavigation_CurrentPageNumber,.carousel .carousel-arrow-left, .carousel .carousel-arrow-right{
     color:var(--color-white);
     background: var(--color-primary);
     background: #524E9C;
     color:#fff;
 }
 a.ListNavigation_Next{
    margin-right: 10px;
 }
/*Generic Header */
.Main_Header_Title{
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 22px;
line-height: 26px;
display: flex;
align-items: center;
color:#334152;
color: var(--color-text-black);
}
.Title_Section {
    background-color: transparent;
    background-position: center center;
    background-size: cover;
    box-shadow: none;
    color: #333;
    margin-top: 0;
    padding: 95px 20px 20px 20px;
}
/*Elements*/
.InfoTooltip .tooltipstered, .ListItem .tooltipstered{
color:var(--color-primary);
color:#524E9C;
}
.daterangepicker td.active, .daterangepicker td.active:hover,
.daterangepicker .ranges li.active{
background-color: var(--color-primary);
background-color:#524E9C;
color:#fff;
}
.input_round.input{
background: #FFFFFF;
border: 2px solid #DDDDDD;
box-sizing: border-box;
border-radius: 8px;
}
.Button.button_icon.Is_Default{
    min-width: 32px;
}
input.Button, select.SmartInput  {
    line-height: 20px;
    height: 40px;
}
.Form.form-top label.label-proceed {
    display: inline;
    color: #fff;
    font-size: 100%;
    padding-bottom: 20px;
}
/*Top Nav*/
.Header .Header_background {
    background-color: #fff;
    border-bottom-color: #fff;
}
.phone input.Button:focus, .tablet input.Button:focus, .phone input.Button, .tablet input.Button {
    height: 40px;
    line-height: 32px;
}
.Header {
    height: 60px;
    border-bottom: none;
    top:55px;
    position: absolute;
}
.Header .Application_Title img {
    max-height: 55px;
    vertical-align: middle;
    margin-bottom: 8px;
}
.Application_Menu {
    background: transparent;
}
.Menu_TopMenuActive{
background: #6A6C6D;
border-top: 4px solid #dab702;
    height: 59px;
}
.Menu_TopMenu a:link, .Menu_TopMenu a:visited, .Menu_TopMenu a,.Menu_TopMenu a:link:hover, .Menu_TopMenu a:visited:hover, .Menu_TopMenu a:hover{
color:var( --color-text-black);
color:#334152;
}
 .desktop.big .Menu_TopMenu a,
 .desktop.hd .Menu_TopMenu a{
padding: 5px 22px!important;
   font-size: 100%;
}
.tablet.landscape .widget-dashboard .card.card-sectioned {padding: 20px;}
.tablet.landscape span.credit {
    font-size: 100%;
}
.tablet.landscape span.credit-status {
    margin-top: 0;
    text-align: center;
}
.tablet.landscape  .widget-dashboard .title {
    font-size: 100%;
    margin-left: 0;
}

.tablet.landscape  span.title-main.title-right {
    font-size: 130%;
    line-height: 40px;
}
 .desktop .Menu_TopMenu a{
    padding: 5px 10px!important;
    font-size: 100%;
}
.Header_Menu, .Header_Menu .ListRecords {
    display: block;
}
.desktop.small.UseSidebar .Others_Menu {
    margin-right: 25px;
}
.Menu_DropDownArrow {
    border-width: 5px 5px 0;
}

.Menu_TopMenuActive {
    border-top-color:var( --color-primary);
    border-top-color:#524E9C;
}
.Menu_TopMenu.Menu_TopMenuActive a:link, .Menu_TopMenu.Menu_TopMenuActive a:visited, 
.Menu_TopMenu.Menu_TopMenuActive a, .Menu_TopMenu.Menu_TopMenuActive a:hover{
color:#fff;
}
.Menu_TopMenu .Menu_DropDownArrow, .Menu_TopMenu:hover .Menu_DropDownArrow, .Menu_TopMenu .Menu_DropDownArrow:hover,
.Menu_DropDownButton.open .Menu_TopMenu .Menu_DropDownArrow, 
.Menu_DropDownButton.open .Menu_TopMenu .Menu_DropDownArrow:hover {
    border-top-color: #000;
}
.Menu_DropDownButton.open .Menu_TopMenu a {
    color: #000;
}
.Menu_TopMenuActive span.Menu_DropDownArrow, .Menu_TopMenuActive span.Menu_DropDownArrow:hover,
.Menu_DropDownButton.open .Menu_TopMenuActive:hover .Menu_DropDownArrow,
.Menu_TopMenuActive:hover span.Menu_DropDownArrow,.Menu_DropDownButton.open .Menu_TopMenuActive .Menu_DropDownArrow {
 border-top-color: #fff;
}
.Menu_DropDownPanel {
    background-color:var( --color-primary);
    background-color:#524E9C;
}
div.Menu_DropDownPanel a, div.Menu_DropDownPanel a:link, div.Menu_DropDownPanel a:visited {
    color: #FFF;
        padding: 7px;
}
/*CSS for List Navigation to hide next and previous text*/
.ListNavigation_Next, .ListNavigation_DisabledNext {
    visibility: hidden;
    display: none;
}

.ListNavigation_Previous, .ListNavigation_DisabledPrevious {
    visibility: hidden;
       display: none;
}

.ListNavigation_Next:after, .ListNavigation_DisabledNext:after {
    font-family: FontAwesome;
    visibility: visible;
    content: '\f054';
    font-size:16px;   
}

.ListNavigation_Previous:after, .ListNavigation_DisabledPrevious:after {
    font-family: FontAwesome;
    visibility: visible;
    content: '\f053';
    font-size: 16px;
}
.ListNavigation_Wrapper a.ListNavigation_Next, .ListNavigation_Wrapper a.ListNavigation_Previous,
 .ListNavigation_Wrapper a.ListNavigation_DisabledPrevious,  .ListNavigation_Wrapper a.ListNavigation_DisabledNext
{
    font-size: 0px;
    visibility: visible;
    padding: 0px 5px;
    padding-right: 11px;
    padding-bottom: 0;
    height: 33px;
    padding-top: 6px;
}
/*Modal Popup */
.ModalContainer{
background: #fff;
    border: 1px solid #e4e4e4;
    border: 1px solid #dddedf;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    /* bottom: 0; */
    box-shadow: 0 1px 5px 2px rgba(50, 50, 50, .1);
    /* left: 50%; */
    max-width: 600px;
    max-height: 350px;
    padding: 30px 20px;
    /* position: fixed; */
    /* text-align: center; */
    /* -webkit-transform: translateX(-50%) translateY(100%) translateZ(0); */
    -ms-transform: translateX(-50%) translateY(100%) translateZ(0);
    /* transform: translateX(-50%) translateY(100%) translateZ(0); */
    -webkit-transition: all .3s;
    transition: all .3s;
    width: 100%;
    z-index: 11;
}
body.ModalOpened .ModalContainer {
    display: block;
    top: 20%;
}
.widget-dashboard .card.card-sectioned {
    background: #fff;
    width: 49%;
    display: inline-block;
    margin: 10px 0;
    border-radius: 8px;
    padding: 30px;
}
.mgL-2{
    margin-left:2%!important;
}
.widget-dashboard .title{
    font-weight: bold;
    font-size: 120%;
    line-height: 21px;
    margin-left: 10px;
}
.widget-dashboard .columns-item {
    display: inline-block;
    width: 33%;
}
span.credit-status {
    display: block;
    font-weight: bold;
    font-size: 100%;
    line-height: 14px;
    margin-top: 10px;
    text-align: center;
}
span.credit {
    font-size: 130%;
    line-height: 30px;
    display: block;
    text-align: center;
}
.Footer{margin-top:30px;}
.title-right{
    position: absolute;
    right: 0;
    top: 0px;
}
a.Button{
    font-size:100%;
}
.title-main{
    font-size: 140%;
    line-height: 45px;
    font-weight: 600;
}
.processing{color: #FFA500;}
.approved{color: #3972D5;}
.paid{color: #008000;}

.TP-endorse .FA_btn_warpper{
    display: inline-block;
    width: 32%;
}
.phone .TP-endorse .FA_btn_warpper,
.tablet .TP-endorse .FA_btn_warpper{
  display:block;
    width: 100%;
    margin-right:0;   
   }
.mr-2{margin-right:2%;}
.pos-relative{
    position: relative;
}
.section-border{
    padding-bottom: 15px;
    border-bottom: 1px solid #DDDDDD;
}
div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar, div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar{
background: var( --color-primary);
background:#524E9C;
}
div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar, div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar {
    height: 40px;
}
div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close, div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close {
    top: 10px;
}
div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-title, div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-title {
    font-size: 16px;
    font-weight: 600;
}

.Button, a.Button,
.Button:hover:active, a.Button:hover:active,
.Button:hover, a.Button:hover{
    background: var( --color-primary)!important;
    background:#524E9C!important;
    color: #fff!important;
    border-radius: 4px;
    cursor: pointer;
    border-bottom-width: 0;
    border: none;
    padding-top: 5px;
    height: 40px;
    font-size: 100%;
}
a label.OSInline {
    cursor: pointer;
}
span.fa.fa-fw.fa-trash{color:#BF1601;}

.Form input.ReadOnly:not(.Not_Valid), .Form textarea.ReadOnly:not(.Not_Valid),
.Form select.ReadOnly:not(.Not_Valid){
    background-color: #fff;
    border: none;
    border: 2px solid #ddd;
    box-shadow: none!important;
            border-radius: 4px;
            font-size: 100%;
            height:40px;
}
textarea:focus, select:focus, input:focus{
    background-color: #fff;
    border: none;
    border: 2px solid var( --color-primary);
    border:2px solid #524E9C;
    box-shadow: none!important;
            border-radius: 4px;
}

input[type="text"].Not_Valid ~ span.fa.fa-fw {
    color: #bf1601;
    top: 38px;
}
.pos-relative.input-icon input[type="text"].Not_Valid:focus ~ .fa.fa-fw{
 color: #bf1601;
    top: 38px;
}
 select:focus{
    border-radius: 8px 8px 0px 0px!important;}
.SectionExpandable.expanded .SectionExpandable_header {
    background: var( --color-primary);
    background:#524E9C;
    color: #fff;
}
.SectionExpandable.expanded .SectionExpandable_header .Heading2,
.expanded .SectionExpandable__icon.Heading2 > .fa {
    color: #fff;
    font-weight: 600;
}
.divider {
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
    position: relative;
}
.Button[disabled], .Button:disabled, .Button.Is_Default[disabled], .Button.ButtonDefault[disabled], .Button.Is_Default:disabled, .Button.ButtonDefault:disabled, .Button.Danger[disabled], .Button.Danger:disabled, .Button.Success[disabled], .Button.Success:disabled {
    background-color: #ccc!important;
    border: 0;
    box-shadow: none;
    color: #999;
    pointer-events: none;
}
.divider:before {
    position: absolute;
    content: '';
    bottom: -3px;
    width: 30px;
    max-width: 100%;
    margin: 0 auto;
    height: 4px;
    background: var( --color-primary)!important;
    background:#524E9C!important;
    border-radius: 1px;
}
.attach-section{
    margin-top: 10px;
    padding: 0;
    border-radius: 8px;
}

.widget-dashboard span.fa.fa-fw.fa-folder.fa-2x, .widget-dashboard span.fa.fa-fw.fa-file-text.fa-2x{
    color:var( --color-primary);
    color:#524E9C;
}
.disabled-text{
   /* color:#9098A9;*/
   color:#334152;
}
.add-trainee{
    position: absolute;
    right: 0;
        top: 20px;
}
.Filters_Wrapper {
    background: #DEF0F5;
    line-height: 32px;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    margin-top: 10px;
}
.table-container{
    background: #fff;
    padding: 15px;
    border-radius: 8px;
}
.Tabs_body {
    background-color: transparent;
    padding: 0;
}
.pos-relative.input-icon .fa.fa-fw{
    display: inline;
    position: absolute;
    top: 41px;
    color:var( --color-primary);
    color:#524E9C;
    right: 5px;
}
.status-badge{
color: var(--color-white);
color:#fff;
    line-height: 1;
    display: inline-block;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 2px solid transparent;
    transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;
    font-size: 100%;
    padding: 5px;
    border-radius: 4px;
    text-transform: uppercase;
}
.SectionExpandable {
    background-color: #fff;
    border: none;
    box-shadow: none;
}
a.button.Button:before {
    font-family: FontAwesome;
    display: inline-block;
    padding-right: 10px;
    color: var( --color-primary)!important;
    color:#524E9C!important;
    vertical-align: bottom;
    font-size:80%;
    width: auto;
    height: auto;
    padding: 0;
    -webkit-transition: transform .5s ease;
    -o-transition: transform .5s ease;
    transition: transform .5s ease;
    position: absolute;
    content: "\f093";
    left: 20px;
}
a.button.Button{
padding-left: 30px;
background: transparent!important;
    color: var( --color-primary)!important;
    color:#524E9C!important;
    box-shadow: none;
}
.qq-upload-button {
    margin-bottom: 15px;
}
.qq-upload-list {

    display: none;
}
.Form a.SmartInput_Undo {
    display:none!important;
    margin-left: -16px;
    padding: 2px 5px;
    text-decoration: none;
    display: none;
    position: absolute;
    left: 0;
}
.InfoTooltip {
    margin-left: 2px!important;
}
.InfoTooltip span.fa.fa-fw.fa-info-circle{
font-size: 80%;
}
.success-box{
color: #fff!important;
    background: #2A843C;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-weight: 600;
}
.qq-upload-button {
    display: block;
    text-align: center;
    margin: 0;
    float: right;
    margin-bottom: 10px;
        position: absolute!important;
    right: -13px;
    top: -40px;
}
.SortColumns_Sorted , .SortColumns_Sortable{
    color: var(--color-text-black);
    color:#334152;
    font-weight: 600;
    position: relative;
}
.SortColumns_Sorted:after {
    content: "\f15e";
}
.SortColumns_Sorted:after,.SortColumns_Sortable:after {
    font-family: FontAwesome;
    display: inline-block;
    padding-right: 10px;
    color: var(--color-primary);
    color:#524E9C;
    vertical-align: bottom;
    font-size: 12px;
    width: auto;
    height: auto;
    padding: 0;
    -webkit-transition: transform .5s ease;
    -o-transition: transform .5s ease;
    transition: transform .5s ease;
    position: absolute;
    right: -15px;
    top: 0px;
}
/**.SortColumns_Sortable:after {
    content: "\f15e";
}**/
.FA_btn_warpper{
    background: white;
    display: block;
    padding: 30px 10px;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 8px;
    border: 2px solid #ddd;
}
.FA_btn_warpper .Fa_count{
display: block;
    font-weight: bold;
    font-size: 120%;
    margin-bottom: 10px;
}
.active_btn.FA_btn_warpper.BtnProcessed-Dashboard, .active_btn.FA_btn_warpper.BtnProcessed-Dashboard:hover{
    border-color:#00A65A!important; 
    border-width: 4px;
}
.active_btn.FA_btn_warpper.BtnPending-Dashboard,.active_btn.FA_btn_warpper.BtnPending-Dashboard:hover{
/* background:#FFA500 ; *//* color: #fff!important; */border-width: 4px;border-color:#FFA500!important;}
.active_btn.FA_btn_warpper.BtnOutstanding-Dashboard,.active_btn.FA_btn_warpper.BtnOutstanding-Dashboard:hover{
    border-color: #BF1601!important;
    border-width: 4px;
}

.FA_btn_warpper.BtnProcessed-Dashboard, .FA_btn_warpper.BtnProcessed-Dashboard:hover{
    color:  #00A65A!important;
}
.FA_btn_warpper.BtnPending-Dashboard, .FA_btn_warpper.BtnPending-Dashboard:hover{
color:#FFA500 !important;
    }
.FA_btn_warpper.BtnOutstanding-Dashboard,.FA_btn_warpper.BtnOutstanding-Dashboard:hover{
color: #BF1601!important;
}
.dashboard-section{
    background: #fff;
    width: 49%;
    display: inline-block;
    border-radius: 8px;
}
.active_btn.FA_btn_warpper.BtnProcessed, .active_btn.FA_btn_warpper.BtnProcessed:hover{
    background:  #00A65A;
    color: #fff!important;
    border-color:#00A65A; 
}
.active_btn.FA_btn_warpper.BtnPending,.active_btn.FA_btn_warpper.BtnPending:hover{
background:#FFA500 ;
    color: #fff!important;
    border-color:#FFA500 ;
    }
.active_btn.FA_btn_warpper.BtnOutstanding,.active_btn.FA_btn_warpper.BtnOutstanding:hover{
background: #BF1601;
    color: #fff!important;
    border-color: #BF1601;
}
.FA_btn_warpper.BtnProcessed, .FA_btn_warpper.BtnProcessed:hover{
    color:  #00A65A!important;
}
.FA_btn_warpper.BtnPending, .FA_btn_warpper.BtnPending:hover{
color:#FFA500 !important;
    }
.FA_btn_warpper.BtnOutstanding,.FA_btn_warpper.BtnOutstanding:hover{
color: #BF1601!important;
}
.new_popup .MainPopup{
text-align: center;
}
.Form label {
color: #333;
font-size: 100%;
}
ul.os-internal-ui-autocomplete a.os-internal-ui-state-hover {
    border-top: 1px solid #999999;
    border-bottom: 1px solid #999999;
    background-color: #1E5AA3;
    color: white !important;
}

.Feedback_Message_Wrapper {
    -moz-animation: cssAnimation 0s ease-in 3s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 3s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 3s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}
br{content:' ';}
br:after{content:' ';}
.Feedback_AjaxWait {
    color: #222;
    font-size: 110%;
    font-weight: bold;
}
.Feedback_AjaxWait {
    background-color: #fff;
    border-radius: 0;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    top: 50%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .2);
    color: var(--color-primary);
    height: 75px;
    padding: 16px 20px 10px 20px;
    right: 50%;
}
.Feedback_AjaxWait .Loader{margin-left: 30px;}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
.select.width-100{width:100%!important;}
.ValidationMessage {
    color: #bf1601;
    display: block;
    font-size: 11px!important;
    text-align: left;
}
input[type="checkbox"]:checked:before {
    background-color: var(--color-primary);
    background-color:#524E9C;
}
input[type="checkbox"]:after {
    border: 3px solid #FFF;
    border-right: 0;
    border-top: 0;
}
.WizardStep:first-of-type:before {
    border: 2px solid #7d7d7d;
    margin-left: auto;
    z-index: 1;
}
.WizardParent {
  margin: 0 10%;
    padding: 0;
    width: 80%;
    counter-reset: step;
}
.WizardStep.ActiveStep {
    color: var(--color-primary);
    color:#524E9C;
        background: transparent;
}
.WizardStep {
    list-style-type: none;
    width: auto;
    font-size: 80%;
    position: relative;
    text-align: center;
    color: #7d7d7d;
    padding-right: 0;
    line-height: 30px;
    background: transparent;
}
.WizardStep.ActiveStep:before {
    
    border-color: var(--color-primary);
    background: var(--color-primary);
    border-color:#524E9C;
    background:#524E9C;
    color: #fff;
}
.WizardStep:before {
   width: 30px;
    height: 30px;
    content: counter(step);
    counter-increment: step;
    line-height: 30px;
    border: 2px solid #7d7d7d;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: white;
    left: 0;
    position: relative;
    top: 0;
    z-index: 1;
}
.WizardStep:first-child:after {
    content: none;
}
.WizardStep:last-of-type:after {
    background-color: #ddd;
}
.WizardStep:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #ddd;
    top: 15px;
    left: -50%;
    z-index: -1;
    transform: rotate(180deg);
    border-right: none;
    border-top: none;
}
.WizardStep.Past {
    background: transparent;
    color:var(--color-primary);
    color:#524E9C;
}
.WizardStep.Past:before {
     border-color: var(--color-primary);
    background: var(--color-primary);
    background:#524E9C;
    border-color:#524E9C;
    color: #fff;
}
.WizardStep.ActiveStep:after {
    border-color: var(--color-primary);
    background: var(--color-primary);
    border-color:#524E9C;
    background:#524E9C;
    color: #fff;
}

.WizardStep.Past:after {
    background-color: var(--color-primary);
    background-color:#524E9C;
}
.WizardStep.ActiveStep + .WizardStep:after {
    background-color: #ddd;
}
button:focus, .qq-upload-button:focus,.qq-upload-button-focus {outline:0;}
th.SortColumns_Sortable::after, th.SortColumns_Sortable.Inc > div::after{
/**display:none;**/
}
.things_ToDo .columns-item {
    width: 49%;
    display: inline-block;
    vertical-align: text-top;
}
.things_ToDo .fa{
color:var(--color-primary);
color:#524E9C;
}
.Header_Title{padding-left: 0;}
.things_ToDo .fa.fa-fw.fa-circle{
font-size: 8px;
vertical-align: middle;
}
.things_ToDo .bg_things{
    background: #fff;
    padding: 20px;
    border-radius: 8px;
}
.divider label.OSFillParent, .divider label {
    font-size: 100%;
    margin-top: 15px;
}
.mb20{margin-bottom: 20px;}
.mb15{margin-bottom: 15px;}
div.calendar {
    top: 110px!important;
}
div.calendar thead .title,div.calendar .button,div.calendar tfoot .ttip,
div.calendar tbody td.selected, div.calendar tbody th.selected,
div.calendar tbody .rowhilite td.selected ,
div.calendar thead .button.notclose.hilite, div.calendar thead .hilite  {
    background: rgb(82, 78, 156);
    color:#fff
}

div.calendar thead .button.notclose {
    color: #fff;
    line-height: 2;
}
div.calendar tfoot .ttip {
    padding: 6px 2px;
}
.Button_Icon.Button[disabled] {
    opacity: 0.5;
}
ul.os-internal-ui-autocomplete{
max-height: 80px;
    overflow-y: scroll;
    width: 94%!important;
}
.tooltipster-content{
font-size:80%;
font-family: Arial, sans-serif;
    font-size: 80%;
    line-height: 16px;
    padding: 8px 10px;
}
.tooltipster-base {
    z-index: 15;
    border-radius: 10px;
    border: 1px solid #333;
    border-width: 2px;
    color: #666666;
     width:20%;
}
.Text_small {
    font-size: .9em !important;
}
.Balloon_content {
    padding: 0;
}
.Balloon_footer {
    border-top: 1px solid #ccc;
    padding: 6px 6px 0px 6px;
}
.tooltipster-base.Balloon .tooltipster-arrow-bottom span, 
.tooltipster-base.Balloon .tooltipster-arrow-bottom-right span,
.tooltipster-base.Balloon .tooltipster-arrow-bottom-left span {
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-bottom: 10px solid;
    top: -7px;
}
.tooltipster-base.Balloon.tooltipster-fade.tooltipster-fade-show {
    border: 1px solid #ddd;
   border-width: 1px;
   /*right: 20px!important;
    left: auto!important;*/
}
span.tooltipster-arrow-border {
    border-color: #ddd!important;
}
/*.Menu_TopMenu a {
    padding: 0px 22px!important;
}
.Header {
    height: 50px;
    border-bottom: none;
}
.Header .Application_Title img {
    max-height: 40px;
    vertical-align: middle;
    margin-bottom: 4px;
}
.Menu_TopMenuActive {
    height: 50px;
}
.Login_Info {
    margin-top: 0;
}*/
.Menu_DropDownArrow {
   display: block!important;
}
.Title_Section {
    padding: 30px 20px 20px 20px;
}
select:focus {
    border-radius: 8px 8px!important;
}
.things_ToDo .columns-item + .columns-item {
    width: 40%;
}
.things_ToDo .columns-item {
    width: 60%;
    display: inline-block;
    vertical-align: text-top;
}
.confirm-page-header{
border: 1px solid #524E9C;
    color: #524E9C;
    padding: 10px;
    border-radius: 8px;
}
td.rb-hightlight a,  td.rb-hightlight,tr.rb-hightlight td{
    color: #BF1601;
    font-weight: 600;
}
.rb-hightlight + .InfoTooltip.OSInline
 .fa-info-circle:before {
    content: "\f071";
}
.rb-hightlight + .InfoTooltip.OSInline
 .fa-info-circle {
   vertical-align: top;
    margin-top: 5px;
     color: #BF1601;
}
.desktop:not(.small).UseSidebar .Content {
    margin-right: 0;
}
.UseSidebar .Content {
    padding-top: 0;
}

.UseSidebar .Title_Section {
    margin: 0 20px 0 20px;
    padding: 40px 20px 20px 20px;
}
.MainContent {
    min-height: 100%;
    padding: 20px 25px 20px 30px;
    padding-bottom: 60px;
}

 /* 
html {
  background: lightgrey;
  height: 100%;
  overflow: hidden;
}
body {
  height: 100%;
  overflow-y: scroll;

}*/

body::-webkit-scrollbar {
    width: 0.2em;
}


body::-webkit-scrollbar-thumb {
 background-color: #524E9C;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.IconBadge .IconBadge_number {
    background-color: #524E9C;
    position: absolute;
    top: 6px;
    right: -7px;
    text-align: center;
    font-size: 9px;
    padding: 5px 3px;
    line-height: .9;
    border-radius: 4px;
}
.IconBadge span.fa {
    font-size: 16px;
    color: #524E9C;
}
div.calendar thead .title {
font-size: 11px;
    line-height: 1;
    text-align: center;
    padding-left: 30px;
    width: auto;
}
.section-pdf-title{
  background: #524E9C;
color: #fff;
font-size: 100%;
font-weight: bold;
padding: 10px;
  }

@media print {
@page {
    margin: 0;
}
.Warning-message{display:none;}
.MainContent {
    min-height: 100%;
    padding: 20px 25px 20px 30px;
    padding-bottom: 60px;
    padding-top: 0;
}
  body {
    color: black;
    -webkit-print-color-adjust: exact !important;
    background-color:#FFFFFF !important;
  }


       .section-pdf-title1{
    -webkit-print-color-adjust: exact !important;
    background-color:#DEF0F5 !important;
    color: #000000!important;
    font-size: 100%;
    font-weight: 500;
    padding: 10px;
      text-align: left;
      }
      
    .SOA-Section .columns-item + .columns-item {
    text-align: right;
}
.SOA-Section .columns-item {
    width: 50%;
    Display: inline-block;
    vertical-align: top;
}

.Header .Application_Title img {
    max-height: 70px;
    vertical-align: middle;
    margin-bottom: 8px;
    text-align: left;
}
span.fa.fa-fw  {
 -webkit-print-color-adjust: exact !important;
    color:#000 !important;
}

.divider label {
font-size:110%; }
table {
    margin-top: 0;
    border: none;
    box-shadow: none;
    padding: 0px;
    width: 100%;
    margin:0px;
}
.UseSidebar .Title_Section {
    margin: 0 20px 0 20px;
    padding: 22px;
}
table thead th {
    background: #878787;
    color: #fff!important;
    font-size: 18px;
    width: 10%;
    vertical-align: top;
}

table thead th {
    border-bottom: solid 1px #DDD;
    color: #FFF;
    font-size: 110%;
    padding: 10px;
        text-transform: none;
}
table tbody td {
    padding: 10px;
    font-size: 80%;
    line-height: 16px;
    border-bottom: 1px solid #DDDDDD;
    vertical-align: middle;
}
.section-half1{
      display: inline-block;
    width: 70%;
      }
       .section-half2{
      display: inline-block;
    width: 30%;
      }
.background-table{
padding: 0px;
}
.phone .Header_Title, .Header_Title {
    left: 15px;
    position: absolute;
    right: 0;
    text-align: left;
}
.tablet a.Header_ButtonMenu, .phone a.Header_ButtonMenu {
    display: none;
}
}
.Page .Text_silver {
    color: gray;
    padding-top: 5px;
    margin-bottom: 10px;
}
.IconBadge {
    display: inline-block;
    margin-top: 5px;
    position: relative;
    margin-right: 15px;
}
.Warning-message{
margin-left: auto;
    margin-right: auto;
    text-align: left;
    background-color: #524E9C;
    position: absolute;
    top: 120px;
    width: 100%;
   /* z-index: -1;*/
    color: #fff;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
}
.Warning-message + .MainContent, .message-error-email + .MainContent{
    margin-top: 100px;
}

input[type='number'] {
    -moz-appearance:textfield;
}
.tablet a.Button_Icon.Button.title-right:hover:active,
.tablet .Button_Icon.Button.title-right:hover, 
.tablet a.Button_Icon.Button.title-right:hover,
.landscape.desktop.small a.Button_Icon.Button.title-right:hover{
    height: 38px;
    line-height: 36px;
    text-decoration: none;
    min-width: 60px;
    padding: 0 5px;
}
.tablet a.Button_Icon.Button.title-right,
.landscape.desktop.small  a.Button_Icon.Button.title-right{
height: 38px;
    line-height: 36px;
    text-decoration: none;
    min-width: 60px;
    padding: 0 5px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.font-weight-600{
font-weight: 600;
}
span.ListNavigation_Ellipsis {
    background: transparent;
    border: none;
    padding: 0;
}
.search-container  {
  background-image: url("/SFTS_Internet_Theme/image 4.png?4427");
 background-color: #3b3a3a;
      height: 230px;
}
.tablet.portrait .widget-dashboard .card.card-sectioned, .phone .widget-dashboard .card.card-sectioned{
width:100%;
margin-left: 0!important;
}
.tablet.portrait .widget-dashboard .card.card-sectioned.mgL-2, .phone.portrait .widget-dashboard .card.card-sectioned.mgL-2{
margin-left: 0!important;
}
.container-size.sizebar {
   background-color: #DEF0F5;
    font-size: 14px;
    font-weight: 400;
    top: 60px;
    opacity: 0.8;
    position: absolute;
    width: 100%;
    padding: 5px 10px;
}
.changetextsize-smaller {
    font-size: 80%;
    line-height: 0px;
}
.changetextsize-bigger {
    font-size: 90%;
    line-height: 0px;
}
.action-resize a:link, .action-resize a:visited {
    color: #080808;
}
.SectionExpandable .SectionExpandable_header .Heading2 {
    color: #524E9C;
    font-size:100%;
}
.mt-20{margin-top: 20px;}
div.Counter_Message {
    color: #000;
}
 .message-error-email + .MainContent .search-container {
    margin-top: 100px;
}
[class*='ie'] .TableRecords td{word-break: break-all;}
.mt-40{margin-top: 40px;}
.mt-10{margin-top: 10px;}
.firefox .Form select.ReadOnly,.firefox select,.firefox .select,.firefox .Tabs__content.active .select  {
    text-align: left;
} 
.user-info-container {
 font-size: 100%;
    margin-top: 5px;
    line-height: 1.2em;
    margin-left: .5rem !important;
    margin-right: 0.3rem !important;
 }
 .user-info-container .widget-heading {
 opacity: .8;font-weight: bold;display: block;
 }
 .user-info-container .widget-subheading{
 font-size: 100%;
 }
 .ml-10{margin-left: 10px;}
 
 /*Mobile menu**/
 .tablet a.Header_ButtonMenu, .phone a.Header_ButtonMenu, .Page.active .Header_ButtonMenu {
    color: #524E9C;
    margin-top: 6px;
}
.phone .Menu_TopMenu a:link,.phone .Menu_TopMenu a:visited,
.phone .Menu_TopMenu a,.phone .Menu_TopMenu a:link:hover,
.phone .Menu_TopMenu a:visited:hover,.phone .Menu_TopMenu a:hover,
.tablet .Menu_TopMenu a:link,.tablet .Menu_TopMenu a:visited,
.tablet .Menu_TopMenu a,.tablet .Menu_TopMenu a:link:hover,
.tablet .Menu_TopMenu a:visited:hover,.tablet .Menu_TopMenu a:hover{
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
}
.tablet .Application_Menu, .phone .Application_Menu {
    top: 90px;
     overflow-x: hidden;
    width: 50%;
}
.Page.active .Header_ButtonMenu .fa-bars:before {
    content: "\f00d";
}
.text-container-label{width: 20%;}
.text-container-value{width: 80%;}
/***Mobile steps claims****/
.course-info-left-container{margin-right: 1%;margin-top: 10px;width: 70%;}
.tablet .course-info-left-container, 
.phone .course-info-left-container{margin-right: 0;width: 100%;    margin-top: 10px;}
.fees-right-container{margin-top: 10px;width: 29%;}
.tablet .fees-right-container, .phone .fees-right-container{margin-top: 20px;width: 100%;}
.tablet  .things_ToDo .columns-item + .columns-item, .tablet  .things_ToDo .columns-item,
.phone  .things_ToDo .columns-item + .columns-item, .phone  .things_ToDo .columns-item{
    width: 100%;
}
.tablet .text-container-label, .phone .text-container-label {
    width: 20%;
    display: block;
}



/************************COURSE PAGE**************/

.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-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:  #524E9C;
    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: #fff;
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
}

.carousel .carousel-arrow-left:hover,
.carousel .carousel-arrow-right:hover {
    color: #fff;
}

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

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

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

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

.carousel .carousel-arrow-left .fa-fw,
.carousel .carousel-arrow-right .fa-fw {
    font-size: 140%;
}

.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;
}
.carousel-container .carousel-items{    padding: 0 50px;}
/* 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: #7a7a7e;
    border: 0;
    
}

.carousel .tns-nav > [aria-selected="true"] {
    background: #524E9C;
}

.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; }

@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
    -webkit-animation-name: jello;
    animation-name: jello;
    -webkit-transform-origin: center;
    transform-origin: center;
}

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
}

/*########## 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;
}
.course-main-title{
    display: block!important;
    display: -webkit-box!important;
    -webkit-line-clamp: 3;
    -moz-line-clamp: 3;
    -ms-line-clamp: 3;
    -o-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    -o-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    font-weight: 600;
    height: 38px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 100%;
    line-height: 19px;
    color: #524E9C;
}
.card-course{
    box-shadow: 0 2px 2px hsla(38,16%,76%,.5);
    background-color: #fff;
    color: #252422;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    border: 1px solid #524E9C;
    box-sizing: border-box;
    border-radius: 0px;
    padding: 20px;
    height: 250px;
}
.course-fee{display:block;}
.course-desc{
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size:100%;
    line-height: 16px;
    color: #231F20;
    max-height: 120px;
}
.cat-tag{font-size: 70%;}
.course-title-fees{
    text-align: right;
    padding: 15px;
}
.card-course-layout .card-title{padding:10px;}
.card-course-layout .card-content{padding:0px;}
.carsousel-header{
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 115%;
    line-height: 23px;
    color: #524E9C;
}
.course-code{
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 100%;
    line-height: 14px;
    color: #333;
    display: block;
}
.layout-side .content .ThemeGrid_Container{
    padding-top:0;
}
.desktop:not(.small).UseSidebar .Content {
    margin-right: 0;
}

.UseSidebar .Content {
    padding-top: 26px;
}
.display-block {
    display: block;
    height: auto;
}

.ribbon-top-right {
    top: -10px;
    right: -10px;
}
.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
}
.ribbon-top-right::before {
    top: 0;
    left: 0;
}
.ribbon-top-right::before, .ribbon-top-right::after {
    border-top-color: transparent;
    border-right-color: transparent;
}
.ribbon::before, .ribbon::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid #BF1601;
}
.ribbon-top-right span {
    left: -25px;
    top: 30px;
    transform: rotate(45deg);
}
.ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 10px 0;
    background-color: #BF1601;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    text-transform: uppercase;
    text-align: center;
    font-size: 12px;
}
.ribbon-top-right::after {
    bottom: 17px;
    right: 0;
}
.ribbon-top-right::before, .ribbon-top-right::after {
    border-top-color: transparent;
    border-right-color: transparent;
}
.ribbon::before, .ribbon::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid #BF1601;
}
span.Ribbon-feature.fa.fa-th:before{
    padding-right: 5px;
    padding-left: 15px;
}
.carousel .tns-item {
    cursor: -webkit-grab;
    padding-right: 36px!important;
}
.left-course-section{
    margin-left: 2%;
    margin-top: 10px;
    display: inline-block;
    vertical-align: top;
    width:23%;
}
.right-course-section{
    width: 75%;
    margin-top: 10px;
    display: inline-block;
    vertical-align: top;
}
.tablet  .left-course-section {
    margin-left: 2%;
    width: 38%;
}
.tablet .right-course-section {
    width: 60%;
}
.phone .right-course-section,
.phone .left-course-section{
    width:100%;
    margin-left: 0;
}
.ribbon-top-right::before {
    top: 0px;
    left: 20px;
}
.card-course {
    height: auto;
    padding-top: 0;
}
.course-main-title{
    font-size:120%;
    width: 80%;
}

.course-code {
      font-size: 100%;
}
.course-fee-wrapper{
    border-top: 1px solid #524E9C;
    padding: 10px 0;
    padding-top: 20px;
    font-size: 100%;
    padding-bottom: 0;
}
.Course-header{
    border-bottom: 1px solid #524E9C;
    height: auto;
    padding-bottom: 10px;
}
.SectionExpandable.expanded .SectionExpandable_content{
    padding: 15px 20px;
}
.SectionExpandable.expanded .SectionExpandable_header .Heading2{
    padding-left: 8px;
}
.ListRecords .disabled-text:first-child {
    border-top-color: transparent!important;
    padding-top: 0px!important;
}
.course-main-title {
     font-size:120%;
    width: 80%;
    line-height: 23px;
}
.course-main-title {
   height: 65px;
    max-height: 65px;
}
.card.card-sectioned.card-course{
    height: auto;
    padding-top: 0;
}
.card.card-sectioned.card-course {
    width: 100%;
    margin-left: 0;
}
    
.card.card-sectioned.card-course img{width: -webkit-fill-available;}
.edge .card.card-sectioned.card-course img, [class*='ie'] .card.card-sectioned.card-course img{width: -webkit-fill-available;width:100%;}
 
.course-list.course-list-layout .card.card-sectioned.card-course {
    width: 267px;
    background-color: #fff;
    height: auto;
    display: inline-block;
    margin-left: 15px;
    text-align: left;
    position: relative;
    vertical-align: top;
    padding: 0;
}

.footer-links .social-media-icons a,.Footer a, .Footer a:link, .Footer a:visited {
    text-decoration:none;
    color:#fff!important;
    font-size: 12px;
}
textarea, select, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
    font-size: 100%;
    height: 40px;
}

/*****************FOOTER**********************/
.footer-main {
    width: 100%;
    bottom:0;
    position:relative;
    background: rgb(47,23,77);
    background: -webkit-linear-gradient(rgba(47,23,77,1) 0%, rgba(26,0,57,1) 100%);
    background: -o-linear-gradient(rgba(47,23,77,1) 0%, rgba(26,0,57,1) 100%);
    background: linear-gradient(rgba(47,23,77,1) 0%, rgba(26,0,57,1) 100%);
    display:inline-block;
    font-weight:400;
    line-height:20px;
    margin-top:0px;
}
.Footer a.no-class-overide , 
.Footer a.no-class-overide :link,
.Footer a.no-class-overide :visited{
    font-size: inherit;
    color: inherit!important;
}

.Footer{
 background: rgb(47,23,77);
  text-align:center;
  width:100%;
  font-size: 100%;
}
.footer-links {
    display: inline-block;
}
.margin-top-base {margin-top: 16px!important;}
.footer-content {
    width: 90%;
    position: relative;
    margin: 0px auto 0px auto;
    max-width: 1600px;
}
.footer-logo img {
    max-width:220px;
    height:auto;
    margin: 15px;
}

.footer-copyright {
    width:100%;
    display:inline-block;
    text-align:center;
    padding:0px 10px;
    font-size: 80%;
    color: #ebebeb;
    /*opacity: 0.8;*/
    padding-bottom: 0;
}
input[type="checkbox"].ReadOnly,.Form input[type="checkbox"].ReadOnly:not(.Not_Valid) {
    height: 20px;
    border:none;
}
.mb-15{
    margin-bottom: 15px;
}
.footer-quick-links{margin: 20px 0;}
.footer-quick-links a{
    padding: 0px 10px;
    text-decoration: none;
    color: #fff;
    font-size: 0.9em;
    text-transform: uppercase;
}
.social-media-icons{margin: 40px 40px 30px 40px;}
.social-media-icons span.fa:hover {
    color: #D12F44;
}
.advisory-section{
   width: 45%;
    margin: 0px 28%;
    color: #fff;
    display: block;
}
.hidden {
    display: none;
}
.text-center {
  text-align: center;
}
.color-white {
  color: #fff;
}
.box-container {
  align-items: end;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 35px 15px;
  width: 100%;
}
.phone .box-container, 
.tablet  .box-container{
    flex-direction: column;
}

.footer-logo {
    width: 100%;
    text-align: center;
    border-right: 0px solid rgba(255, 255, 255, .25);
    margin: 0;
    padding: 0 25px;
    margin-top: 20px;
}
.footer-links{
    width: 100%;
    float: left;
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 0px;
}
.MainContent {
    padding-bottom: 0px;
}

.phone .footer-logo .footer-text{
    display: block;
    margin: 0 15%;
}
.tablet .footer-logo .footer-text{
    display: block;
    margin: 0 20%;
}
.footer-logo .footer-text{
    display: block;
    margin: 0 30%;
    font-size:90%;
}

/***Font size Changer***/
.font-size-changer {
  width: 100%;
    height: 30px;
   position: sticky;
    background-color: #212121;
    z-index: 999;
    color: #fff;
    display: flex;
    padding: 5px 20px;
    justify-content: flex-end;
    align-items: center;
    font-size: 14px;
    top: 25px;
}
.tooltipster-base .tooltipster-content span{font-size:120%;}
.font-size-changer div {display: inline-block;cursor: pointer;margin-left: 30px;}

/***Menu Header***/
.Login_Info .Menu_DropDownButton .fa,
 .Login_Info .Menu_TopMenu:hover span.fa {
    color: #524E9C;
    font-size: 22px;
    margin-top: 20px;
    cursor: pointer;
}
.Login_Info  .Menu_DropDownButton.open  .Menu_DropDownPanel {
   right: 0;
    margin-top: 14px;
    background: #FFFFFF;
    box-shadow: 0px 3px 10px rgb(0 0 0 / 25%);
}
.Login_Info div.Menu_DropDownPanel a:hover, 
.Login_Info div.Menu_DropDownPanel a:link:hover {
   background: #DEF0F5;
    color: #524E9C;
    box-shadow: none;
    margin-bottom: 5px;
}

.Login_Info div.Menu_DropDownPanel a.user-info-link  {
    background: transparent;
    box-shadow: none;
    color: #524E9C;
    font-weight: 600;
}

.Login_Info div.Menu_DropDownPanel .user-info-link  {
    display: block;
    padding: 4px 5px;
    font-size: 14px;
    text-decoration: none;
    color: #333333;
    margin-bottom: 5px;
}
.Login_Info .Menu_DropDownButton .Menu_TopMenu  span.Menu_DropDownArrow{
display: none!important;
}