p { margin: 0 0 .5em 0; }

p + ul { margin-top:-.3em; }

ol, ul {
    margin-top: 0;
    margin-bottom: .5em;
}

li { margin-bottom: .4em; }

ul.list-small-indent {
    padding: 0;
    margin-left: 1.5em;
}

.smallimp { font-size:85% !important; }
.smaller { font-size:75% !important; }

.list-condensed > li { margin-bottom: 0; }

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

/*.alert {} .alert-success {}*/
.zapominalka {
    color: #3c763d;
    background-color: #dff0d8;
    padding: .1em .4em;
    margin-bottom: 1em;
    border: 1px solid #b2dba1;
    border-radius: 4px;
}

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.img-responsive { width: 100%; max-width: 512px; }
.img-thumbnail { max-height: 100%; }

.cur-ptr { cursor:pointer; }

.clearfloats { clear:both; }

#GroupConspect a, .mud-main-content a:not([type=button]) { color:#0d6efd; }
#GroupConspect a:hover, .mud-main-content a:not([type=button]):hover { color:#0d98fd; }

/* !!! temporary: bg-* in Content from BS4 - to match styles of current S3 site (in ExtraContent - actual BS styles to contrast with bg) */
#Conspect .bg-success { background-color: #dff0d8 !important; color: #424242;}
#Conspect .bg-danger { background-color: #f2dede !important; color: #424242;}
#Conspect .bg-info { background-color: #d9edf7 !important; color: #424242;}

.ext-con {
  padding-top: 2px;
  padding-bottom: 2px;
}

.ext-con, #ExtraCon {
  background-color: #f9f0bf; /* #fcf8e3 -.bg-warning from BS4 */
  border-left: 4px solid goldenrod;
}

#ExtraCon {
  margin-top: 2.5em !important;
  color: #212529;
  box-shadow: rgb(0 0 0 / 10%) 0px 0.3px 0.9px, rgb(0 0 0 / 13%) 0px 1.6px 3.6px;
}

#ExtraCon:before {
  content: 'Расширенный конспект';
  color: goldenrod;
  font-size: 80%;
  font-weight: bold;
  display: list-item;
  list-style-type: disclosure-open;
  margin: -2.1em 0 0.4em 8px;
}

/* Question items & comment */
.items { padding:4px 8px 2px 8px; border-bottom:1px dotted grey; }
.qrf { background-color:darkblue; border-top:1px dotted white; border-bottom:1px dotted red; }

#content .items { padding:0 0 2px 0; }
#content ul, #content ol, #content li, #content td, #content th {text-indent:0;}
#content ul, #content ol {margin:0; padding:0;}
#content ul {margin-left:2em;}
#content ol {margin-left:3em;}
#content li {padding:0; margin:.2em 0;}
#content p {padding-top:0px; padding-bottom:0px; margin-top:.2em; margin-bottom:.2em; line-height:1.25em;}
#content p:first-of-type {margin-top:.1em;}
#content img {border:none; height:2em;}
.size60p {height:1.2em;}
.size150p {height:3em;}
.size200p {height:4em;}
.fullsize {height:auto;}


/* Slideshow */
.slideshow_panel {
  display: flex;
  align-items: center;
  justify-content: center;
}

.frame_selector {
  cursor: pointer;
  display: inline-block;
  height: 14px;
  width: 14px;
  margin: 8px 4px;
  transition: all .3s ease;
  border: 2px solid #3299E4;
  border-radius: 50%;
}

.frame_selected {
  transition: all .3s ease;
  background-color: #3299E4;
}

.slideshow_footer {
  padding-top: 4px;
  color: #3299E4;
}

.slideshow_navigation {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  width: auto;
  filter: sepia(1) brightness(0.5) hue-rotate(110deg) saturate(20);
  /* stroke: #34E47F; fill: #34E47F; !!! SVG in background-image - fill & stroke useless */
  margin: 8px 8px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  min-width: 9px;
}

.nav_prev_button {
  background-image: var(--left-arrow);
}

.nav_next_button {
  background-image: var(--right-arrow);
}

.nav_play_button { 
  background-image: var(--play);
  padding: 8px;
}

.nav_pause_button {
  background-image: var(--pause);
  padding: 8px;
}

.image_nav_container {
  position: relative;
  width: fit-content;
  margin: auto;
}

.image_nav {
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0.2;
  transition: opacity 0.15s;
  width: 20%;
  background-size: 20% 20%;
  background-repeat: no-repeat;
}

.image_nav_panel {
  opacity: 0.5;
  transition: opacity 0.1s;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  max-width: .5em;
}

