/* our droid sans font face for use with the CI module */
@font-face {
    font-family: 'Droid Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Droid Sans'), local('DroidSans'), url(droidsans.woff) format('woff');
}

/* apply a natural box layout model to all elements */
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

body, html, form {
    width: 100%;
    width: auto;
    min-height: 100%;
    height: auto;
}


img {
    border: 0;
}

body {
    font-family: 'Droid Sans', sans-serif;
    color: #555555;
    overflow: auto;
    min-width: 1425px;
    font-size: 16px;
}

form {
}

.Pagewrapper {
    position: relative;
    width: 100%;
}


#YourBrowserIsBad {
    padding-top: 25%;
    position: fixed;
    top: 0;
    height: 100%;
    left: 0;
    width: 100%;
    background-color: #F2F2F2;
    display: none;
    z-index: 999;
}

    #YourBrowserIsBad p {
        margin: 0 auto;
    }

#btnDummySubmit {
    z-index: 0;
    position: fixed;
    top: -150px;
}
/*********************************************************
	Header
*********************************************************/
#logos {
    float: left;
}

    #logos p {
        color: black;
        font-size: 9pt;
        position: absolute;
        top: 70px;
        left: 28px;
    }

    #logos img {
        padding: 0 25px;
        vertical-align: top;
        cursor: pointer;
    }

#lblBeta {
    position: absolute;
    left: 350px;
    top: -6px;
    font-size: 100px;
    font-weight: bolder;
    color: red;
}

#header {
    width: 100%;
    height: 50px;
    background-color: #FF9900;
    color: white;
    min-width: 1070px;
}

#logout {
    float: right;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 30px;
    padding-right: 30px;
    border-left: 3px solid #E67E22;
}

#logout input[type=image] {
	padding: 0;
}


#helpDesk {
    float: right;
    height: 100%;
    text-align: center;
    width: 200px;
}

    #helpDesk a {
        display: inline-block;
    }

        #helpDesk a img {
            float: left;
            height: 50px;
            width: auto;
            border: 0;
            padding-left: 10px;
        }

        #helpDesk a div {
            padding: 5px;
            float: right;
            text-decoration: none;
            color: white;
        }

#helloUser {
    float: right;
    color: white;
    font-size: 15pt;
    line-height: 40px;
    vertical-align: middle;
    padding: 5px 50px;
    border-right: 3px solid #E67E22;
    border-left: 3px solid #E67E22;
}

    #helloUser a {
        color: white;
        text-decoration: none;
        cursor: pointer;
    }

#announcements, #inventoryAlerts {
    float: right;
    padding-top: 10px;
    padding-left: 50px;
    padding-right: 50px;
}

#inventoryAlerts {
    border-right: 3px solid #E67E22;
    position: relative;
}

    #inventoryAlerts .smallcircleannouncements {
        position: absolute;
        top: 3px;
        left: 85px;
        text-align: center;
    }

    #inventoryAlerts img {
        margin-top: -5px;
        margin-left: 10px;
    }

#wrapper {
    position: relative;
    left: 20px;
    margin-top: 65px;
    margin-right: 40px;
}

.bottomButtons {
    text-align: center;
    padding-top: 30px;
}

/*********************************************************
	Side Navigation
*********************************************************/
#sideNav {
    width: 160px;
    position: absolute;
	/*overflow: hidden;*/
	height: 100%;
}

    #sideNav ul {
        position: absolute;
        width: 160px;
        list-style: none;
        margin: 0 0 50px 0;
    }

        #sideNav ul li {
            margin-left: 0;
            width: 160px;
            transition: margin-left 0.5s ease;
        }

        #sideNav ul.subNav {
            display: none;
        }

            #sideNav ul.subNav li {
                margin-left: 200px;
            }

        #sideNav ul li {
            background-color: #BFBFBF;
            font-size: 11pt;
            color: #555555;
            height: 55px;
            vertical-align: middle;
            margin: 0 0 4px 0;
            margin-bottom: 4px;
            -webkit-border-top-left-radius: 5px;
            -webkit-border-bottom-left-radius: 5px;
            -moz-border-radius-topleft: 5px;
            -moz-border-radius-bottomleft: 5px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

            #sideNav ul li a {
                display: block;
                text-decoration: none;
                color: #555555;
                padding: 10px;
                height: 100%;
            }

                /*Special case for links that need line breaks*/
                #sideNav ul li a div {
                    display: inline-block;
                }

