body {
  background-color: #f5f5f5;
}

div.palette {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
  max-width: 100%;
  overflow-x: auto;
}

div.primitive {
    clear: both;
    padding-top: 10px;
}

div.regcontainer [type="text"],
div.regcontainer [type="email"],
div.regcontainer [type="password"]  {
  width: 100%;
  margin-bottom: 5px;
  padding: 6px 10px;
  border-radius: 4px;
}

div.primitive span.controlButtons {
    margin-left: 10px;
}

.btn-primary {
  background-color: #581687;
  border-color: #581687;
}

.btn-primary:hover {
  background-color: #581687;
  border-color: #581687;
  opacity: 0.9;
}


div.lPart {
  width: 300px !important;  
}
div.rPart {
  width: calc(100% - 300px) !important;  
}

@media screen and (max-width: 768px) {
  div.lPart {
    width: 100% !important;  
  }
  div.rPart {
    width: 100% !important;  
  }

  body div.leftMenu {
    bottom: 0;
    height: 60px;
    left: 0;
    right: 0;
    top: auto;
    width: auto ;
    z-index: 100;
  }

  body div.leftMenu a.lMenuBtn {
    display: inline-block;
    width: 60px;
  }

  body div.contContainer {
    left: 15px;
    right: 15px;
  }
  

}

/* Customize the label (the cbcontainer) */
.cbcontainer {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .cbcontainer.d-none {
    display: none;
  }
  
  /* Hide the browser's default checkbox */
  .cbcontainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
  }
  
  /* On mouse-over, add a grey background color */
  .cbcontainer:hover input ~ .checkmark {
    background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .cbcontainer input:checked ~ .checkmark {
    background-color: #2196F3;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .cbcontainer input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .cbcontainer .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .slidecontainer {
    width: 100%; /* Width of the outside container */
  }
  
  /* The slider itself */
  .slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
  }
  
  /* Mouse-over effects */
  .slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
  }
  
  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #2196F3; /* Green background */
    cursor: pointer; /* Cursor on hover */
  }
  
  .slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #2196F3; /* Green background */
    cursor: pointer; /* Cursor on hover */
  }

p.eMessage {
    color: #cd3232;
    font-size: 18px;
}



h4 {
    font-size: 18px;
    font-weight: normal;
}

div.list {
    clear: both;
}

div.children {
    padding-left: 20px;
    clear:both;
}


div.bordered {
	border: 1px solid #000;
	padding-top: 3px;
	padding-bottom: 3px;
}

div.vspace {
	width: 100%;
    height: 20px;
    clear: both;
}

div#invoice {
	margin: 20px;
}

div#invoice div.sm {
	font-size: 12px;
}

.print-content {
    display: none !important;
}

.viewNotePart .print-content {
    display: block !important;
}

.viewNotePart textarea {display: none !important;}
.viewNotePart input[type="text"],
.viewNotePart input[type="email"] 
    {display: none !important;}
.viewNotePart span.controlButtons a {display: none !important;}

.viewNotePart .cbcontainer input:checked + span.checkmark:before {
        content: "x";
    }

.viewNotePart div.filters input[type="text"],
.viewNotePart form.editable input[type="text"] {
  display: inline-block !important;
}

.viewNotePart div.filters p.well.print-content,
.viewNotePart form.editable p.well.print-content {
  display: none !important;
}

form.qnForm input[type="text"] {
  width: calc(100%-100px);
}

form.qnForm textarea {
  display: block !important;
}

