@import url("/OutSystemsUIWeb/Theme.BaseTheme.css?1657");

/* ================================================

Primary color customization
For additional color customizations, you can change the color code for the colors below

  ================================================ */
  
  
:root {
    
      
    /*Old Root*/
    /*css overridden variables */
    --color-primary: #27a1ce;
    /*primary-color*/
    --color-primary-hover: #27a1ce;
    /*primary-color*/
    --color-secondary: #27a1ce;
    /*primary-color*/
    --color-tertiary: #3a4248;
    --color-neutral-5: #eaedef;
    --color-new: #555555;
    --color-button: #f5fbff;
    --color-background-body: #f3f6f8;
    --color-disabled: #f7f7f7;
    --color-neutral-8: #7d7e80;
    --color-info: #27a1ce;
    --color-warning: #e9a100;
    --space-xs: 4px;
    --space-s: 8px;
    --space-base: 12px;
    --space-m: 16px;
    --space-l: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;
    --font-size-s: 12px;
    --font-size-xs: 10px;
    --color-tooltip: #dbdbdb;
    --color-innerpanel-title: #717171;
    --color-selected: #e9f6fa;
    --color-danger: #ff3a3a;
    --color-inner-tootip: #fff4e8;
    --color-wizard-inactive: #e5eef5;
    --color-link-inside-table: #2492db;
    --color-filter-fill: #f5f5f5;
    --color-filter-outline: #dddddd;
    --color-title-section: #939393;
    --color-detail-table-font: #aeaeae;
    --color-chekbox-outline: #bababa;
    --color-warm-red: #d30303;
    --color-no-records: #b4b4b4;
    --color-separator: #004b88;
    
    /*End of Old Root*/
/* Typography - Size */
    --font-size-display: 36px;
    
    --font-size-h1: 40px;
    --font-size-h2: 21px;
    --font-size-h3: 21px;
    --font-size-h4: 19px;
    --font-size-h5: 20px;
    --font-size-h6: 18px;

    --font-size-base: 16px;
    --font-size-s: 14px;
    --font-size-xs: 12px;   

    /* Typography - Weight */
    --font-light: 300;
    --font-regular: 400;
    --font-semi-bold: 600;
    --font-bold: 700;
    
    /* Color - Brand */
    --color-primary: #063E78;
    --color-secondary: #303d60;
    
    --color-primary-hover: #295fd6;
    --color-primary-selected: rgba(20, 110, 245, .12);
    --color-primary-lightest: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9));

    /* Color - Extended */
    --color-red-lightest: #faeaea;
    --color-red-lighter: #e9aaaa;
    --color-red-light: #d96a6a;
    --color-red: #c92a2a;
    --color-red-dark: #ab2424;
    --color-red-darker: #8d1d1d;
    --color-red-darkest: #6f1717;
    
    --color-pink-lightest: #fbebf0;
    --color-pink-lighter: #efadc4;
    --color-pink-light: #e27098;
    --color-pink: #d6336c;
    --color-pink-dark: #b62b5c;
    --color-pink-darker: #96244c;
    --color-pink-darkest: #761c3b;
    
    --color-grape-lightest: #f7ecfa;
    --color-grape-lighter: #dfb2e9;
    --color-grape-light: #c678d9;
    --color-grape: #ae3ec9;
    --color-grape-dark: #9435ab;
    --color-grape-darker: #7a2b8d;
    --color-grape-darkest: #60226f;
    
    --color-violet-lightest: #f1edfd;
    --color-violet-lighter: #c6b6f6;
    --color-violet-light: #9b7fef;
    --color-violet: #7048e8;
    --color-violet-dark: #5f3dc5;
    --color-violet-darker: #4e32a2;
    --color-violet-darkest: #3e2880;
   
    --color-indigo-lightest: #eceffd;
    --color-indigo-lighter: #b3c1f7;
    --color-indigo-light: #7b92f1;
    --color-indigo: #4263eb;
    --color-indigo-dark: #3854c8;
    --color-indigo-darker: #2e45a5;
    --color-indigo-darkest: #243681;
    
    --color-blue-lightest: #e8f2fa;
    --color-blue-lighter: #a3c9ea;
    --color-blue-light: #5fa1db;
    --color-blue: #1a79cb;
    --color-blue-dark: #1667ad;
    --color-blue-darker: #12558e;
    --color-blue-darkest: #0e4370;
    
    --color-cyan-lightest: #e7f2f4;
    --color-cyan-lighter: #9eccd3;
    --color-cyan-light: #56a6b2;
    --color-cyan: #0d8091;
    --color-cyan-dark: #0b6d7b;
    --color-cyan-darker: #095a66;
    --color-cyan-darkest: #074650;
    
    --color-teal-lightest: #e6f2ef;
    --color-teal-lighter: #9cccbd;
    --color-teal-light: #52a58c;
    --color-teal: #087f5b;
    --color-teal-dark: #076c4d;
    --color-teal-darker: #065940;
    --color-teal-darkest: #044632;
    
    --color-green-lightest: #ebf7ed;
    --color-green-lighter: #afe0b8;
    --color-green-light: #77bd52;
    --color-green: #619b42;
    --color-green-dark: #497633;
    --color-green-darker: #267d36;
    --color-green-darkest: #1e622a;
    
    --color-lime-lightest: #f1f8e8;
    --color-lime-lighter: #c7e3a2;
    --color-lime-light: #9ecd5c;
    --color-lime: #74b816;
    --color-lime-dark: #639c13;
    --color-lime-darker: #51810f;
    --color-lime-darkest: #40650c;
    
    --color-orange-lightest: #fef0e6;
    --color-orange-lighter: #fcc29c;
    --color-orange-light: #f99551;
    --color-orange: #f76707;
    --color-orange-dark: #d25806;
    --color-orange-darker: #ad4805;
    --color-orange-darkest: #883904;
    
    --color-yellow-lightest: #fef5e5;
    --color-yellow-lighter: #fbd999;
    --color-yellow-light: #f8bc4c;
    --color-yellow: #f59f00;
    --color-yellow-dark: #d08700;
    --color-yellow-darker: #ac6f00;
    --color-yellow-darkest: #875700;
    
    /* Color - Neutral */
    --color-neutral-0: #ffffff;
    --color-neutral-1: #f8f9fa;
    --color-neutral-2: #f1f3f5;
    --color-neutral-3: #e9ecef;
    --color-neutral-4: #dee2e6;
    --color-neutral-5: #ced4da;
    --color-neutral-6: #adb5bd;
    --color-neutral-7: #6a7178;
    --color-neutral-8: #4f575e;
    --color-neutral-9: #272b30;
    --color-neutral-10: #101213;
    
    /* Color - Semantic */
    --color-error-light: #fceaea;
    --color-error: #f0441c;
    
    --color-warning-light: #fdf6e5;
    --color-warning: #f39b13;
    
    --color-success-light: #eaf3eb;
    --color-success: #009f43;
    
    --color-info-light: #e5f5fc;
    --color-info: #017aad;

    /* Space - Sizes */
    --space-none: 0;
    --space-xs: 4px;
    --space-s: 8px;
    --space-base: 16px;
    --space-m: 24px;
    --space-l: 32px;
    --space-xl: 40px;
    --space-xxl: 48px;
    
    /* Border Radius */
    --border-radius-none: 0;
    --border-radius-soft: 4px;
    --border-radius-rounded: 100px;
    --border-radius-circle: 100%;
    
    /* Border Size */
    --border-size-none: 0;
    --border-size-s: 1px;
    --border-size-m: 2px;
    --border-size-l: 3px;

    /* Elevation / Shadow */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .1);
    --shadow-s: 0 2px 4px rgba(0, 0, 0, .1);
    --shadow-m: 0 4px 6px rgba(0, 0, 0, .1);
    --shadow-l: 0 6px 8px rgba(0, 0, 0, .1);
    --shadow-xl: 0 8px 10px rgba(0, 0, 0, .1);

    /* App Settings */
    --color-background-body: #eaedef;
    --header-size: 56px;
    --side-menu-size: 300px;
    
    
    /*css overridden variables */
    --color-primary: #77bd52; /*primary-color*/
    --color-primary-hover: #619b42; /*primary-color*/
    --color-secondary: #004b88; /*primary-color*/
    --color-tertiary:#56cbf3;
    --color-neutral-5: #eaedef;
    --color-new: #555555;
    --color-button: #f5fbff;
    --color-background-body: #ffffff ;
    --color-disabled: #f7f7f7; 
    --color-neutral-8:#7d7e80;
    --color-info: #27a1ce;
    --color-warning: #e9a100;
    --space-xs: 4px;
    --space-s: 8px;
    --space-base: 12px;
    --space-m: 16px;
    --space-l: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;
    --font-size-s: 12px;
    --font-size-xs: 10px;
    --color-tooltip: #dbdbdb;
    --color-innerpanel-title: #bd0856;
    --color-selected: #e9f6fa;
    --color-danger: #ff3a3a;
    --color-inner-tootip: #fff4e8;
    --color-wizard-inactive: #e5eef5;
    --color-link-inside-table: #999999;
    --color-filter-fill:#f5f5f5;
    --color-filter-outline:#dddddd;
    --color-title-section: #939393;
    --color-detail-table-font:#aeaeae;
    --color-chekbox-outline: #bababa;
    --color-warm-red:#d30303;
    --color-no-records:#b4b4b4;
}

/*general styles */

@font-face {
    font-family: 'Neo Sans';
    src: url('/PHFWTheme_TH/neosans-regular.eot');
    src: url('/PHFWTheme_TH/neosans-regular.eot?#iefix') format('embedded-opentype'),
         url('/PHFWTheme_TH/neosans-regular.woff') format('woff'),
         url('/PHFWTheme_TH/neosans-regular.ttf') format('truetype'),
         url('/PHFWTheme_TH/neosans-regular.svg#neosansregular') format('svg');
     }
     /* Oswald */
     
@font-face {
    font-family: 'Oswald';
    src: url('/PHFWTheme_TH/Oswald-Regular.ttf');
    font-weight: normal;
    font-style: normal;
     }
     
@font-face {
    font-family: 'Oswald';
    src: url('/PHFWTheme_TH/Oswald-Bold.ttf');
    font-weight: bold;
    font-style: normal;
     }
@font-face {
    font-family: 'Oswald';
    src: url('/PHFWTheme_TH/Oswald-SemiBold.ttf');
    font-weight:  var(--font-semi-bold);
    font-style: normal;
     }
@font-face {
    font-family: 'Oswald';
    src: url('/PHFWTheme_TH/Oswald-Light.ttf');
    font-weight:lighter;
    font-style: normal;
     }   
     
          /* Roboto */
