/*THEME FONTS*/
@font-face {
	font-family: "Nexa";
	src: url("fonts/Nexa-Light.otf");
	font-weight:100;
}

@font-face {
	font-family: "Nexa";
	src: url("fonts/Nexa-Bold.otf");
	font-weight:400;
}

@font-face {
	font-family: "Raleway";
	src: url("fonts/Raleway-Light.ttf");
	font-weight:100;
}

@font-face {
	font-family: "Raleway";
	src: url("fonts/Raleway-Bold.ttf");
	font-weight:400;
}

@font-face {
	font-family: "Raleway";
	src: url("fonts/Raleway-Regular.ttf");
	font-weight:200;
}

@font-face {
    font-family: "jonix-font";
    src: url("fonts/jonix-font.otf"); 
  }

body{
	font-family:"Raleway", sans-serif;
	font-weight:200;
}

h1, h2{
	font-weight:200;
}

h1.page-title{
	font-size:50px;
	color:#245563;	
}

.legend-title {
	font-family: "Raleway";
	font-size: 14px;
	font-weight: "regular";
}

/*THEME COLORS*/
.btn-primary{
	background-color:#245563;
	color:#fff;
	border-color:#DDDDDD;
}

.btn-primary:hover{
	background-color:#549CAF;
	border-color:#DDDDDD;
}

.btn-primary.disabled, .btn-primary:disabled{
	background-color:#8EB2BB;
	color:#fff;
	border-color:#DDDDDD;
}

.btn-primary-outline{
	background-color:#6B6B6B;
	color:#ffffff;
	border-color:#6B6B6B;
	border-style:solid;
	border: none;
}

.btn-primary-outline:hover{
	background-color:#5a6268;
	color:#fff;
	border-color:#545b62;
	border-style:solid;
	border: none;
}

.btn-primary-outline.disabled, .btn-primary-outliney:disabled{
	background-color:#C6C6C6;
	color:#ffffff;
	border-color:#C6C6C6;
	border-style:solid;
    border: none;
}

.btn-secondary{
	background-color:#6B6B6B;
	color:#fff;
	border-color:#6B6B6B;
}



.btn-secondary:hover, .btn-secondary-outline:hover{
	background-color:#5a6268;
	color:#fff;
	border-color:#545b62;
	border-style:solid;
}


.btn-secondary-outline{
	background-color:#6B6B6B;
	color:#ffffff;
	border-color:#6B6B6B;
	border-style:solid;
	border: none;
}

.btn-secondary-outline.disabled, .btn-secondary-outline:disabled{
	background-color:#C6C6C6;
	color:#ffffff;
	border-color:#C6C6C6;
	border-style:solid;
	border: none;
}

.btn-secondary.disabled, .btn-secondary:disabled{
	background-color:#C6C6C6;
	color:#fff;
	border-color:#C6C6C6;	
}

.btn-warning:disabled{
	background-color:#f0C94C!important;
	color:#ffffff;
	border-color:#F0C94C;
}

.btn-warning{
	background-color:#F2BF19;
	color:#ffffff;
	border-color:#F2BF19;
}


.text-color-primary{
	color:#8EB2BB!important;	
}

.text-color-secondary{
	color:#245563;	
}

.text-color-grey{
	color:#dddddd;	
}

.bg-primary{
	background-color:#8EB2BB!important;
	color:#fff!important;
}

.btn.disabled, .btn:disabled{
	opacity: 1.0;
}


body{
	background: #fff;
	overflow: auto;
	height: auto!important;
	font-size:12px;
	min-height:100vh;
}

/*Utilities*/
.border-bottom{
	border-bottom-width:1px; 
	border-bottom-style:solid;
}

.border-bottom-white{
	border-bottom-color:#ffff;
}

.border-bottom-green{
	border-bottom-color:#108156;
}


/*LOGIN-STYLE*/
body.login {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 40px;
  background-color:#8EB2BB;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}

form,input, select, option{
	font-family:"Raleway", "sans-serif"!important;
	font-weight:200;
	color:#373A3C!important;
}

/*
 * Navbar
 */

.navbar{
  /*background-color: #8EB2BB!important;*/
  color:#000;
}

.login .navbar{
  background-color: #F4F4F4!important;
  color:#000;
}

.login .navbar .nav-link{
  color:#2185D0;

}


.login .navbar .nav-link:hover{
  color:#2185D0;
  text-decoration: underline;
}



.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

body#users-content,
body#statistics-content{
	overflow: hidden !important;
}
.user-profile-headr-content p{
	margin: 0;
	word-wrap:break-word;
}
body#login .btn-login{
  border-radius: 15px;
  margin-left: 20px;
  background: #37B33E !important;
  border: 0px !important;
}
/*
.users-grid-content .ui-grid-row .empty-plan .ui-grid-cell{
	background-color: #F9A691 !important;
	background: #F9A691 !important;
}
*/

