.top10-buffer { margin-top:10px; }
.top20-buffer { margin-top:20px; }
.left10-buffer { margin-left:10px; }
.left20-buffer { margin-left:20px; }
.right10-buffer { margin-right:10px; }
.right20-buffer { margin-right:20px; }
.bottom10-buffer { margin-bottom:10px; }
.bottom20-buffer { margin-bottom:20px; }

.text-credit-green { color: #33cc33; }
.text-credit-yellow { color: #ffff00; }
.text-credit-red { color: #cc0000; }
.text-credit-orange { color: #ff9900; }

html {
	height: 100%;
}

.crm-business-entity-level-1 {
	width: calc(100% - 151px);
	float: right;	
}
.crm-business-entity-level-2 {
	width: calc(100% - 106px);
	float: right;	
}

.crm-business-entity-level-3 {
	width: calc(100% - 60px);
	float: right;	
}

.crm-data-row {
	background: #f5f5f5; 
	border-radius: 3px; 
	margin: 3px;
}

.table-search-field {
	width: 100% !important;
	min-width: 100px;
}

.table-search-from-group {
	width: 100% !important;
	max-width: 230px;
}
	
.table-search-from-group input {
	max-width: 230px;
}

.dividertab-info {
	 background-color: #428BCA !important;
	 color:#fff !important;
}

h3 {
	overflow: hidden;
	text-align: left;
	color: #333;
	font-size: 1.5em;
}

h3:before,
h3:after {
	background-color: #ddd;
	content: "";
	display: inline-block;
	height: 1px;
	position: relative;
	vertical-align: middle;
}

h3:before {
	width: 20px;
 	right: 0.5em;
}

h3:after {
 	left: 0.5em;
 	width: 90%;
 	margin-right: -200px;
}

.gi-1-3x{font-size: 1.3em;}
.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

#about_company_logo {
	text-align: center;
}

#about_company_logo img {
	width: 12em;
}

.dictionary-line {
	padding: 0.2em;
	background-color: #f5f5f5;
	border-width: 0.05em;
	border-radius: 3px;
	min-height: 30px;
}

.dictionary-item {
	margin-top: 0.45em;
	margin-left: 0.2em;
	position: relative;
	float: left;	
}

.dictionary-group-tag {
    width:20px;
    position:fixed;
    height: 30px;
    border-right-color: #BFBFBF;
    border-right-style: solid;
}

.dictionary-group-name {
	cursor: move;
}

.dictionary-group-placeholder {
    border: 1px dotted;
    border-color: #BFBFBF;
    margin: 0.5em 1em 0.5em 0;
    height: 30px;    
}

#dictionary-group-list {
	list-style-type: none;
	margin: 0px; 
	padding: 0px;
}
  
#invocieTable, td {
	padding-right: 30px;
}

.table-borderless tbody tr td,
.table-borderless tbody tr th,
.table-borderless thead tr th,
.table-borderless thead tr td,
.table-borderless tfoot tr th,
.table-borderless tfoot tr td {
    border: none;
}

.alignToInput{
	display: inline-block;
	vertical-align: baseline;
}

.dataTableDatePickerLabels {
	margin-top: 5px;
	margin-left: -12px;
	margin-right: 3px;
	
}

 #draggablePanelList .panel-heading {
        cursor: move;
       	height: 30px;
       	text-align:center;
       	text-indent: 1em;
       	padding:0 ;
    }
    
.rest-handler {
	cursor: pointer;
}

.btn.btn-menu-spec:active {
  -moz-box-shadow:    inset 0 0 0px white;
  -webkit-box-shadow: inset 0 0 0px white;
  box-shadow:         inset 0 0 0px white;
}

.btn.btn-menu-spec {
  	border: 1px solid lightgrey;
  	cursor: default;
    background-color: #F5F5F5;
    color: #000000;
    background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6);
    text-decoration: none;
    background-position: 0;
    transition: none;
}

