/* ===================== LOGIN-REGISTER PAGE =========================== */

#LoginUser .Main-Content {
    background-color: #F4F4F4;
    width: 100%;
    height: auto;
    display: block;
    padding:30px;
    font-family:'Open Sans', sans-serif;
}

#LoginUser .container {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}


#LoginUser .Left {
   padding: auto;
   padding: 30px 20px 40px 40px;
   background-color: #F8FAFC;
   border: #EFEFEF solid 1px;
   border-radius: 8px;
}

#LoginUser .Left .Left-Row {
    position: relative;
    padding-bottom: 20px;
}


#LoginUser .Left-Row figure{
    width: 55px;
    height: 55px;
    display: block;
    position: absolute;
    top: 0;
    left: -67.5px;
    background-color: #fff;
    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 5%);
    border: solid 1px #EFEFEF;
    border-radius: 100%;

}

#LoginUser .Left-Row figure svg{
    width: 35px;
    height: 35px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: block;
    margin: auto;
}

#LoginUser .Left-Row .title {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 12.5px;
    color: #0065B8;
    font-size: 1rem;
}

#LoginUser .Left-Row .description {
    display: block;
    width: 100%;
    height: auto;
    color: #666;
    font-size: 14px;
    font-size: .875rem;
    line-height: 1.4;
}



#LoginUser .Right {
    padding: auto;
    background-color: #fff;
    border:1px solid #EFEFEF;
    padding-left: 0;
    padding-right: 0;
    border-radius: 8px;
 }

 #LoginUser .Right .title {
    border-bottom:1px solid rgba(0, 0 ,0, 0.1);
    padding: 10px 20px;
 }


 #LoginUser .Right .title h3{
    color: #28374F;
    font-size: 1.875em;
    font-weight: 500;
 }

 #LoginUser .Right .title small{
    color: #999;
    font-size: .75em;
 }

 #LoginUser .Right .LoginForm {
    padding: 10px 20px 40px 20px;
    border-bottom:1px solid rgba(0, 0 ,0, 0.1);
 }

 #LoginUser .Right .LoginForm input.form-control {
    padding:10px 20px;
    font-size: .875rem;
    /*border: 2px solid #ddd;*/
    /*background: white;*/
    border-radius: 6px;
    transition: all 150ms ease-in-out;
 }

 #LoginUser .Right .LoginForm label.form-label {
    font-size: .75em;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px

 }

 #LoginUser .Right .LoginForm .form-check {
   display: flex;
   justify-content: space-between;
   align-items: center;

 }

 #LoginUser .Right .LoginForm .form-check label{
    font-size: .875em;
    color: #666;
    line-height: 18px;

  }

  #LoginUser .Right .LoginForm .form-check a{
    color: #3394de;
    font-size: .875em;
    text-decoration: none;

  }

  #LoginUser .Right .LoginForm .KVKK label{
    font-size: .875em;
    color: #999;
    font-weight: normal;
  }


  #LoginUser .Right .LoginForm .KVKK a{
    color: #3394de;
    text-decoration: none;

  }

 #LoginUser .Right .LoginForm button {
    background-color:  #0065B8;
    color: #fff;
    width: 100%;
    padding:10px 0px;
    font-size: .875em;
    border-radius: 6px;
    text-transform: uppercase;
    font-weight: bold;

 }

 #LoginUser .Right .Register {
    padding-top: 15px;
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
 }

 #LoginUser .Right .Register span {

 color: #999;
 font-size: .875em;
 text-align: center;
 }

 #LoginUser .Right .Register a {
    color: #3394de;
    font-size: .875em;
    text-decoration: none;
}

@media only screen and (max-width: 680px) {


    #LoginUser .Main-Content {
        width: 100%;
        padding:0px;
        background-color: #f1f3f7;

    }

    #LoginUser .container {
        width: 100%;
        background-color: transparent;
    }

    #LoginUser .Right {
     background-color: transparent;
     padding-top: 50px;
     padding-bottom: 100px;
     }


    #LoginUser .Right .title {
        border-bottom:1px solid rgba(0, 0 ,0, 0.1);
        padding: 10px 10px;
        border-top:1px solid rgba(0, 0 ,0, 0.1);
        background-color: #fff;
     }


     #LoginUser .Right .title h3{
        font-size: 1.25em;
        font-weight: 700;
        color:#122264;
     }

     #LoginUser .Right .title small{
        display: none;
     }

     #LoginUser .Right .LoginForm {
        padding: 10px 10px;
        border-bottom:none;
        background-color: transparent;
     }

     #LoginUser .Right .LoginForm input.form-control {
        padding:15px 10px;
        font-size: 0.875em;
        background: white;
        color:#505162 !important;
        font-weight: 700;
     }

     #LoginUser .Right .LoginForm label.form-label {
       display: none;

     }

     #LoginUser .Right .LoginForm .form-check label{
        font-size: .75em;
        line-height: 16px;

      }

      #LoginUser .Right .LoginForm .form-check a{
        font-size: .75em;
      }

      #LoginUser .Right .LoginForm .KVKK label{
        font-size: .75em;
        text-align: center;
      }



     #LoginUser .Right .LoginForm button {
        background-color:  #0065ff;
        color: #fff;
        padding:15px 0px;
     }


 #LoginUser .Right .Register {
    text-align: center;
}

