@import url("desktop/GameTemplate/Workbook/Play.css");
@import url("desktop/GameTemplate/Workbook/Workbook.css");
@import url("desktop/GameTemplate/Workbook/Instruction.css");
@import url("desktop/GraphicHTMLEditor.css");
@import url("desktop/Home.css");
@import url("desktop/Premium.css");
@import url("desktop/Base.css");
@import url("desktop/CanvasEditor.css");



@import url('https://fonts.googleapis.com/css?family=Pacifico|VT323|Quicksand|Inconsolata');





















header,
nav,
section,
footer, 
aside {
  background: #313f5f;
  border: solid lightslategrey;
  border-width: 2px; 
  color: white;
  font-family: arial, sans-serif;
  text-align: center;
  
}

h1
{
  font-family: arial, sans-serif;
}

.chojin_nav_container
{
  display : inline-flex !important;
  /* grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr; */

}



body 
{
  background-color: whitesmoke;
  margin : 0px !important;
}





/*******************BOOTSTRAP IMPORTED CLASS *******************/


.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}


.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}



.col-md-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}
.col-md-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
.col-md-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}
.col-md-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
.col-md-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}
.col-md-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
.col-md-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}
.col-md-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}
.col-md-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}
.col-md-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}
.col-md-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}
.col-md-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}






/*******************INSPINIA IMPORTED CLASS ********************/
.inspinia-ibox-content {
  background-color: #ffffff;
  color: inherit;
  padding: 15px 20px 20px 20px;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid;
  border-width: 1px;
}

.btn {
  border-radius: 3px;
  font-size: inherit;
}

.btn-xs {
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
}

.btn-success {
  color: #fff;
  background-color: #1c84c6;
  border-color: #1c84c6;
}


.btn-white {
  color: inherit;
  background: white;
  border: 1px solid #e7eaec;
}

.agile-list {
  list-style: none;
  margin: 0;
}
.agile-list li {
  background: #FAFAFB;
  border: 1px solid #e7eaec;
  margin: 0 0 10px 0;
  padding: 10px;
  border-radius: 2px;
}
.agile-list li:hover {
  cursor: pointer;
  background: #fff;
}
.agile-list li.warning-element {
  border-left: 3px solid #f8ac59;
}
.agile-list li.danger-element {
  border-left: 3px solid #ED5565;
}
.agile-list li.info-element {
  border-left: 3px solid #1c84c6;
}
.agile-list li.success-element {
  border-left: 3px solid #1ab394;
}


/*******************INSPINIA IMPORTED CLASS ********************/


.ChojinGameEngine
{
  width: 100%;
  display: flex;
  height: 100%; 
  flex-wrap: wrap;
  /*padding:20px; */

}



.image_button 
{
    cursor: pointer;
    /*outline: 2px solid #CCC;*/
    flex: 0 0 auto;
    padding-bottom : 50px; 
    padding-left : 20px; 
    padding-right : 20px;
    padding-top : 20px;
    text-align : center;
    margin-left: 1rem;
    margin-bottom: 1rem;
    box-shadow: 10px 10px 3px lightblue;
    background-color: white;
    font-weight: bold;
    font-family: sans-serif; 
    color:#313f5f; 
   

}

.image-link
{
  cursor: pointer;
  /*outline: 2px solid #CCC;*/
  flex: 0 0 auto;
  padding-bottom : 10px; 
  padding-left : 10px; 
  padding-right : 10px;
  padding-top : 10px;
  border-radius: 10px;
  text-align : center;
  margin-left: 1rem;
  margin-bottom: 1rem;
  box-shadow: 10px 10px 10px 10px lightgray;
  background-color: white;
  font-weight: bold;
  font-family: sans-serif; 
  color:#313f5f;  
}

.image-link:hover
{
  cursor: pointer;
  outline: 2px solid white;
  background-color: #313f5f;
  color:white;  
}



.image-link-right-caption
{
  cursor: pointer;
  /*outline: 2px solid #CCC;*/
  flex: 0 0 auto;
  background-color: white;
  font-weight: bold;
  font-family: sans-serif; 
  color:#313f5f;  
}

.image-link-right-caption:hover
{
  cursor: pointer;
  outline: 2px solid white;
  background-color: blue;
  color:white;  
}

.image-link-right-caption-div
{
  margin-left :auto;
  margin-right : auto;
  display: flex;
  flex-wrap: wrap;
  width :100%;
  color:#313f5f; 
  font-weight: bold;
  font-family: sans-serif; 
  outline: 2px solid #313f5f;
  background-color: white;
  margin-bottom: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  padding-bottom : 10px; 
  padding-left : 10px; 
  padding-right : 10px;
  padding-top : 10px;
  border-radius: 10px;
}

