@import 'media.css';
.overlay .labels/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

a {
    color: #337ab7;
    text-decoration: none;
}

.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

.btn-block {
    display: block;
    width: 100%;
}

/* do nothing! */
.bBannerOverLay {
    -webkit-filter: blur(10px); opacity: .8; position: absolute; bottom: 0; top: 0; left: 0; right: 0; z-index: 0; height: 240px; filter: blur(10px);
    background-position: 50%; background-repeat: no-repeat; background-size: 200%;
}

.bBannerFront {
    background-repeat: no-repeat; background-size: contain; position: absolute; height: 240px;
    width: auto; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background-position: 50%;
}

.custom-control-input {
    margin-right: 20px;
}

.fa-clock-o::before {
    content: url("https://friends.nkfs.org/Portal/self-help/assets/images/nkf-v-icon.png");
}

.fa-line-chart::before {
    content: url("https://friends.nkfs.org/Portal/self-help/assets/images/nkf-d-icon.png");
}

.fa-heart::before {
    content: url("https://friends.nkfs.org/Portal/self-help/assets/images/m-nkf-v-icon.png");
}

.fa-heartss::before {
    content: url("https://friends.nkfs.org/Portal/self-help/assets/images/m-nkf-f-icon.png");
}

.fa-gift::before {
    content: url("https://friends.nkfs.org/Portal/self-help/assets/images/m-nkf-d-icon.png");
}

#fonCardDesktop {
    display: block;
    height: 100%;
  }
  #fonCardMobile {
    display: none;
    height: 1px;
  }

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.nav-item {
    min-width: 130px;
    text-align: center;
    font-weight: bold;
}

