@font-face {
    font-family: 'roboto-thin';
    src: url('../fonts/roboto-thin.ttf') format('truetype');
}

@font-face {
    font-family: 'roboto-light';
    src: url('../fonts/roboto-light.ttf') format('truetype');
}

@font-face {
    font-family: 'roboto-regular';
    src: url('../fonts/roboto-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'roboto-medium';
    src: url('../fonts/ROBOTO-MEDIUM.TTF') format('truetype');
}

@font-face {
    font-family: 'roboto-bold';
    src: url('../fonts/roboto-bold.ttf') format('truetype');
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #f9fcff;
    font-family: roboto-light;
    font-weight: 300;
}

    body .header {
        height: 60px;
        min-height: 60px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: #FFFFFF;
        box-shadow: rgba(122,122,122,0.3) 6px 0px 12px;
        position: relative;
        z-index: 900;
    }

    body .body {
        flex: 1;
        display: flex;
        flex-direction: row;
        z-index: 1;
        overflow: hidden;
    }

        body .body .page-content {
            position: relative;
            flex: 4;
            display: flex;
            flex-direction: column;
            padding: 40px;
            padding-top: 70px;
            min-width: 320px;
        }

            body .body .page-content .config-header {
                position: absolute;
                top: 23px;
                left: 40px;
                margin: 0;
            }

        /*body .body .page-content .page-body{
            flex: 1;
            display: flex;
            flex-direction: column;
        }*/

        body .body .edit-popout,
        body .body .allocate-popout {
            width: 0;
            height: 100%;
            max-height: 100%;
            background-color: #FAFAFA;
            box-shadow: -3px 0 6px rgba(0,0,0,0.16);
            padding: 20px 0;
            overflow: hidden;
            overflow-y: auto;
            color: #00207A;
            font-size: 16px;
            transition: 0.3s;
        }

            body .body .edit-popout.visible {
                width: 425px;
            }

            body .body .allocate-popout.visible {
                width: 300px;
            }

                body .body .allocate-popout.visible ~ .edit-popout.visible {
                    width: 300px;
                }

                    body .body .allocate-popout.visible ~ .edit-popout.visible > form > .form-group.first > input[type=button] {
                        display: none;
                    }

input.switch {
    display: none;
}

label.switch {
    position: relative;
    display: block;
    cursor: pointer;
    transition: 250ms;
    height: 30px;
    width: 35px;
    margin-top: auto;
    margin-bottom: auto;
}

    label.switch::after {
        position: absolute;
        content: '';
        width: 20px;
        height: 20px;
        left: 0px;
        top: 5px;
        border-radius: 50%;
        transition: 250ms ease-in-out;
        background: #DDD;
        border: 2px solid #707070;
    }

    label.switch::before {
        position: absolute;
        content: '';
        width: 35px;
        height: 10px;
        top: 10px;
        left: 0px;
        border-radius: 5px;
        transition: 250ms ease-in-out;
        background: lightgrey;
    }

input.switch:checked + label.switch::before {
    background: #00207A;
}

input.switch:checked + label.switch::after {
    left: 15px;
    background: #3b6fff;
    border-color: #003bdd;
}

input.switch ~ .form-control {
    display: none;
}

input.switch:checked ~ .form-control {
    display: block;
}

.slider-container {
    width: 100%;
    margin: 10px 0;
}

    .slider-container input.slider {
        -webkit-appearance: none;
        width: 100%;
        height: 10px;
        border-radius: 5px;
        background: #00207a;
        outline: none;
        opacity: 1;
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }

        .slider-container input.slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid #003bdd;
            background: #3b6fff;
            cursor: pointer;
            transition: 0.3s;
        }

        .slider-container input.slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid #003bdd;
            background: #3b6fff;
            cursor: pointer;
            transition: 0.3s;
        }

        .slider-container input.slider.zeroVal {
            background: lightgrey;
        }

            .slider-container input.slider.zeroVal::-webkit-slider-thumb {
                background: #ddd;
                border-color: #707070;
            }

            .slider-container input.slider.zeroVal::-moz-range-thumb {
                background: #ddd;
                border-color: #707070;
            }

.flex-row {
    display: flex;
    flex-direction: row;
}

    .flex-row.reverse {
        display: flex;
        flex-direction: row-reverse;
    }

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-scroll-y {
    flex: 1;
    overflow-y: scroll;
    flex-wrap: wrap;
}

i.arrow {
    display: block;
    width: 9px;
    height: 9px;
    filter: none;
    border-bottom: 1.7px solid #003bdd;
    border-right: 1.7px solid #003bdd;
    border-radius: 0.8px;
    transition: 0.3s;
}

    i.arrow.right {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
    }

    i.arrow.down {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
    }

.text-danger {
    color: #d80000;
}

    .text-danger ul {
        list-style-type: none;
        margin-left: -40px;
        margin-bottom: 0px;
    }