@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');


::-moz-selection { /* Code for Firefox */
    color: #fff;
    background: #0b6998;
}

::selection {
    color: #fff;
    background: #0b6998;
}

.footer_nav {
    width: 100%;
    justify-content: center;
    display: flex;
    overflow-x: hidden;
}


.table td, .table th {
    padding: 0.5rem !important
}

.footer_nav ul {
    margin: 0 auto;
}

body {
    font-family: 'Merriweather', serif;
}

tr:hover .fa-angle-double-down {
    color: #d9534f;
}

.menu_nav_list li a {
    font-size: 35px !important;
}

#packages_table tr td{
    word-break: break-all;
    text-align: center;
}

.mobile_menu .credits li {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
    visibility: visible;
    opacity: 1;
}

.mobile_menu .credits li p {
    position: relative;
    color: #FFFFFF;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.3;
    transition: all 400ms ease;
}
.menu_nav_list li p {
    position: relative;
    font-size: 40px;
    color: #FFFFFF;
    font-weight: 500;
    line-height: 1.3;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}

.join_button a:hover {
    border-radius: inherit;
    background-color: rgb(40, 62, 151);
}

#register-button:hover {
    border-radius: 20px;
    border: 1px solid white;
    background-color: #0b6998;
    color: #fff;
}

.header_social ul li a {
    border-radius: 20px;
    background-color: #0b6998;
}

.header_social ul li a:hover {
    border-radius: inherit;
    background-color: rgb(40, 62, 151);
}

.choose-date-container {
    /*background-color: #f2f2f2;*/
}

.choose-button button:hover {
    background-color: #0b6998;
    color: #fff;
    -webkit-box-shadow: 0px 0px 5px 0.5px rgba(11, 105, 152, 1);
    -moz-box-shadow: 0px 0px 5px 0.5px rgba(11, 105, 152, 1);
    box-shadow: 0px 0px 5px 0.5px rgba(11, 105, 152, 1);
    transition: 0.3s ease;
}

.clicked-button {
    background-color: #0b6998 !important;
    color: #fff !important;
    -webkit-box-shadow: 0px 0px 5px 0.5px rgba(11, 105, 152, 1);
    -moz-box-shadow: 0px 0px 5px 0.5px rgba(11, 105, 152, 1);
    box-shadow: 0px 0px 5px 0.5px rgba(11, 105, 152, 1);
}

.choose-date {
    width: 50%;
    margin: 0 auto;
}

.free-times h5 {
    font-size: 16px;
}

.free-times {
    border-bottom: 1px solid rgba(40, 62, 151, 0.6);
}

.choose-submit button {
    color: #0b6998;
    background-color: #fff;
    border: 1px solid #0b6998;
    padding-left: 1em;
    padding-right: 1em;
}

.choose-submit button:hover {
    -webkit-box-shadow: 0px 0px 5px 0.5px rgba(11, 105, 152, 1);
    -moz-box-shadow: 0px 0px 5px 0.5px rgba(11, 105, 152, 1);
    box-shadow: 0px 0px 5px 0.5px rgba(11, 105, 152, 1);
    transition: 0.3s ease;
}

.choose-boxes {
    margin: 0 auto;
    padding: 1.5em;
}

.choose-button {
    margin: 0 auto;
}

.choose-month {
    border-bottom: 1px solid rgba(11, 105, 152, 0.6);
}

.date-container * {
    color: black;
}

.choose-button .btn-primary {
    background-color: #fff;
    color: black;
    border: 1px solid rgba(11, 105, 152, 1);
    margin: 0.75em;
}

.select-date ul li {
    padding: 0.4em;
    margin: 0.6em;
    width: 7%;
    display: flex;
    justify-content: center;
}

.today-date {
    border: 1px solid #0b6998;
    border-radius: 5em;
}

.date-active {
    border: 1px solid #0b6998;
    border-radius: 9999px;
    background-color: #0b6998;
    color: #fff;
}

