/*Group promotion progress bar*/
  .group-progress-bar {
    padding:0px !important;
    text-align: center;
    position: relative;
  }

  .hide_progress_bar{
      display:none;
  }

  .progress-message{
      margin-bottom:20px;
      font-size: 18px;
      text-align: left;
      font-weight: bold;
  }
  
  .score-result-fail{
      margin-top:10px;
  }

  .progress2 {
    border-radius: 30px;
    border:1px solid lightgray;
    background-color: #f1f1f1;
  }
  
  .progress-bar2 {
    border-radius: 30px;
    background: repeating-linear-gradient(to right, #3feb6d 0%, #068027 50%, #3feb6d 100%);
    animation: gradient 1s infinite;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    padding:5px 0px;
    background-size: 200% auto;
    background-position: 0 100%;
    overflow: hidden;
  }

  @keyframes gradient { 
    0%   { background-position: 0 0; }
    100% { background-position: -200% 0; }
  }
  
  .icon {
    color: #f3c623;
    animation: icon 5s forwards;
    background-color: transparent;
    padding-right: 400px;
    padding-bottom: 20px;
  }
  
  @keyframes icon {
    0% {
      opacity: 0.2;
      text-shadow: 0 0 0 #f3c623;
    }
  
    100% {
      opacity: 1;
      text-shadow: 0 0 10px #f3c623;
    }
  }
  
  .loader {
    --p: 0;
    counter-reset: p var(--p);
    color: #fff;
    font-size:18px;
  }
  
  .loader:after {
    content: counter(p) "%";
  } 

.score-group-inner-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.score-result-title {
    text-align: left !important;
}

.score-result-title {
    flex: 0.8;
    font-weight: bold;
}

.score-result-image {
    flex: 0.2;
    text-align: right !important;
}

.score-result-image img {
    width: 100%;
}

.score-group-wrapper {
    padding: 0px !important;
}

.score-group-wrapper .promotion-code-wrapper span {
    margin-bottom: 10px;
    display: inline-block;
}

.score-group-wrapper .promotion-code-wrapper .score-result-code {
    cursor: pointer;
}

body:not(.iframe) .score-result-code.lobby-action {
    display: none;
}

body.iframe .score-result-code.lobby-link {
    display: none;
}
/*Group promotion progress bar end*/

/*hide top promo hover overlay*/
body.iframe #top_promotions .image_contaiener .image_overlay{
    display: none !important;
}

/*promotion page*/

/*promotion page end*/

