@import 'https://fonts.googleapis.com/css?family=Rubik:400,500,700,900&cache=clear';


html, body {
    background-color: #0C0A14;
    direction: rtl;
    width: 1500px;
    margin: 0 auto;
}

.loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.fullHeight {
    justify-content: center;
}

.bgPage {
    background-color: #0C0A14;
}

.bgMargin {
    background-color: #FFFFFF;
}

#menu {
    border-bottom: 3px solid #2463DD;
}

.nav-link-custom {
    font-family: rubik;
    font-size: 18px;
    color: #FFFFFF !important;
    border-bottom: 3px solid #0C0A14;
}

.nav-disabled-tab{
    color: #77859A !important;
}

#nav-li-extra{
    position: relative;
}

#nav-extra-tooltip{
    background-color: #AAD4FE;
    border-radius: 0px 28px 28px 28px;
    top: 86%;
    left: 34%;
    text-align: center;
    letter-spacing: -0.3px;
    color: black;
    opacity: 1;
    width: 186px;
    font-size: 13px;
    padding: 12px 16px;
    position: absolute;
    font-family: rubik;
    z-index: 4;
    white-space: normal;
    display: none;
}

.logo-wrapper {
    width: 110px;
}

.logo-wrapper img {
    width: 100%;
}

.profile-dropdown {
    text-align: right;
}

.profile-dropdown a{
    color: white;
    font-family: rubik;
    font-size: 14px;
}

.profile-dropdown a:hover{
    color: #AAD4FE;
    background-color: #454965;
}

#nav-profile-pic {
    margin-right: 5%;
    border-radius: 50%;
    width: 50px;
}

#main{
    padding-bottom: 5%;
}

/* Pool column */
.pool-col {
    margin-right: 12.0%;
    margin-top: 7%;
    padding: 0 !important
}

.pool-component {
    width: 77%;
    background-color: #1E1E2E;
    text-align: right;
    padding-bottom: 9%
}


#pool-management {
    text-align: left;
    margin-left: 5%;
    padding-top: 3%;
    font-size: 13px;
}

.settings-a {
    color: #F1F1F1;
}

.settings-icon {
    width: 7%;
}

.settings-span {
    margin-right: 1%;
}

#pool-managment a:hover {
    color: #F1F1F1;
}

#Pool-logo {
    margin-top: 7%;
}

#Pool-logo img{
    width: 140px;
}

#pool-name {
    color: #F2F4F8;
    font-family: rubik;
    margin-top: 3%;
    font-size: 26px;
}

#captain-message {
    color: #F2F4F8;
    font-family: rubik;
    font-size: 15px;
    margin-top: 3%;
    padding-right: 4%;
    padding-left: 4%;
}

.pool-prop-first {
    margin-top: 9%;
}

.pool-prop {
    margin-top: 5%;
}

.prop-icon {
    margin-right: 6%;
    width: 34px;
    height: 20px;
}

.prop-title {
    color: #F3F5F9;
    font-family: rubik;
    font-weight: bold;
    margin-right: 4%;
}

.prop-value {
    color: #F3F5F9;
    font-family: rubik;
    margin-right: 3%;
}

#members {
    margin-top: 11%;
}

#approveMembers {
    background-color: #2463DD;
    width: 68%;
    /*color: #FFFFF !important;*/
    font-family: rubik;
    color: #fff;
}

#members-button:hover {
    background-color: #2fad4c;
}

#otherPool-col {
    margin-top: 0 !important;
}

.otehrPools-component {
    width: 77%;
    background-color: #1E1E2E;
    text-align: right;
    padding: 11px 0px;
    margin-top: 4%;
    position: relative;
}

.otherPools-icon-container {
    position: absolute;
    left: 7%;
    top: 33%;
}

.otehrPools-component i {
    vertical-align: middle;
    color: white;
    font-size: 50px;
}

.otehrPools-component:hover {
    background-color: #343a40;
    cursor: pointer;
}