#LoginUser .Right .Register span {
    display: block;
}


}


/* ===================== HOLIDAY OPPORTUNITY PAGE =========================== */


#HolidayOpportunity .Main-Content {

   background-color: #F8FAFC;
   font-family:'Open Sans', sans-serif;
   padding-bottom: 5%;
}

@media only screen and (max-width: 680px) {
   #HolidayOpportunity .Main-Content .container {
      padding-left: 0;
      padding-right: 0;
   }
}

/* --------------------- TOP ------------------- */

#HolidayOpportunity .Top .Left .Left-Content {
   width:100%;
   height:360px;
}

#HolidayOpportunity .Top .Right .item-content {
   width:100%;
   height:360px;
}

#HolidayOpportunity .Top .Right .item-content img{
   border-radius:15px 15px;
   width:100%;
   height:100%;
   object-fit:cover;
}

@media only screen and (max-width: 680px) {
   #HolidayOpportunity .Top .Left .Left-Content {
      width:100%;
      height:434px;
      border-radius: 8px;
   }
}

/* --------------------- MIDDLE ------------------- */

#HolidayOpportunity .Middle .col-md-6{
padding-left: 15px;
padding-right: 15px;
padding-top: 20px;
}

#HolidayOpportunity .Middle a{
   width: 100%;
   display: inline-block;
   border: 1px solid #EFEFEF;
   text-decoration: none;
   background-color: #fff;
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
   transition: all 250ms ease-in-out;

}

#HolidayOpportunity .Middle a .top .in{
   width: 100%;
   padding:15px;
   text-align: center;
}

#HolidayOpportunity .Middle a .top .in .card-title{
   display: block;
    color: #28374F;
    font-size: 14px;
    font-weight: 700;
    transition: all 150ms ease-in-out;
}

#HolidayOpportunity .Middle a .top .in .description{
   display: block;
   margin-top: 5px;
   color: #666;
   font-size: 12px;
}

#HolidayOpportunity .Middle a figure{
   width: 100%;
   height:260px;
   margin-bottom: 0;
}

#HolidayOpportunity .Middle a .down{
   display:none;
   opacity: 0;
}

#HolidayOpportunity .Middle a .down .in{
   width: 100%;
   padding:10px;
}

#HolidayOpportunity .Middle a .down .in .card-title{
   display: block;
   font-weight: 600;
   color: #122264;
   margin-top: 8px;
   text-align: left;
   padding: 0 10px;
   line-height: 1.38;
}

#HolidayOpportunity .Middle a .down .in .description{
   display: block;
   margin-top: 13px;
   color: #3394de;
   font-size: 14px;
   font-size: .875rem;
   line-height: 1.29;
   padding: 0 10px;
}



@media only screen and (max-width: 680px) {

   #HolidayOpportunity .Middle .col-md-6{
      padding-left: 0px;
      padding-right: 0px;
      padding-top: 20px;
      }

   #HolidayOpportunity .Middle a .top {
      display:none;
      opacity: 0;
   }

   #HolidayOpportunity .Middle a figure{
      width: 100%;
      height:184px;
      margin-bottom: 0;
   }

   #HolidayOpportunity .Middle a .down{
      display:block;
      opacity: 1;
   }
}

/* --------------------- DOWN ------------------- */


#HolidayOpportunity .Down{
  margin-top: 20px;
}

#HolidayOpportunity .Down .col-md-12{
   padding-top: 25px;
 }

#HolidayOpportunity .Down .Content{
   background-color: #ffffff;
   box-shadow: 0 10px 30px 0 rgb(0 0 0 / 6%);
   padding: 30px;
   text-align: left;
   }

#HolidayOpportunity .Down .Content h3{
   font-size: 1.125em;
   font-weight: 600;
   color:#424242;
 }

#HolidayOpportunity .Down .Content p{
    margin-top: 15px;
    color: #666;
    font-size: .75em;
    line-height: 18px;
}


/* ===================== OFFICIAL HOLIDAY CALENDAR PAGE =========================== */

#OfficialHolidayCalendar .TopContent {
   background-color: #F8FAFC;
}