.lineBreak {
    line-height: 18px;
}

#sideNav ul li a img {
    vertical-align: middle;
    padding-right: 10px;
    width: 35px;
    height: 35px;
}

/*some images looked funny at full size*/
img.small {
    width: 25px;
    height: 25px;
    padding-left: 5px;
    padding-right: 15px;
    padding-top: 5px;
    vertical-align: middle;
}

#sideNav ul li:hover {
    background-color: #DFDFDF;
}

#sideNav ul li a:hover {
    text-decoration: none;
    color: #555555;
}

#sideNav ul li a:visited {
    text-decoration: none;
    color: #555555;
}


#sideNav ul li.NavbtnCurrent {
    background-color: #F2F2F2;
}

    #sideNav ul li.NavbtnCurrent a:hover {
        background-color: #DFDFDF;
    }

/*********************************************************
	Main content area
*********************************************************/

#workarea {
    position: relative;
    top: 0;
    background-color: #F2F2F2;
    z-index: 1;
    margin-left: 160px; /*Set equal to the width of the Side Nav*/
    margin-right: 0px;
    padding: 10px;
    min-height: 885px;
}

#moduleNameHeader {
    height: 60px;
}

    #moduleNameHeader img:first-of-type {
        vertical-align: middle;
        height: 50px;
        width: 50px;
        padding-right: 10px;
        margin-bottom: 10px;
    }

    #moduleNameHeader h1 {
        position: absolute;
        text-align: center;
        left: 50%;
        display: block;
        min-width: 500px;
        margin-left: -250px;
        top: 17px;
    }

/*********************************************************
	Breadcrumbs
*********************************************************/

#breadcrumbs {
    clear: both;
    width: 100%;
    background-color: lightgray;
    padding: 4px;
    color: #2980B9;
}

    #breadcrumbs a {
        text-decoration: none;
    }

        #breadcrumbs a:first-of-type {
            text-decoration: none;
        }


        #breadcrumbs a:first-of-type {
            padding-left: 0;
        }

        #breadcrumbs a:after {
            content: ">";
            display: inline-block;
            padding: 0 10px;
        }

        #breadcrumbs a:last-of-type:after {
            content: "";
        }

#breadcrumbs {
    margin-bottom: 10px;
}

/*********************************************************
	Soup-ah Search!
*********************************************************/

.SuperSearch {
    position: absolute;
    right: 20px;
    top: 63px;
    background-color: lightblue;
    padding: 5px 7px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}


/*The container for actionable items on a standard screen, eg: "Add User"*/
#actionElements {
    min-width: 150px;
    float: left;
    margin-right: 20px;
    vertical-align: top;
}

/*The container for actionable items that leave the page */
#otherActions {
    min-width: 150px;
    float: right;
    text-align: right;
    margin-left: 20px;
    vertical-align: top;
}

#pageActions {
    float: right;
}

    #pageActions input[type=button] + input[type=button],
    #pageActions input[type=submit] + input[type=submit],
    #pageActions input[type=button] + input[type=submit],
    #pageActions input[type=submit] + input[type=button] {
        margin-left: 10px;
    }

/*The container that holds content in the upper right hand side of content*/
input[type=button].pageAction, input[type=submit].pageAction {
    width: 60px;
    height: 60px;
    padding: 15px;
    background-color: transparent;
    border: none;
    transition-property: background-color, border;
    transition-duration: .4s;
    margin: 0;
    margin-top: -5px;
    background-color: none;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    vertical-align: top;
    border: 6px double transparent;
}

    input[type=button].pageAction:hover, input[type=submit].pageAction:hover {
        border: 5px double #fff;
    }

.exportToExcel {
    background-image: url("../images/actions/xlsxgreen.svg");
}

.reportImg {
    background-image: url("../images/actions/Report.svg");
}

