/*-------------------------------------------*/
/* BOXY                                      */
/*-------------------------------------------*/

:root {
    --color-primary: #4C979F;
    --color-border: #ccc;
    --color-text: #424949;
    --color-code-bg: #f4f6f6;
    --color-code-inline: #5d6d7e;
    --color-boxy-bg: #fbfcfc;
    --color-shadow: #E0E0E0;
    --color-optional: #bf6300;
    --font-base: 'Source Sans Pro';
    --font-highlight: 'Source Sans Pro';
    --font-code: 'Ubuntu Mono';
}

after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.boxy {
    /* border: 1px solid var(--color-primary); */
    background-color: var(--color-boxy-bg);
    border: 1px solid var(--color-border);
    border-left: 6px solid var(--color-border);
    border-radius: 0px 4px 4px 0px;
    padding: 10px 10px 0px 10px;
    margin: 10px 0px 10px 0px;
    position: relative;
}

.boxy-primary {
    color: #3c787f;
    background-color: #edf4f5;
    border-color: #c9dfe2;
    border-left-color: #3c787f;
}

.boxy-myinfo {
  color: rgb(0,71,133);
  background-color: #edf4f5;
  border-color: rgb(64,177,204);
  border-left-color: rgb(0,71,133);
}

.boxy-primary::before {
    background-color: #3c787f !important;
}

.boxy-orange::before {
    background-color: #bf6300 !important;
}

.boxy-success::before {
    background-color: #3c763d !important;
}

.boxy-warning::before {
    background-color: #8a6d3b !important;
}

.boxy-danger::before {
    background-color: #a94442 !important;
}

.boxy-info::before {
    background-color: #31708f !important;
}

/*-------------------------------------------*/
/* END                                       */
/*-------------------------------------------*/

/*-------------------------------------------*/
/* ACCORDION                                 */
/*-------------------------------------------*/

/* Distill navbar background color #0F2E3D*/
.accordion {
  background-color: rgb(0,71,133); /* #0F2E3D*/
  color: rgb(222,235,247);
  cursor: arrow;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 14px;
  font-weight: bold;
  transition: 0.4s;
  margin-bottom: 30px;
}

.active, .accordion:hover {
  background-color: rgb(79,129,189);
}

.accordion:after {
  content: '\002B'; 
  color: rgb(222,235,247);
  font-weight: bold;
  float: right;
  margin-left: 7px;
}

.active:after {
  content: "\2212";  
}

/*
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  font-size: 18px;
}
*/
.panel {
    /* border: 1px solid var(--color-primary); */
    background-color: var(--color-boxy-bg);
    /*border: 1px solid var(--color-border);*/
    border-left: 6px solid var(--color-border);
    border-radius: 0px 4px 4px 0px;
    padding: 0 18px;
    /*padding: 10px 10px 0px 10px;*/
    margin: 10px 0px 10px 0px;
    /*position: relative;*/
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}


/*-------------------------------------------*/
/* END                                       */
/*-------------------------------------------*/