.image_nav:hover, .image_nav_panel:hover {
  opacity: 1;
  /*backdrop-filter: blur(5px);*/
}

.image_nav_left {
  left: 8px;
  background-image: var(--left-arrow);
  background-position: left center;
}

.image_nav_right {
  right: 8px;
  background-image: var(--right-arrow);
  background-position: right center;
}

:root {
  --play: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='14' fill='%233299E4'><polygon points='9,7 0,1 0,13' /></svg>");
  --pause: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='14' fill='%233299E4'><rect x='0' y='0' width='3' height='14' /><rect x='6' y='0' width='3' height='14' /></svg>");
  --left-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='14'><polyline points='9,0 1,7 9,14' fill='none' stroke='%233299E4' stroke-width='2' /></svg>");
  --right-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='14'> <polyline points='0,0 8,7 0,14' fill='none' stroke='%233299E4' stroke-width='2' /></svg>");
  /* --left-triangle: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='14' fill='%233299E4'><polygon points='0,7 9,1 9,13' /></svg>");*/
}

.videoclip {
    position: relative;
    text-align: center;
}

.videoclip .vidoverlay {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><circle cx='100' cy='100' r='90' fill='none' stroke='white' stroke-width='20'/><polygon points='70,60 70,140 140,100' fill='white'/></svg>");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 50% auto;
    width: 100%;
    min-width: 20px;
    height: 100%;
    position: absolute;
    opacity: 0.7;
}

.videoclip .vidoverlay:hover {
    opacity: 0.9;
}

.noposter {
    height: 100%;
    background-color: black;
}

.context_menu {
    text-align: center;
    display: block;
    position: absolute;
    z-index: 1000;
    border: 1px solid black;
    background-color: #808080;
}

.ctx_menu_opt:hover{
    background-color: blue;
    color: white;
}

.draw_param_wind {
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.draw_param {
    background-color: #909090;
    padding: 0.4em 0.5em;
    position: relative;
    width: 30%;
    min-width: 18em;
    max-width: 320px;
    border: 2px solid black;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    transition: transform .15s ease-in-out;
}

.turned {
    transform: rotate(180deg);
}

.addition {
    clip-path: inset(0 0 100% 0);
    animation: appear .3s forwards;
}

@keyframes appear {
    to {
        clip-path: inset(0 0 0 0);
    }
}

.comment ul, .comment ol, .comment li, .comment td, .comment th {text-indent:0;}
.comment ul, .comment ol {margin:0; padding:0;}
.comment ul {margin-left:2em;}
.comment ol {margin-left:3em;}
.comment li {padding:0; margin:.2em 0;}
.comment p {padding-top:0px; padding-bottom:0px; margin-top:.2em; margin-bottom:.2em; line-height:1.25em;}
.comment p:first-of-type {margin-top:.1em;}
.comment img {border:none; height:2em;}

.pdd-iframe {
    height: 35vh;
}

.media {
    border-width: 2px !important;
    padding: 3px !important;
}

.sel_media {
    border-width: 4px !important;
    border-color: #00FF00;
    padding: 1px !important;
}

.sel_video_playing {
    border-color: #00FF00 !important;
}

.pdd-qa-extra {
    background-image: linear-gradient(106.79deg, rgb(239, 248, 255) 7.25%, rgb(225, 241, 255) 92.37%);
    padding: 12px 8px;
    border-radius: 5px;
    margin-bottom: 8px;
    margin-top: 2.0em !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0.3px 0.9px, rgba(0, 0, 0, 0.13) 0px 1.6px 3.6px;
    border: 0;
    border-left: 4px solid #6489AA;
}

.pdd-qa-extra:before {
    content: 'Интерактивный вопрос';
    color: #6489AA;
    font-size: 80%;
    font-weight: bold;
    display: list-item;
    list-style-type: disclosure-open;
    margin: calc(-2.1em - 4px) 0 0.4em 8px; /* also subtract border width */
}

.pdd-qa-extra.selected {
    border: 4px solid #00FF00;
    padding: 8px 4px 8px 8px;
}

.pdd-qa-extra h2 {
    font-size: 1.25em;
    text-align: center;
    color: black !important;
}

.pdd-qa-extra h2 .glyphicon-question-sign {
  /*  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233498db"><g><rect fill="none" height="24" width="24"></rect></g><g><path d="M11.07,12.85c0.77-1.39,2.25-2.21,3.11-3.44c0.91-1.29,0.4-3.7-2.18-3.7c-1.69,0-2.52,1.28-2.87,2.34L6.54,6.96 C7.25,4.83,9.18,3,11.99,3c2.35,0,3.96,1.07,4.78,2.41c0.7,1.15,1.11,3.3,0.03,4.9c-1.2,1.77-2.35,2.31-2.97,3.45 c-0.25,0.46-0.35,0.76-0.35,2.24h-2.89C10.58,15.22,10.46,13.95,11.07,12.85z M14,20c0,1.1-0.9,2-2,2s-2-0.9-2-2c0-1.1,0.9-2,2-2 S14,18.9,14,20z"></path></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 3vw;*/
}

.pdd-qa-extra.img-answers .list-group {
    box-shadow: none;
    text-align: center;
    display: block;
}

.pdd-qa-extra.img-answers .list-group-item {
    border-radius: 4px;
    padding: 1.5%;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0.3px 0.9px, rgba(0, 0, 0, 0.13) 0px 1.6px 3.6px;
}

.pdd-qa-extra.img-answers button:not(.cast-btn button) {
    width: 47%;
    display: inline-block;
    margin: 0.25em;
    -webkit-transition: -webkit-transform .2s ease, opacity .4s;
    transition: transform .2s ease, opacity .4s;
}

.pdd-qa-extra.img-answers button:not(.list-group-item-success,.list-group-item-danger):hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}

