/*================================================================================
	Item Name: Robust - Responsive Admin Theme
	Version: 1.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/*/ incvludes */
@import url("mail-inbox.css");
@import url("grid.css");
@import url("datatables_styling.css");
@import url("fonts.css");


h1,
h2,
h3,
.h1,
.h2,
.h3 {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
}

h4,
h5,
h6,
.h4,
.h5,
.h6 {
  font-family: "Roboto Slab", sans-serif;
  font-weight: 700;
  
}
.dashboard-title{
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  color: #55595c;
  font-weight: normal;
  font-style: normal;
}

.dashboard-card-title{
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  color: #55595c;
}

.dashboard-subtitle{
  font-family: "Montserrat", sans-serif;
  font-weight: normal;
  color: #55595c;
}

html body a {
    color: #5e4199;
    font-family: 'Roboto', sans-serif;
}
/*
body {
  background: #4568DC;
  background: -webkit-linear-gradient(to right, #4568DC, #B06AB3);
  background: linear-gradient(to right, #4568DC, #B06AB3);
  min-height: 100vh;
}

*/
/*Cards*/

.btn-outline-primary{
  color: #5e4199;
}

.header-underline{
    font-family: "Montserrat", sans-serif;
    text-decoration: underline;
    text-underline-offset: 10px !important;
    text-decoration-thickness: 5px;  

}
.header-underline-green{
    text-decoration-color: #1E8A98;
}

.header-underline-orange {
    text-decoration-color: #F65B4D;
}
.header-underline-purple{
  text-decoration-color: #5e4199;
}
.card, .card-header:first-child{
    border-radius: 6px;
}

.page-title {
  color: #5e4199;
}
.card, .card-header:first-child{
  border-radius: 6px;
}
.page-title {
  color: #5e4199;
}
.sub-title {
  color: #5e4199;
  font-weight: 600;
}
/*Menu styling */
.navigation {
  font-size: 18px;
}
.navbar-header {
  background-color: #4e3a72 !important;
}
.main-menu.menu-dark,
.main-menu.menu-dark .navigation,
.navbar-semi-dark .navbar-header,
.main-menu.menu-dark .navigation > li.open > a {
  color: #ffffff;
  background: #5e4199;
}
.main-menu.menu-dark .navigation > li.active > a,
.main-menu.menu-dark .navigation > li.active > a,
.main-menu.menu-dark .navigation > li .active > a {
  color: #5e4199 !important;
  background: #ffffff;
}
.main-menu.menu-dark ul.menu-popout li a {
  color: #ffffff !important;
  background: #162029;
}
.main-menu.menu-dark .navigation > li ul li {
  color: #5e4199;
  background: transparent;
}
/*.menu-expanded .main-menu.menu-dark .navigation > li{
    margin-left: 15px;
}8/
/* Timezone menu dropdown styling */
.timezone-dropdown-menu {
  padding: 15px;
}
.list-timezone-menu {
  color: #616161;
}
.timezone-list-item {
  margin-bottom: 10px;
}
.user-timezone-item {
  margin-top: 15px;
}
/* Full size modal */

/* General Bootstrap overrides */
.border {
  border: 1px solid #e3ebf3 !important;
}
#accordionWrap2 a {
  color: #373a3c;
}
.tooltip-right {
  float: right;
  position: relative;
  top: -25px;
  left: 25px;
}
.vertical-mmenu .main-menu .mm-divider {
  padding: 8px 20px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.8) !important;
}

input:required:focus:invalid,
input:focus:invalid {
  border-color: red;
  -moz-box-shadow: none;
}
input:required:valid {
  border-color: green;
  background-repeat: no-repeat;
}
/* Tooltips */
.input-group-unstyled .input-group-addon {
  border-radius: 4px;
  border: 0px;
  background-color: transparent;
}
/* Form elements*/
form label {
  font-weight: bold;
}
form .form-section {
  border-bottom: 1px solid #1d2b3621;
}

/* Avatars*/
.avatar-80 {
  width: 80px;
}
.avatar-80 i {
  right: 0px !important;
  bottom: 0px !important;
  width: 20px !important;
  height: 20px !important;
}
/* Dropdown menu */
.dropdown-menu {
  display: none !important;
}
.dropdown-menu.show {
  display: block !important;
}
[data-toggle="collapse"] .fa:before {
  content: "\f139";
}

[data-toggle="collapse"].collapsed .fa:before {
  content: "\f13a";
}
.dropdown-menu {
  margin: 0;
  padding: 0;
}
.dropdown-menu .dropdown-submenu > a:after,
.dropdown-menu .dropdown-submenu > button:after {
  right: 0;
  float: inherit;
}
.dropdown-menu .dropdown-submenu > .dropdown-menu {
  margin-top: 0;
  margin-left: 0;
}