/*Checkbox cell style*/
/*[class^="ui-grid-icon"]:before, [class*=" ui-grid-icon"]:before{
	width:35px;
	height:35px!important;
	line-height:35px;
	margin-left:-5px;
	margin-top:-5px;
}*/

.header-select{
	margin-right: 20px !important;
}


.main{
	padding-top:75px;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 64px 0 0;
}


.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 64px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto;
  background-color:#8EB2BB;  
  margin-top:0px;;

}

.sidebar-sticky .nav-item{
}

.sidebar-sticky .nav-link{
	color:#fff;
	font-size:18px;
}

.sidebar-sticky .nav-link:hover{
	background-color:#245563;
	color:#fff;
	text-align: center;
}

.sidebar-sticky .text-bold.a-selected{
	border-right:5px solid #245563;
	
}


/*Company PopOver*/

header nav .popover-body{
	min-width:270px;
}

header nav .card-header{
	padding:0;
	
}

header nav .card-header a{
	color:#000;
}

.blue-color{
	background-color: #8EB2BB;
    height: fit-content;
}
.whitewrite{
	color: white;
}

.text-bold{
	font-weight: bold;
}

.text-normal{
	font-weight: 100;
}

.text-underline{
	text-decoration: underline;
}

.navbar-specie{
  	background:#8EB2BB61 ;
  	height : 50px;
  }

.btn-jonix{
	background: #8EB2BB;
	border-color: black;
}
.border-gray{
	border-color: gray;
}

.input-province{
	/*max-width: 91px;*/
}


.bar-canvas{
	width: inherit;
	height: inherit;
	display: block;
	background: white;
}
#top-navigation-nav{
}
#top-navigation-nav a{
	color: white !important;
	/*text-decoration: underline;*/
}
#top-main-nav{
    background-color: #FFFFFF!important;
    color:#707070;
    font-size:20px!important;
    box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
   	z-index:1;
    
}

#top-main-nav a:hover{

}

#top-main-nav .navbar-brand{

}
 #logout-form .logout-button{
 	background: transparent !important;
 	border: none !important;
 	/*padding: 0.5em 1em !important;*/
 	color: #8EB2BB !important;
 	cursor: pointer;
 	text-decoration: underline;
 }
 .table-striped tbody tr:nth-of-type(odd){
    background-color: #F9F8F7;
}

.table-striped tbody tr:nth-of-type(even){
    background-color: #EEE9E6;
}

.tot-permits{
	background:#8EB2BB61 ;
  	height : 30px;
  	color: #400000;
}

.active-permits-row{
	background: #fff;
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
	cursor:pointer;
}

.active-permits-row:hover{
	background-color:#eee;
}

.red{
	color:red;
}
.orange{
	color:orange;
}
.yellow{
	color:yellow;
}
.green{
	color:green;
}
.blue{
	color:blue;
}

/*
.ui-grid-row:nth-child(even):hover .ui-grid-cell.ui-grid-cell-cov .ui-grid-row:nth-child(odd):hover .ui-grid-cell.ui-grid-cell-cov{
    background-color: #d5eaee;
    cursor:pointer;
}
.ui-grid-row:nth-child(2n) .ui-grid-cell .ui-grid-cell-cov{
	background-color: #d5eaee;
}

.ui-grid-row .ui-grid-cell.ui-grid-cell-cov{
	border-right:1px solid;
	border-right-color:#bbb;
	border-top:1px solid;
	border-top-color:#bbb;
}

.action-cell{
	vertical-align:center;
	color:#245563;
	cursor:pointer;
	
}
*/

