/* The layout container should have the ui-g style class.
 * Children elements of the layout container become columns when they are prefixed with ui-g-* where * is any number from 1 to 12.
 * The number expresses the taken space of 12 available units. When the number of columns exceeds 12, columns wrap to the next line:
 * prime : https://github.com/primefaces/primeng/blob/7f8400417a96f9abcddc1ee9f51f77df63d070f7/src/app/components/grid/grid.css
 * design: https://docs.google.com/spreadsheets/d/155lSL35RCqMsuRsVIaAQxgsnHZOkXlBTVMSrp2bj8Eo/edit?usp=sharing
 */


/*
    Prefix	Devices                                 Media Query                 Example
    S-*	Small devices like phones               max-width: 40em (640px)			S-12
    M-*	Medium sized devices such as tablets    min-width: 40.063em (641px)		M-06 S-12
    L-*	Devices with large screen like desktops	min-width: 64.063em (1025px)	L-04 S-12
    X-*	Big screen monitors                     min-width: 90.063em (1441px)	X-02 S-12
*/


.C-TT,
.C-01, .C-02, .C-03, .C-04, .C-05, .C-06, .C-07, .C-08, .C-09, .C-10, .C-11, .C-12,
.C-13, .C-14, .C-15, .C-16, .C-17, .C-18, .C-19, .C-20, .C-21, .C-22, .C-23, .C-24 {
    float: left;
    box-sizing: border-box;
}

/* C_06 M_94 tab header için resim ve başlıkları yerleştirmek amacıyla kullanılır.*/

.C-00 {display: none;}
.C-TT {width: 2.00%;}   /*özel ölüçü totip için 1 nin yarısı*/
.C-01 {width: 4.16%;}  .C-07 {width:29.16%;}  .C-13 {width:54.16%;}  .C-19 {width:79.16%;}
.C-02 {width: 8.33%;}  .C-08 {width:33.33%;}  .C-14 {width:58.33%;}  .C-20 {width:83.33%;}
.C-03 {width:12.50%;}  .C-09 {width:37.50%;}  .C-15 {width:62.50%;}  .C-21 {width:87.50%;}
.C-04 {width:16.66%;}  .C-10 {width:41.66%;}  .C-16 {width:66.66%;}  .C-22 {width:91.66%;}
.C-05 {width:20.83%;}  .C-11 {width:45.83%;}  .C-17 {width:70.83%;}  .C-23 {width:95.83%;}
.C-06 {width:25.00%;}  .C-12 {width:49.00%;}  .C-18 {width:75.00%;}  .C-24 {width:100.0%;}

@media screen and (max-width: 40em) {
    .S-00 {width: 0em; height:0em; padding:0em; margin:0em; visibility:collapse; }
    .S-24 {width:100.0000%;}
}

/** padding: 0.5em; sayfayı colonları ayrıldığında colonlar arası boşluk oluşturmak.
 *  24 de boşluğa gerek yok. Öözellikle mobilde sağdan ve soldan gereksiz daralmaya sebebp oluyor */

@media screen and (min-width: 40.063em) {
    .M-01 {width: 4.16%; padding: 0.5em;}  .M-07 {width:29.16%; padding: 0.5em;}  .M-13 {width:54.16%; padding: 0.5em;}  .M-19 {width:79.16%; padding: 0.5em;}
    .M-02 {width: 8.33%; padding: 0.5em;}  .M-08 {width:33.33%; padding: 0.5em;}  .M-14 {width:58.33%; padding: 0.5em;}  .M-20 {width:83.33%; padding: 0.5em;}
    .M-03 {width:12.50%; padding: 0.5em;}  .M-09 {width:37.50%; padding: 0.5em;}  .M-15 {width:62.50%; padding: 0.5em;}  .M-21 {width:87.50%; padding: 0.5em;}
    .M-04 {width:16.66%; padding: 0.5em;}  .M-10 {width:41.66%; padding: 0.5em;}  .M-16 {width:66.66%; padding: 0.5em;}  .M-22 {width:91.66%; padding: 0.5em;}
    .M-05 {width:20.83%; padding: 0.5em;}  .M-11 {width:45.83%; padding: 0.5em;}  .M-17 {width:70.83%; padding: 0.5em;}  .M-23 {width:95.83%; padding: 0.5em;}
    .M-06 {width:25.00%; padding: 0.5em;}  .M-12 {width:49.00%; padding: 0.5em;}  .M-18 {width:75.00%; padding: 0.5em;}  .M-24 {width:100.0%;}
    .M_05 {width: 5.00%; padding: 0.5em;}  .M_95 {width:95.00%; padding: 0.5em;}
}

