/*==================(Import All Css)=============================*/
@import '../css/Action.css';
@import '../css/Button.css';
@import '../css/Form.css';
@import '../css/Heading.css';
@import '../css/iFrame.css';
@import '../css/Message.css';
@import '../css/Other.css';
@import '../css/PrintMedia.css';
@import '../css/Table.css';
@import '../css/Tab.css';
@import '../css/Pagination.css';
@import '../css/Login.css';

html { height:100%; }
body { padding:0px !important; margin:0px !important; font-size:10px; }

::-webkit-scrollbar { width: 5px; height: 5px;}
::-webkit-scrollbar-button {  background: #666; }
::-webkit-scrollbar-track {  background-color: #000; }
::-webkit-scrollbar-track-piece { background-color:#D0CFCD}
::-webkit-scrollbar-thumb { height: 5px; background-color: #999; border-radius: 5px;}
::-webkit-scrollbar-corner { background-color: #000;}

a { text-decoration:none; color:#3F3F3F; cursor:pointer; }
a:hover { color:#00A2E8 }

input.link, input#link { background:none !important; border:0px !important; font-size:10px !important; color:#009EDF !important; line-height:inherit !important; width:auto !important; }

input.link:hover, input#link:hover { color:#333 !important;}

.PrintMe, #PrintMe
{
    display:none !important;
}

* table tr #utf8,
#CommonTable tr #utf8,
fieldset #CommonTable tr * #SmallTable tr #utf8 { font-size:14px !important; }
/*--TOP--*/
body {
    font: 10px normal Arial;
    margin: 0;
    padding: 0; background:#38A7C4;
    color:#333;
    height:100%;
}
.TopMenu 
{
    margin:0px; padding:0px;	
    background-color:#38A7C4;
    /* background: -webkit-linear-gradient(#333333, #1A1A1A); 
     background: -o-linear-gradient(#333333, #1A1A1A);
     background: -moz-linear-gradient(#333333, #1A1A1A);
     background: linear-gradient(#333333, #1A1A1A);*/
    font-size:10px;
    height:100%;
    background:url(../SpiTechImages/Header.png) repeat-x #38A7C4;

}

.Logo
{
    margin:2px 10px; width:200px; height:50px;	
}

.Title
{
    font-family:Arial; font-size:10px;

}

.Title h3
{
    color:#131313; font-size:13px; font-family:Times;
    text-shadow:1px 1px white;
    margin:0px; padding:0px;
}

.IP { font-size:9px; padding-left:10px; color:#CCC}
.DateTime { color:#fff; padding-left:10px; }


.Account
{
    margin:0px; padding:0px; min-height:40px; width:100%; min-width:150px; font-size:10px; font-family:Arial;
}

.UserPhoto
{
    border:1px solid #828282; margin:0px 5px; height:40px; width:35px;
    background : #555;

}
.UserID { color:white; text-shadow:1px 1px black; }

.MyAccount
{
    background:#FFFFF;
}

.MyAccount input
{
    bakground:none;
    border:0px;
    line-height:normal;
    font-size:9px;	
    color:#009EDF;
    font-family:Arial;
    width:100%; margin:0px;
    padding:0px;
    text-align:left;
    padding:0px 3px;
}
.MyAccount input:hover
{
    background:#009EDF;
    color:white;	
}

/*  Menu */
/*jqxExpander and jqxNavigationBar Style*/
.jqx-expander
{
}
/*applied to the Expander's header and content*/
.jqx-expander-header, .jqx-expander-content
{
    border-left-width: 1px;
    border-right-width: 1px;
    border-left-style: solid;
    border-right-style: solid;
    padding-top: 1px;
    padding-bottom: 1px;
    outline: 0;
}
/*applid to the content of the expander header.*/
.jqx-expander-header-content
{
    padding-left: 3px;
}
/*applid to the content of the expander header.*/
.jqx-expander-header-content-rtl
{
    padding-right: 3px;
}
.jqx-expander-content{padding-top: 0px;padding-bottom:0px; overflow: auto; outline: 0;}
/*applied to the Expander's header and its content when it is on the top of the header*/
.jqx-expander-header, .jqx-expander-content-top
{
    border-top-width: 1px;
    border-top-style: solid;
}
/*applied to the Expander's header and its content when it is on the bottom of the header*/
.jqx-expander-header, .jqx-expander-content-bottom
{
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
/*applied to the Expander's header*/
.jqx-expander-header
{
    cursor: pointer;
    overflow: hidden;
}
/*applied to the Expander's header when the expander is disabled or the toggleMode is "none"*/
.jqx-expander-header-disabled
{
    cursor: default;
}
/*applied to the Expander's arrow*/
.jqx-expander-arrow
{
    width: 15px;
    height: 15px;
    position: relative;
}
/*applied to the Expander's content if it is empty*/
.jqx-expander-content-empty
{
    border-width: 0px;
    padding: 0px;
}

/*applied to jqxNavigationBar. The NavigationBar internally uses jqxExpander's classes and inherits all header and content style settings from the Expander.*/
.jqx-navigationbar
{
    border: none;
    margin: 0px;
    -webkit-appearance: none;
    outline: none;
}
/*jqxPanel Style*/
.jqx-panel
{
    border: 1px solid transparent;
    -webkit-appearance: none;
    outline: none;
    padding: 0px;
    margin: 0px;
    cursor: default;
    overflow: hidden;
}

/*applied to all widgets*/
.jqx-widget{-moz-box-sizing: content-box; box-sizing: content-box; -ms-touch-action: none; zoom: 1; color: #000000; -moz-background-clip: padding; background-clip: padding-box; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; -webkit-appearance: none; -webkit-background-clip: padding-box; direction: ltr !important; -webkit-tap-highlight-color: rgba(0,0,0,0); font-family: Verdana,Arial,sans-serif; font-style:normal; font-size: 11px;
}

.jqx-item{-ms-touch-action: none; -moz-box-sizing: content-box; box-sizing: content-box;  color: inherit; -webkit-text-size-adjust: none;}

/*applied to containers to set a background and border color. Tabs, NavigationBar, Calendar content.*/
.jqx-widget-content {-moz-box-sizing: content-box; box-sizing: content-box; -ms-touch-action: none; -moz-background-clip: padding; -webkit-text-size-adjust: none; background-clip: padding-box; -webkit-background-clip: padding-box; -webkit-tap-highlight-color: rgba(0,0,0,0); font-family: Verdana,Arial,sans-serif; font-style: normal; font-size: 11px; border-color: #c7c7c7; background: #fff; }
/*applied to header areas. Tabs, Menu, Window, Calendar.*/
.jqx-widget-header {-moz-box-sizing: content-box; box-sizing: content-box; -ms-touch-action: none;-moz-background-clip: padding; -webkit-text-size-adjust: none; background-clip: padding-box; -webkit-background-clip: padding-box; -webkit-tap-highlight-color: rgba(0,0,0,0); border-color: #c5c5c5; background: #e8e8e8; }

.jqx-fill-state-normal{-moz-box-sizing: content-box; box-sizing: content-box; -ms-touch-action: none;font-family: Verdana,Arial,sans-serif; font-style: normal; font-size: 11px; border-color:#aaa; background: #efefef; }
.jqx-fill-state-hover {-moz-box-sizing: content-box; box-sizing: content-box; border-color:#999;  background: #e8e8e8;}
.jqx-fill-state-pressed{-moz-box-sizing: content-box; box-sizing: content-box; border-color:#999; background: #d1d1d1;font-weight:bold;}
.jqx-fill-state-focus {border-color: #555; }
.jqx-fill-state-disabled {cursor: default; color: #000; opacity: .55; filter:Alpha(Opacity=45);}
.jqx-fill-state-normal td, .jqx-fill-state-hover td, .jqx-fill-state-pressed td, .jqx-fill-state-disabled td, .jqx-fill-state-focus td, .jqx-widget td, .jqx-widget-content td, .jqx-widget-header td {
    box-sizing: border-box; -moz-box-sizing: border-box; 
}

.jqx-grid-bottomright, .jqx-panel-bottomright, .jqx-listbox-bottomright
{
    background-color: #e5e5e5;
}

/*==========DEVELOPED BY SURYA=================*/
#jqxNavigationBar ul
{
    padding:0px;
    margin:0px;
    padding-left:15px;
    overflow:hidden;
}
#jqxNavigationBar ul li
{
    list-style:none;

    background:#fff;
    padding:1px 1px;

    border-left:1px solid #E6E6E6;
    border-bottom:1px solid #E6E6E6;
    padding-left:10px;
}
#jqxNavigationBar ul li:hover
{
    background: #F3F5F7;	
}
#jqxNavigationBar ul li:hover input, #jqxNavigationBar ul li:active input
{
    color:#005E8A;
    padding-left:5px;
    font-family:tahoma;

    transition:all 1s ease;
    -moz-transition:all 1s ease;
    -webkit-transition:all 1s ease;
    -o-transition:all 1s ease;	
}

#jqxNavigationBar ul li.last
{
    border-bottom:0px
}
#jqxNavigationBar div img
{
    width:14px; height:14px;
    margin:1px 0px;
}
#jqxNavigationBar ul li input
{
    text-decoration:none;
    display:inline-block;
    color:#00A2E8;
    cursor:pointer;
    line-height:13px;
    font-size:10px;
    background:none;
    font-family:Arial;
    border:0px;
    width:100%;
    text-align:left;
    padding:0px;
    margin:0px;
    transition:all 1s ease;
    -moz-transition:all 1s ease;
    -webkit-transition:all 1s ease;
    -o-transition:all 1s ease;	
}


#jqxNavigationBar ul li.AddNew
{
    padding-left:0px;
}
#jqxNavigationBar ul li.AddNew input 
{
    color:#060;

}
#jqxNavigationBar ul li.Category
{
    font-family:Times; font-style:italic; text-align:center !important; background:#EBEBEB;
}
#content #jqxWidget #jqxNavigationBar div ul li input[type=button]:focus, 
#content #jqxWidget #jqxNavigationBar div ul li input[type=button]:active, 
#content #jqxWidget #jqxNavigationBar div ul li input[type=button]:hover,  
#content #jqxWidget #jqxNavigationBar div ul li input[type=button]:click
{ 
    border:0px !important; 
    background:#fff !important;
    background-color:#fff !important;
} 


body { background:#ECEBE7; margin:0px; padding:0px; height:100%; }
.Home,
.Reload,
#AutoHide { 
    height:18px; 
    width:66px !important; 
    border:0px; 
    margin:2px; 
    font-size:11px; 
    font-weight:BOLDER; 
    cursor:pointer; 
    background-color:white; 
    padding:0px;
    margin-top:5px;
}

#AutoHide
{
    width:16px !important; color:#198EE2; border:1px solid #A9BFD7;			
}       
#DashBoard
{
    margin-top:5px; text-align:center;
}

#DashBoard a
{
    min-width:110px; height:110px; width:auto;
    border:1px solid #38A7C4;

    padding:5px;
    font-size:11px; font-weight:bolder;
    color:#C60;
    overflow:hidden;
    transition:all 0.4s ease;

    margin:3px;
    background:white;
    text-align:center;
    display:inline-block;	
    border-radius:50%;

}
#DashBoard a img
{
    width:70px; height:70px;
}
#DashBoard a:hover
{
    color:red !important;	
    border:1px solid #090;
    box-shadow:10px 10px 10px gray;	
}

#DashBoard a:hover img
{
    width:105px; height:95px;
    transition:all 0.4s ease;
}