/* TABLE OF CONTENTS

    base
    card
    table
    input
    button
    result
    message
    file-drop

*/

/* [START] BASE */
body{
    background-color: var(--general-0) !important;
}

.smooth{
    -webkit-transition: all var(--effects-1) ease-in-out !important;
    -moz-transition: all var(--effects-1) ease-in-out !important;
    -ms-transition: all var(--effects-1) ease-in-out !important;
    -o-transition: all var(--effects-1) ease-in-out !important;
    transition: all var(--effects-1) ease-in-out !important;
}

/* 500px */
.max-height{
    max-height: 500px;
    overflow-y: auto;
}
/* 250px */
.max-height-small{
    max-height: 250px;
    overflow-y: auto;
}
/* 750px */
.max-height-large{
    max-height: 750px;
    overflow-y: auto;
}

.remove-outline:focus{
    outline: none !important;
    box-shadow: none !important;
}

.pointer{
    cursor: pointer;
}
.pointer:disabled{
    cursor: not-allowed;
}

.link{
    color: blue;
    text-decoration: underline;
}
/* [END] BASE */


/* [START] CARD */
.card{
    background-color: var(--card-0) !important;
    color: var(--card-2) !important;
}

.card-title{
    color: var(--card-1) !important;
    margin-bottom: 0px !important;
}

.card-info{
    position: absolute;
    right: 15px;
    top: 25px;
    color: var(--button-5) !important;
}
.card-info:hover .hoverinfo {
    visibility: visible;
}

.hoverinfo {
    visibility: hidden;
    min-width: 200px;
    background-color: var(--tooltip-0);
    color: var(--tooltip-1);
    text-align: center;
    padding: 5px 0;
    border-radius: var(--effects-1);
    font-family: Arial, sans-serif;
    line-height: 1.3;
}
.hoverinfo-right{
    position: absolute;
    z-index: 1;
    top: -5px;
    left: calc(100% + 15px);
    transform: translate(0, -50%);
}
.hoverinfo-bottom{
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: calc(100% + 15px);
    left: 50%;
    transform: translate(-50%, 0);
}
.hoverinfo-left{
    position: absolute;
    z-index: 1;
    top: -5px;
    right: calc(100% + 15px);
    transform: translate(0, -50%);
}
.hoverinfo-top{
    position: absolute;
    z-index: 1;
    top: -50px;
    left: 50%;
    transform: translate(-50%, 0);
}
/* [END] CARD */


/* [START] TABLE */
.table-inspect-btn {
    background-color: var(--button-2);
    color: var(--button-1);
    width: 40px;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    margin-right: 5px;
}
.table-edit-btn {
    background-color: var(--button-4);
    color: var(--button-5);
    width: 40px;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    margin-right: 5px;
}
.table-delete-btn {
    background-color: var(--button-8);
    color: var(--button-9);
    width: 40px;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    margin-right: 5px;
}

.table td, .table th {
    vertical-align: middle !important;
}

.table .draggable tr:hover {
    cursor: grab !important;
}

.table .draggable tr:active {
    cursor: grabbing !important;
}
/* [END] TABLE */


/* [START] INPUT */
label{
    color: var(--input-0) !important;
}

input, .form-control {
    background-color: var(--input-1) !important;
    padding: 5px;
    margin-bottom: 5px;
    text-decoration: none;
    color: var(--input-2) !important;
    border: var(--effects-0) solid var(--input-5) !important;
    font-weight: 300;
    border-radius: var(--effects-1) !important;
}
input:focus, textarea:focus{
    background-color: var(--input-3) !important;
    border: var(--effects-0) solid var(--input-5) !important;
}
input:not(.login-email-input):not(.login-password-input):not(.forgot-password-email-input)::placeholder, textarea::placeholder {
    color: var(--input-6) !important;
}
/* [END] INPUT */


/* [START] BUTTON */
/* .btn{
    background-color: var(--button-6) !important;
    color: var(--button-8) !important;
} */
.btn:hover{
    background-color: var(--button-14) !important;
    /* color: var(--button-14) !important; */
}

.btn-create, .btn-default-create {
    background-color: var(--button-0) !important;
    color: var(--button-1) !important;
}
.btn-inspect {
    background-color: var(--button-2) !important;
    color: var(--button-3) !important;
}
.btn-edit {
    background-color: var(--button-4) !important;
    color: var(--button-5) !important;
}
.btn-delete {
    background-color: var(--button-8) !important;
    color: var(--button-9) !important;
}
.btn-save {
    background-color: var(--button-6) !important;
    color: var(--button-7) !important;
}
.btn-cancel {
    background-color: var(--button-10) !important;
    color: var(--button-11) !important;
}
.btn-confirm {
    background-color: var(--button-12) !important;
    color: var(--button-13) !important;
}
.btn-back {
    background-color: var(--button-10) !important;
    color: var(--button-11) !important;
}

button:disabled, button[disabled]{
    cursor: not-allowed !important;
}
/* [END] BUTTON */

/* [START] RESULT */
.badge-success {
    background-color: var(--result-0) !important;
    color: var(--result-1) !important;
}

.badge-error {
    background-color: var(--result-2) !important;
    color: var(--result-3) !important;
}

.badge-secondary{
    background-color: var(--result-4) !important;
    color: var(--result-5) !important;
}

.badge-warning {
    background-color: var(--result-6) !important;
    color: var(--result-7) !important;
}
/* [END] RESULT */

/* [START] MESSAGE */
.message-success, .noty_theme__mint.noty_type__success{
    color: var(--message-1, #ffffff) !important;
}

.noty_theme__mint.noty_type__success{
    background-color: var(--message-0, #afc765) !important;
}

.message-error, .noty_theme__mint.noty_type__error{
    color: var(--message-3, #ffffff) !important;
}

.noty_theme__mint.noty_type__error{
    background-color: var(--message-2, #de636f) !important;
}
/* [END] MESSAGE */


/* [START] FILE-DROP */
.file-drop{
    margin: 25px;

    width: calc(100% - 50px);
    height: 200px;

    border: 1px dashed black;

    position: relative;
}

.file-drop-preview{
    width: calc(100% - 300px);
}

.file-drop-center{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.file-drop-center .file-upload-icon{
    width: 100%;
    display: block;
    text-align: center;
    font-size: 50px;
}

.file-drop .file-cancel-icon{
    position: absolute;
    right: 10px;
    top: 10px;
}

.file-drop-center p{
    width: 100%;
    text-align: center;
    display: block;
}

.file-drop-center p label{
    color: blue;
    text-decoration: underline;
}

.file-preview{
    width: 200px;
    height: 200px;
    margin: 25px;

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
/* [END] FILE-DROP */