/* ------------------------------ */
/*             Popup              */
/* ------------------------------ */

.popup-background {
    position: fixed;
    top: 0px;
    left: 0px;
    display: none;
	background: rgb(var(--popup-color-rgb-2) / 20%);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    height: 100%;
    min-height: 100%;
    width: 100%;
    z-index: 9;
} 

.popup {
	position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
	justify-content: space-between;	
	
	background: linear-gradient(156.91deg, 
	                            rgb(var(--popup-color-rgb-3) / 70%) 6.47%, 
	                            rgb(var(--popup-color-rgb-3) / 90%) 75.58%);	                    	
    
    mix-blend-mode: normal;
	font-family: Montserrat Regular;
    
   	min-height: calc(100% - 150px);
   	max-height: calc(100% - 150px);
    
    min-width: 820px;
    max-width: 820px;

    margin-right: -50%;
    transform: translate(-50%, -50%);

    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    
    
	-webkit-box-shadow: 0px 4px 12px 0px rgb(0 0 0 / 20%);
    -moz-box-shadow: 0px 4px 12px 0px rgb(0 0 0 / 20%);
    box-shadow: 0px 4px 12px 0px rgb(0 0 0 / 20%);
}

/* pinta as barras de rolagem no desktop */

.popup * {
  scrollbar-width: thin;
  scrollbar-color: var(--popup-color-2);
}

.popup *::-webkit-scrollbar-track {
  background: transparent;
}

.popup *::-webkit-scrollbar-thumb {
  background-color: var(--popup-color-2);
  border-radius: 20px;
}

.popup svg path[stroke^="#"] {
   	stroke: var(--popup-color-3);
}

.popup svg path[fill^="#"] {
   	fill: var(--popup-color-3);
}

.popup ul {
	list-style: none;
}

.popup-header {
	position: absolute;
}

.popup-titulo {
    display: flex;
    align-items: center;
    
    background-color: var(--popup-color-2);
    color: var(--popup-color-3);
    
    -webkit-border-top-left-radius: 25px;
    -moz-border-top-left-radius: 25px;
    border-top-left-radius: 25px;

    -webkit-border-top-right-radius: 25px;
    -moz-border-top-right-radius: 25px;
    border-top-right-radius: 25px;
}

.popup-titulo .titulo {
	display: flex;
    align-items: center;
    justify-content: center;	
    font-size: 36px;
    font-weight: bold;
    line-height: 40px;
    word-wrap: break-word;
    text-align: center;
    min-height: 95px;
    width: calc(100% - 65px);
}

.popup-titulo svg {
	min-height: 48px;
	max-height: 48px;
	min-width: 48px;
	max-width: 48px;
    margin-right: 20px;
    margin-left: 20px;
}

.popup-titulo svg path[fill^="#"] {
    fill: var(--popup-color-3);
}

.popup-titulo svg path[stroke^="#"] {
    stroke: var(--popup-color-3);
}

.popup-titulo .botao-fechar {
    cursor: pointer;
}

.popup-body {
	flex: 1;
	color: var(--popup-color-2);
	font-size: 18px;
	padding: 30px;
	overflow-x: hidden;
    overflow-y: auto !important;
    scroll-behavior: smooth;
}

.popup-body .button-cadastrar {
    background-color: #1F7A4D;
    color: #FCFABE;
    box-shadow: inset 0 0 0 2px #FCFABE;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding: 15px;
    padding-left: 25px;
    padding-right: 25px;
    margin-top: 20px;
    
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

.popup-body .button-cadastrar:hover {
	background-color: #77c368;
    color: #FCFABE;
    box-shadow: inset 0 0 0 2px #FCFABE;
}

.popup-body form {
	padding-right: 0px !important;
}

#popup-footer {
    display: flex;
	flex-direction: column;

    background-color: var(--popup-color-2);
    color: var(--popup-color-3);

    font-size: 26px;
    font-weight: bold;
	
	margin-left: -1px;
    margin-right: -1px;
    margin-bottom: -1px;    
    
	-webkit-border-bottom-left-radius: 25px;
    -moz-border-bottom-left-radius: 25px;
    border-bottom-left-radius: 25px;

	-webkit-border-bottom-right-radius: 25px;
    -moz-border-bottom-right-radius: 25px;
    border-bottom-right-radius: 25px;

    cursor: pointer;

    z-index: 1000;
}

#popup-footer .action-buttons-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 4px;
    padding-bottom: 4px;
}

#popup-footer .action-buttons-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--popup-color-3);
    border-right: 2px solid var(--popup-color-1);
    width: 100%;
    padding-top: 21px;
    padding-bottom: 21px;
    cursor: pointer;
}

