html {
  scroll-behavior: smooth;
}

.lineheight22px {
  line-height: 22px;
}

.lineheight24px {
  line-height: 24px;
}

.lineheight26px {
  line-height: 26px;
}

.lineheight28px {
  line-height: 28px;
}

.lineheight30px {
  line-height: 30px;
}

.lineheight32px {
  line-height: 32px;
}

.lineheight34px {
  line-height: 34px;
}

.lineheight36px {
  line-height: 36px;
}

.lineheight38px {
  line-height: 38px;
}

.lineheight40px {
  line-height: 40px;
}


* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  font-family: 'Almarai', sans-serif;
  position: relative;
  min-height: 100%;
}

a {
  color: inherit !important;
  text-decoration: none !important;
}


/*Start First Header*/
.first-header {
  background-color: #FE9A2A;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  min-height: 7%;
  padding-top: 2px;
  padding-bottom: 2px;
}

.first-header .icons {
  width: 50% !important;
  position: relative;
}

@media (max-width:360px) {
  .first-header .icons img {
    top: 2px !important;
  }

  .first-header .sign {
    width: 50%;
  }

  .first-header .icons li span {
    font-size: 12.5px !important;
  }
}

@media (min-width:470px)and (max-width:767px) {
  .first-header .icons img {
    width: 4% !important;
  }

  .first-header .sign {
    width: 50%;
  }
}

@media (max-width:767px) {
  .down ul {
    width: 60% !important;
  }

  .down li {
    font-size: 15px !important;
  }

  .first-header .sign span {
    font-size: 12px !important;
  }

  .first-header .icons img {
    width: 10% !important;
  }
}