.table tbody tr > td .granted {
	background-color: #dff0d8 !important;
}

.table tbody tr > td .not-set {
  background-color: #fcf8e3 !important;
}

.table tbody tr > td .denied {
  background-color: #f2dede !important;
}
/* Gray Bootstrap button for disabled Endpoints */
.btn.btn-gray {
    border: 1px solid #626e7f;
    -webkit-box-shadow: inset 0 1px 2px #9aa4b1;
    -moz-box-shadow: inset 0 1px 2px #9aa4b1;
    box-shadow: inset 0 1px 2px #9aa4b1;
    background: #758294;
    background-size: 100%;
}


.btn.btn-gray:hover {
    background: #728092;
    background-size: 100%;
    -webkit-transition: box-shadow 0.05s ease-in-out;
    -moz-transition: box-shadow 0.05s ease-in-out;
    -o-transition: box-shadow 0.05s ease-in-out;
  	transition: box-shadow 0.05s ease-in-out; 
}


.btn.btn-gray:active {
    background: #818d9d;
    -webkit-box-shadow: 0 0 5px #818d9d inset;
    -moz-box-shadow: 0 0 5px #818d9d inset;
    box-shadow: 0 0 5px #818d9d inset; 
}

.btn-group.open .btn.btn-gray.dropdown-toggle {
    background-color: #8c97a6; 
}

.error-handler-panel {
	margin-top: 150px;
}

<!-- ***************  Template definition **********************-->


.sidemenu-search {
	background-color: #ccccff; !important
}

.sidemenu-search .active{
	background-color: #FFFFFF; !important
}

.sidemenu-search i {
	color: #000000; !important
}

.sidebar ul li a, .sidebar ul li a:focus{
	background-image: linear-gradient(to bottom, #FFFFFF, #d9d9d9); !important
}

.sidebar .nav-second-level li a{
	background-image: linear-gradient(to bottom, #FFFFFF, #f2f2f2); !important;
} 

.sidebar ul li a:hover {
	background-image: linear-gradient(to bottom, #FFFFFF, #FFFFFF); !important
}

.sidebar ul li a.active {
		font-weight: bold;	
}

.navbar-default {
	background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6); !important
}

.navbar-default .navbar-nav > .active > a{
	background-image: linear-gradient(to bottom, #FFFFFF, #f2f2f2); !important;
	font-weight: bold; !important;
}

 .navbar-default .navbar-nav .active a:hover, .navbar-default .navbar-nav .active a:focus{
 	background-color: #FFFFFF; !important;
	color: #000000; !important;
 }
 
 .navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li a:focus{
 	background-color: #FFFFFF; !important;
 }

.navbar-default .navbar-nav li a {
	color: #000000; !important;
}

.navbar-default a {
	color: #000000; !important;
}

.sidebar a {
	color: #000000; !important
}

.sidebar-search button {
	background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6); !important
}

.navbar-top-links li a:hover {
	background-color: #FFFFFF; !important;
} 

.breadcrumb {
	background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6); !important
}

.breadcrumb span{
	color: #000000; !important
}

.breadcrumb a{
	color: #0000ff; !important
}


.login-panel .panel-heading {
	background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6); !important;
	color: #000000; !important
}

.btn-default {
	background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6); !important;
	color: #000000; !important
}

.btn.btn-menu-spec {
  	border: 1px solid lightgrey;
  	cursor: default;
    background-color: #F5F5F5;
    color: #000000;
    background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6);
    text-decoration: none;
    background-position: 0;
    transition: none;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
   border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.account-row-credit {
	color: green;
}

.account-row-credit a {
	color: green;
}

.account-row-debit {
	color: red;
}

.account-row-debit a {
	color: red;
}

<!-- Customer Notification -->