.otherPool-logo {
    width: 59px;
    height: 59px;
    margin-right: 6%;
    border-radius: 50% !important;
}

.otehrPools-span {
    color: #FFFFFF;
    font-family: rubik;
    margin-right: 6%;
    font-size: 18px;
}


.otehrPools-i {
    font-size: 27px !important;
    /*margin-right: 38%;*/
}

#createPool-component {
    width: 77%;
    text-align: right;
    margin-top: 2%;
}

#join-pool {
    margin-right: 6%;
    color: #2463DD;
}

#open-pool {
    float: left;
    margin-left: 6%;
    color: #2463DD;
}

/* performances & user table */

.remove-margin-right {
    margin-right: 0% !important;
}

.remove-margin {
    margin: 0% !important;
}

.performance-col {
    padding: 0 !important;
}

.performance-container {
    margin-right: -9px;
    margin-top: 3.4%;
    width: 103%;
}

#timer {
    position: relative;
}

#timer-col {
    padding-left: 1% !important;
}

.timer-component {
    background-color: #2463DD;
    height: 172px;
    text-align: right;
    border: 1px solid #FFFFFF;
}

#performane-col {
    padding-right: 1% !important;
}

#tiemr-body {
    margin-top: 3%;
}


.performane-component {
    background-color: #1E1E2E;
    height: 100%;
}

.performance-header {
    text-align: center;
    font-family: rubik;
    color: #FFFFFF;
    font-size: 15px;
    padding-top: 2%;
}

.time-component {
    display: inline-block;
    width: 70%;
    vertical-align: middle;
    position: relative;
    top: 12px;
    right: 15%;
}

#right-field {
    width: 10%;
    position: absolute;
    top: 26%;
    right: 0%;
}

#left-field {
    width: 10%;
    position: absolute;
    top: 26%;
    left: 0%;
}


.timeElemnt-rightComponent {
    border: 1px solid white;
    font-size: 36px;
    font-family: rubik;
    color: #FFFFFF;
    display: inline-block;
    width: 38%;
    margin-right: 10.5%;
}

.timeElemnt-leftComponent {
    border: 1px solid white;
    font-size: 36px;
    font-family: rubik;
    color: #FFFFFF;
    display: inline-block;
    width: 38%;
    margin-left: 10.5%;
    float: left;
}

.timeElement-title {
    font-family: rubik;
    color: #FFFFFF;
    font-size: 13px;
    margin-top: 6%;
}

#bets-progress {
    margin-top: 6%;
}

.bet-type {
    font-family: rubik;
    color: #FFFFFF;
    font-size: 13px;
    margin-top: 6%;
}

.bet-type a{
    color: #FFFFFF;
}

#usersTable {
    color: white;
    font-family: rubik;
    font-size: 13px;
    text-align: center;
}

.usersTable-th {
    border: hidden !important;
    font-family: Rubik;
    font-style: normal;
    font-weight: 500;
    align-items: center;
    text-align: center;
    background-color: #2463DD;
}

.usersTable-tr {
    background-color: #16171F
}

.usersTable-td {
    border-top: 1px solid #2b2f34 !important;
}

.profile-smallIcon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.userTable-grandTotal {
    font-weight: bold;
}

.green-up {
    vertical-align: baseline;
    margin-right: 13%;
}

.red-down {
    vertical-align: bottom;
    margin-right: 13%;
}

.static-trend{
    vertical-align: middle;
    width: 13px;
    margin-right: 13%;
}

.usersTable-nameSpan {
    margin-right: 8%;
}

.generalTable {
    color: white;
    font-family: rubik;
    font-size: 13px;
    text-align: center;
}

.generalTable-th {
    border: hidden !important;
    font-family: Rubik;
    font-style: normal;
    font-weight: 500;
    align-items: center;
    text-align: center;
    background-color: #0560C9;
}

.generalTable-tr {
    background-color: #16171F
}

