/* transition */
.btn, .closer, .overlay {transition: all 0.2s;}

/* buttons */
.btn-box {overflow: hidden;}
.btn {height: 36px; display:inline-block; font-size: 13px; line-height: 36px; color: #fff; font-family: 'Roboto', sans-serif; float: left; margin: 0 12px 12px 0; padding: 0 24px; text-decoration:none; text-transform:uppercase; text-align:center; -webkit-border-radius: 6px; border-radius: 6px; border:0; background: transparent; cursor: pointer;}
.btn-default {border: solid 1px #357ebd; background: #428bca;}
.btn-success {border: solid 1px #4cae4c; background: #5cb85c;}
.btn-default:hover {border-color: #285e8e; background: #3276b1;}
.btn-success:hover {border-color: #398439; background: #47a447;}

/*--- CONTENT ---*/

.overlay {opacity: 0; visibility: hidden; position:fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 110; background: rgba(0,0,0,0.87);}
.dlg-modal {      overflow: scroll; z-index: 10000;
width: 60%; min-height: max-content; opacity: 0; visibility: hidden; position: fixed; left: 30%; top: 10px; z-index: 130; margin-left: -280px; padding: 47px 36px; background: whitesmoke; -webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.85); box-shadow: 0 0 20px rgba(0,0,0,0.85); filter: alpha(opacity=0);}
.dlg-modal-slide {top: -320px; visibility: visible; opacity: 1;}

.modal-outer {width: 760px; min-height: 460px; position: fixed; left: 20%; z-index: 120; margin-left: -380px; padding: 10px 0; background: #18181a;}
	.modal-outer > div {display: none; opacity: 1; visibility: visible; position: static; margin: 0 0;}

.closer {width: 40px; height: 40px; display: block; position: absolute; right: 5px; top: 5px; background: url('../popup/cross.png') no-repeat; cursor: pointer;}
.closer:hover {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

/* animation */
.fadeIn, .fadeOut, .slideInDown, .slideOutUp {-webkit-animation-duration: 0.4s; animation-duration: 0.4s; animation-timing-function: ease-out;}

@keyframes fadeIn {
	from {opacity: 0; visibility: hidden;}
	to {opacity:1; visibility: visible;}
}
.fadeIn {-webkit-animation-name: fadeIn; animation-name: fadeIn; opacity: 1; visibility: visible;}

@keyframes fadeOut {
	from {opacity: 1; visibility: visible;}
	to {opacity:0; visibility: hidden;}
}
.fadeOut {-webkit-animation-name: fadeOut; animation-name: fadeOut; opacity: 0; visibility: hidden;}

@keyframes slideInDown {
	from {top: -320px;}
	to {top: 180px;}
}
.slideInDown {-webkit-animation-name: slideInDown; animation-name: slideInDown; top: 180px;}

@keyframes slideOutUp {
	from {top: 180px;}
	to {top: -320px;}
}
.slideOutUp {-webkit-animation-name: slideOutUp; animation-name: slideOutUp; top: -320px;}

@media screen and (max-width: 800px) {
	.modal-outer {width: 620px; min-height: auto; margin-left: -310px; padding: 50px 0;}
		.modal-outer .dlg-modal {width: 420px;}
}

@media screen and (max-width: 640px) {
	.btn {height: 48px; line-height: 48px; padding: 0 36px;}
	.dlg-modal {width: 420px; margin-left: -210px;}
	.modal-outer {width: 480px; margin-left: -240px;}
		.modal-outer .dlg-modal {width: 300px; height: 150px;}
}

@media screen and (max-width: 480px) {
	.dlg-modal {width: 300px; margin-left: -150px;}
	.modal-outer {width: 320px; margin-left: -155px;}
		.modal-outer .dlg-modal {width: 290px; height: 150px;}
}


.closer_button {
    text-decoration: none;
    display: inline-block;
    position: relative;
    height: 40px;
    /*line-height: 40px;*/
    padding: 0 20px;
    color: black;
    font-size: 14px;
    background: #FCCC0A;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.closer_button:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: 0;
    right: 0;
    background: linear-gradient(225deg, black 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
    box-shadow: -1px 1px 1px rgba(0, 0, 0, .4);
    transition: .3s;
}


/*.close_urupor_window{*/
        /*Z-INDEX: 5; POSITION: absolute; BACKGROUND-COLOR: #000000; DISPLAY: none; TOP: 0px; left:0px; opacity: 0;*/
/*}*/

.urupor_popup_container{
  position: fixed;
  /*top: 0;*/
  /*left: 0;*/
  /*background: black;*/
  /*opacity: 0.7;*/
  /*display: none;*/
  /*width: 90%; !*Посмотрите на скролл*!*/
  height: 60%;
  overflow: scroll;
}

.urupor_popup{
    margin: 1%;
    height: 60%;
    /*position: absolute;*/
    /*margin-bottom: 30px;*/
    /*background: green;*/
    /*width: max-content;*/
    /*height: 90%;*/
    /*outline: 2px solid #000; !* Чёрная рамка *!*/
    /*border: 5px solid #fff; !* Белая рамка *!*/
    /*border-radius: 10px; !* Радиус скругления *!*/
}

.uprupor_overlay{
z-index: 100;
    position: fixed; /* Positioning and size */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(128,128,128,0.5); /* color */
    /*display: none; !* making it hidden by default *!*/
}

.unread_urupor_news_feed {
    background-image: url('../img/icon_unread_notification.png');
    background-size: 10px;
    height: 10px;
    display: inline-block;
    width: 10px;
    href:'/pages/detailed/UruporNewsFeedView/';
}

.urupor_news_feed{
    background-image: url('../img/icon_notification.png');
    background-size: 10px;
    height: 10px;
    display: inline-block;
    width: 10px;
    href:'/urupor/UruporNewsFeedView/';

}

.hidden_unf{
    visibility: hidden;
    width: 0px !important;
        height: 0px !important;

}