@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap');


@import url(../scss/icons/font-awesome/css/font-awesome.min.css);
@import url(../scss/icons/simple-line-icons/css/simple-line-icons.css);
@import url(../scss/icons/weather-icons/css/weather-icons.min.css);
@import url(../scss/icons/linea-icons/linea.css);
/* @import url(../../scss/icons/themify-icons/themify-icons.css); */
@import url(../scss/icons/flag-icon-css/flag-icon.min.css);
@import url(../scss/icons/material-design-iconic-font/css/materialdesignicons.min.css);


 

/* comman style
----------------------*/

html, body{height:100%;}
body{margin:0;padding:0; background: url(../images/fnl/bodybg.jpg) no-repeat top center fixed; background-size: cover; font-family: 'IBM Plex Sans', sans-serif; font-size:16px;line-height:1.5;color:var(--ftblack);scroll-behavior:smooth;overflow-x:hidden;font-weight:400;}
a{text-decoration:none;color:var(--ftblue); transition:all 0.3s ease-in-out 0s;-moz-transition:all 0.3s ease-in-out 0s;-webkit-transition:all 0.3s ease-in-out 0s;-o-transition:all 0.3s ease-in-out 0s;}
a:hover{color:var(--ftred);text-decoration:none}
a:focus{outline:none;text-decoration:none;}
:focus{outline:none;}
h1,h2,h3,h4,h5,h6{margin:0 0 15px 0;color:var(--ftblack);padding:0;line-height:1.2; font-family: 'IBM Plex Sans', sans-serif; text-transform:none;}
h1{font-size:40px;}
h2{font-size:35px;}
h3{font-size:25px;}
h4{font-size:20px;}
h5{font-size:18px;}
h6{font-size:16px;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:inherit;text-decoration:none;font-size:inherit;}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{text-decoration:none;}
small{display:block;margin-top:4px;}
p {margin:0 0 10px 0;line-height:1.5;}
p:last-child {margin-bottom: 0px;}
ul, ol{margin:0;}
strong, b{font-weight:600;}
button{transition:all 0.3s ease-in-out 0s;-moz-transition:all 0.3s ease-in-out 0s;-webkit-transition:all 0.3s ease-in-out 0s;-o-transition:all 0.3s ease-in-out 0s;}
img {transition:all 0.3s ease-in-out 0s;}
/* comman form filed style -----------------------------*/

/* images alignment
--------------------------------*/
/* image alignments */
img.alignleft, .alignleft { float: left; margin-right: 20px; max-width:460px;}
img.alignright, .alignright { float: right; margin-left: 20px; max-width:460px;}
img.aligncenter, .aligncenter, img.alignnone, .alignnone  { display: block; margin: 0 auto 20px; clear: both; }
img.alignleft, .alignleft, img.alignright, .alignright { display: inline; margin-top: 0; }
img.alignleft, img.aligncenter, img.alignright { margin-bottom: 20px; }
/* image captions */
.alignleft .wp-caption-text { text-align: left; }
.alignright .wp-caption-text { text-align: right; }
.aligncenter .wp-caption-text { text-align: center; }
hr{clear: both; margin-top: 20px; margin-bottom: 20px;}