#popup-footer .action-buttons-button:last-child, #popup-footer .action-buttons-button.no-separator {
    border-right: 0px solid var(--popup-color-1);
}

#popup-footer .action-buttons-button .icon {
	display: flex;
}

#popup-footer .action-buttons-button svg {
    color: var(--popup-color-3);
    min-height: 32px;
    max-height: 32px;
    min-width: 32px;
    max-width: 32px;
	margin-right: 10px; 
}

#popup-footer .action-buttons-button .label {
    font-size: 20px;
    font-weight: bold;
    color: var(--popup-color-1);
    background-color: transparent;
}

/* ------------------------------ */
/*          Modal Popup           */
/* ------------------------------ */

.popup-modal .popup-titulo {
	display: flex;
	justify-content: center;
	padding-top: 10px;
    padding-bottom: 10px;
}

.popup-modal .popup-titulo svg {
	min-height: 64px;
    max-height: 64px;
    min-width: 64px;
    max-width: 64px;	
}

.popup-modal .modal-titulo {
    color: var(--popup-color-2);
	border-bottom: 1px solid rgb(var(--popup-color-rgb-2) / 20%) !important;
	font-size: 22px;
	line-height: 30px;
	font-weight: bold;
	word-break: break-word;
	text-align: center;
	padding: 10px;
}

.popup-modal .popup-body {
    color: var(--popup-color-2);
	font-size: 20px;
	min-height: 260px;
    max-height: 260px;
}

/* ------------------------------ */
/*   Regras somente para DESKTOP  */
/* ------------------------------ */

@media only screen and (min-width: 1285px) {
	
	#popup-footer .action-buttons-button:hover .label {
        color: var(--popup-color-4);
    }

	#popup-footer .action-buttons-button:hover svg path[stroke^="#"] {
	   	stroke: var(--popup-color-4);
	}
	
	#popup-footer .action-buttons-button:hover svg path[fill^="#"] {
	   	fill: var(--popup-color-4);
	}

	.popup-modal .popup {
		min-height: auto;
	    min-width: 500px;
	    max-width: 500px;
	}
	
}

/* ------------------------------ */
/*      Quebras aleatórias        */
/* ------------------------------ */

@media only screen and (max-width: 840px) {
	
	.popup {
		height: 100%;
	    min-height: 100% !important;
	    min-width: 100% !important;
	    max-width: 100% !important;
	    position: relative;
	    top: 0px;
	    left: 0px;
	    margin-right: 0px;
	    transform: translate(0%, 0%);
	    -webkit-border-radius: 0px;
	    -moz-border-radius: 0px;
	    border-radius: 0px;
	}
	
	.popup-titulo {
	    margin-top: 0px;
	    -webkit-border-radius: 0px;
    	-moz-border-radius: 0px;
    	border-radius: 0px;
	}	
	
	.popup-titulo .titulo {
		font-size: 36px;
		padding-top: 10px;
        padding-bottom: 10px;		
	}
	
	#popup-footer {
		-webkit-border-bottom-left-radius: 0px;
	    -moz-border-bottom-left-radius: 0px;
	    border-bottom-left-radius: 0px;

		-webkit-border-bottom-right-radius: 0px;
	    -moz-border-bottom-right-radius: 0px;
	    border-bottom-right-radius: 0px;
	}

	.popup-modal .popup {
		display: flex;
        justify-content: flex-start;
	}

	.popup-modal .popup-body {
		min-height: unset;
	    max-height: unset;
	}
	
}

/* ------------------------------ */
/*    limite DESKTOP -> PHONE     */
/* ------------------------------ */

@media only screen and (max-width: 650px) {

	html {
		padding-right: 0px !important;
	}
	
	body {
		position: relative;
	}

	.popup-titulo .titulo {
		font-size: 30px;
	    line-height: 34px;
	    width: calc(100% - 90px);
	    padding-top: 10px;
        padding-bottom: 10px;
	}
	
	.popup-titulo svg {
	    margin-right: 10px;
	    margin-left: 10px;
	}

	.popup-body {
		padding: 10px;
		padding-top: 20px;
        padding-bottom: 20px;
	}

	.popup-body .button-cadastrar {
	    font-size: 16px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 20px;	    
	}
	
}

/* ------------------------------- */
/* iPhone 5 / 5S / SE (1ª geração) */
/* ------------------------------- */

@media only screen and (max-width: 320px) {

	.popup-titulo .titulo {
		font-size: 25px;
        line-height: 29px;
	}
	
}