.flip-box { background-color: transparent;    width: 100%;    height: 200px;   border: 1px solid #f1f1f1;  perspective: 1000px;    text-align: center;}
.flip-box2 {background-color: transparent;  width: 100%;   height: 100px;  border: 1px solid #f1f1f1;   perspective: 5000px;    text-align: center;}
.flip-box-inner {  position: relative;    width: 100%;    height: 100%;    text-align: center;    transition: transform 0.8s;    transform-style: preserve-3d;}
.flip-box:hover .flip-box-inner { transform: rotateY(180deg);}
.flip-box2:hover .flip-box-inner { transform: rotateY(180deg);}
.flip-box-front, .flip-box-back {  position: absolute;  width: 100%;  height: 100%;-webkit-backface-visibility: hidden; /* Safari */  backface-visibility: hidden;}

.flip-box-front {color: black;}
.flip-box-back {   background-color: #fff; line-height:150%;  color: black;   transform: rotateY(180deg); display: flex; flex-direction: column;  justify-content: center; }
.flip-text-front {   display: flex;    flex-direction: column;    justify-content: center;}

.roundimg {border-radius: 50%;}
.roundimg2 {border-radius: 10px;}
.roundimg3 {border-radius: 30px;}
.roundimg4 { width:98%; border-radius: 40px;border:1px solid #e7e6e6;padding:0px;margin:10px;display: inline-block;box-shadow:-1px -1px 1px #e7e6e6;}
.roundimg4:hover{background-color:#daf7fa}

.tooltip1 {position: relative; border-bottom: 0px dotted black;}
.tooltip1 .tooltiptext1 {visibility: hidden;  width: 200px; height:110px; background-color:#dfea7a; border:1px solid #ff0000; color: black; text-align: center; border-radius: 6px; padding: 10px;  position:absolute;  z-index: 1000;  top:0px; left:0px;}
.tooltip1:hover .tooltiptext1 { visibility: visible;}


.tooltip2 {position: relative; border-bottom: 0px dotted black;}
.tooltip2 .tooltiptext2 {visibility: hidden;  width: 200px; height:80px; background-color:#dfea7a; border:1px solid #ff0000; color: black; text-align: center; border-radius: 6px; padding: 10px;  position:absolute;  z-index: 1000;  top:0px; left:0px;}
.tooltip2:hover .tooltiptext2 { visibility: visible;}

.tooltip3 {position: relative; border-bottom: 0px dotted black;}
.tooltip3 .tooltiptext3 {visibility: hidden;  width: 200px; height:80px; background-color:#dfea7a; border:1px solid #ff0000; color: black; text-align: center; border-radius: 6px; padding: 10px;  position:absolute;  z-index: 1000;  top:0px; left:0px;}
.tooltip3:hover .tooltiptext3 { visibility: visible;}

.tooltip4 {position: relative; border-bottom: 0px dotted black;}
.tooltip4 .tooltiptext4 {visibility: hidden;  width: 200px; height:80px; background-color:#dfea7a; border:1px solid #ff0000; color: black; text-align: center; border-radius: 6px; padding: 10px;  position:absolute;  z-index: 1000;  top:0px; left:0px;}
.tooltip4:hover .tooltiptext4 { visibility: visible;}

.tooltip5 {position: relative; border-bottom: 0px dotted black;}
.tooltip5 .tooltiptext5 {visibility: hidden;  width: 200px; height:80px; background-color:#dfea7a; border:1px solid #ff0000; color: black; text-align: center; border-radius: 6px; padding: 10px;  position:absolute;  z-index: 1000;  top:0px; left:0px;}
.tooltip5:hover .tooltiptext5 { visibility: visible;}


.titlediv {position:absolute;  z-index: 100;  top:-5px; right:-5px; border: 1px  solid #808080; min-width:300px; text-align:center;border-radius: 6px;;background-color:#e7e6e6;}

.alerts-border { border: 1px #ff0000 solid; animation: blink 1s;animation-iteration-count: 10;}
.alerts-borderbackground { border: 1px #ff0000 solid;background-color:#ecf3af; animation: blink 1s;animation-iteration-count: 10;}
@keyframes blink {50% { border-color: #fff; }}

.alerts-border3 {
    -webkit-animation: alerts-border_back_blue 1s infinite; /* Safari 4+ */
    -moz-animation: alerts-border_back_blue 1s infinite; /* Fx 5+ */
    -o-animation: alerts-border_back_blue 1s infinite; /* Opera 12+ */
    animation: alerts-border_back_blue 1s infinite; /* IE 10+, Fx 29+ */
    animation-iteration-count: 6;
}

@-webkit-keyframes alerts-border_back_blue {
    0%, 49% {
        background-color: #e6eff4;
        border: 2px #8398cf solid;
    }

    50%, 100% {
        background-color: #fff;
        border: 2px #e7e6e6 solid ;
    }
}

.alerts-border4 {
    -webkit-animation: alerts-border_back_orange 1s infinite; /* Safari 4+ */
    -moz-animation: alerts-border_back_orange 1s infinite; /* Fx 5+ */
    -o-animation: alerts-border_back_orange 1s infinite; /* Opera 12+ */
    animation: alerts-border_back_orange 1s infinite; /* IE 10+, Fx 29+ */
    animation-iteration-count: 25 ;
}

@-webkit-keyframes alerts-border_back_orange {
    0%, 49% {
        background-color: #eae68d;
        border: 1px #fb9b1f solid;
    }

    50%, 100% {
        background-color: #fff;
        border: 1px #fb9b1f solid;
    }
}