.generalTable-td {
    border-top: 1px solid #2b2f34 !important;
}

/*  performance after tournament start  */
.performance-componentHeader {
    background-color: #403F4F;
    font-family: rubik;
    font-size: 15px;
    color: #FFFFFF;
    padding: 1% 0%;
}

.data-body {
    background-color: #1E1E2E;
    height: 129px;
}

.performance-dataContent {
    align-items: center;
    display: inline-flex;
    padding-top: 12%;
}

.performance-icon {
    width: 21px;
    height: 30px;
}


.performance-value {
    font-family: rubik;
    font-size: 36px;
    color: #FFFFFF;
}

.performance-value-margin {
    margin-left: 6%;
    margin-right: 10%;
}

.performance-trenIcon {
    margin-right: 2%;
}


.trendDown-span {
    color: #E25656;
    font-family: rubik;
    font-size: 13px;
}

.trendUp-span {
    color: #2463DD;
    font-family: rubik;
    font-size: 13px;
}

.data-container {
    margin-top: 34%;
}

.performance-subTitel {
    font-family: rubik;
    font-size: 13px;
    color: #FFFFFF;
}

.bets-performance-padding {
    padding: 0% 6%;
}


/*  games  */
.games-component-container {
    text-align: right;
    width: 83%;
    float: left;
    margin-left: 26px;
    margin-top: 7.2%;
}

#allGames-link {
    margin-left: 6%;
    color: #2463DD;
    font-family: rubik;
}

#days-pagination {
    color: #FFFFFF;
    font-family: rubik;
    margin-top: 6%;
}

#display-day {
    margin-left: 6%;
    margin-right: 6%;
}

#prevDay, #nextDay:hover {
    cursor: pointer;
}

.game-container {
    background-color: #1E1E2E;
}

.group-of-match {
    font-size: 15px;
    font-family: rubik;
    color: #FFFFFF;
    border-bottom: 3px solid #2463DD;
    margin-top: 7%;
    padding: 1% 0%
}

.group-of-endMatch {
    font-size: 15px;
    font-family: rubik;
    color: #FFFFFF;
    border-bottom: 3px solid #0f100f;
    margin-top: 7%;
    padding: 1% 0%
}

.match-content-box:hover{
    cursor: pointer;
}

.match-status {
    color: #FFFFFF;
    font-family: rubik;
    font-size: 13px;
    margin-top: 3%;
}

.match-time {
    border: 1px solid #7d7373;
    margin: auto;
    width: 25%;
    border-radius: 50px;
}

.team-logo {
    width: 62px;
    height: 40px;
}

.gameResult-margin {
    margin: 5% 0% !important;
}

.gameResult-container {
    margin-top: 4%;
}

.team-title {
    padding: 7% 0%;
}

.game-result {
    font-size: 17px;
    color: #FFFFFF;
    font-family: rubik;
}

.myBet-component {
    background-color: #16171F;
    color: #FFFFFF;
    font-family: rubik;
    font-size: 13px;
    padding: 2% 0%;
}

.myBet-component-online {
    background-color: #2463DD;
    color: #FFFFFF;
    font-family: rubik;
    font-size: 13px;
    padding: 2% 0%;
}

.progress-bar-online {
    font-size: 14px !important;
}

.progress-bar-online-span {
    line-height: 4em !important;
    width: 4em !important;
    font-family: rubik !important;
    font-size: 18px !important;
}

/*  chat  */
.chat-header {
    font-family: rubik;
    color: #FFFFFF;
    font-size: 15px;
}

.remove-padding {
    padding: 0 !important;
}

.chatType-checked {
    background-color: #2463DD;
    border-bottom: 3px solid #2463DD;
}

.chatType-unchecked {
    border-bottom: 3px solid #2463DD;
}

.chatType-checked:hover{
    cursor: pointer;
}

.chatType-unchecked:hover{
    cursor: pointer;
}

