/* You can add global styles to this file, and also import other style files */
.error-msg {
	color: #f44336;
	display: block;
	text-align: left;
	margin-top: 4px;
	font-size: 12px;
}

:root {
	--primary: #1f1f38;
	--primary-dark: #452dd6;
	/* --primary-dark: #072c9e; */
	--primary-light: #7597ff;
	--primary-lightest: #f6f9ff;
	--secondary: #12ab21;
	--text: #212121;
	--white: #fff;
	--gray: #aaabb0;
	--light-gray: #f7f6f6;
	--success: #12ab21;
	--failed: #f44336;
   }
.main-wrapper{
   height: 100%;
}
.form-check-input:focus, .btn-check:focus + .btn, .btn:focus {
	box-shadow: none;
}
.primary-text{
   color: var(--primary) !important;
}
.primary-bg{
   background-color: var(--primary) !important;
}
.secondary-text{
   color: var(--secondary) !important;
}
.secondary-bg{
   background-color: var(--secondary) !important;
}
.success-text{
   color: var(--success) !important;
}
.success-bg{
   background-color: var(--success) !important;
}
.failed-text{
   color: var(--failed)!important;
}
.failed-bg{
   background-color: var(--failed)!important;
}

.fs-5 {
   font-size: 5px !important;
}

.fs-6 {
   font-size: 6px !important;
}

.fs-7 {
   font-size: 7px !important;
}

.fs-8 {
   font-size: 8px !important;
}

.fs-9 {
   font-size: 9px !important;
}

.fs-10 {
   font-size: 10px !important;
}

.fs-11 {
   font-size: 11px !important;
}

.fs-12 {
   font-size: 12px !important;
}

.fs-13 {
   font-size: 13px !important;
}

.fs-14 {
   font-size: 14px !important;
}

.fs-15 {
   font-size: 15px !important;
}

.fs-16 {
   font-size: 16px !important;
}

.fs-17 {
   font-size: 17px !important;
}

.fs-18 {
   font-size: 18px !important;
}

.fs-19 {
   font-size: 19px !important;
}

.fs-20 {
   font-size: 20px !important;
}

.fs-21 {
   font-size: 21px !important;
}

.fs-22 {
   font-size: 22px !important;
}

@font-face {
   font-family: "roboto";
   src: url("./assets/fonts/Roboto/Roboto-Light.ttf");
   font-weight: 300;
   font-style: normal;
}

@font-face {
   font-family: "roboto";
   src: url("./assets/fonts/Roboto/Roboto-Regular.ttf");
   font-weight: 400;
   font-style: normal;
}

@font-face {
   font-family: "roboto";
   src: url("./assets/fonts/Roboto/Roboto-Medium.ttf");
   font-weight: 500;
   font-style: normal;
}

@font-face {
   font-family: "roboto";
   src: url("./assets/fonts/Roboto/Roboto-Bold.ttf");
   font-weight: 700;
   font-style: normal;
}
*{
   font-family: "roboto";
}
body {
   margin: 0;
}
html, body {
	height: 100%;
}
.py-25 {
	padding-top: 25px;
	padding-bottom: 25px;
}
.my-25 {
	margin-top: 25px;
	margin-bottom: 25px;
}
.ml-10 {
	margin-left: 10px;
}
.pt-40 {
	padding-top: 40px;
}
body {
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	color: var(--text);
}
.border-input::placeholder {
	color: var(--gray);
}
p, h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0;
}

.fw-400,
.fw-normal {
   font-weight: 400 !important;
}

.fw-500,
.fw-bolder {
   font-weight: 500 !important;
}