.fa-check {
    color: #0b6998;
}

#tablePreview th, #tablePreview td {
    padding: 1em;
}

#tablePreview tr td {
    text-align: center;
}

#tablePreview {
    display: inline-table;
}

@media only screen and (max-width: 768px) {
    #tablePreview {
        display: block;
    }
    .home .parallax_background {
        background-size: 100% 100% !important;
        background-position: right !important;
    }
}

@media screen and (min-width: 800px) {
    .header-container {
        padding-left: 4em;
        padding-right: 4em;
    }
}

#get-dates li {
    cursor: pointer;
}

#tablePreview {
    -webkit-box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.32);
    -moz-box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.32);
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.32);
}

.date-container {
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
}

@media only screen and (max-width: 768px) {
    .date-container {
        padding: 0 !important;

    }

    .classes {
        padding: 1em !important;
        padding-top: 5em !important;
    }

    .choose-terain {
        display: block !important;
    }

    .date-container {
        border: none;
    }

    .mobile-select {
        width: 100% !important;
        padding-top: 1em !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .mobile-select select {
        width: 100% !important;

    }

    .select-date ul li {
        margin: 0.5em;
        padding: 0.6em;
        padding-bottom: 0.3em;
        padding-top: 0.3em;
        width: 2.4em;
    }

    .choose-boxes {
        padding: 0 !important;
    }

    .choose-button {
        padding: 0 !important;
    }

    #buttons-div {
        padding: 1em;
    }

    .choose-button .btn-primary {
        margin: 0.5em;
        width: 27%;
        text-align: center;
    }

    .choose-submit {
        display: flex !important;
    }

    .choose-submit .btn-primary {
        float: none !important;
        margin: 0 auto;
        margin-top: 1em;
        margin-bottom: 1em;
    }

    .choose-terain {
        padding-top: 1.5em !important;
    }
}

#left_arrow, #right_arrow {
    cursor: pointer;
}

.choose-terain {
    height: 450px;
}

.profile-container {

}

.profile-container .profile {
    border-bottom: 1px solid rgba(11, 105, 152, 0.6);
}

.no-touch {
    touch-action: none;
}

.profile-nav li {
    margin-right: 2em;
    font-size: 14.5px;
}

.disabled-date {
    color: #343a40;
    cursor: default !important;
}

.profile-nav li:hover, .profile-nav li a:hover {
    color: #0b6998 !important;
    transition: 0.3s ease;
    cursor: pointer;
}

.profile-active {
    color: #0b6998;
    transition: 0.3s ease;
}

.form-group label {
    color: #0b6998;
    font-size: 14px;
}

.form-group input:hover, .form-group input:focus, .form-group textarea:hover, .form-group textarea:focus {
    -webkit-box-shadow: 0px 0px 5px 0.5px rgba(11, 105, 152, 0.5);
    -moz-box-shadow: 0px 0px 5px 0.5px rgba(11, 105, 152, 0.5);
    box-shadow: 0px 0px 5px 0.5px rgba(11, 105, 152, 0.5);
}

.form-group div .btn-primary {
    background-color: #0b6998;
}

.form-group div .btn-primary:hover {
    background-color: #283e97;
}

.modal, .modal-content, .modal-dialog {
    /* width: 1400px; */
}

@media only screen and (max-width: 768px) {
    .classes {
        padding: 0 !important;
        margin: 0 !important;
    }

    .profile-container {
        padding: 2em 0 !important;
        margin: 4em 0 !important;
    }
}