@font-face {
    font-family: 'Roboto';
    src: url('/PHFWTheme_TH/Roboto-Regular.ttf');
    font-weight: normal;
    font-style: normal;
     }        
     
 @font-face {
    font-family: 'Roboto';
    src: url('/PHFWTheme_TH/Roboto-Bold.ttf');
    font-weight: bold;
    font-style: normal;
     }  
 @font-face {
    font-family: 'Roboto';
    src: url('/PHFWTheme_TH/Roboto-Italic.ttf');
    font-weight:normal;
    font-style: italic;
     }    
 @font-face {
    font-family: 'Roboto';
    src: url('/PHFWTheme_TH/Roboto-BoldItalic.ttf');
    font-weight:bold;
    font-style: italic;
     }       
 @font-face {
    font-family: 'Roboto';
    src: url('/PHFWTheme_TH/Roboto-LightItalic.ttf');
    font-weight:lighter;
    font-style: italic;
     }   
 @font-face {
    font-family: 'Roboto';
    src: url('/PHFWTheme_TH/Roboto-Light.ttf');
    font-weight:normal;
    font-style: italic;
     }   
     
/* ================================================================ */
/*                         Styles - Colors                          */
/* ================================================================ */


.background-tertiary{ background-color: var(--color-tertiary); }
.text-tertiary { color: var(--color-tertiary); }

/* ================================================================ */
textarea {
    resize: none !important;
}

html, body, a, select, fieldset, input, button, select, textarea, optgroup, option {
    font-family: Roboto;
     /* "Neo Sans", sans-serif;*/
}

a:hover {
    text-decoration: none;
}

input[readonly="readonly"]  {
    background-color: var(--color-disabled) !important;
    cursor: not-allowed !important;
}

.panel-header .tippy-tooltip{
    background-color: var(--color-tootip) !important;
    font-size: .8rem;
}
/* tooltip inside panels */

.panel-content  .tooltip{
    background-color: var(--color-inner-tootip) !important;
    color: #000000;
    padding: var(--space-xs) var(--space-xs);
    border-radius: var(--border-radius-soft);
}

.panel-content  .tippy-popper[x-placement^=top] .tippy-arrow{
     border-top: 8px solid var(--color-inner-tootip);
}

.panel-content  .tippy-popper[x-placement^=left] .tippy-arrow{
     border-left: 8px solid var(--color-inner-tootip);
}
.panel-content  .tippy-popper[x-placement^=right] .tippy-arrow{
     border-right: 8px solid var(--color-inner-tootip);
}

.panel-content .tippy-popper[x-placement^=bottom] .tippy-arrow {
    border-bottom: 8px solid var(--color-inner-tootip);
}

.panel-content .tippy-tooltip {
    background-color: var(--color-inner-tootip) !important;

    font-size: .8rem;
 

}
/* end tooltip inside panels */

/*tooltip */
.tooltip{
    word-break: break-word !important;
    /* added on 26/11/2019*/
    padding: var(--space-xs) var(--space-s);
    background-color: var(--color-tooltip) !important;
    color: #000000;
    border-radius: var(--border-radius-soft);
    /* end 26/11/2019 */
}

/* added on 26/11/2019*/
.tippy-tooltip {
font-size:  .8rem;
}

.page-title .tippy-arrow{
display:none;
}

.breadcrumbs .tippy-arrow{
display:none;
}

.breadcrumbs .tippy-tooltip,
.page-title .tippy-tooltip{
    background-color: var(--color-tootip) !important;
}

.checkbox:after,
.TableRecords .TableRecords_Header [type="checkbox"]:after {
        border-color: #808080 !important;
}
/* end 26/11/2019 */


.tippy-popper[x-placement^=left] .tippy-arrow {
    border-left: 8px solid var(--color-tooltip);
}

.tippy-popper[x-placement^=right] .tippy-arrow {
    border-right: 8px solid var(--color-tooltip);
}

.tippy-popper[x-placement^=top] .tippy-arrow {

    border-top: 8px solid var(--color-tooltip);

}

.tippy-popper[x-placement^=bottom] .tippy-arrow {
    border-bottom: 8px solid var(--color-tooltip);
}

/* end tooltip */

.DisplayNone {
 display: none;   
}

.Float-right{
    float: right;
}

/****** DMS FILES UPLOAD *******/

.DMSFilesBox {
    border:1px dashed #CCC;
    background-color:#ffffff;
    height:42px;
}

.DMSMultSelectBoxText {
    color:grey;
    font-size:10px;
}

.DMSUploadedFilesWrapper {
    overflow-y:scroll;
    height:110px;
    visibility:visible;
}

.DMSUploadedFiles {
    visibility:visible;
    height:110px;
}
    
.DMSFileUploadRelative {
    position:relative;
}

.DMSFileUploadLink {
    width: 20px;
    border-radius: 10px;
    height: 20px;
    background-color:#2b9ecf;
    display:flex;
    align-items:center;
    align-content:center;
    position:absolute;
    top:0px;
    right: 30px;
    padding-left: 2px;
    color: white;
}

.DMSUploadArea{
    display:flex;
    align-items:center;
    justify-content:center;
    border: var(--border-size-s) dashed var(--color-neutral-4);
}

/***** END OF DMS FILES UPLOAD *****/

/*tooltips inside tables */
.TableRecords   .tooltip{
    /*background-color: var(--color-inner-tootip) !important;*/
    background-color: var(--color-tooltip) !important;
    color: #000000;
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--border-radius-soft);
    max-width: 500px;

}

.TableRecords   .tippy-popper[x-placement^=top] .tippy-arrow{
     /*border-top: 8px solid var(--color-inner-tootip);*/
     border-top: 8px solid var(--color-tooltip);
}

.TableRecords .tippy-popper[x-placement^=bottom] .tippy-arrow {
   /* border-bottom: 8px solid var(--color-inner-tootip);*/
   border-bottom: 8px solid var(--color-tooltip);
}

.TableRecords .tippy-popper[x-placement^=right] .tippy-arrow {
    /*border-right: 8px solid var(--color-inner-tootip);*/
    border-right: 8px solid var(--color-tooltip);
}

.TableRecords .tippy-popper[x-placement^=left] .tippy-arrow {
    /*border-left: 8px solid var(--color-inner-tootip);*/
    border-left: 8px solid var(--color-tootip);
}

.TableRecords .tippy-tooltip {
   /* background-color: var(--color-inner-tootip) !important;*/
    background-color: var(--color-tootip) !important;
    font-size: .8rem;
}

.TableRecords .tippy-arrow{
 display: none;
}

.TableRecords .actionsCell .tippy-tooltip {
    background-color: #fff !important;
}
.TableRecords .tooltip-container{
    color: inherit;   
}

.TableRecords a {
    color: #999999;
}

/*endtooltips inside tables */
.deleteLink{
    
    color: var(--color-danger);   
}
.deleteLink[disabled=disabled]{
    
    color: var(--color-tooltip);   
}

.deleteContainer{
    border-top: var(--border-size-s) solid var(--color-neutral-4);
    border-left: var(--border-size-s) solid var(--color-neutral-4);
    border-right: var(--border-size-s) solid var(--color-neutral-4);
    border-top-left-radius:  var(--border-radius-soft);
    border-top-right-radius:  var(--border-radius-soft);
    background-color: #fff;
    padding: 5px 5px 5px 10px;
}

.border-top-neutral-4{border-top: var(--border-size-s) solid var(--color-neutral-4);}

.InnerPanelTitle{
 font-size: var(--font-size-h5);
 /*color: var(--color-title-section);*/
 font-weight: normal;
}

.tooltip-container{
    color:var(--color-tooltip);
}

.TableRecords .balloon-content{
    padding: 0;
}

.disable-select {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

.panel-header  {
    border-bottom: var(--border-size-s) solid var(--color-neutral-5);
}

.panel-title {
    padding: var(--space-s) var(--space-s) var(--space-s) var(--space-m);
    font-weight: normal ;
    font-size: var(--font-size-h5);
    color: var(--color-new);   
}

.input,
.select {
    height: 35px;
}

label{    
    font-size: var(--font-size-s);
    line-height: 1.5;
}


select, textarea, 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"], .uneditable-input{
    font-size: var(--font-size-s);
    line-height: 1.25;
    height: 35px;
}

textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus{
    border: var(--border-size-s) solid var(--color-primary);
}


textarea.input {
    height: auto;
}

.align-center{
 vertical-align:middle;
}

.input-with-icon .input-with-icon-content-icon {
    height: 35px;
}
.file-upload .file-upload-message {
    flex: none;
}

.file-upload {
    justify-content: center; 
}

.card .TableRecords,
.card .EditableTable{
    border: var(--border-size-s) solid var(--color-neutral-4) !important;
}

.DetailTable .TableRecords_Header{
    background-color: var(--color-selected);   
}

.selectedRow td{
     background-color: var(--color-selected) !important; 
}

.fileContainer{
 position: relative;   
 width:8%;
}

.DetailTable .TableRecords_OddLine{
    font-style: italic;
    color:  var(--color-detail-table-font);
    height: 32px;
    background-color: #ffffff;
}

.DetailTable .TableRecords_EvenLine{
    height: 32px;
    font-style: italic;
    color:  var(--color-detail-table-font);
    background-color: var(--color-background-body);
}


.ResultsTable .TableRecords_OddLine{

    background-color: #ffffff;
    height: 32px;

}

.ResultsTable .TableRecords_EvenLine{

    background-color: var(--color-background-body);
    height: 32px;
}

.TableRecords  .TableRecords_EvenLine,
.TableRecords  .TableRecords_OddLine{
 /*padding: var(--space-xs) var(--space-m) !important;   */
 padding: var(--space-none) var(--space-m) !important;
}

.TableRecords .TableRecords_Header{    
height:32px ;    
}

.sidebar { 
  height: 100%; /* 100% Full-height */
  width: 13%; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  /*overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
  /*overflow-y: auto;*/
    background-color: white;
    color: #999999;
}
/*
.sidebar .Menu_TopMenus
{   align-items: center;
    justify-content: center;
}*/

.Main_Wrapper {
  transition: margin-left .5s;
  margin-left: 13%;
}

.content-breadcrumbs {
  transition: margin-left .5s;
  margin-left: 13%;
}
.content-top{
  transition: margin-left .5s;
  margin-left: 13%;
}

.content-bottom{
  transition: margin-left .5s;
  margin-left: 13%;
}


.layout .header {
  background-color: var(--color-secondary) !important;
  z-index: 2;
}

.app-logo{
 width: auto;
 height: auto;
}

