@import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono);

:root {
  --nav-bg: #282D3E;
  --nav-height: 58px;
  --nav-btn-hover-bg: #191C26;
  --nav-border-color: hsla(0, 0%, 70%, 0.5);
  --nav-user-dropdown: calc(var(--nav-height) - 15px);
  --nav-padding: .7rem;


  --sidebar-width: 16rem;

  --body-bg: #f1f2f7;
}

a {
  text-decoration: none;
}

.extra-links a:hover {
  background-color: #101622;
}

button:focus:not(:focus-visible) {
  box-shadow: none;
}

.close, #close {
  cursor: pointer;
}
.bg-white {background-color: white }


.btn-primary{
  color:#FFF;
  background:#00adaa;
  border-color: #00adaa;
}
.btn-primary:hover,.btn-primary:focus{
  color:#FFF;
  background:#029e96;
  border-color: #0e8980;
}

.btn-secondary{
  color:#000;
  background:#f8f9fa;
  border-color: #ced4da;
}
.btn-secondary:hover,.btn-secondary:focus{
  color:#000;
  background:#d3d4d5;
  border-color: #c6c7c8;
}
.input:focus{
  outline: none;
  box-shadow: none;
}

/* NAV */
.main-link, .main-link:active, .main-link:hover {
  text-decoration: none;
  color: white;
}
.navbar > div {
  background-color: var(--nav-bg);
  width: 100vw;
}

#logo {
  margin-left: 1.25rem;
  margin-right: 1.55rem;
}

.navbar #logo img {
  margin-top: 0.3em;
  margin-bottom:0.2em;
  height: 3rem;
}
#user-circle{
  height: 3rem;
  color:var(--nav-border-color);
}
.user-icon{
  background:#111621;
  color:#fff;
  padding:0.4em 0.5em;
  border-radius: 50%;
  /* margin-right:10px; */
}

/* remove bootstrap default action */
.navbar .btn:focus {
  outline: none;
  box-shadow: none;
}

.navbar .dropdown-toggle::after {

}
.dropdown-divider {
  border-color: var(--nav-border-color);
}
.custom-dropdown {
  /* border: none; */
  border: 1px solid var(--nav-border-color);
  border-right: none;
  background-color: var(--nav-bg);
  width: -webkit-fill-available;
  top: calc(var(--nav-user-dropdown) + 2px) !important;
  right: 0 !important;
}
.dropdown-user-hide {
  background-color: #101622;
}

.profile-item.dropdown-item:hover {
  background-color: #101622;
  /* color: black !important; */
}


.nav-link:focus { outline: none; }

/* #user-circle:hover {
  background-color: #23272b;
} */

.navbar #user-img:hover {
  opacity: 0.7;
}

#user-circle {
  margin-top:4px;
  padding: 0px 0.5em;
  border-left: 1px var(--nav-border-color) solid;
}

#user-circle a {
  padding: 0.25em;
}

#use-as {
  white-space: nowrap;
  font-size: .9em;
  padding-top: calc(var(--nav-padding));
  padding-bottom: var(--nav-padding);
}

#use-as > div {
  height: 38px;
  /* padding-top: 0.6rem;
  padding-bottom: 0.6rem; */
  padding-left: 0.6rem;
  padding-right: 0.25rem;
}

#use-as #mini-text {
  position: absolute;
  top: -8px;
  left: 9px;
  font-size: 0.65em;
  padding: 0.05rem 0.4rem;
}

#use-as i {
  padding-top: 1px;
  font-size: 22px;
  color: rgba(0, 0, 0, .65);
  opacity: .7;
}

#use-as i:hover {
  color: black;
  cursor: pointer;
}











/* CONTENT BODY */
body {
  background-color: var(--body-bg);
}
#page-content-wrapper {
  height: 100vh;
  width: 100vw;
}
#content-container {
  margin-top: var(--nav-height);
  /* border: 4px solid; */

}

/* 540px	720px	960px	1140px	1320px */
/* <576px	sm
≥576px	md
≥768px	lg
≥992px	xl
≥1200px	xxl
≥1400px
 */

@media (max-width: 992px) {
  #close {
    top: 0 !important;
    right: 0 !important;
    border-radius: 0 0 0 25% !important;
  }
  .modal-dialog {
    padding-top: 0 !important;
  }
  .modal-content:not(.confirm-modal-content) {
    width: 100% !important;
  }
  .custom-iframe-modal {
    height: -webkit-fill-available !important;
  }
}

@media (min-width: 992px) {
  #content-container {
    width: 85%;
  }

  #body-right {
    margin-top: 0 !important;
  }

  /* #calls-block {
    width: 305px;
  } */

  #keypad {
    /* width: 100% !important; */
    margin: 0;
  }
}

