body{
	background-color: #e4e4e4;
}
.pgheader{
	background-color: #353535;
    height: 100px;
	border-bottom:1px solid black;
}
.pgcontainer{
	background-color: #e4e4e4;
	min-height: -o-calc(100% - 172px);
	min-height: -moz-calc(100% - 172px);
	min-height: -webkit-calc(100% - 172px);
    min-height: calc(100% - 172px);
	padding-bottom:100px;
}
#breadcrumbs{
    background: white;
    font-weight: bold;
    border-bottom: 1px;
    border-bottom-style: dotted;
}
#login{
	margin-top:200px;
}
.pgfooter{
	height:0px;
}

input#torecycle {
    height: 0px;
    width: 0px;
    border: none;
	display: none;
}
#login table{
	margin:auto;
	position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 100px);
}
#login table td{
	padding:5px;
	font-weight: bold;
}
#logo{
	float:left;
	margin-top: 10px;
	color: white;
    font-weight: bold;
    font-size: 17px;
}
#logo img {
    max-width: 290px;
    max-height: 80px;
    border-radius: 5px;
    padding: 10px;
}
.usrdata{
	float: right;
}
.usrdata strong{
	color:white;
}
.usrdata .cmpname, .usrdata .usrname{
    color: #f7a100;
    line-height: 100px;
    float: left;
    margin-right: 30px;
    font-weight: bold;
}
.usrdata #logout{
    font-weight: bold;
    float: left;
    margin-top: 33px;
}

#mainmenu{
	padding:0px;
}

#mainmenu .navbar{
	margin: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.pgcontainer{
	padding-top:15px;
}

/* JQGRID */
.ui-jqgrid .ui-jqgrid-titlebar{
    height:22px;
}
.ui-jqgrid .ui-jqgrid-view {
    min-height: 280px;
    background-color: rgb(245, 245, 245);
    border-bottom: 1px solid lightgray;
}
.ui-pg-table td.ui-state-hover{
    border:0px !important;
    background:none!important;
    background-color:none!important;
}

.ui-pg-table td.ui-state-hover div{
    border: 1px solid gray;
    border-radius: 4px;
    background-color:lightgray;
}

.ui-jqgrid .ui-jqgrid-pager .ui-pg-div span.ui-icon, .ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon{
    width: 16px;
    height: 16px;
    margin: 0px;
}

.ui-jqgrid .ui-jqgrid-pager .ui-pg-div, .ui-jqgrid .ui-jqgrid-toppager .ui-pg-div{
    border: 1px solid gray;
    border-radius: 4px;
    padding:1px;
}

.ui-jqgrid .ui-pg-selbox, .ui-jqgrid .ui-jqgrid-toppager .ui-pg-selbox {
    font-size: 11px;
    line-height: inherit;
    display: block;
    height: 20px;
    margin: 0;
    padding: 3px 0px;
    border: none;
}

.ui-jqgrid .ui-pg-input, .ui-jqgrid .ui-jqgrid-toppager .ui-pg-input {
    font-size: 11px;
    height: 20px;
    width: auto;
    margin: 0;
    line-height: inherit;
    border: none;
    padding: 3px 2px;
    text-align: center;
}

.ui-jqgrid .ui-pg-table {
    font-size: 14px;
}

.ui-paging-pager span.ui-icon{
    border: 1px solid gray;
    padding: 8px;
    border-radius: 4px;
}

.ui-paging-pager span.ui-icon:hover{
    background-color:lightgray;
}

.ui-jqgrid .ui-jqgrid-htable th {
    font-size: 13px;
    font-weight: bold;
}

.ui-jqgrid .ui-icon-desc {
    margin-left: 0;
}

.ui-jqgrid tr.ui-search-toolbar select {
    width: 100%;
}

