/*      RESPONSIVE RELATED STYLE SHEET      */



/*
    Extra small devices Phones  (<768px) 
    Small devices Tablets       (≥768px) 
    Medium devices Desktops     (≥992px) 
    Large devices Desktops      (≥1200px) 
*/



/* -------------------- */
/*      PHONE WIDTH     */
/* -------------------- */



@media only screen and (max-width: 767px)
{

    /*  external page  */
    .external-page-container .btn.btn-primary
    {
        width: 200px;
        padding: 5px 5px;
        border-radius: 0px;
    }
    
    /*  page-section-tabs  */
    /*  - show as buttons  */

    .page-section-tabs
    {
        margin-top:10px;
    }

    .page-section-tabs > div
    {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    .page-section-tabs > div > div
    {
        display: table-cell;
        width:100%;
        padding: 0px 1px;
    }

    .page-section-tabs > div > div:first-child
    {
        padding-left: 0px;
    }

    .page-section-tabs > div > div:last-child
    {
        padding-right: 0px;
    }

    .page-section-tabs > div > div > a
    {
        display: inline-block;
        border: 1px solid #aaa;
        width: 100%;
        padding: 5px 5px;
        text-align: center;
        color: #888;
        font-size:10pt;
    }

    .page-section-tabs > div > div.active > a
    {
        border: 1px solid #666;
        color: #000;
    }
    

    /*  dashboard  */
    .page-section-dashboard .left-panel 
    {
        width: 100%;
    }

    .panel-datalist-items.enable-footer-button .datalist-footer-message,
    .page-section-dashboard .left-panel .panel-account-items .account-footer-message
    {
        padding-bottom:50px;
    }    

    /*  page-form*/
    .page-form .btn.tag-submit
    {
        width: 220px;
        font-size: 13px;
    }
    
    /*  download documents  */
    .page-section-nested-list .node-item-content
    {
        width: 100%;
    }
    
    /*  popup-window  */
    .popup-show:not(.popup-show-xs) div.popup-background
    {
        display: none;
    }

    .popup-show:not(.popup-show-xs) div.popup
    {
        display: none;
    }

    /*  helpers  */

    .visible-xs-table-cell
    {
        display: table-cell !important;
    }
    
    .visible-xs-table-row
    {
        display: table-row !important;
    }
    
    .hidden-xs-table-cell
    {
        display: none !important;
    }
    
    /*  SLIDING PANEL RELATED  */ 

    div.scotch-panel-canvas .overlay-xs,
    .overlay-xs-r
    {
        display: block; 
        position: absolute;
        visibility: hidden; 
        top:0; 
        left:0; 
        right:0; 
        bottom:0; 
        height:100%; 
        width:100%; 
        background-color: #000; 
        opacity:0;
        z-index:1000;
        transition: opacity .25s ease-in-out, visibility 0s .25s;
        -moz-transition: opacity .25s ease-in-out, visibility 0s .25s;
        -webkit-transition: opacity .25s ease-in-out, visibility 0s .25s;
    }

    div.scotch-panel-canvas.scotch-is-showing .overlay-xs
    {
        z-index:1000;
        opacity:.25;
        visibility: visible; 
        transition-delay:.0s;
    }

    .overlay-xs-r.show-me
    {
        z-index:1000;
        opacity:.25;
        visibility: visible; 
        transition-delay:.0s;
    }

    div.popover
    {
        display: none !important;
    }
    
    /*
    .page-section-nested-list
    {
        padding: 10px;
    }
    */

    .tag-responsive-internal-body
    {
        padding: 10px;
    }
    
    .tag-responsive-internal-body > div:last-child
    {
        margin-bottom: 10px;
    }


    /*  RIGHT PANEL - SINGLE INSTANCE OF CONTENT BETWEEN MOBILE AND DESKTOP */
    .panel-right 
    {
        position: absolute; 
        display: none; 
        background-color: #fff;
        width:250px; 
        right:0px; 
        z-index:16000; 
        box-shadow: -2px 0px 3px rgba(0,0,0,.4);
    }
    
    .panel-right .panel-right-list > .list-item
    {
        padding-left:15px;
        padding-right:15px;
    }

    /* panel right element */
    .panel-right .panel-right-element
    {
        margin-bottom:0px;
    }

    /*  LEFT PANEL - USED WHEN .panel-right IS USED  */
    .panel-left
    {
        width: 100%;
    }

    /* padding xs */
    .pl15-xs
    {
        padding-left:15px;
    }
    .pr15-xs
    {
        padding-right:15px;
    }

}



/* ----------------------              */
/*      TABLET WIDTH                   */
/* ----------------------              */



@media only screen and (min-width: 768px) and (max-width: 991px)
{
    .page-header-3
    {
        margin-right: 280px;
    }
    
    .page-account-items
    {
        width: 275px;
    }

    .page-account-items .app-table > div > div:first-child
    {
        width: 200px;
    }

    /*  RIGHT PANEL - SINGLE INSTANCE OF CONTENT BETWEEN MOBILE AND DESKTOP */
    .panel-right 
    {
        width:300px; 
        transition: width .25s ease-in-out;

    }     
    
    /*  LEFT PANEL - USED WHEN .panel-right IS USED  */
    .panel-left
    {
        width: calc(100% - 300px);
        transition: width .25s ease-in-out;
    }
    
    .page-section-dashboard .left-panel.use-rightpanel-width 
    {
        width: calc(100% - 300px);
    }
}



/* ---------------------- */
/*      DESKTOP WIDTHS    */
/* ---------------------- */



@media only screen and (min-width: 992px) 
{
    .page-header-3
    {
        margin-right: 355px;
    }

    .page-account-items
    {
        width: 350px;
    }    

    .page-account-items .app-table > div > div:first-child
    {
        width: 250px;
    }

    /* for pdf's */
    .page-content-pdf .page-account-items
    {
        width: 450px;
    }    

    .page-content-pdf .page-account-list > div > div:first-child
    {
        width: 350px;
    }
    
    /*  RIGHT PANEL - SINGLE INSTANCE OF CONTENT BETWEEN MOBILE AND DESKTOP */
    .panel-right 
    {
        width:400px; 
        transition: width .25s ease-in-out;
    }     
    
    /*  LEFT PANEL - USED WHEN .panel-right IS USED  */
    .panel-left
    {
        width: calc(100% - 400px);
        transition: width .25s ease-in-out;
    }
    
    .page-section-dashboard .left-panel.use-rightpanel-width 
    {
        width: calc(100% - 400px);
    }
}



/* --------------------------------- */
/*      GREATER THAN PHONE WIDTH     */
/* --------------------------------- */

@media only screen and (min-width: 768px)
{

    /*  off canvas sliding panel related  */
    
    .scotch-panel-canvas 
    {
        -o-transform: translate3d(0px, 0px, 0px) !important;
        -ms-transform: translate3d(0px, 0px, 0px) !important;
        -moz-transform: translate3d(0px, 0px, 0px) !important;
        -webkit-transform: translate3d(0px, 0px, 0px) !important;
        transform: translate3d(0px, 0px, 0px) !important;
    }


    /*  page-section-tabs  */
    /*  - show as tabs     */


    .page-section-tabs
    {
        display: block;
        background-color: #eee;
        padding-top: 10px;
    }

    .page-section-tabs > div
    {
        display: table;
        width: 100%;
    }

    .page-section-tabs > div > div
    {
        display:table-cell;
    }

    .page-section-tabs > div > div:not(.active)
    {
        border-bottom: 1px solid #888;
    }

    .page-section-tabs > div > div.tab-buttons
    {
        width:100%;
        text-align: right;
    }

    .page-section-tabs > div > div > a
    {
        display:inline-block;
        padding: 5px 10px;
        white-space: nowrap;
        font-size:14px;
        font-weight:400;
        color: #888;
    }

    .page-section-tabs > div > div.active
    {
        background-color: #888;
        padding: 1px 1px 0px 1px;
    }

    .page-section-tabs > div > div.active a
    {
        background-color: #fff;
        border-bottom: 1px solid #fff;
        width:100%;
    }

    .page-section-tabs > div > div.tab-buttons a
    {
        cursor: pointer;
    }

    .page-section-tabs > div > div.tab-buttons span,
    .page-section-tabs > div > div.tab-buttons a
    {
        font-size:12px;
        font-weight:600;
        padding:0px;
    }

    .page-section-tabs span.delimiter
    {
        margin: 0px 5px;
    }


    .page-section-tabs > div > div:first-child div
    {
        display: inline-block;
        min-width:10px;
        width:10px;
    }

    .page-section-tabs > div > div:last-child
    {
        padding-right: 10px;
    }


    .page-section-dashboard .left-panel 
    {
        width: calc(100% - 424px);
    }


    /*  triangles on right of account items*/ 
    .panel-datalist-items > div[active]:before,
    .page-section-dashboard .left-panel .panel-account-items > div[active]:before 
    {
        /* shadow under triangle*/
        content: " ";
        display: block;
        width: 0;
        height: 0;
	    border-top: 13px solid transparent;          
	    border-bottom: 13px solid transparent;
	    border-left: 13px solid #d7d7d7;
	    position: absolute;
	    top: 50%;
	    margin-top: -12px;
	    right:-13px;
	    z-index: 0;    
    }

    /*  -- moved this to the group-theme-responsive file to allow color replacement
    .page-section-dashboard .left-panel .panel-account-items > div[active]:after 
    {
        content: " ";
        display: block;
        width: 0;
        height: 0;
	    border-top: 13px solid transparent;           
	    border-bottom: 13px solid transparent;
	    border-left: 13px solid #21a9c3;
	    position: absolute;
	    top: 50%;
	    margin-top: -13px;
	    right:-12px;
	    z-index: 0;    
    }
    */
    
    .panel-datalist-items .account-footer-message,
    .page-section-dashboard .left-panel .panel-account-items .account-footer-message
    {
        padding-bottom:0px;
    }    


    /*  SLIDING PANEL RELATED  */


    div.scotch-panel-canvas .overlay-xs,
    .overlay-xs-r
    {
        display: block; 
        position: absolute;
        opacity:0;
        visibility: hidden; 
    }

    div.scotch-panel-canvas.scotch-is-showing .overlay-xs
    {
        opacity:0;
        visibility: hidden; 
    }

    .overlay-xs-r.show-me
    {
        opacity:0;
        visibility: hidden; 
    }

    /*
    .page-section-nested-list
    {
        padding: 30px 20px;
    }
    */
    
    .tag-responsive-internal-body
    {
        padding: 30px 20px;
    }

    .tag-responsive-internal-body > div:last-child
    {
        margin-bottom: 30px;
    }
    
    /*  RIGHT PANEL - SINGLE INSTANCE OF CONTENT BETWEEN MOBILE AND DESKTOP */
    .panel-right 
    {
        position: absolute; 
        display: inline-block; 
        right:0px; 
        z-index:100; 
    }     

    .panel-right .panel-right-content
    {
        padding: 15px;
    }     


    /*  PANEL-RIGHT-VALUES 
        - use to add 1 OR 2 column values
    */
 
    .panel-right 
    {
        border-top:none;
    }
    
    .panel-right .panel-right-heading,
    .panel-right .panel-right-values > div > div:first-child,
    .panel-right .panel-right-values > div > div:last-child
    {
        padding-left:0px; 
        padding-right:0px; 
    }

    /*  PANEL-RIGHT-DIVIDER  */
    .panel-right .panel-right-divider
    {
        border-bottom: none;
    }

    /*  PANEL-RIGHT-LIST  */
    .panel-right .panel-right-list .list-item.selected
    {
        -webkit-box-shadow: 0px 6px 12px rgba(0,0,0,0.175);
        box-shadow: 0px 6px 12px rgba(0,0,0,0.175);        
    }
        
}