.document {
    background-image: url("../images/actions/invoice.svg");
}

input[type=button].exportToExcel:hover, input[type=submit].exportToExcel:hover {
    background-color: lightgreen;
}

.showHistory {
    background-image: url("../images/actions/history2.svg");
}

input[type=button].showHistory:hover, input[type=submit].showHistory:hover {
    background-color: lightgrey;
}

.printLabel {
    background-image: url("../images/actions/create-barcode.svg");
}

.printPage {
    background-image: url("../images/actions/printBlue.svg");
}

input[type=button].printPage:hover, input[type=button].printLabel:hover, input[type=submit].printPage:hover {
    background-color: lightblue;
}

input[type=button].pageAction.exportToPDF, input[type=submit].pageAction.exportToPDF {
    background-image: url("../images/actions/PdfSprite.svg");
    background-position: 7px 5px;
}

input[type=button].exportToPDF:hover, input[type=submit].exportToPDF:hover {
    background-color: #f63434;
    background-position: 11px -41px;
    background-size: 60%;
}

.modalHeader input[type=button].pageAction, .modalHeader input[type=submit].pageAction {
    height: 35px !important;
    width: 35px !important;
    margin-top: 3px;
    margin-right: 20px;
    position: absolute;
    right: 30px;
    border: none;
    transition-duration: .2s;
}

    .modalHeader input[type=button].pageAction.exportToExcel, .modalHeader input[type=submit].pageAction.exportToExcel {
        background-image: url("../images/actions/xlsxwhite.svg");
        height: 10px;
        width: 10px;
    }

        .modalHeader input[type=button].pageAction.exportToExcel:hover, .modalHeader input[type=submit].pageAction.exportToExcel:hover {
            background-color: green;
            border: 2px solid #fff;
            -webkit-font-smoothing: antialiased;
        }

.modal h3 {
    display: block;
}

/*Area of the page used for informational messages, placed between actionElements and otherActions, JavaScript dependant for width*/
#informativeContent {
    padding: 10px 20px;
}

