/** Common class for Nasthon web project */

/* Helper class */
.mg-t-0 {margin-top: 0px;}
.mg-t-5 {margin-top: 5px;}
.mg-t-10 {margin-top: 10px;}
.mg-t-15 {margin-top: 15px;}
.mg-t-20 {margin-top: 20px;}
.mg-t-25 {margin-top: 25px;}
.mg-t-30 {margin-top: 30px;}
.mg-t-40 {margin-top: 40px;}
.mg-t-50 {margin-top: 50px;}
.mg-t-60 {margin-top: 60px;}

.mg-t-n5 {margin-top: -5px;}
.mg-t-n10 {margin-top: -10px;}

.mg-b-0 {margin-bottom: 0px;}
.mg-b-5 {margin-bottom: 5px;}
.mg-b-10 {margin-bottom: 10px;}
.mg-b-15 {margin-bottom: 15px;}
.mg-b-20 {margin-bottom: 20px;}
.mg-b-25 {margin-bottom: 25px;}
.mg-b-30 {margin-bottom: 30px;}
.mg-b-40 {margin-bottom: 40px;}
.mg-b-50 {margin-bottom: 50px;}
.mg-b-60 {margin-bottom: 60px;}

.mg-r-0 {margin-right: 0px;}
.mg-r-5 {margin-right: 5px;}
.mg-r-10 {margin-right: 10px;}
.mg-r-15 {margin-right: 15px;}
.mg-r-20 {margin-right: 20px;}
.mg-r-25 {margin-right: 25px;}
.mg-r-30 {margin-right: 30px;}
.mg-r-40 {margin-right: 40px;}
.mg-r-50 {margin-right: 50px;}
.mg-r-60 {margin-right: 60px;}

.mg-l-0 {margin-left: 0px;}
.mg-l-5 {margin-left: 5px;}
.mg-l-10 {margin-left: 10px;}
.mg-l-15 {margin-left: 15px;}
.mg-l-20 {margin-left: 20px;}
.mg-l-25 {margin-left: 25px;}
.mg-l-30 {margin-left: 30px;}
.mg-l-40 {margin-left: 40px;}
.mg-l-50 {margin-left: 50px;}
.mg-l-60 {margin-left: 60px;}

.mg-l-n5 {margin-left: -5px;}
.mg-l-n10 {margin-left: -10px;}

.pd-0 {padding: 0px;}
.pd-10 {padding: 10px;}
.pd-15 {padding: 15px;}
.pd-20 {padding: 20px;}
.pd-25 {padding: 25px;}
.pd-30 {padding: 30px;}
.pd-40 {padding: 40px;}
.pd-50 {padding: 50px;}

.pd-t-0 {padding-top: 0px;}
.pd-t-10 {padding-top: 10px;}
.pd-t-15 {padding-top: 15px;}
.pd-t-20 {padding-top: 20px;}
.pd-t-30 {padding-top: 30px;}

.pd-b-0 {padding-bottom: 0px;}
.pd-b-10 {padding-bottom: 10px;}
.pd-b-15 {padding-bottom: 15px;}
.pd-b-20 {padding-bottom: 20px;}
.pd-b-30 {padding-bottom: 30px;}

.pd-l-0 {padding-left: 0px;}
.pd-l-10 {padding-left: 10px;}
.pd-l-15 {padding-left: 15px;}

.pd-r-0 {padding-right: 0px;}
.pd-r-10 {padding-right: 10px;}
.pd-r-15 {padding-right: 15px;}

.m-10 {margin:10px;}
.m-20 {margin:20px;}

.m-tb-10 {margin-top:10px; margin-bottom:10px;}
.m-tb-20 {margin-top:20px; margin-bottom:20px;}

.mr-20 {margin-right:20px;}

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

.img-rounded { border-radius: 6px; }
.img-rounded-10 { border-radius: 10px; }
.img-rounded-t-10 { border-radius: 10px 10px 0 0; }
.img-rounded-b-10 { border-radius: 0px 0px 10px 10px; }