.breadcrumbs-item a {
 color: var(--color-new) !important;
 font-weight: bold;
 text-transform: capitalize;
}

.breadcrumbs-item .CurrentSelection{
  font-weight: bold;
  color: var(--color-secondary) !important;
  text-transform: capitalize;
}


.Button{
font-weight: normal;
background-color: var(--color-secondary);
}

.Button:not(.Is_Default){
    
background-color: var(--color-button);
}


input.Button {
    height: 35px;
   /* line-height: 28px;*/
    padding: 0 5px;
    min-width: 80px;
}

.checkbox:checked:before,
.TableRecords .TableRecords_Header [type="checkbox"]:checked:before  {

    background-color: var(--color-tooltip);
    border: var(--border-size-s) solid var(--color-chekbox-outline);
}

.checkbox:after,
.TableRecords .TableRecords_Header [type="checkbox"]:after{    
        left: 1px;
        top: 1px;
        width: 7px;   
}

.edge .checkbox:before,
.ie11 .checkbox:before,
.ie10 .checkbox:before,
.checkbox:before{
    border-radius: 2px;
    border: var(--border-size-s) solid var(--color-chekbox-outline);
    width:10px;
    height:10px;
}

.checkbox:before,
.radio-button:before,
.TableRecords .TableRecords_Header [type="checkbox"]:before{
     width:10px;
     height:10px;   
     border: var(--border-size-s) solid var(--color-chekbox-outline);
}

.checkbox:before,
.TableRecords .TableRecords_Header [type="checkbox"]:before{
     border-radius: 2px;
}

 .ActionElement{
      padding: 5px 20px 5px 10px !important;
      text-align: left;
}

 .ActionElement a {   
 color: var(--color-neutral-8) !important;
}
/* top menu styles */
.header .Menu_DropDownButton {
    line-height: 50px;
}

.layout-top .header .ThemeGrid_Container{
  padding: var(--space-none) var(--space-none) ;
}


.Menu_TopMenu:hover > div a,
.Menu_TopMenu:hover > div a:visited {
    color: var(--color-neutral-0);
}

.header a:hover,
.header a ,
.header,
.Menu_TopMenu > div a,
.Menu_TopMenu > div a:visited{
    color: var(--color-neutral-0); 
}

.header .Menu_TopMenu {
border-bottom: none;
padding: var(--space-none) var(--space-l);
}

.header .Menu_TopMenu.Menu_TopMenuActive {
 border-bottom: var(--border-size-m) solid var(--color-neutral-0);   

}

.header .Menu_TopMenu:not(.Menu_TopMenuActive):hover{
     border-bottom: none !important;
}

.header .balloon-content {
    color: var(--color-neutral-8);
    padding:0;   
}

.Menu_TopMenus .ListRecords{
 width: 100% !important;   
}

/* Wizard **************************/
.WizardParent {
    border: 1px solid #e2e2e2;
    display: table;
    overflow: hidden;
    width: 100%;
}

.WizardStep {
    background: var(--color-wizard-inactive);
    display: table-cell;
    font-weight: 600;
    line-height: 38px;
    padding-right: 20px;
    position: relative;
    text-align: center;
    width: 1%;

    
    
}

.WizardStep.ActiveStep {
    background: #fff;
    color: var(--color-primary);
    font-weight: bold;
}

.WizardStep.Past {
    background: #fff;
}

.WizardStep a,
.WizardStep a:link {
    display: block;
    line-height: 38px;
    text-align: center;
}

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

/* after: right arrow on wizard step **************************/
.WizardStep:after {
    border-right: 1px solid #e2e2e2;
    border-top: 1px solid #e2e2e2;
    content: "";
    height: 38px;
    position: absolute;
    right: 8px;
    top: 0;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    width: 38px;
    z-index: 1;
}

.WizardStep:last-of-type:after {
    background: none;
}

/* before: left "inverted" arrow on wizard step **************************/
.WizardStep:before {
    border-bottom: 20px solid var(--color-wizard-inactive);
    border-left: 20px solid transparent;
    border-top: 20px solid var(--color-wizard-inactive);
    content: "";
    height: 0;
    left: -20px;
    position: absolute;
    top: 0;
    width: 0;
}

.WizardStep:first-of-type:before {
    border: none;
    margin-left: 0;
}

.WizardStep.Past:before {
    border-bottom-color: #fff;
    border-top-color: #fff;
}

.WizardStep.ActiveStep:before {
    border-bottom-color: #fff;
    border-top-color: #fff;
}

.WizardStep.LastStep:after,
.WizardStep.ActiveStep:after,
.WizardStep.HideArrow:after,
.WizardStep:last-of-type:after {
    border: 0;
    content: "";
}


.wizardPanel .panel-content{
        padding: 0;
}


.WizardParent{
border-top: none;
border-right:none;
border-left: none;
box-sizing: initial;
}


span.fa.fa-fw.fa-question-circle.fa-lg {

    font-size: 0.7em;
}

.ActionBaloon > .ActionElement:not(:last-child)
{
    
 border-bottom: var(--border-size-s) solid var(--color-neutral-4);
 
 }
 
 .ActionBaloon{
  min-width: 150px;   
 }
 
 .alertMessage {     
   color: #656565 !important;
 }
 
 .filtersSection{
 font-size: var(--font-size-h5);
 font-weight: normal;
 background-color: #fff;
 padding: var(--space-s) var(--space-s) !important;
 border: var(--border-size-s) solid var(--color-neutral-4);
 border-radius:  var(--border-radius-soft);
 }
 
 /*
 .filterInput{
    background-color: var(--color-filter-fill) !important;
    cursor: not-allowed !important;
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid #d0d0d0;
    font-size: var(--font-size-xs);
    margin-left: var(--space-s);
    color: #848383;
    padding: var(--space-xs) var(--space-xs) !important;
 }*/
.filterInput{
    background-color: #bfd9f0 !important;
    cursor: not-allowed !important;
    border-radius: 50px 50px;
    border: none;
    font-size: var(--font-size-xs);
    margin-left: var(--space-s);
    color: #848383;
    padding: 4px 7px !important;
 }
 
 .layout-login-form {
    min-width: 100px
 }
 .Login__Form {
    color:#fff;
    background-color: transparent;
    padding: 20px 20px;
}

.fa.fa-fw.fa-ellipsis-h{
    cursor: pointer !important;
    color: var(--color-neutral-4) !important;
}


.fileFrame{
    width: 56px;
    height: 56px;
    border-radius:2px;
    border: var(--border-size-s) solid var(--color-filter-outline);
}


.fa-2x {
    font-size: 1.2em;
}


.Menu_TopMenuActive > div a,
.Menu_TopMenuActive > div a:visited,
.Menu_TopMenuActive > div a:hover,
.Menu_TopMenu:hover.Menu_TopMenuActive > div a {
    color: #fff;
    font-weight: var(--font-semi-bold);
}


.tippy-active{
 cursor: default;   
}


.SortColumns_Sorted,
.SortColumns_Sortable{
    padding: var(--space-none) var(--space-s) !important;
    color: var(--color-primary);
    text-decoration: none;    
}


.forget_password{
    font-style: italic ;
    border-bottom: 1px dashed var(--color-neutral-0);
    padding-bottom: 1px;
    font-size: 11px;
    color: var(--color-neutral-7);
    text-align: left;
    text-decoration: underline;
    font: Regular 12px/24px Oswald;
    letter-spacing: var(--space-none);
    opacity: 1;
}


.Login__Logo{    
        padding: 20px 20px;
}


.header .Menu_DropDownButton  > .Menu_TopMenuActive{
 line-height: 52px;   
}


.select {    
    background-position: center right 8px !important;
    background-size: 10px 5px  !important;
}

.Button + .Button {
    margin-left: 14px;
}


.breadcrumbs-item .icon {
    margin: var(--space-none) var(--space-xs);
}

.deleteContainer a:hover{
    color: var(--color-danger);
}

.fa-lg {   
    vertical-align: 0%;
}


table.DetailTable tr:nth-child(1) th:nth-child(2){
     padding-left: 0px; 
}

table.DetailTable tr:nth-child(1) th:nth-child(1){
     padding-right: 0px !important; 
}

 input[type="checkbox"]:focus{
        outline:0 !important;
}

.Form label.MandatoryLabel:after {

    padding: 0px 5px 5px 2px;

}

label.MandatoryLabel:after {
 
   margin-left:0px;
}

.heading4 {
    color: #535a5e;
    font-size: var(--font-size-h6);
}

.modal-content {
    padding: 0 var(--space-m) var(--space-l) var(--space-m);
}

.modal-wrapper {
    max-width: 420px;
}

.modal-top {
padding: 5px 6px 11px 4px;
}

div.Feedback_Message_Info,
div.Feedback_Message_Warning,
div.Feedback_Message_Error,
div.Feedback_Message_Success  {

    padding: var(--space-xs) !important;
    font-size: 13px;
    min-width: auto;
}

div.Feedback_Message_Info:before,
div.Feedback_Message_Warning:before,
div.Feedback_Message_Error:before,
div.Feedback_Message_Success:before {
  
    font: normal normal normal 15px/1 FontAwesome;
    padding-left: 2px;
}

div.Feedback_Message_Wrapper [class*="Feedback_Message_"] span {
    padding-left: var(--space-s);
}

.fa-warning{
 color: var(--color-warm-red); 
}

a.Feedback_Message_Wrapper_Close {
    right: 8px;
    top: 4px;
}

.Feedback_Message_Text::after{
   content: "        ";
  white-space: pre;

}

.no-margin-right{
 margin-right: 0px !important;   
}

.text-underline{
    text-decoration: underline;}




table.ResultsTable tr:nth-child(1) th:nth-child(2) div{
     text-align: left;
}



.choices__list--single .choices__item{
    padding-top: 5px;
}


.choices__inner{
    height: 35px;   
    line-height: calc(var(--font-size-s) * 2)
}

.choices__list--dropdown .choices__item{
 height: 35px;   
}

.choices[data-type*="select-one"]:after,
.time-picker .dropdown-icon{
    right: 8px;
    top: 5px;
}

.sidebar a,
.sidebar a:hover{
 color: var(--color-neutral-0)   
}

.page-title {
    padding: var(--space-s) var(--space-s) var(--space-s) var(--space-none);
    font-weight: bold;
    font-size: var(--font-size-h4);
    color: var(--color-new);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: Oswald;
    text-transform: uppercase;
}

