* {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

body {
    overflow-x: hidden;
}

header#app-header {
    position: fixed;
    top: 0;
}

section {
    width: 100vw;
    min-height: 100vh;
    height: fit-content;
    position: absolute;
    transition: .5s;
    z-index: 1;
}

section#login {
    left: -100vw;
    background: #af02ff; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #af02ff 0%, #ff7c02 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #af02ff 0%,#ff7c02 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #af02ff 0%,#ff7c02 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#af02ff', endColorstr='#ff7c02',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

section#menus {
    right: -100vw;
    background-color: orchid;
}

section.active-session {
    left: 0 !important;
    z-index: 10 !important;
    width: 100%;
}

.d-none {
    display: none;
}

/* LOGIN */

div#login-form-container {
    max-width: 300px;
    width: 100%;
    height: 200px;
    margin: 0 auto;
    margin-top: calc(50vh - 100px);
    position: relative;
}

div#login-form-container span#error {
    position: absolute;
    color: #bd0206;
    font-weight: bold;
    min-width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    bottom: 2px;
    font-size: .7em;
}

div#login-form-container form#login-form {
    display: flex;
    flex-direction: column;
    padding: 40px;
    height: 100%;
    justify-content: space-between;
    box-sizing: border-box;
    background-color: white;
    border-radius: 20px;
}
div#login-form-container form#login-form input {
    height: 30px;
    padding: 5px 0;
    border: none;
    border-bottom: 1px solid #af02ff;
    background: none;
}

div#login-form-container form#login-form button[type="submit"] {
    border-radius: 3px;
    border: none;
    background: none;
    padding: 8px;
    color: white;
    background-color: #af02ff;
    transition: .5s;
}

div#login-form-container form#login-form button[type="submit"]:hover {
    background-color: #3bbd00;
    transition: .5s;
}

/* MENUS */

section#app-body nav.admin-menus {
    display: flex;
    background-color: #3c3c3c;
    color: white;
    justify-content: space-between;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
}

section#app-body nav.admin-menus p.logo {
    text-transform: uppercase;
}

section#app-body nav.admin-menus p.logo:before {
    content: '>';
    padding-right: 10px;
}

section#app-body nav.admin-menus div.navigation button{
    background: none;
    background-color: #3c3c3c;
    color: white;
    padding: 4px 6px;
    border: 1px solid white;
    border-radius: 10px;
    margin-left: 6px;
}

section#app-body div.pagination-count {
    background-color: #3c3c3c;
    color: white;
    padding: 10px 6px;
}

section#app-body div.pagination-count select#count_options {
    margin: 0 5px;
    background: none;
    color: white;
    border: 1px solid white;
    border-radius: 10px;
    padding: 0 3px;
}

section#app-body div.pagination-count select#count_options option {
    color: black;
}

#downloadExcel a {
    text-decoration: none;
    color: white;
}

#logout {
    background: none;
    background-color: #3c3c3c;
    color: white;
    padding: 4px 6px;
    border: none;
    border-radius: 10px;
    margin-left: 45px;
}

/* TABLE */

section#app-body div#main.container div.table-header {
    display: flex;
    justify-content: space-around;
    color: white;
    font-size: .6em;
    background: -moz-linear-gradient(-45deg, #af02ff 0%, #ff7c02 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #af02ff 0%,#ff7c02 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #af02ff 0%,#ff7c02 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#af02ff', endColorstr='#ff7c02',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

section#app-body div#main.container div.table-header>*{
    width: calc(100% / 9);
    padding-left: 5px;
    height: 30px;
    line-height: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

section#app-body div#main.container div.table-header>span {
    width: 40px!important;
}

section#app-body div#main.container div.table-header>*:last-child{
    width: 150px;
}

/* FILTERS */

section#app-body div#main.container div.filters {
    background-color: #3c3c3c;
    display: flex;
    justify-content: space-around;
    height: 50px;
    align-items: center;
    position: relative;
}

section#app-body div#main.container div.filters>div[data-name="number"] {
    width: 60px!important;
}

section#app-body div#main.container div.filters>*{
    width: calc(100% / 10);
    height: 30px;
    line-height: 30px;
    text-transform: uppercase;
    padding: 0 3px;
}

section#app-body div#main.container div.filters input{
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid white;
    color: white;
}

section#app-body div#main.container div.filters button {
    border: none;
    background: none;
    color: white;
    cursor: pointer;
}

select[data-value=organizationId] option{ color: black; }

select[data-value=status] option{ color: black; }

/*section#app-body div#main.container div.filters button#search_cancel {*/
    /*position: absolute;*/
    /*right: 0;*/
    /*bottom: -30px;*/
    /*background-color: #3c3c3c;*/
/*}*/

section#app-body div#main.container div.filters>div.table-select select{
    width: 100%;
    height: 100%;
    background: none;
    color: white;
    border: 1px solid white;
    border-radius: 10px;
}

section#app-body div#main.container div.table-body {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}

section#app-body div#main.container div.table-body div.table-row-single{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    padding: 5px 0;
    box-sizing: border-box;
    align-items: center;
    padding-left: 3px;
    transition: .5s;
    font-size: .7em;
}

section#app-body div#main.container div.table-body div.table-row-single:hover {
    background-color: rgba(0, 0, 0, 0.09);
    transition: .5s;
}

