html {
    height: 100%;
}

body {
    height: 100%;
    font-family: 'Walla';
    margin: 0;
    background-color: #21282d;
    min-width: min-content;
}

.content {
    display: flex;
    background-image: url('icons/background.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
}

input[type=text], select {
    height: 32px;
    font-size: 13px;
    border: none;
    outline: inherit;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    color: #7f97ab;
}

select {
    cursor: pointer;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #7f97ab;
    opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #7f97ab;
}

button {
    background-color: transparent;
    border: none;
    outline: inherit;
}

.widget-frame {
    display: flex;
    flex-direction: column;
    position: relative;
}

.frame {
    position: relative;
    display: flex;
    justify-content: center;
    border-radius: 16px;
    border: solid 16px #21282d;
    background-color: #f3f3f5;
}

.frame.lg {
    width: 768px;
    height: 664px;
    background-position: top;
}

.frame.sm {
    width: 320px;
    height: 568px;
    background-position: top;
}

#container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    height: 100%;
    width: 100%;
    background-color: rgb(243, 243, 245);
}

#container.lg {
    width: 768px;
    height: 664px;
}

#container.sm {
    width: 320px;
    height: 568px;
    overflow: auto;
    display: flex;
    align-items: end;
}

img.sizes {
    width: 50px;
    height: 50px;
    cursor: pointer;
}

button.sizes {
    width: 50px;
    height: 50px;
    cursor: pointer;
}

button.resolution {
    width: 54px;
    height: 54px;
    outline: 0;
    border-radius: 50%;
    padding: 0;
    margin: 0 5px;
    border: 2px solid #888;
}

button.active {
    background: burlywood;
}

select.resolution {
    width: 190px;
    height: 32px;
    background-color: #ffffff;
    margin: 0 5px;
    padding: 0 5px;
}

*[data-active=true] {
    border: 2px solid #03a9f4 !important;
}

*[data-visible=''] {
    display: none;
}

*[data-visible=true] {
    display: block;
}

.hidden {
    display: none;
}

.invisible {
    visibility: hidden;
}

.widgets {
}

.resolutions {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    width: 360px;
    height: 50px;
}

.lg {
    height: 664px;
    width: 808px;
    max-width: 100%;
}

.md {
    height: 100%;
    width: 768px;
}

.sm {
    width: 320px;
    height: 584px;
}

