/* - ++resource++enisa.ncsstraining.css/styles.css - */
@media screen {
/* https://www.enisa.europa.eu/portal_css/++resource++enisa.ncsstraining.css/styles.css?original=1 */
/* */
.controls-container .container {
/* */
width: 100% !important;
padding-left: 0px;
}
.videogular-container {
width: 100%;
height: 320px;
margin: auto;
overflow: hidden;
}
@media (min-width: 1200px) {
.videogular-container {
width: 1170px;
height: 658.125px;
}
.videogular-container.audio {
width: 1170px;
height: 50px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.videogular-container {
width: 940px;
height: 528.75px;
}
.videogular-container.audio {
width: 940px;
height: 50px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.videogular-container {
width: 728px;
height: 409.5px;
}
.videogular-container.audio {
width: 728px;
height: 50px;
}
}
.ncsstraining-body {
padding: 2em;
}
.ncsstraining-body.no-heading {
border-top: 1px solid #ddd;
}
#edit-form {
border: 1px solid #ddd;
border-top: 0;
}
.ncsstraining-container .ncss-col-a, .ncsstraining-container .ncss-col-b, .ncss-alert-text,
#ncss-btn-vi-control-info, #ncss-btn-vi-control-slides, #ncss-btn-vi-control-video {
font: 100% "Lucida Grande", Arial, FreeSans !important;
}
#portal-column-content.cell.width-full.position-0.one-column {
/* */
width: 100%;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#main {
border: none !important;
padding: 10px 20px 10px 20px;
}
.ncss-no-border {
border: none !important;
}
/* */
.training-title-container {
padding: 0px 22px;
}
.edit-material-form-errors, .add-material-form-errors,
.edit-category-form-errors, .add-category-form-errors {
color: #EE282F;
padding-left: 25px;
}
.ncss-form-label {
width: 100%;
border-bottom: 1px solid #d9d9d9;
padding: 0px !important;
margin-top: -10px;
}
.border-triangle:before,
.border-triangle:after {
content: "";
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 10px 7.5px;
}
.border-triangle-category:before {
bottom: -2px;
left: 15px;
border-color: transparent transparent #d9d9d9 transparent;
}
.border-triangle-category:after {
bottom: -4px;
left: 1px;
border-color: transparent transparent #fff transparent;
}
.border-triangle-material:before {
bottom: -2px;
left: 25px;
border-color: transparent transparent #d9d9d9 transparent;
}
.border-triangle-material:after {
bottom: -4px;
left: 11px;
border-color: transparent transparent #fff transparent;
}
.ncss-form-label .ncss-form-label-text {
margin: 0;
padding: 15px 10px 10px 20px;
border-top: 1px solid #ddd;
background: #FFF4E6;
font-size: 18px;
font-style: italic;
color: #A6A6A6;
}
.ncss-form-label .ncss-form-label-text .category {
padding-left: 0px;
margin-left: -7px;
}
.ncss-form-label .ncss-form-label-text .material {
padding-left: 0px;
margin-left: -2px;
}
.input-is-invalid {
border-bottom: 3px solid #EE282F !important;
margin-bottom: 3px;
}
.ncss-categories-list .ncss-category-title,
.ncss-materials-list .ncss-material-title {
font-size: 18px !important;
color: black !important;
font-weight: normal;
}
.ncss-categories-list .ncss-category-title {
color: #898989 !important
}
.ncss-categories-list {
margin: 0px 0px 5px 0px !important;
}
.ncss-materials-list {
margin: 0px 0px 0px 0px !important;
}
div#add-material, div#add-category, div#edit-material, div#edit-category {
margin-left: 0px;
margin-right: 0px;
}
.ncss-no-category-text a,
#ncss-add-links-container a {
color: #0071BC !important;
font-size: 18px !important;
font-weight: normal;
margin-right: 10px;
}
.ncss-no-category-text {
font-size: 18px;
color: #A6A6A6 !important;
}
.angular-ui-tree-empty {
display: none;
}
.angular-ui-tree-nodes .angular-ui-tree-nodes {
padding-left: 34px !important;
}
.ncss-tree-material-handle,
.ncss-tree-category-handle {
padding: 10px;
}
.ncss-tree-category-handle:hover,
.ncss-tree-material-handle:hover {
background-color: #F2F2F2 !important;
}
.ncss-tree-category-handle {
border-top: 1px solid #ddd;
}
.ncss-buttons-material,
.ncss-buttons-category-right {
float: right;
}
.ncss-buttons-material a,
.ncss-buttons-material a:visited,
.ncss-buttons-category-right a,
.ncss-buttons-category-right a:visited {
margin-left: 10px;
border: none;
color: #A6A6A6 !important;
background: transparent;
}
.ncss-buttons-category-left {
float: left;
position: relative;
right: 10px;
padding-left: 10px;
font-size: 20px;
}
.ncss-buttons-category-left a {
color: #A6A6A6 !important;
display: block;
width: 24px;
text-align: center;
}
.ncss-footer-col {
background: #F2F2F2;
padding: 20px;
}
.ncss-reset-form-link {
color: #0071BC !important;
position: relative;
top: 10px;
}
.template-edit.portaltype-enisa-ncsstraining-training .documentFirstHeading,
.template-edit.portaltype-enisa-ncsstraining-training .documentByLine,
.template-edit.portaltype-enisa-ncsstraining-training #contentview-folderContents {
display: none !important;
}
.template-edit.portaltype-enisa-ncsstraining-training .ncsstraining-container {
padding: 0px;
}
.template-edit.portaltype-enisa-ncsstraining-training .documentFirstHeading{
margin-left: 20px;
}
.template-edit.portaltype-enisa-ncsstraining-training .documentDescription {
display: none;
}
#introduction-text_ifr {
height: 250px !important; /* */
}
#training-title_ifr {
height: 100px !important; /* */
}
input[type='text'].file {
background-color: #CCC;
}
.ncss-btn-success {
background-color: #39B54A !important;
padding: 10px 40px 10px 40px !important;
border: none !important;
color: #fff !important;
font-size: 18px !important;
border-radius: 5px !important;
font: 100% "Lucida Grande", Arial, FreeSans !important;
}
.ncss-btn-success:hover {
background-color: #2d8f3a !important;
}
.ncss-btn-primary {
background-color: #0071BC !important;
padding: 10px 40px 10px 40px !important;
border: none !important;
color: #fff !important;
font-size: 18px !important;
border-radius: 5px !important;
font: 100% "Lucida Grande", Arial, FreeSans !important;
}
.ncss-btn-primary:hover {
background-color: #00538a !important;
color: #fff !important;
}
/* */
.template-view.portaltype-enisa-ncsstraining-training .documentDescription,
.template-view.portaltype-enisa-ncsstraining-training .documentFirstHeading,
.template-view.portaltype-enisa-ncsstraining-training #viewlet-below-content-title,
.template-view.portaltype-enisa-ncsstraining-training #contentview-folderContents,
.template-view.portaltype-enisa-ncsstraining-training #plone-contentmenu-factories {
display: none;
}
.ncsstraining-videoplayer-container .video-controls {
background: #4D4D4D;
padding: 15px 10px 15px 10px;
}
.ncsstraining-videoplayer-container {
float: right;
width: 63%;
}
#ncss-categories-container {
display: inline-block;
width: 35%;
}
.ncss-btn-vi-control {
background: #4D4D4D;
color: #A6A6A6 !important;
padding: 10px 10px 10px 10px !important;
border-radius: 15px !important;
}
.ncss-btn-vi-control:hover {
background: #717171;
color: #fff !important;
}
.ncss-btn-vi-control:active, .ncss-btn-vi-control:focus {
outline:  none;
}
#ncss-btn-vi-control-info.is-active {
background: #0071BC;
color: #fff !important;
}
.ncss-vi-controls-separator {
border-right: 2px solid #717171;
height: 20px;
padding: 8px 0px 11px 0px;
margin: 0px 10px 0px 8px;
}
section.ng-video-container {
width: 550px;
height: 310px;
margin: 40px auto auto auto;
}
section.video {
text-align: left;
padding: 0px;
position: relative;
background-color: white;
width: 100%;
height: 100%;
box-shadow: none;
border: none;
}
section.video section.loading {
position: absolute;
top: 39px;
left: 5px;
width: 538px;
height: 260px;
color: white;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
font-size: 12px;
pointer-events: all;
z-index: 201;
padding: 13px 0 0 40px;
background-color: rgba(0, 0, 0, .25);
}
section.video video {
background-color: rgba(0, 0, 0, .25);
width: 100%;
height: 100%;
object-fit: fill;
}
section.video section.controls {
position: absolute;
top: 15px;
right: 25px;
width: 48px;
z-index: 5;
text-align: center;
color: white;
}
section.video section.controls span {
margin: 0;
padding: 0;
cursor: pointer;
line-height: 48px;
padding-left: 2px;
width: 48px;
height: 48px;
font-size: 20px;
transition: background-color .35s;
border-radius: 3px;
margin-bottom: 10px;
}
section.video section.controls span:hover {
background-color: rgba(255, 255, 255, .25);
}
section.video section.volume {
position: absolute;
top: 145px;
right: 25px;
width: 48px;
}
section.video section.volume div.scale {
background-color: rgba(0, 0, 0, .15);
width: 48px;
height: 5px;
position: relative;
}
section.video section.volume div.scale div.bar {
background-color: rgba(255, 255, 255, .75);
position: absolute;
top: 0;
left: 0;
height: 5px;
width: 50%;
transition: width .25s;
}
section.video section.volume span {
color: rgba(0, 0, 0, .25);
font-size: 15px;
pointer-events: all;
cursor: pointer;
margin-top: 10px;
}
section.video section.volume span.increase {
float: right;
}
section.video section.feedback {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
z-index: 4;
width: 100%;
height: 100%;
}
section.video section.feedback span.buffering {
color: white;
font-size: 12px;
position: absolute;
top: 0;
left: 0;
padding: 18px 0 0 45px;
}
section.video section.generic {
position: absolute;
bottom: 11px;
right: 10px;
z-index: 90;
width: 100%;
text-align: center;
text-transform: uppercase;
font-size: 10px;
color: rgba(255, 255, 255, .5);
}
section.video section.generic a {
text-transform: none;
color: rgba(255, 255, 255, .75);
pointer-events: all;
}
section.video section.generic a:hover {
text-decoration: none;
}
section.video section.timeline {
position: absolute;
width: 485px;
width: calc(100% - 60px);
left: 30px;
bottom: 32px;
}
section.video section.timeline input {
width: 100%;
pointer-events: all;
appearance: none;
-o-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background-color: transparent;
outline: none;
height: 12px;
border-bottom: 3px solid rgba(0, 0, 0, .25);
}
section.video section.timeline input::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: white;
margin-bottom: 20px;
border-radius: 2px;
outline: none;
height: 15px;
width: 45px;
}
section.video section.timeline input::-moz-range-thumb {
-webkit-appearance: none;
background-color: white;
margin-bottom: 20px;
border-radius: 2px;
outline: none;
height: 15px;
width: 45px;
}
section.video section.duration {
background-color: rgba(0, 0, 0, .15);
color: rgba(255, 255, 255, .5);
padding: 2px 5px;
border-radius: 3px 0 0 3px;
position: absolute;
font-size: 11px;
bottom: 62px;
right: 83px;
}
section.video section.title {
background-color: #dd4b39;
font-size: 11px;
position: absolute;
color: white;
opacity: .8;
padding: 2px 5px;
border-radius: 0 3px 3px 0;
bottom: 62px;
right: 33px;
}
section.video section.playlist {
height: 297px;
position: absolute;
width: 200px;
top: 5px;
left: 5px;
background-color: rgba(0, 0, 0, .35);
}
section.video section.playlist ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section.video section.playlist ul li {
height: 32px;
line-height: 32px;
cursor: pointer;
position: relative;
padding: 0 12px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
color: white;
font-size: 12px;
}
section.video section.playlist ul li span.meta {
margin-right: 8px;
padding: 1px 5px;
border-radius: 2px;
background-color: rgba(0, 0, 0, .25);
}
section.video section.playlist ul li.title {
margin-bottom: 10px;
border-bottom: 1px solid rgba(0, 0, 0, .25);
}
section.video section.playlist ul li:not(.title):hover {
background: rgba(0, 0, 0, .25);
}
section.video section.playlist ul li.title div.close-playlist {
position: absolute;
top: -1px;
font-size: 20px;
right: 0;
cursor: pointer;
width: 35px;
text-align: center;
color: white;
}
section.video span.open-playlist {
color: white;
position: absolute;
cursor: pointer;
top: 5px;
left: 5px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 18px;
}
section.video section.buffer {
position: absolute;
width: 485px;
width: calc(100% - 60px);
left: 30px;
bottom: 30px;
background-color: rgba(255, 255, 255, .5);
height: 1px;
}
section.video section.buffer canvas {
margin: 0;
position: absolute;
width: 100%;
top: 0;
}
section.video section.full-screen {
position: absolute;
top: 40px;
left: 6px;
cursor: pointer;
padding: 10px;
color: white;
}
/* */
.ncss-alert {
padding: 15px;
}
.ncss-alert-info {
background: #4078b3 !important;
position: relative;
}
.ncss-alert-text {
padding-top: 20px;
color: #fff;
}
.ncss-alert-info:after {
content: "\f05a";  /* */
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
position: absolute;
font-size: 200px;
color: rgba(255, 255, 255, 0.2);
float: right;
bottom: -85px;
right: 20px;
}
.ncss-alert-heading {
color: #fff !important;
font-size: 24px !important;
border: none !important;
}
.ncss-close-light {
color: #fff !important;
cursor: pointer;
}
.ncss-close-dark {
color: #4D4D4D !important;
cursor: pointer;
}
.ncss-col-a .ncss-border {
border-top: 2px solid #F2F2F2;
margin-bottom: -20px;
}
.ncss-col-b {
padding-right: 0px;
}
.ncss-simple-list {
list-style-image: none !important;
list-style-type: none !important;
}
.btn-star {
float: left;
margin-right: 2px;
font-size: 12px;
cursor: pointer;
}
.btn-star-default {
color: #717171;
}
.btn-star-warning {
color: #F8931E;
}
.rating-info {
clear: both;
}
.rating-info p {
padding-top: 5px;
}
.ncss-category {
font-size: 18px;
padding: 10px 0 10px 0;
border-top: 1px solid #ddd;
}
.ncss-category.is-expanded {
}
.ncss-category.is-expanded .ncss-material{
font-weight: normal;
}
.ncss-category.is-collapsed {
font-weight: normal;
}
.ncss-icon-category-is-expanded {
font-size: 22px;
margin-left: 0px;
color: #A6A6A6 !important;
}
.ncss-icon-category-is-collapsed {
font-size: 22px;
margin-left: 5px;
color: #A6A6A6 !important;
}
.ncss-category-name {
cursor: pointer;
color: #898989;
}
.ncss-material:before {
content: "\25B6";
font-size: 10pt;
vertical-align: top;
opacity: 0;
}
.ncss-material:hover:before {
opacity: 0.3;
}
.ncss-material {
padding: 10px 10px 10px 5px;
margin: 0;
font-size: 16px;
color: #000;
text-decoration: none;
cursor: pointer;
}
.ncss-material.is-selected:before {
opacity: 0.5;
}
.ncss-material.is-visited:after,
.ncss-category.is-visited .ncss-category-name:after {
margin-left: 2px;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
content: "\f00c";
color: #39B54A;
}
.ncss-category.is-visited .ncss-category-name:after {
margin-left: 5px;
}
.ncss-material-link:hover {
text-decoration: none !important;
}
.ncss-popout {
border: 1px solid #ddd;
border-top: 0;
}
.ncss-popout-body {
padding: 1em;
}
.field label {
min-width: 175px;
}
.field input,
.field textarea {
vertical-align: top;
}
.video-placeholder,
.video_poster-placeholder,
.slides-placeholder {
display: inline;
}

}