/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import '~@ionic/angular/css/display.css';
.text-center{
    text-align: center!important;
}
.w-100
{width: 100% !important;} 
.h-100{
    height: 100% !important;
}
.content{
    background: #e9e9e9;
    --background: #e9e9e9;
}
.bg-trans{
    --background: transparent;
    background: transparent;
}
.w-100{
    width: 100% !important;
}
.w-50{
    width: 50% !important;
}
.inputs{
    background:white;
    border-radius: 12px;
    color: grey;
  }
.color-white{
    color: white;
  }
  .color-black{
    color: black;
  }
  
ion-button{
    text-transform:capitalize!important;
}
.text-right{
    text-align: right!important;
}
.text-left{
    text-align: left!important;
}
.bg-white{
    background: white;
    --background: white;
}

.mt-40{
    margin-top: 40% !important;
}

.mt20{
    margin-top: 20px !important;
}

:focus {
    outline: none;
    }
    
@media screen and (min-height : 320px) and (max-height : 500px) {
    .maintitle {
        font-size: 20px !important;
        padding-bottom: 10px;
        text-align: left !important;
        font-family: 'din Regular';
        font-weight: 100;border-bottom:2px solid #000000;
    }

    .maintitleAr {
        font-size: 20px !important;
        padding-bottom: 10px;
        text-align: right !important;
        font-family: 'din Regular';
        font-weight: 100;border-bottom:2px solid #000000;
    }

    .fullname {
        font-size: 22px !important;
        padding-bottom: 10px;
        text-align: left !important;
        font-family:'bahnschrift-bold';
        padding:0px;
    }

    .fullnameAr {
        font-size: 22px !important;
        padding-bottom: 10px;
        text-align: right !important;
        font-family:'bahnschrift-bold';
        padding:0px;
    }

    .plantitle {
        font-weight: 100;
        font-size: 21px;
        // margin-left: 20px;
        color: #838484;
        font-family:bahnschrift;
    }

    .spantitle {
        font-family: 'Bahnschrift Regular';
        font-weight: 200;
        color: #040707;
        padding: 20px;
        font-size: 21px;
    }

    .expirytitle {
        font-family: 'Bahnschrift Regular';
        font-weight: 600;
        color: #040707;
        padding: 20px;
        font-size: 21px;
    }

    .grid-text{
        padding-left: 0px;
        padding-right: 15px;
        font-size: 15px;
        font-family: 'Bahnschrift Regular';
        padding-top:10px;
       // padding-left:10px;
        font-weight: 400;
        // padding-bottom:20px;
        vertical-align:middle;
    }
}

@media screen and (min-height : 320px) and (max-height : 800px) {
    .maintitle {
        font-size: 20px !important;
        padding-bottom: 10px;
        text-align: left !important;
        font-family: 'din Regular';
     
        border-bottom:2px solid #000000;
        padding:0px !important;
    }

    .maintitleAr {
        font-size: 20px !important;
        padding-bottom: 10px;
        text-align: right !important;
        font-family: 'din Regular';
        border-bottom:2px solid #000000;
        padding:0px !important;
    }

    .fullname {
        font-size: 28px !important;
        padding-bottom: 10px;
        text-align: left !important;
        font-family:'Myriad Pro Regular';
        padding:0px;
        font-weight: 200;
    }
    
    .fullnameAr {
        font-size: 28px !important;
        padding-bottom: 10px;
        text-align: right !important;
        font-family: 'din Regular';
        padding:0px;
    }

    .plantitle {
        font-weight: 100;
        font-size: 22px;
        // margin-left: 20px;
        color: #838484;
        font-family:'Myriad Pro Regular';
        padding: 0px;
    }

    .plantitleAr {
        font-weight: 100;
        font-size: 22px;
        // margin-left: 20px;
        color: #838484;
        font-family: 'din Regular';
        padding: 0px;
    }

    .spantitle {
        font-family: 'Myriad Pro Regular';
        //font-weight: 600;
        color: #040707;
        padding: 22px;
        font-size: 19px;
    }

    .spantitleِAr {
        font-family: 'din Regular';
        //font-weight: 600;
        color: #040707;
        padding: 22px;
        font-size: 21px;
    }

    .expirytitle {
        font-family: 'Myriad Pro Regular';
        //font-weight: 600;
        color: #040707;
        padding: 23px;
        font-size: 24px;
    }

    .expirytitleAr {
        font-family: 'din Regular';
        //font-weight: 600;
        color: #040707;
        padding: 23px;
        font-size: 24px;
    }
    
    .grid-text{
        padding-left: 0px;
        padding-right: 15px;
        font-size: 15px;
        font-family: 'Myriad Pro Regular';
        padding-top:10px;
       // padding-left:10px;
        font-weight: 400;
        // padding-bottom:20px;
        vertical-align:middle;
    }

    .grid-textAr{
        padding-left: 0px;
        padding-right: 3px;
        font-size: 15px;
        font-family: 'din Regular';
        padding-top:10px;
       // padding-left:10px;
        font-weight: 400;
        // padding-bottom:20px;
        vertical-align:middle;
    }

    .grid-textAr2{
        padding-left: 0px;
        padding-right: 15px;
        font-size: 15px;
        font-family: 'din Regular';
        padding-top:10px;
       // padding-left:10px;
        font-weight: 400;
        // padding-bottom:20px;
        vertical-align:middle;
    }
}


/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";
.m-auto{
    margin:auto !important; 
}

// @font-face {
//     font-family: bahnschrift;
//     src: url("./assets/fonts/Bahnschrift-Font-Family/BAHNSCHRIFT.ttf")
// }

@font-face {
    font-family: 'din Regular';
    font-style: normal;
    font-weight: normal;
    src: url("./assets/fonts/din-next-lt-w23-regular-1.ttf")
    //src: local('Bahnschrift Regular'), url('/bahnschrift-cufonfonts-webfont/BAHNSCHRIFT.woff') format('woff');
    }

    @font-face {
        font-family: 'Myriad Pro Regular';
        font-style: normal;
        font-weight: normal;
        src: url("./assets/fonts/myriad-pro-cufonfonts-webfont/MYRIADPRO-REGULAR.woff")
       // src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
    }

        
@font-face {
    font-family: 'bahnschrift-bold';
    src: url("./assets/fonts/Bahnschrift-Font-Family/BAHNSCHRIFT 2.ttf")
}

.marginT20 {
    margin-top: 20px;
}

.marginT10 {
    margin-top: 10px;
}

.popover-wrapper .popover-content{
    position: relative !important;
    margin: 0 auto !important;
    left: auto !important;
    top: auto !important;
    border-radius: 20px;
    height: 150px !important;
    border: 1px solid rgb(41, 38, 38);
  }
  
  ion-popover {
     
    ion-backdrop {
        opacity:0.7 !important;
        background-color: #ffffff !important;
    }
    div.popover-content {
        // top: 50% !important;
        // left: 50% !important;
        //transform: translate(-50%, -50%) !important;
        border-radius: 20px;
        margin: auto;
        top:0px !important;
        bottom:0px !important;
        width: 100% !important;
        height: 200px;
        position: absolute;
        left: 0px !important;
  }
  }

.classfont {
    font-family: 'din Regular' !important;
}