.fw-700,
.fw-bold {
   font-weight: 700 !important;
}
.form-select:focus {
	box-shadow: 0px 0 4px 0px var(--gray);
	outline: none;
	border-color: var(--white);
}
.form-floating .border-input, .border-input {
	border: none;
	border-bottom: 0.5px solid #aaabb0;
	border-radius: 0;
	box-shadow: none !important;
	padding-left: 0;
	padding-right: 35px;
}
.form-floating p.border-input {
	height: auto;
}
.form-floating label {
	padding-left: 0;
	color: #505052;
}
.form-label,
.select-label {
	color: #505052;
	font-size: 12px;
	margin-bottom: 3px;
}
.form-floating > label {
	top: 10px;
}
.form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control:focus ~ label {
	top: -10px;
	padding-left: 0;
	left: -2px;
}
.main-sidebar {
	width: 320px;
	background: var(--primary);
	height: 100%;
	padding: 70px 28.5px 70px 51.5px;
	/* transition: all .1s ease-in; */
}
#content {
	padding-left: 382px;
	padding-top: 100px;
	height: 100%;
	padding-right: 60px;
}
.main-title {
	color: var(--primary-dark);
	font-size: 30px;
	line-height: 36px;
	font-weight: 400;
}
.heading {
	font-weight: 600;
	font-size: 16px;
	line-height: 19px;
	color: var(--primary-dark);
}
.brand-logo{
   /* width: 150px; */
   padding: 24px 51px;
   background: var(--primary);
}
.foot-logo {
	width: 300px;
	padding: 24px 51px;
	background: var(--primary);
}
.foot-text {
	margin-right: 7px;
	font-weight: 400;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: 0.03em;
	color: var(--primary-light);
}
.activity-wrap .list-group li {
	background: none;
	padding: 20px 0px;
	border: none;
	border-bottom: 1px solid var(--gray);
	color: var(--white);
	font-weight: 400;
	font-size: 14px;
	line-height: 17px;
}
.recent-activity {
	font-weight: 400;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: 0.03em;
	color: var(--primary-light);
}
.menu-listing {
	margin-bottom: 60px;
}
.menu-listing button {
	width: 100%;
	text-align: left;
}
.menu-listing button > span {
	margin-left: 11px;
	display: inline-block;
	position: relative;
	bottom: 1px;
	vertical-align: middle;
}
.menu-listing button[aria-expanded="true"] {
	background-color: var(--primary-dark);
}
.menu-listing button[aria-expanded="true"] .menu-dots {
	opacity: 1;
}
.menu-listing .sub-menu {
	background-color: var(--primary-dark);
	border-radius: 5px 5px 5px 5px;
	margin-top: 2px;
}
.menu-listing .sub-menu button {
	border-bottom: 1px solid var(--gray);
	border-radius: 0;
	min-height: 33px;
}
.menu-listing .sub-menu button:last-child {
	border-bottom: none;
}
.menu-btn {
	font-weight: 400;
	font-size: 16px;
	line-height: 19px;
	color: var(--white) !important;
}
.menu-wrap {
	margin-top: 71.5px;
}
.activity-wrap {
	padding-right: 25px;
}
.activity-wrap .list-group {
	border-radius: 0;
}
.header-wrap {
	z-index: 1029;
	padding-left: 25px;
	/* padding-left: 382px; */
	background: var(--white);
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 60px;
}
.search-header::placeholder {
	color: var(--gray);
}
.search-header {
	padding: 15px 15px 15px 45px;
	border-radius: 5px;
	background: var(--light-gray);
	font-weight: 600;
	font-size: 14px;
	line-height: 17px;
	color: var(--gray) !important;
	border: none;
}
.search-wrap img {
	top: 16px;
	left: 16px;
}
.user-icon img {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	object-fit: contain;
}
.sign-up .dropdown-toggle::after {
	background: url("/broadside/images/v2/down-arrow.svg");
	border: none;
	width: 10px;
	height: 7px;
	background-size: 10px;
	background-repeat: no-repeat;
	position: relative;
	top: 4px;
	left: 4px;
}
.welcome-page {
	display: flex;
	flex-direction: column;
	height: 100%;
	align-items: center;
	justify-content: center;
	width: 366px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.tagline {
	margin-bottom: 48px;
	margin-top: 28px;
}
.textline {
	font-weight: 300;
	font-size: 14px;
	line-height: 17px;
	color: var(--text);
}
.btn-primary {
	border: none !important;
	background: var(--primary-dark) !important;
	padding: 10px 15px;
	border-radius: 5px;
	font-weight: 600;
	font-size: 14px;
	line-height: 17px;
	color: var(--white);
}
.btn-primary:hover{
   transform: scale(1.01);
   box-shadow: 0 0 10px 0 #777777;
}
.btn-round {
	padding: 10px 10px 10px 0;
	border-radius: 50px;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	line-height: 17px;
}
.btn-round img {
	margin-right: 11px;
	margin-bottom: 2px;
	margin-left: 11px;
}
.btn-round fa-icon {
	margin-right: 11px;
	margin-bottom: 2px;
	margin-left: 11px;
}
.edit-btn {
	background-color: var(--primary-lightest);
	color: var(--primary) !important;
}
.new-channel-btn {
	background: var(--primary);
	color: var(--white) !important;
}
.edit-new-btn button:last-child {
	margin-left: 20px;
}
.edit-new-btn .btn-link {
	margin-right: 30px;
}
.details-inner {
	position: relative;
	margin-bottom: 40px;
}
.form-check {
	position: relative;
}
.checkbox.form-check-input {
	border: 2px solid var(--primary);
}
.checkbox.form-check-input:checked[type=checkbox] {
	background-color: var(--primary);
}
.check-img {
	margin-left: -1.5em;
	margin-right: 13px;
}
.Channel-settings-wrap .form-check, .features-wrap .form-check {
	margin-bottom: 31px;
}
.form-switch {
	padding-right: 2.5em;
	padding-left: 0;
}
.form-switch .form-check-input {
	position: absolute;
	right: 0;
	top: auto;
	width: 45px;
	height: 20px;
}
.form-switch .form-check-input:checked {
	background-color: var(--secondary);
	border: var(--secondary);
}
.create-btn {
	width: 290px;
}
.menu-dots {
	position: absolute;
	right: 17px;
	top: 15px;
	opacity: 0;
}
.Channel-settings-wrap {
	max-width: 240px;
	width: 100%;
}
.features-wrap {
	padding-left: 30px;
}
.status-btn {
	padding: 2px 10px;
	border-radius: 5px;
	font-weight: 600;
	font-size: 14px;
	line-height: 17px;
}
.active-btn {
	background-color: var(--secondary);
	color: var(--white) !important;
}
.data-filled .status-btn {
	position: absolute;
	right: 0;
	bottom: 0px;
}
.off-inactive-btn {
	background-color: var(--light-gray);
	color: var(--gray) !important;
	border: 1px solid var(--gray);
}
.form-text {
	font-size: 12px;
}
.channel-name-field:after {
	content: "50";
	position: absolute;
	top: 30px;
	font-size: 10px;
	right: 10px;
	background-color: var(--gray);
	color: var(--white);
	padding: 2px 8px;
	border-radius: 10px;
}
.upload-file .form-select {
	font-size: 14px;
	height: 38px;
	background-image: url("/broadside/images/v2/upload.svg");
}
.date-picker > input {
	background-image: none;
	padding-right: 10px;
}
.form-floating .eye-btn {
	position: absolute;
	right: 0px;
	bottom: 0px;
}
.gray-text {
	font-size: 14px;
	color: var(--gray);
}
.data-filled .form-check-input:disabled ~ .form-check-label, .data-filled .form-check-input[disabled] ~ .form-check-label, .data-filled .form-check-input:disabled {
	opacity: 1;
}
.table-text {
	font-size: 16px;
	color: var(--text);
}
.form-floating > label {
	color: var(--gray);
}
.custom-form-select {
	border: 0px;
	border-bottom: 1px solid var(--gray);
	border-radius: 0px;
}
.custom-form-select:focus {
	box-shadow: none;
	border: 0px;
	border-bottom: 1px solid var(--gray);
}

.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
	opacity: 1;
}
.pointer {
	cursor: pointer;
}
.default-icon {
	color: var(--gray);
	cursor: pointer;
}
input[type="number"] {
	padding-right: 0 !important;
}
.empty-label {
	color: var(--gray);
}
.generic-label {
	color: var(--gray) !important;
}
.img-file-preview {
	max-width: 100px;
	max-height: 100px;
	display: flex;
	margin: auto;
}
.mt-25 {
	margin-top: 25px;
}
.loading-container {
	height: 70vh;
	display: flex;
	align-items: center;
}
.details-loader {
	width: 3rem;
	height: 3rem;
	color: var(--primary) !important;
}
.z-index31{
   z-index: 1031;
}

