/*jitsy wrapper*/

.JitsWrapperBox {
  width: 100%;
}

.CommentWrite>input {
  border: 1px solid rgba(0, 0, 0, .4) !important;
  border-radius: 4em !important;
}

.jitsiWrapper {
  width: 100%;
  height: 50vh;
  padding: .25em;
}

.paginationstyle {
  background-color: 'yellow !important';
  border: '1px solid blue';
}

/*jitsy wrapper*/

/*crm admin dashboard*/

.keyValueCont {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 1em 0 1em;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
}

.keypadSection {
  padding: 1em 1em 0 1em;
}

.callButtons {
  display: flex;
}

.callButtonsCont {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background-color: white;
  justify-content: center;
  display: flex;
  align-items: center;
}

.callTrigger {
  width: 4em !important;
  height: 4em !important;
}

.callButtonsWr {
  width: 33.33333%;
  display: flex;
  justify-content: center;
  height: 4em;
  align-items: center;
}

.keysNumber {
  display: inline-flex;
  width: 33.333333%;
  justify-content: center;
  height: 3em;
  font-size: 1.2em;
}

.keyNumber {
  width: inherit;
  height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.keyNumber>input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.keypadContVisibleNone {
  visibility: hidden;
  opacity: 0;
  display: none;
  transition: all .3s linear;
}

.keypadContVisible {
  visibility: visible;
  opacity: 1;
  display: block;
  transition: all .3s linear;
}

.callListEtcVisibleNone {
  visibility: hidden;
  opacity: 0;
  display: none;
}

.callListEtcVisible {
  visibility: visible;
  opacity: 1;
  display: block;
}

.callHistory {
  width: 100%;
  overflow: hidden;
  display: flex;
  border-bottom: 1px solid white;
}

.callHistoryNumber {
  display: flex;
  height: 3em;
  align-items: center;
  width: 80%;
  padding-left: 1em;
}

.callFromHistory {
  display: flex;
  height: 3em;
  align-items: center;
}

.callFromHistoryCont {
  width: 2.5em;
  height: 2.5em;
  display: flex;
  border-radius: 50%;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .1);
  cursor: pointer;
}

.keyNumber>input[type=number] {
  -moz-appearance: textfield;
  border: none !important;
}

.keypadCont {
  padding-top: 1em;
  padding-bottom: 1em;
  background-color: rgba(0, 0, 0, .1);
  height: auto;
  max-height: 68vh;
  overflow: auto;
}

