/* Define special types */
/* --------------------------------------------------------------------------------------------- */
.small_loader {
    /* Size */
    width: 20px;
    height: 20px;

    /* Border */
    border-width: 5px;
}

.big_loader {
    /* Size */
    width: 120px;
    height: 120px;

    /* Border */
    border-width: 10px;
}

.big_loader, .small_loader {
    /* Position */
    margin: 10px auto;
    position: relative;

    /* Font */
    font-size: 10px;
    text-indent: -9999em;

    /* Border */
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.2)
                  rgba(255, 255, 255, 0.2)
                  rgba(255, 255, 255, 0.2)
                  #ffffff;
    border-radius: 50%;

    /* Animation */
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}
    .big_loader:after,  .small_loader:after{
        border-radius: 50%;
        width: 10em;
        height: 10em;
    }

    @-webkit-keyframes load8 {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes load8 {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
/* --------------------------------------------------------------------------------------------- */
/* Checkmark for completing something */
.check_mark {
    /* Position */
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
    margin-top: 5px;

    /* Size */
    width: 30px;
    height: 30px;
}

    .check_mark::before {
        position: absolute;
        left: 0;
        top: 50%;
        height: 50%;
        width: 3px;
        background-color: lightgreen;
        content: "";
        transform: translateX(10px) rotate(-45deg);
        transform-origin: left bottom;
    }

    .check_mark::after {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 3px;
        width: 100%;
        background-color: lightgreen;
        content: "";
        transform: translateX(10px) rotate(-45deg);
        transform-origin: left bottom;
    }
/* --------------------------------------------------------------------------------------------- */
/* Plus button, for adding something */
.plus_button {
    background: url("/library/icons/plus.png");
}

/* Minus button, for removing something */
.minus_button {
    background: url("/library/icons/minus.png");
}

/* Split button, for splitting something */
.split_button {
    background: url("/library/icons/split.png");
}

.minus_button, .plus_button, .split_button {
    /* Positioning */
    margin-top: 10px;
    margin-left: 15px;

    /* Size */
    width: 30px;
    height: 30px;

    /* Backroung image setting */
    background-repeat: no-repeat;
    background-size: contain;
}

.dots_button {
    pointer-events:none;
    float: left;
    width: 30px;
    height: 30px;
}

/* --------------------------------------------------------------------------------------------- */
/* Class representing an empty table */
.empty_table {
    font-size: 18px;
}
/* --------------------------------------------------------------------------------------------- */
/* Styles for visible and hidden rows in tables
/* Expanded on visible row should make it red on mobile */
@media screen and (max-width: 600px) {
    .visible_row_expanded {
        background-color: var(--orange_red);
        color:black;
    }
}

/* Hover and expanded on visible row should make it red on bigger screens */
@media screen and (min-width: 600px) {
    .visible_row:hover, .visible_row_expanded {
        background-color: var(--orange_red);
        color:black;
    }
}

.hidden_row {
    overflow: hidden;
}

 .hidden_cell {
    /* Needed to ensure cell does not poke out while hidden */
    padding: 0px;
}
/* --------------------------------------------------------------------------------------------- */
/* Represents a table cell where something is wrong */
.negative_cell {
    background-color: var(--orange_red);
    color: white
}

/* Represents a table cell where something is wrong */
.positive_cell {
    background-color: green;
    color: white
}

/* Represents text where something is wrong */
.negative {
    color: var(--orange_red);
}

/* Represents text where something is wrong */
.positive {
    color: lightgreen;
}
/* --------------------------------------------------------------------------------------------- */
/* Container which eases in and out via max height adjustment */
.transition_container{
    max-height: 0px;
    overflow: hidden;
    transition: max-height .5s ease-out;
}
/* --------------------------------------------------------------------------------------------- */
/* Show error or warning messages */
.error_display, .warning_display {
    height: 25px;
    padding-top: 8px;
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    border-radius: 25px;
    display: none;
    font-size: 14px;
}

.error_display {
    background-color: #ff9897;
    color: red;
}

.warning_display {
    background-color: #ffd5a6;
    color: orange;
}
/* --------------------------------------------------------------------------------------------- */
.nowrap {
    white-space: nowrap;
}
/* --------------------------------------------------------------------------------------------- */
.error_input {
    outline: none !important;
    border: 1px solid red;
    border-radius: 5px;
}
/* --------------------------------------------------------------------------------------------- */
/* Used for displaying headers to the user */
.header {
    font-size: 15px;
    font-weight: bold;
    line-height: 40px;
}
/* --------------------------------------------------------------------------------------------- */
/* Used for displaying options on an item */
.option_dropdown {
    /* Postioning */
    position: absolute;
    right: 1px;
    padding: 5px;
    margin-top: 30px;

    /* Size */
    max-height: 400px;

    /* Color */
    background-color: var(--powder_blue);

    /* Border */
    border: 1px solid black;

    /* Font */
    color: black;

    /* Floating */
    overflow-y: scroll;
    z-index: 1;
}
    .option_dropdown p:hover {
        background-color: var(--orange_red);
    }
/* --------------------------------------------------------------------------------------------- */
/* Used for displaying a popup to the user */
.popup {
    /* Hide initially */
	display: none;

    /* Size */
    max-height: 200px;

    /* Color */
    background-color: var(--powder_blue);

    /* Border */
    border: 1px solid black;

    /* Font */
    color: black;
    text-align: left;

    /* Floating */
    overflow-y: scroll;
	position: absolute;

    /* Spacing around text */
    padding: 10px;
}

.popup_open {
	display: block;
}
/* --------------------------------------------------------------------------------------------- */