/*** GENERIC ***/
/* Definition which are non application specific and can be reused in any other site */

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
}

/* Margin */
.no-margin {margin: 0;}
.my-minus-1 {margin-top:    -1px; margin-bottom: -1px;}
.mx-minus-1 {margin-right:  -1px; margin-left: -1px;}
.mt-minus-1 {margin-top:    -1px;}
.mr-minus-1 {margin-right:  -1px;}
.mb-minus-1 {margin-bottom: -1px;}
.ml-minus-1 {margin-left:   -1px;}

/* Padding */
.no-padding {padding: 0;}

/* Scroll */
.noscroll { overflow: hidden; }

/* Sizing */
.w-10 {width: 10% !important;}
.w-20 {width: 20% !important;}
.w-30 {width: 30% !important;}
.w-40 {width: 40% !important;}
.w-50 {width: 50% !important;}
.w-60 {width: 60% !important;}
.w-70 {width: 70% !important;}
.w-80 {width: 80% !important;}
.w-90 {width: 90% !important;}
/* w-100 already defined within Bootstrap */
/* TODO create for all Bootstrap breakpoint */

/* Border */
.no-borders, .no-borders:focus{
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom-style: hidden;
    background-color: #eee;
    outline: none;
}

/* Outline */
.outline {
    outline-width: 1px;
    outline-style: solid;
}

/* Text transform */
.text-inherit {text-transform: inherit !important;}
.text-normal { 
    text-transform: initial !important;
}

/* Font weight */
.font-weight-inherit {font-weight: inherit !important;}
.font-weight-normal {font-weight: normal !important;}
.font-weight-lighter {font-weight: lighter !important;}
.font-weight-bold {font-weight: bold !important;}
.font-weight-bolder {font-weight: bolder !important;}
.font-weight-100 {font-weight: 100 !important;}
.font-weight-200 {font-weight: 200 !important;}
.font-weight-300 {font-weight: 300 !important;}
.font-weight-400 {font-weight: 400 !important;}
.font-weight-500 {font-weight: 500 !important;}
.font-weight-600 {font-weight: 600 !important;}
.font-weight-700 {font-weight: 700 !important;}
.font-weight-800 {font-weight: 800 !important;}
.font-weight-900 {font-weight: 900 !important;}

/* Visibility */
.hide-me {display: none;}

/* Background positionning */
.bg-center {background-position: center;}
.bg-initial {background-position: initial;}

/* When we don't want a bootstrap animation on data-toggle="collapse" */
.no-collapse-animation.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

/* Cursor display */
.pointer {cursor: pointer;}
.no-hover {cursor: initial;}
.disable {cursor: not-allowed !important;}
input[type="checkbox"]{cursor: pointer;}

/* Select desabling */
.no-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                          supported by Chrome, Opera and Firefox */
}

/* Opacity */
.opacity-0 {opacity: 0;}
.opacity-10 {opacity: 0.1;}
.opacity-20 {opacity: 0.2;}
.opacity-30 {opacity: 0.3;}
.opacity-40 {opacity: 0.4;}
.opacity-50 {opacity: 0.5;}
.opacity-60 {opacity: 0.6;}
.opacity-70 {opacity: 0.7;}
.opacity-80 {opacity: 0.8;}
.opacity-90 {opacity: 0.9;}
.opacity-100 {opacity: 1;}
.hover-opacity-0:hover {opacity: 0 !important;}
.hover-opacity-10:hover {opacity: 0.1 !important;}
.hover-opacity-20:hover {opacity: 0.2 !important;}
.hover-opacity-30:hover {opacity: 0.3 !important;}
.hover-opacity-40:hover {opacity: 0.4 !important;}
.hover-opacity-50:hover {opacity: 0.5 !important;}
.hover-opacity-60:hover {opacity: 0.6 !important;}
.hover-opacity-70:hover {opacity: 0.7 !important;}
.hover-opacity-80:hover {opacity: 0.8 !important;}
.hover-opacity-90:hover {opacity: 0.9 !important;}
.hover-opacity-100:hover {opacity: 1 !important;}
/* TODO create for all Bootstrap breakpoint */

/* Alert */
.alerts-top-right{
    position: fixed;
    top: 100px;
    right: 50px;
    z-index: 2000;
    width: calc(100% - 60px);
}
.alerts-bottom-right{
    position: fixed;
    bottom: 30px;
    right: 50px;
    z-index: 2000;
    width: calc(100% - 60px);
}
.alert{
    clear: both;
    float: right;
    min-width: 25%;
}

/* Alignment */
i.material-icons {vertical-align: bottom;}