/* score only */
.score_only .personal-score-wrapper {
    width: 100%;
    max-width: 900px;
    height: 200px;
    background: linear-gradient(#00142d, #00506e);
    position: relative;
    text-align: center;
    border-radius: 20px;
}
.score_only .personal-score-wrapper .ps_score_image {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 65%;
    max-width: 550px;
}
.score_only .personal-score-wrapper .score-result {
    color: #d1be96;
    font-size: 80px;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    line-height: 1em;
}
.score_only .personal-score-wrapper .loader-score {
    width: 60px;
    height: 60px;
    border-top: 4px solid #d1be96;
    position: absolute;
    top: 35%;
    left: 35%;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
}
.score_only .personal-score-wrapper .ps_text {
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 15px;
    margin-bottom: 0px;
}
/* score only end*/

/* promotion */
.promotion .optin_container p {
    text-align: center; 
    margin-bottom: 0px;
}
body.iframe.logged_in .promotion .join_leaderboard {
    display: inline-block;
    margin-top: 10px;
}
body .promotion .join_leaderboard {
    display: none;
}
body.iframe.logged_in .text_container {
    display: none;
}
body:not(.iframe) .text_container {
    display: block;
}
body.iframe .text_container a {
    pointer-events: none;
}
body.iframe .promotion p.leaderboard_button_container {
    bottom: 10px;
    right: 30px;
    display: inline-block;
    position: absolute;
}
body.iframe .promotion p.leaderboard_button_container .leaderboard_button {
    padding: 0;
    font-weight: 400;
}
.image_contaiener .counter {
    width: 80%;
    height: 35px;
    bottom: -17px;
    left: 10%;
    z-index: 2;
    border-radius: 10px;
    text-align: center;
    position: absolute;
    display: flex;
    justify-content: center;
}
.image_contaiener .counter span {
    line-height: 35px;
    font-weight: 700;
}
.image_contaiener .counter span:first-child {
    margin-right: 10px;
}
/* promotion end*/

.leadHolder {
    position: relative;
    margin: 0px auto;
}

/* modal */
.modal .modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
}
.modal-promo {
    width: 800px !important;
}
.modal-open .modal {
    background-color: rgba(0,0,0,0.8);
    z-index: 9999;
}
.modal-promo button.close {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 22px;
    opacity: 1;
    font-weight: 700;
}
.modal-promo .modal-header {
    padding: 0px;
    border-bottom:0px;
    position: relative;
    margin-top: -1px;
    margin-left: -1px;
}
.modal-promo .modal-header img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
}
.modal-promo .header-title-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 63%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    background: linear-gradient(115deg, rgba(48, 48, 48, 0.5) 0%, rgba(48, 48, 48, 0.5) 80%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
    padding: 20px;
    padding-right: 10%;
    border-top-left-radius: 10px;
    border-top-right-radius: 0px;
}
.modal-promo .header-title, .lead-modal .modal-inner .header-title {
    font-weight: bold;
    font-size: 25px;
    text-align: left;
    margin-top: 0px;
}
.lead-modal .modal-inner .header-title {
    padding: 20px 20px 0px 20px;
}
.modal-promo .modal-header .header-title span {
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    margin-top: 10px;
}
.modal-header .counter {
    background-color: rgba(0, 0, 0, 0.5);
}
.modal-header .counter span {
    line-height: 35px;
    font-weight: 700;
}
.modal-promo .modal-content {
    border-radius:10px;
    width:auto;
    padding: 0px;
    box-shadow: 0px 0px 30px 0px #000;
    margin-bottom: 0px;
    margin-top: 0px;
}
.modal-promo .modal-inner {
    overflow-y: auto;
    height: 300px;
}
.modal-promo .modal-text {
    padding: 20px;
    height: 250px;
    overflow-y: auto;
}
.promotion_inner .more-info {
    display: inline-block;
    position: absolute;
    bottom: 10px;
}
.promotion .promotion_inner {
    position: relative !important;
}
.modal-promo .modal-text::-webkit-scrollbar {
    width: 10px;
    margin-right:10px;
    padding-right:10px;
}
.modal-promo .modal-text::-webkit-scrollbar-track {
    background: rgba(235,235,235,0.8);
    border-radius: 0px;
}
.modal-promo .modal-text::-webkit-scrollbar-thumb {
    border-radius: 0px;
}
.modal-promo .lead-content {
    max-width: 524px;
}
.leadHolder table thead > tr > th, .leadHolder {
    font-weight: 800 !important;
}
.modal-backdrop {
    background:none;
}

.modal-promo .play_now {
    margin: 10px 0;
    display: inline-block;
}
/* modal */

/* leaderboard */
.leadHolder {
    margin-bottom: 20px;
}
.leadHolder .lead-title {
    padding: 5px;
    text-align: center;
    font-weight: bold;
    font-size: 0.9vw;
}
.leadHolder .leaderboard-table-wrapper {
    box-shadow: 0 0 13px 0 rgba(82,63,105,.05);
    background-color: #fff;
    border-radius: 4px;
    margin-top: 15px;
}
.leaderboard-table-wrapper .leaderboard-row {
    border-bottom: 1px solid #e2e2e2;
    vertical-align: middle;
}
.leaderboard-table-wrapper .leaderboard-row:nth-child(2n+1) {
    background-color: #f0f3ff;
}
.leaderboard-table-wrapper .leaderboard-row:first-child {
    padding: 10px 5px;
    background-color: transparent;
}
.leaderboard-table-wrapper .leaderboard-column {
    display: inline-block;
    margin-right: -4px;
    padding: 5px;
    width: calc(33% - 25px);
    text-align: center;
    vertical-align: middle;
}
.leaderboard-row h2.leaderboard-column {
    font-size: 0.9vw;
    margin-top: 0px;
    margin-bottom: 0px;
}
.leaderboard-table-wrapper .leaderboard-column.leaderPos {
    width: 80px;
}
.leaderboard-row p.leaderboard-column {
    font-weight: normal;
    font-size: 0.8vw;
    margin-bottom: 0px;
}
/* leaderboard end */

