/*
 * Violet foncé #740A57
 * Violet claire #92418D
 * Rose #CA4288
 * Rouge #C41817
*/

/********************
******* COMMON ******
*********************/
body {
    background: #F8F8F8!important ;
}
i {
    margin: 0 5px;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Muli', sans-serif!important;
}
h1, h2, h5, h6{
    text-align: center;
    padding: 15px 0 0;
}
@media (min-width: 1200px){
    .container {
        max-width: 960px!important;
    }
}
/* Btn */
.link-next { 
    color: #740A57; 
    text-decoration: none;
} 
.link-next:hover { 
    color: #92418D; 
    text-decoration: none;
} 
/* Btn */
.btn-next { 
    color: #FFFFFF; 
    background-color: #740A57; 
    border-color: #740A57; 
    width: 140px;
} 
.btn-next-secondary{
    color: #740A57; 
    background-color: #FFFFFF;; 
    border-color: #740A57!important; 
    width: 140px;
}
.btn-next:not([disabled]):focus { 
    color: #FFFFFF; 
    background-color: #92418D; 
    border-color: #92418D; 
    box-shadow: 0 0 0 0.2rem rgba(202, 66, 136, 0.25)!important;
} 
.btn-next:not([disabled]):hover, 
.btn-next:not([disabled]):active,
.open .dropdown-toggle.btn-next  {
    color: #fff;
    background-color: #92418D;    
    border-color: #92418D;
}

.btn-outline-next { 
    color: #740A57;
    background-color: transparent;
    background-image: none;
    border-color: #740A57!important;
} 
.btn-outline-next:not([disabled]):hover,
.btn-outline-next:not([disabled]):active { 
    color: white;
    background-color: #740A57;
} 
.btn-outline-next:not([disabled]):focus { 
    box-shadow: 0 0 0 0.2rem rgba(202, 66, 136, 0.25)!important;
} 

.btn-group{
    width: 100%;
    display: flex;
    justify-content: center;
}
/* alert */
.alert-next {
    color: #740A57;
    background-color: #92418D;
    border-color: #CA4288;
}
.alert-next-light {
    color: white;
    background-color: #740A57;
    border-color: #92418D;
    text-align: center;
}
/* input */
.form-control:focus, .custom-select:focus {
    color: #495057;
    background-color: #fff;
    border-color: #92418D!important; 
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(202, 66, 136, 0.25)!important;
}
.inputError .input-group-text, .inputError input, .inputError textarea, .inputError select{
    border-color: #dc3545!important;
}
.inputError input:focus, .inputError textarea:focus, .inputError select:focus {
    border-color: #dc3545!important;
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.25)!important;
}
.list-group-item-text > div {
    margin-bottom: 0!important;
}
/* input required */
.required:after { 
    content: " *";
    color:#C41817;
 }
/* Card */
div.card.inline-card {
    display: flex;
    justify-content: center;
    flex-direction: row;
}
div.card.inline-card {
    margin: 25px 0;
}
div.card-img-container {
    max-width: 150px;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 1.25rem;
}
div.card-img-container img {
    width: 100%;
}
@media (max-width: 767px){
    div.card-img-container {
        display: none;
    }
}
div.card-body {
    overflow: hidden;
}

