body {
  margin: 0;
  font-family: 'Calibri', sans-serif;
}
.collapsed {
    display: none; /* hide it for small displays */
}
@media (min-width: 992px) {
    .collapsed {
        display: block;
        margin-left: -25%; /* same width as sidebar */
    }
    #footer {
  
   width:35%;
  
}
   
    
} 
.a {
            color: white !Important;
        }
.bd {
            border-style:none;
            border-color:transparent;
            background-color:transparent;
        }
    .bd:hover {
        color:white;
        background-color:#ffdd00;
    }
.scrolling-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}
  .card {
    display: inline-block;
  }

#row-main {
    overflow-x: hidden; /* necessary to hide collapsed sidebar */
   position:relative;
   height:100%;
    
}
#content {
    -webkit-transition: width 0.3s ease-in;
    -moz-transition: width 0.3s ease-in;
    -o-transition: width 0.3s ease-in;
    transition: width 0.3s ease-in;
    
     font-size:medium;
     
}
#sidebar {
    
    -webkit-transition: margin 0.3s ease-in;
    -moz-transition: margin 0.3s ease-in;
    -o-transition: margin 0.3s ease-in;
    transition: margin 0.3s ease-in;
 
   background: #ffdd00;
    color: #000;

    
}
#sidebarabout {
    
    -webkit-transition: margin 0.3s ease-in;
    -moz-transition: margin 0.3s ease-in;
    -o-transition: margin 0.3s ease-in;
    transition: margin 0.3s ease-in;
 
   background: #ffdd00;
    color: #000;

    
}
#sidebar1 {
    
    -webkit-transition: margin 0.3s ease-in;
    -moz-transition: margin 0.3s ease-in;
    -o-transition: margin 0.3s ease-in;
    transition: margin 0.3s ease-in;
 height:100vh;
  
  max-height:600px;
  overflow:auto;
   background: #ffdd00;
    color: #000;
    
}
.td {
    border-bottom:1px dotted white;
    padding:10px;
}
.topnav {
  overflow: hidden;
  background-color: #ffdd00;

}

.topnav a {
  float: left;
  display: block;
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #454545;
  color: #ffdd00;
}

.active {
  background-color: #454545;
  color: #ffdd00 !Important;
}

.topnav .icon {
  display: none;
}
.foot-ul {
    text-align:center;
    margin-left:525px;
}
.foot-ul li {
    text-decoration:none;
    list-style-type:none;
    float:left;
    padding:5px;
    /*border-right:1px inset grey;*/
}
    .foot-ul li a {
         color:#000;
    }
footer a {
    color:#ffdd00;
}
.nav a, .nav label {
  display: block;
  padding: .85rem;
  color: #000;
  margin-left:-29px;
  background-color: transparent;
  box-shadow: inset 0 -1px #1d1d1d;
  -webkit-transition: all .25s ease-in;
  transition: all .25s ease-in;
}

.nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover {
  color: #ffdd00;
  background: #454545;
}

.nav label { cursor: pointer; }

/**
 * Styling first level lists items
 */

.group-list a, .group-list label {
    margin-left:-46px;
  padding-left: 2rem;
  background: #454545;
  box-shadow: inset 0 -1px #373737;
  color: #ffdd00;

  
}

.group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover 
{
     background: #ffdd00;
  color: #454545;

     text-decoration:none; }
/**
 * Styling second level list items
 */

.sub-group-list a, .sub-group-list label {
  padding-left: 4rem;
  background: #353535;
  box-shadow: inset 0 -1px #474747;
}

.sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { background: #232323; }

/**
 * Styling third level list items
 */

.sub-sub-group-list a, .sub-sub-group-list label {
  padding-left: 6rem;
  background: #454545;
  box-shadow: inset 0 -1px #575757;
}

.sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { background: #333333; }

/**
 * Hide nested lists
 */
.nav__list li {
    list-style-type:none;
}
.group-list, .sub-group-list, .sub-sub-group-list {
  height: 100%;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .5s ease-in-out;
  transition: max-height .5s ease-in-out;
  list-style-type:none;
  margin-bottom:5px;
}

.nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */
max-height: 1000px; }

label > span {
  float: right;
  -webkit-transition: -webkit-transform .65s ease;
  transition: transform .65s ease;
}

.nav__list input[type=checkbox]:checked + label > span {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
    .foot-ul {
        margin-left:70px;
        padding:2px;
    }

    .foot-ulx {
        margin-left:10px;
        padding:2px;
    }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
  #footer {
   
   width:35%;
 
}
}
.iconb  
{  width: 25px;
    height: 5px;
    background-color: white;
    margin: 5px 0;
}
      .chat
{
    list-style: none;
    margin: 0;
    padding: 0;
}

.chat li
{
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #B3A9A9;
}

.chat li.left .chat-body
{
    margin-left: 60px;
}

.chat li.right .chat-body
{
    margin-right: 60px;
}


.chat li .chat-body p
{
    margin: 0;
    color: #777777;
}

.panel .slidedown .glyphicon, .chat .glyphicon
{
    margin-right: 5px;
}

.panel-body
{
    overflow-y: auto;
    height: 250px;
}

::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}
.change{
    width: 50%;
    /*height: 100%;*/
    background: white;
   
    position: fixed;
    right:0;
   top:20%;
    -webkit-animation: mymove 1s 1; /* Safari 4.0 - 8.0 */
    animation: mymove 1s ease 1;
    box-shadow:5px 5px 10px 10px rgba(0,0,0,0.5);
   

}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
    from {right: -200px;}
    to {right: 0px;}
}

@keyframes mymove {
    from {right: -200px;}
    to {right: 0px;}
}
#footer {
   position:fixed;
   right:0;
   bottom:20%;
   /*left:50%;*/
   width:5%;
   padding-top:15px;
   height:50px;   /* Height of the footer */
   background:#079a0a;
   text-align:center;
   box-shadow:5px 0px 10px 10px rgba(26, 178, 9, 0.52);
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .change {
        width: 100%;
    }
    #footer {
        width: 25%;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .change {
        width: 100%;
    }
     #footer {
        width: 25%;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
   .change {
        width: 50%;
    }
    #footer {
        width: 20%;
    }
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .change {
        width: 50%;
    }
     #footer {
        width: 10%;
        font-size:large;
    }

} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
   .change {
        width: 40%;
    }
}