/* General
 ========================================================================== */
.api-reviews *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.api-reviews {
    padding-top: 25px;
    margin-top: -25px;
    border-top: 2px solid #eef1f3;
}
.api-reviews--nm {
    margin-top: 0;
    border-top: none;
}

.api-reviews .api-block-header{ 
    display: flex;
    justify-content: space-between;
    padding-bottom: 25px;
    border-bottom: 2px solid #eef1f3;
}

.api-reviews .api-block-header-left {
    max-width: 780px;
    width: 100%;
}

.api-reviews .api-block-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}

.api-block-header-link {
    color: #acacaf;
}

.api-reviews .api-block-title{ 
    margin-bottom: 25px;
}

.api-reviews .api-block-title:after {content: "";display: table;clear: both;}

.api-reviews .api-block-title .api-block-left{
    font-weight: bold; 
    font-size: 24px; 
}
.api-reviews .api-block-title .api-block-left h2{display: inline-block; }
.api-reviews .api-block-title .api-block-right{float: right; text-align: right}

.api-reviews .api-block-subtitle {
    margin-bottom: 25px;
    font-size: 16px;
}

.api-reviews .api-block-header .api-reviews-stat,
.api-reviews .api-block-header .api-reviews-form{ float: left; width: 100%; padding-left: 10px; }

.api-reviews .api-block-footer {
    max-width: 780px;
    width: 100%;
    padding-top: 18px;
}

.api-reviews .api-block-footer-title {
    display: block;
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 24px;
}

.api-reviews .api-block-sort{
    padding: 10px;
    background: #f0fafb;
}

.api-reviews .api-block-content {
    max-width: 780px;
    width: 100%;
}

