/* dmarc.how custom css */

/* remove radius from buttons and input boxes */
pre {
    white-space: pre-wrap;
}

pre code {
    color: white;
    background: rgba(212, 212, 255, 0.035); 
    display: block;
    line-height: 1.75;
    padding: 1em 1.5em;
    overflow-x: auto;
}

.btn,input[type="text"]{
    border-radius: 0;
}

.result-btn {
    margin-top: .5em;
    margin-right: 1.5em;
}

.container-fluid {
    padding: 0em 10em;
}
.jumbotron {
    padding: 2em 0em;
}

.navbar-nav {
    flex-direction: row;
}


#domainInput {
    height: calc(1em + 2rem + 2px);
}

#domainHeader {
    border-bottom: white;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    padding-bottom: 1em;
}

#dmarcResultContainer {
    background-color:#2a3049;
}

#spfResultContainer {
    background-color:#2a3049;
}

/************
 * SPF LIST *
 ************/
#ul-root {
    padding: 0!important;
}

#spfResults ul {
  margin: 0px 0px 0px 20px;
  list-style: none;
  line-height: 2em;
  font-family: Arial;
}
#spfResults ul li {
  font-size: 16px;
  position: relative;
}
#spfResults ul li:before {
  position: absolute;
  left: -15px;
  top: -1em; /* Changed for code block*/
  content: '';
  display: block;
  border-left: 1px solid #ddd;
  height: 2em; /* Changed for code block*/
  border-bottom: 1px solid #ddd;
  width: 10px;
}
#spfResults ul li:after {
  position: absolute;
  left: -15px;
  bottom: -7px;
  content: '';
  display: block;
  border-left: 1px solid #ddd;
  height: 100%;
}
#spfResults ul li.spf-root {
  margin: 0px 0px 0px -20px;
}
#spfResults ul li.spf-root:before {
  display: none;
}
#spfResults ul li.spf-root:after {
  display: none;
}
#spfResults ul li:last-child:after {
  display: none;
}

/* Style the caret/arrow */
.expand {
  cursor: pointer;
  /*user-select: none; /* Prevent text selection */
}

.expand::before {
    position: absolute;
    left: 5px;
    top: 7px;
}

/* Hide the nested list */
.nested {
  display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
  display: block;
}