.callSelection {
  background-color: rgba(0, 0, 0, .3);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.callSelectionLeft {
  width: 50%;
  float: left;
  height: 4em;
  text-align: center;
  font-size: .9em;
  line-height: .9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s linear;
}

.callSelectionLeft:hover {
  background-color: rgba(0, 0, 0, .1);
  cursor: pointer;
}

.callSection {
  padding: 1em .5em 0 .5em;
}

.callHeader {
  font-size: 1.5em;
  font-weight: bold;
  padding: 0.2em 0 0 .2em;
  line-height: .8;
  color: white;
}

.dialerWritten {
  border-bottom: 1px solid #f1e1e175;
  padding: .5em;
  font-size: .9em;
  line-height: 1;
  color: white;
}

.dialerWrittenChild {
  width: fit-content;
  cursor: pointer;
  transition: all .3s linear;
}

.dialerWrittenChild:hover {
  background-color: rgba(0, 0, 0, .2);
}

.DialerCont {
  position: fixed;
  height: 100%;
  top: 0;
  overflow: hidden;
  right: 0;
  width: 0;
  padding-top: 4em;
  box-shadow: -10px 0px 10px 1px #00000063;
  background-color: #4178f6;
  color: white;
  transition: all .3s linear !important;
  z-index: 9;
}

.DialerContWidth {
  width: 20em;
}

.callParent {
  display: flex;
  justify-content: flex-end;
}

.stickCall {
  float: right;
  display: flex;
  width: 1.7em;
  height: .8em;
  background-color: #0875d4;
  border-radius: .4em;
  justify-self: center;
  align-self: center;
  margin-left: -.4em;
}

.callViewer {
  float: right;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background-color: #0875d4;
  align-items: center;
  justify-content: center;
  display: flex;
  cursor: pointer;
  margin-top: .2em;
  transition: all .3s linear !important;
}

.reportCont {
  padding: 1.8em 0 1.8em 0;
  display: flex;
  justify-content: center;
}

.voilet {
  border: 1px solid #5555b5;
  box-shadow: 0px 0px 2px 0px #5555b5;
  background-color: #5555b547;
  color: #555db9;
}

.yelloish {
  border: 1px solid #61b555;
  box-shadow: 0px 0px 2px 0px #61b555;
  background-color: #61b5559c;
  color: #41f328;
}

.dangeresh {
  border: 1px solid #b5b055;
  box-shadow: 0px 0px 2px 0px #b5b055;
  background-color: #b5b05580;
  color: #000000;
}

.greenish {
  border: 1px solid #b5558c;
  box-shadow: 0px 0px 2px 0px #b5558c;
  background-color: #b5558c80;
  color: #f189c4;
}

.reportStatistic {
  font-size: .8em;
  padding: .2em;
  color: white;
}

.reportContText {
  padding: 0 0 0 .25em;
  font-size: 1.4em;
  line-height: 1.2;
}

.agentRestCont {
  padding: 0 .5em 0 .5em;
}

.agentInfoCont .finalOne {
  display: flex;
  align-items: center;
  background-color: #1878cc;
  width: 10%;
  font-weight: bolder;
  color: #000000a1;
  font-size: 1.3em;
  justify-content: center;
}

.restData {
  padding: 0 .5em 0 .5em;
  font-size: 1.3em;
  float: right;
  color: #fbfbfbc7;
  line-height: .9;
  margin-top: .2em;
}

.adminDashboard {
  letter-spacing: .5px;
  color: white;
}

.agentInfoBox {
  border: 1px solid rgba(255, 255, 255, .2);
}

.agentInfoCont {
  width: 100%;
  overflow: hidden;
  height: 3em;
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.agentRest {
  width: 55%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.agentNameAndImage {
  width: 35%;
  overflow: hidden;
  height: 100%;
  display: flex;
  padding-left: .5em;
}

.agentImage {
  width: 2em;
  border-radius: 50%;
  height: 2em;
  overflow: hidden;
}

.agentImage>img {
  width: 100%;
  height: 100%;
}

.agentNameParent {
  display: flex;
  align-items: center;
  width: 75%;
  padding: 0 .25em 0 .25em;
}

.agentName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .8em;
}

/*crm admin dashboard*/

/*crm control panel design*/

.statusTitle {
  font-size: .8em;
  font-family: monospace;
  line-height: .9;
}

.statusData {
  font-size: 1.5em;
  line-height: 1;
}

.statusHolder {
  display: inline-flex;
  margin: 0 .3em 0 .3em;
}

.agentStatus {
  background-color: #5c9fad6b;
  padding: .25em;
  height: auto;
  width: 100%;
}

.contactWrapper {
  overflow: hidden;
}

.contactWrapper>div {
  width: 50%;
  padding: .5em;
  float: left;
}

.contactWrapper>div>::placeholder {
  color: white;
}

.contactWrapper>div>input {
  color: white;
}

.loginTime {
  background-color: rgba(0, 0, 0, .2);
  padding: .5em;
}

.nav-tabs .nav-link.active {
  background-color: inherit;
  border: none;
  color: #f15536 !important;
}

.nav-tabs .nav-link:hover {
  border-color: transparent !important;
}

.commentTexta {
  height: 10em;
}

.crmblockCont {
  border: 1px solid #a54646;
  background-color: #982e2e;
  box-shadow: 0px 0px 4px 0px #130101;
}

.crmParent {
  width: 100%;
}

.crmBlockParent {
  text-align: center;
}

.totalCalls {
  font-size: 2em;
  margin: 0;
  padding: 0;
  font-family: monospace;
}

.crmInfoCont {
  background-color: #00000054;
  box-shadow: 0px 0px 2px 0px #020000;
  padding: .5em;
}

/*crm control panel design*/

/*user role csss*/

/*user role css*/

.regIcons {
  font-size: 1em;
  color: #6c757d;
}

.regInBox {
  height: 3em;
  align-items: center;
}

.regtopbg {
  width: 15em;
  height: 5em;
}

.regBen {
  font-size: 2em;
  font-weight: bold;
}

.havetohandle {
  display: flex;
  margin: .5em 0em .5em 0em;
  border-radius: .75rem;
  box-shadow: 0 1px 15px rgba(0, 0, 0, .1), 0 1px 8px rgba(0, 0, 0, .1);
  min-width: 45em;
}

.havetohandle>div {
  width: 16.6666666667%;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 1em;
}

.tableCont {
  border-radius: 1em;
  padding: 1em;
  background-color: rgba(0, 0, 0, .4);
}

.App {
  text-align: center;
}

.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  -webkit-font-smoothing: antialiased;
}

/* mdl-demo is a custom classname to increases the specificity of our styles. It can be anything. 
 * The idea is that it is easy to extend/override builtin styles with very little effort.
 */

.mdl-demo .dropdown-trigger>span:after {
  font-size: 12px;
  color: #fff;
}

.mdl-demo .toggle {
  font: normal normal normal 18px/1 "Material Icons";
  color: #fff;
  white-space: pre;
  margin-right: 4px;
}

.mdl-demo .toggle.collapsed::after {
  cursor: pointer;
  content: "\E5CF";
  vertical-align: middle;
}

.mdl-demo .toggle.expanded::after {
  cursor: pointer;
  content: "\E5CE";
  vertical-align: middle;
}

/* checkbox styles */

.mdl-demo .checkbox-item {
  /*vertical-align: middle;*/
  position: relative;
  width: 1rem;
  height: 1rem;
  margin-right: 0.75rem;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  color: #fff;
  display: block;
}

.mdl-demo .checkbox-item:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 2px solid #2196f3;
  transition: all 0.3s ease-in-out;
}

