/** 
* jPowerTools
* 
* @author : Lab5 - Dennis Riegelsberger
* @authorUrl : https://lab5.ch
* @copyright : Copyright (C) 2015+  Lab5 - Dennis Riegelsberger. All rights reserved.
* @license : GNU/GPL General Public License version 2 or later
* @project : https://lab5.ch/jpowertools
* @on JED : https://extensions.joomla.org/extensions/extension/site-management/lab5-jpowertools/
* 
* Built with <3 
* Lab5
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */  


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
THE POPUP / MODAL
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


					/* * * * * * * * * * * *
					ANIMATIONS
					* * * * * * * * * * * */

							.cooco_popup_wrapper div.modal.fade {
								top: -50%;
								transition: opacity 0.3s linear, top 0.3s ease-out;
							}
							
							/* * * * * * * * * * * *
							BS old ( .in ) + BS new ( .show )
							* * * * * * * * * * * */
							.cooco_popup_wrapper div.modal.fade.in,
							.cooco_popup_wrapper div.modal.fade.show {
								top: 10%;
								opacity:1;
							}
					
					/* * * * * * * * * * * *
					OUTER FORM
					* * * * * * * * * * * */
								
								/* div[id$=cooco_modalwrap] div.modal { */
								.cooco_popup_wrapper div.modal {

													/* position: fixed;  */
													
													left: 50%;
													top: 10%;
													
													margin-left: -33vw;
													
								}
								
								@media (max-width: 979px) {

										/* div[id$=cooco_modalwrap] div.modal { */
										.cooco_popup_wrapper div.modal {
							
															margin-left: -40vw;
										}
								}
								
								@media (max-width: 767px) {

										/* div[id$=cooco_modalwrap] div.modal { */
										.cooco_popup_wrapper div.modal {
							
															margin-left: -44vw;
															top: 20px;
										}
										.cooco_popup_wrapper div.modal.fade {
															top: -100vh;
										}
										/* * * * * * * * * * * *
										BS old ( .in ) + BS new ( .show )
										* * * * * * * * * * * */
										.cooco_popup_wrapper div.modal.fade.in,
										.cooco_popup_wrapper div.modal.fade.show {
															top: 20px;
										}
								}
								
								@media (max-width: 560px) {

										.cooco_popup_wrapper div.modal {
							
															width: 100vw;
															left:0;
															margin:0;
										}
								}
								@media (max-width: 480px) {
									  .cooco_popup_wrapper div.modal {
												top: 0;
									  }
								}

					/* * * * * * * * * * * *
					HEADER
					* * * * * * * * * * * */

							.cooco_popup_wrapper .modal-header {
							  padding: 9px 15px;
							  border-bottom: 1px solid #eee;
							}

							.cooco_popup_wrapper .modal-header .close {
							  margin-top: 2px;
							}

							.cooco_popup_wrapper .modal-header h3 {
							  margin: 0;
							  line-height: 30px;
							}


					/* * * * * * * * * * * *
					BODY
					* * * * * * * * * * * */

							.cooco_popup_wrapper .modal-body {
							  position: relative;
							  max-height: 400px;
							  padding: 15px;
							  overflow-y: auto;
							}

					/* * * * * * * * * * * *
					FOOTER
					* * * * * * * * * * * */

							.cooco_popup_wrapper .modal-footer {
							  padding: 14px 15px 15px;
							  margin-bottom: 0;
							  text-align: right;
							  background-color: #f5f5f5;
							  border-top: 1px solid #ddd;
									  border-radius: 0 0 6px 6px;
							  *zoom: 1;
									  box-shadow: inset 0 1px 0 #ffffff;
							}

							.cooco_popup_wrapper .modal-footer:before,
							.cooco_popup_wrapper .modal-footer:after {
							  display: table;
							  line-height: 0;
							  content: "";
							}

							.cooco_popup_wrapper .modal-footer:after {
							  clear: both;
							}

							.cooco_popup_wrapper .modal-footer .btn + .btn {
							  margin-bottom: 0;
							  margin-left: 5px;
							}

							.cooco_popup_wrapper .modal-footer .btn-group .btn + .btn {
							  margin-left: -1px;
							}

							.cooco_popup_wrapper .modal-footer .btn-block + .btn-block {
							  margin-left: 0;
							} 

					/* * * * * * * * * * * *
					BACKGROUND
					* * * * * * * * * * * */

							.modal-backdrop {
							  position: fixed;
							  top: 0;
							  right: 0;
							  bottom: 0;
							  left: 0;
							  z-index: 1040;
							  /* background-color: red; */
							  /* background-color: #000000; */
							}

							.modal-backdrop.fade {
							  opacity: 0;
							}

							/* * * * * * * * * * * *
							BS old ( .in ) + BS new ( .show )
							* * * * * * * * * * * */
							.modal-backdrop.fade.in,
							.modal-backdrop.fade.show {
							  opacity: 0.8;
							  filter: alpha(opacity=80);
							}