/* <editor-fold defaultstate="collapsed" desc=" REM: Screen sizes || Breakpoint "> */
/*
Media Queries for Standard Devices
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

*************************************************************
From: https://getbootstrap.com/docs/4.0/layout/overview/
// (xs) )Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

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

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

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

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


From: https://stackoverflow.com/questions/18477016/switching-css-classes-based-on-screen-size
// Smartphones (portrait and landscape) ----------- 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { }

// Smartphones (landscape) ----------- 
@media only screen and (min-width : 321px) { }

// Smartphones (portrait) ----------- 
@media only screen and (max-width : 320px) { }

// iPads (portrait and landscape) ----------- 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { }

// iPads (landscape) ----------- 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { }

// iPads (portrait) ----------- 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { }

// Desktops and laptops ----------- 
@media only screen and (min-width : 1224px) { }

// Large screens ----------- 
@media only screen and (min-width : 1824px) { }

// iPhone 4 ----------- 
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { }
*/
/* </editor-fold> */

::selection{background: yellow;}   
::-moz-selection{background: yellow;}   

.nav .nav-item {cursor: pointer; }

/* <editor-fold defaultstate="collapsed" desc=" Menu collapse & Page-Data slide [mobile mode] "> 
    see also: https://bootsnipp.com/snippets/yNvPG 
    also: https://blackrockdigital.github.io/startbootstrap-simple-sidebar/ */
@media screen and (max-width: 768px) {
    /* Navbar's menu button [mobile mode] */
    .navbar-toggler{top:7px; height: 42px; padding: 0px 11px 4px 11px;}
    
    /* Navbar's menu collapse [mobile mode] */
    .navbar-collapse{top:50px; bottom:0; width:200px; position:fixed; overflow:hidden; transition:width .4s;}
    .navbar-collapse.left {left:0px; margin-left: 10px;}
    .navbar-collapse.right{right:10px;}
    .navbar-collapse.hide {width:0;}
    
/*    .page-data-container{width:100%; position:relative;}
    .page-data-container.left{left:0; transition:left .4s;}
    .page-data-container.right{right:0; transition:right .4s;}
    .page-data-container.left.slide{left:200px;}
    .page-data-container.right.slide{right: 200px;}*/
    
    .page-data_w{width:100%; position:relative;}
    .page-data_w.left{left:0; transition:left .4s;}
    .page-data_w.right{right:0; transition:right .4s;}
    .page-data_w.left.slide{left:200px;}
    .page-data_w.right.slide{right: 200px;}
}
@media screen and (min-width: 769px) {
    .navbar-nav .nav-link{    
        padding-bottom: 0!important;
        padding-top: 0!important;
    }
}
/* </editor-fold> */

/* <editor-fold defaultstate="collapsed" desc=" Navbar above / sadow / below "> */
nav.shadow{     /*  http://www.hongkiat.com/blog/creative-css-shadows/  */  
    /*-webkit-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.75);*/
    box-shadow:0 3px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset;
}

nav *{ /* Animation */
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;   /* color: white !important; */
}
nav.sm, nav.xs {top: 0;}

.navbar_above_row {
    position: fixed; top: 0; left: 0; width: 100%;
    border-top: solid 3px yellow;
    text-align: center; 
    -webkit-transition: all 0.4s ease;
    transition:all 0.4s ease;
}
.navbar_above_row.hide {height: 0; padding: 0!important; overflow: hidden;}

.navbar_dimmText_below{
    display: none;
    position: absolute; width: 100%; height: 40px;
    background: white; opacity: 0.8;
    
    /* diffrent way to do it
    background:black; color:white;
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#000), to(#fff)); */
}
/* </editor-fold>  */

/* <editor-fold defaultstate="collapsed" desc=" Animated navbar Menu's' Icon "> */
/*Fromm http://codepen.io/impondesk/pen/EaKoXY */
/*      https://julienmelissas.com/animated-x-icon-for-the-bootstrap-navbar-toggle/  */
.navbar-toggler {
    position: relative;
    padding-bottom: .8rem;
    background-color: transparent;
    background-image: none;
    border: 1px solid #f8f9fa;
    border-radius: 2px;
}
@media screen and (max-width: 768px) {
    .navbar-toggler {padding-bottom: .6rem;}
}

.navbar-toggler .icon-bar {
    position: relative;
    transition: all 500ms ease-in-out;
    display: block; width: 22px; height: 2px;
    border-radius: 1px;
    background-color: #f8f9fa;
    margin-top: 4px; 
}

.navbar-toggler .icon-bar:nth-of-type(1) { margin-top: 10px; }

.navbar-toggler.active .icon-bar:nth-of-type(1) {
    top: 6px;
    transform: rotate(45deg);
    background: red;
}

.navbar-toggler.active .icon-bar:nth-of-type(2) {
    background-color: transparent;
}

.navbar-toggler.active .icon-bar:nth-of-type(3) {
    top: -6px;
    transform: rotate(-45deg);
    background: red;
}
/* </editor-fold> */

/* <editor-fold defaultstate="collapsed" desc=" Toggle Button by CSS only "> */
/* From:  https://bootsnipp.com/snippets/0lN4G */
/* alternativly: http://www.bootstraptoggle.com/ */
.toggle-button {
    position: relative;
    display: inline-block;
    color: #fff;
}
.toggle-button label {
    display: inline-block;
    cursor: pointer;
    text-align: left; 
}
.toggle-button input { display: none; }
.toggle-button__icon {
    cursor: pointer;
    pointer-events: none; 
}
.toggle-button__icon:before, .toggle-button__icon:after {
      content: "";
      position: absolute;
      top: 45%;
      left: 35%;
      transition: 0.2s ease-out; 
}
.toggle-button--aava label {
    height: 50px;
    line-height: 50px;
    transition: all 0.2s;
    border-radius: 2px; 
 }