.jqgrow .ui-icon{
    border: 1px solid gray;
    width: 18px;
    height: 18px;
    margin-top: 0px !important;
    margin-left: 0px !important;
    cursor:pointer;
}
.ui-inline-edit, .ui-inline-del, .ui-inline-save, .ui-inline-cancel{
    border: 0px !important;
}

.ui-jqdialog .ui-jqdialog-titlebar-close span {
    display: block;
    margin: 0px;
}

.fm-button{
    font-size: 14px;
    height: 24px;
    line-height: 7px;
}

.ui-jqdialog .ui-jqdialog-titlebar-close {
    margin: -9px 0 0 0;
}

.ui-jqgrid input[type='checkbox']{
    cursor:pointer;
}

.ui-jqdialog .ui-jqdialog-title {
    font-size: 15px;
    margin: -4px 5px;
}

.ui-pg-button[title="Cancel row editing"], .ui-pg-button[title="Save row"] {
    display:none;
}

.ui-jqgrid .ui-jqgrid-view select{
    width:100%;
}

.ui-jqgrid .loading {
    z-index: 300;
}



@media (max-width: 470px) {
    .ui-jqgrid .ui-jqgrid-pager .ui-paging-pager {
        top:27px;
    }
    
    .ui-jqgrid .ui-jqgrid-pager .ui-paging-info {
        font-size: 9px;
        display:none !important;
    }
    .ui-jqgrid .ui-pg-selbox, .ui-jqgrid .ui-jqgrid-toppager .ui-pg-selbox {
        display: none;
    }
    .ui-jqgrid-pager{
        height:56px !important;
    }
}

@media (min-width:471px){
    .ui-jqgrid .ui-jqgrid-pager .ui-paging-pager[dir="ltr"]{
        min-width: 110px;
    }
}

.ui-jqgrid .treeclick {
    border: 0px!important;
}

.ui-jqdialog-content .EditTable {
    font-size: 13px;
}

.ui-jqdialog-content input.FormElement {
    width: 97%;
    padding: 2px 2px;
}

.ui-jqdialog-content select.FormElement {
    width:97%;
}

.EditTable td textarea {
    width: 97%;
}

.ui-jqgrid .ui-search-table td.ui-search-clear {
    width: 10px;
}

.ui-jqgrid-titlebar-close{
    display:none;
}

.FormGrid{
    height: auto !important;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: #fffba0;
}

.ui-jqgrid .ui-jqgrid-pager{
	z-index:100 !important;
}

/* FORMS */
.pgform table, .pgform input, .pgform select{
	width:100%;
}

.pgform table:not(#details) td:nth-child(odd){
	width:140px;
	text-align:right;
	padding-right:15px;
	font-weight:bold;
	padding-top:5px;
	padding-bottom:5px;
	font-size:12px;
}

.pgform table#address td:first-child{
	width:75px;
}
.pgform input:read-only{
	background-color:lightgray;
}
.pgform input, .pgform select{
	font-size:12px;
}
.pgform table th{
	font-size:14px;
	background: gray;
    color: white;
    padding: 3px;
}
.pgform table{
	margin-top:10px;
}
.pgbuttons{
	background: rgb(119, 119, 119);
    display: inline-block;
    width: 100%;
	border-radius: 5px;
}
.pgbutton{
	float: left;
    height: 80px;
    width: 100px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    color: lightgray;
    text-align: center;
    padding: 7px;
	color: white;
    text-shadow: 1px 1px 0px black;
    text-align: center;
    padding: 7px;
}
.pgbutton:hover{
	color: #ffeaca;
}

.hidden{
	display:none;
}

#results table{
	background-color: transparent;
    width: 100%;
    border: 1px solid black;
}
#results table th{
	background: gray;
    color: white;
}
#results table tr{
	border-bottom: 1px solid black;
	background: #d0d0d0;
}

#results table th, #results table td{
	padding:5px;
	font-size: 12px;
	line-height: 18px;
}

