body {

    background-color: #fff;

	color:#737373;

	font-family:roboto;

}

.navbar-inverse

{

	background:#f5f5f5;

	    border-color: #707070;

		border-bottom:solid 1px #707070;

		border-top:solid 1px #707070;

}



.white_bg a

{

	background:#fff;

	color:#707070;

	border-left:solid 1px #707070;

	padding-left:50px !important;

	padding-right:50px !important;

}

.white_bg2 a

{

	background:#fff;

	color:#707070;

	border-left:solid 1px #707070;

	border-right:solid 1px #707070;

	padding-left:50px !important;

	padding-right:50px !important;

}



.user_img

{  

    width: 30px;

    height: 30px;

    border-radius: 50%;

    margin-top: -5px;

}



.label_body_area

{

	padding-top:40px;

	font-size:14px;

	font-weight:normal;

}

.label_body_area h2

{

	padding-top:0px;

	margin:0px;

	padding-bottom:10px;

    font-size: 28px;

        color: #43425D !important;

}

.login_body_area

{

	padding-top:0px;

	font-size:14px;

	font-weight:normal;

}

.login_body_area h2

{

	padding-top:0px;

	margin:0px;

	padding-bottom:10px;

}

.login_body_area .pen-title

{

	margin-top:0px !important;

	padding-top:0px !important; 

}



.logo

{

	height:34px;

	    margin: 0px 15px;

}

.body_span_label

{

	font-size:18px;

	color:#737373;

}

.user_search

{

	background:#fff;

	border:none;

	border-bottom:solid 1px #b7b7b7;

	font-size:18px;

	font-weight:normal;

	color:#707070;

	float:right;

	width:280px;

	padding-bottom:5px;

	padding-top:5px;

	outline: none;

}

.navbar-inverse .navbar-toggle .icon-bar {

    background-color: #000;

}

.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {

    background-color: #f5f5f5;

}

















#wrapper {

    padding-left: 0;

}



#page-wrapper {

    width: 100%;

    padding: 0;

    background-color: #fff;

}



.huge {

    font-size: 50px;

    line-height: normal;

}

@media(min-width:768px) {

body {

    margin-top: 50px !important;

}

    #wrapper {

        padding-left: 0px;

    }



    #page-wrapper {

        padding: 10px;

    }

}



/* Top Navigation */



.top-nav {

    padding: 0 15px;

}



.top-nav>li {

    display: inline-block;

    float: left;

}



.top-nav>li>a {

    padding-top: 15px;

    padding-bottom: 15px;

    line-height: 27px;

    color: #999;

	font-size: 14px;

	font-family:roboto !important;

}

.navbar-brand {

    line-height: 27px;

}

.top-nav>li>a:hover,

.top-nav>li>a:focus,

.top-nav>.open>a,

.top-nav>.open>a:hover,

.top-nav>.open>a:focus {

    background-color: #fff;

    font-weight: bold;  

}

.top-nav li a {

    font-weight: 500 !important;

}

.top-nav li.active a {

   color: rgba(0,0,0,.9) !important;

}

.top-nav li:last-child a#navbarDropdownMenuLink{

	    padding: 15px 30px !important;

}



.top-nav>.open>.dropdown-menu {

    float: left;

    position: absolute;

    margin-top: 0;

    border: 1px solid rgba(0,0,0,.15);

    border-top-left-radius: 0;

    border-top-right-radius: 0;

    background-color: #fff;

    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);

    box-shadow: 0 6px 12px rgba(0,0,0,.175);

}



.top-nav>.open>.dropdown-menu>li>a {

    white-space: normal;

}



ul.message-dropdown {

    padding: 0;

    max-height: 250px;

    overflow-x: hidden;

    overflow-y: auto;

}



li.message-preview {

    width: 275px;

    border-bottom: 1px solid rgba(0,0,0,.15);

}



li.message-preview>a {

    padding-top: 15px;

    padding-bottom: 15px;

}



li.message-footer {

    margin: 5px 0;

}



ul.alert-dropdown {

    width: 200px;

}



/* Side Navigation */



@media(min-width:768px) {

    .side-nav {

        position: fixed;

        top: 51px;

        left: 225px;

        width: 225px;

        margin-left: -225px;

        border: none;

        border-radius: 0;

        overflow-y: auto;

        background-color: #222;

        bottom: 0;

        overflow-x: hidden;

        padding-bottom: 40px;

    }



    .side-nav>li>a {

        width: 225px;

    }



    .side-nav li a:hover,

    .side-nav li a:focus {

        outline: none;

        background-color: #000 !important;

    }

}



.side-nav>li>ul {

    padding: 0;

}



.side-nav>li>ul>li>a {

    display: block;

    padding: 10px 15px 10px 38px;

    text-decoration: none;

    color: #999;

}



.side-nav>li>ul>li>a:hover {

    color: #fff;

}



/* Flot Chart Containers */



.flot-chart {

    display: block;

    height: 400px;

}



.flot-chart-content {

    width: 100%;

    height: 100%;

}



/* Custom Colored Panels */



.huge {

    font-size: 40px;

}



.panel-green {

    border-color: #5cb85c;

}



.panel-green > .panel-heading {

    border-color: #5cb85c;

    color: #fff;

    background-color: #5cb85c;

}



.panel-green > a {

    color: #5cb85c;

}



.panel-green > a:hover {

    color: #3d8b3d;

}



.panel-red {

    border-color: #d9534f;

}



.panel-red > .panel-heading {

    border-color: #d9534f;

    color: #fff;

    background-color: #d9534f;

}



.panel-red > a {

    color: #d9534f;

}



.panel-red > a:hover {

    color: #b52b27;

}



.panel-yellow {

    border-color: #f0ad4e;

}



.panel-yellow > .panel-heading {

    border-color: #f0ad4e;

    color: #fff;

    background-color: #f0ad4e;

}