.notif-base {
	background-color: rgba(230, 230, 230, 0.9);
	border-style: solid;
	border-width: 1px;
	border-color:  rgba(0, 0, 0, 0.2);
	border-left-style: none;
	min-height: 43vh;
	margin-bottom:5px;
	padding: 10px;
}

.crm-notification-box {
	height: 20vh;
	overflow: auto;
	white-space: normal;
}

.crm-notification-container {
	height: 23vh;
	background-color: rgba(46, 109, 164, 0.2)
}

.crm-notification-container > .row {
  overflow-x: auto;
  white-space: nowrap;
  
}
.crm-notification-container > .row > .col-lg-2 {
  display: inline-block;
  float: none;
}

.notification-base {
	background-color: rgba(230, 230, 230, 0.9);
	border-style: solid;
	border-width: 1px;
	border-color:  rgba(0, 0, 0, 0.2);
	height: 20vh;
}

.notification-footer {
	font-size: 0.7em;
	padding-left:5px;
	
}
.notification-header {
	padding-left:5px;
	padding-right:5px;
	padding-bottom:5px;
	padding-top:3px;
}
.notification-body {
	padding-left:5px;
	height: 14vh;
}

.add-note-wrapper {
	padding-top:23px;
	position: fixed;
}

.add-note-btn:before {
	 font-size: 130px;
	 border-style: dotted;
	 background-color:rgba(255, 255, 255, 0.8);
	 margin-left: 5px; 
	 border-radius: 15px;
	 padding-top: 5px;
	 padding-borrom: -15px;
	 padding-left: 5px;
	 padding-right: 5px;
}

.btn-tab {
	margin-left: 10px;
	border-radius: 10px 10px 0px 0px; !important;
}

#notifications {
	display: none;
}

<!-- Ticket Notification -->

#tickets {
	display: none;
	height: 45vh;
	background-color: #fff;	
}

#ticketListLoading {
	height: 45vh;
	background-color: #fff;		
}
.ticket-conent-scroll{
	height: 45vh;
	
}

.ticket-display-container {
	max-height: 45vh;
	padding-left:5px;
	overflow: scroll;
	background-color: #fff;
	border-top-style: solid;
	border-top-color:rgb(204, 204, 204);
	border-top-width: 1px;
	margin-right: 0;
	overflow-x: hidden;
}

.ticket-display-container > .col-md-2 {
	padding-right: 0px;
	max-height: 45vh;
}


.ticket-display-container > .col-md-10 {
	padding-left: 0px;
}
 
.ticket-base{
	background-color: rgba(230, 230, 230, 0.9);
	border-style: solid;
	border-width: 1px;
	border-color:  rgba(0, 0, 0, 0.2);
	border-left-style: none;
	min-height: 43vh;
	margin-bottom:5px;
	padding: 10px;
	overflow-x: hidden;
}

.ticket-conent-static {
	margin-right: 0;
	padding: 0;
}

.ticket-button-group {
	text-align: right;
}

.ticket-button {
	font-size: 1.8em;
	padding-right: 4px;
}

.list-group-item, .list-group-item:focus, .list-group-item:hover {
	border-right-style: solid;
	border-right-color:rgb(204, 204, 204);
	border-right-width: 1px;
	border-top-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
	background-color: rgba(230, 230, 230, 0.9) !important;
	border-right-style: none;
	color: black;
	border-top-style: solid;
	border-top-color:rgb(204, 204, 204);
	border-top-width: 1px;
	border-bottom-style: solid;
	border-bottom-color:rgb(204, 204, 204);
	border-bottom-width: 1px;
	border-left-style: solid;
	border-left-color:rgb(204, 204, 204);
	border-left-width: 1px;
}

.list-group-item.ticketTab-selector.active {
		border-radius: 5px 0px 0px 5px; !important:
}

.markreadbutton{
	margin:3px;
	padding-right: 6px;
	font-size: 1.6em;
}