.detail-panel-title {
    padding: var(--space-s) var(--space-s) var(--space-s) var(--space-s);
    font-weight: normal;
    font-size: var(--font-size-h4);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

[disabled="disabled"],
[readonly="readonly"],
 textarea[readonly="readonly"] {
    background-color: var(--color-neutral-2);
}

.TableRecords.Empty tbody tr {
 color: var(--color-no-records) !important;
 font-style: italic;   
}

.align-mid-det-table{
    vertical-align: -webkit-baseline-middle;
}

.TableRecords_Header  a.TableRecords_Header  a:hover{
/*color:var(--color-neutral-8); 04/02/2020*/
    color:var(--color-link-inside-table);
}

.EditableTable thead th,
.TableRecords .TableRecords_Header, 
.TableRecords .TableRecords_Header:hover, 
.TableRecords_Header .SortColumns_Sortable,
.TableRecords_Header.SortColumns_Sortable:hover,
.TableRecords .ResultsTable .TableRecords_Header,
.ResultsTable .TableRecords_Header .SortColumns_Sortable{
        color:var(--color-link-inside-table);
}


.sidebar .SideMenu {
    display: flex;
  /*  align-items: flex-start;
    justify-content: center;
    transition:none !important;*/
}

.SideMenu .ListRecords {
    width: 100% !important;

}

.SideMenuTitle{
 width:100%;
 margin-left: 5px;
}

.SubMenuList{
   width:100%;
  /* margin-left:30px;*/
}

/* scrollbar styling*/

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--color-neutral-4);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral-6);
}

.TableRecords .TableRecords_Header,
 .EditableTable thead th {
    padding: var(--space-none) var(--space-s) !important;
}

.TableRecords .TableRecords_EvenLine,
.TableRecords .TableRecords_OddLine {
    padding: var(--space-none) var(--space-s) !important;
}

.SubMenuList .subMenuWrapper div{
   margin-left: 20px;
}

.emptyMessage {
 padding-left:22px;   
 font-style: italic;
 COLOR: var(--color-no-records) !important;
}

.capitalize{
 text-transform: capitalize;   
}

.panel-footer {
    padding: var(--space-s) var(--space-m) var(--space-s) !important;
    border-top: var(--border-size-s) solid var(--color-neutral-5) !important;
}

.layout-login-simple .layout-login-form{
    color: #fff;
    background-color: transparent;
    -ms-background-color: transparent;
    border-radius: var(--border-radius-soft);
    box-shadow: none;
}

.layout-login-simple .layout-login-form a,
.layout-login-simple .layout-login-form a:visited{
    color: var(--color-neutral-7);
    -ms-background-color: transparent;
}

.CalendarImage{
    opacity:0.6;
    }
    
.OptionsImage{
    max-width:unset;
    cursor:pointer !important;
}

.CloseLink{
    color: var(--color-filter-outline) !important ;
    }

.FormContainers {
    margin-bottom: 10px;
}

.Invisible {
    display: none;
}

[type="checkbox"] {
    width: auto;
    height: auto;
}

.masterDetailPanel .panel-title,
.masterDetailPanel .panel-actions{
    padding: var(--space-xs) var(--space-xs) var(--space-none) var(--space-xs); 
}


.detailPanel .panel-header{
    border-bottom: var(--border-size-none)
}

.masterDetailPanel .panel-content{
    padding: var(--space-xs) var(--space-xs) var(--space-s) var(--space-xs); 
}

.panel-content .TableRecords_BottomNavigation{

    margin-top: var(--space-xs);
}

.text-ActionElement{
    color:var(--color-neutral-8); 
    transition: color 180ms linear;
}



/* Webblocks Sections and Containers */
.WBTitle {
    text-align: left;
    padding: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-top: var(--space-s);
    height: 32.8px;
    font-size: var(--font-size-h4);
}

.WBActions {
    margin-bottom: 6px;
    margin-top: 7px;
    margin-left: 0px;
    height: 45.6px;
    text-align: right;
    padding: 0px;
    font-size: 12px;
}

  .layout-top .content .ThemeGrid_Container {
    margin: var(--space-none) auto;
    padding: var(--space-xxl);
    width: 100%;
    padding-top: var(--space-m);
    padding-bottom: var(--space-m); 
}

.layout.layout-top .header {
    padding-left: var(--space-xxl);
    padding-right: var(--space-xxl);
}
/* Added on 05/02/2020 */
.TableRecords .TableRecords_OddLine, .TableRecords .TableRecords_EvenLine {
    height: 32px;
}

/* Added on 18/02/2020 */
.TableRecords .TableRecords_Header {
    white-space: nowrap;
}

.modal-content {
    overflow-y: unset;
}

.choices__list--dropdown {
max-width:150%;
min-width:100%;
white-space:nowrap;
width:auto;
}


.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: rgba(0, 0, 0, 0);
    color: var(--color-primary-hover);
}

.VisibilityHidden {
    visibility: hidden;
}

.NoWrap {
    white-space: nowrap !important;   
}

/* PROFILE CUSTOM STYLE */
.ProfilePicThumbnail {
    max-height: 100px; 
    max-width: 100px;
    background-size: cover; 
}



.ModalTitleFont {
    color: #535a5e;
    font-size: var(--font-size-h6) !important;
    font-weight: normal;
    text-align: center;
}


.ImportOutterContainer .file-upload-message {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.ExportOutterContainer .Button {
    height: 35px;
   /* line-height: 28px;*/
    padding: 0 5px;
    min-width: 80px;
}


.MenuExpandable {
    background-color: white;
}

.MenuExpandable .SideMenuTitle {
    font-size: var(--font-size-s);
}

.SideMenu .MenuExpandable {
    border: none;
    border-radius: 0px;
    margin-top: var(--space-base);
 }
 
 .MenuExpandable .accordion-item-header {
     padding: var(--space-s);
 }
 
 .MenuExpandable .accordion-item-icon {
     color: #999999; 
     line-height: 18px;
     font-size: 17px;
 }
 

 
 .MenuExpandable .accordion-item-content.is--expanded {
     padding-left: 0px;
     padding-right: 0px;
 }
 
 .MenuExpandable .accordion-item-title {
     width: 90%;
 }
 
 .accordion-item.MenuExpandable:first-child,
 .accordion-item.MenuExpandable:last-child {
     border-radius: 0px;
 }
 
 .ActiveParentMenu .accordion-item-header,
 .ActiveMenuIcon {
  background-color: white;
 }
 
 .MenuExpandable .ParentMenuTitle {
     overflow-x: hidden;
 }
 
 .MenuIconList {
     padding-left: 0.7vw;
     padding-bottom: 10px;
     padding-top: 10px;
     font-size: 0.85vw;
 }
 
 .AR .MenuIconList {
     padding-left: 0vw;
     padding-right: 0.7vw;
}
 
 .HoveredMenuItem:hover {
    
    background-color: lightgrey !important;
 }
 
.IconsSideBar {
    width: 100%;
    margin-top: 5px;
}

.IconsSideBar .tippy-popper {
    min-width: 200px;
    width: fit-content;
}

.MenuIconList .tooltip-widget {
  color: #999999;
}

.MenuIconList ActiveMenuIcon {
color: var(--color-secondary) !important;
}

.MenuIconList.ActiveMenuIcon  .tooltip-widget {
    color: var(--color-secondary) !important;
}

.ExpandableOutter {
    height: 74%;
   /* overflow-y: auto; */
    margin-top: 10px;
}

.MenuMain {
    height: inherit;
    box-shadow: 0px 0px 5px #00000029;
}

.tippy-popper .ExpandableOutter {
      max-height: 80vh;
      overflow-y: auto;
}

.MenuSearch .input {
    background-color: inherit;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid var(--color-primary);
    color: #999999;
    background-color: #F0F0F0;
    border-radius: 2px;
    border: 1px solid #999999;

}

.MenuSearch .input::placeholder {
  color: var(--color-neutral-5);
}

.MenuSearch .fa {
  color: #999999;
}

.ContextualMenu .tooltip {
  
  background-color: #D8D8D8 !important;
}

.ContextualMenu .tippy-popper .tippy-arrow {
   border-right:8px solid #D8D8D8;
}


.TooltipParentMenu {
    color: white;
    font-weight: bold;
}



.MenuAdjustScreen {
    margin-left: 3%;
    margin-right: auto;
}

.MenuAdjustSidebar {
    width: 3%;
}

.AR .MenuAdjustScreen {
    margin-left: auto;
    margin-right: 3%;
}

.layout-top .header .HeaderStartWidth {
    width: 87%;
    margin-left: 13%;
}

.layout-top .header .MenuAdjustHeader {
    margin-left: 3%;
    margin-right: auto;
    width: 97%;
}

.AR .layout-top .header .MenuAdjustHeader {
    margin-left: auto;
    margin-right: 3%;
    width: 97%;
}


/*Override some icons' colors that were previously
set with !important */

.MenuExpandable .fa,
.MenuExpandable .fa.fa-fw.fa-ellipsis-h {
  color: unset !important;
}

.MenuIconList .fa,
.MenuIconList .fa.fa-fw.fa-ellipsis-h {
  color: unset !important;
}

.LoginMenuItem {
    background-color: #f0f9fc;
    padding: 6px 10px 6px 10px;
}

.LoginMenuItemNB {
   padding:3px;
}

.LoginMenuItem:hover {
    background-color: #e4ecef;
}

.LoginMenuItem.LogOutLink {
    background-color: #d3dadc;
}

.MenuItemsListWrapper {
    height: 100%;
    overflow-y: auto !important;
}


 .SelectedMenuItem {
    background-color: lightgrey;
    color:#999999;
}

.SelectedMenuItem:hover {
    background-color: lightgrey;
}


.checkbox.Not_Valid:before,
.radio-button.Not_Valid:before,
.TableRecords .TableRecords_Header [type="checkbox"].Not_Valid:before{
    height: 10px;
    width: 10px;
}

.checkbox.Not_Valid:checked:before{
    border: var(--border-size-s) solid var(--color-error);
}

.Form input.Not_Valid{
    padding: 0px;
}
/*________________________Inputs/Checkboxes__________________________*/

.edge .checkbox:before,
.ie11 .checkbox:before,
.ie10 .checkbox:before,
.checkbox:before,
.radio-button:before,
.TableRecords .TableRecords_Header [type="checkbox"]:before{
    height: 15px;
    width:15px;
}

.checkbox.Not_Valid:before,
.radio-button.Not_Valid:before,
.TableRecords .TableRecords_Header [type="checkbox"].Not_Valid:before{
   height: 15px;
    width:15px;
}
}

/*ADDED on 15/09/2021 */

.SearchResultsEmpty {
    box-shadow: 0px 1px 5px 0px var(--color-secondary);
    background-color: #fff;
    min-height: 50vh;
    margin-top: var(--space-m);
}

