.docs-body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

.docs-h1 {
  color: #007bff;
  font-weight: normal;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 40px;
}

.docs-h2 {
  color: #007bff;
  font-weight: normal;
  padding-top: 10px;
  margin-bottom: 5px;
  padding-bottom: 5px;
  font-size: 30px;
  border-bottom: 1px solid rgb(58, 58, 58);
}

.docs-h3 {
  color: #007bff;
  font-weight: normal;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 22px;
}

.docs-h4 {
  color: #000000;
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
}

.docs-h5 {
  color: #000000;
  font-weight: normal;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 15px;
}

.docs-h6 {
  color: #000000;
  font-weight: bold;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 10px;
}

.docs-p {
  margin-bottom: 15px;
}

.dro-column {
  float: left;
  padding: 10px;
}

.docs-left {
  width: 20%;
  background-color: rgba(141, 212, 247, 0.3);
  height: 100vh;
  overflow: auto;
  
}

.docs-right {
  width: 80%;
  height: 100vh;
  padding: 5%;
  padding-top: 20px;
  overflow: auto;
}

.dro-logo {
  padding-top: 30px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  padding-left: 10px;
  border-bottom: 1px solid #353434;
}

.dro-row:after {
  content: "";
  display: table;
  clear: both;
}   

.dro-toc-ul {
  list-style: none;
  padding-left: 1rem;
}

.dro-toc-ul > li {
  padding: 10px;
  position: relative;
}

.dro-toc-ul2 > li{
  padding: 10px 20px;
  font-size: 14px;
}

.dro-toc-ul  > li > a {
  color: #333;
  text-decoration: none;
  font-size: 16px;
}

.dro-toc-ul > li > a:hover {
  color: #007bff;
  cursor: pointer;
  text-decoration: none;
  font-size: 16px;
}

.content-ul, .content-ol {
list-style-position: outside; 
padding-left: 30px; 
}

.docs-img, .info-container {
margin: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.code-container {
border: 1px solid #ccc;
background-color: #f9f9f9;
margin: 20px;
padding: 5px;
position: relative;
overflow: auto;
}
.code {
font-family: monospace;
white-space: normal;
font-size: 16px;
}
.docs-code {
font-family: monospace;
}
.copy-btn {
position: absolute;
top: 5px;
right: 5px;
padding: 5px 5px;
border: none;
background-color: #76a1f2;
color: #fff;
cursor: pointer;
font-size: 10px;
}
.copy-btn:hover {
background-color: #2e84e6;
}


.add-margin{
margin-top:20px;
}

.notif__svg{
fill:#fff;
}

.notif {
text-align:left;
margin: 20px;
  padding: 18px 0;
  background-color:#fff;
  border-radius:4px;
  top: 0px;
  position:relative;
  box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.2);
}


.notif:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
border-top-left-radius:4px;
border-bottom-left-radius: 4px;

}

.notif__icon{
position:absolute;
top:30%;
left:22px;
display:inline-block;
}

.notif__type {
color: #3e3e3e;
font-weight: 700;
margin-top: 0;
margin-bottom: 8px;
}

.notif__message {
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 0;
}

.notif__content{
padding-left:70px;
padding-right:60px;
}

.notif--blue:before{
background-color:#1D72F3;
}