.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
    overflow: hidden; /* Help find the divs that aren't sizing correctly */
}

/* Large Devices, Wide Screens */
@media (max-width : 1200px) {
    .docsection .btn {
        /*width: 100%;*/
        font-size: 16px;
    }

    .error {
        margin-top: 2px;
        line-height: 1.7em;
        margin-left: 0px;
    }
}

/* Medium Devices, Desktops */
@media (max-width : 992px) {
    .docsection .btn {
        width: 100%;
        font-size: 12px;
    }
}

/* Small Devices, Tablets */
@media (max-width : 768px) {
    .docsection .btn {
        width: 65%;
        font-size: 12px;
    }

    .error {
        line-height: 45px;
        margin-left: 0px;
    }

    /* Bug 19438 */
    /* Hiding icon on mobile*/

    .glyphicon-info-sign {
        display: none !important;
    }

}

/* Custom: mobile phone */
@media (max-width: 580px) {

    .docsection .btn {
        font-size: 16px;
    }

    .error {
        line-height: 1.7em;
    }


    /* Font sizes */
    .body-title label {
        font-size: 13px;
    }

    .comment-links a {
        margin-right: 0px;
    }
}


/*
    Tablet styles
    Tablet styles
    Tablet styles
    Tablet styles
*/

@media (max-width: 768px) {

    .comments-history {
        width: auto;
    }

    .comments-history .header {
        display: block;
    }

    .redCircle {
        top: -20px;
        right: 16px;
    }

    .page-header p
    {
        font-size: 16px;
    }
    
    
    #modalContainer.large {
        height: initial; /* Undo something from viewer-restyle.css*/
    }

    .reviewed, .error {
        margin-left: 0px;
        overflow: initial;
    }

    body {
        min-width: initial;
    }

    #navocs {
        margin-right: 10px;
    }

    .container {
        margin: 0px;
        padding: 0px;
    }

    .page-header {
        padding: 0px;
        margin: 0px;
    }

    .page-header h2 {
        font-size: 20px;
        font-weight: bold;
    }

    #ViewerContainer .container {
        width: auto;
    }

    .bc_arrow {
        display: none;
    }

    #SigViewer-PolicyConstituentInfo {
        width: 100%;
        display: block;
        overflow: hidden; /* clear the floated li's */
        padding: 6px 10px;
    }

    #SigViewer-PolicyConstituentInfo li {
        margin: 0px;
        padding: 0px;
    }



    .main {
        padding-left: 0px;
        padding-right: 0px;
    }

    .main > .body-title > .row > div {
        font-size: 20px;
        width: 100%; /* Center up the entire div, ignores bootstrap columns */
        text-align: left;
        margin-left: 5px;
    }

    .main > .body-title > p {
        font-size: 16px;
        text-align: left;
        margin-top: 0px;
    }

    .body-title a {
        font-size: 15px;
        line-height: initial;
    }

    #review-docs-title {
        height: 50px;
        width: 50px;
    }

    .docsection {
        position: relative;
        width: 100%;
    }

    /*.docsection div {
        width: 100%;
    }*/

    /* hiding error img on mobile because it's causing issues */
    .docsection .img-wrapper{
        width: initial;
        display: none;
    }

    .docsection .error-img {
        width: initial;
    }



    .copyright {
        overflow: hidden; /* Get rid of wild space at the bottom of the page.*/
        height: auto;
        padding: 0px;
    }

    .copyright p, .copyright p.right, .copyright p.left {
        display: block;
        float: none;
    }

    #changeHistory {
        line-height: initial;
        height: auto;
        font-size: 14px;
        text-align: right;
        padding-right: 0px;
        margin-top: 10px;
    }

    .docsection {
        padding: 0 20px;
        text-align: center;
    }

    /* Width of pages */
    .docsection > .no-padding > .no-padding > a, .error {
        width: 80%;
        text-align: center;
        margin: 0 auto;
    }



    /*
        COMMENTS SECTION THAT SLIDES OPEN
        COMMENTS SECTION THAT SLIDES OPEN
        COMMENTS SECTION THAT SLIDES OPEN
        COMMENTS SECTION THAT SLIDES OPEN
    */

    .comments > .background {
       width: 100%;
    }

    .comments textarea {
        width: 100%;
        min-height: 150px;
        height: initial;
        padding: 10px;
    }

    #lnkCancel, #lnkSendComments {
        margin: 0px;
    }

        #lnkSendComments :hover {
            background-color: #7D55C7;
            border-color: #7D55C7;
        }

    #SigViewer-Affirmation,
    #SigViewer-RequestChanges {
        margin: 0px -15px;
    }

    h2 {
        font-size: 17px;
    }

    #SigViewer-Change-History h2{
        font-size: 17px;
        margin-right: 5px;
    }

    #SigViewer-Change-History-Title{
        padding: 0px;
        margin: 0px;
    }


}


