:root {
    --dark-navy: #020c1b;     
    --navy: #0a192f;		
    --light-navy: #112240;     
    --lightest-navy: #233554;
    --navy-shadow: rgba(2,12,27,1);
    --slate: #8892b0;
    --light-slate: #a8b2d1;   
    --lightest-slate: #ccd6f6; 
    --lightest-slate2: #eef2fd;
    --white: #ffffff; 
    --true-white:255,255,255;
    --green: 2,214,138;     
    --blue:33, 152, 204;
    --error: #ff40c5;
    --yellow:255, 204, 102;
    --black: 0,0,0;
    --red:237, 28, 36;
    --blackH :#000000;

    --fiolet:#2f3cff;

    --body-font-color: var(--light-slate);
    --bg-popup:var(--black);
    --bg-inform-popup:var(--dark-navy);
    --bg-body: #0a192f;
    --bg-menu:var(--black);
    --bg-filter:var(--black);
    --bg-grid-rows: var(--dark-navy);
    --bg-grid-rows-p: rgba(2,12,27,0.4);
    --bg-grid-row-border:var(--bg-body);
    --bg-grid-header-from : rgba(0,0,0,1);
    --bg-grid-header-to: rgba(0,0,0,1);
    --bg-input: var(--navy-shadow);
    --bg-title-info: var(--dark-navy);
    --input-color:var(--lightest-slate);
    --input-focus:var(--white);
    --input-color-span-select: rgb(var(--blue));
    --input-color-span-unselect:rgba(var(--true-white),0.4);
    --text-color-active:rgb(var(--green));
    --text-color-normal:rgb(var(--true-white));
    --text-color-seccond:var(--light-slate);
    --edit-popup-close-btn:var(--dark-navy);

}

[data-theme="light"] {
    --blue: 13,128,179;
    --yellow: 15, 45, 255;
    --green: 1,104,17;
    --body-font-color: #6c6c6c;
    --bg-popup:var(--true-white);
    --bg-inform-popup:var(--white);
    --bg-title-info: #eef0f1;
    --bg-body: var(--white);
    --bg-filter:var(--true-white);
    --bg-grid-rows: rgb(var(--true-white));
    --bg-grid-rows-p: rgba(0,0,0,0.03);
    --bg-grid-row-border:rgba(0,0,0,0.5);
    --bg-input:#eef0f1;
    --bg-grid-header-from : rgba(0,0,0,0.2);
    --bg-grid-header-to: rgba(255,255,255,1);
    --input-color:rgb(var(--black));
    --input-focus:var(--dark-navy);
    --input-color-span-select: rgb(var(--blue));
    --input-color-span-unselect:rgba(var(--black),0.5);
    --text-color-active:rgb(var(--green));
    --text-color-normal:rgb(var(--black));
    --text-color-seccond:#6c6c6c;
    --edit-popup-close-btn:#c3c4c5;
}