.action-panel {
    box-sizing: border-box;
    width: 464px;
    background-color: #dfe6ee;
    padding: 36px 88px 0 80px;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

h1.title {
    height: 29px;
    font-size: 25px;
    font-weight: 500;
    color: #505050;
    margin: 6px 0;
}

.text {
    font-size: 13px;
    color: #7f97ab;
}

.header {
    height: 60px;
    background-color: #21282d;
    display: flex;
    align-items: center;
    padding: 0 0 0 87px;
    position: relative;
}

.logo {
    width: 97px;
    height: 55px;
    padding: 6px;
    top: 0;
    position: absolute;
    background-color: #21282d;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}

h4.subtitle {
    height: 90px;
    font-size: 14px;
    line-height: 1.29;
    color: #505050;
    font-weight: normal;
    margin: 6px 0;
}

.subtitle-container {
    margin: 10px 0;
    display: flex;
    justify-content: center;
}

.row {
    display: flex;
    justify-content: space-around;
    margin: 5px 25%;
}

.cell {
    margin-bottom: 12px;
    flex: 1;
}

.checkbox-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.cell {
    width: 100%;
}

.checkboxs {
    margin-top: 12px;
}

label {
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #505050;
    margin-bottom: 5px;
    display: inline-block;
    white-space: nowrap;
}

[id=optionalData] {
    min-width: 5%;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.copyrights {
    position: fixed;
    height: 24px;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: -0.6px;
    color: #505050;
    bottom: 0;
}

.language-markup {
    border-radius: 16px;
    border: solid 16px #21282d;
    max-width: 500px;
}

.hidden {
    display: none !important;
}

.view-source {
    cursor: pointer;
    width: 34px;
    height: 34px;
    background: transparent;
    border-radius: 50%;
    border: navajowhite;
    outline: 0;
    background-repeat: no-repeat !important;

}

:not(pre) > code[class*=language-], pre[class*=language-] {
    background-color: rgb(243, 243, 245) !important;
}

*:disabled {
    background: #bbbbbb;
}

.source-container {
    margin-top: 24px;
    display: flex;
    align-items: center;
    width: 88px;
    justify-content: space-between;
}

.snippet-buttons {
    margin: 48px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

button:hover {
    opacity: 0.8;
    cursor: pointer;
}

button.border {
    width: 296px;
    height: 32px;
    border: solid 1px #03a9f4;
    color: #03a9f4;
    font-size: 15px;
    margin: 4px;
}

button.filled {
    width: 296px;
    height: 32px;
    background-color: #03a9f4;
    color: #ffffff;
    font-size: 15px;
    margin: 4px;
}

button.empty {
    width: 296px;
    height: 32px;
    background-color: transparent;
    color: #03a9f4;
    font-size: 15px;
}

input[type=checkbox] {
    position: relative;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

input[type=checkbox]:before {
    content: "";
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    background-color: #dfe6ee;
    border: 2px solid #03a9f4;
}

input[type=checkbox]:checked:before {
    content: "";
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    background-color: #03a9f4;
}

input[type=checkbox]:checked:after {
    content: "";
    display: block;
    width: 5px;
    height: 10px;
    border: solid #dfe6ee;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 2px;
    left: 6px;
}


.action-panel-buttons {
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.popup {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
}

.popup-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.popup-close:hover {
    opacity: 0.8;
}

.popup-preset {
    top: calc(50% - 52px);
    left: calc(50% - 172px);
    width: 344px;
    height: 104px;
    padding: 24px;
    box-sizing: border-box;
}

input[id=preset-name] {
    border: solid 1px #7f97ab;
    width: 100%;
    margin-bottom: 12px;
}

.input-error#preset-name {
    border: solid 1px #ff5200;
}

.number-of-games {
    display: none;
}

.topGames .number-of-games {
    display: initial;
}

.show-all-active-competitions {
    display: none;
}

.allScores .show-all-active-competitions {
    display: initial;
}

.show-scores-navigation {
    display: none;
}

.entityScores .show-scores-navigation {
    display: initial;
}

.scores-filter {
    display: none;
}

.entityScores .scores-filter {
    display: block;
}

.live-mode {
    display: none;
}

.predictions .live-mode {
    display: flex;
}

.keyPlayers .live-mode {
  display: flex;
}

.block-inner-links {
    display: none;
}

.predictions .block-inner-links {
    display: flex;
}

.allScores .block-inner-links {
    display: flex;
}

.slider .block-inner-links {
    display: flex;
}

.entityStandings .block-inner-links {
    display: flex;
}

.allow-insight {
    display: none;
}

.predictions .allow-insight {
    display: flex;
}

.enable-impression-count {
    display: none;
}

.predictions .enable-impression-count {
    display: flex;
}

.hide-competition-title {
    display: none;
}

.hide-home-away-tabs {
    display: none;
}

.entityStandings .hide-competition-title {
    display: flex;
}

.entityStandings .hide-home-away-tabs {
    display: flex;
}

.bettingOpportunity .enable-impression-count {
    display: flex;
}

.entities-recognizer-url {
    display: none;
}

.contextual .entities-recognizer-url {
    display: block;
}

.url .entities-recognizer-url {
    display: block;
}

.keyPlayers .block-inner-links {
  display: flex;
}

.entity-type {
    display: block;
}

.game .entity-type {
    display: none;
}

.contextual .entity-type {
    display: none;
}

.url .entity-type {
    display: none;
}

.support-top-games {
    display: none;
}

.slider .support-top-games {
    display: block;
}

.allow-premium-data {
    display: none;
}

.allScores .allow-premium-data {
    display: block;
}

.game .allow-premium-data {
    display: block;
}

.entityStandings .allow-premium-data {
    display: block;
}

.standingsPreview .allow-premium-data {
    display: block;
}

.all-scores-url {
    display: none;
}

.topGames .all-scores-url {
    display: block;
}

.slider .all-scores-url {
    display: block;
}

.entityStandings .show-odds {
    display: none;
}

.standingsPreview .show-odds {
    display: none;
}

.odds-type {
    display: none;
    margin-top: 12px;
}

.entity-id {
    display: none;
    margin-top: 12px;
}

.limit-height-display {
    display: none;
    margin-top: 12px;
}

:not(.entityStats) .specific-stats {
    display: none;
}

.entityStats .specific-stats {
    display: block;
}

.show-entity-header {
    display: none;
}

.entityStats .show-entity-header {
    display: flex;
}

.specific-stats-count {
    display: none;
    margin-top: 12px;
}

#powered-by {
    visibility: hidden;
}

.powered-by-text {
    display: none;
    margin-top: 12px;
}

.powered-by-linked-text {
    display: none;
    margin-top: 12px;
}

.powered-by-link {
    display: none;
    margin-top: 12px;
}