/* =================================== CUSTOM THEME CSS =================================== */

:root {
    /* --------- COLORS --------- */
    --dark-gray-color: #414141;
    --gray-color: #808080;
    --light-gray-color: #D6D6D6;
    --pink-color: #fa7380;
    --light-pink-color: #F2C4CE;
    --header-height: 80px;
    --subheader-height: 90px;
    --footer-height: 230px;
    --footer-max768-height: 250px;
    --footer-max567-height: 350px;
    --footer-iPhone5-height: 400px;
}


/* --------- FONT --------- */

@font-face {
    font-family: "American Captain";
    src: url("//db.onlinewebfonts.com/t/a6bec1c4ef2d2fd1bac5a6951f5f32a3.eot");
    src: url("//db.onlinewebfonts.com/t/a6bec1c4ef2d2fd1bac5a6951f5f32a3.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/a6bec1c4ef2d2fd1bac5a6951f5f32a3.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/a6bec1c4ef2d2fd1bac5a6951f5f32a3.woff") format("woff"), url("//db.onlinewebfonts.com/t/a6bec1c4ef2d2fd1bac5a6951f5f32a3.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/a6bec1c4ef2d2fd1bac5a6951f5f32a3.svg#American Captain") format("svg");
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "American Captain" !important;
}

h1 {
    font-size: 70px !important;
    text-shadow: 2px 2px 2px var(--dark-gray-color);
}

h2 {
    font-size: 60px !important;
    text-shadow: 2px 2px 2px var(--dark-gray-color);
}

h3 {
    font-size: 50px !important;
    text-shadow: 2px 2px 2px var(--dark-gray-color);
}

h4 {
    font-size: 40px !important;
}

h5 {
    font-size: 30px !important;
}

h6 {
    font-size: 20px !important;
}

/* iPhone5 */
@media only screen and (max-width: 320px) {
    h2 {
        font-size: 50px !important;
    }
}

/* --------- BASE --------- */

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#app {
    min-height: 100%;
    position: relative;
}

#page-content {
    padding-top: 30px;
    padding-bottom: var(--footer-height);
    background-image: linear-gradient(var(--light-gray-color), rgba(255, 255, 255, 0.97));
}

@media (min-width: 567px) and (max-width: 768px) {
    #page-content {
        padding-bottom: var(--footer-max768-height);
    }
}

@media only screen and (max-width: 567px) {
    #page-content {
        padding-bottom: var(--footer-max567-height);
    }
}

@media only screen and (max-width: 320px) {
    #page-content {
        padding-bottom: var(--footer-iPhone5-height);
    }
}

.logo img {
    width: 200px;
    padding-top: 10px;
}


/* Font family */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--dark-gray-color);
}

p,
small {
    font-family: Arial, Helvetica, sans-serif;
}


/* --------- INPUT --------- */

input,
input[type=text],
input[type=email],
input[type=search],
input[type=password],
input[type=date],
.input-group {
    font-size: 14px;
    border-radius: 5px !important;
    border: 1px solid var(--light-gray-color) !important;
    height: 35px;
}

input:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=search]:focus,
input[type=password]:focus,
input[type=date]:focus {
    outline: 1px var(--light-pink-color) !important;
    -webkit-box-shadow: 0 0 0 0.08rem var(--light-pink-color);
    box-shadow: 0 0 0 0.08rem var(--light-pink-color);
}

.form-control:disabled {
    background-color: #e9ecef;
    opacity: 1;
}

/* --------- SELECT --------- */

select {
    background-color: white !important;
    color: var(--gray-color) !important;
    border-radius: 5px !important;
    height: 35px !important;
    border: 1px solid var(--light-gray-color) !important;
}

select:focus {
    outline: 1px var(--light-pink-color) !important;
    -webkit-box-shadow: 0 0 0 0.1rem var(--light-pink-color) !important;
    box-shadow: 0 0 0 0.1rem var(--light-pink-color) !important;
}

select:disabled {
    background-color: #e9ecef !important;
    opacity: 1;
}


/* --------- BUTTON --------- */

button {
    display: inline-block;
    font-size: 14px !important;
    border: none !important;
    border-radius: 5px !important;
    height: 35px;
    line-height: 1 !important;
    box-shadow: 2px 2px 3px var(--dark-gray-color) !important;
}