.api-reviews  .api-field-files a{
	position: relative;
	text-decoration: none;
	display: inline-block;
	vertical-align: top;
	margin: 6px 6px 6px 0;
	border: 1px solid rgba(0, 0, 0, .1);
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.api-reviews  .api-field-files a[data-video-format] .api-file-outer {
    background-image: url("/local/img/main_redisign/video_plug.jpg");
    background-size: cover;
}
.api-reviews  .api-field-files a[data-video-format] .api-file-content {
    color: #fff;
}
.api-reviews  .api-field-files a:hover{
	border: 1px solid rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 0 2px rgba(0, 0, 0, .2);
	box-shadow: 0 0 2px rgba(0, 0, 0, .2);
}
.api-reviews  .api-field-files .api-file-outer{
	border: 1px solid #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.api-reviews  .api-file-content{
	font-size: 13px;
	line-height: 15px;
	max-height: 30px;
	overflow: hidden;
	display: block;
}
.api-reviews  .api-file-thumbnail{
	display: block;
	width: 114px;
	height: 72px;
	background-size: contain;
	background-position: center;
	background-color: rgba(0,0,0,.05);
	background-repeat: no-repeat;
	overflow: hidden;
	position: relative;
}
.api-reviews  .api-file-attachment{
	display: block;
	width: 114px;
	height: 72px;
	background: #eeece9;
	color: #000;
	padding: 5px 7px;
	overflow: hidden;
	position: relative;
	-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;
}
.api-reviews  .api-file-extension{
	display: block;
	padding: 0 4px;
	text-transform: uppercase;
	color: #fff;
	position: absolute;
	bottom: 5px;
	left: 5px;
	background: #60605a;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
	-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;
}

.api-reviews  .api-file-delete{
	display: block;
	position: absolute;
	z-index: 1;
	right: -10px;
	top: -10px;
	width: 16px;
	height: 16px;
	background: #FFF;
	color: #000;
	opacity: .75;
	filter: alpha(opacity=75);
	line-height: 16px;
	font-size: 20px;
	font-family: sans-serif;
	text-align: center;
	cursor: pointer;
	-webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;
	-webkit-transition: all 50ms linear 0s; -moz-transition: all 50ms linear 0s; -ms-transition: all 50ms linear 0s; -o-transition: all 50ms linear 0s; transition: all 50ms linear 0s;
}
.api-reviews  .api-file-delete:hover{
	background: #F00;
	color: #FFF;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
}
.api-reviews  .api-file-delete:active{
	opacity: .3;
	filter: alpha(opacity=30);
}

/* personal reviews */
.user_reviews .api-reviews .api-block-title .api-block-left {
    font-size: 20px;
}

.user_reviews .api-reviews .api-block-content {
    max-width: 100%;
}

/* video styles */
.api-reviews .video__popup {
	position: relative;
	text-decoration: none;
	display: inline-block;
	vertical-align: top;
    cursor: pointer;
	margin: 0 6px 6px 0;
	border: 1px solid rgba(0, 0, 0, .1);
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.api-reviews .video__popup:hover{
	border: 1px solid rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 0 2px rgba(0, 0, 0, .2);
	box-shadow: 0 0 2px rgba(0, 0, 0, .2);
}

.api-reviews .video__popup svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.api-reviews .video__popup-content {
    width: 100%;
    height: 100%;
}

.api-reviews .video__popup-content video,
.api-reviews .video__popup-content img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.api-reviews .api-file-ext-mp3,
.api-reviews .api-file-ext-wav,
.api-reviews .api-file-ext-midi,
.api-reviews .api-file-ext-snd,
.api-reviews .api-file-ext-au,
.api-reviews .api-file-ext-wma,
.api-reviews .api-file-ext-ogg,
.api-reviews .api-file-ext-aac,
.api-reviews .api-file-ext-flac,
.api-reviews .api-file-ext-cda{background: #23a9db;}

.api-reviews .api-file-ext-mpg,
.api-reviews .api-file-ext-avi,
.api-reviews .api-file-ext-wmv,
.api-reviews .api-file-ext-mpeg,
.api-reviews .api-file-ext-mpe,
.api-reviews .api-file-ext-flv,
.api-reviews .api-file-ext-mkv,
.api-reviews .api-file-ext-mov,
.api-reviews .api-file-ext-wma,
.api-reviews .api-file-ext-mp4,
.api-reviews .api-file-ext-xvid,
.api-reviews .api-file-ext-asf,
.api-reviews .api-file-ext-divx,
.api-reviews .api-file-ext-vob{background: #7e70ee;}
.api-reviews .api-file-ext-swf{background: #A42222;}

.api-reviews .api-file-ext-odt,
.api-reviews .api-file-ext-doc,
.api-reviews .api-file-ext-docx{background: #03689b;}

.api-reviews .api-file-ext-csv,
.api-reviews .api-file-ext-ods,
.api-reviews .api-file-ext-xls,
.api-reviews .api-file-ext-xlsx{background: #5bab6e;}

.api-reviews .api-file-ext-odp,
.api-reviews .api-file-ext-ppt,
.api-reviews .api-file-ext-pptx{background: #f1592a;}

.api-reviews .api-file-ext-rar,
.api-reviews .api-file-ext-tar,
.api-reviews .api-file-ext-7zip,
.api-reviews .api-file-ext-zip{background: #867c75;}

.api-reviews .api-file-ext-djvu,
.api-reviews .api-file-ext-epub,
.api-reviews .api-file-ext-tiff,
.api-reviews .api-file-ext-xps{background: #3468b0;}
.api-reviews .api-file-ext-pdf{background: #d00;}

.api-reviews .api-file-ext-txt{background: #a4a7ac;}
.api-reviews .api-file-ext-rtf{background: #a94bb7;}

.api-reviews .api-file-ext-app{background: #ed558f;}
.api-reviews .api-file-ext-php{background: #8993BE;}
.api-reviews .api-file-ext-js{background: #d0c54d;}
.api-reviews .api-file-ext-css{background: #44afa6;}

.api-reviews .api-file-ext-jpeg,
.api-reviews .api-file-ext-jpg{background: white;}

.api_upload .api_progress.api_active + .api_file_remove{
    display:none;
}
/* Adobe */
.api-reviews .api-file-ext-psd{background: #26cdf7;}
.api-reviews .api-file-ext-ae{background: #d4a6ff;}
.api-reviews .api-file-ext-au{background: #00dfb9;}
.api-reviews .api-file-ext-an{background: #ff4926;}
.api-reviews .api-file-ext-ai{background: #ff7e19;}
.api-reviews .api-file-ext-ic{background: #fc64f6;}
.api-reviews .api-file-ext-id{background: #ff3f8d;}
.api-reviews .api-file-ext-mu{background: #d0e73e;}
.api-reviews .api-file-ext-pr{background: #e383ff;}

/* buttons restyling */
.api_button_primary{
    border-color:#3158b4;
    background-color:#3158b4;
    transition: background-color .3s, color .3s;
}
.api_button_primary:hover{
    border-color: #3158b4;
    color: #3158b4;
    background-color: white;
}
.api_alert .api_buttons .api_button{
    line-height:1.5;
}
.api_alert .api_buttons .api_button:not(:last-child){
    margin-bottom:12px;
}

/* Display
 ========================================================================== */
.api-hidden{ display: none !important; visibility: hidden !important; }
.api-display-block{ display: block !important; }
.api-display-inline{ display: inline !important; }
.api-display-inline-block{ display: inline-block !important; }

/* Wait
 ========================================================================== */
#api-reviews-wait{ display: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 9999; overflow: hidden; }

.api-reviews .api_modal .api_spinner circle{
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}
/* @media
 ========================================================================== */
@media (max-width: 768px){
	.api-reviews .api-block-title > div{width: 100% !important; float: none !important; text-align: left !important;}
}

@media (max-width: 1279px) {
    .api_alert .api_buttons .api_button:not(:last-child){
        margin-bottom:0;
    }
}
@media (max-width: 960px) {
    .api-reviews .api-block-top{
        margin: 0 0 15px; 
        background: #fff;	
        -webkit-border-radius:4px; 
        -moz-border-radius:4px; 
        border-radius:4px;
        -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .25); 
        -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, .25); 
        box-shadow: 0 3px 3px rgba(0, 0, 0, .25);
    }

    .api-reviews .api-block-title {
        margin: unset;
        padding: 10px 20px;
        line-height: 32px;
        background: #f8f8f8;
    }

    .api-reviews .api-block-title .api-block-left {
        font-size: 20px;
    }

    .api-reviews .api-block-sort {
        padding: 13px 20px 10px;
        border-top: 1px solid #f0f0f0;
        background: #f8f8f8;
    }

    .api-reviews .api-block-header{ 
        padding: 20px;
        flex-direction: column;
    }

    .api-reviews-sort {
        font-size: 13px;
        overflow: hidden;
    }

    .api-reviews-sort .api-left {
        display: block;
    }

    .api-reviews-sort .api-left::before {
        content: unset;
    }

    .api-reviews-sort .api-sort-label {
        float: left;
        margin: 0 15px 5px 0;
    }

    .api-reviews-sort a {
        text-decoration: none !important;
        position: relative;
        margin: 0 40px 5px 0;
        border-bottom: 1px dotted #333;
        font-size: 13px;
        color: #444;
        display: block;
        float: left;
    }

    .api-reviews-sort a:after {
        content: " ";
        position: absolute;
        display: block;
        right: -22px;
        top: 50%;
        margin-top: -3px;
        width: 17px;
        height: 12px;
        background: url(/bitrix/images/api.reviews/sprite.png) no-repeat 0 0 transparent;
    }

    .api-reviews-stat .api-left-stat {
        width: 50%;
    }

    .api-reviews-stat .api-right-stat {
        width: 50%;
        max-width: unset;
    }

    .api-reviews-stat .api-title {
        font-size: 14px;
    }

    .api-reviews-stat .api-average {
        width: 75px;
        height: 75px;
        margin: 15px 0;
    }

    .api-reviews-stat .api-average-rating {
        margin-right: 5px;
        font-size: 38px;
    }

    .api-reviews-stat .api-info .api-icon-star {
        transform: unset;
    }

    .api-reviews-stat .api-info .api-info-progress {
        height: 15px;
        border-radius: 2px;
        overflow: hidden;
    }

    .api-reviews-stat .api-info .api-info-row + .api-info-row {
        margin-top: 5px;
    }

    .api-reviews-form .api-shop-stat {
        align-items: center;
        padding-top: 20px;
    }

    .api-reviews-form .api-shop-stat .api-button {
        min-height: 44px;
        padding: 0 20px;
        border-radius: 3px;
        text-transform: none;
        font-size: 18px;
        box-shadow: -1px 1px 2px rgba(0, 0, 0, .28);
    }
}