﻿/*
    .SfDatePicker-Top-Fix -> quando o calendar esta dentro de uma col, não fica no mesmo TOP que os outros input
    .row-40px -> criado para ajudar o col-40px, para partir o verticalText
    .col-40px -> é para dar uma width pequena na col.
    
    .text-orientation -> é a orientação do texto, para ficar na vertical.

    .float-center -> no bootstrap não encontro esta class, criei para corrigir isso
    .dialogSize -> para corrigir os Dialog que não estão a ficar a 100 height%
*/
/*.e-dialog .e-dlg-header {
    width: 100% !important;
}*/
/**/

.w-95
{
    width: 95% !important;
}
.w-98 {
    width: 98% !important;
}
.SfDatePicker-Top-Fix {
    padding-top: 17px;
}
/*criado por causa do verticalTextControl*/
.row-40px {
    display: block;
}
.col-40px {}

.text-orientation {
    display: block;
}

.float-center {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

/*.dialogSize {
    max-height: none !important;
    height: 100% !important;
    top: 0px !important;
}
.dialogSize-pt-0 {
   
}*/

@media (min-width: 576px) and (max-width:767px) {
    .text-orientation {
        display: block;
    }

    .row-40px {
        display: flex;
    }

    .col-40px {
    }
}

/*  // Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width:991px) {
    .dialogSize {
        height: auto !important;
    }
    .text-orientation {
        transform: rotate(180deg);
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }
    .row-40px {
        display: flex;
    }
    .col-40px {
        -ms-flex: 0 0 2.333333%;
        flex: 0 0 2.333333%;
        max-width: 2.333333%;
    }
}

/* // Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .dialogSize {
        height: auto !important;        
    }
    .text-orientation {
        transform: rotate(180deg);
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }
    .row-40px {
        display: flex;
    }
    .col-40px {
        -ms-flex: 0 0 2.333333%;
        flex: 0 0 2.333333%;
        max-width: 2.333333%;
    }
}

/*// Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .text-orientation {
        transform: rotate(180deg);
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }
    .row-40px {
        display: flex;
    }
    .col-40px {
        -ms-flex: 0 0 2.333333%;
        flex: 0 0 2.333333%;
        max-width: 2.333333%;
    }
}