/* #body-right {
  margin-top: 1em;
} */

@media (max-width: 576px) {
  .company {
    font-size: 1.4em;
  }

  #modal-width {
    width: 100vw !important;
  }

  #keypad {
    margin-top: 1rem;
    /* width: 100% !important; */
  }

  .user-name {
    display: none !important;
  }

  .default-banner {
    display: none;
  }

  .hide-line-breaks{
    display:none;
  }

  .cancel-container{
    display:flex;
    justify-content:end;
  }

  #search-bar{
    width:100% !important;
  }

  .play-button{
    font-size:40px !important;
    top:30% !important;
  }

  .web-address-button{
    margin-top:15px;
  }

  .video-icon-link{
    height:97.77px !important;
  }

  .pseudo-button-row{
    height:58px;
  }

  .supplier-logo-container{
    margin-bottom:10px;
  }
}

@media (max-width: 768px) {
  .extra-links, .user-icon, .user-name {
    display: none !important;
  }
  .menu-icon {
    display: block !important;
  }
  .dropdown-user-hide {
    display: block !important;
  }
  .dropdown-user-item::before {
    content: "- ";
  }
  .custom-dropdown {
    top: calc(var(--nav-user-dropdown) - 2px) !important;
    right: -0.5rem !important;
  }
  #user-circle {
    margin: 0 !important;
    padding: 0 .5rem 0 .5rem !important;
  }
  .menu-icon {
    font-size: 1.5em;
  }
  .dropdown-extra-links {
    display: block !important;
  }
  .nav-link.dropdown-toggle.text-light {
    padding-bottom: 0 !important;
  }
  .nav-link.dropdown-toggle.text-light::after {
    content: none;
  }

  .web-address-button{
    margin-top:15px;
  }
}

.supplier-logo-container{
  margin-bottom:10px;
}



/* MODAL */

.modal-btn-primary {
  background-color: hsl(179deg 94% 35%);
  color: white;
}

.modal-btn-primary:hover {
  background-color: hsl(179deg 92% 30%);
  color: white;
}

/* SUPPLIERS */
.sup-contacts {
  font-size: 0.90em;
}
.sup-icon i {
  border: 3px solid black;
}

/* ACTIVE CALLS */

.company .company-opt {
  font-size: 0.55em;
}

.company .company-number {
  font-size: 0.85em;
}

#calls-block {
  margin-top: 10px;
}
#calls-body {
  /*height: 170px;*/
  /* overflow-y: scroll; */
}




/* PHONE */

.left-column,
.center-column,
.right-column {
  width: 100%;
  min-width: 16em;
  margin: 0 1.5em;
  text-align: center;
}

/* Left Column */
#client-name {
  text-align: left;
  margin-bottom: 1em;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-size: 1.25em;
  color: #777776;
}

#phone-number{
  width:30%;
}

#phone-number::placeholder {
  font-style: italic;
}

select:not(.ui-datepicker-month):not(.ui-datepicker-year):not(.passport-page) {
  /*width: 300px;*/
  /*height: 60px;*/
  margin-bottom: 10px;
}

/* Center Column */
input {
  /*font-family: "Helvetica Light", Helvetica, sans-serif;*/
  font-size: 1em;
  width: 100%;
  height: 2.5em;
  padding: 0;
  display: block;
  /* margin: 10px 0; */
}

.hasDatepicker {
  font-style: normal;
  background: none !important;
}

div#volume-indicators {
  padding: 10px;
  margin-top: 20px;
  width: 500px;
  text-align: left;
}

div#volume-indicators > div {
  display: block;
  height: 20px;
  width: 0;
}

/* Right Column */
.right-column {
  padding: 0 1.5em;
}

#log {
  text-align: left;
  border: 1px solid #686865;
  padding: 10px;
  height: 9.5em;
  overflow-y: scroll;
}

.log-entry {
  color: #686865;
  font-family: "Share Tech Mono", "Courier New", Courier, fixed-width;
  font-size: 1.25em;
  line-height: 1.25em;
  margin-left: 1em;
  text-indent: -1.25em;
  width: 90%;
}

/* Other Styles */
.hide {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

button:disabled {
  cursor: not-allowed;
}

/* keypad */
#keypad {
  /* width: 300px; */
  width: 100%;
  height: 500px;
  padding-left: .75rem;
  padding-right: .75rem;
}

#keypad.active * {
  color: #878786 !important;
}

#keypad.active #call-connecting i, #call-connecting i {
  color: #019640 !important;
}




#keypad .row .col-12{
  background: #101622 !important;
}

#keypad .row:nth-child(1) .col-12:nth-of-type(1) {
  font-size: 1.75em;
}

#keypad .row:nth-child(1) .col-12:nth-of-type(2) {
  padding-bottom: 10px;
}