.mdl-demo .checkbox-item:checked:before {
  height: 50%;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border-top-style: none;
  border-right-style: none;
  border-color: #2196f3;
}

.borderRight {
  border-right: 1px solid rgba(49, 49, 49, .7);
}

#myModal {
  padding: 0 !important;
}

.vidColorPicker {
  width: 2em;
  height: 2em;
}

.fontbig {
  font-size: 1.2em;
}

.limitModalHeight {
  max-height: 520px;
}

.border-theme {
  border: 1px solid #f15536;
  border-radius: .25rem;
}

.profile_pic {
  width: 2.5em;
  height: 2.5em;
  overflow: hidden;
  border-radius: 30%;
}

.profile_pic>img {
  width: 100%;
  height: 100%;
}

.hasSomething {
  background-color: #f15536;
  padding: 0;
  margin: 0;
  line-height: 1px !important;
  font-size: 0.6em;
  border-radius: 50%;
  width: 1.2em;
  overflow: hidden;
  height: 1.2em;
  text-align: center;
  color: aquamarine;
  float: right;
  padding-top: .6em;
  font-weight: bolder;
  position: absolute;
  margin-left: 1em;
}

.videoNoti {
  max-height: 16em;
  height: auto;
  min-height: auto;
}

.forthioneonlyTop {
  width: 1.4em !important;
  background-color: transparent;
}

.forthioneonly {
  border: 0 !important;
  background-color: transparent !important;
  height: 1.5em !important;
  width: 2em;
}

.forthioneonly::after {
  content: "\a87" !important;
  font-size: 2em;
  background-color: transparent !important;
  color: #f15536 !important;
  line-height: 0.6 !important;
}

.pdf-upload>input {
  display: none;
}

.uploadImage>input {
  display: none;
}

.container_editor_viewerContainer {
  width: 500px !important;
}

.e-de-ctn>input {
  border: none !important;
}

.e-de-ctn input {
  border: none !important;
}

/*Edit Permissions*/

.rolegroupcontainer {
  height: auto !important;
}

.search {
  display: none;
}

.checkbox-item {
  display: none;
}

.focused {
  background-color: transparent !important;
}

.dropdown-content {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.toggle {
  font-style: normal !important;
}

.userdiscription {
  border-bottom: 1px solid rgba(49, 49, 49, .7) !important;
}

/********************************************read page************************/

.read>thead {
  color: #f15536;
}

.read>td {
  vertical-align: middle !important;
}

/*Edit Permissions*/

/*universal*/

.favicon {
  color: #f15536 !important;
  cursor: pointer;
}

.color_example {
  width: 1em;
  height: 1em;
  display: block;
  float: left;
}

/*universal*/

/*Color picker*/

.color-picker-container {
  position: relative;
}

.color-picker-palette {
  position: absolute;
  z-index: 100;
}

.color-picker-cover {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}

.color-picker-color-background {
  position: fixed;
  height: 35px;
  width: 35px;
  background-color: #999999;
  float: left;
}

/*Color picker*/

/*CALANDER*/

.fc-center {
  color: #f15536;
  font-size: .9em;
}

#react-tabs-7 {
  height: auto;
  padding: 1em 0 5em 0;
}

