@font-face {
    font-family: SacramentoR;
    src: url(./fonts/Sacramento-Regular.ttf);
}
@font-face {
    font-family: PoiretOneR;
    src: url(./fonts/PoiretOne-Regular.ttf);
}
@font-face {
    font-family: SourceSansProR;
    src: url(./fonts/SourceSansPro-Regular.ttf);
}
@font-face {
    font-family: 'Open Sans';
    src: url(./fonts/OpenSans-Light.ttf);
    font-weight: normal;
}

@font-face {
    font-family: 'B Nazanin';
    src: url(./fonts/BNazanin.ttf);
    font-weight: normal;
}
@font-face {
    font-family: 'B Nazanin';
    src: url(./fonts/BNazanin_Bold.ttf);
    font-weight: bold;
}

/****************** Tool Tip *******************/
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /*If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/**************************************************************************/

.av-vert-outer{
    display: table;
}
.av-vert-inner-mid{
    display: table-cell;
    vertical-align: middle;
}

.av-vert-inner-bott{
    display: table-cell;
    vertical-align: bottom;
}


body{
    font-family: 'Open Sans', sans-serif;
    /*font-family: 'SourceSansProR';/* 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
    /* font-weight: bold; */
    background-color: white; /*#CCDCE2;/*E1C9BA;*/
    position: relative;
    
}


#dvFooter{
    width:100%;
    color:#0F3C40;
    background-color: #E4B342;
    text-align: center;
    vertical-align: middle;
    padding: 2px 5px 2px 0;
        
}
#dvbody{
    padding: 0 5% 5% 5%;
    text-align: center;
    /* background-color: #CCDCE2;
    height: 100%; */
}

#H-nav{
    background-color:#E4B342;/*#004A71; */
    z-index: 999;
    /** the following settings make th enavbar sticky*/
    position: fixed;
    /* top:1px; */
    width:100%;
    /*margin-bottom: 30px;
    /*border-radius: 5px;*/
    /*border:1px solid #004282;*/
    vertical-align: text-bottom;
}
#H-dv{
    padding: 0 10px 0 0;
    text-align: start;
    
}
.dv-navbar-dynamic-wide{
    margin-top: 75px;
}
.dv-navbar-dynamic-narrow{
    margin-top: 0px;
}

#H-date{
    position:fixed; 
    /*z-index: 999;*/
    text-align:right;
    background-color:transparent;
    padding-top: 135px;
    color: white;
    font-size: small;
    width: 100%;
    text-align: right;
}
#H-date span{
    border-radius:0 0 0 10px;
    background-color: #E4B342;
    padding: 5px;
}
.dv-logo{
    min-height:130px;
    padding-left:20px;
}
.img-logo{
    max-height:90px;
}
.img-logo-footer{
    max-height:30px;
    border-radius:3px;
    margin-left:4px;
}
.dv-logo-title{
    padding-left: 30px;
}
.dv-logo-title-wide{
    padding-top: 30px;
    padding-left: 30px;
}
.dv-logo-title-narrow{
    padding-top: 40px;
    padding-left: 30px;
}
.a-logo{
    font-family:'SacramentoR';
    text-decoration: none;
    font-weight: normal;
    color:#0F3C40;/*#405B42;/*#fbfffe;*/
    /*margin-top: 30px;
     margin-bottom: 10px;
    padding-left: 30px;  */

}
.a-logo-wide{
    font-size: 55px;
}
.a-logo-narrow{
    font-size: 40px;
}

.a-logo:hover{
    text-decoration: none;
    color:#0F3C40/*#fbfffe;*/
}
.a-logo:visited{
    text-decoration: none;
    }

.a-logo-small{
    font-family:'SacramentoR';
    font-size: 45px;
    text-decoration: none;
    font-weight: normal;
    color:#0F3C40;/*#405B42;/*#fbfffe;*/
    /*background-color: #E4B342;*/
    
    /* border-radius: 5pt; */
}
#H-btn{
    margin:3px 1px 7px 20px;
}

#H-ul{
    padding-left: 10px;
}

