.table {
	color: var(--font-color);
	
	.thead-primary{
	    th{
		  color: $cyan;
		  border-color: $cyan;
	    }
	}
	.thead-success{
	    th{
		  color: $green;
		  border-color: $green;
	    }
	}
	.thead-danger{
	    th{
		  color: $red;
		  border-color: $red;
	    }
	}
	.thead-info{
	    th{
		  color: $info;
		  border-color: $info;
	    }
	}
	.thead-purple{
	    th{
		  color: $purple;
		  border-color: $purple;
	    }
	}

	thead{
		th{
			font-weight: $font-weight-400;
			border-width: 1px;
		}
	}
      
	tr {
		td, th {
			vertical-align: middle;
			white-space: nowrap;
			border-color: var(--border-color);
			font-size: 14px;
		}
	}
	&.breakpoint{
		.footable-toggle{
			width: 15px;
			height: 15px;
			display: inline-block;
	
			&::after{
				content: '\f067';
				font-family: 'FontAwesome';
				font-size: 10px;
			}
		}
	}
	&.table-custom{
        border-collapse: separate !important;

        &.spacing5{
            border-spacing: 0 5px !important;
        }
        &.spacing8{
            border-spacing: 0 8px !important;
        }
    
        thead{
            th{
                text-transform: uppercase;
                border-top: 0;
            }
        }
        tfoot{
            th{
                border-bottom: 0; 
            }
        }
        tbody tr{
            background: var(--white-color);
            border-radius: $border-radius-small;
    
            &:hover{
                background-color: var(--font-eee);
            }
		}
		.fancy-checkbox input[type="checkbox"]+span:before{
			margin: 0;
		}
	}
	&.table-hover{
		tbody tr:hover{
			color: var(--font-color);
		}
	}
}