@import url('https://fonts.googleapis.com/css?family=Noto+Sans');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400&family=Montserrat:wght@400&display=swap');

body {
    font-family: 'Noto Sans', sans-serif !important;
    background: #F0F0F7;
}

#sidebar{
    font-family: 'Lato', sans-serif !important;
    background-color: #272822;
}

#sidebar .sidebar-header {
    background-color:#130e0e50;
}
#sidebar ul ul a {
    background-color:#130e0e50;
}

#sidebar::-webkit-scrollbar-thumb {
    background: #6619194c;
}
/* Handle on hover */
#sidebar::-webkit-scrollbar-thumb:hover {
  background: #3b030e; 
}

 .modal-dialog {
    z-index: 1100;
    top: 0px;
    position: absolute;
    width: 70%;
    margin-left: 5%;
}

.modal-content {
    overflow: hidden !important;
}
.modal-body {
    max-height: 80vh;
    overflow: auto;
}

.top-bar {
	background: #fff;
	height: 50px;
    border-bottom: 1px solid #931c1a;
}
.username div a {
    color: #2d3f61;
}

[ps-action-bar] .action-bar{
    margin-top:-20px;
}

.ds-me > li, .ds-me > li > a{
    font-size: medium;
    color: #3b030e;
}

.ds-me > li, .ds-me > li > a > span {
    font-size: small;
}

.flyout:hover > .flyout-content, .flyout-alt:hover > .flyout-content{
    border: 1px solid #ccc;
}


.flyout:hover > .flyout-content > .link:hover, .flyout-alt:hover > .flyout-content >.link:hover{
    background-color: #eaece7;
}


.flyout:hover > .flyout-content > div > a > .fa{
    margin-right:20px;
}

#content > div > .stretch {
    top: 100px !important;
    background-color: #e0e0e0;
}


.center{
    text-align:center;    
}

.right{
    text-align:right;
}

.distance{
    letter-spacing: 1px;
}

.alert {
    margin-top: 25px;
}

body .main .error-container, body .main .info-container {
    margin-top: 20px !important;
}

.alert-danger{
    margin-top: 0px !important;
}

.active{
	outline:0;
}

.nav-tabs{
	margin-left:.8px;
	border-bottom:1px solid #ccc
}

.fancyTab {
  text-align: center;
  background-color: #eee;
  box-shadow: 0 0 0 1px #ccc;
  transition: top .2s;
}

.fancyTab.active {
  top:0;
  transition:top .2s;
  background: #fff;
  box-shadow: 1px 1px 0 1px #fff, 0 0px 0 1px #ccc, -1px 1px 0 0px #ccc inset;
}

.fancyTab.active .whiteBlock {
  display:block;
  height:2px;
  bottom:-2px;
  background-color:#fff;
  width:99%;
  position:absolute;
  z-index:1;
}

.fancyTab a {
  font-size:14px;
  color:#333;
}

li.fancyTab a {
  min-width:100px;
  padding-bottom:0;
  margin:5px 10px;
}

.fancyTab .fa {
  font-size: 25px;
  width:100%;
  padding: 0px;
  color:#666;
}

.fancyTab a:focus {
	outline:none;
}

.fancyTabContent {
  padding: 15px 15px 15px;
  position:relative;
  background-color:#fff;
  min-height:450px;
}

li.fancyTab:hover {
	background-color:#f9f9f9;
	box-shadow: 0 0 0 1px #ccc;
}

li.fancyTab.active{	
	border-top: 1px solid #ccc;
	box-shadow: 0px 2px 0 0px #fff, 0px 0px 0 1px #ccc;
	padding:0px 10px;
}

li.fancyTab.active a{
	border-top:none !important;
}

li.fancyTab.active:hover {
  background-color:#fff;
}

.fancyTab:last-child {
  box-shadow: 0 0 0 1px #ccc;
}

li.fancyTab:last-child a {
  border-right: 1px solid transparent;
}