.first-header .icons li {
  display: inline-block;
  padding: 2%;
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.first-header .icons li span {
  font-size: 20px;
  padding-right: 10px;
}

@media (max-width:767px) {
  .first-header .icons li span {
    font-size: 15px;
  }
}

@media (max-width:399px) {
  .first-header {
    padding: 2% !important;
  }
}

.first-header .sign {
  width: 40%;
  margin-left: .8%;
  margin-top: 1%;

}

.first-header .sign span {
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #FFF;
  padding: 3px;
  color: #FFF;
  transition: 0.2s ease-in-out;
  cursor: pointer;
}

.first-header .sign span:hover {
  border: 1px solid #DB5951;
  color: #FE9A2A;
  background-color: #FFF;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

.first-header li:hover {
  transform: rotateX(40deg);
}

.down {
  display: none;
}

@media (max-width:767px) {
  .down ul {
    margin-right: 0 !important;
  }
}

@media (max-width:800px) {
  .mypan {
    width: 100% !important;
  }
}

.down li {
  padding: 17px;
  font-size: 20px;
  cursor: pointer;
  width: 100%;
  transition: all .2s ease-in-out;
}

.down {
  height: 100%;
}

.down li.selected,
.down li:hover {
  background-color: #F7F7F7;
  color: #FE9A2A;
}

.down li:not(:last-child) {
  border-bottom: 1px solid #DFDFDF;
}

.down ul {
  width: 25%;
  background: url('../images/book1.jpg') no-repeat top center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  min-height: 700px;
  color: #FFFFFF;
  position: absolute;
  z-index: 10;
  right: 0
}

.down .overlay {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(5, 16, 27, 0.8);
}

.down li {
  font-size: 15px;
}

/*End First Header*/
/*Start Panel*/
.contents {
  width: 100%;
  margin-top: 50px;
}

@media (max-width:767px) {
  .contents {
    width: 100%;
  }
}

.panel {
  border: 1px solid #DFDFDF;
  border-radius: 5px;
  margin-right: 2%;
  margin-bottom: 2%;
}

.contents .setting,
.contents .category,
.contents .addtext,
.contents .texts,
.contents .addforma,
.contents .formations,
.contents .members,
.contents .comments,
.contents .profil {
  display: none;
}

.panel .panel-header {
  width: 100%;
  background-color: rgba(254, 154, 42, 0.26);
  padding: 10px;
}

.panel_user .panel-header {
  background-color: #347AB9;
  color: #FFF;
}

.board .panel_user {
  border-color: #347AB9;
}

.panel .panel-footer {
  width: 100%;
  padding: 10px;
}

.panel .panel-contenue {
  padding: 10px;
}

.panel.one {
  width: 55% !important;
}

.panel.two {
  width: 38% !important;
}

@media (max-width:767px) {

  .panel.one,
  .panel.two {
    width: 90% !important;
    margin: auto 5% 20px !important;
  }
}

.edit {
  cursor: pointer;
}

.edit_form,
.spes_edit {
  display: none;
}

.panel-contenue input[type=text],
.panel-contenue input[type=file],
.panel-contenue input[type=number] {
  padding: 6px;
  border-radius: 3px;
  border: 1px solid #DFDFDF;
  width: 100%;
  margin-bottom: 10px;
}

.submit .panel-contenue input[type=submit],
.video input[type=submit],
.profil .panel-contenue input[type=submit],
.episode .panel-contenue input[type=submit],
.book .panel-contenue input[type=submit],
.mi7war .panel-contenue input[type=submit],
.hadiya .panel-contenue input[type=submit],
.book .panel-contenue input[type=submit],
.kalo .panel-contenue input[type=submit],
.add_member .panel-contenue input[type=submit],
.setting input[type=submit],
.what input[type=submit],
.file input[type=submit] {
  padding: 6px;
  border-radius: 3px;
  border: 1px solid #DFDFDF;
  background-color: #FE9A2A;
  color: #FFF;
  font-size: 15px;
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.submit .panel-contenue input[type=submit]:hover,
.video input[type=submit]:hover,
.episode .panel-contenue input[type=submit]:hover,
.profil .panel-contenue input[type=submit]:hover,
.mi7war .panel-contenue input[type=submit]:hover,
.kalo .panel-contenue input[type=submit]:hover,
.add_member .panel-contenue input[type=submit]:hover,
.setting input[type=submit]:hover,
.what input[type=submit]:hover,
.file input[type=submit]:hover {
  background-color: #fe9a2a96
}

.panel-contenue table {
  width: 100%;
}

.panel-contenue td,
.panel-contenue th {
  padding: 20px;
  text-align: center;
  font-size: 13px;
}

.panel-contenue tbody tr,
.panel-contenue thead tr {
  border-bottom: 1px solid black;
}

.panel-contenue tbody tr:hover {
  background-color: #F5F4F6;
}

.panel-contenue .modifier {
  background-color: #EBB56D;
  color: #FFF;
  padding: 5px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
}

.panel-contenue .modif {
  background-color: #D05453;
  color: #FFF;
  padding: 5px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
}

.panel-contenue .adecor {
  background-color: #245A86 !important;
  color: #FFF !important;
  padding: 5px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
}

.panel-contenue .del input[type="submit"] {
  background-color: #D05453;
  color: #FFF;
  border: 1px solid #D05453;
  padding: 5px;
  border-radius: 3px;
  cursor: pointer;
}



@media (max-width:991px) {
  .board .panel .panel-con span {
    margin: 5px !important;
  }
}

@media (max-width:767px) {
  .board .panel {
    width: 90% !important;
    margin-right: 5% !important;
  }

  .board .panel .panel-con img {
    width: 30% !important;
    margin-right: 35% !important;
  }
}


/*End Panel*/
/*Start Texts*/
.addtext .panel {
  width: 80%;
  margin-right: 10%;
  text-align: right;
}

.addtext input[type="text"],
.addtext textarea,
.addtext .file,
.addtext select {
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #DFDFDF;
  width: 100%;
  margin-bottom: 10px;
}

.text-body {
  padding: 10px;
  margin-bottom: 1px !important;
  font-weight: bold;
}

.addtext .file {
  margin-top: 20px;
}

.addtext input[type="submit"] {
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #DFDFDF;
  background-color: #FD9D33;
  color: #FFF;
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.annuler {
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #DFDFDF;
  background-color: #D05453;
  color: #FFF;
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.fermer {
  position: fixed;
  top: 70px !important;
  right: 10px;
  width: 5%;
  transition: all .3s ease-in-out;
}

@media (max-width:559px) {
  .h1 {
    font-size: 20px;
  }
}

.addtext input[type="submit"]:hover {
  background-color: #fe9a2a96;
}

.annuler:hover {
  background-color: #d05453a3;
}

.texts .panel {
  width: 100% !important;
  margin: auto !important;
}

.panel .table_text,
.panel .table,
.panel .table_forma,
.panel .table_episode,
.panel .table_kalo,
.panel .table_ma7awir,
.panel .table_com,
.panel .table_user,
.panel .table_members,
.panel .table_text_spes,
.panel .table_forma_spes {
  overflow-x: scroll;
  padding-bottom: 20px;
}

.panel .table_text td span,
.panel .table td span,
.panel .table_forma td span,
.panel .table_kalo td span,
.panel .table_ma7awir td span,
.panel .table_episode td span,
.panel .table_com td span,
.panel .table_user td span,
.panel .table_members td span,
.panel .table_text_spes td span,
.panel .table_forma_spes td span {
  width: 60px !important
}

/*End Texts*/
/*Start Formations*/
.addforma input[type="submit"]:hover {
  background-color: #fe9a2a96;
}

.addforma .file {
  margin-top: 20px;
}

.addforma input[type="submit"] {
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #DFDFDF;
  background-color: #FD9D33;
  color: #FFF;
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.addforma .panel {
  width: 80%;
  margin-right: 10%;
  text-align: right;
}

.addforma input[type="text"],
.addforma textarea,
.addforma .file,
.addforma select {
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #DFDFDF;
  width: 100%;
  margin-bottom: 10px;
}

.addforma input[type="number"] {
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #DFDFDF;
  width: 50%;
  margin-bottom: 10px;
}

.formations .panel {
  width: 100% !important;
  margin: auto !important;
}

.image_panel {
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.image_panel:hover {
  border: 1px solid #FE9A2A;
}

.span_modf {
  background-color: #D05453;
  color: #FFF;
  padding: 8px;
  cursor: pointer;
  border-radius: 2px;
  transition: all .3s ease-in-out;
}

.span_modf:hover {
  background-color: #d0545399;
}

@media (max-width:980px) {
  .image_panel {
    padding: 2px !important;
  }
}

@media (max-width:700px) {
  .image_panel {
    width: 80% !important;
    margin-left: 10% !important;
    margin-top: 20px !important;
  }
}

@media (max-width:500px) {
  .submit_span .span_modf {
    width: 100% !important;
    float: none !important;
  }

  .submit_span {
    width: 100% !important;
    float: none !important;
  }
}

@media (max-width:500px) {
  .submit_span a .span_modf {
    width: 100% !important;
    float: none !important;
  }

  .submit_span a {
    width: 100% !important;
    float: none !important;
  }

  .panel {
    font-size: 12px !important;
    line-height: 1.5;
  }
}

/*End Formations*/


/*Start Settings*/
.setting_section {
  width: 90%;
  margin-right: 5%;
}

.setting_section label {}

@media (max-width:615px) {

  .setting_section input[type=text],
  .setting_section input[type=file] {
    width: 100% !important;
    margin: 10px auto !important;
  }

  .setting input[type=submit] {
    width: 90% !important;
    float: none !important;
    margin-right: 5% !important;
  }

  .setting_section input[type=text] {
    width: 100% !important;
  }

}


/*End Settings*/


/* Start Pagination*/
#pagination li {
  display: inline-block !important;
}

#pagination li a {
  padding: 8px 13px;
  cursor: pointer;
  border: 1px solid #E8E9EA;
  color: #3378BE;
  background-color: #FFF;
  transition: all .2s ease-in-out;
}

#pagination li a:hover {
  background-color: #EEEDEE;
}

#pagination .active a,
#pagination .active a:hover {
  background-color: #3378BE;
  color: #FFF !important;
}

#pagination_forma li,
#pagination_mem li,
#pagination_com li {
  display: inline-block !important;
}

#pagination_forma li a,
#pagination_mem li a,
#pagination_com li a {
  padding: 8px 13px;
  cursor: pointer;
  border: 1px solid #E8E9EA;
  color: #3378BE;
  background-color: #FFF;
  transition: all .2s ease-in-out;
}

#pagination_forma li a:hover,
#pagination_mem li a:hover,
#pagination_com li a:hover {
  background-color: #EEEDEE;
}

