@import url(https://fonts.googleapis.com/css?family=Roboto:300);

body {
    font-family: "Roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
}

.navbar-icon-top .navbar-nav .nav-link > .fa {
    position: relative;
    width: 36px;
    font-size: 24px;
}

    .navbar-icon-top .navbar-nav .nav-link > .fa > .badge {
        font-size: 0.75rem;
        position: absolute;
        right: 0;
        font-family: sans-serif;
    }

.navbar-icon-top .navbar-nav .nav-link > .fa {
    top: 3px;
    line-height: 12px;
}

    .navbar-icon-top .navbar-nav .nav-link > .fa > .badge {
        top: -10px;
    }

.navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link {
    height: 55px !important;
}

.sidebar {
    width: 210px;
    position: relative;
    float: left;
    height: 1px;
    overflow: visible;
}

    .sidebar:before {
        content: "";
        display: block;
        width: 210px;
        position: fixed;
        bottom: 0;
        top: 0;
        z-index: -1;
        border: 1px solid #2c6aa0;
        /*background: #DCE8F8;*/
        background: linear-gradient(to top, #DCE8F8, #fff);
    }

.mainContent {
    margin-left: 210px;
    margin-right: 0;
    margin-top: 0;
    min-height: 100%;
    padding: 0;
}

.nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .nav-list li {
        padding: 10px;
        border-bottom: 1px solid #2c6aa0;
        color: #003b70;
        cursor: pointer;
    }


.submenu {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-top: 5px;
}

    .submenu li {
        border-bottom: none;
        margin-left: 10px;
        color: #4b5762;
    }

        .submenu li.active {
            background: #2c6aa0;
            color: #fff;
            margin-left: 0;
            padding-left: 15px;
        }


#divError {
    display: none;
    position: fixed;
    left: 50%;
    top: 2%;
    z-index: 9999;
}

    #divError div {
        position: relative;
        background: #fff;
        font-weight: bold;
        left: -50%;
        padding: 10px;
        border-radius: 2px;
    }

    #divError span.error {
        color: #c00000;
    }

    #divError span.success {
        color: #2c6aa0;
    }

.form-button {
    text-transform: uppercase;
    outline: 0;
    background: #2f5bbb;
    width: 100%;
    border: 0;
    padding: 15px;
    color: #FFFFFF;
    font-size: 14px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
}

    .form-button.green {
        background: #077400;
        color: #fff;
    }

    .form-button.red {
        background: #cd0000;
        color: #fff;
    }

    .form-button.gray {
        background: #8a8a8a;
        color: #fff;
    }

    .form-button:hover {
        color: #fcfdff;
    }

.formCadastro input, .formCadastro select, .formCadastro textarea, .formCadastro .chosen-choices {
    outline: 0;
    background: #f2f2f2;
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
}


.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #eaeaea;
    opacity: 0.6;
    top: 0;
    bottom: 0;
    left: 0;
}

div.title {
    font-size: 18px;
    padding: 5px;
    background: #fcfdff;
    font-weight: bold;
    color: #094e8a;
}

.btn-green {
    padding: 10px;
    background: #077400;
    color: #fff;
}

    .btn-green:hover {
        color: #fff;
        background: #118b0a;
    }

.btn-blue {
    padding: 10px;
    background: #003b70;
    color: #fff;
}

    .btn-blue:hover {
        color: #fff;
        background: #003b70;
    }

.btn-gray {
    padding: 10px;
    background: #8a8a8a;
    color: #fff;
}

    .btn-gray:hover {
        color: #fff;
        background: #8f8f8f;
    }

.btn-orange {
    padding: 10px;
    background: #d36700;
    color: #fff;
}

    .btn-orange:hover {
        color: #fff;
        background: #e27207;
    }


.btn-light-blue {
    padding: 10px;
    background: #40a8a8;
    color: #fff;
}

    .btn-light-blue:hover {
        color: #fff;
        background: #4bbdbd;
    }

.btn-red {
    padding: 10px;
    background: #ff0000;
    color: #fff;
}

    .btn-red:hover {
        color: #fff;
        background: #7c0000;
    }

.page-content {
    margin: 5px;
}

.m20 {
    margin: 20px 0px;
}

.m10 {
    margin: 10px 0px;
}

.pointer {
    cursor: pointer;
}

.divbottom {
    margin: 10px 0px;
}

input[on-placeholder]:focus ~ .placeholder,
input[on-placeholder].ph ~ .placeholder {
    top: 0;
    left: 0;
    font-weight: bold;
    font-size: 16px;
}

input[on-placeholder]:focus,
input[on-placeholder].ph {
    margin-top: 25px;
}

.placeholder {
    position: absolute;
    pointer-events: none;
    left: 15px;
    top: 15px;
    transition: 0.2s ease all;
    font-size: 14px;
}

.table-padding-4 td {
    padding: 4px;
}

.table th {
    text-align: center;
}

.table-inner td {
    padding: 0;
    border: 0;
}

.btn-opcoes label {
    display: none;
    position: absolute;
    left: -5px;
    background: #000;
    margin-top: 10px;
    padding: 5px;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
    zoom: normal;
    z-index: 1;
}

.btn-opcoes:hover label {
    display: block;
}


.td-opcoes .btn {
    padding: 2px;
}

.dark-green {
    color: #077400;
}

.dark-blue {
    color: #003b70;
}

.dark-red {
    color: #9b0000;
}

.orange {
    color: #d85a00;
}

.td-opcoes {
    vertical-align: middle;
    text-align: center;
    max-width: 50px;
}

.btn-opcoes {
    opacity: inherit;
    position: relative;
    pointer-events: unset;
}