li.fancyTab.active:last-child {
	border-right: 0px solid #ccc;
}

.tabs .nav-tabs li.fancyTab.active a {
	top:0;
	box-shadow:none;
	border:none;
	padding:5px;
	border-bottom: 2px solid #931c1a !important;
}

.nav-tabs>li>a:hover{
	border:none;
	background:transparent;
}

.arrow-down {
  display:none;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 22px solid #ccc;
  position: absolute;
  top: -1px;
  left: calc(50% - 20px);
}

.arrow-down-inner {
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 12px solid #f5f5f5;
  position: absolute;
  top: -22px;
  left: -18px;
}

.fancyTab.active .arrow-down {
  display: block;
}

.default-content-panel {
    background-color: rgba(255, 255, 255, 0.8);
    margin:120px 15px 20px 15px;
    padding:20px;
    border: 1px solid #c7c7c7;
	border-radius:10px;
	border-top:2px solid #931c1a;
	border-bottom:2px solid #931c1a;
	display: grid;
}

.default-content-panel .column-field-inner {
    padding:0px !important;
}

.box {	
    padding:20px;
    border: 1px solid #c7c7c7;
	border-radius:10px;
	box-shadow: 1px 1px 1px #fafafa;
    background-color: rgba(255, 255, 255, 0.6);
}

[grid-view] th, [grid-view] .tr .th {
    background-color: #931c1a;
    font-weight:500;
}

[grid-view] tr:nth-child(even){
	background-color: #f2f2f2;
}

[grid-view] td, [grid-view] th{
    border-color: #ccc;
}
[grid-view] .row-g, [grid-view] .row-r, [grid-view] .row-a {
    word-break: break-word;
}

.pane-vScroll > table{
    border-bottom: 2px solid #931c1a75;
}

.data-filter{
    border-color: #ccc;
    background-color:#fff;
}
[grid-view] .table-vScroll th{
    position:static !important;
}

[ps-action-bar] {
    position: fixed;
    top: 60px !important;
    background: white;
    z-index: 3;
    box-shadow: 0px 0px 10px 3px #cacaca;
}

[ps-action-bar] .action-bar{
	cursor: default;
	background: rgba(255, 255, 255);
	padding: 20px 10px 5px 15px;
    width: 82%;
}

[ps-action-bar] .action-bar .link-bar .btn {
    border-radius: 20px !important;
    margin-bottom: 5px;
    font-size: 14px;
    margin-right: 10px;
    min-width:150px;
    padding:5px 15px;
}
	
[ps-action-bar] .action-bar .link-bar .separator {
    display: inline-flex !important;
    margin: 5px;
}

.form-horizontal .form-group {
    margin-bottom: 10px;
}

div[dropdown] a, div[dropdown] .btn-dropdown-field {
    background: white;
}

.modal{
    z-index: 10000;
}
.modal-header .close {
    margin-top: -2px;
    outline: none;
    color: white;
    opacity: .7;
    font-size: xx-large;
}

.modal-header {
    padding: 15px;
    background: #931c1a;
    color: white;
    border: none;
    margin: -1px;
}

.modal-header-title{
    float: left;
}

.modal-body .column-field-inner{
    padding:0px !important;
}

.btn-circle{
  display:block;
  width: 80%;
  padding-top: 80%; /* 1:1 Aspect Ratio */
  position: relative; /* If you want text inside of it */
  border-radius: 50%;
  border: 1px solid green;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: none;
}

.btn-action{
    display:inline-block;
    border-radius:5px !important;
    margin:2px 5px;
}

.btnAction{
    padding: 5px 10px;
    border-radius: 10px !important;
}

.section-header{
    border-bottom: 1px solid #bf1010 !important;
    font-size: large !important;
    color: #931c1a !important;
    background: transparent !important;
    margin-bottom:10px;
}
.column-field > .column-field-row > .column-field-cell{
    padding:10px;
}