/* select custom start */

/*the container must be positioned relative:*/
.autocomplete-select {
   position: relative;
   /* display: inline-block; */
 }
 
 .autocomplete-items {
   position: absolute;
   border: 1px solid #d4d4d4;
   border-bottom: none;
   border-top: none;
   z-index: 99;
   /*position the autocomplete items to be the same width as the container:*/
   top: 100%;
   left: 0;
   right: 0;
   max-height: 280px;
 }
 
 .autocomplete-items div {
   padding: 10px;
   cursor: pointer;
   background-color: #fff; 
   border-bottom: 1px solid #d4d4d4; 
 }
 
 /*when hovering an item:*/
 .autocomplete-items div:hover {
   background-color: #e9e9e9; 
 }
 
 /*when navigating through the items using the arrow keys:*/
 .autocomplete-active {
   background-color: DodgerBlue !important; 
   color: #ffffff; 
 }



/* desktop sidebar toggle start */

.foot-logo, .brand-logo, .main-sidebar {
   left: -100%;
   transition: all .2s ease-in-out;
   transition: all .2s ease-in-out;
}

.main-sidebar + #content{
   padding-left: 0;
   transition: all .2s ease-in-out;
}
.main-sidebar.show .foot-logo, .main-sidebar.show .brand-logo, .main-sidebar.show {
   left: 0;
   transition: all .2s ease-in-out;
   visibility: visible;
}
.main-sidebar.show + #content {
   padding-left: 340px;
   transition: all .2s ease-in-out;
}
.main-sidebar.show + #content .header-wrap{
   left: 340px;
   transition: all .2s ease-in-out;
}
/* desktop sidebar toggle end */

 @media (max-width: 767px){
   #content {
	   padding-left: 10px;
	   height: 100%;
	   padding-right: 10px;
	   padding-top: 130px;
   }
   .foot-logo,	
   .brand-logo,
   .main-sidebar{
	   left: -100%;
	   transition: all .2s ease-in-out;
   }
   .header-wrap{
	   padding: 10px 15px;
   }
   .main-sidebar.show .foot-logo,	
   .main-sidebar.show .brand-logo,
   .main-sidebar.show{
	   left: 0;
	   /* width: 80%; */
	   visibility: visible;
   }
   .main-sidebar.show + #content .header-wrap{
	   left: 0;
   }
   .main-sidebar.show + #content,
   .main-sidebar + #content{
	   padding-left: 0;
   }
}