.image-link-without-label
{
  cursor: pointer;
  /*outline: 2px solid #CCC;*/
  flex: 0 0 auto;
  padding-bottom : 10px; 
  padding-left : 10px; 
  padding-right : 10px;
  padding-top : 10px;
  border-radius: 10px;
  text-align : center;
  margin-left: 1rem;
  margin-bottom: 1rem;
  box-shadow: 10px 10px 3px lightblue;
  background-color: white;
  font-weight: bold;
  font-family: sans-serif; 
  color:#313f5f;  
}



.image-link-without-label:hover
{
  cursor: pointer;
  outline: 2px solid white;
  background-color: blue;
  color:white;  
}




.image_button:hover
{


  background-color: #313f5f;
  outline: 2px solid white;
  color:white;



}


.chojin_form
{

  /* border : 1px solid white; */
  margin : 0 auto;
}

.chojin_notebook_form
{
  margin : 0 auto;
}

.chojin_notebook_form_element
{
  width:500px; 
  margin: 10px;
  display: block;
}


.chojin_notebook_button_submit_form
{
  background-color : green; 
  color :white; 
  text-transform: uppercase;
  float: right; 
  
}


.chojin_delete_button
{
  background-color : red; 
  color :white; 
  text-transform: uppercase;
  float :right;
}


.chojin_workbook_instruction_textarea
{
  width:500px; 
  height:400px;
  background-color : gainsboro; 
  font-style: italic;
  margin : 0 auto;

}


.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.chojin_workbook_instruction_evaluation_criteria_div
{
  width:500px; 
  font-weight: bold;
}









.chojin-temporary-hidden-element
{
    display : none;
}




.chojin_form_element
{
  width:300px; 
  margin: 10px;
  display: block;


}

.chojin_input_field
{
  border : 2px solid; 
  /*border-width: 2px;*/
  /*border-color: aliceblue;*/
  border-radius: 5px;
  padding: 10px;
 
}

/* .chojin_button
{
  border : 2px solid; 
  padding: 10px;
  margin: 10px;
  font-weight: bold;
  font-family: sans-serif; 
  border-radius: 5px;
} */

.chojin_button_submit_form
{
  background-color : green; 
  color :white; 
  text-transform: uppercase;
  
}

/*****************************************************/
/************** DÉBUT : HELP TOOL*******************/
/******************************************************/


.chojin_help_tip_div
{
  background-color : white; 
  color :black; 
  border: 5px dashed fuchsia;
  border-radius: 20px;
  padding: 10px;
  font-weight: bold;
  font-size: 18px;

 
  
}




.chojin_success_div
{
  background-color : greenyellow; 
  color :black; 
  border: 5px dashed green;
  border-radius: 20px;
  padding: 10px;
  font-weight: bold;
  font-size: 18px;

 
  
}









.chojin-centered-div
{
  text-align:center;
  width :100%;
}

.chojin-flex-wrap-div
{
  margin-left :auto;
  margin-right : auto;
  display: flex;
  flex-wrap: wrap;
  width :100%;
  /* margin: 10%; */
}


.chojin-01-percent-space-div
{
  flex: 0 0 auto;
  width :1%;
}

.chojin-02-percent-space-div
{
  flex: 0 0 auto;
  width :2%;
}


.chojin-03-percent-space-div
{
  flex: 0 0 auto;
  width :3%;
}

.chojin-04-percent-space-div
{
  flex: 0 0 auto;
  width :4%;
}

.chojin-05-percent-space-div
{
  flex: 0 0 auto;
  width :5%;
}

.chojin-06-percent-space-div
{
  flex: 0 0 auto;
  width :6%;
}


.chojin-07-percent-space-div
{
  flex: 0 0 auto;
  width :7%;
}


.chojin-08-percent-space-div
{
  flex: 0 0 auto;
  width :8%;
}


.chojin-09-percent-space-div
{
  flex: 0 0 auto;
  width :9%;
}



.chojin-10-percent-space-div
{
  flex: 0 0 auto;
  width :10%;
}

.chojin-15-percent-space-div
{
  flex: 0 0 auto;
  width :15%;
}

.chojin-20-percent-space-div
{
  flex: 0 0 auto;
  width :20%;
}

.chojin-25-percent-space-div
{
  flex: 0 0 auto;
  width :20%;
}

.chojin-30-percent-space-div
{
  flex: 0 0 auto;
  width :30%;
}


.chojin-35-percent-space-div
{
  flex: 0 0 auto;
  width :30%;
}

.chojin-40-percent-space-div
{
  flex: 0 0 auto;
  width :40%;
}

.chojin-45-percent-space-div
{
  flex: 0 0 auto;
  width :40%;
}

.chojin-50-percent-space-div
{
  flex: 0 0 auto;
  width :50%;
}

.chojin-55-percent-space-div
{
  flex: 0 0 auto;
  width :50%;
}

.chojin-60-percent-space-div
{
  flex: 0 0 auto;
  width :60%;
}


.chojin-65-percent-space-div
{
  flex: 0 0 auto;
  width :50%;
}


.chojin-70-percent-space-div
{
  flex: 0 0 auto;
  width :70%;
}

.chojin-75-percent-space-div
{
  flex: 0 0 auto;
  width :70%;
}


