/**********************************************************************************************************/
/*                                                GENERAL                                                 */
/**********************************************************************************************************/

HTML {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

BODY
{
    font-size: 8pt;
    margin: 0;
}

FORM INPUT
{
    font-size: 9pt;
    font-family: 'Microsoft Sans Serif', helvetica, Verdana, sans-serif
}

.ui-dialog .ui-dialog-titlebar-close { 
    padding: 0; 
    background-color:#A52A2A;
}

.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { 
    padding: 0; 
    background-color:#E55B3C;
}

.ui-dialog{
    z-index:2950;
}

I.Icon_Width{
    width:16px;
}

img.SFWidgetIcon{
    max-width:150px !important;
}

/**********************************************************************************************************/
/*                                             HEADER TITLE                                               */
/**********************************************************************************************************/
H2
{
    color: #FF9933;
    font-weight: 500;
    text-shadow: 0 0 20px White;
    font-size: 24px;
    margin-top:10px;
}

H3
{
    color: #FF9933;
    font-size: medium;
    font-weight: bold;
    text-shadow: 0 0 20px White;
    text-align:left;
}

H4, H5
{
    color: #FF9933;
    font-weight: bold;
}

fieldset{
    padding:10px 10px 10px 10px;
    border:1px solid #E0E0E0;
}

LEGEND
{
    font-weight:bold;
    color:#3366FF;
    font-size:13px;
    text-decoration:none;
    border-bottom:none;
    width:initial;
    padding-left:5px;
    padding-right:5px;
}


/**********************************************************************************************************/
/*                                                ICON / IMAGE                                            */
/**********************************************************************************************************/

IMG
{
    border: 0;   
}

I.IconHover
{
}

I.IconHover:Hover
{
    opacity: 0.6;
}

I.IconHover:Disabled
{
    opacity: 0.3;
}


.PageNoLinkCurrent
{
    font-family: Arial;
    text-decoration: none;
    font-weight: bold;
    color: #2d2d2d;
}

.PageNoLink
{
    font-family: Arial;
    text-decoration: none;
    color: #000000;
}

.HeaderTopBackColor
{
    background-color: #f8f8f8; 
}

.HeaderTopBrand
{
    color:#777777;
    font-size: 18px; 
    line-height: 20px;
}


.HeaderButton
{
    border:none; 
    background-color:#F8F8F8;
    color:#3366FF;
    display: inline-block;
    padding: 6px 6px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
        -o-user-select: none;
           user-select: none;
           
}

.HeaderButtonIcon{
  border-color: #C0C0C0;
  background-color: #F0F0F0;
  border-radius: 4px;
  color: #555555;
}

.HeaderButton:hover,
.HeaderButton:focus,
.HeaderButton:active,
.HeaderButton.active,
.open .dropdown-toggle.HeaderButton {
  color: #333333;
  background-color: #ebebeb;
  border-color: #adadad;
}

/**********************************************************************************************************/
/*                                               HYPERLINK                                                */
/**********************************************************************************************************/
A 
{
    color: #428BCA;
    text-decoration: none;
    cursor: pointer;
}

A:hover, A:focus {
  outline: 0;
  color: #2A6496;
  text-decoration: underline;
}

A.link11
{
    color: #428BCA;
    TEXT-DECORATION: none;
    cursor: pointer;    
}

A.link11:hover
{
    color: #2A6496;
    TEXT-DECORATION: underline
}

A.linkRed
{
    color:#E42217;
    TEXT-DECORATION: none;
    cursor: pointer;    
}

A.linkRed:Hover
{
    color:#9F000F;
    TEXT-DECORATION: underline;
}

A.linkBold
{
    font-weight: bold;
    color:#E42217;
    TEXT-DECORATION: none;
    cursor: pointer;    
}

A.linkBold:Hover
{
    color:#9F000F;
    TEXT-DECORATION: underline;
}

/**********************************************************************************************************/
/*                                                MENU LINK                                               */
/**********************************************************************************************************/

UL, OL, LI, 
UL#social,OL#social,LI#social { 
	margin:0;
	padding:0;
	z-index: 999;
	padding-left:0px;
}

UL
{
    padding-left:20px;
}

UL#social LI {
  display: inline;
}

UL#social LI A
{
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right:3px;
  margin-top:0px;
 }

