:root {
    --main-color: #F8AD9D;
    --secondary-color: #f7f7f7;
    --main-accent: #F08080;
    --main-color-shade: #F4978E;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: white;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--main-accent);
    border-radius: 8px;
    margin: 3px;
}

* {
    -webkit-appearance: none !important;
}
input {
    -webkit-appearance: initial !important;
}

.form-switch > input[type='checkbox'] {
    -webkit-appearance: initial !important;
}

body {
    font-family: Poppins, sans-serif;
}

.base-container {
    background: var(--secondary-color)
}

@media (min-width: 992px) {
    .base-container {
        background: rgb(247, 247, 247) !important;
        background: linear-gradient(180deg, rgba(247, 247, 247, 1) 85%, rgba(248, 173, 157, 0.75) 100%) !important;
    }
}

.btn {
    transition-duration: 0.2s;
}

.btn-ums {
    color: white;
    background-color: var(--main-color);
    font-weight: bold;
}

.btn-ums:hover, .btn-ums:focus, .btn-ums:active {
    color: white;
    background: var(--main-accent);
}

.btn-ums-outline {
    color: var(--main-color);
    border-color: var(--main-color);
    background-color: white;
    font-weight: bold;
}

.btn-transparent-ums {
    background-color: rgba(248, 173, 157, 0.14);
    color: var(--main-color-shade);
    font-weight: bold;
}

.btn-transparent-ums:hover, .btn-transparent-ums:focus, .btn-transparent-ums:active {
    background: var(--main-color);
    color: white;
}

.btn-transparent {
    background-color: transparent;
    transition-duration: 0.2s;
    transition-property: background-color;
}

.btn-transparent:hover, .btn-transparent:focus, .btn-transparent:active {
    background-color: rgba(0,0,0,0.14)
}

.btn-transparent-success {
    background: rgba(40, 167, 69, 0.14);
    color: rgb(40, 167, 69);
    font-family: Poppins, sans-serif;
    font-weight: bold;
}

.btn-transparent-danger {
    background: rgba(220, 53, 69, 0.14);
    color: rgb(220, 53, 69);
    font-family: Poppins, sans-serif;
    font-weight: bold;
}

.btn-transparent-success:hover, .btn-transparent-success:active, .btn-transparent-success:focus {
    color: white;
    background: rgb(40, 167, 69);
    font-family: Poppins, sans-serif;
    font-weight: bold;
}

.btn-transparent-danger:hover, .btn-transparent-danger:active, .btn-transparent-danger:focus {
    color: white;
    background: rgb(220, 53, 69);
    font-family: Poppins, sans-serif;
    font-weight: bold;
}

.btn-transparent-primary {
    background: rgba(0, 123, 255, 0.14);
    color: rgb(0, 123, 255);
    font-family: Poppins, sans-serif;
    font-weight: bold;
}

.btn-transparent-primary:hover, .btn-transparent-primary:active, .btn-transparent-primary:focus {
    color: white;
    background: rgb(0, 123, 255);
    font-family: Poppins, sans-serif;
    font-weight: bold;
}

.btn-transparent-secondary {
    background: rgba(108, 117, 125, 0.14);
    color: rgb(108, 117, 125);
    font-family: Poppins, sans-serif;
    font-weight: bold;
}

.btn-transparent-secondary:hover, .btn-transparent-secondary:active, .btn-transparent-secondary:focus {
    color: white;
    background: rgb(108, 117, 125);
    font-family: Poppins, sans-serif;
    font-weight: bold;
}

.btn-transparent-info {
    background: rgba(13, 202, 240, 0.14);
    color: rgb(13, 202, 240);
    font-family: Poppins, sans-serif;
    font-weight: bold;
}

.btn-transparent-info:hover, .btn-transparent-info:active, .btn-transparent-info:focus {
    color: white;
    background: rgb(13, 202, 240);
    font-family: Poppins, sans-serif;
    font-weight: bold;
}

.btn-transparent-warning {
    background: rgba(255, 193, 7, 0.14);
    color: rgb(255, 193, 7);
    font-family: Poppins, sans-serif;
    font-weight: bold;
}

.btn-transparent-warning:hover, .btn-transparent-warning:active, .btn-transparent-warning:focus {
    color: white;
    background: rgb(255, 193, 7);
    font-family: Poppins, sans-serif;
    font-weight: bold;
}

.search-input {
    background: var(--main-color);
    color: white;
    transition-duration: 0.2s;
    transition-property: background;
}

.search-input:focus {
    color: var(--main-color);
}

.search-input::placeholder {
    color: white;
}

.search-input:focus::placeholder {
    color: var(--main-color);
}

a, a:hover, a:focus, a:active {
    text-decoration: none;
    color: inherit;
}

@media (max-width: 992px) {
    main > .container, main > .container-fluid {
        height: calc(100vh - 112px) !important;
    }
}

main > .container, main > .container-fluid {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

