/*****************************************
bootstrap4plus
******************************************
Additional utility classes starts here
******************************************
by dev.x-jpdn.x-net X itchiweb.x-com
*/

/************
Font size
*/
.x-small{
   font-size:0.8rem;
}


/************
Links
*/

/* remove default ugly outline/glow/border on click, comment this section to goback to Boostrap 4 default */
*:hover,
*:focus,
*:active
 {
  outline: none;
  box-shadow: none !important;
  -webkit-appearance: none;
}


/************
Opacity
*/
.x-opacity-5{
    opacity:0.5;
}

.x-hidethis{
    display:none;
}

/************
heights (rem)
*/
.x-h1rem{height:1rem;}
.x-h2rem{height:2rem;}
.x-h3rem{height:3rem;}
.x-h4rem{height:4rem;}
.x-h5rem{height:5rem;}
.x-h6rem{height:6rem;}
.x-h7rem{height:7rem;}
.x-h8rem{height:8rem;}
.x-h9rem{height:9rem;}
.x-h10rem{height:10rem;}
.x-h11rem{height:11rem;}
.x-h12rem{height:12rem;}
/************
heights (px)
*/
.x-h10 {
    height: 10px;
}
.x-h20 {
    height: 20px;
}
.x-h30 {
    height: 30px;
}
.x-h40 {
    height: 40px;
}
.x-h50 {
    height: 50px;
}
.x-h60 {
    height: 60px;
}
.x-h70 {
    height: 70px;
}
.x-h80 {
    height: 80px;
}
.x-h90 {
    height: 90px;
}
.x-h100 {
    height: 100px;
}
.x-h110 {
    height: 110px;
}
.x-h120 {
    height: 120px;
}
.x-h130 {
    height: 130px;
}
.x-h140 {
    height: 140px;
}
.x-h150 {
    height: 150px;
}
.x-h200 {
    height: 200px;
}
.x-h250 {
    height: 250px;
}
.x-h300 {
    height: 300px;
}
.x-h350 {
    height: 350px;
}
.x-h400 {
    height: 400px;
}
.x-h450 {
    height: 450px;
}
.x-h500 {
    height: 500px;
}

/************
width (rem)
*/
.x-w1rem{width:1rem;}
.x-w2rem{width:2rem;}
.x-w3rem{width:3rem;}
.x-w4rem{width:4rem;}
.x-w5rem{width:5rem;}
.x-w6rem{width:6rem;}
.x-w7rem{width:7rem;}
.x-w8rem{width:8rem;}
.x-w9rem{width:9rem;}
.x-w10rem{width:10rem;}
.x-w11rem{width:11rem;}
.x-w12rem{width:12rem;}
/************
width (px)
*/
.x-w10 {
    width: 10px;
}
.x-w20 {
    width: 20px;
}
.x-w30 {
    width: 30px;
}
.x-w40 {
    width: 40px;
}
.x-w50 {
    width: 50px;
}
.x-w60 {
    width: 60px;
}
.x-w70 {
    width: 70px;
}
.x-w80 {
    width: 80px;
}
.x-w90 {
    width: 90px;
}
.x-w100 {
    width: 100px;
}
.x-w110 {
    width: 110px;
}
.x-w120 {
    width: 120px;
}
.x-w130 {
    width: 130px;
}
.x-w140 {
    width: 140px;
}
.x-w150 {
    width: 150px;
}
.x-w200 {
    width: 200px;
}
.x-w250 {
    width: 250px;
}
.x-w300 {
    width: 300px;
}
.x-w350 {
    width: 350px;
}
.x-w400 {
    width: 400px;
}
.x-w450 {
    width: 450px;
}
.x-w500 {
    width: 500px;
}


/***********
Images
*/

/* background images */
.x-bgimg{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;  
}

/************
fx
*/
.x-desaturate {
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
    filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */   
}