.partnetBtn {
    width: 100%; min-height: 150px; text-align: center;
    color: #000000; font-weight: bold;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* slider css here */

/* slider css end */

.size { /*padding-right:25px;*/ padding-right:5px; padding-left:20px; }

.size span { font-size:0.875em; }

.size.s { font-size: 25px; }
.size.m { font-size: 30px; }
.size.l { font-size: 40px;; }

.width.xxxxs { width:20px; }
.width.xxxs { width:40px; }
.width.xxs { width:80px; }
.width.xs { width:135px; }
.width.s { width:195px; }
.width.m { width:275px; }
.width.l { width:280px; }
.width.xl { width:350px; }
.width.xxl { width:435px; }
.width.xxxl { width:570px; }


.height.xxxxs { height:20px; }
.height.xxxs { height:40px; }
.height.xxs { height:80px; }
.height.xs { height:135px; }
.height.s { height:195px; }
.height.m { height:275px; }
.height.l { height:280px; }
.height.xl { height:350px; }
.height.xxl { height:435px; }
.height.xxxl { height:570px; }

.marginTop.xxxxs { margin-top:5px !important; }
.marginTop.xxxs { margin-top:10px !important; }
.marginTop.xxs { margin-top:15px !important; }
.marginTop.xs { margin-top:20px !important; }
.marginTop.s { margin-top:30px !important; }
.marginTop.m { margin-top:50px !important; }

.marginTop10 { margin-top:10px !important; }
.marginTop0 { margin-top:0px !important; }
.marginTop-5 { margin-top:-5px !important; }

.marginBot0 { margin-bottom:0px !important; }

.marginBot.xxxxs { margin-bottom:5px !important; }
.marginBot.xxxs { margin-bottom:10px !important; }
.marginBot.xxs { margin-bottom:15px !important; }
.marginBot.xs { margin-bottom:20px !important; }

.marginLeft.xxxxs { margin-left:5px; }
.marginLeft.xxxs { margin-left:10px; }
.marginLeft.xxs { margin-left:15px; }
.marginLeft.xs { margin-left:20px; }
.marginLeft.s { margin-left:30px; }
.marginLeft.m { margin-left:55px; }

.marginLeft5 { margin-left:5px; }
.marginLeft10 { margin-left:10%; }

.marginRight10 { margin-right: 10px; }

.width10 { width: 10%; }
.width20 { width: 20%; } 
.width30 { width: 30%; } 
.width50 { width: 50%; }
.width60 { width: 60%; }
.width70 { width: 70%; }
.width80 { width: 80%; }
.width90 { width: 90%; }

.maxWidth { max-width: 1200px; }

.fontSize.xxxxs { font-size:5px; }
.fontSize.xxxs { font-size:10px; }
.fontSize.xxs { font-size:12px; }
.fontSize.xs { font-size:20px; }
.fontSize.L { font-size:35px; }

.grey { color: gray; }
.red { color: #d9232e; }
.white { color: #FFFFFF; }
.orange { /*color: #FFCF2C;*/ color: #F9A100; }
.green { color: #46EE00; }
.turquoise { color: #00EEC1; }
.blue { color: #00D4E0; }
.disabledGrey { color: gray !important; }
.txtError { color: #d9232e; }
.formError {border: 1px solid red !important;}

.strong { font-weight: 600; }

.textLeft { text-align: left; }

.smallbtn { width: 30%; margin-left: auto; margin-right: auto; }

.padding5 { padding: 5px !important; }
.padding8 { padding: 8px !important; }
.padding10 { padding: 10px !important; }
.padding20 { padding: 20px !important; }

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

.paddingLeft5 { padding-left: 5px !important; }
.paddingLeft8 { padding-left: 8px !important; }
.paddingLeft10 { padding-left: 10px !important; }
.paddingLeft20 { padding-left: 20px !important; }
.paddingLeft50 { padding-left: 50px !important; }

.bottom-shadow {
    -webkit-box-shadow: 0 7px 6px -6px #7D7D7D;
       -moz-box-shadow: 0 7px 6px -6px #7D7D7D;
            box-shadow: 0 7px 6px -6px #7D7D7D;
}

.flex-d { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-right { justify-content: flex-end; }
.flex-start { justify-content: flex-start; }
.flex-between { justify-content: space-between; }
.flex-around { justify-content: space-around; }
.flex-center { align-items: center; }
.flex-selfcenter { align-self: center; }
.flex-align { justify-content: center; }

.flex-grow1 { flex-grow: 1; }
.flex-grow2 { flex-grow: 2; }
.flex-grow3 { flex-grow: 3; }

.paddingLem { padding-left: 1em; }
.paddingRem { padding-right: 1em; }
.paddingTem { padding-top: 1em; }
.paddingBem { padding-bottom: 1em; }

/* ==========================================================================
   Custom styles
   ========================================================================== */

    body {
        color: #fff;
        background-color: #F3F3F3;
        /*background: #d47677;*/
    }

    p {
        word-wrap: break-word;
    }

/* ==========================================================================
   form styles
   ========================================================================== */    

    .form-filter {
        min-height: 18px !important;
        height: 22px !important;
        padding: 3px !important;
    }

    .form-filter.widthS {
        width: 50px !important;
    }

    .form-filter.widthM {
        width: 70px !important;
    }

    .form-profile {
        min-height: 30px !important;
        height: 30px !important;
        padding: 5px !important;
        margin-right: 5px !important;
        margin-top: 3px !important;
    }

    .form-profile.widthS {
        width: 50px !important;
    }

    .form-profile.widthM {
        width: 80px !important;
    }

    .form-profile.widthL {
        width: 135px ;
    }

    .form-profile.widthXL {
        width: 175px !important;
    }


    .profile-top {     
        margin-top: 1em;
    }

    .form-row>[class*=col-] {
        padding-left: 0px;
    }

    .logo {
        width: 350px;
        margin: 0 auto;
        padding: 20px 0;
        display: flex;
        justify-content: center;
    }

    .form-control {
        min-height: 41px;
        background: #fff;
        box-shadow: none !important;
        border-color: #e3e3e3;
    }

    .form-control:focus {
        border-color: #70c5c0;
    }

    .form-control, .btn {        
        border-radius: 2px;
    }

/* ==========================================================================
   login form styles
   ========================================================================== */   

    .login-form {
        width: 350px;
        margin: 0 auto;
        padding: 50px 0 30px;      
    }

    .login-form form {
        color: #7a7a7a;
        border-radius: 2px;
        margin-bottom: 15px;
        font-size: 13px;
        background: #ececec;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        padding: 30px;  
        position: relative; 
    }

    .login-form h2 {
        font-size: 22px;
        margin: 35px 0 25px;
    }

    .login-form .avatar {
        position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: -50px;
        width: 95px;
        height: 95px;
        border-radius: 50%;
        z-index: 9;
        background: #d9232e;
        padding: 15px;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
    }

    .login-form .avatar img {
        width: 100%;
    }   

    .login-form input[type="checkbox"] {
        margin-top: 2px;
    }

    .login-form .btn {        
        font-size: 16px;
        font-weight: bold;
        background: #d9232e;
        border: none;
        margin-bottom: 20px;
    }

    .login-form .btn:hover, .login-form .btn:focus {
        background: #C8121D;
        outline: none !important;
    }    

    .login-form a {
        color: #fff;
        text-decoration: underline;
    }

    .login-form a:hover {
        text-decoration: none;
    }

    .login-form form a {
        color: #7a7a7a;
        text-decoration: none;
    }
    
    .login-form form a:hover {
        text-decoration: underline;
    }

/* ==========================================================================
   #navbar styles
   ========================================================================== */   

    /* Create a sticky/fixed navbar */
    #navbar {
      /*overflow: hidden;*/
      /*background-color: #f1f1f1;*/
      background-color: #FFFFFF;
      /*padding: 0px 0px 20px 0px;*/
      padding: 20px 0px;
      transition: 0.4s;
      position: fixed; /* Sticky/fixed navbar */
      width: 100%;
      top: 0;
      z-index: 99; 
      justify-content: space-between;
    }

    /*#navbar #stars {
      padding: 30px 10px;
    }

    #navbar #favorites {
      padding: 30px 10px;
    }

    #navbar #following {
      padding: 30px 10px;
    }*/

    /* Style the navbar links */
    #navbar a {
        float: left;
        color: #cdcdcd;
        text-align: center;
        padding: 5px 5px 5px 5px;
        margin-left: 15px;
        text-decoration: none;
        font-size: 28px;
        line-height: 25px;
        border-radius: 4px;
    }

    /* Style the logo */
    #navbar #logo {
      /*font-size: 35px;*/
      transition: 0.4s;
      margin-right: 30px;
    }

    /* Links on mouse-over */
    #navbar a:hover {
      /*background-color: #ddd;*/
      /* color: #fff; */
    }

    /* Style the active/current link */
    #navbar a.active {
      /*background-color: #fff;*/
      color: #d9232e;
    }

    /* Display some links to the right */
    #navbar-right {
      /*float: right;*/
      display: flex;
      justify-content: flex-end;
    }

    #navbar-left .menu.mobile {
      /*display: flex;*/
      /*justify-content: flex-end;*/
      /*visibility: hidden;*/
      display: none;
    }

a.contactUs #contactIcon:hover {
color : rgb(217, 35, 46)
}

a.home #hse:hover {
color : rgb(217, 35, 46)
}

    #navbar .menu span {
        display: block;
        width: 33px;
        height: 4px;
        padding-top: 5px;
        margin-bottom: 5px;
        position: relative;

        background-color: #cdcdcd;
        border-radius: 3px;

        z-index: 1;

        /*transform-origin: 4px 0px;

        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        opacity 0.55s ease;*/
    }

    /* Add responsiveness - on screens less than 580px wide, 
    display the navbar vertically instead of horizontally */
   /* @media screen and (max-width: 580px) {
      #navbar {
        padding: 20px 10px !important; 
      }
      #navbar a {
        float: none;
        display: block;
        text-align: left;
      }
      #navbar-right {
        float: none;
      }
    }*/    

    .vbg {
        background: rgb(90,236,234);
        background: -moz-radial-gradient(circle, rgba(90,236,234,1) 0%, rgba(50,208,200,1) 36%, rgba(0,196,180,1) 100%);
        background: -webkit-radial-gradient(circle, rgba(90,236,234,1) 0%, rgba(50,208,200,1) 36%, rgba(0,196,180,1) 100%);
        background: radial-gradient(circle, rgba(90,236,234,1) 0%, rgba(50,208,200,1) 36%, rgba(0,196,180,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5aecea",endColorstr="#00c4b4",GradientType=1);    
    }

    #welcome {
        /*margin-top: 140px;*/
        margin-left: auto;
        margin-right: auto;
        color: #d9232e;
    }

    #content {
        margin-left: auto;
        margin-right: auto;
        color: #d9232e;
    }

    #accordion {
        width: 100%;
    }

    #mediaFile {
      position: absolute;
      top: -1000px;
    }

    #profile-img {
      border-radius: 100%;
      width: 200px;
      height: 200px;
      margin: 0 auto;
      position: relative;
      top: -80px;
      margin-bottom: -80px;
      cursor: pointer;
      background: #f4f4f4;
      display: table;
      background-size: cover;
      background-position: center center;
      box-shadow: 0 5px 8px rgba(0, 0, 0, 0.35);
    }
