﻿.sw-pair {
    display: inline-block;
    width: 400px;
    padding-bottom:5px;
}
.sw-textarea-pair {
    display: block;    
    padding-bottom:5px;
}

label {
    text-align: left;    
}
.tab-pane > label {
    padding-left: 10px;
    vertical-align: middle;
    width: 400px;
}
.sw-pair > label,
.sw-textarea-pair > label {
    padding-right: 15px;
    text-align: right;
    width: 160px;
    vertical-align: middle;
}
.sw-textarea-pair > label {    
    vertical-align:top;
    padding-top:6px;
}
.sw-pair > label:nth-child(2) {    
    /* formula results */
    background-color: #F5F5F5;
    border: 1px solid #E3E3E3;
    box-shadow: 0 1px 1px rgba(0,0,0,0.05) inset;
    font-size: 14px;
    width: 60%;
    padding:5px 12px 7px;
    font-weight: 400;
    text-align:left;
}

.sw-pair > input, 
.sw-textarea-pair > textarea, 
select {
    background-color: #FFFFFF;
    background-image: none;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555555;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    vertical-align: middle;
    width: 60%;
}

/* lets make selects within table cells full-width */
table select {
    width:100%;
}

.sw-textarea-pair > textarea {
    width:640px;
    height:200px !important;
}
@media (max-width: 968px) {
    .sw-textarea-pair > textarea {
        width: 240px;
    }
}
@media (max-width: 768px) {
    .sw-textarea-pair > textarea {
        width: 100%;
    }
}
    .sw-pair > input:focus {
        border-color: #66AFE9;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
        outline: 0 none;
    }

    /*table > thead > tr > th {
    border-bottom: 2px solid #DDDDDD;
    vertical-align: bottom;
    padding:8px;
}*/
    table.sw-table > tbody > tr:nth-child(2n+1) > td {
        background-color: #F5F5F5;
    }

    table.sw-table > tbody > tr > td > input, table.sw-table > tbody > tr > td > select {
        background-color: #FFFFFF;
        background-image: none;
        border: 1px solid #CCCCCC;
        border-radius: 4px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
        color: #555555;
        font-size: 14px;
        /*height: 4px;
    line-height: 1.42857;*/
        padding: 4px 8px;
        transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
        vertical-align: middle;
        width: 100%;
    }

        table.sw-table > tbody > tr > td > input:focus, table.sw-table > tbody > tr > td > select:focus {
            border-color: #66AFE9;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
            outline: 0 none;
        }

    .sw-divider {
        margin: 20px 10px;
        border-top: ridge 1px;
        width: 98%;
        height: 1px;
    }

    .sw-ignoreSheet {
        margin: 20px 10px;
        border-top: ridge 1px;
        width: 98%;
        height: 1px;
    }

    [draggable] {
        user-select: none;
    }

    .sw-table {
        margin-bottom: 20px;
        border: 1px solid #DDDDDD;
        width: 100%;
        table-layout: fixed;
        border-collapse: inherit;
    }

        .sw-table > thead > tr:last-child {
            border-bottom: 5px double #DDDDDD;
        }

        .sw-table > thead > tr > th {
            border: 1px double #DDDDDD;
            vertical-align: bottom;
            font-weight: 700;
            line-height: 18.5667px;
            padding: 8px 8px 8px 8px;
        }

        .sw-table > tbody > tr > td {
            border: .5px double #DDDDDD;
            vertical-align: top;
            font-weight: 400;
            line-height: 18.5667px;
            padding: 8px 8px 8px 8px;
        }

        .sw-table > tfoot > tr:first-child {
            border-top: 5px double #DDDDDD;
        }

        .sw-table > tfoot > tr > td {
            border: .5px double #DDDDDD;
            vertical-align: top;
            font-weight: 700;
            line-height: 18.5667px;
            padding: 8px 8px 8px 8px;
        }

    table.features > thead > tr > th {
        background-color: #DDDDDD;
        padding: 8px;
        font-weight: bold;
    }

    table.features > tbody > tr:nth-child(2n+1) > td {
        background-color: rgba(0, 0, 0, 0.025);
    }

    table.features > tbody > tr > td.contentHeaderWithBorder {
        font-weight: bold !important;
        background-color: #FFFFFF !important;
    }

    table.features > tbody > tr > td.contentBeforeBorder {
        background-color: #FFFFFF !important;
    }
    /*div.row {
    display: block;
    margin-bottom: 10px;
    min-height: 125px;
}*/
    input.evolve-reloading {
        border-style: dashed;
    }

    div.sw-pair + table.sw-table {
        margin-top: 16px;
    }

    table tbody label {
        font-weight: normal;
    }

    .alert span {
        white-space: pre-line;
    }

    .panel {
        background-color: rgba(255, 255, 255, 0.9);
    }

    .show-worksheet-tabs-label {
        display: none;
    }

    .show-worksheet-tabs {
        height: 0;
        opacity: 0;
        position: absolute;
        z-index: 0;
    }

    @media (max-width: 768px) {

        .tab-block.tab-block--worksheet-tabs {
            padding-top: 32px;
        }

        .show-worksheet-tabs-label {
            border-radius: 4px 4px 0 0;
            display: inline-block;
        }

        .worksheet-tabs-outer {
            display: none;
        }

        .show-worksheet-tabs:checked ~ .worksheet-tabs-outer {
            display: block;
        }

        .show-worksheet-tabs:checked + .show-worksheet-tabs-label {
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        }

        .worksheet-tabs-container {
            position: absolute;
            top: 0;
            z-index: 999;
            max-width: 80%;
        }

        ul#worksheet-tabs {
            width: 100%;
        }

            ul#worksheet-tabs i {
                display: none;
            }

            ul#worksheet-tabs.tabs-left > li > a {
                text-decoration: none;
                color: rgba(0,0,0,0.5);
            }

            ul#worksheet-tabs.tabs-left > li.active > a, ul#worksheet-tabs.tabs-left > li.active > a:hover, ul#worksheet-tabs.tabs-left > li.active > a:focus {
                border-color: #ccc;
                color: #555;
            }

        .tab-block--worksheet-tabs .sw-pair > label, .tab-block--worksheet-tabs .sw-textarea-pair > label {
            display: block;
            text-align: left;
            width: 100%;
        }

        div.sw-pair {
            width: 100%;
        }

            div.sw-pair select,
            div.sw-pair input {
                width: 100%;
            }
    }

    table.sw-table > tbody > tr > td > select {
        height: 28px;
        padding-top: 2px;
    }

    #unsaved-changes-container {
        position: fixed;
        bottom: -2px;
        width: 86%;
        border: 2px solid black;
        left: 9%;
        z-index: 999;
        background-color: white;
        text-align: center;
        padding: 6px;
        display: none;
    }

    .updateChartMessage {
        text-align: center;
        z-index: 100;
        position: relative;
        top: -180px;
        border: 2px solid black;
        padding: 8px;
        width: 98%;
        background-color: white;
    }

    @keyframes highlight {

        50% {
            background-color: red;
        }

        100% {
            background-color: auto;
        }
    }

    .validation-failed {
        border-left: 4px solid red !important;
    }

    .validation-failed-flash {
        animation-name: highlight;
        animation-duration: 1.5s;
    }