.boxshadow {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.11), 0 6px 20px 0 rgba(0, 0, 0, 0.11);}
.boxshadow2 {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.21), 0 6px 20px 0 rgba(0, 0, 0, 0.21);}

/* social icon */
.icon-facebook { color: #3b5998;}
.icon-youtube { color: #fc363c;}

.breaklong{
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.btn-wrap {white-space: normal;}
.relative {position: relative;}
.mobi-only {display:none;}
.desktop-only {display:inline;}

.md-only {display:inline;}
.md-n-only{display:none;}

tr.desktop-only {display: table-row;}
th.desktop-only, td.desktop-only {display: table-cell;}

table.table-sm td, table.table-sm th {font-size:0.9em;}

/* admin_panel */
.admin_panel {position:fixed; background: red; -webkit-box-shadow: 3px 3px 3px #777;
     -moz-box-shadow: 3px 3px 3px #777;
          box-shadow: 3px 3px 3px #777;
          border-radius:10px; padding:10px; bottom:50%; right:0px; z-index:999;}
.admin_panel a {color: red;}

.admin_panel_topright .btn {border-top-left-radius:8px; border-bottom-left-radius:8px; border-top-right-radius:0; border-bottom-right-radius:0; -webkit-box-shadow: 2px 2px 2px #777;
     -moz-box-shadow: 2px 2px 2px #777;
          box-shadow: 2px 2px 2px #777;}

.admin_panel_topright {position:absolute; padding-right:0px; top:15px; right:0px; z-index:999;}

.admin_panel_topright a {/*color: #fff !important;*/}

.hover-dim:hover div { opacity: 0.9; }
.hover-img-dim:hover img { opacity: 0.8; }

@media (max-width: 768px) {
  .mobi-only {display: inline;}
  .mg-r-10-mobi {margin-right: 10px !important;}
  .desktop-only {display:none;}
}

@media (max-width: 991px) {
  .md-n-only {display: inline;}
  .md-only {display:none;}
}

/** sof responsive for embed youtube **/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/** eof responsive for embed youtube **/

.pagebreak { page-break-before: always; }

.noborder { border:none !important; }

a.eng-link {
  letter-spacing: 0 !important;
  font-size: 14px;
}

/** no left margin and padding for <ul> and <ol> */
.list-nop{
  margin-left: 0;
  padding-left: 1.2em;
}

.table-sm td .list-nop {margin-bottom: 0;}

.font-bold {   font-weight: bold;}
.font-uppercase{  text-transform: uppercase; }

.font-textshadow {text-shadow: 1px 1px #333; }
.font-textshadow2 { text-shadow: 1px 2px #333;}


.op-1 { opacity: 0.1; }
.op-2 { opacity: 0.2; }
.op-3 { opacity: 0.3; }
.op-4 { opacity: 0.4; }
.op-5 { opacity: 0.5; }
.op-6 { opacity: 0.6; }
.op-7 { opacity: 0.7; }
.op-8 { opacity: 0.8; }
.op-9 { opacity: 0.9; }

/* ios select2 scrolling drag problem*/
.select2-container {
  -webkit-overflow-scrolling: touch;
}

/*
 * Row with equal height columns <div class="row eq-height"></div>
 */

 @media (min-width: 768px) {
  .eq-height {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .eq-height .panel{
    height: 100%;
}
}

ol.list-table li, ul.list-table li{
  border-top: 1px solid #efefef;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5px;
  list-style-position: inside;
}

/*
prevent hyperlink too long breakng the bootbox width
*/
.bootbox-body a {
      /* These are technically the same, but use both */
        overflow-wrap: break-word;
        word-wrap: break-word;

        -ms-word-break: break-all;
        /* This is the dangerous one in WebKit, as it breaks things wherever */
        word-break: break-all;
        /* Instead use this non-standard one: */
        word-break: break-word;

        /* Adds a hyphen where the word breaks, if supported (No Blink) */
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
  }