/* ==========================================================================
   Profile Image Upload Modal Styles
   ========================================================================== */
    #profile-img .dashes {
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 100%;
      width: 100%;
      height: 100%;
      border: 4px dashed #ddd;
      opacity: 1;
    }

    #profile-img label {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      padding: 0 30px;
      color: grey;
      opacity: 1;
    }

    #profile-img.dragging {
      background-image: none !important;
    }

    #profile-img.dragging .dashes {
      -webkit-animation-duration: 10s;
              animation-duration: 10s;
      -webkit-animation-name: spin;
              animation-name: spin;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
      opacity: 1 !important;
    }

    #profile-img.dragging label {
      opacity: 0.5 !important;
    }

    #profile-img.hasImage .dashes, #profile.hasImage label {
      opacity: 0;
      pointer-events: none;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
    }

/* ==========================================================================
   content-middle Panel Styles
   ========================================================================== */
   .panel {
        margin-bottom: 20px;
        background-color: #fff;
        border: 1px solid rgba(0, 0, 0, .07);
        border-radius: 4px;
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
        box-shadow: 0 1px 1px rgba(0,0,0,.05);
    }

    .panel.panel-horizontal {
        width:100%;
    }

    .panel.panel-horizontal > .panel-heading, .panel.panel-horizontal > .panel-footer {
        width: 40%;
        border:0;
        vertical-align: middle;
    }

    .panel.panel-horizontal > div > .panel-heading {
        /*border-top: 1px solid rgba(0, 0, 0, .07);*/
        border-right: 1px solid rgba(0, 0, 0, .07);
        /*border-left: 1px solid #ddd;*/
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 4px;
        padding: 0px;
        margin: 0px;
    }

    .panel.panel-horizontal > div > .panel-body {
        padding: 0px;
    }

    .panel.panel-horizontal > .panel-footer {
        border-top: 1px solid rgba(0, 0, 0, .07) !important;
        background: #FFFFFF;
        width: 100%;
        color: rgba(0, 0, 0, .4);
    }