.panel-yellow > a {

    color: #f0ad4e;

}



.panel-yellow > a:hover {

    color: #df8a13;

}

.plr-0{

  padding-left: 0px !important;

  padding-right: 0px !important;

}



@media (min-width: 768px) and (max-width: 991px){

  .white_bg a, .white_bg2 a {

    padding-left: 25px !important;

    padding-right: 25px !important;

}

.all_users_list .sm-pb-0{padding-bottom: 0px !important;}

.sm-pb-0{padding-bottom: 0px !important;}

.all_users_list .sm-pt-0{padding-top: 0px !important;}

.sm-pt-0{padding-top: 0px !important;}

}



@media (min-width: 320px) and (max-width: 767px){

.page-header

{

	padding-top:60px;

}

.navbar-bg-xs {

    background-color: #e2e2e2;

}

.navbar-bg-xs ul li{

  text-align: right;

}

.top-nav>li {

    display: inline-block;

    width: 100%;

    text-align: center;

}

.white_bg a {

    border-bottom: solid 1px #dad1d1;

    border-left:0px;

  }

  .white_bg2 a {

    border-left: 0;

    border-right: 0;

    border-bottom: solid 1px #dad1d1;

  }

/*

.navbar-brand {

    margin: auto;

    float: inherit;

    text-align: center;

    width: 100%;

    display: block;

	margin-bottom:10px;

}

*/

	#wrapper .navbar-inverse{

		padding: 10px 20px !important;

	}

.logo

{

	height:34px;

	margin:0;

}

#page-wrapper {

    margin-top: 70px;

}

.white_bg a {

    padding-left: 20px !important;

    padding-right: 20px !important;

}

.white_bg2 a {

    padding-left: 20px !important;

    padding-right: 20px !important;

}

}



















/* Pen Title */

.pen-title {

  padding: 20px 0;

  text-align: center;

  letter-spacing: 2px;

}

.pen-title h1 {

  margin: 0 0 20px;

  font-size: 30px;

  font-weight:700;

}

.pen-title span {

  font-size: 12px;

}

.pen-title span .fa {

  color: #ed2553;

}

.pen-title span a {

  color: #ed2553;

  font-weight: 600;

  text-decoration: none;

}



/* Rerun */

.rerun {

  margin: 0 0 30px;

  text-align: center;

}

.rerun a {

  cursor: pointer;

  display: inline-block;

  background: #ed2553;

  border-radius: 3px;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

  padding: 10px 20px;

  color: #ffffff;

  text-decoration: none;

  -webkit-transition: 0.3s ease;

  transition: 0.3s ease;

}

.rerun a:hover {

  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

}



/* Scroll To Bottom */

#codepen, #portfolio {

  position: fixed;

  bottom: 30px;

  right: 30px;

  background: #ec2652;

  width: 56px;

  height: 56px;

  border-radius: 100%;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

  -webkit-transition: 0.3s ease;

  transition: 0.3s ease;

  color: #ffffff;

  text-align: center;

}

#codepen i, #portfolio i {

  line-height: 56px;

}

#codepen:hover, #portfolio:hover {

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);

}



/* CodePen */

#portfolio {

  bottom: 96px;

  right: 36px;

  background: #ec2652;

  width: 44px;

  height: 44px;

  -webkit-animation: buttonFadeInUp 1s ease;

  animation: buttonFadeInUp 1s ease;

}

#portfolio i {

  line-height: 44px;

}



/* Container */

.container {

  position: relative;

  max-width: 375px;

  width: 100%;

  margin: 0 auto 10px;

}

.container.active .card:first-child {

  background: #f2f2f2;

  margin: 0 15px;

}

.container.active .card:nth-child(2) {

  background: #fafafa;

  margin: 0 10px;

}

.container.active .card.alt {

  top: 20px;

  right: 0;

  width: 100%;

  min-width: 100%;

  height: auto;

  border-radius: 5px;

  padding: 60px 0 40px;

  overflow: hidden;



}

.container.active .card.alt .toggle {

  position: absolute;

  top: 40px;

  right: -70px;

  box-shadow: none;

  -webkit-transform: scale(14);

  transform: scale(15);

  -webkit-transition: -webkit-transform .5s ease;

  transition: -webkit-transform .5s ease;

  transition: transform .5s ease;

  transition: transform .5s ease, -webkit-transform .5s ease;



}

.container.active .card.alt .toggle:before {

  content: '';

}

.container.active .card.alt .title,

.container.active .card.alt .input-container,

.container.active .card.alt .button-container {

  left: 0;

  opacity: 1;

  visibility: visible;

  -webkit-transition: .3s ease;

  transition: .3s ease;

}

.container.active .card.alt .title {

  -webkit-transition-delay: .3s;

          transition-delay: .3s;

}

.container.active .card.alt .input-container {

  -webkit-transition-delay: .4s;

          transition-delay: .4s;

}

.container.active .card.alt .input-container:nth-child(2) {

  -webkit-transition-delay: .5s;

          transition-delay: .5s;

}

.container.active .card.alt .input-container:nth-child(3) {

  -webkit-transition-delay: .6s;

          transition-delay: .6s;

}

.container.active .card.alt .button-container {

  -webkit-transition-delay: .7s;

          transition-delay: .7s;

}



/* Card */

.card {

  position: relative;

  background: #ffffff;

  border-radius: 5px;

  padding: 20px 0 20px 0;

  box-sizing: border-box;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

  -webkit-transition: .3s ease;

  transition: .3s ease;

  /* Title */

  /* Inputs */

  /* Button */

  /* Footer */

  /* Alt Card */

}

.card:first-child {

  background: #fafafa;

  height: 10px;

  border-radius: 5px 5px 5px 5px;

  margin: 0 10px;

  padding: 0;

}