.react-tabs__tab--selected::after {
  border: none !important;
  box-shadow: none !important;
}

.demo-app-calendar {
  background-color: #232223 !important;
  box-shadow: 0 1px 15px rgba(0, 0, 0, .1), 0 1px 8px rgba(0, 0, 0, .1);
  border-radius: .8em;
  overflow: hidden;
  padding: .7em;
}

.fc-button-primary {
  color: #f15536 !important;
  background-color: transparent !important;
  border-color: #f15536 !important;
}

.fc-button-primary:focus {
  box-shadow: none !important;
}

.fc-button:hover {
  color: white !important;
  background-color: #f15536 !important;
}

.fc-today-button {
  text-transform: capitalize !important;
}

.fc-row {
  border-color: #f15536 !important;
}

.fc-widget-header {
  color: #969696 !important;
}

.fc-header-toolbar {
  margin-bottom: .7em !important;
}

.fc-day-grid-container {
  height: auto !important;
}

.fc-day-grid {
  color: #f15536;
  font-weight: 600;
}

.fc-unthemed td.fc-today {
  background: #3c4642 !important;
}

.fc-button-group>button {
  text-transform: capitalize !important;
}

.fc-body {
  color: white !important;
}

.fc-content {
  border: none !important;
  font-size: 1em;
  color: #969696;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

.fc-content>.fc-time {
  text-transform: uppercase;
}

.fc-content>.fc-title {
  text-transform: capitalize;
  overflow-x: -webkit-marquee;
}

/*CALANDER*/

/*Modal design code*/

.modal {
  background-color: rgba(0, 0, 0, .4) !important;
  padding: 0!important;
}

.vl {
  border-left: 2px solid white;
  height: 14em;
}

.canvasstyle {
  position: absolute;
  z-index: 1001;
  overflow: auto;
  padding-left: 5px;
}

.doc {
  width: 100px;
  height: 50px;
  background-color: tomato;
}

.whiteboard .modal-dialog {
  max-width: 900px !important;
  margin-left: -20px;
  margin-top: 10px;
  z-index: 2002;
}

.modal-backdrop {
  display: none !important;
}

.minimize-button {
  color: white;
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.minimize-button .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 4px 4px;
  border-radius: 50%;
  background: red;
  color: white;
  z-index: 1005;
}

.VedmodalWi {
  width: 98%;
}

.boardvideomodal .modal-dialog {
  max-width: inherit !important;
  margin: 0;
  height: inherit !important;
}

.boardvideomodal .modal-content {
  height: inherit;
}

.boardvideomodal .modal-body {
  background-color: #232223;
}

/*Modal which is not opened we are hiding it here*/

.minboardvideomodal .modal-body {
  display: none !important;
}

.minboardvideomodal .modal-header {
  width: 50px;
  background-color: #1b191b !important;
}

.minboardvideomodal .modal-dialog {
  width: 300px;
  margin-top: -10px !important;
  height: 60px !important;
  display: none !important;
}

.modal-open .minboardvideomodal {
  width: 30px;
  margin-top: 600px !important;
  margin-left: 1250px !important;
  height: 30px !important;
  overflow-y: hidden !important;
  border-radius: 50%;
  background-color: blue !important;
  display: none !important;
}

/*Modal which is not opened we are hiding it here*/

.whiteboardfull .modal-dialog {
  min-width: 1350px !important;
  margin-left: -20px;
  margin-top: 10px;
}

.commentsection .modal-dialog {
  min-width: 500px !important;
}

.res_message {
  color: #DC3545;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  text-transform: capitalize;
}

/*calender modal*/

.modal .react-tabs__tab-panel {
  padding-top: 1rem !important;
}

.react-tabs__tab-panel>#section {
  color: white;
}

/*calender modal*/

.theme-colors {
  width: 280px;
  position: fixed;
  top: 50%;
  right: 0;
  background: #232223;
  box-shadow: 0 1px 15px rgba(0, 0, 0, .1), 0 1px 8px rgba(0, 0, 0, .1);
  -webkit-transform: translate(280px, -50%);
  transform: translate(280px, -50%);
  -webkit-transition: -webkit-transform .4s ease-out;
  transition: -webkit-transform .4s ease-out;
  transition: transform .4s ease-out;
  transition: transform .4s ease-out, -webkit-transform .4s ease-out;
}

