@media screen and (min-width: 1200px){
  .container {
      width: 100%;
      max-width: 1400px !important;
  }

}
@font-face{
	font-family: Font Awesome;
	src:url(../fonts/fontawesome-webfont.woff);
}
@font-face {
  font-family: Montserrat-Bold;
  src: url(../fonts/Montserrat-Bold.ttf);
}
@font-face {
  font-family: Montserrat-SemiBold;
  src: url(../fonts/Montserrat-SemiBold.ttf);
}
@font-face {
  font-family: Montserrat-Medium;
  src: url(../fonts/Montserrat-Medium.ttf);
}
@font-face {
  font-family: Montserrat-Regular;
  src: url(../fonts/Montserrat-Regular.ttf);
}
@font-face {
  font-family: Raleway-Bold;
  src: url(../fonts/Raleway-Bold.ttf);
}
@font-face {
  font-family: Raleway-ExtraBold;
  src: url(../fonts/Raleway-ExtraBold.ttf);
}
@font-face {
  font-family: Raleway-Medium;
  src: url(../fonts/Raleway-Medium.ttf);
}
@font-face {
  font-family: Raleway-Regular;
  src: url(../fonts/Raleway-Regular.ttf);
}
@font-face {
  font-family: Lato-Black;
  src: url(../fonts/Lato-Black.ttf);
}
@font-face {
  font-family: Lato-Bold;
  src: url(../fonts/Lato-Bold.ttf);
}
.swal2-popup {
    padding: 4em 1.25em !important;
}
.swal2-close {
  color: #000 !important;
  font-size: 32px !important;
    
}
.swal2-close:hover{
  color: #322a7d !important;
}
.swal2-close:focus, .swal2-close:active{
  outline: none !important;
  border: 0px solid transparent !important;
  box-shadow: inset 0 0 0 0px rgb(100 150 200 / 50%) !important;
}

/* login page css */
.login_section_main{
  height: 100vh;
  min-height: 700px;
  display: flex;
}
.login_section_main .login_left_div_main{
  background-image: url(../images/login_bg.png);
  width: 65%;
  float: left;
  display: table;
  background-repeat: no-repeat;
  height: 100%;
  background-size: cover;
}
.login_section_main .login_left_div_main .login_heading_main{
  display: table-cell;
  vertical-align: middle;
  color: #fff;
  padding: 0px 10%;
}
.login_section_main .login_left_div_main .login_heading_main .login_left_heading_big{
  font-family: Montserrat-Bold;
  margin: 0px 0px 40px 0px;
}
.login_section_main .login_left_div_main .login_heading_main .login_left_heading_medium{
  font-family: Montserrat-Regular;
  margin: 0px 0px 0px 0px;
}
.login_section_main .login_left_div_main .login_heading_main .login_left_heading_medium span{
  width: 100%;
  display: inline-block;
}
.login_right_div_main{
  width: 35%;
  float: left;
  display: table;
  height: 100%;
  background: #F7F8FA;
}
.login_right_div_main .form_holder_main{
  display: table-cell;
  vertical-align: middle;
  color: #fff;
  padding: 0px 15%;
}
.login_right_div_main .form_holder_main .logo_main{
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
}
.login_right_div_main .form_holder_main .logo_main img{
  width: 100%;
  max-width: 400px;
}
.login_right_div_main .form_holder_main .form_heading{
  color: #000;
  font-family: Montserrat-Bold;
  text-align: center;
  margin: 0px 0px 40px 0px;
}
.login_right_div_main .form_holder_main .loginform{
  display: inline-block;
  width: 100%;
}
.login_right_div_main .form_holder_main .loginform .login_form_input_main{
  position: relative;
  margin-bottom: 20px;
  display: inline-block;
  width: 100%;
}
.login_right_div_main .form_holder_main .loginform .login_form_input_main .phone_input_main{
  display: inline-block;
  width: 100%;
  float: left;
}
.login_right_div_main .form_holder_main .loginform .margin_zero_form_group{
  margin-bottom: 0px;
}
.login_right_div_main .form_holder_main .loginform .login_form_input_main .get_otp_btn_main{
  display: inline-block;
  width: 30%;
  float: left;
}
.login_right_div_main .form_holder_main .loginform .login_form_input_main i{
  color: #000;
  font-size: 20px;
  position: absolute;
  top: 18px;
  left: 16px;
}
.login_right_div_main .form_holder_main .loginform .login_form_input_main i.fa-lock{
  left: 22px;
}
.login_right_div_main .form_holder_main .loginform .login_form_input_main input{
  height: 55px;
  border-radius: 35px;
  line-height: 55px;
  padding: 0px 50px;
  border: 2px solid transparent;
  border-color: transparent;
  -webkit-box-shadow: inset 0 0px 0px rgb(0 0 0 / 0%);
  box-shadow: inset 0 0px 0px rgb(0 0 0 / 0%);

}
.get_otp_btn{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #322a7d;
  cursor: pointer;
  margin: 3px 0px 0px 10px;
  font-size: 13px;
  text-transform: uppercase;
  font-family: Montserrat-Regular;
}
.login_right_div_main .form_holder_main .loginform .login_form_input_main.otp_input_main{
  display: none;
}
.login_right_div_main .form_holder_main .loginform .login_form_input_main input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #000;
  opacity: 1; /* Firefox */
  font-family: Montserrat-Regular;
}

.login_right_div_main .form_holder_main .loginform .login_form_input_main input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #000;
  font-family: Montserrat-Regular;
}

.login_right_div_main .form_holder_main .loginform .login_form_input_main input::-ms-input-placeholder { /* Microsoft Edge */
  color: #000;
  font-family: Montserrat-Regular;
}
.login_right_div_main .form_holder_main .loginform .login_form_input_main input:focus{
  outline: none;
  border-color: #322a7d;
}
.login_right_div_main .form_holder_main .loginform .login_btn{
  width: 100%;
  font-family: Montserrat-Regular;
  color: #fff;
  height: 60px;
  line-height: 60px;
  background: #322a7d;
  border-radius: 35px;
  margin-top: 20px;
  padding: 0px;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.login_right_div_main .form_holder_main .loginform .login_btn:focus{
  outline: none;
}
.login_right_div_main .form_holder_main .signuplink{
  display: inline-block;
  width: 100%;
  text-align: center;
  color: #322a7d;
  font-family: Montserrat-SemiBold;
  margin: 100px 0px 0px 0px;
}
.login_right_div_main .form_holder_main .signuplink a{
  font-family: Montserrat-Bold;
  color: #322a7d;
}
.login_right_div_main .form_holder_main .signuplink a:hover{
  text-decoration: none;
}

/* inner page left menu css */
#sidebar-wrapper {
  display: inline-block;
  width: 50px;
  position: fixed;
  height: 100%;
  border-right: 1px solid #cccccc6b;
  transition: 0.4s;
  background: #fff;
  z-index: 999999999;
}
#sidebar-wrapper .sidebar_logo_main {
  display: inline-block;
  width: 100%;
  /* text-align: center; */
  white-space: nowrap;
  overflow-x: hidden;
  margin-bottom: 30px;
  margin-top: 28px;
  transition: 0.4s;
}
#sidebar-wrapper .sidebar_logo_main a{
	display: inline-block;
}
#sidebar-wrapper .sidebar_logo_main .small_logo{
  display: inline-block;
  width: 40px;
  margin-left: 3px;
}
#sidebar-wrapper .sidebar_logo_main .big_logo{
  display: none;
  width: 130px;
  margin-left: 6px;
}
.desktop_show_menu{
  width: 170px !important;
}
.desktop_show_menu_page_content{
  padding-left: 170px !important;
}
.desktop_show_menu .sidebar_logo_main .small_logo{
  display: none !important;
}
.desktop_show_menu .sidebar_logo_main .big_logo{
  display: inline-block !important;
}
#sidebar-wrapper .sidebar-nav{
  padding: 0px;
  width: 100%;
  height: 100%;
  margin-top: 0px;
  overflow-x: hidden;
}
#sidebar-wrapper .sidebar-nav li{
  display: inline-block;
  width: 100%;

}
#sidebar-wrapper .sidebar-nav li a{
  display: inline-block;
  width: 100%;
  border-right: 2px solid transparent;
  margin-bottom: 40px;
  white-space: nowrap;
}
#sidebar-wrapper .sidebar-nav li a .menuicon_main {
    margin-left: 16px;
    margin-right: 16px;
}
#sidebar-wrapper .sidebar-nav li a .menu_text {
    text-transform: capitalize;
    color: #bcc5d5;
    font-family: 'Raleway-Bold';
    font-size: 14px;
}
#sidebar-wrapper .sidebar-nav li a.logouticon_main{
  margin-top: 80px;
}

#sidebar-wrapper .sidebar-nav li.activemenu a{
  display: inline-block;
  width: 100%;
  border-right: 2px solid #322a7d;
  text-decoration: none;
}
#sidebar-wrapper .sidebar-nav li.activemenu a .menu_text{
  color: #322a7d;

}
#sidebar-wrapper .sidebar-nav li a img.activeicon{
  display: none;
}
#sidebar-wrapper .sidebar-nav li.activemenu a .normalicon{
  display: none;
  text-decoration: none;
}
#sidebar-wrapper .sidebar-nav li.activemenu a .activeicon{
  display: inline-block;
  text-decoration: none;
}
#sidebar-wrapper .sidebar-nav li.activemenu a .menu_text{
  color: #322a7d;
}