/* Main menu */
.main-menu.menu-dark .navigation > li > a {
}
/* Top bar */
.top-bar-menu > li > a :not(span) {
  font-size: 20px;
  color: #5e4199;
}
.top-bar-menu .fa-angle-down {
  font-size: 18px;
}
.top-bar-menu .dropdown-toggle::after {
  font-size: 18px;
  font-weight: 900;
}
.top-bar-menu .user-name {
  font-size: 1.4rem !important;
}
.dropdown-user-link > .avatar {
  width: 30px;
}
.dropdown-user-link > .avatar {
  width: 30px;
}
/* Buttons */
.btn-primary {
  color: #fff;
  border-color: #80deea;
  background-color: #80deea;
}
.btn-secondary {
  color: #fff;
  border-color: #5e4199;
  background-color: #5e4199;
}
.btn-light {
  color: #2a2e30;
  border-color: #f7f7f9;
  background-color: #f7f7f9;
}

/* Logo */
.brand-logo-right {
  position: relative;
  height: 50px;
  /*height: 50px;*/
  width: auto;
}
.brand-logo {
  position: relative;
  height: 50px;
  /*height: 50px;*/
  width: auto !important;
}
body.vertical-layout.vertical-menu.menu-collapsed .navbar .navbar-header {
  width: 75px !important;
  height: 75px !important;
}
body.vertical-layout.vertical-menu.menu-collapsed .main-menu {
  width: 75px !important;
}
body.vertical-layout.vertical-menu.menu-expanded .navbar .navbar-header {
  height: 75px !important;
}
body.vertical-layout.vertical-menu.menu-collapsed
  .main-menu
  .navigation
  > li
  > a {
  padding: 10px 0 10px 25px !important;
}
body.vertical-layout.vertical-menu.menu-collapsed .navbar .navbar-brand {
  padding: 10px 0 !important;
}
.header-navbar .navbar-header .navbar-brand {
  padding: 10px 0 !important;
}
.main-menu.menu-fixed {
  top: 5.3rem;
}
.header-navbar .navbar-header {
  height: 5.5rem;
}
html body.fixed-navbar {
  padding-top: 5.5rem;
}
body.vertical-layout.vertical-menu.menu-collapsed
  .main-menu
  .main-menu-content
  > span.menu-title,
