.button{
  padding-left: 10px;
  padding-right: 10px;
}
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;} 

#dataTableContainer,
#dataTableContainer>tbody,
#dataTableContainer>tbody>tr,
#dataTableContainer>tbody>tr>td {
  display: block;
}


table.dataTable {
border-collapse: collapse;
width: 100%;
}

 table.dataTable tr{
    color: black !important;
  }
  
  .clicked-table tbody tr.selected {
    color: white !important;
    background-color:black;    
}

 .clicked-table-cell tbody td.selected {
    color: red !important;
    background-color:#ffa;    
}


.modal-header {
    border-bottom:1px solid #eee;
    background-color: #476cda;
    color: #fff;
}
.modal-header-other{
    border-bottom:1px solid #eee;
    background-color: #6610f2;
    color: #fff;   
}

.dataTables_scrollHeadInner {
   width: 100% !important;
}
.dataTables_scrollHeadInner table {
    width: 100% !important;
}

.topics tr { line-height: 14px; }
 .topics th {
    background-color: #476cda;
    color: white;
}

.topics td {  padding: 5px;
               word-wrap:break-word; }


.topics2 tr { line-height: 8px; }
.topics2 th {
    background-color: #476cda;
    color: white;
}

.topics3 tr { line-height: 8px; }
.topics3 th {
    background-color:#6610f2 ;
    color: white;
}

.topics4 tr { line-height: 5px; }
.topics4 td { font-size: 0.85em;; }
.topics4 th {
    background-color: #476cda;
    color: white;
    font-size: 0.8em;
    line-height: 12px;
}

.topics5 tr { line-height: 12px; }
.topics5 td { font-size: 0.85em;
               word-wrap:break-word; 
           line-height: 12px;
       padding-left: 2px;
       padding-right: 3px;
       padding-top: 2px;
       padding-bottom: 2px;}

.topics5 th {
    background-color: #476cda;
    color: white;
    font-size: 0.8em;
    line-height: 12px;
    word-wrap:break-word;
}

.topics6 tr { line-height: 12px; }
.topics6 td { font-size: 0.75em;
           line-height: 25px;
       padding-left: 2px;
       padding-right: 3px;
       padding-top: 2px;
       padding-bottom: 2px;}

.topics6 th {
    background-color: #476cda;
    color: white;
    font-size: 0.75em;
    line-height: 12px;
    word-wrap:break-word;
    
}     

.dataTables_filter {
   float: right !important;
}

.datepicker {
background-color: #fff ;
color: #333 ;
border-color: #000;
}

.col-form-label {
    color: darkblue;
    margin-top: -5px;
    padding-bottom: 15px;

}


.dataTable tbody tr:hover {
  background-color: #4e73df;
  color: white!important;

}

.dataTable tbody tr:hover > .sorting_1 {
  background-color: #4e73df;
  color: white!important;
}

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
 max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events:all;
}