.card .title {

  position: relative;

  z-index: 1;

  border-left: 5px solid #ec2652;

  margin: 0 0 10px;

  padding: 10px 0 10px 50px;

  color:#ec2652;

  font-size: 32px;

  font-weight: 600;

  text-transform: uppercase;

}

.card .input-container {

  position: relative;

  margin: 0 50px 20px;

}

.card .input-container input {

  outline: none;

  z-index: 1;

  position: relative;

  background: none;

  width: 100%;

  height: 54px;

  border: 0;

  color: #212121;

  font-size: 20px;

  font-weight: 400;

}

.card .input-container input:focus ~ label {

  color: #9d9d9d;

  -webkit-transform: translate(-12%, -50%) scale(0.75);

          transform: translate(-12%, -50%) scale(0.75);

}

.card .input-container input:focus ~ .bar:before, .card .input-container input:focus ~ .bar:after {

  width: 50%;

}

.card .input-container input:valid ~ label {

  color: #9d9d9d;

  -webkit-transform: translate(-12%, -50%) scale(0.75);

          transform: translate(-12%, -50%) scale(0.75);

}

.card .input-container label {

  position: absolute;

  top: 0;

  left: 0;

  color: #757575;

  font-size: 24px;

  font-weight: 300;

  line-height: 60px;

  -webkit-transition: 0.2s ease;

  transition: 0.2s ease;

}

.card .input-container .bar {

  position: absolute;

  left: 0;

  bottom: 0;

  background: #757575;

  width: 100%;

  height: 1px;

}

.card .input-container .bar:before, .card .input-container .bar:after {

  content: '';

  position: absolute;

  background: #ec2652;

  width: 0;

  height: 2px;

  -webkit-transition: .2s ease;

  transition: .2s ease;

}

.card .input-container .bar:before {

  left: 50%;

}

.card .input-container .bar:after {

  right: 50%;

}

.card .button-container {

  margin: 0 51px;

  text-align: center;

}

.card .button-container button {

  outline: 0;

  cursor: pointer;

  position: relative;

  display: inline-block;

  background: 0;

  width: 247px;

  border: 2px solid #e3e3e3;

  padding: 20px 0;

  font-size: 24px;

  font-weight: 600;

  line-height: 1;

  text-transform: uppercase;

  overflow: hidden;

  -webkit-transition: .3s ease;

  transition: .3s ease;

}

.card .button-container button span {

  position: relative;

  z-index: 1;

  color: #ddd;

  -webkit-transition: .3s ease;

  transition: .3s ease;

}

.card .button-container button:before {

  content: '';

  position: absolute;

  top: 50%;

  left: 50%;

  display: block;

  background: #ec2652;

  width: 30px;

  height: 30px;

  border-radius: 100%;

  margin: -15px 0 0 -15px;

  opacity: 0;

  -webkit-transition: .3s ease;

  transition: .3s ease;

}

.card .button-container button:hover, .card .button-container button:active, .card .button-container button:focus {

  border-color: #ec2652;

}

.card .button-container button:hover span, .card .button-container button:active span, .card .button-container button:focus span {

  color: #ec2652;

}

.card .button-container button:active span, .card .button-container button:focus span {

  color: #ffffff;

}

.card .button-container button:active:before, .card .button-container button:focus:before {

  opacity: 1;

  -webkit-transform: scale(10);

  transform: scale(10);

}

.card .footer {

  margin: 20px 0 0;

  color: #d3d3d3;

  font-size: 18px;

  font-weight: 300;

  text-align: center;

}

.card .footer a {

  color: inherit;

  text-decoration: none;

  -webkit-transition: .3s ease;

  transition: .3s ease;

}

.card .footer a:hover {

  color: #bababa;

}

.card.alt {

  position: absolute;

  top: 40px;

  right: -70px;

  z-index: 10;

  width: 100px;

  height: 100px;

  background: none;

  border-radius: 100%;

  box-shadow: none;

  padding: 0;

  -webkit-transition: .3s ease;

  transition: .3s ease;

    display:none;

  /* Toggle */

  /* Title */

  /* Input */

  /* Button */

}

.card.alt .toggle {

  position: relative;

  background: #ec2652;

  width: 100px;

  height: 100px;

  border-radius: 100%;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

  color: #ffffff;

  font-size: 42px;

  line-height: 100px;

  text-align: center;

  cursor: pointer;

   display:none;

}

.card.alt .toggle:before {

  content: '\f067';

  display: inline-block;

  font: normal normal normal 14px/1 FontAwesome;

  font-size: inherit;

  text-rendering: auto;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  -webkit-transform: translate(0, 0);

          transform: translate(0, 0);

}

.card.alt .title,

.card.alt .input-container,

.card.alt .button-container {

  left: 100px;

  opacity: 0;

  visibility: hidden;

}

.card.alt .title {

  position: relative;

  border-color: #ffffff;

  color: #ffffff;

}

.card.alt .title .close {

  cursor: pointer;

  position: absolute;

  top: 0;

  right: 60px;

  display: inline;

  color: #ffffff;

  font-size: 58px;

  font-weight: 400;

}

.card.alt .title .close:before {

  content: '\00d7';

}

.card.alt .input-container input {

  color: #ffffff;

}

.card.alt .input-container input:focus ~ label {

  color: #ffffff;

}

.card.alt .input-container input:focus ~ .bar:before, .card.alt .input-container input:focus ~ .bar:after {

  background: #ffffff;

}

.card.alt .input-container input:valid ~ label {

  color: #ffffff;

}

.card.alt .input-container label {

  color: rgba(255, 255, 255, 0.8);

}

.card.alt .input-container .bar {

  background: rgba(255, 255, 255, 0.8);

}

.card.alt .button-container button {

  width: 100%;

  background: #ffffff;

  border-color: #ffffff;

}