body.vertical-layout.vertical-menu.menu-collapsed
  .main-menu
  .main-menu-content
  a.menu-title {
  padding: 18px 20px !important;
  height: 53px;
  left: 75px !important;
}
body.vertical-layout.vertical-menu.menu-collapsed
  .main-menu
  .main-menu-content
  > ul.menu-content {
  left: 75px !important;
}
body.vertical-layout.vertical-menu.menu-expanded
  .navigation-main
  li
  a:not(.menu-content li a):not(.hover) {
  margin-left: 10px;
}
body.vertical-layout.vertical-menu.menu-expanded
  .navigation-main
  li:not(.active)
  a:hover {
  background-color: transparent;
}
/* Top Bar*/
.header-navbar .navbar-container ul.nav li a.dropdown-user-link {
  padding: 1.6rem 0.6rem;
}
.header-navbar .navbar-container ul.nav li a.nav-link-label {
  padding: 1.92rem 1rem;
}
.top-bar-menu .badge-up {
  position: absolute;
  top: 15px;
  right: 8px;
}
.top-bar-menu .table-info {
  background-color: #f1f1f11f;
}
.top-bar-menu .notification-left-icon {
  color: #dcd9d9;
}
.top-bar-menu .dropdown-menu {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
.dropdown .dropdown-menu .dropdown-header {
  text-transform: inherit;
}
.header-navbar .navbar-container .dropdown-menu-media .dropdown-menu-footer a {
  padding: 0.7rem;
}
.support-menu-item .btn {
  background-color: #378a98;
}
.support-menu-item-button:hover {
  background-color: #378a98 !important;
}

body.vertical-layout.vertical-menu.menu-collapsed .support-menu-item {
  display: none;
}
body.vertical-layout.vertical-menu.menu-expanded .support-menu-item {
  padding-left: 0px !important;
  padding-right: 10px !important;
}
.vertical-overlay-menu .support-menu-item {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
/*
.header-navbar .navbar-header{
    height: 100%;
}
.main-menu.menu-fixed {
    top: 6rem;
}
html body.fixed-navbar {
    padding-top: 6.5rem;
}
.header-navbar .navbar-container {
    height: 6rem;
}
.header-navbar .navbar-header {
    height: 6rem;
}
body.vertical-layout.vertical-menu.menu-collapsed .main-menu {
    width: 75px !important;
}
body.vertical-layout.vertical-menu.menu-collapsed .navbar .navbar-header {
    width: 75px !important;
}
.main-menu ul.navigation-main{
    padding-top: 15px;
}
.header-navbar .navbar-collapse{
    min-height: 6rem !important;
}
body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navigation > li > a{
    padding: 10px 0 10px 25px !important;
}
body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navigation > li > ul{
    margin-left: 10px !important;
}
body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navigation > li > span{
    margin-left: 10px !important;
}
*/
/*Dashboard */
.dashboard-name {
  color: #fa724f;
}
.card-bg-coral {
  background-color: #fdd4c9;
  color: #fa704d;
}
.card-bg-purple {
  background-color: #cfc4df;
  color: #613f96;
}
.card-bg-blue {
  background-color: #a5d0d5;
  color: #1e8a98;
}

.card-bg-gradient-purple-and-blue {
  background: linear-gradient(
    180deg,
    #5e4199 0%,
    rgba(30, 138, 152, 0.79) 100%
  );
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8.2793px;
}

/* Colors */
.bg-dark-black {
  background-color: #000000;
  color: #fff;
}
.bg-black {
  background-color: #2a242d;
  color: #fff;
}
.bg-light-black {
  background-color: #55595c;
  color: #fff;
}
.bg-gray {
  background-color: #9f9fa1;
  color: #fff;
}
.bg-gray-button {
  background-color: #9f9fa1;
  color: #000000;
}
.bg-gray-button:hover {
  color: #000000;
}
.bg-purple {
  background-color: #cfc4df;
  color: #fff;
}
.bg-blue {
  background-color: #a5d0d5;
  color: #fff;
}
.bg-dark-coral {
  background-color:  #F65B4D;
  color: #fff !important;
}
.bg-dark-coral-button {
  background-color: #F65B4D;
  color: #fff;
}
.bg-dark-coral-button:hover {
  color: #fff;
}
.bg-coral {
  background-color: #fdd4c7;
  color: #fff;
}
.bg-dark-purple {
  background-color: #4e3a73;
  color: #fff;
}
.bg-purple {
  background-color: #5e4199;
  color: #fff;
}
.bg-light-purple {
  background-color: #cec5e0;
  color: #fff;
}
.bg-dark-blue {
  background-color: #1e8a98;
  color: #fff;
}
.bg-light-blue {
  background-color: #a5d0d5;
  color: #fff;
}
.dark-purple{
    color: #5e4199;
}

.bg-turquoise {
  background-color: #378a98;
  color: #fff;
}

.dark-black{
color:#000000;

}
.bg-dark-coral {
  background-color: #F65B4D;
  color: #fff;
}
.bg-dark-coral-button {
  background-color: #F65B4D;
  color: #fff;
}
.bg-dark-coral-button:hover {
  color: #fff;
}
.bg-coral {
  background-color: #fdd4c7;
  color: #fff;
}
.bg-dark-purple {
  background-color: #4e3a73;
  color: #fff;
}
.bg-purple {
  background-color: #5e4199!important;
  color: #fff;
}
.bg-light-purple {
  background-color: #cec5e0;
  color: #fff;
}
.bg-light-purple-grey {
  background-color: #cec6e0;
  color: #333;
}
.bg-dark-blue {
  background-color: #1e8a98;
  color: #fff;
}
.bg-light-blue {
  background-color: #a5d0d5;
  color: #fff;
}
.bg-purple-primary {
  background-color: #5e4199;
  color: #fff !important;
}
.light-purple{
color:#CEC5E0;
}
.dark-blue{
color:#1E8A98;
}
.light-blue{
color:#A5D0D5;
}
.dark-purple{
color:#5e4199;
}

/* Hover buttons for custom colors. We do not want link hover color applied, but rather keep white as default */
.btn >
.bg-dark-black:hover,
.bg-black:hover,
.bg-light-black:hover,
.bg-gray:hover,
.bg-purple:hover,
.bg-blue:hover,
.bg-dark-coral:hover,
.bg-coral:hover,
.bg-dark-purple:hover,
.bg-purple:hover,
.bg-light-purple:hover,
.bg-dark-blue:hover,
.bg-light-blue:hover{
    color: #ffffff;
}

.bg-light-purple-grey:hover {
  color: #333;
}


.width-px-80 {
  width: 80px;
}

.width-px-140 {
  width: 140px;
}

.page-item.active .page-link,
.page-item.active .page-link:focus,
.page-item.active .page-link:hover {
  background-color: #378a97 !important;
  border-color: #378a97 !important;
}

body.vertical-layout.vertical-menu.menu-collapsed .content,
body.vertical-layout.vertical-menu.menu-collapsed .footer {
  margin-left: 75px !important;
}

.social-media-icon {
  font-size: 42px;
}

.icon-question:before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900;
  content: "\f059";
}

.dark-grey {
  color: #55595c;
}

.light-grey {
  color: #9f9fa7;
}

/* color invoice lines*/
.hrInvoicepurpe {
  height: 15px;
  margin-left: 0%;
  margin-right: 0%;
  background-color: #5e4199;
}

.hrInvoiceturquoise {
  height: 8px;
  margin-left: 0%;
  margin-right: 0%;
  background-color: #378a98;
}

.hrInvoiceWhite {

    height: 2px;
    margin-left: 0%;
    margin-right: 0%;
    background-color: #fff;
}

/* Inputs from Sara's designs */

/* Orange Dropdown Menu Start */
.orange-dropdown-menu {
  background-color: #F65B4D;
  color: white;
}

.orange-dropdown-menu.dropdown-menu {
  border: 1px solid #F65B4D;
  background-color: white;
}

.orange-dropdown-menu.dropdown-menu a:hover {
  background-color: #f97143;
  color: white;
}


/* popover */
.popover{
    z-index:  99999999999999999999999999 !important;
}

/* striped form */

form.striped-labels .form-group:nth-child(even) {
    background-color: #f3f1f8;
}
form.striped-labels .form-group:nth-child(even) > div{
    background-color: #f3f1f8;
}
form.striped-labels .form-group .label-control,form.form-bordered .form-group > div{
    padding: 0.7rem;
}
form.form-bordered .form-group > label{
margin-bottom: 0px;
font-weight: normal;
}
@media (min-width: 576px){
form.form-horizontal .form-group .label-control {
    text-align: left;
}
}
form.striped-labels pre{
  background-color: #fdd4c7;
  color: #5e4199;
}

/* Inputs from Sara's designs */
/* Purple Dropdown Start */

/* .purple-select-div:after {
  content: "\f0dd";
  font: normal normal normal 20px/0.1 FontAwesome;
  color: #5e4199;
  right: 15px;
  top: 0px;
  height: 40px;
  padding: 14px 11px 0px 11px;
  border: 1px solid #5e4199;
  position: absolute;
  pointer-events: none;
  background-color: #cec6e0;
  border-radius: 0px 5px 5px 0px;
}

.purple-select-div select::-ms-expand {
  display: none;
}

.purple-select-div select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  display: block;
  width: 100%;
  height: 40px;
  float: right;
  margin: 0px;
  padding: 0px 14px;
  line-height: 1.75;
  color: #333;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #5e4199;
  -ms-word-break: normal;
  word-break: normal;
  border-radius: 5px;
} */

/* Purple Dropdown End */

/* Orange Dropdown Menu Start */
.orange-dropdown-menu {
  background-color: #F65B4D;
  color: white;
}

.orange-dropdown-menu.dropdown-menu {
  border: 1px solid #F65B4D;
  background-color: white;
}

.orange-dropdown-menu.dropdown-menu a:hover {
  background-color: #F65B4D;
  color: white;
}

/* Orange Dropdown Menu End */


/* progress bar */
.bar-wrap {
  position: relative;
}

.progress-marker {
  width: 2px;
  height: 10px;
  position: absolute;
  background: black;
  bottom: -5px;
}

.time-axis {
  display: block;
  float: left;
  width: 100%;
  /*margin: 0px 0 10px 0;*/
}
.time-spot {
  display: block;
  float: left;
  width: 25%;
}
.time-spot-end {
  display: block;
  float: left;
  width: 12.5%;
}



@media only screen and (max-width: 1200px) {
  .VerticalLine {
      display: none !important;
  }

  @media only screen and (max-width: 800px) {
      .ColMdPullLeft {
          float: left !important;
      }
  }

}

.SubTittle {
  color: #5e4199 !important;
}


.CardTitleGreen {
  text-decoration: underline;
  text-underline-offset: 10px !important;
  text-decoration-thickness: 5px;
  text-decoration-color: #1E8A98;
  margin-left: 15px;
}

.CardTitleOrange {
  text-decoration: underline;
  text-underline-offset: 10px !important;
  text-decoration-thickness: 5px;
  text-decoration-color: #F97146;
  margin-left: 15px;
}

.HrLine {
  background: rgba(0, 0, 0, 0.16) !important;
  height: 1px;
}

.LabelGroupOld {
  font-weight: bold !important;
  

}

.DropdownLabel {
  color: white !important;
}
.ShadowBottom {
  box-shadow: 0 5px 3px -3px #919AA1;
}
@media only screen and (max-width: 575px) {
  .MarginCard {
  margin-left: 0.4px !important; margin-right: 0.4px !important; 
}
}

.dashboard-color-card {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-size: 26px;
  line-height: 32px;
  color: #55595C;
  

}

/* horizontal form */

/*erick*/
.dropdown-checkbox button.dropdown-toggle {
  background-color: white;
  border: 1px solid #5e4199;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-checkbox ul.dropdown-menu {
  padding: 0 10px;
}

/* Customize the label (the container) */
.checkbox-container {
  display: block;
  position: relative;
  margin: 0;
  padding-left: 30px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox  */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border: 3px solid #5e4199;
  border-radius: 4px;
}

/* When the checkbox is checked, add a blue background  */
.checkbox-container input:checked ~ .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  padding: 2px;
  background: #1e8a98 content-box;
  border: 3px solid #5e4199;
  border-radius: 4px;
}