#keypad .row:nth-child(6) .col-4 {
  height: 80px;
}

#keypad .row .col-12 input{
  background: #101622 !important;
  border: none;
  color: white;
  font-style: normal;
  margin: none;
}

#keypad .row .col-12 .opt{
  /* font-size: 0.8em; */
  text-align: left;
  color: white;
}

#keypad .row .col-12 input:focus {
  outline: none;
}

#keypad .col-4:hover button {
  background-color: #101622 !important;
}

#keypad .col-4:active button {
  /* background-color: black !important; */
}

#keypad .col-4 {
  margin: 0;
  padding: 0;
  border: 2px solid #101622;
  /* border-right: 2px solid #101622; */
  border-bottom: none;
  border-left: none;
  font-size: 2em;
}

#keypad .row.flex-grow-1 .col-4:nth-of-type(3) {
  border-right: none;
}

#keypad .row:nth-of-type(6) .col-4 {
  border-bottom: none;
}

#keypad .row:nth-of-type(6) .col-4:nth-child(1) {
  font-size: 1em;
}

#keypad button {
  width: 100%;
  height: 100%;
  color: white;
  border: none;
  background-color: #1d2b38;
}

#button-hangup-outgoing {
  color: #e30713 !important;
}

#button-call {
  color: #019640 !important;
}

#button-transfer {
  /* color: orange !important; */
  font-size: 2em;
}

#button-call-minder {
  color: #019640 !important;
}

#button-unmute {
  background-color: red !important; /*var(--nav-bg)*/
  color: white;
  border: none !important;

}

#unmute-container {
  /* width: -moz-fit-content !important;
  width: fit-content !important;
  height: -moz-fit-content !important;
  height: fit-content !important; */
  width: 40px;
  height: 40px;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.25rem;
}

#del {
  /* color: #fff !important; */
  font-size: .8em;
}

#num-plus, #num-hash {
  color: #878786 !important;
}

#num-plus  {
  font-weight: 100;
  font-size: 0.75em;
}

#num-hash {
  font-weight: 200;
  /* font-size: 1.5em; */
}

/* #matchHeight .col-4 {
  height: 77px;
} */

.department-button{
  cursor:pointer;
}
#search-box {
  font-size: 1.4em;
  border-radius: 25px;
  border-top-right-radius:0px;
  border-bottom-right-radius:0px;
  padding-left:20px;
}
#search-box::-webkit-search-cancel-button{
    /*display:none;
    /* z-index: -1000;
    border-color: red !important; */
}


#search-box::placeholder {
   color: #ced4da !important;
   font-size: 1.2rem;
}

#search-results{
  max-height:200px;
  overflow-y:scroll;
  /* transform: translate3d(0px, 50px, 0px) !important; */
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

.profile-item{
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.error {
  color: red;
}

.table-buttons {
  font-size: 0.7em;

  width: fit-content;
}

.dataTables_filter {
    float: left;
}

footer {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #101622;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  border-radius: 50em;
  background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}

input[type="search"]:focus::-webkit-search-cancel-button {
  opacity: 0;
  pointer-events: all;
}

input[type="search"]:focus{
  box-shadow:none;
}


.cross-container{
  display:none;
  border:none;
  position:absolute;
  right:70px;
  top:10px;
  background-color:white;
  font-size:25px;
  z-index:10;
  cursor:pointer;
}

.search-glass-container{
  width:55px;
  background-color:white;
  border-top-right-radius:25px;
  border-bottom-right-radius:25px;
  display:flex;
  align-items:center;
  padding-right:30px;
}

.search-glass-container i {
  background-color:white;
  border:none;
  font-size:20px;
}

.link-button {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.video-icon{
  border:1px Solid #efefef;
  margin-bottom:5px;

}

.video-icon-link{
  position:relative;
  background-color:#dedede;
  /*height:157px;*/
}

.video-container{
  margin-top:15px;
  margin-bottom:10px;
}

.button-row{
  margin-bottom:15px;
  padding:0 10px 10px 10px;
}

.info-row{
  margin-bottom:5px;
  padding:0 10px 0 10px;
}

.download-link{
  color:#029e96;
  font-size:14px;
}

.download-link:hover{
  text-decoration:underline;
  color:#029e96;
}

.share-icon-container{
  padding:0 10px 0 0;
}

.share-icon{
  font-size:0.8em;
  padding:6px;
  background-color: #dedede;
  border-radius:15px;
  cursor:pointer;
}

.share-item{
  background-color:#fff;
  cursor:pointer;
  color:#029e96;
  padding: .45rem 1rem;
  padding-bottom: .10em;
  padding-top: .10em;
}

.share-item:hover{
  background-color:#fff;
  color:#029e96;
  text-decoration:underline;
}

.share-codes{
  left: -126px !important;
  background-color:#fff !important;
  padding-top:.35rem;
  padding-bottom:.35rem;
  border-radius:0px;
}

.share-codes:focus{
  background-color:#fff !important;
}

.share-codes:hover{
  background-color:#fff !important;
}


.destination-header{
  /*padding-right:25px;*/
}

.destination-header{
  background-color:#fff !important;
  color:#000 !important;
}

.accordion-button:not(.collapsed)::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.video-row-anchor{
  display: block;
  position: relative;
  top: -70px;
  visibility:hidden;
}

.play-button{
  color:white;
  cursor:pointer;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size:70px;
}

.notice-row{
  background-color:#282d3e;
  padding-top:15px;
  padding-bottom:15px;
  padding-left:15px;
  padding-right:15px;
  text-align:center;

  color:white;
  border:none;
}

.notice-row .tc-link{
  color:white;
  text-decoration: underline;
}

.copy-text-button{
  margin-left:10px;
  color:#029e96;
}

.copy-text-button:hover{
  text-decoration:underline;
  cursor:pointer;
}

.agreement-button:disabled, .web-address-button:disabled{
  background-color:#029e96;
  border-color:#029e96;
}

.passport-row{
  padding-left:20px;
  padding-right:20px;
  padding-bottom:20px;
  padding-top:20px;
}

.reset-row{
  padding-left:20px;
  padding-right:20px;
  padding-top:0px;
  padding-bottom:20px;
}

.passport-row p{
  margin-bottom:0px;
}

.country-fco-link:hover{
  text-decoration:underline;
}

.passport-show-fco:hover{
  text-decoration:underline;
  cursor:pointer;
}

#reset-button:hover{
  cursor:pointer;
}

#info-html a{
  text-decoration:underline;
  color:black;
}