.theme-colors.shown {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.theme-colors .theme-button {
  position: absolute;
  left: -34px;
  background: #232223;
  padding: 13px 7px;
  border-radius: .2rem;
  box-shadow: -2px 0 5px rgba(0, 0, 0, .04);
  font-size: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #f15536;
}

.rcw-messages-container {
  height: 20em !important;
  max-height: 20em !important;
}

.rcw-conversation-container {
  border-radius: 10px;
  box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 1) !important;
}

.rcw-title {
  font-size: none !important;
  padding: 0 !important;
  color: #f15536 !important;
  font-weight: 600 !important;
}

.rcw-header {
  background-color: #030404 !important;
  padding: 1em 0 1em !important;
}

.rcw-messages-container {
  background-color: #232223 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.rcw-message {
  margin: .5em !important;
}

.rcw-message-text {
  background-color: #1b191b !important;
  padding: .7em !important;
}

.rcw-message-text>p {
  padding: 0 !important;
  margin: 0 !important;
}

.rcw-sender {
  background-color: #1b191b !important;
}

.rcw-send {
  background-color: transparent !important;
}

.rcw-launcher {
  background-color: #121415 !important;
  box-shadow: 0 2px 10px 1px #f15536 !important;
}

.react-tabs {
  width: 100% !important;
  padding: 0;
  background-color: transparent;
  padding-top: .5em;
  padding-bottom: 1em;
  height: auto;
}

.react-tabs__tab-list {
  margin: 0 !important;
  background-color: 232223;
  padding: 0;
  height: auto;
  padding-top: .0 !important;
  padding-bottom: .5em !important;
  border-bottom: 1px solid rgba(49, 49, 49, .7) !important;
}

.react-tabs__tab {
  background-color: #060108;
  color: white;
  font-size: .9em;
  line-height: .9;
  border: none !important;
  border-radius: .4em;
  text-transform: capitalize !important;
  width: 12em;
  border: none;
  border-bottom: none;
  bottom: 0 !important;
  padding-top: .8em !important;
  padding-bottom: .8em !important;
  cursor: default !important;
}

.react-tabs__tab--selected {
  border: none !important;
  border-radius: .4em !important;
  background-color: rgba(255, 255, 255, .05) !important;
  background: rgba(255, 255, 255, .05) !important;
  color: white !important;
}

.react-tabs__tab:focus {
  box-shadow: 0 0 5px hsl(0, 0%, 7%) !important;
  outline: none !important;
  background: transparent;
  background-color: transparent;
}

.del_tab {
  border-radius: 50%;
  font-size: .75em;
  width: 1.4em;
  height: 1.4em;
  padding-top: .3em;
  text-align: center;
}

.del_tab:hover {
  background-color: rgba(131, 126, 126, 0.699);
}

.react-tabs__tab-panel {
  width: 100%;
  height: auto;
}

.sub_menu_item>li>ul>li>span:hover {
  color: #f15536 !important;
}

.theme-colors>div>div>ul>li {
  width: 100% !important;
}

.sub_menu_item>li>ul>li {
  font-size: .9em;
}

.tcolor {
  color: #f15536 !important;
}

.setpos {
  top: 1.1em !important;
  right: 15em !important;
  width: 20em !important;
}

.arrows section .box-title {
  padding-left: 2.5em;
}

.arrows section .box-title:before {
  position: absolute;
  display: block;
  content: '\203a';
  font-size: 18pt;
  left: 20px;
  top: -2px;
  transition: transform .250s ease-in-out;
}

.box {
  position: relative;
  height: auto;
  transition: all .3s linear !important;
}