.ticket-display-footer {
	font-size: 0.7em;
	padding-left:5px;
	
}
.ticket-display-header {
	padding-left:5px;
	padding-right:5px;
	padding-bottom:5px;
	padding-top:3px;
}
.ticket-display-body {
	padding-left:5px;
}

.ticket-view-btnwrapper {
	height: 43vh;
}

#loaderWrapper {
	border-top-style: solid;
	border-top-color:rgb(204, 204, 204);
	border-top-width: 1px;
	height: 43vh;
	background-color: white;
}

#emptyTicketList {
	border-top-style: solid;
	border-top-color:rgb(204, 204, 204);
	border-top-width: 1px;
	height: 43vh;
	background-color: white;
	font-size: 2em;
	text-align: center;
}


#ticket-view-prevbtn {
	vertical-align: top;
}
#ticket-view-nextbtn {
	vertical-align: bottom;
}

.ticket-article-body span{
	display: block;
	word-wrap: break-word;
}

.reply-article {
	font-size: 2em;
}

.reply-article:hover{
	color: #224f77;
}

.list-group-item.ticket-display-articleLine {
	background-color: transparent;
	border-top-style: solid;
	border-top-width: 0.5px;
	border-top-color: rgb(204, 204, 204);
	border-bottom-style: solid;
	border-bottom-width: 0.5px;
	border-bottom-color: rgb(204, 204, 204);
	border-right-style: none; 
	
	border-radius: 0px 0px 0px 0px; !important:
}

.error-handler-panel {
	margin-top: 10%;
	text-align: center;
}

<!-- --------------------------------------------- -->

