.cm-bootstrapinfo {color:#17a2b8;}
.cm-bootstrapprimary {color:#007bff;}
.cm-bootstrapwarning {color:#ffc107;}
.cm-bootstrapdanger {color:#dc3545;}
.cm-bootstrapsecondary {color:#6c757d;}
.cm-bootstrapsuccess {color:#28a745;}
.cm-bootstraplight {color:#f8f9fa;}
.cm-bootstrapdark {color:#343a40;}

.colormenutext {
    color:magenta;
}

.questionboxclass {
    
    border:2px solid black;
    border-radius:5px;
    padding-left:5px;
    padding-right:5px;

}

.blink {
  animation: blinker 1s ease-in-out infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.tableRowClass {
    
    border:2px solid #ffaf00;
    background-color:#3366cc;
   
}

.tableRowClassKind1 {
    
    border:2px solid #ffaf00;
    background-color:#112233;
   
}

.tableRowClassKind2 {
    
    border:2px solid #ffaf00;
    background-color:#332211;
   
}

.tableRowClassImages {
    
    border:2px solid #ffaf00;
    background-color:#3366cc;
    height:80px;
}


[contenteditable="true"] {
    //background-color: grey;
    background-color:#eee;
}

[contenteditable="true"]:focus {
    background-color: white;
}

[contenteditable] {
  outline: 0px solid transparent;
}

/*
taken from
https://fdossena.com/?p=html5cool/buttons/i.frag
*/

.wrapper {
  text-align: center;
  /*background:#ccc;*/
  /*padding: 20px;*/
}

/*
I am generalising buttons. I have to define general button and generalise function
createModernButton of basic.js.
*/

/*
a.nav-link {
    display: flex;
    align-items: center;
}
*/

.brightonhover {
    filter: brightness(70%);
}
.brightonhover:hover {
    filter: brightness(100%);
    transition: all 0.3s ease 0s;
}


.darkonhover {
}
.darkonhover:hover {
    filter: brightness(70%);
    transition: all 0.3s ease 0s;
    border-radius:5px;
}
@keyframes darkonhoveranimation {
    0% {
	filter: brightness(80%);
	opacity:1;
	transform:scale(1);
	border-radius:5px;
    }
    50% {
	filter: brightness(80%);
	opacity:0.5;
	transform:scale(1.1);
	border-radius:5px;
    }
    100% {
	filter: brightness(80%);
	opacity:1;
	transform:scale(1);
	border-radius:5px;
    }
}




/*
.darkonhover:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
}
*/
.colorsIcon {
    color: #ffffcc;
    background-color:#007bff;
    border:none;
    outline:none;
    /*background-image:radial-gradient(#3366cc,#224488);*/
  
    text-align: center;
    margin: 2px;
}
  
.colorsIcon:hover {
    color: #007bff;
    background-color: #ffffcc;
    /*background-image:radial-gradient(#ffffcc,#cccc88);*/
    transition: all 0.3s ease 0s;
}

.colorsIconGreen {
    color: #ffffcc;
    background-color:#44ff44;
    border:none;
    outline:none;
    /*background-image:radial-gradient(#3366cc,#224488);*/
  
    text-align: center;
    margin: 2px;
}
  
.colorsIconGreen:hover {
    color: #44ff44;
    background-color: #ffffcc;
    /*background-image:radial-gradient(#ffffcc,#cccc88);*/
    transition: all 0.3s ease 0s;
}

.colorsIconRed {
    color: #ffffcc;
    background-color:#ff4444;
    border:none;
    outline:none;
    /*background-image:radial-gradient(#3366cc,#224488);*/
  
    text-align: center;
    margin: 2px;
}
  
.colorsIconRed:hover {
    color: #ff4444;
    background-color: #ffffcc;
    /*background-image:radial-gradient(#ffffcc,#cccc88);*/
    transition: all 0.3s ease 0s;
}



.colorsIconWhiteBackground {
    color: #ffffcc;
    background-color:#007bff;
    border:2px solid #ffaf00;
    //border:none;
    outline:none;
    /*background-image:radial-gradient(#3366cc,#224488);*/
  
    text-align: center;
    margin: 2px;
}

.colorsIconWhiteBackground:hover {
    color: #007bff;
    background-color: #ffffcc;
    /*background-image:radial-gradient(#ffffcc,#cccc88);*/
    transition: all 0.3s ease 0s;
}

@keyframes iconanimation {
    0% {
	opacity:1;
	transform:scale(1);
	color: #007bff;
	background-color: #ffffcc;
    }
    50% {
	opacity:0.5;
	transform:scale(1.1);
	color: #007bff;
	background-color: #ffffcc;
    }
    100% {
	opacity:1;
	transform:scale(1);
	color: #007bff;
	background-color: #ffffcc;
    }
}

@keyframes iconanimationwhitebackground {
    0% {
	opacity:1;
	transform:scale(1);
	color: #007bff;
	background-color: #ffffcc;
	border:2px solid #007bff;
    }
    50% {
	opacity:0.5;
	transform:scale(1.1);
	color: #007bff;
	background-color: #ffffcc;
	border:2px solid #007bff;
    }
    100% {
	opacity:1;
	transform:scale(1);
	color: #007bff;
	background-color: #ffffcc;
	border:2px solid #007bff;
    }
}


@keyframes obsoleteanimation {
    0% {
	opacity:1;
    }
    50% {
	opacity:0.5;
    }
    100% {
	opacity:1;
    }
}

.obsoleteaddress {
    animation: obsoleteanimation ease-in-out 0.7s infinite;
    /*animation: iconanimation ease-in-out 0.7s infinite;*/
    
}

.scaleonhover {
}

.scaleonhover:hover {
    transform:scale(1.15);
    transition: all 0.3s ease 0s;
}

.coloroption {
    width:20px;
    height:20px;
    border:1px solid #000099;
}

.coloroption:hover {
    transform:scale(1.15);
    transition: all 0.3s ease 0s;
}

.colorsButton {
    color: #ffffcc;
    /*
    border-color:#33cccc;
    border-style: solid;
   */
    border: 2px solid #33cccc;
    border-radius: 4px;
    margin: 2px;


    /*background-color:#3366cc;*/
    /*
    border:none;
    outline:none;
   */
    background-image:radial-gradient(#3366cc,#224488);
  
    text-align: center;
}
  
.colorsButton:hover {
    color: #000099;
    border-color:#3366cc;
    /*
    background-color: #ffffcc;
   */
    background-image:radial-gradient(#ffffcc,#cccc88);
    transition: all 0.3s ease 0s;
}


.colorsButtonImportant {
    color: #ffffcc;
    border: 2px solid #ff5555;
    border-radius: 4px;
    margin: 2px;
    background-image:radial-gradient(#661111,#330000);
    text-align: center;
}
.colorsButtonImportant:hover {
    color: #661111;
    border-color:#661111;
    background-image:radial-gradient(#ffffcc,#cccc88);
    transition: all 0.3s ease 0s;
}
@keyframes coloranimationimportant {
    0% {
	opacity:1;
	transform:scale(1);
	color: #661111;
	background-image:radial-gradient(#ffffcc,#cccc88);
    }
    50% {
	opacity:0.5;
	transform:scale(1.1);
	color: #661111;
	background-image:radial-gradient(#ffffcc,#cccc88);
    }
    100% {
	opacity:1;
	transform:scale(1);
	color: #661111;
	background-image:radial-gradient(#ffffcc,#cccc88);
    }
}





.entranceButton {
/*border-size: 0.2em;*/
font-weight: 700;
padding: 2%;
text-transform: uppercase;
/*border-radius: 10px;*/
display: inline-block;
transition: all 0.3s ease 0s;
font-family: Ubuntu;
}

.entranceButton:hover {
font-weight: 700 !important;
letter-spacing: 1px;
/*background-color: #FFFFFF;*/
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.3s ease 0s;
}

.tablecolors {
    color: #ffffcc;
}


/*
.entranceButton:focus {
    border: 0.2em solid #3366cc;
    font-weight: 700 !important;
    letter-spacing: 1px;
    -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
    -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
    animation: coloranimation ease-in-out 0.7s infinite;
}
*/
    /*animation-timing-function: cubic-bezier(0,0,1,1);*/
    /*animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);*/
    /*animation-timing-function: ease-in-out;*/


@keyframes animationeffect {
    0% {
	opacity:1;
	transform:scale(1);
    }
    50% {
	opacity:0.5;
	transform:scale(1.1);
    }
    100% {
	opacity:1;
	transform:scale(1);
    }
}

@keyframes coloranimation {
    0% {
	opacity:1;
	transform:scale(1);
	color: #000099;
	background-image:radial-gradient(#ffffcc,#cccc88);
	/*color: #000099;*/
	/*background-image:radial-gradient(#ffffcc,#cccc88);*/
	/*
	background-image:none;
	background-color: #ffffcc;
       */
    }
    50% {
	opacity:0.5;
	transform:scale(1.1);
	color: #000099;
	background-image:radial-gradient(#ffffcc,#cccc88);
	/*color: #ffffcc;*/
	/*background-image:radial-gradient(#3366cc,#224488);*/
	/*
	background-image:none;
	background-color:#3366cc;
       */
    }
    100% {
	opacity:1;
	transform:scale(1);
	color: #000099;
	background-image:radial-gradient(#ffffcc,#cccc88);
	/*color: #000099;*/
	/*background-image:radial-gradient(#ffffcc,#cccc88);*/
	/*
	background-image:none;
	background-color: #ffffcc;
       */
    }
}

@keyframes animationvisibility {
/*
    from {opacity:0;}
    to {opacity:1;}
*/
    from {transform:scale(0);}
    to {transform:scale(1);}
}

/* The element to apply the animation to */
.fadeIn {
    animation-name: animationvisibility;
    animation-duration: 1s;
}


@keyframes animationopacityin {
    from {opacity:0;}
    to {opacity:1;}
}

@keyframes animationopacityout {
    from {opacity:0;}
    to {opacity:1;}
}

@keyframes animationscaleyin {
    from {
	transform-origin: top;
	transform: scaleY(0);
    }
    to {
	transform-origin: top;
	transform: scaleY(1);
    }
}

@keyframes animationscaleyout {
    from {
	transform-origin: top;
	transform: scaleY(1);
    }
    to {
	transform-origin: top;
	transform: scaleY(0);
    }
}

.OpacityIn {
    animation-name: animationopacityin;
    animation-duration: 1s;
}


@font-face {
font-family: Gloria;
src: url("./Chalkduster.woff");
}


.gloriatitle {
    /*
    font-weight: 700;
    font-size: 3.5em;
    padding-top: 5%;
   */
    color: #ffaf00;
    font-family: Gloria;
    font-style: italic;
    text-shadow: 2px 2px 4px #33cccc;
}

.gloriacomment {
    /*
    font-weight: 700;
    font-size: 1.5em;
   */
    color: #ffffcc;
    font-family: 'Ubuntu';
    text-shadow: 1px 1px 3px #33cccc;
}

.textcolor {
    color: #ffffcc;
}

.orangecolor {
    color: #ffaf00;
}

.inputeditable {
    background-color:#ffffcc;
    color:#00005a;
    padding:4px;
}

.buttoneditable {
    background-color:#33cccc;
    color:#00005a;
}


.verticalspace {
    padding:5%;
}

.colorssubmenu {
    color: #ffffcc;
    border: 2px solid #33cccc;
    border-radius: 4px;
    margin: 2px;
    /*background-image:radial-gradient(#3366cc,#224488);*/
    background-color:#3366cc;
}
.colorssubitem {
    color:#ffffcc;
}
.colorssubitem:hover {
    color: #000099;
    background-image: linear-gradient(#3366cc, #ffffcc, #ffffcc, #3366cc);
}

/*
--->
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
.navbar-default .navbar-nav > li > a {
    color:#ffffcc;
    background-image:radial-gradient(#3366cc,#224488);
    border: 2px solid #33cccc;
    border-radius: 4px;
    margin: 2px;
}
.navbar-default .navbar-nav > li > a:hover {
    border: 2px solid #3366cc;
    color: #000099;
    background-image:radial-gradient(#ffffcc,#cccc88);
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: blue;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: yellow;
    background-color: #D5D5D5;
}

.navbar-default .navbar-nav .dropdown-menu  {
    color:#ffffcc;
    background-color:#3366cc;
    border: 2px solid #33cccc;
    border-radius: 4px;
}
.navbar-default .navbar-nav .dropdown-menu>a  {
    color:#ffffcc;
}
.navbar-default .navbar-nav .dropdown-menu>a:hover,.navbar-default .navbar-nav .dropdown-menu>a:focus  { 
    color: #000099;
    background-image: linear-gradient(#3366cc, #ffffcc, #ffffcc, #3366cc);
}
*/



/*
Taken from

https://dev.to/gscode/10-cool-css-text-effects-3elk
*/

.backgroundtools {
    background-image:radial-gradient(#00005a,#000004);
}

.backgroundeditaudio {
    background-image:radial-gradient(#444411,#222200);
}



.main-content {
  overflow:hidden;
    position: relative;
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    
    height: 100vh;
    
    background: linear-gradient(to right, rgba(36,31,31,1) 0%, rgba(36,31,31,1) 32%, rgba(74,71,70,1) 100%);
    color: #fff;
    text-align: center;
}

.vignette{
  position:absolute;
  width:100%; height:100%;
  box-shadow:inset 0px 0px 150px 20px black;
  mix-blend-mode: multiply;
  -webkit-animation: vignette-anim 3s infinite; /* Safari 4+ */
  -moz-animation:    vignette-anim 3s infinite; /* Fx 5+ */
  -o-animation:      vignette-anim 3s infinite; /* Opera 12+ */
  animation:         vignette-anim 3s infinite; /* IE 10+, Fx 29+ */
}

.noise {
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    
    pointer-events: none;
    opacity: .15;
}

.line{
  position:absolute;
  height:100%; width:1px;
  opacity:0.1;
  background-color:#000;
}

.titleCont{position:relative;}

.main-title {
    padding: .3em 1em .25em;    
    font-weight: 400;
    font-size: 40px;
    color: white;
    font-family: 'Bellefair', serif;
    position:relative;
    line-height:1.3;
    white-spacing:
}

.overTitle{
    position:absolute;
    top:0;
    left:0;
}

.dot{
  width:3px;
  height:2px;
  background-color:white;
  position:absolute;
  opacity:0.3;
}


@-webkit-keyframes vignette-anim {
  0%   , 100%{ opacity: 1; }
  50% { opacity: 0.7; }
}
@-moz-keyframes vignette-anim {
  0%   , 100%{ opacity: 1; }
  50% { opacity: 0.7; }
}
@-o-keyframes vignette-anim {
  0%   , 100%{ opacity: 1; }
  50% { opacity: 0.7; }
}
@keyframes vignette-anim {
  0%   , 100%{ opacity: 1; }
  50% { opacity: 0.7; }
}

/*
Taken from https://css-tricks.com/the-shapes-of-css/
and for the animation: https://loading.io/css/
*/
.heart {
    position: relative;
    width: 3em;
    height: 2.7em;
    animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
.heart:before,
.heart:after {
    position: absolute;
    content: "";
    left: 1.5em;
    top: 0;
    width: 1.5em;
    height: 2.4em;
    background: blue;
    border-radius: 1.5em 1.5em 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}
.heart:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}
@keyframes lds-heart {
  0% {
    transform: scale(0.95);
  }
  5% {
    transform: scale(1.1);
  }
  39% {
    transform: scale(0.85);
  }
  45% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(0.9);
  }
}

/*
.lds-heart {
  width: 32px;
  height: 32px;
  background: #fff;
  color:#0000ff;
  animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
.lds-heart::after,
.lds-heart::before {
  content: " ";
  width: 32px;
  height: 32px;
  color:#0000ff;
  background: #fff;
}
.lds-heart::before {
  left: -24px;
  border-radius: 50% 0 0 50%;
}
.lds-heart::after {
  top: -24px;
  border-radius: 50% 50% 0 0;
}
@keyframes lds-heart {
  0% {
    transform: scale(0.95);
  }
  5% {
    transform: scale(1.1);
  }
  39% {
    transform: scale(0.85);
  }
  45% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(0.9);
  }
}
*/


.sk-cube-grid {
  width: 4em;
  height: 4em;
  margin: 2em auto;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #0000ff;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
          animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1); 
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
  } 
}

disabledinputtext {
    color:#00005a;
    background-image:radial-gradient(#ffffcc,#cccc88);
}


modal-dialog {
    border: 2px solid #33cccc;
}

.modal-header {
    color:#00005a;
    background-image:radial-gradient(#ffffcc,#cccc88);
    /*
    background-color: #004000;
    padding:5px 5px;
    color:#FFF;
    border-bottom:1px dashed #BBBB00;
   */
}
 
.modal-content {
    /* 80% of window height */
    /*height: 90%;*/
    /*background-color:#D7FFEB;*/
    border: 2px solid #33cccc;
}       

.modal-body {
    color:#ffffcc;
    background-image:radial-gradient(#00005a,#000004);
    /*
    color:#00005a;
    background-image:radial-gradient(#ffffcc,#cccc88);
   */
}
 
 
.modal-footer {
  background-color:#004000;
  padding: 1rem;
  border-top: 1px solid #e9ecef;
}



.splitbox {
  display: flex;
  flex-flow: column;
  height: 100%;
}


.splitbox .row.splitheader {
  flex: 0 1 auto;
}

.splitbox .row.splitcontent {
  flex: 1 1 auto;
  overflow-y: auto;
}

.splitbox .row.splitfooter {
  flex: 0 1 40px;
}