/* UI GRID CUSTOM CSS DOES NOT WORK!!!!!!!!!!!!!*/
.ui-grid-row:nth-child(odd) .ui-grid-cell{background-color: #bed0d6}

.ui-grid-row:nth-child(even) .ui-grid-cell {
    background-color: blue;
}


/*Buttons*/
.btn-green{
	background-color: #108156!important;
    color: white!important;
}
.btn-red{
	background-color: red!important;
    color: white!important;
}

.btn-yellow{
	background-color: #F9D35A!important;
    color: white!important;
}

.btn-yellow.btn-send-company-form{
	border-radius: 16px;
    min-width: 180px;
}

.dialog-header{
	border-bottom: #8EB2BB 1px solid ;	
	color:#8EB2BB!important;
}

.btn-grey{
	background-color: gray!important;
	color: white!important;
 	/*border-radius: 8px!important;
	font-size: 1.2em;
	font-weight: bold;*/
}

/*Main loading*/
.loading{
	/*display: none;*/
	position: absolute;
    left: calc(50% - 20px);
    z-index: 100000001;
    top: calc(50% - 20px);
 }

 .loading-visible{
	background: grey;
	opacity: 0.5; 
	position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:100000000;
 }

 .loading-modal{
	/* position: fixed;*/
 }
 
#background{
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    /*overflow: hidden;*/
    left: 0;

}

/* Grid header ***********************************/
.ui-grid-header-jonix{
	background-color: #245563!important;
	color:#fff;
}

.ui-grid-top-panel{
	font-weight:100!important;
	font-size:16px;
}
/* Grid header ***********************************/

.home-grid{
	height:calc(100vh - 332px);
}

/*modal*/
.modal-header{
	cursor: move;
	background-color: #8EB2BB;
	color: white;
}
.modal-header h4{
	margin: 0;
}

.modal-header .close{
	color:white;
}
.modal-footer{
	border-top:none!important;
}

.modal-open .uib-datepicker-popup.dropdown-menu, .modal-body .uib-datepicker-popup.dropdown-menu {
	z-index:999999999;

	}
	
	
.modal-content-include{
	border-bottom:1px solid lightgrey;
	border-right:1px solid lightgrey;
	border-left:1px solid lightgrey;
}	


.modal-review-body{
	max-height: 600px;
    overflow: auto;
    height: 65vh;
    min-height: 300px;
}


.border-grey{
	 border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.bg-grey{
	background-color: #ddd!important;
}
.gray{
	color:gray;
}

.blue{
	color:#245563;
}
.mt-6{
	margin-top:30px;
}
.ui-grid-draggable-row-target {
  opacity: 0.5 !important;
}
.ui-grid-draggable-row {
  height: 30px;
}
.ui-grid-draggable-row-over {
  position: relative;
}
.ui-grid-draggable-row-over:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  border-bottom: 1px dotted #AAA;
}
.ui-grid-draggable-row-over--above:before {
  top: 0;
}
.ui-grid-draggable-row-over--below:before {
  bottom: 0;
}


/*Company subscription*/

#company-subscription{
	max-width:540px;
}

.form-shadow {
	border-right:1px solid #ddd;
	border-left:1px solid #ddd;
}

.form-shadow > div{
	box-shadow: 15px 3px 15px rgba(0,0,0,0.1);
	border-right:1px solid #ddd;
	border-left:1px solid #ddd;
}

.add-company-form .form-control[readonly]{
	background:#fff;
	border:none;
	padding:0;
}

.add-company-form .form-control::placeholder{
	font-size: 0.8rem;
    font-weight: 100;
}

.add-company-form .form-control{
	font-size: 0.8rem;
    font-weight: 100;
}

#add-company-name-input{
	font-size:1.5rem;
	font-weight: bold;
}

#add-company-name-input::placeholder{
	font-size:1.5rem;
	font-weight: bold;
}

#add-company-address-input{
	font-size-adjust: 0.75rem;
	font-weight: 200;
}

#add-company-description-input{
	font-size: 0.85rem;
	color:#000;
	font-weight: 200!important;
}

.add-company-form .input-group-text{
	background-color:transparent;
	border:none;
}

#add-company-category-input-container{
	right: 14px;
    top: -17px;
    text-align: center;
    /* width: 73px; */
    cursor: pointer;
    width: 77px;
}

#add-company-category-select-container{
    top: 28px;
    width: 58%;
}

.edit-category-text{
	padding: 3px;
    background: rgba(33, 33, 33, 0.3);
}

.company-logo-container{
	text-align: center;
}

.company-detail-photo{
  /* This is to keep the aspect ratio square */
  /*width: 100%;
  padding-bottom: 100%;*/
  background-image: url("../images/upload-img-bg.png");	
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-left:-15px;
  margin-right:-15px;
}

.cursor-pointer{
	cursor: pointer;
}

.company-detail-photo:after{
	content: "";
	padding-bottom: 100%;
	display:block;
}

.company-detail-photo a, .company-detail-photo a:visited, .company-detail-logo a, .company-detail-logo a:visited {
	color:#ddd;
}

.company-detail-logo a, .company-detail-logo a:visited {
	color:#000;
}