.register-background {
    background-image: url(https://barbarashdwallpapers.com/wp-content/uploads/2014/03/Black-wallpaper-with-a-football-1.jpg);
    background-size: auto;
    background-repeat: no-repeat;
    background-position: left;
    padding-bottom: 10em;
    padding-top: 10em;
}

.footer .parallax_background {
    background-image: url(../images/footer.jpg);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.footer_overlay {
    background: rgba(26, 26, 26, 0.7) !important;
}

.home .parallax_background {
    background-image: url(../images/header_main.jpg);
    background-size: 100% 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    filter: blur(4px);
    -webkit-filter: blur(4px);
}

.reserved {
    background-color: rgb(203, 81, 85);
    color: rgb(234, 234, 234);
}

#get-dates li:hover {
    color: rgba(0, 0, 0, 0.7);
}

.reserved:hover {
    -webkit-box-shadow: 0px 0px 5px 2px rgb(191, 77, 81);
    -moz-box-shadow: 0px 0px 5px 2px rgb(191, 77, 81);
    box-shadow: 0px 0px 5px 2px rgb(191, 77, 81);
    color: rgba(255, 255, 255, 1);
    transition: 0.6s ease;
}

@media (min-width: 1281px) {

    .free-cells:hover {
        background-color: rgba(11, 105, 152, 0.75);
        transition: 0.6s ease;
        color: #fff;
        -webkit-box-shadow: 0px 0px 5px 2px rgba(11, 105, 152, 1);
        -moz-box-shadow: 0px 0px 5px 2px rgba(11, 105, 152, 1);
        box-shadow: 0px 0px 5px 2px rgba(11, 105, 152, 1);
        cursor: pointer;
    }

}



.choose-submit .btn-primary {
    color: #0b6998;
    border: 1px solid #0b6998;
}

.choose-submit .btn-primary:hover {
    color: #fff;
    background-color: #0b6998;
}

.reserve-nav ul li {
    margin-right: 2.5em;
}

.field-image {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    min-width: 100%;
    min-height: 100%;
    height: 100%;
}

.form-group .input-group input {
    color: #343a40;
}

.reserve-active {
    color: #0b6998;
    border-bottom: 1px solid #0b6998;
    font-weight: 400;
    padding-bottom: 0.25em;
}

button:focus {
    outline: none !important;
}

body {
    background-color: #f2f2f2;
}

.select-field {
    width: 33%;
    cursor: pointer;
}

.w-66 {
    width: 66% !important;
}

.width-transition {
    transition: width 0.5s ease-in-out;
}

.field-selected {
    background-color: rgba(138, 187, 46, 0.5);
}

.background-white {
    background-color: #fff;
    border-radius: 0.5em;
}

#tablePreview {
    background-color: #fff;
}

.arrow-disabled {
    cursor: default;
    color: #00000069;
}

.payment_form .form-group {
    margin: 1em
}

.payment_method .form-check {
    margin: 0 auto;
}

.payment_method label {
    color: #0b6998;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.bank-transfer span {
    padding-left: 0.5em;
}

.bank-transfer strong {
    display: inline-block;
    padding-top: 0.25em;
}

.reserve-nav ul li {
    cursor: pointer;
}

textarea {
    resize: none;
}