.menu{
    /* background-color: #004282; */
    border-bottom: transparent 2px solid;
    font-size:large;
}
.menu:hover, .menu:focus{
    /* background-color: #004282; */
    border-bottom:#0F3C40 2px dotted;/* #fbfffe 2px solid;/*#0287a8*/
    color:#fbfffe;
}

.menu-profile:hover, .menu-profile:hover{
    border-bottom-color:white;
}

.submenu{
   color:#004282;
   font-size:large;
}
.submenu:hover, .menu:focus{
    background-color: #004282;
    color:#fbfffe;
    
}
#dvcontent{
    padding-top: 200px; /** this is set according to the height of the header*/
}

#a_home{
    width:70px;
    text-align: center;
}
#a_teachers{
    width:130px;
    text-align: center;
}
#a_lessons{
    width:125px;
    text-align: center;
}
#a_login{
    width:70px;
    text-align: center;
}
#a_logout{
    width:80px;
    text-align: center;
}
#a_profile{
    width:100px;
    text-align: center;
}

.a_menu_persian{
    font-family: 'B Nazanin';
    font-weight: bold;
    font-size: large;
}

/******************************* HOME and some basic seeting  ************************************/
@keyframes anim-ltr {
    0%{left:0px;}
    100%{left:200px;}
}