/* fx : desaturate, saturate on hover */
.x-saturate-hover{
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
    filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
    
    opacity: 0.7;
    transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
}
.x-saturate-hover:hover{
    filter: none; /* IE6-9 */
    -webkit-filter: none; /* Google Chrome, Safari 6+ & Opera 15+ */
    filter: none; /* Microsoft Edge and Firefox 35+ */
    opacity: 1;
}


/***********************
Navbar
*/

/* drop shadow*/
.navbar.x-dropshadow{
    -webkit-box-shadow: 0px 6px 10px 0px rgba(203, 203, 203, 0.54);
    -moz-box-shadow: 0px 6px 10px 0px rgba(203, 203, 203, 0.54);
    box-shadow: 0px 6px 10px 0px rgba(203, 203, 203, 0.54);
}

/* Navbar Color sets, easy class to change navbar toggler icons colors */
/* white : add .x-navbar-toggler-white to nav.navbar */
.navbar.x-navbar-toggler-white .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar.x-navbar-toggler-white .navbar-toggler {
  border-color: transparent;
} 
/*
navbar dropdwon sub-menu : show on mouse CLICK or HOVER  (JS) and position (CSS),
add class xnav-submenu to pdoMennu &outerClass to fix submenu align
*/
.xnav-submenu .dropdown-submenu {
  position: relative;
}
.xnav-submenu  .dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}
.xnav-submenu .dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}

/* white links : .x-navbar-white */
.x-navbar-white .navbar-nav .nav-link {
    color: rgba(255,255,255,1);
}

/***********************
Add buttons colorsets
*/
/* fluo green */
.xbtn-hviz-green{
    background-color: #b8f83c;
    color: #6395cb !important;
}
.xbtn-hviz-green:hover,.xbtn-hviz-green:focus{
    background-color: #d8ff8e;
    color: #296eba !important;
}

/* red 1*/
.xbtn-hviz-red1{
    background-color: #ff5c5b;
    color: #8a0303 !important;
}
.xbtn-hviz-red1:hover,.xbtn-hviz-red1:focus{
    background-color: #ff0202;
    color: #fff6f5 !important;
}

/* fluo blue */
.xbtn-hviz-blue{
    background-color: #00c4db;
    color: #f7fbff !important;
}
.xbtn-hviz-blue:hover {
    background-color: #04609b;
    color: #8ffbff !important;
}


/*************************
Buttons chapes
*/

/* Font Awesome circle button
add classes :
btn-circle mr-3 d-inline-flex justify-content-center align-items-center
to:
.snlink in CHUNK
*/
.x-btn-circle {
    background-color: transpanrent;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    border:solid 1px rgba(190,0,0,1);
}

/**************************
TABLES
*/
.x-table{
    display:table;
}
.x-table-cell{
    display:table-cell;
}




/**************************
FORMS
*/

/* FORMS errors style. usage: form.x-errors-inline. Errors will appears inside fields */
.x-errors-inline .form-group{
    position:relative;
}
form.x-has-errors .form-group .x-label-error{
   display:inline-block;
}

/* inline mlsg */
form .form-group .x-label-error{
    display:none;
}
/* inline msg */
.x-errors-inline .form-group .x-label-error{
    color:#fff;
    opacity: 1;
    top: 0;
    margin: 5px;
    right: 0px;
    position: absolute;
    height: 26px;
    line-height: 26px;
    vertical-align: middle;
    padding: 0 10px;
    border-radius: 1px;
    background-color: #ef100e;
    font-size:14px;
    font-weight:normal;
    z-index:2;
    width: calc(100% - 10px);
}
/* remove error msg on focus or hover */
.x-errors-inline .form-group:focus .x-label-error,
.x-errors-inline .form-group:hover .x-label-error{
    display:none;
}


/* FORMS placeholders */
/* stealth placeholders */
form.x-placeholders-stealth .form-control:placeholder {
    color: #6394ca;
    opacity: 0.5;
}

