.skeleton {
    opacity: .7;
    animation: skeleton-loading 1s linear infinite alternate;
}

.skeleton-text {
    width: 100%;
    height: .5rem;
    margin-bottom: .25rem;
    border-radius: .125rem;
}

.skeleton-text:last-child {
    margin-bottom: 0;
    width: 80%;
}

@keyframes skeleton-loading {
    0% {
        background-color: hsl(200, 20%, 70%);
    }

    100% {
        background-color: hsl(200, 20%, 95%);
    }
}

/*--------------------
      Placeholder
---------------------*/

/* browsers require these rules separate */

.ui.input > input::-webkit-input-placeholder {
    color: rgba(191, 191, 191, 0.87);
}

.ui.input > input::-moz-placeholder {
    color: rgba(191, 191, 191, 0.87);
}

.ui.input > input:-ms-input-placeholder {
    color: rgba(191, 191, 191, 0.87);
}

/*--------------------
        Focus
---------------------*/

.ui.input.focus > input::-webkit-input-placeholder,
.ui.input > input:focus::-webkit-input-placeholder {
    color: rgba(115, 115, 115, 0.87);
}

.ui.input.focus > input::-moz-placeholder,
.ui.input > input:focus::-moz-placeholder {
    color: rgba(115, 115, 115, 0.87);
}

.ui.input.focus > input:-ms-input-placeholder,
.ui.input > input:focus:-ms-input-placeholder {
    color: rgba(115, 115, 115, 0.87);
}

/* Error Placeholder */

.ui.input.error > input::-webkit-input-placeholder {
    color: #e7bdbc;
}

.ui.input.error > input::-moz-placeholder {
    color: #e7bdbc;
}

.ui.input.error > input:-ms-input-placeholder {
    color: #e7bdbc !important;
}

/* Focused Error Placeholder */

.ui.input.error > input:focus::-webkit-input-placeholder {
    color: #da9796;
}

.ui.input.error > input:focus::-moz-placeholder {
    color: #da9796;
}

.ui.input.error > input:focus:-ms-input-placeholder {
    color: #da9796 !important;
}

/* Transparent Inverted */
.ui.transparent.inverted.input > input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.ui.transparent.inverted.input > input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.ui.transparent.inverted.input > input:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/*-------------------
      Content
--------------------*/

.ui.placeholder {
    position: static;
    overflow: hidden;
    -webkit-animation: placeholderShimmer 2s linear;
    animation: placeholderShimmer 2s linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    background-color: #FFFFFF;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.15) 15%, rgba(0, 0, 0, 0.08) 30%);
    background-size: 1200px 100%;
    max-width: 30rem;
}

@-webkit-keyframes placeholderShimmer {
    0% {
        background-position: -1200px 0;
    }

    100% {
        background-position: 1200px 0;
    }
}

@keyframes placeholderShimmer {
    0% {
        background-position: -1200px 0;
    }

    100% {
        background-position: 1200px 0;
    }
}

.ui.placeholder + .ui.placeholder {
    margin-top: 2rem;
}

.ui.placeholder + .ui.placeholder {
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;
}

.ui.placeholder + .ui.placeholder + .ui.placeholder {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
    -webkit-animation-delay: 0.45s;
    animation-delay: 0.45s;
}

.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.ui.placeholder,
.ui.placeholder > :before,
.ui.placeholder .image.header:after,
.ui.placeholder .line,
.ui.placeholder .line:after {
    background-color: #FFFFFF;
}

/* Image */

.ui.placeholder .image:not(.header):not(.ui) {
    height: 100px;
}

.ui.placeholder .square.image:not(.header) {
    height: 0px;
    overflow: hidden;
    /* 1/1 aspect ratio */
    padding-top: 100%;
}

.ui.placeholder .rectangular.image:not(.header) {
    height: 0px;
    overflow: hidden;
    /* 4/3 aspect ratio */
    padding-top: 75%;
}

/* Lines */

.ui.placeholder .line {
    position: relative;
    height: 0.85714286em;
}

.ui.placeholder .line:before,
.ui.placeholder .line:after {
    top: 100%;
    position: absolute;
    content: '';
    background-color: inherit;
}

.ui.placeholder .line:before {
    left: 0px;
}

.ui.placeholder .line:after {
    right: 0px;
}

/* Any Lines */

.ui.placeholder .line {
    margin-bottom: 0.5em;
}

.ui.placeholder .line:before,
.ui.placeholder .line:after {
    height: 0.5em;
}

