/*:angryFace: this scrollbar is nicelooking*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  opacity: 80px;
}

::-webkit-scrollbar-thumb {
  background: #707275;
  opacity: 90px;
  border-radius: 20px;
}

/* Sections */
.section {
    border-radius: 30px;
    margin-bottom: 15px;
    transition: background-color 0.4s !important;
  }
  .section.collapse .header, .section.collapse .header h1, .section.collapse .header h2, .section.collapse .header h3, .section.collapse .header h4, .section.collapse .header h5, .section.collapse .header h6  {
    transition: all 0.5s, color 0.4s !important;
  }
  .section.collapsed .header h1, .section.collapsed .header h2, .section.collapsed .header h3, .section.collapsed .header h4, .section.collapsed .header h5, .section.collapsed .header h6  {
    transition: all 0.5s, color 0.4s !important;
    font-size: 2.2rem;
    margin-left: 10px;
  }
  .section.collapsed .header  {
    padding: 10px !important;
  }
  .section.collapse .header {
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none;
  }
  .section.collapse.collapsed .body {
    display: none;
  }
  .section .header {
      text-align: center;
  }
  .section .header h3 {
      font-size: 60px;
  }
  .section .header, .section.header {
    padding: 40px;
  }
  .section .header i, .section.header i {
    font-size: 42px;
    margin-left: 5px;
    vertical-align: middle;
  }
  .section .body {
    padding: 60px;
    padding-top: 0px;
  }
  
  .section .header i {
    margin-right: 10px;
  }
  .section .header i, .section .header span, .section .header h1, .section .header h2, .section .header h3, .section .header h4, .section .header h5,
  .section.header i, .section.header span, .section.header h1, .section.header h2, .section.header h3, .section.header h4, .section.header h5 {
    display: inline-block;
    vertical-align: middle;
  }
  .section .header, .section.header {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
/*____________________________________________________________________________________________*/
  /*Miligram Button Addon Styling*/
  a.black {
    color: #fff
  }

  .button-black {
    background-color: black;
    border-color: black;
  }

  .button-black.button-clear,
  .button-black.button-outline {
    background-color: transparent;
    color: black;
  }

  .button-black.button-clear {
    border-color: transparent;
  }

  /* Custom size */
  .button-small {
    font-size: .8rem;
    height: 2.8rem;
    line-height: 2.8rem;
    padding: 0 1.5rem;
  }

  .button-large {
    font-size: 1.4rem;
    height: 4.5rem;
    line-height: 4.5rem;
    padding: 0 2rem;
  }
/*____________________________________________________________________________________________*/
  /*Cards*/
  .card,
  code,
  .list .item {
    /* Add shadows to create the "card" effect */
    transition: background-color 0.4s, background 0.4s, box-shadow 0.4s, color 0.4s;
    border-radius: 15px;
    z-index: 10;
  }

  .card {
    border-radius: 20px;
  }

  code,
  .list .item {
    padding: 15px;
  }

  .card {
    padding: 30px;
  }

  .list:not(.contextmenu) {
    padding: 3px;
  }

  .card,
  code,
  .contextmenu {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.17);
  }

  .card.focus {
    position: absolute;
    max-height: calc(100% - 100px);
    overflow: auto;
  }