/* icon with text */
.icon-with-text {
    display: flex;
    justify-content: left;
    flex-direction: row;
}
.icon-with-text .ico {
    width: 70px;
    text-align: center;
    color: #495057;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0 1.25rem 0 0;
}
.icon-with-text .ico i{
    font-size: 30px;
    /* color: #CA4288; */
}
.icon-with-text .text h3{
    margin-bottom: 0!important;
}
.icon-with-text .text p{
    color: #495057;
    margin-bottom: 0!important;
}
@media (max-width: 540px){
    .icon-with-text {
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }
    .icon-with-text .ico {
        width: 100%;
        padding: 0 0 0 0;
    }
}
/* loader */
.centerLoader {
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1;
    background: #F8F8F8 !important;
    min-height: calc(90vh - 70px);
}
.lds-ripple {
    position: relative;
    width: 232px;
    height: 232px;
    margin: 25px auto;
    display: block;
}
.lds-ripple div {
    position: absolute;
    border: 4px solid #740A57;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}
/* badge */
.badge-next {
    color: #fff;
    background-color: #740A57;
}
/* modal */
/* .modal-dialog{
    margin: 17em auto!important;
} */
@keyframes lds-ripple {
    0% {
        top: 112px;
        left: 112px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: -1px;
        left: -1px;
        width: 232px;
        height: 232px;
        opacity: 0;
    }
}
/* progressbar */
.progress {
    height: 38px;
}
.progress .progress-bar{
    font-weight: bold;
    background-size: 2rem 2rem!important;
    background-color: #740A57!important;
}
/* helper mobile */
@media (max-width: 767px){
    .hideMobile {
        display: none;
    }
}
/*break line button */
.btn-group-vertical {
    width: 75%!important;
    margin: 0 auto!important;
    display: flex!important;
}
/* surlignage */
::selection { background-color: #92418D; color: white; } 
/* version */
.version {
    position: relative;
}
.version:after {
    content: 'v 1.1';
    color: grey;
    font-size: 12px;
    position: absolute;
    right: 0;
    bottom: 0;
}
/* text */
p.text-justify {
    white-space: pre-wrap;
}
/* input file */
.custom-file * {
    cursor: pointer;
}
.custom-file-label::after {
    opacity: 0!important;
}

/* rate */
div.score {
    display: flex;
    justify-content: center;
}
div.score .nexty {
    padding: 0 5px;
    color: #740A57;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}
div.score .nexty img{
    width: 40px;
    filter: grayscale(100%);
}
div.score .nexty:hover img, div.score .nexty.selected img{
    filter: grayscale(0%);
}
/* all rate*/
div.scoreAll {
    flex-direction: column;
}
div.scoreAll .nexty{
    cursor: default;
    display: flex;
}
/********************
******** NAV ********
*********************/
nav.navbar-dark{
    z-index: 10;
    background-color: #740A57 !important;
    min-height: 70px;
}
nav.navbar-dark button {    
    outline: none;
}
nav a.logo{
    width: 35%;
    min-width: 125px;
    max-width: 150px;
}
nav a.logo img{
    width: 100%;
}
nav div#navbarNav {
    justify-content: end;
}
nav div#navbarNav ul{
    margin: 0 0 0 auto;
}
nav .nav-link {
    padding: .25rem 1rem!important;
}
nav .hamburger-inner:before, nav .hamburger-inner:after, nav .hamburger-inner {
    background-color: white!important;
}
nav .hamburger:hover {
    opacity: 1!important;
}
.hamburger {
    padding: 4px 15px 0 !important;
}
nav #navbarNav i{
    width: 17px;
}
/* first letter (for date) */
.first-letter::first-letter {
    text-transform: uppercase!important;
}
/********************
******** LOGIN ******
*********************/
.loginPage.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 0;
    z-index: 99999;
    background: #F8F8F8;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100vw!important;
}
.loginPage.container .card {
    max-width: 550px;
    margin: 0 auto;
    text-align: center;
}
.loginPage.container .card img {
    width: 100%;
}
.loginPage.container .alert {
    width: 100%;
    text-align: center;
    margin: 1rem auto;
}
/********************
******** HOME ******
*********************/
.home-row .card:nth-child(1){
    margin: 0 12.5px 0 0;
}
.home-row .card:nth-child(2){
    margin: 0 0 0 12.5px;
}
@media (max-width: 576px){
    .home-row .card:nth-child(1){
        margin: 0;
        padding: 0;
    }
    .home-row .card:nth-child(2){
        margin: 25px 0 0;
        padding: 0;
    }
}
  
/*****************
***** BOOK *******
******************/
.card-img-container-book {
    padding: .75em !important;
}

/*****************
***** CSE *******
******************/
.cse-member i { 
    color: #740A57; 
    width: 25px;
    text-align: center;
} 
.cse-member p { 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
} 
@media (max-width:992px) {
    .cse-member .card-deck {
        flex-direction: column!important;
    }
    .cse-member .card-deck .card {
        margin-bottom: 15px;
    }
}