.ui.placeholder .line:not(:first-child) {
    margin-top: 0.5em;
}

/* Header Image + 2 Lines */

.ui.placeholder .header {
    position: relative;
    overflow: hidden;
}

/* Line Outdent */

.ui.placeholder .line:nth-child(1):after {
    width: 0%;
}

.ui.placeholder .line:nth-child(2):after {
    width: 50%;
}

.ui.placeholder .line:nth-child(3):after {
    width: 10%;
}

.ui.placeholder .line:nth-child(4):after {
    width: 35%;
}

.ui.placeholder .line:nth-child(5):after {
    width: 65%;
}

/* Header Line 1 & 2*/

.ui.placeholder .header .line {
    margin-bottom: 0.64285714em;
}

.ui.placeholder .header .line:before,
.ui.placeholder .header .line:after {
    height: 0.64285714em;
}

.ui.placeholder .header .line:not(:first-child) {
    margin-top: 0.64285714em;
}

.ui.placeholder .header .line:after {
    width: 20%;
}

.ui.placeholder .header .line:nth-child(2):after {
    width: 60%;
}

/* Image Header */

.ui.placeholder .image.header .line {
    margin-left: 3em;
}

.ui.placeholder .image.header .line:before {
    width: 0.71428571rem;
}

.ui.placeholder .image.header:after {
    display: block;
    height: 0.85714286em;
    content: '';
    margin-left: 3em;
}

/* Spacing */

.ui.placeholder .image .line:first-child,
.ui.placeholder .paragraph .line:first-child,
.ui.placeholder .header .line:first-child {
    height: 0.01px;
}

.ui.placeholder .image:not(:first-child):before,
.ui.placeholder .paragraph:not(:first-child):before,
.ui.placeholder .header:not(:first-child):before {
    height: 1.42857143em;
    content: '';
    display: block;
}

/* Inverted Content Loader */

.ui.inverted.placeholder {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.14) 15%, rgba(255, 255, 255, 0.08) 30%);
}

.ui.inverted.placeholder,
.ui.inverted.placeholder > :before,
.ui.inverted.placeholder .image.header:after,
.ui.inverted.placeholder .line,
.ui.inverted.placeholder .line:after {
    background-color: #1B1C1D;
}

/*******************************
            Variations
*******************************/

/*-------------------
        Sizes
--------------------*/

.ui.placeholder .full.line.line.line:after {
    width: 0%;
}

.ui.placeholder .very.long.line.line.line:after {
    width: 10%;
}

.ui.placeholder .long.line.line.line:after {
    width: 35%;
}

.ui.placeholder .medium.line.line.line:after {
    width: 50%;
}

.ui.placeholder .short.line.line.line:after {
    width: 65%;
}

.ui.placeholder .very.short.line.line.line:after {
    width: 80%;
}

/*-------------------
        Fluid
--------------------*/

.ui.fluid.placeholder {
    max-width: none;
}

/*-------------------
     Placeholder
--------------------*/

.ui.placeholder.segment {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    max-width: initial;
    -webkit-animation: none;
    animation: none;
    overflow: visible;
    padding: 1em 1em;
    min-height: 18rem;
    background: #F9FAFB;
    border-color: rgba(34, 36, 38, 0.15);
    box-shadow: 0px 2px 25px 0 rgba(34, 36, 38, 0.05) inset;
}

.ui.placeholder.segment .button,
.ui.placeholder.segment textarea {
    display: block;
}

.ui.placeholder.segment .field,
.ui.placeholder.segment textarea,
.ui.placeholder.segment > .ui.input,
.ui.placeholder.segment .button {
    max-width: 15rem;
    margin-left: auto;
    margin-right: auto;
}

.ui.placeholder.segment .column .button,
.ui.placeholder.segment .column .field,
.ui.placeholder.segment .column textarea,
.ui.placeholder.segment .column > .ui.input {
    max-width: 15rem;
    margin-left: auto;
    margin-right: auto;
}

.ui.placeholder.segment > .inline {
    align-self: center;
}

.ui.placeholder.segment > .inline > .button {
    display: inline-block;
    width: auto;
    margin: 0px 0.35714286rem 0px 0px;
}

.ui.placeholder.segment > .inline > .button:last-child {
    margin-right: 0px;
}

/*--------------------
      Placeholder
---------------------*/

/* browsers require these rules separate */

.ui.form ::-webkit-input-placeholder {
    color: rgba(191, 191, 191, 0.87);
}

.ui.form :-ms-input-placeholder {
    color: rgba(191, 191, 191, 0.87) !important;
}