#chat-body {
    height: 442px;
    background-color: #403F4F;
    direction: ltr;
    overflow-y: scroll;
    padding-bottom: 10%
}

#chat-body::-webkit-scrollbar {
    width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #16171F;
}

::-webkit-scrollbar-thumb {
    background: #302E37;
    height: 80px;
    border-radius: 36px;
}

.chat-myMessage  {
    border-radius: 36px 36px 36px 0px;
    background-color: #AAD4FE;
    width: 80%;
    margin: auto;
    margin-top: 7%;
    color: #292929;
    font-family: rubik;
    font-size: 13px;
    padding: 4% 11% 4% 13%;
    display: table;
}

.chat-message {
    border-radius: 36px 36px 0px 36px;
    background-color: #FFFFFF;
    width: 80%;
    margin: auto;
    margin-top: 7%;
    color: #292929;
    font-family: rubik;
    font-size: 13px;
    padding: 4% 11% 4% 13%;
    display: table;
}

.sender {
    font-weight: bold;
}

.message-content {
    margin-top: 3%;
}

.message-date {
    font-size: 11px;
    margin-top: 7%;
}

#type-message {
    height: 49px;
}

#chatBox{
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.alert-content-custom {
    font-family: rubik;
}


.modal-content-custom {
    background-color: #0C0A14;
}

.modal-header-custom {
    background-color: #1E1E2E;
    display: block;
    padding-left: 0%;
    padding-right: 0%;
    border-bottom: 1px solid #1E1E2E;
}

.close_button-custom {
    opacity: 1;
    float: left;
}

.modal-titel {
    margin-top: 2%;
    color: #F2F4F8;
    font-size: 20px;
    font-family: rubik;
    padding-right: 6%;
}

.modal-filter-container {
    padding-right: 6%;
    margin-top: 3%;
}

.modal-filter-span {
    color: #F2F4F8;
    font-size: 15px;
    font-family: rubik;
}

.modal-filter-container a:hover {
    color: #AAD4FE;
    background-color: #454965;
}

.modal-close-icon {
    width: 80%;
}

.approveUsers-modal-bg{
    background-color: #0C0A14 !important;
}

.approveUsers-modal-header{
    color: #F2F4F8;
    font-size: 16px;
    font-family: rubik;
    padding-right: 6% !important;
    padding: 3px 0px;
    background-color: #454965;
}

.approveUserBtn{
    font-size: 13px;
    font-family: 'Rubik';
    color: #fff;
    margin-left: 10%;
    background-color: #2463DD;
    width: 87px;
    padding: 2px 0px;
}

.approveUserBtn:hover{
    border: 1px solid #523dc7;
    color: #fff !important;
}

.approve-users-table-tr{
    font-family: 'Rubik';
    font-size: 13px;
}

#approved-header{
    margin-top: 7%;
}

.joinPool-modal-bg {
    background-color: #1E1E2E !important;
}

.joinPool-modal-header{
    color: #F2F4F8;
    font-size: 16px;
    font-family: rubik;
    padding-right: 6% !important;
    padding: 3px 0px;
}

.joinPool-text{
    background-color: #1E1E2E;
    border: 2px solid #FFFFFF;
    font-family: rubik;
    font-size: 14px;
    color: #CDCDCD !important;
    border-radius: 0%;
    margin-right: 6%;
    width: 200px;;
}

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #CDCDCD;
    opacity: 1; /* Firefox */
}

.form-control:focus {
    background-color: #1E1E2E;
    color: #CDCDCD;
    border: 2px solid #FFFFFF;
}

.modal-btn{
    margin-right: 6%;
    margin-top: 5%;
    font-family: 'Rubik';
    font-size: 14px;
    width: 120px;
}

reg_err-modal{
    width: 25%;
    margin-right: 6%;
    color: #E25656;
    font-size: 11px;
    font-family: 'Rubik';
    text-align: right;
    padding: 2% 0%;
}