div.qNote {
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

div.qNote span.buttons {
  float: right;
}

div.qNote span.by {
  font-size: 12px;
}

div.qnContainer {
  max-height: 200px;
  overflow-y: auto;
}

div.plotContainer {
  margin-bottom: 30px;
  width: 100%;
  overflow-x: auto;
}

div.header a {
  color: #000;
}

div.logoCont img {
  height: 34px;
  margin-right: 10px;

}

div.logoCont {
  font-weight: 700;
}

div.leftMenu {
  background-color: #581687;
  width: 60px;
  position: fixed;
  top: 74px;
  left: 0;
}

div.contContainer {
  position: absolute;
  left: 74px;
  right: 0;
  padding-bottom: 60px;
}

div.leftMenu a.lMenuBtn {
  display: block;
  padding: 10px;
  border-bottom: 1px solid #008667;
}
div.leftMenu a.lMenuBtn img {
  width: 40px;
}

    
@media print {
  .noPrint {
    display: none !important;
  }

  div.leftMenu {
    display: none;
  }
  p {
    font-size: 12px;
  }
  .cbcontainer {
    padding-left: 15px;
  }

    .authorOnly {
        display: none !important;
    }

    .print-content {
        display: block !important;
        
    }

    p.print-content {
        margin-bottom: 3px !important;
        padding: 3px !important;
    }

    h4 {
        margin-top: 3px;
        margin-bottom: 5px;
        font-size: 12px;
    }

    form {
        border: none !important;
        padding: none !important;
    }

    label.cbcontainer {
        margin-bottom: 8px !important;
        font-size: 12px;
        border: 1px dashed #ddd;
    }

    div.primitive {
        padding-top: 0 !important;
    }
    
    textarea {display: none !important;}
    input[type="text"],
    input[type="email"] 
    {display: none !important;}

    .cbcontainer input:checked + span.checkmark:before {
        content: "x";
    }

  body > div > div {
    display: none;
  }
  
  div.printable {
    display: block;
  }

  div#prescription div.headerrow {
       margin-top: -60px;
  }

  div.noprint,
  button.noprint {
       display: none;
  }

  
  body * {
    visibility: hidden;
  }
  div.printable * {
    visibility: visible;
  }

  
  div.printable a.btn {
  	visibility: hidden;
  }

  
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        float: left;
        padding-left: 5px;
        padding-right: 5px;
   }
   .col-md-12 {
        width: 100%;
   }
   .col-md-11 {
        width: 100%;
   }
   .col-md-10 {
        width: 100%;
   }
   .col-md-9 {
        width: 75%;
   }
   .col-md-8 {
        width: 66.66666667%;
   }
   .col-md-7 {
        width: 58.33333333%;
   }
   .col-md-6 {
        width: 50%;
   }
   .col-md-5 {
        width: 41.66666667%;
   }
   .col-md-4 {
        width: 33.33333333%;
   }
   .col-md-3 {
        width: 25%;
   }
   .col-md-2 {
        width: 16.66666667%;
   }
   .col-md-1 {
        width: 8.33333333%;
   }

   body > div > div.col-md-1 {
       display: none;
   }

   body > div > div.col-md-10 {
    width: 100%;
    margin-left: -30px;
    margin-right: -30px;
}

   body > div.printError.print-content {
        visibility: visible !important;
        display: block !important; 
    }

    body > div.row {
        margin-top: -40px;
    }
}

div.tviewh {
	background: #ccc;
}

div.tview.row {
	display: -webkit-box;
	  display: -webkit-flex;
	  display: -ms-flexbox;
	  display:         flex;
	  flex-wrap: wrap;
}

div.tview.row  > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

div.tview.row > div:nth-child(even) {
	background: #eee;
}

form {
	border-radius: 10px;
	padding: 20px;
}

form > p {
	padding-bottom: 10px;
	padding-top: 2px;
	border-bottom: 1px solid #eee;
}

form label {
	display: inline-block;
	text-align: left;
	margin-right: 10px;
}

form.inlineForm {
	border: none;
	padding: 5px;
}


.btn {
	margin-right: 20px;
}

textarea {
	width: 100%;
	max-width: 100%;
}

input[type="text"],
input[type="email"] {
	width: 400px;
	max-width: 100%;
}

select {
	width: 400px;
	max-width: 100%;
}

p.datetime {
	margin-left: 168px;
}

p.datetime input.vDateField {
	margin-left: 8px;
}

div.colheader {
	font-weight: bold;
	text-decoration: underline;
}

button[disabled], 
html input[disabled],
html textarea[disabled],
html select[disabled]
{
    cursor: default;
    background: #eee;
}

span.warning {
     color: #a33;
}

button.cancelbtn {
     margin-left: 100px;
     background: #ccc;
}

div.header {
    padding: 20px;
    background-color: #fff;
}

div.row.tview .col-md-1,
div.row.tview .col-md-2 {
    padding-bottom: 10px;
}

button.filterBtn {
    background: #fff;
    color: #447e9b;
    border: 1px solid #eee;
    outline: none;
}

button.filterBtn:hover {
    background: #efefef;
    color: #447e9b;
    border: 1px solid #eee;
}

button.filterBtn.active {
    background:#447e9b;
    color: #fff;
    border: 1px solid #eee;
}

p.well.print-content {
    margin-bottom: 3px;

}

div.allNotes {
    margin-bottom: 100px;
}

a.white {
    color: #fff;
}