* {box-sizing: border-box;}
/*html, body {width: 100%; height: 100%;}*/
html.document-no-scroll {position: fixed!important; left: 0 !important; width: 100% !important; top: 0;
    transition: -webkit-transform 0s 0s linear, transform 0s 0s linear !important;}
html.document-no-scroll body {width: 100%; height: 100%;}
html.document-no-scroll {overflow: hidden;}
.light-modal-outer *[data-closable] {cursor: pointer;}
.light-modal-outer  {display: none;  position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: var(--vh100);
    z-index: 100; overflow:auto;}

.light-modal-outer.light-modal-open {display: block;}
.light-modal-overlay {position: fixed; top: 0; left: 0; width: 100%; height: calc(100% + 200px); background: rgba(0,0,0,.5); z-index: 0;}
.light-modal {max-width: 100%; position: relative; z-index: 5; align-self: center;}

.light-modal-overlay { opacity: 0; visibility: hidden; -webkit-pointer-events:none;  pointer-events: none; }
.light-modal-open  .light-modal-overlay {opacity: 1; visibility: visible; -webkit-pointer-events:auto; pointer-events: auto; }

.light-modal {pointer-events: none; visibility: hidden; opacity: 0; -webkit-pointer-events:none; pointer-events: none;
    position: absolute; top: 0; left: 0; right: 0; margin: auto }
.light-modal-open  .light-modal {opacity: 1; visibility: visible; -webkit-pointer-events: auto; pointer-events: auto;  }

/* базовая анимация */

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    to {opacity: 1}
}

@keyframes fadeIn {
    0% {opacity: 0}
    to {opacity: 1}
}

.fadeIn {-webkit-animation-name: fadeIn;animation-name: fadeIn}

@-webkit-keyframes fadeOut {
    0% {opacity: 1}
    to {opacity: 0}
}

@keyframes fadeOut {
    0% {opacity: 1}
    to {opacity: 0}
}

.fadeOut {-webkit-animation-name: fadeOut;animation-name: fadeOut}


.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both}