h1{
    font-family: PoiretOneR;
    font-size:40px;
    font-weight: bolder;
    color:#0F3C40/*#004A71;*/

}
.alarm{
    color:crimson;
}
.dv-module{
    text-align: start; 
    font-size: larger; 
    /* font-weight: bold; */
    /*older background-color:#CCDCE2;/* #78AFB9;/*#E1C9BA;/* #CCDCE2;*/
    /*older border-radius: 10px;
            */
    margin: 3px;
    padding: 15px;
    color:#0F3C40;


    border: #CCDCE2 solid 3px;
    border-radius: 15px;
    background-color: #e1c9ba;
    /*background: linear-gradient(to bottom right, #e1c9ba, 50%, white); E4B342*/
    background: linear-gradient(to bottom, #CCDCE2, 2%, white);
}
.fade-in-left{
    animation-name: anim-ltr;
    animation-duration: 4s;
}
.dv-module-2{
    text-align: start; 
    font-size: larger; 
    /* font-weight: bold; */
    /*older background-color:#CCDCE2;/* #78AFB9;/*#E1C9BA;/* #CCDCE2;*/
    /*older border-radius: 10px;
            */
    margin: 3px;
    padding: 15px;
    color:#0F3C40;

    border: #E4B342 solid 3px;
    border-radius: 15px;
    background-color: #e1c9ba;
    /*background: linear-gradient(to bottom right, #e1c9ba, 50%, white);*/
    background: linear-gradient(to bottom, #E4B342, 5%, white);
}
p{
    text-align: start;
    text-indent: 15px;
    padding: 10px;
}

.lbtn_itemize{
    /*older background-color: #E4B342;
            color:#0F3C40;*/
    
    background:  linear-gradient(to top left,#E4B342,80%, white);
    color:white;
    
    border-radius: 50%;
    text-decoration: none;
    
    font-family: 'PoiretOneR';
    font-weight: bolder;
    font-size: xx-large;
}
.btn1{
    padding: 5px 20px 5px 20px;
}
.btn2{
    padding: 5px 14px 5px 14px;
}
.btn3{
    padding: 5px 14px 5px 14px;
}
.btn4{
    padding: 5px 15px 5px 15px; 
}

.lbtn_itemize:hover{
    text-decoration: none;
    /*old color:#0F3C40;*/
    color:white;
}

.img-actfl{
    max-height: 300px;
    float:inline-end;
    border-radius: 10px;
}

.frame_youtube{
    border-radius: 10px;
    border:#CCDCE2 4px solid;
    /*new border: #E4B342 solid 3px;*/
    
}

.dv-module-ad{
    line-height: 2.5; 
    font-size: larger; 
    /* font-weight: bold; */
    background-color:#E4B342;/* #78AFB9;/*#E1C9BA;/* #CCDCE2;*/
    border-radius: 10px;
    padding: 30px 10px 20px 10px;
    margin: 5px;
    color:#0F3C40;
}

.lbtn-success{
    background-color: #0F3C40;
    color: #E4B342;
}
.lbtn-success:hover{
    color: #E4B342;
}

.lbtn-warning{
    background-color: #E4B342;
    color: #0F3C40;
}
.lbtn-warning:hover{
    color: #0F3C40;
}

.msg-box-div{
    width:100%;
    text-align:center;
    margin:0px;
    padding: 0px;
  }

  
.blink-bg-error{
    color: crimson;  
    padding: 2px;
    display: inline-block;
    border-radius: 3px;
    animation: blinkingBackground-error 2s infinite;
  }
  @keyframes blinkingBackground-error{
    0%	{ background-color:transparent; }
    50%	{ background-color: rgb(236, 161, 176);}
    100%{ background-color:transparent;}
    
  }
  .blink-bg-success{
    color: green;  
    padding: 2px;
    display: inline-block;
    border-radius: 3px;
    animation: blinkingBackground-success 2s infinite;
  }
  @keyframes blinkingBackground-success{
    0%	{ background-color: transparent;}
    50%	{ background-color: rgb(147, 225, 147);}
    100%{ background-color: transparent;}
  }

.old_blink-bg-error{
    color: white;  
    padding: 2px;
    display: inline-block;
    border-radius: 3px;
    animation: blinkingBackground-error 2s infinite;
  }
  @keyframes old_blinkingBackground-error{
    0%		{ background-color: rgb(233, 94, 122);}
    /*25%		{ background-color: transparent;}*/
    50%		{ background-color: transparent;}
    /*75%		{ background-color: transparent;}*/
    100%  { background-color:  rgb(233, 94, 122);}/*crimson;} 
    /* 0%		{ background-color: #10c018;}
    25%		{ background-color: #1056c0;}
    50%		{ background-color: #ef0a1a;}
    75%		{ background-color: #254878;}
    100%	        { background-color: #04a1d5;} */
  }
  ._old_blink-bg-success{
    color: white;  
    padding: 2px;
    display: inline-block;
    border-radius: 3px;
    animation: blinkingBackground-success 2s infinite;
  }
  @keyframes _old_blinkingBackground-success{
    0%		{ background-color: rgb(104, 222, 104);}
    /*25%		{ background-color: transparent;}*/
    50%		{ background-color: transparent;}
    /*75%		{ background-color: transparent;}*/
    100%  { background-color: rgb(104, 222, 104);}/*green;} 
    /* 0%		{ background-color: #10c018;}
    25%		{ background-color: #1056c0;}
    50%		{ background-color: #ef0a1a;}
    75%		{ background-color: #254878;}
    100%	        { background-color: #04a1d5;} */
  }


  /*************** LESSONS *****************************/
.dv-module-lesson{
    text-align: start;
    font-size: larger;
    /* font-weight: bold; */
    /*background-color:#ffe97d;/*#d0e8d2;/*#e3f3f9;/* #78AFB9;/*#E1C9BA;/* #CCDCE2;*/
    border: #CCDCE2 solid 3px;
    border-radius: 15px;
    padding: 15px;
    margin: 15px 0 50px 0;
    color:#0F3C40;
    background: linear-gradient(to bottom, #CCDCE2, 10%, white);

}

.a-lesson-home{
    text-decoration: underline;
    color:#1a64ad;
    
 }
.a-lesson-home:hover{
     text-decoration: underline;
}

.lesson_img{
    max-height:250px;
}

.lesson-teacher-img{
    max-height:200px;
}

.a-lesson-teacher{
   color:#1a64ad;
   text-decoration: underline;
   font-size: medium;
}
.a-lesson-teacher:hover{
    text-decoration: underline;
 }

.a-lesson{
    color:inherit;
    text-decoration: none;
    font-size: medium;
 }
.a-lesson:hover{
     text-decoration: underline;
}

.lesson-title{
    /*font-weight: bold;*/
}
.lesson-sub-title{
    margin-top: 20px;
    margin-bottom: 20px;
}
.lesson-detail-title{
    font-size: small;
    
}

.lesson-level{
    font-size: medium;
    background-color:#E4B342 ;
    border-radius: 5px;
    padding: 2px 4px 2px 4px;
    margin-left: 18px;
    color:white;
}
.lesson-age-level{
    font-size: medium;
    background-color:#E4B342 ;
    border-radius: 5px;
    padding: 2px 4px 2px 4px;
    margin-left: 10px;
    color:white;
}
.lesson-skills{
    font-size: medium;
    background-color:#E4B342 ;
    border-radius: 5px;
    padding: 2px 4px 2px 4px;
    margin-left: 14px;
    color:white;
}
.lesson-cat{
    font-size: medium;
    background-color:#E4B342 ;
    border-radius: 5px;
    padding: 2px 4px 2px 4px;
    margin-left: 24px;
    color:white;
}

.lesson-capacity{
    font-size: medium;
    background-color:#E4B342 ;
    border-radius: 5px;
    padding: 2px 4px 2px 4px;
    color:white;
}
.lesson-designed-for{
    font-size: medium;
    background-color:#E4B342 ;
    border-radius: 5px;
    padding: 2px 4px 2px 4px;
    margin-left: 1px;
    color:white;
}

.lesson-price{
    color:maroon ;
    font-weight: bolder;
    font-size: large;
    /*margin-left: 10px;*/
}
.lesson-dollar-sign{
    color:maroon ;
    font-weight: bold;
}
.lesson-price-slash{
    color:maroon ;
    font-weight: bolder;
    font-size: large;
}
.lesson-duration{
    color: #0F3C40;
    font-weight: bolder;
    font-size: large;
}
.lesson-minute-sign{
    color:#0F3C40;
    font-weight: bold;
}

.lesson-purchase-box{
    display:flex;
    align-items:center;
}

.lbtn_purchase{
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
    padding: 10px 15px 13px 15px;
    /*background: linear-gradient(to right,#1a64ad, 80%, #CCDCE2);*/
    background:  linear-gradient(to right,#E4B342,maroon);
    color:white;
    border-radius: 20px;
    text-decoration: none;
    font-size: large;
    font-weight:normal;
}
.lbtn_purchase:hover{
    color:white;
    text-decoration: underline;
}

.lesson_review_summary{
    box-shadow: 7px 7px 10px #E4B342;
    
    font-size:medium;
    color:maroon;
    background-color:transparent;
    border-radius: 15px;
    border: maroon 1px dotted;
    margin-top: 20px;
   
    width: fit-content;
    padding: 15px 15px 15px 15px;
}
.lesson_review_summary_link{
    color:#004282;
    margin: 10px;
}
.lesson_review_summary_link:hover{
    color:maroon;
}

 /*************** TEACHERS *****************************/
 .dv-module-teacher{
    text-align: start;
    font-size: larger;
    /* font-weight: bold; */
    /*background-color:#ffe97d;/*#d0e8d2;/*#e3f3f9;/* #78AFB9;/*#E1C9BA;/* #CCDCE2;*/
    border: #CCDCE2 solid 3px;
    border-radius: 15px;
    padding: 15px;
    margin: 15px 0 50px 0;
    color:#0F3C40;
    background: linear-gradient(to bottom, #CCDCE2, 10%, white);

}

.teacher-img{
    max-height: 300px;    
}

.a-teacher{
   color:inherit;
   text-decoration: none;
   font-size: medium;
}
.a-teacher:hover{
    text-decoration: underline;
}

.teacher-name{
    /*font-weight: bold;*/
}
.teacher-bio{
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: justify;
}
.teacher-detail-title{
    font-size: small;
}

.teacher-email{
    font-size: medium;
    /*background-color:#E4B342 ;
    border-radius: 5px;
    padding: 2px 4px 2px 4px;*/
    margin-left: 33px;
    color:#0F3C40;
}
.teacher-roles{
    font-size: medium;
    background-color:#E4B342 ;
    border-radius: 5px;
    padding: 2px 4px 2px 4px;
    color:white;
}


/*************** TEACHERS - PROFILE *****************************/
.dv-module-teacher-profile{
    text-align: start;
    font-size: larger;
    border: #CCDCE2 solid 3px;
    border-bottom: white dotted 2px;
    border-radius: 15px 15px 0 0;
    padding: 15px;
    margin: 15px 0 0 0;
    margin-bottom:0px !important;
    color:#0F3C40;
    background: linear-gradient(to bottom, #CCDCE2, 10%, white);
}
.h1-teacher-profile{
    text-align: start; 
    font-size: x-large; 
    margin: 0;
    margin-bottom: 0 !important;
    padding: 15px;
    color:#0F3C40;
    border-left: #CCDCE2 solid 3px;
    border-right: #CCDCE2 solid 3px;
    border-top: #CCDCE2 dotted 2px;
    border-bottom: white dotted 2px;
    background: linear-gradient(to right, #CCDCE2, 20%, white);

}
.dv-module-lesson-profile{
    text-align: start;
    font-size: larger;
    border-left: #CCDCE2 solid 3px;
    border-right: #CCDCE2 solid 3px;
    border-top: #CCDCE2 dotted 2px;
    border-bottom: white dotted 2px;
    padding: 15px;
    padding-bottom: 35px;
    margin: 15px 0 0 0;
    margin-top:0px !important;
    color:#0F3C40;
    /*background: linear-gradient(to bottom, #CCDCE2, 10%, white);*/
}
.dv-module-lesson-profile-last{
    text-align: start;
    font-size: larger;
    border: #CCDCE2 solid 3px;
    border-top: #CCDCE2 dotted 2px;
    border-radius: 0 0 15px 15px;
    padding: 15px;
    padding-bottom: 35px;
    margin: 15px 0 0 0;
    margin-top:0px !important;
    color:#0F3C40;
    /*background: linear-gradient(to bottom, #CCDCE2, 10%, white);*/
}

.lesson-title-profile{
    padding-top: 15px;
}

.lesson-sub-title-profile{
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 20px;
}
.lesson-details-row-profile{
    padding-left: 20px;
}


  /*************** LESSONS - ID *****************************/
  .dv-module-lesson-id{
    text-align: start;
    font-size: larger;
    border: #CCDCE2 solid 3px;
    border-bottom: white dotted 2px;
    border-radius: 15px 15px 0 0;
    padding: 15px;
    margin: 15px 0 0 0;
    margin-bottom:0px !important;
    color:#0F3C40;
    background: linear-gradient(to bottom, #CCDCE2, 10%, white);
}

.dv-module-lesson-id-description{
    text-align: start;
    font-size: larger;
    border: #CCDCE2 solid 3px;
    border-top: #CCDCE2 dotted 2px;
    border-radius: 0 0 15px 15px;
    padding: 15px;
    padding-bottom: 35px;
    margin: 15px 0 0 0;
    margin-top:0px !important;
    color:#0F3C40;
    /*background: linear-gradient(to bottom, #CCDCE2, 10%, white);*/
}


/**************** Sign up ********************************************/
.signup-box{
    border:dotted 1px #CCDCE2;
    border-radius: 5px;
    padding:5px 8px 8px 8px;
    margin-top: 5px;
}
.signup-img-box{
    border:dotted 1px #CCDCE2;
    border-radius: 5px;
    padding:5px 0 5px 0;
    margin-top: 5px;
}
.signup-img{
    max-height: 200px;    
}

/**************** Announcements ********************************************/
.announce-module{
    min-height: 333px;
}
.announce-date{
    font-size: medium;
    background-color:#d9bf82 ;/*#E4B342 ;*/
    border-radius: 5px;
    padding: 2px 4px 2px 4px;
    margin-right: 6px;
    color:#0F3C40;
    float: right;
}

.announce-date-full{
    font-size: small;
    margin-left: 3px;
}

.announce-title-short{
    /**/
}

.announce-desc-short{
    /**/
}

.a-announce-more{
    font-size: medium;
    float: right;
    margin-right: 10px;
    padding-bottom: 10px;
}
.announce-detail{
    font-size: small;
    float: right;
    vertical-align:middle;

}

.dv-module-announce-body{
    border:#CCDCE2 dotted 2px;
    border-radius: 2px;
}


/*===================== PAYMENT =====================================*/

.msg-box-pay{
    font-size: larger;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #d9eaf072;
    min-width: 300px;
    max-width: 480px;

    border-radius: 7px;
}

.msg-box-pay-error{
    color: crimson;  
    padding: 2px;
    display: inline-block;
    
    
}

.msg-box-pay-normal{
    color: green;  
    padding: 2px;
    display: inline-block;
}

.btn-pay-success{
    /* background-color: #0f3c4091;/* #d9eaf0d0;
    color: #E4B342;
    border: 2px solid #E4B342; */

    background-color: #E4B342;
    color: #0F3C40;
}
.btn-pay-success:hover{
    background-color: #E4B342;
    color: #0F3C40;
}
.btn-pay-danger{
    background-color: crimson;
    color: white;
}
.btn-pay-danger:hover{
    background-color: crimson;
    color: white;
}


/* ========================= Calendar =====================*/
.dv-module-cal{
    text-align: center;
    /*font-size: larger;
     font-weight: bold; */
    /*background-color:#ffe97d;/*#d0e8d2;/*#e3f3f9;/* #78AFB9;/*#E1C9BA;/* #CCDCE2;*/
    border: #CCDCE2 solid 3px;
    border-radius: 15px;
    padding: 15px;
    margin: 0 0 50px 0;
    color:#0F3C40;
    background: linear-gradient(to bottom, #CCDCE2, 10%, white);
    
}
.cal-cell{
    border : #CCDCE2 solid 1px;
    border-radius: 5px;
    max-width: 175px;
    text-align: start;
    background-color: white;/*#d9bf82;*/
    padding-left: 0;
    font-weight: 600;
    font-size:small;

    padding:6px 0 10px 0;
}


.cal-checkbox-td{
    text-align: start;
    vertical-align:top;
}

.cal-checkbox{
    width:20px;
}
.cal-date-tbl{
    width:100%; 
    text-align:center;
}

.cal-date-tbl-90{
    width:90%; 
    text-align:center;
}

.cal-date-time{
    border-radius: 4px;
    background-color: #CCDCE2;
    padding: 0 5px 0 5px;
}



.cal-total-box{
    background-color: white; /*#e4b34279;*/
    border-radius: 7px;
    /* border:1px solid #CCDCE2; */
    border: 1px dashed #CCDCE2;
    padding: 0 0 0 10px;
    
}
.cal-total-lbtn{
    padding: 10px 15px 13px 15px;
    background:  linear-gradient(to right,#E4B342,maroon);
    color:white;
    border-radius: 20px;
    text-decoration: none;
    font-size: large;
    font-weight:normal;
    border:none;
}
.cal-total-lbtn:hover{
    color:white;
    text-decoration: underline;
}

.cal-calculate-lbtn{
    font-size: small;
    width: 200px;
    border-radius: 5px;
    
    background-color: white;
    border: 3px groove #CCDCE2;
    /*border-width: 1px;
    border-color: #CCDCE2;*/
}

.cal-calculate-lbtn:hover{
    
    text-decoration: underline;
}
.cal-calculate-lbtn:active{
    
    border-color: white;
    border-style: ridge;
    text-decoration: none;
}

.cal-penta{

    background-color: #E4B342;
    /* background:  linear-gradient(to top,white,#E4B342); */
     /* -webkit-clip-path: polygon(100% 0, 100% 39%, 52% 83%, 0 44%, 0 0); */
     /* clip-path: polygon(90% 00, 100% 39%, 52% 83%, 0 44%, 10% 0); */
    /* clip-path: polygon(95% 00, 100% 50%, 50% 80%, 00 49%, 6% 0); */
    /* height: 130px; */
    
    max-width:150px;
    text-align: center;
    vertical-align: middle; 
    /* border: 1px dashed #CCDCE2; */
    border-radius: 20px;
    /* margin-top: 70px; */
    padding: 11px 0 20px 0;
    margin-top: 10px;
    color:white;
    font-size: large;
    
    }

/* 
.arrow-down {
        width: 0; 
        height: 0; 
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        
        border-top: 20px solid #f00;
        border-radius: 5px;
      }
 */

.cal-confirm{
    background-color: white; /*#e4b34279;*/
    border-radius: 7px;
    /* border:1px solid #CCDCE2; */
    border: 1px dashed #CCDCE2;
    /* padding: 0 0 0 10px; */
}

.cal-p{
    font-weight:normal;
}

.cal-spn-warning{
    color:crimson;
    /* font-weight:bold; */
    text-decoration: underline;
}
.cal-btn-change{
    width: 150px;
}
.cal-btn-pay{
    width: 150px;
}

/* ========================= Refund Policy =====================*/

.dv-module-ploicy-body{
    border:#CCDCE2 dotted 2px;
    border-radius: 2px;
}
.policy-detail{
    font-size: small;
    float: right;
    vertical-align:middle;
}
.policy_date{
    font-size: medium;
    background-color:#d9bf82 ;/*#E4B342 ;*/
    border-radius: 5px;
    padding: 2px 4px 2px 4px;
    margin-right: 6px;
    color:#0F3C40;
    float: right;
}

.policy-date-full{
    font-size: small;
    margin-left: 3px;
}


/* =============================== Admin Dashboard ========================= */
.admin-menu-main{
    background-color: #E4B342;
    color: #0F3C40;
    border-radius: 7px 7px 0 0;
    text-align: center;
}
.admin-menu-main:hover{
    color: #0F3C40;
}
.admin-menu{
    color: #0F3C40;
    border-color:#E4B342;
    border-left: 1px dotted #E4B342;
    border-right: 1px dotted #E4B342;
}

.admin-menu-last{
    border-bottom: 1px dotted #E4B342;
    border-radius: 0 0 7px 7px;
    margin-bottom: 3px;
}

.admin-container{
    padding-top: 200px; 
    min-height: 700px;
}

.admin-headers{
    color:#0F3C40;
}

.admin-link{
    color:#0F3C40;
    text-decoration: none;
}
.admin-link:hover{
    text-decoration: underline;
    color:#1a64ad;
}
/* =============================== Admin Booking ========================= */
.admin-booking-tbl{
    /* border: 1px solid #004282; */
    border-radius: 5px;
    width: 100%;
    text-align: center;
    border-collapse: separate !important;
    table-layout: auto;
}

.admin-booking-th{
    
    background-color: #CCDCE2;
    border-radius: 5px;
    border-collapse: separate !important;
}

.admin-booking-max-w{
    max-width: 60px;
}
.admin-booking-link-w{
    min-width: 180px;
}

.admin-booking-link-input{
    border-radius: 3px;
    border: 1px solid #d9bf82;
}


/* ============================= Admin Lesson update ============================*/

.admin-console-box{
    border:dotted 1px #CCDCE2;
    border-radius: 5px;
    padding:5px 8px 8px 8px;
    margin-top: 5px;
}
.admin-console-title{
    font-weight: bold;
    color:#0F3C40;
}

.admin-console-title-desc{
    font-weight: normal;
}

.admin-console-textarea{
    resize: none;
}

/* .admin-console-title-required::after{
    content: "*";
    font-weight: normal;
    /* font-size: 20px; */
    /*color:crimson;
} */
.admin-asterisk{
    font-weight: normal;
    /* font-size: 20px; */
    color:crimson;
}
.admin-keyboard-symbols{
    font-family: 'Courier New', Courier, monospace;
}

.admin-lesson-img-box{
    border:dotted 1px #CCDCE2;
    border-radius: 5px;
    padding:5px 0 5px 0;
    margin-top: 5px;
}
.admin-lesson-img{
    max-height: 175px;    
}

.admin-lesson-video{
    width: 99%;    
}
.admin-lesson-video-url{
    width:99%;
    float: unset !important;
}


.admin-module-review{
    
    border: #CCDCE2 solid 1px;
    border-radius: 15px;
    color:#0F3C40;
    background: linear-gradient(to bottom, #CCDCE2, 10%, white);
    }

.admin-row-approvals{
    margin-top:40px;
    margin-bottom:20px;
    border: #CCDCE2 solid 1px;
    border-radius: 15px;
    color:#0F3C40;
    /* background: linear-gradient(to bottom, #CCDCE2, 10%, white); */
    background-color: #E4B342;
    max-width: 290px;
    }


    /* ===================================== Reviews =============================*/
    .rev-user-img{
        max-height:150px;
        /* box-shadow: #E4B342 -5px 5px 5px; */
        border-radius: 50%;
        padding: 0;
        border: solid 1px #E4B342;
    }
    
    .rev-date{
        text-align:right;
        background-color:transparent;
        color: #0F3C40;
        font-size: small;
        width: 100%;
        text-align: right;
        padding-bottom: 4px;
    }
    .rev-date-span{
        border-radius:13px 0 13px 0;
        background-color: #e4b342af;
        padding: 7px;
    }
    .rev-lesson-link-homepage{
        text-align:right;
        background-color:transparent;
        font-size: large;
        width: 100%;
        padding: 4px 20px 4px 4px;

        text-decoration: underline;
        color:#1a64ad;
            
    }

    .rev-dv-module{
        text-align: start;
        font-size: larger;
        border-radius: 15px;
        /* border-left: #CCDCE2 dotted 2px;
        border-right: #CCDCE2 dotted 2px;
        border-top: #CCDCE2 dotted 2px;
        border-bottom: #CCDCE2 dotted 2px; */
        border: #E4B342 solid 1px;
        padding: 15px;
        padding-bottom: 6px;
        padding-right: 3px;
        margin: 15px 0 0 0;
        margin-top:0px !important;
        color:#0F3C40;
        background: linear-gradient(to right, #E4B342, 10%, white);
        /* background-color:  #; */
        /* background-color: #fbfffe; */
    }

    .rev-dv-module-homepage{
        text-align: start;
        font-size: larger;
        border-radius: 15px;
        border: #0F3C40 dotted 1px;
        padding: 15px;
        padding-bottom: 6px;
        padding-right: 3px;
        margin: 15px 0 0 0;
        margin-top:0px !important;
        color:#0F3C40;
        background-color:#e4b3426f ;
    }

    .rev-dv-module-last{
        text-align: start;
        font-size: larger;
        border: #E4B342 solid 1px;
        border-radius: 0 0 15px 15px;
        padding: 15px;
        padding-bottom: 6px;
        padding-right: 3px;
        margin: 15px 0 0 0;
        margin-top:0px !important;
        color:#0F3C40;
        background: linear-gradient(to right, #E4B342, 10%, white);
    }

    .rev-dv-module-last-homepage{
        text-align: start;
        font-size: larger;
        border: #0F3C40 dotted 1px;
        border-radius: 0 0 15px 15px;
        padding: 15px;
        padding-bottom: 6px;
        padding-right: 3px;
        margin: 15px 0 0 0;
        margin-top:0px !important;
        color:#0F3C40;
        background-color:#e4b3426f ;
    }

    .rev-content{
        background-color: white;
        width:80%;
        height: 100%;
        border-radius:40px;
        color: #0F3C40;
        box-shadow: #E4B342 -20px  20px 20px;
    }

    .rev-content-homepage{
        background-color: white;
        width:95%;
        height: 95%;
        border-radius:15px;
        color: #0F3C40;
        box-shadow: #E4B342 -20px  20px 20px;
    }

    .rev-instruction{
        text-align: start; 
        font-size: normal; 
        margin: 3px;
        margin-top: 10px;
        padding: 10px 3px 10px 3px;
        color:#0F3C40;
        border: #CCDCE2 solid 1px;
        border-radius: 10px;
    }