.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.circle {
   position:absolute;
   width: 80px;
   height: 80px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   -webkit-border-radius: 40px;
   -moz-border-radius: 40px;
   border-radius: 30;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.7);
   top:5px;
   left:Calc(50% - 40px);
   z-index:1;
}

.br-1 {
  border-radius: 10px !important;
}
.br-2 {
  border-radius: 20px !important;
}
.br-3 {
  border-radius: 30px !important;
}
.br-4 {
  border-radius: 40px !important;
}
.br-5 {
  border-radius: 50px !important;
}
.br-6 {
  border-radius: 60px !important;
}

.title-1 {
  border-radius: 10px !important;
  background-color: var(--AircraftGray);
  padding:4px;
  padding-left:20px;
  color: #fff;
}
.title-2 {
  border-radius: 20px !important;
  background-color: var(--AircraftGray);
  padding:7px;
  padding-left:20px;
  color: #fff;
}
.title-3 {
  border-radius: 30px !important;
  background-color: var(--AircraftGray);
  padding:9px;
  padding-left:20px;
  color: #fff;
}
.title-4 {
  border-radius: 40px !important;
  background-color: var(--AircraftGray);
  padding:11px;
  padding-left:20px;
  color: #fff;
}
.title-5 {
  border-radius: 50px !important;
  background-color: var(--AircraftGray);
  padding:13px;
  padding-left:20px;
  color: #fff;
}
.title-6 {
  border-radius: 60px !important;
  background-color: var(--AircraftGray);
  padding:15px;
  padding-left:20px;
}
/*.setBGLogo {
   background-image: url('../../img/bgsdgslogo.png'); 
   background-repeat: no-repeat; 
   background-position: center 70px;
   background-size: 150vh;
}*/

#close_overlay_report:hover {
  cursor: pointer;
  color:white;
}

#close_overlay_report {
  position:absolute;
  top:15px;
  right:15px;
  color:var(--gray);
}

.Blue-Bar-Header {
  background-color:var(--main_color); 
  height: 40px;
  color:white;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.6);
}

.Trans-Bar-Header {
  background-color:transparent; 
  padding:5px;
  font-weight:500;
  max-height: 40px;
}

.text-maincolor {
   color:var(--main_color);      
}

label.active {
  color: var(--main_color);
  font-weight: 600;
}

.trans {
   background:transparent;
} 

.btntools:hover {
   background:white;
   color: var(--main_color);
}

.btntools {
   margin-left: 0;
   margin-top: 4px;
   font-size: larger;
   border:1px solid white;
   background:transparent;
   color: white;
   transition:var(--transition);
}

.tools {
   cursor: pointer;
   font-size: large !important;
}

#loader {
   position:fixed;
   top: 0;
   left: 0%;
   padding: 10px;
   width: 100%;
   height: 100vh;
   background-color: rgba(0,0,0,0.5);
   z-index: 5;
   display:none;
}

.loader-- {
   position:absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 10px;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.5);
   z-index: 6;
   display:none;
}

.ReportHeader {
  display: none !important;
}  
  

.spinner-- {
   position:absolute;
   color:white;
   top:50%;
   left:50%;
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%,-50%);
}

.flex1 {
   flex : 1;
}
.flex3 {
   flex : 3;
}

.flex4 {
   flex : 4;
}

.box4-- {width:100%;}
@media only screen and (min-width: 576px) {
  .box4-- {
    width:100%;
  }
}

@media only screen and (min-width: 768px) {.box4-- {width:50%;}}
@media only screen and (min-width: 992px) {.box4-- {width:33%;}}
@media only screen and (min-width: 1200px) {.box4-- {width:25%;}}

/* --------------------------------------------------------------------- */
.box3-- {width:100%;}
.smallScreen-- {display: none;}
.sidetools_area {
  display: flex; 
  margin:0;
}
@media only screen and (min-width: 300px) {
  .box3-- {width:100%;} 
  .smallScreen-- {display: none;}
  .sidetools_area {display: flex;}
}
@media only screen and (min-width: 600px) {
  .box3-- {width:50%;}
  .smallScreen-- {display: inline;}
  .sidetools_area {display: none;}
}
@media only screen and (min-width: 1200px) {
  .box3-- {width:33%;}
  .smallScreen-- {display: inline;}
  .sidetools_area {display: none;}

}
/* --------------------------------------------------------------------- */


.box2-- {
  width: 50%;
  padding-bottom:5px;
  padding-right:5px;
}

/*Side Nav*/
#profile_area {
  background-color:white;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.6);
  padding: 10px;
}

#menu_area {
  padding: 7px;
}

.menuicons-- {
  margin-left:15px !important;
}

i.fa {
  font-size: medium;
}

.trunc {
  text-overflow: ellipsis; 
}
.sidetools_items {
  border:1px solid #fff;
  background-color: #fff;
  width:100%;
  height:100%;
  color: #000;
  line-height:1.3;
  font-size: .8rem;
  border-radius: 10px;
  font-weight: 600;
  transition: var(--transition);
  height: 60px;
  max-height: 60px;
  color:var(--main_color);
}

.sidetools_items:hover {
  border:1px solid #fff;
  background-color: var(--main_color);  
  color:#fff;
}

.sidetools_text {
  position: absolute;
  top:50%;  
}

.menuitems-- {
  background-color: #fff;
  padding: 7px;
  border-radius:15px; 
  border:1px solid var(--indigo); 
  color:var(--indigo); 
  padding: 5px 5px 0px 5px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  color:var(--indigo);
  transition: var(--transition);
}

.menuitems--:hover {
  background-color: var(--main_color);
  color:white;
  border:1px solid white; 
  cursor: pointer;
}

.sidenav {
   height: 100%; /* 100% Full-height */
   width: 250px; /* 0 width - change this with JavaScript */
   position: fixed; /* Stay in place */
   z-index: 99; /* Stay on top */
   top: 0; /* Stay at the top */
   left: -250px;
   background-color:var(--indigo);
   overflow-x: hidden; /* Disable horizontal scroll */
   transition: var(--transition); /* 0.5 second transition effect to slide in the sidenav */
   box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6);
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #000;
  text-decoration: underline;
  font-weight: 500;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
   position: absolute;
   top: 0;
   right: 10px;
   font-size: 16px;
   margin-left: 20px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
   transition: margin-left var(--transition);
   padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/*END Side Nav*/

/* BS Alter */
table.table-sm th, table.table-sm td {
   padding-top: 1px !important;
   padding-bottom: 1px !important;
}


/*Drop Zone Alter*/
.dropzone {
   padding:0 !important;
   min-height: 150px !important;
   background: var(--silver);
   border-radius: .2rem;
}
.dz-image {
   border-radius:.2rem !important;
}
.dz-preview {
   margin:.2rem !important;
   /*background: var(--dark);*/
   border-radius:.2rem !important;
}
/*.dz-button {
   color:#fff !important;
}*/
.dz-message {
   margin: .1rem !important;
}
btn-- {
  padding: .1rem !important;
}
.navbar {
  padding: 0px !important;
}