/* PURPOSE : Contains all the styling for the entire system and overrides some of the rules defined in the materialize.min.css for the branding purpose 
 *	System scales well for full resolution monitors and small laptops (1366x768, 1440x900, 1280x800) and isn't designed for anything below it.
 */

html {
    position: relative;
    min-height: 100%;
    overflow: auto;
    overflow-x: hidden;
}
body {
    display: block;
    font-size: 1em;
    margin: 0 0 50px;    
    background-color: #cacbcc;
    height: 100%;
    overflow: auto;
    min-height: 500px;
}
nav {
    margin-bottom: 2%;
    background-color: #333333;
}
nav ul li {
    background-color: #5D5C5C;
    margin-left: 4px;
}
nav ul .active {
    background-color: #a3de4e;
    background: -moz-linear-gradient(top, #a3de4e, #729e37);
    background: -webkit-gradient(linear, left top, left bottom, from(#a3de4e), to(#729e37));
    background: -o-linear-gradient(left top, #a3de4e, #729e37);
    background-image: linear-gradient(to bottom, #a3de4e, #729e37);   /* IE */
}
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=time],
input[type=date],
input[type=datetime-local],
input[type=tel],
input[type=number],
input[type=search],
.materialize-textarea,
textarea {
	border: 0;
	border-bottom: 1px solid #9e9e9e;
	padding: 0 10px;
    border-radius: 4px;
    width: 92%;
    font-size: 1em;    
    border: 1px solid transparent;
    background-color: #fff;
}
input.z-depth-2 {
    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
input[type="button"],
input[type="submit"] {
    font-size: 1em;    
    color: #fff;
}
input[type="button"]:hover,
input[type="submit"]:hover {
    color: #222222;
}
footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    width: 100%;
    background-color: #333333;
    text-align: center;
    color: #fff;
}
footer.page-footer {
    margin-top: 0;
    padding-top: 0;
    background-color: #333333;
}
footer p {
    margin: 10px;
}
#monsterlogo {
    width: 92%;
    margin-left: 16%;
}
/* For Firefox browser only */
@-moz-document url-prefix() {
    #monsterlogo {
        width: 72%;
        margin-left: 16%;
    }
}
h1, .h1 {
    background-color: #ef8c0f;
}
.log_submit {
	background-color: #26A69A;
    border: 0;
}
.container-div {
	width: 60%;
    margin: 7% auto;
    background-color: #F1F3EF;
    box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.16), 0 7px 10px 0 rgba(0, 0, 0, 0.12);
}
button.btn.waves-effect.waves-light.orange {
	width: calc(100% - -1.6em);
}
div.row.monster-container {
    width: 30%;
    margin-right: 0;
    margin-top: -20%;
    margin-bottom: 16px;
}
div.row.monster-container img {
	width: 100%;
    height: 100%;
    margin-bottom: -5px;
}
.btn.waves-effect {
	width: 100%;
	min-height : 46px;
}

/*---------------Select dropdown match to materilizer select dropdown------------*/
select.select-dropdown {
    position: relative;
    cursor: pointer;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    outline: none;
    height: 3em;
    line-height: 3em;
    width: 100%;
    font-size: 1em;
    margin: 0 0 15px 0;
    padding: 0;
    display: block;
}

/*------------transaction page styling------------*/
p > b {
	font-size: 28px;
    font-weight: bold;
    color: #78746E;
    padding: 10px;
}

.light-background {
	background-color: #DADADA;
}
.collapsible-body .col.s12.m5 {
	width: 49.6%;
}
wsa:action {
	display: block;
}
.gen-info {
	height: 480px;
}
.add-info {
	height: 450px;	
}
pre {
	padding: 1% 2%;
	margin : 0;
    display: -webkit-inline-box;
    white-space: pre-line;
}
/*-------styles for user info page-------------*/

.form_table td > b {
    margin-left: 10px;       
    display: block;
    padding: 8px;    
    border-radius: 4px;

}
.access-check > div {
    width: 10%;
    float: left;
}
.form_table td{
	padding: 8px 5px;
}
td span {
	font-weight: bold;
}
.fieldset-title {
	text-align: center;
    font-size: 28px;
    color: #A79F9F;
}


/*-----sub-menu css-----------*/
#dropdown1, #dropdown2 {
	 overflow-y: inherit !important;
	 overflow-x: inherit !important;
	 top: 64px !important;
}
#dropdown2 { 
	width: 178px !important;
}
#dropdown1 li, #dropdown2 li {
	display: block;
	margin-left: 0;
	line-height: 32px;
}
#dropdown1 li:hover, #dropdown2 li:hover, #dropdown1 li:active, #dropdown2 li:active {
    background-color: #333;
}
#dropdown1 li > a, #dropdown2 li > a {
    font-size: 1em;
    color: #fff;
}
.error {
	background-color: red;
}
.filogix_td > div > b {
	width: 120px;
    display: -webkit-inline-box;
}
.dashboard {
    height: auto;
    padding: 0;
    margin: 0;
    margin-bottom: 10px;
    color: #fff;
    border: 1px solid transparent;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.dashboard h4 {
    margin-top: 0;
    font-size: 1.5em;
    padding: 21px;
    margin: -1px;
    background-color: #a3de4e;
    background: -moz-linear-gradient(top, #a3de4e, #729e37);
    background: -webkit-gradient(linear, left top, left bottom, from(#a3de4e), to(#729e37));
    background: -o-linear-gradient(left top, #a3de4e, #729e37);
    background-image: linear-gradient(to bottom, #a3de4e, #729e37);/* IE */
    border-top-left-radius: 6px;
}
.dashboard h4,
.dashboard p {
    margin-bottom: 0;
    display: inline-block;
}
.dashboard p {
    text-align: right;
    width: 82%;
    margin-top: 0;
}
.dashboard:first-line {
    font-size: 1.2em;
    font-weight: bold;
}

.btn,
.btn-large,
table.striped > tbody > tr.row_header,
table.striped > tbody > tr.ROW_HEADER,
.row_header,
.ROW_HEADER {
    border: 1px solid #7caa3b;
    background-color: #a3de4e;
    background: -moz-linear-gradient(top, #a3de4e, #729e37);
    background: -webkit-gradient(linear, left top, left bottom, from(#a3de4e), to(#729e37));
    background: -o-linear-gradient(left top, #a3de4e, #729e37);
    background-image: linear-gradient(to bottom, #a3de4e, #729e37); /* IE */
}
.ACTIONS input[type=text] {
    margin: 0;
}
.ACTIONS .btn {
    height: 3em;
}
.ACTIONS .btn.waves-effect {
    max-width: 280px;
}
.FORM_LIST form table td div.input-field {
    display: inline-block;
    min-width: 200px;
}
th {
    border-radius: 0;
}
.FORM_LIST form ul {
    margin-left: 16%;
    padding-bottom: 3%;
    padding-top: 1%;
}
.FORM_LIST form ul li {
    float: left;
    padding-left: 5%;
}
.FORM_LIST form ul li a {
    color: #fff;
}
.FORM_LIST form ul li a .material-icons {
    background-color: #EF8C0F;
    font-size: 40px;
    border-radius: 6px;
}
.card-panel .BLOCK {
    background-color: transparent;
    border: none;
}
#Records-found {
    text-align: center;
    margin-top: 0;
    margin-bottom: 1%;
    background-color: #E0DEDE;
    padding: 10px;
}
table.striped>tbody>tr:nth-child(even) {
    background-color: #E0DEDE !important;
}
.collapsible-body {
    background-color: #fff;
}
#myForm ul li .input-field {
    margin-top: 8px;
    display: inline-block;
    margin-left: 1em;
    vertical-align: top;
}
#myForm ul li .select-wrapper,
#myForm ul li select {
    position: relative;
    vertical-align: top;
    margin-top: -10px;
}
#myForm ul li .select-wrapper input.select-dropdown,
#myForm ul li select.select-dropdown {
    background-color: #E0DEDE;
  	padding-left: 5%;
}
#myForm ul li .select-wrapper .caret {
    color: #000;
    right: 8px;
    z-index: 10;
}
/* Placeholder styling */
::-webkit-input-placeholder {
    color: #5D5C5C;
}
:-moz-placeholder {
   color: #5D5C5C;
}
::-moz-placeholder {
    color: #5D5C5C;
}
:-ms-input-placeholder {
    color: #5D5C5C;
}

#DASH .BLOCK {
    border: none;
}
.marginNone {
    margin: 0;
}
.bgColor {
    background-color: #ef8c0f;
}
.grey_bgColor {
    background-color: #aaa;
}
.hidden {
    display: none;
}
.block {
    display: block;
}
.inline {
    display: inline;
}
.half {
    width: 49%;
}
.HALF {
    width: 50%;
}
.fullWidth {
    width: 100%;
}
.clearBoth {
    clear: both;
}
.clear {
	clear: both;
	font-size: 1px;
	line-height: 1px;
}

.clear2 {
	clear: both;
	font-size: 1px;
	line-height: 1px;
	height: 1px;
	background-color: #000000;
}

.CLEAR {
	display: block;
	clear: both;
}
.floatleft {
    float: left;    
    clear: none;
}
.floatright {
    float: right;    
    clear: none;
}
.action {
    cursor: pointer;
}
.border_style {
    border: 1px solid transparent;
    vertical-align: top;
    background-color: #E0E0E0;
}
.ALERT {
    border: 1px solid #D10034;
    background-color: #FF9999;
    line-height: 20px;
}
.CENTER {
    text-align: center;
}
.RIGHT {
    text-align: right;
}
.LEFT {
    text-align: left;
}
.LINE {
    height: 1px;
    background-color: #000;
}
.OPTIONS {
    width: 75px;
}
.LINK {    
    float: left;
    text-decoration: none;
    cursor: pointer;
}
.LINK2 {
    display: inline;
    text-decoration: none;
}
.LINK:hover,
.LINK2:hover {
    text-decoration: underline;
}
.LABEL {
    font-weight: bold;
}
.TOP {
    vertical-align: top;
}
.QUATER {
    width: 25%;
}
.FULL {
    width: 100%;
}
.OVERFLOW {
    overflow: auto;
    height: 150px;
}
.PADDING {
    padding: 4px;
}
.PADDING-RIGHT {
    padding-right: 4px;
}
#empty {
    position: absolute;
    bottom: 0;
    display: none;
}
#list_options {
    z-index: 100;
    position: absolute;
    width: 7%;
    top: 0;
    left: 0;
    box-shadow: 0px 10px 20px #606162;
}
#list_options .form_table tr td a {
    color: #000;
}
.pointer {
    cursor: pointer;
}
tr.pointer {
    height: 50px;
}
.pointer:hover {
    background-color: #999;
}
.bold {
    font-weight: bold;
}
.hidden {
    display: none;
}
.TITLE {
    border: none;
    display: block;
    text-align: left;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    clear: both;    
}
.PADDING_ELEMENT input,
.PADDING_ELEMENT select {
    margin-top: 2px;
    margin-left: 2px;
}
.PADDING_ELEMENT b {
    display: block;
    clear: both;
    margin-top: 5px;
    margin-left: 2px;
}
.status_bar {
	font-size: 12px;
}
.dialog {
	display: block;
	position: absolute;
}

.dialog table.table_window {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	margin: 0px;
	padding: 0px;
}
table.table_window td {
	padding: 0;
}

.dialog .title_window {
	-moz-user-select: none;
}
.overlay_alphacube {
	background-color: #000;
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}

.alphacube_nw {
	width: 10px;
	height: 25px;
}

.alphacube_n {
	height: 25px;
}

.alphacube_ne {
	width: 10px;
	height: 25px;
}

.alphacube_w {
	width: 7px;
}

.alphacube_e {
	width: 7px;
}

.alphacube_sw {
	width: 7px;
	height: 7px;
}

.alphacube_s {
	height: 7px;
}

.alphacube_se {
	width: 7px;
	height: 7px;
}

.alphacube_title {
	float: left;
	height: 14px;
	font-size: 14px;
	text-align: center;
	margin-top: 2px;
	width: 100%;
	color: #123456;
}

.alphacube_content {
	overflow: auto;
	color: #000;
	background: #FDFDFD;
	border-radius: 6px;
    padding: 4%;
}

.alphacube_message {
	text-align: center;
	width: 100%;
	padding-bottom: 10px;
}

/** These style are applied to every list and form **/

#PAGE {
    padding: 0;
    border: 1px solid transparent;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    margin: 0;
    height: 80px;
}
#PAGE .HEAD {
    font-weight: bold;
    font-size: 1.3em;
    color: #fff;
    display: inline-block;
    vertical-align: top;
    padding: 25px;
    margin: -1px;
    background-color: #a3de4e;
    background: -moz-linear-gradient(top, #a3de4e, #729e37);
    background: -webkit-gradient(linear, left top, left bottom, from(#a3de4e), to(#729e37));
    background: -o-linear-gradient(left top, #a3de4e, #729e37);
    background-image: linear-gradient(to bottom, #a3de4e, #729e37);
    border-top-left-radius: 6px;
}
#PAGE .HEAD p {
    margin: 0;
}
#PAGE .HEAD .material-icons {
    vertical-align: middle;
    margin-top: -4px;
}
.ACTIONS {
    display: inline-block;
    margin-left: 1%;
}
.ACTIONS input[type=text] {
    min-width: 600px;
}
.ACTIONS .z-depth-2 {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#PAGE .FILTERS {
    padding: 5px;
    color: #fff;
}
#PAGE .ERROR,
.ERROR,
#PAGE .SAVED,
.SAVED {
    position: absolute;
    padding: 5px;
    height: 36px;
    color: #000;
    font-size: 16px;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    top: -37px;
    margin: auto;
    left: 0;    
    font-weight: bold;
    border: none;
    background-color: #F14545;
    text-transform: capitalize;
    border-radius: 6px;
}
#PAGE .SAVED,
.SAVED {    
    background-color: #93C947;    
}
.container-div .ERROR {
    top: -84px;
    left: 12px;
    height: 70px;
}
.form_table td > .error {
    background-color: #FF6262;
}
.form_table td > .saved {
    background-color: #99D149;
}
#PAGE .MSG {
    padding-bottom: 2px;
}

#MENU, #CLOSE {    
    display: none;
}

#CONTAINER {
    margin: 0 auto;
    clear: right;
    width: 95%;
    min-width: 70%;
    height: 100%;
    position: relative;
    margin-bottom: 2%;
    background-color: #E6E6E6;
    -moz-box-shadow: 0px 10px 20px #606162;
    -webkit-box-shadow: 0px 10px 20px #606162;
    -o-box-shadow: 0px 10px 20px #606162;
    box-shadow: 0px 10px 20px #606162;
    border-radius: 6px;
}
#CONTENT {
    width: 100%;
}

