/*
Website Name: NKATI | Customer Relationship Management System
Website URL: http://www.nkati.org
Version: 1.0
Description: A Membership And Marketing Management System For NKATI To Keep The Track Of Members And Finance Of The Company Account.
Author: Muhammad Hassan (EXEIdeas International)
Author URL: http://www.exeideas.net
Tags: Accounts Management, Registration Management, Membership Management, Record Management, Organization Management, Finance Information
	Copyright: (c) 2019 EXEIdeas International
	License: GNU General Public License v3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html
3rd Parties Source:
	Font-Awesome 4.0 Icons: http://fontawesome.io/icons/
	Bootstrap 4.0: https://getbootstrap.com/
*/

/* Default
----------------------------------------------- */
*{margin:0;padding:0;font-family:sans-serif;font-variant:normal;}
html {height:100%;}
body {height:100%;font-family:sans-serif;font-size:13px;line-height:1.5384616;color:#333333;background-color:#F5F5F5;}
hr {border:0;height:1px;background-image:-webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));background-image:-moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));background-image:-ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));background-image:-o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));}
.clear {clear:both;}
table {border-collapse:inherit;}
.full-width {width:100%;}
.verticle-spacing {width:100%;clear:both;display:block;height:10px;}
.linkButton {text-decoration:underline;cursor:pointer;color:blue;}
.boxShaow {background: #FFFFFF;box-shadow:0px 2px 3px #ccccc8;-webkit-box-shadow:0px 2px 3px #ccccc8;-moz-box-shadow:0px 2px 3px #ccccc8;-ms-box-shadow:0px 2px 3px #ccccc8;-o-box-shadow:0px 2px 3px #ccccc8;border:1px solid #E4E4E4;padding:0px 0px 5px 0px;width:100%;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
input[type="button"].button {background:#223333;color:#FFFFFF;padding:10px;font-size:16px;display:inline-block;border:0;outline:0;margin:20px 0;cursor:pointer;}
input[type="button"].button:hover {background:#888888;color:#FFFFFF;}
.topBar {position:fixed;top:0;left:0;width:calc(100% - 5em);}
.success{background:url(../img/Success-Icon.png) no-repeat #e6efc2 5px 50%;padding:1em;padding-left:3.5em;border:2px solid #c6d880;color:#529214;font-size:16px}
.error{background:url(../img/Error-Icon.png) no-repeat #fbe3e4 5px 50%;padding:1em;padding-left:3.5em;border:2px solid #fbc2c4;color:#d12f19;font-size:16px}
.warning{background:url(../img/Warning-Icon.png) no-repeat #fff6bf 5px 50%;padding:1em;padding-left:3.5em;border:2px solid #ffd324;color:#817134;font-size:16px}
.notice{background:url(../img/Notice-Icon.png) no-repeat #cbe0f4 5px 50%;padding:1em;padding-left:3.5em;border:2px solid #96b6d3;color:#286eae;font-size:16px}
.notice form#inlineForm select{width:auto;padding:5px;border:2px solid #96b6d3;background:#d7e4f0;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
.notice form#inlineForm input[type="submit"]{padding:6px!important;border:2px solid #96b6d3!important;background:#1b6ebd!important;color:#ffffff!Important;margin:0!important;font-size:14px!important;}
form#inlineForm {display:inline;}

.hideAfterSec {
  -webkit-animation: seconds 5s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 5s;
  animation: seconds 5s forwards;
  animation-iteration-count: 1;
  animation-delay: 5s;
  position: relative;
position:fixed;left:0;top:0;right:0;width:auto;}
@-webkit-keyframes seconds {
  0% {opacity:1;}
  10% {opacity:0.9;}
  20% {opacity:0.8;}
  30% {opacity:0.7;}
  40% {opacity:0.6;}
  50% {opacity:0.5;}
  60% {opacity:0.4;}
  70% {opacity:0.3;}
  80% {opacity:0.2;}
  90% {opacity:0.1;}
  100% {opacity:0;left:-9999px; position:absolute;}
}
@keyframes seconds {
  0% {opacity:1;}
  10% {opacity:0.9;}
  20% {opacity:0.8;}
  30% {opacity:0.7;}
  40% {opacity:0.6;}
  50% {opacity:0.5;}
  60% {opacity:0.4;}
  70% {opacity:0.3;}
  80% {opacity:0.2;}
  90% {opacity:0.1;}
  100% {opacity:0;left:-9999px; position:absolute;} 
}
[contenteditable="true"]:active,[contenteditable="true"]:focus{border:auto;outline:auto;}
::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);background-color:rgba(245, 245, 245, 0.5);}
::-webkit-scrollbar{width:6px;background-color:#FFFFFF;}
::-webkit-scrollbar-thumb{background-color:#CDCDCD;}

/* Media Print Quires
----------------------------------------------- */
@media print { 
	* {visibility:hidden!important;display:none!important;} 
}

/* Index Page
----------------------------------------------- */
.background {background-image:url(../img/bgIndex.jpg);background-size:100%;background-repeat:repeat;}
#index {position:fixed;top:50%;left:50%;margin:-175px 0 0 -150px;width:300px;height:350px;background:#FFFFFF;color:#000000;border:1px solid #DDDDDD;border-radius:3px;box-shadow: 0 1px 1px rgba(0,0,0,0.05);}
#index .index {padding:20px;}
#index img {width:150px;display:block;margin:0 auto;}
#index form {margin-top:20px;}
#index i {font-size:12px;text-align:center;margin-top:10px;display:block;}

/* NavBar
----------------------------------------------- */
#navBar {border-bottom:1px solid #DDDDDD;background:#FFFFFF;width:100%;}
#navBar .navBar {border-bottom:1px solid #DDDDDD;background:#FFFFFF;color:#333333;height:50px;font-size:13px;width:100%;line-height:50px;text-align:center;}
#navBar span.fa-menu {display:none;}
#navBar .navBar a {color:#ffffff;background:#223333;padding:3px;text-decoration:none;}
#navBar .navBar h1 {font-size:30px;line-height:50px;}
#navBar .full-width {margin:10px 0;}
#navBar .buttonDIV {width:14.66%;float:left;margin:0 1%;border-radius:5px;}
#navBar .buttonDIV a {text-decoration:none;color:#FFFFFF;}
.color1 {background-color:#ff8a65!important;border-color:#ff8a65!important;color:#fff!important;}
.color2 {background-color:#4db6ac!important;border-color:#4db6ac!important;color:#fff!important;}
.color3 {background-color:#f06292!important;border-color:#f06292!important;color:#fff!important;}
.color4 {background-color:#9575cd!important;border-color:#9575cd!important;color:#fff!important;}
.color5 {background-color:#bfcd75!important;border-color:#bfcd75!important;color:#fff!important;}
.color6 {background-color:#005555!important;border-color:#005555!important;color:#fff!important;}
#navBar .buttonDIV .buttonDIVInner {padding:10px;text-align:center;font-size:20px;}
#navBar .buttonDIV .buttonDIVInner .fa-div {font-size:40px;}

#dashboardButtons .buttonDIVBox {width:98%;display:inline-block;margin:0 1%;border-radius:5px;}
#dashboardButtons .buttonDIVBox a {color:#FFF;}
#dashboardButtons .buttonDIVBox .fa-div {font-size:40px;}
#dashboardButtons .buttonDIVLeft {display:inline;float:left;width:13%;padding:1%;text-align:center;font-size:20px;}
#dashboardButtons .buttonDIVRight {display: inline;float:left;width:82%;text-align:left;border-left:1px solid #FFF;font-size:20px;padding:1%;}

/* Sidebar
----------------------------------------------- */
#sidebar {background:#223333;color:#FFFFFF;width:228px;float:left;height:100vh;overflow-y:scroll;position:relative;}
#sidebar img {width:150px;display:block;margin:20px auto;}
#sidebar ul {font-weight:bold;}
#sidebar ul a {color:rgba(255,255,255,0.75);font-size:14px;line-height:24px;text-decoration:none;}
#sidebar ul li {list-style-type:none;padding:10px;border-bottom:1px solid #292929;}
#sidebar ul li .show {float:right;cursor:pointer;}
#sidebar ul li .fa-div {float:left;width:25px;margin-right:10px;border-right:1px solid #222222;}
#sidebar ul li:first-child {border-top:1px solid #292929;}
#sidebar ul li ul {margin-top:10px;}
#sidebar ul li ul li{padding:5px 20px;}
#sidebar li:hover {background:rgba(0,0,0,0.2);color:#FFFFFF;-webkit-transition:background .15s linear;-o-transition:background .15s linear;-moz-transition:background .15s linear;transition:background .15s linear;}
#sidebar li:hover a {color:#FFFFFF;-webkit-transition:color .15s linear;-o-transition:color .15s linear;-moz-transition:color .15s linear;transition:color .15s linear;}

/* Panel
----------------------------------------------- */
#wrapper {width:calc(100% - 228px);float:left;height:100vh;overflow-y:scroll;position:relative;transition:margin-left .5s;}
.wrapper {padding:20px;}
.wrapper #panelHeading {background:#223333;color:#FFFFFF;padding:5px 15px;line-height:50px;font-weight:normal;font-size:33px;display:inline-block;}
.wrapper #panelDesc {width:calc(100% - 40px);padding:20px;line-height:20px;font-size:14px;background:#FFFFFF;font-style:italic;}
.wrapper #panelBody {margin:10px 0 50px 0;}
/* Breadcrumb */
#breadcrumb {margin:10px 0 20px 0;}
#breadcrumb .breadcrumb {padding:10px 10px 5px 10px;}
#breadcrumb .breadcrumb span {display:inline-block;margin-right:5px;}
#breadcrumb .breadcrumb a {display:inline-block;margin:0 5px;color:#223333;	}
/* Row Col */
.row {display:flex;width:100%;clear:both;}
.col23 {width:calc(66.66% - 20px);float:left;margin:10px;}
.col13 {width:calc(33.33% - 20px);float:left;margin:10px;}
.col1 {width:calc(100% - 20px);float:left;margin:10px;}
.col2 {width:calc(50% - 20px);float:left;margin:10px;}
.col3 {width:calc(33.33% - 20px);float:left;margin:10px;}
.col4 {width:calc(25% - 20px);float:left;margin:10px;}
/* Pagination */
.pagination {display:block;text-align:center;}
.pagination p {float:right;padding-bottom:5px;border-bottom:4px double #DDD;margin-right:10px;}
.pagination p label {margin-right:10px;display:inline-block;font-size:15px;}
.pagination p input[type="text"]{display:inline-block;padding:5px;width:23px;border:1px solid #878787;}
.pagination p select{display:inline-block;padding:5px;width:73px;height:27px;}
#showPaginationData {}
.pagination .paginationPages {display:block;margin-top:15px;}
.pagination .paginationPages a {cursor:pointer;border:1px solid #DDD;padding:5px;text-decoration:none;color:#898989;font-size:12px;width:18px;display:inline-block;height:18px;text-align:center;}
.pagination .paginationPages a:hover {background:#EFEFEF;}
.pagination .paginationPages a.firstPage, .pagination .paginationPages a.lastPage {background:#EFEFEF;width:68px;height:18px;border:1px solid #a0a0a0;}
.pagination .paginationPages a.currentPage {border:1px solid #a0a0a0;padding:10px;text-decoration:none;color:#898989;font-size:12px;}
.pagination .paginationPages a.currentPage:hover {background:#EFEFEF;}
/* Form */
fieldset {padding:20px;margin-top:20px;display:inline-block;background:white;width:calc(100% - 40px);border:1px dashed #233;}
fieldset legend {background:#223333;color:#FFFFFF;padding:10px;font-weight:normal;font-size:20px;display:inline-block;}
form label {width:250px;display:inline-block;font-size:15px;}
form p {display:block;margin:5px 0;width:100%;}
form ol {display:block;margin:10px 50px;font-size:15px;}
form h2 {display:block;margin:20px 0 0 0;font-size:15px;font-weight:bold;text-transform:uppercase;border-bottom:1px solid #9A9A9A;}
form input[type="file"], form input[type="text"], form input[type="date"], form input[type="number"], form input[type="time"], form input[type="checkbox"], form input[type="password"], form input[type="email"], form textarea  {width:calc(100% - 20px);padding:10px;border:1px solid #D8D8D8;background:#FFFFFF;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
input:read-only:not([type=button]):not([type=submit]) {background-color:#EFEFEF;}
form select {width:calc(100% - 0px);padding:10px;border:1px solid #D8D8D8;background:#FFFFFF;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
form input[type="button"].innerButton {font-size:12px!important;padding:7px!important;width:100%;}
form input[type="button"].button, form input[type="submit"].button, form input[type="reset"].button, form input[type="button"].innerButton {background:#223333;color:#FFFFFF;padding:20px;font-size:16px;display:inline-block;border:0;outline:0;margin:20px 0;cursor:pointer;}
form input[type="reset"].button {margin-left:10px;}
form input[type="button"].button:hover, form input[type="submit"].button:hover, form input[type="reset"].button:hover, form input[type="button"].innerButton:hover {background:#888888;color:#FFFFFF;}
/* Show Hide Boxes */
.shPanel, .shPanelCollapsed {margin-bottom:20px;width:100%;}
.shPanel .shPanelHeading, .shPanelCollapsed .shPanelHeading {cursor:pointer;font-size:20px;text-transform:capitalize;font-weight:normal;margin:0px;padding:15px;background-image:url(../img/Arrow-UP.png);background-repeat:no-repeat;background-position:right center;border-bottom:1px solid #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
.shPanel .shPanelHeading:hover, .shPanelCollapsed .shPanelHeading:hover {background-color:#223333;}
.shPanelCollapsed .shPanelHeading {background-image:url(../img/Arrow-Down.png);background-repeat:no-repeat;background-position:right center;}
.shPanelContent {overflow:hidden;transition:max-height 0.25s ease-in;}
.shPanelCollapsed .shPanelContent {max-height:0;transition:max-height 0.25s ease-out;}
.shPanelContentInner {padding:10px;}
/* POP-UP Box */
#popupDIV {position:fixed;width:100vw;height:100vh;left:0;top:0;background:#FFFFFFaa;overflow:scroll;}
#popupDIV #popupDIVcontent {padding:10vh 10vw 10vh 10vw;}
#popupDIV #popupDIVcontentInner {width:100%;height:100%;border:1px solid #000000;background:url(../img/paper-bg.jpg);}
#popupDIV .popupClose {cursor:pointer;background:#FF0000;border-radius:100%;color:#FFFFFF;position:relative;top:10px;left:calc(100% - 40px);width:30px;height:30px;text-align:center;line-height:30px;font-size:25px;}
#popupDIV .popupData {padding:20px;font-size:18px;line-height:30px;}
#popupDIV .popupData h2 {font-size:35px;border-bottom:5px solid #000000;margin-bottom:20px;}
#popupDIV .popupData p {border-bottom:1px solid #000000;word-break:break-all;}
#popupDIV .popupData b {display:inline-block;width:250px;}
/* Widgets Style */
#wrapper .widget {width:100%;max-height:355px;}
#wrapper .widget .widgetInner {width:100%;height:300px;overflow:auto;}
#wrapper .widget h2 {background:#223333;color:#FFFFFF;font-size:24px;font-weight:normal;padding:10px;}
ul.info li {list-style-type:none;color:#969696;font-size:12px;padding:10px;word-break:break-all;border-bottom:1px dashed #B3B3B3;font-family:sans-serif;}
ul.info li:hover {border-left:5px solid #223333;}
ul.info li span{clear:both;font-weight:bold;display:block;color:#212121;font-size:15px;margin-bottom:5px;}
/* TABLE */
.table {display:block;overflow-x:scroll;margin:10px 0;border:1px solid #D3D3D3;border-collapse:collapse;border-spacing:0;margin:0 auto;}
.table th {color:#424242;background:#E8E8E8;border-bottom:2px solid #D3D3D3;border-right:1px solid #D3D3D3;font-size:14px;font-weight:100;padding:10px;text-align:left;text-shadow:0 1px 1px rgba(0, 0, 0, 0.1);vertical-align:middle;}
.table th:last-child {border-right:none;}
.table td {padding:5px;text-align:left;vertical-align:middle;font-weight:300;font-size:14px;text-shadow:-1px -1px 1px rgba(0, 0, 0, 0.1);border-right:1px solid #C1C3D1;}
.table td:last-child {border-right:0px;}
.table tr {white-space:nowrap;border-top:1px solid #C1C3D1;border-bottom:1px solid #C1C3D1;color:#000000;font-size:16px;font-weight:normal;text-shadow:0 1px 1px rgba(256, 256, 256, 0.1);cursor:pointer;}
.table tr td select, .table tr td input[type="date"], .table tr td input[type="time"] {width:100%;border:0;background:none;}
.table tr:hover td {background:#ECEFF1;color:#000000;}
.table tr:hover td a, .table tr:hover td input[type="text"], .table tr:hover td select {color:#000000;}
.table tr:hover td select option {color:#000000;}
.table tr:first-child {border-top:none;}
.table tr:last-child {border-bottom:none;} 
.table tr:nth-child(odd) {background:#F9F9F9;}
.table tr:nth-child(odd):hover {background:#ECEFF1;}
.table a, .table .link {color:#33AADD;font-weight:bold;}
.table a.cancelButton {color:#FFFFFF!important;padding:5px;background:#888888;display:block;text-decoration:none;cursor:pointer;text-align:center;}
.table a.updateButton {color:#FFFFFF!important;padding:5px;background:#0000ff;display:block;text-decoration:none;cursor:pointer;text-align:center;}
.table a.deleteButton {color:#FFFFFF!important;padding:5px;background:#FF0000;display:block;text-decoration:none;cursor:pointer;text-align:center;}
.table a.editButton {color:#FFFFFF!important;padding:5px;background:#008888;display:block;text-decoration:none;cursor:pointer;text-align:center;}
.table tr td input[type="text"] {font-weight:300;font-size:14px;text-shadow:-1px -1px 1px rgba(0, 0, 0, 0.1);border:0;background:none;outline:none;}


/* Footer
----------------------------------------------- */
footer {position:fixed;bottom:0;left:0;border-top:1px solid #DDDDDD;background:#FFFFFF;color:#333333;height:50px;font-size:13px;width:100%;line-height:50px;text-align:center;}
footer a {color:#FFFFFF;background:#223333;padding:3px;text-decoration:none;}
footer a:hover {color:#FFFFFF;}



/* Responsive Quires
----------------------------------------------- */
@media only screen and (min-width:967px) and (max-width:1024px){
	#wrapper .wrapper {margin:20px!important;}
	#wrapper .widget {max-height:360px!important;}
	#wrapper .widget .widgetInner {height:300px!important;}
}

@media only screen and (min-width:769px) and (max-width:966px){
	#wrapper .wrapper {margin:20px!important;}
	#wrapper .widget {max-height:360px!important;}
	#wrapper .widget .widgetInner {height:300px!important;}
	.row {display:block!important;}
	.col13,.col23,.col2,.col3,.col4 {width:calc(100% - 20px)!important;}
}
@media only screen and (min-width:601px) and (max-width:768px){
	#navBar .navBar h1 {font-size:26px!important;}
	#navBar .buttonDIV {width:31%!important;margin:1%!important;}
	#wrapper .wrapper {margin:20px!important;}
	#wrapper .widget {max-height:360px!important;}
	#wrapper .widget .widgetInner {height:300px!important;}
	.row {display:block!important;}
	.col13,.col23,.col2,.col3,.col4 {width:calc(100% - 20px)!important;}
}
@media only screen and (min-width:481px) and (max-width:603px){
	body {overflow-x:hidden;}
	#sidebar {margin-left:-228px;position:fixed!important;z-index:1!important;top:0!important;left:0!important;overflow-x:hidden!important;transition:0.5s!important;}
	#wrapper {width: calc(100% - 0px)!important;}
	#navBar .navBar h1 {font-size:26px!important;display:inline-block;}
	#navBar span.fa-menu {display:block!important;font-size:26px!important;float:left!important;display:inline-block!important;line-height:50px!important;margin-left:15px!important;}
	#navBar .buttonDIV {width:18%!important;margin:1%!important;}
	#wrapper .wrapper {margin:20px!important;}
	#wrapper .widget {max-height:360px!important;}
	#wrapper .widget .widgetInner {height:300px!important;}
	.row {display:block!important;}
	.col13,.col23,.col2,.col3,.col4 {width:calc(100% - 20px)!important;}
}
@media only screen and (min-width:321px) and (max-width:480px){
	body {overflow-x:hidden;}
	#sidebar {margin-left:-228px;position:fixed!important;z-index:1!important;top:0!important;left:0!important;overflow-x:hidden!important;transition:0.5s!important;}
	#wrapper {width: calc(100% - 0px)!important;}
	#navBar .navBar h1 {font-size:18px!important;display:inline-block;}
	#navBar span.fa-menu {display:block!important;font-size:26px!important;float:left!important;display:inline-block!important;line-height:50px!important;margin-left:15px!important;}
	#navBar .buttonDIV {width:31%!important;margin:1%!important;}
	#wrapper .wrapper {margin:10px!important;padding:0px!important;}
	#wrapper .widget {max-height:360px!important;}
	#wrapper .widget .widgetInner {height:300px!important;}
	.row {display:block!important;}
	.col13,.col23,.col2,.col3,.col4 {width:calc(100% - 20px)!important;}
}
@media only screen and (min-width:1px) and (max-width:320px){	
	body {overflow-x:hidden;}
	#sidebar {margin-left:-228px;position:fixed!important;z-index:1!important;top:0!important;left:0!important;overflow-x:hidden!important;transition:0.5s!important;}
	#wrapper {width: calc(100% - 0px)!important;}
	#navBar .navBar h1 {font-size:14px!important;display:inline-block;}
	#navBar span.fa-menu {display:block!important;font-size:26px!important;float:left!important;display:inline-block!important;line-height:50px!important;margin-left:15px!important;}
	#navBar .buttonDIV {width:48%!important;margin:1%!important;}
	#wrapper .wrapper {margin:10px!important;padding:0px!important;}
	#wrapper .widget {max-height:360px!important;}
	#wrapper .widget .widgetInner {height:300px!important;}
	.row {display:block!important;}
	.col13,.col23,.col2,.col3,.col4 {width:calc(100% - 20px)!important;}	
}