/*
    ff - Filion's Framework
*/
/* ----------------notifications-----------------*/
#ff-notification-box { position: fixed; bottom: 0px; right: 0px; z-index: 30; color: white; background-color: transparent; display: none; max-width: 1240px; width: 30%; min-width: 300px; }
#ff-notification-box .ff-notification-container { width: 100%; margin: 0 auto; box-sizing: border-box; position: relative; padding: 0 1rem; float: right; }
#ff-notification-box .inside { padding: 10px 4rem 10px 10px; height: 100px; overflow: auto; background-color: black; border-radius: 5px; }
#ff-notification-box .close { font-size: 4rem; position: absolute; right: 2rem; top: 0px; font-weight: bold; color: white; border-radius: 8px; transition: 0.3s; cursor: pointer; }
/*#ff-notification-box .close:hover, #ff-notification-box .close:focus { cursor: pointer; }*/
.ff-notification { margin-bottom: 10px; padding: 10px; background-color: #F1DABF; color: black; border-radius: 5px; }
.ff-notification--ok { background-color: #6ABC6D; }
.ff-notification--info { background-color: #46A7F5; }
.ff-notification--warning { background-color: #FFA92B; }
.ff-notification--error { background-color: #F56358; }

/* modal windows */
.ff-modal { z-index: 20; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: none; }
.ff-modal .close{ z-index: 21; position: relative; float: right; top: -10px; font-size: 2.5rem; padding: 0px 10px; font-weight: bold; background-color: black; color: white; }
.ff-modal .close:hover, 
.ff-modal .close:focus { cursor: pointer; }
.ff-modal .icon{ z-index: 21; position: relative; float: left; top: -10px;  width: 2.5rem; }
.ff-modal .container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 900px; height: 900px; max-width: 100%; max-height: 100%; }
.ff-modal .inside { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 20px; padding-top: 4rem; overflow: auto; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.85);}

/* modal dialogs */
.ff-dialog-modal { z-index: 25; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); }
.ff-dialog-modal .close{ z-index: 31; position: absolute; top: 20px; right: 20px; font-size: 2.5rem; padding: 0px 10px; font-weight: bold; background-color: black; color: white; }
.ff-dialog-modal .close:hover, 
.ff-dialog-modal .close:focus { cursor: pointer; }
.ff-dialog-modal .icon{ z-index: 31; position: absolute; top: 20px; left: 20px; width: 3rem; }
.ff-dialog-modal .container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 900px; height: 300px; max-width: 100%; max-height: 100%; }
.ff-dialog-modal .inside { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 20px; padding-top: 4rem; overflow: auto; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.85);}

.ff-dialog-modal .dialog-message { font-size: 16pt; text-align: center; height: 105px; overflow: auto; margin: 20px 0px 10px 0;}
.ff-dialog-modal button[type=button] { display: inline-block; color: white; font-size: 14pt; padding: 10px 20px; margin: 10px; border: none; cursor: pointer; border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; }
.ff-dialog-button-yes { background-color: #F26419; }
.ff-dialog-button-no { background-color: #F26419; }
.ff-dialog-button-ok { background-color: #F26419; }
.ff-dialog-button-clear {background-color: #F26419; }
.ff-dialog-bg-warning { background-color: #ffc90e; }
.ff-dialog-bg-error { background-color: #F56358; }


/* ---------------multiforms--------------*/
.ff-multiForm { }
.ff-multiForm input[type=text],
.ff-multiForm input[type=email],
.ff-multiForm input[type=password],
.ff-multiForm input[type=number] { border: 1px solid black; background-color: white; color: black; width: 100%; padding: 5px; box-sizing: border-box; border-radius: 2px; }

/* ----------------tables----------------*/
.ff-table-searchBar { background-image: url('../img/searchicon.png'); background-position: 10px 12px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; box-sizing: border-box; display: inline-block; vertical-align: bottom; }
.ff-table-addEntry { background-image: url('../img/icons/add.svg'); width: 2.8rem; height: 2.8rem; background-size: 100%; background-repeat: no-repeat; background-color: transparent; display: inline-block; vertical-align: bottom; }
.ff-table-addEntry:hover { cursor: pointer; }


.ff-multiForm, 
.ff-bulkAnalysis { border-collapse: collapse; border: 1px solid #eee; border-bottom: 2px solid #33658A; width: 100%; background-color: white; box-sizing: border-box; box-shadow: 0px 5px 10px rgba(0,0,0,0.05); } /*,0px 0px 20px rgba(0,0,0,0.10) , 0px 20px 20px rgba(0,0,0,0.05), 0px 30px 20px rgba(0,0,0,0.05);*/
 
.ff-multiForm th, 
.ff-bulkAnalysis th { background-color: #33658A; color: white; text-align: left; text-transform: uppercase; border: 1px solid #eee; padding: 10px 5px; border-collapse: collapse; &.last { border-right: none; } }

.ff-table button[type=button], 
.button_in_table { margin: 1px; display: inline-block; background-color: #2F4858; color: white; padding: 4px 10px; border: none; cursor: pointer; border-radius: 2px; -webkit-appearance: none; -moz-appearance: none; }

/*ff-table tbody tr:hover td !!!!!*/
.ff-table tbody tr:hover { background-color: #d7ebf2; }
.ff-table tbody .tr-selected { background-color: #86BBD8; }
.ff-table tbody .tr-disabled { background-color: grey; }

.ff-multiForm td, 
.ff-bulkAnalysis td { color: black; border: 1px solid #eee; padding: 5px; border-collapse: collapse; }

table.ff-table { --border: 1px solid #eee; color: black; background-color: white; text-align: left; width: 100%; box-sizing: border-box; box-shadow: 0px 5px 10px rgba(0,0,0,0.05); border-radius: 10px; border-spacing: 0; border-collapse: separate; border: none; overflow: hidden; }
table.ff-table th { text-transform: uppercase; background-color: #225479; color: white; }
table.ff-table th,td { padding: 10px 5px;  }
table.ff-table th:not(:last-child),
table.ff-table td:not(:last-child) { border-right: none; }
table.ff-table>thead>tr:not(:last-child)>th,
table.ff-table>thead>tr:not(:last-child)>td,
table.ff-table>tbody>tr:not(:last-child)>th,
table.ff-table>tbody>tr:not(:last-child)>td,
table.ff-table>tfoot>tr:not(:last-child)>th,
table.ff-table>tfoot>tr:not(:last-child)>td,
table.ff-table>tr:not(:last-child)>td,
table.ff-table>tr:not(:last-child)>th,
table.ff-table>thead:not(:last-child),
table.ff-table>tbody:not(:last-child),
table.ff-table>tfoot:not(:last-child) {
    border-bottom: var(--border);
}

@media (max-width: 768px) {
    table.ff-table, .ff-table thead, .ff-table tbody, .ff-table th, .ff-table td, .ff-table tr { display: block; }
    .ff-table thead tr {  position: absolute; top: -9999px; left: -9999px; }
    .ff-table tr:not(:last-child) { border-bottom: 1px solid #33658A; }
    .ff-table td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; min-height: calc(1.5em + 10px);}
    .ff-table td:before { position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; font-weight: bold;}
}

.ff-table img { width: 5rem; height: 5rem; }

.buttonPicture { box-sizing: border-box; width: 1.8rem; height: 1.8rem; background-size: 100%; background-repeat: no-repeat; background-color: transparent; border: none; display: inline-block; float: none; }
.buttonPicture:hover { cursor: pointer; }
.no-wrap { white-space: nowrap; }