/* ==========================================================================
   Jumbotron Calendar Icon Styles
   ========================================================================== */

    time.icon
    {
      font-size: 1em; /* change icon size */
      display: block;
      position: relative;
      width: 50px;
      height: 50px;
      /*width: 7em;*/
      /*height: 7em;*/
      background-color: #fff;
      margin: none;
      /*margin: 2em auto;*/
      /*border-radius: 0.6em;*/
      border-radius: 0.3em;
      box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      /*-webkit-transform: rotate(0deg) skewY(0deg);*/
      /*-webkit-transform-origin: 50% 10%;*/
      /*transform-origin: 50% 10%;*/
    }

    time.icon *
    {
      display: block;
      width: 100%;
      font-size: 1em;
      font-weight: bold;
      font-style: normal;
      text-align: center;
    }

    time.icon strong
    {
      position: absolute;
      top: 0;
      /*padding: 0.4em 0;*/
      padding: 0.1em 0;
      color: #fff;
      background-color: #fd9f1b;
      border-bottom: 1px dashed #f37302;
      box-shadow: 0 2px 0 #fd9f1b;
    }

    time.icon em
    {
      position: absolute;
      bottom: 0.3em;
      color: #fd9f1b;
    }

    time.icon span
    {
      width: 100%;
      /*font-size: 2.8em;*/
      font-size: 1em;
      letter-spacing: -0.05em;
      /*padding-top: 0.8em;*/
      padding-top: 1.85em;
      color: #2f2f2f;
    }

    .custom-fa-bkgrd {
        width: 50px;
        height: 51px;
        line-height: 53px;
        font-size: 61px;
        background-color: white;
        border-radius: 50%;
        color: #d9232e;
    }

    .custom-fa-outline {
        /* text-shadow: 3px 2px 4px #ffffff; */
        width: 60px;
        height: 60px;
        /* line-height: 47px; */
        /* font-size: 50px; */
        /* border-radius: 50%; */
        /* color: #d9232e; */
        /* background: white; */
    }

    /*time.icon:hover, time.icon:focus
    {
      -webkit-animation: swing 0.6s ease-out;
      animation: swing 0.6s ease-out;
    }*/

    /*@-webkit-keyframes swing {
      0%   { -webkit-transform: rotate(0deg)  skewY(0deg); }
      20%  { -webkit-transform: rotate(12deg) skewY(4deg); }
      60%  { -webkit-transform: rotate(-9deg) skewY(-3deg); }
      80%  { -webkit-transform: rotate(6deg)  skewY(-2deg); }
      100% { -webkit-transform: rotate(0deg)  skewY(0deg); }
    }

    @keyframes swing {
      0%   { transform: rotate(0deg)  skewY(0deg); }
      20%  { transform: rotate(12deg) skewY(4deg); }
      60%  { transform: rotate(-9deg) skewY(-3deg); }
      80%  { transform: rotate(6deg)  skewY(-2deg); }
      100% { transform: rotate(0deg)  skewY(0deg); }
    }*/