#sidebar-wrapper .menuclose_toogle_main{
  display: none;
  width: 100%;
  text-align: center;
  margin: 30px 0px 0px 0px;
}
#sidebar-wrapper .menuclose_toogle_main .menu_close_icon{
  font-size: 32px;
  color: #ccd4e0;
  margin-right: 3px;
  transition: 0.4s;
}
#sidebar-wrapper .menuclose_toogle_main .menu_close_icon:hover{
  color: #322a7d;
}

#page-content-wrapper{
  margin-left: 0px;
  background: #F7F8FA;
  padding: 0px 0px 0px 50px;
  height: 100%;
  min-height: 1000px;
  transition: 0.4s;
}
/* topbar css */
#page-content-wrapper .topbar_main{
  display: inline-block;
  width: 94%;
  padding: 20px 10px 10px 10px;
}
#page-content-wrapper .topbar_main .toggle_menu {
    display: none;
    margin-top: 13px;
    cursor: pointer;
}
#page-content-wrapper .topbar_main .toggle_menu .menu_toogle_icon{
  font-size: 28px;
  margin-right: 0px;
  color: #ccd4e0;
  transition: 0.4s;
}
#page-content-wrapper .topbar_main .toggle_menu .menu_toogle_icon:hover{
  color: #322a7d; 
}
#page-content-wrapper .topbar_main .desktop_toggle_menu_main {
  display: inline-block;
  margin-top: 13px;
  cursor: pointer;
}
#page-content-wrapper .topbar_main .desktop_toggle_menu_main .desktop_toggle_menu_main_icon{
  font-size: 28px;
  margin-right: 0px;
  color: #ccd4e0;
  transition: 0.4s;
}
#page-content-wrapper .topbar_main .desktop_toggle_menu_main .desktop_toggle_menu_main_icon:hover{
  color: #322a7d; 
}
#page-content-wrapper .topbar_main .desktop_toggle_menu_main .desktop_toggle_menu_close_main_icon{
  font-size: 28px;
  margin-right: 0px;
  color: #ccd4e0;
  transition: 0.4s;
  display: none;
}
#page-content-wrapper .topbar_main .desktop_toggle_menu_main .desktop_toggle_menu_close_main_icon:hover{
  color: #322a7d; 
}
#page-content-wrapper .topbar_main .username_img_holder_main{
  display: inline-block;
  width: 100%;
  text-align: right;
  margin-top: 5px;
}
#page-content-wrapper .topbar_main .username_img_holder_main .username{
  font-size: 14px;
  font-family: Raleway-Bold;
  margin-right: 10px;
  color: #000000;
  text-transform: capitalize;
}
#page-content-wrapper .topbar_main .username_img_holder_main .userimg{
	display: inline-block;
    vertical-align: middle;
}
#page-content-wrapper .page_content_main{
  display: inline-block;
  width: 95%;
  margin-bottom: 50px;
}
#page-content-wrapper .page_content_main .page_title_dis_main{
  display: inline-block;
  width: 100%;
  margin: 10px 0px 30px 0px;
}
#page-content-wrapper .page_content_main .page_title_dis_main .page_title{
  margin: 0px;
  color: #322a7d;
  font-family: 'Raleway-Bold';
}
#page-content-wrapper .page_content_main .page_title_dis_main .page_dis{
  font-family: 'Raleway-Bold';
  color: #000000;
  margin-bottom: 0px;
}
/* dashboard css */
.account_status_main {
  background: #fff;
  display: inline-block;
  width: 100%;
  padding: 40px 20px;
  margin-bottom: 15px;
}
.circle_progess_bar .circle{
  width: 70px;
  height: 70px;
  margin: 0 auto;
  margin-top: 10px;
  display: inline-block;
  position: relative;
  text-align: center;
}
.circle_progess_bar .circle canvas{
  vertical-align: middle;
  border-radius: 50%;
}
.circle_progess_bar .circle div{
  position: absolute;
  top: 5px;
  left: 5px;
  text-align: center;
  font-size: 18px;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  z-index: 99999999;
  line-height: 60px;
  
}
.circle_progess_bar .circle.datausage_circle div{
  background: #E2FBD7;
  color: #34B53A;
}
.circle_progess_bar .circle.daysleft_circle div{
  background: #ffe5b8;
  color: #FFA101;
}
.graph_and_heading_main{
  display: inline-block;
  width: 100%;
  background: #fff;
  padding: 30px;
}
.graph_and_heading_main .heading_main .usage{
  font-family: Raleway-Bold;
  color: #9A9A9A;
  font-size: 14px;
  margin: 10px 0px 10px 0px;
}
.graph_and_heading_main .heading_main .usage_dis{
  font-family: Raleway-Bold;
  color: #000000;
  font-size: 14px;
  margin-bottom: 80px;
}
.account_status_main .account_status_main_inner {
    display: inline-block;
    float: left;
    width: 24%;
}
.account_status_main .account_status_heading {
  font-family: Raleway-Bold;
  font-size: 16px;
  margin: 0px 0px 20px 0px;
  color: #9A9A9A;
}
.account_status_main .account_status{ 
  font-family: Lato-Black;
  color: #34B53A;
  font-size: 28px;
}
.account_status_main .data_status_main {
    border-right: 1px solid #ccc;
    display: inline-block;
    float: left;
    width: 37%;
}
.account_status_main .data_status_main_inner {
    display: inline-block;
}
.account_status_main .account_status_heading .datatypename{
  font-size: 16px;
}
.account_status_main .account_status_heading .usage{
  font-size: 16px;
  display: inherit;
  margin-top: 2px;
  font-family: Raleway-Medium;
}

