/* 
Material Icons 
https://fonts.google.com/icons?selected=Material+Icons

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
*/
  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(libs/gmaterialicon/MaterialIcons-Regular.eot);
    src: local('Material Icons'),
      local('MaterialIcons-Regular'),
      url(libs/gmaterialicon/MaterialIcons-Regular.woff2) format('woff2'),
      url(libs/gmaterialicon/MaterialIcons-Regular.woff) format('woff'),
      url(libs/gmaterialicon/MaterialIcons-Regular.ttf) format('truetype');
  }

  .material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}


@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url(libs/gmaterialicon/Material-Symbols-Outlined.woff2) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

div .material-icons,
div .material-symbols-outlined {
  /* vertical-align: text-top; */
  vertical-align: middle;
}

  /* Rules for sizing the icon. */
  .material-symbols-outlined.md-14,
  .material-icons.md-14 { font-size: 14px; }
  .material-symbols-outlined.md-18,
  .material-icons.md-18 { font-size: 18px; }
  .material-symbols-outlined.md-20,
  .material-icons.md-18 { font-size: 20px; }
  .material-symbols-outlined.md-24,
  .material-icons.md-24 { font-size: 24px; }
  .material-symbols-outlined.md-30,
  .material-icons.md-30 { font-size: 30px; }
  .material-symbols-outlined.md-36,
  .material-icons.md-36 { font-size: 36px; }
  .material-symbols-outlined.md-48,
  .material-icons.md-48 { font-size: 48px; }
  .material-symbols-outlined.md-72,
  .material-icons.md-72 { font-size: 72px; }
  
  /* Rules for using icons as black on a light background. */
  .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
  .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
  
  /* Rules for using icons as white on a dark background. */
  .material-icons.md-light { color: rgba(255, 255, 255, 1); }
  .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
/* Material Icons */

.bg-shobiz {
    width: 100%; height: 100%;
    background-color: rgb(229,25,109);
    background: linear-gradient(100deg, rgba(229,25,109,1) 0%, rgba(247,141,1,1) 60%);
}

.bg-shobiz > div.card-header{
  background-color: #5538b5;
  color:#ffffff;
}

.fingerprint{
    color: #ffffff;
}.fingerprint:hover{
    color: #000000;
}
.btn-warning{
  background-color: #f69432;
}
table.table-sm tr th,
table.table-sm tr td,
table.table-sm tr td button.btn-sm{
  padding:2px 3px !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  padding: 2px !important;
  font-size: 12px;
}

#upload_form > .labels{display: none;}
.upload_preview_container{
 background-color: #ffffff;
}
.invalid-tooltip{
  right:0;
  top:95%;
  padding: 0.025rem 0.5rem;
  font-size: .70rem;
  border-radius: 0;
  position: static;
}
.input-group input.input-group-text{
  background-color: #ffffff;
  text-align: left;
  max-width: 60px;
}
.border-radius-0{
  border-radius:0;
}
.phone-group-border-setting{
  border-top-left-radius: 0!important; 
  border-bottom-left-radius:0;
  border-top-right-radius:0; 
  border-bottom-right-radius:0;
  border-bottom: 0!important;
}
.border-left-black{
  border-left:3px solid rgb(62, 58, 56);
  border-radius: 0 25px 0 0;
}
.border-left-danger{
  border:3px solid rgb(85, 83, 82);
  border-radius: 0 25px 0 25px;
}
.list-scrollbar::-webkit-scrollbar {
  width: 4px;
  background-color: rgb(152, 148, 146);
}
.list-scrollbar::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(27, 27, 28, 0.3);
}
.list-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgb(21, 21, 20);
  outline: 1px solid rgb(106, 97, 57);
}
textarea.form-control.xtra-larger {
  min-height: calc(13em + 2px);
}
textarea.form-control.larger {
  min-height: calc(10em + 2px);
}
.labels.small{
  font-size: x-small;
  color: #05b4f4;
}
.very-small{  
  font-size: 12px; font-weight: 500;
}
.small-form,
.small-form .labels,
.small-form .form-control,
.small-form .input-group-text,
.small-form .btn{
  font-size: 14px;
  border-radius: 0;
}

