/* RESET CSS */
*, *:before, *:after
{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    vertical-align:baseline;
    background:transparent;
}

html, body { height:100%; }

*:focus { outline:none; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after {
   content:'';
   content:none; 
}

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

iframe {
    border: none;
    padding: 0;
    margin: 0;
}

textarea {overflow:auto;}

/* change colors to suit your needs */
ins { background-color:#FFFF99; color:#000000; text-decoration:none; }

/* change colors to suit your needs */
mark { background-color:#FFFF99; color:#000000; font-style:italic; font-weight:bold; }
del { text-decoration:line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }

/* change border color to suit your needs */
hr { display:block; height:1px; border:0; border-top:1px solid #CCCCCC; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }

/* END RESET CSS */

button, input[type="button"] {
    cursor:pointer;
}

.vbx-container-item {
    width: 100%;
    height:100%;
    padding: 0;
    margin: 0;
    z-index:1;
}

.vbx-app iframe {
    padding: 0;
    margin: 0;
    background-color:rgba(0,0,0,0);
}

.vbx-container-item.vbx-unselected {
    display: none;
}

.vbx-close-button, .vbx-hide-roll-prompt-button {
    position:absolute;
    top:15px;
    right:15px;
    background-color: rgba(0, 0, 0, 0.4);
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 15px;
    text-align:center;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px;
    z-index:9999;
}
.vbx-close-button:hover, .vbx-hide-roll-prompt-button:hover {
    background-color: rgba(127, 127, 127, 0.8);
}
.vbx-close-button {
    background-image: url('/storage/content/img/svg/close.svg');
    padding: 0 0 0 0;
}
.vbx-hide-roll-prompt-button {
    background-image: url('/storage/content/img/svg/back-arrow-right.svg');
    display:none;
}

/*.touchscreen .vbx-close-button, .touchscreen .vbx-hide-roll-prompt-button {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background-size: 32px;
}
.touchscreen .vbx-hide-roll-prompt-button {
    top:30px;
}*/

.vbx-form .vbx-form-row, .vbx-app-body .vbx-form .vbx-form-row {margin-bottom:.5em; position:relative;}
.vbx-app-body .vbx-form .input-pix {
    height: 0;
    display:block;
}

.vbx-form input:not([type="date"]).vbx-field-invalid, .vbx-app-body .vbx-form input:not([type="date"]).vbx-field-invalid {
    background-image:url("/storage/content/img/invalid-icon.svg");
    background-position:right center;
    background-repeat:no-repeat;
    background-size:1em;
    /*padding-right:1em;*/
}

.vbx-form input:not([type="date"]).vbx-field-valid, .vbx-app-body .vbx-form input:not([type="date"]).vbx-field-valid {
    background-image:url("/storage/content/img/valid-icon.svg");
    background-position:right center;
    background-repeat:no-repeat;
    background-size:1em;
    /*padding-right:1em;*/
}

.vbx-form.show-invalid-message .vbx-form-row.vbx-field-invalid:after, .vbx-app-body .vbx-form.show-invalid-message .vbx-form-row.vbx-field-invalid:after {
    position:absolute;
    content: attr(data-invalid-text);
    font-weight:bold;
    color:white;
    left: 10em;
    top:-2.25em;
    height:2em;
    white-space:nowrap;
    background-color:red;
    border-radius:4px;
    z-index:998;
    padding:0.25em 0.75em;
}

.vbx-form.show-invalid-message .vbx-form-row.vbx-field-invalid:first-of-type:after, .vbx-app-body .vbx-form.show-invalid-message .vbx-form-row.vbx-field-invalid:first-of-type:after {
    top:2em;
}

.vbx-form.show-invalid-message .vbx-form-row.vbx-field-invalid ~ .vbx-form-row.vbx-field-invalid:after, .vbx-app-body .vbx-form.show-invalid-message .vbx-form-row.vbx-field-invalid ~ .vbx-form-row.vbx-field-invalid:after {
    content: none;
}

.vbx-form.show-invalid-message .vbx-form-row.vbx-field-invalid:before, .vbx-app-body .vbx-form.show-invalid-message .vbx-form-row.vbx-field-invalid:before {
    border: solid;
    border-color: red transparent;
    border-width: .75em .75em 0 .75em;
    top: -.25em;
    content: "";
    left: 11em;
    position: absolute;
    z-index: 999;
}

.vbx-form.show-invalid-message .vbx-form-row.vbx-field-invalid:first-of-type:before, .vbx-app-body .vbx-form.show-invalid-message .vbx-form-row.vbx-field-invalid:first-of-type:before {
    border-width: 0 .75em .75em .75em;
    top: 1.25em;
}

.vbx-form.show-invalid-message .vbx-form-row.vbx-field-invalid ~ .vbx-form-row.vbx-field-invalid:before, .vbx-app-body .vbx-form.show-invalid-message .vbx-form-row.vbx-field-invalid ~ .vbx-form-row.vbx-field-invalid:before {
    content: none;
}

.vbx-form label, .vbx-app-body .vbx-form label {display:inline-block; width:10em; vertical-align:top;}
.vbx-form label, .vbx-app-body .vbx-form label.checkboxfieldlabel {width: 100%;}
.vbx-form input[type="checkbox"] + label, .vbx-app-body .vbx-form input[type="checkbox"] + label,
.vbx-form input[type="radio"] + label, .vbx-app-body .vbx-form input[type="radio"] + label
{width:auto;}
.vbx-form label.vbx-field-required:after, .vbx-app-body .vbx-form label.vbx-field-required:after {content: " *"; font-weight:bold;}

.vbx-form ul, .vbx-app-body .vbx-form ul {-webkit-padding-start: 0; -moz-padding-start: 0; list-style-type: none;}
.vbx-form-success-msg, .vbx-app-body .vbx-form-success-msg { display:none;}
.vbx-form-success .vbx-form-success-msg, .vbx-app-body.vbx-form-success .vbx-form-success-msg { display:block;}
.vbx-form-error-msg, .vbx-app-body .vbx-form-error-msg { display:none;}
.vbx-form-error .vbx-form-error-msg, .vbx-app-body.vbx-form-error .vbx-form-error-msg { display:block; color: red; }

.vbx-form-success .vbx-submit,
.vbx-app-body.vbx-form-success .vbx-submit,
.vbx-form-success .vbx-form,
.vbx-app-body.vbx-form-success .vbx-form {
    display: none;
}

.vbx-form.vbx-no-valid-form:after, .vbx-app-body .vbx-form.vbx-no-valid-form:after {
    content: 'There is no valid form';
}
.vbx-submit.vbx-no-valid-form, .vbx-app-body .vbx-submit.vbx-no-valid-form {
    display: none;
}



.vbx-app-body .vbx-feed-item {margin-bottom:0.5em; clear:both;}
.vbx-app-body .vbx-feed-content a {text-decoration:underline; cursor:pointer;}
.vbx-app-body a .vbx-feed-content, .vbx-app-body .vbx-feed-item > a {text-decoration:none; color:inherit;}
.vbx-app-body .vbx-feed-item .vbx-feed-link-item {padding:0.5em; overflow:auto;}
.vbx-app-body .vbx-feed-item a .vbx-feed-link-item:hover, .vbx-app-body .vbx-feed-item[onclick] .vbx-feed-link-item:hover {cursor:pointer;background-color:rgba(127,127,127,0.25);}
.vbx-app-body .vbx-feed-item:empty {display:none;}

.vbx-app-body .vbx-feed-thumbnail {float:left; margin-right: 0.5em;border-width: 0;}
.vbx-app-body .vbx-feed-author,  .vbx-app-body .vbx-feed-header {
    font-style:italic;
}


.vbx-app-body .vbx-cover-flow {position:absolute; bottom:0;left:0;right:0;height:56px;text-align:center;overflow:hidden;white-space:nowrap;background-color:rgba(0,0,0,0.5)}
.vbx-app-body .vbx-cover-flow-mask {position:absolute; bottom:0;left:30px;right:30px;height:56px;text-align:center;overflow:hidden;white-space:nowrap;}
.vbx-app-body .vbx-cover-flow-scroll-left {position:absolute; bottom:0;left:0px;width:30px;height:56px;text-align:center;overflow:hidden;white-space:nowrap;background-image:url("/storage/content/img/prev_image_icon.png");background-repeat:no-repeat;background-position:center center;background-size:50%;cursor:pointer;}
.vbx-app-body .vbx-cover-flow-scroll-right {position:absolute; bottom:0;right:0px;width:30px;height:56px;text-align:center;overflow:hidden;white-space:nowrap;background-image:url("/storage/content/img/next_image_icon.png");background-repeat:no-repeat;background-position:center center;background-size:50%;cursor:pointer;}
.vbx-app-body .vbx-cover-flow .vbx-feed-item {margin-bottom:0;}
.vbx-app-body .vbx-cover-flow .vbx-cover-flow-thumbnail {display:inline-block; width:50px;height:50px;background-size:cover;background-repeat:no-repeat;background-position:center center;margin:2px 1px;cursor:pointer;border:solid 1px rgba(0,0,0,0);}
.vbx-app-body .vbx-cover-flow .vbx-cover-flow-thumbnail:hover {border-color:#ffffff;}

.vbx-app-body .vbx-scrollable, .vbx-app-body.vbx-scrollable {
    width:100%;
    height: 100%;
    overflow-x:hidden;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
}

.firefox.vbx-app-body .vbx-scrollable, .firefox.vbx-app-body.vbx-scrollable {
    overflow-y:auto;
}
.vbx-app-body.touchscreen .vbx-scrollable {
  overflow-y: auto;
}

.vbx-app-body .vbx-scrollable:hover, .vbx-app-body.vbx-scrollable:hover {
  overflow-y: auto;
}


.viewbix-branding { display:none; width:100%;}
.show-viewbix-branding .viewbix-branding { display:block;}
.vpaid-ad .viewbix-branding { display:none; width:100%;}


.powered-by-viewbix {
    margin-top: 2px;
    margin-right: 10px;
    float: right;
    border-width: 0px;
}

.vbx-loading:after, .vbx-app-body .vbx-loading:after, .vbx-app-body.vbx-loading:after {
    position: absolute;
    content: '';
    z-index: 99999999;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-image: url(https://localwww.viewbix.com/img/loading-icon-rotate.svg);
    background-color: rgba(0, 0, 0, 0.498039);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 50px;
}

.vbx-ios-fix-overlay {
    position: relative;
    background-color: black;
    width: 100%;
    height: 100%;
}

.vbx-ios-fix-poster {
    width: 100%;
    height: 100%;
}

/* vjs YouTube ================================================ */

.vjs-default-skin .vjs-big-play-button {
  cursor: pointer;
  width: 3em;
  height: 2em;
  background-color: rgba(50, 50, 50, 0.8);
  border: none;
  /* border-radius */
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
  /* box-shadow */
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    -o-transition: all 0s;
    transition: all 0s;
}

.vjs-default-skin:hover .vjs-big-play-button, .vjs-default-skin .vjs-big-play-button:focus {
    background-color: #d82222;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.vjs-default-skin .vjs-big-play-button:before {
    font-size: 1.2em;
    line-height: 1.75em;
    margin-left: .05em;
    text-shadow: none;
    color:#ffffff;
}

.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
  margin-left: -1.5em;
  margin-top: -1em;
}


/* No video */
.novideo-tech .vjs-big-play-button {
    display: none;
}


.novideo-tech .vjs-default-skin .vjs-control-bar {
    display: block;
}
.novideo-tech .vjs-default-skin .vjs-control, .novideo-tech .vjs-default-skin .vjs-time-divider {
    display: none;
}

.novideo-tech .fullscreen-button {
    display: none;
}


.has-youtube-poster .vjs-big-play-button {
    display: none;
}

.video-ended .vjs-default-skin.vjs-has-started .vjs-big-play-button {
    display: block;
}

.vjs-default-skin .vjs-volume-control {
  float: left;
}

.vjs-default-skin .vjs-mute-control,
.vjs-default-skin .vjs-volume-menu-button {
  float: left;
}

.vjs-fullscreen-control { display:none; }
/* ============================================================ */


/* ============================================================ */
/* Necessary for element resize event hack */
/* ============================================================ */

.resize-triggers {
	visibility: hidden;
}

.resize-triggers, .resize-triggers > div, .contract-trigger:before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.resize-triggers > div {
  background: #eee;
  overflow: auto;
}

.contract-trigger:before {
  width: 200%;
  height: 200%;
}

/* ============================================================ */