/* CSS files add styling rules to your content */

/*   Pub Med 0E375F
Scholar 1973E8 (Google)
UptoDate 87C654
ePocrates 07162C
Images DDA05E
ICD-10 2E85ED
Cochrane 962E91
News (Google) 1973E8 */

<style>
<meta name="viewport" content="width=device-width, initial-scale=1">


body {
  margin: 10px;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #FFFFFF;

}

.buffer {
    padding: 40px;
}

.background {
    background-color: #FFFFFF;
}

.topnav {
  overflow: hidden;
  background-color: #0C1868;
  font-size: 17px;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


.topnav a.active {
  background-color: #C9CDEC;
  color: black;
}

.topnav a:hover {
  background-color: #000;
  color: white;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
  font-size: 17px;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 17px; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  color: white;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  background-color: black;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: gray;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.dropbtn:focus {
    background-color: black;
}

.show {
  display: block;
}

/* FLEX CONTAINER */

.flex-container {
    display: flex; /* Establish flex container */
    /* justify-content: space-between; /* Space out items */
    align-items: flex-start top; /* Align items vertically */
    padding: 10px;
    flex-wrap: nowrap;
    overflow: auto;
}
@media (max-width: 600px) {
    .flex-container {
        display: flex;
        flex-direction: row;
        padding: 1px;
    }
}

.narrow-column {
  width: 100px; /* Do not grow, do not shrink, start at 200px width */
  /* Your existing styles */
  padding: 10px;
  /*border: 1px solid #ccc; */
  margin: 0px;
}


.wide-column {
  flex-grow: .7; /* Grow to absorb extra space */
  margin: 0 px;
  padding: 20px;
  /* border: 1px solid #ccc; */
}


.sidebar {
    width: 280px;
    margin: 0px;
    padding: 10px;
    /* border: 1px solid #ccc; */
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
}

.grid-item {
  font-size: 16px;
  text-align: left;
  padding: 6px;
  /* border: 1px solid #ccc; */
}

.grid-item-lrg {
  padding: 0px;
  /* border: 1px solid #ccc; */
}

h1 {
  font-style: italic;
  color: black;
}

h2 {
  text-decoration: none;
  color: gray;
}

h3 {
    text-decoration: none;
    color: #696969;   
}

h4 {
    text-decoration: none;
    color: #000066;    
}

h5 {
    text-decoration: none;
    color: black;
}

h6 {
    text-decoration: none;
    color: black;
}

a {
  text-decoration: none;
}

em {
    text-decoration: none;
    color: blue;
}

.black-text {
    color: black;
    padding: 40px;
    text-align: justify;
    text-align-last: left; 
    
}

.black-med {
    color: black;
    padding: 30px;
    text-align: center;
    
}

.black-small {
    color: black;
    padding: 20px;
    text-align: justify;
    text-align-last: left; 
    font-size: 12px;
    
}


/* Include the padding and border in an element's total width and height */
* {
  box-sizing: border-box;
  color:000001;
}

input[type=search] {
  width: 52%;
  height: 36px;  
  box-sizing: border-box; 
  border: 2px solid #ccc;
  border-radius: 12px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1), 0 2px 4px 0 rgba(0,0,0,0.06);
  font-size: 16px;
  background-color: white;
  background-position: 22px 22px; 
  background-repeat: no-repeat;
  padding: 14px 22px 14px 42px;
}

input[type="text"] {
    width: 52%;
    height: 36px;
    padding: 10px;
    font-size: 16px; /* Size of the text that users enter */
}

/* Style for the placeholder text */
input[type="text"]::placeholder {
    color: gray;
    font-size: 14px; /* Different size for the placeholder text */
}

.button { /* button is the search buttons at the bottom */
  background-color: #baeb34; /* lime green*/
  border: 2px solid #ccc;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: #606060;
  width: 150px;
  height: 90px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 6px;
  padding: 10px;
  cursor: pointer;
}

@media (max-width: 600px) {
    .button {
        width: 100px;
        height: 60px;
        font-size: 12px;
        margin: 2px;
        padding: 2px;
    }
}

  .button:hover {
  background-color: #2a4ba3; /* dark blue */
  color: white;
}

.buttonSM { /* small url button */
  background-color: #1973E8; /* Google blue */
  border: 2px solid #606060
  border-radius: 4px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: white;
  width: 100px;
  height: 56px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px;
  padding: 2px;
  cursor: pointer;
}

  .buttonSM:hover {
  background-color: #0B82F6;
  color: black;
  border: 2pm solid #606060
}

.button1 { /* button1 is Gmail button */
  background-color: #ddd; 
  border: 2px solid #b53737;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: black;
  width: 80px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  padding: 0px;
  cursor: pointer;
}

 .button1:hover {
  background-color: #b53737;
  color: white;
}

.buttonBard { 
  background-color: #ddd; 
  border: 2px solid #000000;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: black;
  width: 80px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  padding: 0px;
  cursor: pointer;
}

 .buttonBard:hover {
  background-color: #000000;
  color: white;
}

.button2 { /* button2 is for Outlook buttons */
  background-color: #ddd; 
  color: black; 
  border: 2px solid #008CBA;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: black;
  width: 80px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  padding: 0px;
  cursor: pointer;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

.button3{ /* button3 is ChatGPT button */
  background-color: #ddd; 
  color: black; 
  border: 2px solid #10A37F;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: black;
  width: 80px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;  padding: 0px;
  cursor: pointer;
}

.button3:hover {
  background-color: #10A37F;
  color: white;
}

.button4 { 
  background-color: #ddd; 
  border: 2px solid #430297;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: black;
  width: 130px;
  height: 110px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 0px;
  cursor: pointer;
}

.button4:hover {
  background-color: #430297;
  color: white;
}

.button5 { /* button5 is the new blue color for regular buttons */
  background-color: #C7F6FD; 
  border: 2px solid #028797;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: black;
  width: 130px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 0px;
  cursor: pointer;
}

.button5:hover {
  background-color: #10D1EC;
  color: white;
  
}


.buttonPubMed { /* button5 is the new blue color for regular buttons */
  background-color: #FAFAFA; 
  border: 3px solid #0E375F;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: black;
  width: 130px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 0px;
  cursor: pointer;
}

.buttonPubMed:hover {
  background-color: #0E375F;
  color: white;
}

.buttonMedline { /* button5 is the new blue color for regular buttons */
  background-color: #FAFAFA; 
  border: 3px solid #39B54A;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: black;
  width: 130px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 0px;
  cursor: pointer;
}

.buttonMedline:hover {
  background-color: #39B54A;
  color: white;
}


.buttonGoogle { /* button5 is the new blue color Google */
  background-color: #FAFAFA; 
  border: 3px solid #1973E8;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: black;
  width: 130px;
  height: 80px;
  text-align: center; /* previously "center" */
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 0px;
  cursor: pointer;
}

.buttonGoogle:hover {
  background-color: #1973E8;
  color: white;
  
}

.buttonUpToDate { /* button5 is the new blue color Google */
  background-color: #FAFAFA; 
  border: 3px solid #87C654;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: black;
  width: 130px;
  height: 80px;
  text-align:center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 0px;
  cursor: pointer;
}

.buttonUpToDate:hover {
  background-color: #87C654;
  color: white;
  
}

.buttonEpocrates { /* button5 is the new blue color for regular buttons */
  background-color: #FAFAFA; 
  border: 3px solid #07162C;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: black;
  width: 130px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 0px;
  cursor: pointer;
}

.buttonEpocrates:hover {
  background-color: #07162C;
  color: white;
  
}

.buttonImages { /* button5 is the new blue color for regular buttons */
  background-color: #FAFAFA; 
  border: 3px solid #DDA05E;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: black;
  width: 130px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 0px;
  cursor: pointer;
}

.buttonImages:hover {
  background-color: #DDA05E;
  color: white;
  
}

.buttonICD10 { /* button5 is the new blue color for regular buttons */
  background-color: #FAFAFA; 
  border: 3px solid #2E85ED;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: black;
  width: 130px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 0px;
  cursor: pointer;
}

.buttonICD10:hover {
  background-color: #2E85ED;
  color: white;
  
}

.buttonCochrane { /* button5 is the new blue color for regular buttons */
  background-color: #FAFAFA; 
  border: 3px solid #962E91;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: black;
  width: 130px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 0px;
  cursor: pointer;
}

.buttonCochrane:hover {
  background-color: #962E91;
  color: white;
  
}

.buttonOpenMD { /* button5 is the new blue color for regular buttons */
  background-color: #FAFAFA; 
  border: 3px solid #0059AB;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: black;
  width: 130px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 0px;
  cursor: pointer;
}

.buttonOpenMD:hover {
  background-color: #0059AB;
  color: white;
}



.buttonRxiv { /* button5 is the new blue color for regular buttons */
  background-color: #FAFAFA; 
  border: 3px solid #BD2734;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: black;
  width: 130px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 0px;
  cursor: pointer;
}

.buttonRxiv:hover {
  background-color: #BD2734;
  color: white;
  
}

.buttonDoximity { /* button5 is the new blue color for regular buttons */
  background-color: #FAFAFA; 
  border: 3px solid #1376D3;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: black;
  width: 130px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 0px;
  cursor: pointer;
}

.buttonDoximity:hover {
  background-color: #1376D3;
  color: white;
  
}



.buttonLinkedIn { /* button5 is the new blue color for regular buttons */
  background-color: #FAFAFA; 
  border: 3px solid #0966C2;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: black;
  width: 130px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 0px;
  cursor: pointer;
}

.buttonLinkedIn:hover {
  background-color: #0966C2;
  color: white;
  
}

/* RAINBOW

.buttonR {
  /* Bard BUTTON  base styles
  background-color: #ddd;
  color: black;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.12);
  width: 80px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  padding: 0px;
  cursor: pointer;

  /* Rainbow gradient border
  border: 2px solid transparent;
  border-radius: 12px;
  border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;

  /* Rainbow gradient on hover
  &:hover {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    color: white;
  }
}
*/

.buttonPartyRock { /* button5 is the new blue color for regular buttons */
  background-color: #D3FF5C; 
  border: 3px solid #000000;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: black;
  width: 130px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 0px;
  cursor: pointer;
}

.buttonPartyRock:hover {
  background-color: #000000;
  color: #D3FF5C;
}


.buttonSurvey { /* button1 is Gmail button */
  background-color: #DF28CF; 
  border: 2px solid #028797;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12);
  color: white;
  width: 100px;
  height: 60px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 0px;
  cursor: pointer;
}

.buttonSurvey:hover {
  background-color: #10D1EC;
  color: white;
}

.footer {
    background-color: #0C1868;
    color: white;
}