.EmptyResultsDiv {
    background-color: #fff;
    min-height: 50vh;
    margin-top: var(--space-m);
}

.EmptySearchIconDiv {
    padding-top: 17vh;
    padding-bottom: 11vh;
}
.IconSearch {
    color: #063E78;
    font-size: 1.4em;
}
/*---*/

.checkbox:hover:before,
.radio-button:hover:before,
.TableRecords .TableRecords_Header [type="checkbox"]:hover:before {
    border: var(--border-size-s) solid var(--color-primary);
}

.checkbox:focus:before,
.radio-button:focus:before,
.TableRecords .TableRecords_Header [type="checkbox"]:focus:before {
    box-shadow: 0 0 0 1px #7d7d7d;
    background-color: var(--color-background-body);
}

.checkbox:checked:before,
.TableRecords .TableRecords_Header [type="checkbox"]:checked:before {
    border: var(--border-size-s) solid var(--color-primary);
    background-color: var(--color-primary);
}

.radio-button:checked:before {
    background-color: var(--color-primary);
    border: var(--border-size-s) solid var(--color-primary);
    height: 15px;
    width: 15px;
}
}

.checkbox:checked:hover:before,
.radio-button:checked:hover:before,
.TableRecords .TableRecords_Header [type="checkbox"]:checked:hover:before {
    -webkit-filter: brightness(.9);
            filter: brightness(.9);
    border: var(--border-size-s) solid var(--color-primary);
}
.checkbox:before,
.radio-button:before, 
.TableRecords .TableRecords_Header [type="checkbox"]:before {
    background-color: var(--color-background-body);
    border: var(--border-size-s) solid var(--color-neutral-5);
}
.checkbox:checked:before,
.TableRecords .TableRecords_Header [type="checkbox"]:checked:before  {

    background-color: var(--color-background-body);
    border: var(--border-size-s) solid var(--color-primary);
}

.checkbox:after,
.TableRecords .TableRecords_Header [type="checkbox"]:after {
        border-color:var(--color-primary) !important;
}

.checkbox:after,
.TableRecords .TableRecords_Header [type="checkbox"]:after {
    left: 2px;
    top: 3px;
    width: 10px;
}

.alignSearchLeft{
    padding: 0 0 0 var(--space-s) !important;
    width: 160px;
    
}

.deleteContainer .input,
.deleteContainer .input-with-icon .input-with-icon-content-icon {
  height:4.2vh;
  /*height:calc(20px + 2vh);
  min-width:200px;
  max-width:360px;*/
}

.checkbox[disabled="disabled"]:before,
.TableRecords .TableRecords_Header [type="checkbox"][disabled="disabled"]:before {
    background-color: var(--color-neutral-2);
    border: var(--border-size-s) solid var(--color-neutral-4);
    border-radius: 0px;
}

.radio-button[disabled="disabled"]:before {
    background-color: var(--color-neutral-6);
    border: var(--border-size-s) solid var(--color-neutral-4);
}

/*________________________End Of Inputs/Checkboxes_____________________*/

 /*---------- Customized Buttons ---------------*/

 
 .Add_Button,
.Delete_Validate_Button,
.Back_Button,
.Cancel_Button,
.SaveNew_Reset_Button,
.Save_Search_Button,
.Select_Button{
-webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    cursor: pointer;
    display: -ms-inline-flexbox;
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin-top: 0;    
    margin-bottom:0;
    font-family:Roboto;
    padding: var(--space-none) var(--space-base);
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
    width: auto;
    min-width: 8.93vw;
    height: 4.2vh;/*
    min-width: calc(80px + 4.75vw);
    height:calc(30px + 1.1vh);    
    min-height: 28px;
    max-height: 48px;
    min-width: 90px;
    max-width: 200px;*/
    font-size: calc(8px + 0.1vw + 0.1vh);
    line-height: calc(6px + 0.3vw + 0.3vh);
}

.modal .Add_Button,
.modal .Delete_Validate_Button,
.modal .Cancel_Button,
.modal .SaveNew_Reset_Button,
.modal .Save_Search_Button,
.modal .Select_Button{
  width: auto;
  min-width: 6vw;
}


/* Buttons in Internet Explorer and Edge */
.edge .Add_Button,
.ie11 .Add_Button,
.ie10 .Add_Button,
.edge .Delete_Validate_Button,
.ie11 .Delete_Validate_Button,
.ie10 .Delete_Validate_Button,
.edge .Back_Button,
.ie11 .Back_Button,
.ie10 .Back_Button,,
.edge .Cancel_Button,
.ie11 .Cancel_Button,
.ie10 .Cancel_Button,
.edge .SaveNew_Reset_Button,
.ie11 .SaveNew_Reset_Button,
.ie10 .SaveNew_Reset_Button,
.edge .Save_Search_Button,
.ie11 .Save_Search_Button,
.ie10 .Save_Search_Button,
.edge .Select_Button,
.ie11 .Select_Button,
.ie10 .Select_Button
{
    display: inline-block;
}

.edge a.Button,
.ie11 a.Button,
.ie10 a.Button,
.edge a.btn,
.ie11 a.btn,
.ie11 a.btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}



input.Add_Button,
input.Delete_Validate_Button,
input.Cancel_Button,
input.SaveNew_Reset_Button,
input.Save_Search_Button,
input.Select_Button{
    /*height: 28px;
    line-height: 28px;
    padding: 0 5px;
    min-width: calc(80px + 4.75vw);*/
    min-width:8.3vw;
}
.Save_Search_Button + .SaveNew_Reset_Button,
.Select_Button + .Select_Button,
.Save_Search_Button + .Delete_Validate_Button,
.Delete_Validate_Button + .Select_Button,
.Delete_Validate_Button +.Cancel_Button,
.ImportExportWrapper +.Add_Button,
.Delete_Validate_Button + .Delete_Validate_Button,
.alignSearchLeft + .Delete_Validate_Button,
.SaveNew_Reset_Button + .Cancel_Button,
.Save_Search_Button + .Cancel_Button,
.Delete_Validate_Button + .Cancel_Button,
.Add_Button + .Delete_Validate_Button{
    margin-left:var(--space-m);
}

.Add_Button,
.Delete_Validate_Button,
.Back_Button,
.Cancel_Button,
.Select_Button{
    text-align: center;
    letter-spacing: 0px;
    opacity: 1;
    border-radius: 3px;
    border-width: 0;
    /*padding: 6px 24px;*/
}

.Add_Button{
    font-weight: bold;
    text-transform: uppercase;
    color: #FFFFFF;
    background-color: #77BD52;
    border: var(--border-size-s) solid  #77bd52;
}

.Add_Button:hover{
    color: #77bd52;
    background-color: #FFFFFF;
}

.Add_Button:focus {
    border-color: var(--color-neutral-9);
}

.Add_Button:active{
    background-color: #497633;
}

.Back_Button{
    font-weight: bold;
    text-transform: uppercase;
    color: #057bb6;
    background-color: #FFFFFF;
    border: var(--border-size-s) solid  #057bb6;
    width:4vw;
    min-width: 4vw; 
    }


.Cancel_Button{
    font-weight: bold;
    text-transform: uppercase;
    color: #057bb6;
    background-color: #FFFFFF;
    border: var(--border-size-s) solid  #057bb6;
    }
.Back_Button:hover,
.Cancel_Button:hover{    
    background-color: #f0f0f0;
}

.Back_Button:focus,
.Cancel_Button:focus{
    border-color: var(--color-neutral-9);
}

.Back_Button:active,
.Cancel_Button:active{    
    color: #FFFFFF;
    background-color: #057bb6;
    border: var(--border-size-s) solid  #057bb6;
}


.Select_Button{
    color: #063e78;
    background-color: #FFFFFF;
    border: var(--border-size-s) solid  #063e78;
}

.Select_Button:hover{    
    background-color: #f0f0f0;
}

.Select_Button:focus{
    border-color: var(--color-neutral-9);
}

.Select_Button:active{    
    color: #FFFFFF;
    background-color: #063e78;
    border: var(--border-size-s) solid  #063e78;
}



.Delete_Validate_Button{
    background-color: white;
    color:  #c13a3a;
    border: var(--border-size-s) solid  #c13a3a;
    text-transform:uppercase;
    font-weight: Bold; 
}


.Delete_Validate_Button:hover{
    background-color: #c13a3a;
    color: white;
}
.Delete_Validate_Button:focus {
    border-color:  var(--color-neutral-9);
}
.Delete_Validate_Button:active{

    background-color: #999999; 
    border-color: #999999; 
}

.SaveNew_Reset_Button,
.Save_Search_Button{
    text-align: center;
    font-weight: Bold; 
    letter-spacing: 0px;
    opacity: 1;
  /*  padding: 10px 24px;*/
    border-radius: 3px;
    text-transform: uppercase;
    border-width: 0;
}

.SaveNew_Reset_Button{
    color: #7D7D7D;
    background-color: #FFFFFF;
    border: var(--border-size-s) solid  #A2A2A2;
}

.SaveNew_Reset_Button:hover{
    background-color: #f0f0f0;
}

.SaveNew_Reset_Button:focus{
    border-color: var(--color-neutral-9);
}

.SaveNew_Reset_Button:active{
    background-color: #d9d9d9;
}

.Save_Search_Button{
    color: #FFFFFF;
    background-color: #057bb6;
    border: var(--border-size-s) solid  #057bb6;
}

.Save_Search_Button:hover{
    color: #057bb6;
    background-color: #F0F0F0;
    border: var(--border-size-s) solid  #057bb6;
}

.Save_Search_Button:focus {
    border-color: var(--color-neutral-9); 
}

.Save_Search_Button:active{
    color: #057bb6;
    background-color: #FFFFFF;
    border: var(--border-size-s) solid  #057bb6;
}



.Add_Button:disabled,
.Back_Button:disabled,
.Cancel_Button:disabled,
.Save_Search_Button:disabled,
.Select_Button:disabled{
    background-color: #dfdfdf !important;
    color: #F4F4F4;
    border-color:  #dfdfdf !important;
    cursor: not-allowed;
}


.SaveNew_Reset_Button:disabled{
    background-color: #d9d9d9 !important; 
    color: #F4F4F4;
    cursor: not-allowed;

}
.Delete_Validate_Button:disabled{
    background-color: #d9d9d9 !important; 
    border: var(--border-size-s) solid #dfdfdf ;    
    cursor: not-allowed;    
    color: #F4F4F4;
}
 /*----------End of Customized Buttons ---------------*/