#pagination_forma .active a,
#pagination_forma .active a:hover,
#pagination_mem .active a,
#pagination_mem .active a:hover,
#pagination_com .active a,
#pagination_com .active a:hover {
  background-color: #3378BE;
  color: #FFF !important;
}

/*End Pagination*/

/*Start custom styles*/
.h1 {
  font-size: 40px;
  color: #242934;
  text-decoration: underline #FD9D33;
  cursor: pointer;
  transition: all .2s ease-in-out;
}

@media (max-width:350px) {
  .h1 {
    font-size: 30px;
  }
}

.h1:hover {
  color: #FD9D33;
}

.button {
  background-color: #FD9D33;
  border-radius: 7px;
  border: 1px solid;
  cursor: pointer;
  color: white;
  font-size: 20px;
  padding: 15px;
  transition: all .2s ease-in-out;
}

.button:hover {
  transform: scale(1.3);
}

/*End custom styles*/
/*Start medias*/
@media (max-width:767px) {

  /*Mobile & Tablet Rules or extra small*/
  .visible-xs {
    display: block !important;
  }

  .hidden-xs {
    display: none !important;
  }

  .about-us .responsive-paragraphe {
    font-size: 18px;
    text-align: center;
  }
}

@media(min-width:768px)and (max-width:991px) {

  /*Small Screen Rules*/
  .container {
    width: 750px;
  }

  .visible-sm {
    display: block !important;
  }

  .hidden-sm {
    display: none !important;
  }
}

