/* ------------------------------------- Begin "List of contents" ------------------------------------- */



/*
  1. Main
  2. Animate
  3. Article
  4. Breadcrumb
  5. Checkbox
  6. Form
  7. Login Box
  8. Message
  9. One line
  10. Popup remove
  11. Section
  12. Select Icon
  13. Table
  14. Tabs
  15. Tiles
  16. Top Tools
  17. Translate
  18. Article popup
*/


/* -------------------------------------- End "List of contents" -------------------------------------- */




/* ------------------------------------------- Begin "Main" ------------------------------------------- */

html, body {
  margin: 0;
  padding: 0;
  background: rgb(242,244,250);
}

html {
  min-width: 500px;
}

body {
	font-size:18px;
  font-family: 'Open Sans', sans-serif;
	line-height: 1.5;
	color: #222;
}

a {
	text-decoration:none;
	color: rgb(113, 175, 163);
  cursor: pointer;
}
	
a:hover {
	text-decoration:underline;
}

.center_area {
  padding: 15px 15px 100px 15px;
  margin: 0 auto;
  max-width: 1260px;
}



/* -------------------------------------------- End "Main" -------------------------------------------- */




/* ------------------------------------------ Begin "Animate" ----------------------------------------- */

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0,-50px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


/* ------------------------------------------- End "Animate" ------------------------------------------ */




/* ------------------------------------------ Begin "Article" ----------------------------------------- */

article {
  border-top: 6px solid rgb(113, 175, 163);
  background: #fff;
  padding: 20px 20px 50px 20px;
}

h1 {
  font-size: 30px;
  line-height: 1.2;
  margin: 5px 0 30px 0;
}





/* ------------------------------------------- End "Article" ------------------------------------------ */




/* ---------------------------------------- Begin "Breadcrumb" ---------------------------------------- */


.breadcrumbs a:first-child {
  color: rgb(113, 175, 163);
  padding-left: 22px;
  position: relative;
}

.breadcrumbs a:first-child:after, .breadcrumbs a:first-child:before {
  position: absolute;
  top: 6px;
  left: 0;
  content: "";
  border-width: 2px 0;
  border-style: solid;
  border-color: rgb(113, 175, 163);
  height: 3px;
  width: 12px;
}

.breadcrumbs a:first-child:before {
  top: 11px;
}

.breadcrumbs a {
  padding: 0 10px;
  color: rgb(129,129,129);
}


/* ----------------------------------------- End "Breadcrumb" ----------------------------------------- */




/* ----------------------------------------- Begin "Checkbox" ----------------------------------------- */

.checkbox {
    margin: 10px 0;
    overflow: hidden;
    padding: 30px 5%;
    border-radius: 2px;
    border: 1px solid #A5A8AB;
  }

.checkbox input {
    display: none;
  }

.checkbox > div {
  
    width: 33%;
    float: left;
  overflow: hidden;


  }
  
.checkbox div label {
    font-size: 18px;
line-height: 26px;
padding: 0 0 0 45px;
position: relative;
cursor: pointer;
margin: 10px 0;
display: inline-block;
  }
  
.checkbox label:before {
    content :"";
    display: block;
    border-radius: 2px;
    border: 1px solid #A5A8AB;
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
  }

 
.checkbox input:checked + label:before {
    border-color: rgb(35, 165, 52);
    background: rgb(35, 165, 52) url('checked.png') no-repeat center center;
  }  
  
  


/* ------------------------------------------ End "Checkbox" ------------------------------------------ */




/* ------------------------------------------- Begin "Form" ------------------------------------------- */

form {
  animation-name: fadeInDown;
  animation-duration: 0.5s; 
}

article input[type="submit"], #loginbox input[type="submit"] {
  padding: 8px 16px;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  display: table;
  border: none;
  font-family: 'Open Sans', sans-serif;
	font-size: 18px;
  line-height: 1.5;
  margin: 20px 0 30px 0;
  cursor: pointer;
  min-width: 200px;
  
  
  background-color: rgb(113, 175, 163);
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
}

