/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 25/01/2023, 12:54:39 PM
    Author     : Raymundo
*/
.alto_100_p .controlador .modal-content.modal-content-with-content{
    height: 100vh;
    padding: 30px;
}
.modal-with-content {
    position: fixed;
    top: 50%;
    left: calc(50%);
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 99vw;
    max-width: 1000px;
    height: 66vh;
    overflow: hidden;
}
.modal-dialog-with-content {
    height: 100%;
    width: 100%;
    margin: 0;
}
.modal-content-with-content {
    margin: 0;
    width: 98%;
    max-height: 87vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.modal-header-with-content{
    height: auto;
    padding-top: 0px !important;
    border-bottom: none !important;
}
.modal-body-with-content{
    flex: 1;
    overflow-y: auto;
}
.modal-footer-with-content {
    height: auto;
    border-top: none !important;
}
@media only screen and (min-width: 1080px) {
    .modal-with-content {
        position: fixed;
        top: 50%;
        /*left: calc(50% + 75px);*/
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
    }
}
tags-input .tags{
    padding: 0px !important;
    border: 1px solid var(--shade-greys-border-line) !important;
    border-radius: 6px !important;
}
tags-input.ng-invalid .tags{
    border: 1px solid var(--tone-red) !important;
    box-shadow: none !important;
}
#contactos .tags{
    border-radius: 6px !important;
}
.grey-border-input.modal-select{
    border-radius: 6px !important;
}
.states-modal-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.states-modal-container-three{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
@media only screen and (max-width: 480px) {
    .states-modal-container-three{
        grid-template-columns: 1fr;
    }
}
.cancel-modal{
    border: none !important;
    color: var(--neutral-dark) !important;
}
.cancel-modal:hover{
    background-color: var(--shade-greys-input-border) !important;
}
.modal-edit .input-group-addon{
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}
.modal-edit .control-label{
    margin: 0px;
}
.states-modal-fluid{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
md-dialog{
    padding: 24px;
}
md-toolbar {
    min-height: initial;
}
.md-button.md-icon-button {
    padding: 0px;
}
.md-toolbar-tools {
    height: initial;
}
.dialog-width-50{
    width:50%;
}
@media only screen and (max-width: 769px) {
    .dialog-width-50{
        width: 80%;
    }
}
@media only screen and (max-width: 769px) {
    .dialog-width-50 md-dialog .md-dialog-content {
        padding: 16px;
    }
}
.md-dialog-content .content-buttons{
    display: flex;
    justify-content: center;
    gap:10px;
}
@media only screen and (max-width: 769px) {
    .md-dialog-content .content-buttons{
        flex-direction: column;
        align-items: center;
    }
}
@media only screen and (max-width: 1024px) {
    .modal-content-with-content.height-resp-max{
        max-height: 80vh;
    }
}
@media only screen and (max-width: 769px) {
    .modal-content-with-content .height-resp-max{
        max-height: 80vh;
    }
}

@media only screen and (max-width: 1024px) {
    .modal-content-with-content-kit.height-resp-max{
        max-height: 80vh;
    }
}
@media only screen and (max-width: 769px) {
    .modal-content-with-content-kit .height-resp-max{
        max-height: 80vh;
    }
}