.reg_error{
    width: 68.5%;
    height: 30px;
    margin-right: 6%;
    color: #E25656;
    font-size: 11px;
    font-family: 'Rubik';
    text-align: right;
    padding: 1% 0%;
}

.confirm_pool_code{
    width: 68.5%;
    height: 30px;
    margin-right: 7%;
    color: #CDCDCD;
    font-size: 11px;
    font-family: 'Rubik';
    text-align: right;
    padding: 1% 0%;
}

.input_error{
    border: 2px solid #E25656 !important;
}

#alertModal{
    z-index: 1200;
}

#replace-poolImg-container{
    font-family: Rubik;
    margin-top: 1%;
}

.pool-settings-modal-header{
    border-bottom: 3px solid #2463DD;
}


.pool-setting-field-title{
    color: #F2F4F8;
    font-size: 14px;
    font-family: rubik;
    padding-right: 6% !important;
    padding: 3px 0px;
}

#pool-logo-settings{
    margin-top: 3%;
}

#pool-logo-settings img{
    width: 140px;
}

#captain-message-container{
    margin-right: 6%;
    width: 277px;
    padding: 0;
}

#pool-settings-captain-message{
    background-color: #1E1E2E;
    color: #CDCDCD;
    border: 2px solid #FFFFFF;
    font-family: Rubik;
    font-size: 14px;
    height: 70px;
}

#captain-message-limit{
    font-size: 10px;
}

.pool-settings-dropdown-container{
    margin-right: 6% !important;
}

.pool-setting-dropdown{
    width: 146px !important;
    margin-bottom: 2%;
}

.pool-settings-dropdown-container a:hover{
    color: #AAD4FE;
    background-color: #454965;
}

.pool-setting-selected-value{
    font-family: 'Rubik';
    font-size: 14px;
}

.pool-setting-dropdown-item-custom{
    color: #FFFFFF;
    padding-right: 6%;
    font-size: 15px;
}

#edit-icon{
    color: #aba782;
}

#replace-pool-img-a{
    margin-right: 1%;
    color: #FFFFFF;
    font-family: Rubik;
    font-size: 14px;
}

.replace-img-a{
    margin-right: 1%;
    color: #FFFFFF;
    font-family: Rubik;
    font-size: 14px;
}

#user-logo-settings{
    margin-top: 5%;
}

#user-logo-settings img{
    width: 50px;
}

@media (min-width: 992px) {
    /* CSS that should be displayed if width is equal to or big than 992px goes here */
    .nav-ui {
        position: absolute;
        bottom: 0;
        margin-right: 5%;
        white-space: nowrap
    }

    .navfield {
        /*padding-left: 3%;
        padding-right: 3%;
        border: 1px solid pink;	*/
        margin-right: 9%;
    }

    .selected-nav-link {
        font-weight: bolder;
        border-bottom: 3px solid #FFFFFF !important;
    }

    nav .navbar-nav li {
        border-bottom: 3px solid transparent;
    }

    nav .navbar-nav li a:hover {
        font-family: rubik;
        color: #FFFFFF !important;
        border-bottom: 3px solid #FFFFFF !important;
    }

    .nav-profile-a {
        height: 50%;
        direction: ltr;
        margin-top: 3%;
        font-family: rubik;
        font-size: 12px;
    }

    .nav-li {
        margin-top: 2%;
    }

}

@media (max-width: 991px) {
    /* CSS that should be displayed if width is equal to or less than 992px goes here */
    .collaps-div {
        background-color: #515151;
        text-align: right;
        position: absolute;
        top: 89%;
        z-index: 1;
        padding: 20px;
    }

    .nav-profile-a {
        direction: ltr;
        font-family: rubik;
        font-size: 12px;
    }

    .nav-link-custom {
        font-family: rubik;
        font-size: 18px;
        color: #FFFFFF !important;
        border-bottom: 3px solid #515151;
    }

}