@media(min-width:992px)and (max-width:1199px) {

  /*Medium Screen Rules*/
  .container {
    width: 962px;
  }

  .visible-md {
    display: block !important;
  }

  .hidden-md {
    display: none !important;
  }
}

@media(min-width:1200px) {

  /*Larg Screen Rules*/
  .container {
    width: 1170px;
  }

  .visible-lg {
    display: block !important;
  }

  .hidden-lg {
    display: none !important;
  }
}

/*End medias*/

/*Start My Framework*/
.text-center {
  text-align: center;
}

.clearfix {
  clear: both;
}

.container {
  margin: auto;
  padding-left: 10px;
  padding-right: 10px;
}

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none;
}

.float-left {
  float: left;
  direction: ltr;
}

.float-right {
  float: right;
  direction: rtl;
}

.responsive-paragraphe {
  line-height: 1.8;
}

.responsive-image {
  width: 100%;
}

.responsive-video {
  width: 100%;
}

.classic-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.circle-image {
  border-radius: 50%;
}

/*End My Framework*/


/*Start Footer*/
.footer {
  background-color: #242934;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 10px;
}

.footer .image {
  width: 30%;
  padding-bottom: 0 !important;
  transition: all .3s ease-in-out;
  cursor: pointer;
}

.footer .icons {
  width: 50%;
  margin-right: 10%;
  position: relative;
  top: 30px;
  padding-bottom: 0 !important
}

.footer .icons li {
  display: inline-block;
  cursor: pointer;
  transition: all .3s ease-in-out;
  width: 10%;
}

.footer-span {
  font-size: 25px;
  color: #FD9D33;
  cursor: pointer;
  line-height: normal;
  position: relative;
  bottom: 100px;
  width: 20%;
  padding: 20px !important;
  transition: all .3s ease-in-out;
}

.footer-span img {
  vertical-align: middle;
  width: 16%;
  margin-left: 10px;
}

.footer div {
  margin-top: 0;
  padding: 0 !important;
}

.footer .icons li:hover {
  transform: scale(.6);
}

.footer .image:hover {
  transform: scale(.6);
}

.footer-span:hover {
  transform: scale(.6);
}

@media(min-width:992px)and (max-width:1199px) {

  .footer-span,
  .footer .copie {
    font-size: 15px;
    bottom: 80px;
  }
}

@media (max-width:254px) {

  .footer-span,
  .footer .copie {
    font-size: 5px !important;
  }
}

@media (min-width:400px)and (max-width:991px) {

  .footer-span,
  .footer .copie {
    font-size: 15px !important;
  }

}

@media (max-width:600px) {
  .footer-span {
    bottom: 55px !important;
  }
}

@media (max-width:991px) {
  .footer div {
    margin-top: 20px !important;
  }

  .footer-span {
    width: 30%;
    float: left;
    bottom: 80px;
    margin: auto;
    font-size: 10px;
    text-align: center;
  }

  .footer .copie {
    width: 50%;
    bottom: 0;
    margin: auto;
    font-size: 10px;
    text-align: center;
  }

  .footer-span img {
    width: 8%
  }

  .footer .icons {
    width: 60%;
    margin-bottom: 35px !important;
    margin-right: 10px !important;
  }

  .footer {
    padding: 0 !important;
  }

  .footer .image {
    display: none;
  }
}

@media (max-width:279px) {

  .footer-span,
  .footer .copie {
    font-size: 8px;
  }

}

.footer .copie {
  color: #FFF;
}

/*End Footer*/
@media (max-width:900px) {
  .form .pas {
    width: 100% !important;
  }
}

@media (max-width:700px) {
  .flr {
    width: 100% !important
  }
}

@media (max-width:991px) {
  .sign_panel {
    width: 60% !important;
  }
}

@media (max-width:500px) {
  .sign_panel {
    width: 100% !important;
  }
}

@media (max-width:300px) {
  .sign_panel {
    width: 100% !important;
  }
}

.form input[type=text],
.form input[type=password],
.form select,
.form textarea,
.form input[type=file] {
  width: 100% !important;
  margin: 10px 0 10px !important;
}