.card.alt .button-container button span {

  color: #ec2652;

}

.card.alt .button-container button:hover {

  background: rgba(255, 255, 255, 0.9);

}

.card.alt .button-container button:active:before, .card.alt .button-container button:focus:before {

  display: none;

}



/* Keyframes */

@-webkit-keyframes buttonFadeInUp {

  0% {

    bottom: 30px;

    opacity: 0;

  }

}

@keyframes buttonFadeInUp {

  0% {

    bottom: 30px;

    opacity: 0;

  }

}





@media (min-width: 320px) and (max-width: 767px){

.card .button-container button

{

	    width: 146px;

}

.card .footer a

{

	    font-size: 14px;

}





}





/* Customize the label (the container) */

.loginchecbox {

  display: block;

  position: relative;

  padding-left: 27px;

  cursor: pointer;

  font-size: 12px;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  margin-left:50px;

  margin-bottom:15px;

  padding-top:2px;

}



/* Hide the browser's default checkbox */

.loginchecbox input {

  position: absolute;

  opacity: 0;

  cursor: pointer;

  height: 0;

  width: 0;

}



/* Create a custom checkbox */

.checkmark {

  position: absolute;

  top: 0;

  left: 0;

  height: 20px;

  width: 20px;

  background-color: #eee;

}



/* On mouse-over, add a grey background color */

.loginchecbox:hover input ~ .checkmark {

  background-color: #ccc;

}



/* When the checkbox is checked, add a blue background */

.loginchecbox input:checked ~ .checkmark {

  background-color: #2196F3;

}



/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {

  content: "";

  position: absolute;

  display: none;

}



/* Show the checkmark when checked */

.loginchecbox input:checked ~ .checkmark:after {

  display: block;

}



/* Style the checkmark/indicator */

.loginchecbox .checkmark:after {

  left: 8px;

  top: 4px;

  width: 5px;

  height: 10px;

  border: solid white;

  border-width: 0 3px 3px 0;

  -webkit-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  transform: rotate(45deg);

}

.checbox_area_login

{

	margin-top:20px;

}

fieldset {

      /* min-width: 0; */

    /* padding: 0; */

    /* margin: 0; */

    /* border: 0; */

    display: block;

    margin-inline-start: 2px;

    margin-inline-end: 2px;

    padding-block-start: 0.35em !important;

    padding-inline-start: 1.75em !important;

    padding-inline-end: 1.75em !important;

    padding-block-end: 0.625em !important;

    min-inline-size: min-content !important;

    border-width: 1px !important;

    border-style: groove !important;

    border-color: #fffcfc !important;

    border-image: initial !important;

    position: relative;

}

legend {

        /* display: block; */

    /* padding: 0; */

    font-size: 32px !important;

    /* margin-bottom: 20px; */

    width: auto !important;

    display: block;

    padding-inline-start: 10px !important;

    padding-inline-end: 10px !important;

    border-width: initial;

    border-style: none;

    border-color: initial;

    border-image: initial;

    /* font-size: 21px; */

    /* line-height: inherit; */

    color: #908d8d;

    /* border: 0; */

    /* border-bottom: 1px solid #e5e5e5; */

}

.mb-4 {

    margin-bottom: 40px;

}

.plus-img {

    position: absolute;

    right: 25px;

    top: -20px;

	cursor:pointer;

}





/* zohaib css */

#admin_table_wrapper{

	margin-bottom: 30px;

}

/*

.user-grid{

		display: grid;

		grid-template-columns: repeat(auto-fill, minmax(45rem,1fr));

		max-width: 100%;

   	 	margin: 0 auto;

		grid-gap:40px;

		margin-bottom: 40px;

	padding-top: 0px;

	}

.user-grid .no_pad{

		color: #000;

		font-size: 20px;

	}

*/

.media-left{

	    padding: 0px;

    width: 100%;

    height: auto;

    float: left;

}

.media-left img{

	    height: 100%;

    object-fit: cover;

    width: 100%;

}

.media_grid{

	    width: 100%;

    height: auto;

    border: 1px solid #908d8d;

}

.media_grid .media-body{

	padding: 30px 20px 0;

}

.media_grid p{margin-bottom: 0px;}

.no_pad{padding: 0px !important;}



/* user admin */

.user_admin_wrap{

    background: #F0F0F7 !important;

}

.user_administration{

        border: 1px solid #C8D1D3;

        padding: 10px 2px 10px 20px;

    border-radius: 50px;

    background: #fff;

    position: relative;

}

.user_administration input{

    width: 100%;

    color: #6E8CA0;

    border-bottom: 0px !important;

    font-size: 14px;

    font-weight: normal;



}

.user_administration input::placeholder{

    color: #6E8CA0;

    font-size: 14px;

    font-weight: normal;

}

.user_administration span i{

    transform: rotate(45deg);

    color: #fff;

    font-size: 16px;

}

.user_administration span{

        background: #A5A5A5;

    padding: 6px 11px;

    border-radius: 500px;

    box-shadow: 0px 10px 20px #B1B1B1;

    cursor: pointer;

    position: absolute;

    top: 5px;

    right: 10px;

}

.all_users_list{

    background: #fff;

    border: #fff !important;

    box-shadow: 0px 2px 6px rgba(197,197,197,.85);

    margin-bottom: 30px;

}

.all_users_list h4{

        font-size: 26px;

    color: #4D4F5C;

    font-weight: 600;

    padding-top: 20px;

        margin-bottom: 30px;

}

.user_list_img{

    width: 40px;

    height: 40px;

    border-radius: 50px !important;

}

#users_table_wrapper .top{

    position: absolute;

    top: 18px;

    right: 20px;

}

.table#users_table thead th,.table#users_table td,.table#users_table td,.table#users_table tr{

	    background: transparent !important;

    border: 0px !important;

}

