﻿
/* How To Play - START */

.ht-play {
    display: none;

    width: auto;
    height: auto;

    margin: 10px 0 0 0;
    padding: 0 0 0 0;

    font-family: 'Axiforma';
    font-size: 14px;
    font-weight: 400;
    color: #000;

}

.ht-play .ht-play-section {

    display: block;

    width: auto;
    height: 55px;

    margin: 0 0 0 0;
    padding: 18px 0 0 19px;

    border-radius: 8px;
    background-color: #e7eef6;

    text-align: left;

}
.ht-play.opened .ht-play-section { border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; }

.loading .ht-play .ht-play-section { background-color: #f4f4f4; }

.ht-play-section a,
.ht-play-section a h2 { 

    display: inline; 

    margin: 0 0 0 0;
    padding: 0 0 0 0;

    font-weight: 700;
    font-size: 17px;
    color: #000;

}

.ht-play-section a { text-decoration: none; }

.ht-play .ht-play-section a:after {

    display: inline-block;
    content: "\f0d7";

    width: 15px;
    height: auto;
    
    font: normal normal normal 14px / 1 FontAwesome;
    text-align: right;
    
}
.ht-play.opened .ht-play-section a:after { content: "\f0d8"; }

.ht-play .ht-play-info-panel {

    display: none;

    width: auto;
    height: auto;

    margin: 0 0 0 0;
    padding: 5px 20px 20px 20px;

    background-color: #e7eef6;

    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;

    font-size: 15px;
    font-weight: 400;

}
.ht-play.opened .ht-play-info-panel { }

.ht-play-info-panel strong { font-style: italic; }

/* How To Play - END */



.widget-header {

    display: block;

    width: auto;
    height: auto;

    margin: 0 0 0 0;
    padding: 0 0 0 0;

    font-family: 'Axiforma', sans-serif;
    font-size: 14px;
    color: #000;

    text-align: left;

}

.widget-header .row.h-info > div:first-child { text-align: left; }
.widget-header .row.h-info > div:last-child { text-align: right; }


h1.ho-beton-title { font-family: 'Axiforma', sans-serif; font-size: 32px; font-weight: 700; color: #000; margin-top: 30px; margin-bottom: 8px; }

.widget-header h1.h-beton-title,
.widget-header h2.h-beton-title { font-size: 32px; font-weight: 700; }

.widget-header h2.h-beton-prize { display: inline-block; font-size: 32px; font-weight: 900; color: var(--game-color); text-transform: uppercase; }
.widget-header h2.h-beton-prize .prize-text { padding-left: 10px; }

.widget-header div.h-beton-timer { display: inline-block; margin: 0 0 0 10px; font-size: 16px; font-weight: 700; }

.widget-header div.h-beton-info { display: block; font-size: 16px; font-weight: 400; margin-top: 2px; }


.widget-header div.h-beton-links { display: none; padding: 30px 0 0 0; }
.widget-header div.h-beton-links a { font-size: 16px; font-weight: 700; color: #1c4ed8; }
.widget-header div.h-beton-links a:hover { text-decoration: underline; }

.widget-header div.h-beton-total { 

    display: none;

    width: auto;
    height: auto;

    margin: 30px 0 0 0;
    padding: 0 0 0 0;

    font-size: 21px;
    font-weight: 700;
    color: #000;

    text-align: right;

}

.widget-header .row.h-tab { margin-top: 20px; margin-bottom: 20px; }

.widget-header a.h-beton-tab {

    display: block;

    width: auto;
    height: auto;

    margin: 0 0 0 0;
    padding: 15px 0 15px 0;

    border: 1px solid #041A17;
    border-radius: 8px;

    font-family: 'Axiforma', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #000;

    text-align: center;

}
.widget-header a.h-beton-tab:hover { background-color: #e7eef6; }

.widget-header a.h-beton-tab.active { background-color: var(--game-color); border-color: var(--border-color); color: #fff; }



/* Loading Styles - START */

.loading .widget-header h1.h-beton-title { max-width: 450px; background-color: #f4f4f4; border-radius: 10px; }
.loading .widget-header h2.h-beton-title { max-width: 300px; background-color: #f4f4f4; border-radius: 10px; }

.loading .widget-header .h-brand-info { background-color: #f4f4f4; border-radius: 5px; }

.loading .widget-header h2.h-beton-prize { min-width: 240px; background-color: #f4f4f4; border-radius: 10px; }
.loading .widget-header div.h-beton-timer { color: #f4f4f4; }

.loading .widget-header .h-beton-subtitle { max-width: 450px; max-height: 21px; background-color: #f4f4f4; border-radius: 5px; margin-bottom: 2px; }
.loading .widget-header .h-beton-tab-info { max-width: 450px; background-color: #f4f4f4; border-radius: 5px; }

.loading .widget-header .h-tab { opacity: 0.2; }
.loading .widget-header .h-tab .h-beton-tab,
.loading .widget-header .h-tab .h-beton-tab.active { background-color: #fff; border: 1px solid #041A17; color: #000; }

.loading .widget-header .h-beton-total { min-width: 200px; background-color: #f4f4f4; border-radius: 10px; }

/* Loading Styles - END */