/*
* ============================== Patient Dashboard Navigation ==============================
*/


.contentContainer {
    padding: 0;
}

#sectionPage #navJqueryTabs {
    padding-top: 0.75em;
}

#navJqueryTabs .ui-tabs-nav {
    padding-left: 0.75em;
}

#Dashboard.ui-tabs-panel.ui-widget-content {
    padding: 0;
}



/*
* ============================== Patient Dashboard ==============================
*/

.ui-resizable {
    margin: 0;
}

#Dashboard {
    background: #efeeef;
}

    #Dashboard .patient-welcome-container {
        background: #fff;
        padding: 0.5em 2.1em 1.0em 2.1em;
    }

    /* might be used later */
    /*#Dashboard .patient-nodes {
        border-radius: 10px;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
        padding-bottom: 1em;
    }*/

.widgetDashboard {
    margin-top: 1em;
}
.widgetDashboard .widgetWindow {
    padding: 5px 10px 10px 10px;
    border: 0px;
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    background: #fff;
    margin: 0;
}

.grid-stack.widgetDashboard > .grid-stack-item {
    padding: 10px 10px 5px 10px;
}

#Dashboard div[data-template='patient-dashboard'] .patientNodeIcon i[class*="fa-"] {
    font-size: 5em;
}


/*
* ============================== Patient Dashboard Nodes ==============================
*/
#Dashboard .widgetWindow {
    padding: 10px 15px 10px 15px;
    margin: 5px;
}

#Dashboard .widgetPatientCaption {
    font-size: medium;
    padding: 8px;
}

#Dashboard .widgetContentWrapper a.btn {
    font-size: 1.1em;
    font-weight: bold;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
}

#Dashboard .widgetContentWrapper h4 {
    margin-top: 10px;
}

#Dashboard .widgetContentWrapper {
    line-height: 18px;
}

/* create a new row */
.flexRow {
    display: flex;
}
.flexColumn {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    margin: 0px 15px 0px 15px;
    flex-direction: column;
}
.flexEnd {
    align-items: flex-end;
}
.column-left-0 {
    flex: 1 1 0%;
}
.column-left-20 {
    flex: 1 1 20%;
}
.column-right-70 {
    flex: 1 1 70%;
}


/*
* ============================== Client Portal ==============================
*/

/*
* ------------------------------------- All nodes  -----------------------------------------------------------------------
*/

#Dashboard div[data-template='patient-dashboard'] div.widgetDashboard .widgetWindow div.widgetContentWrapper .widgetContents .pdfReport {
    color: #8cc73f;
}

/*
* ------------------------------------- Register & Activate YFG Test Kit  -----------------------------------------------------------------------
*/

/* content sub title h2 */
#Dashboard div[data-template='patient-dashboard'] div.widgetDashboard > #RegisterActivateBarcode .widgetWindow div.widgetContentWrapper .widgetContents h2 {
    color: #FF9D00;
    font-size: 1.3em; /* default h2 size */
    margin-top: 1px;
}

/*
* ----------------------------------- Upload Existing Data From 23&Me  -----------------------------------------------------
*/
/* caption text */
#Dashboard div[data-template='patient-dashboard'] div.widgetDashboard > #PatientFileSelfSubmit .widgetWindow div.widgetContentWrapper .widgetPatientCaption:before {
    content: 'Upload Existing Data from Another Site';
}

.self-upload-steps .modal-body-instruction {
    min-height: 40vh;
}

/*
* ----------------------------------- Upload Existing Data From 23&Me and Register & Activate Test Kit Modal Window -----------------------------------------------------
*/
.self-consent-upload .carouselBody,
.self-consent-barcode-registration .carouselBody {
    position: relative;
    overflow: hidden;
    padding: 20px;
}

.self-consent-upload .carouselBody div[data-step],
.self-consent-barcode-registration .carouselBody  div[data-step] {
  width: 100%;
  max-height: 60vh;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20px;
  overflow-x: hidden;
}

/* Constent form step */
#add-override-consent .consent-form-container,
#genome-consent .consent-form-container,
#barcode-consent .consent-form-container {
    border: 2px solid #e5e5e5;
    overflow-y: auto;
    max-height: 290px;
}

/* Upload Genome File step */
.self-consent-upload .dropzone {
    border: 2px dashed #CCCCCC;
    background: #FFFFFF;
}
.self-consent-upload .dropzone {
    min-height: 320px !important;
}
.self-consent-upload .dropzone .dz-default.dz-message {
    top: 35%;
    height: auto;
}
.self-consent-upload ol {
    margin-top:0px;
}
.self-consent-upload ol li {
    line-height: 1.5em;
    margin-bottom: 8px;
}

/* this should probably be normalized */
.modal-body-instruction {
    min-height: 60vh;
}
/* https://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/ */
.styled-ol ol {
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}
.styled-ol ol > li {
    position: relative; /* Create a positioning context */
    margin: 0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
    padding: 4px 8px; /* Add some spacing around the content */
    list-style: none; /* Disable the normal item numbering */
    border-top: 2px solid #666;
    background: #f6f6f6;
}
    .styled-ol ol > li:before {
        content: counter(li); /* Use the counter as content */
        counter-increment: li; /* Increment the counter by 1 */
        /* Position and style the number */
        position: absolute;
        top: -2px;
        left: -2em;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 2em;
        /* Some space between the number and the content in browsers that support
	    generated content but not positioning it (Camino 2 is one example) */
        margin-right: 8px;
        padding: 4px;
        border-top: 2px solid #666;
        color: #fff;
        background: #666;
        font-weight: bold;
        font-family: "Open Sans";
        text-align: center;
    }
.styled-ol li ol,
.styled-ol li ul {
    margin-top: 6px;
}
.styled-ol ol ol li:last-child {
    margin-bottom: 0;
}


/* http://codetheory.in/how-to-add-style-to-an-ordered-list/ */
div.styled-list {
    background-color: #fff;
    border-radius: 5px;
}

div.styled-list ol {
    counter-reset:li; /* Initiate a counter */
    list-style-type: none;
    padding-left:0px;
}

div.styled-list ol > li:before {
    content: counter(li) '.'; /* Use the counter as content */
    counter-increment: li; /* Increment the counter by 1 */
    position: absolute;
    /*top: 10px;*/
    left:0px; 
    font-size: 30px;
    color: #8cc73f;
    font-weight:bolder;
}
div.styled-list ol > li {
    position: relative;
    margin-bottom: 20px;
    padding-left: 50px;
    color: #444;
}

.upload-complete {
    font-weight: bold;
    font-size: 1.2em;
    background: rgba(0,0,0,0.03);
    padding: 0.5em;
}
.dropzone {
    min-height: 399px;
}