.table#users_table tr th{

    border-bottom: 2px solid #eee !important;

}

.table#users_table td:nth-child(even){

    color: #aaa;

    font-size: 13px;

    border-bottom: 1px solid #eee !important;

}

.table#users_table td a{text-decoration: none !important;color: #43425D;}

.table#users_table td:nth-child(odd){

    color: #43425D;

    font-size: 15px;

        font-weight: 600;

    border-bottom: 1px solid #eee !important;

}

.table#users_table td:first-child{

    outline: none !important;

}

.table#users_table td:nth-child(n+2){

    padding-top: 22px !important;

    padding-bottom: 0 !important;

}

.user_edit{cursor: pointer;}

#users_table_wrapper .pagination li a{

        border: 0px;

    padding: 5px;

    color: #B5ADAD;

}

#users_table_wrapper .pagination li.page-item.active a{

    background: transparent !important;

    font-weight: bold;

    color: #000;

}

table#users_table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, table#users_table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before{

    top: 22px !important;

    line-height: 15px !important;

}

/* user admin end*/

/* user detail */

.user_media h5{

    color: #515C6F;

    font-size: 1.8em;

    font-weight: bold;

}

.user_media span{

    color: #515C6F;

    font-size: 15px;

}

.user_info{

    padding: 30px;

}

.user_info p{

   color: #515C6F;

    font-size: 16px;

    margin: 0px;

    padding-bottom: 10px;

}

.user_info p a{

    color: #86BBBE;

}

/*toggle*/

.outerDivFull {  } 



.switchToggle input[type=checkbox]{height: 0; width: 0; visibility: hidden; position: absolute; }

