@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('./nav-sidebar.css');
@import url('./main-content.css');

body {
	background: #FFF;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
blockquote,
span {
	/* font-family: "Poppins", sans-serif; */
  font-family: Verdana!important;
	font-weight: 300;
	line-height:150%;
}
.font-playfair{
  /* font-family: 'Playfair Display', serif!important; */
  font-family: Verdana!important;
}

.bg-grey{
  background: #d5ddd6!important;
}
.bg-dark-grey{
  background: #b7b7b7!important;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}


.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}
.navbar-brand {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}
.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}
.navbar-nav .dropdown-menu {
  position: static;
}

.navbar-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .navbar-toggler {
    transition: none;
  }
}
.navbar-toggler:hover {
  text-decoration: none;
}
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 0.25rem;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.navbar-nav-scroll {
  max-height: var(--bs-scroll-height, 75vh);
  overflow-y: auto;
}

@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-sm .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
  .navbar-expand-sm .offcanvas-header {
    display: none;
  }
  .navbar-expand-sm .offcanvas {
    position: inherit;
    bottom: 0;
    z-index: 1000;
    flex-grow: 1;
    visibility: visible !important;
    background-color: transparent;
    border-right: 0;
    border-left: 0;
    transition: none;
    transform: none;
  }
  .navbar-expand-sm .offcanvas-top,
.navbar-expand-sm .offcanvas-bottom {
    height: auto;
    border-top: 0;
    border-bottom: 0;
  }
  .navbar-expand-sm .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 768px) {
  .navbar-expand-md {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-md .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
  .navbar-expand-md .offcanvas-header {
    display: none;
  }
  .navbar-expand-md .offcanvas {
    position: inherit;
    bottom: 0;
    z-index: 1000;
    flex-grow: 1;
    visibility: visible !important;
    background-color: transparent;
    border-right: 0;
    border-left: 0;
    transition: none;
    transform: none;
  }
  .navbar-expand-md .offcanvas-top,
.navbar-expand-md .offcanvas-bottom {
    height: auto;
    border-top: 0;
    border-bottom: 0;
  }
  .navbar-expand-md .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-lg .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
  .navbar-expand-lg .offcanvas-header {
    display: none;
  }
  .navbar-expand-lg .offcanvas {
    position: inherit;
    bottom: 0;
    z-index: 1000;
    flex-grow: 1;
    visibility: visible !important;
    background-color: transparent;
    border-right: 0;
    border-left: 0;
    transition: none;
    transform: none;
  }
  .navbar-expand-lg .offcanvas-top,
.navbar-expand-lg .offcanvas-bottom {
    height: auto;
    border-top: 0;
    border-bottom: 0;
  }
  .navbar-expand-lg .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1200px) {
  .navbar-expand-xl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-xl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
  .navbar-expand-xl .offcanvas-header {
    display: none;
  }
  .navbar-expand-xl .offcanvas {
    position: inherit;
    bottom: 0;
    z-index: 1000;
    flex-grow: 1;
    visibility: visible !important;
    background-color: transparent;
    border-right: 0;
    border-left: 0;
    transition: none;
    transform: none;
  }
  .navbar-expand-xl .offcanvas-top,
.navbar-expand-xl .offcanvas-bottom {
    height: auto;
    border-top: 0;
    border-bottom: 0;
  }
  .navbar-expand-xl .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1400px) {
  .navbar-expand-xxl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xxl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xxl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xxl .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-xxl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xxl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xxl .navbar-toggler {
    display: none;
  }
  .navbar-expand-xxl .offcanvas-header {
    display: none;
  }
  .navbar-expand-xxl .offcanvas {
    position: inherit;
    bottom: 0;
    z-index: 1000;
    flex-grow: 1;
    visibility: visible !important;
    background-color: transparent;
    border-right: 0;
    border-left: 0;
    transition: none;
    transform: none;
  }
  .navbar-expand-xxl .offcanvas-top,
.navbar-expand-xxl .offcanvas-bottom {
    height: auto;
    border-top: 0;
    border-bottom: 0;
  }
  .navbar-expand-xxl .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
.navbar-expand {
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.navbar-expand .navbar-nav {
  flex-direction: row;
}
.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}
.navbar-expand .navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
.navbar-expand .navbar-nav-scroll {
  overflow: visible;
}
.navbar-expand .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
}
.navbar-expand .navbar-toggler {
  display: none;
}
.navbar-expand .offcanvas-header {
  display: none;
}
.navbar-expand .offcanvas {
  position: inherit;
  bottom: 0;
  z-index: 1000;
  flex-grow: 1;
  visibility: visible !important;
  background-color: transparent;
  border-right: 0;
  border-left: 0;
  transition: none;
  transform: none;
}
.navbar-expand .offcanvas-top,
.navbar-expand .offcanvas-bottom {
  height: auto;
  border-top: 0;
  border-bottom: 0;
}
.navbar-expand .offcanvas-body {
  display: flex;
  flex-grow: 0;
  padding: 0;
  overflow-y: visible;
}

.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
}
.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
  color: rgba(0, 0, 0, 0.9);
}
.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.55);
}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.7);
}
.navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(0, 0, 0, 0.3);
}
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9);
}
.navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.55);
  border-color: rgba(0, 0, 0, 0.1);
}
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-light .navbar-text {
  color: rgba(0, 0, 0, 0.55);
}
.navbar-light .navbar-text a,
.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-dark .navbar-brand {
  color: #fff;
}
.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
  color: #fff;
}
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.55);
}
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.75);
}
.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
}
.navbar-dark .navbar-toggler {
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.1);
}
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.55);
}
.navbar-dark .navbar-text a,
.navbar-dark .navbar-text a:hover,
.navbar-dark .navbar-text a:focus {
  color: #fff;
}

