*{ margin: 0; padding: 0;}
body{ background: #f5f5f5;}

/* Custom scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #888; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Select box arrow */
select.form-control, select.form-control:focus{
    -moz-appearance: none; 
    -webkit-appearance: none; 
    appearance: none;

    background: url(../images/arrow.gif) no-repeat right 20px center #fff !important;
    background-size: 13px auto !important;
    padding-right: 45px !important;
}
.form-control, .btn{ border-radius: 50rem; }
textarea.form-control{ border-radius: 15px; }
select.form-control[multiple] {
    border-radius: 15px;
    background: #fff;
}

h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; color: #000; text-transform: uppercase; }
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span{
    color:#666 ;
    display: block;
    font-size: .6em;
}

a{ color: #333; font-weight: 500; text-decoration: none; }
a:hover{ text-decoration: none; color: #000; }
.btn-primary:active{ color: #fff !important; }
a:focus, .form-control:focus, .btn-primary:focus{ 
    outline: none !important; background: transparent !important; border-color: #000 !important; box-shadow: none !important; 
}
.btn-primary:focus{ 
    background: #000 !important;
}

.btn{ border: none; font-weight: 500; padding-left: 20px; padding-right: 20px; }
.btn-primary{ background: #333; }
.btn-primary:hover{ background: #000; }
.btn:disabled{ background: #000; border-color: #000; opacity: .3; }
button.imgHolder{ border: none; background: none; }
button.imgHolder[disabled]{ opacity: .5;}

.rounded{ border-radius: 20px !important; }
.hide{ display:none !important; }

.webView{ display: block; }
.mobView{ display: none; }

#login { height: 100vh; overflow: hidden; }
#login .container { width: 90%; max-width: 400px; }
#login .container .row{ background: #000; border-radius: 20px; }
#login img{ height: 60px;  }
.loginContent{
    background: #fff; border-radius: 20px;
}
.loginContent input{
    width: 100%;
    border-radius: 50px;
    padding: 15px;
    border: solid 1px #eee;
    margin-bottom: 20px;
}
.loginContent input[type='checkbox']{
    width: auto;
}
.loginContent button{ 
    font-weight: 500; text-transform: uppercase; color: #fff; 
}
.loginContent button.btn-light{
    color: #000;
    border: solid 2px #000;
}
.login_error{
    margin-bottom: 15px; background: red; display: inline-block !important; padding: 10px 20px; border-radius: 25px; color: #fff;
}

header{
    background: #000; color: #fff;
}
.bg-dark{ background: #000 !important; }
header img{ width: 180px; }
header .navbar-nav .nav-link{
    border: 0 !important; color: #fff !important; font-weight: normal !important;
}
header .navbar-nav .nav-link.active{ color: #fae155 !important; }
header .navbar .d-flex ul.dropdown-menu-right{
    left: auto; right: 0;
}
.dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active,
.btn-check:active+.btn-primary, .btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle
{
    background: #fff3cd;
    border-color: #fff3cd;
    color: #000;
}

.contentWrapper{ min-height: calc(100vh - 200px); }

#searchContainer{ }
.searchForm .title{
    background: #000;
    color: #fff; border-radius: 20px 20px 0 0; border: solid 1px #fff; border-bottom: 0;
}
.searchForm .title h5{ color: #fff; }
.searchForm .title a, .dataForm .text-end a{ 
    color: #fff; display: block; border: solid 1px #fff; width: 30px; height: 30px; padding: 8px; border-radius: 50%; 
    text-align: center;
}
.dataForm .text-end a{
    width: 35px; height: 35px; float: right; background-color: #333;
}
.dataForm .text-end a i{
    padding-top: 7px;
}
.searchForm .form{ background: rgba(255,255,255, .7); }
.searchForm input, .searchForm select, .searchForm textarea, .searchForm input[type="file"]{
    width: 100%;
    border-radius: 20px;
    padding: 10px;
    border: 1px solid #ced4da; /*solid 1px #eee;*/
    margin-bottom: 10px;
}
.searchForm .btn{
    margin-bottom: 10px;
}
.customUpload{
    display: inline-block; background: #333; color: white; cursor: pointer;
    border-radius: 15px; padding: 17px;
}
.photoUpload img{ width: 50px; height: 50px; }
.searchForm .text-end select{ display: inline-block; line-height: 38px; border-radius: 50rem; padding-right: 40px;  }

.searchForm input[type=checkbox], .modal input[type=checkbox], #pages_list input[type=checkbox]{
    width: 15px; margin-top: 17px; margin-left: 5px; margin-right: 5px; transform: scale(1.5);
}

/* suggestion List */
ul#suggestions{
	background: #fff; position: absolute; list-style: none; top: 40px; left: 12px; max-height: 225px; width: calc(100% - 24px);
    overflow-y: auto;  padding-bottom: 20px; padding: 0; border: solid 1px #ccc;
}

ul#suggestions li{
	cursor: pointer; padding: 15px;
}
ul#suggestions li:hover{
    background: #f2f2f2;
}
.progress{ height: auto; }
.progress-bar{ overflow: visible; padding: 2px 5px !important; }

.discoverSection{
    border-radius: 0 0 20px 20px;
}
.categoryList select{ display: none; }
.discoverSection li:hover{ background: #fff3cd; }

.profileCard{
    text-align: center;
}
.profileCard .pic img{
    padding: 20px; background: #eee; border-radius: 50%;
}
.profileCard .inner{ 
    margin-top: -70px; padding-top:80px;
    border: solid 1px #eee; border-radius: 20px; 
}
.profileCard .info p{ display: block; }
.profileCard .links{}

.layoutToggle a{ 
    border: solid; display: inline-block; border: solid; border-radius: 10px;
}
.layoutToggle a i{ padding: 10px; }
.layoutToggle a:hover, .layoutToggle a.active{
    background: #000; color: #fff;
}

.dataContainer{
    background: #fff; border-radius: 20px; padding: 20px;
}
.ListTabData, .ListTabData .dataContainer{ padding: 0; }
.ListTabData .item .cell:last-child, .propertyList .item .analyze{ width: 120px; }


.propertyList.resultViewCard .item .analyze .btn span{
    display: none;
}
.propertyList.resultViewCard .item .analyze .btn::after{
    content: "Analyze Portfolio";
}

.dataContainer .item{
    display:table; table-layout: fixed; width: 100%;
    border-bottom: solid 1px #ccc;

}
.dataContainer .item.selected{ background: #fffeeb; }
.tableRow{ display: table-row !important;}
.cell{ display: table-cell; vertical-align: middle; padding: 10px; word-break: break-word; text-align: left; }
.dataContainer .item>div{ display: table-cell; }
.dataContainer .item:last-child, .dataContainer2 .item2:last-child{
    padding: 0; margin: 0; border: none;
}
.dataContainer .selectRow{ width: 120px; }
.dataContainer .pic{ width: 100px; position: relative; }
.dataContainer .pic .holder{
    background: #eee; border-radius: 50%; width: 80px; height: 80px; padding: 15px; text-align: center;
}
.dataContainer .pic .holder img{
    width: 100%; height: 100%;
}
.dataContainer .actions button{
    padding: 5px 15px !important;
    min-width: 130px;
}
.homeList .actions button, .homeList .actions select{
    min-width: auto; margin-bottom: 5px; display: inline-block;
}
.homeList .cell.text-center.analyze select, .homeList .cell.text-center.analyze button{ 
    display: inline-block; width: 100% !important; margin-bottom: 10px;
}
.homeList.resultViewCard .cell.text-center.analyze select, .homeList .cell.text-center.analyze button{ 
    display: inline-block; width: auto !important; margin-bottom: 0;
}
.homeList.resultViewCard .actions .btn{ margin-right: 5px; }
.homeList.resultViewCard .item{ padding-bottom: 70px;}
.uniqueAPIKey{ 
    width: 100%; max-width: 200px; text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dataContainer .links{
    width: 150px;
}
.propertyList .actions{ width: 285px; text-align: center; }
.propertyList .links{ width: auto; }

.resultViewCard{ display: flex; flex-wrap: wrap; padding-top: 60px; }
.resultViewCard .item, .resultViewCard .item:last-child{
    flex-direction: column; text-align: left; position: relative; display: inline-block !important;
    width: 31%; margin-left: 1%; margin-right: 1%; vertical-align: top;
    border: 1px solid #ccc; padding: 20px; border-radius: 20px; margin-bottom: 60px;
}
.ListTabData.resultViewCard{ padding: 0; padding-top: 30px; }
.ListTabData.resultViewCard .item{ padding-bottom: 60px; margin-bottom: 50px; position: relative; }
.ListTabData.resultViewCard .item .selectRow{ 
    position: absolute; background: #f2f2f2; width: auto; padding: 10px 20px; border-radius: 50rem; top: -25px;
}
.ListTabData.resultViewCard .cell.colInfo:nth-child(2){ border-bottom: solid 1px #ccc; }
.ListTabData.resultViewCard .cell.colInfo:nth-child(4){ border-bottom: solid 1px #ccc; }
.ListTabData.resultViewCard .item .cell:last-child, .propertyList.resultViewCard .item .analyze{ 
    border-top: solid 1px #ccc; background: #f2f2f2; width: 100%;
    border-radius: 0 0 20px 20px; position: absolute; left: 0; bottom: 0;
}
.propertyList.resultViewCard .item .analyze{
    background-color: #000!important;
}
.ListTabData .listSpace{ padding-top: 0 !important; padding-bottom: 0 !important; }
.ListTabData .listSpace ul{ margin: 0; }
.ListTabData.resultViewCard .item .cell:last-child .btn, .propertyList.resultViewCard .item .analyze .btn{
    background: none; border: none !important;
}
.ListTabData.resultViewCard .webView{ display: none; }
.ListTabData.resultViewCard .mobView{ display: block; }

.ListTabData.resultViewCard img{ border:solid 1px #888; padding: 10px; border-radius: 20px; height: 200px; }

.resultViewCard .item .tableRow, .resultViewCard .item .tableRow .cell  {
    display: block !important;
}
.resultViewCard .item .pic{ margin-top: -60px; padding: 0; }
.resultViewCard .item .name, .resultViewCard .item .address, .resultViewCard .item .colInfo{
    width: 100%;
}
.resultViewCard .item > div{
    width: 100%; padding: 5px 0;
}
.homeList.resultViewCard .item .actions{
    position: relative; text-align: center; right: auto;
}
.homeList.resultViewCard .item .actions select{ 
    display: inline-block; padding: 5px 15px; font-size: .8em;
}
.resultViewCard .item .actions{
    position: absolute; top: 10px; /*right: 10px;*/ width: auto; padding: 0;
}
.usersList.resultViewCard .item .actions{
    right: 10px;
}
.resultViewCard .item .actions .btn{ font-size: .8em; padding-left: 8px !important; padding-right: 8px !important; min-width: auto; /*margin-top: 0px !important;*/ }
.resultViewCard .item .links{
    border-top: solid 1px #ccc; margin-top: 15px; padding-top: 15px;
}

.resultViewCard .profileAction{ 
    position: absolute; width: auto !important; top: -40px; right: 10px;
}
.propertyList.resultViewCard .actions{ font-size: .9em; }

.usersList.resultViewCard .uniqueAPIKey{
    width: 200px; max-width: 200px; font-size: .9em; float: right;
}
.usersList.resultViewCard .links{
    width: 100% !important;
}

.titleBar{
    background: #000; color: #fff; border-radius: 20px;
}
.apiBar{
    background: #000; border:solid 2px #000; color: #fff; border-radius: 20px;
}
.profileForm input, .profileForm select { 
    padding: 10px; border-radius: 20px; margin-bottom: 15px;
}
.profileForm label{ display: block; margin-bottom: 10px; }
.chip {
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    font-size: 12px;
    line-height: 50px;
    border-radius: 25px;
    background-color: #f1f1f1;
}
ul.gridThree{ }
ul.gridThree li{
   float: left; width: 33%; margin-bottom: 20px; 
}
ul.propertyInfo{ list-style: none; padding: 0; }
ul.propertyInfo li{ line-height: 34px; }

/* Tabs */
.nav-tabs{ 
    border:none; position: relative;
}
.nav-tabs:before{
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: #eee;
    z-index: 0; 
}
.nav-tabs.noBrdr:before{ display: none; }

.nav-link{ color: #000; }
.nav-link.active{ 
    border: none; color: #DDA927 important;
    border-color: transparent; border-top: solid 5px #DDA927 !important; position: relative; z-index: 1;
}

.page-link{ color: #000; }
.page-item.active .page-link{
    background: #fff3cd; border-color: #fff3cd; color: #000;
}

.list-group a{ color: #000; }

.addUser input, .addUser select{ margin-bottom: 20px; }
.select2 input{ margin-bottom: 0px; }
.addUser input[type=date]{ line-height: 1.25; }

.modal-lg{ max-width: 900px; }

/* Tootip */
.tooltipSec {
    position: relative;
}
.tooltipSec .tooltiptext {
    display: none;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltipSec .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltipSec:hover .tooltiptext {
    display: block;
}

.pLoaderContainer{
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255, 255, 255, .97); z-index: 3;
}
.pLoaderContainer .container{
    width: 600px;
}
.tabModal .tab-content{ 
    height: 60vh; overflow-y: auto; overflow-x: hidden; 
}
.tabModal .tab-content .dataContent, .dataContent{
    height: 60vh; background: #f5f5f5; border: solid 1px #ccc; border-radius: 10px; padding: 20px;
    overflow: auto;
}
.carousel-item{ height: 60vh; }
.tabModal .tab-content .formArea textarea{
    height: 50vh; 
}
.scoring_list{ height: 100px; overflow-y: auto; margin-bottom: 0; }

.fa-copy.copyToClipboard{
	position: absolute; right: 0px; padding: 10px;
}
.copyToClipboard:hover, .shaking_btn:hover{
	animation: tilt-shaking 0.5s linear infinite;
}
.shake_now{
    animation: shake 3s linear infinite;
}
.stickyInfo{ position: fixed; bottom: 10px; left: auto; right: 60px; z-index: 3; display: none; }
.stickyInfo .btn{ width: 50px; height: 50px; }

/* Stepper */
.stepper-container {
    width: 600px;
    margin: 100px auto;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.stepper li span{
    color: #ccc;
    font-size: 14px;
}
.stepper li.done span{
    color: #000;
}
.stepper li {
    list-style-type: none;
    width: 25%;
    float: left;
    font-size: 18px;
    position: relative;
    text-align: center;
    color: white;
}
.stepper li:before {
    width: 30px;
    height: 30px;
    content: "";
    line-height: 30px;
    border: 2px solid #ccc;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: white;
}
.stepper li.done:before {
    content: "✔";
    color: #000;
}
.stepper li:after {
    width: 100%;
    transition: width 2s ease;
    height: 5px;
    content: '';
    position: absolute;
    background-color: #ccc;
    top: 15px;
    left: -50%;
    z-index: -1;
}
.stepper li:first-child:after {
    content: none;
}
.stepper li.active {
    color: #FAE155;
}
.stepper li.active::before {
    animation: 1.5s linear infinite spinner;
    animation-play-state: inherit;
    border: solid 5px #FAE155;
    border-bottom-color: #ccc;
    background-color: white;
    border-radius: 50%;
    content: "";
    height: 24px;
    width: 24px;
    position: relative;
    top: 15px;
    left: 10%;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
}
.stepper li.done:before {
    border-color: #FAE155;
    background-color: #FAE155;
}
.stepper li.done + li:after {
    background-color: #FAE155;
}
.stepper li.inactive:before {
    border-color: #ccc;
    background-color: #ccc;
}
.stepper li.inactive + li:after {
    background-color: #ccc;
}

.dataForm{ }
.dataForm img{ height: 35px; }
.input-group-text{ border-radius: 50rem; width: auto; }
.input-group-text select{ 
    padding: 0; padding-right: 18px; border: none; background-position: right center; width: 135px;
}

.select2-container--default .select2-selection--multiple{ 
    border-radius: 50rem !important; padding-left: 10px !important; border: 1px solid #ced4da !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    background: #f2f2f2 !important;
}

/* Tree */
.treeUL { list-style-type: none; margin: 0; padding: 0; }
.treeUL ul{ list-style: none; }
.treeUL li{
    line-height: 40px; background: rgba(0,0,0,.05); padding: 5px 10px; border-bottom: solid 1px #fff;
}
.caret {
    cursor: pointer;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
}
.caret::before {
    content: ">"; display: inline-block; margin-right: 10px; width: 30px; height: 30px; line-height: 26px;
    text-align: center; background: #000; border-radius: 10px; color: #fff;
}
.caret-down::before {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg);  
}
.treeUL .nested { display: none; }
.treeUL .nested li{ background: rgba(0,0,0,.02); }
.treeUL .active { display: block; }

/* Header scrollable tabs */
#headerTabs{}
#headerTabs ul{ flex-wrap: nowrap; overflow-y: hidden; overflow-x: auto; }
#headerTabs ul li{ white-space: nowrap; }
.mobTabHolder select { display: none; }

.dataForm.formContainer{ }
.dataForm.formContainer > div{ margin-bottom: 15px; position: relative; }
.dataForm.formContainer #suggestions{
    z-index: 1; top: 36px;
}
.address_fields #suggestions{
    top: 60px !important;
}
.list-group-item.active{ background: #fff3cd; border-color: #fff3cd; }
.select2-results__option.select2-results__option--selectable.select2-results__option--highlighted{
    background: #fff3cd !important; color: #000 !important;
}

pre{
    word-wrap: break-word;
    /*white-space: pre-line;*/
}

*[data-id="proof_images"] img{
    margin-left:auto; margin-right:auto; display:block;
}

.pic i{
    font-size: 50px;
}

.dataContainer2{
	overflow-x: hidden; overflow-y: auto; height: calc(100vh - 275px);
}
.dataContainer2 .item2{
	border-bottom: 1px solid #ccc; margin-bottom: 20px; padding-bottom: 30px;
}
.dataContainer2 .item2 img{
	width: 100%; border: 1px solid #ccc; border-radius: 5px;
}

#editpopup .modal-body, #viewLogModal .modal-body{
    max-height: calc(100vh - 250px); overflow-x: auto;
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

input[type=checkbox], .is_checkbox, .fa-edit, .fa-trash, .fa-copy{
    cursor: pointer;
}

.searchForm2 .form-control{
    padding: .375rem .75rem;
}
.searchForm2 .input-group-text{
    height: 38px;
}
.searchForm2 .input-group-text select{
    margin-top: 10px;
}
.searchForm2 .select2-selection, #editform .select2-selection{
    min-height: 38px;
    margin-bottom: 1rem!important;
}
.searchForm2 input[type=time], .searchForm2 input[type=date], #editpopup input[type=time], #editpopup input[type=date]{
    line-height: 1.15;
}
#editpopup .btn, #SkipTracePortalSortList .btn{
    min-width: 100px;
}

.addUser .select2-container{
    margin-bottom: 20px!important;
}

.mailStatus{
    font-size: 18px; border: 1px solid #ccc; margin-bottom: 10px; border-radius: 50px; padding: 5px;
}
.mailStatusFrame{
    width: 100%; height: calc(100vh - 200px); border-radius: 10px;
}

.dataForm.formContainer label{
    width: 100%;
    padding-left: 13px;
}

.dataContainer.propertyList .actions{
    position: relative;
}

.highlight_title h5{
    border-bottom: 1px solid #ced4da; margin-bottom: 10px; font-weight: bold;
}

.homeList .item .actions select, .homeList .item .analyze select{
    height: 32px; line-height: 1; margin-top: 5px;
}

.modal-open .select2-dropdown {
    z-index: 10060;
}
    
.modal-open .select2-close-mask {
    z-index: 10055;
}

.copyHolder{
    position: relative;
}
.copyHolder .copyToClipboard{
    right: 15px;
}

/*-------Dashboard style starts from here-------*/
.info-box {
	box-shadow: 0 0 1px rgba(0,0,0,.125),0 1px 3px rgba(0,0,0,.2);
	border-radius: .50rem;
	background-color: #fff;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 1rem;
	min-height: 50px;
	padding: .3rem;
	position: relative;
	width: 100%;
	color: #3a3b45;
	border: 2px solid rgba(0, 0, 0, 0.03);
}

.info-box:hover{
	color: #2e2f37;
	text-decoration: none;
	background-color: rgba(0, 0, 0, 0.03);
	border: 2px solid rgba(0, 0, 0, 0.09);
}

.info-box-icon {
	border-radius: 100%; /*.25rem;*/
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	font-size: 1.5rem;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	text-align: center;
	min-width: 65px;
	min-height: 65px;
    color: #fff;
}

.info-box .info-box-content {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	line-height: 1.4;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	padding: 0 10px;
	width: calc(100% - 90px); /*45px*/
}

.info-box a{
	text-decoration: none !important;
	color: inherit;
}

.info-box .menu-details, .info-box .progress-description {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.info-box .menu-name {
	display: block;
	margin-top: 0rem; /*.25rem;*/
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#SkipTracePortalSortList .info-box .info-box-content{
	width: calc(100% - 90px);
}
  
#SkipTracePortalSortList .info-box .fa-edit, #collapseCard0 .info-box .fa-edit, #collapseCard0 .fa-plus-square, #collapseCard0 .fa-sort{
	font-size: 40px;
	cursor: pointer;
}
  
#SkipTracePortalSortList .menu-status, #SkipTracePortalSortList .order_id, #SkipTracePortalSortList .page-link, #menu_list_for_dashboard .page-link{
	display: none;
}
  
#SkipTracePortalSortList .icon:hover{
	cursor: grab;
}
  
#SkipTracePortalSortList .list-group{
	flex-direction: row;
}
  
#SkipTracePortalSortList .list-group-item{
	border-radius: .50rem;
	margin-bottom: 1rem;
}
  
#collapseCard0 .info-box .menu-name{
	font-size: 18px; /*25px;*/
}
  
.disabled{
	pointer-events: none;
	opacity: 0.4;
}

.fontawesome-page-header{
	padding-bottom: 5px;
	margin: 5px 0px 0px;
	border-bottom: 1px solid #eee;
}

.fontawesome-icon-list {
	margin-top: 5px;
}

.fontawesome-icon-list .fa-hover:hover{
	cursor: pointer;
}

.fontawesome-icon-list .fa-hover .icon-contents{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
	color: #222;
	line-height: 32px;
	height: 32px;
	padding-left: 10px;
	border-radius: 4px;
}

.fontawesome-icon-list .fa-hover .icon-contents:hover {
	background-color: #2e59d9; /*#1d9d74;*/
	color: #fff;
	text-decoration: none;
}

.fontawesome-icon-list .fa-hover .icon-contents i {
	width: 32px;
	font-size: 14px;
	display: inline-block;
	text-align: right;
	margin-right: 10px;
}

.fontawesome-icon-list .fa-hover .icon-contents:hover i{
	font-size: 28px;
	vertical-align: -6px;
}

.has-left-icon{
	padding-left: 30px;
}

.has-left-icon + i{
	position: absolute; margin-top: -26px; margin-left: 10px;
}

.left-icon{
	position: absolute;
	margin-top: 10px;
	margin-left: 10px;
}
/*-------Dashbord style ended here-------*/

#success-alert{ position: fixed; top: 0px; right: 0px; display: none; }
#success-alert strong{ margin-right: 5px; }
#success-alert .msg{ float: right; }

/*---starting of loading with animated dots---*/
.loading::after {
    display: inline-block;
    animation: dotty steps(1,end) 1.5s infinite;
    content: '';
}
  
@keyframes dotty {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}
/*---ending of loading with animated dots---*/

.heading-text {
    margin-top: 10px;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
}
.total {
    text-align: right;
    font-size: 18px;
}
.table_div {
    clear: both;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 15px;
    margin-bottom: 15px;
    /*border: 1px solid #ced4da;*/
}
.table_div table{
    table-layout: fixed;
}
.table_div .actions .fa{
    font-size: 20px;
}

/*Start Callouts*/
.callouts span {
	display: inline-block;
	/* Real styles */
	position: absolute;
	width: 90%;
	height: 35px;
	padding: 10px;
    padding-top: 5px;
	color: #fff;
	background-color: black;
	border: 1px solid #c1c1c1;
	border-radius: 10px;
	box-shadow: 0 0 10px #c1c1c1;
	z-index: 1000;
}
  
/* TOP */
.callouts--top:before {
	  content: "";
	  position: absolute;
	  width: 0;
	  height: 0;
	  left: 23px;
	  top: -42px;
	border: 10px solid transparent;
	border-bottom: 32px solid rgb(193,193,193); /* IE8 Fallback */
	border-bottom: 32px solid rgba(193,193,193,0.5);
	z-index: 2;
}
.callouts--top:after {
	content: "";
	  position: absolute;
	  width: 0;
	  height: 0;
	  left: 25px;
	  top: -32px;
	border: 8px solid transparent;
	border-bottom: 25px solid #fff;
	z-index: 3;
}
  
/* BOTTOM */
.callouts--bottom:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	left: 15px;
	bottom: -17px;
	border: 10px solid transparent;
	border-top: 12px solid black; /*rgb(193,193,193); /* IE8 Fallback */
	border-top: 12px solid black; /*rgba(193,193,193,0.5);*/
	z-index: 2;
}
.callouts--bottom:after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	left: 17px;
	bottom: -11px;
	border: 8px solid transparent;
	border-top: 4px solid black;
	z-index: 2;
}
  
/* LEFT */
.callouts--left:before {
	  content: "";
	  position: absolute;
	  width: 0;
	  height: 0;
	  left: -42px;
	  top: 17px;
	border: 10px solid transparent;
	border-right: 32px solid rgb(193,193,193); /* IE8 Fallback */
	border-right: 32px solid rgba(193,193,193,0.5);
	z-index: 2;
}
.callouts--left:after {
	content: "";
	  position: absolute;
	  width: 0;
	  height: 0;
	  left: -31px;
	  top: 20px;
	border: 8px solid transparent;
	border-right: 24px solid #fff;
	z-index: 3;
}
  
/* RIGHT */
.callouts--right:before {
	  content: "";
	  position: absolute;
	  width: 0;
	  height: 0;
	  right: -42px;
	  top: 17px;
	border: 10px solid transparent;
	border-left: 32px solid rgb(193,193,193); /* IE8 Fallback */
	border-left: 32px solid rgba(193,193,193,0.5);
	z-index: 2;
}
.callouts--right:after {
	content: "";
	  position: absolute;
	  width: 0;
	  height: 0;
	  right: -31px;
	  top: 20px;
	border: 8px solid transparent;
	border-left: 24px solid #fff;
	z-index: 3;
}

.callout {
	position: absolute;
	display: inline-block;
	padding: .5em .5em;
	background-color: black;
	color: #fff;
	border: 1px solid black;
	border-radius:5px;
	z-index:1000;
}
/*End Callouts*/


/* calendar */
table.calendar{ border-left:1px solid #999; }
/*tr.calendar-row	{  }*/
td.calendar-day, p.calendar-day{ min-height:80px; font-size:11px; position:relative; } * html div.calendar-day { height:80px; }
td.calendar-day:hover, div.calendar-day:hover{ background:#999; color:#333;}
td.calendar-day-np, div.calendar-day-np{ background:#eee; min-height:80px; } * html div.calendar-day-np { height:80px; }
td.calendar-day-head, div.calendar-day-head{ background:#ccc; color:#333; font-weight:bold; text-align:center; width:120px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }
div.day-number{ background:#999; color:#fff; padding:5px; font-weight:bold; font-size: large; float:right; margin:-5px -5px 0 0; width:30px; text-align:center; }
p.day-lead-count{ background:#00FF33; color:#333; padding:5px; font-weight:bold; font-size: large; float:left; margin:-5px -5px 0 0; min-width:30px; width:auto; text-align:center !important; }
p.day-lead-count-not-billed { background:#FF0000; color:#fff; padding:5px; font-weight:bold; font-size: large; float:left; margin:-5px -5px 0 0; margin-left: 10px; min-width:30px; width:auto; text-align:center !important; }
/* shared */
td.calendar-day, td.calendar-day-np { width:120px; padding:5px; border-bottom:1px solid #999; border-right:1px solid #999; }
.calendar-row td div, .calendar-row td p{border: 2px solid gray !important; border-radius: 5px; min-width: 40px; padding:2px !important;}

.jconfirm-bg { opacity: 0.8 !important; }
.jconfirm-box { border: 2px solid #333; border-radius: 10px !important; width: 320px !important;}
.jconfirm-content { margin-bottom: 10px !important; }
.jconfirm-content hr { margin-top: 0px; border: 1px solid #333; margin-bottom: 10px; }
.jconfirm-buttons .btn { border: 1px solid #333 !important; }

.dataTables_filter label{color: #fff;}
.dataTables_filter input{border-radius: 5px; border: 2px solid gray; color: #333;}

#client_weekly_leads table{border-collapse: separate;}
#client_weekly_leads tr, #client_weekly_leads td{border: none; border-radius:10px;}
.selectAll{border: 1px solid #337ab7 !important;}
.selectAll:focus{background-color: whitesmoke; color:black; border: 2px solid #337ab7 !important;}
.d-none img{margin-top:-8px!important; height: 50px;}

.my-circle-heading{
	color:#010101; font-weight: bold;
}
.my-circle{
	width: 250px;
	background-color: #010101/*#000c;*/
}
.my-circle > circle {
  stroke-width: 2;
  stroke-opacity: 1;
  fill: none;/*transparent*/
}
.my-circle > text{
	-moz-transform: translateY(0.35em);
	-ms-transform: translateY(0.35em);
	-webkit-transform: translateY(0.35em);
	transform: translateY(4.35em);
	font-size: 1.8px;
	line-height: 1;
}
#myBarChart{
	background-color: #010101;
}
/* .circle_shadow {
  background: #3b71ad none repeat scroll 0 0;
  border: 2px solid #3b71ad;
  border-radius: 20px;
  font-size: 22px;
  padding: 3px;
  width: 31px;
}
.circle_icon {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  padding: 1px;

}
.circle_icon:hover {
  background-color: #a5c3dd !important;
  border: 2px solid #a5c3dd !important;
  width: 50px;
} */
.col-yellow{
	background-color:#CCCC00;
}
.heading{
	color:#010101; /*#000000;*/
	margin-top: 5px;
	margin-bottom: 0px;
}
h2 i, h2 u{
	color:#010101; /*yellow;*/
}
.box{
	width:30px;
	height:30px;
	border:1px solid #000;
	background-color: #0F0;
}
.box1{
	width:30px;
	height:30px;
	border:1px solid #000;
	background-color: #FF0000;
}
.box2{
	width:30px;
	height:30px;
	border:1px solid #000;
	background-color: #FFFFFF;
}
.box-circle{
	/*float:right;*/
	margin-top: 47px;
}
.box-circle h4{
	color:black;
	float:left;
	margin-left: 35px;
}
.box-btn{
	margin-top: 263px;
	padding: 15px;	
}
.box-btn h4{
	color:black;
	margin-left: 162px;
	color: white;
}
.switch-candy	{
	width: 42%;
	margin-left: -35px;
	margin-top: 20px;
}
.sorting_disabled{
	color:black;
}

@keyframes spinner {
    0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }
    100% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
}
/* ending css for stepper progress indicators */

@keyframes shake {
	10%, 90% {
	  transform: translate3d(-1px, 0, 0);
	}
	
	20%, 80% {
	  transform: translate3d(2px, 0, 0);
	}
  
	30%, 50%, 70% {
	  transform: translate3d(-4px, 0, 0);
	}
  
	40%, 60% {
	  transform: translate3d(4px, 0, 0);
	}
}

@keyframes shake2 {
	0% { transform: translate(1px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(3px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(3px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(1px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes tilt-shaking {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(5deg); }
	50% { transform: rotate(0eg); }
	75% { transform: rotate(-5deg); }
	100% { transform: rotate(0deg); }
}

/* Mobile */
@media only screen and (max-width: 600px) {
    .logoInt{ width: 100%; }
    .loginContent{  }

    header{ }
    .webMenu{ display: none !important; }
    .mobMenu{ display: block; }
    .mobileMenu li{ border: none; }

    .searchForm{ padding-left:10px; padding-right: 10px; }
    .searchForm .d-flex .btn{ width: 100%; margin-bottom: 15px; }
    .searchForm .photoUpload{ display: flex !important; }
    .searchForm .text-end > .btn, .searchForm .text-end > label, .searchForm .text-end > select.form-control{
        width: 100% !important; margin-top: 15px; margin-bottom: 0; text-align: center;
    }
    .searchForm .text-end > select.form-control{ margin-top: 5px; }

    /* Results */
    .layoutToggle{ display: none; }
    .dataContainer { padding-top: 60px; }
    .dataContainer .item{ border: solid 1px #ccc !important; width: 100% !important; }
    .dataContainer .item, .dataContainer .item:last-child,
    .dataContainer .item .name, .dataContainer .item .address, .dataContainer .item .colInfo{
        width:100%; padding: 10px;
    }
    .dataContainer .item .name{
        margin-top: 10px; border-bottom:solid 1px #ccc;
    }
    .dataContainer .item .actions .btn{
        padding-left: 8px !important; padding-right: 8px !important; min-width: auto; /*margin-top: 0px !important;*/
    }
    .dataContainer .item .links{
        border-top: solid 1px #ccc; margin-top: 25px; padding-top: 15px;
    }
    .dataContainer .item, .resultViewCard .item:last-child{
        flex-direction: column; text-align: left; position: relative;
        width: 100%; margin-left: auto; margin-right: auto;  
        border: 1px solid #ccc; padding: 20px; border-radius: 20px; margin-bottom: 60px;
    }
    .dataContainer .item .pic{ margin-top: -60px; padding: 0; }
    .dataContainer .item > div{
        width: 100%; padding: 5px 0;
    }
    .homeList.dataContainer .item{ padding-bottom: 70px;}
    .homeList.dataContainer .item .actions{
        position: relative; text-align: center; width: 100%; right: auto;
    }
    .homeList.dataContainer .item .actions .btn{ margin-right: 5px; }
    .homeList.dataContainer .item .actions select{ 
        display: inline-block; padding: 5px 15px; font-size: .8em;
    }

    .homeList .cell.text-center.analyze select, .homeList .cell.text-center.analyze button {
        display: inline !important;
        width: auto !important;
        margin-bottom: 0;
        font-size: 0.8em;
    }

    .dataContainer .item .actions{
        width: 100%; /*position: absolute; top: 10px; right: 10px; width: auto; padding: 0;*/
    }
    .usersList .item .actions{
        position: absolute; top: 10px; right: 10px; width: auto;
    }
    .dataContainer .item .actions .btn{ font-size: .7em; }
    .dataContainer .item .profileAction{
        position: absolute; width: auto !important; top: -40px; right: 10px;
    }
    ul.gridThree li{
        width: 100%;
    }
    .categoryList .list-group-horizontal{ display: none; }
    .categoryList select{ display: block; }
    .categoryList .dataContainer{ padding-left: 0; padding-right: 0; }

    .addUser input, .addUser select{ margin-bottom: 10px; }
    .addUser .validateBtn{ margin-top: 5px; margin-bottom: 15px; }

    .paginationContainer, .paginationContainer .justify-content-end{ 
        text-align: center; justify-content: center !important; margin-top: 15px;  
    }

    .dataContainer .item, .dataContainer .item .tableRow, .dataContainer .item .tableRow .cell  {
        display: block !important;
    }
    .dataContainer .item .links{ width: 100%; }

    .ListTabData{ padding: 0; padding-top: 40px; }
    .ListTabData .item{ 
        padding-top:25px !important; padding-bottom: 60px; margin-bottom: 50px; position: relative;
    }
    .ListTabData .item .selectRow{
        position: absolute; background: #f2f2f2; width: auto; padding: 10px 20px; border-radius: 50rem; top: -25px;
    }
    .ListTabData .cell.colInfo:nth-child(2){ border-bottom: solid 1px #ccc; }
    .ListTabData .cell.colInfo:nth-child(4){ border-bottom: solid 1px #ccc; }

   
    .ListTabData .item .name{ border: none; padding-bottom: 0; }
    .ListTabData .item:last-child .name{ margin-bottom: 50px; }
    .ListTabData .item .cell:last-child, .propertyList .item .analyze{ 
        border-top: solid 1px #ccc; background: #f2f2f2; width: 100%;
        border-radius: 0 0 20px 20px; position: absolute; left: 0; bottom: 0;
    }
    .propertyList .item .analyze{
        background-color: #000!important; /*#ffc107!important;*/
    }
    .ListTabData .item .cell:last-child .btn, .propertyList .item .analyze .btn{
        background: none; border: none !important;
    }

    .propertyList .item .analyze .btn span{
        display: none;
    }
    .propertyList .item .analyze .btn::after{
        content: "Analyze Portfolio";
    }
    
    .ListTabData img{ border:solid 1px #888; padding: 10px; border-radius: 20px; height: 200px; }

    .mobTabHolder{}
    .mobTabHolder ul{ display: none; }
    .mobTabHolder select { display: block; }

    .uniqueAPIKey{
        width: 220px !important; max-width: 250px !important; float: right;
    }
    .pLoaderContainer{
        font-size: .8em;
    }
    .groupForm{
        flex-wrap: wrap;
    }

    .webView{ display: none; }
    .mobView{ display: block; }

    .noMob{ display: none; }

    .stepper-container{ width: 90%; }
    .stepper-container ul{ padding: 0; }

    ul#suggestions{ font-size: .8em; }
    ul#suggestions li{ padding: 8px; }

	.dataContainer2 .item2, .dataContainer2 .item2:last-child{
		border: 1px solid #e5e5e5;
		border-radius: 20px;
		padding: 10px;
        margin: 0px 5px 40px;
	}

    .mailStatus{
        padding-left: 20px; padding-right: 20px;
    }
    .mailStatusFrame{
        width: 100%; height: calc(100vh - 300px); overflow-x: hidden; overflow-y: auto;
    }
}

/*
Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
*/
/*@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {*/
@media only screen and (max-width: 768px), (max-device-width: 1024px){
	/* Force table to not be like tables anymore */
	.table_div table, .table_div thead, .table_div tbody, .table_div th, .table_div td, .table_div tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.table_div thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	tr {
		margin:0px; /*0 0 1rem 0;*/
	}
	
	tr:nth-child(odd) {
		background: #010101 !important; color: #fff !important;
	}
	/*tr:nth-child(even) {
		background: #f2f2f2 !important;
	}*/
	.my-row
		{
			border-collapse: separate;
			border-spacing: 15px;
		}
	.table_div div.my-row:nth-child(odd), div.my-row:nth-child(odd) .calendar-day-np {
		background: #010101 !important; color: #fff !important;
	}

	.table_div div.my-row:nth-child(even), div.my-row:nth-child(even) .calendar-day-np  {
		background: #f2f2f2 !important; color: #333 !important;
	}
	
	.table_div div.my-row p, .table_div div.my-row .my-col{
		border: none; text-align: left; margin: 0px; padding: 5px;
	}
	.table_div div.my-row:nth-child(odd) .my-col, .table_div div.my-row:nth-child(odd) p{
		border-bottom: 1px solid #fff !important;
	}
	.table_div div.my-row:nth-child(even) .my-col, .table_div div.my-row:nth-child(even) p{
		border-bottom: 1px solid #333 !important;
	}
	
	.table_div td {
		/* Behave  like a "row" */
		border: none !important;
		border-bottom: 1px solid #eee !important;
		position: relative !important;
		padding: 2px !important;
		padding-left: 47% !important;
		min-height: 34px;
		/*font-size: 40px !important;*/
		font-size: inherit !important;
		width: 53% !important; /*55%*/
	}
	
	/*#client_weekly_leads td{padding-left: 55% !important;}*/

	#search_data td, #client_weekly_leads td, #client_leads_calendar td, #portal_entry td, #leads_breakdown td, #event_leads td{ width: 100% !important; }
	
	.table_div td:before {
		/* Now like a table header */
		position: absolute !important;
		/* Top/left values mimic padding */
		top: 0 !important;
		left: 2px !important;
		width: 47% !important;
		padding: 2px !important;
		padding-right: 10px !important;
		white-space: nowrap !important;
	}

	tr:nth-child(odd) td{
		border-bottom: 1px solid #333 !important;
	}
	/*
	Label the data
	You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
	*/
	#search_data td:nth-of-type(1):before, #search_data p:nth-of-type(1):before { content: "Contact Name: "; }
	#search_data td:nth-of-type(2):before, #search_data p:nth-of-type(2):before { content: "First Name: "; }
	#search_data td:nth-of-type(3):before, #search_data p:nth-of-type(3):before { content: "Last Name: "; }
	#search_data td:nth-of-type(4):before, #search_data p:nth-of-type(4):before { content: "Phone: "; }
	#search_data td:nth-of-type(5):before, #search_data p:nth-of-type(5):before { content: "Email: "; }
	#search_data td:nth-of-type(6):before, #search_data p:nth-of-type(6):before { content: "Street: "; }
	#search_data td:nth-of-type(7):before, #search_data p:nth-of-type(7):before { content: "City: "; }
	#search_data td:nth-of-type(8):before, #search_data p:nth-of-type(8):before { content: "State: "; }
	#search_data td:nth-of-type(9):before, #search_data p:nth-of-type(9):before { content: "Postal Code: "; }
	#search_data td:nth-of-type(10):before, #search_data p:nth-of-type(10):before { content: "Company Name: "; }
	#search_data td:nth-of-type(11):before, #search_data p:nth-of-type(11):before { content: "Receiving Tags: "; }
	#search_data td:nth-of-type(12):before, #search_data p:nth-of-type(12):before { content: "Billed: "; }
	#search_data td:nth-of-type(13):before { content: "Actions: "; }

	#portal_entry td:nth-of-type(1):before, #portal_entry p:nth-of-type(1):before { content: "ID: "; }
	#portal_entry td:nth-of-type(2):before, #portal_entry p:nth-of-type(2):before { content: "User Name: "; }
	#portal_entry td:nth-of-type(3):before, #portal_entry p:nth-of-type(3):before { content: "API Key: "; }
	#portal_entry td:nth-of-type(4):before, #portal_entry p:nth-of-type(4):before { content: "Tags: "; }
	#portal_entry td:nth-of-type(5):before, #portal_entry p:nth-of-type(5):before { content: "Leads Added From: "; }
	#portal_entry td:nth-of-type(6):before, #portal_entry p:nth-of-type(6):before { content: "Is Active: "; }
	#portal_entry td:nth-of-type(7):before, #portal_entry p:nth-of-type(7):before { content: "Active: "; }
	#portal_entry td:nth-of-type(8):before, #portal_entry p:nth-of-type(8):before { content: "Leads Added Info: "; }
	#portal_entry td:nth-of-type(9):before { content: "Actions: "; }

	#client_leads td:nth-of-type(1):before, #client_leads p:nth-of-type(1):before { content: "Contact Name: "; }
	#client_leads td:nth-of-type(2):before, #client_leads p:nth-of-type(2):before { content: "First Name: "; }
	#client_leads td:nth-of-type(3):before, #client_leads p:nth-of-type(3):before { content: "Last Name: "; }
	#client_leads td:nth-of-type(4):before, #client_leads p:nth-of-type(4):before { content: "Receving Tags: "; }
	#client_leads td:nth-of-type(5):before, #client_leads p:nth-of-type(5):before { content: "Billed: "; }
	#client_leads td:nth-of-type(6):before, #client_leads p:nth-of-type(6):before { content: "Delivered: "; }
	#client_leads td:nth-of-type(7):before, #client_leads p:nth-of-type(7):before { content: "Added Date: "; }
	#client_leads td:nth-of-type(8):before, #client_leads p:nth-of-type(8):before { content: "New to Old: "; }
	#client_leads td:nth-of-type(9):before { content: "Actions: "; }

	#client_entry td:nth-of-type(1):before, #client_entry .my-row p:nth-of-type(1):before, #client_leads_link td:nth-of-type(1):before, #client_weekly_leads td:nth-of-type(1):before, #client_weekly_leads .my-row p:nth-of-type(1):before { content: "Client Name: "; }
	#client_entry td:nth-of-type(2):before, #client_entry .my-row p:nth-of-type(2):before, #client_leads_link td:nth-of-type(2):before, #client_weekly_leads td:nth-of-type(2):before, #client_weekly_leads .my-row p:nth-of-type(2):before { content: "Agency Name: "; }
	#client_entry td:nth-of-type(3):before, #client_entry .my-row p:nth-of-type(3):before { content: "API Key: "; }
	#client_entry td:nth-of-type(4):before, #client_entry .my-row p:nth-of-type(4):before { content: "Tags: "; }
	#client_entry td:nth-of-type(5):before, #client_entry .my-row p:nth-of-type(5):before { content: "Lead Tags: "; }
	#client_entry td:nth-of-type(6):before, #client_entry .my-row p:nth-of-type(6):before { content: "Skip Lead Tags: "; }
	#client_entry td:nth-of-type(7):before, #client_entry .my-row p:nth-of-type(7):before { content: "Weekly Limit: "; }
	#client_entry td:nth-of-type(8):before, #client_entry .my-row p:nth-of-type(8):before { content: "Is Active: "; }
	#client_entry td:nth-of-type(9):before, #client_entry .my-row p:nth-of-type(9):before { content: "Active: "; }
	#client_entry td:nth-of-type(10):before { content: "Actions: "; }

	#client_leads_link td:nth-of-type(3):before { content: "View Leads: "; }
	#client_leads_link td:nth-of-type(4):before { content: "Action: "; }
	
	#client_weekly_leads td:nth-of-type(3):before, #client_weekly_leads .my-row p:nth-of-type(3):before { content: "Weekly Limit: "; }
	#client_weekly_leads td:nth-of-type(4):before, #client_weekly_leads .my-row p:nth-of-type(4):before { content: "Billed Leads: "; }
	#client_weekly_leads td:nth-of-type(5):before, #client_weekly_leads .my-row p:nth-of-type(5):before { content: "Not Billed Leads: "; }
	#client_weekly_leads td:nth-of-type(6):before, #client_weekly_leads .my-row p:nth-of-type(6):before { content: "Leads Due: "; }
	#client_weekly_leads td:nth-of-type(7):before, #client_weekly_leads .my-row p:nth-of-type(7):before { content: "Filled %: "; }
	#client_weekly_leads td:nth-of-type(8):before { content: "Actions: "; }
	
	.leads_calendar td:nth-of-type(1):before, .leads_calendar .my-col:nth-of-type(1):before { content: "Monday: "; }
	.leads_calendar td:nth-of-type(2):before, .leads_calendar .my-col:nth-of-type(2):before { content: "Tuesday: "; }
	.leads_calendar td:nth-of-type(3):before, .leads_calendar .my-col:nth-of-type(3):before { content: "Wednesday: "; }
	.leads_calendar td:nth-of-type(4):before, .leads_calendar .my-col:nth-of-type(4):before { content: "Thursday: "; }
	.leads_calendar td:nth-of-type(5):before, .leads_calendar .my-col:nth-of-type(5):before { content: "Friday: "; }
	.leads_calendar td:nth-of-type(6):before, .leads_calendar .my-col:nth-of-type(6):before { content: "Saturday: "; }
	.leads_calendar td:nth-of-type(7):before, .leads_calendar .my-col:nth-of-type(7):before { content: "Sunday: "; }

	.leads_date_wise td:nth-of-type(1):before, .leads_date_wise .my-row p:nth-of-type(1):before { content: "Contact Name: "; }
	.leads_date_wise td:nth-of-type(2):before, .leads_date_wise .my-row p:nth-of-type(2):before { content: "Billed: "; }
	.leads_date_wise td:nth-of-type(3):before, .leads_date_wise .my-row p:nth-of-type(3):before { content: "Delivered: "; }
	.leads_date_wise td:nth-of-type(4):before, .leads_date_wise .my-row p:nth-of-type(4):before { content: "First Name: "; }
	.leads_date_wise td:nth-of-type(5):before, .leads_date_wise .my-row p:nth-of-type(5):before { content: "Last Name: "; }
	.leads_date_wise td:nth-of-type(6):before, .leads_date_wise .my-row p:nth-of-type(6):before { content: "Receiving Tags: "; }
	.leads_date_wise td:nth-of-type(7):before, .leads_date_wise .my-row p:nth-of-type(7):before { content: "Client Name: "; }
	.leads_date_wise td:nth-of-type(8):before, .leads_date_wise .my-row p:nth-of-type(8):before { content: "Sent Tags: "; }
	.leads_date_wise td:nth-of-type(9):before, .leads_date_wise .my-row p:nth-of-type(9):before { content: "Added Date: "; }
	.leads_date_wise td:nth-of-type(10):before, .leads_date_wise .my-row p:nth-of-type(10):before { content: "New To Old: "; }

	#reminder_entry td:nth-of-type(1):before{ content: "Person Name: "; }
	#reminder_entry td:nth-of-type(2):before{ content: "Email: "; }
	#reminder_entry td:nth-of-type(3):before{ content: "Subject: "; }
	#reminder_entry td:nth-of-type(4):before{ content: "Remind At Full: "; }
	#reminder_entry td:nth-of-type(5):before{ content: "Remind At: "; }
	#reminder_entry td:nth-of-type(6):before{ content: "Is Active: "; }
	#reminder_entry td:nth-of-type(7):before{ content: "Active: "; }
	#reminder_entry td:nth-of-type(8):before{ content: "Actions: "; }

	.client_portals td:nth-of-type(1):before{ content: "ID: "; }
	.client_portals td:nth-of-type(2):before{ content: "Portal Name: "; }
	.client_portals td:nth-of-type(3):before{ content: "Agency Name: "; }
	.client_portals td:nth-of-type(4):before{ content: "Sent Leads: "; }

	.lead_sources td:nth-of-type(1):before{ content: "User Name: "; }
	.lead_sources td:nth-of-type(2):before{ content: "Tags: "; }
	.lead_sources td:nth-of-type(3):before{ content: "Received Leads: "; }

	#event_leads td:nth-of-type(1):before { content: "Contact Name: "; }
	#event_leads td:nth-of-type(2):before { content: "First Name: "; }
	#event_leads td:nth-of-type(3):before { content: "Last Name: "; }
	#event_leads td:nth-of-type(4):before { content: "Phone: "; }
	#event_leads td:nth-of-type(5):before { content: "Email: "; }
	#event_leads td:nth-of-type(6):before { content: "Company Name: "; }
	#event_leads td:nth-of-type(7):before { content: "Date Updated: "; }
	#event_leads td:nth-of-type(8):before { content: "Tags: "; }
	#event_leads td:nth-of-type(9):before { content: "Event: "; }
	#event_leads td:nth-of-type(10):before { content: "Portal Name: "; }

	#search_data, #client_leads, #client_entry, #client_leads_link, .leads_date_wise {height: 2000px !important;}
	.client_portals_popup{ height: 400px !important; }
	.modal-dialog{width: 95% !important; margin-left: auto !important; margin-right: auto !important;}
	.modal-content {width: 100% !important;}
	h3, .total{text-align: center !important;}
	.actions .fa, .table_div .fa{font-size: 50px !important; margin-right: 30px;}
	.fa-trash, .fa-check-square{margin-right: 5px !important;}
	select {margin-bottom: 10px; margin-right: 5px; height: auto !important;}
	td.actions{min-height: 50px !important;}
	.jconfirm-box-container { margin-left: 15px !important; margin-right: 15px !important; }
	
	h1, h2, h3, h4, h5, h6, .form-group{text-align:center !important;  width: 100% !important;}
	h3, .total{padding:5px !important;}
	.calendar-day div, .calendar-day p{font-size:inherit !important; margin:0px; height:30px !important;}
	.calendar-day p{margin-right:3px;}

	.calendar-row td{/*padding-left: 10% !important;*/ min-height: 35px;}
	div.calendar-day, div.calendar-day-np{width: 100%; min-height: 40px !important;}
	.calendar-row .my-col div, .calendar-row .my-col p{border: 2px solid gray !important; border-radius: 5px; min-width: 40px; padding:2px !important; text-align: center !important;}
	.calendar-row td:before, .calendar-row .my-col:before{width: 35%; padding-left: 5px;}
	.calendar-row .my-col p{margin-right: 15px !important; float: right;}

	#portal_fields_list .col-md-6{ clear: both; }
	#portal_fields_list button{ width:100%!important; margin-top:10px; }

	#login{ width: 100% !important; }
	.load{ padding-top: 1px; }
	
	.d-none{font-size:18px; margin-top: 0px !important;}
	.d-none img{margin-top: -15px!important;}
	.container{width: 100%;}
	.actions{min-height: 55px;}
	.form-control{height: 34px!important;}
	#pages_list{height: 300px !important;}

	.switch-candy{ width: 100%;}
	.switch-candy h4{ width: 50px !important; }
	.box-circle h4{ text-align: left!important; }

	.border-left{ border-left: none; }
	
	.ellipsis {
		overflow: auto;
		white-space: break-spaces;
		text-overflow: auto;
	}

	.pagination-body-left{
		text-align: center;
	}
	
	.pagination-body-right{
		text-align: center;
	}
}

/*
Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
*/
/*@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {*/
@media only screen and (max-width: 768px), (max-device-width: 1024px){
    /* Force table to not be like tables anymore */
    .table_div table, .table_div thead, .table_div tbody, .table_div th, .table_div td, .table_div tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .table_div thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        margin:0px; /*0 0 1rem 0;*/
    }
    
    tr:nth-child(odd) {
        background: #010101 !important; color: #fff !important;
    }
    /*tr:nth-child(even) {
        background: #f2f2f2 !important;
    }*/
    .my-row
        {
            border-collapse: separate;
            border-spacing: 15px;
        }
    .table_div div.my-row:nth-child(odd), div.my-row:nth-child(odd) .calendar-day-np {
        background: #010101 !important; color: #fff !important;
    }

    .table_div div.my-row:nth-child(even), div.my-row:nth-child(even) .calendar-day-np  {
        background: #f2f2f2 !important; color: #333 !important;
    }
    
    .table_div div.my-row p, .table_div div.my-row .my-col{
        border: none; text-align: left; margin: 0px; padding: 5px;
    }
    .table_div div.my-row:nth-child(odd) .my-col, .table_div div.my-row:nth-child(odd) p{
        border-bottom: 1px solid #fff !important;
    }
    .table_div div.my-row:nth-child(even) .my-col, .table_div div.my-row:nth-child(even) p{
        border-bottom: 1px solid #333 !important;
    }
    
    .table_div td {
        /* Behave  like a "row" */
        border: none !important;
        border-bottom: 1px solid #eee !important;
        position: relative !important;
        padding: 2px !important;
        padding-left: 47% !important;
        min-height: 34px;
        /*font-size: 40px !important;*/
        font-size: inherit !important;
        width: 53% !important; /*55%*/
    }
    
    /*#client_weekly_leads td{padding-left: 55% !important;}*/

    #search_data td, #client_weekly_leads td, #client_leads_calendar td, #portal_entry td, #leads_breakdown td, #event_leads td{ width: 100% !important; }
    
    .table_div td:before {
        /* Now like a table header */
        position: absolute !important;
        /* Top/left values mimic padding */
        top: 0 !important;
        left: 2px !important;
        width: 47% !important;
        padding: 2px !important;
        padding-right: 10px !important;
        white-space: nowrap !important;
    }

    tr:nth-child(odd) td{
        border-bottom: 1px solid #333 !important;
    }
    /*
    Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
    */
    #search_data td:nth-of-type(1):before, #search_data p:nth-of-type(1):before { content: "Contact Name: "; }
    #search_data td:nth-of-type(2):before, #search_data p:nth-of-type(2):before { content: "First Name: "; }
    #search_data td:nth-of-type(3):before, #search_data p:nth-of-type(3):before { content: "Last Name: "; }
    #search_data td:nth-of-type(4):before, #search_data p:nth-of-type(4):before { content: "Phone: "; }
    #search_data td:nth-of-type(5):before, #search_data p:nth-of-type(5):before { content: "Email: "; }
    #search_data td:nth-of-type(6):before, #search_data p:nth-of-type(6):before { content: "Street: "; }
    #search_data td:nth-of-type(7):before, #search_data p:nth-of-type(7):before { content: "City: "; }
    #search_data td:nth-of-type(8):before, #search_data p:nth-of-type(8):before { content: "State: "; }
    #search_data td:nth-of-type(9):before, #search_data p:nth-of-type(9):before { content: "Postal Code: "; }
    #search_data td:nth-of-type(10):before, #search_data p:nth-of-type(10):before { content: "Company Name: "; }
    #search_data td:nth-of-type(11):before, #search_data p:nth-of-type(11):before { content: "Receiving Tags: "; }
    #search_data td:nth-of-type(12):before, #search_data p:nth-of-type(12):before { content: "Billed: "; }
    #search_data td:nth-of-type(13):before { content: "Actions: "; }

    #portal_entry td:nth-of-type(1):before, #portal_entry p:nth-of-type(1):before { content: "ID: "; }
    #portal_entry td:nth-of-type(2):before, #portal_entry p:nth-of-type(2):before { content: "User Name: "; }
    #portal_entry td:nth-of-type(3):before, #portal_entry p:nth-of-type(3):before { content: "API Key: "; }
    #portal_entry td:nth-of-type(4):before, #portal_entry p:nth-of-type(4):before { content: "Tags: "; }
    #portal_entry td:nth-of-type(5):before, #portal_entry p:nth-of-type(5):before { content: "Leads Added From: "; }
    #portal_entry td:nth-of-type(6):before, #portal_entry p:nth-of-type(6):before { content: "Is Active: "; }
    #portal_entry td:nth-of-type(7):before, #portal_entry p:nth-of-type(7):before { content: "Active: "; }
    #portal_entry td:nth-of-type(8):before, #portal_entry p:nth-of-type(8):before { content: "Leads Added Info: "; }
    #portal_entry td:nth-of-type(9):before { content: "Actions: "; }

    #client_leads td:nth-of-type(1):before, #client_leads p:nth-of-type(1):before { content: "Contact Name: "; }
    #client_leads td:nth-of-type(2):before, #client_leads p:nth-of-type(2):before { content: "First Name: "; }
    #client_leads td:nth-of-type(3):before, #client_leads p:nth-of-type(3):before { content: "Last Name: "; }
    #client_leads td:nth-of-type(4):before, #client_leads p:nth-of-type(4):before { content: "Receving Tags: "; }
    #client_leads td:nth-of-type(5):before, #client_leads p:nth-of-type(5):before { content: "Billed: "; }
    #client_leads td:nth-of-type(6):before, #client_leads p:nth-of-type(6):before { content: "Delivered: "; }
    #client_leads td:nth-of-type(7):before, #client_leads p:nth-of-type(7):before { content: "Added Date: "; }
    #client_leads td:nth-of-type(8):before, #client_leads p:nth-of-type(8):before { content: "New to Old: "; }
    #client_leads td:nth-of-type(9):before { content: "Actions: "; }

    #client_entry td:nth-of-type(1):before, #client_entry .my-row p:nth-of-type(1):before, #client_leads_link td:nth-of-type(1):before, #client_weekly_leads td:nth-of-type(1):before, #client_weekly_leads .my-row p:nth-of-type(1):before { content: "Client Name: "; }
    #client_entry td:nth-of-type(2):before, #client_entry .my-row p:nth-of-type(2):before, #client_leads_link td:nth-of-type(2):before, #client_weekly_leads td:nth-of-type(2):before, #client_weekly_leads .my-row p:nth-of-type(2):before { content: "Agency Name: "; }
    #client_entry td:nth-of-type(3):before, #client_entry .my-row p:nth-of-type(3):before { content: "API Key: "; }
    #client_entry td:nth-of-type(4):before, #client_entry .my-row p:nth-of-type(4):before { content: "Tags: "; }
    #client_entry td:nth-of-type(5):before, #client_entry .my-row p:nth-of-type(5):before { content: "Lead Tags: "; }
    #client_entry td:nth-of-type(6):before, #client_entry .my-row p:nth-of-type(6):before { content: "Skip Lead Tags: "; }
    #client_entry td:nth-of-type(7):before, #client_entry .my-row p:nth-of-type(7):before { content: "Weekly Limit: "; }
    #client_entry td:nth-of-type(8):before, #client_entry .my-row p:nth-of-type(8):before { content: "Is Active: "; }
    #client_entry td:nth-of-type(9):before, #client_entry .my-row p:nth-of-type(9):before { content: "Active: "; }
    #client_entry td:nth-of-type(10):before { content: "Actions: "; }

    #client_leads_link td:nth-of-type(3):before { content: "View Leads: "; }
    #client_leads_link td:nth-of-type(4):before { content: "Action: "; }
    
    #client_weekly_leads td:nth-of-type(3):before, #client_weekly_leads .my-row p:nth-of-type(3):before { content: "Weekly Limit: "; }
    #client_weekly_leads td:nth-of-type(4):before, #client_weekly_leads .my-row p:nth-of-type(4):before { content: "Billed Leads: "; }
    #client_weekly_leads td:nth-of-type(5):before, #client_weekly_leads .my-row p:nth-of-type(5):before { content: "Not Billed Leads: "; }
    #client_weekly_leads td:nth-of-type(6):before, #client_weekly_leads .my-row p:nth-of-type(6):before { content: "Leads Due: "; }
    #client_weekly_leads td:nth-of-type(7):before, #client_weekly_leads .my-row p:nth-of-type(7):before { content: "Filled %: "; }
    #client_weekly_leads td:nth-of-type(8):before { content: "Actions: "; }
    
    .leads_calendar td:nth-of-type(1):before, .leads_calendar .my-col:nth-of-type(1):before { content: "Monday: "; }
    .leads_calendar td:nth-of-type(2):before, .leads_calendar .my-col:nth-of-type(2):before { content: "Tuesday: "; }
    .leads_calendar td:nth-of-type(3):before, .leads_calendar .my-col:nth-of-type(3):before { content: "Wednesday: "; }
    .leads_calendar td:nth-of-type(4):before, .leads_calendar .my-col:nth-of-type(4):before { content: "Thursday: "; }
    .leads_calendar td:nth-of-type(5):before, .leads_calendar .my-col:nth-of-type(5):before { content: "Friday: "; }
    .leads_calendar td:nth-of-type(6):before, .leads_calendar .my-col:nth-of-type(6):before { content: "Saturday: "; }
    .leads_calendar td:nth-of-type(7):before, .leads_calendar .my-col:nth-of-type(7):before { content: "Sunday: "; }

    .leads_date_wise td:nth-of-type(1):before, .leads_date_wise .my-row p:nth-of-type(1):before { content: "Contact Name: "; }
    .leads_date_wise td:nth-of-type(2):before, .leads_date_wise .my-row p:nth-of-type(2):before { content: "Billed: "; }
    .leads_date_wise td:nth-of-type(3):before, .leads_date_wise .my-row p:nth-of-type(3):before { content: "Delivered: "; }
    .leads_date_wise td:nth-of-type(4):before, .leads_date_wise .my-row p:nth-of-type(4):before { content: "First Name: "; }
    .leads_date_wise td:nth-of-type(5):before, .leads_date_wise .my-row p:nth-of-type(5):before { content: "Last Name: "; }
    .leads_date_wise td:nth-of-type(6):before, .leads_date_wise .my-row p:nth-of-type(6):before { content: "Receiving Tags: "; }
    .leads_date_wise td:nth-of-type(7):before, .leads_date_wise .my-row p:nth-of-type(7):before { content: "Client Name: "; }
    .leads_date_wise td:nth-of-type(8):before, .leads_date_wise .my-row p:nth-of-type(8):before { content: "Sent Tags: "; }
    .leads_date_wise td:nth-of-type(9):before, .leads_date_wise .my-row p:nth-of-type(9):before { content: "Added Date: "; }
    .leads_date_wise td:nth-of-type(10):before, .leads_date_wise .my-row p:nth-of-type(10):before { content: "New To Old: "; }

    #reminder_entry td:nth-of-type(1):before{ content: "Person Name: "; }
    #reminder_entry td:nth-of-type(2):before{ content: "Email: "; }
    #reminder_entry td:nth-of-type(3):before{ content: "Subject: "; }
    #reminder_entry td:nth-of-type(4):before{ content: "Remind At Full: "; }
    #reminder_entry td:nth-of-type(5):before{ content: "Remind At: "; }
    #reminder_entry td:nth-of-type(6):before{ content: "Is Active: "; }
    #reminder_entry td:nth-of-type(7):before{ content: "Active: "; }
    #reminder_entry td:nth-of-type(8):before{ content: "Actions: "; }

    .client_portals td:nth-of-type(1):before{ content: "ID: "; }
    .client_portals td:nth-of-type(2):before{ content: "Portal Name: "; }
    .client_portals td:nth-of-type(3):before{ content: "Agency Name: "; }
    .client_portals td:nth-of-type(4):before{ content: "Sent Leads: "; }

    .lead_sources td:nth-of-type(1):before{ content: "User Name: "; }
    .lead_sources td:nth-of-type(2):before{ content: "Tags: "; }
    .lead_sources td:nth-of-type(3):before{ content: "Received Leads: "; }

    #event_leads td:nth-of-type(1):before { content: "Contact Name: "; }
    #event_leads td:nth-of-type(2):before { content: "First Name: "; }
    #event_leads td:nth-of-type(3):before { content: "Last Name: "; }
    #event_leads td:nth-of-type(4):before { content: "Phone: "; }
    #event_leads td:nth-of-type(5):before { content: "Email: "; }
    #event_leads td:nth-of-type(6):before { content: "Company Name: "; }
    #event_leads td:nth-of-type(7):before { content: "Date Updated: "; }
    #event_leads td:nth-of-type(8):before { content: "Tags: "; }
    #event_leads td:nth-of-type(9):before { content: "Event: "; }
    #event_leads td:nth-of-type(10):before { content: "Portal Name: "; }

    #search_data, #client_leads, #client_entry, #client_leads_link, .leads_date_wise {height: 2000px !important;}
    .client_portals_popup{ height: 400px !important; }
    .modal-dialog{width: 95% !important; margin-left: auto !important; margin-right: auto !important;}
    .modal-content {width: 100% !important;}
    h3, .total{text-align: center !important;}
    .actions .fa, .table_div .fa{font-size: 50px !important; margin-right: 30px;}
    .fa-trash, .fa-check-square{margin-right: 5px !important;}
    select {margin-bottom: 10px; margin-right: 5px; height: auto !important;}
    td.actions{min-height: 50px !important;}
    .jconfirm-box-container { margin-left: 15px !important; margin-right: 15px !important; }
    
    h1, h2, h3, h4, h5, h6, .form-group{text-align:center !important;  width: 100% !important;}
    h3, .total{padding:5px !important;}
    .calendar-day div, .calendar-day p{font-size:inherit !important; margin:0px; height:30px !important;}
    .calendar-day p{margin-right:3px;}

    .calendar-row td{/*padding-left: 10% !important;*/ min-height: 35px;}
    div.calendar-day, div.calendar-day-np{width: 100%; min-height: 40px !important;}
    .calendar-row .my-col div, .calendar-row .my-col p{border: 2px solid gray !important; border-radius: 5px; min-width: 40px; padding:2px !important; text-align: center !important;}
    .calendar-row td:before, .calendar-row .my-col:before{width: 35%; padding-left: 5px;}
    .calendar-row .my-col p{margin-right: 15px !important; float: right;}

    #portal_fields_list .col-md-6{ clear: both; }
    #portal_fields_list button{ width:100%!important; margin-top:10px; }

    #login{ width: 100% !important; }
    .load{ padding-top: 1px; }
    
    .d-none{font-size:18px; margin-top: 0px !important;}
    .d-none img{margin-top: -15px!important;}
    .container{width: 100%;}
    .actions{min-height: 55px;}
    .form-control{height: 34px!important;}
    #pages_list{height: 300px !important;}

    .switch-candy{ width: 100%;}
    .switch-candy h4{ width: 50px !important; }
    .box-circle h4{ text-align: left!important; }

    .border-left{ border-left: none; }
    
    .ellipsis {
        overflow: auto;
        white-space: break-spaces;
        text-overflow: auto;
    }

    .pagination-body-left{
        text-align: center;
    }
    
    .pagination-body-right{
        text-align: center;
    }
}