/*
 * 
 * Made by David Blanco
 * 
 */

/* ====================================================================== *
        MODAL
 * ====================================================================== */      

    .select2-picker-modal{
        width: 80%;
        height: 90%;
        padding: 0px;
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 99999999;
      
        /*
        -webkit-backface-visibility : hidden;
        -moz-backface-visibility    : hidden;
        backface-visibility         : hidden;
        */
        visibility                  : hidden;

        opacity: 0;

        -webkit-transition: opacity 0.3s;
        -moz-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }
    
    .select2-picker-modal .fa-window-close{
        position: absolute;
        z-index: 9999999;
        top: 5px;
        right: 5px;
        font-size: 20px;
        cursor: pointer;
        color: #303641;
    }

    .select2-picker-content{
        background: white;
        border-radius: 0px;
        padding: 30px;
        overflow-y: scroll;
        width: 100%;
        max-height: 100%;
        position: absolute;
        top: 50%;
        
        -webkit-transform   : translateY(-50%);
        -moz-transform      : translateY(-50%);
        -ms-transform       : translateY(-50%);
        transform           : translateY(-50%);
    }

    .select2-picker{
        padding: 10px;
    }
  
/* ====================================================================== *
        MODAL BACKGROUND
 * ====================================================================== */    

    .select2-picker-background{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999998;
        background: rgba(48, 54, 65, 0.94);
        visibility: hidden;
        opacity: 0;

        -webkit-transition  : all 0.3s;
        -moz-transition     : all 0.3s;
        transition          : all 0.3s;
    }
  
/* ====================================================================== *
        SHOW CLASS
 * ====================================================================== */      

    .s2p-show{
        visibility: visible;
        opacity: 1;
    }

    .s2p-show ~ .select2-picker-background {
        opacity: 1;
        visibility: visible;
    }

  
/* ====================================================================== *
        PICKER GRID
 * ====================================================================== */      

    .select2-picker-search{
        margin-bottom: 20px
    }
    
    .select2-picker-search input{
        text-align: center;
    }

    .select2-picker-grid{
        margin: 0 -20px -20px 0px;
        overflow: hidden;
    }

    .select2-picker-item{  
        width: 25%;
        float: left;
        padding: 0px 20px 20px 0px;
    }

    .select2-picker-box{
        text-align: center;
        background: white;
        color: #373e4a;
        height: 50px;
        border: 1px solid #e5e5e5;
        height: 65px;
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center;
        cursor: pointer;
        padding: 10px;
        position: relative;
    }

    .select2-picker-box.selected{
        background: #f5f5f6;
    }

    @media only screen and (max-width: 960px) {
        .select2-picker-item{
            width: 33.33%;
        }
    }

    @media only screen and (max-width: 820px) {
        .select2-picker-item{
            width: 50%;
        }
    }

    @media only screen and (max-width: 580px) {
        .select2-picker-item{
            width: 100%;
        }
    }
    
    /* ====================================================================== *
        SELECT2-PICKER-FULL GRAY
    * ====================================================================== */      
    
    .titulo{
        text-align: center;
        font-weight: bold;
        font-size: 17px;
    }
    
    /* ====================================================================== *
        SIZES
    * ====================================================================== */      
    
    /* MEDIUM */
    
    .select2-picker-modal-md{
        width: 600px;
        max-width: 80%;
    }
    
    .select2-picker-modal-md .select2-picker-item{
        width: 50% !important;
    }
    
    @media only screen and (max-width: 580px) {
        .select2-picker-modal-md .select2-picker-item{
            width: 100% !important;
        }
    }
    
    /* SMALL */
    
    .select2-picker-modal-sm{
        width: 400px;
        max-width: 80%;
    }
    
    .select2-picker-modal-sm .select2-picker-item{
        width: 100% !important;
    }
    
    /* THUNDERA EYE */
    .select2-picker-modal .fa-eye, .select2-picker-modal .fa-eye-slash {
        bottom: 5px;  
        right: 5px; 
        position: absolute;
        z-index: 9999999;
        font-size: 20px;
        cursor: pointer;
        color: #303641;
    }