/* Transitions */
.transition-all-1-ease,
.transition-all-1-ease::before,
.transition-all-1-ease::after {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.transition-all-05-ease,
.transition-all-05-ease::before,
.transition-all-05-ease::after {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.transition-all-05-ease-out,
.transition-all-05-ease-out::before,
.transition-all-05-ease-out::after {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.transition-none,.transition-none::before,.transition-none::after {
    webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

/* Rotation */
.rotate-me-0 {
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
}
.rotate-me-90 {
    -webkit-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}
.rotate-me-180 {
    -webkit-transform: rotateZ(-180deg);
    -moz-transform: rotateZ(-180deg);
    transform: rotateZ(-180deg);
}
@media (min-width: 576px)  {
    .rotate-me-sm-0 {
        -webkit-transform: none;
        -moz-transform: none;
        transform: none;
    }
    .rotate-me-sm-90 {
        -webkit-transform: rotateZ(90deg);
        -moz-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
    }
    .rotate-me-sm-180 {
        -webkit-transform: rotateZ(-180deg);
        -moz-transform: rotateZ(-180deg);
        transform: rotateZ(-180deg);
    }
}
@media (min-width: 768px)  {
    .rotate-me-md-0 {
        -webkit-transform: none;
        -moz-transform: none;
        transform: none;
    }
    .rotate-me-md-90 {
        -webkit-transform: rotateZ(90deg);
        -moz-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
    }
    .rotate-me-md-180 {
        -webkit-transform: rotateZ(-180deg);
        -moz-transform: rotateZ(-180deg);
        transform: rotateZ(-180deg);
    }
}
@media (min-width: 992px)  {
    .rotate-me-lg-0 {
        -webkit-transform: none;
        -moz-transform: none;
        transform: none;
    }
    .rotate-me-lg-90 {
        -webkit-transform: rotateZ(90deg);
        -moz-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
    }
    .rotate-me-lg-180 {
        -webkit-transform: rotateZ(-180deg);
        -moz-transform: rotateZ(-180deg);
        transform: rotateZ(-180deg);
    }
}
@media (min-width: 1200px) {
    .rotate-me-xl-0 {
        -webkit-transform: none;
        -moz-transform: none;
        transform: none;
    }
    .rotate-me-xl-90 {
        -webkit-transform: rotateZ(90deg);
        -moz-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
    }
    .rotate-me-xl-180 {
        -webkit-transform: rotateZ(-180deg);
        -moz-transform: rotateZ(-180deg);
        transform: rotateZ(-180deg);
    }
}

/* Border */
.border-0        {border:        none !important;}
.border-top-0    {border-top:    none !important;}
.border-right-0  {border-right:  none !important;}
.border-bottom-0 {border-bottom: none !important;}
.border-left-0   {border-left:   none !important;}
@media (min-width: 576px) {
    .border-sm          {border:        1px solid !important;}
    .border-sm-top      {border-top:    1px solid !important;}
    .border-sm-right    {border-right:  1px solid !important;}
    .border-sm-bottom   {border-bottom: 1px solid !important;}
    .border-sm-left     {border-left:   1px solid !important;}
    .border-sm-0        {border:        none !important;}
    .border-sm-top-0    {border-top:    none !important;}
    .border-sm-right-0  {border-right:  none !important;}
    .border-sm-bottom-0 {border-bottom: none !important;}
    .border-sm-left-0   {border-left:   none !important;}
}
@media (min-width: 768px) {
    .border-md          {border:        1px solid !important;}
    .border-md-top      {border-top:    1px solid !important;}
    .border-md-right    {border-right:  1px solid !important;}
    .border-md-bottom   {border-bottom: 1px solid !important;}
    .border-md-left     {border-left:   1px solid !important;}
    .border-md-0        {border:        none !important;}
    .border-md-top-0    {border-top:    none !important;}
    .border-md-right-0  {border-right:  none !important;}
    .border-md-bottom-0 {border-bottom: none !important;}
    .border-md-left-0   {border-left:   none !important;}
}
@media (min-width: 992px) {
    .border-lg          {border:        1px solid !important;}
    .border-lg-top      {border-top:    1px solid !important;}
    .border-lg-right    {border-right:  1px solid !important;}
    .border-lg-bottom   {border-bottom: 1px solid !important;}
    .border-lg-left     {border-left:   1px solid !important;}
    .border-lg-0        {border:        none !important;}
    .border-lg-top-0    {border-top:    none !important;}
    .border-lg-right-0  {border-right:  none !important;}
    .border-lg-bottom-0 {border-bottom: none !important;}
    .border-lg-left-0   {border-left:   none !important;}
}
@media (min-width: 1200px) {
    .border-xl          {border:        1px solid !important;}
    .border-xl-top      {border-top:    1px solid !important;}
    .border-xl-right    {border-right:  1px solid !important;}
    .border-xl-bottom   {border-bottom: 1px solid !important;}
    .border-xl-left     {border-left:   1px solid !important;}
    .border-xl-0        {border:        none !important;}
    .border-xl-top-0    {border-top:    none !important;}
    .border-xl-right-0  {border-right:  none !important;}
    .border-xl-bottom-0 {border-bottom: none !important;}
    .border-xl-left-0   {border-left:   none !important;}
}

/* Bootstrap flex-grow control 'polyfill' */
/* TODO */
@media (min-width: 1200px) {
    .flex-xl-grow-5 {flex-grow: 5 !important;}
}










/* RESPONSIVE CUTOFFS */

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
}

/* Devices between 1024 px and 1200px */
@media (min-width: 1024px) and (max-width: 1199.98px) {
}

/* Extra large devices (large desktops, 1024px and up) */
@media (min-width: 1024px) {
}
/* Large devices (desktops, less than 1024px) */
@media (max-width: 1023.98px) {
}

/* Devices between 992 px and 1200px */
@media (min-width: 992px) and (max-width: 1199.98px) {
}

/* Devices between 992 px and 1024px */
@media (min-width: 992px) and (max-width: 1023.98px) {
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
}

/* Devices between 768 px and 1200px */
@media (min-width: 768px) and (max-width: 1199.98px) {
}

/* Devices between 768 px and 992px */
@media (min-width: 768px) and (max-width: 991.98px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
}

/* Super small devices (mobile, 400px and up) */
@media (min-width: 400px) {
}
/* Super small devices (mobile, less than 400px) */
@media (max-width: 399.98px) {
}