ul {margin: 0; padding: 0; list-style-type: none;}
.content ul, .content ol{margin: 0 0 20px 0px; padding: 0 0 0 15px; position: relative;}
.content ul{list-style-type: none;}
.content ul li, .content ol li{margin-bottom: 8px;}
.content ul li ul li, .content ol li ul li, .content ul li ol li {margin-top: 12px;}
.content ul li:before{content: ""; position: relative; display: inline-block; left: -15px; top: -2px; width: 7px; height: 7px; background-color: #1a1a1a; border-radius: 100%;}
.content ul li ol li:before {display: none;}


.menu-overlay{position:fixed;height:100%;width:100%;left:0;top:0;background:#000000;opacity:0;visibility:hidden;overflow:hidden;transition:all 0.3s ease-in-out 0s;-moz-transition:all 0.3s ease-in-out 0s;-webkit-transition:all 0.3s ease-in-out 0s;-o-transition:all 0.3s ease-in-out 0s;}
.menu-overlay.show-overlay{opacity:0.90;visibility:visible;z-index:11;}
.mainwrapper{overflow:hidden;}

/*--------------*/

/* sticky header
========================*/
@keyframes fadeIn {
  from { opacity: 0;  }
    to {opacity: 1;}
}
.fadeIn {  animation-name: fadeIn;}
@keyframes fadeInDown {
  from {opacity: 0; transform: translate3d(0, -100%, 0); -moz-transform: translate3d(0, -100%, 0); -webkit-transform: translate3d(0, -100%, 0); -ms-transform: translate3d(0, -100%, 0);}
    to {opacity: 1; transform: none;}
}
.fadeInDown {  animation-name: fadeInDown;}


.show-overlay{width:100%;height:100%;z-index:999;top:0;left:0;position:fixed;background:rgba(0, 0, 0, 0.8);overflow:hidden;}
.overflowhidden{overflow:hidden; position:fixed;width:100%;height:100%; min-height:100%;  transition:all 0.3s ease-in-out 0s;-moz-transition:all 0.3s ease-in-out 0s;-webkit-transition:all 0.3s ease-in-out 0s;-o-transition:all 0.3s ease-in-out 0s; }

/*--- header ------*/

/*--- common ------*/
.btn-check:focus + .btn-primary, .btn-primary:focus {color:var(--ftwhite); background-color:var(--blackbg); border-color:var(--blackbg); box-shadow: none;}
.btn-success.focus, .btn-success:focus, .btn-default:focus, .btn-info:focus, .btn-warning:focus, .swal-button:focus {box-shadow: none;}
.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {box-shadow: none;}
.btn {border-radius: 8px; box-shadow: 0px 6px 6px rgba(0,0,0,0.11); padding: 7px 15px; font-weight: 500; cursor: pointer;}
.btn-primary {color:var(--ftwhite); background-color: var(--redbg); border-color:var(--redbg);}
.btn-primary:hover {color: var(--ftwhite); background-color: var(--blackbg); border-color: var(--blackbg);}
.btn-secondary {color:var(--ftwhite); background-color: var(--blackbg); border-color:var(--blackbg);}
.btn-secondary:hover {color: var(--ftwhite); background-color: var(--redbg); border-color: var(--redbg);}
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {color: var(--ftwhite); background-color:var(--blackbg); border-color: var(--blackbg); }
.btn:focus-visible {color: var(--ftwhite); background-color: var(--blackbg); border-color:  var(--blackbg);}
.form-control {border: 1px solid #e4e4e4; background-color: var(--whitebg); border-radius: 6px; font-size: 16px; line-height: 2.1; border-radius: 0.625rem; padding: 0.5rem 0.75rem;}
.form-control:focus {box-shadow: none; outline: none;}

select.form-control {background-image: url(../images/fnl/select-arrow.png); background-repeat: no-repeat; background-position: center right; cursor: pointer; -moz-appearance: none; appearance: none; -webkit-appearance: none; height: inherit !important;}

.btn-info, .btn-success, .btn-default, .btn-warning, .gc_samarkattwrap .rptprintbtn .btn, .swal-button, .gc-bunbgcolor {color:var(--ftwhite) !important; background-color: var(--redbg) !important; border-color:var(--redbg) !important;}
.btn-info:hover, .btn-success:hover, .btn-warning:hover, .btn-default:hover, .gc_samarkattwrap .rptprintbtn .btn:hover, .swal-button:hover, .gc-bunbgcolor:hover {color: var(--ftwhite) !important; background-color: var(--blackbg) !important; border-color: var(--blackbg) !important;}



.card .card-body .col-md-12 .card {padding: 20px 15px;}
.card .card-body .col-md-12 .card .nav.customtab {margin-bottom: 25px;}

.card .card-body .col-md-12 .card .tab-content .tab-pane.active {margin-bottom: 20px;}
.card .card-body .col-md-12 .card .tab-content .tab-pane.active .m-t-40 {margin-top: 10px;}



/*--- common ------*/

/*-----container--- */

.container {padding-right: 15px; padding-left: 15px;}
.row {margin-right: -15px; margin-left: -15px;}
.row > * {padding-left: 15px; padding-right: 15px;}

/*-----container-end-- */

:root {
  --whitebg:#ffffff;
  --blackbg:#000000;
  --redbg:#ed222a;
  --skybluebg:#3cabd0;
  --lightskybluebg:#96a0af;
  --graybg:#4a4a4a;
  --orangebg:#ff8f16;
  --purplebg:#c40eb9;
  --greenbg:#5fad09;
  --lightgreenbg:#4cbc9a;
  --lightgraybg:#ececf1;
  --darkgraybg:#eeeeee;  
  --skybluelight:#e0e4fb;

  --ftwhite:#ffffff;
  --ftblack:#000000;
  --ftred:#ed222a;
  --ftskyblue:#3cabd0;
  --ftlightskyblue:#96a0af;
  --ftgray:#4a4a4a;
  --ftorange:#ff8f16;
  --ftpurple:#c40eb9;
  --ftgreen:#5fad09;
  --ftlightgreen:#4cbc9a;
  --ftdarkgray:#eeeeee;

}



/*-----------all-pages-style-----------------*/

.login-left-side {top: 0; left: 0; position: fixed; min-height: 100vh; display: flex; width: 50%; align-items: center; text-align: center; font-size: 15px;}
.login-right-side { margin: auto; height: 100%; display: flex; align-items: center; justify-content: center; padding-left: 15px; padding-right: 15px;}
.login-left-cont {padding: 20px 0px; max-width: 765px; margin-left: auto; margin-right: auto;}
.login-left-cont h2 span {color: var(--redbg);}
.rounded-20 {border-radius: 20px;}
.rounded-15 {border-radius: 15px;}
.whitebox {background-color: var(--whitebg); box-shadow: 0px 0px 62px rgba(0,0,0,0.10);}
.login-right-side .whitebox {background-color: rgba(255,255,255,0.60);}
.login-box-width {max-width: 780px; margin:20px auto; display: flex; flex-direction: column; justify-content: center; padding: 45px; /*min-height: 640px;*/ min-height: 550px; width: 100%;}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {background-color: var(--redbg);}
.login-right-side .nav-pills li {padding-left: 5px; padding-right: 5px;}
.login-right-side .nav-pills li.active .nav-link {background-color: var(--redbg); color:var(--ftwhite);}
.login-right-side .nav-link {border-radius: 30px; font-size: 15px; display: flex; align-items: center; color:var(--ftblack); font-weight: 500; padding: 10px 18px; line-height: normal;}
.login-right-side .nav-link i {font-size: 20px; margin-right: 5px;}
.login-right-side .nav {margin-left: -5px; margin-right: -5px;}
.login-right-side .nav-item {padding-left: 5px; padding-right: 5px;}
.login-signup-form h2 {font-size: 32px; margin-bottom: 25px;}
.forgot-password-link a {color: var(--ftblack); text-decoration: underline; font-size: 14px; font-weight: 500;}
.forgot-password-link a:hover {color: var(--ftblack); text-decoration: none;}
.login-signup-form .form-control {height: 64px; padding-left: 50px; box-shadow: 0px 0px 13px rgba(0,0,0,0.05);}
.login-signup-form .form-check-input {box-shadow: 0px 0px 13px rgba(0,0,0,0.05); width: 25px; height: 25px; margin-right: 10px; margin-left: 0px;}
.login-signup-form .form-check {margin-bottom: 0px;}
.login-signup-form .form-check .form-check-label {line-height: 25px; font-size: 14px; font-weight: 500; display: flex; padding-top: 3px; padding-left: 37px; cursor: pointer;}
.login-btn .btn {width: 100%; font-size: 20px; font-weight: 500; height: 60px; border-radius: 30px;}
.email-icon {background-image: url(../images/fnl/email-icon.svg); background-repeat: no-repeat; background-position: left 15px center;}
.password-icon {background-image: url(../images/fnl/password-icon.svg); background-repeat: no-repeat; background-position: left 15px center;}
.form-control:focus {border-color: var(--redbg);}
.form-check-input:checked {background-color:var(--redbg); border-color: var(--redbg);}
.form-check-input:focus {border-color:#e4e4e4;}
.header-section {position: relative;}
.left-navbar {position: fixed; width: 92px; height: 100px; background-color: var(--whitebg); border-radius: 0px 30px 0px 0px; z-index: 99; border-bottom: 1px solid transparent;}
.left-navbar.sidebar-is-open {border-bottom: 1px solid #dbdbdb;}
.main-logo {display: flex; align-items: center;}
.dashboard-logo {padding-left: 15px;}
.dashboard-logo img {max-height: 60px;}
.nav-header {position: fixed; width: 100%; border-bottom: 1px solid #fff; z-index: 9;  }
.scrolled .nav-header {backdrop-filter: blur(5px); background: rgba(255, 255, 255, 0.5);}
.middle-panel {padding-left: 92px; padding-right: 92px;}
.headerbg {display: flex; align-items: center; justify-content: space-between; height: 99px; position: relative;}
.container-padding-lr {padding-left: 30px; padding-right: 30px;}
.hamburger {font-size: 35px; position: absolute; left: 30px;}
.headerbg h1 {padding-left: 48px; font-weight: 35px; font-weight: 700; margin-bottom: 0px;}
.hreader-search {position: relative;}
.hreader-search .form-control {border-radius: 10px; background-color: rgba(255, 255, 255, 0.40); padding-left:50px; height: 54px; width: 525px; border: none !important;}
.hreader-search .header-search-icon {position: absolute; left: 15px; top: 16px; background-color: transparent; border: none; outline: none; box-shadow: none; background: url(../images/fnl/search.svg) no-repeat center; width: 22px; height: 22px; background-size: 22px;}
.navbar-left-panel {position: fixed; left: 0; width: 92px; background-color: #fff; padding:10px 0px 20px 15px; display: flex; flex-direction: column; border-radius: 0px 0px 30px 0px; height: calc(100% - 100px); top: 100px; z-index: 99;}
.navbar-right-panel {position: fixed; right: 0; width: 92px; background-color: #fff; padding:30px 15px; display: flex; flex-direction: column; align-items: center; border-radius: 30px 0px 0px 30px; height: calc(100% - 50px); top: 25px; justify-content: space-between; z-index: 99;}
.right-uers-proile-img a {border: 3px solid var(--skybluebg); display: flex; width: 50px; height: 50px; overflow: hidden; position: relative; border-radius: 10px;}
.right-uers-proile-img a:hover {border-color: var(--redbg);}
.right-uers-proile-img img {width: 100%; height: 100%; object-fit: cover; }
.right-settings ul {margin: 0px; padding: 0px;}
.right-settings li {margin: 20px 0px; }
.right-settings li a {display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background-color: var(--skybluelight); border-radius: 10px; font-size: 24px;}
.right-settings li a:hover {background-color: var(--redbg); color: var(--ftwhite);}
.navbar-menu {max-height: 98%; height: 100%;}
.navbar-menu ul {margin: 0px; padding: 0px;}
.navbar-menu li {margin: 10px 0px; }
.navbar-menu li a {display: flex;  align-items: center; /*min-width: 56px;*/ width: 61px; height: 46px; background-color: #fff; border-radius: 10px; font-size: 24px; color: var(--ftlightskyblue); padding-left: 18px; padding-right: 15px; position: relative;}
.navbar-menu li a:hover {background-color: var(--redbg); color: var(--ftwhite); width: 100%;}
.navbar-menu li a:hover span {color: var(--ftwhite);}
.navbar-menu li a span {padding-left: 15px; font-size: 15px; visibility: hidden; opacity: 0; transition:all 0.3s ease-in-out 0s; line-height: normal;  white-space: nowrap; }
.sidebar-is-open .navbar-menu li a span {visibility: visible; opacity: 1;}
.navbar-menu li .nav-submenu .nav {display: flex; flex-direction: column;}
.navbar-menu li .nav-submenu a {font-size: 15px; padding: 5px 5px 5px 55px; position: relative;}
.navbar-menu li .nav-submenu a:hover {background-color: transparent; border-radius: 0; color: var(--ftred);}
.navbar-menu li .nav-submenu a::before {position: absolute; left: 25px; top:22px; width: 7px; height: 2px; background-color: var(--lightskybluebg); content: "";}
.navbar-menu li .nav-submenu {visibility: hidden; opacity: 0; white-space: nowrap;}
.sidebar-is-open .navbar-menu li a {width: 100%;}
.sidebar-is-open .navbar-menu li .nav-submenu {visibility: visible; opacity: 1;}
.sidebar-is-open .navbar-menu li a.subarrow::before {position: absolute; right: 10px; top: 5px; font-family: "tabler-icons"; content: "\ea61";}
.main-middle-section {padding-top: 125px; padding-bottom: 20px; position: relative; /* z-index: 1;*/}
.dash-left-col {width: 60px; margin-right: 15px; position: relative; padding-top: 4px; text-align: center; flex-shrink: 0 !important;}
.dash-left-col img {position: relative; max-height: 65px;}
.dash-left-col::before {position: absolute; left: 0; top: -3px; width: 100%; height: 48px; border-radius: 7px; background-color: var(--redbg); opacity: .30; content: "";}
.dash-right-col {flex: 1;}
.dash-right-col h4, .dash-right-col h3 {margin-bottom: 0px; line-height: normal; }
.dash-right-col h4 {margin-right: 7px;}
.dash-right-col h3 {font-weight: 700; color: var(--ftred);}
.card-year {font-size: 13px; color: var(--ftgray); margin-bottom: 10px;}
.progress, .progress-stacked {height: 5px;}
.progress-bar {background-color: var(--redbg);}
.dashboard-lab .whitebox {height: 100%; transition:all 0.3s ease-in-out 0s;}
.dashboard-lab .whitebox:hover {box-shadow: 10px 10px 0px rgba(0,0,0,0.15); }
.orange-color h3 {color: var(--ftorange);}
.orange-color .progress-bar {background-color: var(--orangebg);}
.orange-color .dash-left-col::before {background-color: var(--orangebg);}
.purple-color h3 {color: var(--ftpurple);}
.purple-color .progress-bar {background-color: var(--purplebg);}
.purple-color .dash-left-col::before {background-color: var(--purplebg);}
.skyblue-color h3 {color: var(--ftskyblue);}
.skyblue-color .progress-bar {background-color: var(--skybluebg);}
.skyblue-color .dash-left-col::before {background-color: var(--skybluebg);}
.lightgreen-color h3 {color: var(--ftlightgreen);}
.lightgreen-color .progress-bar {background-color: var(--lightgreenbg);}
.lightgreen-color .dash-left-col::before {background-color: var(--lightgreenbg);}
.green-color h3 {color: var(--ftgreen);}
.green-color .progress-bar {background-color: var(--greenbg);}
.green-color .dash-left-col::before {background-color: var(--greenbg);}
.red-color h3 {color: var(--ftred);}
.red-color .progress-bar {background-color: var(--redbg);}
.red-color .dash-left-col::before {background-color: var(--redbg);}
.card {margin-bottom: 30px; background-color: var(--whitebg); transition: all .5s ease-in-out; position: relative; border: none; border-radius: 15px;
  box-shadow: 0px 0px 62px rgba(0,0,0,0.10); /*height: calc(100% - 30px);*/ height: auto;}
.card-header{ border-color: #dbdbdb; position: relative;background: 0 0;padding:1.2rem 1.5rem;display: flex;justify-content: space-between;align-items: center;}
.card-header h4 {margin-bottom: 0px;}
.card-body {padding:1.2rem 1.5rem;}
.student-statistic-sec h5 {margin-bottom: 0px;}
.student-statistic-sec {display: flex; flex-direction: column; justify-content: space-between;}
.student-statistic-sec .student-statistic-list:nth-child(even) {background-color:var(--darkgraybg); border-top: 1px solid #dbdbdb;}
.student-statistic-list li {margin-bottom: 20px;}
.student-statistic-list li a {color: var(--ftred); font-weight: 700;}
.student-statistic-list li a:hover {color: var(--ftblack);}
.redbg {background-color: var(--redbg); color: var(--ftwhite); text-align: center;}
.mb-30 {margin-bottom: 30px;}
.addbgbox {background-color: #41c7b9; display: flex;}
.add-cont {width: 57%; align-self: center; padding: 10px 10px 10px 20px; color: var(--ftwhite);}
.add-cont h4 {color: var(--ftwhite); margin-bottom: 10px;}
.welcome-student-img {flex: 1;}
.middle-profile-sec {display: flex;}
.userprofilebg {background-color: var(--redbg); color: var(--ftwhite); margin-right: 30px; width: 350px; margin-bottom: 30px;}
.main-middle-wrapper {flex: 1;}
.profile-sec h3 {font-weight: 600; margin-bottom: 25px;}
.profile-sec h3, .profile-sec h4 {color: var(--ftwhite);}
.profile-info li {padding: 15px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.30); display: flex; align-items: center; justify-content: space-between;}
.profile-info li a {color: var(--ftwhite);}
.profile-info li a:hover {color: var(--ftwhite); opacity: 0.7;}
.profile-info li label {font-weight: 600;}
.profile-info li label, .profile-info li p {margin-bottom: 0; line-height: normal;}
.user-profile-img {overflow: hidden; width: 140px; height: 140px; margin: 0px auto 20px auto;}
.user-profile-img img {width: 100%; height: 100%; object-fit: cover; border: 10px solid rgba(255,255,255,0.45); border-radius: 100%;}
.userfollowers ul {margin-bottom: 10px;}
.userfollowers li {padding: 15px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.10); display: flex; /*align-items: center;*/ justify-content: space-between; gap: 10px; color: var(--ftblack);}
.userfollowers li p a {word-break: break-word;}
.userfollowers li label, .userfollowers li p {margin-bottom: 0; line-height: normal;}
.userfollowers li label {font-weight: 400;}
.userfollowers li span {font-weight: 600;}
.userfollowers li:first-child {padding-top: 0px;}
.userfollowers li:last-child {border-bottom: none;}
.followbtn a {margin: 0px 7px; border-radius: 30px; padding: 8px 25px; line-height: normal;}
.footer-sec {text-align: right; padding: 20px 125px; border-top:1px solid #fff; display: flex; justify-content: flex-end; align-items: center; }
.footer-sec .clssslbox {margin-left: 12px;}
.navbar-comm, .middle-panel {transition:all 0.3s ease-in-out 0s;}
.sidebar-is-open {width: 300px;}
.middle-panel.nav-sidebar-is-open {padding-left: 300px;}
.nav-sidebar-is-open .hamburger .ti-align-justified:before {content: "\ea1f";}
.nav-sidebar-is-open .hamburger a {color: var(--ftred);}
.navbar-menu li a.active {background-color: var(--redbg); color: var(--ftwhite);}
.sidebar-is-open .navbar-menu li.menu-collapse-active a.subarrow::before {content: "\ea5f";}
.mobile-top-setting {display: none;}
h1.mobile-title {display: none; font-weight: 700; margin-bottom: 30px;}
/*------inner-page------*/

.inner-content-part .row.page-titles {margin-left: 0px; margin-right: 0px;}
.inner-content-part .page-titles {background-color: var(--whitebg); box-shadow: 0px 0px 62px rgba(0,0,0,0.10); border-radius: 15px; margin-bottom: 30px; padding: 20px;}
.inner-content-part .row.page-titles .col-md-5 {padding-left: 0px;}
.inner-content-part .row.page-titles .col-md-7 { padding-right: 0px;}
.inner-content-part .container-fluid {padding-left: 0px; padding-right: 0px;}
.inner-content-part .breadcrumb {margin-bottom: 0px; font-size: 17px; font-weight: 500; color: var(--ftred); margin: 0;  padding: 0; background-color: transparent; border-radius: 0px;}
.inner-content-part .breadcrumb-item.active {font-weight: normal; color: #000;}
.inner-content-part .page-titles h3.text-themecolor {margin-bottom: 6px;}
.inner-content-part .page-titles .chart-text {display: flex; align-items: center; margin-left: 15px;}
.inner-content-part .page-titles .chart-text h6, .inner-content-part .page-titles .chart-text h4 {margin-bottom: 0px;}
.inner-content-part .page-titles .chart-text h6 small {margin-top: 0px; font-size: .875em; font-weight: 500;}
.inner-content-part .page-titles .chart-text h4 {margin-left: 10px; padding: 5px 10px;  border-radius: 5px; color: var(--ftwhite) !important; background-color: var(--redbg); font-size: 16px; line-height: normal;}

.dt-button {color:var(--ftwhite); background-color: var(--redbg); border-color:var(--redbg); border-radius: 7px; box-shadow: 0px 6px 6px rgba(0,0,0,0.11); padding: 7px 15px; display: inline-flex; text-align: center; align-items: center; justify-content: center; line-height: normal; font-size: 15px; font-weight: 500;}
.dt-button:hover {color: var(--ftwhite); background-color: var(--blackbg); border-color: var(--blackbg);}
.dt-buttons {margin-bottom: 20px; display: inline-flex;}
.dt-buttons a {margin-right: 10px;}
.inner-content-part .btn-info.pull-right {float: right; margin-bottom: 20px;} 
.inner-content-part .table-responsive {width: 100%; overflow-y: clip;}
.inner-content-part .dataTables_filter {float: right;}
.m-t-40 {margin-top: 60px;}

/*--data-table-start---*/
.dataTables_wrapper .dataTables_filter input {margin-left: 10px; border: 0.0625rem solid #e2e2e2; padding: .3rem 0.5rem;  color: #715d5d;  border-radius: 0.3125rem;}
table.dataTable .label-table.label-danger {color: var(--ftred); font-weight: 500;}
table.dataTable .label-table.label-success {color: var(--ftgreen); font-weight: 500;}
table.dataTable{ width: 100%;margin: 0 auto;clear: both;border-collapse: separate;border-spacing: 0;}
tbody,td,tfoot,th,thead,tr{ border-color: inherit;border-style: solid;border-width: 0;}
table.dataTable thead th{ white-space: nowrap;font-size: 17px;text-transform: capitalize;font-weight: 600;padding: 1.25rem .9375rem;}
table.dataTable thead td,table.dataTable thead th{ border-bottom: 2px solid var(--darkgraybg);border-top: 0;border-right: 0;border-left: 0;}
table.dataTable tbody td,table.dataTable tbody tr{ background: 0 0!important;}
table.dataTable tbody td{ padding: 1.25rem .9375rem;font-size: 1rem;font-weight: 400;border-bottom: 0;}
table.dataTable.display tbody td,table.dataTable.display tbody th,table.dataTable.row-border tbody td,table.dataTable.row-border tbody th{ border: none;border-color: var(--darkgraybg);border-bottom: 1px solid var(--darkgraybg);}
table.dataTable tbody td,table.dataTable tbody tr{ background: 0 0!important;}
.table > :not(caption) > * > *{ box-shadow: none;}
table.dataTable tfoot td,table.dataTable tfoot th{ border-top: 0;}
table.dataTable tfoot td,table.dataTable tfoot th{ padding: 10px 18px 6px 18px;border: none;border-top: 1px solid var(--darkgraybg);}
.dataTables_wrapper .dataTables_info{ clear: both; /*float: left;*/ display: inline-block; padding-top: 15px; min-height: 60px;}
.dataTables_wrapper .dataTables_paginate{ align-items: center;display: flex;flex-flow: wrap;float: right;text-align: right;padding-top: 15px;}
.dataTables_wrapper .dataTables_paginate span .paginate_button{ height: 40px;width: 40px;padding: 0;margin-left: 0;margin: 0 2px;line-height: 3.125rem;text-align: center;font-size: 16px;border-radius: 7px;border: 0!important;color: var(--ftblack)!important;background-color: var(--skybluelight);display: inline-flex;justify-content: center;align-items: center;cursor: pointer;}
.dataTables_wrapper .dataTables_paginate span .paginate_button.current:hover,.dataTables_wrapper .dataTables_paginate span .paginate_button:hover:hover{ color: #fff!important;background: var(--redbg)!important;}
.dataTables_wrapper .dataTables_paginate span .paginate_button.current,.dataTables_wrapper .dataTables_paginate span .paginate_button:hover{ color: var(--ftwhite)!important;background-color: var(--redbg);}
table#example23{ padding: 0 0 2rem 0;}
.dataTables_wrapper .dataTables_paginate .paginate_button.next,.dataTables_wrapper .dataTables_paginate .paginate_button.previous{ font-size: 1.125rem;height: 40px;width: 40px;background: 0 0;border-radius: 7px;padding: 0 .45rem;line-height: 3.125rem;margin: 0 10px;display: inline-flex;justify-content: center;align-items: center;cursor: pointer;color: var(--ftblack)!important;position: relative;}
.dataTables_wrapper .dataTables_paginate .paginate_button.next.current:hover,.dataTables_wrapper .dataTables_paginate .paginate_button.next.next:hover,.dataTables_wrapper .dataTables_paginate .paginate_button.next.previous:hover,.dataTables_wrapper .dataTables_paginate .paginate_button.previous.current:hover,.dataTables_wrapper .dataTables_paginate .paginate_button.previous.next:hover,.dataTables_wrapper .dataTables_paginate .paginate_button.previous.previous:hover{ color: #fff!important;background: var(--redbg)!important;}
.dataTables_wrapper .dataTables_paginate .paginate_button.next,.dataTables_wrapper .dataTables_paginate .paginate_button.previous{ text-indent: 99999px;overflow: hidden;}
.dataTables_wrapper .dataTables_paginate .paginate_button.next::before,.dataTables_wrapper .dataTables_paginate .paginate_button.previous::before{ position: absolute;color: var(--ftblack);text-indent: inherit;font-family: tabler-icons!important;font-size: 18px;}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous::before{ right: 12px;content: "\ea64";}
.dataTables_wrapper .dataTables_paginate .paginate_button.next::before{ right: 12px;content: "\ea65";}
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover:before,.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover:before{ color: var(--ftwhite);}
table.dataTable td a i.fa{ display: inline-flex;width: 30px;height: 30px;border-radius: 5px;color: var(--ftlightskyblue)!important;background-color: transparent;margin: 0 2px;justify-content: center;align-items: center;border: 1px solid var(--lightskybluebg);transition: all .3s ease-in-out 0s;}
table.dataTable td a:hover i.fa{ background-color: var(--redbg);border-color: var(--redbg);color: var(--ftwhite)!important;}
table.dataTable thead .sorting::after{ content: "\f0dc";margin-left: 10px;font-family: fontawesome!important;cursor: pointer;color: rgba(50,50,50,.5);}
table.dataTable thead .sorting_desc::after{ content: "\f0dd";margin-left: 10px;font-family: fontawesome;cursor: pointer;}
table.dataTable thead .sorting_asc::after{ content: "\f0de";margin-left: 10px;font-family: fontawesome;cursor: pointer;}
table.dataTable .label-light-info{ background-color: var(--skybluelight);color: #000;padding: 5px 10px;border-radius: 5px;line-height: normal;font-size: 14px;display: inline-block;white-space: nowrap;}
.right-side-toggle {display: none;}

/*--data-table-end---*/

/*-------add-new-form-sec-start---------*/
.inner-content-part .card-outline-info .card-header h4 {color: var(--ftblack) !important;  display: flex; align-items: center; flex: 1; justify-content: space-between;}
.inner-content-part .card-outline-info .card-header h4 .btn-info.pull-right {margin-bottom: 0px; float: none; margin-left: auto;}
.inner-content-part .card-outline-info form.form-horizontal .form-body .row .col-md-9 {/*padding-left: 0px; padding-right: 0px;*/ width: 100%; max-width: 100%; flex: 0 0 100%;}
.inner-content-part .card-outline-info form.form-horizontal .control-label {margin-bottom: 5px;}
.inner-content-part .card-outline-info form.form-horizontal hr {margin: 10px 0px 5px 0px;}
.inner-content-part .card-outline-info form.form-horizontal .col-md-3 {width: 100%; max-width: 100%; flex: 0 0 100%;}

/*-------add-new-form-sec-end---------*/

.form-horizontal .form-group{ margin-bottom: 15px;}
#studentdata_filter,.gc-dt-students{ display: flex;align-items: center;justify-content: start;width: 100%;}
select.form-control[multiple] {background-image: none;}
label.control-label.text-right {text-align: left !important;}
.form-horizontal .form-body .col-md-1 {margin-bottom: 20px;}
::-webkit-file-upload-button{ font: inherit; -webkit-appearance: button;}
::file-selector-button{ font: inherit; -webkit-appearance: button;}
.form-control::file-selector-button{ padding: .390rem .79rem;margin: -.390rem -.79rem;-webkit-margin-end: .79rem;margin-inline-end: .79rem;color: var(--ftblack);background-color: #f8f9fa;
  pointer-events: none;border-color: #e4e4e4;border-style: solid;border-width: 0;border-inline-end-width: #e4e4e4;border-radius: 0; box-shadow: none; cursor: pointer;border-right: 1px solid #e4e4e4;}

@media (prefers-reduced-motion:reduce) {
  .form-control::-webkit-file-upload-button{ -webkit-transition: none;transition: none;}
  .form-control::file-selector-button{ transition: none;}
}
.mail-menu-box .nav .label{ padding: 3px 10px;line-height: 13px;color: #fff;font-weight: 400;border-radius: 4px;font-size: 75%;}
.mail-menu-box .label-primary {background-color: #7460ee;}
.mail-menu-box .label-success {background-color: #28a745;}
.mail-menu-box .label-info {background-color: #fe0000;}
.mail-menu-box .label-danger {background-color: #fc4b6c;}
.box-header h3.box-title {font-weight: 500; font-size: 22px; margin: 0px; padding-top:7px; padding-bottom: 7px;}
.box.box-primary {padding: 0px 15px;}
.gc_samarkattwrap .col-md-2 {-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;}
button:focus {outline: none;}
.form-group.error .help-block ul {color: var(--ftred);}
.form-group.error .help-block li {font-size: 13px;}
.form-group.error input, .form-group.error select, .form-group.error textarea { border-color:var(--redbg);}
.modal .modal-header {background-color: var(--lightgraybg); border-radius: 0.3rem 0.3rem 0 0;}
.alert-success {color: #175625; background-color: #96cca3; border-color: #7ebb8d;}
.gc_samarkattwrap .controls button {margin-top: 30px;} 
.right-ft-setting li {margin-bottom: 0px;}
.modal .modal-body .m-t-40 {margin-top: 10px;}
.inner-content-part .rsaschoolinfo {background-color: #fff !important;}
.resulttypeconvtable .col-md-9[style] {margin-left: 0px !important;}
.input-group-addon {background: none; border: none;}
.rsaschoolinfo img {display: block; margin: 0 auto 10px;}
.datepicker td, .datepicker th {padding: 5px 10px;}
.datepicker table tr td.active.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active.disabled:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active:active, .datepicker table tr td.active:hover, .datepicker table tr td.active:hover.active, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active:hover:active, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active[disabled] {background-color: var(--redbg) !important; }
.datepicker table tr td.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active:hover {background-color: var(--redbg) !important; background-image: linear-gradient(to bottom,#ed222a,#da151d) !important;}
.clsremovebuttonspace .gc_samarkattwrap .controls button {margin-top: 0px;}
table.dataTable td a i.fa.fa-folder-open-o {color:var(--ftwhite) !important; border-color: var(--whitebg);}
.dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled:hover:before,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled:hover:before{ color: #000 !important;}
.inner-content-part .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, 
.inner-content-part .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, 
.inner-content-part .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {cursor: default; opacity: 0.5; background-color: transparent !important; color: #000 !important;}

/*.form-material .form-group {overflow: hidden;}*/
.hide {display: none;}
.hidden {display: none;}
.mh-inherit {min-height: initial;}
.forgot-login {font-size: 18px; text-align: center; padding-top: 30px;}
.forgot-login a {display: inline-flex; justify-content: center; align-items: center; color: #000; font-size: 24px;     color: var(--ftlightskyblue); font-weight: 500;}
.forgot-login a:hover {color: var(--ftblack);}
.forgot-login a i {margin-right: 5px;}
.register-form-sec {background-color: rgba(255,255,255,0.60); box-shadow: 0px 0px 62px rgba(0,0,0,0.10);}
.register-box-padd {width: 100%; padding: 30px 0px;}
.register-form-sec .gc_loginlogo img {max-height: 80px;}
.register-form-sec .gc_loginchoice .gc_choice {margin-bottom: 30px; font-size: 24px; font-weight: 500; color: var(--ftred);}
.forgot-pass-and-reg-link .forgot-login {padding-top: 0px;}
.custom-control-input:checked ~ .custom-control-indicator {background-color: var(--redbg);}
.custom-control-input:focus ~ .custom-control-indicator {box-shadow: 0 0 0 2px #fff, 0 0 5px 3px var(--redbg);}
.custom-control.custom-radio {cursor: pointer;}
input[type=radio]{ -webkit-appearance: none;-moz-appearance: none;appearance: none;background-color: var(--whitebg);width: 13px;height: 13px;border-radius: 100%;border: 2px solid var(--ftlightskyblue);margin-right: 10px;}
input[type="radio"]:checked {background-color: var(--redbg); box-shadow: 0 0 0 2px #fff, 0 0 3px 3px var(--redbg); border-color: var(--redbg);}
.radiobtnlbl  {cursor: pointer; line-height: 13px; vertical-align: middle; display: inline-flex;}
input[type=checkbox]{ width: 1em;height: 1em;border-radius: .25em;margin-top: .25em;vertical-align: top;background-color: #fff;background-repeat: no-repeat;background-position: center;background-size: contain;border: 1px solid #e4e4e4;-webkit-appearance: none;-moz-appearance: none;appearance: none;-webkit-print-color-adjust: exact;color-adjust: exact;print-color-adjust: exact;cursor: pointer;}
input:checked[type=checkbox]{ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");background-color: var(--redbg);cursor: pointer; border-color: var(--redbg);}
input[type=checkbox]:focus{ border-color: var(--redbg);}
.swal-footer {text-align: center;}
.swal-button {border-radius: 30px;}
.swal-content .btn {border-radius: 30px; padding: 12px 15px;}
.gc_schtitle {position: relative;}
.gc_schtitle button.close {position: absolute; right: 0; top: 0;}
.loging-suc-icon {margin-bottom: 15px; text-align: center;}
.loging-suc-icon i {color: var(--redbg); font-size: 55px;}
.inner-content-part .table-responsive {overflow-y: hidden; overflow-x: auto;}
#filterform .gc_samarkattwrap .controls button {margin-top: 0px;}
table#massenrollm .form-group {margin-bottom: 0px;}
#massenrollm_wrapper {margin-bottom: 30px;}
table input[type="checkbox"] { width: 1em;height: 1em;border-radius: 5px;margin-top: .25em;vertical-align: top;background-color: #fff;background-repeat: no-repeat;background-position: center;background-size: contain;border: 1px solid #e4e4e4;-webkit-appearance: none;-moz-appearance: none;appearance: none;-webkit-print-color-adjust: exact;color-adjust: exact;print-color-adjust: exact;cursor: pointer; border-radius: .25em;cursor: pointer; margin-right: 5px;}
table input[type="checkbox"]:checked[type=checkbox]{ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");background-color: var(--redbg);cursor: pointer; border-color: var(--redbg);}
.form-check-input:focus{ border-color: var(--redbg);}
.form-horizontal .churchimageswarp .btn-file{ border: 1px solid #e4e4e4!important;background-color: transparent!important;border-radius: 8px!important;padding: 0!important;height: 51px;}
.form-horizontal .churchimageswarp .btn-file:focus{ border-color: #7460ee!important;}
.churchimageswarp .btn-file > input{ position: absolute;top: 0;right: 0;margin: 0;opacity: 0;font-size: 23px;height: 100%;width: 100%;direction: ltr;cursor: pointer;border-radius: 8px 0 0 8px;}
.churchimageswarp span.fileinput-new{ background: #f8f9fa;color: #000;padding: 3px 15px;height: 49px;display: inline-flex;justify-content: center;align-items: center;margin-left: 3px;border-right: 1px solid #e4e4e4; margin: 0px; border-radius: 8px 0px 0px 8px;}
.select2-container .select2-selection--multiple {min-height: 51px;}
.select2-container--default .select2-selection--multiple {border-radius: 0.625rem; border: 1px solid #e4e4e4;}
.select2-container--default.select2-container--focus .select2-selection--multiple {border: 1px solid var(--redbg);}
.select2-dropdown {border-color: #e4e4e4;}
.select2-container--default .select2-results__option--highlighted[aria-selected] {background-color: var(--redbg);}
.gc_samarkattwrap .multipleselectbox .btn-default {color: #495057 !important; background-color: var(--whitebg) !important; border-color: #e4e4e4 !important; border-radius: 10px !important; height: 51px; box-shadow: none; font-weight: 400;}
button.close {cursor: pointer;} 
.form-group .gc-bunbgcolor {color:var(--ftwhite) !important; background-color: var(--redbg) !important; border-color:var(--redbg) !important;}
.form-group .gc-bunbgcolor:hover {color: var(--ftwhite) !important; background-color: var(--blackbg) !important; border-color: var(--blackbg) !important;}
.bootstrap-select ul{display: block;}
.bootstrap-select ul li a{padding: 15px;}
.gc_samarkattwrap .multipleselectbox .dropdown-toggle::after {  margin-left: -3px !important; background-image: url(../images/fnl/select-arrow.png); background-repeat: no-repeat; background-position: center right;
  border: none; width: 25px; height: 5px;}
.gc_samarkattwrap .multipleselectbox.controls button {margin-top: 0px;}
.gc_samarkattwrap .bootstrap-select .dropdown-toggle:focus {outline: 1px solid var(--redbg) !important; outline-offset: inherit; border-color: var(--redbg);}
.dashboard-full-calendar table, .dashboard-full-calendar table td, .dashboard-full-calendar table tr, .dashboard-full-calendar table th {border: none;}
.dashboard-full-calendar.fc-unthemed th, .dashboard-full-calendar.fc-unthemed td, .dashboard-full-calendar.fc-unthemed thead, .dashboard-full-calendar.fc-unthemed tbody, .dashboard-full-calendar.fc-unthemed .fc-divider, .dashboard-full-calendar.fc-unthemed .fc-row, .dashboard-full-calendar.fc-unthemed .fc-popover {border: none;}
.dashboard-full-calendar .fc-basic-view .fc-body .fc-row {min-height: 35px;} 
.dashboard-full-calendar .fc-widget-header {height: 39px;}
.dashboard-full-calendar .fc-widget-header th {font-weight: 600;}
.dashboard-full-calendar td.fc-day-top {text-align: center; height: 35px; vertical-align: middle; cursor: pointer;}
.dashboard-full-calendar .fc-center h2 {font-size: 18px; font-weight: 500; margin-bottom: 0px; color: var(--ftwhite); margin-top: 10px;}
.dashboard-full-calendar .fc-toolbar {margin-bottom: 7px; }
.dashboard-full-calendar.fc button {height: auto;}
.dashboard-full-calendar .fc-state-default {background-color: transparent; border: none; background-image: none; box-shadow: none; text-shadow: none; color: #fff; text-transform: capitalize;}
.dashboard-full-calendar.fc-unthemed .fc-today {background: none; background-color: rgba(255, 255, 255, 0.20);}
.chat-calender-sec .whitebox.redbg {padding-top: 20px !important; padding-bottom: 10px !important;}
.dashboard-full-calendar hr.fc-divider.fc-widget-header {height: initial;}
.dashboard-full-calendar.fc .fc-axis {width: 61px !important;}
.dashboard-full-calendar.fc table {font-size: 14px;}
/*.dashboard-student-attendance-chart {height: calc(100% - 30px);}*/
.alert-danger { color: #721c24; background-color: #ffafb6; border-color: #937376; }

table.dataTable td.text-nowrap a.btn-generate-certificate {padding: 2px 5px; border-radius: 5px;}
table.dataTable td.text-nowrap a.btn-generate-certificate i.fa {color: #fff !important; width: auto; height: auto; border: none; padding: 0; margin: 0px; background-color: transparent !important;}  
table.dataTable td.text-nowrap a.btn-generate-certificate:hover i.fa {background-color: transparent !important;}
table.dataTable td.text-nowrap a.btn-generate-certificate i.fa::before {margin-right: 4px;}
.theme-light #student_attendance .highcharts-data-labels text{fill:#fff !important;}
.page-loader{
    background: #5b5b5bf0;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.theme-dark .page-loader{
    background: #2a2f39b5 !important;
}
.page-loader-icon {
    position: relative;
    width: 130px;
    height: 160px;
    background: #fff;
    border-radius: 4px;
}
.page-loader-icon:before{
    content: '';
    position: absolute;
    width: 54px;
    height: 25px;
    left: 50%;
    top: 0;
    background-image:
    radial-gradient(ellipse at center, #0000 24%,#de3500 25%,#de3500 64%,#0000 65%),
    linear-gradient(to bottom, #0000 34%,#de3500 35%);
    background-size: 12px 12px , 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    transform: translate(-50% , -65%);
    box-shadow: 0 -3px rgba(0, 0, 0, 0.25) inset;
}
.page-loader-icon:after{
    content: '';
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    width: 66%;
    height: 60%;
    background: linear-gradient(to bottom, #f79577 30%, #0000 31%);
    background-size: 100% 16px;
    animation: writeDown 0.5s ease-out infinite;
}
.page-loader h3{
    color: #fff;
    margin-bottom: 0px;
    margin-top: 20px;
}

@keyframes writeDown {
    0% { height: 0%; opacity: 0;}
    20%{ height: 0%; opacity: 1;}
    80% { height: 65%; opacity: 1;}
    100% { height: 65%; opacity: 0;}
}
.eventholidayinfo { color: #000; }
.notify {
    position: relative;
    top: -7px;
    right: -7px;
}
.notify .heartbit {
    position: absolute;
    top: -20px;
    right: -4px;
    height: 25px;
    width: 25px;
    z-index: 10;
    border: 5px solid #fc4b6c;
    border-radius: 70px;
    -moz-animation: heartbit 1s ease-out;
    -moz-animation-iteration-count: infinite;
    -o-animation: heartbit 1s ease-out;
    -o-animation-iteration-count: infinite;
    -webkit-animation: heartbit 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.notify .point {
    width: 6px;
    height: 6px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color: #fc4b6c;
    position: absolute;
    right: 6px;
    top: -10px;
}
@-moz-keyframes heartbit {
  0% {
    -moz-transform: scale(0);
    opacity: 0.0; }
  25% {
    -moz-transform: scale(0.1);
    opacity: 0.1; }
  50% {
    -moz-transform: scale(0.5);
    opacity: 0.3; }
  75% {
    -moz-transform: scale(0.8);
    opacity: 0.5; }
  100% {
    -moz-transform: scale(1);
    opacity: 0.0; } }

@-webkit-keyframes heartbit {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0; }
  25% {
    -webkit-transform: scale(0.1);
    opacity: 0.1; }
  50% {
    -webkit-transform: scale(0.5);
    opacity: 0.3; }
  75% {
    -webkit-transform: scale(0.8);
    opacity: 0.5; }
  100% {
    -webkit-transform: scale(1);
    opacity: 0.0; } }