/* ==========================================================================
   content-middle Card Profile Styles
   ========================================================================== */

    #content-middle .card {
        font-size: 1em;
        overflow: hidden;
        padding: 0;
        margin: 20px auto;
        /*background: white;*/
        border: 20px solid #eeeeee;
        background: rgba(214, 224, 226, 0.2);
        border-radius: 0.8em;
        width: 90%;
    }

    #content-middle .card-block {
        font-size: 1em;
        position: relative;
        margin: 0;
        /*padding: 1em;*/
        border: none;
        border-radius: 0.8em;
        border-top: 1px solid rgba(34, 36, 38, .1);
        background: white;
        box-shadow: none;
    }

    #content-middle .card-img-top {
        display: block;
        width: 100%;
        height: auto;
    }

    #content-middle .card-title {
        font-size: 1.28571429em;
        font-weight: 700;
        line-height: 1.2857em;
        padding-left: 1em;
    }

    #content-middle .card-text {
        clear: both;
        margin-top: .5em;
        color: rgba(0, 0, 0, .68);
    }

    #content-middle .card-text > div {
        border-top: 1px solid rgba(34, 36, 38, .1);
    }

    #content-middle .card-text > div.even { 
        background: #fafafa;
    }
    
    #content-middle .card-footer {
        font-size: 1em;
        position: static;
        top: 0;
        left: 0;
        max-width: 100%;
        padding: .75em 1em;
        color: rgba(0, 0, 0, .4);
        border-top: 1px solid rgba(0, 0, 0, .05) !important;
        background: #fff;
    }

     #content-middle .card-footer small {
        vertical-align: middle;
     }

    #content-middle .card-inverse .btn {
        border: 1px solid rgba(0, 0, 0, .05);
    }

    #content-middle .profile {
        position: absolute;
        top: -12px;
        display: inline-block;
        overflow: hidden;
        box-sizing: border-box;
        width: 25px;
        height: 25px;
        margin: 0;
        border: 1px solid #fff;
        border-radius: 50%;
    }

    #content-middle .profile-avatar {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    #content-left .profile-inline {
        position: relative;
        top: 0;
        display: inline-block;
    }

    #content-left .profile-inline ~ .card-title {
        display: inline-block;
        margin-left: 4px;
        vertical-align: top;
    }

/* ==========================================================================
   content-left Card Profile Styles
   ========================================================================== */

    #content-left .card {
        font-size: 1em;
        overflow: hidden;
        padding: 0;
        margin: 0;
        background: white;
        border: none;
        border-radius: .28571429rem;
        box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
    }

    #content-left .card-block {
        font-size: 1em;
        position: relative;
        margin: 0;
        padding: 1em;
        border: none;
        border-top: 1px solid rgba(34, 36, 38, .1);
        box-shadow: none;
    }

    #content-left .card-img-top {
        display: block;
        width: 100%;
        height: auto;
    }

    #content-left .card-title {
        font-size: 1.28571429em;
        font-weight: 700;
        line-height: 1.2857em;
    }

    #content-left .card-text {
        clear: both;
        margin-top: .5em;
        color: rgba(0, 0, 0, .68);
    }

    #content-left .card-footer {
        font-size: 1em;
        position: static;
        top: 0;
        left: 0;
        max-width: 100%;
        padding: .75em 1em;
        color: rgba(0, 0, 0, .4);
        border-top: 1px solid rgba(0, 0, 0, .05) !important;
        background: #fff;
    }

     #content-left .card-footer small {
        vertical-align: middle;
     }

    #content-left .card-inverse .btn {
        border: 1px solid rgba(0, 0, 0, .05);
    }

    #content-left .profile {
        position: absolute;
        top: -12px;
        display: inline-block;
        overflow: hidden;
        box-sizing: border-box;
        width: 25px;
        height: 25px;
        margin: 0;
        border: 1px solid #fff;
        border-radius: 50%;
    }

    #content-left .profile-avatar {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    #content-left .profile-inline {
        position: relative;
        top: 0;
        display: inline-block;
    }

    #content-left .profile-inline ~ .card-title {
        display: inline-block;
        margin-left: 4px;
        vertical-align: top;
    }