button:hover,
button:focus,
button:active {
    border: none !important;
    box-shadow: 2px 2px 6px var(--dark-gray-color) !important;
}


/* Pink btn - on hover transparent with pink border */

.btn-pink-trans {
    background-color: var(--pink-color) !important;
    color: white !important;
}

.btn-pink-trans:hover,
.btn-pink-trans:active,
.btn-pink-trans:focus {
    background-color: transparent !important;
    border: 2px solid var(--pink-color) !important;
}


/* Pink btn - on hover dark gray */

.btn-pink-dark {
    background-color: var(--pink-color) !important;
    color: white !important;
}

.btn-pink-dark:hover,
.btn-pink-dark:active,
.btn-pink-dark:focus {
    background-color: var(--dark-gray-color) !important;
}


/* Dark gray button - on hover pink */

.btn-dark {
    color: #fff !important;
    background-color: var(--dark-gray-color) !important;
}

.btn-dark:hover,
.btn-dark:active,
.btn-dark:focus {
    background-color: var(--pink-color) !important;
}


/* --------- TEXT --------- */

.text1 {
    color: var(--pink-color);
}

.text-gray {
    color: var(--gray-color);
}

.text-dark-gray {
    color: var(--dark-gray-color);
}

.text-light-gray {
    color: var(--light-gray-color);
}

.text-white {
    color: white;
}

.upp {
    text-transform: uppercase;
}


/* --------- CHECKBOX --------- */

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}

[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
    position: relative;
    padding-left: 1.95em;
    cursor: pointer;
}


/* checkbox aspect */

[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1.4em;
    height: 1.4em;
    border: 2px solid var(--light-gray-color);
    background: white;
    border-radius: 5px;
}


/* checked mark aspect */

[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
    content: '\2713\0020';
    position: absolute;
    top: .3em;
    left: .3em;
    font-size: 1em;
    /*font-size: 14px;*/
    line-height: 0.8;
    color: var(--pink-color);
    transition: all .2s;
    font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}


/* checked mark aspect changes */

[type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    transform: scale(0);
}

[type="checkbox"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
}


/* disabled checkbox */

[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: var(--gray-color);
    background-color: var(--light-gray-color);
}

[type="checkbox"]:disabled:checked + label:after {
    color: var(--gray-color);
}

[type="checkbox"]:disabled + label {
    color: var(--gray-color);
}


/* hover style just for information */

label:hover:before {
    border: 2px solid var(--pink-color) !important;
}


/* --------- BANNERS --------- */

.banner {
    padding-top: 0px;
    background-color: white;
    width: 100%;
    min-height: 100px;
    position: absolute;
    left: 0;
}


/* --------- CUSTOM CSS FOR BOOTSTRAP AND VUE COMPONENTS --------- */


/* Payment form */

.adyen-checkout__label,
.adyen-checkout__input-wrapper,
.adyen-checkout__input.adyen-checkout__input--large,
.adyen-checkout__input.adyen-checkout__input--small {
    width: 100% !important;
}

.adyen-checkout__field.adyen-checkout__field__cvc {
    margin-left: 5px !important;
}

.adyen-checkout__card__exp-cvc .adyen-checkout__field {
    margin-bottom: 0 !important;
    margin-right: 0px !important;
}


/* Navigation */
.navbar-toggler-icon {
    background-image: url("../../assets/images/menu-button-of-three-horizontal-lines.png") !important;
}

.dropdown-menu {
    background-color: var(--pink-color) !important;
}

.router-link-active {
    color: var(--dark-gray-color);
}

.router-link-active:hover {
    color: var(--dark-gray-color);
}

.navigation a {
    color: var(--dark-gray-color);
    text-decoration: none !important;
}

.navigation a:hover {
    color: var(--dark-gray-color);
}

/* Tab */
.tabs {
    width: 100%;
}

.tab-title-custom {
    color: var(--dark-gray-color);
}

.tab-title-custom.active,
.tab-title-custom.active:focus {
    color: var(--pink-color) !important;
}

.tab-title-custom:hover {
    color: var(--dark-gray-color);
    background-color: rgba(255, 255, 255, 0.5);
}

.nav-tabs {
    border-bottom: 2px solid white !important;
}

.nav-tabs .nav-link {
    border: none !important;
}


/* Card */
.card {
    background-color: transparent !important;
    border: none !important;
}