@media screen and (min-width: 64.063em) {
    .L-01 {width: 4.16%;}  .L-07 {width:29.16%;}  .L-13 {width:54.16%;}  .L-19 {width:79.16%;}
    .L-02 {width: 8.33%;}  .L-08 {width:33.33%;}  .L-14 {width:58.33%;}  .L-20 {width:83.33%;}
    .L-03 {width:12.50%;}  .L-09 {width:37.50%;}  .L-15 {width:62.50%;}  .L-21 {width:87.50%;}
    .L-04 {width:16.66%;}  .L-10 {width:41.66%;}  .L-16 {width:66.66%;}  .L-22 {width:91.66%;}
    .L-05 {width:20.83%;}  .L-11 {width:45.83%;}  .L-17 {width:70.83%;}  .L-23 {width:95.83%;}
    .L-06 {width:25.00%;}  .L-12 {width:49.00%;}  .L-18 {width:75.00%;}  .L-24 {width:100.0%;}
}

/**class="a b" or class="b a"
 * order in css file is important, order in class string is not important
 * http://jsfiddle.net/PP9yf/47/
 */

/** gr- lerde kullanılan paddingler . 4 ana padding kullanılır
 * Frame : 24 lük kolondan oluşan sayfaları colon seviyesinde gruplandırma yaptığımızda PD0  kullanılır.
 * Label : Frame içinde kullanılan veri alanında Label satırında (1. Satır) PD1 kullanılır
 * input : Frame içinde kullanılan veri alanında Input satırında (2. Satır) PD2 kullanılır
 * Miput : Frame içinde kullanılan mhw componentlarda input satırında (Çoklu Satır ) PD3 kullanılır
 */

/*
.PD0 { padding: 0.5em 0.5em 0.5em 0.5em; }
.PD1 { padding: 0.5em 0.5em 0.2em 0.0em; }
.PD2 { padding: 0.3em 0.5em 0.4em 0.0em; }
.PD3 { padding: 0.3em 0.5em 0.7em 0.0em; }
*/

.PD0 { padding: 0.5em 0.5em 0.5em 0.5em; }   /** Frame  */
.PD1 { padding: 0em   0.5em 0.0em 0em; }     /** Label  */
.PD2 { padding: 0em   0.5em 0.0em 0em; }     /** input  */
.PD3 { padding: 0em   0.5em 0.0em 0em; }     /** Miput  */

.PD02-Rasel { padding: 0em 0.5em 10px 0em; }     /** Option-Boxlar bir fazla satır arası boşluk icin  */
.PD02-Tosel { padding: 0px; }                   /** toogle-button */

.PD05 { padding: 0.5em; }
.PD10 { padding: 1em; }


.dikel {
     margin-left:-0.8em;
     text-align: right;
     padding: 0em;
}

.daire {
     font-size: smaller;
     text-align: center;
     padding-top: 8px;
}

/**Tablarda kullanılan daire. Mhw listelerinde kullanılan daire göre alan dar olduğu için ayarlamalar gerekiyor.*/
.taire {
    font-size: smaller;
    text-align: left;
    padding-top: 5px;
}

.kalem {
    font-size: larger;
}