/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap');
*/
  /* latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(../font/latinMon100.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  
/* latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url(../font/latinMon200.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

body {
    background: #eeeeee;
    font-family: 'Montserrat', sans-serif;
}


.main-cardcontainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 4px 16px;
    font-size: 12px;
}

#cards-container {
    overflow: hidden;
    margin: 10px;
}

.cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 99999px;
}

.card {
    background: #f8f8f8;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    width: 300px;
    margin: 10px;
}

.card:hover {
    -webkit-box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
}


#slide-left-container,
#slide-right-container {
    display: none;
}

#slide-left-container.active,
#slide-right-container.active {
    display: block;
    cursor: pointer;
}

.slide-left,
.slide-right {
    border-color: #000980;
    border-style: solid;
    height: 20px;
    width: 20px;
    margin-top: 30%;
}

.slide-left {
    border-width: 4px 0 0 4px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin-left: 40%;
}

.slide-right {
    border-width: 4px 4px 0 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: 22%;
}

table{
    overflow: hidden;
    height: auto;
}

.change-color{
    background: #2c3e61;
    color: white
}


/* .canvas-container{

    width:200px !important;
    height:60px !important;
  
  } */

  i:hover{
    cursor: pointer;
  }