.hidden {
  display: none!important;
}

.fit-content {
    object-position: 50% 50%;
    height: 100%;
    object-fit: contain;
}

.error {
    color: red!important;
}

.content, .carousel-caption {
    position: absolute; /* Position the background text */
    bottom: 0; /* At the bottom. Use top:0 to append it to the top */
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
    color: #f1f1f1 !important; /* Grey text */
    width: 100%; /* Full width */
    padding: 20px; /* Some padding */
}

.text-success-dark {
    color: #2c974c;
}

.text-align-justify {
    text-align: justify !important;
}

.multiline-ellipsis-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* start showing ellipsis when 3rd line is reached */
    /* white-space: pre-wrap; */ /* let the text wrap preserving spaces */
}
.multiline-ellipsis-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* start showing ellipsis when 3rd line is reached */
    /* white-space: pre-wrap; */ /* let the text wrap preserving spaces */
}
.multiline-ellipsis-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */
    /* white-space: pre-wrap; */ /* let the text wrap preserving spaces */
}
.multiline-ellipsis-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; /* start showing ellipsis when 3rd line is reached */
    /* white-space: pre-wrap; */ /* let the text wrap preserving spaces */
}
.multiline-ellipsis-5 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; /* start showing ellipsis when 3rd line is reached */
    /* white-space: pre-wrap; */ /* let the text wrap preserving spaces */
}

.line-head {
    border: 0;
    border-top: 1px solid #333;
    border-bottom: 1px solid #fff;
    transform: translateY(-10px);
    transition: 0.2s;
}

.border-bottom-2 {
    border-bottom: 2px solid #000;
}

.border-radius-5 {
    border-radius: 5px;
}

.op-0 {
    opacity: 0 !important;
}

.drop-container {
    position: relative;
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    padding: 20px;
    border-radius: 10px;
    border: 2px dashed #555;
    color: #444;
    cursor: pointer;
    transition: background .2s ease-in-out, border .2s ease-in-out;
}

.drop-container:hover,
.drop-container.drag-active {
    background: #eee;
    border-color: #111;
}

.drop-container:hover .drop-title,
.drop-container.drag-active .drop-title {
    color: #222;
}

.drop-title {
    color: #444;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    transition: color .2s ease-in-out;
}

input[type=file] {
    width: 350px;
    max-width: 100%;
    color: #444;
    padding: 5px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #555;
}

input[type=file]::file-selector-button {
    margin-right: 20px;
    border: none;
    background: #084cdf;
    padding: 10px 20px;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease-in-out;
}

input[type=file]::file-selector-button:hover {
    background: #0d45a5;
}

.overlay {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    /* Black see-through */
    width: 100%;
    transition: .5s ease;
    color: white;
    font-size: 20px;
    padding: 20px;
}

.flip-card {
    background-color: transparent;
    /* width: 373px; */
    height: 373px;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    border: 1px solid;
    border-radius: 6px;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: #ffffff;
    color: black;
}

.flip-card-img {
    width: 300px;
    height: auto;
    min-height: 150px;
    max-height: 150px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    object-fit: fill;
}

.flip-card-btn {
    position: absolute;
    left: 50%;
    top: 90%;
    transform: translate(-50%, -50%);
}

.flip-card-btn:hover {
    color: #FFF;
}

/* Style the back side */
.flip-card-back {
    background-color: #7F8184;
    padding: 2px;
    color: white;
    font-weight: 100;
    transform: rotateY(180deg);
}

.card-back {
    border: 2px solid;
    border-radius: 6px;
    height: 100%;
    color: rgba(255, 255, 255, .8);
    font-weight: 100;
}

.mdi-55px.mdi-set,
.mdi-55px.mdi:before {
    font-size: 55px;
}