/* Create the checkmark/indicator (hidden when not checked)  */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.orange-dropdown-menu .selected-item {
  color: white;
  background-color: #F65B4D;
}

form input[type=text], form input[type=text]:focus {
  color: #333;
}

form input.form-control,
form select.custom-select,
form select.form-control,
form textarea.form-control {
  font-family: 'Roboto', sans-serif;
  color: #333;
  font-size: 1rem;
  outline: none;
  border: 1px solid #5e4199;
}

input.form-control:focus,
select.custom-select:focus,
select.form-control:focus,
textarea.form-control:focus {
  border: 1px solid #5e4199;
}

.menu-expanded .main-menu {
  z-index: 99 !important;
}

.menu-collapsed .main-menu {
  z-index: 99999 !important;
}

.turquoise-active:active {
  background-color: #378a98;
}

.mt-px-2 {
  margin-top: 2px !important;
}

.table th, .table td {
  vertical-align: middle !important;
}

/*jeffry*/
.letterstyleInvoice
{
    font-style: normal;
    font-weight: normal;
    font-family: "Roboto";
}


.paddingtable
{
    padding-top: 40px;
}

.BalanceDue

{
    background-color: #5e4199;
    color: white;
  
 
}

.colorlabel
{
    color: #5e4199;
}
.colorlabelInvoice
{
    color: #2A2A2D;
}