/* 

    580px = MOBILE 
    580px = MOBILE 
    580px = MOBILE 
    580px = MOBILE 
    580px = MOBILE 

*/
@media (max-width: 580px) {

    #SigViewer-Comments-Entry {
        margin-top: 40px;
        margin-left: 0px;
    }

    #SigViewer-Approver-Comments{
        width: 100%;
    }
    
    .crumbs-step {
        height: 50px;
        line-height: 50px;
    }

    .item-complete, .item-incomplete {
        margin: 0px;
        padding: 0px;
    }

    .subtitle{
        height: 30px;
        line-height: 30px;
    }


    /* When there are only two steps, 50% width. */
    #ViewerContainer .col-xs-6 .crumbs-step {
        width: 50%;
    }

    /* When there are three steps, 33% width. */
    #ViewerContainer .col-xs-3 .crumbs-step {
        width: 33%;
    }


    #ViewerContainer .crumbs-step .text-left{
        font-size: 10px;
    }

    .reviewed {
        margin-left: 0px;
    }

    .comment-links div a {
        display: block;
        margin-bottom: 5px;
    }

    .copyright .right {
        margin-left: 0px;
    }

    .docsection {
        text-align: left;
    }

    .docsection > .no-padding > .no-padding > a {
        width: 100%;
        text-align: center;
    }
    .error {
        text-align: left;
        width: 100%;
        padding: 10px;
        height: initial;
    }

    .docsection > .no-padding {
        float: none;
        width: 100%;
        margin: 0 auto;
    }
}



@media (max-width: 768px)
{

    #AgentTemplateContainer {
        margin: initial;
    }

    #ViewerContainer .container {
        padding: 15px;
    }

    #modalContainer {
        width: initial; /* Override styles from restyle CSS file. */
        height: initial;
        padding: 0px; /* Override styles from restyle CSS file. */
        margin: 0px;
        border: none;
        border-radius: 0px;
        position: fixed;
        /*
            Absolute positioning here seems to center the model up correctly, 
            but causes the window to scroll outside of the modal itself once
            you scroll down far enough to see all content inside the modal.

            Fixed seems to be the answer, although we need to add some negative
            position or margin somewhere. 

        */
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        overflow: hidden;
    }

    #modalContainer.large {
        top: 0px;
    }

    #modalContainer-policy-viewer {
        width: 100vw;
        height: 100vh;
        /*
            vw (view width/height) is the key to using fixed position for the modal
            and still centering up the content inside the modal.
        */
        margin: 0px;
        padding: 0px;
        left: 0px;
        top: 0px;
        overflow: hidden;
    }




    #SigViewer-DialogTemplate {
        border-radius: 0px;
    }

    #SigViewer-DialogTemplate fieldset {
        left: 0px;
        /* 
        Get rid of the space to the left of the fielset in the modal.
    */
        margin: 0px;
        width: 100vw;
    }


    #modalContainer-policy-viewer {
        height: 100vh;
        width: 100vw;
    }


    #SigViewer-DialogTemplate {
        height: 100vh;
        width: 100vw;
    }

    #SigViewer-Dialog-PolicyReview-Viewer-Container {
        margin: 0px;
        height: 100%;
        width: initial;
        position:absolute;
        top:0px;
        bottom:0px;
        left:0px;
        right:0px;

        max-height: initial;
        overflow: scroll;
    }

    #DocPDFViewerFrame {
        width: 100vw;
        max-height: initial;
        min-height: initial;
        height: 100%;
    }

    .scrollable {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        overflow: auto;
    }
    
    #TemplateQuestionAndAnswers {
        padding: 5px;
        overflow: scroll;
        max-width: 100vw;
        max-height: 200px;
        margin-left: 10px;
    }
}