/* ==========================================================================
   content-right Card Profile Styles
   ========================================================================== */

    #content-right .card {
        font-size: 1em;
        overflow: hidden;
        padding: 0;
        margin: 0;
        background: white;
        border: none;
        border-radius: .28571429rem;
        box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
    }

    #content-right .card-block {
        font-size: 1em;
        position: relative;
        margin: 0;
        padding: 1em;
        border: none;
        border-top: 1px solid rgba(34, 36, 38, .1);
        box-shadow: none;
    }

    #content-right .card-img-top {
        display: block;
        width: 100%;
        height: 240px;
    }

    #content-right .card-title {
        font-size: 1.28571429em;
        font-weight: 700;
        line-height: 1.2857em;
    }

    #content-right .card-text {
        clear: both;
        margin-top: .5em;
        color: rgba(0, 0, 0, .68);
    }

    #content-right .card-footer {
        font-size: 1em;
        position: static;
        top: 0;
        left: 0;
        max-width: 100%;
        padding: .75em 1em;
        color: rgba(0, 0, 0, .4);
        border-top: 1px solid rgba(0, 0, 0, .05) !important;
        background: #fff;
    }

     #content-right .card-footer small {
        vertical-align: middle;
     }

    #content-right .card-inverse .btn {
        border: 1px solid rgba(0, 0, 0, .05);
    }

    #content-right .profile {
        position: absolute;
        top: -12px;
        display: inline-block;
        overflow: hidden;
        box-sizing: border-box;
        width: 25px;
        height: 25px;
        margin: 0;
        border: 1px solid #fff;
        border-radius: 50%;
    }

    #content-right .profile-avatar {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    #content-right .profile-inline {
        position: relative;
        top: 0;
        display: inline-block;
    }

    #content-right .profile-inline ~ .card-title {
        display: inline-block;
        margin-left: 4px;
        vertical-align: top;
    }