.account_status_main .data_status_heading {
  font-family: Lato-Black;
  font-size: 36px;
  margin: 20px 0px;
}
.account_status_main .data_status_heading .datatypename{
  font-size: 14px;
}
.account_status_main .data_status_heading .usage{
  font-size: 14px;
  display: inherit;
  margin-top: 2px;
  font-family: Raleway-Medium;
}
.account_status_main .data_statu.circle_progess_bar {
    display: inline-block;
    float: right;
    margin-right: 25px;
    margin-top: 10px;
}
.account_status_main .days_status_main {
    display: block;
    float: left;
    width: 35%;
    margin-left: 25px;
}
.account_status_main .days_status_main_inner {
    display: inline-block;
    float: left;
}
.days_status.circle_progess_bar {
    display: inline-block;
    float: right;
    margin-top: 10px;
}
.account_status_main .days_status_heading {
  font-family: Lato-Black;
  font-size: 36px;
  margin: 20px 0px;
}
.account_status_main .days_status_heading .datatypename{
  font-size: 14px;
}
.account_status_main .days_status_heading .usage{
  font-size: 14px;
  display: inherit;
  margin-top: 2px;
  font-family: Raleway-Medium;
}
#month_graph .simple-bar-graph__caption {
  color: #000;
  font-family: Raleway-Bold;
  font-size: 11px;
}
#month_graph  .simple-bar-graph__bar{
  border-radius: 25px;
  opacity: 1;
  width: 100%;
  margin: auto;
  max-width: 25px;
}
.plan_details_holder_main{
  display: inline-block;
  width: 100%;
  background: #fff;
  padding: 30px;
}
.plan_details_holder_main .plan_heading_dis_main{
  display: inline-block;
  width: 100%;
}
.plan_details_holder_main .plan_heading_dis_main .plan_heading{
  color: #9A9A9A;
  font-family: Raleway-Bold;
  letter-spacing: 1px;
}
.plan_details_holder_main .plan_heading_dis_main .plan_dis{
  color: #000000;
  font-family: Raleway-Medium;
}
.plan_details_holder_main .all_plans_btn {
  float: right;
  padding: 10px 15px;
  border: 2px solid #322a7d;
  text-transform: uppercase;
  border-radius: 10px;
  color: #322a7d;
  font-family: 'Raleway-Bold';
  transition: 0.4s;
  margin-top: 10px;
}
.plan_details_holder_main .all_plans_btn:hover{
  background: #322a7d;
  color: #fff;
}
.plan_details_holder_main .plantable{
  border-collapse: collapse;
  border: 0px solid gray;
  border-radius: 10px;
  overflow: hidden;
  
}
.plan_details_holder_main .plantable {
  border-collapse: separate;
}
.plan_details_holder_main .plantable {
  border: solid #ccc 1px;
  border-radius: 10px;
  border-left:0px;
  margin-top: 30px;
}
.plan_details_holder_main .plantable td, .plan_details_holder_main .plantable th {
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
}
.plan_details_holder_main .plantable th {
  border-top: none;
  border: 0px;
}
.plan_details_holder_main .plantable td {
  border: 0px;
  text-align: center;
}
.plan_details_holder_main .plantable th:first-child {
  border-left: 1px solid transparent;
  border-radius: 10px 0 0 0;
}
.plan_details_holder_main .plantable th:last-child {
  border-left: 0px;
  border-right: 1px solid transparent;
  border-radius: 0 10px 0 0;
}
.plan_details_holder_main .plantable th:only-child{
  border-radius: 10px 10px 0 0;
}
.plan_details_holder_main .plantable tr td:first-child {
  border-left: 1px solid #ccc;
}
.plan_details_holder_main .plantable tr:last-child td:first-child {
  border-radius: 0 0 0 10px;
}
.plan_details_holder_main .plantable tr:last-child td:last-child {
  border-radius: 0 0 10px 0;
}
.plan_details_holder_main .plantable>thead>tr>th {
  vertical-align: bottom;
  border-bottom: 0px solid #ddd;
  text-align: center;
  vertical-align: middle;
}
.plan_details_holder_main .plantable th {
    border: none;
    padding: 5px 20px 10px 20px;
}
.plan_details_holder_main .plantable td{
  border: none;
  padding: 15px 20px 15px 20px;
}
.plan_details_holder_main .plantable thead{
  background: #322a7d;
  color: #fff;
  border-radius: 1px;
}
.plan_details_holder_main .plantable thead .th_plan_heading{
  margin: 0px;
  font-family: Lato-Black;
  font-size: 26px;
}
.plan_details_holder_main .plantable thead .speedtype{
  margin: 0px 0px 0px 10px;
  font-family: Raleway-Medium;
  font-size: 16px;
  vertical-align: text-bottom;
}
.plan_details_holder_main .plantable .th_plantype{
  font-family: Raleway-Medium;
  font-weight: 400;
  vertical-align: super;
}
.plan_details_holder_main .plantable .th_plantype .validity span {
    font-size: 13px;
    font-family: 'Raleway-Medium';
    vertical-align: middle;
    margin-top: 5px;
    color: #000;
    text-transform: capitalize;
    display: inline-block;
    width: 100%;
    color: #fff;
    float: left;
}
.plan_details_holder_main .plantable .th_plantype .validity .ott_avlbl_mdl_btn{
  font-weight: bold;
  cursor: pointer;
}
.plan_details_holder_main .plantable thead .th_days_heading{
  margin: 0px;
  font-family: Lato-Black;
  font-size: 26px;
}
.plan_details_holder_main .plantable thead .days{
  margin: 0px 0px 0px 10px;
  font-family: Raleway-Medium;
  font-size: 16px;
  vertical-align: text-bottom;
}
.plan_details_holder_main .plantable tbody .td_heading{
  display: inline-block;
  width: 100%;
  font-family: 'Raleway-Medium';
  font-size: 14px;
  color: #000;
  margin-bottom: 2px;
}
.plan_details_holder_main .plantable tbody .td_dis{
  display: inline-block;
  width: 100%;
  font-family: 'Montserrat-Bold';
  font-size: 14px;
  color: #000;
}
.router_info_main{
    display: inline-block;
    width: 100%;
    background: #fff;
    padding: 30px;
    margin-top: 15px;
}
.router_info_main .router_heading_dis_main{
  display: inline-block;
  width: 100%;
}
.router_info_main .router_heading_dis_main .heading_main{
  display: inline-block;
  float: left;
}
.router_info_main .router_heading_dis_main .router_heading{
  color: #9A9A9A;
  font-family: Raleway-Bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-block;
  line-height: 38px;
}
.router_info_main .router_heading_dis_main .router_image_main{
  display: inline-block;
  float: left;
  margin-left: 5px;
}
.router_info_main .router_heading_dis_main .router_image_main .router_img {
  width: 42px;
}
.router_info_main .router_heading_dis_main .router_image_main .router_off{
  display: none;
}
.router_info_main .accordian_main {
    display: inline-block;
    width: 100%;
}
.router_info_main .accordian_main .panel-group .panel {
    margin-bottom: 0;
    border-radius: 10px;
}
.router_info_main .accordian_main .panel-group .panel+.panel {
    margin-top: 10px;
}
.router_info_main .panel-heading.active{
	border-radius: 10px 10px 0px 0px;
}
.router_info_main .panel-heading{
	border-radius: 10px;
}
.router_info_main .accordian_main .panel-heading {
	padding: 0;
	border:0;
	color: #ffffff;
	background-color: #322a7d;
}
.router_info_main .accordian_main .panel-title>a, .panel-title>a:active{
	display:block;
	padding:15px;
	color:#fff;
	font-size:16px;
	font-weight:bold;
	text-transform:uppercase;
	letter-spacing:1px;
	word-spacing:3px;
	text-decoration:none;
}
.router_info_main .accordian_main .panel-heading  a:before {
   font-family: 'Font Awesome';
   content: "\f0d7";
   float: right;
   transition: all 0.5s;
}
.router_info_main .accordian_main .panel-heading.active a:before {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
} 
.router_info_main .accordian_main .panel-body .router_details_list{
    list-style: none;
    padding: 0px;
    margin: 0px;
}
.router_info_main .accordian_main .panel-body .router_details_list li{
	margin: 0px 0px 5px 0px;
}
.router_info_main .accordian_main .panel-body .router_details_list li .routerheading{
	font-size: 16px;
    font-family: 'Raleway-Bold';
    color: #000;
}
.router_info_main .accordian_main .panel-body .router_table_main{
  margin-bottom: 0px;
}
.router_info_main .accordian_main .panel-body .router_table_main .router_table{
  border-collapse: separate;
  border-spacing: 0 15px;
}
.router_info_main .accordian_main .panel-body .router_table_main td{
  border: 1px solid #FFF;
  padding: 10px;
  background: #fff;
  box-shadow: 7px 0px 10px #00000017;
}
.router_info_main .accordian_main .panel-body .router_table_main .routervalue{
	font-size: 16px;
    color: #000000b8;
    font-family: 'Lato-Black';
}
.router_info_main .accordian_main .panel-body .router_table_main .routerheading{
  font-size: 16px;
    font-family: 'Raleway-Bold';
    color: #000;
}
.router_info_main .accordian_main .panel-body .router_table_main .ssid_name_main{
  display: inline-block;
  width: 100%;
  position: relative;
}
.router_info_main .accordian_main .panel-body .router_table_main .ssid_name_main input{
  border: 0px solid transparent;
  width: 100%;
  height: 38px;
  cursor: context-menu;
  padding: 10px;
  background: #cccccc2b;
  min-width: 260px;
}
.router_info_main .accordian_main .panel-body .router_table_main .ssid_name_main:hover input{
  background: #cccccc47;
}
.router_info_main .accordian_main .panel-body .router_table_main .ssid_name_main:hover .editicon{
  display: inline-block;
}
.router_info_main .accordian_main .panel-body .router_table_main .ssid_name_main input:focus{
  outline: none;
  background: #cccccc47;
}
.router_info_main .accordian_main .panel-body .router_table_main .ssid_name_main .editicon{
  position: absolute;
  color: #322a7d;
  top: 12px;
  right: 15px;
  display: none;
}
.router_info_main .accordian_main .panel-body .router_table_main .ssid_password_main{
  display: inline-block;
  width: 100%;
  position: relative;
}
.router_info_main .accordian_main .panel-body .router_table_main .ssid_password_main input{
  border: 0px solid transparent;
  width: 100%;
  height: 38px;
  cursor: context-menu;
  padding: 10px;
  background: #cccccc2b;
  min-width: 260px;
}
.router_info_main .accordian_main .panel-body .router_table_main .ssid_password_main:hover input{
  background: #cccccc47;
}
.router_info_main .accordian_main .panel-body .router_table_main .ssid_password_main:hover .editicon{
  display: inline-block;
}
.router_info_main .accordian_main .panel-body .router_table_main .ssid_password_main input:focus{
  outline: none;
  background: #cccccc47;
}
.router_info_main .accordian_main .panel-body .router_table_main .ssid_password_main .editicon{
  position: absolute;
  color: #322a7d;
  top: 12px;
  right: 15px;
  display: none;
}
.router_info_main .accordian_main .panel-body .router_table_main .ssid_password_main .passwordshow_icon{
  position: absolute;
  color: #322a7d;
  top: 12px;
  right: 40px;
  cursor: pointer;
}
.router_info_main .accordian_main .panel-body .router_details_list li .routervalue{
  font-size: 16px;
    color: #000000b8;
    font-family: 'Lato-Black';
}
.router_info_main .accordian_main .panel-body .panel_body_list{
    list-style: none;
    padding: 0px;
    margin: 0px;
}
.router_info_main .accordian_main .panel-body .panel_body_list li{
  margin: 0px 0px 15px 0px;
  font-family: 'Raleway-Bold';
  font-size: 16px;
  box-sizing: border-box;
  box-shadow: 5px 8px 10px #f3eeee;
  padding: 10px 10px;
  background: #ffffffa1;
  border-radius: 10px;
}
.router_info_main .accordian_main .panel-body .panel_body_list li .device{
  display: inline-block;
  width: 50%;
  float: left;
  padding: 10px 0px;
}
.router_info_main .accordian_main .panel-body .panel_body_list li .togglemain{
  display: inline-block;
  width: 50%;
  padding: 4px 0px 0px 0px;
  text-align: right;
}
/* invoice page css start */
.day_circle_right_side_main{
  text-align: right;
}
.day_circle_right_side_main .days_details_main{
  display: inline-block;
  text-align: left;
  margin-right: 15px;
}
.day_circle_right_side_main .days_details_main .days_status_heading {
  font-family: Lato-Black;
  font-size: 36px;
  margin: 10px 0px;
  display: inline-block;
}
.day_circle_right_side_main .days_details_main .days_status_heading .datatypename{
  font-size: 14px;
}
.day_circle_right_side_main .days_details_main .days_status_heading .usage{
  font-size: 14px;
  margin-top: 2px;
  font-family: Raleway-Medium;
  color: #8D9CB5;
  width: 100%;
  display: block;
}
.day_circle_right_side_main .days_circle_holder_main{
  margin: 0px 0px 0px 0px;
}
.days_circle_holder_main {
    display: inline-block;
    float: right;
}
.invoice_details_holder_main{
  display: inline-block;
  width: 100%;
  background: #fff;
  border-radius: 10px 10px 0px 0px;
  box-sizing: border-box;
  overflow: auto;
  max-height: 670px;
  margin-bottom: 50px;
}
.invoice_details_holder_main::-webkit-scrollbar {
  display: none;
}
.invoice_details_holder_main .invoice_table {
  border-collapse: separate;
}
.invoice_details_holder_main .invoice_table {
  border-left:0px;
  margin-top: 0px;
}
.invoice_details_holder_main .invoice_table th {
  border-top: 0px solid transparent;
  border-top: none;
  border: 0px;
}

