vvmaintextandclickcallback-vv {
    background:inherit;

}

button-vv { 
  color : var(--button-color);
  background :var(--button-background);
  display:inline-block;
  cursor:pointer;
  font-family:Arial;
  font-weight:bold;
  padding:0.2rem .9rem;
  text-decoration:none;
  /* text-shadow:0px 1px 0px #7cacde; */
  margin:.2rem .1rem;
  /*fonts*/
  font: var(--button-font);
  font-size: var(--font-size);
  /*effects*/
  border: var(--border);
  user-select: none;
  border-radius:.4rem;
  text-align:center;
}
button-vv:hover {
  color : var(--button-color);
  background : var(--button-background-hover);
  background-blend-mode:multiply;
    /* mix-blend-mode: luminosity; */
}
button-vv[disabled='true'] {
  background:   var(--button-background-disabled);
}

/* button-vv::after { */
/* content: "→"; */
/* } */
/* The Modal (background) */
modal-vv {
 position: absolute;
  top: 0%;
  left: 0%;
  transform: translate(0%, 0%);
    z-index: 60000; /* Sit on top */
    width: 100vw; /* Full width */
    height: 100vh; /* Full height */
    -webkit-animation: slide-form-top .2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-from-top .2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

modal-vv > * {
    max-width: 98vw; /* Full width */
    max-height: 98vh; /* Full width */
    box-shadow: .3em .3em 0.9em .1em  #000000 ;
}

modal-vv div-vv[propertyname='top'] {
 width:96%;
}

modal-vv div-vv {
    display: flex;
    flex-direction: column;
    background-color: var(--secondary-background);
    margin: auto;
    width: 90%;
}

modal-vv div-vv[propertyname='nav'] {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

modal-vv div-vv div-vv > * {
    display: flex;
    flex-direction: column;
    align-items: center;
}
modal-vv div-vv div-vv > * > * {
}



@keyframes slide-from-top {
    0% {
        background: #8DAD8B;
        transform:scale(3)
    }
    100% {
        background: #EBDAAE;
    
    }
}
@-webkit-keyframes slide-form-top {
    0% {
        background: #8DAD8B;
    }
    100% {
        background: #EBDAAE;
    }
}
@keyframes slide-from-top {
    0% {
        background: #8DAD8B;
        transform:scale(3)
    }
    100% {
        background: #EBDAAE;
    }
}

@-webkit-keyframes slide-form-left {
    0% {
        -webkit-transform: translateX(-40%);
        transform: translateX(-40%);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes slide-from-left {
    0% {
        -webkit-transform: translateX(-40%);
        transform: translateX(-40%);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@-webkit-keyframes flip-2-hor-top-1 {
    0% {
        -webkit-transform: translateY(0) rotateX(0);
        transform: translateY(0) rotateX(0);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
    }
    100% {
        -webkit-transform: translateY(-100%) rotateX(-180deg);
        transform: translateY(-100%) rotateX(-180deg);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
    }
}
@keyframes flip-hor3 {
    0% {
        -webkit-transform: translateY(-100%) rotateX(-180deg);
        transform: translateY(-100%) rotateX(-180deg);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
    }
    100% {
        -webkit-transform: translateY(0) rotateX(0);
        transform: translateY(0) rotateX(0);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
    }
}
label-vv { 
  color : var(--label-color);
  /* color : orange; */

/*  border-radius:6px;
  border:.5rem solid #3866a3;
  text-shadow:0px 1px 0px #7cacde;*/
  /*fonts*/
/*  font: var(--text-font);
  font-size: var(--font-size); */
  font-weight:bold;
  /*effects*/
  /*padding:6px 24px;*/
  /*border: var(--border);*/
}
label-vv:hover {
  color : var(--label-color-hover);
}
*[family-vv='labeled-component'] {
    background: inherit;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
}

* *[propertyName='label'] {
    flex-grow: 4;
}
* *[propertyName='main'] {
    flex-grow: 10;
}
edit-vv {
    /*[componentname="edit"]*/
    /* color: var(--input-color); */
    color: var(--input-color-hover);
    background: var(--input-background);
    border-radius: 0.2rem;
    border: 2px solid #333029;
    display: inline-block;
    cursor: pointer;
    font-family: Arial;
    font-weight: bold;
    padding: 0.2rem 0.4rem;
    margin: 0.15rem 0.03rem;
    min-width: 7rem;
    text-decoration: none;
    /* text-shadow: 0px 1px 0px #ffffff; */
    /*fonts*/
    font: var(--input-font);
    font-size: var(--font-size);
    /*effects*/
    border: var(--border);
}
edit-vv:hover {
    color: var(--input-color-hover);
    background: var(--input-background-hover);
}
edit-vv:focus {
    color: var(--input-color-focus);
    background: var(--input-background-focus);
}

labelededit {
  display: flex ;
  flex-direction: row ;
  flex-wrap: wrap ;
  justify-content: flex-start ;
  align-items: center ;
  align-content: center ;

}
labelededit label {
  flex-grow : 1;
}

labelededit edit {
  flex-grow : 2;
 text-align:center;
}


labelededit:focus {
 
}
    
labelededit:hover {
 
}
lubomirkubas_lubospicture-vv {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    background-repeat: no-repeat;
    margin-top: 1em;
    background-size: cover;
    text-align: center;
    font-size: 4rem;
    margin: 0.3rem;
    cursor:zoom-in;
    /* width:100%; */
    /* height:100%; */
    /* border: solid white 2px; */
    /* width: 44vw; */
    /* height: 44vh; */
}
lubomirkubas_lubospicture-vv > text-vv {
}
lubomirkubas_lubospicture-vv > button-vv {
}

/* @media only screen and (max-width: 1600px) { */
/*     lubomirkubas_lubospicture-vv { */
/*         display: flex; */
/*         flex-direction: column; */
/*         flex-wrap: nowrap; */
/*         align-items: flex-start; */
/*         background-repeat: no-repeat; */
/*         margin-top: 1em; */
/*         background-size: cover; */
/*         text-align: center; */
/*         font-size: 4rem; */
/*         margin: 0.3rem; */
/*         /* width:100%; */ */
/*         /* height:100%; */ */
/*         border: solid white 2px; */
/*         width: '88vw'; */
/*         height: '88vh'; */
/*     } */
/* } */
scroll-vv {
    background: inherit;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /* justify-content: stretch; */
    /* align-items: space-around; */
    justify-content: space-between;
    overflow-y: scroll;
    height: 100%;
    width: 100%;
}
scroll-vv > * {
    margin: 0.2em;
    height: 100%;
    width: 100%;
    flex-grow: 4;
}
buttonizededit-vv {
    background: inherit;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    width: 100%;
}
buttonizededit-vv > edit-vv {
    text-align: center;
}
lubomirkubas_portfolie-vv {
    background:inherit;
    display:flex; 
    flex-direction:column; 
    flex-wrap: nowrap; 
    /* justify-content: space-around ;  */
    /* align-items: center;  */
    /* align-content: center;  */
    
}
@media only screen and (min-width: 1200px) {
lubomirkubas_portfolie-vv > *[propertyname="gallery"] {
background: #182B2F;
display:flex; 
flex-direction:row; 
flex-wrap: wrap; 
min-height:70vh;
justify-content: flex-start ; 
overflow-y:scroll;
overflow-x:hidden;
/* align-items: center;  */
align-content: flex-start; 
flex-grow:89;
/* max-width:30vw; */
}

lubomirkubas_portfolie-vv > *[propertyname="gallery"] > * {
/*  width:44vw; */
/*  height:37vw; */
 width:31vw;
 height:23vw;
}
}
@media only screen and (max-width: 1200px) {
lubomirkubas_portfolie-vv > *[propertyname="gallery"] {
background: #182B2F;
display:flex; 
flex-direction:column; 
flex-wrap: nowrap; 
min-height:80vh;
justify-content: flex-start ; 
overflow-y:scroll;
overflow-x:hidden;
/* align-items: center;  */
align-content: flex-start; 
/* max-width:100vw; */
}
lubomirkubas_portfolie-vv > *[propertyname="gallery"] > * {
 width:97vw;
 height:97vw;
 min-height:71vw;
}
}



lubomirkubas_portfolie-vv > *[propertyname="fullscreenview"]  {
 background: rgba(76, 175, 80, 0.1)
background: green;
height:100%;
width:100%;
}
lubomirkubas_portfolie-vv > [propertyname="fullscreenview"]  > [propertyname="wrapper"]{
 width:100vw;
 height:100vh;
 }
lubomirkubas_portfolie-vv > [propertyname="fullscreenview"]  > [propertyname="wrapper"] > [propertyname="top"]  {
 width:100%;
 height:100%;
 }
lubomirkubas_portfolie-vv > [propertyname="fullscreenview"]  > [propertyname="wrapper"] > [propertyname="top"] > [propertyname="mainmodalcomponent"] {
 width:100%;
 height:100%;
 }
lubomirkubas_portfolie-vv > [propertyname="fullscreenview"]  > [propertyname="wrapper"] > [propertyname="top"] > [propertyname="mainmodalcomponent"] > [propertyname="main"] {
/*  background:red; */
 width:100%;
 height:100%;
 }
lubomirkubas_portfolie-vv > [propertyname="fullscreenview"]  > [propertyname="wrapper"] > [propertyname="top"] > [propertyname="mainmodalcomponent"] > [propertyname="main"][fullscreen="true"] {
 background:#332020;
 overflow-x:scroll;
 overflow-y:scroll;
 width:100%;
 height:100%;
 }
lubomirkubas_portfolie-vv > [propertyname="fullscreenview"]  > [propertyname="wrapper"] > [propertyname="top"] > [propertyname="mainmodalcomponent"] > [propertyname="main"][fullscreen="false"] {
 background:#17282C;
 width:100%;
 height:100%;
 }
lubomirkubas_portfolie-vv > [propertyname="fullscreenview"]  > [propertyname="wrapper"] > [propertyname="top"] > [propertyname="mainmodalcomponent"] {
 width:100%;
 height:100%;
 }
lubomirkubas_portfolie-vv > [propertyname="fullscreenview"]  > [propertyname="wrapper"] > [propertyname="top"] > [propertyname="mainmodalcomponent"] {
 width:100%;
 height:100%;
 }
lubomirkubas_portfolie-vv > [propertyname="what"]   {
 min-height:1.5em;
/*  margin-top:.5em; */
}
lubomirkubas_portfolie-vv > [propertyname="what"] > button-vv  {
/*  background:black; */
/*  background:#A2B3AA; */
 font-size:1.1em;
 }
lubomirkubas_portfolie-vv > [propertyname="what"] > edit-vv  {
 color:black;
 background:#A2B3AA;
 font-size:1.1em;
 }
lubomirkubas_portfolie-vv > [propertyname="what"] > edit-vv:focus  {
 color:#111;
 background:#D4FFE9;
 font-size:1.1em;
 }

panel-vv {
    background:inherit;
}
//todo utiltext-vv { 
  color : var(--text-color);
  border-radius:6px;
  /* border:.5rem solid #3866a3; */
  /* text-shadow:0px 1px 0px #7cacde; */
  /*fonts*/
  font: var(--text-font);
  font-size: var(--font-size);
  /* font-weight:bold; */
  /*effects*/
  /* padding:6px 24px; */
  border: var(--border);
}
collection-vv {
    background: inherit;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
}
collection-vv:hover {
}

collection-vv:focus {
}


collectionbutton-vv {
    background:inherit;
}
carousel-vv {
    background: inherit;
}
carousel-vv {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: stretch;
    align-items: center;
    align-content: center;
    height: 60vh;
    width: 60vw;
    position: relative;
}
carousel-vv > [propertyname='picture'] {
    position: absolute;
    width:100%;
    height:100%;
}
carousel-vv > [propertyname='alter'] {
    position: absolute;
    width: 100vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: stretch;
    align-content: center;
    min-height: 100%;
    min-width: 100%;
}
carousel-vv > [propertyname='alter'] > [propertyname='prev'],
carousel-vv > [propertyname='alter'] > [propertyname='next'] {
    background: transparent;
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    min-width: 4em;
}
carousel-vv > [propertyname='alter'] > [propertyname='main'] {
    background: transparent;
    color: white;
    flex-grow: 8;
    min-width: 4m;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    align-content: flex-end;
}
carousel-vv > [propertyname='alter'] > [propertyname='main'] > [propertyname='selection'] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
}
carousel-vv > [propertyname='alter'] > [propertyname='main'] > [propertyname='selection'] > * {
    margin: 0.3em;
    margin-bottom: 2.3em;
}
/* carousel-vv > [propertyname='main'] > [propertyname='picture'] > [propertyname='prev'] > [propertyname='prev'], carousel-vv > [propertyname='main'] > [propertyname='picture'] > [propertyname='next']  > [propertyname='next']{ */
/*  background:transparent; */
/*  font-size:5em; */
/* } */
carousel-vv > [propertyname='alter'] > [propertyname='main'] {
    cursor: zoom-in;
}
carousel-vv > [propertyname='alter'] > [propertyname='next'],
[propertyname='prev'] {
    cursor: pointer;
}
carousel-vv > [propertyname='alter'] > * > [propertyname='next'],
carousel-vv > [propertyname='alter'] > * > [propertyname='prev'] {
    background-color: rgba(0, 0, 100, 0.4);
    color: yellow;
    font-size: 2em;
}
carousel-vv > [propertyname='alter'] > * > [propertyname='next']:hover,
carousel-vv > [propertyname='alter'] > * > [propertyname='prev']:hover {
    background-color: rgba(0, 0, 100, 0.7);
    color: yellow;
    font-size: 2em;
}
lubomirkubas_home-vv {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /* justify-content:center ;  */
    justify-content: stretch;
    align-items: stretch;
    align-content: stretch;
    overflow:hidden;
}
lubomirkubas_home-vv > labeledtext-vv > label-vv {
    /* background: red; */
    width: 100%;
}
lubomirkubas_home-vv > label-vv {
    text-align: center;
    font-size: 2em;
}
lubomirkubas_home-vv > text-vv {
    text-align: center;
    font-size: 2em;
}
lubomirkubas_home-vv carousel-vv {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /* justify-content:center ;  */
    justify-content: stretch;
    align-items: stretch;
    align-content: stretch;
    width:100%;
    height:100%;
}
.labeledtext {
 
}

.labeledtext:focus {
 
}
    
.labeledtext:hover {
 
}
iconablelabellink-vv {
    background: inherit;
    display:flex; 
    flex-direction:row; 
    /* flex-wrap: nowrap;  */
    justify-content: space-around ; 
    align-items: center; 
    align-content: center;
    cursor: pointer;
}
iconablelabellink-vv picture-vv {
    /* min-width: 20vw; */
    min-height: 10vh;
    /* height:14%; */
    background: inherit;
}
lubomirkubas_contact-vv {
    background: white;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    overflow-y:scroll;
}
lubomirkubas_contact-vv * {
    font-size: 3rem;
}
lubomirkubas_contact-vv > labeledtext-vv > label-vv {
    color: black;
    text-align: center;
}
lubomirkubas_contact-vv > labeledtext-vv > label-vv:hover {
    color: black;
}
lubomirkubas_contact-vv > labeledtext-vv > text-vv:hover {
    color: blue;
}
lubomirkubas_contact-vv > labeledtext-vv {
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    color: black;
}
/* lubomirkubas_contact-vv > labeledtext-vv:hover { */
/*     background: green; */
/* } */
lubomirkubas_contact-vv > text-vv {
    text-align: center;
}
lubomirkubas_aboutme-vv {
    background: inherit;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
}
lubomirkubas_aboutme-vv > text-vv {
    background: inherit;
    font-size: 1.1em;
    text-align: center;
}
@media only screen and (min-width: 50em) and (max-width: 130em) {
    lubomirkubas_aboutme-vv > text-vv {
        font-size: 1.3em;
    }
}
@media only screen and (min-width: 130em) {
    lubomirkubas_aboutme-vv > text-vv {
        font-size: 1.7em;
    }
}
html[data-theme-colors='moth']  {
  --main-background: #F7E5CA;
  --main-color: ##282525;

  --secondary-background: #FFF5E0;
  --secondary-color: #000000;

  --tertiary-background: radial-gradient(circle, rgba(156,223,240,0.8029412448573179) 0%, rgba(144,122,122,1) 56%, rgba(37,67,73,1) 100%);
  --tertiary-color: #E6FF0B;
  
  --label-color: #000000;
  --label-color-hover: #000000;

  --text-color: #000000;

  --input-color: linear-gradient(to bottom, #000000 5%, #000000 100%);
  --input-color-hover: #000000;
  --input-color-focus: linear-gradient(to bottom, #000000 5%, #000000 100%);

  --input-background: #ffffff;
  --input-background-hover: #ffffff;
  --input-background-focus: #ffffff;

  --button-color: #000;
  --button-color-hover: color(#000000 contrast(50%));        
  --button-color-focus: #000000;

  --button-background: linear-gradient(to bottom, #E8E4E4 5%, #E8E4E4 100%);
  --button-background-hover: linear-gradient(to bottom, #E1E1E1 5%, #E1E1E1 100%);
  --button-background-focus: linear-gradient(to bottom, #ffffff 5%, #ffffff 100%);
  --button-background-disabled: #ffffff;
  --button-background-selected: #ffffff;

}
html[data-theme-colors='lightblue']  {
  --main-background:#ffffe7 ;
  --main-color: #091A47;

  --secondary-background: #87CEFF;
  --secondary-color: #091A47;

  --tertiary-background: radial-gradient(circle, rgba(156,223,240,0.8029412448573179) 0%, rgba(144,122,122,1) 56%, rgba(37,67,73,1) 100%);
  --tertiary-color: #E6FF0B;
  
  --label-color:#0023b3 ;
  --label-color-hover: #0500FF;

  --text-color:#480303;

  --input-color: #fffc02;
  --input-color-hover: #660000;
  --input-color-focus: #6633f0;

  --input-background:#b94c00; 
  --input-background-hover: linear-gradient(to bottom, #FFEBDD 5%, #FEC398 100%);
  --input-background-focus: linear-gradient(to bottom, #ffff66 5%, #ccff33 100%);

  --button-color: #ccffcc;
  --button-color-hover:#ecff00;        
  --button-color-focus: #000099;

  --button-background: linear-gradient(to bottom, #63b8ee 2%, #04161e 100%);
  --button-background-hover: linear-gradient(to bottom, #83b8ee 25%, #04161e 100%);
  --button-background-focus: linear-gradient(to bottom, #68FDFD 5%, #3399ff 100%);
  --button-background-disabled: #aaa;
  --button-background-selected: #ffcc00;
}

html[data-theme-colors='light']  {
  --main-background: #E1E7EF;
  --main-color: #433D03;

  --secondary-background: #ACDDFF;
  --secondary-color: #f91A47;

  --tertiary-background: radial-gradient(circle, rgba(156,223,240,0.8029412448573179) 0%, rgba(144,122,122,1) 56%, rgba(37,67,73,1) 100%);
  --tertiary-color: #E6FF0B;
  
  --label-color: #000099;
  --label-color-hover: #990033;

  --text-color: #222277;

  --input-color: #663300;
  --input-color-hover: #660000;
  --input-color-focus: #0FB6D9;

  --input-background: #ffffcf;
  /* linear-gradient(to bottom, #ffffff 5%, #ffffcf 100%);; */
  --input-background-hover: #ffff66;
  --input-background-focus: linear-gradient(to bottom, #ffff66 5%, #ccff33 100%);;
  
  --button-color:   #043413;
  --button-color-hover: color(#3300cc contrast(50%));        
  --button-color-focus: #660066;

  --button-background: linear-gradient(to bottom, #ff9933 5%, #ff6633 100%);
  --button-background-hover: linear-gradient(to bottom, #ff3333 5%, #ff6633 100%);
  --button-background-focus: linear-gradient(to bottom, #ff9999 5%, #ff3333 100%);
  --button-background-disabled: #ccc;
  --button-background-selected: black;

}

html[data-theme-colors='dark']  {
  --main-background: #030F25;
  --main-color: #8EFFC2;

  --secondary-background: #a3aFa5;
  --secondary-color: #8EFFC2;

  --tertiary-background: radial-gradient(circle, rgba(156,223,240,0.8029412448573179) 0%, rgba(144,122,122,1) 56%, rgba(37,67,73,1) 100%);
  --tertiary-color: #E6FF0B;
  
  --label-color: #ffff99;
  --label-color-hover: #ffff00;

  --text-color: #aadddd;

  --input-color: white;
  /* linear-gradient(to bottom, #ccffcc 5%, #c0dfac 100%); */
  --input-color-hover: #ccff99;
  --input-color-focus: linear-gradient(to bottom, #ffff66 5%, #ccff33 100%);

  --input-background: #663300;
  --input-background-hover: #660000;
  --input-background-focus: #663300;

  --button-color: #ccffcc;
  --button-color-hover: color(#ff0033 contrast(50%));        
  --button-color-focus: #000099;

  --button-background: linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
  --button-background-hover: linear-gradient(to bottom, #33ccff 5%, #0099ff 100%);
  --button-background-focus: linear-gradient(to bottom, #66ccff 5%, #3399ff 100%);
  --button-background-disabled: #aaa;
  --button-background-selected: #ffcc00;

}
/*Declaration of Variables*/
:root {
    --sans-serif: 'system-ui', 'Helvetica', Arial, sans-serif;
    --serif: 'system-ui', 'Georgia', Cambria, serif;
    /*--border:2px dashed red;*/
}
/*Accessing the Declared Variables*/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--sans-serif);
}
p,
ul,
dl,
ol,
a,
edit {
    font-family: var(--serif);
}
button,
edit,
dl,
ol,
a {
    font-family: var(--serif);
}

.error {
    color: white;
    background-color: red;
    text-transform: uppercase;
}

* {
    background: transparent;
    font-size: 2rem;
}

#vv-app-container {
    /* background: var(--main-background); */
}
body {
    background: var(--main-background);
}

html {
    /*padding:0;*/
    /*margin:0;*/
    font-size: 62.5%;
}

* > modal {
    /*overflow:auto;*/
}

*[selected='selected'] > {
    /*background:red;*/
    box-shadow: inset 0 0 1rem 0rem var(--button-bg-color-selected);
}
* [disabled='disabled'] {
    background: var(--button-bg-color-disabled);
}
* [disabled='disabled']:hover {
    background: var(--button-bg-color-disabled);
}
*[correct='true'] {
    /* box-shadow:inset 0 0 .2em .2em green; */
    /* text-decoration: underline overline; */
}
*[incorrect='true'] {
    /* box-shadow:inset 0 0 .2em .2em red; */
    opacity: 0.4;
}
/**[selected='selected'] label {
box-shadow:inset 0 0 .5em .2em var(--button-bg-color-selected);
}
*[disabled="disabled"] {
  background:   var(--button-bg-color-disabled);
}
*[correct='true'] {
box-shadow:inset 0 0 .5em .2em green;
}
*[incorrect="true"] {
box-shadow:inset 0 0 .5em .2em red;
}*/
* {
}

* .isCorrect {
    box-shadow: inset 0 0 0.5em 0.2em green;
}

* .isIncorrect {
    box-shadow: inset 0 0 0.5em 0.2em red;
}

html,
body, 
#vv-app-container
{
    height: 100%;
    overflow-y: hidden;
    padding: 0;
    margin: 0;
}



html > * {
    background-color: var(--main-background);
    /* color: var(--main-color); */
    background: inherited;
}
body {
margin: 0px;
}

views-vv {
    background: inherit;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    align-content: stretch;
}
views-vv > * {
    display: flex;
    flex-direction: column;
    /* width: 100%; */
}
views-vv:hover {
}

views-vv:focus {
}
vvpluginselectionselect-vv {
    background:inherit;

}
vvpluginselectionselect-vv:hover {

}

vvpluginselectionselect-vv:focus {

}

*[checked='true']:before {
    /* content: '\2714'; */
    /* content: '\1F5F9'; */
    content: '\2611';
    font-weight: bold;
    margin-right: 0.2em;
}
*[checked='false']:before {
    /* color: var(--main-color); */
    content: '\2610';
    opacity: 0.8;
    margin-right: 0.2em;
    /* content: '✗'; */
}

*[checked='true'] {
    /* border: 1px solid green; */
    /* background: #D8FBD1; */
}
*[checked='false'] {
    /* border: 1px solid red; */
    /* background: #FCDBD8; */
}
vvplugincollectioncheckability-vv {
    background:inherit;

}
vvplugincollectioncheckability-vv:hover {

}

vvplugincollectioncheckability-vv:focus {

}

utilsComponentAugments {

}
    
html[data-theme-colors='light'] utilscomponentaugments-vv {

}
    
html[data-theme-colors='dark'] utilscomponentaugments-vv {

}

html[data-theme-colors='dark'] utilsComponentAugments {

}
    
html[data-theme-colors='dark'] utilsComponentAugments:hover {

}
    
html[data-theme-colors='dark'] utilsComponentAugments:focus {

}

html[data-theme-colors='light'] utilsComponentAugments {

}
    
html[data-theme-colors='light'] utilsComponentAugments:hover {

}
    
html[data-theme-colors='light'] utilsComponentAugments:focus {

}

utilscomponentaugments-vv {
    background:inherit;

}
utilscomponentaugments-vv:hover {

}

utilscomponentaugments-vv:focus {

}

collectionsinglechoicetext-vv {
    background:inherit;

}
collectionsinglechoicetext-vv:hover {

}

collectionsinglechoicetext-vv:focus {

}

selectiontext-vv {
    background:inherit;

}
selectiontext-vv:hover {

}

selectiontext-vv:focus {

}

selectableviews-vv {
    background: inherit;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: stretch;
    align-items: stretch;
    align-content: stretch;
}
selectableviews-vv:hover {
}

selectableviews-vv:focus {
}
selectableviews-vv > collection-vv {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    background: #0d1716;
    flex-grow: 40;
}
selectableviews-vv > collection-vv > * {
    padding: 0.4em 1.4em;
    color: white;
}
selectableviews-vv > collection-vv > text-vv[checked='false']:before,
*[checked='true']:before {
    content: '';
    background-color: initial;
    background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
    border-radius: 125px;
    content: '';
    height: 50%;
    left: 4%;
    opacity: 0.5;
    position: absolute;
    top: 0;
    transition: all 0.3s;
    width: 92%;
    /* margin:1rem 3rem; */
}
selectableviews-vv > collection-vv > text-vv[checked='false'] {
    margin: 0.4em 0.4em;
    background-color: #0078d0;
    border: 0;
    border-radius: 56px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: system-ui, -apple-system, system-ui, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif;
    font-size: 18px;
    font-weight: 600;
    outline: 0;
    /* padding: 16px 21px; */
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;

    /* @media (min-width: 768px) { */
    /*   .button-71 { */
    /*     padding: 16px 48px; */
    /*   } */
    /* } */
    /* color : var(--button-color); */
    /* background : var(--button-background); */
}
selectableviews-vv > collection-vv > * {
    /*  margin:0; */
    /*  padding:0; */
}
selectableviews-vv > collection-vv > text-vv[checked='false']:hover {
    box-shadow: rgba(255, 255, 255, 0.2) 0 3px 15px inset, rgba(0, 0, 0, 0.1) 0 3px 5px, rgba(0, 0, 0, 0.1) 0 10px 13px;
    transform: scale(1.15);
}
selectableviews-vv > collection-vv > text-vv[checked='true'] {
    margin: 0.4em 0.4em;
    border: 0;
    border-radius: 56px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: system-ui, -apple-system, system-ui, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif;
    font-size: 18px;
    font-weight: 600;
    outline: 0;
    /* padding: 16px 21px; */
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;

    background-color: #0a30a8;
    box-shadow: rgba(255, 255, 255, 0.2) 0 3px 15px inset, rgba(0, 0, 0, 0.1) 0 3px 5px, rgba(0, 0, 0, 0.1) 0 10px 13px;
    transform: scale(1.15);
}
selectableviews-vv > collection-vv > text-vv[checked='true']:hover {
    box-shadow: rgba(255, 255, 255, 0.2) 0 3px 15px inset, rgba(0, 0, 0, 0.1) 0 3px 5px, rgba(0, 0, 0, 0.1) 0 10px 13px;
    transform: scale(1.15);
}
selectableviews-vv > [propertyname='switcher'] {
    flex-grow: 1;
    height: 3em;

}
selectableviews-vv > [propertyname='views'] {
    background: #fffdf7;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: stretch;
    align-items: stretch;
    flex-grow: 40;
    align-content: stretch;
}
selectableviews-vv > views-vv {
    /* color: red; */
}
selectableviews-vv > views-vv > scroll-vv {
}
picture-vv {
    display:flex; 
    flex-direction:column; 
    flex-wrap: wrap; 
    justify-content: flex-start ; 
    align-items: flex-end; 
    align-content: center;
    background-repeat: no-repeat;
    margin-top: 1em;
    background-size: cover;
    text-align: center;
    font-size: 4rem;
    margin: 0.3rem;
    /* max-height:12vh; */
    /* max-width:12vw; */
    /* min-height:12vh; */
    /* min-width:12vw; */
    /* min-height:100%; */
    /* min-width:100%; */
    min-height:3em;
    min-width:3em;
    background-size:contain;
    cursor: zoom-in;
}
picture-vv[fullscreen='true'] {
    background-size:auto;
    overflow-x:scroll;
    overflow-y:scroll;
    width:9280;
    height:6944;
    cursor: zoom-out;
}
vvcoreplugins-vv {
    background:inherit;

}
vvcoreplugins-vv:hover {

}

vvcoreplugins-vv:focus {

}

vvpluginurlparser-vv {
    background:inherit;

}


html[data-theme-colors='frog']  {
  --main-background: #E1FFDA;
  --main-color: #8EFFC2;

  --secondary-background: #a3aFa5;
  --secondary-color: #8EFFC2;

  --tertiary-background: radial-gradient(circle, rgba(156,223,240,0.8029412448573179) 0%, rgba(144,122,122,1) 56%, rgba(37,67,73,1) 100%);
  --tertiary-color: #055D27;
  
  --label-color: #026B39;
  --label-color-hover: #ffff00;

  --text-color: #005050;

  --input-color: blue;
  --input-color-hover: #410000;
  --input-color-focus: linear-gradient(to bottom, #ffff66 5%, #ccff33 100%);

  --input-background: #B3FC03;
  --input-background-hover: #00FF00;
  --input-background-focus: #BDFF00;

  --button-color: yellow;
  --button-color-hover: color(#ff0033 contrast(50%));        
  --button-color-focus: #000099;

  --button-background: linear-gradient(to bottom, #51A626 5%, #19710A 100%);
  --button-background-hover: linear-gradient(to bottom, #BFFFC7 5%, #15571F 100%);
  --button-background-focus: linear-gradient(to bottom, #66ccff 5%, #3399ff 100%);
  --button-background-disabled: #aaa;
  --button-background-selected: #ffcc00;
}

html[data-theme-colors='blue-white']  {
  /* --main-background: #030F25; */
  --main-background: #c39366;
  --main-color: #8EFFC2;

  --secondary-background: #a3aFa5;
  --secondary-color: #8EFFC2;

  --tertiary-background: radial-gradient(circle, rgba(156,223,240,0.8029412448573179) 0%, rgba(144,122,122,1) 56%, rgba(37,67,73,1) 100%);
  --tertiary-color: #E6FF0B;
  
  --label-color: #ffff99;
  --label-color-hover: #ffff00;

  --text-color: #031C30;

  --input-color: linear-gradient(to bottom, #ccffcc 5%, #c0dfac 100%);
  --input-color-hover: #ccff99;
  --input-color-focus: linear-gradient(to bottom, #ffff66 5%, #ccff33 100%);

  --input-background: #DDD3C9;
  --input-background-hover: #F6F7DC;
  --input-background-focus: #FFE0C1;

  --button-color: #ccffcc;
  --button-color-hover: color(#ff0033 contrast(50%));        
  --button-color-focus: #000099;

  --button-background: #333aff;
  --button-background-hover: linear-gradient(to bottom, #130075 5%, #3A6EFF 100%);
  --button-background-focus: linear-gradient(to bottom, #66ccff 5%, #3399ff 100%);
  --button-background-disabled: #aaa;
  --button-background-selected: #ffcc00;
}
vvplugintoggletheme-vv {
    background:inherit;

}
vvplugintoggletheme-vv:hover {

}

vvplugintoggletheme-vv:focus {

}

vvplugintogglestate-vv {
    background:inherit;

}
vvplugintogglestate-vv:hover {

}

vvplugintogglestate-vv:focus {

}

vvplugintoggle-vv {
    background:inherit;

}
vvplugintoggle-vv:hover {

}

vvplugintoggle-vv:focus {

}

*[hibernated='true'] {
  /* opacity:0.9; */
/* background:gray; */
}
*[hibernated='true']:hover {
  /* opacity:0.9; */
/* background:gray; */
}
vvpluginservergeneric-vv {
    background:inherit;

}
vvpluginservergeneric-vv:hover {

}

vvpluginservergeneric-vv:focus {

}

vvpluginaudit-vv {
    background:inherit;

}
vvpluginaudit-vv:hover {

}

vvpluginaudit-vv:focus {

}

.animation-rotate {
    animation: animation-rotate 3s 1 ease;
}

.rotate-scale-up {
    animation: rotate-scale-up 0.65s linear both;
}

.bounce-in-top {
    animation: bounce-in-top 1.1s both;
}

.slide-in-blurred-top {
    animation: slide-in-blurred-top 1.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.flip-in-hor-bottom {
    animation: flip-in-hor-bottom 3.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.flip-in-hor-bottom-from23 {
    animation: flip-in-hor-bottom23  cubic-bezier(0.75, 0.86, 0.93, 0.99) both;
}
.fade-in {
    animation-name: fadein;
    animation-duration: 6s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

@keyframes fadein {
    0% {
        opacity: 0.7;
    }
    /* 50% { opacity:1; } */
    100% {
        opacity: 1;
    }
    /* 100% { opacity:0; } */
}

@-webkit-keyframes animation-rotate {
    from {
        -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
    }
    to {
        -webkit-transform: rotate(360deg) scale(0.946) skew(1deg) translate(0px);
    }
}

@keyframes rotate-scale-up {
    0% {
        transform: scale(1) rotateZ(0);
    }
    50% {
        transform: scale(2) rotateZ(180deg);
    }
    100% {
        transform: scale(1) rotateZ(360deg);
    }
}

@keyframes bounce-in-top {
    0% {
        transform: translateY(-500px);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        transform: translateY(0);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: translateY(-65px);
        animation-timing-function: ease-in;
    }
    72% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
    81% {
        transform: translateY(-28px);
        animation-timing-function: ease-in;
    }
    90% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
    95% {
        transform: translateY(-8px);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
}

@keyframes slide-in-blurred-top {
    0% {
        transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
        transform-origin: 50% 0%;
        filter: blur(40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes flip-in-hor-bottom {
    0% {
        transform: rotateX(80deg);
        opacity: 0;
    }
    100% {
        transform: rotateX(0);
        opacity: 1;
    }
}

@keyframes flip-in-hor-bottom23 {
    0% {
        /* transform: rotateX(20deg); */
        /* transform:  scaleY(2.5) scaleX(0.2); */
        /* transform: rotateX(20deg) rotateY(40deg); */
        transform:  scaleY(.8) scaleX(.8);
        /* opacity: 0.6; */
    }
    100% {
        /* transform: rotateX(0deg) rotateY(0deg); */
        transform:  scaleY(1) scaleX(1);
        /* opacity: 1; */
    }
}
lubomirkubas_app-vv {
    background: inherit;
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background: var(--main-background);
}
@media only screen and (orientation:landscape) {
*[propertyname="hiddable"] {
 display: none;
}

}
lubomirkubas_app-vv > selectableviews-vv {
    /* margin: 1rem; */
    padding: 0;
    height: 100%;
}
selectableviews-vv > collection-vv > text-vv[checked='false'],
selectableviews-vv > collection-vv > text-vv[checked='true'] {
    font-size: 0.7em;
}
selectableviews-vv > collection-vv > * {
    padding: 0.2em 1.0em;
    margin:.1em;
}
lubomirkubas_app-vv > selectableviews-vv > collection-vv {
    /* min-height: 2.6em; */
    max-height: 2em;
    /* height: 2em; */
}
@media only screen and (min-width: 50em) and (max-width: 130em) {
    selectableviews-vv > collection-vv > text-vv[checked='false'],
    selectableviews-vv > collection-vv > text-vv[checked='true'] {
        font-size: 0.9em;
    }
    selectableviews-vv > collection-vv > * {
        padding: 0.4em 2.2em;
    }
lubomirkubas_app-vv > selectableviews-vv > collection-vv {
    /* min-height: 3.6em; */
    max-height: 3.0em;
    /* height: 3.6em; */
}
}
@media only screen and (min-width: 130em) {
    selectableviews-vv > collection-vv > text-vv[checked='false'],
    selectableviews-vv > collection-vv > text-vv[checked='true'] {
        font-size: 1.1em;
    }
    selectableviews-vv > collection-vv > * {
        padding: 0.6em 4.2em;
    }
lubomirkubas_app-vv > selectableviews-vv > collection-vv {
    min-height: 3.6em;
    max-height: 3.6em;
    /* height: 4.6em; */
}
}
lubomirkubas_app-vv > edit-vv {
    background: white;
    min-width: 10em;
}
lubomirkubas_app-vv > button-vv {
    min-width: 6em;
}
lubomirkubas_app-vv > selectableviews-vv > collection-vv > text-vv {
    font-size: 4.8em;
}
lubomirkubas_app-vv > selectableviews-vv > views-vv {
    padding: 0;
    height: 100%;
}
lubomirkubas_app-vv > selectableviews-vv > views-vv > * {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: stretch;
    align-content: stretch;
}
lubomirkubas_app-vv > selectableviews-vv > views-vv > lubomirkubas_portfolie-vv {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-y: hidden;
}
collection-vv > button-vv {
    background: #20242e;
    color: #d3eff9;
    border: solid yellow 1px;
}
//todo util