body {
    background-color: white;
}

input[type="number"] {
	-moz-appearance: textfield;
	appearance: none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-moz-appearance:textfield;
	-webkit-appearance: none;
	appearance:none;
	margin: 0;
}


.input-cltre {
    height          : 30px;
    width           : inherit;
    border          : none;
    border-bottom   : 1px solid gray;

}

.input-cltre:focus {
    outline         : none !important;
    box-shadow      : none !important;
    border          : none;
    border-bottom   : 1px solid blue;
 }

/* textarea contentlerin cerceveye olan mesafesi. default:2
 mdc class üzerinden yapılamıyor. inputlarla ortak padding kullanıyor.*/
.mtext_edt {
    padding: 10px;
    color: black;
    background-color: f7f7f7;
 }

 .mtext_shw {
    color: rgb(53, 57, 53);
    background-color: f7f7f7;
 }

.padtb52 {
    padding-top: 0.5em;
    padding-bottom: 0.2em;
}

/* text-alignment-right listelerde miktarları sağa yaslamak için kullanılır. */
.tar { text-align : right; }
.tal { text-align : left; }

a         {cursor: pointer; color: green;}
a:hover   {color: red;}
a:active  {color: red;}
a:visited {color: grey;}
a .fa     { cursor: pointer; }

/* Kayıt formlarında Label frame hakkında açıklayıcı bilgi içeren bölümü düzenler.
 * Birden fazla satır olursa satırların birbirine yakın olması için:  line-height: 20px
 * Yardım bilgisinin label frame uygun yakınlıkta olması için div için layout clas kullanılmaz.
 * <div class="ui-g-12">
 *	 <label class="label-frame">·Sözleşme yapılan kişiyi seçiniz·</label>
 *		<div class="label-frame-help">Kişiyi seçmek için soyadı, adını...</div>
 *	</div>
 */

/***************************************************
 *******************  LABEL  ***********************
 ***************************************************/