.add-img-text{
    position: absolute;
    width: 100%;
	padding: 10px;
	margin-top: 63%;
}

.edit-company-photo-text{
	color:#555!important;
}

.add-img-text .text-light{
	color:#ddd;
}

.add-img-text .edit-image-text{
	background: rgba(255,255,255,0.7);
	padding:8px 0;
}

.jonix-fake-header{
	border-top-right-radius: 25px;
	border-top-left-radius: 25px;
}

.jonix-fake-header .navbar-brand{
	color:#fff;
}

.input-form-fake{
	border:none;
	border-bottom:1px solid #ddd;
	z-index: 2;
    background: transparent;
}

.input-form-fake::placeholder{
	font-weight:normal;
}

.company-detail-logo{
    /*margin: auto;*/
    margin-top: -12%;
    width: 130px;
    /*height: 120px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border:4px solid #ffffff;
    border-radius: 50%;
	box-shadow: 0px 5px 8px rgba(0,0,0,0.16);
	background-color:#fff;
	/*display: flex;
    align-items: center;
	text-align: center;*/
	position: relative;
}

.add-logo-text{
	top:calc(50% - 12px);
}

.edit-logo-text{
	bottom: 15px;
    text-align: center;
    left: 0;
    background: rgba(255,255,255,.75);
    display: block;
    padding: 1px;
}

.btn-circle-icon{
	width: 35px;
	height: 35px;
	padding: 6px 0px;
	border-radius: 50px;
	font-size: 11px;
	text-align: center;
	line-height: 23px;
	border:2px solid #fff;
}

@media screen and (max-width:320px){
	.company-detail-logo{
		width: 90px!important;
	}
}

@media screen and (max-width:540px){
	.company-detail-logo{
		width: 110px!important;
	}
}

.company-detail-logo:after{
	content: "";
	padding-bottom: 100%;
	display:block;
}

.cropArea {
  /*background: #E4E4E4;
  overflow: hidden;*/
  font-size: 0px;
  line-height: 0px;
}


.invalid-no-bg{
	background: none;
	padding-left:46px;
}

.add-company-form .form-control.is-invalid{
	background-image: none;
}

/*REVIEWS*/

.review-name{
	color:#8EB2BB;
	font-weight:100;
}

.left-input{
	left:-30px;
    width: 12px;
}

.input-form-fake:focus{
	background:transparent;
	box-shadow:none;
}
.wid-12{
	width: 12px;
	z-index:1;
}

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: none !important;
}

.add-company-loading{
		left: 50%!important;
		top: 50vh!important;
		position: fixed!important;
		
}

@media screen and (min-width: 320px) and (max-width: 350px){
	.add-company-form .input-w-icon{
		width:auto;
		margin-left:-15px;
		margin-right:-15px;
	}

	.add-company-form .form-control::placeholder{
		font-size: 0.75rem;
	}
}

.no-border {
	border: 0;
}

.custom-ui-grid-cell{
	font-size: 125%;
}

.custom-ui-grid-center{
	text-align: center;
}

.custom-ui-grid-fa-center-padded{
	text-align: center;
	padding-top: 7px;
}

.ui-grid-header-cell-label {
	background-color: #245563!important;
	color:#fff;
	text-align: center;
	white-space: normal;
	-ms-text-overflow: clip;
	-o-text-overflow: clip;
	text-overflow: clip;
	overflow: visible;
}

.spinner-above-everything {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5); 
    z-index:10000;
    text-align: center;
    vertical-align: middle;
}

/*CENTERING VERTICALLY THE CONTENT IN THE UI GRID CELL*/
.ui-grid-header{
	width:fit-content;
}

.ui-grid-contents-wrapper{
	overflow-x:auto;
}



.ui-grid-cell{
	display:table;
	height:47px!important;
}

.ui-grid-cell-contents{
	display:table-cell;
	vertical-align: middle;
	font-size:12px;
	white-space: normal!important;
}

.ui-grid-cell-contents p{
	margin:0;
}


.ui-grid-header .ui-grid-header-viewport {
	height: 45px !important;
	font-size:12px;
}
@media screen and (max-width:767px){
    .navbar-light .navbar-toggler{
        background-color:#8EB2BB;
        border-color:#fff;
    }


    #top-main-nav{
    background-color: #8EB2BB!important;
    color:#fff;

    }

    #top-main-nav a{
    color:#fff;

    }

    #navbarSupportedContent input{
        background-color:#8EB2BB;
        border-color:#fff;
        width:100%;
        margin-top:45px;
        color:#fff!important;
    }
}