UL#social LI A:HOVER
{
    background-color: white;
    opacity: 0.6;      
}

#dropmenudiv
{
    BORDER-RIGHT: black 1px solid;
    BORDER-TOP: black 1px solid;
    Z-INDEX: 100;
    FONT: 12px/18px Verdana;
    BORDER-LEFT: black 1px solid;
    BORDER-BOTTOM: black 1px solid;
    POSITION: absolute;
    TEXT-DECORATION: none
}

#dropmenudiv A
{
    DISPLAY: block;
    WIDTH: 100%;
    TEXT-INDENT: 3px;
    TEXT-DECORATION: none
}

#dropmenudiv A:hover
{
    BACKGROUND-COLOR: yellow;
    TEXT-DECORATION: none
}


/**********************************************************************************************************/
/*                                                    CHART                                               */
/**********************************************************************************************************/
.ChartLegend ul {
    list-style: none;
    width: 100%;
    border:1px solid #E0E0E0;
    padding: 10px 10px 10px 10px;
}

.ChartLegend li {
    list-style: none;
    width: 100%;
    padding-top:5px;
}


.ChartLegend li span{
    text-indent: 16px;
    display: block;
    height: 12px;
    width:12px;
    margin-right: 5px; 
    padding-left: 0.8em;
    list-style-type: none !important;   
    white-space:nowrap;
    border:1px solid #C0C0C0;
}

.Chart-Legend{
    border:1px solid #C0C0C0;
    border-radius:10px;
}
/**********************************************************************************************************/
/*                                                     LIST                                               */
/**********************************************************************************************************/

.ListLinkIcon 
{
    list-style-type:none
}

.ListLinkIcon LI A I
{
    width:16px;
}

/**********************************************************************************************************/
/*                                                     TABS                                               */
/**********************************************************************************************************/
UL.SFSide{

}

UL.SFSide LI {
   background-color: #f5f5f5;
}

UL.SFSide LI:hover {
   background-color: #e8e8e8;
}

UL.SFSide LI.active,
UL.SFSide LI.active:hover {
   background-color: #f39c12;
   border-color:#f39c12;
}

UL.SFSide LI.active:hover{
    opacity:0.8;
}

UL.SFSide LI.active A {
   color: #fff;
}