#OfficialHolidayCalendar .TopContent .Header{
   background-color: #DEF1FF;
}

#OfficialHolidayCalendar .TopContent .Header .HeadTitle{
   display: flex;
   justify-content: left;
   align-items: center;
}

#OfficialHolidayCalendar .TopContent .Header h1{
   display: inline-block;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.33;
    letter-spacing: normal;
    color: #28374f;
    margin-top: 10px;
}

#OfficialHolidayCalendar .TopContent .Header .HeadTitle img{
   display: inline-block;
   width: auto;
   height: 25px;
   margin-left: 20px;
}


#OfficialHolidayCalendar .TopContent .Header p{
    font-size: 0.95rem;
    font-weight: normal;
    line-height: 1.79;
    color: #28374f;
    margin-top: 15px;
}


/* ---------  Active ------------- */

#OfficialHolidayCalendar .TopContent .Active .RadioBox{
   background: #fff;
   border: 1px solid #ddd;
   border-radius: 6px;
   padding: 15px 20px;
   margin-top: 30px;
}

#OfficialHolidayCalendar .TopContent .HolidayBox{
   width: 100%;
   padding-top: 0;
   padding-bottom: 8px;
   background: #fff;
   border-radius: 6px;
   box-shadow: 0 0 10px 0 rgb(0 0 0 / 5%);
   margin-top: 30px;
   border: solid 1px #d9d9d9;
   transition: all 150ms ease-in-out;
   overflow: hidden;
}

#OfficialHolidayCalendar .TopContent .HolidayBox .Image{
   width: 100%;
   height: 100px;
}

#OfficialHolidayCalendar .TopContent .HolidayBox .Image img{
   width: 100%;
   height: 100%;
   object-fit: cover;
}

#OfficialHolidayCalendar .TopContent .HolidayBox .Info {
   display: flex;
   justify-content: space-around;
   align-items: center;
}

#OfficialHolidayCalendar .TopContent .HolidayBox .Info .item .title {
   display: block;
   font-size: 1.05rem;
   line-height: 1.13;
   color: #333333;
}

#OfficialHolidayCalendar .TopContent .HolidayBox .Info .item .day {
   font-size: 0.95rem;
   color: #999;
}

#OfficialHolidayCalendar .TopContent .HolidayBox .Info .DayNumber span {
    padding: 5px 8px;
    border-radius: 10px;
    border: 1px solid #0fba54;
    background: #0fba54;
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    transition: all 150ms ease-in-out;
}


#OfficialHolidayCalendar .TopContent .HolidayBox .Detail {
   /* border-bottom: 1px solid #333333; */
}

#OfficialHolidayCalendar .TopContent .HolidayBox .Detail ul {
   list-style: circle;
   display: flex;
   justify-content: space-around;
}

#OfficialHolidayCalendar .TopContent .HolidayBox .Detail ul li{
  font-size: 0.85rem;
  color: #333333;

}

#OfficialHolidayCalendar .TopContent .HolidayBox .Links {
   display: flex;
   justify-content: space-around;
   align-items: center;
   border-top: 1px solid #efefef;
}

#OfficialHolidayCalendar .TopContent .HolidayBox .Links a {

text-decoration: none;

}

#OfficialHolidayCalendar .TopContent .HolidayBox .Links a i {
      display: block;
      line-height: 30px;
      font-size: 2rem;
      color:#666;
      margin-bottom: 10px;
}

#OfficialHolidayCalendar .TopContent .HolidayBox .Links a i:hover {
   color:#3394de;
}

#OfficialHolidayCalendar .TopContent .HolidayBox .Links a span {
   font-size: 0.85rem;
   color:#3394de;
}


/* --------- Passive ------- */


#OfficialHolidayCalendar .TopContent .Passive {
   background: #fff;
}

#OfficialHolidayCalendar .TopContent .Passive h2{
   font-size: 1.7rem;
   font-weight: bold;
}

#OfficialHolidayCalendar .TopContent .Passive .HolidayBox{
  opacity: 0.5;
}


/* --------- Down Content ------- */


#OfficialHolidayCalendar .DownContent {
   background-color: #F8FAFC;
}

#OfficialHolidayCalendar .DownContent .Text h1{
   color: #333;
   font-weight: bold;
   font-size: 1.4rem;
}

#OfficialHolidayCalendar .DownContent .Text p{
   font-size: 1rem;
   color: #333;
   line-height: 1.35rem;
}

#OfficialHolidayCalendar .DownContent .Text ul li a{
   text-decoration: none;
   font-size: 1rem;
   color: #3394de;
}

#OfficialHolidayCalendar .DownContent .Text ul li{
   line-height: 1.2rem;
}