/* Current Version: 2.0.0.2-b */

* {
    box-sizing  : border-box;
    margin      : 0px;
    padding     : 0px;
    font-family : "Noto Sans";
    font-size   : 1rem;
    font-weight : normal;
    line-height : 1.5;
}

a {
    text-decoration : none;
    color           : #2196F3;
    transition      : 250ms;
}

    a:focus { outline: none; }

    a:hover { color: #000000; }

body { background-color: #F1F1F1; }

button {
    display             : flex;
    flex-direction      : row;
    justify-content     : center;
    align-items         : center;
    width               : 128px;
    min-height          : 40px;
    padding             : .5rem;
    border              : 0px;
    border-radius       : .25rem;
    background-color    : #FFFFFF;
    cursor              : pointer;
}

    button:disabled {
        background-color    : #F1F1F1;
        color               : #000000;
        pointer-events      : none;
    }

    button:focus { outline: none; }

div { outline: none; }

dt {
    margin-top  : 1rem;
    font-weight : bold;
}

h1 { font-size: xxx-large; }

h2 { font-size: xx-large; }

h3 { font-size: x-large; }

hr {
    margin-top  : .5rem;
    color       : #F1F1F1;
}

input {
    width           : 100%;
    border          : 0px;
    border-bottom   : 1px solid #F1F1F1;
    padding         : .5rem;
    transition      : 250ms;
}

    input:focus {
        outline         : none;
        border-bottom   : 1px solid #000000;
    }

strong { font-weight: bold; }

table {
    width           : 100%;
    border-collapse : collapse;
}

    table td { padding: .5rem; }

    table th {
        padding     : .5rem;
        font-weight : bold;
    }

.app-title {
    font-size   : xx-large;
    line-height : 1;
}

.bg-black {
    background-color    : #000000;
    color               : #FFFFFF;
}

.bg-blue {
    background-color    : #2196F3;
    color               : #FFFFFF;
}

.bg-white { background-color: #FFFFFF; }

.bordered-table td, th { border: 1px solid #E1E1E1; }

.container {
    display         : flex;
    flex-direction  : column;
    width           : 80%;
    min-height      : 100vh;
    margin          : auto auto;
}

.contents-table { list-style-type: none; }

    .contents-table li {
        border-bottom   : 1px solid #F1F1F1;
        padding         : 1rem;
        cursor          : pointer;
        transition      : 250ms;
    }

        .contents-table li:hover {
            background-color    : #2196F3;
            color               : #FFFFFF;
        }

.f-48px { font-size: 48px; }

.f-amber { color: #FFC107; }

.f-green { color: #4CAF50; }

.f-red { color: #F44336; }

.f-small { font-size: small }

.flex { display: flex; }

.flex-columns { flex-direction: column; }

.flex-hcenter { justify-content: center; }

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

.flex-vcenter { align-items: center; }

.floating-label {
    display         : flex;
    flex-direction  : column;
}

    .floating-label label {
        position        : absolute;
        padding         : 0.5rem;
        pointer-events  : none;
        transition      : 250ms;
    }

    .floating-label input::placeholder {
        color: transparent;
    }

    .floating-label input:focus + label,
    .floating-label input:not(:placeholder-shown) + label {
        padding     : 0px;
        color       : #616161;
        transform   : translateY(-60%) translateX(-5%) scale(0.75);
    }

.h-24px { height: 24px; }

.h-48px { height: 48px; }

.hover:hover { opacity: 0.7; }

.loader {
    border          : 8px solid #F1F1F1;
    border-top      : 8px solid #2196F3;
    border-radius   : 50%;
    animation       : spin 2s linear infinite;
}

.loader-alternate {
    width           : 120px;
    height          : 120px;
    margin-bottom   : 1rem;
    border          : 16px solid #F1F1F1;
    border-top      : 16px solid #2196F3;
    border-radius   : 50%;
    animation       : spin 1s alternate infinite;
}

.loader--dark-gray {
    border          : 4px solid #FFFFFF;
    border-top      : 4px solid #616161;
    border-radius   : 50%;
    animation       : spin 2s linear infinite;
}

.loading-banner {
    position            : fixed;
    left                : 0px;
    top                 : 0px;
    display             : flex;
    flex-direction      : column;
    justify-content     : center;
    align-items         : center;
    width               : 100vw;
    height              : 100vh;
    background-color    : #FFFFFF;
}

.m-auto { margin: auto auto; }

.mb-5 { margin-bottom: 5rem; }

.modal-content { overflow: auto; }

.modal-dialog {
    width               : 40%;
    margin              : auto auto;
    padding             : 2rem;
    background-color    : #FFFFFF;
}

.modal-header {
    display         : flex;
    flex-direction  : row;
    align-items     : center;
}

    .modal-header h2 { flex: 1; }

    .modal-header i {
        font-size   : 24px;
        cursor      : pointer;
        transition  : 250ms;
    }

        .modal-header i:hover { color: #E60000; }

.modal-screen {
    position            : fixed;
    width               : 100vw;
    height              : 100vh;
    display             : none;
    flex-direction      : column;
    background-color    : rgba(0, 0, 0, .7);
}

.mr-005 { margin-right: .5rem; }

.mt-1 { margin-top: 1rem; }

.mt-2 { margin-top: 2rem; }

.mt-3 { margin-top: 3rem; }

.p-005 { padding: .5rem; }

.p-2 { padding: 2rem; }

.page-header {
    padding             : 5rem;
    background-color    : #616161;
    color               : #FFFFFF;
}

    .page-header h1 { font-size: xxx-large; }

.panel {
    display         : flex;
    flex-direction  : column;
    width           : 30%;
    padding         : 2rem;
}

.scrollable {
    max-width   : 100%;
    overflow    : auto;
}

.snackbar {
    position        : fixed;
    left            : 42.5%;
    display         : flex;
    flex-direction  : column;
    width           : 15%;
    height          : fit-content;
}

.t-center { text-align: center; }

.table-of-contents {
    display         : flex;
    flex-direction  : row;
    align-items     : center;
    cursor          : pointer;
}

    .table-of-contents:hover { opacity: 0.7; }

    .table-of-contents i {
        margin-right    : .5rem;
        font-size       : 24px;
    }

.toast {
    visibility          : hidden;
    display             : flex;
    flex-direction      : row;
    margin-top          : .5rem;
    padding             : .5rem;
    background-color    : rgba(0, 0, 0, .8);
    color               : #FFFFFF;
}

    .toast p {
        flex        : 1;
        font-size   : small;
    }

    .toast span {
        display         : flex;
        flex-direction  : column;
        align-items     : center;
        width           : 24px;
    }

        .toast span:last-of-type i {
            font-size   : 12px;
            cursor      : pointer;
        }

            .toast span:last-of-type i:hover { opacity: .7; }

.toast.show {
    visibility          : visible;
    -webkit-animation   : fadein 1s, fadeout 2s 5s;
    animation           : fadein 1s, fadeout 2s 5s;
}

.w-80pt { width: 80%; }

.w-24px { width: 24px; }

.w-48px { width: 48px; }

.w-fit { width: fit-content; }

@-webkit-keyframes fadein {
    from { opacity: 0; }
    
    to { opacity: 1; }
}

@-webkit-keyframes fadeout {
    from { opacity: 1; }
    
    to { opacity: 0; }
}

@keyframes fadein {
    from { opacity: 0; }
    
    to { opacity: 1; }
}

@keyframes fadeout {
    from { opacity: 1; }
    
    to { opacity: 0; }
}
    
@keyframes spin {
    0% { transform: rotate(0deg); }
    
    100% {transform: rotate(360deg); }
}

@media only screen and (max-width: 1440px) {
    .panel { width: 40%; }
    
    .snackbar {
        left    : 40%;
        width   : 20%;
    }
}

@media only screen and (max-width: 1200px) {
    .panel { width: 50%; }
    
    .snackbar {
        left    : 35%;
        width   : 30%;
    }
}

@media only screen and (max-width: 992px) {
    .modal-dialog { width: 50%; }
    
    .panel { width: 60%; }
    
    .snackbar {
        left    : 30%;
        width   : 40%;
    }
}

@media only screen and (max-width: 768px) {
    .modal-dialog { width: 60%; }
    
    .panel { width: 70%; }
    
    .snackbar {
        left    : 30%;
        width   : 40%;
    }
}

@media only screen and (max-width: 600px) {
    .container { width: 100%; }
    
    .modal-dialog { width: 100%; }
    
    .page-header { padding: 2rem; }
    
    .panel {
        width   : 100%;
        height  : 100vh;
    }
    
    .snackbar {
        left    : 10%;
        width   : 80%;
    }
    
    .w-80pt { width: 100%; }
}