.dataTables_filter label {
  margin-top:7px;
  font-size:1.2em;
}
.dataTables_filter label input{
  margin-top:-7px;
}

.video-title{
  font-size:1.5rem;
}

.videohub-search{
  padding-left:0px;
  padding-right:0px;
}

#search-box-video{
  font-size: 1.2em;
  border-radius: 0px;
  border-top-right-radius:0px;
  border-bottom-right-radius:0px;
  padding-left:20px;
}

.search-glass-container-video{
  width:55px;
  background-color:white;
  border-top-right-radius:0px;
  border-bottom-right-radius:0px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.cross-container-video{
  display:none;
  border:none;
  position:absolute;
  right:70px;
  top:-2px;

  font-size:30px;
  z-index:10;
  cursor:pointer;
}

.search-glass-container-video i {
  background-color:white;
  border:none;
  font-size:20px;
}

.cross-container-video i {
  background-color:white;
  border:none;
  font-size:20px;
}

.extra-links .current{
  /* border-bottom:4px Solid red; */
  text-decoration: underline;
  text-underline-offset: 0.6em;
  text-decoration-thickness: 3px;
  text-decoration-color: #029e96;
}

#back-to-top-button{
  display: block; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 35px; /* Place the button at the bottom of the page */
  right: 44px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #029e96; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 7px 15px 7px 15px; /* Some padding */
  font-size: 30px; /* Increase font size */
}

#back-to-top-button:hover {
  color:#282d3e;
}

.search-reset-button:hover{
  cursor:pointer;
  text-decoration:underline;
}

#fco-modal p{
  margin-bottom:0px;
}

.invalid-popover-container .popover-header{
  background-color:rgb(224, 79, 93);
  color:white;
}

.invalid-popover-container .popover-body{
  color:rgb(224, 79, 93);
}

.valid-popover-container .popover-header{
  background-color:rgb(47, 146, 100);
  color:white;
}

.valid-popover-container .popover-body{
  color:rgb(47, 146, 100);
}

.btn-check:checked+.btn-primary{
  background-color:var(--nav-bg);
}

.btn-outline-secondary:hover {
	background-color:#46cad7 !important;
	border:1px Solid #46cad7;
	color:#FFF;
}

.btn-outline-secondary:checked {
	background-color:#46cad7 !important;
	border:1px Solid #46cad7;
	color:#FFF;
}

.btn-check:active+.btn-outline-secondary,
.btn-check:checked+.btn-outline-secondary,
.btn-outline-secondary.active,
.btn-outline-secondary.dropdown-toggle.show,
.btn-outline-secondary:active {
	background-color:#46cad7;
	border:1px Solid #46cad7;
	color:#FFF;
	font-weight:bold;
}

input::-webkit-calendar-picker-indicator {
  display: none;
}

.tools-icon{
  text-align:center;
}

.tools-icon-title{
  font-size:20px;
  width:100%;
}