@font-face 
{
    font-family: "Titillium Web";
    src: url(../fonts/TitilliumWeb-Regular.ttf);
}

body
{
    background:url('/assets/images/arabic_4.png');
    background-repeat: repeat;
    background-color: #30838a;

    /*background-color:#4bbdbd;*/
    font-family: "Titillium Web";
}
.shadow {
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 45%) !important;
}

.my-bg-color
{
    background-color:#30838a

    /*background-color:rgba(80, 215, 215); /* #50d7d7 */
    /*background-color: #4bbdbd;*/
}


/* Ezber Dersleri 1 */
th.rotate1 {
    /* Something you can count on */
    height: 150px;
    white-space: nowrap;
}
th.rotate1 > div {
    transform: 
      /* Magic Numbers */
      /*translate(25px, 51px)*/
      translate(0px, 0px)
      /* 45 is really 360 - 45 */
      /*rotate(315deg);*/
      rotate(270deg);
    width: 10px;
}
th.rotate1 > div > span {
    border-bottom: 1px solid #ccc;
    padding: 5px 10px;
}


/* Ezber Dersleri 2 */
th.rotate2 {
    /* Something you can count on */
    height: 130px;
    white-space: nowrap;
}
th.rotate2 > div {
    transform: 
      /* Magic Numbers */
      /*translate(25px, 51px)*/
      translate(0px, 0px)
      /* 45 is really 360 - 45 */
      /*rotate(315deg);*/
      rotate(270deg);
    width: 10px;
}
th.rotate2 > div > span {
    border-bottom: 1px solid #ccc;
    padding: 5px 10px;
}

/* Ezber Dersleri 3 */
th.rotate3 {
    /* Something you can count on */
    height: 130px;
    white-space: nowrap;
}
th.rotate3 > div {
    transform: 
      /* Magic Numbers */
      /*translate(25px, 51px)*/
      translate(0px, 0px)
      /* 45 is really 360 - 45 */
      /*rotate(315deg);*/
      rotate(270deg);
    width: 10px;
}
th.rotate3 > div > span {
    border-bottom: 1px solid #ccc;
    padding: 5px 10px;
}

/* Ezber Dersleri 4 */
th.rotate4 {
    /* Something you can count on */
    height: 130px;
    white-space: nowrap;
}
th.rotate4 > div {
    transform: 
      /* Magic Numbers */
      /*translate(25px, 51px)*/
      translate(0px, 0px)
      /* 45 is really 360 - 45 */
      /*rotate(315deg);*/
      rotate(270deg);
    width: 10px;
}
th.rotate4 > div > span {
    border-bottom: 1px solid #ccc;
    padding: 5px 10px;
}


/* Notlar 1. Ezber */
td.rotate5 {
    /* Something you can count on */
    height: 0px;
    white-space: nowrap;
}
td.rotate5 > div {
    transform: 
      /* Magic Numbers */
      /*translate(10px, 30px)*/
      translate(10px, 250px)
      /* 45 is really 360 - 45 */
      /*rotate(315deg);*/
      rotate(270deg);
    width: 20px;
}
td.rotate5 > div > span {
    border-bottom: 1px solid #ccc;
    padding: 5px 10px;
}

/* Notlar 2. - 4. Ezber */
td.rotate6 {
    /* Something you can count on */
    height: 0px;
    white-space: nowrap;
}
td.rotate6 > div {
    transform: 
      /* Magic Numbers */
      /*translate(10px, 30px)*/
      translate(10px, 300px)
      /* 45 is really 360 - 45 */
      /*rotate(315deg);*/
      rotate(270deg);
    width: 20px;
}
td.rotate6 > div > span {
    border-bottom: 1px solid #ccc;
    padding: 5px 10px;
}


th.derskayit {
    /*font-size: 11px;*/
    font-size: 14px;
}

td.derskayit {
    /*font-size: 11px;*/
    font-size: 14px;
}