/* ELEMENTS
========================================================================*/
html, body {
  font-family: 'Roboto', sans-serif;
  color: #93A0AE;
  color: #6B7786;
  scroll-behavior: smooth;
  min-height: 100%;
  min-width: 100%;
  height: 100%;
  width: 100%; 
}

body {
  min-height: 100%;
  min-width: 100%;
  height: 100%;
  width: 100%;
}

.main-wrapper {
  display: flex;
  flex-direction: column;
  place-content: stretch flex-start;
  width: 100%;
  height: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  color: #2D4E67; }

h1 {
  font-size: 36px; }

p {
  line-height: 160%; }

a {
  color: #0067B4; }

.btn-primary.focus, .btn-primary:focus {
  box-shadow: none; }

.form-control:focus {
  box-shadow: none; }

/*btn*/
.btn-primary {
  border: solid 1px #0067B4;
  background: #0067B4; }

.btn-outline-primary {
  border: solid 1px #0067B4;
  color: #0067B4; }

.btn-outline-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc; }

.no-gutters-container {
  padding-right: 0;
  padding-left: 0; }

/* HEADER
========================================================================*/
.header-wrapper {
    display: flex;
    flex: 0 0 100px;
    place-content: stretch center;
    flex-direction: column; 
}

.header-wrapper .navbar-brand img {
    max-width: 300px; }

.user-profile {
  margin-right: 15px; }
  .user-profile .icon-user-a {
    position: relative;
    top: -2px;
    margin-right: 6px; }
  .user-profile .avatar-a img {
    width: 39px;
    height: 39px;
    display: block;
    margin-right: 10px;
    position: relative;
    top: 2px; }
  .user-profile .info-a {
    padding: 10px 20px 0 20px; }
  .user-profile .info-user-a .name-a {
    font-weight: 600;
    color: #2D4E67; }
  .user-profile .info-user-a .email-a {
    color: #93A0AE;
    font-size: 14px; }
  .user-profile .account-btn-a {
    padding: 20px 20px 10px 20px;
    display: block; }
  .user-profile .sign-out-btn-a {
    padding: 10px 20px;
    display: block;
    color: #93A0AE; }


/* LOGIN
========================================================================*/
#loginForm, #passwordRecoveryForm, #passwordChangeForm {
  width: 350px;
  max-width: 350px;
}

#loginForm .btn-link {
  display: block;
  font-style: italic;
  font-weight: 300;

}

/* FORM SECTION
========================================================================*/
/*FORM*/
.form-section-wrapper {
  max-width: 1320px;
  min-height: 460px; }

.search-form-wrapper {
  background: rgba(255, 255, 255, 0.95);
  padding: 5%;
  /*margin-top: 15%;*/
  border-radius: 6px;
  position: relative; }
  .search-form-wrapper h1 {
    margin-bottom: 20px; }
  .search-form-wrapper .info {
    font-size: 18px;
   margin-top: 40px;
   margin-bottom: 15px;
   color: #515d6b; }
  .search-form-wrapper .search-form {
    position: relative; }
    .search-form-wrapper .search-form .search-input-form {
     border-radius: 4px;
     border: none;
     line-height: 60px;
     height: 60px;
     font-size: 24px;
     border-bottom: 0px solid #C7D700;
     padding: 0;
     color: #fff;
     background: #0067B4 !important;
     text-indent: 1em;
  }
  }
    .search-form-wrapper .search-form .search-input-form:focus {
      border-bottom: 0px solid #0067B4; }
    .search-form-wrapper .search-form .search-btn {
      position: absolute;
     top: 16px;
     right: 15px;
     background: none;
     border: none;
     padding: 0; }
    .search-form-wrapper .search-form .search-btn:focus, .search-form-wrapper .search-form .search-btn:active {
      background: transparent;
      box-shadow: none;
      outline: none; }
    input#municipalitySearch::placeholder {
       color: #fff;
    }
    input#municipalitySearch:placeholder-shown  {
      max-width: 95%;
      text-overflow: ellipsis;
    }
.municipality-section .title h4 {
   margin-bottom: 30px;
}
.municipality-section .title h3 {
   margin-bottom: 30px;
}
/*autocomplete*/
ul.autocomplete {
  position: absolute;
  width: 100%;
  background: #fff;
  z-index: 2;
  top: 60px;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: 0 3px 12px rgba(152, 165, 183, 0.4); }
  ul.autocomplete li.item {
    border-bottom: 1px solid #EBEBEB; }
    ul.autocomplete li.item a.municipality {
      display: block;
      height: 70px;
      padding: 15px;
      text-decoration: none;
      color: #93A0AE;
      background: url("../images/arrow_item_left.svg") no-repeat center right; }
      ul.autocomplete li.item a.municipality .logo {
        width: 50px; }
        ul.autocomplete li.item a.municipality .logo img {
          height: 100%;
          width: auto;
          margin: 3px 10px 0 0; }
      ul.autocomplete li.item a.municipality .name {
        font-size: 16px;
        color: #0067B4; }
        ul.autocomplete li.item a.municipality .name img.mark-existing {
          width: 14px;
          height: 14px;
          margin: 0 0 0 5px;
          position: relative;
          top: -2px; }
      ul.autocomplete li.item a.municipality .region {
        font-size: 14px; }
    ul.autocomplete li.item a.municipality:hover {
      text-decoration: none;
      color: #93A0AE;
      background: #F7F8FA url("../images/arrow_item_left.svg") no-repeat center right; }
  ul.autocomplete li.item:last-child {
    border-bottom: none; }
.svg_map {
  position: relative;
  top: -53px;
}
/*existing-portal*/
.enter-to-portal {
  /*noportal*/ }
  .enter-to-portal .existing-portal {
    color: #0067B4;
    position:relative;
    left: -100px;
    top: -80px;
    min-height: 50%;
    min-width: 105%;}
  .enter-to-portal .existing-portal .portal-details {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
    .enter-to-portal .existing-portal img {
      position: relative;
      top: -2px;
      margin-right: 10px;
      width: 90px; }
  }
  .enter-to-portal .type-enter {
    margin-bottom: 20px; }
    .enter-to-portal .type-enter .text {
      font-size: 14px; }
    .enter-to-portal .type-enter .btn {
      margin-right: 12px;
      line-height: 34px;
      margin-top: 10px; }
      
    .enter-to-portal .type-enter .btn:last-child {
      margin-right: 0px; 
    }

  .enter-to-portal .no-portal {
    color: #6B7786;
    color: #0067B4;
    min-height: 50%;
    min-width: 105%;
    display: flex;
    position:relative;
    left: -100px;
    top: -80px;
    flex-direction: column;
    justify-content: flex-end;
  }

  .enter-to-portal .no-portal .portal-details {
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
  }

    .enter-to-portal .no-portal img {
      position: relative;
      top: -2px;
      margin-right: 10px;
      width: 90px; }
  .enter-to-portal .text {
    margin: 30px 0 25px 0; }

.no-portal-yet {
  margin-bottom: 20px;
  margin-bottom: 20px; }
  .no-portal-yet .no-portal {
    color: #6B7786; }
    .no-portal-yet .no-portal img {
      position: relative;
      top: -2px;
      margin-right: 10px; }
  .no-portal-yet .text {
    margin: 30px 0 25px 0; }

.slim-success-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
/* ABOUT
========================================================================*/
.section-about img {
  width: 100%; }
.section-about h2 {
  margin-bottom: 50px;
  position: relative; }
.section-about h2:after {
  position: absolute;
  width: 110px;
  height: 2px;
  background: #C7D700;
  content: '';
  left: 0;
  bottom: -24px; }
.section-about .text {
  margin-bottom: 30px;
  margin-top: 30px; }

/* WHAT IS PORTAL
========================================================================*/
/* MUNICIPALITY SECTION
========================================================================*/
.municipality-section {
  margin-top: 130px;
  margin-bottom: 130px; }
  .municipality-section .title h5 {
    margin-bottom: 30px; }
  .municipality-section .municipality-slider .owl-nav {
    position: absolute;
    top: -64px;
    right: 0; }
    .municipality-section .municipality-slider .owl-nav button.owl-next {
      border: 1px solid #EBEBEB;
      border-radius: 6px;
      width: 34px;
      height: 34px; }
      .municipality-section .municipality-slider .owl-nav button.owl-next span {
        color: #0067B4;
        font-size: 24px;
        line-height: 32px;
        display: block;
        position: relative;
        top: -2px; }
    .municipality-section .municipality-slider .owl-nav button.owl-prev {
      border: 1px solid #EBEBEB;
      border-radius: 6px;
      width: 34px;
      height: 34px;
      margin-right: 10px; }
      .municipality-section .municipality-slider .owl-nav button.owl-prev span {
        color: #0067B4;
        font-size: 24px;
        line-height: 32px;
        display: block;
        position: relative;
        top: -2px; }
    .municipality-section .municipality-slider .owl-nav button.owl-next:hover, .municipality-section .municipality-slider .owl-nav button.owl-prev:hover {
      border: 1px solid #0067B4;
      background: #f1f1f1; }
    .municipality-section .municipality-slider .owl-nav button.owl-next:focus, .municipality-section .municipality-slider .owl-nav button.owl-prev:focus {
      box-shadow: none;
      outline: none; }
  .municipality-section .municipality-slider .municipality-item {
    border: 1px solid #EBEBEB;
    border-radius: 6px;
    padding: 30px 5px; }
    .municipality-section .municipality-slider .municipality-item .logo {
      text-align: center; }
      .municipality-section .municipality-slider .municipality-item .logo img {
        display: inline-block;
        height: 54px;
        width: 44px; }
    .municipality-section .municipality-slider .municipality-item .name {
      text-align: center;
      font-size: 16px;
      color: #2D4E67;
      font-weight: 700;
      margin-top: 10px; }
    .municipality-section .municipality-slider .municipality-item .city {
      text-align: center;
     font-size: 14px;
     color: #6B7786;
     font-weight: 400; }

/* SUPPORT SALE SECTION
========================================================================*/
.support-sale-section {
  background-size: cover; }
  .support-sale-section .support {
    background: #CBD500 url("../images/bg1.svg") top left no-repeat;
    height: 400px; }
    .support-sale-section .support .info {
      width: 90%;
      padding-left: 10%;
      padding-right: 10%; }
      .support-sale-section .support .info .icon {
        margin-bottom: 20px; }
      .support-sale-section .support .info h4 {
        color: #2D4E67;
        margin-bottom: 30px; }
      .support-sale-section .support .info p {
        color: rgba(45, 78, 103, 0.8); }
      .support-sale-section .support .info a {
        color: #2d4e67; }
  .support-sale-section .sale {
    background: #015FA6 url("../images/bg2.svg") top right no-repeat;
    height: 400px; }
    .support-sale-section .sale .info {
      width: 90%;
      padding-left: 10%;
      padding-right: 10%; }
      .support-sale-section .sale .info .icon {
        margin-bottom: 20px; }
      .support-sale-section .sale .info h4 {
        color: #fff;
        margin-bottom: 30px; }
      .support-sale-section .sale .info p {
        color: rgba(255, 255, 255, 0.8); }
      .support-sale-section .sale .info a {
        color: #fff; }

/*RELATIVE*/
@media screen and (max-width: 480px) {
  body {
    background-size: 300px auto; }

  .search-form-wrapper .search-form {
    position: relative; }
    .search-form-wrapper .search-form .search-input-form {
      font-size: 14px; } 

  .dropdown-menu-right {
    left: 0;
    right: 0;
  }
  .search-form .search-btn img {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  body {
    background-size: 300px auto; }
  .svg_map {
    top:  0px;
  } 
  }
@media screen and (min-width: 1200px) {
  body {
    background-size: 650px auto; } 
  }
/*login-modal*/
.main-modal .modal-header img {
  max-height: 32px; }
.main-modal .already-reg-form {
 /* padding: 20px 40px 40px 40px;
  border-top: 1px solid #DEE4EA;*/ }
.main-modal input {
  font-size: 14px; }
.main-modal label {
  font-size: 14px;
  color: #2D4E67;
  font-weight: 600; }
.main-modal .btn {
  font-size: 16px; }
.main-modal .modal-dialog {
  max-width: 420px; }
.main-modal .modal-header {
  border-bottom: none; }
.main-modal .modal-body {
  padding: 0; }
  .main-modal .modal-body .nav.nav-pills {
    border-bottom: 1px solid #DEE4EA; }
  .main-modal .modal-body .btn-main {
    margin-top: 25px; }
.main-modal .tab-content {
  padding: 20px 40px 40px 40px; }
.main-modal .nav-pills .nav-link {
  text-align: center; }
.main-modal .nav-pills .nav-link.active, .main-modal .nav-pills .show > .nav-link {
  border-radius: 0;
  background: #fff;
  color: #0067B4;
  border-bottom: 4px solid #0067B4; }
.main-modal .footer-form {
  margin-top: 25px; }
  .main-modal .footer-form label {
    color: #93A0AE;
    font-weight: 400; }
  .main-modal .footer-form .forgot-pass a {
    font-size: 14px;
    color: #93A0AE; }

/*Custom corrections*/
/*autocomplete*/
.search-form .tt-menu {
  display: block;
  width: 100%;
  background: #fff;
  padding: 20px 20px 0 20px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: 0 3px 12px rgba(152, 165, 183, 0.4); }

.search-form .tt-menu .tt-suggestion {
  border-bottom: 1px solid #EBEBEB;
  background: url(../images/arrow_item_left.svg) no-repeat center right; }

.search-form .tt-menu .tt-suggestion:hover {
  text-decoration: none;
  color: #93A0AE;
  background: #F7F8FA url(../images/arrow_item_left.svg) no-repeat center right;
  cursor: pointer; }

.search-form .tt-menu .tt-suggestion .logo {
  width: 40px; }

.search-form .tt-menu .tt-suggestion .name {
  font-size: 16px;
  color: #0067B4; }

.search-form .tt-menu .tt-suggestion .region {
  font-size: 14px;
  color: #6B7786; }

/*no-portal*/
.enter-to-portal .no-portal {
  color: #0067B4; }

.enter-to-portal .no-portal img {
  position: relative;
  top: -2px;
  margin-right: 10px; }

.enter-to-portal .text {
  margin-top: 15px;
  margin-bottom: 15px; }

span.twitter-typeahead {
  display: block !important; }

.tt-menu {
   background: #fff;
   color: #6B7786;
   border: 1px solid #DEE4EA;
   font-size: 14px;
   box-shadow: 0px 10px 15px rgba(152, 165, 183, 0.5);
}
.tt-menu .tt-suggestion.tt-selectable .px-4{
   padding-left: 14px !important;
}
.tt-menu span.suggestion-title.text-primary{
color: #015FA6 !important;
display: block;
}
.tt-menu .suggestion-sub{
display: block;
}
.main-modal .tab-content #loginForm {
   padding: 0;
   border: 0;
}
.main-modal #loginForm , .main-modal #passwordRecoveryForm , .main-modal #passwordChangeForm, #getAccess .container {
   padding: 30px;
   border: 1px solid #DEE4EA;
}
.bg-primary {
  background-color:#015FA6 !important;  
}

.footer-element-color, .footer-element-color * 
{
  color: white;
}
.footer-element-size, .footer-element-size *
{
  font-size: 14px;
}
.footer-element-font
{
  font-family: Arial, Helvetica, sans-serif;
}

.panel-title>a, .panel-title>a:active{
  display:block;
  padding:15px;
  color:#555;
  font-size:16px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:1px;
  word-spacing:3px;
  text-decoration:none;
}

.cc-banner .cc-message {
  flex: 0 0 auto !important;
}
.cc-message{
  text-align: center;
}
.cc-color-override-688238583.cc-window{
  opacity: 0.75;
}
.cc-btn.cc-deny {
  display: none;
}
.cc-revoke.cc-bottom {
  background-color: #007bff !important;  
}
.cc-color-override-688238583 .cc-allow {
  background-color: #007bff !important;
  color: #fff !important;
}

.far,.fas{
  font-family: FontAwesome;
  font-style:normal;
}
.fa-calendar-alt:before {
  content: "\f073";
}

.fa{
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-bottom: 0px !important;
  border: none !important;


}

.purpose {
  cursor: pointer;
}

.kv-grid-bs4 a.asc:after,
.kv-grid-bs4 a.desc:after {
  /*noinspection CssNoGenericFontName*/
  font-family: "FontAwesome" !important;
  font-weight: 900;
}

.tutorial-container {
/*  margin-top: 100px; */
}

.playlist_col, .player_col{
  padding: 8px !important;
  font-size: 14px;
  background-color: #3a2a45;
  
}

.playlist_col .list-group{
    max-height: 435px;
    
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #3a2a45;
    -webkit-overflow-scrolling: touch;
}
.playlist_col.mobile {
    padding: 0 !important;
}

.playlist_col.mobile .list-group{
    max-height: 230px;
    padding: 0 !important;
}
.playlist_col .list-group .row .pl_title{
    padding:0px !important;
}
.playlist_col .list-group a{
  color: #e3dddd;
  background-color: #543b64;
  border-bottom: 1px solid #180a1f;
  border-top: 1px solid #554461;
  padding-left: 40px;
}

.playlist_col .list-group a.active{
  background-color: #3a2a45;
  border-color:  #180a1f;
}
.player_col .jp-video {
  border: 0px;
} 
.playlist_col .list-group a.disabled{
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  padding-left: 10px;
}
.jp-video-custom {
  width: 746px;
}
.jp-video-custom .jp-video-play {
  margin-top: -420px;
  height: 420px; }

.jp-video-360p {
    width: 650px !important;
}

#ads_block {
  text-align: center;
}


#full_screen_ads {
  display: none;
}

.jp-state-full-screen #full_screen_ads {
  display: block;
}
.num_col {
  max-width: 35px;
  padding-right: 5px;
}

.youtube-frame {
  aspect-ratio: 16 / 9;
}

.display-flex {
  display: flex;
}

.display-inline-block {
  display: inline-block;
}

.flex-1-1-100 {
  flex: 1 1 100%;
}

.place-content-center {
  place-content: center;
}

.align-items-center {
  align-items: center;
}

@media screen and (min-width: 276px){
  .tutorial-container {
    margin: 10px;
  }
  
  .player_col{ 
    padding-left: 8px !important;
    padding-right: 8px !important;
    max-width: 100% !important;
  }
  #ads_block {
    padding:0px !important;
  }
}
@media screen and (min-width: 1200px) {
  .tutorial-container {
    margin-top: 10px;
  }
  .tutorial_description {
  padding-left: 0px !important;
}

  .player_col{ 
    padding-left: 0px !important;
    max-width: 658px !important;
  } 
}


@media screen and (max-width: 1199.98px) {
 
    .enter-to-portal .no-portal, .enter-to-portal .existing-portal {
    left: 0;
    top:0;
    min-width: auto;
  }
}