.chojin-80-percent-space-div
{
  flex: 0 0 auto;
  width :80%;
}

.chojin-85-percent-space-div
{
  flex: 0 0 auto;
  width :80%;
}

.chojin-90-percent-space-div
{
  flex: 0 0 auto;
  width :90%;
}


.chojin-95-percent-space-div
{
  flex: 0 0 auto;
  width :90%;
}

.chojin-100-percent-space-div
{
  flex: 0 0 auto;
  width :100%;
}
/******************************************************/
/************** FIN : DIV TOOL*************************/
/******************************************************/


/****************************************************************/
/************* DÉBUT : CHOJIN OPTION  TABLE (tableau regroupant les icons qui permette de modifier les entités : crayon #edit croix #supprimer)  ****************/
/****************************************************************/

.chojin-option-table
{
  margin-left :auto;
  margin-right : auto;
}

/************************************************************/
/************* FIN : CHOJIN OPTION  TABLE   ****************/
/**********************************************************/

/************* DÉBUT : CHOJIN MAIN  TABLE (utilisé dans les list.js et de manière générale quand la page contient principalement un tableau)  ****************/

.chojin-main-table
{
  margin-left :auto;
  margin-right : auto;
  text-align: center;
  width : 70%;
  border-collapse: collapse;
}



.chojin-main-table td
{
  border: 2px solid #313f5f;
 
}



/* .chojin-main-table tr:hover
{
  background: #313f5f;

} */

/************* FIN : CHOJIN MAIN  TABLE   ****************/


/************* DÉBUT : CHOJIN MAIN DIV (utilisé dans les view.js afin d'afficher du texte exemple : article de blog, article d'utilisation)  ****************/

.chojin-main-div
{
  margin-left :auto;
  margin-right : auto;
  text-align:justify;
  width : 70%;
  /* background: aliceblue; */
  /* padding : 20px; */

  font-family: sans-serif;
  color:#313f5f;
}

.chojin-main-div h1
{
  text-align:center;
}


/************* FIN : CHOJIN MAIN  DIV  ****************/




/**********************DÉBUT : LIEN CHOJIN ******************/

.chojin-link
{
  cursor: pointer;
  text-decoration: underline;
  padding: 10px;
  font-weight: bold;
  font-family: sans-serif; 
  
}




/**********************FIN : LIEN CHOJIN ******************/


/**********************DÉBUT : CHOJIN ICON ******************/

.chojin-icon
{
  margin-left :auto;
  margin-right : auto;
}

/**********************FIN : CHOJIN ICON ******************/




/**********************DÉBUT : CHOJIN BUTTON ******************/

.chojin-button
{
  background-color : #313f5f; 
  color :#f0f2f9; 
  padding: 10px;
  border: 1px solid white;
  cursor: pointer;
  font-weight: bold;
}

.chojin-button:hover
{
  background-color : #f0f2f9; 
  color :#313f5f; 
  border: 1px solid black;
}



.chojin-round-button
{
  background-color : #313f5f; 
  color :#f0f2f9; 
  padding: 10px;
  border: 1px solid white;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
}




.chojin-round-button-selected
{
  background-color : #f0f2f9; 
  color :#313f5f; 
  padding: 10px;
  border: 1px solid white;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
}

.chojin-round-button:hover
{
  background-color : #f0f2f9; 
  color :#313f5f; 
  border: 1px solid black;
}



.round-blank-text-button
{
  background-color : white; 
  color : #313f5f; 
  padding: 10px;
  border: 2px solid gray;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
}

/**********************FIN : CHOJIN BUTTON ******************/



/**********************DÉBUT : CHOJIN INPUT ******************/
.chojin-input
{
  padding: 8px;
}


.chojin-input-not-valid
{
  border: 2px solid red;
}

/**********************FIN : CHOJIN INPUT ******************/





/**********************DÉBUT : CHOJIN INPUT ******************/
.chojin-error-message-div
{
  font-weight: bold;
  font-family: sans-serif; 
  color:red;
}

/**********************FIN : CHOJIN INPUT ******************/


/**********************DÉBUT : CHOJIN INPUT ******************/
.chojin-label
{
  font-weight: bold;
  font-family: sans-serif; 
}

/**********************FIN : CHOJIN INPUT ******************/

.chojin_option_button
{
  background-color : blue; 
  color :white; 
  text-transform: uppercase;
  float :right;
}

.chojin_label_field
{
  text-align : left; 
  display: block;
  padding: 10px;
}

.chojin_input_field:valid
{
  border-color: green;
}


.chojin_input_field:invalid
{
  border-color: red;
}



.chojin_table
{
  border: 2px solid #313f5f;
}

 .chojin_tr 
{
  border: 2px solid #313f5f;
} 

/* .chojin_td 
{
  border: 2px solid lightcyan;
} */




#display-image{
  width: 500px;
  height: 325px;
  border: 2px solid black;
  background-position: center;
  background-size: cover;
  }