/* */
.value-list {
	display: table;
	width: 74%;
	border-collapse: collapse;
	margin-top: 20px;
}

.value-list-item {
	display: table-row;
	background-color: #f5f5f5;
}

.value-list-item>div {
	display: table-cell;
	padding: 10px;
}

.close-icon {
	color: red;
	width: 0.1%;
	cursor: pointer;
	font-size: 14px;
}

.tag {
	width: 10%;
}


.bell-img{
	height: 1.5rem;
	width: 1.5rem;
	margin-top: 0;
}

.bell-icon{
	padding: 4px;
	margin-left: 40px;
}


/* client logo */
.client-logo{
    width: 120px;
}

/* footer image */
.img-fuild{
	width: 4rem !important;
}

.link1{
	font-size:1rem !important;
}

.form-select{
	border: none !important;
	border-bottom: 1px black solid !important;
}

.form-select:focus{
	border: none !important;
	border-bottom: 1px black solid !important;
	box-shadow: none !important;
}

.error-message{
	font-size: 0.8rem
}

.padding_left_right{
	text-align: right !important;
}

.select2-container--classic .select2-selection--single .select2-selection__arrow {
    background-color: white;
    border: none;
    /* border-left: 1px solid #aaa; */
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
    /* background-image: -webkit-linear-gradient(top, #eee 50%, #ccc 100%); */
    background-image:none;
    /* background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%); */
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0);
}