.invoice_details_holder_main .invoice_table th:first-child {
  border-left: 1px solid transparent;
  border-radius: 10px 0 0 0;
}
.invoice_details_holder_main .invoice_table th:last-child {
  border-left: 0px;
  border-right: 1px solid transparent;
  border-radius: 0 10px 0 0;
}
.invoice_details_holder_main .invoice_table th:only-child{
  border-radius: 10px 10px 0 0;
}
.invoice_details_holder_main .invoice_table>thead>tr>th {
  vertical-align: bottom;
  border-bottom: 0px solid #ddd;
  padding: 18px 18px;
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
  background: #322a7d;
  font-family: Montserrat-Medium;
  font-weight: 400;
  vertical-align: middle;
}
.invoice_details_holder_main .invoice_table tr td{
  border-bottom: 1px solid #ccc;
  border-top: 0px solid transparent;
  border-right: 0px solid transparent;
  border-left: 0px solid transparent;
  padding: 18px 15px 13px 18px;
  word-wrap: inherit;
}
.invoice_details_holder_main .invoice_table thead{
  background: #322a7d;
  color: #fff;
}
.invoice_details_holder_main .invoice_table tbody{
  max-height: 500px;
  overflow-y: auto;
  width: 100%;
}
.invoice_details_holder_main .invoice_table .invoce_data_bold {
    font-family: Montserrat-Bold;
    color: #000;
}
.invoice_details_holder_main .invoice_table .invoce_data_normal {
    font-family: Montserrat-Medium;
    color: #000;
}
.invoice_details_holder_main .invoice_table .invoce_data_view_img {
    display: inline-block;
    width: 100%;
}
.invoice_details_holder_main .invoice_table .invoce_data_view_img a{
    display: inline-block;
    width: 100%;
}
.invoice_details_holder_main .invoice_table .invoce_data_view_img a img{
    width: 25px;
}

/* renew plan page css */
.renew_plan_details_holder_main{
  display: inline-block;
  width: 100%;
  background: #fff;
  padding: 40px 20px;
}
.renew_plan_details_holder_inner_main{
  display: inline-block;
  width: 100%;
  max-width: 750px;
}
.renew_plan_details_holder_main .renew_plan_btn_main{
  display: inline-block;
  width: 100%;
  max-width: 750px;
}
.renew_plan_details_holder_main .plan_detail_heading_dis_main .plan_detail_heading{
  font-family: Raleway-Bold;
  color: #9A9A9A;
  font-size: 14px;
  margin: 10px 0px 10px 0px;
}
.renew_plan_details_holder_main .plan_detail_heading_dis_main .plan_detail_dis{
  font-family: Raleway-Bold;
  color: #000000;
  font-size: 14px;
  margin-bottom: 30px;
}
.renew_plan_details_holder_main .change_plans_btn{
	float: right;
    padding: 10px 15px;
    border: 2px solid #322a7d;
    text-transform: uppercase;
    border-radius: 10px;
    color: #322a7d;
    font-family: 'Raleway-Bold';
    transition: 0.4s;
    margin-top: 10px;
}
.renew_plan_details_holder_main .change_plans_btn:hover {
    background: #322a7d;
    color: #fff;
}
.renew_plan_details_main {
  display: inline-block;
  width: 100%;
  max-width: 750px;
}
.renew_plan_details_main .plan_details{
  width: 100%;
  background: #322a7d;
  display: flex;
  color: #fff;
  padding: 30px 20px;
  border-radius: 10px 10px 0px 0px;
}
.renew_plan_details_main .plan_details .plan_speed_type{
	margin-bottom: 0px;
	font-family: 'Lato-Black';
	font-size: 18px;
	margin-top: 10px;
}
.renew_plan_details_main .plan_details .plan_validity{
  margin-bottom: 0px;
  font-family: 'Raleway-Medium';
  font-size: 16px;
  margin-top: 3px;
  text-transform: capitalize;
}
.renew_plan_details_main .plan_details .plan_validity span{
  font-size: 13px;
  font-family: 'Raleway-Medium';
  vertical-align: middle;
  margin-top: 5px;
  text-transform: capitalize;
  display: inline-block;
  width: 100%;
  color: #fff;
}
.renew_plan_details_main .plan_details .plan_validity .ott_avlbl_mdl_btn {
    font-weight: bold;
    cursor: pointer;
}

.renew_plan_details_main .plan_details .plan_days{
  margin-bottom: 0px;
  font-family: 'Lato-Black';
  font-size: 18px;
  margin-top: 10px;
}
.renew_plan_details_main .plan_details .plan_days span{
  font-size: 14px;
  font-family: 'Raleway-Medium';
  font-weight: 400;
  margin-left: 4px;
}
.renew_plan_details_main .plan_renew_details{
  width: 100%;
  background: #F3F2FB;
  display: flex;
  color: #fff;
  padding: 30px 20px;
}
.renew_plan_details_main .plan_renew_details .plan_heading{
  display: inline-block;
  width: 100%;
  font-family: 'Raleway-Medium';
  font-size: 14px;
  color: #000;
  margin-bottom: 2px;
}
.renew_plan_details_main .plan_renew_details .plan_dis{
  display: inline-block;
  width: 100%;
  font-family: 'Montserrat-Bold';
  font-size: 14px;
  color: #000;
}
.renew_plan_details_main .plan_renew_cost_main{
  width: 100%;
  background: #FFFFFF;
  display: flex;
  color: #fff;
  padding: 15px 20px;
  border: 1px solid #ccc;
}
.renew_plan_details_main .plan_renew_cost_main .cost_heading{
  font-family: 'Montserrat-Medium';
  color: #000;
  font-size: 14px;
  font-weight: 400;
}
.renew_plan_details_main .plan_renew_cost_main .plan_cost{
  color: #000;
  font-family: 'Montserrat-Bold';
  font-size: 20px;
}
.plan_renew_cost_total_main{
  width: 100%;
  background: #FFFFFF;
  display: flex;
  color: #fff;
  padding: 15px 20px;
  border: 1px solid #ccc;
  border-top: 0px;
  border-radius: 0px 0px 10px 10px;
}
.renew_plan_details_main .plan_renew_cost_total_main .cost_heading{
  font-family: 'Montserrat-Medium';
  color: #000;
  font-size: 14px;
  font-weight: 400;
  display: inline-block;
  width: 100%;
  margin-bottom: 5px;
}
.renew_plan_details_main .plan_renew_cost_total_main .plan_cost{
  color: #000;
  font-family: 'Montserrat-Bold';
  font-size: 14px;
  display: inline-block;
  width: 100%;
  margin-bottom: 5px;
}
.renew_plan_details_main .plan_renew_cost_total_main .existing_due_cost{
  color: #000;
  font-family: 'Montserrat-Bold';
  font-size: 14px;
  display: inline-block;
  width: 100%;

}
.renew_plan_details_main .plan_play_btn_main{
  text-align: right;
  padding: 30px 0px;
}
.renew_plan_details_main .plan_play_btn_main .pay_pan_btn{
  background: #34B53A;
  color: #fff;
  padding: 6px 30px 6px 25px;
  border: 2px solid #34B53A;
  transition: 0.4s;
  border-radius: 10px;
}
.renew_plan_details_main .plan_play_btn_main .pay_heading{
  font-family: 'Montserrat-Medium';
  font-size: 13px;
  margin-right: 20px;
  vertical-align: text-bottom;
}
.renew_plan_details_main .plan_play_btn_main .amount{
    font-family: 'Montserrat-Bold';
    font-size: 20px;
}
.renew_plan_details_main .plan_play_btn_main .pay_pan_btn:hover{
  background: #fff;
  border: 2px solid #322a7d;
  color: #322a7d;
}
.renew_plan_details_main .plan_play_btn_main .pay_pan_btn:focus{
  outline: none;
}

