* {
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
      -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
      outline: none !important;
    }
  :root{
  --main-bg-color: #11171f;
  --border-color-color: #19232f1c;
  --smallFonts: 12px;
  }
  html{
  background-color: silver;
  }
  *{font-family: Roboto,Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial;letter-spacing: 0.3;}
  pa {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
  -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
  outline: none !important;
  }
  body{
  margin: 0px;
  background: #dadde1;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  min-height: 100vh;
  overflow-y: scroll;
  }

  p{
  margin: 0px 5px;
  font-size: 14px;
  }
  #navbar{padding: 6px;width: 100%;display: flex;justify-content: space-between;align-items: center;/* background: linear-gradient(116deg, #f6f6f9 48%, #f3f3f3 47%); *//* max-width: 800px; *//* margin: 0 auto; */}
  #navbar .brand{display: flex;/* justify-content: center; */align-items: center;width: 100%;}
  #navbar .brand .logo{width: 45px;height: 45px;min-width: 45px;font-size: 20px;border-radius: 50%;margin-right: 5px;display: flex;justify-content: center;align-items: center;color: #fff;transition: 0.2s;}
  #navbar .brand span{font-weight: 600;font-size: 17px;/* letter-spacing: -1px; */color: #fff;}
#navbar .brand input{
  width: 100%;
  height: 40px;
  border-radius: 6px;
  border: 1px solid #4b4e4f;
  padding: 10px;
  font-weight: 600;
  background: transparent;
  color: #fff;
}
#navbar .brand input:focus,
#navbar .brand input:active{
   border: 1px solid #5e6162;
}
  #navbar .nav-menu{float: right;display: flex;}
  #navbar .nav-menu span{width: 45px;height: 45px;min-width: 45px;font-size: 23px;transition:0.2s;text-align: center;border-radius: 50%;display: flex;margin-left: 6px;background-position: center;background-size: cover;background-repeat: no-repeat;align-items: center;justify-content: center;color: #fff;}
  #navbar .nav-menu span:active, #navbar .brand .logo:active,#navbar .nav-menu span:hover, #navbar .brand .logo:hover{
    background-color: #292c2d;
  }
  .topNav{height: 55px;width: 100%;top: 0;/* left: 0px; */position: fixed;border-radius: 0;box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.04);background: #323637;z-index: 9;transition: 0.5s;padding: 0;display: flex;justify-content: space-between;align-items: center;padding: 0px;max-width: 800px;margin: 0 auto;overflow: hidden;}
  .container{
      padding-top: 55px;
      /* max-width: 800px; */
      margin: 0 auto;
      /* margin-bottom: 200px; */
      padding-bottom: 152px;
  }

  .ld-ring {
      width: 1em;
      height: 1em;
      position: relative;
      color: inherit;
      display: inline-block;
    /* 
      &:before
        content: "â—Ž"
        display: block
        visibility: hidden
      */
    }
    .ld-ring:after{
      position: absolute;
      margin: auto;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      content: " ";
      display: inline-block;
      background: center center no-repeat;
      background-size: cover;
    }

    .ld-ring:after {
      border-radius: 50%;
      border-style: solid;
      border-width: 3px;
      /* border-width: 0.15em; */
      -webkit-background-clip: padding-box;
      border-color: currentColor currentColor currentColor transparent;
      box-sizing: border-box;
    }


    @keyframes ld-spin {
      0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      }
      50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @-webkit-keyframes ld-spin {
      0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      }
      50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    .ld.ld-spin {
      -webkit-animation: ld-spin 1s infinite;
      animation: ld-spin 1s infinite;
    }

    .btn .ld-spin, button .ld-spin{
      position: relative;
      top: 2px;
    }  
  .card{
      background: #fffffff0;
      transition: 0.5s cubic-bezier(0.4, 1.03, 0.45, 0.94);
      position: relative;
      border-radius: 6px;
      overflow: hidden;
      margin: 10px;
      box-shadow: 0px 1px 2px 0px rgb(187 187 187);
  }
  .card-bg{
      /* background: url(../images/blue-school-icons.jpg); */
      /* position: absolute; */
      /* height: 100%; */
      /* width: 100%; */
      /* z-index: -1; */
      /* background-size: contain; */
  }
  .card .card-h{display: flex;justify-content: space-between;align-items: center;position: relative;padding: 0px 0px 0px 10px;border-bottom: 1px solid #dadde1;background: #f3f4f5;}
  .card .card-h .card-l{display: flex;align-items: center;cursor: pointer;}
  .card .card-h .card-l a{

  text-decoration: none;

  color: #000;
  }
  .card .card-h .card-l a:active{
  color: #2196F3!important
  }
  .card .card-h .card-l .card-icon{width: 42px;min-width: 42px;height: 42px;background: #fdfdfd;margin: 7px 7px 7px 0px;color: #323637;background-size: cover;background-repeat: no-repeat;background-position: center;display: flex;justify-content: center;align-items: center;transition: 0.1s;border-radius: 50px;cursor: pointer;/* filter: grayscale(1); */}
  .card .card-h .card-l .card-icon:active,.card .card-h .card-l .card-icon:hover{
    opacity: 0.7;
  }
  .card .card-h .card-l span{font-weight: 600;display:block;line-height: 16px;font-size: 13px;color: #323637;cursor: pointer;}
  .card .card-h .card-l span:nth-child(2){font-size: 13px;color: #6c6c6c;font-weight: 400;}
  .card .card-h .card-r{

  }
  .card .card-h .card-r .card-icon{color: #323637;height: 42px;width: 42px;min-width: 30px;/* background: #dadde1; */display: flex;justify-content: center;align-items: center;border-radius: 50px;transition: 0.2s;cursor: pointer;}
  .card .card-h .card-r .card-icon:active,.card .card-h .card-r .card-icon:hover{

       background: #dadde1; 

  }
  .card .card-b{

  padding: 10px 5px;
  }
  .card .statuscont{

  float: right;
  }
  .card .status{
    padding: 3px 5px;
    font-size: 11px;
    background: #2196f3;
    min-width: 50px;
    color: #fff;
    font-weight: 300;
    text-align: center;
    display: block;
    margin-left: 10px;
    border-radius: 3px;
  }
  .card .card-b .date{

  /* font-style: italic; */

  font-size: 12px;

  margin-top: 10px;

  position: relative;
  }
  .card .card-b p{font-size: 14px;color: #525252;}
  .card .card-b .heading{
    font-weight: 600;
    margin-bottom: 10px;
    color: #232323;
  }
  .card-b p .readmore{
    /* display: block; */
    color: #323637;
    font-weight: 600;
  }
  .card .card-f{

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-top: 1px solid #dadde1;
  }  
  .card-f{

  }
  .card-f .card-icon{padding: 13px;width: 100%;position: relative;text-align: center;display: flex;align-items: center;margin-right: 8px;cursor: pointer;transition: 0.2s;}

  .card-f .card-icon:nth-child(3){
      height: 27px;
      margin-right: 0px;
  }

  .card-f .card-icon:nth-child(2){

  }

  .card-f .card-icon:nth-child(1){

  }
  .card-f .card-icon:nth-child(1),.card-f .card-icon:nth-child(2){align-items: center;width: 27px;height: 27px;min-width: 27px;height: 27px;/* border-radius: 50px; *//* background: #f6f6f9; */}
  .card-f .card-icon .badge{/* position: absolute; *//* top: -7px; */left: 0px;font-size: 12px!important;background: #dadde1;min-width: 20px;padding: 1px;padding: 3px 5px;display: flex;justify-content: center;align-items: center;font-size: 12px;color: #313131;/* font-weight: 600; *//* border-radius: 50px; */background: transparent;}
  .card-f .card-icon i{color: #8f9195;font-size: 17px;}
.card-f .card-icon i.active{
  color:#323637;
}
  .card-f .card-icon:nth-child(3) i{margin-right: 5px;}
  .card-f .card-icon:nth-child(3) span{
      /*  */
      font-size: 13px;
  }
  .card-f .card-icon:active,.card-f .card-icon:hover{
      background: rgb(227 227 227);
  }
  .title{padding: 10px 5px 7px 10px;display: flex;justify-content: space-between;align-items: center;}
  .title .title-l{

  }
  .title .title-l span{
      font-size: 13px;
      text-transform: uppercase;
      font-weight: 500;
      color: #5a5a5a;
      margin-right: 0px;
      transition: 0.2s cubic-bezier(0.42, 0.96, 0.32, 0.89);
      padding: 10px 5px;
      border-bottom: 4px solid #bec0c4;
      cursor: pointer;
  }

  .title .title-l .active{font-weight: 700;border-bottom: 4px solid #000;color: #000;}
  .title .title-r{

  }
  .title .title-r .icon{width: 40px;height: 40px;/* background: #fff; */justify-content: center;align-items: center;display: flex;border-radius: 50px;border: 1px solid #ffffff00;cursor: pointer;font-size: 23px;}
  .title .title-r .icon:active,.title .title-r .icon:hover{
      background: #a1a4a8;
  }
  .sidebar{transform: inherit;position: fixed;width: 290px;height: 100vh;background: #323637;top: 0;z-index: 999;transform: translateX(110%);right: 0;transition: 0.5s cubic-bezier(0.31, 0.78, 0.37, 0.93);box-shadow: -3px 0px 11px #0000006b;}
  .sidebar .sidebar-body{

  /* padding: 10px; */
  }
  .sidebar .sidebar-footer{/* padding: 10px; */display: flex;align-items: center;justify-content: space-between;position: absolute;width: 100%;bottom: 0px;padding-bottom: 10px;border-top: 1px solid #505050;padding-top: 10px;}
  .sidebar .sidebar-body .close-btn{/* position: absolute; *//* top: 54px; */margin: 10px;width: 45px;min-width: 45px;height: 45px;display: flex;justify-content: center;align-items: center;border-radius: 50px;/* font-size: 50px; *//* border: 1px solid #dadde1; *//* background: #dadde1; */transition: 0.2s;color: #fff;}
  .sidebar .sidebar-body .close-btn:hover,
  .sidebar .sidebar-body .close-btn:active{
    background-color: #404445;
    color: white;
  }
.sidebar .sidebar-body .close-btn i{
     font-size: 31px;
   }
.sidebar .sidebar-body .profile-d{

  text-align: center;

  margin-top: 6px;
  }
  .sidebar .sidebar-body .profile-d .pp{background: #dadde1;background-repeat: no-repeat;background-size: cover;background-position: center;width: 100px;height: 100px;justify-content: center;align-items: center;display: flex;font-size: 25px;margin: 10px auto;border-radius: 50%;}
  .sidebar .sidebar-body .profile-d .details{

  /* border-bottom: 1px solid #dadde1; */
  }
  .sidebar .sidebar-body .profile-d .menu{/* border-top: 1px solid #c4c7cc; */margin-top: 0px;padding: 15px;}
  .sidebar .sidebar-body .profile-d .menu a{text-decoration: none;text-transform: uppercase;font-size: 14px;color: #b3b3b3;font-weight: 500;display: block;border: 1px solid #4b4e4f;padding: 14px;position: relative;margin-bottom: 10px;border-radius: 59px;transition: 0.2s;}
  .sidebar .sidebar-body .profile-d .menu a:active,
  .sidebar .sidebar-body .profile-d .menu a:hover{
    background: #404445;
  }
  .sidebar .sidebar-body .profile-d .menu .active{/* background: #323637; */font-weight: 800;color: #ffffff;/* border: 1px solid #7c7c7c; */}
  .sidebar .sidebar-body .profile-d .details span{display: block;line-height: 18px;font-size: 15px;font-weight: 600;color: #323637;}
  .sidebar .sidebar-body .profile-d .details span:nth-child(3){

  font-size: 11px;
  }
  .sidebar .sidebar-body .profile-d .details span:nth-child(2){
      font-size: 14px;
      padding: 0px 15px;
      color: #323637;
      font-weight: 400;
  }
  .sidebar-footer{

  }
  .sidebar-footer div{font-size: 12px;margin-left: 10px;color: #a5a5a5;}
  .sidebar-footer div:nth-last-child(1){
  justify-content: center;
  align-items: center;
  display: flex;
  margin-right: 10px;
  padding: 5px 7px 5px 20px;
  border-radius: 50px;
  border: 1px solid #505050;
  transition: 0.2s;
  color: #F44336;
  }
  .sidebar-footer div:nth-last-child(1):active{
    opacity: 0.6;
  }
  .sidebar-footer div:nth-child(2) i{

  }
  .sidebar-footer div:nth-child(2) span{
  
  margin-right: 10px;
  }

  button:active, .btn:active{
    opacity: 0.7;
  }
  .banner{background: #323637;padding: 0px 12px 12px 12px;/* box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.14); */border-bottom: 1px solid #bec1c4;position: relative;}
  .banner .writing-vector {
      position: absolute;
      right: 0px;
      bottom: 0px;
      opacity: 0.15;
      height: 65px;
      width: 150px;
  }
  .banner .header .lft{
  display: flex;
    align-items: center;
  }
  .banner .header .lft svg{
          width: 69px;
          /* fill: #fff; */
          padding: 8px 0px 0px 0px;
  }
  .banner .header .lft span{
      
  }
  .banner .details p:last-child {
      font-size: 14px;
      color: #b5b5b5;
  }
  .banner .details p {
      font-size: 20px;
      line-height: 25px;
      color: #fff;
  }
  .form{

  max-width: 800px;

  margin: 0 auto;
  }

  .textbox{

  width: 100%;

  margin-bottom: 10px;

  height: 40px;

  padding: 10px 10px;

  border-radius: 0;

  

  border: 0;

  transition: 0.2s;

  border-bottom: 2px solid #a3a3a3;
  }
  .textbox:focus{
      border-bottom: 2px solid #323637;
  }
  #textarea{
      min-height: 40px;
  }
  .form label{display: inline-flex;font-size: 12px;font-weight: 600;width: 100%;justify-content: space-between;align-items: center;color: #323637;}
  .form label span{

  float: right;

  
  }
  .tabs-container {
      display: flex;
      margin-bottom: 25px;
  }
  .tabs {
      text-transform: uppercase;
      font-size: 15px;
      padding: 10px 10px 10px 10px;
      color: #9e9e9e;
      font-weight: 600;
      transition: 0.2s;
      border-bottom: 4px solid #a2a4a7;
      text-align: center;
  }
  .tabs-container .active {
      border-bottom: 4px solid #000000;
      font-weight: 800;
      color: #323637;
  }
  .form .btn{border-radius: 50px;background-color: #323637;height: 48px;}
  .btn span{
      
  }
  .btn{display: block;width: 100%;height: 45px;font-weight: 600;text-decoration: none;border: 0;font-size: 14px;background-color: #323637;color: #fff;text-align: center;line-height: 45px;border-radius: 53px;}
  .banner .header{display: flex;justify-content: space-between;padding: 5px 0px;position: relative;z-index: 1;}
  .banner .header span{
  
  font-weight: 700;
  color: #fff;
  background: #323637;
  text-transform: uppercase;
  padding: 4px 15px;
  letter-spacing: -1px;
  border-radius: 50px;
  transition: 0.2;
  font-size: 16px;
  }
  .banner .header span:active{
    opacity: 0.7;
  }
  .banner .header .icons{

  margin: 6px 0px;

  display: flex;
  }
  .banner .header .icons i{position: relative;width: 45px;transition: 0.2s;height: 45px;/* background: #dadde1; */font-size: 26px;display: flex;align-items: center;justify-content: center;border-radius: 50px;background-size: cover;margin-left: 8px;background-position: center;background-repeat: no-repeat;color: #ffffff;cursor: pointer;}
  .banner .header .icons i .badge{
    position: absolute;
    top: -4px;
    left: 27px;
    font-size: 13px;
    background-color: #368339;
    color: #fff;
    display: block;
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
  }
  .banner .details{margin: 10px 0px -2px 0px;}
  .banner .details span{/* display: block; */font-weight: 600;}
  .banner .searchbox{

  display: flex;

  align-items: center;

  width: 100%;

  background: #dadde1;

  border-radius: 50px;
  }
  .banner .searchbox button{border: 0;margin-right: 8px;height: 32px;border-radius: 50px;min-width: 114px;text-transform: uppercase;color: #fff;font-weight: 400;background: #323637;font-size: 11px;}
  .banner .searchbox i{

  padding: 14px;
  }

  .banner .searchbox input{

  width: 100%;

  border: 0;

  background: transparent;

  

  font-weight: 500;
  }
  .toast-container{height: 100vh;width: 100%;position: fixed;background: #00000069;z-index: 99;top: 0;display: flex;justify-content: center;align-items: center;display: none;margin: 0 auto;right: 0px;left: 0px;max-width: 800px;}
  .toast{width: 100%;background: white;max-width: 500px;margin: 10px;transition: 0.5s cubic-bezier(0.32, 1.16, 0.26, 1.02);/* border-radius: 5px; */box-shadow: 0px 1px 11px 3px rgb(0 0 0 / 16%);border-radius: 6px;margin-top: -10vh;}
  .toast-h{height: 50px;padding: 6px 12px;display: flex;align-items: center;border-bottom: 1px solid #c7c8c8;}
  .toast-h i{width: 43px;height: 43px;opacity: 1;background: #eaeaea;transition: 0.2s;display: flex;align-items: center;justify-content: center;border-radius: 50%;margin-right: 10px;}
  .toast-h span{
  
  font-weight: 600;
  font-size: 16px;
  }
  .toast-d{

  }
  .toast-d p,.toast-d .details{margin: 0px;/* padding: 1px 10px 15px 10px; */text-align: center;font-weight: 300;font-size: 14px;}

  .toast-d .bg-image{width: 100%;height: 99px;background-size: cover;background-position: center;}
  .toast-d p b,.toast-d p a, .toast-d p i,.toast-d p span,.toast-d .details b{
      
  }
  .toast-d p{margin: 0px;padding: 1px 10px 15px 10px;text-align: center;font-weight: 300;}

  .toast-d p b,.toast-d p a, .toast-d p i,.toast-d p span{
      
  }
  .toast-d p .readmore{
    color: #2196f3;
  }
  .toast-btns{border-top: 1px solid #c7c8c8;padding: 20px;display: flex;}
  .toast-btns .btn:nth-child(1)
  {
  margin-right: 5px;
  background: #323637!important;
  color: #ffffff!important;
  }

  .toast-btns .btn{border-radius: 50px;margin-top: 0px;background: #d3d3d3!important;color: #323637!important;}
  .toast-h i:active{
      opacity: 0.7;
  }
  .toast-pp {
    text-align: center;
    padding-top: 0px!important;
    width: 110px;
    height: 110px;
    min-width: 85px;
    margin: 12px auto;
    background-color: #fff;
    display: flex;
    border-radius: 50%;
    margin-top: -55px;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #c7c8c8;
  }
  .toast-pp i{

  color: #323637;

  font-size: 30px!important;
  }
  .toast-d .details .kpis{display: flex;justify-content: center;/* background: #f3f4f5; */padding: 8px 5px 8px 5px;margin-top: 0px;border-top: 1px solid #dadde1;}
    .toast-d .details .kpis div {
      padding: 0px 10px;
      border-right: 1px solid #dadde1;
      width: 100%;
    }
    .toast-d .details .kpis div:nth-child(3) {

      border-right: 0;
    }
    .toast-d  .details .kpis div .num{

    font-size: 14px;

    display: block;

    font-weight: 600;

    

    padding: 5px 0px;

    text-align: center;

    align-items: center;

    border-radius: 50px;
    }
    .toast-d  .details .kpis div .text{

    text-transform: uppercase;

    font-weight: 400;

    color: #000000;

    

    font-size: 11px;

    /* border-right: 1px solid; */

    font-weight: 400;
    }
  .zoomfx{
      transform: scale(1.05);
  }
  .toast-icon{

  text-align: center;

  padding-top: 10px;
  }
  .toast-icon i{

  font-size: 70px;
  }
  .wrap-custom-file {
      position: relative;
      display: block;
      width: 100%;
      text-align: center;
      margin-bottom: 10px;
      margin: 10px 3px;
    }
    .wrap-custom-file input[type='file'] {
      position: absolute;
      top: 0;
      left: 0;
      width: 2px;
      height: 2px;
      overflow: hidden;
      opacity: 0;
    }
    .wrap-custom-file label {
      width: 100%;
      background: #dfe1e4;
      border: 1px solid #c1c1c1;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      height: 90px;
      border-radius: 3px;
    }

    .wrap-custom-file label span {
      font-size: 11px;
      padding: 0px 8px;
      color: #0c0c0c;
      position: absolute;
      
      margin-bottom: -26px;
    }
    .wrap-custom-file label .fa {
      position: absolute;
      bottom: 1rem;
      left: 50%;
      -webkit-transform: translatex(-50%);
      -moz-transform: translatex(-50%);
      -ms-transform: translatex(-50%);
      -o-transform: translatex(-50%);
      transform: translatex(-50%);
      font-size: 1.5rem;
      color: lightcoral;
      -webkit-transition: color 0.4s;
      -moz-transition: color 0.4s;
      -ms-transition: color 0.4s;
      -o-transition: color 0.4s;
      transition: color 0.4s;
    }

    .wrap-custom-file label:hover span,
    .wrap-custom-file label:hover .fa {
      color: #333;
    }
    .wrap-custom-file label.file-ok {
      background-size: cover;
      background-position: center;
      border: 1px solid #4CAF50;
      background-repeat: no-repeat;
    }
    .wrap-custom-file label.file-ok span {
    opacity: 0.7;
    display: inline-block;
    width: 60%;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    text-overflow: ellipsis;
    bottom: 0px;
    width: 100%;
    background: #323637;
    color: #ffffff;
    padding: 4px 0px;
    margin-bottom: 0;
    border-radius: 0px 0px 2px 2px;
    font-weight: 400;
    font-size: 12px;
    }
    .wrap-custom-file label.file-ok .fa {
      display: none;
    }
    .camico {
    margin-bottom: 20px;
    font-size: 18px;
    color: #222223;
    }

    .file-ok .camico {
    opacity: 0.7;
    width: 40px;
    display: flex;
    height: 40px;
    background: #fff;
    justify-content: center;
    border-radius: 50px;
    align-items: center;
    margin-bottom: 8px;
    }
    .attach_container{
      display: flex;
      justify-content: center;
      align-items: center;
      overflow-y: hidden;
      height: 0px;
      transition: 0.4s cubic-bezier(0.63, 0.1, 0.32, 0.97);
    }
    .pass_change_container {
      overflow-y: hidden;
      height: 0px;
      transition: 0.4s cubic-bezier(0.63, 0.1, 0.32, 0.97);
      padding: 0px;
      background: #dadde1;
      border-radius: 6px;
      margin-bottom: 20px;
      display: block;
      height: 130px;
      padding: 15px 15px;
      margin-top: 6px;
  }
  .pass_change_container label{
    margin-bottom: 5px;
  }
    .fasbtn{
      /* width: 40px; */
      /* height: 40px; */
      display: flex!important;
      font-size: 18px;
      justify-content: center;
      align-items: center;
      transition: 0.1s;
      border-radius: 50px;
      margin: 8px 0px;
      color: #323637;
    }
    .fasbtn:active{opacity:0.5}
    .menuu {
      display: none;
      background: #fff;
      position: absolute;
      right: 9px;
      top: 11px;
      box-shadow: 0 0 4px 2px rgb(0 0 0 / 9%);
      transition: 0.2s;
      /* border: 1px solid #dadde1; */
      z-index: 1;
      border-radius: 6px;
    }
    .menuu > ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .menuu > ul > li {
      padding: 14px 20px;
      text-decoration: none;
      font-size: 15px;
      cursor: pointer;
    }
    .menuu > ul > li a{
      text-decoration: none;
      width: 143px;
      display: block;
      text-align: center;
      font-weight: 600;
      color: #11171f;
      text-transform: none;
      font-size: 13px;
  }
  .menuu > ul > li a .ld-spin{
    position: relative;
    top: 2px;
  }
  .menuu > ul > li:last-child {
    border-bottom: unset;
  }

  .bordB{
      border-bottom: 1px solid #e5e6e8;
  }
  .menuu > ul > li:active,.menuu > ul > li:hover {
      background: #e3e3e3;
    }
  .clips-contain{

  width: 100%;

  display: flex;
  }
  .clips-contain .clip{background: #dadde1;width: 100%;border: 1px solid #dadde1;height: 90px;margin: 5px;background-size: cover;background-position: center;transition: 0.2s;}
  .clips-contain .clip:active{
  opacity: 0.7;
    }
  .text-danger{
      /* color: #f45e52!important; */
  }
  .text-primary{
      color: #2196F3!important;
  }
  .text-success{
      color: #71be74!important;
  }
  .text-warning{
      color: #a9a9a9;
  }
  .text-grey{
      color: #dadde1;
  }
  .text-dark{
      color: #313131;
  }
  .bg-danger{
      background: #F44336!important;
      color: #fff!important;
  }
  .bg-primary{
      /* background: #2196F3!important; */
      color: #fff!important;
  }
  .bg-success{
      background: #7daa2e!important;
      color: #fff!important;
  }
  .bg-warning{
      background: #f6f6f9;
  }
  .bg-grey{
      background: #dadde1;
  }
  .bg-gray {
    background: #a3a3a3!important;
    color: #fff!important;
  }
  .bg-transparent{
      background: transparent!important;
      color: #000!important;
  }
  .border-primary{
      border: 1px solid #2196f3!important;
  }
  .border-danger{
      border: 1px solid #f45e52!important;
  }
  .border-success{
      border: 1px solid #71be74!important;
  }
  .border-grey{
      border: 1px solid #dadde1!important;
  }

  #scripts{
    visibility: hidden;
  }
  .progressbar{

  height: 17px;

  width: 100%;

  background: #dadde1;

  margin-bottom: 9px;

  border-radius: 3px;
  }
  .progressbar div{

  width: 0%;

  background: #2196f3;

  display: block;

  height: 17px;

  border-radius: 3px;

  transition: 0.5s;
  }
  .banner .header .icons i:active,.banner .header .icons i:hover{
    opacity: 0.7;
    background-color: rgb(0 0 0 / 25%);
  }
  .profile-contain{padding: 55px 0px 10px 0px;position: relative;/* border-bottom: 1px solid #c1c1c1; */overflow: hidden;color: #fff;}
  .profile-contain .bg-image{
    background-image: url(../images/Mountains23.png);
    position: absolute;
    width: 100%;
    background-position: center;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .profile-contain .mask{position: absolute;height: 100%;width: 100%;background: rgb(0 0 0 / 60%);background: linear-gradient(90deg, rgb(0 0 0 / 80%) 15%, rgb(0 0 0 / 43%) 100%);}
  .profile-contain .p-body{

  display: flex;

  justify-content: space-between;

  align-items: center;

  min-height: 110px;

  padding: 0px 10px;

  z-index: 1;

  position: relative;
  }
  .profile-contain .p-body div{

  }
  .profile-contain .p-body .names{

  font-weight: 600;

  font-size: 18px;

  margin-right: 10px;

  

  padding: 10px 0px;

  line-height: 20px;
  }
  .profile-contain .p-body .names .headline{font-size: 14px;margin-top: 3px;opacity: 0.8;font-weight: 400;}
  .profile-contain .p-body .kpis{display: flex;background: rgb(0 0 0 / 26%);/* background: linear-gradient(129deg, #878b9242 40%, #bcc7d542 74%); */padding: 8px;border-radius: 6px;}
  .profile-contain .p-body .kpis div{

  text-align: center;

  margin: 0px 8px;
  }
  .profile-contain .p-body .kpis div span{display: block;font-size: 20px;font-weight: 600;}
  .profile-contain .p-body .kpis div span:nth-child(2){font-size: 11px;opacity: 0.8;font-weight: 400;}
  .profile-contain .p-footer{

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0px 10px;

  z-index: 1;

  position: relative;
  }
  .profile-contain .p-footer div{

  font-size: 13px;

  margin-right: 0px;

  text-transform: uppercase;
  }
  .profile-contain .p-footer div:nth-child(1) span{

  font-size: 12px;

  letter-spacing: 0px;

  opacity: 0.8;

  font-weight: 300;

  

  display: block;
  }
  .profile-contain .p-footer div:nth-child(1) span:nth-child(2){
  }

  .profile-contain .p-footer div:nth-child(2) a{width: 43px;border-radius: 50px;height: 43px;background: rgb(0 0 0 / 26%);color: #fff;display: inline-flex;font-size: 15px;justify-content: center;align-items: center;text-decoration: none;}
  .profile-contain .p-footer div:nth-child(2) span i{

  }
  .profile-contain .p-footer div:nth-child(2) a:active{
    opacity: 0.7;
  }
  .feedback{text-align: center;padding: 30px 0px;width: 100%;padding-bottom: 0px;}
  .feedback .icon{

  font-size: 45px;

  color: #414243;

  margin-bottom: 5px;
  }
  .feedback .icon i{

  }
  .feedback p {font-weight: 600;color: #414243;margin: 12px 30px;font-size: 13px;}
  .user-banner{
    padding-top: 55px;
    height: 147px;
    background: #dadde1;
    background-size: cover;
    background-position: center;
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  .user-banner button{position: absolute;right: 0;bottom: 0px;margin: 10px;border: 0;padding: 10px 10px;background: #323637;border-radius: 5px;}
  .user-banner .mask{background: #000000;opacity: 0.3;height: 100%;width: 100%;position: absolute;}
  .user-banner .bg-image{

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: center;
  }
  .feedback .icon .ld-spin{font-size: 25px;margin-bottom: 0px;}
  .loadmore-cont{text-align: center;/* margin: 5px; */margin-top: 10px;}
  .loadmore-cont .btn i{
      margin-right: 10px;
      color: #464646;
  }
  .loadmore-cont .btn {
    background-color: transparent;
    color: #323637;
    border-radius: 50px;
    border: 1px solid #b3b3b3;
    margin-bottom: 10px;
    cursor: pointer;
  }
.loadmore-cont .btn span{
  color: #5c5c5c;
}
  .loadmore-cont span{
  font-weight: 400;
  font-size: 14px;
  color: #787878;
  }
  #load-contain #ld-spin{
    font-size: 30px;
    color: #323637;
    padding: 10px;
  }
  .post_comments{

  /* background: #fff; */
  }
  .comment-card{/* margin: 0px 10px 15px 10px; */border-bottom: 1px solid #a9a9a9;padding: 10px 10px 0px 10px;}
  .comment-card .c-card{

  display: flex;

  justify-content: space-between;

  position: relative;
  }
  .comment-card div{

  display: flex;

  justify-content: space-between;

  align-items: center;
  }
  .comment-card div .c-image{width: 45px;height: 45px;border-radius: 50px;background: #ffffff;justify-content: center;align-items: center;display: flex;background-size: cover;background-position: center;background-repeat: no-repeat;color: #323637;}
  .comment-card .c-details{
  transition: 0.2s;
  display: block;
  margin-left: 10px;
  }
  .comment-card .c-details:active {
    opacity: 0.5;
  }

  .comment-card .c-details span{color: #323637;display: block;line-height: 15px;font-size: 14px;font-weight: 600;}
  .comment-card .c-details span:nth-child(2){font-weight: 500;opacity: 0.7;font-size: 13px;}
  .comment-card .c-menu{opacity: 0.7;width: 38px;height: 38px;display: block;text-align: center;border-radius: 50px;display: flex;align-items: center;transition: 0.2s;color: #1d2020;justify-content: center;}
  .comment-card .c-menu:active,.comment-card .c-menu:hover{
    background: #a7a7a7;
    }
  .comment-card .c-comment{margin-left: 22px;/* border-left: 1px dotted #a9a9a9; *//* border-bottom: 1px dotted #a9a9a9; */padding: 5px 0px 5px 5px;margin-left: 55px;}
  .comment-card p{/* background: #f4f4f7; */display: block;min-width: 220px;padding: 0px;border-radius: 6px;position: relative;margin-left: 0px;}
  .comment-card p #par{
    
  }
  .c-comment .date{
    font-weight: 300;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    /* font-style: italic; */
    font-size: 11px;
    margin-top: 0px;
    text-transform: uppercase;
  }
  .c-comment .date span i {display: flex;width: 30px;height: 30px;color: #979797;font-size: 16px;border-radius: 50px;/* background: #dadde1; */justify-content: center;transition: 0.2s;align-items: center;}
  .c-comment .date span i.active{
    color: #323637;
  }  
  .c-comment .date b{
    
    font-weight: 400;
  }
  .c-comment .date span i:active {
    background: #dadde1;
    }
  .c-comment .date span:nth-child(2){
    /* position: absolute; */
    right: 0;
    bottom: 0px;
    /* margin: 5px 4px; */
    /* display: flex; */
    /* justify-content: space-between; */
    align-items: center;
    /* width: 100%; */
  }
  .c-comment .date span:nth-child(1){font-size: inherit;font-weight: inherit;margin-left: 2px;}
  .comment-container{position: fixed;bottom: 0;width: 100%;max-width: 800px;margin: 0 auto;}
  .comment-box{display: flex;justify-content: space-between;background: #323637;/* border-top: 1px solid #c1c1c1; */}
  .comment-box textarea{margin: 10px 0px;width: 100%;border: 1px solid #585858;border-radius: 6px;padding: 10px 10px;background: transparent;color: #fff;/* height: 100%; */}
  .comment-box .icons{

  /* position: absolute; */

  right: 0;

  display: flex;

  margin: 10px;
  }
  .comment-box .icons i{display: flex;font-size: 22px;width: 50px;height: 50px;background: #323637;color: #fff;align-items: center;justify-content: center;transition: 0.2s;border-radius: 71px;}
  .comment-box .icons i:active{
    opacity: 0.7;
  }
  .comment-box  > div{

  width: 100%;

  text-align: center;

  position: relative;
  }
  .comment-box  > div p{

  position: absolute;

  top: -20px;

  width: 100%;

  left: -45px;

  

  font-weight: 600;

  opacity: 0.9;

  font-size: 12px;
  }
  .comment-box  > div p span{
    
    }
  .comment-box > div > div{display: flex;width: 100%;position: relative;justify-content: space-between;}
  .uuimage{margin: 10px;width: 45px;min-width: 45px;height: 45px;display: flex!important;border-radius: 50px;background: #dadde1;align-items: center;background-size: cover;justify-content: space-around;background-position: center;background-repeat: no-repeat;display: none;}
  .loader{position: fixed;bottom: 33px;display: flex;justify-content: center;align-items: center;z-index: 99;width: 100%;/* background: #404344; */max-width: 800px;margin: 0 auto;}
  .loader span{

  

  padding: 10px 15px;

  background: #323637;

  color: #d0d0d0;

  border-radius: 50px;

  min-width: 129px;

  text-align: center;

  font-size: 14px;

  font-weight: 500;

  opacity: 0.8;
  }
  .share_container{position: fixed;bottom: 0;width: 100%;padding: 20px 10px;z-index: 9;background: #323637;/* border-top: 1px solid #bebebe; */transition: 0.5s;transform: translateY(110%);min-height: 233px;box-sizing: border-box;right: 0px;left: 0px;max-width: 800px;margin: 0 auto;}
  .share_container > div{display: flex;align-items: center;justify-content: space-between;/* background: #fff; *//* border-top: 1px solid #bebebe; *//* max-width: 350px; */margin: 0px auto;}
  .share_container .feedback .ld-spin{
    color: #ffffff;
  }
  .share_container .feedback p{
    color: #ffffff;
    font-size: 15px;
  }
  .share_container > div p{
  color: #fff;
  font-size: 17px;
  
  font-weight: 600;
  }


  .share_container > div p a{
  font-size: 13px;
  display: block;
  margin: 10px 0px;
  color: #b5b5b5;
  font-weight: 400;
  text-decoration: none;
  }

  .share_container > div .icons{text-align: center;width: 100%;height: 90px;display: flex;align-items: center;justify-content: center;border: 1px solid #4c4e4e;color: #fff;text-decoration: none;margin: 0;transition: 0.2s;border-radius: 6px;margin: 5px;}
  .share_container > div .icons:active{
  /* opacity: 0.5; */
  background-color: #00000014;
  }

  .share_container > div .icons i{
  font-size: 30px;
  color: #c4c4c4;
  }

  .share_container > div .icons span{display: block;font-size: 12px;text-transform: uppercase;margin-top: 9px;font-weight: 400;color: #b5b5b5;}

  .show_share{
    transform: translateY(0%)!important;
  }
  #post_url{
    opacity: 0;
    position: fixed;
  }
  .card-2{display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #aeaeae;position: relative;/* background: #f3f4f5; */}
  .card-2 .menuu {
  width: unset;
  display: none;
  padding: unset;
  }
  .card-2 > div{

  display: flex;

  align-items: center;

  padding: 10px;

  width: 100%;
  }
  .card-2 > div:nth-child(2){

  width: 40px;

  height: 40px;

  min-width: 40px;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 50px;

  transition: 0.2s;

  padding: 0px;

  margin-right: 10px;

  color: #323637;
  }

  .card-2 > div:nth-child(2):active,.card-2 > div:nth-child(2):hover{
  background: #fdfdfe;
  }
  .card-2 > button{
    border: 0;
    min-width: 100px;
    height: 34px;
    font-size: 11px;
    margin-right: 10px;
    border-radius: 3px;
    font-weight: 400;
    background-color: #323637;
  }
  .card-2 > div:nth-child(1) > div{

  margin-right: 10px;
  }

  .card-2 > div:nth-child(1) .user-image {min-width: 40px;min-width: 40px;width: 40px;height: 40px;height: 40px;color: #323637;background: #fff;display: flex;font-size: 18px;align-items: center;border-radius: 50px;justify-content: center;background-size: cover;background-position: center;background-repeat: no-repeat;position: relative;margin-right: 10px;}
  .card-2 > div:nth-child(1) .user-image span{

  position: absolute;

  top: -4px;

  left: -3px;

  width: 25px;

  height: 25px;

  background: #fdfdfe;

  font-size: 14px;

  justify-content: center;

  align-items: center;

  display: flex;

  border-radius: 50px;

  box-shadow: 0px 1px 2px 1px #00000021;
  }
  .card-2 > div:nth-child(1) .user-details {

  }
  .card-2 > div:nth-child(1) .user-details span {display: block;font-size: 13px;color: #323637;}

  .card-2 > div:nth-child(1) .user-details span b {

  
  }
  .card-2 > div:nth-child(1) .user-details span b:nth-child(3){
    color: #464646;
  }
  .card-2 > div:nth-child(1) .user-details span:nth-child(2){font-size: 12px;margin-top: 0px;font-weight: 400;color: #5e5e5e;} 
  .card-3 > div:nth-child(1) .user-details span:active{
    color: #2196f3;
  }
  .unseen_notification{
    background: #cbd7e4;
  }
  .banner .header .material-icons .badge{
    font-size: 11px;
    
    min-width: 20px;
    background: #f44336;
    font-weight: 600;
    color: #fff;
    text-align: center;
    height: 20px;
    display: flex;
    box-shadow: 1px 1px 3px #00000038;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    position: absolute;
    top: -1px;
    left: -4px;
  }
  .sidebar .menu a .badge{
    font-size: 11px;
    
    min-width: 23px;
    background: #f44336;
    color: #fff;
    text-align: center;
    height: 16px;
    box-shadow: 1px 1px 3px #00000038;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    margin-left: 0px;
    margin-top: -8px;
  }
  .card-2 > div:nth-child(1) .user-details span:nth-child(2) a{

  color: #2196f3;
  }
  .gettingstarted > h3{

  

  font-size: 23px;
  }
  .gettingstarted img{

  width: 50%;
  }
  .gettingstarted .layouts{

  display: flex;
  }
  .gettingstarted p{

  font-size: 15px;

  

  font-weight: 300;
  }
  .gettingstarted b{
    

  }
  .gettingstarted p a{
    font-weight: 400;
    
    margin-top: 5px;
    display: block;
    margin-bottom: 14px;
  }
  .toast textarea{
    border: 0px !important;
    max-height: 100px !important;
    margin-bottom: 0;
  }
  .view_attachment{position: fixed;top: 0;width: 100%;height: 100vh;display: none;overflow-y: scroll;z-index: 999;background: #000000;max-width: 800px;margin: 0 auto;left: 0px;right: 0px;}
  .view_attachment .body{

  padding: 10px;

  padding-top: 70px;

  padding-bottom: 50px;
  }
  .view_attachment .body .closebtn{position: absolute;top: 0;width: 45px;height: 45px;transition: 0.2s;display: flex;justify-content: center;align-items: center;border-radius: 50px;margin: 10px 0px;color: #fff;}
  .view_attachment .body .closebtn:active{
    /* opacity: 0.7; */
    background: #3c3c3c;
  }
  .view_attachment .body img{width: 100%;/* max-width: 400px; */margin: 0 auto;display: block;}
  .view_attachment .body .btn{margin-top: 10px;}
  .view_attachment .body #content .loading{

  color: #fff;

  width: 100%;

  text-align: center;

  height: 50vh;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 41px;
  }
  .view_attachment .body #content .loading .ld-spin{

  color: #000;
  }
  .view_attachment .body #content{
      /* max-width: 500px; */
      margin: 0 auto;
  }
  .noscroll{
      overflow-y: hidden!important;
  }
  .passcontain {

  display: flex;

  position: relative;

  align-items: center;
  }
  .passcontain .showpass{

  position: absolute;

  padding: 12px;

  margin-top: -10px;

  right: 0px;
  }
  .rem-contain{

  display: flex;

  /* justify-content: space-between; */

  margin-bottom: 10px;

  align-items: center;

  padding: 4px;
  }
  .rem-contain input{

  }
  .rem-contain .text{

  

  font-weight: 600;

  font-size: 13px;

  color: #323637;

  position: absolute;

  padding-left: 35px;
  }
.posthere{max-width: 800px;width: 100%;margin: 0 auto;position: fixed;bottom: 0;background-color: #323637;height: 72px;align-items: center;display: flex;padding: 10px;box-sizing: border-box;}

.posthere input{width: 100%;border: 1px solid #585858;background: transparent;border-radius: 50px;height: 37px;padding: 15px;color: #fff;}
.posthere button{height: 37px;border-radius: 50px;border: 0px;width: 100px;margin-left: 10px;background-color: #fff;font-weight: 600;text-transform: uppercase;border: 0px;}
  @media (max-width: 360px) {
    .card-2 > div:nth-child(1) .user-details span {
      font-size: 12px;
  }
  .sidebar .sidebar-body .profile-d .menu a {
    padding: 15px;
    font-size: 12px;
  }
  .sidebar .sidebar-body .profile-d .pp {
    width: 90px;
    font-size: 22px;
    height: 90px;
  }
  .sidebar .sidebar-body .profile-d .details span {
    font-size: 13px;
  }
    .card-2 > button {
      min-width: 90px;
    }
    .toast-d p, .toast-d .details {
      font-size: 13px;
  }
    .banner {
      padding: 0px 5px 10px 5px;
    }
    .card-2 > div:nth-child(1) .user-details span:nth-child(2) {

    }
    .card-2 > div:nth-child(1) .user-image span {
      width: 22px;
      height: 22px;
      font-size: 11px;
    }
    .gettingstarted > h3{
      font-size: 22px;
      }

    .gettingstarted p{
    font-size: 14px;
    }
    .menuu > ul > li {
      padding: 12px 20px;
    }

    .comment-card .c-menu { 
      font-size: 15px;
    }
    .comment-card p {
      font-size: 13px;
    }
    .comment-card .c-details span {
      font-size: 13px;
    }
    .ban-bg {
      height: 99px;
    }
    .profile-contain .p-body .kpis div {
        margin: 0px 5px;
    }

    .sidebar {
      width: 240px;
    }
    #navbar .nav-menu span,#navbar .brand .logo {
      /* width: 43px; */
      /* height: 43px; */
      font-size: 19px;
    }
    .user-banner {
      height: 130px;
    }
    .profile-contain .p-body,.profile-contain .p-footer{
      padding: 0px 6px;
    }
    .profile-contain .p-footer div:nth-child(2) span {
      width: 40px;
      height: 40px;
      font-size: 14px;
    }
    .profile-contain .p-body .names {
      font-size: 17px;
    }
    .profile-contain .p-body .kpis div span {
      font-size: 18px;
  }
  .profile-contain .p-footer div {
    margin-right: 0px;
  }
  .card-f .card-icon i {
    font-size: 17px;
  }
  .card-f .card-icon:nth-child(1), .card-f .card-icon:nth-child(2) {
    width: 25px;
    height: 25px;
    min-width: 25px;
    height: 25px;
  }
  .card-f .card-icon:nth-child(3){
    height: 25px;
  }
  .card-f .card-icon .badge {
    font-size: 11px!important;
  }
    .profile-contain .p-footer div:nth-child(1) span {
      font-size: 11px;
    }
    .card .card-h .card-l span {
      font-size: 12px;
    }

    .title .title-l span {
      font-size: 12px;
    }
    .banner .header .icons i {
      /* width: 43px; */
      /* height: 43px; */
      /* font-size: 21px; */
    }
 
    .banner .header span {
      font-size: 15px;
  }
    .card .card-b p {
      font-size: 13px;
  }
  .card .card-h .card-l span {
    font-size: 12px;
  }
      .btn {
          height: 44px;
          font-size: 13px;
          line-height: 43px;
      }
      #navbar .brand span {
          font-size: 16px;

      }
      .wrap-custom-file label span {
          font-size: 10px;

      }
      .camico {
          margin-bottom: 17px;
          font-size: 16px;
      }
      .wrap-custom-file label {
        height: 80px;
    }
    .card .card-b .date {
      font-size: 11px;
    }
  }

  @media (max-width: 330px) {
    .sidebar .menu a:nth-last-child(1){
      display: none!important;
    }
    .sidebar .sidebar-body .profile-d .menu a {
      padding: 13px 16px!important;
    }
  }