/*-----------Image StatusColor-----------------------*/
.Image_StatusColor {
    height: 200px;
    width: 200px;
    background-size: cover;
    margin: 1em;
    border: 5px solid;
    padding: 4px;
    border-radius:  200px;
    -webkit-border-radius:  200px;
    -moz-border-radius:  200px;
    box-shadow: 0 2px 1px rgba(0,0,0,0.3);
}


.StatusSubmitted{
    color: var(--color-orange)
}

.StatusValidated{
    color:var(--color-green);
}

.StatusRejected{
    color: var(--color-red);
}


.StatusSubmitted .Image_StatusColor{
    border-color: var(--color-orange);
}

.StatusValidated .Image_StatusColor{
    border-color: var(--color-green);
}

.StatusRejected .Image_StatusColor{
    border-color: var(--color-red);
}

/*-----------End of Imagem StatusColor-----------------------*/


/* ***************** LOGIN PAGE LAYOUT ***************** */

.LoginTitle {
    font-size:var(--font-size-h3);
    text-transform: uppercase;
}


/*-------Login Styles-----*/

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

/*---------- Login Buttons ---------------*/


.BTN_LoginDefault,
.BTN_LoginCancel,
.BTN_LoginSMS{
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    cursor: pointer;
    display: -ms-inline-flexbox;
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin: 0; 
    line-height: calc(0.4vw + 0.3vh);
    padding: var(--space-none) var(--space-base);
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear; 
    width: 23vw;
    height: 7vh;
    font-weight: bold;
    font-family: Roboto;
    font-size:  calc(0.8vh + 0.6vw);
    line-height: 20px;
    letter-spacing: var(--space-none);
    text-align: center;    
    border-radius: var(--border-radius-soft);
    opacity: 1;
    border-width: 0;
}


/* Buttons in Internet Explorer and Edge */
.edge .BTN_LoginDefault,
.ie11 .BTN_LoginDefault,
.ie10 .BTN_LoginDefault,
.edge .BTN_LoginCancel,
.ie11 .BTN_LoginCancel,
.ie10 .BTN_LoginCancel,
.edge .BTN_LoginSMS,
.ie11 .BTN_LoginSMS,
.ie10 .BTN_LoginSMS{
    display: inline-block;
}

.BTN_LoginDefault {
    background-color: var(--color-primary);
    color: var(--color-neutral-0);
}

.BTN_LoginDefault:hover {
    background-color: var(--color-neutral-0);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    -webkit-filter: brightness(1); 
    filter: brightness(1);
}
.BTN_LoginDefault:focus {
    border: var(--border-size-s) solid var(--color-neutral-8);
}
.BTN_LoginDefault:active {
    background-color: var(--color-neutral-0);
    color: var(--color-primary);
    border: var(--border-size-s) solid var(--color-primary);
}

.BTN_LoginCancel {
    background: var(--color-neutral-0);
    border: 1px solid #7D7D7D;
    color: var(--color-neutral-7);
}

.BTN_LoginCancel:hover  {
     background-color: #e5e5e5;
}
.BTN_LoginCancel:focus {
    background-color: #e5e5e5;         
    border: var(--border-size-s) solid #7D7D7D;
}
.BTN_LoginCancel:active {
    background-color: #CCCCCC; 
}

.BTN_LoginSMS {
    background: #65A246 0% 0% no-repeat padding-box;
    color: var(--color-neutral-0);
    border-color: transparent;

}

.BTN_LoginSMS:hover{
    background-color: var(--color-neutral-0);
    color: #65A246;
    border: 1px solid #65A246;   
}
.BTN_LoginSMS:focus {
    background: #65A246 0% 0% no-repeat padding-box;
    color: var(--color-neutral-0);       
    border: var(--border-size-s) solid #7D7D7D;
}
.BTN_LoginSMS:active {
    background-color: #497633; 
}

.BTN_LoginDefault:disabled,
.BTN_LoginCancel:disabled,
.BTN_LoginSMS:disabled{
    background-color: var(--color-neutral-6);
    color: var(--color-neutral-4);
}


/*----------END of Login Buttons ---------------*/

.Login .input,
.Login .select {
    width: 23vw;
    height: 6vh;
    font-family: Roboto;
    font-size: calc(0.7vh + 0.5vw);
}

.Login .input,
.Login .textarea,
.Login .select{
    background-color: #e5e5e5;
    color: #646B76;
}

.Login .input,
.Login .select{
    width: 23vw;
    height: 6vh;
}

.Login .choices.Not_Valid .choices__inner,
.Login .select.Not_Valid,
.Login .input.Not_Valid,
.Login .textarea.Not_Valid{
    background: #F2E0DC 0% 0% no-repeat padding-box;
    border: 1px solid #F0441C;
    opacity: 0.5;
}

.Login .heading1{
    font-size:calc(1vh + 1vw);
    color: #264875;
    font-family: Roboto;
}

.Login .heading2{
    font-size:calc(0.95vh + 0.75vw);
    text-transform: uppercase;
    font-weight: bold;    
    color: #264875;
    font-family: Roboto;
}
.Login .heading3{
    font-size:calc(0.95vh + 0.75vw);
    text-transform: uppercase;    
    color: #264875;
    font-family: Roboto;
    font-weight: normal;
}
.Login .heading4{
    font-size:calc(0.9vh + 0.7vw);
    color: #264875;
    font-family: Roboto;
}

.Login .BodyText{
    font-size: calc(0.7vh + 0.65vw);    
    color: #5c636f;
    font-family: Roboto;
    }
.Login .SmallText{
    font-size: calc(0.7vh + 0.5vw);
    color: #5c636f;
    font-family: Roboto;
    }
.Login .TextError{
    font-size:calc(0.7vh + 0.5vw);
    color:red;
    font-family: Roboto;
    }

.Login .Underlined{
    text-decoration: underline;
    color: #5c636f;
    font-family: Roboto;
    }

.Login .edge .checkbox:before,
.Login .ie11 .checkbox:before,
.Login .ie10 .checkbox:before,
.Login .checkbox:before{
    height: 15px;
    width:15px;
}

.Login .checkbox.Not_Valid:before,
.Login .radio-button.Not_Valid:before,
.Login .TableRecords .TableRecords_Header [type="checkbox"].Not_Valid:before{
   height: 15px;
    width:15px;
}
}

.Login .checkbox:hover:before,
.Login .radio-button:hover:before,
.Login .TableRecords .TableRecords_Header [type="checkbox"]:hover:before {
    border: var(--border-size-s) solid var(--color-primary);
}

.Login .checkbox:focus:before,
.Login .radio-button:focus:before,
.Login .TableRecords .TableRecords_Header [type="checkbox"]:focus:before {
    box-shadow: 0 0 0 1px #7d7d7d;
}

.Login .checkbox:checked:before,
.Login .TableRecords .TableRecords_Header [type="checkbox"]:checked:before {
    border: var(--border-size-s) solid var(--color-primary);
    background-color: var(--color-background-body);
}

.Login .radio-button:checked:before {
    background-color: var(--color-background-body);
    border: 6px solid var(--color-primary);
    height: 15px;
    width: 15px;
}

.Login .checkbox:checked:hover:before,
.Login .radio-button:checked:hover:before,
.Login .TableRecords .TableRecords_Header [type="checkbox"]:checked:hover:before {
    -webkit-filter: brightness(.9);
            filter: brightness(.9);
    border: var(--border-size-s) solid var(--color-primary);
}
.Login .checkbox:before,
.Login .radio-button:before, 
.Login .TableRecords .TableRecords_Header [type="checkbox"]:before {
    background-color: var(--color-background-body);
    border: var(--border-size-s) solid var(--color-neutral-5);
}
.Login .checkbox:checked:before,
.Login .TableRecords .TableRecords_Header [type="checkbox"]:checked:before  {

    background-color: var(--color-background-body);
    border: var(--border-size-s) solid var(--color-primary);
}

.Login .checkbox:after,
.Login .TableRecords .TableRecords_Header [type="checkbox"]:after {
        border-color:var(--color-primary) !important;
}

.Login .checkbox:after,
.Login .TableRecords .TableRecords_Header [type="checkbox"]:after {
    left: 2px;
    top: 3px;
    width: 10px;
}

   
/* ***************** LOGIN SLIDER ***************** */
.carousel .tns-nav > [aria-controls] {
    background-color: white;
    border-radius: 4%;
    width: 7vw;
    height: 0.28vh;
    margin: 0 0.5vw;
    min-height: 2px;
    max-width: 145px;
    position: relative;
    bottom: -4vh;
}
.carousel .tns-nav > [aria-selected="true"] {
    height: 0.56vh;
    background-color: var(--color-primary);  
}

.carousel {
    z-index: 100;
}

.carousel .tns-outer {
    z-index: 100;
}

.carousel .carousel-container > .carousel-container-content > .list > * {
    height: 15vh;
}

.CarouselScripts{
    visibility: hidden;
}

.SliderWrapper {
    position: relative;
    top: 18vh;
}

.ItemTitle {
    width: 10 col;
    min-height: 40px;
    color: white;
    font-size: calc(1.6vh + 1.3vw);
    line-height: 1.25;
    margin-left: 0px;
    text-transform: uppercase;
    font-family: Oswald;
    font-weight: lighter;
    letter-spacing: 0px;
}

.ItemDescription {
    margin-top: 5vh;
    width: 95%;
    font-size: calc(0.8vw + 0.6vh);
    color: white;
    font-family: Roboto;
    letter-spacing: 0px;
}
 
     input[type="checkbox"]:focus{
        outline:0 !important;
}
.Login_Align_right {
    height: 7.115vh;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}

.Login_Align_left {
    height: 7.115vh;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
}


/**** 'Selet All' Checkbox on Table Records ****/
.VerticalAlignMiddle {
    vertical-align: middle;
}

html input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}

.new_btn_burger {
    font-size: calc(0.65vh + 0.50vw);
    position: absolute;
    right: 2vw;
    margin-top: 0.4vh;
}

.LoginSMSCode input {
    width: 2.734375vw;
    height: 9.556786vh;
    background-color: #e5e5e5;
    color: #646B76;
    font-size: 1vw;
    text-align: center;
    padding-right: 0.5vw;
    padding-left: 0.5vw;
}

/*======= JavaScriptNode Widget =======*/

.JavaScriptNodeTable{   
    font-size:11px; 
    border: 2px solid #BBB;
}

.JavaScriptNodeTableLabel{  
    background-color:#BBB;
    color:white;
    padding: 0 5px;
}

.JavaScriptNodeTableDescription{  
    padding: 2px 5px;
    min-width:120px;
}

/*======= END OF JavaScriptNode Widget =======*/

.pointer{
    cursor:pointer;
}

/*======= DETAIL SCREENS =======*/

 .ModalSize {
    max-width:550px;
} 



