@font-face {
  font-display: swap;
  font-family: 'PingLCG-Medium';
  src: url('fonts/PingLCG-Medium.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

html {
  position: relative;
    min-height: 100%;
}
body {font-family: PingLCG-Medium, sans-serif;color:var(--dark) !important;width: 100%; height: 100%;-webkit-margin-before: 0em;-webkit-margin-after: 0em;-webkit-margin-start: 0;-webkit-margin-end: 0;margin-bottom: 110px;}
.container-fluid {min-width:600px;}

:root {
    --dark: #282828;
    --primary: #2a61c0;
    --green: #80c358;
    --green-hover: #75b450;
    --red: #d21817; /* the new one matches the leaf's colour in the logo; #b5240b; */
    --yellow: #f1f942;
    --light-blue: #d9eefd;
    --blue: #008cf2;
    --dark-blue: #18479e;
    --grey: #c8c8c8;
    --light: #f1f1f1;
    --danger:#ff0000;
}
.text-dark {color: var(--dark) !important;}
.text-blue {color: var(--blue) !important;}
.text-danger {color: var(--danger) !important;}
.text-light-blue {color: var(--light-blue) !important;}
.text-dark-blue {color: var(--dark-blue) !important;}
.text-yellow {color: var(--yellow) !important;}
.bg-dark-blue {background-color: var(--dark-blue);}
.bg-light-blue {background-color: var(--light-blue);}
.bg-blue {background-color: var(--blue);}
.bg-yellow {background-color: var(--yellow);}
button.bg-yellow:hover {background-color: #eef81f} /* darken(var(--yellow), 7%); */
.bg-grey {background-color: var(--grey);}
.bg-light {background-color: var(--light);}
.cursor-pointer {cursor: pointer;}


.admin-sidebar-active {background-color: var(--yellow);}
.admin-sidebar-active a {color: var(--dark) !important;}
.fa-globe-americas {font-size:1.35rem;color:#393939;}

a {text-decoration: none;}
a:hover {text-decoration: none;}
a:hover {color: var(--red);}
[class*=" btn-"], .btn-group-sm>.btn, .btn-sm {border-radius:0;font-size:unset;}


/*.navbar-nav {word-spacing: -0.4rem;}*/
.navbar-brand img {height: 55px;}
.navbar a.nav-link:hover, .navbar a.nav-link:active {color: var(--danger) !important;}
.blue.navbar a.nav-link {color: var(--white);}
.blue.navbar a.nav-link:hover, .blue.navbar a.nav-link.active {color: var(--yellow) !important;}
/*.text-danger, .text-primary {color: var(--primary) !important;}*/

.btn-primary, .btn-primary:disabled, .btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):hover {
    background-color: var(--yellow);
    border-color: var(--yellow);
    color: var(--dark);
}
.btn-blue {background-color: var(--blue);}
.btn-yellow {background-color: var(--yellow);}
.slider-text{height: calc(100% - 30%);bottom: 0;}
.slider-button {bottom: 5%;}
/*.btn-top {width:36%;height:115px;padding-left:6%;}*/
.btn-top {width: 40%;max-width: 30rem;min-width: 23rem;font-size: 1.5rem;line-height: 1.2;height: 5.5rem;padding-left: 2%;--bs-gutter-x: 0;  -webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: 0;}
.btn:focus, button:focus{outline: none;}

.more_projects {width: 40%;max-width: 30rem;min-width: 18rem;font-size: 1.5rem;height: 88px;padding-left: 2%;}
.btn-danger {background-color: #ff0000;border-color: #ff0000;}

.dropdown-item.active, .dropdown-item:active {background-color: var(--blue);}

.nav-tabs .nav-link:last-child {margin-right:0 !important;}
.nav-tabs .nav-link {/*width:16.5rem;*/border: 0;border-radius: 0;background-color:var(--blue);}
.flag {position: absolute;top:105px;}
.flag div {position: absolute;color: #fff;text-transform: uppercase;font-size: 20px;line-height: 1.1;text-align: center;top: 60px;}
/*.ubuntu-text {font-family: Ubuntu Mono, sans-serif !important;}*/
.ubuntu-text {font-family: 'Ubuntu Mono';}


.nav-tabs .nav-link  {cursor: pointer;}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {background-color: var(--yellow);color:var(--dark) !important;border: 0;}
.nav-tabs .nav-item.show .nav-link:before, .nav-tabs .nav-link.active:before {position:absolute;z-index: 10;content:' '; width: 0;height: 0;border-left: 26px solid transparent;border-right: 26px solid transparent;border-top: 26px solid var(--yellow);bottom: -26px;left: 0;}
.nav-tabs.bfn .nav-link:before {border-left: 12px solid transparent;border-right: 12px solid transparent;border-top: 12px solid var(--yellow);bottom: -11px;}

.navbar-light .navbar-nav .dropdown-item.active {color: white;}
    
.ind-video {border: 0.7rem solid var(--yellow);}
.quote {padding-left: 50px;position: relative;}
.quote:before {content: url('../images/quote.png');position: absolute;left: 0;top: 3px;}
.quote p:last-child {font-style: italic;}
.quote p:last-child:before {content: "– ";}

.w220 {width:14rem;}
.card-body {width: 192px; padding: 0;}
.card-body img {height: 116px;object-fit: contain;margin-top: 0.7rem;}
.card-info {height:6rem;}
.card-qstn {word-wrap: break-word!important;word-break: break-word!important;width:350px;}
.card-name, .card-text {text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-wrap: break-word!important;word-break: break-word!important;width: calc(100% - 1.2rem);}
.card-title a, .card-title a:hover, .card-text a, .card-text a:hover {color:var(--dark);}
.card-body input[type="checkbox"]:checked, .card-body input[type="checkbox"]:not(:checked) {position: absolute;left: -9999px;}
.card-body input[type="checkbox"]:checked + label, .card-body input[type="checkbox"]:not(:checked) + label {display: inline-block;position: relative;/*line-height: 20px;*/cursor: pointer;}
.card-body input[type="checkbox"]:checked + label:before, .card-body input[type="checkbox"]:not(:checked) + label:before {content: "";position: absolute;right: 0;top: 3px;width: 0.9rem;height: 0.9rem;border: 2px solid #484848;background-color: #ffffff;}
.card-body input[type="checkbox"]:checked + label:before, .card-body input[type="checkbox"]:not(:checked) + label:before {border-radius: 2px;}
.card-body input[type="checkbox"]:checked + label:after, .card-body input[type="checkbox"]:not(:checked) + label:after {content: "";position: absolute;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
.card-body input[type="checkbox"]:checked + label:after, .card-body input[type="checkbox"]:not(:checked) + label:after {right: 2px;top: 7px;width: 10px;height: 5px;border-radius: 1px;border-left: 3px solid var(--danger);border-bottom: 3px solid var(--danger);-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}
.card-body input[type="checkbox"]:not(:checked) + label:after {opacity: 0;}
.card-body input[type="checkbox"]:checked + label:after {opacity: 1;}


.private input[type="checkbox"]:checked, .private input[type="checkbox"]:not(:checked) {position: absolute;left: -9999px;}
.private input[type="checkbox"]:checked + label, .private input[type="checkbox"]:not(:checked) + label {display: inline-block;position: relative;/*line-height: 20px;*/cursor: pointer;}
.private input[type="checkbox"]:checked + label:before, .private input[type="checkbox"]:not(:checked) + label:before {content: "";position: absolute;left: 0;top: 3px;width: 1.3rem;height: 1.3rem;border: 2px solid #484848;background-color: #ffffff;}
.private input[type="checkbox"]:checked + label:before, .private input[type="checkbox"]:not(:checked) + label:before {border-radius: 2px;}
.private input[type="checkbox"]:checked + label:after, .private input[type="checkbox"]:not(:checked) + label:after {content: "";position: absolute;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
.private input[type="checkbox"]:checked + label:after, .private input[type="checkbox"]:not(:checked) + label:after {left: 0;top: 0.2rem;width: 1.5rem;height: 0.9rem;border-radius: 1px;border-left: 0.3rem solid var(--danger);border-bottom: 0.3rem solid var(--danger);-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}
.private input[type="checkbox"]:not(:checked) + label:after {opacity: 0;}
.private input[type="checkbox"]:checked + label:after {opacity: 1;}
.private span {padding-left:2rem;}


#edit {background: url(../images/sprite-small.png) 275px 0;width: 2rem;height: 1.5rem;cursor: pointer;margin-bottom: 0.4rem;}
#basket {background: url(../images/sprite-small.png) -36px 0;width: 2rem;height: 1.5rem;cursor: pointer;margin-bottom: 0.4rem;}
#teacher {background: url(../images/sprite-small.png) 275px -60px;width: 2rem;height: 1.5rem;cursor: pointer;margin-bottom: 0.4rem;}
#kind {cursor: pointer;}
#glob {background: url(../images/sprite-small.png) 83px 0;width: 2rem;height: 1.5rem;cursor: pointer;}
#like {background: url(../images/sprite-small.png) 275px -28px;width: 2rem;height: 1.9rem;cursor: pointer;}
.prev-page {background: url(../images/sprite-small.png) 174px -2px;width: 2.1rem;height:2.1rem;cursor: pointer;}
.next-page {background: url(../images/sprite-small.png) 174px -38px;width: 2.1rem;height: 2.1rem;cursor: pointer;}
.stop-all {background: url(../images/sprite-small.png) 174px -74px;width: 2.1rem;height: 2.1rem;cursor: pointer;}
.full-screen {background: url(../images/sprite-small.png) 174px -110px;width: 2.1rem;height: 2.1rem;cursor: pointer;}
#lock {background: url(../images/sprite-small.png)  137px -60px;width: 2.0rem;height: 1.8rem;cursor: pointer;}
.private-lock:before {position: absolute;content: "";background: url(../images/sprite-small.png) 136px -59px;width: 2rem;height: 2rem;left: 0;bottom: -0.4rem;}
.read:after {content: "";background: url(../images/read.png) no-repeat bottom;background-size: contain;width: 20%;height:4rem;right: 5%;bottom: 0;position: absolute;}
.read span:after, .watch span:after {content: "\2192";font-size: 1.5rem;margin-left: .7rem;}
.watch:after {content: "";background: url(../images/youtube.png) no-repeat bottom;background-size: contain;width: 18%;height:4rem;right: 5%;bottom: 0;position: absolute;}
.cout-like-laked {height: 1.9rem;min-width: 1.9rem;}

#private {
  width: 2rem;
  height: 1.5rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  font-size: 1.2rem;
}
#private:before {

}


/*.choice input[type="checkbox"] {display: none;}
.choice label {font-size:0.000000001rem;margin-bottom: 0;color:#fff;}
.choice label:before {content: " ";color: #484848;display: inline-block;font-size: 1.5rem;font-weight: 600;line-height: 0.7rem;position: relative;text-align: center;text-indent: 0px;width: 1.4rem;height: 1.3rem;background: #FFF;border: 3px solid #484848;border-image: initial;vertical-align: middle;cursor: pointer;}
.choice input:checked + label:before {font-family: "Font Awesome 5 Free";content: "\f078"; color:var(--danger);}
.choice input:disabled + label:before {background: #eee;color:var(--white);}*/



.dropdown-toggle::after {border:0;font-family: "Font Awesome 5 Free";content: "\f078 ";vertical-align: -.1em;font-size: 1.2rem;}
#helpDropdown.dropdown-toggle::after {content:" ";}

.chev-lnk {max-width: 100%;}
.chev-lnk a:after {font-family: "Font Awesome 5 Free";content: "\f054";font-size: 80%;margin-left:8%;}
.breadcrumb-item+.breadcrumb-item::before {color: var(--yellow);}
.partners .row .col div:last-child {padding-right:0!important;}

.read, .watch {position:absolute;width:100%;bottom:0;}
footer {background-color: var(--light); position: absolute;bottom: 0;width: 100%; height: 110px;}
/*footer.bott {position: absolute;bottom: 0;width: 100%;white-space: nowrap;}*/


.file-select {
	width: 0;
	height: 0;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}


.file-select + label {
  cursor: pointer;
}

.project-select {width:100%;}
.project-select::-webkit-file-upload-button,
.project-select::file-selector-button {
  width: 10px;
  opacity: 0;
}

.border-b-w {border-bottom: solid 4px #fff;}

button[disabled="disabled"], .btn-danger.disabled, .btn-danger:disabled {
  color: #949494;
  opacity: 0.5;
  cursor: default;
}
.delete[disabled="disabled"] {background-color: #1d3561 !important;}

@media only screen and (max-width: 479px) {
.card-qstn {width:100%;}
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
.card-qstn {width:48%;margin-right:2%;}
}

@media (max-width: 767px) {
.slider-text {height: calc(100% - 55%);}
}

@media (max-width: 768px) {
.btn-top, .more_projects {font-size: 1.1rem;}
}

@media (max-width: 992px) {
.btn-top, .more_projects {font-size: 1.5rem;}

}

h3, .h3 {
  font-size:1.25rem;
}

h4, .h4 {
  font-size: 1.25rem;
}

h5, .h5 {
  font-size: 1rem;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.navbar-expand-xl .navbar-nav .nav-link {padding-right:.8rem;padding-left:.8rem;}
.hq {height: calc(9rem + (2.25rem + 2px)*2 + 1rem)}
}

@media (min-width: 1200px) {
.partners img {/*max-width:300px;*/max-height:160px;}
.f116 {height:116px;}
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
.navbar-expand-xl .navbar-nav .nav-link {padding-right: 1.25rem;padding-left: 1.25rem;}
.hq {height: calc(9rem + (2.25rem + 2px)*2 + 1.25rem)}
}

@media (min-width: 1920px) {
.navbar-brand {margin-right: 3rem;}
.navbar-expand-xl .navbar-nav .nav-link {padding-right: 1.5rem;padding-left: 1.5rem;}
.hq {height: calc(9rem + (2.25rem + 2px)*2 + 1.65rem)}
.private-lock:before {bottom:1.5rem;}
    
}

.user-edit-club-name {
  max-width: calc(100% - 110px);
  text-overflow: ellipsis;
  white-space: nowrap; 
  overflow: hidden;
}

.user-edit-club-name + div {
  min-width: 110px;
  margin-bottom: 0;
}

.panel-team {
  width: calc(100% -  220px);
  padding-top: 150px; 
  margin-left: 200px; 
}

.button-create-project {
  /* width: 310px; */
  font-family: 'Ubuntu Mono';
}

.validation-summary-errors {
  color: red;
}

.admin-sidebar-button {
  width: 220px;
  text-align: left;
  cursor: pointer;
}

.admin-sidebar-button span {
  color: #fff!important;
}
.admin-sidebar-active span {
  color: #000!important;
}
.header-team-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;  
}

#home-tab, #profile-tab {
  color: #fff;
}

#home-tab.active:before {
  content: none;
}
#profile-tab.active:before {
  content: none;
}

#shareproject label[for="private"] {
  margin-left: 15px;
  margin-top: 5px;
}

.preview-image-laked img {
  max-width: 100%;
}

.project-play-action {
  padding: 1rem 2vw;
  margin-bottom: 0.5rem;
  width: 100%;
}

#project-dropdown-move-to {
  position: absolute; 
  will-change: transform; 
  top: 0px; 
  left: 0px; 
  transform: translate3d(0px, 38px, 0px);
}
#project-dropdown-featuring {
  position: absolute; 
  will-change: transform; 
  top: 0px; 
  left: 0px; 
  transform: translate3d(0px, 38px, 0px);
}

#panel-projects-data {
  display: block;
  width: 100%;
  height: 60px;
  text-align: center;
}
#loading-projects-data {
  display: none;
  width: 100%;
  height: 40px;
  text-align: center;
}
#loading-projects-data.show {
  display: block;
}

