/* Write your custom CSS here */
body, html{font-family:'Century Gothic Regular', sans-serif !important; }

@font-face {
font-family: 'Century Gothic Regular';
font-style: normal;
font-weight: normal;
src: local('Century Gothic Regular'), url('../fonts/GOTHIC.woff') format('woff');
}

@font-face {
font-family: 'Century Gothic Italic';
font-style: normal;
font-weight: normal;
src: local('Century Gothic Italic'), url('../fonts/GOTHICI.woff') format('woff');
}

@font-face {
font-family: 'Century Gothic Bold';
font-style: normal;
font-weight: normal;
src: local('Century Gothic Bold'), url('../fonts/GOTHICB.woff') format('woff');
}

@font-face {
font-family: 'Century Gothic Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Century Gothic Bold Italic'), url('../fonts/GOTHICBI.woff') format('woff');
}


.panel-login {
-webkit-box-shadow: 0px 0px 4px 2px rgba(212,212,212,1);
-moz-box-shadow: 0px 0px 4px 2px rgba(212,212,212,1);
box-shadow: 0px 0px 4px 2px rgba(212,212,212,1);
background:#FFFFFF;
}
.login-logo {
	margin-bottom:20px;
}
.mb20 {
	margin-bottom:20px;
}
.table tr td span {
	color:#FF6600;
	font-size:16px;
	text-align:center;
}

.mailbox-content table tbody tr:nth-child(odd) {
	background:#f9f9f9;
}

.border {
	border:solid 1px #ddd;
	border-right:0px;
}
.border tr td{
	border-right:solid 1px #dddddd;
}
.border tr th{
	border-right:solid 1px #dddddd;
}
.order-list {
	padding:0px;
	list-style-type: none;
}

.order-list li {
	border-top:solid 1px #ddd;
	padding:6px 0;
	counter-increment: step-counter;
}

.order-list li::before {
    content: counter(step-counter);
    margin-right: 5px;
    font-size: 80%;
    background-color: rgb(200,200,200);
    color: white;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 3px;
}