/* Extra Label on Titles */

.ParentingIdentifier {
    font-size: 15px;
    font-style: italic;
    vertical-align: top;
}

/*======= END OF DETAIL SCREENS =======*/

/*======= SearchResults SCREENS =======*/

.TableSearch_Input{
    min-width:200px
}

/*======= END of SearchResults SCREENS =======*/


/*======= MANDATORY LABEL =======*/

label.MandatoryLabel:after { 

    font: normal normal normal 0 FontAwesome;
    color: var(--color-error);
    content: "\f111";
    margin-left: var(--space-none);
}

Form label.MandatoryLabel:after { 
    content: "\f111" !important;
    color: #BF1601;
    position: absolute;
    padding: 0px 5px 5px 3px;
    font-size: 7px !important;
    font-weight: normal;
}

.modal-content .Form label.MandatoryLabel:after {
    position: static;
    vertical-align: top;
}

/*======= END OF MANDATORY LABEL =======*/

/*======= CHECKMARK IsActive ======*/

.CheckmarkIsActive {
    color: #77bd52
}
    
/*======= END OF CHECKMARK IsActive ======*/

/*======= RESET PASS PROFILE PICTURE =====*/

.ResetPass_ProfilePic {
    max-width: 38px;
    max-height: 38px;
}

/*======= END RESET PASS PROFILE PICTURE =====*/

/*______________Panel______________________*/
    
    
    .columns .columns-item > .card {
    height: auto;
}

.card {
    border-radius: var(--border-radius-none);
    border: var(--border-size-s) solid rgba(0, 0, 0, 0);
}
    
/*______________End of Panel______________*/

/*---Search Results CSS Start---*/

.filterInputNew {
    cursor: not-allowed !important;
    border: none;
    font-size: var(--font-size-xs);
    margin-left: var(--space-m);
    color: #545454;
    padding: 4px 7px !important;
    padding-top: 6px !important;
    background-color: #DBDBDB;
    border-radius: 13px;
    font-family: Roboto;
    white-space: nowrap;
    height: 26px;
    text-align: center;
    font-weight: bold;
    min-width: 40px;
}

.headerSearchText {
    text-align: left;
    font: Bold 16px/19px Oswald;
    letter-spacing: 0px;
    color: #545454;
    opacity: 1;
    text-transform: uppercase;
    word-spacing: 2px;
}

.FilterSectionWrapper {
    padding: 0px 0px 0px 10px;
    line-height: 2;
}

.TableRecords .TableRecords_Header {
    background-color: #F7F7F7;
    font-family: Roboto;
    font-size: 14px;
    letter-spacing: 0px;
    color: #545454;
    border: 0px;
    height: 60px;
}

.Table_Wrapper {
background-color: #F7F7F7;
padding: 0px 22px var(--space-base) 22px;
}

.TableRecords .TableRecords_OddLine{
    height: 60px;
    background: #FFFFFF;
    border: 0px;
}

.TableRecords .TableRecords_EvenLine{
    height: 60px;
    background: #F9F9F9;
    border: 0px;
}

.deleteContainer {
    border-top-left-radius:  0px;
    border-top-right-radius:  0px;
    border: 0px;
    padding: 16px 22px 16px 27px;
}

.TableRecords {
    border: 0px;   
}


.deleteContainer .input-with-icon .input-with-icon-content-icon,
.deleteContainer .input-with-icon .input-with-icon-content-icon ph{
    cursor: default !important;
}
/*====== IMPORT/EXPORT BOXES ======*/

.ImportExportWrapper {
    color: #999999;
    height:4.2vh;
    max-width: 150px;
    text-align: left;
    white-space: nowrap;
    min-width: fit-content;

}
.dropdown .dropdown-content .dropdown-content-list a:hover {
    background-color: white;
    color:#77BD52;
}

.ImportExportWrapper .dropdown .dropdown-header {
    height: 4.4vh;
    font-size: calc(8px + 0.1vw + 0.1vh);
    font-weight: bold;
    color: var(--color-neutral-7);
    text-transform: uppercase;
}
}
.ImportExportWrapper.ThemeGrid_Width4 {
  width: 34%
 }
 
 .ImportExportWrapper.input, textarea.input, .select {
    border: var(--border-size-s) solid var(--color-neutral-6);
    
}

/*====== END OF IMPORT/EXPORT BOXES ======*/

.breadcrumbsWrapper{
margin-left: var(--space-m);
}

.FormCheckboxes {
    padding-top: 20px;
}

/*---Search Pase CSS End---*/

/*========== VALIDATE/ACTIONS BOXES ==========*/

.ValidateBoxes {
    max-width: 150px;
}
.ValidateBoxes .choices__inner {
    height: 30px;
    text-align: left;
    line-height: calc(var(--font-size-xs) * 2);
}

.ValidateBoxes.choices[data-type*="select-one"]:after, .time-picker .dropdown-icon {
    right: 8px;
    top: 3px;
}

/*========= END OF VALIDATE/ACTIONS BOXES =========*/

/*========= MODAL ICONS =========*/

.IconModal .modal-content {
    height: 50vh;
}

.IconModal {
    min-width: 33vw;
}

/*Override some icons' colors that were previously
set with !important */
.IconContainer .fa,
.IconContainer .fa.fa-fw.fa-ellipsis-h {
    color: unset !important;
}


/*========= END OF MODAL ICONS =========*/

/*========= SEPARATOR COLOR =========*/

.separator.separator-horizontal{
    
    background-color: var(--color-separator);
}

.separator.separator-horizontal.GreySeparator {
    background-color: var(--color-neutral-6);
}

/*========= VERTICAL TIMELINE ==========*/

.VerticalTimeline-container {
    margin: 0 auto;
    max-width: 1170px;
    width: 90%;
}

.VerticalTimeline-container::after {
    clear: both;
    content: "";
    display: table;
}

.VerticalTimeline{
    margin-bottom: 2em;
    margin-top: 2em;
    padding: 2em 0;
    position: relative;
}

.VerticalTimeline::before {
    background: #d7e4ed;
    content: "";
    height: 100%;
    left: 18px;
    position: absolute;
    top: 0;
    width: 4px;
}

.VerticalTimeline-block {
    margin: 2em 0;
    position: relative;
}

.VerticalTimeline-block:after {
    clear: both;
    content: "";
    display: table;
}

.VerticalTimeline-block:first-child {
    margin-top: 0;
}

.VerticalTimeline-block:last-child {
    margin-bottom: 0;
}

.VerticalTimeline-icon {
    margin-top: 25%;
}

.VerticalTimeline-img {
    border-radius: 50%;
    box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, .08), 0 3px 0 4px rgba(0, 0, 0, .05);
    height: 40px;
    left: 0;
    position: absolute;
    top: 0;
    width: 40px;
    
    
}

.VerticalTimeline-img img {
    display: block;
    height: 24px;
    left: 50%;
    margin-left: -12px;
    margin-top: -12px;
    position: relative;
    top: 50%;
    width: 24px;
}

.VerticalTimeline-img.VerticalTimeline-picture {
    background: #75ce66;
}

.VerticalTimeline-img.VerticalTimeline-movie {
    background: #c03b44;
}

.VerticalTimeline-img.VerticalTimeline-location {
    background: #f0ca45;
}

.VerticalTimeline-content {
    background: white;
    border-radius: .25em;
    box-shadow: 0 3px 0 #d7e4ed;
    margin-left: 60px;
    padding: 1em;
    position: relative;
}

.VerticalTimeline-content:after {
    clear: both;
    content: "";
    display: table;
}

.VerticalTimeline-content h2 {
    color: #303e49;
}

.VerticalTimeline-content p,
.VerticalTimeline-content .VerticalTimeline-read-more,
.VerticalTimeline-content .VerticalTimeline-date {
    font-size: 13px;
    font-size: .8125rem;
}

.VerticalTimeline-content .VerticalTimeline-read-more,
.VerticalTimeline-content .VerticalTimeline-date {
    display: inline-block;
}

.VerticalTimeline-content p {
    line-height: 1.6;
    margin: 1em 0;
}

.VerticalTimeline-content .VerticalTimeline-read-more {
    background: #acb7c0;
    border-radius: .25em;
    color: white;
    float: right;
    padding: .8em 1em;
}

.no-touch .VerticalTimeline-content .VerticalTimeline-read-more:hover {
    background-color: #bac4cb;
}

.VerticalTimeline-content .VerticalTimeline-date {
    float: left;
    opacity: .7;
    padding: .8em 0;
}

.VerticalTimeline-content::before {
    border: 7px solid transparent;
    border-right: 7px solid white;
    content: "";
    height: 0;
    position: absolute;
    right: 100%;
    top: 16px;
    width: 0;
}

.whiteColor {
    color: #fff;
    
    
}

@-webkit-keyframes VerticalTimeline-bounce-1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(.5);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
    }
}
@-moz-keyframes VerticalTimeline-bounce-1 {
    0% {
        opacity: 0;
        -moz-transform: scale(.5);
    }

    60% {
        opacity: 1;
        -moz-transform: scale(1.2);
    }

    100% {
        -moz-transform: scale(1);
    }
}
@keyframes VerticalTimeline-bounce-1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(.5);
           -moz-transform: scale(.5);
            -ms-transform: scale(.5);
             -o-transform: scale(.5);
                transform: scale(.5);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(1.2);
           -moz-transform: scale(1.2);
            -ms-transform: scale(1.2);
             -o-transform: scale(1.2);
                transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
           -moz-transform: scale(1);
            -ms-transform: scale(1);
             -o-transform: scale(1);
                transform: scale(1);
    }
}

@-webkit-keyframes VerticalTimeline-bounce-2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(20px);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes VerticalTimeline-bounce-2 {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100px);
    }

    60% {
        opacity: 1;
        -moz-transform: translateX(20px);
    }

    100% {
        -moz-transform: translateX(0);
    }
}

