:root{
    --foc-primary: #d82126ff;
    --foc-primary-l: #E97276;
    --foc-primary-d: #8D161A;
    --foc-secondary: #B7B7B7;
    --foc-secondary-l: #DBDBDB;
    --foc-secondary-d: #808080;
}

@font-face {
    font-family: 'playtime';
    src: url('playtime.ttf');
}

body{
    font-family: playtime !important;
    font-size: 15px;
    background-color: white !important;
    color: #5A738E;
}

.bg-theme{
    background-color: #2A3F54;
}

.bg-gray{
    background-color: #cfcfcf;
}

td, th {
    border:1px rgb(131, 131, 131) solid;
    overflow: hidden;
}

.no-hover:hover{
    text-decoration: none !important;
}

.text-decoration-underline{
    text-decoration: underline;
}

.text-black {
    color: #2D2D2D !important;
}

.text-white {
    color:#fff !important;
}

.border-black{
    border: black 1px solid !important;
}

.border-gray{
    border: 1px solid #ccc !important;
}

.fw-bold{
    font-weight: bold !important;
}

.shadowed{
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px 1px;
}

.dataTables_wrapper{
    width:100%;
    padding: 2% 5%;
}

.dataTables_filter{
    margin-bottom:5px;
    border: none !important;
}

.dataTables_paginate{
    display:flex;
    margin-top:20px;
    justify-content: space-between;
}

.dataTables_info{
    text-align: center;
}

.dataTables_paginate span{
    display: flex;
    align-items: center;
}

.next, .previous, .dt-button{
    padding:8px;
    background-color: #293f61;
    color:white;
    border-radius: 5%;
    border:gray 1px solid;
    text-align: center;
    margin: 10px 5px;
}

.dataTables_filter{
    border-bottom:1px black solid;
}

.dataTables_filter input{
    margin:0 10px;
}

.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple{
    border-radius: 10px;
}

.select2-selection__arrow{
    right:15px !important;
}

.select2-container--default{
    padding: 0 !important;
}

.select2-selection__rendered{
    color: black !important;
    font-size: 1.2rem !important;
}

.select2-results__option{
    color: rgb(49, 49, 49) !important;
    font-size: 1.2rem !important;
}

.highcharts-credits{
    display:none;
}

.print-hidden {
    display: none;
    visibility: hidden;
    opacity: 0;
}

.button-none{
    background:none;
    border:none;
    margin:0;
    color: rgba(255,255,255,0.75);
    font-size: 12px;
    padding:0;
    font-weight: 100;
}

.cursor-pointer{
    cursor:pointer;
}

.product-card{
    background-color: #c8d8fa;
    transition:0.3s;
}

.product-card:hover{
    background-color: #e6f0ff;
}

.product-selected{
    background-color: #8ae66e;
}

.product-selected:hover{
    background-color: #b8fca4;
}

.cart-product{
    padding:50px !important;
}

.my-hidden{
    transform: scale(0);
    height:0;
}

.animated{
    transition:1.5s;
}

.animated-fast{
    transition:0.5s;
}

.copied{
    animation: copied 1.0s forwards;
}

.revisar{
    color: #5c5c5c !important;
}

.Conciliado{
    color: #1386d3 !important;
}

.Facturado{
    color:#50d33e !important;
}

.Rechazado{
    color:#ff0000 !important;
}

.payment-capture{
    max-height: 600px;
}

.bg-notification{
    background-color: rgb(191, 253, 191) !important;
}

.border-success{
    /* border: 3px rgb(67, 255, 67) solid !important; */
    background-color: rgb(184, 255, 184) !important;
}

.bg-foc{
    background-color: var(--foc-primary) !important;
}

.bg-foc-light{
    background-color: var(--foc-primary-l) !important;    
}

.bg-foc-dark{
    background-color: var(--foc-primary-d) !important;
}

.bg-foc-secondary{
    background-color: var(--foc-secondary)!important;    
}

.bg-foc-secondary-dark{
    background-color: var(--foc-secondary-d)!important;    
}

.bg-foc-secondary-light{
    background-color: var(--foc-secondary-l)!important;    
}

.bg-wavy{
    z-index: 0;
    height:270%;
    max-height: 100vh;
}

.rounded-h{
    border-radius: 30px;
}

.foc-btn{
    transition: 0.3s;
}

.foc-btn:hover{
    letter-spacing: 1px;
    font-weight: 500;    
}

.cliff{
    transition:0.3s;        
}

.cliff:hover{
    animation: cliff 0.1s;
}

.cliff-heavy{
    transition:0.3s;        
}

.cliff-heavy:hover{
    animation: cliff-heavy 0.1s;
}

input, select{
    border-radius: 5px !important;
    border: 1px rgb(82, 82, 82) solid !important;
}

input[type="checkbox"]{
    accent-color: var(--foc-primary);
}

input[type="date"].form-control{
    width:inherit;
    border-radius: 5px !important;
    border: 1px #ccc solid !important;
}

select{
    background-color: white !important;
}

.my-checkbox{
    transform:scale(1.5);
}

input:focus {
    outline: 3px solid var(--foc-primary) !important;
    box-shadow: 0 0 10px var(--foc-primary) !important;
}

.foc-shadowed{
    box-shadow: var(--foc-primary) 0px 0px 10px 1px;
}

.foc-shadowed-secondary{
    box-shadow: var(--foc-secondary) 0px 0px 10px 1px;
}

.foc-btn-secondary{
    background-color: var(--foc-secondary) !important;
}