/* settings page css */
.setting_content_main{
  display: inline-block;
  width: 100%;
  min-height: 600px;
  background: #fff;
  margin-top: 0px;
  box-sizing: border-box;
  box-shadow: 0px 6px 5px #CFCFCF8F;
  margin-bottom: 50px;
  padding-bottom: 30px;
}
.setting_content_main .setting_content_heading_main{
  display: inline-block;
  width: 100%;
  padding: 30px 0px;
}
.setting_content_main .setting_content_heading_main .setting_heading{
  font-family: Raleway-Bold;
  font-size: 16px;
  margin: 0px 0px 0px 0px;
  color: #9A9A9A;
}
.setting_content_main .personal_detals_main {
  display: inline-block;
  width: 100%;
  border-right: 1px solid #ccc;
}
.setting_content_main .personal_detals_main .personal_detals_list{
  padding: 0px;
  margin: 0px;
  list-style: none;
  display: inline-block;
  width: 100%;
}
.setting_content_main .personal_detals_main .personal_detals_list li{
  display: inline-block;
  width: 50%;
  float: left;
  margin-bottom: 25px;
}
.setting_content_main .personal_detals_main .personal_detals_list li span{
  display: inline-block;
  width: 100%;
}
.setting_content_main .personal_detals_main .personal_detals_list li .heading {
  font-size: 16px;
  font-family: 'Raleway-Bold';
  color: #000;
  margin-bottom: 10px;
}
.setting_content_main .personal_detals_main .personal_detals_list li .value {
  font-size: 16px;
  font-family: 'Lato-Black';
  color: #322a7d;
}
.setting_content_main .personal_detals_main .personal_detals_list li .value a{
  color: #322a7d;
  text-decoration: none;
}
.setting_content_main .document_detals_main {
  display: inline-block;
  width: 100%;
}
.setting_content_main .document_detals_main .document_detals_list{
  padding: 25px 15px;
  margin: 0px;
  list-style: none;
  display: inline-block;
  width: 100%;
  background: #f7f8fa;
  border-radius: 15px;
}
.setting_content_main .document_detals_main .document_detals_list li{
  display: inline-block;
  width: 50%;
  float: left;
  margin-bottom: 25px;
}
.setting_content_main .document_detals_main .document_detals_list li span{
  display: inline-block;
  width: 100%;
}
.setting_content_main .document_detals_main .document_detals_list li .heading {
  font-size: 16px;
  font-family: 'Raleway-Bold';
  color: #000;
  margin-bottom: 10px;
}
.setting_content_main .document_detals_main .document_detals_list li .value {
  font-size: 16px;
  font-family: 'Lato-Black';
  color: #322a7d;
}
.setting_content_main .document_detals_main .document_detals_list li .view_doc{
    display: inline-block;
    background: #322a7d;
    border: 2px solid #322a7d;
    width: auto !important;
    padding: 5px 20px;
    font-size: 12px;
    color: #fff;
    border-radius: 10px;
    margin-top: 6px;
    cursor: pointer;
    transition: 0.4s;
}
.setting_content_main .document_detals_main .document_detals_list li .view_doc:hover{
    background: #fff;
}
.setting_content_main .document_detals_main .document_detals_list li .view_doc:hover a{
    color: #000;
}
.setting_content_main .document_detals_main .document_detals_list li .view_doc a{
  color: #fff;
}
.setting_content_main .document_detals_main .document_detals_list li .view_doc a:hover{
  text-decoration: none;
}
.setting_content_main .document_detals_main .addkyc_btn{
  background: #322a7d;
  color: #fff;
  text-transform: uppercase;
  border: 2px solid #322a7d;
  font-family: 'Raleway-Bold';
  letter-spacing: 1px;
  font-size: 16px;
  margin: 0px 0px 0px 0px;
  padding: 12px 0px;
  min-width: 200px;
  max-width: 200px;
  transition: 0.4s;
  border-radius: 10px;
  display: none;
}
.setting_content_main .document_detals_main .addkyc_btn:hover{
  background: #fff;
  border: 2px solid #322a7d;
  color: #322a7d;
}
.setting_content_main .document_detals_main .addkyc_btn:focus{
  outline: none;
}
.setting_content_main .setting_form{
  display: inline-block;
  width: 100%;
  background: #f7f8fa;
  padding: 25px 0px 40px 0px;
  border-radius: 15px;
}
.setting_content_main .setting_form .form_field_folder_main{
  display: inline-block;
  width: 100%;
}
.setting_content_main .setting_form .form_field_folder_main label{
  width: 100%;
  display: inline-block;
}
.setting_content_main .setting_form .form_field_folder_main .input_icon_main{
  position: relative;
}
.setting_content_main .setting_form .form_field_folder_main .input_icon_main:hover input{
  background: #cccccc47;
}
.setting_content_main .setting_form .form_field_folder_main .input_icon_main:hover .editicon{
  display: inline-block;
}
.setting_content_main .setting_form .form_field_folder_main .input_icon_main .editicon{
  position: absolute;
  right: 20px;
  top: 20px;
  display: none;
  color: #322a7d;
}
.setting_content_main .setting_form .form_field_folder_main input{
  display: inline-block;
  width: 100%;
  height: 50px;
  border: 0px solid #ccc;
  padding-left: 10px;
  cursor: context-menu;
  min-width: 200px;
}
.setting_content_main .setting_form .form_field_folder_main input:focus{
  outline: none;
}
.setting_content_main .setting_form .form_field_folder_main input.focusbg:focus{
  background: #cccccc47;
}
.setting_content_main .setting_form .form_field_folder_main textarea{
  display: inline-block;
  border: 0px solid #ccc;
  padding-left: 10px;
  padding: 10px;
  resize: none;
  width: 100%;
  cursor: context-menu;
}
.setting_content_main .setting_form .form_field_folder_main textarea:focus{
  outline: none;
}
.setting_content_main .setting_form .form_field_folder_main textarea::-webkit-scrollbar{
  display: none;
}
.setting_content_main .setting_form .setting_update_btn{
  background: #34B53A;
  color: #fff;
  text-transform: uppercase;
  border: 2px solid #34B53A;
  font-family: 'Raleway-Bold';
  letter-spacing: 1px;
  font-size: 16px;
  margin: 0px 0px 0px 0px;
  padding: 12px 0px;
  min-width: 200px;
  max-width: 200px;
  transition: 0.4s;
}
.setting_content_main .setting_form .setting_update_btn:hover{
  background: #fff;
  border: 2px solid #322a7d;
  color: #322a7d;
}

/* usage details page css */
.usage_details_content_main{
  display: inline-block;
  width: 100%;
}
.usage_details_content_main .monthwise_data_main{
  background: #322a7d;
  display: inline-block;
  width: 100%;
  padding: 30px 50px;
  border-radius: 10px;
  color: #fff;
}
.usage_details_content_main .monthwise_data_main .month_start_end_main{
  display: inline-block;
  width: 40%;
  float: left;
  padding: 15px 0px 0px 0px;
}
.usage_details_content_main .monthwise_data_main .month_start_end_main .month_start{
  display: inline-block;
  width: 28%;
  float: left;
}
.usage_details_content_main .monthwise_data_main .month_start_end_main .month_start .month_heading { 
  display: inline-block;
  width: 100%;
  font-family: 'Montserrat-Medium';
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 10px;
}
.usage_details_content_main .monthwise_data_main .month_start_end_main .month_start .month_name { 
  display: inline-block;
  width: 70%;
  font-family: 'Montserrat-Bold';
  text-transform: capitalize;
  font-size: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #673ab7;
}
.usage_details_content_main .monthwise_data_main .month_start_end_main .month_end{
  display: inline-block;
  width: 28%;
  float: left;
}
.usage_details_content_main .monthwise_data_main .month_start_end_main .month_end .month_heading { 
  display: inline-block;
  width: 100%;
  font-family: 'Montserrat-Medium';
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 10px;
}
.usage_details_content_main .monthwise_data_main .month_start_end_main .month_end .month_name { 
  display: inline-block;
  width: 70%;
  font-family: 'Montserrat-Bold';
  text-transform: capitalize;
  font-size: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #673ab7;
}
.usage_details_content_main .monthwise_data_main .data_usage_main{
  display: inline-block;
  float: right;
  margin-right: 20px;
}
.usage_details_content_main .monthwise_data_main .data_usage_main .data_usage_single{
  display: inline-block;
  float: left;
  width: 20%;
  min-width: 165px;
}

.usage_details_content_main .data_usage_main .data_usage_list{
  display: inline-block;
  padding: 0px;
  list-style: none;
}
.usage_details_content_main .data_usage_main .data_usage_list li{
  display: inherit;
}
.usage_details_content_main .monthwise_data_main .data_usage_main .data_usage_list .data_download_heading{
  font-family: Lato-Black;
  font-size: 36px;
  margin: 0px;
  padding: 20px 50px 20px 0px;
  border-right: 1px solid #673ab7;
}
.usage_details_content_main .monthwise_data_main .data_usage_main .data_usage_list .data_download_heading .datatypename{
  font-size: 14px;
}
.usage_details_content_main .monthwise_data_main .data_usage_main .data_usage_list .data_download_heading .usage{
  font-size: 14px;
  display: inherit;
  margin-top: 2px;
  font-family: Raleway-Medium;
}