/* special promo */
#special_promo_container {
    text-align: center;
    max-width: 1050px;
    margin: 0 auto;
}
#special_promo_container h2, #special_promo_container h3, #special_promo_container h4, #special_promo_container p {
    color: #3f4043;
}
#special_promo_container .modal-header h3.header-title, #special_promo_container .modal-header .promo_desc, #special_promo_container .modal-header .promo_desc p {
    color: #ffffff;
}
#special_promo_container .promotion .promotion_inner, #special_promo_container #next_day {
    text-align: left;
}
#special_promo_container #today_bonus>h3, #special_promo_container #today_bonus>h4, #special_promo_container #today_bonus>h5 {
    font-size: 1vw;
    margin: 0;
}
#special_promo_container #sp_banner_image_container {
    position: relative;
    min-height: 83vh;
    margin-bottom: 20px;
}

#special_promo_container #today_bonus {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#special_promo_container #today_bonus>h3 {
    font-size: 2vw;
}
#special_promo_container #today_bonus>h4 {
    font-size: 3vw;
    font-weight: 400;
}
#special_promo_container #today_bonus>h5 {
    font-size: 2vw;
    font-weight: 400;
    margin-bottom: 20px;
}
#special_promo_container #next_day {
    width: 45%;
    background-color: #CAB9DB;
    padding: 20px;
    display: inline-block;
    margin-bottom: 2.5vw;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}
#next_day #next_day_date {
    font-size: 1.2vw;
    font-weight: 500;
    margin: 0;
}
#next_day .promo_desc, #next_day .promo_desc p {
    margin: 0px;
}
#next_day #next_day_date span {
    font-size: 300%;
}
#sp_banner_image_container #banner_image {
    width: 100vw;
    max-width: none;
    height: auto;
}
/* special promo end */
@media screen and (max-width: 1025px) {
    .score-group-wrapper .score-result-title {
        font-size: 4vw !important;
    }

    .progress-message {
        font-size: 4vw !important;
    }

    .score-group-wrapper .promotion-code-wrapper .score-result-code {
        width: auto !important;
    }

    /* modal */
    .modal .modal-dialog {
        transform: translate(-50%, -45%) !important;
    }
    body.promotions-page.modal-open {
        margin-right: 0px;
        padding-right: 0px;
    }
    .modal-promo {
        width: 95% !important;
        margin: 0 auto !important;
    }
	.promotion .promotion_inner {
        position: relative !important;
	}
    .modal-promo .header-title-container {
        padding: 20px;
        width: 100%;
        height: 40%;
        top: initial;
        bottom: 0px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        background: rgba(0,0,0,0.6);
    }
    .modal-promo .header-title-container .header-title {
        text-align: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: calc(100% - 40px);
    }
    .modal-promo .header-title-container .promo_desc, .modal-promo .header-title-container .promo_desc p {
        display: none;
    }
    .modal-promo .header-title, .lead-modal .modal-inner .header-title {
        font-size: 18px;
        text-align: center;
    }
    .modal-header .counter {
        display: none;
    }
    /* modal */
    
    /* leaderboard */
	.leaderboard-table-wrapper .leaderboard-column {
		width: calc(33% - 10px);
	}
	.leaderboard-row:first-child .leaderboard-column.leaderPos {
        visibility: hidden;
        font-size: 0px !important;
	}
	.leaderboard-row .leaderboard-column.leaderPos {
        width: 30px;
	}
    .leadHolder .lead-title {
        font-size: 14px;
    }
    .leaderboard-row h2.leaderboard-column {
        font-size: 3.5vw;
    }
    .leaderboard-row p.leaderboard-column {
        font-size: 3.3vw;
    }
    /* leaderboard end */

    /* special promo */
    #special_promo_container #today_bonus>h3, #special_promo_container #today_bonus>h5 {
        font-size: 5.5vw;
    }
    #special_promo_container #today_bonus>h4 {
        font-size: 10vw;
    }
    #special_promo_container #next_day {
        width: 90%;
        margin-bottom: 8vw;
    }
    #next_day #next_day_date {
        font-size: 4vw;
    }
    /* special promo end */

    /* promotion */
    /*body.iframe .deep-link.promo_button {
        display: none !important;
    }
    body.iframe .promotion_inner .promotion-code-wrapper {
        display: block !important;
    }*/
    
    body.iframe .promotion p.leaderboard_button_container {
        display: none;
    }
    /* promotion end */
}
	
@media screen and (min-width: 700px) and (max-width: 1025px) {
    /* modal */
    .modal-promo {
        width: 75%;
    }
    .modal-promo .header-title-container {
        height: 30%;
    }
    /* modal end */
}