/*portrait mode smartphone*/
@media (orientation: portrait) and (hover: none) and (pointer: coarse),
only screen and (-moz-min-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2/1), 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {

    .header {  
        width: auto!important; 
        height:auto!important;
        margin: auto!important;
        text-align: center!important;      
        background-position: left 5px!important;
        background-repeat: no-repeat!important;
        min-height: 50%!important;
        display: grid;
        justify-content: center;
        padding-right: 0;
    }
    .display {
        width: 100%;
        text-align: center;
        vertical-align: middle;
        font-weight: bold;
        color: white;
        font-size: 120%;
        padding-right: 0;
    }

    .logoheader{
        vertical-align: middle;
        height:95px;
        width: 100%;
        padding-right:0px;
    }

    body .ui-button.ui-state-active{
        opacity: 0.6;
        background-color:  #006580!important;
    }

    body .ui-button.ui-state-hover{
        opacity: 1;
        background-color:  #006580!important;
    }

    /*button αποθήκευση*/
    .customBtn {
        opacity: 1;
        transition: 0.3s;
        bottom: 5px!important;
        background-color: teal!important;
        border-radius:25px!important;
        border:1px solid #334035!important;
        padding: 10px 10px!important;
    }

    .customBtn .pi {
        font-size: 1.55em!important;
    }
    .rc-anchor-normal{
        width: 331px!important;
    }

    /*succesful download green tick */
    .greentick{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 35%;
        height: 35%;
    }

    /*growl text*/
    .ui-messages-error-summary{
        font-size: 18px;
        margin-left: 0px;
        font-weight: normal;
    }

    /*growl position*/
    .ui-messages{
        padding: 0;
        margin: 1em 0;
        position: relative;
        left: 50%;
        transform: translate(-50%, 10%);
        max-width: 100%!important;
        content: "";
        font-style: normal!important;
    }
    /*text on the completed screen*/
    .completedTxt{
        font-size: 20px;
    }

}
/*landscape mode smartphones*/
@media (orientation: landscape) and (hover: none) and (pointer: coarse),
only screen and (-moz-min-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2/1), 
only screen and (min-device-pixel-ratio: 2){

    html, body {
        max-height:100%;
    }

    .body_width {
        margin-left: 0%!important;
        margin-right: 0%!important;
    }
    .header {  
        width: auto!important; 
        height:auto!important;
        margin: auto!important;
        text-align: center!important;      
        background-position: left 5px!important;
        background-repeat: no-repeat!important;
        min-height: 50%!important;
        display: grid;
        justify-content: center;
        padding-right: 0;
    }
    .display {
        width: 100%;
        text-align: center;
        vertical-align: middle;
        font-weight: bold;
        color: white;
        font-size: 120%;
        padding-right: 0;
    }
    .logoheader{
        vertical-align: middle;
        height:100px;
        width: 100%;
        padding-right:0px;
    }
    body .ui-button.ui-state-active{
        opacity: 0.6;
        background-color:  #006580!important;
    }

    body .ui-button.ui-state-hover{
        opacity: 1;
        background-color:  #006580!important;
    }

    /*button αποθήκευση*/
    .customBtn {
        opacity: 1;
        transition: 0.3s;
        bottom: 5px!important;
        background-color: teal!important;
        border-radius:25px!important;
        border:1px solid #334035!important;
        padding: 10px 10px!important;
    }

    .customBtn .pi {
        font-size: 1.55em!important;
    }


    /*succesful download green tick */
    .greentick{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 20%;
        height: 20%;
    }

    /*growl text*/
    .ui-messages-error-summary{
        font-size: 18px;
        margin-left: 0px;
        font-weight: normal;
    }
    
    /*growl position*/
    .ui-messages{
        padding: 0;
        margin: 1em 0;
        position: relative;
        left: 50%;
        transform: translate(-50%, 10%);
        max-width: 60%!important;
        content: "";
        font-style: normal!important;
    }
    
    /*text on the completed screen*/
    .completedTxt{
        font-size: 20px;
    }
}