.usage_details_content_main .monthwise_data_main .data_usage_main .data_usage_list .data_upload_heading{
  font-family: Lato-Black;
  font-size: 36px;
  margin: 0px;
  padding: 20px 50px 20px 50px;
  border-right: 1px solid #673ab7;
}
.usage_details_content_main .monthwise_data_main .data_usage_main .data_usage_list .data_upload_heading .datatypename{
  font-size: 14px;
}
.usage_details_content_main .monthwise_data_main .data_usage_main .data_usage_list .data_upload_heading .usage{
  font-size: 14px;
  display: inherit;
  margin-top: 2px;
  font-family: Raleway-Medium;
}
.usage_details_content_main .monthwise_data_main .data_usage_main .data_usage_list .data_hours_heading{
  font-family: Lato-Black;
  font-size: 36px;
  margin: 0px;
  padding: 20px 50px 20px 50px;
}
.usage_details_content_main .monthwise_data_main .data_usage_main .data_usage_list .data_hours_heading .usage{
  font-size: 14px;
  display: inherit;
  margin-top: 2px;
  font-family: Raleway-Medium;
}

.usage_table_main {
  display: inline-block;
  width: 100%;
  background: #fff;
  margin-top: 20px;
  padding: 0px 0px 0px 0px; 
}
.usage_table_main  .table_heading {
  font-family: 'Montserrat-Bold';
  color: #9A9A9A;
  text-transform: uppercase;
  padding: 40px 0px 0px 20px;
  margin: 0px 0px 15px 0px;
}
.usage_table_main .usage_table_inner{
  overflow: auto;
  max-height: 400px;
}
.usage_table_main .usage_table_inner::-webkit-scrollbar{
  display: none;
}
.usage_table_main::-webkit-scrollbar {
  display: none;
}
.usage_table_main  .data_usage_table {
  border-collapse: separate;
}
.usage_table_main  .data_usage_table {
  border-left:0px;
  margin-top: 0px;
}
.usage_table_main  .data_usage_table th {
  border-top: 0px solid transparent;
  border-top: none;
  border: 0px;
}
.usage_table_main  .data_usage_table td {
  border: 0px;
  padding: 15px 15px 10px 20px;
  font-family: 'Montserrat-Medium';
  color: #000;
}
.usage_table_main  .data_usage_table th:first-child {
  border-left: 1px solid transparent;
  border-radius: 0px 0px 0px 0px;
}
.usage_table_main  .data_usage_table th:last-child {
  border-left: 0px;
  border-right: 1px solid transparent;
  border-radius: 0 0px 0 0;
}
.usage_table_main  .data_usage_table th:only-child{
  border-radius: 0px 0px 0 0;
}
.usage_table_main  .data_usage_table>thead>tr>th {
  vertical-align: middle;
  border-bottom: 0px solid #ddd;
  padding: 10px 20px;
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
  color: #322a7d;
  font-family: Montserrat-Medium;
  text-transform: uppercase;
  background: #fff;
}
.usage_table_main  .data_usage_table tr td{
  border-bottom: 1px solid #ccc;
  border-top: 0px solid transparent;
  border-right: 0px solid transparent;
  border-left: 0px solid transparent;
}

/* complaint page css */
.complaint_form_main{
  display: inline-block;
  width: 100%;
  background: #fff;
  padding: 50px 30px;
}
.complaint_form_main .complaint_page_btn_main{
  display: inline-block;
  width: 100%;
  margin-bottom: 20px;
  padding: 0px 15px;
}
.complaint_form_main .complaint_page_btn_main .complaint_page_btn{
    padding: 10px 15px;
    border: 2px solid #322a7d;
    text-transform: uppercase;
    border-radius: 10px;
    color: #322a7d;
    font-family: 'Raleway-Bold';
    transition: 0.4s;
    text-decoration: none;
    display: inline-block;
    float: right;
}
.complaint_form_main .complaint_form .form-group{
  margin-bottom: 0px;
}
.complaint_form_main .complaint_form label{
  width: 100%;
  font-family: 'Montserrat-Medium';
  color: #000;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.complaint_form_main .complaint_form .form_field_folder_main{
  display: inline-block;
  width: 100%;
}
.complaint_form_main .complaint_form .form_field_folder_main .form-group{
  margin: 0px 0px 20px 0px;
}
.complaint_form_main .complaint_form .form_field_folder_main .form-group .input{
  display: inline-block;
  width: 100%;
  height: 42px;
  border: 1px solid #ccc;
  padding-left: 10px;
}
.complaint_form_main .complaint_form .form_field_folder_main .form-group .input:focus{
  outline: none;
}
.complaint_form_main .complaint_form .form_field_folder_main .form-group .selectbox{
  display: inline-block;
  width: 100%;
  height: 42px;
  border: 0px;
  border: 1px solid #ccc;
  background: #fff;
  padding-left: 10px;
}
.complaint_form_main .complaint_form .form_field_folder_main .form-group .selectbox:focus{
  outline: none;
}
.complaint_form_main .complaint_form .form_field_folder_main .form-group .textarea{
  display: inline-block;
  width: 100%;
  height: 100px;
  resize: none;
  border: 1px solid #ccc;
}
.complaint_form_main .complaint_form .form_field_folder_main .form-group .textarea:focus{
  outline: none;
}
.complaint_form_main .complaint_form .form_field_folder_main .form-group .textarea::-webkit-scrollbar{
  display: none;
}
.complaint_form_main .complaint_form .form_field_folder_main .text_file_btn_main {
  display: inline-block;
  width: 100%;
  min-height: 100px;
  border: 1px solid #ccc;
  background: #fff;
  text-align: center;
  padding-top: 10px;
  
}
.complaint_form_main .complaint_form .form_field_folder_main .text_file_btn_main .drag_drop_text_main {
  display: inline-block;
  width: 100%;
  color: #322a7d;
  font-family: 'Montserrat-Medium';
}
.complaint_form_main .complaint_form .form_field_folder_main .text_file_btn_main .select_file_btn {
  display: inline-block;
  padding: 8px 25px;
  border: 2px solid #322a7d;
  text-transform: uppercase;
  border-radius: 10px;
  color: #fff;
  background: #322a7d;
  font-family: 'Raleway-Bold';
  transition: 0.4s;
  cursor: pointer;
  margin: 5px 0px 0px 0px;
  webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
}
.complaint_form_main .complaint_form .form_field_folder_main .text_file_btn_main.is-dragover{
  background: #ccc;
}
.complaint_form_main .complaint_form .form_field_folder_main .text_file_btn_main .select_file_btn:hover{
  background: #fff;
  color: #322a7d;
}
.complaint_form_main .complaint_form .form_field_folder_main .text_file_btn_main .select_file_name {
  display: inline-block;
  width: 100%;
  font-size: 12px;
  font-family: 'Montserrat-Medium';
  color: #34b53a;
}
.complaint_form_main .complaint_form .form_field_folder_main .uploadfile{
  visibility: hidden;
  height: 0px;
}
.complaint_form_main .complaint_form .button_main{
  text-align: left;
}
.complaint_form_main .complaint_form .button_main .comalaint_sub_btn{
  background: #34B53A;
  color: #fff;
  text-transform: uppercase;
  border: 2px solid #34B53A;
  font-family: 'Raleway-Bold';
  letter-spacing: 1px;
  font-size: 16px;
  margin: 0px 0px 0px 0px;
  padding: 12px 0px;
  min-width: 200px;
  max-width: 200px;
  transition: 0.4s;
}
.complaint_form_main .complaint_form .button_main .comalaint_sub_btn:hover{
  background: #fff;
  border: 2px solid #322a7d;
  color: #322a7d;
}
.complaint_form_main .complaint_form .button_main .comalaint_sub_btn:focus{
  outline: none;
}
.create_token_btn_main{
	display: inline-block;
    width: 100%;
    text-align: right;
    background: #fff;
	padding: 30px 20px 20px 20px;
}
.create_token_btn_main .create_token_btn{
	padding: 10px 15px;
    border: 2px solid #322a7d;
    text-transform: uppercase;
    border-radius: 10px;
    color: #322a7d;
    font-family: 'Raleway-Bold';
    transition: 0.4s;
    text-decoration: none;
    display: inline-block;
}
.create_token_btn_main .create_token_btn:hover{
	background: #322a7d;
	color: #fff;
}
.comalaint_table_main {
  display: inline-block;
  width: 100%;
  background: #fff;
  padding: 0px 0px 0px 0px;
  overflow: auto;
  margin-bottom: 80px;
  /*max-height: 500px;*/
}
.comalaint_table_main .dataTables_length{
  display: none;
}
.comalaint_table_main #example_filter{
  display: none;
}
.comalaint_table_main .dataTables_wrapper {
  margin-bottom: 50px;
}
.comalaint_table_main .dataTables_wrapper .dataTables_info {
  padding-left: 20px;
}
.comalaint_table_main .dataTables_wrapper .dataTables_paginate {
  padding-right: 20px;
}
.comalaint_table_main::-webkit-scrollbar {
  display: none;
}
.comalaint_table_main  .comalaint_table {
  border-collapse: separate;
}
.comalaint_table_main  .comalaint_table {
  border-left:0px;
  margin-top: 0px;
}
.comalaint_table_main  .comalaint_table th {
  border-top: 0px solid transparent;
  border-top: none;
  border: 0px;
}
.comalaint_table_main  .comalaint_table td {
  border: 0px;
  padding: 20px 15px 20px 20px;
  font-family: 'Montserrat-Medium';
  color: #000;
}
.comalaint_table_main  .comalaint_table .comalaint_data_td.bold{
  font-weight: 800;
}
.comalaint_table_main  .comalaint_table th:first-child {
  border-left: 1px solid transparent;
  border-radius: 0px 0px 0px 0px;
}
.comalaint_table_main  .comalaint_table th:last-child {
  border-left: 0px;
  border-right: 1px solid transparent;
  border-radius: 0 0px 0 0;
}
.comalaint_table_main  .comalaint_table th:only-child{
  border-radius: 0px 0px 0 0;
}
.comalaint_table_main  .comalaint_table>thead>tr>th {
  vertical-align: bottom;
  border-bottom: 0px solid #ddd;
  padding: 30px 20px 10px 20px;
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
  color: #322a7d;
  font-family: Montserrat-Medium;
  text-transform: uppercase;
  background: #fff;
}
.comalaint_table_main  .comalaint_table tr td{
  border-bottom: 1px solid #ccc;
  border-top: 0px solid transparent;
  border-right: 0px solid transparent;
  border-left: 0px solid transparent;
}

