/*  https://www.taniarascia.com/you-dont-need-a-framework/  */


/* ALL SIZES STYLES */

.app-hidden {
    display: none;
}

.app-shell-container {
    margin: 0 auto;
    padding: 0 10px;
    max-width: 2000px;
}


/*===================== FORMS ======================*/

textarea:focus,
input:focus {
    border: 1px solid #09C;
}

textarea[readonly] {
    background-color:#d3d3d3 ;
    }


/* AJAX BUSY INDICATION */
/*}  $('.app-frm-buttons').addClass('app-ajax-busy');*/
.app-frm-buttons {
  padding-top: 5px;
    margin-top: 10px;
    border-top: 2px solid white;
}

.app-ajax-busy {  
    border-top: 2px dashed #b0e900;
}

button.disabled {
  opacity: 0.65; 
  cursor: not-allowed; 
}


/*form group inputs*/

.app-form-group {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
    display: block;
    padding-bottom: 1.5em;
}

div.app-form-group input,
div.app-form-group label {
    display: block;
}

div.app-form-group input,
div.app-form-group textarea {
    border: 1px solid #999;
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

div.app-form-group label {
    color: darkblue;
}

.app-error {
    color: red;
}
.app-error:empty {
   display: none;
}


/* ul simple link lists of data (i.e. customers list) */

.app-list ul,
.app-list li {
    padding: 0px;
    margin: 0px;
    list-style: none;
    list-style-image: none;
}

.app-list ul {
    margin-top: 50px;
    width: 100%;
}

.app-list li {
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    text-align: left;
    width: 100%;
}

.app-list li {
    background: #ffe37b;
}

.app-list li:nth-child(odd) {
    background: #dcfc79;
}

.app-list li a {
    display: block;
    margin: 0;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bolder;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
/* 'columns' in list rows, each field is wrapped in spans with this class */
.app-list-column {
    margin-right:20px;    
}

/*============= CONTEXT_MENU ======================*/

.app-context-nav {   
    padding-bottom:16px;
}

.app-context-nav li {
    margin-right: 10px;
    display: inline;
    list-style: none;
    list-style-image: none;
}

.app-context-nav a {
    display: inline-block;
    border: 1px solid #555;
    padding: 10px 15px;
    margin-top:10px;    
    background: #5906a5;
    color: white;
    font-weight: bold;
    text-decoration: none;
}

.app-context-nav li a:hover {
    background-color: #f5c100;
}


/*============= /CONTEXT_MENU ======================*/


/*============= AUTOCOMPLETE ======================*/
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-no-suggestion { padding: 2px 5px;}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: bold; color: #000; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { font-weight: bold; font-size: 16px; color: #000; display: block; border-bottom: 1px solid #000; }
/*============= /AUTOCOMPLETE ======================*/


/*===================== /FORMS ======================*/


/*===================== MOBILE SPECIFIC STYLES ======================*/


/* FONTS */

body {
    font-size: 20px;
}

.small {
    font-size: 15px;
    /* 75% of the baseline */
}

.large {
    font-size: 25px;
    /* 125% of the baseline */
}

h1 {
    font-size: 1.5em;
}


/* MOBILE FORMS */

.app-form-group textarea {
    width: 100%;
    height: 30%;
    height: 30vh;
    overflow-y: scroll;
}

.app-form-group input {
    width: 100%;
}


/* /MOBILE FORMS */


/*MOBILE GRID COLUMNS (all 100%)*/

.row::before,
.row::after {
    display: table;
    content: " ";
    clear: both;
}

.one,
.one-third,
.two-thirds,
.one-fourth,
.half {
    width: 100%;
}


/* mobile nav */

#app-shell-nav-bottom {
    display: none;
    /*display: block;*/
}

#app-shell-nav-side {
    display: none;
}

#app-shell-nav-bottom ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-top: 50px;
    width: 100%;
}

#app-shell-nav-bottom li {
    border: 1px solid #555;
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    text-align: center
}

#app-shell-nav-bottom li a {
    display: block;
    margin: 0;
    padding: 10px;
    width: 100%;
    height: 100%;
    text-decoration: none;
    font-size: 30px;
    color: white;
}

body::after {
    content: 'app-small-mode';
    display: none;
}


/*===================== /MOBILE SPECIFIC STYLES ======================*/


/*================= WIDE STYLES =================*/

@media screen and (min-width: 800px) {
    body::after {
        content: 'app-large-mode';
        display: none;
    }
    /* FONTS */
    body {
        font-size: 16px;
    }
    .small {
        font-size: 12px;
        /* 75% of the baseline */
    }
    .large {
        font-size: 20px;
        /* 125% of the baseline */
    }
    h1 {
        font-size: 2em;
    }
    /* FORMS */
    .app-form-group textarea {
        width: 90%;
        height: 40vh;
    }
    .app-form-group input {
        width: 90%;
    }
    .app-list ul {
        width: 50%;
    }
    .app-list li {
        width: 50%;
    }
    /* /WIDE FORMS */
    /*GRID COLUMNS*/
    .one {
        width: 100%;
    }
    .half {
        width: calc(100% / 2);
    }
    .one-third {
        width: calc(100% / 3);
    }
    .one-fourth {
        width: calc(100% / 4);
    }
    .two-thirds {
        width: calc(100% / 3 * 2);
    }
    .column {
        float: left;
    }
    #app-shell-main-content {
        margin-left: 10%;
        padding: 1px 16px;
    }
    /* wide nav */
    #app-shell-nav-bottom {
        display: none;
    }
    #app-shell-nav-side {
        display: none;
        /*display: inline;*/
    }
    /*navbar styles info: http://www.w3schools.com/css/css_navbar.asp (no shame)*/
    #app-shell-nav-side ul {
        list-style-type: none;
        list-style-position: inside;
        margin: 0;
        padding: 0;
        width: 10%;
        height: 100%;
        /* Full height */
        position: fixed;
        /* Make it stick, even on scroll */
        overflow: auto;
        /* Enable scrolling if the sidenav has too much content */
        background-color: whitesmoke;
    }
    #app-shell-nav-side li {
        border: 1px solid #555;
        /*padding-bottom: 10px;*/
        margin-top: 10px;
        margin-bottom: 20px;
        display: block;
        text-align: center;
    }
    #app-shell-nav-side li a {
        display: block;
        margin: 0;
        padding: 10px;
        width: 100%;
        height: 100%;
        text-decoration: none;
    }
    #app-shell-nav-side li a:link {
        color: white;
    }
    #app-shell-nav-side li a:visited {
        color: white;
    }
    #app-shell-nav-side li a:hover {
        background-color: #f5c100;
    }
}


/*=========== /WIDE STYLES ===========*/


/*ALL STYLES THAT NEED TO COME AFTER OTHERS*/

.app-mnu-active {
    background-color: #f5c100;
    color: white;
    font-weight: bold;
}

.app-mnu-inactive {
    background-color: #5906a5;
    color: white;
    font-weight: bold;
}