section#app-body div#main.container div.table-body div.table-row-single>*{
    width: calc(100% / 9);
    padding-left: 3px;
}

section#app-body div#main.container div.table-body div.table-row-single>span {
    width: 40px!important;
    font-weight: bold;
}

section#app-body div#main.container div.table-body div.table-row-single div.table-select select {
    width: 100%;
    font-size: .9em;
}

section#app-body div#main.container div.table-body div.table-row-single div.table-buttons{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 150px;
}

section#app-body div#main.container div.table-body div.table-row-single div.table-buttons button{
    display: block;
    width: 25px !important;
    height: 25px;
    background-color: #fd7907;
    color: white;
    border: none;
    border-radius: 50%;
    transition: .5s;
    width: 300px;
}

section#app-body div#main.container div.table-body div.table-row-single div.table-buttons button i{
    font-size: 17px;
}

section#app-body div#main.container div.table-body div.table-row-single div.table-buttons button:hover{
    background-color: #b003fd;
    transition: .5s;
}

/* PAGINATION */

section#app-body div#pagination {
    display: flex;
    background-color: #3c3c3c;
    padding: 10px 6px;
}

section#app-body div#pagination>button#show_all {
    background: none;
    background-color: #3c3c3c;
    color: white;
    padding: 4px 6px;
    border: 1px solid white;
    border-radius: 10px;
}

section#app-body div#pagination div#counter {
    color: white;
    display: flex;
    align-items: center;
    width: 100%;
	flex-wrap: wrap;
}

section#app-body div#pagination div#counter div {
    padding: 0 10px;
}

section#app-body div#pagination div#counter div.active {
    font-weight: bold;
    color: #3c3c3c;
    display: block;
    height: 30px;
    width: 30px;
    text-align: center;
    border-radius: 50%;
    background-color: #fd7907;
    line-height: 30px;
    margin: 0 10px;
    padding: 0;
}

/* FLASHES */

div#flash-container {
    position: fixed;
    z-index: 100;
    bottom: -80px;
    width: 100vw;
    height: 80px;
    transition: .5s;
}

div#flash-container.active {
    bottom: 0px;
    transition: .5s;
}

div#flash-container div.flash-success {
    background: #5da32c; /* Old browsers */
    background: -moz-linear-gradient(left, #5da32c 0%, #3ce062 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #5da32c 0%,#3ce062 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #5da32c 0%,#3ce062 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5da32c', endColorstr='#3ce062',GradientType=1 ); /* IE6-9 */
    color: white;
}

div#flash-container div.flash-error {
    background: #9e2a2c; /* Old browsers */
    background: -moz-linear-gradient(left, #9e2a2c 1%, #ea3f3f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #9e2a2c 1%,#ea3f3f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #9e2a2c 1%,#ea3f3f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e2a2c', endColorstr='#ea3f3f',GradientType=1 ); /* IE6-9 */
    color: white;
}

div#flash-container>div {
    height: 100%;
    font-size: 1.2em;
    line-height: 80px;
    text-align: center;
}

div#flash-container>div i {
    font-size: 1.2em;
}

/* MODALS */

.hidden {
    display: none !important;
}

div#modalsContainer {
    position: absolute;
    width: 100%;
}

div#modalsContainer div.modal {
    position: absolute;
    z-index: 150;
    min-width: 500px;
    width: fit-content;
    background-color: white;
    top: 100px;
    left: 0;
    right: 0;
    margin: auto;
    padding: 40px;
    border-radius: 20px;
    box-sizing: border-box;
    transition: .5s;
}

div#modalsContainer div.modal.hidden {
    transition: .5s;
}

div#modalsContainer div.modal div.modal-header {
    position: relative;
}

div#modalsContainer div.modal div.modal-header span.modal-close {
    position: absolute;
    top: -30px;
    right: -30px;
    display: block;
    color: white;
    background-color: red;
    width: 20px;
    height: 20px;
    text-align: center;
    border-radius: 50%;
}

div#modalsContainer div.modal div.modal-content {
    margin-top: 20px;
    overflow-y: auto;
    height: fit-content;
    max-height: 400px;
}

div#modalsContainer div.modal div.modal-content>div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

div#modalsContainer div.modal div.modal-content>div>* {
    display: flex;
    justify-content: space-between;
    flex-basis: 0;
    flex-grow: 1;
    word-break: break-word;
    margin-left: 10px;
    box-sizing: border-box;
}

div#modalsContainer div.modal div.modal-content>div>div.modal-buttons {
    flex-grow: 0;
}

div#modalsContainer div.modal div.modal-content div.new-entity {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

div#modalsContainer div.modal div.modal-content div.new-entity button {
    border-radius: 3px;
    border: none;
    background: none;
    padding: 8px;
    color: white;
    background-color: #af02ff;
    transition: .5s;
}

div#modalsContainer div.modal div.modal-content div.new-entity button:hover {
    background-color: #3bbd00;
    transition: .5s;
}

div#modalsContainer div.modal div.modal-content div.modal-buttons button {
    border: none;
    background: none;
    margin: 5px;
}

div#modalsContainer div.modal-fader {
    position: fixed;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
}

.found {
    background-color: yellow;
}