/* upgrade plan page css */
.upgrade_plan_table_main{
  margin-bottom: 30px;
  overflow: auto;
}
.upgrade_plan_table_main .planheader_main {
  display: inline-block;
  width: 100%;
  background: #322a7d;
  border-radius: 10px 10px 0px 0px;
}

.upgrade_plan_table_main .upgrade_plan_table {
	border-collapse: separate;
	border-spacing: 0 15px;
	width: 100%;
}
.upgrade_plan_table_main .upgrade_plan_table th {
	background-color: #322a7d;
	color: white;
}
.upgrade_plan_table_main .upgrade_plan_table th{
	text-align: center;
	border: 0px solid black;
	padding: 20px;
	color: #fff;
	font-family: 'Montserrat-Bold';
  	text-transform: uppercase;
  	cursor: pointer;
}
.upgrade_plan_table_main .upgrade_plan_table th:first-child{
	border-radius: 10px 0px 0px 10px
}
.upgrade_plan_table_main .upgrade_plan_table th:last-child{
	border-radius: 0px 10px 10px 0px
}
.upgrade_plan_table_main .upgrade_plan_table td {
	width: 150px;
	text-align: center;
	border: 1px solid #FFF;
	padding: 5px;
	background: #fff;
	box-shadow: 7px 7px 9px #00000017;
}
.upgrade_plan_table_main .upgrade_plan_table td:first-child{
	border-radius: 10px 0px 0px 10px
}
.upgrade_plan_table_main  .upgrade_plan_table td:last-child{
	border-radius: 0px 10px 10px 0px
}

.upgrade_plan_table_main .upgrade_plan_table .datatype .heading{
  color: #322A7D;
  font-family: 'Lato-Black';
  font-size: 22px;
}
.upgrade_plan_table_main .upgrade_plan_table .datatype .heading span{
  font-size: 14px;
  font-family: 'Raleway-Bold';
  margin-left: 5px;
  vertical-align: middle;
}
.upgrade_plan_table_main .upgrade_plan_table .validitytype .validity span{
  font-size: 13px;
  font-family: 'Raleway-Medium';
  vertical-align: middle;
  margin-top: 5px;
  color: #000;
  text-transform: capitalize;
  display: inline-block;
  width: 100%;
}
.upgrade_plan_table_main .upgrade_plan_table .validitytype .validity .ott_avlbl_mdl_btn{
	color: #322A7D;
	cursor: pointer;
	-webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
    transition: 0.4s;
    font-weight: bold;
}
.upgrade_plan_table_main .upgrade_plan_table .validitytype .validity .ott_avlbl_mdl_btn:hover{
	color: #000;
}
.upgrade_plan_table_main .upgrade_plan_table .daytype .days{
  color: #000;
  font-family: 'Lato-Black';
  font-size: 22px;
}
.upgrade_plan_table_main .upgrade_plan_table .daytype .days span{
  font-size: 14px;
  font-family: 'Raleway-Bold';
  margin-left: 5px;
  vertical-align: middle;
}
.upgrade_plan_table_main .upgrade_plan_table .pricetype .heading .pricetext{
  color: #000000;
  font-family: 'Montserrat-Medium';
  font-size: 13px;
  margin-right: 5px;
  vertical-align: text-top;
}
.upgrade_plan_table_main .upgrade_plan_table .pricetype .heading .price_rs{
  font-size: 22px;
  font-family: 'Montserrat-Bold';
  margin-left: 5px;
  color: #000000;
}
.upgrade_plan_table_main .upgrade_plan_table .pricetype .heading .cp_btn_main{
	display: block;
    margin: 5px 0px 0px 0px;
    width: 100%;
    text-align: center;
}
.upgrade_plan_table_main .upgrade_plan_table .pricetype .heading .cp_btn_main .change_plan_btn{
	font-size: 10px;
    margin: 0px;
    padding: 8px 8px;
    border: 2px solid #322a7d;
    text-transform: uppercase;
    border-radius: 10px;
    color: #fff;
    font-family: 'Raleway-Bold';
    transition: 0.4s;
    cursor: pointer;
    background: #322a7d;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
    max-width: 100px;
    min-width: 100px;
    display: inline-block;
}
.upgrade_plan_table_main .upgrade_plan_table .pricetype .heading .cp_btn_main .change_plan_btn:hover{
	color: #322a7d;
	background: #fff;
}
#ott_modal{
	z-index: 99999999;
}
#ott_modal .modal-header{
	background: #322a7d;
	color: #fff;
}
#ott_modal .modal-title{
	color: #fff;
	display: inline-block;
	font-family: 'Raleway-Bold';
}
#ott_modal .modal-header .close {
    margin-top: -2px;
    color: #fff;
    opacity: .8;
}
#ott_modal .ott_details_list {
    display: inline-block;
    width: 100%;
    list-style: none;
    padding: 0px;
    margin: 0px;
}
#ott_modal .ott_details_list li{
  text-align: center;
  margin-bottom: 10px;
  width: 125px;
  float: left;
  margin: 0px 15px 15px 0px;
}
#ott_modal .ott_details_list li img{
	width: 100%;
  max-width: 125px;
}
/* media css start */

@media screen and (max-width: 1679px){
  #page-content-wrapper{
    margin-left: 0px;
  }
  #page-content-wrapper .page_content_main{
    display: inline-block;
    width: 100%;
  }
  #page-content-wrapper .topbar_main{
    width: 100%;
  }
  #page-content-wrapper .topbar_main .desktop_toggle_menu_main {
    display: inline-block;
    margin-top: 13px;
    cursor: pointer;
    margin-left: 0px;
  }
  .account_status_main .data_statu.circle_progess_bar{
    margin-right: 15px;
  }
  .account_status_main .days_status_main{
    margin-left: 15px;
  }
  #sidebar-wrapper .sidebar-nav{
    margin-top: 0px;
  }
  #sidebar-wrapper .sidebar-nav li a.logouticon_main {
    margin-top: 20px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1279px){
  .account_status_main .account_status_heading {
    font-size: 14px;
  }
  .account_status_main .account_status {
    font-size: 26px;
  }
  .account_status_main .data_status_heading {
    font-size: 28px;
  }
  .account_status_main .data_statu.circle_progess_bar {
    margin-right: 5px;
    margin-top: 0px;
  }
  .account_status_main .days_status_main {
    margin-left: 6px;
    width: 37%;
  }
  .account_status_main .days_status_heading {
    font-size: 28px;
  }
  .days_status.circle_progess_bar {
    margin-top: 0px;
  }
  
}
@media screen and (max-width: 1199px){
  .plan_details_holder_main {
    margin-top: 20px;
  }
  .usage_details_content_main .monthwise_data_main {
    padding: 30px 20px;
  }
  .usage_details_content_main .monthwise_data_main .month_start_end_main {
    width: 48%;
  }
  .usage_details_content_main .monthwise_data_main .month_start_end_main .month_start {
    width: 40%;
  }
  .usage_details_content_main .monthwise_data_main .month_start_end_main .month_end {
    width: 40%;
  }
  .usage_details_content_main .monthwise_data_main .data_usage_main .data_usage_list .data_download_heading {
    padding: 20px 30px 20px 0px;
  }
  .usage_details_content_main .monthwise_data_main .data_usage_main .data_usage_list .data_upload_heading {
    padding: 20px 30px 20px 30px;
  }
  .usage_details_content_main .monthwise_data_main .data_usage_main .data_usage_list .data_hours_heading {
    padding: 20px 30px 20px 30px;
  }
  .usage_table_main .data_usage_table>thead>tr>th {
    padding: 10px 10px;
  }
  .usage_table_main .data_usage_table td {
    padding: 15px 10px 10px 10px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1279px){
  .login_right_div_main .form_holder_main{
    padding: 0px 8%;
  }
}
@media screen and (max-width: 991px){
  .loginbody{
    background: #F7F8FA; 
  }
  .login_section_main {
    height: auto;
    min-height: auto;
    display: table;
    text-align: center;
    width: 100%;
  }
  .login_section_main .login_left_div_main{
    width: 100%;
    float: initial;
    display: table;
    height: auto;
  }
  .login_right_div_main {
    width: 100%;
    display: table;
    float: initial;
    margin-top: 50px;
  }
  .login_section_main .login_left_div_main .login_heading_main{
    color: #fff;
    padding: 100px 1%;
  }
  .login_right_div_main .form_holder_main{
    padding: 0px 10%;
  }
  .mobileshow_menu{
    display: inline-block !important;
  }
  #sidebar-wrapper .menuclose_toogle_main{
    display: inline-block;
  }
  #sidebar-wrapper .sidebar-nav {
    margin-top: 0px;
  }
  #sidebar-wrapper .sidebar-nav li a.logouticon_main{
    margin-top: 20px;
  }
  #page-content-wrapper .topbar_main .toggle_menu{
    display: inline-block;
  }
  #page-content-wrapper .page_content_main{
    display: inline-block;
    width: 100%;
  }
  
  #sidebar-wrapper .sidebar_logo_main {
    text-align: center;
    margin-bottom: 15px;
    margin-top: 28px;
  }
  #sidebar-wrapper .sidebar-nav li a {
    margin-bottom: 18px;
  }
  .day_circle_right_side_main{
    text-align: right;
    margin-bottom: 30px;
  }
  .day_circle_right_side_main .days_circle_holder_main{
    float: right;
  }
  .day_circle_right_side_main .days_circle_holder_main{
    float: initial;
  }
  .plan_details_holder_main .plantable_main{
    display: inline-block;
  }
  .upgrade_plan_table_main .upgrade_plan_table .datatype .heading{
    font-size: 18px;
  }
  .upgrade_plan_table_main .upgrade_plan_table .daytype .days{
    font-size: 18px;
  }
  .upgrade_plan_table_main .upgrade_plan_table .pricetype .heading .price_rs {
    font-size: 18px;
  }
  .invoice_details_holder_main .invoice_table>thead>tr>th{
    padding: 18px 10px;
  }
  .invoice_details_holder_main .invoice_table tr td{
    padding: 18px 10px 13px 10px;
  }
  .complaint_form_main .comalaint_form .button_main .comalaint_sub_btn{
    min-width: 150px;
    max-width: 150px;
  }

}