.importance-group label{
	width: 40px;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.lifecylce {
	list-style: none;
	padding: 0;
	margin: 0;
}

.lifecylce:before {
	margin-top: 40px;
	content: '';
	position: absolute;
	top: 0;
	left: 40px;
	height: calc(100% - 80px);
	border: 1px dashed #aaa;	
}

.lifecylce li {
	margin: 25px 80px;
	padding: 5px;
	position: relative;
}

.lifecylce li div.icon {
	position: absolute;
	left: -75px;
	top: -4px;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	color: #fff;
	font-size: 1.4em;
	text-align: center;
	padding-top: 6px;
	background-color: red;
}

.lifecylce li div.description {
	position: relative;
	left: -20px;
}

.lifecylce li div.icon.active {
	background-color: green;
}

.lifecylce li div.icon.inactive {
	background-color: gray;
}

.lifecylce li div.icon.closedInactive {
	background-color: blue;
}

.lifecylce li div.icon.redClass {
	background-color: #b84d45;
}

.lifecylce li div.icon.uninClass {
	background-color: #7A92A3;
}


.lifecylce li div.icon.yellowClass {
	background-color: #f0ad4e;
}


.overview {
	list-style: none;
	padding: 0;
	margin: 0;
	height: 600px;
	overflow-x: hidden;
	overflow-y: scroll;
}

.overview:before {
	content: '';
	position: absolute;
	top: 0;
	left: 40px;
	height: 100%;
	border: 1px dashed #aaa;
}

.overview li {
	margin: 15px 80px;
	padding: 5px;
	position: relative;
	border-radius: 3px;
	border: 1px solid #ccc;
	box-shadow: 0 1px 6px rgba(0,0,0,0.175);
}

.overview li:hover {
	box-shadow: 2px 2px 7px rgba(0,0,0,0.275);
}

.overview-entry-icon {
	position: absolute;
	left: -75px;
	top: 10px;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	color: #fff;
	font-size: 1.4em;
	text-align: center;
	padding-top: 6px;
}

.overview-entry-icon.incomming {
	background-color: #3f903f !important;
}

.overview-entry-icon.outgoing {
	background-color: #d9534f !important;
}

.overview-entry-icon.enabled {
	background-color: #009524 !important;
}

.overview-entry-icon.disabled {
	background-color: #c41800 !important;
}

.overview-entry-icon.warn {
	background-color: #f0ad4e !important;
}

.overview-entry-icon.info {
	background-color: #9b9b9b !important;
}

.overview-entry-header {
	font-weight: 700;
}

.overview-entry-timestamp {
	font-size: 80%;
}

.overview-entry-bussiness-entity {
	font-size: 80%; 
	font-weight: 500; 
	color: gray; 
	position: absolute; 
	top: 7px; 
	right: 10px;
}

.overview li {
	visibility: hidden;
}

.overview li.in-view {
	visibility: visible;
}

.item-drag-drop-box {
	background-color: #f5f5f5; 
	min-height: 100px; 
	border-radius: 3px; 
	padding: 2px;
}

.item-drag-drop-box span {
	margin: 2px;
}

.loader {
	position: absolute;
  	left: 50%;
  	top: 40%;
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    height: 20vh;
    width: 20vh;
    animation: spin 2s linear infinite;
    text-align: center;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

.create-prod-hr {
	margin-top: 5px;
	margin-bottom: 5px;
}

.table>tbody>tr.no-border>td,
.table>tbody>tr.no-border>th {
  border-top: none;
}

.table-outer-border {
  border: 1px solid #ddd;
}

.sms-notification {
	background-color: #eee;
	border-color: #ccc;
	border-radius: 3px;
	border-style: solid;
	border-width: 1px;
	padding: 4px;
	margin-bottom: 8px;
	min-height: 35px;
}

.email-notification {
	background-color: #eee;
	border-color: #ccc;
	border-radius: 3px;
	border-style: solid;
	border-width: 1px;
	margin-bottom: 8px;
}

.email-notification > .email-subject {
	border-color: #ccc;
	border-style: solid;
	border-width: 0 0 1px 0;
	padding: 4px;
	min-height: 30px;
}

.email-notification > .email-body {
	padding: 4px;
	word-break: break-all;
}

.product-catalog-instance-candidate-box {
	background-color: #eee;
	border-color: #ccc;
	border-radius: 3px;
	border-style: solid;
	border-width: 1px;
	padding: 4px;
	margin-bottom: 8px;
	min-height: 35px;
	font-family:monospace;
}

#loginPageWrapper {
	background-image: url("../img/login_background_smile.jpg"); !important;
    /* Full height */
	display: table;
    width: 100%;
    height: 100%;
    min-height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

 margin: 0;
 padding: 0;
}

.login-panel {
	background-color: rgba(255,255,255,0.23);
	border: none;
	color: white;
	box-shadow: none;
	margin-top: 6%;
}

.login-input {
   background-color:rgba(255,255,255,0.8) !important;
   border:rgba(0,0,0,0.7) !important;
   color: rgba(0,0,0,0.7)  !important;
}

.login-title {
	padding-top: 12%;
	text-align: center;
	font-size: 4.2em;
	font-weight: 800;
	color: rgba(255,255,255,0.85);
	text-shadow: 0 0 3px #33333382, 0 0 3px #33333382;
}

#application_descriptor{
color: white;
}

.has-error {
	border-color: #a94442;
}

.has-error:focus {
	border-color: #a94442;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

.clickable-row {
	 cursor: pointer;
}

.notifTab-selector:hover{
	cursor: pointer; 
}


.content-row {
	margin-bottom: 18%;
}

.createBalanceTransferTable tr:hover {
	cursor: pointer; 
}

.notification-search-bar {
	display: inline;
}

.notification-search-input {
	width: 70%;
}

.hidden-radio {
	visibility: hidden;
}

.badge-success {
  background-color: #468847;
}

.badge-important {
  background-color: #b94a48;
}

.badge-warning {
  background-color: #f89406;
}

.text-warning {
	color: orange;
}

.product-catalog-counter {
  margin-bottom: 10px;
}

.product-catalog-counter .progress {
  margin-bottom: 0px;
}