.select2-container--classic .select2-selection--single {
     background-color: white;
    border: none;
    border-bottom: 1px solid #887c7c;
    border-radius: 0px;
    outline: 0;
    background-image: none; 
  
    /* background-image: linear-gradient(to bottom, #fff 50%, #eee 100%); */
    /* background-repeat: repeat-x; */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);
}
.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 36px;
    user-select: none;
    -webkit-user-select: none;
}


   .select2-container--classic .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    height: 33px;
    font-size: 18px;
    margin-right: 22px;
}
.wrapper {
text-transform: uppercase;
background: #ececec;
color: #555;
cursor: help;
font-family: "Gill Sans", Impact, sans-serif;
font-size: 20px;
margin: 100px 75px 10px 75px;
padding: 15px 20px;
position: relative;
text-align: center;
width: 200px;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.wrapper .tooltip {
background: #1496bb;
bottom: 100%;
color: #fff;
display: block;
left: -20px;
margin-bottom: 15px;
opacity: 0;
padding: 20px;
pointer-events: none;
position: absolute;
width: 100%;
-webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
   -o-transform: translateY(10px);
    transform: translateY(10px);
-webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
   -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
   -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}

/* CSS Triangles - see Trevor's post */
.wrapper .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #1496bb 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}

.wrapper:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
   -o-transform: translateY(0px);
    transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip {
display: none;
}

.lte8 .wrapper:hover .tooltip {
display: block;
}
  

/* tooltip   */

.wrapper {
     text-transform:none;
    background: #ececec;
    color: #555;
    cursor: help;
    font-family: "Gill Sans", Impact, sans-serif;
    font-size: 17px;
     margin:0px;
     padding:0px; 
    position: relative;
    text-align: center;
    width: 185px;
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased;

}

.tooltip-text {
  visibility: hidden;
  position: absolute;
  z-index: 2;
  width: 100px;
  color: white;
  font-size: 12px;
  background-color: #192733;
  border-radius: 10px;
  padding: 10px 15px 10px 15px;
}

.tooltip-text::before {
  content: "";
  position: absolute;
  transform: rotate(45deg);
  background-color: #192733;
  padding: 5px;
  z-index: 1;
}

.hover-text:hover .tooltip-text {
  visibility: visible;
}

#top {
  top: -40px;
  left: -50%;
}

#top::before {
  top: 80%;
  left: 45%;
}

#bottom {
  top: 25px;
  left: -50%;
}

#bottom::before {
  top: -5%;
  left: 45%;
}

#left {
  top: -8px;
  right: 120%;
}

#left::before {
  top: 35%;
  left: 94%;
}

#right {
  top: -8px;
  left: 120%;
}

#right::before {
  top: 35%;
  left: -2%;
}

.hover-text {
  position: relative;
  display: inline-block;
  font-family: Arial;
  text-align: center;
}

.gray-color{
	background-color:#999393 !important;
}
.datepicker-dropdown{
	padding:1rem !important
}
.datepicker th{
	background-color:gray;
	padding:0.5rem;
	border:1px solid white
}