:root {
  --theme-main-color: #007BFF ;
}

/*---Media Queries --*/
@media (max-width: 992px) {



}
@media (max-width: 768px) {

  
}
@media (max-width: 576px) {
  

}


/* FIELD READONLY */
.bg-dark-brown {    background-color: #bcbcbc;  }

/* Navbar */

.linkColor         {  color:var(--theme-main-color) !important;  }                  /* equals to rgb(0,123,255) */
.lesspaddingleft   {  padding-left: 0rem !important; }                              /* shifts navbar toggler icon to the left in mobile devices */
.nav-item a:active {  background-color: skyblue !important; text-decoration: none;}
.nav-item a:hover  {  background-color: skyblue !important; text-decoration: none;}

/* Carousel - make the image fully responsive (img-fluid not used)*/
.carousel-inner img {  width:  100%; height: 100%; margin: auto; } 

/* Distance of Carousel Controls from the bottom   of the carousel */
.carousel-control-prev,
.carousel-control-next{  bottom: 10%; }

/*---Firefox Bug Fix --*/

.carousel-item {  transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease; transition: transform 0.5s ease, -webkit-transform 0.5s ease; -webkit-backface-visibility: visible; backface-visibility: visible; }    

ul                 {   list-style-type: none; }

/* Jumbotron */
.jumbotron         { padding-top: 1rem; padding-right: 0rem;  padding-bottom: 0.5rem; padding-left: 0rem;  width:100%; background-color: #e9ecef; margin-bottom: 2rem; }
.jumbotron_text    { color:var(--theme-main-color)!important; font-weight: 600; }   /* fonts -> lighter , normal,       bold,  bolder,  */
                                                                     /*                    400,          700,            */
                                                                     /*          100-300,        500-600,       800,900  */
                                                                     
/* Horizontal Divider */
hr.thicker {  border: 0;   border-top: 2px solid var(--theme-main-color); }

h6.line { display: flex; flex-direction: row; }
h6.line:before, 
h6.line:after{ content: ""; flex: 1 1;  border-bottom: 3px solid var(--theme-main-color); margin: auto; }                                                           


/* Remove Input field up/down arrows for input number type */

input[type="number"] {  -moz-appearance: textfield; }                                         /* Firefox           */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none;   margin: 0; }    /* Chrome  & Safari  */

                                                                                              /* IE - Not  needed  */


/*--- Fixed Background Image --*/
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}

/*--- Bootstrap Padding Fix --*/
[class*="col-"] { padding: 1.5rem; }

/* Counter Padding */
.counterpadding { padding-top: 0.375rem !important;  padding-right: 0.75rem !important; padding-bottom: 0.375rem !important;  padding-left: 0.75rem !important;  }  /*  */

.must_fill_not   { display:none !important;  } /* Dont remove */

.custom-width { width: fit-content; }


/* Notes */

/* 1.
Inline styles added to an element (e.g., style="font-weight:bold") 
always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.

*/

/* 2. Bootstrap 4 Display Tiers or “BreakPoints”…

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap 4

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

*/