html[data-theme="dark"] {background-color:#000}
html[data-theme="light"]  {background-color:#000}

/* roboto-100 - latin-ext_latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local(''),
       url('../lib/fonts/roboto-v27-latin-ext_latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../lib/fonts/roboto-v27-latin-ext_latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-300 - latin-ext_latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../lib/fonts/roboto-v27-latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../lib/fonts/roboto-v27-latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-regular - latin-ext_latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../lib/fonts/roboto-v27-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../lib/fonts/roboto-v27-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-500 - latin-ext_latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('../lib/fonts/roboto-v27-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../lib/fonts/roboto-v27-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-700 - latin-ext_latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../lib/fonts/roboto-v27-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../lib/fonts/roboto-v27-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}









body, form {color: var(--body-font-color);margin:0;padding:0; -webkit-font-smoothing: antialiased;font-family: 'Roboto',Arial,Tahoma;
-webkit-text-size-adjust:100%;
-moz-text-size-adjust:100%;  
-webkit-touch-callout: none;
 touch-action: pan-y;
   position:relative;
}
body {min-width:320px; min-height: 100vh ;background-color:var(--bg-body);}
html {overflow-x:hidden;min-width:320px; margin:0; padding:0; border:0; width:calc(100% + 10px)}



/*BLOKADY OKIEN i CIENIOWANIA OKIEN nav STRONIE*/


html #Page {max-width: 1920px; min-width: 320px;margin: 0 auto; position: relative; height:100%;}
html.bluerd #Page {filter:blur(1px) ; -webkit-filter:blur(1px)}
html.bluerd {overflow:hidden;}
html.bluerd body {margin-right:8px}
html.bluerd #Menu .hmfix {margin-right:8px}

.dark_box, .loader {position:fixed;width:100%; height:100%; top:0; left:0; background-color:rgba(0,0,0,0); z-index:0; visibility:hidden}
.dark_box.opacity { opacity:0;}
html.with-dark .dark_box { background-color: rgba(17,17,17,0.8);z-index: 5000;visibility:visible;}
html[data-theme="light"].with-dark .dark_box { background-color: rgba(0,0,0,0.7);}
html.with-loader .loader {visibility:visible;z-index:50001}
html.with-showpopup .dark_box {z-index: 50000; background-color:rgba(0,0,0,0.5)}
html.with-smothdark .dark_box { background-color: rgba(4,5,10,0.3);z-index: 5000;visibility:visible;}
html>div.lock { background-color:rgba(0,0,0,0.0); width:100%; height:100%; top:0; position:fixed;z-index:0; -webkit-transition: background-color 50ms linear;-moz-transition:background-color 50ms linear;-o-transition: background-color 50ms linear;transition: background-color 50ms linear;}
html.lock>div.lock {z-index:3000;   background-color:rgba(0,0,0,0.8);}
html.lock {overflow-y:hidden}
.p-center {text-align:center}


.top-info { align-items:center;  text-align:right; margin-left:auto; padding:5px 0;}
.title-info { justify-content:flex-start; display:flex; align-content:center; align-items:center;
               position:relative;  margin-bottom:20px; border-radius:10px;padding:5px 20px;
              background-color:var(--bg-title-info);
}

.title-info .flex {display:flex; align-items:center}
.title-info h1 {color:rgba(var(--yellow),1); font-size:30px; padding:5px 0;}
.title-info img {height:30px; width:auto; }

[data-theme="light"] .title-info h1 {color:rgba(0,0,0,1)}

.flex-inline {display:inline-flex !important; align-items:center}


a:link, a:focus{ outline-style: none; text-decoration:none; }

form:focus, a:focus, button:focus, div[tabindex="0"]:focus, label[tabindex="0"]:focus {outline:none;}
form.white:focus, a.white:focus, button.white:focus, div.white[tabindex="0"]:focus, label.white[tabindex="0"]:focus {outline:none;}
form.black:focus, a.black:focus, button.black:focus, div.black[tabindex="0"]:focus, label.black[tabindex="0"]:focus {outline:none;}
p, span, a, textarea {letter-spacing:0.3px;}
sup.beta {  border-radius:4px; padding:0 2px; color:var(--blackH); background-color:rgba(var(--green),1) }

input[type="text"]::-ms-clear, input[type=email]::-ms-clear, input[type=password]::-ms-clear  { display: none; }
h1 {Font-family:Roboto,Arial,Tahoma;  font-size:40px;letter-spacing:0px;  line-height:1.2; font-weight:300} /*Nappis Hero*/
h2 {font-size:18px;Font-family:'Roboto',Arial,Tahoma; line-height:1.2; font-weight:300} /*SubHero*/
p, textarea,label, a span, table,a,input,select {Font-family:'Roboto',Arial,Tahoma;font-size:15px; line-height:1.6; font-weight:400;}
input, select {font-weight:400;}
[data-theme="light"] p, [data-theme="light"] textarea, [data-theme="light"] label, [data-theme="light"] a [data-theme="light"] span, [data-theme="light"] table,[data-theme="light"] a,[data-theme="light"] input, [data-theme="light"] select  {font-weight:500 !important}


span.block {display:block}
p.small,  p.small span, a.small, span.small, option.small {font-size:12px !important;}
p.small2, label.small2, span.small2 {font-size:11px !important}
p.big, a.big {font-size:20px;}
p.title, span.title {font-size:24px;}

.size100 {width:100%;}   
.size50 {width:49.5%;  }
.size25 {width:24.5%; }
.size32 {width:33%; }


.opacity_box {opacity:0.2;}





.uppercase { text-transform:uppercase}


.cl_white { color:var(--white) }
html[data-theme="light"] .cl_white { color:rgb(var(--black))}

.cl_black { color:rgb(var(--black)) }
html[data-theme="light"] .cl_black { color:var(--white)}


.cl_blue {color: rgb(var(--blue))}
.cl_red {color:#f32626}
.cl_green {color:rgb(var(--green))}

.cl_gray {color:var(--light-slate)}
html[data-theme="light"] .cl_gray { color:var(--body-font-color)}


.cl_gray_s {color:var(--slate)}
.cl_yellow {color:rgb(var(--yellow))}
.cl_active {color:var(--text-color-active)}
.cl_normal {color:var(--text-color-normal)}
.cl_seccond {color:var(--text-color-seccond)}

   .bk_trans {background-color:transparent}
   .bk_transnoborder {background-color:transparent}
   .bk_blue {background-color:rgb(var(--blue)); }
   .bk_gray {background-color:var(--light-slate); }
   .bk_green {background-color:rgb(var(--green)); }
   .bk_yellow {background-color:rgb(var(--yellow));}
   .bk_red {background-color:rgb(var(--red)); }
   .bk_unset {background-color:var(--white); }
   .bk_white {background-color:var(--white); }


.c_active {color:rgb(var(--black)); background-color:rgb(var(--green)); border-radius:6px; text-align:center; border:solid 1px var(--bg-grid-row-border)}

.c_activePL {color:rgb(var(--black)); background-color:rgb(var(--yellow)); border-radius:6px; text-align:center; border:solid 1px var(--bg-grid-row-border)}


.c_unactive {color:rgb(var(--black)); background-color:var(--lightest-slate); border-radius:6px; text-align:center; border:solid 1px var(--bg-grid-row-border)}
.c_nonset {color:rgb(var(--white)); background-color:transparent; border-radius:6px; text-align:center; border:solid 1px rgb(var(--true-white))}
.c_trans {color:rgb(var(--white)); background-color:transparent; border-radius:6px; text-align:center; border:solid 1px transparent )}
.c_transnoborder {color:rgb(var(--green)); background-color:transparent; border-radius:0px; text-align:center; border:none)}

.c_withdrawn {color:rgb(var(--black)); background-color:rgb(var(--red)); border-radius:6px; text-align:center; border:solid 1px var(--bg-grid-row-border)}
.button_div.c_lock {color:rgb(var(--true-white)); background-color:rgb(var(--green));}

.c_active.padding,.c_activePL.padding , .c_unactive.padding, .c_nonset.padding {padding:1px 8px; border-radius:6px; font-weight:500 !important;}
.bk_white.padding.box, .bk_trans.padding.box, .bk_red.padding.box, .bk_blue.padding.box, .bk_green.padding.box,.bk_gray.padding.box,.bk_yellow.padding.box {padding:1px 8px; border-radius:6px; font-weight:500 !important; border:none; color:#000; }



/*-------------------------------------------------------------------*/
/*--------------------------------CHECKBOX FORMAT--------------------*/
/*-------------------------------------------------------------------*/

.myCheckbox {display:inline-block; vertical-align:middle; padding-right:10px; box-sizing:border-box; -webkit-box-sizing:border-box}
.myCheckbox label {font-size:0px; line-height:0px; display:block; cursor:pointer}                             
.myCheckbox input[type="checkbox"],.myCheckbox input[type="radio"]  {opacity:0; width:0}
.myCheckbox input[type="checkbox"] ~ label::before, .myCheckbox input[type="radio"] ~ label::before {
        display: table;
        width: 10px;
        height: 10px;
        content: "";
        vertical-align: middle;
        background-color: transparent;
        border:solid 2px rgb(var(--blue)) ;
        border-radius:2px
}


.myCheckbox input[type="checkbox"]:checked ~ label::before,
.myCheckbox input[type="radio"]:checked ~ label::before {content:""; background-color:rgb(var(--green)); border:solid 2px rgb(var(--blue)) }

.myCheckbox.error input[type="checkbox"] ~ label::before, .myCheckbox.error input[type="radio"] ~ label::before {border:solid 1px var(--error); background-color:rgba(179,0,125,0.5) }
.myCheckbox.inf input[type="checkbox"] ~ label::before  { border:solid 1px var(--yellow); background-color:rgba(255, 204, 102,0.5) }
.myCheckbox.ok input[type="checkbox"] ~ label::before { border:solid 1px rgb(var(--blue)); background-color:rgba(18,168,212,0.5); }
.myCheckbox.height24 {height:24px}

.dane.rows.error {border-bottom:solid 2px var(--error)}
.myCheckbox.error {border-bottom:solid 2px var(--error)}



.multiwork-panel {display:none; padding:8px; width:100%;  background-color:rgb(var(--black)); border-top:solid 1px var(--navy)}
html[data-theme="light"] .multiwork-panel {background-color:var(--body-font-color)}



.border {border:solid 1px rgb(var(--green))}
.border-gray-panel {border:solid 1px rgb(var(--true-white),0.1); border-radius:4px; margin:5px 0px; padding:5px !important; background-color:rgba(var(--true-white),0.02); width:100%; text-align:center}


html[data-theme="light"] .border-gray-panel {
    border: solid 1px rgb(var(--black),0.1);
    border-radius: 4px;
    margin: 5px 0px;
    padding: 5px !important;
    background-color: rgba(var(--blue),0.2)
}



.border_box  {  -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;   }


.imgg {position: absolute;margin: auto;top: 0;bottom: 0; left:0; right:0; border:none;}
.clear {clear: both; overflow:hidden;}
.bold {font-family:Roboto; font-weight:500 !important   }
.italic {font-style: italic}


.button_div, button.button_div { display:inline-block; }
.button_div {height:34px; position:relative; padding-left:20px; padding-right:20px;         
        -webkit-transition: all 0.1s linear;
  -moz-transition:all 0.1s linear;
  -o-transition: all 0.1s linear;
  transition: all 0.1s linear;
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box;  
  box-sizing: border-box;       
  overflow:hidden;  font-size:13px; vertical-align:middle;
   text-align:center;
   border-radius:2px;
   border:solid 1px transparent;
   cursor:pointer
 }

.button_div.bk_trans {border-color:rgb(var(--green)); color:rgb(var(--green)); background-color:transparent; }
.button_div.bk_trans span {color:inherit}

.button_div.bk_none {border-color:rgb(var(--white)); color:rgb(var(--white)); background-color:transparent; }
.button_div.bk_none span {color:inherit}

.button_div.bk_transnoborder {border-color:none; color:rgb(var(--green)); background-color:transparent; }
.button_div.bk_transnoborder span {color:inherit}



.button_div.bk_blue {border-color:rgb(var(--blue)); background-color:rgba(var(--blue),0.7); color:var(--white);}
.button_div.bk_blue span {color:inherit}

.button_div.bk_blue_transparent {border-color:rgb(var(--blue)); background-color:transparent; color:var(--white);}
.button_div.bk_blue_transparent span {color:inherit}

.button_div.bk_white {border-color:var(--white); background-color:transparent; color:var(--white)}
.button_div.bk_white span {color:var(--white)}


html[data-theme="light"] .button_div.bk_white {border-color:var(--blackH); background-color:transparent; color:var(--blackH)}
html[data-theme="light"] .button_div.bk_white span {color:var(--blackH)}



.button_div.bk_yellow {border-color:rgb(var(--yellow)); background-color:rgba(var(--yellow),0.7); color:rgb(var(--black)); font-weight:600  }
.button_div.bk_yellow span {color:inherit}

.button_div.bk_green {border-color:rgb(var(--green)); color:rgb(var(--black)); background-color:rgb(var(--green),0.7);  font-weight:600; }
.button_div.bk_green span {color:inherit}

.button_div.bk_red {border-color:rgb(var(--red)); color:rgb(var(--true-white)); background-color:rgb(var(--red),0.7);  font-weight:400; }
.button_div.bk_red span {color:inherit}



.with-icon-right {padding-right:70px !important;}

.button_div.small_height {line-height: 30px;}
.input_btn .button_div {width:100%;}

.button_div p {font-size:18px;}
.button_div p, .button_div span {display:inline-block; font-weight:inherit}
.button_div.bk_trans {}



.button_div.bk_trans:hover, .button_div.bk_trans:focus  {background-color:rgba(var(--green),0.3)}
.button_div.bk_transnoborder:hover, .button_div.bk_transnoborder:focus  {}
.button_div.bk_blue:hover, .button_div.bk_blue:focus  {background-color:rgb(var(--blue))}
.button_div.bk_blue_transparent:hover, .button_div.bk_blue_transparent:focus  {background-color:rgb(var(--blue))}
.button_div.bk_white:hover, .button_div.bk_white:focus  {background-color:rgb(var(--blue))}
.button_div.bk_green:hover, .button_div.bk_green:focus  {background-color:rgb(var(--green))}
.button_div.bk_red:hover, .button_div.bk_red:focus  {background-color:rgb(var(--red))}
.button_div.bk_yellow:hover, .button_div.bk_yellow:focus  { background-color:rgb(var(--yellow))}
.button_div.bk_yellow.lock:hover, .button_div.bk_yellow.lock:focus  {background-color:transparent;cursor:default}


.button_div.bk_none:hover, .button_div.bk_none:focus  {color:rgb(var(--blue))}


.button_div img { right:15px; left:auto;}
.button_div[disabled='disabled'] {border-color: #555; background-color:#333; color:#555;}
.button_div[disabled='disabled']:hover { cursor:default; background-color:#333}
.button_div.with-icon {padding-left:40px}

.button_div.isload {border-color:transparent}
.button_div.isgryph.push {border-color:var(--slate); color:var(--slate); border-width:2px; border-radius:4px}
.button_div.isgryph.push.vis {border-color:rgb(var(--true-white)); color:rgba(var(--true-white),1);}
.button_div.isgryph.push.isactive {border-color:rgb(var(--green)); color:rgb(var(--true-white)); background-color:rgba(var(--green),0.2); font-weight:500}

.button_div.isgryph.push.red.isactive {border-color:rgb(var(--red)); color:rgb(var(--true-white)); background-color:rgba(var(--red),0.2); font-weight:500}
.button_div.isgryph.push.yellow.isactive {border-color:rgb(var(--yellow)); color:rgb(var(--true-white)); background-color:rgba(var(--yellow),0.2); font-weight:500}


.button_div.isgryph.push.isactive:hover {background-color:rgba(var(--green),0.5)}
.button_div.isgryph.push.red.isactive:hover {background-color:rgba(var(--red),0.5)}
.button_div.isgryph.push.yellow.isactive:hover {background-color:rgba(var(--yellow),0.5)}
html[data-theme="light"] .button_div.isgryph.push.isactive  { color:rgb(var(--black));}

button.button_div.push { height:22px; margin:0 4px; padding:0 10px;}
button.button_div.push.litle { margin:0 0px; padding:0 2px;}
button.button_div.push.litle p.small {line-height:1 !important}

li div.icon-dark-mode { display:flex;   flex-wrap:wrap; flex-direction:column }
.button_div.gryph-mode-dark {margin:0; border-radius:unset; background-color:transparent; border:none; height:23px}

.button_div.gryph-mode-dark.on {color:#acacac}
.button_div.gryph-mode-dark.off {color:#acacac}

.button_div.gryph-mode-dark.on.select {background-image: linear-gradient(180deg,rgb(var(--green)),rgb(var(--bg-menu)));color:#fff}
.button_div.gryph-mode-dark.off.select {background-image: linear-gradient(180deg, rgb(var(--bg-menu)),rgb(var(--green)));color:#fff}

.button_div.height15 {height:15px !important; min-height:15px !important; line-height:15px}
.button_div.w100 {width:100%}

.hidden {visibility:hidden !important}
.hideblock {display:none !important}
.hideblock_0 {height:0px; display:none !important; overflow:hidden}





.wrapper {width: 80%;margin: 0 auto;position: relative; }
.wrapper_box {width: 1600px;margin: 0 auto;position: relative; }
.full {position:absolute; width:100%; height:100%; top:0; left:0; right:0; bottom:0;}

.web_kit {-webkit-transition: all 0.4s linear;-moz-transition:all 0.4s linear;-o-transition: all 0.4s linear;transition: all 0.4s linear;}
.web_kit_dark {-webkit-transition: background-color 0.1s linear;-moz-transition:background-color 0.1s linear;-o-transition: background-color 0.1s linear;transition: background-color 0.1s linear;}
.web_kit_slow {-webkit-transition: all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition: all .3s ease-out;transition: all .3s ease-out;}
.web_kit_fast {-webkit-transition: all 0.15s ease;-moz-transition:all 0.15s ease;-o-transition: all 0.15s ease;transition: all 0.15s ease;}
.web_kit_fast_opacity {-webkit-transition: opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-o-transition: opacity 0.15s linear;transition: opacity 0.15s linear;}


.vert_cent {position:absolute; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);left:0; right:0 }



/*------------------------------------------------------------------*/
/*--------------------------------POPUP-----------------------*/
/*------------------------------------------------------------------*/
#PopupKomununikatYesNo, #PopupKomununikatInformation, #PopupLocked {opacity:0; width:100%; height:100%; position:fixed;z-index:0; margin:0 auto; visibility:hidden; min-width:320px; box-shadow:0px 12px 12px 0px rgb(var(--bg-popup)); border-radius:4px}
#PopupKomununikatYesNo.show, #PopupLocked.show {z-index:8002;  opacity:1;top:0px; visibility:visible;background-color:rgba(0,0,0,0.8)}
#PopupKomununikatInformation.show {z-index:8010;  opacity:1;top:0px; visibility:visible;background-color:rgba(0,0,0,0.8)}


#PopupKomununikatYesNo .box, #PopupKomununikatInformation .box, #PopupLocked .box {top:45%;margin:0 auto; position:relative;  padding:20px ;width:600px; max-width:100%; background-color:var(--bg-inform-popup) }
#PopupKomununikatYesNo.big .box, #PopupKomununikatInformation.big .box, #PopupLocked.big .box {width:900px;}
#PopupKomununikatYesNo.show .box, #PopupKomununikatInformation.show .box, #PopupLocked.show .box {top:50%;}
#PopupKomununikatYesNo h4, #PopupKomununikatInformation h4, #PopupLocked h4 {padding-bottom:10px; color:rgb(var(--green));font-size:20px; border-bottom:solid 1px rgb(var(--black))}
#PopupKomununikatYesNo .box b, #PopupKomununikatInformation .box b, #PopupLocked .box b {padding-bottom:10px;}
#PopupKomununikatYesNo .box>p, #PopupKomununikatInformation .box>p, #PopupLocked .box>p {color:var(--text-color-normal); position:relative; padding-left:0px;  font-size:14px; padding:20px 0; }
#PopupKomununikatYesNo .btn .button_div, #PopupKomununikatInformation .btn .button_div, #PopupLocked .btn .button_div { min-width:150px;  margin:0 10px; text-align:center; padding:0px 10px; display:flex; justify-content:center; align-items:center}
#PopupKomununikatYesNo .btn, #PopupKomununikatInformation .btn, #PopupLocked .btn {margin:0 auto; text-align:center;padding-top:20px; display:flex;justify-content:space-around}
#PopupKomununikatYesNo .btn p, #PopupKomununikatInformation .btn p, #PopupLocked .btn p  {display:inline-block;}

.Popup.init { opacity: 1;  z-index:3000;
              -webkit-transform: none; -moz-transform: none;-o-transform: none;-ms-transform: none;transform: none;




}


.Popup {background-color:rgb(var(--bg-popup)); max-width:90%;  position:absolute; margin:auto; left:0; right:0; text-align:left; max-height:90%; 
 
 padding:10px;
    -webkit-transform: translateY(-20%);
  -moz-transform: translateY(-20%) ;
  -o-transform: translateY(-20%) ;
  -ms-transform:translateY(-20%) ;
  transform: translateY(-20%) ;
       opacity:0;  
  -webkit-transition: all .5s ease;
  -moz-transition:all .5s ease;
  transition: transform .5s ease, opacity .3s linear;
  opacity:0;
  z-index:3000;
   box-shadow:0px 0px 20px 4px rgb(var(--bg-popup)); border-radius:4px;
 }

.Popup.locked {-webkit-filter:grayscale(80%) contrast(70%);  pointer-events:none;}
.Popup .contentp { position:relative;  margin: 0 auto; max-height:100%;  padding:0; display:flex;width:100%; overflow:hidden;}
.Popup .gridview {width:unset;border:none}
.Popup .contentp form {position:relative;box-sizing:border-box; width:100%; height:calc(100% - 60px); overflow:hidden}
.Popup .btn-close {width:100%; display:flex; align-items:center; border-bottom:solid 1px #acacac; margin-bottom:10px;}
.Popup .btn-close  .button_div {margin:5px 0px; margin-left:auto; height:30px; font-size:12px; padding:0 8px}
.Popup .btn-close p {flex:1}

         .quick-info {box-shadow:0 20px 57.6px 5px rgb(0 0 0 / 30%), 0 4.8px 14px 5px rgb(0 0 0 / 30%);-webkit-transition:all .2s linear;-moz-transition:all .2s linear;transition: all .2s linear; transform:translateX(110%);    z-index:12001; position:fixed; right:0; padding:8px 50px; width:auto;top:64px; border-radius:4px; display:flex; align-items:center; background-color:rgba(var(--green),0.99)}
         html[data-theme="light"] .quick-info {box-shadow:0 20px 57.6px 5px rgb(0 0 0 / 30%), 0 4.8px 14px 5px rgb(0 0 0 / 30%); background-color:rgb(var(--blue))}
     
         
         
         .quick-info .quick-icon {width:18px; height:18px; margin-right:10px; display:flex;align-items:center; justify-content:center;color:inherit;}
         .quick-info .quick-text {margin:0 15px;color:inherit; font-weight:500}
         .quick-info.show, .quick-info.showr {transform:translateX(-1px);color:rgb(var(--black));}
         .quick-info.showr {background-color:rgb(var(--red)) !important} 
         .quick-info.fade {opacity:0}

/*------------------------------------------------------------------*/
/*--------------------------------INPUT BOX FORMAT------------------*/
/*------------------------------------------------------------------*/

.dane .top { box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; margin:20px 0;}
.dane div.error input.fields, .dane div.error select.fields, .dane div.error textarea.fields { border-bottom:solid 2px var(--error) !important;}
.dane input.fields, .dane select.fields, .dane textarea.fields, .simulate-textbox {border:solid 1px var(--lightest-navy); background-color:var(--bg-input); border-radius:4px;  font-size:14px;width:100%; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;height:34px; margin:0;padding:0;padding-left:10px; color:var(--input-color)}
.dane input.fields:focus, .dane select.fields:focus,  .dane textarea.fields:focus  {color:var(--input-focus); background-color:transparent;   }

.dane .right {padding-right:0px; float:right}
.dane .fields.combobox_style {line-height:30px; height:30px; margin-top:5px}
.dane input[readonly].fields, .dane select[disabled].fields, .dane textarea[disabled].fields {background-color:transparent; color:var(--input-color-span-unselect)}
.dane .fx_rh {display:flex; justify-content:flex-end;}

/*-------------------------------------------------------------------*/
/*--------------------------------MENU CSS---------------------------*/
/*-------------------------------------------------------------------*/

html .drk {position:fixed;left:4px;  height:100%;display:flex;  align-items:center; z-index:10000;}
html .drk:hover {cursor:pointer}
html .drk .icon-dark-mode {display:flex; flex-direction:column;border-radius:4px; overflow:hidden}


.content {position:relative;padding:20px 0 40px 0;}
.contentbis {position:relative;width:100%; height:100%;  padding:50px; box-sizing:border-box;
             display:flex; flex-wrap:wrap; justify-content:flex-start; align-content:flex-start;  
}


.dane {width:100%; padding:2px 0px;-webkit-transition: all .1s linear;-moz-transition:all .1s linear;-o-transition: all .1s linear;transition: all .1s linear;  text-align:left;display: flex; flex-wrap: wrap; justify-content: space-between}
.dane .top {margin-top: 5px}
.dane.border-bottom {border-bottom:solid 1px var(--navy)}
.dane .border-top {border-top:solid 1px var(--navy)}

.input_btn .dane {justify-content:flex-end;}
.dane p.tytul_combobox {color:#4a4a4a;}
.dane .two-column {display:flex; justify-content:space-between;  width:100%; align-items:flex-start}
.dane .two-column > div {width:48%}


input.def_val + span:not(.s-gryph) ,
input.def_val + div + span:not(.s-gryph),
select.def_val + span:not(.s-gryph),
textarea.def_val + span:not(.s-gryph) {position: absolute; top:0px;left:10px;font-weight:normal; color:var(--input-color-span-unselect); transform-origin: 0px 0px; display: flex; height:24px; cursor: text; pointer-events:none; font-style:italic}

input.def_val + span:not(.s-gryph) label,
input.def_val + div + span:not(.s-gryph) label,
select.def_val + span:not(.s-gryph) label,
textarea.def_val + span:not(.s-gryph) label{ align-self: center; font-size:12px; white-space:nowrap;  }

input.def_val.isfocused:not(.hide-up) + span:not(.s-gryph),
input.def_val.isfocused + div + span:not(.s-gryph),
select.def_val.isfocused:not(.hide-up) + span:not(.s-gryph),
textarea.def_val.isfocused:not(.hide-up) + span:not(.s-gryph) { transform:translateY(-20px) translateZ(0.00px) translateX(-0px);top:0px;  height:20px; left:0px; font-weight:500; display:block; }


input.def_val.isfocused:not(.hide-up) + span:not(.s-gryph) label,
input.def_val.isfocused + div + span:not(.s-gryph) label,
select.def_val.isfocused + span:not(.s-gryph) label,
textarea.def_val.isfocused:not(.hide-up) + span:not(.s-gryph) label {font-size:12px; align-self: flex-start; color:var(--input-color-span-select); font-style:normal; font-weight:500}


input.def_val.isfocused.hide-up + span:not(.s-gryph),
input.def_val.isfocused.hide-up + div + span:not(.s-gryph),
select.def_val.isfocused.hide-up + span:not(.s-gryph),
textarea.def_val.isfocused.hide-up + span:not(.s-gryph){display:none; }




select option, div.ul-search {background-color:var(--bg-input); color:var(--input-color); font-family:'Roboto'; font-weight:400;}
html[data-theme="light"]  select option, div.ul-search {font-weight:500;}
select:active {    border: none;
    outline: none;
    scroll-behavior: smooth;}

div.ul-search {display:none; padding:5px; position:fixed; z-index:1000; margin-top:5px; border:solid 1px #acacac; box-sizing:border-box;}
div.ul-search ul {overflow:auto;  user-select:none; max-height:400px; font-weight:inherit}
div.ul-search ul li {margin:3px 0; padding:2px 0;font-family:'Roboto';  height:15px; padding-left:5px;  white-space:nowrap;border-left:solid 2px var(--lightest-navy); user-select:none; font-weight:inherit;display:flex}
div.ul-search ul li:hover,div.ul-search ul li.select {background-color:#fff; color:var(--light-navy); cursor:pointer}
div.ul-search.isactive {display:block}
div.ul-search ul li input[type=checkbox] {margin-right:5px; cursor:pointer}
div.ul-search ul li span {width:100%; height:100%}
input.show-text {cursor:pointer}
input.fields.textbox-search {background-color:var(--bg-input); margin-bottom:5px; padding-left:20px }
input.fields.textbox-search:focus, input.fields.textbox-search:hover {background-color:var(--bg-inform-popup)}



#RegisterorLoginInfo {position:relative; width:100%; min-height:100vh ; display:flex;align-items:center}
#RegisterorLoginInfo .wrapper_box {width:100%; display:flex; align-items:center; height:100%; justify-content:center}
#RegisterorLoginInfo .left-img {width:50%;height:100%; position:relative; background-color:var(--dark-navy) }
#RegisterorLoginInfo .lg {font-size:42px; width:80%; margin:auto;color:var(--light-slate); line-height: 1.4; top:40%}
#RegisterorLoginInfo h1.sml {font-size:30px;}
#RegisterorLoginInfo p.title {font-size:60px; padding-bottom:20px}
#RegisterorLoginInfo .form {position:relative;}
#RegisterorLoginInfo p.info {padding-top:30px;}
#RegisterorLoginInfo .dane input.fields, #RegisterorLoginInfo .dane select.fields { height:30px;}
#RegisterorLoginInfo .btn .button_div {line-height:60px; height:60px; text-align:center; vertical-align:middle;width:100%; font-size:16px}
#RegisterorLoginInfo .btn .button_div.normal {line-height:unset; height:34px; font-size:14px}
#RegisterorLoginInfo .btn, #Info .btn { text-align:center; width:100%;padding:20px 0 20px 0;}
#RegisterorLoginInfo button.push {height:22px; margin:0 4px; padding:0 10px;}


   #Page .exl {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            right: 0;
            background-image:linear-gradient(to right, rgb(var(--black)), rgb(2 2 2 / 61%))
        }

     #RegisterorLoginInfo form {
            background-color: rgba(0,0,0,0.9);
            border-radius: 4px;
            box-shadow:0px 22px 22px 10px rgb(var(--black));
            max-width:550px;
            padding:20px;
        }
         
     

        .drk {display:none !important;}
        .border-gray-panel { margin-top:20px;
            background-color: rgba(var(--true-white),0.2)
        }



/*BELKA PLYWAJACA na STRONIE*/

.plywajacy {width:100%;position:relative; padding:0;}
.plywajacy .uciekaj {  width:100%;  }
.plywajacy .uciekaj.fixed {position:fixed; z-index:10; width:100%;left:0;  background-color:rgb(var(--black))}
[data-theme="light"] .plywajacy .uciekaj.fixed {background:linear-gradient(0deg,var(--bg-grid-header-from),var(--bg-grid-header-to));background-color:var(--bg-body) ;}
[data-theme="light"] .plywajacy .uciekaj.fixed .grid_header {background:unset;}
.plywajacy .uciekaj .center {position:relative;}
.plywajacy .full-center {position:relative; overflow-y:auto; padding-top:4px;}

.edit-popup .item.checkbox {margin:0px 0 15px 0;}
.checkbox div {display:flex; align-items:center}
.checkbox div label {padding-left:10px;}


.rows .item {width:10%; position:relative }

.rows .item.fix {flex:1;}
.rows .item.w200 {width:200px; min-width:150px}
.rows .item.w250 {width:250px; min-width:200px}
.rows .item.w300 {width:300px; min-width:250px}
.rows .item.w350 {width:350px; min-width:300px}
.rows .item.w400 {width:400px; min-width:350px}
.rows .item.w100 {width:100px; min-width:100px}
.rows .item.w120 {width:120px; min-width:120px}
.rows .item.w150 {width:150px; min-width:150px}
.rows .item.wauto {width:unset; margin-right:5px}
.rows .item.w30 {width:30px; min-width:30px}
.rows .item.w50 {width:50px; min-width:50px}
.rows .item.w80 {width:80px; min-width:80px}

.rows .item.minw200 {min-width:200px;}
.rows .item.minw250 {min-width:250px;}
.rows .item.minw300 {min-width:300px;}
.rows .item.minw400 {min-width:400px;}


.rows .item.size50 {width:49.5%;}
.rows .item.size25 {width:24.5%}
.rows .item.size20 {width:19.5%}
.rows .item.size15 {width:14.5%}
.rows .item.size5 {width:4.5%}
.rows .item.size10 {width:9.5%}
.rows .item.size30 {width:32.5%}
.rows .item.size301 {width:29.5%}
.rows .item.size40 {width:39.5%}
.rows .item.size80 {width:79.5%}
.rows .item.size60 {width:59.5%}
.rows .item.size70 {width:69.5%}
.rows .item.size90 {width:89.5%}
.rows .item.size100 {width:100%}
.rows .item.last {text-align:right}

#GridList .wrapper {width:95%}
#GridList form {width:100%;}
#GridList .gridview .title {font-size:12px; padding:10px}
#GridList .contentbis {padding:0px; padding-left:20px}
#GridList .btn {justify-content:flex-end; display:flex; width:100%;}
#GridList #Trener .btn.export {justify-content:flex-start; padding-top:20px}
#GridList .btn.zaladuj {justify-content:center; padding-top:20px;}
#GridList .btn-zapisz {padding-top:20px}
#GridList .btn .aktualizacja {padding-bottom:20px}


#GridList .scroll-box, #HistoriaKartaPracownika .scroll-box {width:100%;  padding-bottom:40px}
#GridList .gridview p, #HistoriaKartaPracownika .gridview p {font-size:14px;}

#GridList a.button-icon  {cursor:pointer}
#GridList a.button-icon:hover {opacity:0.3}
#GridList a.button-icon img {width:20px; height:auto}

.gridview .rows input.fields, .gridview .rows select.fields, .gridview .rows textarea.fields{ font-size:13px; height:34px; outline:none }
.gridview .rows div.ul-search { font-size:13px;}
.gridview .rows textarea.fields {height:110px; padding:10px 5px; font-size:12px; line-height:1.6}
.gridview.lista .rows {align-items:center; padding:8px; flex-wrap:nowrap; position:relative; }
.gridview.lista>.rows {background-color:var(--bg-grid-rows);border-bottom:solid 1px var(--bg-grid-row-border)}
.gridview.lista>.rows:nth-of-type(2n+1) { background-color:var(--bg-grid-rows-p);}
.gridview.lista .rows .row .item.lista-aktywnosci-last-dzial { padding:5px 0px; padding-left:10px  }


.gridview.lista.kandydaci-records .rows {flex-wrap:wrap} /* details show*/
.gridview.lista .rows .row {flex-wrap:nowrap}
.gridview.lista .rows .row.KandydaciItm-center {position:relative; align-items:center}
.gridview.lista span.cicle {width:8px; height:8px; border-radius:4px; display:inline-block}
.gridview.lista .cicle-green {padding:0; }
.gridview.lista .cicle-green p {width:28px; font-size:9px !important; height:28px; border-radius:14px;background-color:rgba(var(--green),0.3);display:flex; align-items:center; justify-content:center}
#EditAnkietaSzkolenie .gridview.lista .cicle-green p { width:20px; height:20px; border-radius:10px;font-size:10px !important}
#EditAnkietaSzkolenie .gridview.lista .cicle-green {cursor:pointer}
#EditAnkietaSzkolenie .gridview.lista .cicle-green.obecnosc_1 p {background-color:rgba(var(--green),1); color:rgb(var(--black))}
#EditAnkietaSzkolenie .gridview.lista .cicle-green.obecnosc_0 p {background-color:rgba(var(--true-white),1); color: rgb(var(--black))}


.lista .rows .item {padding:0 10px; box-sizing:border-box; -webkit-box-sizing:border-box}
.lista .rows .item p.itm-stanowiskobig {color: rgba(var(--yellow),0.2); float:right;  white-space:nowrap;   font-size: 20px !important;}
.gridview.lista .button_div, .gridview .rows input.fields, .gridview .rows select.fields, .gridview.filtrowanie .rows .button_div, .gridview .cechy-kandydat .button_div, 
.go-to-up .button_div, #EditUser .contentbis .button_div, #EditFlow .contentbis .button_div, .button_div.height24 {height:auto; min-height:24px;}
.button_div.height30 {height:auto; min-height:29px;}
a.button_div.height24 {line-height:24px}

.grid_header {position:relative;font-size:12px;background: linear-gradient(0deg,var(--bg-grid-header-from),var(--bg-grid-header-to)); padding-top:5px; }
.gridview.grid_header .rows {flex-wrap:nowrap}
.grid_header .rows .item {align-self:center}
.grid_header .rows .item:last-child, .grid_header .rows .item:first-child {}
.grid_header .dane {padding:0;}
.grid_header.lista>.rows:first-child p, .grid_header.lista .rows.rows-title p, .details .grid_header .rows.rows-title p {text-decoration:underline;  text-underline-offset:3px;}

   .lokalizacje-filtr {width:100%; display:flex;justify-content:flex-end; align-items:center; margin-bottom:5px; flex-wrap:wrap}
   .lokalizacje-filtr button.push, .multi-fields button.push {height:22px; margin:0 4px; padding:0px 10px;}
   .lokalizacje-filtr button.push {margin:4px;}
   .lokalizacje-filtr .fast-filtr-title{margin-right:10px}


.btn-fast-config {cursor:pointer}

   .grid-page {padding:2px;display:flex; flex-wrap:wrap; align-items:center }
   .grid-page.grid-page-left {justify-content:flex-start}
   .grid-page.grid-page-right {justify-content:flex-end}
   .grid-page p {padding:0 10px}
   .grid-page button { font-weight:600; display:flex; justify-content:center;align-items:center; position:relative;  line-height:1;  padding:4px; margin:4px ;width:24px; height:24px; border-radius:4px; text-align:center; border:none !important}
   .grid-page button:hover { background-color:rgba(var(--green),0.3)}
   .grid-page .page-info p, .grid-page .page-info p span {font-size:11px !important; line-height:1.3; padding:0; }
   .grid-page .page-info {width:100%; text-align:right;}







#Footer {background-color:rgba(0,0,0,1);  height:40px;  }
#Footer .wrapper {display:flex; justify-content:flex-end; align-items:center;width:95%; height:100%}
#Footer p { padding-right:50px; font-size:12px; line-height:1}
#Footer .footer-logo {width:100px; height:27px; display:block; 
 background: url('../lib/img/logoArmatisPolskanew.png')  no-repeat center center; background-size:cover
}



[data-theme="light"] #Footer .footer-logo {width:100px; height:27px; display:block; 
 background: url('../lib/img/logoArmatisPolskanewblk.png')  no-repeat center center; background-size:cover
}




  /* Designing for scroll-bar */
        ::-webkit-scrollbar {
            width: 8px;
            height:10px
           
        }
        
      
        /* Track */
        ::-webkit-scrollbar-track {
            background: transparent;
            border-radius: 1px;
            border:solid 1px rgb(var(--green))
        }
      
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: rgb(var(--green));
            border-radius: 1px;
            margin:2px 0;
        }
      
        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: rgb(var(--blue));
        }



     .app-news {border-radius: 6px;padding: 20px;  box-shadow:0px 12px 12px 0px rgb(var(--black))}
     
     .app-news .app-news-item {padding:20px; background-color: rgba(0,0,0,0.8); margin-bottom:50px; border-radius:4px; position:relative}
     html[data-theme='light'] .app-news .app-news-item { background-color: rgba(0,0,0,0.2);}

     .app-news-item img {width:80%; height:auto; padding:10px; margin:40px 0; position:relative; display:block; margin:40px auto; box-shadow:0 25.6px 57.6px 0 rgb(255 255 255 / 30%), 0 4.8px 14.4px 0 rgb(255 255 255 / 30%) }
     #GridList.news .gridview .app-news-item .title {font-size:20px; padding:0}


html[data-theme='light'] .filtrowanie {box-shadow:0 0 10px rgb(28 39 60 / 10%); border:solid 1px #cdd4e0}
html[data-theme='light'] .button_div.bk_blue {color:#000}
html[data-theme='light'] .button_div.bk_blue_transparent {color:#000}





@media only screen and (min-width:0px) and (max-width:1400px)
  {
 
    .lista .rows .item {padding:0}



    }


@media only screen and (min-width:0px) and (max-width:1000px)
  {


    }



@media only screen and (min-width:0px) and (max-width:720px)
  {
    #RegisterorLoginInfo {height:auto;}
    #RegisterorLoginInfo .wrapper_box {height:inherit}
    #RegisterorLoginInfo form {padding:20px 20px 20px 10px}
    .rows .item.size30 {width:100%}
    .rows .item.size50 {width:100%}

    footer {position:relative}


    }