UL.SFTabs
{   
    border-style:none;
    border-bottom: 1px solid transparent;

    background-color: #FFE87C;    
    background: linear-gradient(to bottom, #FFE87C, #FFFFCC);
}

UL.SFTabs LI
{
    margin-left:0px;
    margin-right:0px;

    background-color: #FFE87C;    
    background: linear-gradient(to bottom, #FFE87C, #FFFFCC); 
}

UL.SFTabs LI.active
{   
    background-color: White;    
    background: White;
}

UL.SFTabs LI A
{   
    margin-left:0px;
    margin-right:0px;
    font-size:12px;
    font-weight:bold;  
    background-color: #FFE87C;    
    background: linear-gradient(to bottom, #FFE87C, #FFFFCC); 
}

UL.SFTabs LI A:hover
{   
    background-color: #FFFFAA;    
    background: linear-gradient(to bottom, #FFFFAA, #FFFFCC);
}

UL.SFTabs LI.active A
{   
    background-color: White;    
    background: White;
}

UL.SFTabs LI.active A:hover
{   
    background-color: White;    
    background: White;
}

UL.SFStep{

}

UL.SFStep LI.prev {
    background:#FFFF99;
}

UL.SFStep LI.prev:hover {
    background:#FFFFCC;
}

UL.SFStep LI.prev A {
    color:#428BCA;
    font-weight:bold;
}

UL.SFStep LI.active, UL.SFStep LI.active:hover {
    background:#F0AD4E;
    border-color:#F0AD4E;
}

UL.SFStep LI.active A {
    color:White;
    font-weight:bold;
}

UL.SFTabs
{   
    border-style:none;
    border-bottom: 1px solid transparent;

    background-color: #FFE87C;    
    background: linear-gradient(to bottom, #FFE87C, #FFFFCC);
}

UL.SFTabs LI
{
    margin-left:0px;
    margin-right:0px;

    background-color: #FFE87C;    
    background: linear-gradient(to bottom, #FFE87C, #FFFFCC); 
}

UL.SFTabs LI.active
{   
    background-color: White;    
    background: White;
}

UL.SFTabs LI A
{   
    margin-left:0px;
    margin-right:0px;
    font-size:12px;
    font-weight:bold;  
    background-color: #FFE87C;    
    background: linear-gradient(to bottom, #FFE87C, #FFFFCC); 
}

UL.SFTabs LI A:hover
{   
    background-color: #FFFFAA;    
    background: linear-gradient(to bottom, #FFFFAA, #FFFFCC);
}

UL.SFTabs LI.active A
{   
    background-color: White;    
    background: White;
}

UL.SFTabs LI.active A:hover
{   
    background-color: White;    
    background: White;
}

/**********************************************************************************************************/
/*                                                 PAGING                                                 */
/**********************************************************************************************************/

.PageButton
{
    background-color:#FFF380;
    background:linear-gradient(to bottom, #FFF380, #FFFFAA);
    color:#666666;
}

.PageButton:hover
{
    background: url(../images/buttonhover.png) repeat-x left;
    color: #777777;       
}

/**********************************************************************************************************/
/*                                                FONT TYPE                                               */
/**********************************************************************************************************/

.SFLabel-Red
{
    color:Red;
}

.SFLabel-DarkBlue
{
    color:#2B3856;
}

.SFLabel-Green,
.SFLabel-Instruction
{
    color:Green;
}

.SFLabel-Gray,
.SFLabel-SubTitle
{
    color:Gray;
}

.SFLabel-DarkRed,
.SFLabel-DataRed
{
    color:#7E3117;
}

.labelData,
.SFLabel-Blue,
.SFLabel-Data
{
    color:#3366FF;
}

.SFLabel-Score
{
    color:#54C571;
}


.SFLabel-SM,
.SFLabel-SubTitle;
{
    font-size:11px;
}

.SFLabel-NORMAL{
    font-size:12px;
}

.SFLabel-MD,
.SFLabel-Desc,
.SFLabel-Data,
.SFLabel-DataRed,
.SFLabel-DescBold,
.SFLabel-Instruction,
.SFLabel-Score
{
    font-size:14px;
}

.SFLabel-LG,
.SFFinal-Desc
{
    font-size:16px;
}

.SFLabel-SubTitle
{
    font-weight:normal;
}

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

.label, 
.SFLabel-Score,
.SFLabel-Bold,
.SFFinal-Desc,
.SFLabel-DataRed,
.SFLabel-DescBold,
.SFLabel-Total
{
    font-weight:bold;
}

.SFLabel-Total
{
    background-color: #F3E5AB;
    font-weight:bold;      
}

LABEL.active{
    background-color: #f5f5f5 !important;
}

LABEL.success{
    background-color: #dff0d8 !important;
    border-color: #d6e9c6 !important;
}

LABEL.danger{
    background-color: #f2dede !important;
    border-color: #eed3d7 !important;
}

LABEL.warning{
    background-color: #fcf8e3 !important;
    border-color: #fbeed5 !important;
}


/**********************************************************************************************************/
/*                                                 POPUP                                                  */
/**********************************************************************************************************/
.SFDialog-Label
{
    padding-top:6px;
    font-size:13px;
}

/**********************************************************************************************************/
/*                                              BACKGROUND                                                */
/**********************************************************************************************************/

.SFBack-Yellow
{
    background:#FFFFCC;
}

.SFBack-Red
{
    background:#FFCBA4;
}

/**********************************************************************************************************/
/*                                             FAKE CONTROL                                               */
/**********************************************************************************************************/

.SFCtrl-NoBorder,
.SFTable-TextArea,
.SFTable-TextAreaFig
{
    -webkit-box-shadow: 0px 0px 0px #999; /* Safari */
    box-shadow: 0px 0px 0px #999;
    border-style:none;
    font-size:13px;
}

.SFCtrl-NoBack
{
    background-color:inherit;
}

.SFTable-TextArea,
.SFTable-TextAreaFig
{
    height:100% !important;
    min-height:75px !important;
    margin-bottom:0px;
}

.SFTable-TextAreaFig
{
    text-align:center;
}

.SFCtrl-Figure
{
    text-align:center;
    font-size:11px;
    background:inherit;
}

/**********************************************************************************************************/
/*                                                 BUTTON                                                 */
/**********************************************************************************************************/

.SFButtonIcon
{
    border-color:#EAC117;
    background-color:#FFF380;
    background:linear-gradient(to bottom, #FFF380, #FFFFCC);
    border-left:none;
    border-bottom-left-radius:0px !important;
    border-top-left-radius:0px !important;
}

.input-group-btn > .SFButtonIcon:first-child{
    margin-left:-3px !important;
    border-left:1px solid #EAC117;
}

.SFButtonIconFull
{
    border-color:#EAC117;
    background-color:#FFF380;
    background:linear-gradient(to bottom, #FFF380, #FFFFCC);
}

.SFButtonLabel{
    padding-top:4px !important;
}

.SFButtonIcon:Hover,
.SFButtonIconFull:Hover
{
    background-color:#FFFF99;
    background:linear-gradient(to bottom, #FFFF99, #FFFFAA);
}

.SFButton
{
    background: url(../Images/Button.png) repeat-x left;
    border: 1px solid #777777; 
    color: #2D2D2D;
    min-width:75px;
    border-radius: 4px;
}

.SFButton:hover
{
    background: url(../images/buttonhover.png) repeat-x left;
    color: #777777;      
}

.SFButton[disabled]
{    
    color: #777777;
    opacity: 0.5;
    border: 1 solid #888888;
    background: url(../images/buttonhover.png) repeat-x left; 
}

.SFButton[disabled]:hover
{
    background: url(../images/buttonhover.png) repeat-x left;  
}

/**********************************************************************************************************/
/*                                                   DIV                                                  */
/**********************************************************************************************************/

DIV.SFHeader
{
    clear: both;
}

DIV.SFFooterBlank
{
    height: 45px !important;
    min-height: 45px !important;   
}

DIV.SFFooter
{
    height: 25px;
    width: 100%;
    text-align: center;
    clear: both;
    color: White;
    background-color: #414141; 
}

DIV.SFDiv-TextArea, DIV.SFDiv-TextAreaRead
{
    font-size: 12.5px;
    border-radius: 4px;
    color: #555555;
    padding: 3px 8px;  
    border: 1px solid #cccccc;
    float: left; 
    overflow:auto;
}

DIV.SFDiv-Disabled, DIV.SFDiv-TextAreaRead{
  cursor: not-allowed;
  background-color: #eeeeee;
}

DIV.SFScroll{
    overflow:auto;
}

DIV.SFPanelScroll-Hidden{
    
    overflow-y:auto; 
    overflow-x:hidden;
    max-height:400px; 
    width:100%;
    text-align:justify;
}

DIV.SFPanelScroll
{
    overflow:auto; 
    max-height:500px; 
    width:100%;
    border:1px solid #C0C0C0;
}

DIV.SFDivScroll{
    
    overflow:auto; 
    max-height:500px; 
    width:100%;
    border:1px solid #C0C0C0;
    padding:10px 10px 10px 10px;
    border-radius:5px;
    text-align:justify;
}

DIV.SFPanel
{
    display:inline-block; 
    width:100%;
}

DIV.SFLabelCol
{
    display:inline-block;
    padding-left:5px;
    float:right;
    text-align:right;
}

DIV.refImg
{
    background: url('../Images/SystemImage/loading4.gif') no-repeat center;
    text-align: center; 
    width: 100%;
    height: 100px;
    position: absolute;
    top: 30%;
    display: none;           
}

.notif
{
    z-index: 9999999;
    font: bold 10pt calibri;    
    background-color: white;      
    display: none;        
    padding: 10px 20px 10px 20px;
    border: 1px solid #DDD;       
}

/**********************************************************************************************************/
/*                                                  TABLE                                                 */
/**********************************************************************************************************/

TABLE.SFTable, 
TABLE.SFTableData,
TABLE.SFTableNoBorder
{
    background:rgba(255, 255, 255, 0.4);
    width:100%;
}

TABLE.SFTableNoBorder TH, TABLE.SFTableNoBorder TD
{
    border-top:none !important;
}

TABLE.SFTable TH,
TABLE.SFTableData TH, 
TH.Record
{
    background-color: #FFFFCC;    
    /*  background: linear-gradient(to bottom, #FFFF99, #FFFF99) ;*/
    text-align: center;
    font-family: Arial;
    background: linear-gradient(to bottom, #FFE87C, #FFFFCC);
    padding-top:3px;
    padding-bottom:3px;
    font-size:12px;
}

TABLE.SFTable-Gray TH
{
    background-color: #E0E0E0;    
    /*  background: linear-gradient(to bottom, #FFFF99, #FFFF99) ;*/
    text-align: center;
    font-family: Arial;
    background: linear-gradient(to bottom, #E0E0E0, #FFFFFF);
    padding-top:3px;
    padding-bottom:3px;
    font-size:12px;
}

TH.Record
{
    font-size:12px;
}

TABLE.SFTable TR, 
TR.RecordHover
{
    background-color:none;
}

TR.RecordHover:hover
{
    background-color:#FFF380;
    background:linear-gradient(to bottom, #FFF380, #FFFFCC);
}

TABLE.SFTableData TR,
TR.RecordHover
{
    vertical-align:top;
}

TR.DropDownCheckList
{
    height:20px;
}

TR.DropDownCheckList:hover
{
    background-color:#C0C0C0;
}

TH.SFCtrl-TablePadding,
TD.SFCtrl-TablePadding
{
    padding: 4px 5px 4px 5px !important;
}

TD.SFCtrl-NoPadding
{
    padding: 0px 0px 0px 0px !important;
}

table.SFTable td{
    vertical-align:top;
}

/**********************************************************************************************************/
/*                                                  PANEL                                                 */
/**********************************************************************************************************/

DIV.SFPanelHeader
{
    font-weight:bold;
    background-color:#FFF380;
    background:linear-gradient(to bottom, #FFF380, #FFFFCC);
    font-size:13px;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
}

DIV.SFPanelHeaderBody{
    height:82px;
}

/**********************************************************************************************************/
/*                                             DIV BOOTSTRAP                                              */
/**********************************************************************************************************/

DIV.dashboard, DIV.SideWidget, .Panel-5, .Panel-10, .Panel-15, .Panel-20, .Panel-25, 
.Panel-30, .Panel-35, .Panel-40, .Panel-45, .Panel-50, .Panel-55,
.Panel-60, .Panel-65, .Panel-70, .Panel-75, .Panel-80, .Panel-85, .Panel-90, .Panel-95, .Panel-SM-40, .Panel-SM-60,
.Panel-XS5, .Panel-XS10, .Panel-XS20, .Panel-XS25, .Panel-XS-30, .Panel-45, .Panel-XS50, .Panel-XS55, .Panel-XS60, .Panel-XS65, .Panel-XS70, .Panel-XS95
{
    position: relative;
}

DIV.PanelPadding
{
    margin-bottom:5px;
}

.Panel-XS5, .Panel-XS10, .Panel-XS20, .Panel-XS25, .Panel-XS-30, .Panel-45, .Panel-XS50, .Panel-XS55, .Panel-XS60, .Panel-XS65, .Panel-XS70, .Panel-XS95
{
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

DIV.Panel-XS5, DIV.Panel-XS10, DIV.Panel-XS20, DIV.Panel-XS25, DIV.Panel-XS-30, DIV.Panel-45, DIV.Panel-XS50, DIV.Panel-XS55, DIV.Panel-XS60, 
DIV.Panel-XS65, DIV.Panel-XS70, DIV.Panel-XS95
{
    float:left;
}

.Panel-XS5{
    width:5%;
}

.Panel-XS10{
    width:10%;
}

.Panel-XS20{
    width:20%;
}

.Panel-XS25{
    width:25%;
}

.Panel-XS30{
    width:30%;
}

.Panel-XS45{
    width:45%;
}

.Panel-XS50{
    width:50%;
}

.Panel-XS55{
    width:55%;
}

.Panel-XS60{
    width:60%;
}

.Panel-XS65{
    width:65%;
}

.Panel-XS70{
    width:70%;
}

.Panel-XS95{
    width:95%;
}

@media (min-width: 992px) {
    DIV.dashboard, DIV.SideWidget
    {
        float: left;
    }
    
    DIV.dashboard
    {
       width: 70%;
    }
    
    DIV.SideWidget
    {
       width: 30%;
    }
}

@media (min-width: 1100px)
{
    .Panel-5, .Panel-10, .Panel-15, .Panel-20, .Panel-25, 
    .Panel-30, .Panel-35, .Panel-40, .Panel-45, .Panel-50, .Panel-55, 
    .Panel-60, .Panel-65, .Panel-70, .Panel-75, .Panel-80, .Panel-85, .Panel-90, .Panel-95, 
    .Panel-99, .Panel-1, .Panel-79, .Panel-84
    {
        float: left;
    }
    
    .Panel-1
    {
       width: 1%;
    }

    .Panel-5
    {
       width: 5%;
    }
    
    .Panel-10
    {
       width: 10%;
    }
    
    .Panel-15
    {
       width: 15%;
    }
    
    .Panel-20
    {
       width: 20%;
    }
    
    .Panel-25
    {
       width: 25%;
    }
    
    .Panel-30
    {
       width: 30%;
    }

    .Panel-35
    {
       width: 35%;
    }
    
    .Panel-40
    {
       width: 40%;
    }
    
    .Panel-45
    {
       width: 45%;
    }
    
    .Panel-50
    {
       width: 50%;
    }
    
    .Panel-55
    {
       width: 55%;
    }
    
    .Panel-60
    {
       width: 60%;
    }
    
    .Panel-65
    {
       width: 65%;
    }
    
    .Panel-70
    {
       width: 70%;
    }
    
    .Panel-75
    {
       width: 75%;
    }

    .Panel-79
    {
       width: 79%;
    }
    
    
    .Panel-80
    {
       width: 80%;
    }
    
    .Panel-84
    {
       width: 84%;
    }

    .Panel-85
    {
       width: 85%;
    }
    
    .Panel-90
    {
       width: 90%;
    }
    
    .Panel-95
    {
       width: 95%;
    }
    
    .Panel-99
    {
       width: 99%;
    }
}


@media (min-width: 500px)
{
    .Panel-SM-40, .Panel-SM-60
    {
        float: left;
    }
    
    .Panel-SM-40
    {
       width: 40%;
    }
    
    .Panel-SM-60
    {
       width: 60%;
    }
}

/**********************************************************************************************************/
/*                                          ORGANIZATION CHART                                            */
/**********************************************************************************************************/

.tree * {
    margin: 0; padding: 0;
}

.tree ul {
    padding-top: 20px; 
    position: relative;
    white-space: nowrap;

    -transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.tree li {
    float: left; 
    text-align: center;
    list-style-type: none;
    position: relative;
    padding-top:20px;

    -transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 2px solid #696969;
    width: 50%; height: 20px;
}

.tree li::after{
    right: auto; left: 50%;
    border-left: 2px solid #696969;
}

/*We need to remove left-right connectors from elements without any siblings*/
.tree li:only-child::after, 
.tree li:only-child::before {
    display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ 
    padding-top: 0;
}

/*Remove left connector from first child and right connector from last child*/
.tree li:first-child::before, 
.tree li:last-child::after{
    border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
    border-right: 2px solid #696969;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after{
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 2px solid #696969;
    width: 0; height: 20px;
}

.tree li a{
    width: 200px;
    border-radius:5px;
    margin-right:10px;
   /* padding: 5px 10px;*/
    text-decoration: none;
    background-color: white;
    color: #8b8b8b;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    display: inline-block;  
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);

    -transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover,
 .tree li a:hover+ul li a {
    background: #cbcbcb; color: #000;
}

/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
    border-color:  #94a0b4;
}

/**********************************************************************************************************/
/*                                                   MEDIA                                                */
/**********************************************************************************************************/
.SFDragItem{
    width:100% !important;
}

@media print
{
    .noprint, .Button, .SFHeader, .SFFooter, .shortcutdiv, .SFButto, .btn
	{
	    display:none;
	}
	
    .print
	{
	    display:block;
	}
	
	.SFLabel-Desc,
	.SFLabel-Data,
	.SFLabel-DataRed,
	.SFTable TH,
	.SFTableData TH
	{
	    font-size:10px;
        font-family:Arial;
	}

    TH.SFCtrl-TablePadding,
    TD.SFCtrl-TablePadding
    {
        padding: 1px 2px 1px 2px !important;
    }
}

@media screen
{
    .noscreen
	{
	    display:none;
	}
}