/*checkbox on-off*/
div[check-on-off] {
    height: 40px;
    position: relative;
}

    div[check-on-off] input[type=checkbox] {
        display: none;
    }

        div[check-on-off] input[type=checkbox]:checked + label.checkbox .checkbox__inner .ball {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
            transition-delay: 150ms;
        }

        div[check-on-off] input[type=checkbox]:checked ~ .checkbox__text {
            opacity: 1;
        }

            div[check-on-off] input[type=checkbox]:checked ~ .checkbox__text .checkbox__text--options span.off {
                transform: translateY(150%);
                opacity: 0;
            }

            div[check-on-off] input[type=checkbox]:checked ~ .checkbox__text .checkbox__text--options span.on {
                transform: translateY(0%);
                opacity: 1;
            }

.checkbox {
    --size: 25px;
    width: var(--size);
    height: var(--size);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: var(--bg);
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.12), 2px 2px 6px rgba(0, 0, 0, 0.05), 2px 2px 10px rgba(0, 0, 0, 0.025), inset -2px -2px 3px rgba(0, 0, 0, 0.05), inset -2px -2px 8px rgba(0, 0, 0, 0.02), inset 1px 3px 3px rgba(255, 255, 255, 0.45), inset 3px 8px 25px rgba(255, 255, 255, 0.35), inset 3px 2px 3px rgba(255, 255, 255, 0.35), inset 3px 2px 5px rgba(255, 255, 255, 0.2), inset 2px 3px 8px rgba(255, 255, 255, 0.085), inset 3px 2px 18px rgba(255, 255, 255, 0.05), inset 2px 3px 25px rgba(255, 255, 255, 0.025), inset 8px 8px 18px rgba(255, 255, 255, 0.1), inset 8px 8px 25px rgba(255, 255, 255, 0.05);
    cursor: pointer;
    position: absolute;
}

    .checkbox .checkbox__inner {
        position: relative;
        width: calc(var(--size) / 1.75);
        height: calc(var(--size) / 1.75);
        border-radius: 50%;
        box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.12), inset 2px 2px 5px rgba(0, 0, 0, 0.08), inset 3px 3px 12px rgba(0, 0, 0, 0.05), inset 4px 5px 16px rgba(0, 0, 0, 0.035), inset 0px -1px 2px rgba(255, 255, 255, 0.45), inset -1px -1px 3px rgba(255, 255, 255, 0.45), inset -1px -1px 2px rgba(255, 255, 255, 0.2), inset -1px -1px 2px rgba(255, 255, 255, 0.12), 2px 2px 2px rgba(255, 255, 255, 0.12), 2px 2px 3px rgba(255, 255, 255, 0.1), 2px 2px 5px rgba(255, 255, 255, 0.08), 6px 6px 15px rgba(0, 0, 0, 0.014), 8px 8px 18px rgba(0, 0, 0, 0.08), 12px 12px 28px rgba(0, 0, 0, 0.04);
    }

    .checkbox .checkbox__inner {
        background: var(--bg);
    }

        .checkbox .checkbox__inner.green-red {background: green;}
        .checkbox .checkbox__inner.red-green {background: red;}

        .checkbox .checkbox__inner .ball {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.5);
            opacity: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.12), inset -4px -5px 12px rgba(0, 0, 0, 0.12), inset -5px -6px 12px rgba(0, 0, 0, 0.08), inset 0px -6px 18px rgba(0, 0, 0, 0.06), 2px 1px 8px rgba(152, 255, 112, 0.32), 3px 2px 12px rgba(152, 255, 112, 0.15), 4px 4px 18px rgba(152, 255, 112, 0.08);
            transition: transform 250ms var(--transition-easing), opacity 300ms var(--transition-easing);
            transition-delay: 120ms;
        }

        .checkbox .checkbox__inner .ball {
            background: var(--green);
        }

        .checkbox .checkbox__inner.green-red .ball {background: red;}
        .checkbox .checkbox__inner.red-green .ball {background: green;}

        .checkbox .checkbox__inner .ball::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 25%;
            transform: translate(-50%, -50%);
            background: #fff;
            width: 35%;
            height: 15%;
            filter: blur(4px);
        }

.checkbox__text {
    margin-left: 2rem;
    color: transparent;
    color: rgba(0, 0, 0, 0.45);
    display: flex;
    user-select: none;
    pointer-events: none;
    transition: opacity 250ms var(--transition-easing);
    transition-delay: 150ms;
}

.checkbox__text--options {
    width:100%;
    color: #000;
    position: relative;
    margin: 0 0.5rem;
}

    .checkbox__text--options span {
        position: absolute;
        left: 0%;
        top: 0%;
        transition: transform 250ms var(--transition-easing), opacity 150ms var(--transition-easing);
        transition-delay: 150ms;
    }

        .checkbox__text--options span.off {
            transform: translateY(0%);
            opacity: 1;
        }

        .checkbox__text--options span.on {
            transform: translateY(-150%);
            opacity: 0;
        }
/*--*/


.subtitle {
    position:relative;
    color: #3366CC;
    font-weight: bold;
}

.box {
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-color: #eee;
    padding: 20px;
    min-width: 300px;
}

.box-title {
    position: absolute;
    top: -10px;
    left: 5px;
    background: #fff;
}

/*autocomplete*/
.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

    .autocomplete-items div {
        padding: 10px;
        cursor: pointer;
        background-color: #fff;
        border-bottom: 1px solid #d4d4d4;
    }

        .autocomplete-items div:hover {
            /*when hovering an item:*/
            background-color: #e9e9e9;
        }

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
}