/* Makeshift CSS Reset */

/*
    Console warning:
    Selector expected. Ruleset ignored due to bad selector.

    As there's no indication of what the selector should be, this has been commented out.
    Given it was being ignored, the only effect is that there is now no warning.
*/
/*
{
    margin: 0;
    padding: 0;
}
*/

html {
  
    font-family: "Arial"; 
    font-size: 13px;
}
body {
    margin: 0 auto;
    width: 1000px;
    min-height: 100%;
    /*font-family: "Lucida Sans Unicode", "Lucida Grande", "Bitstream Vera Sans", "Verdana", sans-serif;*/
    /*background: #f0f0f0;*/
    /*font-family: "Arial, Lucida Grande, Lucida Sans, sans-serif";*/
    background: #FFFFFF;
    /*
        This "padding" property was hard-coded in the HTML (specifically kdcompute.tt).
        Removed from there and added here.
        A relative value (e.g. 1.5em) would be preferable to
            the original hard-coded one (i.e. 20px): left as is for now.
    */
    padding: 20px;
}

.header {

    width: 1000px;
    background: #FFFFFF;
    border-radius: 5px;
}

.footer {

    text-align: center;
    font-size: 14px;
    background: #FFFFFF;
    padding: 5px;
    height: 50px;
    border-radius: 5px;
    position: relative;
    display: block;
}

select {

    border-radius: 3px;
    margin: 0;
    display: inline-block;
    background-color: #f5f0de;
    border: none;
}

a {
  
    outline: none;
    text-decoration: none;
    color: #4D94DB;
}

ul {

    list-style-type: none;
    padding: 3px;
    margin: 0;
}

ul li {

    padding: 5px;
}

ul li.first-item {
  
    margin-top: 10px;
}

a:hover {

    text-decoration: underline;
}

a:visited {

    text-decoration: none;
    color: #4D94DB;
}

.header-text {
  
    color: #045F78;
    font-size: 14px;
    text-align: right;
    margin-top: 40px;
    width: 500px;
    display: block;
    float: right;
}

.widget-link {
  
    text-decoration: none;
    color: #4D94DB !important;
}

.widget-link:active {
  
    background-color:#FFFFFF;
}

h1 {

    padding: 10px;
}

h2 {
    font-size: 28px;
    color: #000;
    padding: 22px 0;
}

h3 {
    font-size: 18px;
    color: #000;
    padding: 11px 0;
}

p {
    line-height: 1.5em;
    margin: 1.5em 0;
}

/*
    Console warning:
    Expected identifier for class selector but found ‘ ’. Ruleset ignored due to bad selector.

    Changed
    header, footer, aside, nav. article {
    to
    header, footer, aside, nav, article {

    That should now work as indicated by the original comment.
*/
/* Tell the browser to render HTML 5 elements as block */
/*
header, footer, aside, nav. article {
*/
header, footer, aside, nav, article {
    display: block;
}

.login-form {
  
    display: block;
    border-radius: 5px;
    border: 2px solid #4792cc;
    width: 400px;
    margin: 0 auto;
}

.login-form-header {
  
    border-radius: 2px;
    background-color: #4792cc;
    width: 390px;
    color: #FFFFFF;
    padding: 5px;
    height: 20px;
    font-weight: bold;
    font-size: 14px;
}

.login-form-content {
  
    background-color: #F0F8FF;
    font-size: 14px;
    color: #000000;
    padding: 20px;
    text-align: center;
}

.login-button, .fancy-button {
  
    color: #FFFFFF !important;
    font-weight:bold;
    text-align:center;
    border-radius: 5px;
    background-color: #4792CC;
    padding: 7px;
    width: 80px;
    display: inline-block;
}

.login-button:hover, .fancy-button:hover {
  
    background-color:#057d9e;
    text-decoration: none;
    border-radius: 5px;
}

.main-content {

    display: block;
    width: inherit;
    overflow: auto;
    border-radius: 5px;
}

.content-wrapper {

    width: inherit;
    position: absolute;
    left: 50%;
    display: inline-block;
    transform: translate(-50%, 0);
}