#STATUS {
    z-index: 100;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000000;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6 !important;
    opacity: 0.6 !important;
}
#STATUS_text {
    margin: 22% auto 0;
    display: block;
    width: 10%;
    color: #FFFFFF;
    font-size: 20px;
    text-align: center;
}

.BLOCK {
    padding: 5px;
    -moz-border-radius: 0 0 5px 5px;
    margin-bottom: 10px;
    background-color: #DEDEDE;
    border: 1px solid #808080 ;
}
#DASH .CONTENT {
    clear: both;
}
#DASH .CONTENT .BLOCK {
    overflow: auto;
    height: 380px;
}
#DASH .CONTENT .BLOCK table {
    width: 100%;
}
#DASH .CONTENT .BLOCK th {
    text-align: left;
    font-weight: bold;
    padding-left: 10px;
}
#DASH .CONTENT .BLOCK td {
    margin: 5px;
}
#DASH .CONTENT .BLOCK tr {
    cursor: pointer;
}
#DASH .CONTENT .BLOCK .ALT,
#DASH .CONTENT .BLOCK .ROW,
.ALT1,
.ALT2,
.ALT3,
.ALT4 {
    cursor: pointer;
}
#DASH .CONTENT .BLOCK .ROW,
#DASH .CONTENT .BLOCK .ALT {
    padding: 4px;
    cursor: pointer;
    width: 100%;
    height: 20px;
}