.pdd-qa-extra.img-answers button img {
    width: 100%;
    height: auto;
}

.pdd-qa-extra.img-answers .list-group-item-danger:not(.mark) {
    animation: danferflash 0.3s alternate 13;
}

@keyframes danferflash {
    from { background-color: #F2DEDE; }
    to { background-color: lightcoral; }
}

.pdd-qa-extra.img-answers .list-group-item-success:not(.mark) {
    animation: successflash 0.3s alternate 13;
}

@keyframes successflash {
    from { background-color: #DFF0D8; }
    to { background-color: seagreen; }
}

.pdd-qa-extra.img-answers .list-group-item-danger img {
    filter: sepia(60%);
}

.pdd-qa-extra.img-answers .list-group-item-success img {
    filter: contrast(150%);
}

.pdd-qa-extra.img-answers .list-group-item-success.mark:before,
.pdd-qa-extra.img-answers .list-group-item-danger.mark:before {
    content: '';
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 35% auto;
    position: absolute;
    min-width: 20px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0.7;
    animation-iteration-count: 1;
    animation-duration: 0.4s;
    animation-name: transform;
    transform-origin: center;
}

.pdd-qa-extra.img-answers .list-group[data-rel="0"]:after {
    background-color: #F2DEDE;
}

.pdd-qa-extra.img-answers .list-group[data-rel="1"]:after {
    background-color: #DFF0D8;
}

.pdd-qa-extra.img-answers .list-group:after {
    content: attr(data-title);
    display: table;
    text-align: left;
    margin: 10px auto 0 auto;
    color: gray;
    opacity: 1;
    padding-left: 7px;
    padding-right: 7px;
    border-radius: 4px;
}

.pdd-qa-extra.img-answers .list-group-item-success.mark:before {
    background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' fill='none' stroke='%234CAF50' stroke-width='8'/><polyline points='30,50 45,65 70,35' stroke='%234CAF50' stroke-width='16' fill='none'/></svg>");
}

.pdd-qa-extra.img-answers .list-group-item-danger.mark:before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' fill='none' stroke='%23FF6B6B' stroke-width='8'/><line x1='30' y1='30' x2='70' y2='70' stroke='%23FF6B6B' stroke-width='16'/><line x1='30' y1='70' x2='70' y2='30' stroke='%23FF6B6B' stroke-width='16'/></svg>");
}

@keyframes transform {
    from { transform: scale(.1); }
    to { transform: scale(1); }
}

.blur_overlay {
    position: absolute;
    top: 0;  left: 0;  right: 0;  bottom: 0;
    pointer-events: auto;
    backdrop-filter: blur(5px);
}

.text-red {
    color: #EA2010 !important;
}

.text-green {
    color: #239B56 !important;
}

.text-burgundy {
    color: #7B1113 !important;
}

.text-gray {
    color: #7D7D7D !important;
}

.text-bright {
    color: #ffffffb3 !important;
}

.bg-blue {
    background-color: #5A99B3 !important;
}

.bg-sky-blue {
    background-color: #0095DB;
}

.bg-light-blue {
    background-color: #0DCAF0;
}

.bg-gray {
    background-color: #D3D3D3;
}

.bg-purple {
    background-color: #B389D1;
}

.bg-red {
    background-color: #FF6666;
}

.bg-green {
    background-color: #77DD77;
}

.bg-yellow {
    background-color: #FFD54F;
}