body {font-family: 'Maven Pro', sans-serif; font-size: 16px; color: #000000; font-weight: 400;}
img { max-width: 100%; height: auto; }
.text-success { color: #007bc1 !important; }
a { transition: all ease .5s; }
/* form styling */
.form-control,
.form-select { border-color: #555555; }
.form-label { font-size: 14px; color: #555555; display: block; }
.form-check-input{ border-color:#9b9b9b;}
.form-check-input:checked {background-color: #007bc1; border-color: #007bc1;}
.dashboardForm .form-check-input { width: 36px; height: 36px; border-width: 3px; margin-top: 1px; }
.select2-container--default .select2-selection--multiple { border-color: #555555;}
.select2-container--default .select2-selection--multiple .select2-selection__choice{ font-size: 12px; }
.select2-selection--multiple::before {
	content: "";
	position: absolute;
	right: 7px;
	top: 42%;
	border-top: 8px solid #555555;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
}
.input-group-text { border-color: #555555;  }
.fileupload_block { overflow: hidden; }
.fileupload_block .fileupload_img { width: 100px; border-right: 1px solid #555555;  }
.fileupload_block .fileupload_img > img { width: 100px; height: 100px;  }
.fileupload_block .fileInput { width: calc(100% - 100px); padding: 5px; font-size: 14px; }
.social > a{ font-size: 28px; color: #007bc1; margin-right: 10px; display: inline-block; }


.bgWhite { background-color: #ffffff; }
.bgGrey { background-color: #e8e8e8; }
.btn-success{ background: #007bc1; /*min-width: 140px;*/ line-height: 20px; padding: 10px 15px; }
.modal .btn-danger {line-height: 20px; padding: 10px 15px; }
.innerBox { max-width: 580px; width: 100%; padding: 30px; margin: 0 auto; }
.logo { margin-bottom: 55px; }
h1 {font-style: normal;font-weight: 700;font-size: 36px;color: #000000;margin:0 0 15px 0;}
.small { font-size: 12px; }
.form { max-width: 310px; margin:0 auto; }
.note { background-color: #555555; border-radius: 15px; max-width: 471px; margin: 0 auto; padding: 15px; color: #ffffff; }
@media (min-width: 576px){
	.wrapper { min-height: 100vh;
		background: #ffffff;
		background: -moz-linear-gradient(left,  #ffffff 0%, #ffffff 50%, #e8e8e8 50%, #e8e8e8 100%);
		background: -webkit-linear-gradient(left,  #ffffff 0%,#ffffff 50%,#e8e8e8 50%,#e8e8e8 100%);
		background: linear-gradient(to right,  #ffffff 0%,#ffffff 50%,#e8e8e8 50%,#e8e8e8 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8e8e8',GradientType=1 );
	}
	.wrapper .d-flex { min-height: 100vh; }
}
/* dashboard page 
========================================== */
.dashboardPage { background-color: #e8e8e8;}
.dashboardPage > div { overflow: hidden; }
/* sidebar */
.navBar { background-color: #ffffff; position: relative; }
.sidebar { width: 300px;transition: 0.2s; float: left; background: #FFFFFF; box-shadow: 4px 4px 10px 5px rgba(0, 0, 0, 0.07); min-height: 100vh;}
.sidebarLogo { height: 115px; padding: 15px; /*border-bottom: 3px solid #007bc1; background-color: #007bc1;*/ overflow: hidden; }
#vMenu > li { width: 300px; position: relative;  }
#vMenu > li a.nav-link { color: #007bc1; border-radius: 0; font-size: 14px; font-weight: 500; padding: 8px 30px; }
#vMenu > li > a > span { margin-left: 5px; }
#vMenu > li > a > i { width: 20px; color: #555555;}
#vMenu > li a.active { background: #e8e8e8; }
#vMenu > li a.active > i { color: #007bc1; }
#vMenu li.submenu > a::after { content: '\f054'; font-family: 'FontAwesome'; float: right; font-size: 16px; font-weight: 400; transition: all ease 0.2s; }
#vMenu li.submenu > a.open::after { transform: rotate(90deg); }

#vMenu .dropdownMenu { display: none; padding: 5px 0 5px 15px; margin: 0; list-style-type: none; /* border-top: 1px dashed #000; */ }
#vMenu .dropdownMenu  > li { display: block; font-size: 13px; }
#vMenu .dropdownMenu  > li > a { padding: 5px 30px 5px 5px; border-bottom: 1px dashed #007bc1; display: block; text-decoration: none; color: #000000; cursor: pointer;}
#vMenu .dropdownMenu  > li > a label{ cursor: pointer;}
#vMenu .dropdownMenu  > li > a::before { content: '\f101'; font-family: 'FontAwesome'; margin: 0 10px 0 15px; font-weight: normal; font-size: 10px; color: #007bc1; }
#vMenu .dropdownMenu  > li:hover > a { color: #007bc1; margin-left: 10px; }
.sideFooter{ padding: 0 30px; }
.sideFooter h5 { font-size: 18px; font-weight: 900; color: #007bc1; margin: 0 0 10px 0; }
.sideFooter p { font-size: 15px; font-weight: 600; color: #555555; margin: 0 0 3px 0; }
.sideFooter p.copyright { font-size: 12px; color: #555555; }
.sidebar.shrink #vMenu > li ul.dropdownMenu { display: none !important; }
.sidebar.shrink #vMenu > li:hover > ul.dropdownMenu { display: block !important; }


@media (max-width: 1199px){
	.sidebar {width: 0px; visibility: hidden;}
	.sidebar #vMenu > li { width: 300px; max-width: 100%; }
	.sidebar.shrink { width: 300px; max-width: 80%; visibility: visible; }
	.sidebar.shrink #vMenu > li { width: 300px; max-width: 100%; }
}
@media (min-width: 1200px){
	.sidebar { width: 300px;transition: 0.2s;}
	.sidebar #vMenu > li { width: 300px; transition: 0.2s; }
	.sidebar.shrink { width: 80px;transition: 0.2s;}
	.sidebar.shrink #vMenu > li { width: 80px; transition: 0.2s; }
	.sidebar.shrink #vMenu > li a.nav-link span { display: none; }
	.sidebar.shrink #vMenu > li.submenu > a::after { display: none; }
	.sidebar.shrink .sideFooter { display: none; }
	.sidebar.shrink #vMenu .dropdownMenu { position: absolute; left: 100%; top: 0; z-index: 9; background-color: #efefef; width: 200px; }
}
/* mainContent */
.main { width: 100%; min-width: 300px; }
.main > .inner { padding: 15px 30px 30px; }
.exportBox { color: #1e1e1e; }
.exportBox a { color: #007bc1; font-size: 24px; margin-left: 10px; }
.exportBox a:hover { color: #000000; }
/* header */
.navIcon { font-size: 30px; color: #007bc1; }
.navIcon:hover { color: #000;}
@media (min-width: 1200px){
	.main{ width: calc(100% - 300px); }
	.main.fullWidth { width: calc(100% - 80px); }
}
/* contentArea */
.contentArea { background: #ffffff;box-shadow: 4px 4px 10px 5px rgba(0, 0, 0, 0.07);border-radius: 10px; overflow: hidden;}
.contentArea .contentTitle {box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.07); padding: 20px 30px;}
.contentArea .contentTitle h3 { font-size: 26px; font-weight: 700; color: #000000; margin: 0; }
.contentArea .contentBody { padding: 15px 15px 15px;  }
.contentArea .contentFooter { padding: 15px 30px;background: #E8E8E8;box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);  }
/* table */
.table {/*  border-radius: 10px; */ border: 1px solid #868686; }
.table > thead { background-color: #007bc1; color: #ffffff; font-size: 16px; }
.table > thead .form-check-input:checked { background-color: #a4eda2; }
.table td a { color: #007bc1; text-decoration: none; }
.table td a:hover { color: #000000; }
/* pagination */
.pagination > li,
.pagination li.page-item { margin: 0 3px !important; display: inline-block; }
.pagination > li > a,
.pagination li.page-item > a { display: block; text-decoration: none; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;background-color: #DE412F; color: #ffffff; margin:0; border: 0; border-radius: 5px; padding: 5px 15px;}

.pagination > li > a:hover { background-color: #000000; }
.pagination li.page-item.li-prev > a,
.pagination li.page-item.li-next > a { background: none; border: 0; color: #555555; padding: 5px; }
.pagination li.page-item.li-prev > a:hover,
.pagination li.page-item.li-next > a:hover { color: #DE412F; }
/* modal */
.modal { background: rgba(0,0,0,.5); }
.modal-content { border-radius: 0; border-bottom: 10px solid #007bc1; }
.modal-header { background-color: #007bc1; color: #ffffff; border-radius: 0; padding: 2px 15px; }
.modal-header .btn-close { background-color: #ffffff; }
.modal-body { padding: 30px; }
.modal-footer { background: #efefef; border-radius: 0; padding: 2px 6px;  }
.closemdl {border-radius: 6%; border: 4px solid #f00; background: #f00; color:#fff;}
/* .dropdown-menu */
#headNav > li {margin-bottom: 15px; }
#headNav > li > a { font-size: 14px; color: #000000; font-weight: 500; }
#headNav > li > a:hover { color: #007bc1; }
#headNav > li > a.link-notification { width: 45px; height: 45px; line-height: 45px; text-align: center; }
#headNav .dropdown-toggle::after { display: none; }
#headNav .dropdown-menu { display: none; visibility: visible; position: absolute; right: 0;top: 100%; opacity: 1; min-width: 290px; /* transition: all 0.3s ease; transform: translate(0, 0); */ padding-top: 0; padding-bottom: 0; border: 1px solid #dfe6e8; }
#headNav li.dropdown:hover > .dropdown-menu{ display: block;/*  visibility: visible; opacity: 1; */ transform: translate(0, -2px);}
#headNav .dropdown-menu > li{ display: block; color: #444; padding: 0; font-weight: 400; border-bottom: 1px solid rgba(141, 146, 147, 0.1); }
#headNav .dropdown-menu > li:last-child { border: 0; }
#headNav .dropdown-menu > li > a { display: block; text-decoration: none; color: #444; padding: 10px 11px; }
#headNav .dropdown-menu > li > span{
	background-color: rgba(141, 146, 147, 0.1);
	color: #444;
	border-radius: 0;
	padding: 8px 10px;
	font-size: 18px;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0 auto;
	font-weight: 500;
	display: block;
}
#headNav li.dropdown::after {
	position: absolute;
	top: auto;
	left: 50%;
	bottom: -1px;
	right: auto;
	width: 100%;
	height: 100%;
	content: "";
	display: block;
	width: 0;
	height: 0;
	opacity: 0;
	visibility: hidden;
	border-left: 16px solid transparent;
	border-right: 16px solid transparent;
	border-bottom: 16px solid #ffffff;
	transform: translate(-50%, 0);
	transition: all 0.3s ease;
}
#headNav li.dropdown:hover::after {
	display: block;
	visibility: visible;
	opacity: 1;
	transform: translate(-50%, -2px);
	z-index: 9999;
}
@media (min-width: 1200px){
	#headNav > li > a { font-size: 15px; }
}
/* dashboard card design
.card .card-header {}


/************ validation ***********/

/* The message box is shown when the user clicks on the password field */
#password_message {
	display:none;
	background: #f1f1f1;
	color: #000;
	position: relative;
	padding: 10px;
	margin-top: 5px;
}

#password_message p {
	padding: 0px 15px;
	font-size: 15px;
}

/* Add a green text color and a checkmark when the requirements are right */
.password_valid {
	color: green;
}

.password_valid:before {
	position: relative;
	left: -10px;
	content: "✔";
}

/* Add a red text color and an "x" when the requirements are wrong */
.password_invalid {
	color: red;
}

.password_invalid:before {
	position: relative;
	left: -10px;
	content: "✖";
}
/************ validation ***********/
.seasrchBox.input-group > .form-control {
	border-top-right-radius: 6px !important;
	border-bottom-right-radius: 6px !important;
}
.form-select[name="per_page"] {
	border-radius: 0px !important;
}

.select2-container .select2-selection--single {
	height: 37px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
	line-height: 37px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 37px;
}
.select2-container.select2 {
	min-height: 37px !important;
}
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){ border-radius: 0 !important; 
}
.tooltip-inner {
	max-width: 500px !important;
	text-align: left;
	z-index: 9999;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: #ff0000;font-size: 20px;
	line-height: 12px;
}
.btn-forgot-password{
	margin: 0px;font-size: 14px;font-weight: bold; border: 0px;background-color: #e8e8e8;color: #007bc1;
} 
.pcoded-content{
	margin-top: 25px;
}
.dashboardPage { margin-top: 0; }
.select2-container{z-index: 999 !important;}

.onlymobile_display{ display: none; }
/********************* Mobile Screen*************************************
Bootstrap 4 breakpoints
*/
/* Small devices (landscape phones, 544px and up) */
@media (min-width: 344px) {  
  h1 {font-size:2rem;} /*1rem = 16px*/
  .mobilescreen_image { width: 25%; }
  .logo{width: 55%;}
  .onlymobile_display{ display: block; }
}

@media (min-width: 544px) {  
  h1 {font-size:2rem;} /*1rem = 16px*/
  .mobilescreen_image { width: 25%; }
  .logo{width: 55%;}
  .onlymobile_display{ display: none; }
}


/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
  h1 {font-size:2rem;} /*1rem = 16px*/
  .mobilescreen_image { width: 25%; }
  .logo{width: 55%;}
  .onlymobile_display{ display: none; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  h1 {font-size:2rem;} /*1rem = 16px*/
  .mobilescreen_image { width: 25%; }
  .logo{width: 55%;}
  .onlymobile_display{ display: none; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
  h1 {font-size:2rem;} /*1rem = 16px*/    
  .mobilescreen_image { width: 25%; }
  .logo{width: 55%;}
  .onlymobile_display{ display: none; }
}

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/

/* Set width to make card deck cards 100% width */
@media (min-width: 950px) and (max-width:1100px) { 
  h1 {font-size:2.75rem;} 
  .mobilescreen_image { width: 55%; }
  .onlymobile_display{ display: none; }
}
/********************* Mobile Screen*************************************/



/* Style for error message */
.error-message {
    color: #ff0000; /* Red color */
    font-size: 14px; /* Font size */
    display: block; /* Make it a block element */
    margin-top: 0px; /* Add some space between input and error message */
}

.error-message2{
    color: #ff0000;
    font-size: 14px;
    position: absolute !important;
    display: inline-block;
    margin-top: 35px;
}


.select{
     position: relative !important;
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #007bc1;
    --bs-btn-border-color: #007bc1;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #007bc1;
    --bs-btn-hover-border-color: #007bc1;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #007bc1;
    --bs-btn-active-border-color: #13653f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #007bc1;
    --bs-btn-disabled-border-color: #007bc1;
}


.btn-info-new {
  background-color: #007bc1 !important; /* Info blue */
  color: white !important;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.btn-info-new:hover {
  background-color: #087ddb !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.btn-info-new:active {
  background-color: #087ddb;
  transform: scale(0.96);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


.modal-xxl {
    max-width: 95vw; /* Adjust width as needed */
    width: 95vw;
}


    .play-wrapper {
      display: inline-flex;       /* inline so it stays in one line inside table */
      align-items: center;        /* vertical center alignment */
      gap: 1px;                   /* space between play button and NEW */
      padding: 2px;
    }
    
    a.play-btn {
      width: 50px;
      height: 50px;
      background: #0078c9;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      text-decoration: none;
      transition: transform 0.2s ease-in-out;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }
    
    a.play-btn:hover {
      transform: scale(1.1);
    }
    
    a.play-btn::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 2px solid rgba(0,120,201,0.5);
      animation: pulse 1.5s infinite;
    }
    
    a.play-btn::after {
      content: "";
      position: absolute;
      left: 20px;
      width: 0;
      height: 0;
      border-left: 14px solid #fff;
      border-top: 9px solid transparent;
      border-bottom: 9px solid transparent;
    }
    
    .badge-new {
      font-size: 12px;
      font-weight: bold;
      background: linear-gradient(90deg, #00ff00, #ff6600, #ff0099);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: glow 1.5s infinite alternate;
    }
    
    @keyframes pulse {
      0% { transform: scale(1); opacity: 1; }
      100% { transform: scale(1.6); opacity: 0; }
    }
    
    @keyframes glow {
      from { text-shadow: 0 0 4px rgba(0,255,0,0.7); }
      to   { text-shadow: 0 0 8px rgba(255,0,150,0.9); }
    }

    @media (max-width: 768px) { /* Tablet */
      a.play-btn {
        width: 40px;
        height: 40px;
      }
      .badge-new {
        font-size: 11px;
      }
      
      a.play-btn::after {
            left: 12px;
            border-left: 12px solid #fff;
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
        }
    }
    
    @media (max-width: 480px) { /* Mobile */
      a.play-btn {
        width: 32px;
        height: 32px;
      }
      .badge-new {
        font-size: 10px;
      }
      
      
      a.play-btn::after {
            left: 12px;
            border-left: 12px solid #fff;
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
        }
    }
    
    .margin5{
        margin: 5px 0 !important;
    }