.bluefon {
               /*background-image: url("/resources/img/background/goluboy-fon-9560.jpg");*/
               background-color: #ededed;"
        }
a.selecteded
 {
    color: red;
 } 
._menu_title
  {
    padding-left:22px;
    text-decoration: none;
    font-size: 20px;
    font-weight:bolder;
    color: #000000;  /* #2196F3*/
    display: block;
    line-height: 25px;
    /*transition: 0.3s;*/
    /*background-color: blue;*/  
  }       
._sidenav a {
    padding-left:22px;
    text-decoration: none;
    font-size: 16px;
    font-weight:bolder;
    color: #000000;    /*#4CAF50; #2196F3*/
    display: block;
    line-height: 24px;
    /*transition: 0.3s;*/
    /*background-color: blue;*/
}
._sidenav a.selected,a.selecteded
 {
    background-color: #3399ff;; /*#4CAF50; */
    color: white;
 }
._sidenav a:hover {
background-color: #ccc;  /*#ccc*/
}
        
.ui-dialog-titlebar
 {
 	/*float:left;margin:.1em 0;
 	white-space:nowrap;width:90%;
 	overflow:hidden;
 	text-overflow:ellipsis;*/
 	background-image: url("/resources/img/background/goluboy-fon-9560.jpg");
 }
.ui-dialog .ui-dialog-titlebar-close
 {
       /*background: lightblue url("/resources/img/pop_up/close.gif") no-repeat fixed center;*/
       background-image: url("/resources/img/pop_up/close.gif");
       background-repeat: no-repeat;
       background-size: 20px 20px;
       background-position: center;
       background-color: blue;
 }
.ui-dialog-buttonset button
 {
 	/*background-color: #99ccff;*/
 	background-image: url("/resources/img/background/goluboy-fon-9560.jpg");
 }
 /* The Modal (background) */
.pcmodal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.pcmodal-content {
    background-color: #fefefe;
    margin: auto;
    /*padding-top: 20px;*/
    border: 1px solid #888;
    width: 35%;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}


/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    background-image: url("/resources/img/background/goluboy-fon-9560.jpg");
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 33%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.pcclose {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.pcclose:hover,
.pcclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color:#4da6ff; /* #5cb85c;*/
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #4da6ff; /* #5cb85c;*/
    color: white;
}
.image_container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.image_container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.button-active {
  padding: 5px 15px;
  /*font-size: 24px;*/
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #000d1a
  /*background-color: #4CAF50;*/
  background-image: url("/resources/img/background/goluboy-fon-9560.jpg");
  border: none;
  border-radius: 4px;
  box-shadow: 0 4px #999;
}

.button-active:hover {background-color: #3e8e41}

.button-active:active {
  /*background-color: #3e8e41;*/
  box-shadow: 0 3px #666;
  transform: translateY(4px);
  color: #fff;
}
.refresh_button
 {
     border-width: 0px;
     /*border-color: red;*/
 }
.xxrefresh_button::before
 {
     content:"123" ;
 }
 .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 190px;    
    background-color: #d9d9d9;
    color: #0d0d0d;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.tooltip .tooltiptext_right {
    top: -5px;
    left: 115%; 
}
.tooltip .tooltiptext_left {
    top: -5px;
    right: 115%; 
}
.tooltip .tooltiptext_top {
    bottom: 125%;
    left: 50%; 
    margin-left: -95px; /* Use half of the width (120/2 = 60), to center the tooltip */ 
}
.tooltip .tooltiptext_bottom {
    top: 125%;
    left: 50%; 
    margin-left: -95px; /* Use half of the width (120/2 = 60), to center the tooltip */ 
}
.tooltip .tooltiptext_left::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #f2f2f2 transparent transparent #d9d9d9;
}
.tooltip .tooltiptext_right::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #f2f2f2 #d9d9d9 transparent transparent;
}
.tooltip .tooltiptext_bottom::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #d9d9d9 transparent #d9d9d9 transparent;
}
.tooltip .tooltiptext_top::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #d9d9d9 transparent transparent transparent;
}