.indigo{background-color:#34a853 !important;color: #fff;border-radius: 80px; margin:0 auto;min-width: 240px;}
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
input{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0;}
input{overflow:visible;}
canvas{display:inline-block;}
html{-webkit-box-sizing:border-box;box-sizing:border-box;}
*,*:before,*:after{-webkit-box-sizing:inherit;box-sizing:inherit;}
input{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;}
table,td{border:none;}
table{width: 100%;
    display: flex;
    border-collapse: collapse;
    border-spacing: 0;min-width: 180px;}
tr{border-bottom:1px solid rgba(0,0,0,0.12);}
td{padding:15px 5px;display:table-cell;text-align:left;vertical-align:middle;border-radius:2px;}
.container{margin:0 auto;max-width:1280px;width:90%;}
@media only screen and (min-width: 601px){
.container{width:85%;}
}
@media only screen and (min-width: 993px){
.container{width:70%;}
}
.row{margin-left:auto;margin-right:auto;margin-bottom:20px;}
.row:after{content:"";display:table;clear:both;}
.row .col{float:left;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 .75rem;min-height:1px;}
.row .col.s3{width:100%;margin-left:auto;left:auto;right:auto;}
.row .col.s6{width:100%;margin-left:auto;left:auto;right:auto;}
.row .col.s9{width:100%;margin-left:auto;left:auto;right:auto;}
html{line-height:1.5;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-weight:normal;color:rgba(0,0,0,0.87);}
@media only screen and (min-width: 0){
html{font-size:14px;}
}
@media only screen and (min-width: 992px){
html{font-size:14.5px;}
.row .col.s3{width:35%;margin-left:auto;left:auto;right:auto;}
.row .col.s9{width:65%;margin-left:auto;left:auto;right:auto;}
}
@media only screen and (min-width: 1200px){
html{font-size:15px;}
}
.cardc{box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.27),0 1px 3px 1px rgba(60, 64, 67, 0.21);position:relative;margin:.5rem 0 1rem 0;background-color:#fff;-webkit-transition:-webkit-box-shadow .25s;transition:-webkit-box-shadow .25s;transition:box-shadow .25s;transition:box-shadow .25s, -webkit-box-shadow .25s;border-radius:2px;}
.cardc .cardc-title{font-size:24px;font-weight:300;}
.cardc .cardc-image{position:relative;}
.cardc .cardc-image .cardc-title{color:#fff;position:absolute;bottom:0;left:0;max-width:100%;padding:24px;}
.cardc .cardc-content{padding:10px;border-radius:0 0 2px 2px;}
::placeholder{color:#d1d1d1;}
input[type=text]:not(.browser-default){background-color:transparent;border:none;border-bottom:1px solid #9e9e9e;border-radius:0;outline:none;height:3rem;width:100%;font-size:16px;margin:0 0 8px 0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-transition:border .3s, -webkit-box-shadow .3s;transition:border .3s, -webkit-box-shadow .3s;transition:box-shadow .3s, border .3s;transition:box-shadow .3s, border .3s, -webkit-box-shadow .3s;}
input[type=text]:not(.browser-default):disabled{color:rgba(0,0,0,0.42);border-bottom:1px dotted rgba(0,0,0,0.42);}
input[type=text]:not(.browser-default):focus:not([readonly]){border-bottom:1px solid #26a69a;-webkit-box-shadow:0 1px 0 0 #26a69a;box-shadow:0 1px 0 0 #26a69a;}
.input-field{position:relative;margin-top:1rem;margin-bottom:1rem;}
.file-field{position:relative;}
.file-field .file-path-wrapper{overflow:hidden;padding-left:10px;}
.file-field input.file-path{width:100%;}
.file-field .btn{height:3rem;line-height:3rem;}
.file-field span{cursor:pointer;}
.file-field input[type=file]{position:absolute;top:0;right:0;left:0;bottom:0;width:300px;margin:0 auto;padding:0;font-size:20px;cursor:pointer;opacity:0;filter:alpha(opacity=0);}

#canvas {
    touch-action: none;
    background-color: #fff;
    width: 100%;
    cursor: none;
    border-radius: 15px;
    min-height: 300px;
    box-shadow: 0 4px 13px -3px rgba(0, 0, 0, 0.10196);
}

#cursor {
    position: absolute;
    touch-action: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    height: 140px;
    opacity: 0;
    border: 34px solid #fff;
    border-radius: 50%;
    pointer-events: none;
    transform: scale(0.4);
    transition: 0.15s transform;
}

#cursor.touched {
    transform: scale(1);
    transition: 0.15s transform;
}

#cursor::before {
    content: '';
    display: inline;
    width: 18px;
    height: 18px;
    border: 4px solid #fff;
    opacity: 0.7;
    border-radius: 50%;
    transition: 0.15s transform;
}

#cursor.touched::before {
    transform: scale(4.1);
    border-width: 7px;
    transition: 0.15s transform;
}

.container {
    width: 90%;
    max-width: none;
}

#colorView {
    width: 100%;
    height: 150px;
    background-color: #3f51b5;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.cardc {
    margin: 0;
}

tr {
    border: none;
}

td {
    padding: 5px;
    font-size: 14px;
    font-weight:500;
}
td svg{display: inline-block;}
#Hex,#RGB,#HSV,#CMYK,#HSL,#HWB,#NCOL,#LAB{
    font-weight: 700;
}
td:first-child {
    color: #666;
    text-align: right;
    width: 90px;
    font-size: 14px;
    font-weight: 300;

}

.temptitle {
    opacity: 0.1;
    top: -2em;
    font-size: 0.3em;
}

.cardc {
    border-radius: 15px;
}

.main{padding: 0px; margin-top: 0px;}
.tool__header {
    padding: 0px 0px 30px;
  }
  .cardbg{position: absolute;
    bottom: 34px;
    left: 34px;
    text-align: left;
    min-width: 200px;}
  .card-title{
  font-weight: 700;
  font-size: 22px;}
    .card-image{position: relative;}

    .card {
        padding: 0px;
        text-align: center;
        width: 100%;
        min-height: 80px;
        box-shadow: 0 4px 13px -3px rgba(0, 0, 0, 0.10196);
  border-radius: 17px;
      }

      .why-use-monitor{padding-top: 160px;margin-bottom: 40px;}
.why-use-monitor h1{text-align: center;font-size: 42px; font-weight: 700;margin-bottom: 20px;}
.why-use-monitor p{text-align: center;}
        .header{position: absolute;}