.margintable
{
    padding: 2px;
}

/*joe*/
.dashboard-badges .card-body{
	padding: 2.7rem;
}

/* LOGin */
.login-form .form-group{
	margin-bottom: 0.5rem !important;
}
@media screen and (min-width: 992px) {
	.login-background-image{
		background-image: url('/images/login/vault-image4.png');
		background-repeat:  no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		background-position: 50% 50%;
		height:auto;
		border-top-left-radius: 27px !important;
		border-bottom-left-radius: 27px !important;
	}
}
.login-header-title{
	font-family: "Montserrat", sans-serif;
	font-style: normal;
	font-weight: bold;
	color: #5e4199;
	font-size: 30px;
}
.login-header-text{
	font-family: "Roboto Slab", sans-serif;
	color: #55595C;
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
}
.login-header-main{
	font-family: "Montserrat", sans-serif;
	font-style: normal;
	font-weight: normal;
	color: #5e4199;
	font-size: 30px;
}
.login-header-submain{
	font-family: "Montserrat", sans-serif;
	font-style: normal;
	font-weight: bold;
	line-height: 37px;
	color: #5e4199;
	font-size: 30px;
}
.login-header-text-gap{
	margin-bottom: 0.5rem;
}
.login-rounded{
	border-radius:27px !important;
}
.login-image-rounded{
	border-top-left-radius: 27px !important;
	border-bottom-left-radius: 27px !important;
}
.login-body-bg{
	background: linear-gradient(
		180deg, 
		#5e4199 0%, 
		#2b7b98 80%, 
		#1e8a98 100%
	);


}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #9f9Fa7 !important;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #9f9Fa7 !important;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #9f9Fa7 !important;
}
:-moz-placeholder { /* Firefox 18- */
  color: #9f9Fa7 !important;
}

.has-icon-left, .has-icon-right{
	color: #9f9Fa7;
}
.form-control-position, .form-control-position-right{
	line-height: 2.8rem;
}
.has-icon-left .form-control{
	padding-left: calc(2.0rem + 2px);
}

.has-icon-right .form-control {
    padding-right: -webkit-calc(2.75rem + 2px);
    padding-right: -moz-calc(2.75rem + 2px);
    padding-right: calc(2.75rem + 2px);
}

.form-control-position-right {
  position: absolute;
  top: 3px;
  right: 10px;
  bottom: 0;
}
.show-password-icon{
	cursor: pointer;
}
.dtr-control .btn{
	color: #55595c;
}



