/*
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 : Mar 18, 2021, 4:22:52 PM
    Author     : jeanmeslie
*/
 :root{
        --modal-width: calc(var(--screen-width) / 100 * 22);
        --modal-font : calc(var(--screen-width) / 100 * .8);
        --modal-button: calc(var(--modal-width) / 100 * 20);
        --modal-padding : calc(var(--modal-width) / 100 * 8);
        --modal-maxheight : calc(var(--screen-height) / 100 * 57); 
        --modal-borderradius : calc(var(--screen-height) / 100);
    }
    @font-face{ 
        font-family: 'OpenSans-Light';
        src: url("../fonts/Open_Sans/OpenSans-Light.ttf");
    }
    @font-face{ 
        font-family: 'OpenSans-LightItalic';
        src: url("../fonts/Open_Sans/OpenSans-LightItalic.ttf");
    }
    @font-face{ 
        font-family: 'OpenSans-Regular';
        src: url("../fonts/Open_Sans/OpenSans-Regular.ttf");
    }
    @font-face{ 
        font-family: 'OpenSans-Italic';
        src: url("../fonts/Open_Sans/OpenSans-Italic.ttf");
    }
    @font-face{ 
        font-family: 'OpenSans-SemiBold';
        src: url("../fonts/Open_Sans/OpenSans-SemiBold.ttf");
    }
    @font-face{ 
        font-family: 'OpenSans-SemiBoldItalic';
        src: url("../fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf");
    }
    @font-face{ 
        font-family: 'OpenSans-Bold';
        src: url("../fonts/Open_Sans/OpenSans-Bold.ttf");
    }
    @font-face{ 
        font-family: 'OpenSans-BoldItalic';
        src: url("../fonts/Open_Sans/OpenSans-BoldItalic.ttf");
    }
    @font-face{ 
        font-family: 'OpenSans-ExtraBold';
        src: url("../fonts/Open_Sans/OpenSans-ExtraBold.ttf");
    } 
    @font-face{ 
        font-family: 'OpenSans-ExtraBoldItalic';
        src: url("../fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf");
    } 

        .global-modal.fade.in {
        background: rgba(0,0,0,0.6);
    }
    .global-modal .modal-dialog{
        width: var(--modal-width);
        padding-left: 0!important;
        margin: 0;
    }
    .global-modal .modal-content{
        width: var(--modal-width);
        max-height:  var(--modal-maxheight);
        border-radius: var(--modal-borderradius);
        font-size: var(--modal-font);
    }
    .global-modal .modal-body{
        font-family: OpenSans-Regular;
        font-size: var(--modal-font);
        color: #000;
        padding: 10%;
        text-align: center;
    }
    .global-modal .modal-body p{
        margin-bottom: 0;
        font-size: var(--modal-font);
        line-height: normal;
        letter-spacing: -0.25px;
    }
    .global-modal .modal-content::-webkit-scrollbar{
        display: none;
    }
    .global-modal .modal-action{
        padding: 0;
    }
    .global-modal .modal-action button{
        padding: var( --modal-padding); /* calculating 8% of the modal width */
        line-height: 0;
        height: var(--modal-button); /* calculating 20% of the modal width */
        font-family: OpenSans-SemiBold;
        margin:0px;
        font-size: var(--modal-font);
        cursor: pointer;
        width:100%;
    }
    .global-modal .custom-modal-button{
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        font-size: var(--modal-font);
        font-family: 'OpenSans-SemiBold';
        outline: 0;
        cursor: pointer;
    }
    .global-modal .custom-modal-button:last-child{
        border-radius: 0 0 var(--modal-borderradius) var(--modal-borderradius);
    }
    .global-modal .modal-action button.green-button{
        background: #009A61;
        color: #FFFFFF;
        position: static;
        left: -1px;
        width: calc(100% + 1px) !important;
    }

    /*for firefox browser*/
    @-moz-document url-prefix(){
        .global-modal .modal-action button.green-button{
            display:flex;
            justify-content: center;
            align-items: center;
            width: 100% !important;
        }
    }

    .global-modal .white-button {
        background-color: white;
        border: 0;
        border-top: 1px  #E5E5E5;
    }

    .text-ellipsis{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .absolute-center{
        position: absolute;
        top: 50%    ;
        left: 50%!important;
        transform: translate(-50%, -50%)!important;
        margin: 0!important;
    }
    .green-text{
        color: #009a61!important;
    }
    .global-modal .border_top{
        border-top: 1px solid #E5E5E5!important;
    }
    .global-modal .modal-body.single-btn{
        max-height: calc((var(--modal-maxheight)) - (var(--modal-button)) - (2*var(--modal-padding)));
    }
    .global-modal .modal-body.two-btn{
        max-height: calc((var(--modal-maxheight)) - (2 * var(--modal-button)) - (2*var(--modal-padding)));
    }
    .global-modal .modal-body.three-btn{
        max-height: calc((var(--modal-maxheight)) - (3 *var(--modal-button)) - (2*var(--modal-padding)));
    }
    .Medium_desktop_modal{
        --modal-font : calc(var(--screen-width) / 100 * 0.9); 
    }
    .Small_desktop_modal{
        --modal-font : calc(var(--screen-width) / 100 * 1); 
    }
    .Big_tablet_modal{
        --modal-width: 30vw;
        --modal-font : calc(30vw / 100 * 4.5); 
        --modal-button: calc(30vw / 100 * 20);
        --modal-padding : calc(30vw / 100 * 8);
        --modal-maxheight : 80vh; 
    }
    .Medium_tablet_modal{
        --modal-width: 35vw;
        --modal-font : calc(35vw / 100 * 4.5); 
        --modal-button: calc(35vw / 100 * 20);
        --modal-padding : calc(35vw / 100 * 8);
        --modal-maxheight : 80vh; 
    }

    .Tablet_modal{
        --modal-width: 50vw;
        --modal-font : calc(50vw / 100 * 4.5); 
        --modal-button: calc(50vw / 100 * 20);
        --modal-padding : calc(50vw / 100 * 8);
        --modal-maxheight : 80vh; 
    }
    .Mobile_modal{
        --modal-width: 80vw;
        --modal-font : calc(80vw / 100 * 5); 
        --modal-button: calc(80vw / 100 * 20);
        --modal-padding : calc(80vw / 100 * 8);
        --modal-maxheight : 80vh; 
        --modal-borderradius : calc(80vw / 100 * 3);
    }