@media screen and (max-width: 767px){
	.login_section_main .login_left_div_main .login_heading_main{
		color: #fff;
		padding: 75px 1%;
	}
	.login_section_main .login_left_div_main .login_heading_main .login_left_heading_big{
		font-size: 24px;
	}
	.login_section_main .login_left_div_main .login_heading_main .login_left_heading_medium span{
		width: auto;
		display: initial;
	}
	.login_right_div_main .form_holder_main{
		padding: 0px 5%;
	}
	.login_right_div_main .form_holder_main .signuplink{
		margin: 40px 0px 0px 0px;
	}
	#sidebar-wrapper{
		width: 0px;
	}
	#sidebar-wrapper .sidebar_logo_main .small_logo {
	    display: none !important;
	    width: 40px;
	    margin-left: 3px;
	}
	.desktop_show_menu .sidebar_logo_main .small_logo {
    	display: none !important;
	}
	#sidebar-wrapper .sidebar-nav li a.logouticon_main {
		margin-top: 10px;
	}
	#sidebar-wrapper .sidebar_logo_main .big_logo {
    	display: inline-block !important;
	}
	.desktop_show_menu .sidebar_logo_main .big_logo {
	    display: inline-block !important;
	}
	.desktop_show_menu_page_content{
		display: flex !important;
	}
	#page-content-wrapper {
		padding: 0px 0px 0px 0px;
		overflow-x: hidden;
		width: 100%;
		display: contents;
		
	}
	.graph_and_heading_main{
		padding: 30px 10px;
	}
	#month_graph .simple-bar-graph__bar{
		max-width: 10px;
	}
	.plan_details_holder_main .plantable_main{
		display: contents;
	}
	.plan_details_holder_main .plantable tr td:first-child{
		border-left: 1px solid #ccc !important;
	}
	.plan_details_holder_main{
		padding: 30px 0px;
	}
	.plan_details_holder_main .plantable tbody .td_heading{
		display: block;
	}
	.router_info_main {
		padding: 30px 0px;
	}
	.router_info_main .accordian_main .panel-body .router_details_list li .routerheading {
    	font-size: 14px;
	}
	.router_info_main .accordian_main .panel-body .router_details_list li .routervalue {
    	font-size: 14px;
	}
	.router_info_main .accordian_main .panel-body .panel_body_list li {
    	font-size: 14px;
      padding: 10px 3px;
	}
	.table-responsive{
		border: 0px solid #ddd;
	}
	.account_status_main .account_status_main_inner{
		width: 100%;
	}
	.account_status_main .data_status_main{
		width: 48%;
	}
	.account_status_main .days_status_main{
		width: 44%;
		margin-left: 20px;
	}
	.account_status_main .data_statu.circle_progess_bar{
		float: left;
		margin-top: 0px;
	}
	.days_status.circle_progess_bar{
		float: left;
		margin-top: 0px;
	}
	.day_circle_right_side_main{
		display: inline-block;
		width: 100%;
	}
	.day_circle_right_side_main .days_details_main{
		float: left;
	}
	.day_circle_right_side_main .days_circle_holder_main{
		float: left;
	}
	.renew_plan_details_holder_main{
		padding: 20px 5px;
	}
	.renew_plan_details_main .plan_details{
		padding: 30px 0px;
	}
  .renew_plan_details_main .plan_details .plan_speed_type {
    text-align: center;
  }
  .renew_plan_details_main .plan_details .plan_validity {
    text-align: center;
  }
  .renew_plan_details_main .plan_details .plan_days {
    text-align: center;
  }
	.renew_plan_details_main .plan_renew_details{
		padding: 30px 0px;
	}
	.renew_plan_details_main .plan_renew_details_single{
		padding-right: 0px;
		padding-left: 10px;
	}
	.renew_plan_details_main .plan_renew_details .plan_heading{
		font-size: 11px;
    text-align: center;
	}
	.renew_plan_details_main .plan_renew_details .plan_dis{
		font-size: 12px;
    text-align: center;
	}
	.renew_plan_details_holder_main .plan_detail_heading_dis_main .plan_detail_dis {
    	margin-bottom: 10px;
	}
  .renew_plan_details_main .plan_renew_cost_main .plan_cost {
    font-size: 18px;
  }
	.renew_plan_details_holder_main .change_plans_btn{
		float: initial;
		margin-bottom: 20px;
	}
	.renew_plan_details_main .plan_renew_cost_main{
		padding: 15px 0px;
	}
	.plan_renew_cost_total_main{
		padding: 15px 0px;
	}
	.plan_body_main .plan_body_list li {
		margin-bottom: 5px;
	}
	.upgrade_plan_table_main .planheader_main .plan_header_list{
		display: -webkit-inline-box;
		overflow: scroll;
		overflow-y: hidden;
		width: 100%;
	}
	.upgrade_plan_table_main .planheader_main .plan_header_list li {
		float: left;
		display: inline-block;
		width: 100px;
	}
	.usage_details_content_main .monthwise_data_main .month_start_end_main {
		width: 100%;
	}
	.usage_details_content_main .monthwise_data_main .month_start_end_main .month_start {
		width: 50%;
	}
	.usage_details_content_main .monthwise_data_main .month_start_end_main .month_end {
		width: 50%;
	}
	.usage_details_content_main .monthwise_data_main .data_usage_main {
		display: inline-block;
		width: 100%;
		margin-right: 0px;
	}
	.usage_details_content_main .data_usage_main .data_usage_list {
		margin-top: 30px;
	}
	.usage_details_content_main .monthwise_data_main .data_usage_main .data_usage_list .data_download_heading {
		padding: 20px 12px 20px 0px;
	}
	.usage_details_content_main .monthwise_data_main .data_usage_main .data_usage_list .data_download_heading {
		font-size: 22px;
	}
	.usage_details_content_main .monthwise_data_main .data_usage_main .data_usage_list .data_upload_heading {
		padding: 20px 12px 20px 12px;
	}
	.usage_details_content_main .monthwise_data_main .data_usage_main .data_usage_list .data_upload_heading {
		font-size: 22px;
	}
	.usage_details_content_main .monthwise_data_main .data_usage_main .data_usage_list .data_hours_heading {
		padding: 20px 12px 20px 12px;
	}
	.usage_details_content_main .monthwise_data_main .data_usage_main .data_usage_list .data_hours_heading {
		font-size: 22px;
	}
	.complaint_form_main {
		padding: 50px 0px;
    margin-bottom: 50px;
	}
	.complaint_form_main .comalaint_form .form-group {
		margin-bottom: 10px;
	}
	.complaint_form_main .comalaint_form .button_main {
		text-align: left;
	}
  .comalaint_table_main .dataTables_wrapper .dataTables_info,{
    float: left;
    text-align: left;
  }
  .comalaint_table_main .dataTables_wrapper .dataTables_paginate{
    float: right;
  }
  .setting_content_main .personal_detals_main {
    border-right: 0px solid #ccc;
  }
  .setting_content_main .personal_detals_main .personal_detals_list li {
    width: 100%;
  }
  .setting_content_main .document_detals_main .document_detals_list li {
    width: 100%;
  }
  #ott_modal .ott_details_list li {
    width: 120px;
    margin: 0px 8px 15px 0px;
  }
}