textarea:disabled, input:not([type]):disabled, input[type="color" i]:disabled, input[type="date" i]:disabled, input[type="datetime" i]:disabled, input[type="datetime-local" i]:disabled, input[type="email" i]:disabled, input[type="month" i]:disabled, input[type="password" i]:disabled, input[type="number" i]:disabled, input[type="search" i]:disabled, input[type="tel" i]:disabled, input[type="text" i]:disabled, input[type="time" i]:disabled, input[type="url" i]:disabled, input[type="week" i]:disabled, select[disabled] {
    background-color: rgb(235, 235, 228);
}

.searchcust #custafm{
	width: -o-calc(100% - 28px);
	width: -moz-calc(100% - 28px);
	width: -webkit-calc(100% - 28px);
    width: calc(100% - 28px);
}
.removeRow{
	background-color: white;
    border-radius: 5px;
    border: 1px solid black;
    padding: 8px;
    margin-top: 0px;
    cursor: pointer;
}
#addRow{
	background-color: white;
    border-radius: 5px;
    border: 1px solid black;
    padding: 8px;
    margin-top: 0px;
    cursor: pointer;
	float:left
}

#details .aa{
	font-size: 13px;
    font-weight: bold;
    padding-right: 5px;
}
#details td:nth-child(2), #details th:nth-child(2){
	text-align:right;
}
#tpyear_id, #tpcause_id_change, #tpser_id_change, #aa_change{
	width:100%;
}
tr.selectcust{
	border-bottom:1px solid black;
	cursor:pointer;
}
tr.selectcust td{
	font-size: 12px;
}
tr.selectcust:hover{
	background:lightgray;
}
#popuptable{
	width:100% !important;
	
}
#report.pgform tr th:first-child{
	width:200px;
}
#report.pgform tr td{
	background-color:lightgray;
	padding: 5px;
}
#remarks {
	width: 100%;
    height: 100px;
}

#changeDialog td{
	padding:3px;
}

#details_in_use td, #details_to_use td{
	font-size: 13px !important;
    font-weight: bold;
	background: #d0d0d0;
}

.custom-combobox-input{
	width: -o-calc(100% - 37px) !important;
	width: -moz-calc(100% - 37px) !important;
	width: -webkit-calc(100% - 37px) !important;
    width: calc(100% - 37px) !important;
	height:20px;
}

.custom-combobox-toggle{
	height: 20px;
	
}

.btn-forsearch{
    float: left;
    width: 16px;
    padding: 0px;
    height: 18px;
}

#results table tbody tr.hover{
	background-color:white;
	cursor:pointer;
}
.dropdown-toggle{
	border: 2px solid #f8f8f8;
	border-radius:5px;
}

.dropdown-toggle:focus{
	border:2px solid navy;
}
.navbar-default .navbar-nav>li>a {
    color: #777;
	border: 2px solid #f8f8f8;
	outline:none;
	border-radius:5px;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: #333;
    background-color: transparent;
	border: 2px solid navy;
	outline:none;
}
.navbar-default .navbar-nav>.active>a{
    color: #555;
    background-color: #e7e7e7;
    border: 2px solid #f8f8f8;
	border-radius:5px;
}
.navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
	color: #555;
    background-color: #e7e7e7;
    border: 2px solid navy;
	outline:none;
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    outline: 2px inset navy !important;
}
th.fldheader {
    background: #b1b1b1 !important;
    text-shadow: 1px 1px 1px black;
    border-right: 1px solid gray;
}

#results tbody tr td:first-child{
	min-width: 44px;
}

.langlist{
	float: right;
    position: absolute;
    right: 10px;
    top: 5px;
}
.langimg{
	cursor:pointer;
}
.selcust{
	cursor:pointer;
	float:right;
	margin-left:5px;
}
.selcust:hover{
	color:white;
	font-weight:bold;
}
.ui-state-hover.ui-select-cust, .ui-state-hover.ui-print-order{
	border:none !important;
}
span.ui-icon.ui-icon-check:hover {
    background-color: #d0d0d0;
}
.dropdown-toggle{
	border:none !important;
	outline:none !important;
}