/* Forms */
.form-control {
    border-radius: 0px !important;
}

.col-form-label,
.form-text {
    padding-left: 8px !important;
}

#register-form .input-group,
#register-form .input-group input {
    border-radius: 0px !important;
    height: 30px !important;
    font-size: 12px;
}

/* Gallery */

#user-profile-gallery a.close,
#member-gallery a.close {
    color: var(--pink-color);
    font-size: 18px;
    cursor: pointer;
}

#user-profile-gallery a.next,
#user-profile-gallery a.prev {
    color: var(--pink-color);
    border: 2px solid var(--light-gray-color);
}

#member-gallery a.next,
#member-gallery a.prev {
    color: var(--pink-color);
    border: 2px solid var(--light-gray-color);
}


/* All modals */
.close,
.close:hover,
.close:focus,
.close:active {
    box-shadow: none !important;
    cursor: pointer !important;
    outline: none !important;
}

.modal-title {
    color: var(--pink-color);
    text-shadow: 2px 2px 2px var(--dark-gray-color);
    font-size: 38px !important;
}

.modal-header {
    border-bottom: none !important;
}

/* Upload photos modal - My Profile > General */
#upload-photos .modal-body .image-container {
    width: 250px;
    border-radius: 5px;
    border: 1px solid var(--light-gray-color);
    box-shadow: 2px 2px 2px var(--dark-gray-color) !important;
}

#upload-photos .modal-body h3 {
    color: var(--pink-color);
    text-shadow: 2px 2px 2px var(--dark-gray-color);
    font-size: 38px !important;
}

#upload-photos .modal-footer {
    justify-content: flex-start !important;
}

#upload-photos .modal-footer p {
    font-size: 14px !important;
}

#upload-photos .card-carousel-wrapper .arrow {
    border-top: 2px solid var(--pink-color) !important;
    border-right: 2px solid var(--pink-color) !important;
}


/* Upload profile photo modal - My Profile > General */
#upload-profile-photo-modal .vicp-operate a {
    color: var(--pink-color) !important;
}

/* Forgot password modal - Home Page */
.reset-password-modal-btn {
    float: right;
    margin: 10px 0px;
}

/* Teases modal */
#teases-modal .modal-header,
#teases-modal .modal-body {
    background-color: var(--pink-color);
}

#teases-modal .modal-body h3 {
    color: white;
    text-shadow: 2px 2px 2px var(--dark-gray-color);
    font-size: 50px !important;
    margin: 0;
}

#teases-modal .tease {
    max-width: 100%;
}

#teases-modal .tease:hover {
    cursor: pointer;
}

#teases-modal #line {
    width: 170px;
    margin-top: -10px;
}

#teases-modal #teases-row {
    padding: 5px 20px 10px;
}

@media only screen and (min-width: 992px) {
    #teases-modal #teases-row {
        padding: 5px 120px 20px;
    }
}

/* Received tease Modal */
#tease-background {
    background: url(../../assets/images/teases/tease_background.png) no-repeat scroll center center;
    background-size: cover;
    padding: 60px;
}

@media only screen and (max-width: 576px) {
    #tease-background {
        padding: 80px 20px;
    }
}

.modal-body {
    padding: 0px !important;
}

/* Insufficient Funds Modal */
#insufficient-funds-modal .modal-body {
    padding: 0px !important;
}

#insufficient-funds-modal .modal-header {
    background-color: var(--light-gray-color);
    padding-bottom: 30px;
}

#insufficient-funds-modal #page-content {
    padding: 0px 20px 30px !important;
}

#insufficient-funds-modal #page-content #title {
    padding-top: 10px;
}

@media only screen and (min-width: 1200px) {
    #insufficient-funds-modal #page-content {
        padding: 10px 150px 30px !important;
    }
}

#insufficient-funds-modal #tokens-wrapper {
    padding-top: 0px !important;
}

/* Inbox */
.inbox-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

@media only screen and (max-width: 768px) {
    #page-content {
        padding-top: 0 !important;
    }
}

/* Vue dialog */
.dg-btn--cancel {
    background-color: var(--pink-color) !important;
}

.dg-btn--ok {
    color: var(--pink-color) !important;
}

/* Gallery */
#my-profile-gallery a:not([href]) {
    color: var(--pink-color);
}