﻿body {
}

.my-color1, .my-hover-color1:hover {
    color: #000 !important;
    background-color: #8bc34a !important
}

.my-color2, .my-hover-color2:hover {
    color: #000 !important;
    background-color: wheat !important
}

.my-color3, .my-hover-color2:hover {
    color: #000 !important;
    background-color: lightseagreen !important
}

.my-color4, .my-hover-color2:hover {
    color: #000 !important;
    background-color: lavender !important
}

.my-color5 {
    color: red !important;
}


.my-outtabbackcolor {
    background-color: #8bc34a
}

.my-bgcolor1 {
    background-color: #f4f4f2
}

a {
    color: black !important;
    text-decoration: none !important;
}

/*a:visited {
        color: black;
        text-decoration: none !important;
    }

    a:hover {
        color: black !important;
        text-decoration: none !important;
    }

    a:focus {
        color: black;
        text-decoration: none !important;
    }

    a:active {
        color: black;
        text-decoration: none !important;
    }*/


/*Front page thumbnail*/
.container {
    height: 200px;
    position: relative;
}

.card {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
}

    .face.front {
        /*background: #000;*/
    }

    .face.back {
        display: block;
        box-sizing: border-box;
        padding: 20px;
        color: white;
        text-align: left;
        background-color: #333;
    }

.container {
    perspective: 800px;
}

.card {
    transform-style: preserve-3d;
    transition: all 1.0s linear;
}

    .card:hover .front {
        transform: rotateY(-180deg);
    }

    .card:hover .back {
        transform: rotateY(0deg);
    }

.face {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: 0.5s;
}

    .face.front {
        transform: rotateY(0deg);
    }

    .face.back {
        transform: rotateY(180deg);
    }

.MyTable tr:hover {
    background-color: #00ff80 !important;
}

/*table design*/
.TFtable {
    border-collapse: collapse;
}

    .TFtable td {
        padding: 7px;
        border: #4e95f4 1px solid;
    }

    .TFtable tr {
        background: #b8d1f3;
    }

        .TFtable tr:nth-child(odd) {
            background: #b8d1f3;
        }

        .TFtable tr:nth-child(even) {
            background: #dae5f4;
        }

        .TFtable tr:hover {
            background: silver;
            cursor: pointer;
        }