/******************* FORMS *************************/
.mainform {
    background: #d8d8d8;
    border-radius: 3px;
    padding: 8px;
}
.mainform .fcaption{
	font-weight:bold;
	font-size:15px;
	color:black;
	height: 25px;
}
.mainform .fvalue input{
	width: 100%;
}
.mainform .fvalue input[type='checkbox']{
	height:18px;
}
.mainform .fvalue select{
	width: 100%;
    height: 26px;
}
.mainform .fvalue textarea{
	width: 100%;
	height: 25px;
	resize: vertical;
}
.mainform .fvalue textarea.disabled{
	width: 100%;
	height: 50px;
	resize: none;
	background:lightgray;
}
.mainform legend{
	display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 7px;
    font-size: 21px;
    line-height: inherit;
    color: black;
    border: 0;
    border-bottom: 1px solid beige;
    font-weight: bold;
    font-size: 17px;
}
.mainform .buttons{
	text-align: center;
	margin-top: 10px;
}
.mainform .buttons input{
	margin-right: 5px;
}
#tabs{
	
}
#param_dialog .selectable {
    list-style-type: none;
    margin: 0;
	padding: 0px;
}
#param_dialog .selectee {
	padding: 10px;
}
#param_dialog textarea{
	width:100%;
	resize:vertical;
    margin-bottom: 0px;
    height: 540px;
    border-radius: 4px;
    margin-top: 2px;
    box-sizing: border-box;
    margin-left: 7px;
    border-color: lightgray;
}
#param_dialog li{
	padding:5px;
	font-weight: bold;
    font-size: 14px;
}
fieldset:disabled select, fieldset:disabled input, fieldset:disabled textarea{
	    background-color: rgb(235, 235, 228) !important;
}

#title{
	width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    border-bottom: 1px solid black;
    margin-bottom: 10px;
    background: #353535;
    color: white;
    text-shadow: none;
	line-height: 79px;
}

#on_progress table{
	width: 100%;
}
#on_progress{
	padding-left:0px;
}
#on_progress li{
	list-style-type: none;
	border: 2px solid black;
    border-radius: 12px;
    padding: 10px;
    background: #ade0f1;
	margin-bottom:10px;
	cursor:pointer;
}
.arrow{
	width: 48px;
	float:right;
}

#buttons{
	position: fixed;
    bottom: 0px;
    width: 100%;
    background: lightgray;
    left: 0px;
    padding: 10px;
    border-top: 1px dashed black;
}

#buttons > div{
	cursor: pointer;
    width: 135px;
    text-align: center;
    float: left;
    margin-right: 30px;
}
#buttons > div:hover .btnIcon, #buttons > div:hover .btnText{
	border:1px solid black;
}

#btnDelete .btnIcon{
	background:url('../images/delete.png');
    background-repeat: no-repeat;
	background-size: 25px 25px;
    background-position: center;
    background-color: white;
}
#btnHistory .btnIcon{
	background:url('../images/history.png');
	background-repeat: no-repeat;
	background-size: 25px 25px;
    background-position: center;
    background-color: white;
}
#btnData .btnIcon{
	background:url('../images/data.png');
	background-repeat: no-repeat;
	background-size: 25px 25px;
    background-position: center;
    background-color: white;
}
#btnUnits .btnIcon{
	background:url('../images/data.png');
	background-repeat: no-repeat;
	background-size: 25px 25px;
    background-position: center;
    background-color: white;
}
#btnResults .btnIcon{
	background:url('../images/results.png');
	background-repeat: no-repeat;
	background-size: 25px 25px;
    background-position: center;
    background-color: white;
}
#btnCreate .btnIcon{
	background:url('../images/add.png');
	background-repeat: no-repeat;
	background-size: 25px 25px;
    background-position: center;
    background-color: white;
}
.btnIcon{
    border-radius: 50px;
	height: 50px;
    width: 50px;
	margin:auto;
}
.btnText{
	font-weight: bold;
    font-size: 14px;
    padding: 5px;
    background-color: white;
}

