<style type="text/css">
    .btn {
        background-color:#151a23;
        color: white;
        cursor:pointer;
        border-radius: 8px;
        padding: 4px 16px;
    }
    .btn:hover{
    	background-color:#4682b4;
    }
    .copybtn {
        background-color:#000023;
        color: white;
        cursor:pointer;
        border-radius: 8px;
        padding: 4px 16px;
    }
    .copybtn:hover{
    	background-color:#4682b4;
    }
    table.nickel, thead.nickel, tbody.nickel {
    	border-collapse: collapse;
    	border:solid 3px #ccc; 
	  	padding: 5px 15px;
 	 	-moz-border-radius: 10px;
 	 	-webkit-border-radius: 10px;
 	 	border-radius: 10px; /* future proofing */
	  	-khtml-border-radius: 10px; /* for old Konqueror browsers */
    	width:95%;
    }
    thead.nickel {
    	background-color: hsla(207, 44%, 49%, 0.5);
    }
    tr.even{
    	background-color: hsla(207, 44%, 49%, 0.25);
    }
    fieldset.nickel {
	  border:solid 3px #ccc; 
	  padding: 5px 15px;
 	 -moz-border-radius: 10px;
 	 -webkit-border-radius: 10px;
 	 border-radius: 10px; /* future proofing */
	  -khtml-border-radius: 10px; /* for old Konqueror browsers */
   }
   .top_log {
	  background-color:blue;
	  clear: both;
	  border-bottom:1px solid #000;
	}
	.left_log {
	  background-color: #fff;
	  float: left;
	  width:40%;
	  margin-left:5px;
	}
	.right_log {
 	 background-color: #fff;
 	 float: left;
 	 width: 40%;
  	margin-right:5px;
	}
    .bottom_log {
    background-color: #fff;
    /* position:absolute; bottom:0; */
    clear:both;
    float:left;
    width:100%;
    border-bottom:1px solid #000;
    }
    div.logbook {
    background-color: #fff;
    }
    /* column container */
  .colmask {
    clear:both;
    float:left;
    width:100%;      /* width of whole page */
    overflow:hidden;    /* This chops off any overhanging divs */
  }
  /* common column settings */
  .colright,
  .colmid,
  .colleft {
    float:left;
    width:100%;
    position:relative;
  }
  .col1,
  .col2,
  .col3 {
    float:left;
    position:relative;
    padding:0 0 1em 0;
    overflow:hidden;
  }
  /* 2 Column (double page) settings */
  .doublepage {
    background:#fff;    /* right column background colour */
  }
  .doublepage .colleft {
    right:50%;      /* right column width */
    background:#fff;    /* left column background colour */
  }
  .doublepage .col1 {
    width:46%;      /* left column content width (column width minus left and right padding) */
    left:52%;      /* right column width plus left column left padding */
  }
  .doublepage .col2 {
    width:46%;      /* right column content width (column width minus left and right padding) */
    left:56%;      /* (right column width) plus (left column left and right padding) plus (right column left padding) */
  }
  .locked-input {
    background-color: #c0c9d1 !important;
    color: #495057 !important;
    border: 1px solid #ced4da !important;
    cursor: not-allowed !important; /* Adds a nice touch so users know it's locked */
  }
    #ui_notifIt{
    position: fixed;
    top: 10px;
    right: 10px;
    cursor: pointer;
    overflow: hidden;
    -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    -wekbit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    z-index: 2000;
    }
    #ui_notifIt:hover{
        opacity: 1 !important;
    }
    #ui_notifIt p{
        text-align: center;
        font-family: sans-serif;
        font-size: 14px;
        padding: 0;
        margin: 0;
    }
    #notifIt_close{
        position: absolute;
        color: #FFF;
        top: 0;
        padding: 0px 5px;
        right: 0;
    }
    #notifIt_close:hover {
        background-color: rgba(255, 255, 255, 0.3);
    }

    /* Color setup */
    /* You are free to change all of this */
    #ui_notifIt.success{
        background-color: yellowgreen;
        color: white;
    }
    #ui_notifIt.error{
        background-color: orangered;
        color: white;
    }
    #ui_notifIt.warning{
        background-color: orange;
        color: white;
    }
    #ui_notifIt.info{
        background-color: deepskyblue;
        color: white;
    }
    #ui_notifIt.default{
        background-color: #EEE;
        color: #444;
    }

    /* notifit confirm */
    .notifit_confirm_bg{
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.8);
    }
    .notifit_confirm *{
        font-family: sans-serif;
    }
    .notifit_confirm{
        position: fixed;
        top: 0;
        left: 0;
        padding: 30px 30px 0px 30px;
        background-color: #EEE;
        border: 1px solid rgba(0, 0, 0, 0.1);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    }

    .notifit_confirm_accept,
    .notifit_confirm_cancel{
        padding: 10px 20px;
        color: #FFF;
        border: 1px solid rgba(0, 0, 0, 0.1);
        margin: 10px;
        outline: 0;
        cursor: pointer;
        display: inline-block;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
    }
    .notifit_confirm_accept{
        background-color: #9ACD32;
    }
    .notifit_confirm_accept:hover{
        background-color: #ABDE43;
    }

    .notifit_confirm_cancel{
        background-color: #FF4500;
    }
    .notifit_confirm_cancel:hover{
        background-color: #FF5611;
    }

    .notifit_confirm_message{
        text-align: center;
        margin-bottom: 20px;
    }


</style>