.toggleFilters {
    color: #548BD4;
    margin-top: 10px;
    margin-left: 35px;
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.toggleHelp {
    color: #548BD4;
    margin-top: 10px;
    margin-left: 35px;
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.applyFilters {
    background-color: #27AE60 !important;
}

    .applyFilters:hover {
        background-color: lightgreen !important;
        color: #333;
    }

.advancedFilters {
    background-color: #DFDFDF;
    padding: 3px;
    margin: 0;
    text-align: center;
}

    .advancedFilters label.for {
        margin-top: 0;
    }

    .advancedFilters .applyFilters {
        display: block;
        margin: 10px auto;
    }

    .advancedFilters .filterBlock {
        margin: 10px 20px;
    }


.toggleFilters:before {
    content: "[ + ]";
    position: absolute;
    left: -35px;
    top: -1px;
}

.toggleFilters.open:before {
    content: "[ - ]";
}

.toggleHelp:before {
    content: "[ + ]";
    position: absolute;
    left: -35px;
    top: -1px;
}

.toggleHelp.open:before {
    content: "[ - ]";
}

.dataTables_wrapper {
    margin-top: 20px;
}

/*a wrapper for tables that have attached filters*/
.tableWrapper {
    background-color: lightgrey;
    text-align: center;
    border: 1px solid #555;
    min-height: 45px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

    .tableWrapper .tableTitle {
        font-size: 30px;
        padding-top: 7px;
        color: #fff;
        text-align: center;
        height: 45px;
        margin-bottom: -58px;
        -webkit-border-top-left-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        -moz-border-radius-topleft: 10px;
        -moz-border-radius-topright: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

        .tableWrapper .tableTitle.noDataTables {
            margin-bottom: -20px;
        }

.tableTitle {
    min-height: 50px;
}


.tableWrapper + table, .tableWrapper dataTables_wrapper table.dataTable, .tableWrapper dataTables_wrapper table.datagridLarge {
    border: none;
}

.tableWrapper .dataTables_info {
    padding: 0 10px 15px 10px;
}

.filterBlock {
    display: inline-block;
    margin: 10px;
    text-align: left;
    vertical-align: top;
}

.modal .filterBlock {
    margin: 0 4px;
}
/***************************************************************
	Datagrid divisions --- datagrids are in styles.css
	*******************************************************/
#workFlowDivider, .workFlowDivider {
    color: #fff;
    font-size: 17px;
    padding: 12px;
    width: 100%;
}

    #workFlowDivider ~ p, #workFlowDivider ~ p {
        margin: 10px;
    }

.closer {
    background: #fff;
    line-height: 30px;
    float: right;
    text-align: center;
    width: 30px;
    height: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 25px;
    margin: 2px 10px;
    /*nudge-it*/
    padding-right: 1px;
    padding-top: 1px;
    margin-top: -2px;
    /*make a circle*/
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: 10;
    cursor: pointer;
}


.debugger {
    position: fixed;
    padding: 5px;
    border: 1px solid red;
    top: 50px;
    left: 50px;
    background-color: #fff;
}

.container {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
}

.column, .forth, .third {
    display: inline-block;
    vertical-align: top;
    width: 49%;
}

.forth {
    width: 24%;
}

.third {
    width: 33%;
}

.container.detail .column, .container.detail .nudgeToMatchDetail {
    padding-left: 80px;
}


.column .filterBlock {
    margin: 0 10px 20px 0;
}

.collapserDown {
    padding: 12px;
    cursor: pointer;
    font-size: 17px;
    position: relative;
    text-align: center;
    margin-top: 20px;
}

    .collapserDown:before {
        content: "[ + ]";
        position: absolute;
        left: 10px;
        font-size: 22px;
        font-weight: bold;
        top: 8px;
    }

    .collapserDown.collapsed:before {
        content: "[ - ]";
    }

.collapsable.open {
    display: block;
}
/***************************************************************
	divFormInfo used in the "details" sections of the Form Screen Template
	*******************************************************/
#divFormInfo {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 30px solid #7F7F7F;
}

    #divFormInfo label {
        width: 200px;
        border-bottom: 1px solid black;
        font-size: 11pt;
        color: #646464;
        margin-bottom: 3px;
    }

        #divFormInfo label + a img,
        #divFormInfo label + img,
        #divFormInfo label + div a img {
            float: left;
            height: 50px;
            width: auto;
            vertical-align: middle;
        }

            #divFormInfo label + a img + p,
            #divFormInfo label + img + p,
            #divFormInfo label + div a img + p {
                font-size: 11px;
                padding: 17px;
                margin-left: 45px;
            }

#ajaxFormCommentsButton {
    position: relative;
}

/***************************************************************
Reports list page - not to be confused with individual reports (see reports.css)
*******************************************************/
.reportLinkWrapper {
    display: inline-block;
    margin: 20px 30px 10px 10px;
    min-width: 250px;
}

    .reportLinkWrapper a {
        display: inline-block;
        padding: 10px;
    }

        .reportLinkWrapper a.toolTip {
            border-bottom: none;
        }

        .reportLinkWrapper a:hover {
            padding: 9px;
            border: 1px solid #2980B9;
            text-decoration: none;
            color: #2980B9;
        }

/***************************************************************
	fixed footer
	*******************************************************/
#fixedFooter {
    position: fixed;
    bottom: 0;
    height: 60px;
    left: 180px;
    right: 20px;
    text-align: center;
    background-color: #fff;
    padding-top: 10px;
    z-index: 200;
}

.loading .one {
	opacity: 0;
	-webkit-animation: dot 1.3s infinite;
	-webkit-animation-delay: 0.0s;
	animation: dot 1.3s infinite;
	animation-delay: 0.0s;
}

.loading .two {
	opacity: 0;
	-webkit-animation: dot 1.3s infinite;
	-webkit-animation-delay: 0.2s;
	animation: dot 1.3s infinite;
	animation-delay: 0.2s;
}

.loading .three {
	opacity: 0;
	-webkit-animation: dot 1.3s infinite;
	-webkit-animation-delay: 0.3s;
	animation: dot 1.3s infinite;
	animation-delay: 0.3s;
}

@-webkit-keyframes dot {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes dot {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}