/***
***
MODAL STYLES
***
*/

.modal a{

}

#modal h2{
    border-bottom:1px solid #F2F2F2;
    padding:5px;
    color:white;
}

#modal {
    width:60%;
    background-color: #fff;
    box-shadow: 0 0 10px #fff;
    overflow-y: hidden;
    position:fixed;
    z-index:99;
    min-height:400px;
    top:115px;
    left:20%;
    display:none;
    transition: transform 0.3s ease-out;


}
#modal-success{
    width:40%;
    background-color: #fff;
    box-shadow: 0 0 10px #fff;
    overflow-y: hidden;
    position:fixed;
    z-index:99;
    height:auto;
    top:115px;
    left:30%;
    display:none;
    transition: transform 0.3s ease-out;

}

#overlay{

    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.85);
    position:absolute;
    top:0;
    left:0;
    z-index: 10;
    display:none;


}
#overlay-success{
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.85);
    position:absolute;
    top:0;
    left:0;
    z-index: 10;
    display:none;


}
.modal-head{
    padding:20px;
}

#modal .modal-close{
    position:absolute;
    right:5px;
    top:5px;
    font-size:16px;
    font-weight:bold;
    background:#cc3333;
    padding:5px 8px;
    border: 1px solid #fff;
    color:white;
    opacity:1;
    cursor: pointer;
    transition:all 0.2s ease-out;
}

#modal-success .modal-close{

    position:absolute;
    right:5px;
    top:5px;
    font-size:16px;
    font-weight:bold;
    background:#cc3333;
    padding:5px 8px;
    border: 1px solid #fff;
    color:white;
    opacity:1;
    cursor: pointer;
    transition:all 0.2s ease-out;
}

.modal-pata{
    min-height:10px;
    padding:10px;
    box-sizing: border-box;
    overflow:hidden;
}

.header-modal{
    min-height:20px;
    width:100%;
    overflow:hidden;
    padding:20px;
    background-color:rgba(0,0,0,0.8);
    color:white;
}

.modal-cart-info{
    border-right:3px solid black;

}

.button-display-right{
    float:right;
}

#modal img {
    border:1px solid #F2F2F2;
}

.alert-success{
    padding:10px;
    font-size:16px;
    background-color:white;
    color:green;
    box-shadow:0 0 1px black;
    font-weight:bold;
}

#modal ::selection{
    background:none;
}

.success-items {


}
.success-ship {


}
.success-total{



}

.modal-items{
    letter-spacing:2px;
    font-size:16px;
    font-weight:bold;


}

.alert{
    background:transparent;
    font-size:16px;
}


@media (max-height: 500px){
    #modal-success{
        margin:0 auto;
        max-height: 70vh;
        overflow-y: auto;

    }
    #modal{
        margin:0 auto;
        max-height: 70vh;
        overflow-y: auto;
    }
}

@media (min-height: 300px){
    #modal-success{
        margin:0 auto;
        max-height: 70vh;
        overflow-y: auto;

    }
    #modal{
        margin:0 auto;
        max-height: 70vh;
        overflow-y: auto;

    }
}

@media (max-width: 950px){

    body,html{
    }

    #modal-success{
        width:100%;
        max-height: 70vh;
        overflow-y: auto;
        margin:10px 0;
        left:0;
        right:5px;
    }
    .added-product{
        float:left;
    }
    #modal {
        overflow-y:scroll;
    }

}

@media(min-width: 715px){
    #modal .tovar_view_description{
        clear:both;
        display:block;
        width:100%;
        border:0;
        padding-top:10px;
    }
}

@media (max-width: 1099px){

    #modal-success{
        width:100%;
        max-height: 70vh;
        overflow-y: auto;
        margin:10px 0;
        left:0;
        right:5px;

    }
}


@media (max-width: 550px){
    .display-float-right{
        float:none;
    }
    .modal-pata{
        display:block;
        margin-left:15%;

    }
    .modal-pata a{
        margin-top:5px;
    }

    #modal {
        width:100%;
        left:0;

    }


    #modal-success{
        width:100%;
        max-height: 70vh;
        overflow-y: auto;
        margin:10px 0;
        left:0;
        right:5px;

    }
}