@keyframes VerticalTimeline-bounce-2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
           -moz-transform: translateX(-100px);
            -ms-transform: translateX(-100px);
             -o-transform: translateX(-100px);
                transform: translateX(-100px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(20px);
           -moz-transform: translateX(20px);
            -ms-transform: translateX(20px);
             -o-transform: translateX(20px);
                transform: translateX(20px);
    }

    100% {
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
    }
}
@-webkit-keyframes VerticalTimeline-bounce-2-inverse {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes VerticalTimeline-bounce-2-inverse {
    0% {
        opacity: 0;
        -moz-transform: translateX(100px);
    }

    60% {
        opacity: 1;
        -moz-transform: translateX(-20px);
    }

    100% {
        -moz-transform: translateX(0);
    }
}

@keyframes VerticalTimeline-bounce-2-inverse {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
           -moz-transform: translateX(100px);
            -ms-transform: translateX(100px);
             -o-transform: translateX(100px);
                transform: translateX(100px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
           -moz-transform: translateX(-20px);
            -ms-transform: translateX(-20px);
             -o-transform: translateX(-20px);
                transform: translateX(-20px);
    }

    100% {
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
    }
}

@media only screen and (min-width: 1170px) {
    .VerticalTimeline {
        margin-bottom: 3em;
        margin-top: 3em;
    }

    .VerticalTimeline::before {
        left: 50%;
        margin-left: -2px;
    }
    .VerticalTimeline-content {
        margin-left: 0;
        padding: 1.6em;
        width: 45%;
    }
    .VerticalTimeline-content::before {
        border-color: transparent;
        border-left-color: white;
        left: 100%;
        top: 24px;
    }
    .VerticalTimeline-content .VerticalTimeline-read-more {
        float: left;
    }
    .VerticalTimeline-content .VerticalTimeline-date {
        font-size: 16px;
        font-size: 1rem;
        left: 122%;
        position: absolute;
        top: 6px;
        width: 100%;
    }
    .VerticalTimeline-block:nth-child(even) .VerticalTimeline-content {
        float: right;
    }
    
    .VerticalTimeline-block:nth-child(even) .VerticalTimeline-content::before {
        border-color: transparent;
        border-right-color: white;
        left: auto;
        right: 100%;
        top: 24px;
    }
    
    .VerticalTimeline-block:nth-child(even) .VerticalTimeline-content .VerticalTimeline-read-more {
        float: right;
    }
  
    .VerticalTimeline-block:nth-child(even) .VerticalTimeline-content .VerticalTimeline-date {
        left: auto;
        right: 122%;
        text-align: right;
    }
    
    
    .VerticalTimeline-block {
        margin: 4em 0;
    }
    .VerticalTimeline-block:first-child {
        margin-top: 0;
    }
    .VerticalTimeline-block:last-child {
        margin-bottom: 0;
    }
    .VerticalTimeline-icon {
        margin-top: 35%;
    }
    .VerticalTimeline-img {
        height: 60px;
        left: 50%;
        margin-left: -30px;
        /* Force Hardware Acceleration in WebKit */
        -webkit-transform: translateZ(0);
        width: 60px;

        -webkit-backface-visibility: hidden;
    }

    .cssanimations .VerticalTimeline-content.is-hidden {
        visibility: hidden;
    }
    .cssanimations .VerticalTimeline-content.bounce-in {
        -webkit-animation: VerticalTimeline-bounce-2 .6s;
           -moz-animation: VerticalTimeline-bounce-2 .6s;
                animation: VerticalTimeline-bounce-2 .6s;
        visibility: visible;
    }
    /* inverse bounce effect on even content blocks */
    .cssanimations .VerticalTimeline-block:nth-child(even) .VerticalTimeline-content.bounce-in {
        -webkit-animation: VerticalTimeline-bounce-2-inverse .6s;
           -moz-animation: VerticalTimeline-bounce-2-inverse .6s;
                animation: VerticalTimeline-bounce-2-inverse .6s;
    }
    .cssanimations .VerticalTimeline-img.is-hidden {
        visibility: hidden;
    }
    .cssanimations .VerticalTimeline-img.bounce-in {
        -webkit-animation: VerticalTimeline-bounce-1 .6s;
           -moz-animation: VerticalTimeline-bounce-1 .6s;
                animation: VerticalTimeline-bounce-1 .6s;
        visibility: visible;
    }
}

@media only screen and (min-width: 768px) {
     .VerticalTimeline-content h2 {
            font-size: 20px;
            font-size: 1.25rem;
            margin-top: 0;
    }
     .VerticalTimeline-content p {
            font-size: 16px;
            font-size: 1rem;
    }
     .VerticalTimeline-content .VerticalTimeline-read-more,
     .VerticalTimeline-content .VerticalTimeline-date {
            font-size: 14px;
            font-size: .875rem;
    }
}
/*========= END OF VERTICAL TIMELINE ========*/



/*======= ButtonGroup ======*/

.button-group .btn{
height: 4.2vh;
border: var(--border-size-s) solid #057bb6;
color: #057bb6;
}

.button-group input[type="radio"]:checked + .btn{
background-color: #057bb6;
}

/*=======END OF ButtonGroup ======*/


.ActiveParentMenu .accordion-item-header, .MenuExpandable.ActiveParentMenu .accordion-item-header .accordion-item-icon{
    background-color: #F0F0F0 !important;
    color: var(--color-secondary);
}

 .sidebar a, .sidebar a:hover {
    color: #999999;
}

.accordion-item .accordion-item-content.is--expanded {
    background-color: #F0F0F0;
}


 .MenuSearch .input::-webkit-input-placeholder
{
    color:#999999;
} 


.Breadcrumbs2020{
    background-color: #ffffff;
}




/*ARABIC  CUSTOM STYLES*/
 .AR .ActionElement{
      padding: 5px 10px 5px 20px !important;
      text-align: right;
}

.AR table.ResultsTable tr:nth-child(1) th:nth-child(2) div{
     text-align: right;
}


/*
.AR .TableRecords .TableRecords_Header, .EditableTable thead th {
     text-align: right;
}*/

.AR .TableRecords .TableRecords_Header .fa {
        margin-right: var(--space-s);
        margin-left: 0px;   
}
        
.AR  .filterInput{
    margin-right: var(--space-s);
    margin-left: 0px;   
 }
 
 .AR .TableRecords .TableRecords_OddLine,
 .AR .TableRecords .TableRecords_EvenLine {
     text-align: right;
 }



.AR .TableRecords .TableRecords_Header,
.AR  .EditableTable thead th {
 text-align: right;   
}

.AR .checkbox:after,
.AR .TableRecords .TableRecords_Header [type="checkbox"]:after{    
        right: 2px;
        top: 3px;
        width: 10px;   
}


.AR .tippy-arrow{
 direction: ltr;   
}

.AR .TableRecords_OddLine:first-child,
.AR.TableRecords_EvenLine:first-child,
.AR .TableRecords_Header:first-child{
 padding-right: 16px;   
}


.AR div.Feedback_Message_Info:before,
.AR div.Feedback_Message_Warning:before,
.AR div.Feedback_Message_Error:before,
.AR div.Feedback_Message_Success:before {
  
    font: normal normal normal 15px/1 FontAwesome;
    padding-right: 2px;
}

.AR div.Feedback_Message_Wrapper [class*="Feedback_Message_"] span {
    padding-right: var(--space-s);
}

.AR .Feedback_Message_Success:before,
.AR .Feedback_Message_Info:before,
.AR .Feedback_Message_Error:before,
.AR .Feedback_Message_Warning:before  {
    left: 0px;
}


.AR .choices[data-type*="select-one"]:after,
.AR .time-picker .dropdown-icon {
     right: auto;
     left: 8px; 
}

.is-rtl .time-picker .dropdown-icon {
    left: 8px;
    right: auto;
}
    
    
.AR .input-with-icon.input-with-icon-right .input-with-icon-content-icon{
    left: 0;
    right: auto;
}

.AR .choices__list{
 direction: rtl;   
}

.AR .choices__list--dropdown{
direction:rtl;  
} 

.AR .sidebar {   
  right: 0px;
  left: auto;
 
}

.AR .Main_Wrapper {
  transition: margin-right .5s;
  margin-right: 13%;
  margin-left: auto !important;
}

.AR .content-breadcrumbs {
  transition: margin-right .5s;
  margin-right: 13%;
  margin-left: auto !important;
}

.AR .content-top {
  transition: margin-right .5s;
  margin-right: 13%;
  margin-left: auto !important;
}

.AR .content-bottom{
  transition: margin-right .5s;
  margin-right: 13%;
  margin-left: 0%;
}


.AR .SubMenuList{
    width: 100%;
    margin-left: auto;
   /* margin-right: 30px;*/
}

.AR .SubMenuList .subMenuWrapper div{
   margin-right: 30px;
   margin-left: auto;
}


.AR .SideMenuTitle{
 width:100%;
 margin-right: 5px;
 margin-left: auto;
}


.AR .input-with-icon.input-with-icon-right .input-with-icon-content-icon {
    right: auto;
    left: 0px;
    
}

.AR .Button + .Button{
    margin-right: 14px;
    margin-left: auto;
}   


.AR .content-top-actions{
    text-align: left;
}


.AR .input-with-icon .input-with-icon-content-icon.search-actions {
    left: 0;
    right: auto;
}


.AR .alignSearchLeft {
    padding: 0 var(--space-s) 0 0  !important;
    }
    
.AR .deleteContainer .Delete_Validate_Button{
    margin-right:var(--space-m);
}
.AR .filterInputNew {
    margin-right: var(--space-m);
    margin-left: var(--space-none);
}
.AR label.OSFillParent {
    margin-right: 3px;
}

.AR label {
    font-size: var(--font-size-m);
}

.AR .breadcrumbsWrapper {
    margin-left: var(--space-none);
    margin-right: var(--space-m);
}

 .AR .Save_Search_Button + .SaveNew_Reset_Button,
 .AR .Select_Button + .Select_Button,
 .AR .Save_Search_Button + .Delete_Validate_Button,
 .AR .Delete_Validate_Button + .Select_Button,
 .AR .Delete_Validate_Button +.Cancel_Button,
 .AR .ImportExportWrapper +.Add_Button,
 .AR .Delete_Validate_Button + .Delete_Validate_Button,
 .AR .alignSearchLeft + .Delete_Validate_Button,
 .AR .SaveNew_Reset_Button + .Cancel_Button,
 .AR .Save_Search_Button + .Cancel_Button,
 .AR .Delete_Validate_Button + .Cancel_Button,
 .AR .Add_Button + .Delete_Validate_Button,
 .AR .SaveNew_Reset_Button + .Add_Button,
 .AR .ImportExportWrapper + .SaveNew_Reset_Button {
    margin-right: var(--space-m);
    margin-left:var(--space-none);
}


.AR .choices__list--single {
    display: inline-block;
    padding-left: var(--space-base);
    padding-right:var(--space-none);

    }
    
/*---- Header and MainContent RTL adjustment ----*/

.AR .layout-top .header .HeaderStartWidth {
    width: 87%;
    margin-right: 13%;
}

.AR .MenuAdjustScreen {
    margin-left: auto;
    margin-right: 3%;
}

.AR .new_btn_burger {
    right: 10.5vw;
}

.Table_Wrapper{
    display: block;
    overflow-x:auto;
}