/* code chunks */
container-code {
    width: 500px;
    overflow-x: auto;
  }
  
  .code-wrapper {
    position: relative;
  }
  
  .code-wrapper pre {
    background-color: #2b2b2d !important;
    color: black;
    padding: 0px 0px 0px 20px;
    border-radius: 5px;
    font-size: 1em;
    border: 0.5px solid var(--dgps-boreal)
  }
  
  
  #copy-button {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 8px;
    border: none;
    outline: none;
    border-radius: 0 5px 0 0;
    font-size: 0.8em;
    cursor: pointer;
    opacity: 0;
  }
  
  #copy-button2 {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 8px;
    border: none;
    outline: none;
    border-radius: 0 5px 0 0;
    font-size: 0.8em;
    cursor: pointer;
    opacity: 0;
  }
  
  #copy-button3 {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 8px;
    border: none;
    outline: none;
    border-radius: 0 5px 0 0;
    font-size: 0.8em;
    cursor: pointer;
    opacity: 0;
  }
  
  .code-wrapper:hover #copy-button{
    opacity: 1;
  }
  
  .code-wrapper:hover #copy-button2{
    opacity: 1;
  }
  
  .code-wrapper:hover #copy-button3{
    opacity: 1;
  }
  
  #copy-success {
    background-color: var(--dgps-boreal);
    position: absolute;
    bottom: 0px;
    right: 0px;
    color: white;
    font-size: 0.8em;
    padding: 5px 10px 5px 10px;
    border-radius: 0px 0px 5px 0;
    border-top: 0.5px solid var(--dgps-boreal-dark);
    border-left: 0.5px solid var(--dgps-boreal-dark);
    display: none;
  }
  
  #copy-success2 {
    background-color: var(--dgps-boreal);
    position: absolute;
    bottom: 0px;
    right: 0px;
    color: white;
    font-size: 0.8em;
    padding: 5px 10px 5px 10px;
    border-radius: 0px 0px 5px 0;
    border-top: 0.5px solid var(--dgps-boreal-dark);
    border-left: 0.5px solid var(--dgps-boreal-dark);
    display: none;
  }
  
  #copy-success3 {
    background-color: var(--bs-dark2);
    position: absolute;
    bottom: 0px;
    right: 0px;
    color: var(--bs-info);
    font-size: 0.8em;
    padding: 5px 10px 5px 10px;
    border-radius: 0px 0px 5px 0;
    display: none;
  }
  
  .copySuccessId {
    background-color: white;
    position: absolute;
    bottom: 0px;
    right: 0px;
    color: var(--bs-gray-600);
    font-size: 0.7em;
    padding: 3px 5px 3px 5px;
    border-radius: 0 0 0.25rem 0;
    display: none;
    z-index: 2;
  }
  
  .show-message {
    display: inline-block;
  }
  
  #copy-success.show-message{
    display: inline-block;
  }
  
  #copy-success2.show-message{
    display: inline-block;
  }
  
  #copy-success3.show-message{
    display: inline-block;
  }
  
  .hljs {
    background-color: transparent;
  }
  
  #databases {
    min-height: 50em;
    transition: all .8s ease;
  }
  
  .ease {
    transition: all .8s ease;
  }
  
  @media (max-width: 992px)  {
    #codeblock {
      display: none;
    }
  }