.foc-btn-secondary:active{
    background-color: var(--foc-secondary-d) !important;
}

.foc-title{
    text-decoration: underline var(--foc-primary);
}

.foc-gradient-n-l{
    background: var(--foc-primary);
    background: linear-gradient(90deg, var(--foc-primary) 40%, var(--foc-primary-l) 100%);
}

.foc-gradient-centered{
    background: #F6C892;
    background: linear-gradient(90deg, var(--foc-primary-l) 5%, var(--foc-primary) 25%, var(--foc-primary) 75%, var(--foc-primary-l) 95%);
}

.foc-nav{
    
}

.panel-icon{
    
    font-size: 25px;
}

.text-foc-secondary{
    color: var(--foc-secondary-d);
}

.panel-link{
    transition: 0.1s;
}

.panel-link:hover{
    letter-spacing: 1px;
}

.section-header{
    border: 3px solid #d63131;
    border-radius: 5px;
    margin:1px !important;
}

.spawn-soft{
    animation: spawn-soft 0.3s;
}

.section-header{
    z-index:1;
}

.spawn-soft-slide-down{
    z-index:0;
    -webkit-transform-origin-y: top;
    animation: spawn-soft-slide-down 0.3s forwards;
}

.spawn-soft-slide-down-hide{
    z-index:0;
    -webkit-transform-origin-y: top;
    animation: spawn-soft-slide-down-hide 0.3s forwards;
}

.remove-soft{
    animation: remove-soft 0.3s forwards;
}

.remove-soft-long{
    animation: remove-soft 0.8s forwards;
}

.show-error{
    animation: show-error 0.5s forwards;
}

.dropdown-item:hover, .dropdown-item:focus, .dropdown-item:active{
    background-color: var(--foc-primary-d);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transition:0.2s;
    color: black !important;
}

.dropdown-menu{
    border:none;
}

.border-bottom-foc{
    border-bottom: solid 3px var(--foc-primary)
}

.border-bottom-foc-secondary{
    border-bottom: solid 3px var(--foc-secondary)
}

.hover-black{
    transition:0.2s;
}

.hover-black:hover{
    color: black !important;
}

.hover-black.show{
    color: black !important;
}

.bigger{
    transform:scale(2);
}

.hover-bigger{
    transition: 0.2s;
}

.hover-bigger:hover{
    transform:scale(1.2);
}

.swal2-show{
    box-shadow: 0 0 10px var(--foc-primary) !important;
}

.swal2-styled:hover{
    transition: 0.2s;
    animation: cliff 0.1s;
}


/* Start Datatable styles */
.dataTables_wrapper{
    width:100%;
    padding: 2% 5%;
}

.dataTables_filter{
    margin-bottom:5px;
    border: none !important;
}

.dataTables_paginate{
    display:flex;
    margin-top:20px;
    justify-content: space-between;
}

.dataTables_info{
    text-align: center;
}

.dataTables_paginate span{
    display: flex;
    align-items: center;
}

.next, .previous, .dt-button{
    padding:8px;
    background-color: var(--foc-primary-l);
    color:black;
    box-shadow: rgba(0, 0, 0, 0.096) 0px 0px 10px 1px;
    border: none;
    border-radius: 5%;
    text-align: center;
    margin: 10px 5px;
}

.dataTables_paginate a{
    background-color: var(--foc-primary) !important;
}

.dataTables_filter{
    border-bottom:1px black solid;
}

.dataTables_filter input{
    margin:0 10px;
}

.paginate_button{
    color:white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
    color:white !important;
}

.dataTables_wrapper 
.dataTables_paginate 
.paginate_button.disabled, 
.dataTables_wrapper 
.dataTables_paginate 
.paginate_button.disabled:hover, 
.dataTables_wrapper 
.dataTables_paginate 
.paginate_button.disabled:active {
    color:white !important;
}

.dataTables_wrapper 
.dataTables_paginate 
.paginate_button.current, 
.dataTables_wrapper 
.dataTables_paginate 
.paginate_button.current:hover {
    color:white !important;
}

.paginate_button.current{
    background-color: var(--foc-primary-d) !important;
}

/* End Datatable styles */

@media (max-width:440px) {
    .bg-wavy{
        height:200%;
    }
}

@keyframes cliff {
    0%{ rotate: 0deg; }
    50%{ rotate: 3deg; }
    100%{ rotate: 0deg; }
}

@keyframes cliff-heavy {
    0%{ rotate: 0deg; }
    50%{ rotate: 10deg; }
    100%{ rotate: 0deg; }
}

@keyframes spawn-soft{
    0% { transform:scale(0); }
    90% { transform:scale(1.07); }
    100% { transform:scale(1); }
}

@keyframes spawn-soft-slide-down{
    0% { transform:scaleY(0); display:none; }    
    1% { transform:scaleY(0); display:inherit; }
    100% { transform:scaleY(1); }
}

@keyframes spawn-soft-slide-down-hide{
    0% { transform:scaleY(1); display:inherit;}   
    99% { transform:scaleY(0.001); }
    100% { transform:scaleY(0); display:none; }
}

@keyframes remove-soft{
    0% { 
        transform:scale(1);

    }
    80% {  }

    100% { 
        transform:scale(0); 
        position:absolute; 
        justify-items: center;
        width:100%;
        opacity:0;
        z-index: -1;
    }
}

@keyframes show-error{
    0% { transform:scale(1); border:none; }
    50% { transform:scale(1.07); border:solid rgb(255, 0, 0) 1px; }
    100% { transform:scale(1); border:none; }
}