.modal {
	z-index: 99999 !important;
}


/* Inputs Text purple border */
.purple-text-border, .modal input, .modal textarea, .modal select {
  border-color: #5e4199;
  border-radius: 0.21rem !important;
}
/*fix for select placehodlers*/
select[value=""], select:not([value]){
    color: gray;
}

/* sub headings in menu */
.main-menu.menu-dark .navigation{
	font-family: 'Roboto', sans-serif;
}
.main-menu.menu-dark .navigation .navigation-header{
	padding: 8px 20px 8px 50px;
	font-family: 'Roboto', sans-serif;
}
.main-menu.menu-dark .navigation .navigation-header span{
	font-weight: 700;
	font-family: "Montserrat", sans-serif;
    text-decoration: underline;
    text-underline-offset: 5px !important;
    text-decoration-thickness: 1px;  
    text-decoration-color: #1E8A98;
}

ul.menu-popout{
	font-family: 'Roboto', sans-serif;
}
ul.menu-popout .navigation-header{
	
	font-family: 'Roboto', sans-serif;
}
ul.menu-popout .navigation-header span{
	display: block;
    padding: 8px 20px 8px 20px;
	font-weight: 700;
	font-family: "Montserrat", sans-serif;
    text-decoration: underline;
    text-underline-offset: 5px !important;
    text-decoration-thickness: 1px;  
    text-decoration-color: #1E8A98;
    background: #162029;
}
/*josue*/

/* invoices and cards*/ 
@media only screen and (min-width: 1200px) {
  .VerticalLine {
      border-left: 2px solid #5E4199;
      height: 200px;
  }
 


}

.BtnUpdateFont{
  font-family: "Roboto" , sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25;
  display: inline-block;
  padding-left: 20px !important;
  padding-right: 20px !important;
  
}
.BtnAddItem{
margin-right:8px !important;
}

.NowRap{
white-space: nowrap  !important;

}

/* signup */

  .SubmitButtom {
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      margin-top: 2%;
      text-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
      font-family: Open Sans;
      font-weight: Bold;
      font-size: 30px;
      opacity: 1;
      float: right !important;
      margin-bottom: 2%;
  }

  .circleTwitter {
      background: #666666;
      color: #B4E5FB;
      border-radius: 50%;
      font-size: 2em;
      margin-top: 2%;
      text-align: center;
      padding: 0.1em 0.1em;
      text-decoration: none;



  }

  .circleFacebook {
      background: #666666;
      color: #B4E5FB;
      border-radius: 50%;
      font-size: 2em;
      margin-top: 2%;
      text-align: center;
      padding: 0.1em 0.3em;
      text-decoration: none;
  }

  .linkIcon {

      text-decoration: none;
      color: black !important;
  }

  a:hover,
  a:focus {
      box-shadow: 0 0px !important;
  }
  .LabelGroup {
      font-family: "Roboto" !important;
      color: #55595C !important;
      font-weight: 400 !important;
  }
  .bg-light-purple { 
      background-color: #CEC6E0;
       color:  #FFFFFF !important;
  }

  .bg-purple-primary-disabled { 
      background-color: #CEC6E0 ;
      color: #FFFFFF !important;
      cursor: not-allowed;
      pointer-events:none;
  }
  .bg-light-purple-disabled {  
      background-color: #F3F1F8 ;
      color: #9F9FA7 !important;
      cursor: not-allowed;
      pointer-events:none;
  }
  .bg-dark-grey-disabled { 
      background-color: #E4E4E4;
      color: #9F9FA7 !important;
      cursor: not-allowed;
      pointer-events:none;
  }
  .bg-light-grey-disabled { 
      background-color: #F0F0F0;
      color: #9F9FA7 !important;
      cursor: not-allowed;
      pointer-events:none;
  }

  .bg-purple-secondary { 
      background-color: #fff;
      color:  #5e4199 !important;
      border-color: #5e4199;
  }

  .bg-white-dark-border-disabled { 
      background-color: #fff;
      color: #9F9FA7 !important;
      border-color: #9F9FA7;
      cursor: not-allowed;
      pointer-events:none;
  }
  .bg-white-dark-border-disabled-2 { /*ASK TO SARA...... Is it the same that .bg-white-dark-border-disabled*/
      background-color: #FFFFFF;
      color: #9F9FA7 !important;
      border-color: #9F9FA7;
      cursor: not-allowed;
      pointer-events:none;
  }
   .bg-white-light-border-disabled { 
      background-color: #fff;
      color: #E4E4E4 !important;
      border-color: #E4E4E4;
      cursor: not-allowed;
      pointer-events:none;
  }

  .bg-dark-coral-disabled { 
      background-color: #FDD4C7 ;
      color: #FFFFFF !important;
      cursor: not-allowed;
      pointer-events:none;
    }
    .bg-dark-coral-secondary {
      color: #F65B4D !important;
      background-color: #FFFFFF;
      border-color: #F65B4D
    }
    .bg-dark-blue-disabled { 
      background-color: #A5D0D5;
      color: #fff !important;
       cursor: not-allowed;
      pointer-events:none;
    }

    .bg-dark-blue-secondary {
      color: #1e8a98 !important;
      background-color: #fff;
      border-color: #1e8a98;
    }
    .table-striped tbody tr:nth-of-type(2n+1)
    {
        background-color: #F3F1F8 !important;
    }
    .MTDropdownOptions
    {
        margin-top: 2px !important;
    }


    .InvoiceTableTD{
      border: 2px solid black !important;
      color : #2A2A2D !important;
      font-size: 1rem;
      font-family: "Roboto", sans-serif;
      font-weight: bold;
      padding: 2%  !important;
      text-align: right !important;
    
    }
    .InvoiceTableTDLabel{
      border: 2px solid  black !important;
      color : #2A2A2D !important;
      font-size: 1rem;
      padding: 2%  !important;
      font-family: "Roboto", sans-serif;
      font-weight: bold;
    }
    .BorderBalance
    {
        border: 2px solid  #5e4199 !important;
    }
    .BalanceTableTDLabel
    {
        
        padding-left: 2% !important;
        padding-top: 2%;
        padding-bottom: 2%;
    
    }
    .BalanceTableTD
    {
        text-align: right !important;
        padding: 2%;
    
    }
    
    .TableBalance {
         table-layout: fixed;
         border: 2px solid  black !important;
        }
    .PBalance{
        top: 20px;
        width: 80%;
        margin: 0 auto;
         margin-right: 6px;
        text-align: justify;
    }
    
    select.purple-text-border:disabled, .modal select:disabled {
      background-color: #e3e3e3;
      color: dimgray;
  }
  
  @media screen and (max-width: 400px) {
      .FixedWhiteSpace
      {
         white-space: normal !important;
      }
      
  }