/* ==========================================================================
   Card Profile Styles
   ========================================================================== */

    .card {
        padding-top: 20px;
        margin: 10px 0 20px 0;
        background-color: rgba(214, 224, 226, 0.2);
        border-top-width: 0;
        border-bottom-width: 2px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .card .card-heading {
        padding: 0 20px;
        margin: 0;
    }

    .card .card-heading.simple {
        font-size: 20px;
        font-weight: 300;
        color: #777;
        border-bottom: 1px solid #e5e5e5;
    }

    .card .card-heading.image img {
        display: inline-block;
        width: 46px;
        height: 46px;
        margin-right: 15px;
        vertical-align: top;
        border: 0;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }

    .card .card-heading.image .card-heading-header {
        display: inline-block;
        vertical-align: top;
    }

    .card .card-heading.image .card-heading-header h3 {
        margin: 0;
        font-size: 14px;
        line-height: 16px;
        color: #262626;
    }

    .card .card-heading.image .card-heading-header span {
        font-size: 12px;
        color: #999999;
    }

    .card .card-body {
        padding: 0 20px;
        margin-top: 20px;
    }

    .card .card-media {
        padding: 0 20px;
        margin: 0 -14px;
    }

    .card .card-media img {
        max-width: 100%;
        max-height: 100%;
    }

    .card .card-actions {
        min-height: 30px;
        padding: 0 20px 20px 20px;
        margin: 20px 0 0 0;
    }

    .card .card-comments {
        padding: 20px;
        margin: 0;
        background-color: #f8f8f8;
    }

    .card .card-comments .comments-collapse-toggle {
        padding: 0;
        margin: 0 20px 12px 20px;
    }

    .card .card-comments .comments-collapse-toggle a,
    .card .card-comments .comments-collapse-toggle span {
        padding-right: 5px;
        overflow: hidden;
        font-size: 12px;
        color: #999;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .card-comments .media-heading {
        font-size: 13px;
        font-weight: bold;
    }

    .card.people {
        position: relative;
        display: inline-block;
        width: 170px;
        height: 300px;
        padding-top: 0;
        margin-left: 20px;
        overflow: hidden;
        vertical-align: top;
    }

    .card.people:first-child {
        margin-left: 0;
    }

    .card.people .card-top {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 170px;
        height: 150px;
        background-color: #ffffff;
    }

    .card.people .card-top.green {
        background-color: #53a93f;
    }

    .card.people .card-top.blue {
        background-color: #427fed;
    }

    .card.people .card-info {
        position: absolute;
        top: 150px;
        display: inline-block;
        width: 100%;
        height: 101px;
        overflow: hidden;
        background: #ffffff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .card.people .card-info .title {
        display: block;
        margin: 8px 14px 0 14px;
        overflow: hidden;
        font-size: 16px;
        font-weight: bold;
        line-height: 18px;
        color: #404040;
    }

    .card.people .card-info .desc {
        display: block;
        margin: 8px 14px 0 14px;
        overflow: hidden;
        font-size: 12px;
        line-height: 16px;
        color: #737373;
        text-overflow: ellipsis;
    }

    .card.people .card-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        display: inline-block;
        width: 100%;
        padding: 10px 20px;
        line-height: 29px;
        text-align: center;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .card.hovercard {
        position: relative;
        padding-top: 0;
        overflow: hidden;
        text-align: left;
        /*background-color: rgba(214, 224, 226, 0.2);*/
    }

    .card.hovercard .cardheader {
        /*background: url("http://lorempixel.com/850/280/nature/4/");*/

        background-size: cover;
        height: 200px;
    }

    .card.hovercard .welcome {
        margin-top: 58px;
        padding: 58px 0px 5px 150px
    }

    .card.hovercard .vbg {
        min-height: 200px;  
        background: rgb(90,236,234);
        background: -moz-radial-gradient(circle, rgba(90,236,234,1) 0%, rgba(50,208,200,1) 36%, rgba(0,196,180,1) 100%);
        background: -webkit-radial-gradient(circle, rgba(90,236,234,1) 0%, rgba(50,208,200,1) 36%, rgba(0,196,180,1) 100%);
        background: radial-gradient(circle, rgba(90,236,234,1) 0%, rgba(50,208,200,1) 36%, rgba(0,196,180,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5aecea",endColorstr="#00c4b4",GradientType=1);
    
    }

    .card.hovercard .avatar {
        position: relative;
        top: -80px;
        margin-bottom: -50px;

        min-width: 120px;
        max-width: 200px;
        width: 120px;
        z-index: 80;
    }

    .card.hovercard .centralize {
        margin-left: auto;
        margin-right: auto;
    }

    .card.hovercard .avatar img {
        /*width: 100px;*/
        /*height: 100px;*/
        width: 120px;
        height: 120px;
        max-width: 200px;
        max-height: 200px;

        /*border: 5px solid rgba(255,255,255,0.5);*/
        border: 2px solid #FFFFFF;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;

        box-shadow: 0 7px 6px -6px #7D7D7D;
    }

    .card.hovercard .avatar .rank-label-container {
        margin-top: -19px;
        /* z-index: 1000; */
        text-align: center;

        min-width: 120px;
        width: 120px;
    }

    .card.hovercard .avatar .label.label-default.rank-label {
        /*background-color: rgb(81, 210, 183);*/
        background-color: #FFFFFF;
        padding: 5px 10px 5px 10px;
        border-radius: 27px;
        color: #d9232e;

        box-shadow: 0 4px 6px -4px #7D7D7D;
    }

    .custom-label {
        margin-bottom: 0 !important;
        font-weight: 500;
    }

    .tablewrapper {
        min-height: 300px;
    }

    /*.card.hovercard .info {
        padding: 4px 8px 10px;
    }

    .card.hovercard .info .title {
        margin-bottom: 4px;
        font-size: 24px;
        line-height: 1;
        color: #262626;
        vertical-align: middle;
    }

    .card.hovercard .info .desc {
        overflow: hidden;
        font-size: 12px;
        line-height: 20px;
        color: #737373;
        text-overflow: ellipsis;
    }

    .card.hovercard .bottom {
        padding: 0 20px;
        margin-bottom: 17px;
    }*/

    /*.btn{ border-radius: 50%; width:32px; height:32px; line-height:18px;  }*/

/* ==========================================================================
   Profile Head Styles
   ========================================================================== */

    /*.profile-header-container{
        margin: 0 auto;
        text-align: center;
    }

    .profile-header-img {
        padding: 54px;
    }

    .profile-header-img > img.img-circle {
        width: 120px;
        height: 120px;
        //border: 2px solid #51D2B7;
        border: 2px solid #FFFFFF;
    }

    .profile-header {
        margin-top: 43px;
    }

    .rank-label-container {
        margin-top: -19px;
        //z-index: 1000; 
        text-align: center;
    }

    .label.label-default.rank-label {
        //background-color: rgb(81, 210, 183);
        background-color: #FFFFFF;
        padding: 5px 10px 5px 10px;
        border-radius: 27px;
        color: #d9232e;
    }*/

/* ==========================================================================
   Overriding Styles
   ========================================================================== */

    .nav>li>a {
      padding: 10px 10px;
    }

    .tooltip.bottom .tooltip-inner {
        max-width:310px;
        padding:3px 8px;
        color:#fff;
        text-align:center;
        background: rgba(50,208,200,1) 36%;
        border-radius:5px;
        z-index: 200;
    }

    .nav-tabs>li:nth-child(1){
        margin-left: 120px;
    }

    .nav-tabs {
        border-top: none;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-bottom: none;
        /*border-bottom: 1px solid #ddd;*/
        background: #FFFFFF;

        margin-top: -120px; 
        z-index: 1000;
    }

    .nav-tabs>li>a:hover {
        background-color: #ddd;
        border-bottom: 5px solid #ddd;
    }    

    .nav-tabs>li.active>a, 
    .nav-tabs>li.active>a:focus, 
    .nav-tabs>li.active>a:hover {
        color: #555;
        cursor: default;
        background-color: #fff;
        border: none; 
        border-bottom: 5px solid #ddd;
        /* border-bottom-color: transparent; */
    }

    .tab-content {
        background: white;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
    }

    .table-bordered>tbody>tr>td {
        color: grey;
    }

    .table-bordered>tbody>tr>t {
        color: grey;
    }

/* ==========================================================================
   Customized Flex Styles
   ========================================================================== */    

    .flex {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: wrap;
    }

    .flex-nowrap {
        display: flex;
        flex-wrap: nowrap;
    }

    .flex-start{
        display: flex;
        justify-content: flex-start;
    }

    .flex-container {
        display: flex;
        flex: 1 1 auto;
        flex-direction: row;
        flex-wrap: wrap;

        justify-content: space-between;
        width: 100%;
    }

    .flex-container .block {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        /*justify-content: flex-start;*/
        width: 250px;
        height: 250px;
        text-align: center;
        margin-right: 10px;
        margin-top: 10px;
        /* padding-top: 40px; */
        border: 1px solid;
        border-radius: 15px;

        cursor: pointer;
    }

    .flex-container .block .content i {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        font-size: 60px;
    }

    .flex-container .block .content p {
        display: flex;
        /* align-items: center; */
        /*flex: 1 1 auto;*/
        font-size: 18px;
        /* padding-top: 20px; */
    }

    .flex-container .block .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1 1 auto;
    }

    #backbtn {
        margin-left: auto;
        margin-right: auto;
        width: 30%;
        margin-bottom: 10px;
    }

        

    /* Add responsiveness - on screens less than 580px wide, 
    display the navbar vertically instead of horizontally */
   /* @media screen and (max-width: 580px) {
      #navbar {
        padding: 20px 10px !important; 
      }
      #navbar a {
        float: none;
        display: block;
        text-align: left;
      }
      #navbar-right {
        float: none;
      }
    }*/


/* ==========================================================================
   Chart Styles
   ========================================================================== */

   #donorTbl {color: #98C323 !important}
   #volunTbl {color: #EBAA37 !important}
   
   .donationBBannerTxt {color: #98C323 !important}
   .donationBBannerBtn {background-color: #98C323 !important; border-color:#98C323 !important}

   .volunteerBBannerTxt {color: #EBAA37 !important}
   .volunteerBBannerBtn {background-color: #EBAA37 !important; border-color:#EBAA37 !important}

#chart-layout {
  text-align: center;
}

#chart-container {
  width: 600px;
  height: 480px;
  margin: auto;
  /*background-color: #2F4A6D;*/
}

svg {
  width: 100%;
  height: 100%;
}

.bar {
  fill: #80cbc4;
}

text {
  font-size: 12px;
  fill: #d9232e;
}

path {
  stroke: gray;
}

line {
  stroke: gray;
}

line#limit {
  stroke: #FED966;
  stroke-width: 3;
  stroke-dasharray: 3 6;
}

.grid path {
  stroke-width: 0;
}

.grid .tick line {
  stroke: #9FAAAE;
  stroke-opacity: 0.3;
}

text.divergence {
  font-size: 12px;
  fill: #2F4A6D;
}

text.value {
  font-size: 12px;
}

text.title {
  font-size: 22px;
  font-weight: 600;
}

text.label {
  font-size: 12px;
  font-weight: 400;
}

text.source {
  font-size: 10px;
}    

/* ==========================================================================
   Media Queries
   ========================================================================== */

/*@media only screen and (min-width: 35em) {
    
}*/

/*@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}*/

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.contactUs-mobile {
    display: none;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
    @media only screen and (max-width: 768px) {
        .form-profile.widthL {
            width: 100% !important;
        };
        .form-group  {
            width: 100% !important;
        };
    }
}