article input[type="submit"], #loginbox input[type="submit"] {
  margin: 20px auto;
}

article input[type="submit"]:hover, #loginbox input[type="submit"]:hover {
  background-color: rgba(113, 175, 163, 0.8);
  text-decoration: none;
}


article input[readonly] {  
  background-image: url('locked.png');
  background-position: right 10px center;
  background-repeat: no-repeat;
  cursor: default;
  background-color: #eeeeee;
  
  
}

article select, article input[type="text"], article input[type="password"], input[type="date"], article textarea,
#loginbox input[type="text"], #loginbox input[type="password"]



 {

  
  border: 1px solid rgb(106, 120, 132);
  border-radius: 5px;
  padding: 10px 15px;
  display: block;
  margin: 10px 0 25px 0;
  width: 100%;

  font-family: 'Open Sans', sans-serif;
	font-size: 18px;
  line-height: 1.5; 
  
  
  font-size: 16px;
  border-radius: 2px;
  border: 1px solid rgb(165, 168, 171);
  
      box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
  

}



article select {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    background: url('select_down.png') no-repeat right 12px center;
    
}

article option {
  padding: 0;
  margin: 0;
}

article select::-ms-expand {
    display: none;
}

article textarea {
  min-height: 200px;
  resize: vertical;
  overflow: auto;
}

article div > label, article form > label {
  padding-top: 10px;
  display: block;
  margin: 0;
  
  font-size: 15px;
  
}

article a > label {
  cursor: pointer;
}



/* -------------------------------------------- End "Form" -------------------------------------------- */




/* ----------------------------------------- Begin "Login Box" ---------------------------------------- */

#loginbox {
  max-width: 800px;
  margin: 150px auto; 
  background: #fff;
  border: 1px solid rgb(165, 168, 171);
  border-radius: 5px;
  padding: 30px 50px;
}

#loginbox img {
 	margin: 0 auto;
  display: block;
}


/* ------------------------------------------ End "Login Box" ----------------------------------------- */




/* ------------------------------------------ Begin "Message" ----------------------------------------- */

.message {
	border-style:solid;
	border-width:1px;
  background: #fff;
  
  border-color: rgb(113, 175, 163);
  
	margin:20px auto;
	display:block;
	padding: 15px 48px 15px 30px;
  
	padding: 15px 48px 15px 72px;
  
  /*
	border-radius:3px;*/
	    
  position: relative;
  
  
  
  
  
  
    background-repeat: no-repeat;
  background-position: left 20px center;
  background-size: 32px;
  
	}
	