/*lung*/
/**thresholds styles**/
.btn-actions-input-group{
  background-color: Transparent;
  background-repeat:no-repeat;
  outline:none;
}

.rule-notEdited{
  background: #FFFFFF;
  border: 1px solid #55595C;
  box-sizing: border-box;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.25) ;
  border-radius: 8.2793px ;
}

.rule-enabled{
  background: #FFFFFF;
  border: 1px solid #1E8A98;
  box-sizing: border-box;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.25) ;
  border-radius: 8.2793px ;
}

.rule-disabled{
  background: #FFFFFF;
  border: 1px solid #F97146;
  box-sizing: border-box;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.25) ;
  border-radius: 8.2793px ;
}

.input-group-text{
  border: 0;
  box-shadow: none;
  border-top-left-radius: 8.2793px !important;
  border-bottom-left-radius: 8.2793px !important;
  background: Transparent;
  font-size: 18px;
}

.rules{
  font-family: "Roboto";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 0em;
  text-align: left;
}

.rule-icon-enabled{
  background-color: #A5D0D5;
}

.rule-icon-enabled > span{
  color: #1E8A98;
}

.rule-icon-disabled{
  background-color: #FDD4C7;
}

.rule-icon-disabled > span{
  color: #F97146;
}

.rule-icon-notEdited{
  background-color: #F0F0F0;
}

.rule-icon-notEdited > span{
  color: #55595C;
}

.rule-name-enabled{
  color: #1E8A98;
  top:2px;
}

.rule-name-disabled{
  color: #F97146;
}

.rule-name-notEdited{
  color: #55595C;
}

.rule-description{
  font-family: "Roboto";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0em;
  text-align: left;
}

.rule-description-enabled{
  border: 1px solid #1E8A98 !important;
  border-radius: 8.2793px !important;
  border-top-left-radius: 0 !important ;
}

.rule-description-disabled{
  border: 1px solid  #F97146 !important;
  border-radius: 8.2793px !important;
  border-top-left-radius: 0 !important ;
}

.rule-description-notEdited{
  border: 1px solid #55595C !important;
  border-radius: 8.2793px !important;
  border-top-left-radius: 0 !important ;
}

.rule-edit-header{
  font-family: "Roboto";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0em;
  text-align: left;
  color: #5e4199;
}

.rule-status-value-body{
  width: 50% !important;
}

.rule-status-value{
display: inline-block !important;
width: auto;
}

.switchery{
  bottom: 14px !important;
}