.switchToggle label {cursor: pointer; text-indent: -9999px; width: 50px; max-width: 50px; height: 25px; background: #d1d1d1; display: block; border-radius: 100px; position: relative;margin-left: auto;}

.switchToggle label:after {content: ''; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; background: #fff; border-radius: 90px; transition: 0.3s; }

.switchToggle input:checked + label, .switchToggle input:checked + input + label  {background: #87BCBF; }

.switchToggle input + label:before, .switchToggle input + input + label:before {content: ''; position: absolute; top: 5px; left: 35px; width: 26px; height: 26px; border-radius: 90px; transition: 0.3s; text-indent: 0; color: #fff; }

.switchToggle input:checked + label:before, .switchToggle input:checked + input + label:before {content: ''; position: absolute; top: 5px; left: 10px; width: 26px; height: 26px; border-radius: 90px; transition: 0.3s; text-indent: 0; color: #fff; }

.switchToggle input:checked + label:after, .switchToggle input:checked + input + label:after {left: calc(100% - 2px); transform: translateX(-100%); }

.switchToggle label:active:after {width: 60px; } 

.toggle-switchArea { margin: 10px 0 10px 0; }

.user_toggle_label{

    color: #515C6F;

    font-size: 15px;

    font-weight: bold;

}

.user_timeline .card{

        box-shadow: none;

    height: auto !important;

    background: transparent;

    border: 0px;

}.user_timeline .card .card-body{

    font-size: 13px;

    color: #707070;

    padding: 0px;

}

.bg-bluey{

    background: #87BCBF;

}.text-bluey{

    color: #87BCBF;

}.border-bluey{

    border-color: #87BCBF;

}

.timeline_title{

    color: #515C6F;

    font-size: 20px;

    font-weight: bold;

}

/* comment css*/

img{ max-width:100%;}

.inbox_people {

  background: #f8f8f8 none repeat scroll 0 0;

  float: left;

  overflow: hidden;

  width: 40%; border-right:1px solid #c4c4c4;

}

.inbox_msg {

  border-top:1px solid #f1e8e8;

  clear: both;

  overflow: hidden;

}

.top_spac{ margin: 20px 0 0;}





.recent_heading {float: left; width:40%;}

.srch_bar{

  display: inline-block;

  text-align: right;

  width: 60%;

}

.headind_srch{ padding:10px 29px 10px 20px; overflow:hidden; border-bottom:1px solid #c4c4c4;}



.recent_heading h4 {

  color: #05728f;

  font-size: 21px;

  margin: auto;

}

.srch_bar input{ border:1px solid #cdcdcd; border-width:0 0 1px 0; width:80%; padding:2px 0 4px 6px; background:none;}

.srch_bar .input-group-addon button {

  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

  border: medium none;

  padding: 0;

  color: #707070;

  font-size: 18px;

}

.srch_bar .input-group-addon { margin: 0 0 0 -27px;}



.chat_ib h5{ font-size:15px; color:#464646; margin:0 0 8px 0;}

.chat_ib h5 span{ font-size:13px; float:right;}

.chat_ib p{ font-size:14px; color:#989898; margin:auto}

.chat_img {

  float: left;

  width: 11%;

}

.chat_ib {

  float: left;

  padding: 0 0 0 15px;

  width: 88%;

}



.chat_people{ overflow:hidden; clear:both;}

.chat_list {

  border-bottom: 1px solid #c4c4c4;

  margin: 0;

  padding: 18px 16px 10px;

}

.inbox_chat { height: 550px; overflow-y: scroll;}



.active_chat{ background:#ebebeb;}



.incoming_msg_img {

      display: inline-block;

    width: 100%;

    font-size: 14px;

    padding-bottom: 5px;

    font-weight: 600;

}

.received_msg {

  display: inline-block;

  padding: 0 0 0 10px;

  vertical-align: top;

  width: 92%;

 }

 .received_withd_msg p {

  background: #EDF0F5 none repeat scroll 0 0;

  color: #4D4F5C;

  font-size: 13px;

  margin: 0;

  padding: 5px 10px 5px 12px;

  width: 100%;

    border-radius: 20px 20px 20px 3px;

}

.time_date {

  color: #747474;

  display: block;

  font-size: 12px;

  margin: 8px 0 0;

}

.received_withd_msg { width: 90%;}

.mesgs {

  float: left;

padding: 30px 0px 0 0px;

  width: 100%;

}



 .sent_msg p {

  background: #87BCBF none repeat scroll 0 0;

  border-radius: 20px 20px 3px 20px;

  font-size: 13px;

  margin: 0; color:#fff;

  padding: 5px 10px 5px 12px;

  width:100%;

}

.outgoing_msg{ overflow:hidden; margin:26px 0 26px;}

.sent_msg {

  float: right;

  width: 90%;

}

.input_msg_write input {

  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

  border: medium none;

  color: #87BCBF;

  font-size: 13px;

  min-height: 48px;

  width: 100%;

}

.input_msg_write input:focus,.input_msg_write input:hover{

    border: 0px;

    outline: none !important;

}

.type_msg {border-top:1px solid #f1e8e8;position: relative;}

.msg_send_btn {

  background:#87BCBF none repeat scroll 0 0;

  border: medium none;

  border-radius: 50%;

  color: #fff;

  cursor: pointer;

  font-size: 17px;

  height: 33px;

  position: absolute;

  right: 0;

  top: 11px;

  width: 33px;

}
.msg_send_btn:focus{
  outline: none !important;
  border:0px; 
}
.messaging { padding: 0 0 50px 0;}

.msg_history {

  height: 450px;

  overflow-y: auto;

        padding-right: 10px;

}

.user_comment{

    padding: 20px;

    box-shadow: 0px 2px 7px rgba(197,197,197,.50);

}

.msg_history::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

	border-radius: 10px;

	background-color: #F5F5F5;

}



.msg_history::-webkit-scrollbar

{

	width: 5px;

	background-color: #87BCBF;

}



.msg_history::-webkit-scrollbar-thumb

{

	border-radius: 10px;

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

	background-color: #87BCBF;

}

.user_comment h3{

    font-size: 18px;

    color: #4D4F5C;

}

/* user detail end */



















@media (min-width:992px) and (max-width:1200px) {

	.media_grid .media-body {

    padding: 13px 20px 0;

    font-size: 14px;

	}

    .main_toggle{margin: 0px !important;}

}

@media (min-width:0px) and (max-width:768px) {

	.dropdown.open .dropdown-menu{

		right: 0 !important;

		left: auto !important;

	}

	fieldset{min-inline-size: auto !important;}

	.dropdown.open .dropdown-menu li a{text-align: left;}

	legend{font-size: 21px !important;}

	.all_users_list .sm-pb-0{padding-bottom: 0px !important;}

.sm-pb-0{padding-bottom: 0px !important;}

.all_users_list .sm-pt-0{padding-top: 0px !important;}

.sm-pt-0{padding-top: 0px !important;}

}

@media (min-width:576px) and (max-width:992px) {

	.media_grid .media-body {

    padding: 13px 20px 0;

    font-size: 14px;

	}

/*

	.user-grid {

    grid-template-columns: repeat(auto-fill, minmax(29rem,1fr));

	}

*/

}

@media (min-width: 320px) and (max-width: 489px){
.global_toggle strong{width: 100%;float: left;margin-bottom: 10px;}
    .global_toggle .main_toggle{margin-left: 0px !important;}
#page-wrapper {

    margin-top: 100px;

}	

legend{font-size: 17px !important;}	

}

/* zohaib css end */

.user_setting_main li.drop_list:hover a,.user_setting_main li.drop_list:active a,.user_setting_main li.drop_list:focus a{

	background: transparent !important;

}

.user_setting_main li.drop_list a{

	float: right;

}

.user_setting{

	position: absolute !important;

    right: 0;

    left: auto;

}

.user_setting li a{

    font-weight: normal !important;

    color: #7f7f7f;

}



/* login form css */

	.card-signin {

	height: auto !important;

  border: 0;

  border-radius: 1rem;

  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);

}



.card-signin .card-title {

  margin-bottom: 2rem;

  font-weight: 300;

  font-size: 1.5rem;

}



.card-signin .card-body {

  padding: 2rem;

}



.form-signin {

  width: 100%;

}



.form-signin .btn {

  font-size: 80%;

  border-radius: 5rem;

  letter-spacing: .1rem;

  font-weight: bold;

  padding: 1rem;

  transition: all 0.2s;

}



.form-label-group {

  position: relative;

  margin-bottom: 1rem;

}



.form-label-group input {

  height: auto;

  border-radius: 2rem;

	    padding: 1rem !important;

    transition: all 0.2s;

}



.form-label-group>input,

.form-label-group>label {

  padding: var(--input-padding-y) var(--input-padding-x);

}



.form-label-group>label {

  position: absolute;

  top: 0;

  left: 0;

  display: block;

  width: 100%;

  margin-bottom: 0;

  /* Override default `<label>` margin */

  line-height: 1.5;

  color: #495057;

  border: 1px solid transparent;

  border-radius: .25rem;

  transition: all .1s ease-in-out;

}

.btn-google {

  color: white;

  background-color: #ea4335;

}



.btn-facebook {

  color: white;

  background-color: #3b5998;

}



/* Fallback for Edge

-------------------------------------------------- */



@supports (-ms-ime-align: auto) {

  .form-label-group>label {

    display: none;

  }

  .form-label-group input::-ms-input-placeholder {

    color: #777;

  }

}



/* Fallback for IE

-------------------------------------------------- */



@media all and (-ms-high-contrast: none),

(-ms-high-contrast: active) {

  .form-label-group>label {

    display: none;

  }

  .form-label-group input:-ms-input-placeholder {

    color: #777;

  }

}

/* login form css */

.table#admin_table thead th,.table#admin_table td,.table#admin_table td,.table#admin_table tr{

	    background: transparent !important;

    border: 0px !important;

}

table#admin_table thead.admin_table_head th{border-bottom: 1px solid #dcdcdc !important;}

.user_top_search{

	width: 100%;

	border: 0px;

	border-bottom: 1px solid gray;

	font-size: 25px;

}

.user_top_search:focus,.user_top_search:active{

	outline: none !important;

}

.total_download{

	padding: 5px 0px;

	    font-size: 16px;

}

.total_download.h4{font-size: 18px !important;}

.global_toggle label {

    position: relative;

    display: inline-block;

    text-align: center;

}



.global_toggle .btn:hover {

    cursor: pointer !important;

}



.global_toggle .btn {

    

    font-size: 12px;

    font-weight: bold;

    height: auto;

    width: 100px;

    text-align: center;

    padding: 3px;

}

.global_toggle .btn-s1k {

    background-color: white ;

    min-width: 100px;

    border-radius: 20px;

}





.global_toggle input[type="radio"] {

     position: absolute;

  visibility: hidden;

}

.global_toggle input[type="radio"] + div {

    position: relative;

}

.global_toggle input[type="radio"]:checked + div {

  background-color: #888 !important;

}

.global_toggle input[type="radio"]:checked + div>span {

  color: white;

}

.global_toggle input[type="radio"] + div>span {

position: relative;

}

.global_toggle{

    width: 100%;

    height: auto;

}

.global_toggle span.main_toggle{

        border: 2px solid #888;

    border-radius: 50px;

    padding: 0px 0px 4px 0px;

    margin-left: 50px;

}

.date_pick{

    border: none !important;

    background: none !important;

    padding: 0px !important;

    height: auto !important;

    cursor: pointer;

}

.date_pick:focus{

    outline: none !important;

    border: 0px !important;

    box-shadow:none !important;

}

#box1{position: relative;}

.loading {

     width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    left: 0;

    background: rgb(0, 0, 255,.5);

    z-index: 9999;

}

.loading:after {

  content: "";

  width: 50px;

  height: 50px;

  position: absolute;

  top: -30px;

  right: 0;

  left: 0;

  bottom: 0;

  margin: auto;

  border: 6px solid #f2f2f2;

  border-top: 6px dotted #f2f2f2;

  border-bottom: 6px dotted #f2f2f2;

  border-radius: 50%;

  animation: loading 2s infinite;

}

.loading:before {

  font-family: 'Lobster', cursive;

  font-size: 20px;

  letter-spacing: 1px;

  color: white;

  content: "Loading...";

  position: absolute;

  top: 57%;

  text-align: center;

  right: 0;

  left: 0;

  margin: auto;

}



@keyframes loading {

  0% {

    transform: rotate(0);

  }

  50% {

    transform: rotate(360deg);

  }

}s

#AliRanjbar {

  position: absolute;

  bottom: 20px;

  left: 20px;

  font-size: 13px;

  color: #444;

  font-family: 'Acme', sans-serif;

  z-index: 99;

} 

.mng_modal_img{

    width: 25px;

    cursor: pointer;

}

.setting_history{

        height: 350px;

}

.admin_setting_toggle{

    width: 100%;

    height: auto;

    float: left;

    background: #fff;

    border-radius: 5px;

    box-shadow: 0px 4px 10px rgba(197,197,197,0.85);

    margin-bottom: 20px;

}

.admin_setting_toggle .form-group.row:first-child{

    margin: 0;

    border-bottom: 1px solid #f1f1f1;

    padding: 10px 15px 10px 0px;

}

.admin_setting_toggle .form-group.row{

    margin: 0;

    padding: 10px 15px 10px 0px;

    border-bottom: 1px solid #f1f1f1;

}

.search_user{

	    background: none !important;

    border: 0px;

    padding: 0px !important;

}

.search_user:focus,.search_user:active{

	outline:none !important;

	border:0px !important;

}

.user_timeline_scroll{

	max-height: 510px;

	overflow-y: auto;

}

.user_timeline_scroll::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

	border-radius: 10px;

	background-color: #F5F5F5;

}

.user_timeline_scroll::-webkit-scrollbar

{

	width: 5px;

	background-color: #87BCBF;

}



.user_timeline_scroll::-webkit-scrollbar-thumb

{

	border-radius: 10px;

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

	background-color: #87BCBF;

}



.close {display: none;}

/* new toggle */

.btn.active.toggle-off{

        background-color: #d1d1d1;

}

.btn.btn-primary.toggle-on{

        color: #fff;

background-color: #87bcbf !important;

border-color: #87bcbf !important;

}

.toggle{

        width: 80px !important;

height: 30px !important;

border-radius: 50px !important;

    border: 0px !important;

}

.toggle.off .toggle-group .toggle-handle{

    content: '';

top: 3px;

left: 16px;

width: 26px;

height: 26px;

background: #fff;

border-radius: 90px;

transition: 0.3s;

}

.toggle .toggle-group .toggle-handle{

    content: '';

top: 3px;

right: 16px;

width: 26px;

height: 26px;

background: #fff;

border-radius: 90px;

transition: 0.3s;

}

.example .btn-toggle {

  top: 50%;

  transform: translateY(-50%);

}

.btn-toggle {

  margin: 0 4rem;

  padding: 0;

  position: relative;

  border: none;

  height: 1.5rem;

  width: 3rem;

  border-radius: 1.5rem;

  color: #6b7381;

  background: #d1d1d1;

}

.btn-toggle:focus,

.btn-toggle.focus,

.btn-toggle:focus.active,

.btn-toggle.focus.active {

  outline: none !important;

    box-shadow: none !important;

}



.btn-toggle > .handle {

  position: absolute;

  top: 0.1875rem;

  left: 0.1875rem;

  width: 1.125rem;

  height: 1.125rem;

  border-radius: 1.125rem;

  background: #fff;

  transition: left 0.25s;

}

.btn-toggle.active {

  transition: background-color 0.25s;

}

.btn-toggle.active > .handle {

  left: 1.6875rem;

  transition: left 0.25s;

}

.btn-toggle.active:before {

  opacity: 0.5;

}

.btn-toggle.active:after {

  opacity: 1;

}

.btn-toggle.btn-sm:before,

.btn-toggle.btn-sm:after {

  line-height: -0.5rem;

  color: #fff;

  letter-spacing: 0.75px;

  left: 0.4125rem;

  width: 2.325rem;

}

.btn-toggle.btn-sm:before {

  text-align: right;

}

.btn-toggle.btn-sm:after {

  text-align: left;

  opacity: 0;

}

.btn-toggle.btn-sm.active:before {

  opacity: 0;

}

.btn-toggle.btn-sm.active:after {

  opacity: 1;

}

.btn-toggle.btn-xs:before,

.btn-toggle.btn-xs:after {

  display: none;

}

.btn-toggle:before,

.btn-toggle:after {

  color: #6b7381;

}

.btn-toggle.active {

  background-color: #87bcbf;

}

.btn-toggle.btn-lg {

 margin: 0;

    padding: 0;

    position: relative;

    border: none;

    height: 2rem;

    width: 4.5rem;

    border-radius: 2.5rem;

}

.btn-toggle.btn-lg:focus,

.btn-toggle.btn-lg.focus,

.btn-toggle.btn-lg:focus.active,

.btn-toggle.btn-lg.focus.active {

  outline: none;

}



.btn-toggle.btn-lg > .handle {

     position: absolute;

    top: 0.3125rem;

    left: 0.3125rem;

    width: 1.4rem;

    height: 1.4rem;

    border-radius: 1.875rem;

    background: #fff;

    transition: left 0.25s;

}

.btn-toggle.btn-lg.active {

  transition: background-color 0.25s;

}

.btn-toggle.btn-lg.active > .handle {

  left: 2.8125rem;

  transition: left 0.25s;

}

/* new toggle end */

.admin_timeline_scroll{
  height: 210px;
  overflow-y: auto;
}
.admin_timeline_scroll::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}
.admin_timeline_scroll::-webkit-scrollbar
{
  width: 5px;
  background-color: #87BCBF;
}

.admin_timeline_scroll::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #87BCBF;
}

/*Register*/
.team_register .card{
    height: auto !important;
}
.team_register_modal .modal-content{
    background: none !important;
}
.team_register_modal .close{
        background: #17a2b8;
    color: #fff;
    opacity: 1;
    border-radius: 50px;
    padding: 3px 10px 10px 10px;
    border: 3px solid #fff;
    position: absolute;
    right: 15px;
    top: -5px;
    z-index: 9;
}

.input-container {
       padding: 5px 10px;
    margin: 0 !important;
    height: 40px;
    width: 100%;
    line-height: 25px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    
    background-color: #fff;
    border: 1px solid #adadad;
    -webkit-border-radius: 5px;
    
    border-radius: 5px;
    -webkit-box-shadow: 0 0 4px rgba(158,158,158,0.75), inset 0 0 6px #b3b3b3;
    -moz-box-shadow: 0 0 4px rgba(158,158,158,0.75), inset 0 0 6px #b3b3b3;
    box-shadow: 0 0 4px rgba(158,158,158,0.75), inset 0 0 6px #b3b3b3;

}

.file-name {
    font: 12px/30px arial;
    color: #666;
    overflow: hidden
}

.input-button {
    border: 0 !important;
    border-left: 1px solid #ddd;
    padding: 0 10px;
    / background-color: #111 !important; /
    color: #17a2b8 !important;
    border-radius: 0 5px 5px 0;
    font: bold 12px arial;
    height: 100% !important;
    width: 80px !important;
    position: absolute !important;
    right: 0;
    top: 0;
    text-shadow: 1px 1px 0px #ffffff;
    background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f8f9), color-stop(50%,#e5ebee), color-stop(51%,#d7dee3), color-stop(100%,#f5f7f9));
    background: -webkit-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%) !important;
    background: -o-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%);
    background: -ms-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%);
    background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ) !important;

}

