/* Base */
body { 
    padding-top: 5rem; 
    padding-bottom: 5rem; 
}
.main-container {
    max-width: 1400px;
}
.blue-bg {
    background-color: #1779ab;
}
textarea {
    height: 100px;
    width: 100%;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    margin-bottom: 3em;
}
.modal-backdrop {
    z-index: 0 !important;
}
.ul-no-bullets {
    list-style-type: none;
}
.centerize {
    margin: auto !important;
    width: 50%;
  }

/* Index */
.text-center {
    text-align:center; 
    margin:20px 0;
}
.text-green {
    font-weight:bold; 
    color:#168588;
}
.logo {
    width: 200px;
    padding: 10px;
}

/* Paper create */
.before-box {
    border:1px solid FireBrick; 
    color:#000;  
    margin-top:35px; 
    padding:15px;
}

/* Paper edition */
#tipbox {
    padding: 1rem;
    border-radius: 0.25rem;
    transition: top .5s;
    position: relative;
    top: 0;
}
#tiptext {
    font-size: .9em;
}
.comment-count {
    color: rgb(112, 105, 105);
}
.comment-box {
    margin-block: 0.5em;
}
.comment-form-margin {
    margin-block: 0.5em;
}
.comment-textarea-margin {
    margin-bottom: 0.5em;
}
.float-right {
    float: right;
}
.width-100 {
    width: 100%;
}
/* How */
.table-no-border {
    border: none;
}
.tr-red {
    border:1px solid #AB2C51;
}
.tr-hidden {
    height:15px;
}
.td-red {
    background:#AB2C51; 
    color:#FFF; 
    padding:30px; 
    text-align:center;
}
.box-example {
    img {
        width: 150%;
        height: 150%;
        object-fit: cover;
        }
}

/* Tool Development */
.text-red {
    color:#AB2C51;
}
.text-white {
    color: white;
}

/* Feedback */
.ratingWrapper > label {
    float: left;
}
.rating > input {
    display: none;
}
.rating > label:before {
    margin: 5px;
    margin-top: -17px;
    font-size: 2em;
    font-family: FontAwesome;
    display: inline-block;
    content: "★";
}
.rating > label {
    float: right;
    color: #ddd;
}

/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label { /* show gold star when clicked */
    color: #FFD700;
}
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label, /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label {
    color: #FFED85;
}