#btnDelete{
	position:fixed;
	left:10px;
	bottom:10px;
}
#btnUnits{
	position:fixed;
	left:160px;
	bottom:10px;
}
#btnHistory{
	position:fixed;
	left:460px;
	bottom:10px;
}
#btnData{
	position:fixed;
	left:310px;
	bottom:10px;
}
#btnResults{
	position:fixed;
	left:310px;
	bottom:10px;
}
#btnCreate{
	position:fixed;
	right:10px;
	bottom:10px;
	margin-right:0px !important;
}

.household_row{
	float: left;
    width: calc(100% - 50px);
    margin-top: 7px;
}

#search_container{
	float: right;
	padding:5px;
}

#search{
	color:black;
	height: 35px;
    width: 100%;
}

.search_icon {
    width: 32px;
    height: 38px;
    float: left;
    background: url(../images/search.png);
    background-position: center;
    background-size: contain;
    margin-top: 1px;
    background-repeat: no-repeat;
    margin-right: 5px;
	cursor:pointer;
}

.back_icon{
	width: 32px;
    height: 38px;
    float: left;
    background: url(../images/back2.png);
    background-position: center;
    background-size: contain;
    margin-top: 5px;
    background-repeat: no-repeat;
    margin-right: 5px;
    margin-left: 5px;
}

#back_to_households{
	float: left;
    background-color: #2a4469;
    padding-right: 16px;
    cursor: pointer;
    color: white;
    font-size: 18px;
    font-weight: bold;
    line-height: 43px;
}

#survey_btn, #finalization_btn{
	float:right;
}
#household_persons_btn, #household_visits_btn, #add_person_btn, #add_visit_btn{
	float:left;
}

#buttons input{
	margin-left:10px;
	margin-right:10px;
}

#household_visits_list{
	padding-left:0px;
}
#household_visits_list > li{
	list-style-type: none;
	border: 2px solid black;
    border-radius: 6px;
    padding: 10px;
    background: #e1f7ff;;
	margin-bottom:10px;
	overflow-x: auto;
	display: inline-table;
	width:100%;
}

#household_persons_list{
	padding-left:0px;
}
#household_persons_list > li{
	display:inline-table;
	list-style-type: none;
	border: 2px solid black;
    border-radius: 6px;
    padding: 10px;
    background:#e1f7ff;
	margin-bottom:10px;
	overflow-x: auto;
	width:100%;
}

.visit_number{
	padding: 8px;
    font-weight: bold;
    font-size: 25px;
	border-right: 1px solid black;
}

#household_visits_list table.header, #household_persons_list table.header{
	text-align:center;
}

#household_visits_list table.header td, #household_persons_list table.header td{
	padding-left:10px;
	padding-right:10px;
}

#household_visits_list table.header > tbody > tr:first-child td:not(:first-child), #household_persons_list table.header > tbody > tr:first-child td{
	font-weight: bold;
    text-decoration: underline;
	padding-bottom: 10px;
}

.visit_dt_day, .visit_dt_month{
	width: 40px;
    height: 40px;
    font-size: 20px;
    text-align: center;
}

.visit_hour{
	width: 40px;
    height: 40px;
    font-size: 20px;
    text-align: center;
}

.visit_dt_year{
	width: 70px;
    height: 40px;
    font-size: 20px;
    text-align: center;
}

.visit_result, .surveyresult_id, .contactresult_id, .contacttype_id, .next_contact{
	height: 40px;
    font-size: 18px;
    width: 100%;
}

.person_name, .person_gender, .person_age, .person_phone, .person_email{
	height: 40px;
    font-size: 20px;
}

.person_age{
	width: 40px;
    text-align: center;
}