.input-container:hover .input-button {
    
    color: #777 !important;
    background: #fffcfc !important;
background: -moz-linear-gradient(top,  #fffcfc 0%, #eaeff2 50%, #dee5ea 51%, #eeeeee 100%) !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffcfc), color-stop(50%,#eaeff2), color-stop(51%,#dee5ea), color-stop(100%,#eeeeee)) !important;
background: -webkit-linear-gradient(top,  #fffcfc 0%,#eaeff2 50%,#dee5ea 51%,#eeeeee 100%) !important;
background: -o-linear-gradient(top,  #fffcfc 0%,#eaeff2 50%,#dee5ea 51%,#eeeeee 100%) !important;
background: -ms-linear-gradient(top,  #fffcfc 0%,#eaeff2 50%,#dee5ea 51%,#eeeeee 100%) !important;
background: linear-gradient(to bottom,  #fffcfc 0%,#eaeff2 50%,#dee5ea 51%,#eeeeee 100%) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffcfc', endColorstr='#eeeeee',GradientType=0 ) !important;

}
.customFile {
       cursor: pointer;
    height: 40px !important;
    position: absolute !important;
    opacity: 0;
    top: 0;
    left: 0;
    filter: alpha(opacity=0);
}
@media  screen and  (max-height: 465px)  {
   @media  (min-width: 768px) and  (max-width: 1400px)  {
       .team_register_modal .modal-dialog.modal-lg {
           max-width: 1000px !important;
       }
       .modal_box{
           max-width: 33.333333% !important;
       }.modal_box_6{
           max-width: 50% !important;
       }.modal_box_12{
           max-width: 100% !important;
               flex: 0 0 100% !important;
       }
   }
}
/*Register*/