.solbosluk5
{
	padding-left: 5px;
}

.solbosluk10
{
	padding-left: 10px;
}

.solbosluk80
{
	padding-left: 80px;
}
.sagbosluk80
{
	padding-right: 80px;
}
.h5px {
    height: 5px;
}
.h10px {
    height: 10px;
}
.h15px {
    height: 15px;
}
.aaashbrd {
    display: inline-block;
    float: left;
    color: rgba(255,255,255,0.9);
    opacity: 0.4;
    filter: alpha(opacity=60);
    /* margin-left: 0px; */
    font-size: 50px;
    line-height: 0px;
    /* position: absolute; */
	padding: 10px;
}
.solsilik
{
/* bootstap 4 font ayarları bitti */

  display: inline-block;
    float: left;
    opacity: 0.4;
    filter: alpha(opacity=60);
font-size: 50px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.radius-5 {

    border-radius: 5px;
    padding: 10px;
}
.radius-10 {

    border-radius: 10px;
    padding: 10px;
}
.radius-15 {
    border-radius: 15px;
    padding: 10px;
}
.radius-20 {

    border-radius: 20px;
    padding: 10px;
}
    .buyuk
	{
    text-transform:uppercase;

}
    .yazi
	{
      
    font-size: 40px;
}

   .BeyazYazi 
{
    
    color:#fff;
    text-shadow: 0 0 3px #000000;
}


.giristablo-text-center 
{
  text-align: center;
   margin-bottom: 10px;
}

.bos 
{
  text-align: center;
   margin-bottom: 10px;
}

.giristablo.bg {
	-webkit-box-shadow: 0px 2px 5px rgba(0,0,0, 0.1);
    -moz-box-shadow: 0px 2px 5px rgba(0,0,0, 0.1);
    -moz-border-radius: 60px 20px 60px 5px; /* Mozilla icin ovallestirme */
    -webkit-border-radius: 60px 20px 60px 5px; /* Chrome icin ovallestirme */
    border-radius: 60px 20px 40px 5px; /* i.e. icin ovallestirme */
	border: 1px solid #d1d2d3; /* tablo kanlinligi ve cizgi rengi */

    font-size: 14px;
	background-color: #f3f3f36e; /* arka fon icin renk ve sefaflik*/
    padding-top: 30px;
    padding-bottom: 25px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

}    
  .giristablo-col-md-6 {
  position: relative;
  min-height: 0px;
  padding-right: 5%;
  padding-left: 5%;
}
  .giristablo {
      width: 95%;
}
  .tablogirisrow {
  margin-left: 0px;
  margin-right: 0px;
}

    @media (min-width: 600px) {
        .giristablo {
            width: 500px;
}
}


  @media (min-width: 900px) {
  .giristablo {
    width: 450px;
}
}
@media (min-width: 1200px) {
  .giristablo {
    width: 500px;
}
}
@media (min-width: 1200px) {
  .giristablo {
    width: 500px;
}
}

.mbody {
	width: 100wh;
	height: 90vh;
	color: #fff;
	background: linear-gradient(-45deg, #ee6363, #e3dc21, #EE7752, #E73C7E, #23A6D5, #23D5AB, #1E90FF);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

x1,x6 {
	  
	font-weight: 300;
	text-align: center;
	position: absolute;
	top: 45%;
	right: 0;
	left: 0;
}


  div.BakiyeTablosu {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}



    .hMessage {
					width:240px;
					padding:2px;
				}
    .hMessage table{
					margin-bottom:2px;
				}
    .hMessage table tr td{
					border:0px;
					border-bottom:1px solid #F1F1F1;
				}
    .hMessage .table-bordered {
					border: 0px solid #dddddd;
				}
    .hMessage .link {
					color:#000;
				}
    .hMessage img.avatar{
					width:40px;
					height:40px;
					float:left;
					margin-right:5px;
					border:1px solid #ccc;
					padding:1px;
				}
    .hMessage span.name{
					font-size:13px;
					font-weight:bold;
					color:#616161;
				}
    .hMessage p{
					font-size:12px;
					width:100%;
					height:10px;
					color:#000;
				}
    .hMessage .alert{
					margin-bottom:2px;
					font-size:13px;
					padding:5px 10px;
					border-top:0px;
				}
    .hMessage .sub_button{
					padding:0px 5px;
					margin-top:3px;
				}
    .hMessage .custom_btn{
					width:49%;
					margin:5px 0px;
				}
				
				
    div.Yfixed {
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                height: 50px;
                width: 50px;
                line-height: 50px;
                text-align: center;
                right: 50px;
                bottom: 50px;
                z-index:1030px;
                position: fixed;
                bottom: 20px;
                right: 50px;
                width: 30px;
                background-color: #80c7ef;
                font-size: 24px;
                opacity: .7;
                } 
                
.success {background-color: #4CAF50;
    color: #46a049;
    padding: 10px;
} /* Green */
.success:hover {background-color: #46a049;
    color: black;
    padding: 10px;
}

.info {background-color: #2196F3; color: #0b7dda; padding: 10px; } /* Blue */
.info:hover {background: #0b7dda; color: black; padding: 10px; }

.warning {background-color: #ff9800; color: #e68a00; padding: 10px; } /* Orange */
.warning:hover {background: #e68a00; color: black; padding: 10px; }

.danger {background-color: #f44336; color: #da190b; padding: 10px; } /* Red */
.danger:hover {background: #da190b; color: black; padding: 10px; }

.default {background-color: #e7e7e7; color: black;} /* Gray */ 
.default:hover {background: #ddd; color: black;}

.mor {background-color: #c32aa3; color: #aa238e;} /* Red */ 
.mor:hover {background: #aa238e; color: black;}

.pembe {background-color: #f94877; color: #bb3559;} 
.pembe:hover {background: #bb3559; color: black;}
.pembe:a {background: #ffffff; color: #ffffff;}
 



.SolAltBes {border-bottom-left-radius: 5px;}
.SagAltBes {border-bottom-right-radius: 5px;}
.SolUstBes {border-top-left-radius: 5px;}
.SagUstBes {border-top-right-radius: 5px;}
.CevresiBes {border-radius: 5px;}

.SolAltOn {border-bottom-left-radius: 10px;}
.SagAltOn {border-bottom-right-radius: 10px;}
.SolUstOn {border-top-left-radius: 10px;}
.SagUstOn {border-top-right-radius: 10px;}
.CevresiOn {border-radius: 10px;}

.SolAltYirmi {border-bottom-left-radius: 20px;}
.SagAltYirmi {border-bottom-right-radius: 20px;}
.SolUstYirmi {border-top-left-radius: 20px;}
.SagUstYirmi {border-top-right-radius: 20px;}
.CevresiYirmi {border-radius: 20px;}

.alert-mor {
    color: #331442;
    background-color: #c86ef5;
    border-color: #b554e6; }
    
    div.yapis {
  position: -webkit-sticky;
  position: sticky;
  top: 131px;
  z-index: 999;
}
    div.PDFKaydet {
  position: -webkit-sticky;
  position: sticky;
  top: 5px;

}

    div.MBYapis {
  position: -webkit-sticky;
  position: sticky;
  top: 63px;
  	z-index:1

}
.navbar-default {
    position: fixed;

}

.dashboard-stat .dshbrd {

    display: inline-block;
    float: left;
    color: rgba(255,255,255,0.9);
    opacity: 0.4;
    filter: alpha(opacity=60);
    margin-left: -8px;
    font-size: 50px;
    line-height: 94px;
    position: absolute;
	

}
@media only screen and (min-width: 991px) {
	.dashboard-stat .dshbrd {
     display: inline-block;
    float: left;
    color: rgba(255,255,255,0.9);
    opacity: 0.4;
    filter: alpha(opacity=60);
    margin-left: 1px;
    
    line-height: 80px;
    position: absolute;
}
	}

.success {background-color: #4CAF50;} /* Green */
.success:hover {background-color: #46a049;}

.info {background-color: #2196F3;} /* Blue */
.info:hover {background: #0b7dda; color: black;}

.warning {background-color: #ff9800; color: black;} /* Orange */
.warning:hover {background: #e68a00; color: black;}

.danger {background-color: #f44336; color: black;} /* Red */
.danger:hover {background: #da190b; color: black;}

.default {background-color: #e7e7e7; color: black;} /* Gray */
.default:hover {background: #c6c4c4; color: black;}

.mor {background-color: #c32aa3; color: white;} /* mor */
.mor:hover {background: #891a72; color: white;}

.pembe {background-color: #f94877; color: #000000;} 
.pembe:hover {background: #bb3559; color: #000000;}
.pembe:a {background: #000000; color: #000000;}

.GriSiyah {
  background-color: #777;   /* Gri arka plan */
  color: white;             /* Beyaz yazı */
  text-decoration: none;    /* Alt çizgi kaldır */
  padding: 5px 10px;        /* Göz için hoş boşluklar */
}

.GriSiyah:hover {
  background-color: #5e5d5d; /* Üzerine gelince koyu gri */
  color: white;              /* Yazı rengi beyaz kalır */
  text-decoration: none;     /* Alt çizgi yine olmasın */
}

.GriSiyah:link,
.GriSiyah:visited,
.GriSiyah:active {
  text-decoration: none;     /* Tüm durumlarda alt çizgi kaldırılır */
}


.Siyah {
  background-color: #000000;   /* Gri arka plan */
  color: white;             /* Beyaz yazı */
  text-decoration: none;    /* Alt çizgi kaldır */
  padding: 5px 10px;        /* Göz için hoş boşluklar */
}

.Siyah:hover {
  background-color: #222222; /* Üzerine gelince koyu gri */
  color: white;              /* Yazı rengi beyaz kalır */
  text-decoration: none;     /* Alt çizgi yine olmasın */
}

.Siyah:link,
.Siyah:visited,
.Siyah:active {
  text-decoration: none;     /* Tüm durumlarda alt çizgi kaldırılır */
}


.ZeytinYesili {
  background-color: #626F47;  /* Zeytin yeşili arka plan */
  color: white;               /* Beyaz yazı */
  text-decoration: none;      /* Link ise alt çizgi olmasın */
  padding: 5px 10px;          /* Göz yormayan boşluklar */
}

.ZeytinYesili:hover {
  background-color: #A4B465;  /* Üzerine gelince açık zeytin tonu */
  color: white;               /* Yazı yine beyaz */
  text-decoration: none;      /* Alt çizgi olmasın */
}

.ZeytinYesili:link,
.ZeytinYesili:visited,
.ZeytinYesili:active {
  text-decoration: none;      /* Linkin her durumda alt çizgisi olmasın */
}

 


.SolAltBes {border-bottom-left-radius: 5px;}
.SolUst5 {border-top-left-radius: 5px;}
.SagAltBes {border-bottom-right-radius: 5px;}
.SolUstBes {border-bottom-left-radius: 5px;}
.CevresiBes {border-radius: 5px;}

.SolAltOn {border-bottom-left-radius: 10px;}
.SolUstOn {border-top-left-radius: 10px;}
.SagAltOn {border-bottom-right-radius: 10px;}
.SolUstOn {border-bottom-left-radius: 10px;}
.CevresiOn {border-radius: 10px;}

.SolAltYirmi {border-bottom-left-radius: 20px;}
.SolUstYirmi {border-top-left-radius: 20px;}
.SagAltYirmi {border-bottom-right-radius: 20px;}
.SolUstYirmi {border-bottom-left-radius: 20px;}
.CevresiYirmi {border-radius: 20px;}
    




.dashboard-stat .dshbrd i {

  color: #D2D2D2;
  
  
}


.dashboard-stat.purple {
    background-color: #852b99;
    border-bottom:6px solid #6e1881;
  }
    .dashboard-stat.purple:hover {background: #772689;}

.dashboard-stat.purple .more {
    background-color: #6e1881;
}

.dashboard-stat.dark_blue {
    background-color: #00008B;
    border-bottom:6px solid #010169;
}
    .dashboard-stat.dark_blue:hover {background: #01017c;}
	
.dashboard-stat.metro_green {
    background-color: #00a300 ;
    border-bottom:6px solid #006e00;
}
    .dashboard-stat.metro_green:hover {background: #028402;}
	
.dashboard-stat.metro_red {
    background-color: #ee1111;
    border-bottom:6px solid #8a0000;
}
    .dashboard-stat.metro_red:hover {background: #d60101;}
	
.dashboard-stat.metro_brown {
    background-color: #d27d02;
    border-bottom:6px solid #945802;
}
.dashboard-stat.metro_brown:hover {background: #b36a03;}
	

    .dashboard-stat.default {
        background-color: #d1cfcf;
        border-bottom: 6px solid #878787;
        color:black;
    }
    .dashboard-stat.default:hover {background: #b1aeae;}



.dashboard-stat.yellow {
    background-color: #ffb848;
    border-bottom:6px solid #ce8611;
	color:black;

}
    .dashboard-stat.yellow:hover {background: #b98735;}


.dashboard-stat.green {
    background-color: #12c377;
    border-bottom:6px solid #10a062;
	        color:white;
}
 .dashboard-stat.green:hover {background: #28b779;}




    .dashboard-stat.mor {
        background-color: #c32aa3;
        border-bottom: 6px solid #891a72;
        color:black;

    }
    .dashboard-stat.mor:hover {background: #a7248b;}


    .dashboard-stat.pembe {
        background-color: #f94877;
        border-bottom: 6px solid #bb3559;
        color:black;
    }
    .dashboard-stat.pembe:hover {background: #dc4069;}


    .dashboard-stat.sari {
      background-color: #e3ad08;
      border-bottom: 6px solid #ad8407;
      color:black;
  }
  .dashboard-stat.sari:hover {background: #cf9c02;}



    .dashboard-stat.red {
    background-color: #f44c3f;
    border-bottom: 6px solid #da190b;
        color:black;
    }
    .dashboard-stat.red:hover {background: #e23e31;}


    .dashboard-stat.turuncu {
      background-color: #ff9800;
      border-bottom: 6px solid #c87902;
      }
      .dashboard-stat.turuncu:hover {background: #e49216;}
  


    .dashboard-stat.yesil {
    background-color: #4CAF50;
    border-bottom: 6px solid #357938;
        color: black;
    }
    .dashboard-stat.yesil:hover {background: #46a049;}



    .dashboard-stat.blue {
        background-color: #27a9e3;
        border-bottom:6px solid #208dbe;
        color:black;
    }
    .dashboard-stat.blue:hover {background: #269bce;}


    .dashboard-stat.redmenu {
        background-color: #f44c3f;
        border-bottom: 6px solid #da190b;
        padding-block: 11px;

    }

    .dashboard-stat.turuncumenu {
        background-color: #ff9800;
        border-bottom: 6px solid #e68a00;
        padding-block: 11px;
        padding: 10px;
    }

    .dashboard-stat.yesilmenu {
        background-color: #4CAF50;
        border-bottom: 6px solid #46a049;
        padding-block: 11px;
        padding: 10px;
    }

    .dashboard-stat.bluemenu {
        background-color: #27a9e3;
        border-bottom:6px solid #208dbe;
        padding-block: 11px;
        padding: 10px;
    }



@media (max-width: 820px) {
.navbar-default .navbar-nav > li > a {

  font-size: 15px;
  color: #ffffff;
}  
}
	

    /*  .search-box{
        margin-top: 1px;
        z-index:2
    }
    /* Formatting result items */
.liveresult li{
	cursor: pointer;
	z-index:2
}
/* 820px çözünürlüğü altına gösterme <div class="yoket"> */
@media (max-width: 820px) {
.yoket {

   display: none;
}  
}

    @media screen and (max-width: 765px) {
        .yoket-765 {

            display: none;
        }
    }

    @media screen and (max-width: 1142px) {
        .yoket-1142 {

            display: none;
        }
    }
    .search-box h4{
    color: #fff;
    z-index: 1000;
}
.search-box{
 position:absolute;
  z-index: 1000;
  min-width: 360px;
  /* top: 100%;
  left: 0;
  
  float: left;
  
  padding: 0px 0;
  margin: 1px 0 0;
  font-size: 12px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
*/

}

    @media only screen and (max-width: 991px) {
        .xxxxx {
            display: inline-block;
            float: left;
            color: rgba(255,255,255,0.9);
            opacity: 0.4;
            filter: alpha(opacity=60);
            margin-left: 1px;
            font-size: 29px;
            line-height: 80px;
            position: absolute;
        }

/* Formatting result items */
.liveresult li{
    cursor: pointer;
    z-index: 100;
}
.liveresult li:hover{
    background: #f2f2f2;
    z-index: 100;
}
/*PROSSES BAR İÇİN */
        .text-large {
            font-size: 150%;
        }
        .progress {height: 30px !important;}
        .progress-bar {
            width: 0;
            animation: progress 1.5s ease-in-out forwards;


        .title {
            opacity: 0;
            animation: show 0.35s forwards ease-in-out 0.5s;
        }
    }

    @keyframes progress {
        from {
            width: 0;

        }
        to {
            width: 100%;

        }
    }
    @keyframes show  {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    /*PROSSES BAR İÇİN BİTTİ*/


/* buton ayarları*/
    .buton {
        display: inline-block;
        padding: 15px 25px;
        font-size: 24px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        outline: none;
        color: #fff;
        background-color: #4CAF50;
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #999;
    }

    .buton:hover {background-color: #3e8e41}

    .buton:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }
    .buton-250px {width: 250px;}
    .buton-yuzde50 {width: 50%;}
    .buton-yuzde100 {width: 100%;}

    .buton-yuvarla2px {border-radius: 2px;}
    .buton-yuvarla4px {border-radius: 4px;}
    .buton-yuvarla8px {border-radius: 8px;}
    .buton-yuvarla12px {border-radius: 12px;}
    .buton-yuvarlayuzde50 {border-radius: 50%;}

    .buton-yesil {background-color: #4CAF50;} /* Green */
    .buton-mavi {background-color: #008CBA;} /* Blue */
    .buton-kirmizi {background-color: #f44336;} /* Red */
    .buton-gri {background-color: #e7e7e7; color: black;} /* Gray */
    .buton-siyah {background-color: #555555;} /* Black */
    .buton-turuncu {background-color: #ff9800;} /* turuncu */
    .buton-pembe {background-color: #f94877;} /* pembe */

/* bootstap 4 font ayarları */


text-monospace {
  font-family: "Inter", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

text-justify {
  text-align: justify !important;
}

text-nowrap {
  white-space: nowrap !important;
}

text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
    text-left {
  text-align: left !important;
}

text-right {
  text-align: right !important;
}

text-center {
  text-align: center !important;
}

@media (min-width: 576px) {
  .text-sm-left {
    text-align: left !important;
  }
  .text-sm-right {
    text-align: right !important;
  }
  .text-sm-center {
    text-align: center !important;
  }
}

@media (min-width: 768px) {
  .text-md-left {
    text-align: left !important;
  }
  .text-md-right {
    text-align: right !important;
  }
  .text-md-center {
    text-align: center !important;
  }
}

@media (min-width: 992px) {
  .text-lg-left {
    text-align: left !important;
  }
  .text-lg-right {
    text-align: right !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
}

@media (min-width: 1200px) {
  .text-xl-left {
    text-align: left !important;
  }
  .text-xl-right {
    text-align: right !important;
  }
  .text-xl-center {
    text-align: center !important;
  }
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.font-weight-light {
  font-weight: 300 !important;
}

.font-weight-normal {
  font-weight: 400 !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.font-italic {
  font-style: italic !important;
}

.text-white {
  color: #fff !important;
}

.text-primary {
  color: #007bff !important;
}

a.text-primary:hover, a.text-primary:focus {
  color: #0062cc !important;
}

.text-secondary {
  color: #6c757d !important;
}

a.text-secondary:hover, a.text-secondary:focus {
  color: #545b62 !important;
}

.text-success {
  color: #28a745 !important;
}

a.text-success:hover, a.text-success:focus {
  color: #1e7e34 !important;
}

.text-info {
  color: #17a2b8 !important;
}

a.text-info:hover, a.text-info:focus {
  color: #117a8b !important;
}

.text-warning {
  color: #ffc107 !important;
}

a.text-warning:hover, a.text-warning:focus {
  color: #d39e00 !important;
}

.text-danger {
  color: #dc3545 !important;
}

a.text-danger:hover, a.text-danger:focus {
  color: #bd2130 !important;
}

.text-light {
  color: #f8f9fa !important;
}

a.text-light:hover, a.text-light:focus {
  color: #dae0e5 !important;
}

.text-dark {
  color: #343a40 !important;
}

a.text-dark:hover, a.text-dark:focus {
  color: #1d2124 !important;
}

.text-body {
  color: #212529 !important;
}

.text-muted {
  color: #6c757d !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}


@-webkit-keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: .75s linear infinite spinner-border;
  animation: .75s linear infinite spinner-border;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

@-webkit-keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: .75s linear infinite spinner-grow;
  animation: .75s linear infinite spinner-grow;
}

.spinner-grow-sm {
  width: 1rem;
  height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .spinner-border,
  .spinner-grow {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
  }
}

.section {
  max-height: 250px;
  padding: 1rem;
  overflow-y: auto;
  direction: ltr;
  scrollbar-color: #d4aa70 #e4e4e4;
  scrollbar-width: thin;

  h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }

  p + p {
    margin-top: 1rem;
  }
}

.section::-webkit-scrollbar {
  width: 20px;
}

.section::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 100px;
}

.section::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background-image: linear-gradient(180deg, #d0368a 0%, #708ad4 99%);
  box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
}