.ui.form ::-moz-placeholder {
    color: rgba(191, 191, 191, 0.87);
}

.ui.form :focus::-webkit-input-placeholder {
    color: rgba(115, 115, 115, 0.87);
}

.ui.form :focus:-ms-input-placeholder {
    color: rgba(115, 115, 115, 0.87) !important;
}

.ui.form :focus::-moz-placeholder {
    color: rgba(115, 115, 115, 0.87);
}

/* Error Placeholder */

.ui.form .error ::-webkit-input-placeholder {
    color: #e7bdbc;
}

.ui.form .error :-ms-input-placeholder {
    color: #e7bdbc !important;
}

.ui.form .error ::-moz-placeholder {
    color: #e7bdbc;
}

.ui.form .error :focus::-webkit-input-placeholder {
    color: #da9796;
}

.ui.form .error :focus:-ms-input-placeholder {
    color: #da9796 !important;
}

.ui.form .error :focus::-moz-placeholder {
    color: #da9796;
}

/*--------------
   Placeholder
---------------*/

.ui.embed > .placeholder {
    position: absolute;
    cursor: pointer;
    top: 0px;
    left: 0px;
    display: block;
    width: 100%;
    height: 100%;
    background-color: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
}

/*--------------
     Active
---------------*/

.ui.active.embed > .icon,
.ui.active.embed > .placeholder {
    display: none;
}

/*generic Skeleton load*/

.pictureLoader{
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.30) 15%, rgba(0, 0, 0, 0.08) 30%);
    animation: placeholderShimmer 4s linear;
    animation-iteration-count: infinite;
    background-size: 1000px 100%;
    max-width: 30rem;
    margin-bottom: 10px;
    background-color: lightgrey !important;
}
.pictureLoader .hidden:before{
    content: "";
    display: none !important;
}

.Skeleton_loader{
    box-shadow: 0px 2px 15px rgb(51 51 51 / 20%);
    border-radius: 5px;
    height: 306px;
}
.Skeleton_loader.tableTemplate{
    overflow: -moz-scrollbars-none;
}
.skeleton_header{
    background-color: #354657;
    height: 42px;
    border-radius: 5px 5px 0px 0px;
}
.skeleton_header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}
.skeleton_header-bar.whiteBar.sLong{
    background-color: rgb(255, 255, 255);
    width: 160px;
}
.skeleton_header-bar.short{
    width: 88px;
}
.skeleton_header-bar.lightGrey{
    background-color: rgb(230, 230, 230);
}
.skeleton_body{
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
}
.skeleton_body-row{
    display: flex;
    padding: 10px;
    justify-content: start;
    align-items: center;
    gap: 15px;
}
.skeleton_body-bar, .skeleton_header-bar, .skeleton_table-bar{
    height: 8px;
    border-radius: 5px;
}

.skeleton_body-bar.lightGrey, .skeleton_header-bar.lightGrey, .skeleton_header-bar.whiteBar, .skeleton_table-bar.lightGrey{
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.30) 15%, rgba(0, 0, 0, 0.08) 30%);
    animation: placeholderShimmer 4s linear;
    animation-iteration-count: infinite;
    background-size: 1000px 100%;
    max-width: 30rem;
    /*background-color: #BEC4C9;*/
}
.skeleton_body-bar.darkGrey, .skeleton_table-bar.darkGrey{
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.08) 0%, rgb(53, 70, 87) 15%, rgba(0, 0, 0, 0.08) 30%);
    animation: placeholderShimmer 4s linear;
    animation-iteration-count: infinite;
    background-size: 1000px 100%;
    max-width: 30rem;
    /*background-color: #6E7A86;*/
}
.skeleton_body-bar.short{
    width: 10%;
}
.skeleton_body-bar.medium{
    width: 15%;
}
.skeleton_body-bar.long{
    width: 50%;
}
.skeleton_body-bar.mLong{
    width: 60%;
}
.skeleton_body-bar.xLong{
    width: 85%;
}

/*table Skeleton load*/
.skeleton_table th, .skeleton_table td{
    padding: 5px;
    border-spacing: 15px;
}

table.skeleton_table{
    width: 100%;
    height: 232px;
    table-layout: fixed;
    margin-top: 25px;
}
.skeleton_table-bar.tiny{
    width: 24px;
}
.skeleton_table-bar.short{
    width: 45px;
}
.skeleton_table-bar.medium{
    width: 75%;
}
.skeleton_table-bar.long{
    width: 100%;
}