.person_selected{
	width: 40px;
    height: 40px;
    margin: 0px;
}

.visit_day{
	width:110px;
}

.last_visit_result{
	margin-left:5px;
}

.resultstable, .reporttable{
	border:1px solid black;
	width:100%;
}
.resultstable .header, .resultstable .changepart, .reporttable .header{
	font-weight:bold;
	background:lightblue;
}

.resultstable .subheader, .reporttable .subheader{
	font-weight:bold;
	background:#cbf2ff;
}

.resultstable td, .reporttable td{
	border:1px solid black;
	padding:3px;
}

#export_data_form table{
	width:100%;
}

#export_data_form table tr td:first-child{
	font-weight:bold;
	padding:10px;
	width:150px;
}

#export_data_btn{
	margin-top:30px;
}

.resultstable td:nth-child(3), .resultstable td:nth-child(4){
    width: 200px;
}

.notes{
	width: 100%;
    height: 80px;
	resize: vertical;
}

.visit_dt{
	width: 180px;
	margin:auto;
}

.delete_contact_btn, .delete_contact_btn:focus, .delete_contact_btn:active{
	height: 160px;
    width: 33px;
    background: url(images/delete.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
	background-color: #ff5852;
}

.delete_person_btn, .delete_person_btn:focus, .delete_person_btn:active{
	height: 90px;
    width: 33px;
    background: url(images/delete.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
	background-color: #ff5852;
}

.not_selectable{
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */   
}

.household_data td{
	font-size:13px;
	color:white;
	padding-left:4px;
	padding-right:4px;
}

#household_title{
	min-height: 44px;
    background: #353535;
    border-bottom: 1px solid white;
}

.household_data{
	padding:7px;
}

#on_progress li[stts="1"], .surveystts[stts="1"], #check_stts1{
	background-color:#ff655a;
}

#on_progress li[stts="2"], .surveystts[stts="2"], #check_stts2{
	background-color:#ffc107;
}

#on_progress li[stts="3"], .surveystts[stts="3"], #check_stts3{
	background-color:#03a9f4;
}

#on_progress li[stts="4"], .surveystts[stts="4"], #check_stts4{
	background-color:#00bcd4;
}

#on_progress li[stts="5"], .surveystts[stts="5"], #check_stts5{
	background-color:#4caf50;
}

.surveystts{
	width:50px;
}

#search_dialog td{
	padding:15px;
	font-weight:bold;
}

#search_dialog tr{
	color:red;
	cursor:pointer;
}

#search_dialog tr.selected{
	color:black;
}

.ui-dialog-titlebar-close{
	outline:none;
}
#button_container{
	float:right;
	padding:14px;
}
#check_stts1, #check_stts2, #check_stts3, #check_stts4, #check_stts5{
	width: 40px;
    height: 40px;
    margin: 5px;
	float:left;
	margin-right:30px;
	cursor:pointer;
}

#check_stts1.selected{
	background: url(images/check.png);
    background-position: center;
    background-size: contain;
	background-color:#ff655a;
}
#check_stts2.selected{
	background: url(images/check.png);
    background-position: center;
    background-size: contain;
	background-color:#ffc107;
}
#check_stts3.selected{
	background: url(images/check.png);
    background-position: center;
    background-size: contain;
	background-color:#03a9f4;
}
#check_stts4.selected{
	background: url(images/check.png);
    background-position: center;
    background-size: contain;
	background-color:#00bcd4;
}
#check_stts5.selected{
	background: url(images/check.png);
    background-position: center;
    background-size: contain;
	background-color:#4caf50;
}

#search_surveyresult_id{
	color:black;
	height:35px;
}

#person_number_div{
	background: white;
    border: 2px solid black;
    padding: 4px;
    margin-bottom: 10px;
    font-weight: bold;
    padding-left: 20px;
}

#person_number{
	margin-left: 10px;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 20px;
    font-weight: normal;
}