#rules option{
  font-family: "Roboto", "icomoon";
  font-size: 18px;
  font-style: 'normal';
  font-weight: 400;
  text-align: left;
  margin-top: 3px;
  background-color: #fff;
  color: black;
}

#dropdownMenuLink{
  width: 150px;
}

#dropdown-menu-thresholds{
  color: black;
}

/* 
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

.rule-body{
  width: 100%;
  height: 100%;
}

.rules{
  width: 100%;
  height: 100%;
}

.rule-description-enabled, .rule-description-disabled, .rule-description-notEdited{
  height: 100%;
}

}

/* 
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {

.rule-body{
  width: 100%;
  height: 100%;
}

.rules{
  width: 100%;
  height: 100%;
}

.rule-description-enabled, .rule-description-disabled, .rule-description-notEdited{
  height: 100%;
}



}

/* 
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

.rule-body{
  width: 100%;
  height: 100%;
}

.rules{
  width: 100%;
  height: 100%;
}

.rule-description-enabled, .rule-description-disabled, .rule-description-notEdited{
  height: 100%;
}

.rule-status-value-body{
  width: 50% !important;
}
}

/* 
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

.rule-body{
  width: 100%;
  height: 100%;
}

.rules{
  width: 100%;
  height: 100%;
}

.rule-description-enabled, .rule-description-disabled, .rule-description-notEdited{
  height: 100%;
}

.rule-status-value-body{
  width: 50% !important;
}
}

/* 
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

.rule-body{
  width: 100%;
  height: 100%;
}

.rules{
  width: 100%;
  height: 100%;
}

.rule-description-enabled, .rule-description-disabled, .rule-description-notEdited{
  height: 100%;
}

}

/* 
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {

.rule-body{
  width: 100%;
  height: 100%;
}

.rules{
  width: 100%;
  height: 100%;
}

.rule-description-enabled, .rule-description-disabled, .rule-description-notEdited{
  height: 100%;
}

}

/*balance items*/
.balance-summary{
  color: #fff;
}

/*fonts*/
.montserrat-regular{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  src: local('Montserrat Regular'), local('Montserrat-Regular'),
       url('/themes/fonts/Montserrat/Montserrat-Regular.ttf');
}

.montserrat-medium{
  font-family: 'Montserrat';
  font-style: medium;
  font-weight: normal;
  src: local('Montserrat Medium'), local('Montserrat-Medium'),
       url('/themes/fonts/Montserrat/Montserrat-Medium.ttf');
}

.roboto-medium{
  font-family: 'Roboto';
  font-style: medium;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
     url('/themes/fonts/Roboto/Roboto-Medium.ttf');
}

/*jeffry*/
.letterstyleInvoice
{
    font-style: normal;
    font-weight: normal;
    font-family: "Roboto";
}


.paddingtable
{
    padding-top: 40px;
}

.BalanceDue

{
    background-color: #5e4199;
    color: white;
  
 
}

.colorlabel
{
    color: #5e4199;
}
.colorlabelInvoice
{
    color: #2A2A2D;
}

.margintable
{
    padding: 2px;
}

/*erick*/
.dropdown-checkbox button.dropdown-toggle {
  background-color: white;
  border: 1px solid #5e4199;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-checkbox ul.dropdown-menu {
  padding: 0 10px;
}

/* Customize the label (the container) */
.checkbox-container {
  display: block;
  position: relative;
  margin: 0;
  padding-left: 30px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox  */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border: 3px solid #5e4199;
  border-radius: 4px;
}

/* When the checkbox is checked, add a blue background  */
.checkbox-container input:checked ~ .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  padding: 2px;
  background: #1e8a98 content-box;
  border: 3px solid #5e4199;
  border-radius: 4px;
}

/* Create the checkmark/indicator (hidden when not checked)  */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.orange-dropdown-menu .selected-item {
  color: white;
  background-color: #F65B4D;
}

form input[type=text], form input[type=text]:focus {
  color: #333;
}

form input.form-control,
form select.custom-select,
form select.form-control,
form textarea.form-control {
  font-family: 'Roboto', sans-serif;
  color: #333;
  font-size: 1rem;
  outline: none;
  border: 1px solid #5e4199;
}

input.form-control:focus,
select.custom-select:focus,
select.form-control:focus,
textarea.form-control:focus {
  border: 1px solid #5e4199;
}

.menu-expanded .main-menu {
  z-index: 99 !important;
}

.menu-collapsed .main-menu {
  z-index: 99999 !important;
}

.turquoise-active:active {
  background-color: #378a98;
}

.mt-px-2 {
  margin-top: 2px !important;
}

.table th, .table td {
  vertical-align: middle !important;
}