.main-menu-panel {

    text-align: left;
    font-weight: bold;
    font-size: 14px;
    background-color: #4792cc;
    border-radius: 5px;
}

.main-menu-panel a:link, .main-menu-panel a:visited {
 
    color: #fff;
    display:block;
    font-weight:bold;
    text-align:center;
    padding:15px;
}
.main-menu-panel a:hover, .main-menu-panel a:active {
  
    background-color:#057d9e;
    text-decoration: none;
    border-radius: 5px;
}

.main-menu-panel ul {
    
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}

.main-menu-panel li {
    
    float: left;
    padding: 0;
}

.header-logo {
  
    width: 300px;
    height: 120px;
    padding: 5px;
}

/* Algorithm form page */
.algo-selection-panel {
  
    display: table-cell;
    width: 224px;
    padding: 10px;
    border-radius: 5px;
}

.algo-selection-panel a:active {
  
    background-color: #FFFFFF;
}

.algo-selected {

    background-color: #99CCFF;
}

.algo-form {

    padding-top: 25px;
    margin-bottom: 3px;
}

.algo-form-content {

    width: 750px;
    padding-left: 20px;
    display: table-cell;
}

.algo-search-box {
  
    width: 200px;
    padding: 3px;
    margin-left: -5px;
    background:url(images/clear-search-box-icon.png) no-repeat right -20px center;
    border: 2px solid #A6C9E2;
    border-radius: 5px;
}

.algo-search-box.x {
  
    background-position: right 5px center;
    cursor: pointer;
}

.algo-search-box.onX {
  
    cursor: pointer;
}

.algo-search-box-focused {
  
    -webkit-box-shadow: 0px 0px 3px 0px rgba(50, 255, 80, 0.75);
    box-shadow:         0px 0px 3px 0px rgba(50, 255, 80, 0.75); 
}

li.algo-list ul {
  
    padding: 2px;
    display: none;
}

li.algo-list-block ul {
  
    padding: 2px;
    display: block;
}

.option-list {

    padding: 2px;
    font-size: 12px;
}

.wait { 

    background: url(images/spinner.gif) left top no-repeat;
    padding: 2px;
    padding-left: 20px;
}

.form-container {

    padding: 15px;
    background: #FFFFFF;
    min-height: 250px;
    border-radius: 5px;
}


table td, th { 
  
    border: 1px solid #eee;
    border-collapse: collapse;
    padding: .6em 10px; 
    text-align: left; 
  
}

.left-panel-wrapper {
  
    display: inline-block;
    width: 780px;
    border-radius: 5px;
}

.right-panel-wrapper {
  
    float: right;
    width: inherit;
    padding: 5px;
    margin-right: 10px;
    font-weight: bold;
}

.form-field {
 
    width: 700px;
    margin: 0 auto;
    position: relative;
}

.label-error {
 
    width: 700px;
    left: 0;
    right: 0;
    top: 20px;
    padding: 3px;
    color: red; 
    display: block; 
    float: none;
    position: absolute;
}

.dialog-header {

    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.page-number {
 
    padding: 6px;
    border: 1px solid;
    border-color: #045f78;
    background-color: #4792cc;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    margin: 5px;
}

.selected-page {
  
    border: 2px #FF9933 solid;
}

.ui-selected {
  
    background-color: #99ccff; 
}

.spinner {
    position: fixed !important;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:99999 !important;
    overflow: auto;
    width: 150px; /* width of the spinner gif */
    height: 152px; /*hight of the spinner gif +2px to fix IE8 issue */
}

table.dataTable {

  border: 1px solid #a6c9e2;
  border-spacing: 2px;
}

table.dataTable thead {

  color: #fff;
  background-color: #4792cc;
}

.dataTables_paginate {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dataTables_info, .dataTables_wrapper {
  float: none !important;
  text-align: center !important;
}

.paginate_button {
  font-size: 14px;
  font-weight: bold;
}

.header-row {

  text-align: center;
}