a {
    text-decoration: none !important;
}
img {
    border: medium none;
}
ul, ol, p {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
body {
    background: url("/images/body-rpt.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
    font-family: Arial,sans-serif;
    font-size: 12px;
    line-height: 19px;
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    text-align: justify;
}
html {
    height: 100%;
    width: 100%;
}
img, a {
    border: 0 none;
    outline: medium none;
}
img {
    max-width: 100%;
}

.wrapper {
    margin: 0 auto;
    width: 995px;
}

.full-box {
    float: left;
    margin-bottom: 4px;
    margin-top: -37px;
    width: 100%;
}
.slider-bottom-line {
    background: none repeat scroll 0 0 #fff;
    border-bottom: 1px solid #eaeaea;
    border-top: 1px solid #eaeaea;
    float: left;
    height: 10px;
    width: 100%;
}
.mid-box {
    float: left;
    margin-top: 2px;
    width: 100%;
}
.down-box {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #f2f2f2;
    float: left;
    height: 159px;
    margin-top: 11px;
    width: 99.5%;
}
.down-box h1 {
    color: #5f2d66;
    display: block;
    float: left;
    font-size: 20px;
    font-weight: 500;
    margin-left: 16px;
    margin-top: 9px;
    text-transform: uppercase;
}
.logo-f-mobile {
    display: none;
}
.content-box {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #f2f2f2;
    float: left;
    height: 328px;
    margin-left: 9px;
    margin-top: 9px;
    width: 323px;
}
.content-box1 {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #f2f2f2;
    float: left;
    height: 375px;
    margin-left: 9px;
    margin-top: 9px;
    width: 323px;
}
.content-l {
    margin-left: 0;
}
.content-bdy {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    margin-left: 0;
}
.content-box h1, .content-box1 h1 {
    color: #5f2d66;
    display: block;
    font-size: 20px;
    font-weight: 500;
    margin: 14px auto 0;
    text-align: center;
    text-transform: uppercase;
}
.box-in {
    float: left;
    margin-top: 29px;
    padding: 0 4.5%;
    width: 91%;
}
.view-all {
    border-left: 1px solid #b5b5b6;
    color: #363636;
    float: right;
    font-size: 14px;
    line-height: 25px;
    margin-right: 15px;
    margin-top: -23px;
    padding-left: 5px;
    text-transform: none;
}
.view-all:hover {
    color: #8e309b;
}
a.view {
    color: #874991;
    float: right;
    font-size: 13px;
    margin-right: 17px;
    margin-top: 10px;
}
a.view:hover {
    color: #000;
}
#newnotice {
    float: left;
    height: 216px !important;
    overflow: hidden;
    width: 100%;
}
#newnotice ul {
    margin: 0;
    padding: 0;
}
#newnotice ul li {
    height: 116px !important;
    margin-top: -2px;
}
.news-in1, .news1 {
    color: #5f5f60;
    float: left;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    width: 100%;
}
.news-img {
    margin-left: 5px;
}
.updon {
    color: #3a3a3a;
    font-size: 11px;
}
.news-in1 {
    background: url("/images/notice-link.jpg") no-repeat scroll center bottom rgba(0, 0, 0, 0);
    margin-top: 19px;
    padding-bottom: 11px;
}
.news-in1 {
    text-transform: capitalize !important;
}
.news-text, .news-text1 {
    color: #5f5f60;
    float: left;
    font-size: 12px;
    text-align: left;
    text-transform: uppercase;
    width: 100%;
}
.news-text1 {
    margin-top: 2px;
}
.news-link {
    float: right;
    margin-top: 3px;
    width: 100%;
}
.news-link a {
    color: #5f5f60;
    float: right;
    font-size: 11px;
    font-style: italic;
    margin-right: 29px;
    text-transform: none;
}
.news-link a:hover {
    color: #853a91;
}
.news-text {
    font-weight: bold;
    margin-top: 10px;
}
.update-date b {
    color: #3a3a3a;
    float: left;
    font-size: 14px;
    text-transform: uppercase;
}
.update-date b sup {
    text-transform: lowercase;
}
.update-date {
    color: #3a3a3a;
    font-size: 14px;
    text-transform: uppercase;
}
.update-date sup {
    font-size: 10px;
    text-transform: lowercase;
}
.months {
    color: #3a3a3a;
    font-size: 12px;
    font-weight: normal;
}
.news2 {
    color: #5e2c61;
    font-family: Arial;
    font-size: 11px;
    padding: 5px 0 10px;
    position: relative;
}
.news2 img {
    float: right;
    position: absolute;
    right: 35px;
}
.news-right {
    color: #5f5f60;
    font-family: Arial;
    font-size: 12px;
}
.news-previous {
    cursor: pointer;
    position: relative;
    z-index: 99;
}
.news-next {
    cursor: pointer;
    margin-top: 4px;
    position: relative;
    z-index: 99;
}
.news-next {
}
.news-readmore {
    color: #5f5f60;
    float: right;
    font-family: Arial;
    font-size: 11px;
    font-style: italic;
}
.news-right {
    padding-bottom: 5px;
    text-align: justify;
}
.box-text {
    float: left;
    padding: 4.5%;
    width: 91%;
}
.box-text h1 {
    color: #5f2d66;
    display: block;
    font-size: 20px;
    font-weight: 500;
    margin: 9px auto 0;
    text-align: center;
    text-transform: uppercase;
}
.box-text p {
    clear: both;
    color: #565656;
    line-height: 19px;
}
.box-text1 {
    float: left;
    padding: 4.5%;
}
.box-text1 h1 {
    color: #5f2d66;
    display: block;
    font-size: 20px;
    font-weight: 500;
    margin: 16px auto 7px;
    text-align: center;
    text-transform: uppercase;
}
.box-text1 p {
    color: #565656;
    line-height: 19px;
}
a.read-more {
    color: #874991;
    float: right;
    font-size: 13px;
}
a.read-more:hover {
    color: #000;
}
.birthday {
    background: url("/images/birthday-bg.jpg") no-repeat scroll center top rgba(0, 0, 0, 0);
    border: 1px solid #f2f2f2;
    float: left;
    height: 197px;
    margin-top: 8px;
    width: 100%;
}
.gallery-in {
    float: left;
    width: 100%;
}
#photo-gallery {
    background-color: transparent;
    float: left;
    left: 37px !important;
    overflow: hidden;
    top: -2px !important;
}
#photo-gallery ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
#photo-gallery li {
    display: block;
    height: 96px;
    margin: 0 12px;
    padding: 0;
    width: 130px;
}
#photo-gallery li img {
    width: 100%;
}
.updated-on, .description {
    border-left: 2px solid #e5e5e5;
    float: left;
    font-size: 11px;
    line-height: 26px;
    margin-left: 4%;
    margin-top: 6px;
    padding-left: 2.1%;
}
.updated-on {
    height: 26px;
    line-height: 20px;
}
#gallerydetails_lblAlbumdetail {
    color: #4c1f61;
}
#gallerydetails1_lblAlbumdetail1 {
    color: #292929;
}
#gallerydetails_lblAlbumdetail b {
    color: #23272e;
}
.previous-g {
    cursor: pointer;
    float: right;
    margin-right: 19px;
    margin-top: -64px;
    outline: medium none;
}
.next-g {
    cursor: pointer;
    float: left;
    margin-left: 19px;
    margin-top: -64px;
    outline: medium none;
    position: relative;
}
.footer-box {
    background: none repeat scroll 0 0 #fff;
    border-bottom: 1px solid #eaeaea;
    border-top: 1px solid #eaeaea;
    float: left;
    height: 56px;
    margin-bottom: 6px;
    margin-top: 9px;
    width: 100%;
}
.body-img {
    text-align: center;
    width: 100%;
}
.contener {
    float: left;
    position: relative;
    width: 100%;
    z-index: 1;
}
.left-bg {
    background: url("/images/bg-left.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 661px;
    left: 50%;
    margin-left: -749px;
    position: absolute;
    width: 474px;
    z-index: 1;
}
.wrapper-in {
    float: left;
    margin: 10px 0 0;
    width: 990px;
}
.logo1 {
    display: none;
}
.logo-name {
    background: url("/images/bg-left.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 72px;
    left: 220px;
    position: absolute;
    top: 38px;
    width: 306px;
    z-index: -1;
}
.nav-in {
    float: left;
    width: 990px;
}
.nav-left {
    float: left;
    height: auto;
    margin-bottom: 5px;
    margin-top: 36px;
    width: 219px;
}
#iframe1 {
    background-color: transparent;
    border: medium none;
    float: left;
    height: 561px;
    outline: medium none;
    overflow: hidden;
    width: 100%;
}
.iframe-1 {
    background-color: transparent;
    border: medium none;
    float: left;
    height: 500px !important;
    outline: medium none;
}
#bdy-if {
    background-color: transparent;
    float: left;
    height: 148px;
    margin: 55px auto 0 0;
    width: 100%;
}
.logo {
    float: left;
    height: 120px;
}
.right-blank {
    float: right;
    width: 770px;
}
.nav-left ul {
    list-style: outside none none;
    margin: 0 0 0 8px;
    padding: 0;
}
.nav-left ul li {
    padding: 12px 12px 0;
}
.nav-left ul li a {
    color: #502656;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}
.cont-in {
    float: left;
    margin-top: 30px;
    width: 990px;
}
.cont-box {
    background: url("/images/box-bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    float: left;
    height: 391px;
    margin-right: 10px;
    width: 323px;
}
.cont-box p {
    color: #353638;
    font-size: 12px;
    font-weight: 600;
    line-height: 21px;
    padding: 0 12px 0 22px;
    text-align: justify;
    word-spacing: 1px;
}
.heading {
    position: relative;
}
.heading a {
    bottom: 8px;
    color: #393b8c;
    font-size: 11px;
    position: absolute;
    right: 10px;
}
.heading a:hover {
    color: #ad5bb8;
}
.heading img {
    margin: -47px 0 0;
    max-height: 187px;
}
.heading span {
    margin: 0;
}
.abouus span {
    color: #fff !important;
    margin: 0 !important;
}
.abouus img {
    margin-bottom: 7px !important;
    margin-top: 7px !important;
}
.abouus {
    position: relative;
}
.abouus a {
    bottom: 10px;
    color: #fbed77;
    font-size: 11px;
    position: absolute;
    right: 10px;
}
.abouus a:hover {
    color: #fff;
}
.abouus p {
    color: #fff !important;
}
.cont-box span {
    color: #5f2d66;
    display: block;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 8px !important;
    margin-left: auto;
    margin-right: auto;
    margin-top: 9px;
    text-align: center;
    text-transform: uppercase;
}
.view-all-g {
    color: #1d1c1c;
    display: block;
    float: right;
    font-size: 12px;
    margin-right: 7px;
    margin-top: -28px;
    text-align: right;
    text-transform: none;
    width: 58px;
}
.view-all-g:hover {
    color: #8e309b;
}
.tpr-cls {
    font-size: 12px !important;
    height: 2px;
    line-height: 1px;
    margin-bottom: 0 !important;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}
.news-in {
    height: 301px !important;
    margin: 52px 0 0;
    padding: 0 10px;
}
.box-b {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 491px;
}
.blank-bottom {
    float: left;
    height: 233px;
    width: 100%;
}
.photo-gallery {
    background: none repeat scroll 0 0 #fff;
    float: left;
    height: 253px;
    width: 323px;
}
.box-p {
    background: url("/images/aboutusbg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    float: left;
    height: 320px;
    width: 323px;
}
.box-pb {
    background: url("/images/bdaybg.jpg") no-repeat scroll center top / contain rgba(0, 0, 0, 0);
    float: left;
    height: 166px;
    width: 323px;
}
.imp-link {
    float: left;
    margin-left: 2%;
    margin-top: 8px;
    text-align: center;
    width: 47%;
}
.imp-link ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.imp-link ul li {
    height: 106px;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
}
.imp-link ul li a {
    color: #505050;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: 26px;
    list-style: outside none none;
    margin: 0 auto;
    padding: 77px 0 0;
}
.imp-link ul li a:hover {
    color: #552b5c;
}
.ecare a {
    background: url("/images/ecare-icon.png") no-repeat scroll center top rgba(0, 0, 0, 0);
    color: #467834 !important;
    height: 23px !important;
    width: 127px;
}
.ecare a:hover {
    color: #874991 !important;
}
.kidscorner a {
    background: url("/images/kids-icon.png") no-repeat scroll center top rgba(0, 0, 0, 0);
    width: 97px;
}
.jaoinus a {
    background: url("/images/joinus-icon.png") no-repeat scroll center top rgba(0, 0, 0, 0);
    width: 89px;
}
.virtual a {
    background: url("/images/360-icon.png") no-repeat scroll center top rgba(0, 0, 0, 0);
    width: 87px;
}
.event a {
    background: url("/images/event-icon.png") no-repeat scroll center top rgba(0, 0, 0, 0);
    width: 130px;
}
.alumni a {
    background: url("/images/alumni-icon.png") no-repeat scroll center top rgba(0, 0, 0, 0);
    width: 77px;
}
.alumni a:hover, .ecare a:hover, .kidscorner a:hover, .jaoinus a:hover, .virtual a:hover, .event a:hover {
    transform: rotateY(360deg);
    transition: all 0.9s ease 0s;
}
.glry-dis {
    color: #23272e;
    float: left;
    font-family: Arial;
    font-size: 12px;
    padding: 0 1%;
    width: 98%;
}
.dis-home {
    float: left;
    font-size: 11px;
    text-align: center;
    width: 100%;
}
.dis-home span {
    color: #1044b2;
    display: inline;
    font-size: 12px;
    text-transform: capitalize;
}
.footer {
    background: none repeat scroll 0 0 #fff;
    color: #787878;
    float: left;
    font-family: Arial;
    font-size: 11px;
    height: 54px;
    margin-top: 18px;
    width: 100%;
}
.footer-in {
    margin: 0 auto;
    width: 990px;
}
.footer-left {
    color: #787878;
    float: left;
    height: 30px;
    padding: 20px 0 0;
}
.footer-right {
    float: right;
    height: 39px;
    padding: 11px 0 0;
}
.footer-right span {
    color: #787878;
    display: block;
    float: left;
    height: 30px;
    padding-top: 9px;
}
.footer-right ul {
    border-left: 1px solid #d5d5d5;
    float: right;
    list-style: outside none none;
    margin: 0;
    padding: 2px 0 2px 22px;
}
.footer-right ul li {
    float: left;
    margin: 7px 12px 0;
    padding: 0;
}
.footer-right ul li a img:hover {
    opacity: 0.6;
}
.tprs-cntn {
    float: left;
    position: relative;
    width: 100%;
}
.topper {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #f2f2f2;
    float: left;
    height: 168px;
    margin-left: 0;
}
#toppers {
    margin-left: 23px;
    padding: 0;
    z-index: 1;
}
#toppers ul {
    margin: 0;
    padding: 0;
}
#toppers ul li {
    height: auto !important;
    margin-top: 7px;
    padding: 0 10px;
    text-align: center;
    width: 116px !important;
}
#toppers ul li img {
    border: 2px solid #dadada;
    width: 78px;
}
.next-topp {
    cursor: pointer;
    float: left;
    left: 31px;
    margin-left: -17px;
    position: absolute;
    top: 43px;
    z-index: 3;
}
.previous-topp {
    cursor: pointer;
    float: right;
    margin-right: -17px;
    position: absolute;
    right: 31px;
    top: 43px;
    z-index: 3;
}
.pos-cab {
    float: left;
    margin-top: -6px;
    width: 100%;
}
.name-topp {
    color: #b22b40;
    float: left;
    font-family: Arial;
    font-size: 12px;
    text-transform: capitalize !important;
    width: 100%;
    padding-top:4px;
}
.mark {
    color: #585858;
    float: left;
    font-family: Arial;
    font-size: 12px;
    margin-top: -5px;
    text-transform: capitalize !important;
    width: 100%;
}
a.fran {
    color: #787878;
    text-decoration: none;
}
a.fran:hover {
    color: #be1d1d;
}
.wrapper-m {
    margin: 0 auto;
    width: 990px;
}
.master-left {
    background: url("/images/bg-left.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    float: left;
    width: 21%;
}
.master-left-in {
    float: right;
    width: 100%;
}
.master-right {
    float: right;
    width: 78%;
}
.logo-name-m {
    display: block;
    margin-top: 10px;
    text-align: center;
    width: 280px;
}
.logo-m {
    height: 103px;
    width: 110px;
}
.menu {
    float: left;
    margin: 20px 0 10px;
}
.s-logo {
    width: 110px;
}
.sname {
    width: 280px;
}
.master-h {
    background: url("/images/bg-left.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-bottom: 2px solid #8e309b;
    color: #8e309b;
    float: left;
    font-size: 20px;
    font-weight: 500;
    padding: 10px 1%;
    text-transform: uppercase;
    width: 98%;
}
.master-in {
    background: url("/images/bg-left.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #2f2f2f;
    float: left;
    font-size: 12px;
    line-height: 21px;
    min-height: 590px;
    padding: 10px 1%;
    width: 98%;
    word-spacing: 1px;
}
.peShiner {
    display: block;
    text-align: center !important;
    width: 100% !important;
}
.peShiner canvas {
}
.logo-m1 {
    display: none;
}
.logo-name-m1 {
    display: none;
}
.logo-cntn {
    display: block;
    height: 150px;
    margin: 0 auto;
    width: 100%;
}
.calendar1 {
    background-color: #e3e0e3;
    border-collapse: collapse;
    border-style: solid;
    border-width: 1px;
    color: Black;
    font-family: Verdana;
    font-size: 12pt;
    height: 400px;
    text-decoration: none;
    width: 100%;
}
.logo-cntn1 {
    display: none;
}
.logo1-m {
    display: none;
}
fieldset {
    position: relative;
}
legend {
    position: relative;
}
.accordionHeader_Y {
    background: url("/images/ajax-arrow.png") no-repeat scroll 99% 10px #a8a8a8;
    border: 1px solid #747474;
    color: #fff;
    cursor: pointer;
    font-family: Arial,sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-top: 2px;
    padding: 5px;
}
.accordionHeaderSelected {
    background: url("/images/ajax-arrow1.png") no-repeat scroll 99% 10px #848484;
    border: 1px solid #747474;
    color: #fff;
    cursor: pointer;
    font-family: Arial,sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-top: 2px;
    padding: 5px;
}
.accordionContent_Y {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #fff;
    border-color: -moz-use-text-color #8e309b #8e309b;
    border-image: none;
    border-right: 1px dashed #8e309b;
    border-style: none dashed dashed;
    border-width: medium 1px 1px;
    padding: 2px 5px 5px;
}
.Infrastructure center {
    position: relative;
    z-index: -1 !important;
}
.infra {
}
.Infrastructure {
    float: left;
    height: auto;
    position: relative;
    width: 123px;
    z-index: 9999;
}
a.Infrastructure_1 {
    background-image: url("../Panorama/images/01.png");
    background-repeat: no-repeat;
    float: right;
    height: 53px;
    line-height: 0;
    margin-left: 0;
    margin-top: 0;
    width: 123px;
}
a.Infrastructure_1:hover {
    background: url("../Panorama/images/01.png") no-repeat scroll 0 -53px rgba(0, 0, 0, 0);
}
a.Infrastructure_2 {
    background-image: url("../Panorama/images/02.png");
    background-repeat: no-repeat;
    float: right;
    height: 53px;
    line-height: 0;
    margin-left: 0;
    margin-top: 0;
    width: 123px;
}
a.Infrastructure_2:hover {
    background: url("../Panorama/images/02.png") no-repeat scroll 0 -53px rgba(0, 0, 0, 0);
}
a.Infrastructure_3 {
    background-image: url("../Panorama/images/03.png");
    background-repeat: no-repeat;
    float: right;
    height: 53px;
    line-height: 0;
    margin-left: 0;
    margin-top: 0;
    width: 123px;
}
a.Infrastructure_3:hover {
    background: url("../Panorama/images/03.png") no-repeat scroll 0 -53px rgba(0, 0, 0, 0);
}
a.Infrastructure_4 {
    background-image: url("../Panorama/images/04.png");
    background-repeat: no-repeat;
    float: right;
    height: 53px;
    line-height: 0;
    margin-left: 0;
    margin-top: 0;
    width: 123px;
}
a.Infrastructure_4:hover {
    background: url("../Panorama/images/04.png") no-repeat scroll 0 -53px rgba(0, 0, 0, 0);
}
a.Infrastructure_5 {
    background-image: url("../Panorama/images/05.png");
    background-repeat: no-repeat;
    float: right;
    height: 53px;
    line-height: 0;
    margin-left: 0;
    margin-top: 0;
    width: 123px;
}
a.Infrastructure_5:hover {
    background: url("../Panorama/images/05.png") no-repeat scroll 0 -53px rgba(0, 0, 0, 0);
}
a.Infrastructure_6 {
    background-image: url("../Panorama/images/06.png");
    background-repeat: no-repeat;
    float: right;
    height: 53px;
    line-height: 0;
    margin-left: 0;
    margin-top: 0;
    width: 123px;
}
a.Infrastructure_6:hover {
    background: url("../Panorama/images/06.png") no-repeat scroll 0 -53px rgba(0, 0, 0, 0);
}
.inner-hding1 {
    background: none repeat scroll 0 0 #8e309b;
    color: #fff;
    float: left;
    font-size: 15px;
    padding: 0.5% 1%;
    width: 98%;
}
.inner-hding {
    background: none repeat scroll 0 0 #cbcacb;
    color: #000;
    font-size: 15px;
    width: 98%;
}
.inner-h li {
    list-style: outside none none;
}
.school-uni {
    border: 1px solid #cbcacb;
}
.inpul {
    line-height: 25px;
    list-style: outside url("/images/fees-arrow1.png") none;
}
.inpul li {
    margin-left: 20px;
}
.border-img4 {
    border: 6px solid #e5e1e1;
    box-shadow: 0 0 4px #abaaaa;
    margin-bottom: 18px;
    padding: 2px;
}
.border-img5 {
    border: 6px solid #e5e1e1;
    box-shadow: 0 0 4px #abaaaa;
    float: right;
    margin-bottom: 18px;
    margin-left: 10px;
    padding: 2px;
}
.list_style {
    line-height: 25px;
    list-style: outside url("/images/fees-arrow1.png") none;
}
.heading_i {
    background: none repeat scroll 0 0 #cbcacb;
    color: #000;
    font-size: 15px;
    font-weight: bold;
    line-height: 28px;
    margin-bottom: 7px;
    text-align: center;
    width: 98%;
}
.img_bdr img {
    border: 2px solid #a8a8a8;
}
table {
}
[data-tooltip] {
    cursor: pointer;
    position: relative;
    z-index: 2;
}
[data-tooltip]::before, [data-tooltip]::after {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
[data-tooltip]::before {
    background-color: hsla(0, 0%, 20%, 0.9);
    border-radius: 3px;
    bottom: -250%;
    color: #fff;
    content: attr(data-tooltip);
    font-size: 12px;
    left: 50%;
    line-height: 1.2;
    margin-bottom: 5px;
    margin-left: -40px;
    padding: 7px;
    position: absolute;
    text-align: center;
    width: 80px;
}
[data-tooltip]::after {
    border-bottom: 5px solid hsla(0, 0%, 20%, 0.9);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    bottom: -11%;
    content: " ";
    font-size: 0;
    left: 50%;
    line-height: 0;
    margin-left: -5px;
    position: absolute;
    width: 0;
}
[data-tooltip]:hover::before, [data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}
.mgs_style {
    text-align: center;
}