/*  You can add an asterisk to a required field purely through CSS. 
    @Html.LabelFor(m => m.Name, new { @class="required" }) */
.required:after {
    content: " *";
    font-weight: bold;
}
/*  END: You can add an asterisk to a required field purely through CSS. 
    @Html.LabelFor(m => m.Name, new { @class="required" }) */

/* CSS Tooltip from https://www.w3schools.com/css/css_tooltip.asp */

.css-tooltip-top {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}

    .css-tooltip-top .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        margin-left: -60px;
        /* My fix with becouse some elements has "nowrap" setting. In .tooltiptext I need "normal". */
        white-space: normal;
    }

        .css-tooltip-top .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: black transparent transparent transparent;
        }

    .css-tooltip-top:hover .tooltiptext {
        visibility: visible;
    }


.css-tooltip-bottom {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}

    .css-tooltip-bottom .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        top: 150%;
        left: 50%;
        margin-left: -60px;
        /* My fix with becouse some elements has "nowrap" setting. In .tooltiptext I need "normal". */
        white-space: normal;
    }

        .css-tooltip-bottom .tooltiptext::after {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent black transparent;
        }

    .css-tooltip-bottom:hover .tooltiptext {
        visibility: visible;
    }


.css-tooltip-right {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}

    .css-tooltip-right .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        top: -5px;
        left: 110%;
        /* My fix with becouse some elements has "nowrap" setting. In .tooltiptext I need "normal". */
        white-space: normal;
    }

        .css-tooltip-right .tooltiptext::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 100%;
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent black transparent transparent;
        }

    .css-tooltip-right:hover .tooltiptext {
        visibility: visible;
    }


.css-tooltip-left {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}

    .css-tooltip-left .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        top: -5px;
        right: 110%;
        /* My fix with becouse some elements has "nowrap" setting. In .tooltiptext I need "normal". */
        white-space: normal;
    }

        .css-tooltip-left .tooltiptext::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 100%;
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent transparent black;
        }

    .css-tooltip-left:hover .tooltiptext {
        visibility: visible;
    }

/* END: CSS Tooltip from https://www.w3schools.com/css/css_tooltip.asp */


/* Bootstrap 4 remove caret from dropdown button */
.dropdown-toggle::after {
    display: none;
}
/* END: Bootstrap 4 remove caret from dropdown button */

/* loader source: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader */
.loader {
    display: inline-block;
    border: 5px solid #f3f3f3;
    border-radius: 50%;
    border-top: 5px solid #1ab394;
    width: 26px;
    height: 26px;
    -webkit-animation: spin 0.75s linear infinite; /* Safari */
    animation: spin 0.75s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}