@media only screen and (max-width: 768px) {
    .hamburger i {
        font-size: 25px !important;
    }

    #select_sport {
        width: 100% !important;
    }

    .select_sport_div {
        width: 100% !important;
    }


    .choose-terain .field-div {
        width: 100% !important;
    }

    .choose-terain {
        height: 280px;
    }

    .choose-submit .btn-primary {
        margin: 1em;
        display: inline-block !important;
    }

    .choose-month i {
        padding: 0 !important;
    }

    .choose-date {
        width: 60% !important;
    }

    .choose-month h4 {
        padding-right: 0.5em;
        padding-left: 0.5em;
    }

    .choose-month a {
        width: 20px;
        padding: 0 !important;
    }

    .choose-submit {
        display: contents !important;
    }

    .choose-submit span {
        margin: 1em;
    }

    .choose-submit .mark-hours {
        display: inline-block;
        margin: 0;
    }

    .packages {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    #reservation_table {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #reservation_week_table {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .change_password {
        margin-left: 0 !important;
        margin-right: 3rem !important;
    }

    .form-panel {
        padding: 2em;
        padding-top: 5em;
    }

    .form {
        width: 100vw;
        height: 536px;
        margin-top: 10em !important;
    }

    .form-header {
        margin: 0;
    }

    #wrong_password {
        padding-bottom: 1em;
    }

    .register-background {
        padding-top: 4em;
        height: 100vh !important;
    }

    .form-group .form-recovery {
        float: left;
    }

    .form-panel.one .form-group {
        width: 75%;
    }

    .form-toggle {
        right: 10px;
        top: 60px;
    }

    .form-group .invisible {
        display: none;
    }

    .home_image {
        width: 75% !important;
    }

    .reserve-nav ul {
        padding-right: 0 !important;
    }

    #reservation_week_table {
        overflow-y: auto;
    }

    .su-logo {
        width: 140px !important;
        height: 50px !important;
    }

    .su-scrolled {
        height: 50px;
    }

    .background-ball {
        background: white !important;
    }

    .background-ball p {
        color: black !important;
    }

    .background-ball .container {
        width: 100% !important;
        padding: 1em !important;
    }

    .working-time {
        display: none;
    }

    .intro_text {
        padding: 0 !important;
    }

    .intro_content {
        width: 100%;
    }

    .payment_container form {
        width: 100% !important;
    }

    .payment_container {
        padding: 0 !important;
    }

    .payment_method label {
        width: 7em;
    }

    .choose-payment {
        /*border: 1px solid #0b6998;*/
        max-width: 100% !important;
    }
}

#week_table td, #week_table th {
    padding: .5rem;
}

.form-content .row  {
    padding-top: 1em;
    padding-bottom: 1em;
}


.payments .form-check {
    height: 75px;
}

.select-package:hover {
    -webkit-box-shadow: 0px 0px 9px 0px rgba(11, 105, 152, 1);
    -moz-box-shadow: 0px 0px 9px 0px rgba(11, 105, 152, 1);
    box-shadow: 0px 0px 9px 0px rgba(11, 105, 152, 1);
}

.credit-logo .fa-asymmetrik:hover {
    color: rgb(40, 62, 151);
}

.choose-payment {
    /*border: 1px solid #0b6998;*/
    /*max-width: 25%;*/
}

.credits-count span {
    color: #0b6998;
}

.credits-button {
    background-color: #0b6998;
    border: 1px solid #0b6998;
}

.credits-button:hover {
    background-color: rgb(40, 62, 151);
}


.credit-logo {
    font-size: 5em;
    color: #0b6998;
}

.select-package {
    border: 1px solid #0b6998;
    border-radius: 10px;
}

.break-package {
    flex-wrap: wrap;
    flex-grow: 55;
}

.select-package:hover .credit-image {
    transition: transform 0.5s ease-in-out;
    transform: scale(1.2);

}

#payment_method img:hover {
    transform: skew(-5deg);
}

.main_nav {
    margin-left: 1em !important;
}

.main_nav ul li:not(:last-child) {
    margin-right: 45px !important;
}

.main_nav ul li {
    font-size: 13px;
}

.su-logo {
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 162px;
    height: 52px;
    transition: height 0.7s ease;
}

.su-scrolled {
    height: 50px;
    transition: height 0.4s ease;
}

#reservation_table {
    transition: 2s ease-in;
}

.vaios {
    font-size: 10px;
    font-style: italic;
    color: rgba(244,228,239,0.4);
}

.w-90 {
    width: 90% !important;
}

.vaios a {
    font-style: normal !important;
    color: #0b6998 !important;
    border-bottom: none;
}

.vaios a:hover {
    background: none;
    color: #f4212a !important;
}

.background-ball {
    background-image: url(../images/ballstudentclub.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.working-time {
    position: relative;
    top: 20em;
}


ul#navigation li.dropdown:hover > ul.dropdown-menu {
    display: block;
}