/**
 Follow style are used by the list and form
 **/

.form_table,
.FORM_TABLE,
.TABLE_LIST {
    padding: 2px;
    width: 100%;
}
.list_table,
.FORM_LIST {
    padding: 2px;
    width: 100%;
    border: 1px solid #d0d0d0;
    border-collapse: collapse;
    background-color: #fff;
}
.row_header,
.ROW_HEADER {
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    border-right: none;
    color: #fff;
}
table.striped > tbody > tr.row_header,
table.striped > tbody > tr.ROW_HEADER {
    color: #fff;
}
.col_header,
.COL_HEADER {
    text-align: left;
}
.row_header th,
.ROW_HEADER th {
    border-bottom: none;
}
.table_row,
.LIST_ITEM {
    padding: 4px;
    cursor: pointer;
    width: 100%;
    background-color: #ebebeb;
}
.table_row_alt,
.LIST_ITEM_ALT {
    padding: 4px;
    cursor: pointer;
    width: 100%;
    background-color: #CCC;
}
.list_table .noheight,
.FORM_LIST .noheight {
    line-height: 0;
    height: 0;
}

.table_row_alt td,
.table_row td {
    border-right: none;
}
.table_row_alt td:last-child,
.table_row td:last-child {
    border-right: none;
}
table.striped>tbody>tr:nth-child(odd) {
    background-color: #f2f2f2 !important;
}
table.striped tr.table_row_alt:hover,
.LIST_ITEM_ALT:hover,
table.striped tr.table_row:hover,
.LIST_ITEM:hover,
table.striped tr:hover,
table.striped>tbody>tr:nth-child(even):hover,
table.striped>tbody>tr:nth-child(odd):hover {
    background-color: #616161 !important;
    color: #fff !important;
}