form.x-placeholders-stealth input::-webkit-input-placeholder {
    color: #999;
}
form.x-placeholders-stealth input:focus::-webkit-input-placeholder {
    color: #999;
}
/* placeholders color on focus */
/* Firefox < 19 */
form.x-placeholders-stealth input:-moz-placeholder {
    opacity:0.5;
}
form.x-placeholders-stealth input:focus:-moz-placeholder {
    opacity:0.2;}

/* Firefox > 19 */
form.x-placeholders-stealth input::-moz-placeholder {
    opacity:0.5;}
form.x-placeholders-stealth input:focus::-moz-placeholder {
    opacity:0.2;}

/* Internet Explorer 10 */
form.x-placeholders-stealth input:-ms-input-placeholder {
    opacity:0.5;}
form.x-placeholders-stealth input:focus:-ms-input-placeholder {
    opacity:0.2;}


/* ugly FF red border fix */
form.x-placeholders-stealth:not(output):-moz-ui-invalid:not(:focus) {
  box-shadow: none;
}
form.x-placeholders-stealth:not(output):-moz-ui-invalid:-moz-focusring:not(:focus) {
  box-shadow: none;
}

/* FORMS : border : no round. Usage : form.x-formstyle-square */
/* x-formstyle-square  */
form.x-formstyle-square input[type="text"],
form.x-formstyle-square input[type="email"],
form.x-formstyle-square input[type="password"],
form.x-formstyle-square .input-group > .input-group-prepend > .btn,
form.x-formstyle-square .input-group > .input-group-prepend > .input-group-text,
form.x-formstyle-square .input-group > .input-group-append:not(:last-child) > .btn,
form.x-formstyle-square .input-group > .input-group-append:not(:last-child) > .input-group-text,
form.x-formstyle-square .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
form.x-formstyle-square .input-group > .input-group-append:last-child > .input-group-text:not(:last-child){
    border-radius: 0;
}



/**********************************
Collapse utilities
Class to do something on Bootstrap4 collapse events
*/

/* b4 collapse btn :  rotate FA icon on show (e.g. accordions), usefull for FontAwesome icons, just add the class to the button or link triggering collapse action: btn btn-default xbtn-expanded-r90 */
.xbtn-expanded-r90[aria-expanded='true'] .show-rotate{
        transform:rotate(90deg);
}




/******************
Carousel
Add .x-carousel calss to bootstrap carousel parent
- masquer la navigation : .x-carousel-hide-arrows
- propulser les controles au premier plan : .x-carousel-control
T:\Computing\Web authoring\Frameworks\Bootstrap\B4\Carousel
*/
/* centrage vertical des captions */
.x-carousel .carousel-caption.centerthis{
  z-index:20;
  top: 50%;
  transform: translateY(-50%);
  bottom: initial;
}
/* carousel navi > .x-carousel-control */
.x-carousel .x-carousel-control{
    z-index:30;
}
/* hide carousel left/right arrows */
.x-carousel.x-carousel-hide-arrows .x-carousel-control{
    display:none;
}



/***********************************
container-fluid on specific viewport
*/

/***** fluid on xs, sm, md, container on lg, xl *****/
.x-container-fluid-up-lg {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
/*  Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    /* normal b4 conatiner */
    .x-container-fluid-up-lg {
        max-width: 960px;
    }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    /* normal b4 conatiner */
    .x-container-fluid-up-lg {
        max-width: 1140px;
    }
}

/***** fluid on xs, sm, md, lg container on xl *****/
.x-container-fluid-up-xl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    /* normal b4 conatiner */
    .x-container-fluid-up-xl {
        max-width: 1140px;
    }
}

/* fluid up to MD included e.g. for navbar */
@media (max-width: 992px) {
  .container.x-fluid-upto-md{
    width: 100%;
    max-width: none;
  }
}