.my-form .form-edit-check{display: block; width: 100%; padding: 7px 10px 3px 10px; background-color: #fff; border: 1px solid #dce1e4;}
.my-form .form-edit-check .box{display: inline-block;}
.my-form .form-edit-check .box input{margin-top: -3px;vertical-align: text-top;margin-right: 3px;}
.my-form .form-edit-check .box label{margin-right: 10px;margin-bottom: 0px;vertical-align: super;}
.my-form textarea{width:100%; min-width: 100%;}

.mrbot15{margin-bottom: 15px;}  


@media (min-width: 768px) {
.hide-desk {
	display:none;
}
.my-form {
	margin-left:0px !important;
	margin-right:0px !important;
	background:#f2f2f2;
}
.form-input {
	padding-right:0px !important;
}
.add-btn {
	float:right;
}
}
@media (max-width: 767px) {
.hide-mob {
	display:none;
}
.mob-center {
	text-align:center !important;
}
}


.custom-ci-pagination.link{}
.custom-ci-pagination.link a{padding: 7px 12px; background-color: #fff; text-decoration: none; border: 1px solid #dee2e6; border-radius: 3px; margin-right:5px;}
.custom-ci-pagination.link a:hover{background-color: #e9ecef;}
.custom-ci-pagination.link strong{ font-weight: normal; text-decoration: none; margin-right:5px; padding: 7px 12px; border: 1px solid #22baa0; background-color: #22baa0; color: #fff; border-radius: 3px; }

.login-logo img.logo_sz {
    width: 15%;
}
.page-content #main-wrapper.wth_alert {
    margin-top: 9.5%!important;
}
.page-content #main-wrapper.wth_alert .panel-body{padding:15px 15px 25px 15px;}

.menu.accordion-menu, .page-sidebar{width:220px !important;}

.preview_reward_pop{}
.preview_reward_pop .modal-header{
  padding: 0px;
  height: 0px;
  background-color: transparent !important;
  margin-bottom: 0px;
}
.preview_reward_pop .modal-dialog{width:22.5%;}
.preview_reward_pop .modal-content{ background-color: transparent; }

.preview_reward_pop .modal-content .modal-header .close{   margin-top: -2px;
    width: 25px;
    height: 25px;
    position: absolute;
    right: -26px;
    background: rgba(255, 255, 255, 1);
    border-radius: 50%;
    top: -6px;}

    .graph_data{/*margin-bottom: 10px;*/ display: block; cursor: pointer;}

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 22.5vh;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  display: flex;
  border: 1px solid #bbb;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back{display: table;}
.flip-card-back .flip-card-back-content{display: table-cell; vertical-align: middle;}
.flip-card-back .flip-card-back-content p{color: #000;
 padding: 5px 20px; line-height: 16px; overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical; font-weight: bold; margin: 0 auto;
    text-align: justify; max-height: 22vh; overflow-y: scroll;}
.flip-card-back .flip-card-back-content .btn{margin-top:13px;}    



.flip-card-front img{width: 100%; max-height: 22.5vh;}

.flip-card-front .short_desp_div{display: block; width: 100%; padding:10px; position: absolute; bottom: 0; left: 0; }

.flip-card-front .short_desp_div .short_des{background: rgba(255, 255, 255, .8); padding: 7px; text-align: left;}

.flip-card-front .short_desp_div .short_des p{font-size: 11px; margin-bottom: 0px; line-height: 16px; 
  overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3; /* number of lines to show */
   -webkit-box-orient: vertical; font-weight: bold;}

.flip-card-front .short_desp_div .short_des h5{font-size: 14px; margin-bottom: 6px; text-align: left; margin-left: 0px;}


/* Style the back side */
.flip-card-back {
  background-color: #cfd6de;
  color: white;
  transform: rotateY(180deg);
}

.mar-lt-10{margin-left:10px;}


/* accordian Style starts here */

.d_accod{
  display: block; 
  width: 100%; 
  padding: 1px;
}

.d_accod .accord_section{
  display: block;
  width: 100%;
}

.d_accod .accord_section .panel-default .panel-heading{ 
  box-shadow: 0 1px 3px 0 #bcc6d6;
  border-radius: 2px;
  color: #4e5e6a;
  padding: 0px;
}
.d_accod .accord_section .panel-default .panel-heading a:hover{color: #000;}

.d_accod .panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Fontawesome';  /* essential for enabling glyphicon */
    content: "\f107";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */ 
    font-size: 24px;
    color: #bcc6d6;
}

.d_accod .panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\f106";    /* adjust as needed, taken from bootstrap.css */
    font-size: 24px;
    color: #bcc6d6;
}

.d_accod .panel-heading .accordion-toggle:hover:after{
  color: #2A333E !important;
}

.d_accod .panel .panel-body{
  padding: 0px;
}

.d_accod .accord_section .panel-default h4 a {
    font-weight: normal !important;
    font-size: 13px !important;
    line-height: 22px;
    display: block;
    padding: 7px 10px;
}

.d_accod .accord_section .panel-default .panel-collapse{
  padding: 15px;
  box-shadow: inset 1px 10px 19px -4px rgb(0 0 0 / 5%)!important;
  border: 1px solid #dcdcdc;
}

.d_accod .accord_section .panel-group .panel+.panel{
  margin-top: 16px;
}

.d_accod .accord_section .form-group:last-of-type{
  margin-bottom: 0px !important;
}

/* accordian Style ends here */
/* loading page css */
#rpt_loading{
  position:fixed;width:100%;height:100%; top:0; z-index:99999999; background:#000;display:none; opacity:.8;
}
.rpt_loading_img{
  margin-left:46.5%; margin-top:18%;
}
#loading{
  position:fixed;width:100%;height:100%; top:0; z-index:99999999; background:#000;display:none; opacity:.9;
}
.loading_img{
  margin-left:46.5%; margin-top:18%;
}