#fancyTabWidget{
    margin-top:100px;
}

@media (max-width: 768px) {
	li.fancyTab {
        padding-top: 0px;
		width:50%;
    }
	li.fancyTab.active{	
		border-top: none;
	}
    .nav-tabs > li.fancyTab {
        padding: 0px;
    }
	.container-fluid{
		padding: 0px 10px;
	}
	.default-content-panel{
		padding:10px;
		margin:5px;
		margin-top:20px;
	}
	.data-filter {
		margin: 0px -5px 0px -5px
	}
}

@media (max-width:1359px) {
    [ps-action-bar] .action-bar {
        width: 100%;
    }
}


/* Button Shining */
@mixin fade-transition($element) {
	-webkit-transition: $element 0.15s ease-in-out;
	-moz-transition: $element 0.15s ease-in-out;
	-ms-transition: $element 0.15s ease-in-out;
	-o-transition: $element 0.15s ease-in-out;
	transition: $element 0.15s ease-in-out;
}

.shining {
    /*  styling */
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
    color: #FAFAFA;
    margin-left: 60px;
    padding: 5px 20px;
    
    /*  centering */
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	@include fade-transition(background);

	&:hover {
		background: rgba(8,97,76,0.6);
	}
}

.shining i {
/*   positioning */
		position: absolute;
		opacity: 0;
		top: 0;
		left: 0;
  
/*   gradient   */
		background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.03) 1%, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.85) 70%, rgba(255,255,255,0.85) 71%, rgba(255,255,255,0) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(1%,rgba(255,255,255,0.03)), color-stop(30%,rgba(255,255,255,0.85)), color-stop(50%,rgba(255,255,255,0.85)), color-stop(70%,rgba(255,255,255,0.85)), color-stop(71%,rgba(255,255,255,0.85)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* IE10+ */
		background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
    
/*  forming the shine element
    play around with the width, skew and gradient to get different effects
  */
		width: 15%;
		height: 100%;
     transform: skew(-10deg,0deg);
		-webkit-transform: skew(-10deg,0deg);
     -moz-transform: skew(-10deg,0deg);
     -ms-transform: skew(-10deg,0deg);
     -o-transform: skew(-10deg,0deg);
  
/*  animating it  */
     animation: move 2s;
		animation-iteration-count: infinite;
		animation-delay: 1s;
		-webkit-animation: move 2s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-delay: 1s;
		-moz-transform: skew(-10deg,0deg);
		-moz-animation: move 2s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-delay: 1s;
		-ms-transform: skew(-10deg,0deg);
		-ms-animation: move 2s;
		-ms-animation-iteration-count: infinite;
		-ms-animation-delay: 1s;
		-o-transform: skew(-10deg,0deg);
		-o-animation: move 2s;
		-o-animation-iteration-count: infinite;
		-o-animation-delay: 1s;
	}

/*  */
@keyframes move {
	0%  { left: 0; opacity: 0; }
	5% {opacity: 0.0}
	48% {opacity: 0.2}
	80% {opacity: 0.0}
	100% { left: 82%}
}

@-webkit-keyframes move {
	0%  { left: 0; opacity: 0; }
	5% {opacity: 0.0}
	48% {opacity: 0.2}
	80% {opacity: 0.0}
	100% { left: 82%}
}

@-moz-keyframes move {
	0%  { left: 0; opacity: 0; }
	5% {opacity: 0.0}
	48% {opacity: 0.2}
	80% {opacity: 0.0}
	100% { left: 88%}
}

@-ms-keyframes move {
	0%  { left: 0; opacity: 0; }
	5% {opacity: 0.0}
	48% {opacity: 0.2}
	80% {opacity: 0.0}
	100% { left: 82%}
}

@-o-keyframes move {
	0%  { left: 0; opacity: 0; }
	5% {opacity: 0.0}
	48% {opacity: 0.2}
	80% {opacity: 0.0}
	100% { left: 82%}
}