@media (max-width: 768px)
{
    #modalContainer.large {
        height: 100%;
    }

    /* Bug 19438 */
    /* Hiding icon on tablets*/

    .glyphicon-info-sign {
        display: none !important;
    }

    .copyright {
        height: auto;
    }
}


/* 
    Post merge with develop
    Fixes
*/



    @media (max-width: 768px) {

        .docsection .btn {
            max-width: initial;
        }

        .reviewButtons{
            text-align: center;
        }
        
        .docsection > .row > .no-padding {
            padding-left: 15px;
            padding-right: 15px;
        }

        .subtitle {
            padding-left: 20px;
            font-size: 20px;
            text-align: center;
        }
    }

    @media (max-width: 580px) {

        .docsection div {
            width: initial;
        }

        .docsection {
            padding: 0px;
        }

            .docsection .btn {
                max-width: 250px;
            }

        #lnkChanges {
            margin-right: 0px;
        }
    }

    @media (max-width: 320px) {

        #SigViewer-Dialog-PolicyReview-Viewer-Container{

        }

        #SigViewer-DialogTemplate label {
            font-size: 12px;
        }
        
        
        #ViewerContainer {
            overflow: scroll;
        }

        .doc-size-msg {
            font-size: 12px;
        }
    }



/*
    Custom breakpoints for viewer container
*/


/*
    200px difference
*/

@media (min-height: 500px) {
    #SigViewer-Dialog-PolicyReview-Viewer-Container {
        height: 300px;
    }
}

@media (min-height: 550px) {
    #SigViewer-Dialog-PolicyReview-Viewer-Container {
        height: 350px;
    }
}


@media (min-height: 600px){
    #SigViewer-Dialog-PolicyReview-Viewer-Container {
        height: 300px;
    }
}

/*
    300px difference
*/

@media (min-height: 650px) {
    #SigViewer-Dialog-PolicyReview-Viewer-Container {
        height: 350px;
    }
}

@media (min-height: 700px) {
    #SigViewer-Dialog-PolicyReview-Viewer-Container {
        height: 400px;
    }
}

@media (min-height: 750px) {
    #SigViewer-Dialog-PolicyReview-Viewer-Container {
        height: 450px;
    }
}

/*
    350px
*/

@media (min-height: 800px) {
    #SigViewer-Dialog-PolicyReview-Viewer-Container {
        height: 450px;
    }
}

@media (min-height: 850px) {
    #SigViewer-Dialog-PolicyReview-Viewer-Container {
        height: 500px;
    }
}

@media (min-height: 900px) {
    #SigViewer-Dialog-PolicyReview-Viewer-Container {
        height: 550px;
    }
}

@media (min-height: 950px) {
    #SigViewer-Dialog-PolicyReview-Viewer-Container {
        height: 600px;
    }
}

@media (min-height: 1000px) {
    #SigViewer-Dialog-PolicyReview-Viewer-Container {
        height: 650px;
    }
}

@media (min-height: 1050px) {
    #SigViewer-Dialog-PolicyReview-Viewer-Container {
        height: 700px;
    }
}

@media (min-height: 1100px) {
    #SigViewer-Dialog-PolicyReview-Viewer-Container {
        height: 750px;
    }
}

/* Modal table styles */
/* Modal table styles */
/* Modal table styles */

.wrapper {
    height: 100%;
    width: 100%;
    display: table;
}

.wrapper .header, .wrapper .content, .wrapper .footer {
    display: table-row;
}

.inner {
    display: table-cell;
}

.content .inner {
    height: 100%;
    position: relative;
}