:root {
    /* COLORS */
    --Are-ya-yellow: #fa9f42;
    --Silver-Fox: #d4d4dc;
    --Deep-Matte-Grey: #048ba8;
    --Dark-Slate: #1d1e22;
    --main-header-shadow-color: rgba(0, 0, 0, 0.9);

    /* FONT */
    --main-header-font-family: Montserrat, sans-serif;

    /* MAIN HEADER */
    --main-header-menu-width: 550px;
    --main-header-menu-button-height: 40px;
    --main-header-menu-button-width: 120px;

    /* TRASITION */
    --main-header-transition: all 0.35s ease;
}

.body { background-color: #F6F7FF; }

.navbar-nav > li > .dropdown-menu { background-color: #048ba8; }

.dropdown-menu .dropdown-item {display: inline-block;  color: #d4d4dc;}

.dropdown .dropdown-menu a:hover
{
  color: #feda6a;
  background-color: #048ba8;
  border-color: #393f4d;
}

.green-shadow{
-webkit-box-shadow: 0px -2px 25px -7px rgba(19,240,104,1);
-moz-box-shadow: 0px -2px 25px -7px rgba(19,240,104,1);
box-shadow: 0px -2px 25px -7px rgba(19,240,104,1);
}

.grow { transition: all .4s ease-in-out; }
.grow:hover { transform: scale(1.4); }

.thick {
  font-weight: bold;
  color: #393f4d;
}

.logo {
  border: 2px solid #d4d4dc;
  border-radius: 10px;
  padding: 1px 5px 1px 5px;
  
}

.form-control:focus {
  border-color: #feda6a;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

.btn-info, .btn-info:active, .btn-info:visited {
    background-color: #048ba8  !important;
    border-color: #048ba8;
}
.btn-info:hover {
  background-color: #fa9f42   !important;
  border-color: #fa9f42 ;
  color: #1d1e22;
}

.btn-outline-info,  .btn-outline-info:visited {
    color: #393f4d;
    border-color: #393f4d;
    background-color: transparent;
}
.btn-outline-info:hover {
  background-color: #393f4d;
  border-color: #393f4d ;
  color: #feda6a;
}

.btn-outline-info:focus, .btn-outline-info.focus {
    box-shadow: 0 0 0 .2rem #feda6a;
}
.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active,
.show > .btn-outline-info.dropdown-toggle {
  color: #feda6a;
  background-color: #393f4d;
  border-color: #17a2b8;
}

.btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem #feda6a;
}

.table-warning-lack {
  color: red;

}
.table-warning-over {
  color: orange;

}

.table-manual {
  background-color: rgba(255, 215, 0, 0.04);
}


.a-right {
  text-align: right;
}

.techfont{
  font-family: 'Russo One', sans-serif;
  font-size: 1.5em;
  margin-bottom: 10px;
}

.postdate{
  text-align: center;
}

.posttitle{
  font-family: 'Russo One', sans-serif;
  text-align: center;
  background-color: AliceBlue;
}

a.noline {
    text-decoration: none !important;
    color: DimGray;
}

.long_title {
  font-size: 1.1em;
  padding-top: 0.5em;
}

.example  {
margin: 1em;

}

.test101{
  position:absolute;
  top:-11px;
  left:20px;
  font-size: 0.8em;
  background-color:white;
  z-index: 1;
 }

.label_inline{
   text-align: right;
    clear: both;
    float:left;
    margin-right:15px;
 }

.new-label {
  font-size: 0.8em;
  margin-left: 10px;
  vertical-align: middle;
  align: right;

  animation: blinker 5s linear infinite;

}

@keyframes blinker {
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.8;
  }
  0% {
    opacity: 0.8;
  }
}

.navbar {
    -webkit-box-shadow: 0 8px 6px -6px #999;
    -moz-box-shadow: 0 8px 6px -6px #999;
    box-shadow: 0 8px 6px -6px #999;

    /* the rest of your styling */
}

.kafelek {
background-image: linear-gradient(90deg, rgba(29,30,34,1) 0%, rgba(212,212,220,1) 40%, rgba(252,221,123,1) 89%);
}

.submenu {
    background-image: linear-gradient(90deg, rgba(29,30,34,1) 0%, rgba(212,212,220,1) 40%, rgba(252,221,123,1) 89%);
    height: 3.5em;
    color: white;
    vertical-align: middle;
    font-weight: bold;
    font-size: 1em;
}
.sub-heading {
  font-size: 0.7em;
  text-decoration: none;
  font-weight: normal;
  color: WhiteSmoke   ;
}


.card {
 -webkit-box-shadow: 0px 11px 19px -12px rgba(227,227,227,1);
 -moz-box-shadow: 0px 11px 19px -12px rgba(227,227,227,1);
 box-shadow: 0px 11px 19px -12px rgba(227,227,227,1);
 background-image: linear-gradient(White, WhiteSmoke);
 transition: all 200ms ease-in-out;
}

.card:hover {
  box-shadow: 0 5px 15px 2px rgba(0, 0, 0, 0.1);
}

.alert-dark {
background: url("/static/img/draft_bg.png") 50% 0 no-repeat ;
background-color:white;
color: #888;
}
body {
    background: #fff;
    color: #575757;
    color: #888;
    width: 100%;
    font-size: 15px;
    min-width: 320px;
    font-family: 'montserratlight', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
}
 .hr20 {
    background-color: #fa9f42;
    height: 1px;
    border: none;
    width: 20%;
    position: absolute;
    left: 0px;
    top: 0px;
 }

.card_draft {
 -webkit-box-shadow: 0px 11px 19px -12px rgba(227,227,227,1);
 -moz-box-shadow: 0px 11px 19px -12px rgba(227,227,227,1);
 box-shadow: 0px 11px 19px -12px rgba(227,227,227,1);
 /*background-image: linear-gradient(White, WhiteSmoke);*/
  transition: all 200ms ease-in-out;
  display: block;
  position: relative;
}


.card_draft::after {
  content: "";
  border-style: solid;
  border-width: 2px;
  background: url("/static/img/draft_bg.png") 50% 0 no-repeat ;
  background-size: cover;
  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

.card_draft:hover {
  box-shadow: 0 5px 15px 2px rgba(0, 0, 0, 0.1);
}

.card-title {
    color: #27A2FC;
}

.page-item.active .page-link {

  z-index: 1;
  color: black;

  background-color: AliceBlue;
  border-color: LightGray;
}


.postcontent{
  font-family: 'Montserrat';
  font-size: 1.1em;
  margin: 0.2em;
}

.centerstage{
  margin-left: auto;
  margin-right: auto;
}

.btn-comment{
  position: absolute;
  right: 0px;
}

.bigbrand{
  font-size: 1.5em;
}

.textareaclass{
  border: 2px solid red;
}

.viewed {
  font-size: 0.8em;
  color: grey;
}

.panel-body-footer {
  font-size: 0.8em;
  color: grey;
  margin: 15px;
}

.comment {
  max-width:400px;
  text-align: left;
}
.comment-head {
  background-color:AliceBlue;
}
.comment-text {
  font-size: 1.3em;
}

.ramka-select {
    border: 2px solid #756500;
}

.iko-post-info {
    color: DodgerBlue;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 3.5em;
    text-align: center;
    vertical-align: middle;
    text-align: -moz-center;
    text-align: -webkit-center;
    margin-top: 0.5em;
}

.iko-post-warn {
    color: Crimson;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 3.5em;
    text-align: center;
    vertical-align: middle;
    text-align: -moz-center;
    text-align: -webkit-center;
    margin-top: 0.5em;
}

.iko-post-question {
    color: Gold;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 3.5em;
    text-align: center;
    vertical-align: middle;
    text-align: -moz-center;
    text-align: -webkit-center;
    margin-top: 0.5em;
}

#login_ico {
    color: dark-grey;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.3em;
    margin-right: 5px
}

#smile {
    color: dark-grey;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 5em;
    margin-right: 5px
    max-width: 500px;
    text-align: center;
}

#logo_ico {
  text-shadow: 1px 1px 1px #ccc;
  font-size: 1.2em;
}
#msg_type {
  text-shadow: 5px 5px 1px #ccc;
  text-align: center;
  vertical-align: middle;
  text-align: -moz-center;
  text-align: -webkit-center;
}