.table_cell,
.TABLE_CELL {
    font-size: 1em;
    width: 100%;
    padding-left: 5px;
}
.list_detail_title {
    width: 200px;
    text-align: center;
}
.list_detail {
    width: 100%;
    border: 2px solid #999999;
    background-color: #dddddd;
    color: #000000;
}
.list_cell_detail {
    position: absolute;
}
.LIST_DETAIL {
    display: none;
    background-color: #fcc669;
    border: 2px solid #f89c25;
}
.LIST_DETAIL .TITLE2 {
    display: inline;
    float: left;
}
.LIST_DETAIL .ACTION {
    display: inline;
    float: right;
    clear: right;
}
.LIST_DETAIL .CONTENT {
    display: block;
    border-top: 1px solid #f89c25;
    border-bottom: 1px solid #f89c25;
    margin-top: 20px;
}

table.striped>tbody>tr.error {
    background-color: #C32C2C !important;
    color: #fff !important;
}
#DASH {
    min-height: 175px;
}

/* Styles for Firefox browser only */
@-moz-document url-prefix() {
    #DASH {
        min-height: 185px;
    }
}

/* Styles to fix a bug in the firefox where the leads and users table gets out of the view and gets squeezed into the right of screen */
@media screen and (max-width : 1600px){
	/* Styles for Firefox browser only */
    @-moz-document url-prefix() {
        .list_table.salesforce_table, .list_table.users_table {
            position: absolute;
            left: 0;
            right: 0;
        }
        body {
            min-height: 800px;
        }
    }
}

/* Styles for medium size laptops such as Surface Pro 3 like devices */
@media screen and (max-width: 1450px) {
    .ACTIONS input[type=text] {
        min-width: 350px;
    }
    #list_options {
        width: 12%;
    }
    .ACTIONS .btn.waves-effect {
        margin-left: 10px;
        padding: 4px;
    }
    #PAGE .HEAD p {
        font-size: 16px;
    }
    #PAGE .HEAD {
        padding: 28px;
    }
    .container-div {
        width: 70%;
    }
    .dashboard p {
        width: 78%;
    }
    .container-div {
        width: 70%;
    }
    .FORM_LIST form ul {
	    margin-left: 10%;
	}
}

/* Styles for small laptops and large tablets */
@media screen and (max-width: 1280px) {
    .ACTIONS input[type=text] {
        min-width: 300px;
    }
    .ACTIONS .btn.waves-effect {
        margin-left: 12px;
    }
    .ACTIONS {
        margin-left: 0;
    }
}