.hide_message {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  
  cursor: pointer;
  
    
  background-image: url('icons/close.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  
  
}	
	
	
.error {
    background-image: url('icons/error.svg');
    
  
  
	background-color:#FFD5D5;
	border-color:#FF0000;
	}
.success {
    background-image: url('icons/success.svg');
  
	background-color:#D5FFD5;
	border-color:#009933;
	}
.info {
    background-image: url('icons/success.svg');
  
	background-color:rgb(255,248,221);
	border-color:rgb(255,201,14);
  }
	

	
.loading {
  background-image: url('ajax-loader.gif');
  background-repeat: no-repeat;
  background-position: right 30px center;
}






/* ------------------------------------------- End "Message" ------------------------------------------ */




/* ----------------------------------------- Begin "One line" ----------------------------------------- */

.one_line {
  overflow: hidden;
}

.one_line div {
  float: left;
  width: 33%;
  margin-right: 1%;
}

.one_line div:last-child {
  float: right;
  width: 32%;
  margin: 0;
}


.one_line_two div {
  float: left;
  width: 49%;
  margin-right: 1%;
}

.one_line_two div:last-child {
  float: right;
  width: 50%;
  margin: 0;
}

@media screen and (max-width:900px){
  .one_line div, .one_line div:last-child {
    width: 100%;
  }
}
@media screen and (max-width:600px){
  .one_line_two div, .one_line_two div:last-child {
    width: 100%;
  }
}




/* ------------------------------------------ End "One line" ------------------------------------------ */




/* --------------------------------------- Begin "Popup remove" --------------------------------------- */



.popup-background {
  background: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  
  
  
  display: flex;
  justify-content: center;
  align-items: center;  
  
  

}

.popup-box {
  background: #fff;
  
  /*
  background-image: url('icons/usun.svg');
  background-repeat: no-repeat;
  background-position: left 20px center;
  background-size: 80px;*/
  
  border-radius: 5px;
  padding: 20px 50px;
  width: 550px;
  margin: 50px auto;
  
  border-top: 35px solid #eee;
  text-align: center;
  
  animation-name: fadeInLeft;
  animation-duration: 0.5s;   
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 100px 0px;

}


.popup-area {
  padding: 10px 10px 50px 10px;
}

.popup-remove {
  display: none;
}

/*
.popup-bar {
  background:#eee;
}*/

.popup-buttons {
  width: 400px;
  margin: 0 auto;
  overflow: hidden;
}

.popup-no, .popup-yes {
  width: 120px;
  margin: 0 10px;
  padding: 5px 30px;
  border-radius: 5px;
  background: #ddd;
  display: inline-block;
  float: left;
  cursor: pointer;
  
}

.popup-no {
  background: rgb(113, 175, 163);
  color: #fff;
}

.popup-no:hover {
  background: rgba(113, 175, 163,0.9);
}

.popup-yes:hover {
  background: #ccc;
}


/* ---------------------------------------- End "Popup remove" ---------------------------------------- */




/* ------------------------------------------ Begin "Section" ----------------------------------------- */

.section {
   animation-name: fadeInDown;
  animation-duration: 0.5s;  
}

.sections {
  overflow: hidden;
  margin: 20px 0;
  padding: 0;
}

.sections li {
  border-radius: 50px;
  height: 50px;
  width: 50px;
  text-align: center;
    line-height: 50px;
  background: #eee;
  padding: 0;
  margin: 0 10px;
    float: left;
  list-style-type: none;
  cursor: pointer;
  
}

.sections li:hover {
 	background: #ddd; 
}

.sections li.active {
 	color: #fff; 
  background: rgb(113, 175, 163);
}

.sections li:first-child {
 	width: auto;
  background: none;
  cursor: default;
}


/* ------------------------------------------- End "Section" ------------------------------------------ */




/* ---------------------------------------- Begin "Select Icon" --------------------------------------- */

  .select_icon {
    overflow: hidden;
    border: 1px solid rgb(165, 168, 171);
    padding: 30px;
    border-radius: 2px;
    margin: 10px 0 25px 0;
  }
  
  .select_icon input {
    display: none;
  }
  
  .select_icon label {
    border: 1px solid #ddd;
    width: 100px;
    height: 100px;
    margin: 5px;
    border-radius: 5px;
    float: left;
    padding: 3px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60px;
    display: block;
  }
  
  .select_icon label:hover, .select_icon input[type=radio]:checked + label {
    padding: 0;
    border: 4px solid rgb(4, 69, 143);
    background-color: rgba(4, 69, 143,0.05);
  }


/* ----------------------------------------- End "Select Icon" ---------------------------------------- */




/* ------------------------------------------- Begin "Table" ------------------------------------------ */

.table_overflow {
  max-width:100%;
  overflow-x:auto;
}

table {
  margin: 30px 0;
  width: 100%;
  border-collapse: collapse;
  
  animation-name: fadeInLeft;
  animation-duration: 0.5s; 
  background: #fff;
  
}
td, th {
  border-width: 1px;
  border-style: solid;
  border-color: rgb(212, 212, 212);
  padding: 8px 15px;
  text-align: center;
}

/*
tr:nth-child(2n) td {
background-color: rgb(241, 241, 241);
}*/

th:first-child, td:first-child {
  text-align: left;
}

tr:hover td {
  background: rgb(240,240,240);
}

th[colspan], td[colspan] {
  text-align: center;
}

th a, th span {
  padding: 0 15px;
}



/* -------------------------------------------- End "Table" ------------------------------------------- */




/* ------------------------------------------- Begin "Tabs" ------------------------------------------- */

.tabs {
  margin: 30px 0;
  border-color: rgb(113, 175, 163); 
  border-style: solid;
  border-width: 0 0 6px 0;
  height: 47px;
  padding: 0;
}

.tabs li {
  list-style: none;
  padding: 7px 40px;
  display: inline-block;
  float: left;
  margin: 0 0 0 20px;
  background: #fff;
  cursor: pointer;
  border-width: 6px 1px 0 1px;
  border-style: solid;
  border-color: #eee #eee rgb(113, 175, 163) #eee;
  border-radius: 10px 10px 0 0;
}

.tabs li:hover {
  background: #f9f9f9; 
  border-color: rgb(113, 175, 163) rgb(113, 175, 163) #fff rgb(113, 175, 163);
}

.tabs li.active {
  border-width: 6px 1px 6px 1px;
  border-color: rgb(113, 175, 163) rgb(113, 175, 163) #fff rgb(113, 175, 163);
  background: #fff; 
}


/* -------------------------------------------- End "Tabs" -------------------------------------------- */




/* ------------------------------------------- Begin "Tiles" ------------------------------------------ */

.tiles {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.tiles li {
  width: 32%;
  margin: 0.5%;
  float: left;
  list-style: none;
  padding: 0;
  
  animation-name: fadeInLeft;
  animation-duration: 0.5s; 
}

@media (max-width: 1100px) {
.tiles li {
  width: 49%;
  margin: 0.5%;
}
}
@media (max-width: 700px) {
.tiles li {
  width: 99%;
  margin: 0.5%;
}
}








.tiles a {
  background: rgb(113, 175, 163);

  color: #fff;
  text-align: center;
  padding: 15px 30px;
  display: block;
}

.tiles a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(113,175,163,0.8);
}



/* -------------------------------------------- End "Tiles" ------------------------------------------- */




/* ----------------------------------------- Begin "Top Tools" ---------------------------------------- */



.top_tools {
  display: table;
  width: 100%;
  background: rgb(113, 175, 163);
}

.top_tools > div {
  display: table-cell;
  padding: 5px 0;
}

.top_tools > div:last-child {
  text-align: right;
}

.top_tools a {
  padding: 3px 10px 3px 10px;
  display: inline-block;
  /*
  line-height: 34px;
  */
  color: #fff;
}



/* ------------------------------------------ End "Top Tools" ----------------------------------------- */




/* ----------------------------------------- Begin "Translate" ---------------------------------------- */

  form.translate div {
    padding:  30px 0;
  }
  
  form.translate input[type="text"] {
    padding-left: 60px;
    background-repeat: no-repeat;
    background-position: left 15px center;
  }

.icon_pl {
    background-image: url('translate/pl.png');
  }
  .icon_en {
    background-image: url('translate/en.png');
  }
  .icon_ua {
    background-image: url('translate/ua.png');
  }
  .icon_sys {
    background-image: url('translate/sys.png') !important;
  }


/* ------------------------------------------ End "Translate" ----------------------------------------- */




/* --------------------------------------- Begin "Article popup" -------------------------------------- */

.my_box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: block;
}

.my_box > div {
  width: 1200px;
  height: 80%;
  margin: 50px auto;
  background: #fff;
  overflow: hidden;
}

.title_bar {
  background: #eee;
  padding: 0 12px;
  font-weight: bold;
  height: 40px;
  line-height: 40px;
}

.title_bar .close {
  float: right;
  width: 16px;
  height: 16px;
  margin: 12px 0;
  
  background: url('close.png');
  cursor: pointer;
}

.boxtable {
  overflow-y:auto;
  padding: 2%;
  height: calc(88% - 40px);
  width: 96%;
}



/* ---------------------------------------- End "Article popup" --------------------------------------- */