.iwy1 { width:1%; vertical-align:bottom }
.framecap { color: blue;    font-size: medium; }
.inputcap { color: #3F51B5; font-size: small; }
.inputca2 { color: blue;    font-size: small; }
.listecap { color: #3F51B5;    font-size: large; display: inline; cursor:pointer;}
.listecap-refresh { color:gray; font-size:1.6em; cursor:pointer}
.listecap-refresh:hover { color:blue; font-weight:900; cursor:pointer}
.pivotcap { color: red;     font-size: large; display: inline; }


/***************************************************
 *******************  MICON  ***********************
 ***************************************************/

 .lilan-micon{
    color:grey;
    margin-top: 2px;
  }


/*lst formlarda kullanılıyor*/
.micon-lst {
    font-size: xx-large;
    color: gray;
}

.micon-mhw {
    font-size: x-large;
    vertical-align: middle;
    color: gray;
    float:right;
}

.micon-ausel {
    float:left;
    color: gray;
    vertical-align: middle;
    font-size: xx-large;
    width: 40px;
    height: 40px;
    margin-top:5px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* micon_lst de grid görünümünde kullanılıyor. */
.micon-grid {
    vertical-align: middle;
    font-size: 2em;
}

.micon-grid-label {
    color:#757575;
    font-size: smaller;
    text-align: left;
}

/*show-edit-new formlarında sol sutunda kullanılır.*/
.micon-edt {
    font-size: 100px;
    width: 100px;
    height: 100px;
    border-radius: 45%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

@media screen and (max-width: 40em)     { .micon-edt { font-size:  50px; width:  50px; height:  50px} }
@media screen and (min-width: 40.063em) { .micon-edt { font-size: 100px; width: 100px; height: 100px} }


.micon-tab {
    font-size: 58px;
}


/***************************************************
 *******************  RESIM  ***********************
 ***************************************************/

/*lst formlarda kullanılıyor*/
  .resim-lst {
    display: inline-block;
    vertical-align: middle;

    width:35px;
    height:35px;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

    overflow:hidden;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;

    _border: 1px;
    _border-style: solid;
    _border-color:grey;

    }

/*mhw gibi multi line kayıt göstermelerde kullanılıyor*/
.resim-mhw {
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-left:-0px;
}

/*mhw gibi multi line kayıt göstermelerde kullanılıyor*/
.resim-vensa {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    _border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-left:-0px;
}


/* ausel listesinde kullınılıyor*/
.resim-ausel {
    float:left;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    margin-top:5px;
    margin-right:5px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; }

/*shw formlarında sol sutunda büyük olarak kullanılıyor...*/

.resim-shw {
    display: inline-block;
    vertical-align: middle;
    aspect-ratio: 1 / 1;
    width:  175px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color:transparent;

    overflow:hidden;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
}

@media screen and (max-width: 40em)     { .rosim-shw { width:  50px; height:  50px} }
@media screen and (min-width: 40.063em) { .rosim-shw { width: 175px; height: 175px} }


.resim-tab   {
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 60px;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    _border: 3px;
    _border-style: solid;
    _border-color:lightgray;

    overflow:hidden;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
}

.resim-profil {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 5px auto;
    display: block;
}

/*show-edit-new formlarında sol sutunda kullanılır.*/
.resim-edt {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;

    border: 3px;
    border-style: solid;
    border-color:grey;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

    overflow:hidden;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
}

@media screen and (max-width: 40em)     { .resim-edt { max-width:  50px; max-height:  50px} }
@media screen and (min-width: 40.063em) { .resim-edt { max-width: 150px; max-height: 150px} }

/* .header-resim tab formların header larında kullanılır.*/

/* rosin */
.rosim-shw {
    display: inline-block;
    vertical-align: middle;
    height: 175px;
    width:  175px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color:transparent;

    overflow:hidden;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
}

@media screen and (max-width: 40em)     { .rosim-shw { width:  50px; height:  50px} }
@media screen and (min-width: 40.063em) { .rosim-shw { width: 175px; height: 175px} }

/***************************************************
 *******************  SIMGE  ***********************
 ***************************************************/

/*lst formlarda kullnılıyor*/
.simge-lst {
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; }


/*mhw gibi multi line kayıt göstermelerde kullanılıyor*/
.simge-mhw {
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    border-radius: 30%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-left:-5px;
}

/* ausel listesinde kullınılıyor*/
.simge-ausel {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    border-radius: 30%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; }

/*wrp form girişlerinde sol sutunda büyük olarak kullanılıyor...*/
.simge-wrp {
    display: inline-block;
    vertical-align: middle;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; }


/* simge_lst ve simge_sec de grid görünümünde kullanılıyor. */
.simge-grid {
    vertical-align: middle;
}

.simge-grid-label {
    color:#757575;
    text-align: left;
    font-size: smaller
}

/*show-edit-new formlarında sol sutunda kullanılır.*/
.resim-edt {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;

    border: 3px;
    border-style: solid;
    border-color:grey;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

    overflow:hidden;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
}



.simge-tab   {
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 60px;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    border: 3px;
    border-style: solid;
    border-color:lightgray;

    overflow:hidden;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
}


/** ogren_wrp da özeb bölümü tyle class ı*/

.wrap-ozet-frame{
    font-size:smaller;
    max-height:400px;
    overflow-y:auto;
    width:100%
}

/***************************************************
 ******************  HEADER  ***********************
 ***************************************************/
/**
 * Show sayfalarının header bölümlerinde iki satırlı olan
 * exp ve exp ayrıntısına stil vermek için kullanılır.
 */


.hdr-icon-sayfa  { float:right; font-size: x-large; margin-top:1em;}
.hdr-icon-left   { float:left;  font-size: x-large;}
.hdr-icon-right  { float:right; font-size: x-large;}
.hdr-micon       { font-size: 58px;}
.hdr-resim       { display: inline-block;  vertical-align: middle; width: 60px; height: 60px; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.hdr-simge       { display: inline-block;  vertical-align: middle; width: 60px; height: 60px; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.hdr-tabex1      { font-size: larger; }
.hdr-tabex2      { font-size: smaller; white-space:nowrap }
.hdr-liste-exp   { color: blue; display: inline; font-size: large; white-space:nowrap}

.dialog-micon-sec  { color:black  ; float:left;   font-size: x-large;}

.durumu { background-color: blue;}

.space {
    font-family: Courier;
    white-space: pre;
}


/* tek satırlı ausel gösterimlerinde (örnek: durum_exp) */
.ausel_durum1 {
    float: left;
    width: 5px;
    margin-top: -10px;
    margin-left: -12px;
    height: 36px;
    margin-right: 10px;
    margin-bottom: -15px;
}

/* iki satırlı ausel gösterimlerinde (örnek: durum_exp) */
.ausel_durum2 {
    float: left;
    width: 5px;
    margin-top: -10px;
    margin-left: -12px;
    height: 57px;
    margin-right: 10px;
    margin-bottom: -15px;
}

.durum-ausel {
    float:left;
    width:5px;
    height:50px;
    margin-right:10px;
 }

/* mat-selection-list de kullanmak için  check box içeriyor */
.durum-ausel-check {
    float: left;
    width: 5px;
    height: 50px;
    margin-right: 10px;
}

/* manel:menu paneli
  özellikle _shw dialog larda sayfanın sol sutunununda resim altında bulunan menüleri içeriyor.
  menüleri içermesinin yanısırsa sahip olduğu yükseklik ile sayfanın yüksekliğinin sabitlenerek tablar
  arası geçişte zıplamaları engeliyor.

  Not1: angular material dialogda footer bölümün formun alştında kalmasıyla alakalı kayıtlı bir bug var.
  bu nedenle sayfaya ait height özelliğini kullanmak mümkün problemli.
  manel mobil gösterimde yüksekliği menüleri soldan sağ icon halinde sıralamak için azaltılıyor

  Not2: height: 333px; genel olarak tüm shw formları için işe yarıyor. Sebebi de show formlarda tab götsrimi var.
  Tab içinde kullanılan panelin Px lik bir yüksekliği var. Sayfa üzerinde yüksekliği etkileyen birde resim oluyor.
  Hepsi birden dikkate alındığında 333px yeterli oluyor.
*/

.manel-mobil {
    display: none;   /*display: flex;*/
    height: 33px;
    width: 100%;
 }

.manel-ekran {
    display: block;
    height: 339px;
}


/* vertikal step menü*/

.vstep-mobil {
    display: flex;
    height: 33px;
}

.vstep-ekran {
    display: block;
    height: 339px;
}

/* ausel veri gösterimi 2 satırlı (kimlk_exp) veya 1 satırlı  (kurum_exp)olmak üzere iki farklı şekilde oluyor.
   her iki gösterimde de 50 px lik satır yüksekliği kullanılıyor.
   satir-ausel: tek satırlım gösterimlerde kullanılıyor. Satır ortalanıyor.
   satir-ause1: iki satırlı gösterimlerde 1. satır için
   satir-ause2: iki satırlı gösterimlerde w. satır için (küçük fontlu detay detay satırı)
*/

.satir-ausel {
    margin-top: 5px;
    height: 20px;   /*v15*/
}

.satir-ause1-grup {
    font-weight: bold;
    margin-top: 5px;
}

.satir-ause1 {
    margin-top: 5px;
    height: 20px;
}

.ausel-test {
    width: auto;
}


.satir-ause2    { font-size:0.8em;  color:grey;     height: 20px;}
.satir-ause2-1  { font-size:0.8em;  color:green;    font-weight:bold; }
.satir-ause2-2  { font-size:0.8em;  color:#E1E100;  font-weight:bold; }
.satir-ause2-3  { font-size:0.8em;  color:black;    font-weight:bold; }
.satir-ause2-4  { font-size:0.8em;  color:red;      font-weight:bold; }
.satir-ause2-5  { font-size:0.8em;  color:#F77754;  font-weight:bold; }
.satir-ause2-6  { font-size:0.8em;  color:gray;     font-weight:bold; }
.satir-ause2-9  { font-size:0.8em;  color:gray;     font-weight:bold; }

.mvert {
    height: 27px;
    width: 27px;
    line-height:27px;
    margin-left:-10px;
    color: gray;
}

.mhw-icon {
    height: 27px;
    width: 27px;
    line-height:27px;
    margin:-8px 0 0 -12px;
    color: gray;
}


.ipucu {
    font-size:small;
    color:green;
    margin-top:-20px;
    margin-bottom: 10px;
}

@media print {
    body *                              { visibility: hidden; }
    #printableArea, #printableArea *    { visibility: visible; }
    .fc .fc-button-group * { display   : none !important; }
    .fc .fc-button-primary { display   : none !important; }
    #printableArea {
      size:A4 landscape;
      position: absolute;
      left: 0;
      top: 0;
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 0px;
      margin-bottom: 0px;
      page-break-after: always;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
}


/*new & edt modal */
.nedal-menel {
    background-color: rgba(220,220, 220, 0.4);
    height: 730px;
    float: left;
    padding-top:24px;
}

.nedal-conel {
    float: left;
}

@media screen and (max-width: 40em)     { .nedal-menel { width: 13%; } .nedal-conel { width: 85%; } }
@media screen and (min-width: 40.063em) { .nedal-menel { width: 23%; } .nedal-conel { width: 75%; } }


/*belgeli + new & edt modal */

/** left menu */

.betem-menel {
    background-color: rgba(220,220, 220, 0.4);
    height: 730px;
    float: left;
    padding-top:24px;
}

.betem-conel {
    float: left;
    height: 623px;
    margin-left: 0px;
}

.betem-benel {
    float: right;
    height: 800px;
    width: 51%;
}

@media screen and (max-width: 40em)     { .betem-menel { width: 10%; } .betem-conel { width: 88%; } }
@media screen and (min-width: 40.063em) { .betem-menel { width: 20%; } .betem-conel { width: 78%; } }

/* shw-modal-sotem */

.sotem-menel {
    background-color: rgba(220,220, 220, 0.4);
    height: 730px;
    float: left;
    padding-top:24px;
}

.sotem-conel {
    float: left;
}

@media screen and (max-width: 40em)     { .sotem-menel { width:  0%; } .sotem-conel { width: 100%; } }
@media screen and (min-width: 40.063em) { .sotem-menel { width: 23%; } .sotem-conel { width:  75%; } }

/* shw modal */

.jotem-menel {
    background-color: transparent;
    height: min-content;
    float: left;
    padding-top:24px;
}

.jotem-conel {
    float: left;
    height: min-content;
    margin-left: 0px;
    background-color: white;
}

@media screen and (max-width: 40em)     { .jotem-menel { width: 15%; } .jotem-conel { width: 85%; } }
@media screen and (min-width: 40.063em) { .jotem-menel { width: 25%; } .jotem-conel { width: 75%; } }

/* modal step dar */
.motep-menel-1 {
    background-color: #FDFCDC;;
    width:  35%;
    height: 730px;
    float:  left;
    margin: 0px;
    padding-top:24px;
}

/* width %35 + %65 yapılarak 100 e tamalandığında ekran büyüklüğüne bağlaı kayma oluyor. (normal ekranda % 80 lük görüntüde).
   problemin çözümü için %1 lik bir esneme payı eklendi. Problem ekran boyutları hesaplarken yuvarlamadan kaynaklanıyor muhtemelen. */

.motep-conel-1 {
    width:  65%;
    float:  left;
    height: 623px;
    margin-left: 0px;
}


/* modal step genis */

.motep-menel-2 {
    background-color: #FDFCDC;;
    width: 25%;
    height: 730px;
    float: left;
    margin:0px;
    padding-top:24px;
}

.motep-conel-2 {
    width: 75%;
    float: left;
    height: 623px;
    margin-left: 24px;
}



.retem-menel {
    background-color: #FDFCDC;;
    width: 15%;
    float: left;
    margin:-24px;
    padding-top:24px;
}

.retem-conel {
    width: 84%;
    float: left;
    margin-left: 48px;
}

.retem-shw {
    height: 625px;
    width: auto;
    max-width: 1050px;
    background-color:transparent;
    overflow:hidden;
    vertical-align: middle;
}

.example-margin {
    font-size: 0.9em;
}


.vensa-satir-ekran { color: #3F51B5; font-size: larger; }
.vensa-satir-mobil { color: #3F51B5; font-size: small; }

.vensa-sati2 { color: black;   font-size: small; }
.vensa-tutar { color: #3F51B5; font-size: larger; }