code {
  background-color: lightgray;
  color:red;
}


.cmd {
    margin: .2em;
    padding: .2em;
    background: #d2f4f9;
    border: 4px black;
}



.explain_block {
    margin: .2em;
    padding: .2em;
    background: #8FBC8F;
}

/*------------ warning box --------- */

div.warning{
  border: 4px #e0471c;
  border-style: solid;
  padding: 1em;
  margin: 1em 0;
  padding-left: 100px;
  background-size: 70px;
  background-repeat: no-repeat;
  background-position: 15px center;
  min-height: 120px;
  background-color: #e8ebee;
  background-image: url("./resources/images/warning.png");
}


div.itn{
  padding: 1em;
  margin: 1em 0;
  min-height: 120px;
  border: 4px #e0471c;
  border-style: solid;
  outline: 5px solid #193a5c;
  border-style: solid;
  background-size: 70px;
  background-position: 15px center;
  background-image: url("resources/images/ITN_logo.png");
  padding: 1em;
  margin: 1em 0;
  padding-left: 100px;
  min-height: 120px;
  background-repeat: no-repeat;
}

div.notice{
  border: 4px #68ace5;
  border-style: solid;
  background-size: 70px;
  background-position: 15px center;
  background-color: #e8ebee;
  background-image: url("resources/images/note.png");
  padding: 1em;
  margin: 1em 0;
  padding-left: 100px;
  min-height: 120px;
  background-repeat: no-repeat;
}
}

/*------------- table code---------------- */
/*table code from https://jsfiddle.net/davidThomas/vk7eP/3/*/

.myStyle table {
    border-collapse: collapse;
    text-align: left;


}


.myStyle {
    font: normal 12px/150% Arial, Helvetica, sans-serif;
    background: #fff;
    overflow: hidden: auto;/*if there is overflow add scrolling as needed*/
    border: 1px solid #801D99;
    -webkit-border-radius: 6px; /*rounded boarder*/
    /*-moz-border-radius: 6px;*/
   /* border-radius: 6px;*/
    width:60%;/*making table less wide*/
    margin-left: auto;/*centering table*/
    margin-right: auto;/*centering table*/

}

/* gray zebra-striped table rows */
.myStyle tr:nth-child(even) {
  background-color: #f2f2f2
}

/* adding space from boarder to text */
.myStyle table td, .myStyle table th {
    padding: 3px 3px;
}


/* purple header*/
.myStyle table thead th {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #801D99), color-stop(1, #801D99));
    background:-moz-linear-gradient(center top, #801D99 5%, #801D99 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#801D99', endColorstr='#801D99');
    background-color:#801D99;
    color:#FFFFFF;
    font-size: 15px;
    font-weight: bold;
    border-left: 1px solid #801D99;
}

/*
.myStyle table thead th:first-child {
    border: 1px solid #801D99;
}
*/

/* purple text in the table */
.myStyle table tbody td {
    color: #801D99;
    font-size: 13px;
    /*border-bottom: 1px solid #995993;*/
    font-weight: normal;
}

/*
.myStyle table tbody td:first-child {
    border-left: none;
}

.myStyle table tbody tr:last-child td {
    border-bottom: none;
}
*/

/*------------- making images with shadows---------------- */


.img_shad{
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}


/*------------- checkbox alignment for html checkbox---------------- */
/*ul {
  list-style-position: inside;
  padding-left: 0;
  font-weight: normal
}*/



/*------------- checkbox alignment for markdown checkbox---------------- */

input[type="checkbox"] {
        margin-right: 0.5ch;
      }

/*------------ buttons for links ---------------------- */

.link_button {
    border-radius: 8px;
    border: 1px solid #black;
    background: #414487FF;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
}


.slido_button {
    border-radius: 8px;
    border: 1px solid #black;
    background: green;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
}

.resource_button {
    border-radius: 8px;
    border: 1px solid #black;
    background: #e1ad01;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
}


/*------------- button link text color---------------- */


.link_button a:link{
    color: #fff;
}

.slido_button a:link{
    color: #fff;
}

.resource_button a:link{
    color: #000000;
}

/*------------- visited link button text color---------------- */


.link_button a:visited{
    color: #fff;
}

.slido_button a:visited{
    color: #fff;
}

.resource_button a:visited{
    color: #000000;
}

/* To add some space below the navigation bar */

 body {
  margin-top: 100px;
}


/* add some color - if you want color behind a major point on your website */

.banner_color {
  background-color: lightblue;
  font-weight:bold;

}

/* Style buttons - if you want some text centered and bolded */

.center {
  font-weight:bold;
  text-align: center;
}

/* Style buttons - if you want to have a button */
.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 8px 20px;
  cursor: pointer;
  font-size: 14px;
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: RoyalBlue;
}

.click_to_expand_block {
    padding: 1em;
    padding-top: .5em;
    border: 1px grey;
    background: #E8E8E8;
    color: black;
}