/* VARIABLES */
:root {
    --bgPrimary: #ab3647;
    --bgDark: #2b0c36;
    --bgSecondary: #230e2a;
    --drawer: #351640;
    --input: #4d265b;

    --linkColor: #d05466;
    --txtSecondary: #ddd;
  }

/* BASICS */

/* TYPOGRAPHY */
*{
    font-family: 'Roboto', sans-serif;
}

/* h1, h2, h3, h4, h5, h6{
    font-family: 'Fredoka One', cursive;
} */

/* COLORS */
.bg-dark{
    background: var(--bgDark) !important;
}

.bg-primary{
    background: var(--bgPrimary) !important;
}

.bg-secondary{
    background: var(--bgSecondary) !important;
}

.bg-standard-secondary{
    background: rgb(108,117,125) !important;
}

a, a:hover{
    color: var(--linkColor);
}

.text-secondary{
    color: var(--txtSecondary) !important;
}

/* BUTONS */
.btn{
    border-radius: 24px;
}

.btn-96px{
    min-width: 96px;
}

.btn-primary{
    background: var(--bgPrimary) !important;
    border-color: var(--bgPrimary) !important;
}

.btn-outline-primary{
    color: var(--linkColor) !important;
    border-color: var(--bgPrimary) !important;
}

.btn-outline-primary:hover{
    background: var(--bgPrimary) !important;
    color: #fff !important;
}

.btn-pagination-wire,
.btn-pagination span,
.btn-pagination a,
.btn-pagination-wire button,
.btn-pagination-wire span.select-none
{
    background: var(--bgPrimary) !important;
    color: var(--txtSecondary) !important;
    border-color: var(--bgPrimary) !important;
}

.btn-pagination-wire button,
.btn-pagination a{
    color: #fff !important;
}

.btn-pagination-wire{
    border-radius: 8px;
}

/* .btn-pagination svg{
    height: 32px
} */

.ss-btn{
    /* background: var(--bgPrimary) !important; */
    text-decoration: none;
}

/* NAVBAR */
.navbar-dark{
    background: var(--bgSecondary) !important;
}

/* ASIDE */
aside{
    height: 100vh;
    font-size: 18px;
}

.offcanvas{
    background: var(--drawer) !important;
    max-width: 80%;
    font-size: 18px;
}

/* NAVBAR */

.nav-pills .nav-link {
    color: var(--linkColor);
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: var(--bgPrimary);
    border-radius: 24px;
}

/* MAIN */
main{
    /* min-height: 100vh !important; */
    padding-top: 70px;
}

/* HEADER */

header{
    background: var(--bgSecondary) !important;
    /* height: 100vh; */
}

.header-caption{
    padding-left: 96px;
    padding-top: 180px;
    padding-bottom: 180px;
}

/* FOOTER */
footer{
    background: var(--bgSecondary) !important;
    padding: 64px 0;
}

/* PADDING */
.pt-big{
    padding-top: 96px;
    padding-bottom: 96px;
}

/* SIZING */
.w-full{
    width: 100%;
}

.w-25px{
    width: 25px;
}

/* INPUT */
input, select, textarea{
    background: var(--input) !important;
    border-color: var(--input) !important;
    color: #eee !important;
}

/* COVERS */
.cover{
    background-image: url("/img/cover/cover.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cover2{
    background-image: url("/img/cover/cover2.jpg");
}

.cover3{
    background-image: url("/img/cover/cover3.jpg");
}

.cover4{
    background-image: url("/img/cover/cover4.jpg");
}

.cover5{
    background-image: url("/img/cover/cover5.jpg");
}

/* IMAGES */
.img-box{
    height: 200px;
    background-color: #fff;
}

.img-box img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.img-box-contain img{
    object-fit: contain;
}

.img-box-sm{
    height: 32px;
    width: 32px;
}

.img-box-md{
    height: 64px;
    width: 64px;
}

.img-box-lg{
    height: 128px;
    width: 128px;
}

.img-box-xlg{
    height: 300px;
}

/* MODAL */
.modal-content{
    background: var(--bgDark);
}

.modal-header, .modal-footer{
    border: none;
}

/* CARD */

.card{
    background: var(--bgSecondary) !important;
}

/* RESPONSIVE */
@media only screen and (max-width: 576px) {
    .header-caption{
        padding-left: 16px;
        padding-top: 180px;
        padding-bottom: 180px;
    }
}

/* OTHERS */
.form-box{
    max-width: 400px;
    margin: 0 auto;
}

textarea:focus, 
textarea.form-control:focus, 
input.form-control:focus, 
input[type=text]:focus, 
input[type=password]:focus, 
input[type=email]:focus, 
input[type=number]:focus, 
[type=text].form-control:focus, 
[type=password].form-control:focus, 
[type=email].form-control:focus, 
[type=tel].form-control:focus, 
[contenteditable].form-control:focus,
select.form-control:focus
{
    box-shadow: inset 0 -1px 0 var(--bgPrimary);
}

.h-100vh{
    height: 100vh;
}

.ql-container.ql-snow{
    background: var(--input) !important;
    border-color: var(--input) !important;
    color: #eee !important;
}

.ql-toolbar.ql-snow{
    background: var(--linkColor) !important;
    border-color: var(--linkColor) !important;
}

.ql-editor{
    min-height:200px;
}

.chat-room-box{
    height: 60vh;
    overflow-y: auto;
}

.chat-input{
    border-radius: 24px 0px 0px 24px;
}