.footer_links> a,
.footer_links> a:focus,
.footer_links> a:link,
.footer_links> a:visited,
.footer_links> a:active {
  color: DarkGray     !important;
}

.footer_links> a:hover {
  color: #feda6a  !important;
}

.active> a,
.active> a:focus,
.active> a:hover {
  color:  #feda6a !important;
  font-weight: bold;
}



.btn-xs, .btn-group-xs > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}


.mobileHide { display: inline; }

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 100px)
    and (max-device-width : 1024px){
     .mobileHide { display: none;}
  }


.mobileShow { display: none;}

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 100px)
    and (max-device-width : 1024px){
      .mobileShow {display: inline;}

      .btn-xs, .btn-group-xs > .btn {
        padding: 0.2rem 0.3rem;
        font-size: 0.8em;
        line-height: 1;
        border-radius: 0.2rem;
      }


    table{
        font-size: 0.8em;
    }
  }


.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: DarkOrange;
    border-radius: .25rem;
}


/*CHECKBOXES  http://www.csscheckbox.com/  */
input[type=checkbox].css-checkbox {
              position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
            }

            input[type=checkbox].css-checkbox + label.css-label {
              padding-left:23px;
              height:18px;
              display:inline-block;
              line-height:18px;
              background-repeat:no-repeat;
              background-position: 0 0;
              font-size:18px;
              vertical-align:middle;
              cursor:pointer;

            }

            input[type=checkbox].css-checkbox:checked + label.css-label {
              background-position: 0 -18px;
            }
            label.css-label {
        background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_e6364785bfe886ff49a404b90dfce30f.png);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }






/*COLOR CHANGER*/
/*Credit and Source: http://codepen.io/thapliyalshivam/pen/dvgXVO*/
.loader{
  filter:hue-rotate(0deg);
  color: linear-gradient(45deg,#0f8,#08f);
  animation:hue 5000ms infinite linear;
}

@keyframes spinify {
  0% {
    transform: translate(0px,0px);

  }
  33% {
    transform: translate(0px,24px);
    border-radius:100%;
    width:10px;
    height:10px;

  }
   66% {
    transform:translate(0px,-16px);
  }

   88% {
    transform:translate(0px,4px);

  }
  100% {
    transform:translate(0px,0px);
  }
}
@keyframes hue{
  0%{filter: hue-rotate(0deg);}
  100%{filter:hue-rotate(360deg);}

}

.hide {
  display: none;
}




.myDIV:hover + .hide {
  display: table-row;
  -webkit-animation: fadeIn 0.3s;
  animation: fadeIn 0.3s;

}

@-webkit-keyframes fadeIn {
    from { font-size: 0; }
      to { font-size: 100%; }
}
@keyframes fadeIn {
    from { font-size: 1%;
     opacity: 0;
     line-height: 0%;}
      to { font-size: 100%;
       opacity: 0.9;
       line-height: 100%;}
}

/* ===== Banner naglowkowy podstron (hero) ===== */
.page-hero {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  min-height: 260px;
  margin-bottom: 2rem;
}
.page-hero-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.page-hero-title {
  margin: 0;
  color: #d2691e;
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.15;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.85);
}
.page-hero-subtitle {
  margin: 0.6rem 0 0 0;
  color: #2b2b2b;
  font-size: 1.15rem;
  text-shadow: 0 1px 5px rgba(255, 255, 255, 0.9);
}
@media (max-width: 991.98px) {
  .page-hero { min-height: 200px; }
  .page-hero-title { font-size: 2.4rem; }
  .page-hero-subtitle { font-size: 1.05rem; }
}
@media (max-width: 575.98px) {
  .page-hero { min-height: 150px; margin-bottom: 1.25rem; }
  .page-hero-title { font-size: 1.6rem; }
  .page-hero-subtitle { font-size: 0.95rem; }
}