#navigation-projects-data {
  width: 100%;
  height: 40px;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.label-lang {
  font-size: 50%;
  font-weight: 400;
}

.spotlight-image-block {
  right: 350px;
  top: 130px;
  width: 250px;
  height: 140px;
  transform: skew(5deg, 0) rotate(-5deg);
  cursor: pointer;
}

.spotlight-image-block img {
  width: 100%;
}

.spotlight-image-col {
  width: 330px;
  height: 180px;
  cursor: pointer;
}

.spotlight-image-col img {
  width: 100%;
}

button[type="submit"][disabled] {
  color: grey !important;
}

.project-tags {
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  overflow-wrap: break-word;
}

.team-lang.tab-pane {
    padding: 15px;
    margin-top: -0.25rem; /* to offset the bottom margin of tabs */

    border: 1px solid var(--yellow);
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

/* https://stackoverflow.com/a/40991531 */
.loading::after {
    display: inline-block;
    animation: dotty steps(1,end) 1s infinite;
    content: '';
}

@keyframes dotty {
    0%   { content: ''; }
    17%  { content: '.'; }
    34%  { content: '..'; }
    50%  { content: '...'; }
    67%  { content: '\a0..'; }
    84%  { content: '\a0\a0.'; }
    100% { content: ''; }
}