.box::before {
  color: red;
  content: '';
  position: relative;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

.box-title {
  display: inline-block;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-top: .4em !important;
}

.box-content {
  width: 100%;
  font-size: .9em;
  display: block;
  height: auto;
}

.box-close {
  position: absolute;
  height: 2em;
  width: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  display: none;
}

input:checked+.box {
  height: auto;
}

input:checked+.box .box-content, input:checked+.box .box-close {
  display: inline-block;
}

input:checked+section.box .box-title:before {
  transform: rotate(90deg);
}

.arrows input {
  display: none;
}

.sub_child {
  width: 2em;
}

.subchild_i {
  font-size: 1.2em;
}

.dropdown-menu>li {
  padding-left: 2em;
  padding-top: .7em;
  padding-bottom: .7em;
  font-size: .9em;
  font-weight: 400;
  line-height: 1;
}

.hoverbg:hover {
  background-color: #1b191b;
}

.dropdown-menu {
  background-color: #232223 !important;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: .3rem;
  width: auto;
  margin-top: .8em;
  overflow: hidden;
}

.header_icon {
  font-size: 1.3em;
  font-weight: 100;
  cursor: pointer;
}

.menu_icon {
  width: 100%;
  padding: 0 !important;
  padding-left: .5em !important;
  padding-right: .5em !important;
}

.menu_icon>div>div {
  width: 50%;
  padding-top: 1.5em !important;
  padding-bottom: 1.5em !important;
}

.header_navbar {
  box-shadow: 0 1px 15px rgba(0, 0, 0, .1), 0 1px 8px rgba(0, 0, 0, .1);
  height: 4em;
}

.navbar-left>a>i {
  font-size: 1.3em;
}

.search_section {
  width: 15em;
  border-radius: 1.5em;
  background-color: #1b191b;
}

.dropdown {
  border-radius: 1.5em !important;
}

.lang_drop {
  border: 1px solid rgba(49, 49, 49, .7);
  border-radius: .7em;
}

.navbar-logo {
  height: 4em !important;
  height: 2.9em;
  flex-basis: 16%;
}

.navbar-right {
  flex-basis: 42%;
  justify-content: flex-end;
}

.content_container {
  height: 91%;
  margin-top: 4em;
  transition: all .3s linear !important;
}

.side_menu_desktop {
  width: 10%;
  height: 100%;
  border-radius: 0 .75rem .75rem 0;
  box-shadow: 0 3px 30px rgba(0, 0, 0, .3), 0 3px 24px rgba(0, 0, 0, .3);
}

.side_menu_box {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: 55;
}

.content_box {
  width: 90%;
  height: 100%;
}

.sellphone_sidebar {
  display: none;
  z-index: 1;
  left: 0;
  width: 5em;
  height: 90%;
  top: 4em;
  background-color: #232223;
}

.submenu {
  border-left: 1px solid rgba(49, 49, 49, .7);
  top: 4em;
  left: 9%;
  width: 0;
  height: 90.6%;
  overflow: hidden;
  border-top-right-radius: .75rem;
  border-bottom-right-radius: .75rem;
  display: table-caption;
  box-shadow: 5px 0px 15px 0px rgba(0, 0, 0, 0.5);
  width: 0;
  opacity: 0;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all .5s ease;
}

.testing {
  width: 17em;
  display: table-cell;
  opacity: 1;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all .5s ease;
}

/*
.scrollbar >div:hover{
  cursor:pointer;
}
*/

.dashboard {
  border-bottom: 1px solid rgba(49, 49, 49, .7);
}

/* total width */

.scrollbar::-webkit-scrollbar {
  width: .3em;
  background-color: inherit;
}

/* background of the scrollbar except button or resizer */

.scrollbar::-webkit-scrollbar-track {
  border-radius: .5em !important;
}

.scrollbar::-webkit-scrollbar-track:hover {
  background-color: #f4f4f4
}

/* scrollbar itself */

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #424242;
  border-radius: .3em;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
  background: white;
}

.scrollbar::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

.scrollbar::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* set button(top and bottom of the scrollbar) */

.scrollbar::-webkit-scrollbar-button {
  display: none
}

/* div box */

.scrollbar {
  overflow-y: scroll
}

.noti_time {
  font-size: .76rem;
  line-height: .9rem;
}

.noti_desc {
  text-overflow: ellipsis;
  height: auto;
  max-height: 2.5em;
  word-break: break-word;
}

.btn:focus {
  outline: 0 !important;
  box-shadow: none;
}

.dropdown-toggle::after {
  margin-left: 0;
}

.dropdown-menu li {
  display: block;
}

.dropdown-menu li a {
  border: none;
}

.search_header {
  background-color: #1b191b !important;
  border: none;
  font-size: .8em;
  font-weight: 500;
  padding-top: 1.5em !important;
  padding-bottom: 1.5em !important;
}

.search_header:focus {
  outline: none !important;
  border: none !important;
}