#callers-card-body.card-body{
  background-color: #000000;
  color:#ffffff;
}
  .btn-group-click:hover{
  background-color: #029bbd;
  }
  .btn-group-click{
    background-color: #1e3a82;
  }
  .btn:disabled{
    cursor: not-allowed;
    pointer-events: auto;
  }
  .form-check-input{
    border: 1px solid #6c757d;
    background-color: #f9f9f9;
  }

  .btn-td{
    max-width:25px; 
    text-align: center !important; 
    display: table-cell; 
    border-left:1px solid #cccccc;
  }

  .table td.text-truncate {
    max-width: 150px;
  }
  .table td.abbreviation{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .csvTable td{
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .csvTable th{
    text-transform: uppercase;
    font-size: 12px;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button{
    padding: 0.1em 0.5em !important;
    min-width: 1.0em !important;
  }
.position-relative.col-md-3{
  margin-bottom:0.25rem;
}

html {
  height: 100%;
  background: #223;
  display: grid;
  place-items: center;
}

.box {
  --border-size: 3px;
  --border-angle: 0turn;
  min-width: 60vmin;
  min-height: 20vmin;
  margin-bottom: 20px;
  color: #ffffff;
  /* background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03); */
}

.box-active {
  background-size: calc(100% - (var(--border-size) * 2)) calc(100% - (var(--border-size) * 2)), cover;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-animation: bg-spin 3s linear infinite;
          animation: bg-spin 3s linear infinite;
}
@-webkit-keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
.box:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

.dd_menu_after div.vert_move > .ico_dd{
  margin: -12px 0 0 -6px;
  position: absolute;
  color: #ffc107;
  font-size: 17px;
  transform: rotate(90deg);
}
.dropstart .dropdown-menu[data-bs-popper] {
top: 90%;
right: 20%;
}

.vert_move {
  -webkit-animation: mover 1s infinite  alternate;
  animation: mover 1s infinite  alternate;
}
.vert_move {
  -webkit-animation: mover 1s infinite  alternate;
  animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}
@keyframes mover {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

thead.table-dark > tr > th 
{
font-weight: 400;
background: rgb(61,58,52);
background: -moz-linear-gradient(0deg, rgba(61,58,52,0.7987570028011204) 0%, rgba(0,0,0,1) 50%, rgba(61,58,52,0.8) 100%);
background: -webkit-linear-gradient(0deg, rgba(61,58,52,0.7987570028011204) 0%, rgba(0,0,0,1) 50%, rgba(61,58,52,0.8) 100%);
background: linear-gradient(0deg, rgba(61,58,52,0.7987570028011204) 0%, rgba(0,0,0,1) 50%, rgba(61,58,52,0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3d3a34",endColorstr="#3d3a34",GradientType=1);
}

.mt-n3{
  margin-top: -0.75rem;
}

.mt-n1{
  margin-top: -0.25rem;
}

.select-multiple{
  background-color: #ffffff !important;
  background-clip: padding-box !important;
  border: 1px solid #ced4da !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  border-radius: 0.375rem !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.text-success-custom{
  color: #14dd4a !important;
}

.page-fixed-scroll-70{
  height: 70vh;
  overflow: auto;
}

.cursor-not-allowed{
  cursor: not-allowed;
}

.div-scrollable{
  scroll-behavior: auto;
  overflow: scroll;
}

.resizable {
  resize: both;
  overflow: scroll;
}

/*
Animated Border
*/

.input:hover,
.input:focus {
  border: 2px solid #01b3ff;
  -webkit-box-shadow: 0px 0px 0px 7px rgba(138, 227, 244, 0.2);
          box-shadow: 0px 0px 0px 7px rgba(97, 214, 246, 0.2);
  background-color: rgb(174, 223, 242);
}

.w-5 {
  width: 5% !important;
}
.w-10 {
  width: 10% !important;
}

/* 
https://web.dev/css-border-animations/ 
https://codepen.io/web-dot-dev/pen/oNqoeXo

https://codepen.io/shshaw/pen/RwJwJJx

https://codepen.io/RitikaAgrawal08/pen/qBYmYdN

https://codepen.io/FlorinCornea/pen/KKpvRYo
*/