.toggle-button--aava label:before, .toggle-button--aava label:after {
        position: absolute;
        right: 1.5rem;
        transition: all 0.2s .1s ease-out; 
}
.toggle-button--aava label:before { content: attr(data-on-text); }
.toggle-button--aava label:after { content: attr(data-off-text); }
.toggle-button--aava input[type=checkbox] + label {
    width: 120px;
    background: #FF5335; 
}
.toggle-button--aava input[type=checkbox] + label:before {
    opacity: 0;
    transform: translate(0, 20px); 
}
.toggle-button--aava input[type=checkbox] + label:after {
    opacity: 1;
    transform: translate(0, 0);
}

.toggle-button--aava input[type=checkbox]:checked ~ label {
    width: 120px;
    background: #61B136; 
}
.toggle-button--aava input[type=checkbox]:checked ~ label:before {
    opacity: 1;
    transform: translate(0, 0); 
}
.toggle-button--aava input[type=checkbox]:checked ~ label:after {
    opacity: 0;
    transform: translate(0, -20px);
}
.toggle-button--aava input[type=checkbox]:checked ~ .toggle-button__icon:before {
    transform: translate(-10%, 100%) rotate(45deg);  /* v */
    width: 16.66667px;
}
.toggle-button--aava input[type=checkbox]:checked ~ .toggle-button__icon:after {
    transform: translate(30%) rotate(-45deg);   /* v */
}
.toggle-button--aava .toggle-button__icon {
    position: absolute;
    left: 0;
    top: 0;
    height: 50px;
    width: 50px; 
}
.toggle-button--aava .toggle-button__icon:before, .toggle-button--aava .toggle-button__icon:after {
    height: 3px;    /* x */
    border-radius: 3px;
    background: #fff; 
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); 
}
.toggle-button--aava .toggle-button__icon:before {
    width: 25px;    /* x */
    transform: rotate(45deg); 
}
.toggle-button--aava .toggle-button__icon:after {
    width: 25px;    /* x */
    transform: rotate(-45deg); 
}
/* </editor-fold> */

/* <editor-fold defaultstate="collapsed" desc=" Collapse / accordion - Add Arrow "> */
.colpsAcdnArw{
    cursor: pointer; 
    -webkit-transition: all 0.18s ease;
            transition: all 0.18s ease; 
}
.a_up {
    transform: rotate(-180deg); 
    margin-left: -15px; margin-right: 15px;
}
.a_right { 
    transform: rotate(-90deg);
    position: relative;
    top: 5px;
}
.a_up:before { color: aquamarine; }
/* </editor-fold> */

/* <editor-fold defaultstate="collapsed" desc=" el to resposive Tab (desktop Tab -> mobile Accordion "> */
ul.respTab_tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; width: 100%; }
ul.respTab_tabs li {
    float: left;
    margin: 0;
    cursor: pointer;
    padding: 0px 21px;
    height: 31px;
    line-height: 31px;
    border-bottom: 1px solid #ddd;
    color: #0c5460;
    overflow: hidden;
    position: relative;
}
ul.respTab_tabs li:hover { background-color: #ccc; color: #333; }
ul.respTab_tabs li.active {
    background-color: #fff;
    color: #007bff;
    border-color: #ddd #ddd #fff;
    border-style: inset;
    border-top-left-radius: .35rem;
    border-top-right-radius: .35rem;
    display: block;
}
.respTab_container {
    border-top: none;
    clear: both;
    float: left;
    width: 100%;
    overflow: auto;
}
.respTab_container .tab_content { padding: 20px; display: none; }
.respTab_container .tab_drawer_heading, .respTab_container > i.fas { display: none; }
@media screen and (max-width: 991px) {
    .respTab_tabs { display: none;}
    .respTab_container { margin-top: 1rem; }
    .respTab_container .tab_drawer_heading {
        background-color: #e9ecef;
        color: #ffc107;
        border-top: 1px solid #333;
        margin-top: 1rem;
        margin: 0;
        padding: 5px 20px;
        display: block;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .respTab_container .d_active { background-color: #ecf2f9; color: #17a2b8; }
    .respTab_container > i.fas { display: block; }
}

.respTab_container .a_down {
    cursor: pointer;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease; 
}
.respTab_container .a_right { 
    transform: rotate(-90deg);
    position: relative; top: 5px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease; 
}
/* </editor-fold> */

/* <editor-fold defaultstate="collapsed" desc=" AJAX Loading sign (consist of: CSS & JS) ">*/ 
    /* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.AJAX_modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba(3, 3, 3, 0.3)
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 40% 
                no-repeat;
     /* rgba( 255, 255, 255, .8 ) */
     /* 50% 50%  */
}
/* When the body has the loading class, we turn the scrollbar off with overflow:hidden */
body.loading .AJAX_modal { overflow: hidden; }
/* Anytime the body has the loading class, our  modal element will be visible */
body.loading .AJAX_modal { display: block; }
/* </editor-fold>*/

/* See ALSO this very nice btn animation on http://jsfiddle.net/apaul34208/M3mEX/2/ */
.button_click_animate {
    transition: all 0.1s  !important;
    -webkit-transition: all 0.1s  !important;
}
.button_click_animate:active {
    transform: translate(0px,5px);
    -webkit-transform: translate(0px,5px);
    border-bottom: 1px solid;
}

.iHighlight { background: yellow !important; }
.iSelected { background: yellow !important; }