.search_header:active {
  outline: none !important;
  border: none !important;
  background-color: #1b191b !important;
}

.sub_menu_item {
  list-style: none;
  height: 100%;
}

.item_clicked {
  cursor: pointer;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translatex(-100px);
    -moz-transform: translatex(-100px);
    -o-transform: translatex(-100px);
    transform: translatex(-100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translatex(0);
    -moz-transform: translatex(0);
    -o-transform: translatex(0);
    transform: translatex(0);
  }
}

.in-left {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: .25s;
  -webkit-animation-delay: .25s;
  -moz-animation-delay: .25s;
  -o-animation-duration: .25s;
  animation-delay: .25s;
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
    -webkit-transform: translatex(0);
    -moz-transform: translatex(0);
    -o-transform: translatex(0);
    transform: translatex(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translatex(-100px);
    -moz-transform: translatex(-100px);
    -o-transform: translatex(-100px);
    transform: translatex(-100px);
  }
}

.out-left {
  -webkit-animation-name: fadeOutLeft;
  -moz-animation-name: fadeOutLeft;
  -o-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: .35s;
  -webkit-animation-delay: .35s;
  -moz-animation-delay: .35s;
  -o-animation-duration: .35s;
  animation-delay: .35s;
}

.box {
  left: 0;
  z-index: 1;
}

.custom-control-label::before {
  background-color: inherit !important;
}

.custom-control-input {
  left: 1px;
  top: 3px;
  opacity: 0;
  z-index: 1;
}

.custom-control-input:checked~.custom-control-label::before {
  background-color: #f15536 !important;
  box-shadow: none!important;
  border: 1px solid #f15536 !important;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before, .custom-radio .custom-control-input:checked~.custom-control-label:before {
  background-color: #f15536 !important;
  box-shadow: none!important;
}

.btntheme {
  border: 1px solid #f15536 !important;
  color: rgba(255, 255, 255, .8);
}

label {
  font-weight: 300;
}

.bg_child {
  border: initial;
  background: #232223;
  border-radius: calc(.15rem - 1px);
  box-shadow: 0 1px 15px rgba(0, 0, 0, .1), 0 1px 8px rgba(0, 0, 0, .1);
  border-radius: .75rem;
  padding: 1em;
}

.txt_theme {
  color: rgba(255, 255, 255, .5) !important;
}

.login_container {
  height: auto;
  border-radius: 1em;
  box-shadow: 0 1px 15px rgba(0, 0, 0, .04), 0 1px 6px rgba(0, 0, 0, .04);
}

.fixed-background {
  background: url('../img/balloon.jpeg') no-repeat 50% fixed;
  background-size: cover;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.reg-fixed-background {
  background: url('../img/regbg.png') no-repeat 50% fixed;
  background-size: cover;
  position: fixed;
  width: 100%;
  background-color: white;
  background-position: center;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.image_side {
  background: url('../img/login-balloon.jpeg') no-repeat top;
  background-size: cover;
  padding: 80px 40px;
}

.h2 {
  font-weight: 400;
}

.white {
  font-size: .9em;
}

.card-title {
  font-size: 1.1rem;
}

.logo-single {
  width: 100%;
  height: 35px;
  background: url('../img/company_logo.png') no-repeat;
  background-position: center;
  display: inline-block;
  background-size: contain;
  margin-bottom: 60px;
}

.regInBox input {
  border: 0 !important;
  color: white !important;
  font-weight: 500;
  font-size: .8em;
}

.regInBorder {
  border-bottom: 1px solid #f15536 !important;
}

.regInBorder:focus {
  border-bottom: 1px solid #09a4f3 !important;
}

/*Commented and store if any error
12-2-2020

.vidSizeSelect {
  z-Index: 1005;
  position: relative;
}


*/

/*Custom Chat active*/

.ring-container {
  position: relative;
}

.circle {
  width: 8px;
  height: 8px;
  background-color: #62bd19;
  border-radius: 50%;
  position: absolute;
  right: -47px;
  top: -28px;
}

.ringring {
  border: 2px solid #62bd19;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  height: 16px;
  width: 16px;
  position: absolute;
  animation: pulsate 1s ease-out;
  -webkit-animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  opacity: 0.0;
  top: -5px;
  left: -5px;
}

@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    opacity: 0.0;
  }
}

/*Custom Chat active*/