.btn-open-v2{
  background:#5a665c!important;
  border:#5a665c 2px solid!important;
  color:#fff!important;
  border-radius: 25px!important;
  padding: 10px 20px!important;
  padding-top: 10px!important;
  padding-right: 20px!important;
  padding-bottom: 10px!important;
  padding-left: 20px!important;
}
.btn-open-v2:hover{
  background:#fff!important;
  border:#5a665c 2px solid!important;
  color:#5a665c!important;
}

/* width */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius:15px;
}

/* Handle on   */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

body {
  background: #fff;
}

body {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
h1,h2,h3,h4,h5,h6{
  line-height: 150%;
}
.text-delete{
  color:#e93333;
  
}
.text-muted-2{
  color: #828282;
}
.div-icon{
  position: relative;
}
.icon-right {
  position: absolute;
  right: 15px;
  font-size: 20px;
  padding-top: 13px;
}
.one-line{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.two-line{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
table{
  width:100%!important;
}
th{
  font-size:14px;
  font-weight: 600;
}
td{
  font-size:14px;
  font-weight: 400;
}
.dataTables_length, .table-video_filter{
  margin-bottom:15px!important;
}
.dataTables_info, .dataTables_paginate, .paging_simple_numbers {
  margin-top:15px!important;
}
.active>.page-link, .page-link.active{
  background: #203764!important;
  border-color: #203764!important;
  color:#FFF!important;
}

input[type="file"]{
  height:48px!important;
}

input[type="file"]::-webkit-file-upload-button{
  height:48px!important;
}
.video{
  width:100%;
  border-radius:12px;
}
.page-link{
  color: #203764!important;
}
.pagination > li > a{
  font-size:14px!important;
}
.a-link{
  text-decoration: none;
  color: #203764;
}
.a-link:hover{
  text-decoration: none;
  color: #0a4f28;
}
a:hover{
  color: #0a4f28;
}
.a-none{
  color: #000!important;
  text-decoration: none!important;
}

.text-white{
  color:#FFF!important;
}

input[type=checkbox] {
  position: relative;
	border: 2px solid #000;
	border-radius: 0px;
	background: none;
	cursor: pointer;
	line-height: 0;
	margin: 0 .4em 0 0;
	outline: 0;
	padding: 0 !important;
	vertical-align: text-top;
	height: 20px;
	width: 20px;
	-webkit-appearance: none;
  opacity: .5;
}

input[type=checkbox]:hover {
  opacity: 1;
}

input[type=checkbox]:checked {
  background-color: #203764;
  opacity: 1;
}

input[type=checkbox]:before {
  content: '';
  position: absolute;
  right: 50%;
  top: 50%;
  width: 4px;
  height: 10px;
  border: solid #FFF;
  border-width: 0 2px 2px 0;
  margin: -1px -1px 0 -1px;
  transform: rotate(45deg) translate(-50%, -50%);
  z-index: 2;
}


.video-player{
  background:#f1f1f1;
  height:390px;
  width:100%;
}
.video-item{
  background:#f1f1f1;
  height:150px;
  width:100%;
}
.btn-play{
  height:75px;
  width:75px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 31.3762px;
  text-decoration: none;
  color: #FFF;
}
.btn-play:hover{
  text-decoration: none;
  color: #0a4f28;
  background: #FFF;
}

footer{
  padding: 15px 32px;
  background: rgb(246, 240, 240);
}
header{
  margin-bottom:15px;
}
.modal-title{
  font-size: 22px!important;
  font-weight:400!important;
  margin-bottom:0px!important;
}
.div-video-item{
  min-height:379px;
  border-radius:25px;
}
.div-video-highlight{
  min-height:297px;
  border-radius:25px;
}
.div-action{
  width:75px;
}
.br-12{
  border-radius:12px;
}
.br-15{
  border-radius:15px;
}
.br-25{
  border-radius:25px;
}
.br-50{
  border-radius:50%;
}


button{
  cursor:pointer;
}
.chip-group{
  display:flex;
  flex-wrap:wrap;
}
.chip.chip-checkbox > .chip-add-icon::after {
  content:"add"
}
.chip.chip-checkbox.active > .chip-add-icon::after {
  content:"done"
}

.chip input {
  display: none;
}
.chip.chip-checkbox,
.chip.chip-toggle,
.chip.clickable{
  cursor: pointer;
}
.chip.active {
  background-color: #d3d2d2;
  border-color:#c3c2c2;
  box-shadow: 0 1px 1px rgba(0,0,0,0.12)
}
.chip:hover, .chip:focus {
  background-color: #e3e2e2;
}
.chip:active:focus{
  background-color: #d3d2d2;  
}
.chip button{
  border:none;
  margin-top:0;
  margin-bottom:0;
  padding:0;
  background:none;
  display:inline-flex;
}
.chip {
  transition: all 0.3s ease-in-out;
  background-color: #fff;
  border-radius: 30px;
  border: 1px solid #d3d2d2;
  display: inline-flex;
  align-items:center;
  padding: 4px 6px 4px 6px;
  margin-right:6px;
  margin-bottom:6px;
}

.div-video-list-item-shimmer{
  border-radius:12px;
  width:100%;
}

.div-video-list-item{
  border:1px #D8D8D8 solid;
  /* min-height:460px; */
  border-radius:12px;
}
.div-video-list-item:hover{
  border:1px #D8D8D8 solid;
  background:#f8f8f8;
  /* min-height:460px; */
  border-radius:12px;
}
.img-video-list-item{
  height:146px;
  width:100%;
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
  object-fit: cover;
}
.img-video-list-item-2{
  height:185px;
  width:100%;
  border-radius: 11px;
  object-fit: cover;
}
.div-relative{
  position:relative;
}
.div-channel{
  background:#f1f1f1;
  border-radius:12px;
}
.div-inline-block{
  display: inline-block!important;
}
.img-cover{
  height:199px;
  width:100%;
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
  object-fit: cover;
  
}
.img-avatar{
  height:160px;
  width:160px;
  border-radius:50%;
  object-fit:cover;
  position:absolute;
  top:80px;
  left:42%;
  border:5px #FFF solid;
}
.btn-edit-cover{
  position:absolute;
  top:130px;
  right:20px;
}
.w-100-px{
  width:100px;
}
.div-channel-desc{
  padding-left:210px;
}
.owl-theme .owl-dots .owl-dot span{
  width: 40px;
  height:5px;
  background: #DFDEDF;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: #FFF;
}

.form-control{
  margin-top: 10px!important;
  height: 48px!important;
  background: #EDF1F7!important;
  font-size: 14px!important;
  border-radius: 10px!important;
}

.form-control:focus{
  color:#212529;background-color:#fff;border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgb(221, 228, 224)
}

.select2-container .select2-selection--single {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 48px;
  margin-top: 10px;
  padding-top: 9px;
  user-select: none;
  -webkit-user-select: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 26px;
  position: absolute;
  top: 20px;
  right: 9px;
  width: 20px;
}

.select2-container--default .select2-search--dropdown .select2-search__field{
  height: 48px;
  padding-left:10px;
}

.select2-container--default:hover, .select2-container--default:focus, .select2-container--default:active, .select2-container--default:disabled{
  border:0px #FFF solid!important;
}

.bootstrap-tagsinput .tag{
  width:100%;
  margin-top: 10px;
  min-height: 48px!important;
  background: #EDF1F7;
  color:#000;
  font-size: 14px;
}
.bootstrap-tagsinput{
  padding-top:8px;
  padding-bottom:8px;
  width:100%;
  margin-top: 10px;
  min-height: 48px!important;
  background: #EDF1F7;
  color:#000;
  font-size: 14px;
}
.bg-green{
  background: #203764;
  color:#FFF;
}

.dashboard-icon{
  width: 78px;
  height: 78px;
  padding: 4px;
  border-radius: 50px;
  box-sizing: border-box;
  background:#FEE7E1;
  border: 1px solid #F5F5F5;
  display: flex;
  justify-content: center;
}

.dashboard-icon-item{
  font-size: 35px;
  display: block;
  margin: auto;
}

.div-dashboard-icon{
  width: 78px;
  margin-right: 16px;
  display: inline;
}

.div-dashboard-box{
  display: inline;
  width: calc(100% - 96px);
}

.table-icon-item{
  width: 30px;
  height: 30px;
  border-radius: 50px;
  object-fit: cover;
  display: block;
  margin: auto;
}

.div-table-icon{
  width: 38px;
  margin-right: 5px;
  display: inline;
}

.div-table-box{
  display: inline;
  width: calc(100% - 73px);
}


.table-icon-item-2{
  width: 60px;
  height: 60px;
  border-radius: 50px;
  object-fit: cover;
  display: block;
  margin: auto;
}

.div-table-icon-2{
  width: 68px;
  margin-right: 5px;
  display: inline;
}

.div-table-box-2{
  display: inline;
  width: calc(100% - 73px);
}

.div-orange{
  background:#FF7347;
  color:#FFF;
  border-radius:12px;
  
}
.div-green{
  background: #203764;
  color:#FFF;
  border-radius:12px;
}
.div-purple{
  background: #51459F;
  color:#FFF;
  border-radius:12px;
}

.color-orange{
  color:#FF7347;
}
.color-green{
  color:#203764;
}
.color-purple{
  color:#51459F;
}
.text-balas{
  color:#4F4F4F;
}
.fs-10{
  font-size: 11.5px;
}
.fs-12{
  font-size: 12px;
}
.fs-14{
  font-size: 14px;
}
.fs-16{
  font-size: 16px;
}
.fs-18{
  font-size: 18px;
}
.fs-20{
  font-size: 20px;
}
.fs-22{
  font-size: 22px;
}
.fs-24{
  font-size: 24px;
}
.fs-26{
  font-size: 26px;
}
.fs-56{
  font-size: 56px;
}
.h-38{
 height:38px!important; 
}

.fw-400{
  font-weight:400!important;
}
.fw-500{
  font-weight:500!important;
}
.fw-600{
  font-weight:600!important;
}
.fw-700{
  font-weight:700!important;
}

.div-title{
  font-size: 20px;
  font-weight:600;
}

.icon-dot{
  height: 10px;
  width: 10px;
  background-color: #FFF;
  border-radius: 50%;
  display: inline-block;
}
.icon-dot-active{
  height: 10px;
  width: 10px;
  background-color: #203764;
  border-radius: 50%;
  display: inline-block;
}

.loading-circle {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #203764;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-ellipsis {
  display: inline-block;
  position: relative;
  bottom: 22px;
  width: 80px;
  height: 80px;
}
.loading-ellipsis div {
  position: absolute;
  top: 27px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #203764;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loading-ellipsis div:nth-child(1) {
  left: 8px;
  animation: loading-ellipsis1 0.6s infinite;
}
.loading-ellipsis div:nth-child(2) {
  left: 8px;
  animation: loading-ellipsis2 0.6s infinite;
}
.loading-ellipsis div:nth-child(3) {
  left: 32px;
  animation: loading-ellipsis2 0.6s infinite;
}
.loading-ellipsis div:nth-child(4) {
  left: 56px;
  animation: loading-ellipsis3 0.6s infinite;
}
@keyframes loading-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes loading-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes loading-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

.shimmer {
  background: #f6f7f8;
  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-repeat: no-repeat;
  background-size: 800px 104px; 
  display: inline-block;
  position: relative; 
  
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: forwards; 
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: placeholderShimmer;
  -webkit-animation-timing-function: linear;
}

  
@-webkit-keyframes placeholderShimmer {
  0% {
    background-position: -468px 0;
  }
  
  100% {
    background-position: 468px 0; 
  }
}




.toast {
  width: 350px;
  max-width: 100%;
  font-size: 0.875rem;
  pointer-events: auto;
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}
.toast.showing {
  opacity: 0;
}
.toast:not(.show) {
  display: none;
}

.toast-container {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  pointer-events: none;
}
.toast-container > :not(:last-child) {
  margin-bottom: 0.75rem;
}

.toast-header {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  color: #6c757d;
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}
.toast-header .btn-close {
  margin-right: -0.375rem;
  margin-left: 0.75rem;
}

.toast-body {
  padding: 0.75rem;
  word-wrap: break-word;
}

.br-web{
  border-right : 1px rgba(0, 0, 0, 0.2) solid;
}


.tags-input-wrapper{
  margin-top: 10px;
  min-height: 48px!important;
  background: #EDF1F7;
  font-size: 14px;
  padding: 10px;
  border-radius: 4px;
  width:100%;
  border: 1px solid #ccc
}
.tags-input-wrapper:focus{
  color:#212529;background-color:#fff;border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgb(221, 228, 224)
}

.tags-input-wrapper input{
  border: none;
  background: transparent;
  outline: none;
  margin-left: 0px;
}
.tags-input-wrapper .tag{
  display: inline-block;
  background-color: #203764;
  color: white;
  border-radius: 5px;
  padding: 0px 5px 0px 10px;
  margin-right: 5px;
}
.tags-input-wrapper .tag a {
  margin: 0 7px 3px;
  display: inline-block;
  cursor: pointer;
}


.btn{
  height: 48px!important;
  background: #FFF;
  font-size: 14px;
  color: #000;
  border-radius:10px!important;
  /* padding-top:2.5%; */
  /* display: inline; */
  /* display: table-cell; */
}
.btn-action{
  display: block;
  padding: 13px!important;
  border: 1px solid #ced4da;
  appearance: none;
  border-radius: 0.375rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  width:100%;
  height: 48px!important;
  background: #EDF1F7;
  font-size: 14px;
}
.btn-action:hover{
  border: 1px solid #ced4da;
}

.btn-action:focus{
  color:#212529;
  background-color:#fff;
  border-color:#86b7fe;
  outline:0;box-shadow:0 0 0 .25rem rgb(221, 228, 224)
}
/* .btn-action-success{
} */
.btn-action-success:hover, .btn-action-success:focus, .btn-action-success:active, .btn-action-success:disabled{
  color: #203764;
}


.btn-action-detail{
  color: #0140EF!important;
  border: 1px #0140EF solid!important;
  border-radius:5px!important;
  font-weight: 500!important;
  font-size: 14px!important;
  height: 35px!important;
}
.btn-action-detail:hover, .btn-action-detail:focus, .btn-action-detail:active, .btn-action-detail:disabled{
  background:#0140EF!important;
  color: #FFF!important;
  border: 1px #0140EF solid!important;
  border-radius:5px!important;
  font-weight: 500!important;
  font-size: 14px!important;
  height: 35px!important;
}

.a-green{
  color: #203764;
}
.a-green:hover{
  color: #000;
}
.btn-primary{
  height: 48px!important;
  background: #203764;
  border: 2px #203764 solid; 
  color: #FFF;
  font-size: 14px;
  padding: 12px;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:disabled{
  background: #FFF!important;
  border: 2px #203764 solid!important; 
  color: #203764;
}

.btn-primary-outline{
  height: 48px!important;
  background: #fff!important;
  border:2px #203764 solid!important; 
  color: #203764;
  font-size: 14px;
  padding: 12px;
}
.btn-primary-outline:hover, .btn-primary-outline:focus, .btn-primary-outline:active, .btn-primary-outline:disabled{
  background: #203764!important;
  color: #fff!important;
  border:2px #203764 solid!important; 
}

.btn-nav{
  height: 48px!important;
  background: #203764;
  border-color:#203764;
  border: 2px #203764 solid; 
  width:140px;
  color: #FFF;
  font-size: 14px;
  padding:12px;
}
.btn-nav:hover, .btn-nav:focus, .btn-nav:active, .btn-nav:disabled{
  background: #FFF!important;
  border: 2px #203764 solid!important; 
  color:#203764;
}

.btn-danger{
  height: 48px!important;
  background: #F64E60;
  border-color:#F64E60;
  color: #FFF;
  font-size: 14px;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger:disabled{
  background: #F64E60;
}

.btn-medium{
  height:35px!important;
}
.btn-small{
  height:25px!important;
}


.btn-action-approve{
  padding-top:2px;
  height: 28px!important;
  background: #FFF;
  color: #000;
  border-color:#c7c5c5;
  font-size: 14px;
  border-radius:25px;
  margin-bottom:5px;
  
}
.btn-action-approve:hover{
  background: #203764;
  border-color: #203764;
  color:#FFF;
}
.btn-action-reject{
  padding-top:2px;
  height: 28px!important;
  background: #FFF;
  color: #000;
  border-color:#c7c5c5;
  font-size: 14px;
  border-radius:25px;
  margin-bottom:5px;
  
}
.btn-action-reject:hover{
  background: #FF7347;
  border-color: #FF7347;
  color:#FFF;
}


.btn-action-delete{
  padding-top:2px;
  height: 28px!important;
  background: #FFF;
  color: #000;
  border-color:#c7c5c5;
  font-size: 14px;
  border-radius:25px;
  margin-bottom:5px;
  
}
.btn-action-delete:hover{
  background: #ce3000;
  border-color: #ce3000;
  color:#FFF;
}

.btn-action-edit{
  padding-top:2px;
  height: 28px!important;
  background: #FFF;
  color: #000;
  border-color:#c7c5c5;
  font-size: 14px;
  border-radius:25px;
  margin-bottom:5px;
  
}
.btn-action-edit:hover{
  background: #0f2f99;
  border-color: #0f2f99;
  color:#FFF;
}


.a-category{
  text-decoration: none;
  padding:5px 10px;
  background: #FFF;
  color: #000!important;
  font-size: 14px;
  border-radius:25px;
  font-weight:500;
  
}
.a-category-active{
  text-decoration: none;
  padding:5px 10px;
  color: #203764;
  font-size: 14px;
  border-radius:25px;
  font-weight:500;
  
}
.a-category:hover{
  color: #203764;
}
.a-category-active:hover, .a-category-active:active, .a-category-active:focus{
  color: #203764!important;
}



.btn-category{
  text-decoration: none;
  padding:5px 10px;
  background: #FFF;
  color: #000;
  border:1px solid #c7c5c5;
  font-size: 14px;
  border-radius:25px;
  
}
.btn-category-active{
  text-decoration: none;
  padding:5px 10px;
  background: #203764;
  border: 1px solid #203764;
  color:#FFF;
  font-size: 14px;
  border-radius:25px;
  
}
.btn-category:hover{
  background: #203764;
  border: 1px solid #203764;
  color:#FFF;
}
.btn-category-active:hover, .btn-category-active:active, .btn-category-active:focus{
  background: #203764;
  border: 1px solid #203764;
  color:#FFF;
}

.file-upload {
  display: none!important;
}
.div-profile-pic{
  width: 100%;
}
.profile-pic {
  border-radius: 15%;
  width: 100%;
  object-fit: cover;
  border-radius: 15px;
  background:rgb(214, 212, 212);
  border: 0px solid rgba(255, 255, 255, 0.7);
  transition: all .3s;
}

.btn-select-file {
  position: absolute;
  padding:3px;
  top: 15px;
  right: 15px;
  height: 30px!important;
  width: 30px!important;
  opacity: 100%;
}

.bootstrap-tagsinput .badge {
  margin-right: 5px;
}

.bootstrap-tagsinput .badge {
  padding: 5px;
}

.badge{
  margin-top : 1px;
  padding-top: 5px;
  font-weight:500;
  font-size:14px;
  height: 25px!important;
  min-width: 75px;
}

.badge-tb {
  margin-top: 1px;
  padding-top: 8px;
  font-weight: 500;
  font-size: 14px;
  height: 29px!important;
  min-width: 75px;
}

.badge-flexible{
  min-width: 45px!important;
}
.badge-reject{
  background: #FFE2E5;
  border-color:#FFE2E5;
  color: #F64E60;
  border-radius:25px;
}
.badge-pending{
  background: #FFF4DE;
  border-color:#FFF4DE;
  color: #FFA800;
  border-radius:25px;
}
.badge-active{
  background: rgba(47, 128, 237, 0.1);
  border-color:rgba(47, 128, 237, 0.1);
  color: #2F80ED;
  border-radius:5px;
}
.badge-success{
  background: rgba(33, 150, 83, 0.1);
  border-color:rgba(33, 150, 83, 0.1);
  color: #203764;
  border-radius:5px;
}
.badge-purple{
  background: rgba(155, 81, 224, 0.1);
  border-color:rgba(155, 81, 224, 0.1);
  color: #9B51E0;
  border-radius:5px;
}
.badge-info{
  background: rgba(47, 128, 237, 0.1);
  border-color:rgba(47, 128, 237, 0.1);
  color: #2F80ED;
  border-radius:5px;
}
.badge-danger{
  background: #FFE2E5;
  border-color:#FFE2E5;
  color: #F64E60;
  border-radius:5px;
}
.badge-warning{
  background: rgba(242, 153, 74, 0.1);
  border-color:rgba(242, 153, 74, 0.1);
  color: #F2994A;
  border-radius:5px;
}
th,td{
  font-weight:500;
}
.text-success{
  color: #203764;
}
.btn-badge-success{
  background: rgba(33, 150, 83, 0.24);
  border-color:rgba(33, 150, 83, 0.24);
  color: #203764;
  font-size: 14px;
  border-radius:25px;
}
.btn-badge-success:hover{
  background: #203764;
  border-color:#203764;
  color: #FFF;
}


@media (max-width: 1024px) {
  .information .card {
    width: 100%;
  }
  #chart-revenue {
    width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 480px) {
  .sidebar {
    overflow-y: scroll;
    overflow:auto;
  }
  .content {
    /* padding: 40px 16px; */
    width:100%;
    margin: 0;
  }
  .search {
    width: 250px;
  }
}

@media (max-width: 767.98px) {
  .content {
    width:100%;
    margin: 0;
  }
}

.avatar-icon:hover,.sidebarCollapseDefault:hover{
    background:#203764;
    color:#FFF;
}
.sidebarCollapseDefault{
    background:transparent!important;
}

.ribbon-corner,.ribbon-bookmark-v,.ribbon-bookmark-h{z-index: 1;display:flex;text-align:center;align-items:center;justify-content:center}@-moz-document url-prefix(){.ribbon-corner,.ribbon-bookmark-v,.ribbon-bookmark-h{outline:1px solid transparent}}.ribbon-corner{background-color:#1f44ff;color:#fff;position:absolute;top:0;right:0;-webkit-clip-path:var(--tor-ribbon-polygon);clip-path:var(--tor-ribbon-polygon);transform:rotate(var(--tor-ribbon-rotate)) translateY(var(--tor-ribbon-translateY)) translateX(var(--tor-ribbon-translateX)) !important;transform-origin:var(--tor-ribbon-origin) !important;width:calc( (var(--tor-ribbon-size) + 1em) * 2);height:2em}.ribbon-corner{--tor-ribbon-size: 3em;--tor-ribbon-rotate: 45deg;--tor-ribbon-translateX: 50%;--tor-ribbon-translateY: calc((var(--tor-ribbon-size) + 1em) - 100%);--tor-ribbon-origin: 100% 0%;--tor-ribbon-polygon: polygon(0% 100%, 50% calc(100% - (var(--tor-ribbon-size) + 1em)), 100% 100%)}.ribbon-corner[data-tor*="place.left"][data-tor*="place.top"]{--tor-ribbon-rotate: -45deg;--tor-ribbon-translateX: -50%;--tor-ribbon-origin: 0% 0%}.ribbon-corner[data-tor*="place.left"][data-tor*="place.bottom"]{--tor-ribbon-translateX: -50%;--tor-ribbon-translateY: calc(0% - var(--tor-ribbon-size) + 1em);--tor-ribbon-origin: 0% 100%;--tor-ribbon-polygon: polygon(0% 0%, 50% calc(100% + (var(--tor-ribbon-size) - 1em)), 100% 0%)}.ribbon-corner[data-tor*="place.right"][data-tor*="place.bottom"]{--tor-ribbon-rotate: -45deg;--tor-ribbon-translateY: calc(0% - var(--tor-ribbon-size) + 1em);--tor-ribbon-origin: 100% 100%;--tor-ribbon-polygon: polygon(0% 0%, 50% calc(100% + (var(--tor-ribbon-size) - 1em)), 100% 0%)}.ribbon-corner.ribbon-fold{--tor-ribbon-polygon: polygon(0% 100%, 50% calc(100% - (var(--tor-ribbon-size) + 1em)), 100% 100%, 100% calc(100% + 0.5em), 0% calc(100% + 0.5em));margin:-0.30em}.ribbon-corner.ribbon-fold:before{--tor-ribbon-fold-polygon: polygon(0% -10px, 100% -10px, 100% 100%, calc(100% - 0.5em - 10px) -10px, calc(0.5em + 10px) -10px, 0% 100%);background-color:inherit;filter:brightness(50%);-webkit-clip-path:var(--tor-ribbon-fold-polygon);clip-path:var(--tor-ribbon-fold-polygon);content:"";position:absolute;bottom:calc(-0.5em + 1px);left:0;width:100%;height:0.5em;z-index:-1}.ribbon-corner.ribbon-fold[data-tor*="place.bottom"]{--tor-ribbon-polygon: polygon(0% -0.5em, 100% -0.5em, 100% 0%, 50% calc(100% + (var(--tor-ribbon-size) - 1em)), 0% 0%)}.ribbon-corner.ribbon-fold[data-tor*="place.bottom"]:before{bottom:auto;top:-0.5em;transform:rotate(180deg)}.ribbon-bookmark-v,.ribbon-bookmark-h{--tor-ribbon-size: 3em;color:#fff;background-color:#1f44ff;position:absolute;right:0;top:0;flex-direction:column;transform-style:preserve-3d;z-index:1}.ribbon-bookmark-v.ribbon-fold:before,.ribbon-bookmark-h.ribbon-fold:before{content:"";position:absolute;z-index:-1;background-color:inherit;filter:brightness(50%);padding:0.25em}.ribbon-bookmark-v{--tor-ribbon-polygon: polygon(0% 0%, 100% 0%, 100% 100%, 1em calc(100% - 1em), 0% 100%);-webkit-clip-path:var(--tor-ribbon-polygon);clip-path:var(--tor-ribbon-polygon);margin-right:1rem;margin-left:1rem;width:2em;height:calc(var(--tor-ribbon-size) + 1em);padding-bottom:1em}.ribbon-bookmark-v.ribbon-fold{--tor-ribbon-polygon: polygon(0% calc(0% + 0.5em), -0.5em 0.5em, 0% 0%, 100% 0%, 100% 100%, 1em calc(100% - 1em), 0% 100%);margin-top:-0.5em;margin-bottom:-0.5em}.ribbon-bookmark-v.ribbon-fold::before{top:0;left:-0.5em}.ribbon-bookmark-v[data-tor*="place.bottom"]{--tor-ribbon-polygon: polygon(0% 0%, 1em 1em, 100% 0%, 100% 100%, 0% 100%);padding-bottom:unset;padding-top:1em}.ribbon-bookmark-v.ribbon-fold[data-tor*="place.bottom"]{--tor-ribbon-polygon: polygon(0% 0%, 1em 1em, 100% 0%, 100% 100%, 0% 100%, -0.5em calc(100% - 0.5em), 0% calc(100% - 0.5em))}.ribbon-bookmark-v.ribbon-fold[data-tor*="place.bottom"]::before{bottom:0;left:-0.5em;top:auto}.ribbon-bookmark-h{--tor-ribbon-polygon: polygon(100% 100%, 0% 100%, 1em 1em, 0% 0%, 100% 0%);-webkit-clip-path:var(--tor-ribbon-polygon);clip-path:var(--tor-ribbon-polygon);margin-bottom:1rem;margin-top:1rem;height:2em;width:calc(var(--tor-ribbon-size) + 1em);padding-left:1em}.ribbon-bookmark-h.ribbon-fold{--tor-ribbon-polygon: polygon(100% 100%, 0% 100%, 1em 1em, 0% 0%, calc(100% - 0.5em) 0%, calc(100% - 0.5em) -0.5em, 100% 0%);margin-left:-0.5em;margin-right:-0.5em}.ribbon-bookmark-h.ribbon-fold::before{top:-0.5em;right:0}.ribbon-bookmark-h[data-tor*="place.left"]{--tor-ribbon-polygon: polygon(0% 0%, 100% 0%, calc(100% - 1em) 1em, 100% 100%, 0% 100%);padding-right:1em;padding-left:unset}.ribbon-bookmark-h.ribbon-fold[data-tor*="place.left"]{--tor-ribbon-polygon: polygon(0% 0%, 0.5em -0.5em, 0.5em 0%, 100% 0%, calc(100% - 1em) 1em, 100% 100%, 0% 100%, 0% 0%)}.ribbon-bookmark-h.ribbon-fold[data-tor*="place.left"]::before{left:0;right:auto}.ribbon-sm{--tor-ribbon-size: 2em}.ribbon-lg{--tor-ribbon-size: 4em}.ribbon-xl{--tor-ribbon-size: 5em}

.img-auth{
	height:80px;
}
.cover-auth{
	width:100%;
}
.auth-body{
	padding: 32px;
	min-height: 100vh;
}
.div-auth{
	min-height: 100vh;
}

.pt-body {
	padding-top: 80px;
	min-height: 100vh;
}
.pt-body-web {
	padding-top: 0;
	min-height: 100vh;
}
#mytable, #mytable_2,#datatable-2{
  background:#203764;
  color:#FFF!important;
}
@media only screen and (max-width: 600px) {
	.img-search {
		height: 90vh;
	}
	.div-auth{
		min-height: unset!important;
	}
}
.table>:not(caption)>*>*{
  /* background-color:#FFF!important; */
  /* --bs-table-accent-bg:#FFF!important; */
}
.table-striped>tbody>tr:nth-of-type(odd)>*{
  --bs-table-accent-bg:#ececec!important;
  color:#000;
}

.table-striped>tbody>tr:nth-of-type(even)>*{
  --bs-table-accent-bg:#FFF!important;
  color:#000;
}
.bg-primary{
  /* z-index:1!important; */
  background:#203764!important;
  color:#FFF!important;
}
.bg-primary:hover{
  /* z-index:1!important; */
  background:#203764!important;
  color:#FFF!important;
}
.dtfc-fixed-left,.dtfc-fixed-right{
  z-index:1!important;
  background:#203764!important;
}
th.dtfc-fixed-right{
  z-index:1!important;
  background:#203764!important;
  border-left:1px #FFF solid!important;
}
.text-separator{
  margin-top:20px;
  font-size:14px;
  font-weight:600;
}